Collective #705
Inspirational Website of the Week: Nul
A fantastic design that enhances the product meaningfully in every little detail. The menu is a true hit!
Get inspired
Make $100k+/year? Put yourself on the path toward early retirement.
Playbook builds a financial plan unique to your goals and income, automates it, and supercharges your net worth. The secret? Ensuring that you’re making full use of your tax-advantaged accounts. You don’t have to beat the market to build wealth.
Try Playbook
Understanding Layout Algorithms
Josh W Comeau pops the hood on CSS and explains how the language is structured, and how to learn it effectively.
Read it
Spruce CSS
Spruce CSS is a modern, minimal CSS Framework built on Sass. Read the introduction by Adam Laki to learn more.
Check it out
Awwwards Conference
Three exciting days with some of the most influential speakers of the industry, who inspire, teach, and guide us as we face the many challenges and opportunities which lie ahead in the future of the web.
Check it out
Optimising Largest Contentful Paint
Harry Roberts looks at some more technical and non-obvious aspects of optimising Largest Contentful Paint.
Read it
Building like it’s 1984: Scrollbars in web applications
Michael Villar’s deep dive into scrollbars, their history and usage.
Read it
Variable fonts in real life: how to use and love them
Roman Shamin and Travis Turner write about the awesomeness of variable fonts, how they work and why we are all ready for them.
Read it
Tricks to Cut Corners Using CSS Mask and Clip-Path Properties
Temani Afif shows how to cut the corners of elements using CSS mask and clip-path.
Read it
Canvas + Text
Paul Henschel made a demo that shows how to form self-contained components with their own state and user interaction.
Check it out
Photography is not Objective, Art is a Set of Choices
Aaron Hertzmann challenges the notion that photography records and displays objective information in this fascinating article.
Read it
Rhea
Rhea is a geometry-shader based grass for Unity’s Universal Render Pipeline (URP).
Check it out
Color Morph
Randomly generate beautiful mesh gradients, export them as an SVG or copy the generated CSS code into your project.
Check it out
Bionic Reading
An amazing project: Bionic Reading revises texts so that the most concise parts of words are highlighted which enables faster, more efficient reading.
Check it out
Resetting Inherited CSS with “Revert”
Scott Vandehey shares how using all: revert in CSS can come to the rescue when dealing with inherited styles.
Read it
PWA Resources
A curated collection of resources to learn about Progressive Web Apps. Also, a super cool site design.
Check it out
Building a Vaporwave scene with Three.js
A step-by-step tutorial documenting Maxime Heckel’s attempt at reverse-engineering the vaporwave WebGL scene from the Linear 2021 release page using only fundamental concepts of Three.js like textures, lights, animations, and post-processing effects.
Read it
Tao of Node
Alex Kondov summarizes the set of principles that he has established for building Node applications.
Read it
Art gallery
A 3D Art gallery demo using react-three-fiber made by @AndreusCafe.
Check it out
Tiny renderer or how OpenGL works: software rendering in 500 lines of code
A brief computer graphics and rendering course by Dmitry V. Sokolov.
Read it
Locale Aware Sorting in JavaScript
Elijah Manor shows some options that you can use to apply locale-aware sorting.
Read it
Coolify
Version 2 of the amazing open-source and self-hostable Heroku/Netlify alternative.
Check it out
How to create a router for a custom SPA App
Wiktor Wiśniewski shows how to create a lightweight JavaScript router library just for learning purposes.
Read it
Building an Interactive Sparkline Graph with D3
Learn how to build an interactive line graph using the D3 JavaScript library and CSS custom properties to create different color schemes.
Check it out