vxsx

import path from 'path';
import fs from 'fs';
import initStoryshots from '@storybook/addon-storyshots';
import { imageSnapshot } from './storyshots-puppeteer';

import devices from 'puppeteer/DeviceDescriptors';

// Store the screenshots outside the source folder to prevent jest from 'watching' them.
// Since they're outside the src directory we nav to them relatively
const ROOTDIR = path.join(__dirname, '../../../');

vxsx

{% block object-tools-items %}
      {% if original.can_import_from_archive %}		      {% if original.can_import_from_archive %}
 +        <script>
 +            function closeSideframe() {
 +                try {
 +                    window.top.CMS.$('.cms-sideframe-close').trigger('click.cms.sideframe');
 +                } catch(e) {}
 +            }
 +        </script>
          {% url 'admin:translation-request-adjust-import-data' original.pk as adjust_url %}		          {% url 'admin:translation-request-adjust-import-data' original.pk as adjust_url %}

vxsx

# running browsersync inside docker container
# browser sync has to be installed via package.json
# docker-compose.yml
# it might look slightly different in your case, important parts are &WEB label and browsersync section
# the downside is it's not as fast as the one outside host system
web: &WEB
 build: .
 links:
  - "db:postgres"
 ports:

vxsx

{
    "latest": {
        "version": "3.4.1",
        "url": "https://"
    },
    "patches": [
        {
            "version": "3.3.3",
            "url": "https://"
        },

vxsx

Useful shortcuts

vxsx

Keybase proof

I hereby claim:

• I am vxsx on github.
• I am vxsx (https://keybase.io/vxsx) on keybase.
• I have a public key ASBVXbtmwApOPjWEKmvXCe53yDLTLnoEz9dagQNSxAVUvgo

To claim this, I am signing this object:

vxsx

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

.cms-toolbar {
    .cms-test {
        /* blah blah */
    }
    .cms-test2 {

vxsx

function mapValues(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    result[key] = fn(obj[key], key);
    return result;
  }, {});
}

function pick(obj, fn) {
  return Object.keys(obj).reduce((result, key) => {
    if (fn(obj[key])) {

vxsx

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout. This is also called reflow or layout thrashing, and is common performance bottleneck.

Element

Box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent
• elem.clientLeft, elem.clientTop, elem.clientWidth, elem.clientHeight
• elem.getClientRects(), elem.getBoundingClientRect()

vxsx

// ----
// Sass (v3.4.14)
// Compass (v1.0.3)
// ----

//##################################################################################################################
// #SETTINGS#

// #COLORS#
$color-white: #fff;