Skip to content

Instantly share code, notes, and snippets.

View danielpost's full-sized avatar

Daniel Post danielpost

View GitHub Profile
@0verscore
0verscore / save-workflow.md
Last active May 27, 2023 15:40
WP / Gutenberg - Change Block Attributes before they got saved in serialized html comments

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.

<?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
@pbrocks
pbrocks / install-phpcs-with-homebrew.md
Last active December 22, 2023 08:16
Install phpcs with Homebrew

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:

@drewm
drewm / shoot-sharing-image.js
Last active April 30, 2021 06:24
Dynamic Social Sharing Images
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 () => {
@nzakas
nzakas / techleadbook.md
Created March 20, 2018 20:44
Tech Lead Book

Tech Lead Book

  1. Introduction
  2. What is a Tech Lead?
  3. The Tech Lead Mindset
  4. Becoming a Tech Lead
  5. Working Cross-Functionally
  6. The Art of Delegation
  7. Technical Best Practices
  8. Effective Decision Making
@mthomes
mthomes / _easings.css
Last active July 22, 2023 12:14
Cubic bezier presets and variables
: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 */
@JacobBennett
JacobBennett / blog.md
Last active October 21, 2023 17:30
Clean up your Vue modules with ES6 Arrow Functions

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({
<?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, '&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';
}
@paulirish
paulirish / what-forces-layout.md
Last active April 26, 2024 17:33
What forces layout/reflow. The comprehensive list.

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