As part of creating a writing guide for my content, I've been thinking about how to create a glossary of technical terms that we can expand as we go along. Yahoo! Style Guide provided such a glossary and made it available for download so people could use it as is or use it as a starting point for their own glossaries. The project tries to create a glossary of relevant terms for a technology blog. Some steps leading to this are: 1. Convert the Yahoo Style Guide to JSON to use as the base for the glossary 2. Decide if...
Most current browsers support ESModuleshttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules. This is the way the ECMAScript standard defines import modules. However, because it's come late to the party after UMDhttps://github.com/umdjs/umd and CommonJShttps://nodejs.org/api/modules.htmlmodulesmodulescommonjsmodules modules, they are not widely used on client-side code. One of the problems is how to reference the modules we want to import. Import maps are a way to map the names of imported packages to the full path on the filesystem allowing developers to use bare module import. At their simplest, import maps are a list of tuples in the form of : The following example gives Lodash the identified Lodash, like...
A lot of times we need to build a project every time we make changes. I picked my Gulp publishing process to test if Github actions work with this. The idea is that every time we push a commit or we close a Pull Request, Github Actions will run the Gulp default build process from the content in the main branch. See the Github Actions Documentationhttps://docs.github.com/en/actions for more information about the tool, how it works and what you can do with it. The First Try In the first pass, we want to validate that the project is set up correctly...
I've always been interested in web annotations as a means to increase interaction between users and content and between users. Over the time I've been researching the annotation landscape I've found that Hypothesishttps://hypothes.is is my favorite. It also has a WordPress pluginhttps://wordpress.org/plugins/hypothesis/ that integrates personal Hypothesis accounts with whatever sites they visit, not just my WordPress site. This post will discuss web annotations, how they are, and how they work. It will also discuss how to incorporate Hypothesis into a WordPress site using a plugin. What are web annotations? Annotations are an additional layer of information attached to a web...
If you work with web components, one of the pain points is how to add styles to multiple copies of the same component. None of the existing solutions work well and all have one or more rough edges. See the CSS Modules Scripts Chrome Status Entryhttps://chromestatus.com/feature/5948572598009856 for an explanation of the rough edges as seen by the team implementing the feature. CSS Module Scriptshttps://web.dev/css-module-scripts/ CSS Modules for short allows you to import an external stylesheet and attach it to multiple documents and components. js import sheet from './index.css' assert { type: 'css' }; document.adoptedStyleSheets = ...document.adoptedStyleSheets, sheet; // Attach to...
Last April, I wrote Evergreen browsers and looking for a sane JS baselinehttps://publishing-project.rivendellweb.net/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 applicationshttps://web.dev/publish-modern-javascript/ 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...
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...
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 npxhttps://www.npmjs.com/package/npx command to scaffold a new block plugin. The command is: bash 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...
@wordpress/envhttps://www.npmjs.com/package/@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 Prohttps://docs.docker.com/docker-for-windows/install/, all other versions of Windowshttps://docs.docker.com/toolbox/toolboxinstallwindows/, macOShttps://docs.docker.com/docker-for-mac/install/, and Linuxhttps://docs.docker.com/v17.12/install/linux/docker-ce/ubuntu/install-using-the-convenience-script. 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: bash npm -g i...
XML still hunts us. There are still XML vocabularies that are necessary for the web to work well. One of these vocabularies is SVGhttps://www.w3.org/TR/SVG11/, 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 xmlbuilder2https://oozcitak.github.io/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....
