One of the reasons why I've been so interested in learning and using the WordPress REST API is to learn how to use WordPress as a headless CMShttps://www.sanity.io/blog/headless-cms-explained, one where the content management is decoupled from the presentation layer. I've also told myself that in 2020 I would start looking at Vue and possibly React more seriously as a way to create user interfaces and static sites. In February 2020, Sarah Drasner wrote How To Create A Headless WordPress Site On The JAMstackhttps://www.smashingmagazine.com/2020/02/headless-wordpress-site-jamstack/ for Smashing Magazine and released the codehttps://github.com/netlify-labs/headless-wp-nuxt on Github and, as the lazy developer, I will use...
Masonry layouts are interesting and a challenge to do with existing web Javascript since there's no way to do it natively with HTML and/or CSS. > Masonry is a grid layout based on columns. Unlike other grid layouts, it doesn’t have fixed height rows. Basically, Masonry layout optimizes the use of space inside the web page by reducing any unnecessary gaps. Without this type of layout, certain restrictions are required to maintain the structure of layout. From: Understanding Masonry Layouthttps://www.sitepoint.com/understanding-masonry-layout/ — Sitepoint 2014 The earliest example I remember of masonry layout is the Pinteresthttps://www.pinterest.com/ home page. !Pinterest home page showing...
One thing that particularly caught my attention when researching xAPI and SCORM was the xAPI Activities. An activity is a group of verbs and activities that describe actions specific to a group or a sub-group. They are part of the answer to my question: > How can I build the statement: Person A implemented technology X?. This post will discuss some of the elements in a profile and provide some introductory information about them. While profiles are technical in nature, I believe that they are also useful for designers and teams looking to implement the verbs in a profile. When...
When working with WordPress, one of the things I enjoyed was how easy it made it to use Gettext-based translation tooling and functionality to localize themes and plugins. I was thinking that it would be nice if there was an equivalent toolset for Javascript. node-gettexthttps://www.npmjs.com/package/node-gettext seems to fit the bill nicely. It provides facilities to load and work with existing PO files and it provides the basic tooling that we need to work directly with PO files generate with other tools. Even though Node now supports ESM and their related methods I'm sticking to CommonJS for a while longer so...
Note This feature needs an Origin Trial Keyhttps://web.dev/origin-trials/ for your origin. If you choose not to go for an Origin Trial then you and your users will need to enable the Font Access APIs flag font-access in chrome://flags and restart the browser. The web has had custom font capabilities from very early on in the history of CSS. CSS introduced @font-face in 1998 as part of CSS 2. It allowed developers to link to font files and use them to display content on the web. As with many things in the early days of the web, different browser vendors decided...
I was rereading I Used The Web For A Day Using A Screen Readerhttps://www.smashingmagazine.com/2018/12/voiceover-screen-reader-web-apps/ and realized that it's been a while since I last used VoiceOver the built-in screen reader for Mac to proof the content of my posts and pages. I said "fine, let's fire it up and listen to what the page I was reading sounds like". It wasn't as easy as I thought as I've forgotten most of the commands that I used to navigate content with Voiceover. So, rather than have to commit this to memory I'll post it here and generate a PDF of the...
Since a lot of work we do in CSS we actually do in Javascript, I thought it would be good to research how we can do media queries in JS too. There are two ways to work with media queries. The first one is to do something with the condition when the script first loads. In this example, create a media query using window.matchMediahttps://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia to determine if the document matched the specified media query. js // Define the query const mediaQuery = window.matchMedia"max-width: 768px"; // Create a media condition that // targets smaller than 768px wide const mediumSizeQuery = window.matchMedia"max-width:...
Topic-based documentation is content broken down into topics; small reusable chunks of content that can be reused in multiple documents. I try my best to write as if the document was topic-based. Some of the advantages I see: - Topic-based authoring makes you think about the content you write. The content is usually more focused - Users can go straight to the section with the information they need, and it should make sense on its own with little or no outside references - It allows you to tailor material for different audiences - Most topic-based authoring tools let you use...
While I've been doing WordPress theme development I've also been working on getting PHPCS PHP Code Snifferhttps://github.com/squizlabs/PHPCodeSniffer to work properly on my projects. I think I've finally got it. As usual, I was making things too hard on myself and it ended up being far easier to set up and use. The first tool we need is Composerhttps://getcomposer.org/ to install and manage dependencies. Think of Composer as the PHP version of NPM. Since I'm working on a Mac, I chose to install it with Homebrewhttps://brew.sh/ using the command below: bash brew install composer The next step is to install PHPCS...
There have been multiple attempts at getting a Filesystem API on the web. The one I'm referring to in this post is a Chromium-only feature available without a flag since Chrome 86, not the old-style API. This is also different from the API available to Chrome extensions. I used a standard HTML5 Boilerplate document. We add a single CSS class inside a style element to hide elements. css .hidden { display: none; } The HTML for the demo is simple. We create a text area and two buttons and assign IDs to each; this will make it easier to manipulate...
