Collective #712
Inspirational Website of the Week: Studio Beaucoup
A hot, unique design that shines with great typography and a fresh pattern use. Out pick this week.
Get inspired
Bringing page transitions to the web
Learn all about the new APIs that are coming to simplify creating page transitions, building on top of CSS animations and the web animation API.
Watch it
The Surprising Truth About Pixels and Accessibility
Learn about the accessibility implications of using pixels vs rems, and how to determine the best unit to use in any scenario.
Read it
Building a button component
The perfect foundational overview of how to build color-adaptive, responsive, and accessible <button> components. Bonus: you’ll learn about very useful CSS selectors, too! By Adam Argyle.
Check it out
The Era of Rebellious Web Design Is Here
A super-interesting article on the new emerging style of the web that is bold, nostalgic and unique based on the example of BDG’s websites.
Read it
Variable fonts support in Figma
Variable fonts support in Figma allows you to broaden the possibilities of your designs and typography with a wide range of font styles and features.
Check it out
Web Applications 101
Everything you need to know about web applications in modern web development. You will learn about traditional websites, full-stack web applications, client-side and server-side rendering/routing and many more topics.
Read it
How to Make a CSS Slinky in 3D
A fantastic tutorial by Jhey Tompkins where he shows how to create a 3D slinky using CSS.
Read it
Advanced JavaScript Objects
An e-book entirely about JavaScript objects.
Check it out
Balanced Color Palettes
A small but powerful technique perfect for crafting balanced color palettes in generative pieces. By George Francis.
Check it out
My First Web Component
Raymond Camden shares how he made his very first simple web component.
Read it
Building an animated piano keyboard with JavaScript and MIDI
Jamie Smith shows how he built a simple on-screen keyboard for his jazz piano tutorial website JazzKeys.fyi.
Read it
Shrink.media
Reduce the file size of your images with an intelligent compression technique.
Check it out
:where() :is() :has()? New CSS selectors that make your life easier
Learn all about the new CSS :is(), :where() and :has() pseudo-classes.
Read it
VectorWiki
Find and download SVG vector logos from many brands.
Check it out
One Weird Trick to Try @parcel/css on CodePen
Chris Coyier shows how to use Parcel/css in Codepen.
Check it out
A Visual Reference of CSS Flexbox
A compact visual reference for CSS Flexbox.
Check it out
Dreamwave 3D Demo
Dreamwave is a web-based platform to deliver mind-blowing Virtual Events and Microverses for brands and creators.
Check it out
> hackerforms
Create user interfaces straight from your Python code – no frontend work required.
Deploy instantly and share with anyone.
Check it out
Please, stop disabling zoom
Read why Manuel Matuzović urges developers to stop disabling zoom on websites.
Read it
Beautify GitHub Profile
Pimp your GitHub profile with this repo.
Check it out
Building a Mini Next.js
To demonstrate fastify-vite‘s power and flexibility, Jonas Galvez builds a mini Next.js with it.
Read it
Image To Grid Transition
A simple transition where a large image animates to its place in a grid.
Check it out