What Makes CSS Hard To Master

Tim Severien: CSS may seem simple at first, but the learning curve isn’t linear; mastering it is hard. By no means is the language perfect, but it’s amazingly efficient at what it’s designed to do. Despite its simple syntax, there’s little it can’t do. What Makes CSS Hard To Master → Related: As Jeremy Keith …

It’s not legacy code — it’s PHP

In 2004 Vimeo wrote their first backend code in PHP. 16 years later and they (mainly) still run PHP. Many developers wrote a bit of PHP a decade ago and have since moved on to better-respected languages. They’re often eager to tell others how relieved they are to not be writing PHP anymore, and how …

7:1 Furniture Collection, the first furniture made to be seen by the vision-impaired

The collection precisely uses a 7:1 color contrast ratio, a contrast level that makes a visual most accessible to people with disability. We use an international vision enhancement method by W3C organization, which makes a content or object visible at Level AAA standard (a highest level of visibility). Must say I find them visually quite …

Customizing GitHub Gist Embeds

When embedding a GitHub Gist using a script tag, its contents gets injected into your page’s DOM. As the injected wrapper node has a .gist class, it’s perfectly possible to customize the appearance on your own site. Will Boyd walks us through it. Will also created a repository with several pre-built themes. Simply add one …

Live Caption yourself using Azure Cognitive Services and Ably Realtime

Very cool project by Jo Francetti in which she created a live captioning service. She uses a webpage on a phone to capture her speech — using getUserMedia() — which she then sends over to Azure Cognitive Services’ “Speech to Text” Service to get back the text. The text eventually ends up on the flexible …

Beyond Fast: Features to Improve the Performance of your Web Pages

Few tips by Jake Archibald — as presented at #ChromeDevSummit — on how you can use some of the new and upcoming web features to improve the performance of your page. Covered are the aforementioned content-visibility, Font metric override descriptors, the Back/Forward Cache, Portals, and Preloading

Creating random-but-stable effects with the CSS Paint API

One of the side-effects when drawing things with a Houdini Paint Worklet and relying on Math.random() in your code, is that your layout might be jumpy. Check out my CSS Houdini Paint Worklet that draws colorful circles for example: whenever you resize the available space or change one of its properties — or some of …

css-houdini-circles — A Houdini Paint Worklet that draws Colorful Background Circles

Last night — inspired by the Paint Worklet demos on Houdini.how — I decided to give Houdini a spin myself and created my own Paint Worklet. The result is css-houdini-circles which draws a bunch of random circles on the background. As a user you can configure the number of circles, the size range, the opacity …

Extending CSS with Houdini

In this video from #ChromeDevSummit 2020, Una walks us through Houdini and the aforementioned houdini.how CSS Houdini is an umbrella term that describes a series of low-level browser APIs and worklets which enable developers to hook into the browser’s rendering engine and extend the styling capabilities of today. Learn about the various Houdini API’s, as …

Supercharging your CSS with Houdini Paint Worklets

During #ChromDevSummit, Houdini.how got announced: Houdini.how is a library and reference for Houdini worklets and resources. It provides everything you need to know about CSS Houdini: browser support, an overview of its various APIs, usage information, additional resources, and live paint worklet samples. Each sample on Houdini.how is backed by the CSS Paint API, meaning …