The Publishing Project

Baseline for Javascript development: modules in the browser without transpilation

Last April, I wrote Evergreen browsers and looking for a sane JS baseline looking for a sane Javascript baseline where I could write scripts without having to worry about transpilation for those browsers that didn’t support the features. I took a basic set of features from Publish, ship, and install modern JavaScript for faster applications and wrote about how to use them in ESModules that would run in Node.js. This post follows up on that one and will cover two approaches to using ESModules in the browser. The process below assumes that you already have a browserslist file or section

Another look at my Gulp build system

Every so often I like to look at my build process and see where I can make improvements or changes that are necessary because the code has changed. For this iteration the changes are: Finally switched to the current recommended method of defining tasks. Moved from Imagemin to gulp-libsquoosh Moved to markdown-it as the Markdown parser The syntax for gulp-exec changed so I moved the PDF generation code to the new syntax Another major and unexpected change is that node-sass is deprecated in favor of gulp-sass and the current dart-sass version As a result the sass task has been modified

A New Way to Create Block Plugins

As the Gutenberg ecosystem matures, we get new tools and features to support the creating plugins. One of the newest tools to create block plugins leverages npx command to scaffold a new block plugin. The command is: npx @wordpress/create-block The script will ask the following questions: The block slug used for identification (also the plugin and output folder name) The internal namespace for the block name (something unique for your block) The display title for your block The short description for your block (optional) The dashicon to make it easier to identify your block (optional) The category name to help

@wordpress/env development environment

@wordpress/env allows you to create a development environment for your WordPress plugin or theme. It addresses the following use case: You want to test your theme or plugin without installing it on a live site, whether development or production. @wordpress/env requires Docker to be installed on your machine.There are instructions available for installing Docker on Windows 10 Pro, all other versions of Windows, macOS, and Linux. Installing @wordpress/env I’ve chosen to install the package globally rather than as a project dependency to make it easier to use across multiple projects. The install command looks like this: npm -g i @wordpress/env

Building XML programmatically

XML still hunts us. There are still XML vocabularies that are necessary for the web to work well. One of these vocabularies is SVG, a means to create vector and mixed vector/raster graphics for the web. Writing these elements by hand can be error-prone and it’s definitely not fun. When researching another project (how to create a content.opf file for epub), I found the xmlbuilder2 library and it was a huge help for creating basic XML, including nested elements. So I started looking at how to use xmlbuilder to create basic SVG elements that I can reuse in my projects.