Bi-Weekly Frontend News

Collective #646

January 28, 2021

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

Our Sponsor

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