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...
DevTools Code coverage
This feature is only available in Chrome 59 and later I use Critical to create and inline the CSS for above the fold content of a page and UNCSS to remove any unnecessary CSS for these web pages. This...
Working with Service Workers
Service Workers are awesome and they are very powerful. They are also very hard to debug. DevTools has supported service workers for a while and has reorganized things around to produce the...
Work with your content directly on DevTools
There are times when I'm working on a design and start tweaking the design in the browser by adding attributes or making changes to the content directly in the browser and wish I could make those...