PostCSS is an interesting project. In a nutshell, It takes CSS and turns it into an Abstract Syntax Tree, a form of data that JavaScript can manipulate. JavaScript-based plugins for PostCSS then performs different code manipulations. PostCSS itself doesn’t change your CSS, it allows plugins to perform transformations they’ve been designed to make. There are essentially no limitations on the kind of manipulation PostCSS plugins can apply to CSS. If you can think of it, you can probably write a PostCSS plugin to make it happen. It's important to also know what PostCSS is not. This material is adapted from...
There is nothing more anoying than having audio/video playing in a tab when it's in the background or when the browser is minimized. The Page Visibility APIhttps://www.w3.org/TR/page-visibility/ gives us control of what to do with media or any other element of a page when the tab is hidden or not visible. Some of the things we can do with this API: - Pausing a video when the page has lost user focus. - Stop an HTML5 canvas animation from running when a user is not on the page. - Show a notification to the user only when the page is...
HTTP/2 Server Push, Link Preload And Resource Hints We've become performance obsessed, it's important and the obsession shows. Firtunately we're also given the tools to acommodate the need for speed. We'll look at three ways of helping our servers give us the resources we need before we actually need them. We're not covering service workers in this post. Even thoough they are very much a performance feature they are client-side and we want to discuss server side performance improvements or improvements t hat are used directly from the HTML code, not Javascript. What is Server Push Accessing websites has always...
Browsers are beginning to support es6 modules without polyfills! This means that we can take modules and use them as is without having to transpile if we're only supporting modern browsers. We'll revisit modules: what they are and how they work. Unlike the cursory look we did when we discussed modules in the context of Rollup and Webpack, we'll take a deeper look at how do modules work in the browser and look at examples of how we can best leverage them today by using new syntax on the script tag. ES6/ES2015 Modules Modules allow you to package related variables...
One of the biggest pains when working on the web is how to deal with large files images, videos, large chunks of markup without blocking the browser from doing other things like rendering whatever content is not part of the stream. At I/O this year Surma and Paul Lewis did a live coding demo of streams and web components. This got me thinking about streams and how to best leverage them to increase performance of our applications. What are streams and what are they good for According to the WHATWG Streams Living Standardhttps://streams.spec.whatwg.org/: > This specification provides APIs for creating,...
I've been looking at the CSS in JS debate for a while and one of the things that still surprises me if that people go to all these lengths to create and use namespaces for their elements when there's a way to do it already baked in the platform. If you're not allergic to XML and you've been around the web for a while you know what XML is and you may be one of those who have developed phobia to XML you have an x-girlfriend to not want to use it and do everything in JSON. But there are...
One of the first things that brought me to programming was Logo back in the mid 1980's. It wasnt the structure of the programs that you could type stuff that would make things happen on the screen. To me the magic was that you could share and that typing the same things would always produce the same results so you could iterate and do even crazier things with your designs. If running the following commands: text repeat 4 forward 90 would create a square what would happen if we started moving the turtle around without drawing anything and then run...
One thing that blew my mind was a web-based slide deck that changed a style's CSS when you edited the CSS block shown as text in the slide. Think about it... We can change the CSS of our content as we need to just by editing the CSS inline, in the same browser that is displaying the content we are styling. Awesome! Later on I changed my mind a little. CSS is too much of a pain but what if we want to change a document or create a new one and then save it or do some further processing...
There are times when the current solutions are not enough. Most of my non-Wordpress web content uses fontfaceobserverhttp://fontfaceobserver.com/ to handle web fonts and how they display on the page. We've already used @font-face to load the fonts using CSS. The script below creates one instance of Fontfaceobserver for each of the fonts we've loaded using CSS. Each FontFaceObserver instance has several methods that we'll use later in the script. We create a shortcut to document.documentElement to save ourselves typing. The last command in this section will add a fonts-loading class to the page's HTML element. javascript const mono = new...
I've always struggled to get images to fit where I need them to without giving them explicit size in pixels that will only work on one screen size. Percentages are better but I've always struggled figure out what is the right percentage and whether it'll look ok in smaller form factors. With the object-fit property and its partner object-position we get very granular control on how an element responds to the size of its content box. Used by itself, object-fit allows for mage cropping and how it alters its size inside the containing box. object-fit can take one of 5...
