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...
In addition to the DevTools menu and the Chrome extension and the Lighthouse CLI, there are ways to use Lighthouse programmatically in ways that would be too time-consuming to do with the lighthouse tools already available. The simplest example will run all Lighthouse reports for the given URL using the default options for Lighthouse. js function launchChromeAndRunLighthouseurl, opts, config = null { return chromeLauncher.launch{chromeFlags: opts.chromeFlags} .thenchrome => { opts.port = chrome.port; return lighthouseurl, opts, config .thenresults => { return chrome.kill .then => results.lhr }; }; } The lighthouse configurations docshttps://github.com/GoogleChrome/lighthouse/blob/master/docs/configuration.md provides a detailed description of all the options that you...
Since version 59, Chrome DevTools ship with a coverage analyzer that will tell you how much of the Javascript you load is actually used on your pages. This is important because, if the code is yours, you can eliminate dead weight and reduce the size of your site's styles and scripts. Running Coverage Analysis Running coverage from Chrome DevTools is fairly straight forward. Open DevTools Command + Option + I on Mac or Control + Shift + I on Windows and look at the bottom of the DevTools window, there should be a coverage tab. When you select the coverage...
The template loading functions get\header, get\template\part, etc. have a new $args argument. So now you can pass an array’s of data to the templates. The idea is that we can now pass an object with additional, arbitrary, information for the template to use. In this example, we load a hypothetical foo template part and pass an array of items as the third parameter on the function call. php 'user', 'arbitrarydata' => array 'foo' => 'baz', 'bar' => true, , ; We can then use this arbitrary data on the template. The example uses the class attribute from the $args array...
Built-in roles have been available in WordPress since I started working with it at least version 2.9 if not from the very beginning... they work but they provide a limited toolset to work with. This becomes an issue in the following situations: - When you need to assign more specific permissions to a role than what's available in the default user hierarchy - When you need to expand roles beyond what WordPress offers - When you want to assign custom permissions to existing roles Plugins like Membershttps://wordpress.org/plugins/members/ allow you to expand and customize the roles on your system. They also...
Now that we have an LRS, a library to handle xAPI statement generation, and upload to the LRS let's look at some further thoughts on xAPI, cmi5, when to use it, and when not to use it. The first thing we need to do is figure out when is xAPI the best solution for our project. Some of the questions I would ask to help through this process: - Are we reusing existing content or are we creating brand new material? - Is all the content in an LMS or are we using content from external sources? - Are we...
