HTTP2 Server Push, Link Preload And Resource Hints
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...
Home
Using modules in browser
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...
Streams in Javascript
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...
CSS namespaces (If you're not scared of XML)
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...
Blockly as a programming teaching tool
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...
Creating an In-Browser Editor
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...
@font-face font-display property
There are times when the current solutions are not enough. Most of my non-Wordpress web content uses fontfaceobserver to handle web fonts and how they display on the page. We've already used...
Cropping Images in CSS With object-fit
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...
How to find stuff in DevTools?
This feature is only available in Chrome 59 and later DevTools is awesome but sometimes can be hard to manage. There's so many tools and functions and shortcuts that it gets hard to remember...
DevTools Audits: powered by Lighthouse
This feature is only available in Chrome 60 and later Lighthouse is a tool to test if your web content (app or site) meets the criteria for Progressive Web Applications and other tests to make sure...