Collective #703
![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_WOTW.jpg?x86293)
Inspirational Website of the Week: Study Hall Creative
Beautiful scroll effects and interesting design details. Our pick this week.
Get inspired![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_baw.jpg?x86293)
Discover 15 Best Tools & Resources for Designers in 2022
With WordPress themes & plugins, illustrations, free websites builders (and many others), this article will provide you with instantly helpful tools and resources.
Discover them now![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_procedural.jpg?x86293)
Shader Park
A JavaScript library for creating interactive procedural 2D and 3D shaders.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_dialog.jpg?x86293)
Fun with the dialog element
Mark Otto played around with the new HTML dialog element and shows how to use it.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_annotations.jpg?x86293)
First look: adding type annotations to JavaScript
Axel Rauschmayer writes about the new proposal of adding type annotations to JavaScript.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_aria.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_texture.jpg?x86293)
Texture
Bring your generative work to life with three simple textures inspired by the natural world. By George Francis.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_progress.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_roland.jpg?x86293)
Roland50.studio
Emulate the sound of Roland's most famous and influential musical instruments from Yuri Suzuki and Roland.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_r3f.jpg?x86293)
New year 2022?
A cool React Three Fiber demo based on a WebGl creation. By Hugo Wiledal. Read more here.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_email.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_reactavatars.jpg?x86293)
Avvvatars
Beautifully crafted unique UI avatar placeholders for your next React project.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_project.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_backdrop.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_align.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_buttons.jpg?x86293)
Turbulent Buttons
An amazing turbulent button demo made by Adam Kuhn.
Check it out![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_sortable.jpg?x86293)
Building Table Sorting and Pagination in JavaScript
Learn how to render a sortable, paginated table in JavaScript. By Raymond Camden.
Read it![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_sass.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_jon.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_sourcegraph.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_Reactor2.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_roundup.jpg?x86293)
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![](https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2022/03/C703_menu.jpg?x86293)
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