Daniel Post danielpost

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.

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:

Tech Lead Book

Introduction
What is a Tech Lead?
The Tech Lead Mindset
Becoming a Tech Lead
Working Cross-Functionally
The Art of Delegation
Technical Best Practices
Effective Decision Making

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({

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

	<?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

	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 () => {

	: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 */

-<?php
-/**
- * Searches the database for transients stored there that match a specific prefix.
- *
- * @author Brad Parbs, Kellen Mace
- * @param  string $prefix prefix to search for.
- * @return array          nested array response for wpdb->get_results.
- */
-function wds_campbell_search_database_for_transients_by_prefix( $prefix ) {

	function syntaxHighlight(json) {
	json = json.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
	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';
	}