WordPress doesn't add async or defer attributes to scripts by default and there is no easy way to do it without customization. This post will discuss how to add the attributes and why it's important. This gets complicated by the fact that not all scripts need to have deferhttps://html.spec.whatwg.org/multipage/scripting.htmlattr-script-defer or asynchttps://html.spec.whatwg.org/multipage/scripting.htmlattr-script-async either because they were moved to the footer, or because it already has the necessary one, or because of special requirements. So there is no one size fits all solution. WordPress script\loader\taghttps://developer.wordpress.org/reference/hooks/scriptloadertag/ hook allows us to tweak individual script tags to add attributes or other items before they are...
PostCSS is an interesting tool and ecosystem. It is a CSS processor written in Javascript. What first brought my attention to PostCSS is Autoprefixer, my go-to tool for automating adding prefixes to my CSS. A few years ago they moved from a separate project into a PostCSS plugin. However, it wasn't until recently that I started looking at the original purpose of PostCSS, to be able to write future CSS for today's browsers. The goals of the research seek to answer the following questions: - Can we replace SCSS with CSS using PostCSS plugins? - How can we leverage new...
I love Visual Studio Code for writing anything ranging from Markdown to Javascript to PHP and even some Go and C/C++. One of the things that intrigued me the most is snippets and how they work once you insert them. The following example shows a VS Code snippet that will insert a figure with img and figcaption children. The elements in the JSON for the snippet are: - scope: What language or languages the snippet applies to - prefix: The short name for the snippet - body: The content for the snippet, including placeholders - description: json { "HTML figure":...
In recent years there has been a lot of new features that make magazine-style layouts possible and enticing for designers to use and for developers to implement. Some of these features are quite old in terms of when they were introduced but it wasn't until I saw the work of Jenn Simmonshttps://labs.jensimmons.com/, Jason Pamental and Andy Clarkehttps://stuffandnonsense.co.uk/design that I started seeing the real possibilities of doing design on the web. Sure we're still missing fragmentation primitives for the web and the purists seem to have won, so far. Regions are dead and no alternatives have surfaced yet. Clip-path Clipping an...
Seeing the latest HTTP 203 from Surma and Jakke I started thinking about what other things that you can do with arrays. The most frequent use of arrays in my code is to take an array of elements and do something to each member of the array. For example, the following snippet converts the document.images collection into an array and then uses forEach to loop over the array, and add the loading attribute to enable native lazy loading in Chrome and provide an alternative lazy loading library for browsers that don't support the feature natively. js if 'loading' in HTMLImageElement.prototype...
Some of these policies may be under Origin Trials or may not be available in browsers at the time the article was written. Check Chromestatushttps://www.chromestatus.com/featurescomponent%3A%20Blink%3EFeaturePolicy for a list of policies that are either active or under consideration. Feature policies are a way to restrict what web APIs we make available to what web context page or iframe thus reducing the risk of malicious third-party code, and footguns shooting ourselves in the foot by misusing APIs or using too many of them. With Feature Policy, you opt-in to a set of "policies" for the browser to enforce on specific features used...
This is an old one but it still worries me and made me search for a possible solution in the context of web APIs without requiring a Node package manager or a Node infrastructure. I never want to make anything that even remotely resembles this. pic.twitter.com/QsfusOtxkI— Brad Frost @bradfrost May 16, 2015 No, no one wants to write code like what Brad posted in 2015, but that's the reality when using responsive imageshttp://responsiveimages.org/, or is it? If we don't mind doing the work on the server rather than the client we can do something like the code below, taken from...
One of the most frustrating things for me is how to center things using CSS. There are many ways to do it and everyone disagrees with everyone else. It is also true that there is no one-size-fits-all solution because what works with modern browsers doesn't necessarily work in older versions. That said, my favorite way to center content is using Flexbox. For example, the code below will center its children both vertically and horizontally on the available screen size 100vw by 100vh. Because we're using a right-to-left and top-to-bottom language we've set the direction to a column, otherwise second and...
One of the coolest things that, in my opinion, has happened in front end development is the concept of transpilation. You can transpile third-party languages like Darthttps://dart.dev/ or TypeScripthttps://www.typescriptlang.org/ or you can take current ES2015+ currently ES2019https://www.ecma-international.org/ecma-262/10.0/index.html and soon to be ES2020https://tc39.es/ecma262/ and make it work in older browsers that don't support the features of the latest ECMAScript features. In this post, we'll worry about converting ES2020 to ES5 using Babelhttps://babeljs.io/ Setting up Babel Babel requires a build system. For this post, I've chosen Gulphttps://gulpjs.com/ which is what I normally use. I assume you already have a package.json in your...
I've decided to take another look at BigQueryhttps://cloud.google.com/bigquery/ in the context of the Chrome User Experience Report or CrUXhttps://developers.google.com/web/tools/chrome-user-experience-report/. The idea is that Google, through the Chrome team and tools they make available to developers, has collected real user metrics RUM for billions of sites around the world and has grouped them according to country. Warning In the BigQuery free tier, users can only query 1TB worth of data per month. Beyond that, the standard rate of $5/TB applies. So when Big Query tells you how many gigabytes of data are processed in each request, pay attention. This is why...
