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