Collective #703

Inspirational Website of the Week: Study Hall Creative
Beautiful scroll effects and interesting design details. Our pick this week.
Get inspired

Discover 15 Best Tools & Resources for Designers in 2022
With WordPress themes & plugins, illustrations, free websites builders (and many others), this article will provide it with instantly helpful tools and resources.
Discover them now

Shader Park
A JavaScript library for creating interactive procedural 2D and 3D shaders.
Check it out

Fun with the dialog element
Mark Otto played around with the new HTML dialog element and shows how to use it.
Read it

First look: adding type annotations to JavaScript
Axel Rauschmayer writes about the new proposal of adding type annotations to JavaScript.
Read it

What Is ARIA Even For?
Heydon Pickering’s amusing video about common pitfalls of using ARIA with the help of Ada Lovelace, a goat, and a dinosaur with a table for a head.
Watch it

Texture
Bring your generative work to life with three simple textures inspired by the natural world. By George Francis.
Check it out

Building a loading bar component
A foundational overview of how to build a color adaptive and accessible loading bar with the <progress> element. By Adam Argyle.
Read it

Roland50.studio
Emulate the sound of Roland’s most famous and influential musical instruments from Yuri Suzuki and Roland.
Check it out

New year 2022?
A cool React Three Fiber demo based on a WebGl creation. By Hugo Wiledal. Read more here.
Check it out

HTML and CSS in Emails: What Works in 2022?
Learn what HTML and CSS features work for email templates, and how you can make them work for all email clients, in 2022.
Check it out

Avvvatars
Beautifully crafted unique UI avatar placeholders for your next React project.
Check it out

Delightful React File/Directory Structure
How should we structure components and other files in our React apps? Josh W Comeau shares his solution.
Read it

Create a Stunning Glassmorphism Effect in CSS
A step-by-step guide to creating immersive background effects and beautiful gradient headlines using backdrop-filter and background-clip CSS properties. By Zoran Jambor.
Check it out

Aligning Content In Different Wrappers
Ahmad Shadeed explains how to solve a sometimes tricky problem: aligning content with another section given that they are placed in different wrappers.
Read it

Turbulent Buttons
An amazing turbulent button demo made by Adam Kuhn.
Check it out

Building Table Sorting and Pagination in JavaScript
Learn how to render a sortable, paginated table in JavaScript. By Raymond Camden.
Read it

In Defense of Sass
Stephanie Eckles writes how organization, linting, and ease of theming are the primary reasons she’ll continue to use Sass.
Read it

Skateboard-Like Preloader
A fun preloader concept featuring a worm that does a flip when reaching the left or right sides of the ring. Made with SVG and CSS animation by Jon Kantner.
Check it out

How we migrated entirely to CSS Modules using codemods and Sourcegraph Code Insights
Valery Bugakov shares how the Sourcegraph team migrated to CSS Modules.
Read it

SILVER FCTRY
Experience the playful and immersive AMBUSH® universe, in a virtual spaceship to take you on a journey to the other side.
Check it out

Inspirational Websites Roundup #35
A new collection of creative websites to keep you up-to-date on the latest web design trends.
Check it out

Expanding Rounded Menu Animation
An expanding menu animation with a cover unreveal effect in the background. Inspired by Ruslan Siiz’s Dribbble shot “365 Magazine”.
Check it out