Collective #615
Inspirational Website of the Week: Sweet punk
Great visual content with a clear design and interesting details. Our pick this week.
Get inspiredBuild websites with the most popular WordPress theme in the world
With the Divi Layout Packs you'll get world-class designs ready to be used for your client projects.
Check it outPrimo
Primo is an all-in-one IDE, CMS, component library, and static site generator.
Check it outWhat the f*** is ...?
An opinionated glossary of computer science terms for front-end developers by Dan Abramov. Read more about it in the repo.
Check it outCSS easing
Adam Argyle shares 18 hip cubic-bezier easing functions in handy variables with us.
Check it out3D Hands gestures
An amazing free 3D hands gestures library with 12 hands gestures in 9 different skin tones and with 3 sleeve types.
Check it out3D Book Image CSS Generator
Fantastic tool: Generate an animated 3D image from a book cover and export to HTML/CSS to embed on your website.
Check it out@property: giving superpowers to CSS variables
Una Kravets introduces the Houdini Properties and Values API which is coming to your CSS file in Chromium 85.
Read itThings I Wish I’d Known About CSS
Some useful things to understand before starting out with CSS. By Dave Smyth.
Check it outUnderstanding CSS Multiple Backgrounds
In this article, Ahmad Shadeed explains the background-image property in detail, and provides a visual explainer on how multiple backgrounds can be stacked.
Read itCSS leaning card effect
A beautiful card effect made by Lynn Fisher.
Check it outA Simple Explanation of Event Delegation in JavaScript
Dmitri Pavlutin explains event delegation which is a useful pattern to listen for events on multiple elements using just one event handler.
Read itImport non-ESM libraries in ES Modules, with client-side vanilla JS
Lea Verou explores some strategies of importing non-ESM libraries in ES modules.
Read itA CSS only “click to animate gif” solution
Christian Heilmann shares a quick experiment in pure CSS how to cover a GIF with a play button instead of playing it
Check it outWarp SVG Online
A nice tool that can warp and distort SVGs.
Check it outcss-media-vars
A brand new way to write responsive CSS. Named breakpoints, DRY selectors, no scripts, no builds, vanilla CSS.
Check it outModern CSS Techniques To Improve Legibility
Edoardo Cavazza covers how to improve websites legibility using some modern CSS techniques.
Read itA CSS-only, animated, wrapping underline
NickyMeuleman explores how to create wrapping underlines that can be animated.
Read itBuilding a self-updating profile README for GitHub
Simon Willison shows how to implement a GitHub Action to automatically keep a profile README up-to-date.
Check it outCSS Painting Order
An interesting article on how a browser determines what order to paint content in.
Read itBeyond screen sizes: responsive design in 2020
Kilian Valkhof thinks we're now at a point where we can start considering a new type of responsiveness for websites.
Read itRich HTML in GitHub README
Learn how to create a rich HTML document enveloped in an SVG file.
Check it outMars Explorer ScrollTrigger demo
Hai Le made this fantastic GSAP ScrollTrigger plugin example.
Check it outDroplets
Stunningly realistic CSS droplets by Oscar Salazar.
Check it out