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...
One of the things I like about the annual release schedule for Javascript is that the learning curve for new versions is much smaller than ES2015/ES6 and previous versions. Two of the features that I'm most interested in are optional Chaining and Nullish Coalescing. Optional Chaining Optional Chaininghttps://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Optionalchaining, allows yout to check the existence of a property or short circuit and return undefined if any property in the chain that doesn't exist. In the example below, we define a zoo object with animal types and their names. js const zoo = { name: 'Alice', bird: { name: 'Hawkeye', }, dog:...
> This is a different take on hooks from Pre Commit Hooks: Combating Lazinesshttps://publishing-project.rivendellweb.net/pre-commit-hooks-combating-laziness/, written two years ago There are times when it would be awesome if we could force ourselves or our development team to perform some actions before committing code to the project's repository. Git has a set of tools called hookshttps://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks that can help with this enforcement proccess. The idea behind hooks is that they will run at set times during the request lifecycle and run the code you specify in the hook file. You can use hooks to run linting and accessibility checks before you commit...
