Collective #668
Inspirational Website of the Week: Vita Architecture
An elegant web experience with wonderful typography and some playful coloring details.
Get inspired
Instant websites for your clients with Divi Layout Packs
With the Divi Layout Packs you’ll get world-class designs ready to be used for your client projects.
Check it out
Indiepen
An independent and privacy-friendly solution to embed HTML, CSS and JS code examples.
Check it out
The State Of Web Workers In 2021
Surma helps you get up to speed on Workers on the Web in this extensive write-up.
Read it
Inherit ancestor font-size, for fun and profit
Lea Verou explores font size inheritance and its challenges.
Read it
GitHub Copilot
GitHub Copilot works alongside you directly in your editor, suggesting whole lines or entire functions for you.
Check it out
What’s new in ES2021
Every year the TC39 committee releases the new features coming to JavaScript. Here’s whats coming in 2021. By R. Alex Anderson.
Read it
Detecting Hover-Capable Devices
Michelle Barker introduces us to the CSS Level 5 Media Queries specification and shows how we can detect hover-capable devices.
Read it
Temporal: getting started with JavaScript’s new date time API
An article by Axel Rauschmayer where he introduces Temporal, the new date time API.
Read it
Simple CSS Hack to Reduce Page Load Time
Mayank Gupta shows an interesting hack to reduce page load time.
Read it
Using Performant Next-Gen Images in CSS with image-set
Learn about the CSS image-set() function in this article by Ollie Williams.
Read it
CSS @supports rules to target only Firefox / Safari / Chromium
Bramus got creative with @supports and shows how to use it to target specific browsers only.
Read it
Tiny Acquisitions
A place to sell small projects under $5k.
Check it out
Building NPM package in 2021
How to write an NPM package in 2021? Is it possible without bundlers and transpilers? Julian Ćwirko explores.
Read it
The State of WebAssembly 2021
This blog post shares the results of the first State of WebAssembly Survey.
Check it out
Fluid Paint
A stunningly realistic fluid paint simulation.
Check it out
Using Framer Motion to Create Smooth Lazy Load Image Effects
Learn how to create a React JS skeleton image loader with a shimmer effect using CSS and animation from Framer Motion.
Read it
Using CSS to Enforce Accessibility
Adrian Roselli shows ways to use CSS in order to enforce accessibility.
Read it
In JS functions, the ‘last’ return wins
Jake Archibald clarifies which return “wins” in JavaScript functions.
Read it
Multi Colored Text with CSS
A supercool multi-colored text demo in CSS. By Shireen Taj.
Check it out
Don’t Stop Me Now: How to Use React useTransition() hook
Read how to speed up UI updates by prioritizing updates using React useTranstion() hook. By Dmitri Pavlutin.
Check it out
The unseen benefits of accessibility
Christian Heilmann’s thoughts on accessibility and why he views accessibility features as “necessary for some, but also beneficial to all”.
Read it
Wikidata
Wikidata is a free, collaborative, multilingual, secondary database, collecting structured data to provide support for Wikipedia, Wikimedia Commons, the other wikis of the Wikimedia movement, and to anyone in the world.
Check it out
Click to open… (CSS)
A beautiful unfolding button demo made by Amit Sheen.
Check it out
iPod.js
A very cool iPod Classic built for the web.
Check it out
We Can’t Let People Work from Home, for Stupid Reasons
Stupid reasons to not allow remote work. Dumb reasons to reject remote work.
Read it
UI Interactions & Animations Roundup #17
A fresh pick of the most interesting UI animation and interaction shots to get inspired.
Check it out
How to Code the K72 Marquee Hover Animation
Learn how to recreate the direction-aware marquee menu hover animation seen on the website of K72 made by Locomotive.
Read it