Collective #646

Inspirational Website of the Week: Aurélia Durand
We just love how unique this design is and how much personality it has. An explosion of colors and creativity.
Get inspired

Become a Software Engineer, job guaranteed.
Ready to master software engineering or switch to a career as a software engineer? Gain the skills you need with Springboard’s Software Engineering Bootcamp.
Learn More

The styled-components happy path
An article where Josh W Comeau shares his personal “best practices” when it comes to styled-components.
Read it

Houdini Paint Dojo
A small project with 0 external dependencies to explore the emerging CSS Houdini Paint API. Check out the GitHub repo. By Georgi Nikolov.
Check it out

Luis Henrique Bizarro’s portfolio
The repository of Luis Henrique Bizarro’s portfolio made entirely with plain JavaScript code using ECMAScript 2015+ features without any frameworks.
Check it out

Form Validation: You want :not(:focus):invalid, not :invalid
Learn how you can perform validation only when a field is not being edited anymore.
Read it

How We Improved SmashingMag Performance
In this article, you’ll learn about the changes made on Smashing Magazine — running on JAMStack with React — to optimize the web performance and improve the Core Web Vitals metrics.
Read it

The importance of `@font-face` source order when used with preload
A small change in the ordering of your font sources in the `@font-face` rule can have a big impact on data and web performance. An article by Matt Hobbs.
Read it

Snowflake Generator
An interactive WebGL snowflake generator made by Vivian Wu.
Check it out

Building a sidenav component
A foundational overview of how to build a responsive slide out sidenav. By Adam Argyle.
Read it

Cell fracture
Paul Henschel plays with blender and cell fracture.
Check it out

The unreasonable effectiveness of simple HTML
Terence Eden urges to ask the important question “how easy is it to use the websites you’ve created?”
Read it

Enabling Popups
An idea to extend the web platform with popups by the Microsoft Edge team.
Check it out

The Minimum Content Size In CSS Grid
Ahmad Shadeed walks us through an issue he faced that is related to the minimum content size in CSS grid.
Read it

Webcam x Dices
A great dice effect made by Louis Hoebregts.
Check it out

HTML and CSS still isn’t about painting with code
Christian Heilmann shares his experience in explaining what HTML and CSS is about.
Read it

Add scroll margin to all elements which can be targeted
A quick tip on how to add an extra bit of space to targeted elements.
Read it

How to design highly performant animations and micro-interactions
In this post, you can learn how to design highly performant animations and micro-interactions to improve the UX of your site.
Read it

Wldlght
Follow an amazing journey in Japan with this projection mapping project, Wldlght.
Check it out

How to avoid layout shifts caused by web fonts
Late-loading web fonts can be a main cause of layout shifts. Simon Hearne shows how to optimize them.
Read it

Building an Audio Player With React Hooks
Discover how to build an audio player using React and the HTMLAudioElement interface.
Read it

Re-Creating the Porky Pig Animation from Looney Tunes in CSS
Learn how to make Porky Pig come out of those red rings. By Kilian Valkhof.
Read it

Thinking outside the box model for GUI design
From a while back: This article investigates why and how the box model in GUIs limits users, UI/UX designers, and developers – and how we can do better to improve usability.
Read it

Formality
A designless, multistep, conversational, secure, all-in-one WordPress forms plugin.
Check it out

Awesome Demos Roundup #19
A large collection of fantastic web experiments and demos that were made in the past couple of weeks.
Check it out

Recreating Frontier Development Lab’s Sun in Three.js
Learn how to create a 3D sun with Three.js in this coding session.
Check it out

Twisted Colorful Spheres with Three.js
Learn how to deform and color spheres to create an interesting animation with Three.js.
Check it out

Inspirational Websites Roundup #22
A collection of fresh websites with brilliant designs to get you updated on the current trends.
Check it out