Sean McHenry smchenrybc

Moving gulpfile from CommonJS (CJS) to ECMAScript Modules (ESM)

Context

del v7.0.0 moved to pure ESM (no dual support), which forced me to move my gulpfile to ESM to be able to continue to use del.

The author sindresorhus maintains a lot of npm packages and does not want to provides an upgrade guide for each package so he provided a generic guide. But this guide is a bit vague because it's generic and not helping for gulp, hence this guide.

Guide

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:

Migrating a Gulpfile from Gulp 3.9.1 to 4.0.2

Background

Via one of those mental leaps that one can only be achieved by working in two languages at once, I had found my way to Typescript.

I was excited about putting some rigour around my code. But as I sought to install the necessary dependencies, I started hitting versioning issues. I couldn't move forward with modern packages without addressing the dinosaur in the room, Gulp 3.9.1.

Migration Steps

58 bytes of CSS to look great nearly everywhere

When making this website, i wanted a simple, reasonable way to make it look good on most displays. Not counting any minimization techniques, the following 58 bytes worked well for me:

main {
  max-width: 38rem;
  padding: 2rem;
  margin: auto;
}

Recover MAMP MySQL database using .frm and .ibd files after InnoDB crash

After a power faliur (also can be a sudden restart or system crash), I ended up with corrupted database and lost the access to my local hosted websites for development. Even the MAMP's MySQL server was not starting.

Preparation

You will need to find the databases folders, in case of MAMP they are located in Applications/MAMP/db/mysql56 (or mysql57 depending on MySQL version).

You will find folders containing the database name, inside them you will find .frm and .ibd files. Take a copy of the entire folder for backup in another place, the desktop for example.

Installing Fish shell on MacOS (Intel and M1) using brew

Fish is a smart and user-friendly command line (like bash or zsh). This is how you can instal Fish on MacOS and make your default shell.

Note that you need the https://brew.sh/ package manager installed on your machine.

Install Fish

brew install fish

	/*
	Global WordPress Layout

	Ensures that the footer is always at the bottom of
	the page even if the page doesn't have enough content.

	See https://itsamoreh.dev/full-height-layouts-in-wordpress-block-themes/
	*/

	.wp-site-blocks {

	<?php

	/**
	* Ensure ACF fields can be previewed when post revisions are disabled
	* (`WP_POST_REVISIONS`).
	*
	* @listens action:wp_revisions_to_keep
	* Filters the number of revisions to save for the given post.
	*/
	add_filter( 'wp_revisions_to_keep', function ( int $num, WP_Post $post ) : int {

	# BEGIN: SECURITY HEADERS
	<ifModule mod_headers.c>
	Header always set Strict-Transport-Security: "max-age=31536000" env=HTTPS
	Header always set Content-Security-Policy "upgrade-insecure-requests;"
	Header always set X-XSS-Protection "1; mode=block"
	Header always set X-Content-Type-Options "nosniff"
	Header always set Expect-CT "max-age=7776000, enforce"
	Header always set Referrer-Policy: "no-referrer-when-downgrade"
	</IfModule>
	# END: SECURITY HEADERS

	<!-- Sample custom form-->
	<!-- We use admin-post.php provided to fully utilize the event driven nature of WordPress. -->
	<form id="form-id" action="<?php echo esc_url( admin_url('admin-post.php') ); ?>" method="post">
	<label for="first-name">First Name</label>
	<input type="text" name="first-name" id="first-name" required>
	<label for="last-name">Last Name</label>
	<input type="text" name="last-name" id="last-name" required>
	<label for="email">Email Address</label>
	<input type="email" name="email" id="email" required>
	<label for="birthday">Birthday:</label>