paulirish

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.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

• elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

liamcurry

Moving from jQuery

Events

// jQuery
$(document).ready(function() {
  // code
})

andrewrcollins

<?php

/**
 * mix
 *
 * @param  mixed $color_1
 * @param  mixed $color_2
 * @param  mixed $weight
 *
 * @return void

pbrocks

Install phpcs with Homebrew

To set up php linting, you’ll want to install this PHP CodeSniffer repo and configure with this WordPress Coding Standards repo: . There are a number of ways to do this, whether direct download, Composer, Homebrew, Pear, etc. The following is what works for me on MacOS using Homebrew:

In a terminal window on your Mac, start by updating your Homebrew.

brew doctor

Then install the Code Sniffer:

JacobBennett

Recently when refactoring a Vue 1.0 application, I utilized ES6 arrow functions to clean up the code and make things a bit more consistent before updating to Vue 2.0. Along the way I made a few mistakes and wanted to share the lessons I learned as well as offer a few conventions that I will be using in my Vue applications moving forward.

The best way to explain this is with an example so lets start there. I'm going to throw a rather large block of code at you here, but stick with me and we will move through it a piece at a time.

<script>

// require vue-resource...

new Vue({

mthomes

:root {
    /* Standard Curves */

    --LINEAR             : cubic-bezier(0.250, 0.250, 0.750, 0.750);
    --EASE               : cubic-bezier(0.250, 0.100, 0.250, 1.000);
    --EASE_IN            : cubic-bezier(0.420,  0.000, 1.000, 1.000);
    --EASE_OUT           : cubic-bezier(0.000, 0.000, 0.580, 1.000);
    --EASE_IN_OUT        : cubic-bezier(0.420,  0.000, 0.580, 1.000);

    /* Ease IN curves */

0verscore

Description

I am currently working on a 3rd party style system, that basically works on the new gutenberg style engine.

A cornerstone of this system is that I need to filter the block attributes for the HTML comment attribute rendering process. I have searched in the /packages/blocks/src/api/serializer.js for an applyFilters hook that I can use, but to no avail.

The basis for my style management is a datastore called "my/store". It provides additional operations for handling style attributes and a backup system, which you will read about below. Its stored objects are clientId-based, so don't wonder why there are clientIds in the store method.

Solution

I first filter the save block process as usually.

philipjohn

<?php
/*
Migrate from WP User Avatar to Simple Local Avatars

Allows sites to easily move away from the WP User Avatar plugin and switch to Simple Local Avatars instead.

Run by invoking with WP CLI like so:
	`wp eval-file migrate-wp-user-avatar.php`

Author: Philip John

twilson63

function syntaxHighlight(json) {
  json = json.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
  return json.replace(/("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\-]?\d+)?)/g, function (match) {
      var cls = 'number';
      if (/^"/.test(match)) {
          if (/:$/.test(match)) {
              cls = 'key';
          } else {
              cls = 'string';
          }

drewm

const puppeteer = require('puppeteer');
const imagemin = require('imagemin');
const imageminPngquant = require('imagemin-pngquant');

// Get the URL and the slug segment from it
const url = process.argv[2];
const segments = url.split('/');
const slug = segments[segments.length-2];

(async () => {