WebP Image Support Coming to iOS 14
24.6.2020
Apple announced a ton of new updates at yesterday’s WWDC20 keynote address, from new hardware to updated applications. There’s lots to gawk at and enough device-envy to go around.
But there’s one little line in the Safari 14 Beta release notes that caught my eye:
Added WebP image...
CSS background-repeat: round
23.6.2020
The CSS spec is full of gems that sneak their way past most of us web designers and developers. Stuff like :focus-within, prefers-reduced-motion, and prefers-color-scheme suddenly make their way into CSS without us really finding out for months or years. One such example is background-repeat:...
Let’s Make a Multi-Thumb Slider That Calculates The Width Between Thumbs
23.6.2020
HTML has an <input type="range">, which is, you could argue, the simplest type of proportion slider. Wherever the thumb of that slider ends up could represent a proportion of whatever is before and whatever is after it (using the value and max attributes). Getting fancier, it’s possible...
An Overview of Scroll Technologies
22.6.2020
Scroll-related animations have been used on the web for years. In recent years, they’ve started to become more common, perhaps in part due to devices being higher-performing and thus able to handle more animation. 
There are a number of scroll related technologies out there, so this article’s...
Rough Notation
22.6.2020
This is a neat little library. It uses SVG to insert hand-drawn looking annotations to elements (probably text), like underlines and box highlights (there are 6 design options, all configurable). Super clever.
Here’s a little demo:
CodePen Embed Fallback
Aside from it just being cool,...
Using Custom Property “Stacks” to Tame the Cascade
22.6.2020
Since the inception of CSS in 1994, the cascade and inheritance have defined how we design on the web. Both are powerful features but, as authors, we’ve had very little control over how they interact. Selector specificity and source order provide some minimal “layering” control...
Awesome Demos Roundup #16
22.6.2020
The newest roundup of fantastic demos and web experiments from around the web.
The post Awesome Demos Roundup #16 appeared first on Codrops
Patternico
20.6.2020
I remember searching for tutorials for making seamless patterns in Photoshop¹ all the time back in the day.
It’s fun to see this little website for building repeating patterns as its one job. It does everything you’d expect: pick a background, drag some decorations onto it and position...
Easing Animations in Canvas
19.6.2020
The <canvas> element in HTML and Canvas API in JavaScript combine to form one of the main raster graphics and animation possibilities on the web. A common canvas use-case is programmatically generating images for websites, particularly games. That’s exactly what I’ve done in a website...
Just another +1 for subgrid
19.6.2020
I’d say 85% of my grid usage is in one of these two categories…
I just need some pretty basic (probably equal width) columns that ends up being something like like grid-template-columns: repeat(3, minmax(0, 1fr)); to be safe.
Actually doing some real layout where five minutes in...
Collective #610
18.6.2020
Tutorialist * Deep JavaScript * React Icon System * Artvee * How to Compare Objects in JavaScript
The post Collective #610 appeared first on Codrops
Stay DRY Using axios for API Requests
18.6.2020
HTTP requests are a crucial part of any web application that’s communicating with a back-end server. The front end needs some data, so it asks for it via a network HTTP request (or Ajax, as it tends to be called), and the server returns an answer. Almost every website these days does this in some...