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...
One of the hottest things, when I was working in higher education, was SCORM. It provided a way for courses coded and packaged to the SCORM specification to send data to a Learning Management System for it to be tracked and recorded. Jump to 2010 when Rustici Software began the first research into SCORM 2.0 with the specification reaching a 1.0 release in 2013 and becoming first the TinCanAPI and, eventually, the Experience API xAPI. xAPI is based on Activity Streamshttp://activitystrea.ms/ and its corresponding draft RFChttps://raw.githubusercontent.com/activitystreams/activity-streams-verb-definition/master/activity-streams-verb-definition.txt and provides an education-focused extension to the activity streams specification so, in theory, we...
Inspired by Surma's article When should you be using Web Workers?https://surma.dev/things/when-workers/, I've been looking at ways to use web workershttps://developer.mozilla.org/en-US/docs/Web/API/WebWorkersAPI on my projects and I think I've found a good candidate. I write in Markdown and, until now, have had to rely on the build process to generate HTML files from the Markdown. It works but it requires rebuilding all the files whenever I add new content. The idea is as follows: 1. The page will create a worker 2. The worker will convert the Markdown to HTML and process syntax highlight commands 3. The worker will return the processed...
The CSS Display Module Level 3https://www.w3.org/TR/css-display-3/ has added new ways to tell browsers how we want to layout and display the content on our pages. We still have block, inline, none, and other values for display that have been available since CSS 1.0 back in the 1990s. The new features include a two-value version of the attribute. css .container { / these are equivalent / display: block; display: block flow; } display outside: The outside container value The , the first value in the two-element display declaration, defines the outer displayhttps://www.w3.org/TR/css-display-3/outer-role type, meaning the type of the outer box container....
Plugins like Jetpackhttps://jetpack.com/ don't work at all in development environments that don't use a fully qualified domain name or a domain that uses non-standard local domains like site.local or site.dev, making it impossible to use any of its features unless we use Development Modehttps://jetpack.com/support/development-mode/. To enable development mode we need to define the JETPACKDEVDEBUG in wp-config.php. The code looks something like this: php
I've been looking at Critical Path CSS again as I work trying to improve the performance of this blog. The idea behind Critical Path CSS from now on, just Critical Path is that we inline the CSS needed to render the first screen of content, what's called above the fold borrowing a term from printed media and load the remaining CSS later. I know that inlining CSS or Javascript can negatively affect performance but in this case, reducing the number of HTTP request needed to render and only adding the smallest amount of CSS possible to render above the fold...
