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