This content originally appeared on Codrops and was authored by Mary Lou

Inspirational Website of the Week: Vita Architecture
An elegant web experience with wonderful typography and some playful coloring details.

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.

Indiepen
An independent and privacy-friendly solution to embed HTML, CSS and JS code examples.

The State Of Web Workers In 2021
Surma helps you get up to speed on Workers on the Web in this extensive write-up.

Inherit ancestor font-size, for fun and profit
Lea Verou explores font size inheritance and its challenges.

GitHub Copilot
GitHub Copilot works alongside you directly in your editor, suggesting whole lines or entire functions for you.

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.

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.

Temporal: getting started with JavaScript’s new date time API
An article by Axel Rauschmayer where he introduces Temporal, the new date time API.

Simple CSS Hack to Reduce Page Load Time
Mayank Gupta shows an interesting hack to reduce page load time.

Using Performant Next-Gen Images in CSS with image-set
Learn about the CSS image-set() function in this article by Ollie Williams.

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.

Tiny Acquisitions
A place to sell small projects under $5k.

Building NPM package in 2021
How to write an NPM package in 2021? Is it possible without bundlers and transpilers? Julian Ćwirko explores.

The State of WebAssembly 2021
This blog post shares the results of the first State of WebAssembly Survey.

Fluid Paint
A stunningly realistic fluid paint simulation.

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.

Using CSS to Enforce Accessibility
Adrian Roselli shows ways to use CSS in order to enforce accessibility.

In JS functions, the ‘last’ return wins
Jake Archibald clarifies which return “wins” in JavaScript functions.

Multi Colored Text with CSS
A supercool multi-colored text demo in CSS. By Shireen Taj.

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.

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”.

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.

Click to open… (CSS)
A beautiful unfolding button demo made by Amit Sheen.

iPod.js
A very cool iPod Classic built for the web.

We Can’t Let People Work from Home, for Stupid Reasons
Stupid reasons to not allow remote work. Dumb reasons to reject remote work.

UI Interactions & Animations Roundup #17
A fresh pick of the most interesting UI animation and interaction shots to get inspired.

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.
The post Collective #668 appeared first on Codrops.
This content originally appeared on Codrops and was authored by Mary Lou

Mary Lou | Sciencx (2021-07-01T13:15:13+00:00) Collective #668. Retrieved from https://www.scien.cx/2021/07/01/collective-668/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.