Collective #668
![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_WOTW.jpg?x86293)
Inspirational Website of the Week: Vita Architecture
An elegant web experience with wonderful typography and some playful coloring details.
Get inspired![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/05/Divi_new.jpg?x86293)
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![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_embed.jpg?x86293)
Indiepen
An independent and privacy-friendly solution to embed HTML, CSS and JS code examples.
Check it out![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_webworkers.jpg?x86293)
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![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_lea.jpg?x86293)
Inherit ancestor font-size, for fun and profit
Lea Verou explores font size inheritance and its challenges.
Read it![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_ai.jpg?x86293)
GitHub Copilot
GitHub Copilot works alongside you directly in your editor, suggesting whole lines or entire functions for you.
Check it out![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_newines.jpg?x86293)
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![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_hover.jpg?x86293)
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![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_temporal.jpg?x86293)
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![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_hack.jpg?x86293)
Simple CSS Hack to Reduce Page Load Time
Mayank Gupta shows an interesting hack to reduce page load time.
Read it![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_imageset.jpg?x86293)
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![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_support.jpg?x86293)
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![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_5k.jpg?x86293)
Tiny Acquisitions
A place to sell small projects under $5k.
Check it out![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_6.jpg?x86293)
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![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_survey.jpg?x86293)
The State of WebAssembly 2021
This blog post shares the results of the first State of WebAssembly Survey.
Check it out![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_paint.jpg?x86293)
Fluid Paint
A stunningly realistic fluid paint simulation.
Check it out![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_figma.jpg?x86293)
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![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_accesscss.jpg?x86293)
Using CSS to Enforce Accessibility
Adrian Roselli shows ways to use CSS in order to enforce accessibility.
Read it![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_last.jpg?x86293)
In JS functions, the 'last' return wins
Jake Archibald clarifies which return "wins" in JavaScript functions.
Read it![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_multicolor.jpg?x86293)
Multi Colored Text with CSS
A supercool multi-colored text demo in CSS. By Shireen Taj.
Check it out![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_usetransition.jpg?x86293)
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![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_chris.jpg?x86293)
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![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_wikidata.jpg?x86293)
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![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_demounfold.jpg?x86293)
Click to open... (CSS)
A beautiful unfolding button demo made by Amit Sheen.
Check it out![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_ipod.jpg?x86293)
iPod.js
A very cool iPod Classic built for the web.
Check it out![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_goat.jpg?x86293)
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![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_roundup.jpg?x86293)
UI Interactions & Animations Roundup #17
A fresh pick of the most interesting UI animation and interaction shots to get inspired.
Check it out![Collective 668 image](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2021/07/C668_menu.jpg?x86293)
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