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...
Every so often I want to explore new WordPress themes for my blog without having to start from scratch using Underscoreshttps://underscores.me/. At the same time, I want the flexibility of customizing the theme without losing the changes every time I update the theme. That's where child themeshttps://developer.wordpress.org/themes/advanced-topics/child-themes/ come in. They allow developers to customize an existing theme independently of the parent and without losing the changes when we update the parent theme. Process Creating a child theme is a four-step process: 1. Create a folder inside the wp-content/themes directory 2. Create a style.css stylesheet and add the theme boilerplate 3....
In its simplest form can be used to draw graphics via scripting usually JavaScript. This can, for instance, be used to draw graphs, combine photos, or create simple and not so simple animations. This post will only discuss the 2D drawing canvas mode. You can also use the canvas element to host 3D WebGL models, but that's a whole other set of articles, so we'll skip it for now. Getting started In our HTML document, we need to add a canvas element where we will draw our content. The id attribute is the name that we'll use in the script...
There are times that we want to test snippets of Javascript code in different browsers to make sure that it works as intended in all our target browsers. I've always fired the browsers and pasted the code into DevTools or Web Inspector to check if the results are the same. Now there is a pair of applications that will automate this for you: jsvuhttps://www.npmjs.com/package/jsvu and eshosthttps://www.npmjs.com/package/eshost. To install these packages run the following command bash npm i -g jsvu eshost JSVU JavaScript Version Updater manages the installation and updates for different Javascript engines avoiding the compilation process. Out of the...
