Collective #646
Publikováno: 28.1.2021
Houdini Paint Dojo * The styled-components happy path * Building a sidenav component * Enabling Popups
The post Collective #646 appeared first on Codrops.
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.
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.
The styled-components happy path
An article where Josh W Comeau shares his personal “best practices” when it comes to styled-components.
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.
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.
Form Validation: You want :not(:focus):invalid, not :invalid
Learn how you can perform validation only when a field is not being edited anymore.
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.
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.
Snowflake Generator
An interactive WebGL snowflake generator made by Vivian Wu.
Building a sidenav component
A foundational overview of how to build a responsive slide out sidenav. By Adam Argyle.
Cell fracture
Paul Henschel plays with blender and cell fracture.
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?”
Enabling Popups
An idea to extend the web platform with popups by the Microsoft Edge team.
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.
Webcam x Dices
A great dice effect made by Louis Hoebregts.
HTML and CSS still isn’t about painting with code
Christian Heilmann shares his experience in explaining what HTML and CSS is about.
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.
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.
Wldlght
Follow an amazing journey in Japan with this projection mapping project, Wldlght.
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.
Building an Audio Player With React Hooks
Discover how to build an audio player using React and the HTMLAudioElement interface.
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.
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.
Formality
A designless, multistep, conversational, secure, all-in-one WordPress forms plugin.
Awesome Demos Roundup #19
A large collection of fantastic web experiments and demos that were made in the past couple of weeks.
Recreating Frontier Development Lab’s Sun in Three.js
Learn how to create a 3D sun with Three.js in this coding session.
Twisted Colorful Spheres with Three.js
Learn how to deform and color spheres to create an interesting animation with Three.js.
Inspirational Websites Roundup #22
A collection of fresh websites with brilliant designs to get you updated on the current trends.
The post Collective #646 appeared first on Codrops.