Collective #705
Publikováno: 31.3.2022
Understanding Layout Algorithms * Spruce CSS * PWA Resources * Variable fonts in real life
The post Collective #705 appeared first on Codrops.

Inspirational Website of the Week: Nul
A fantastic design that enhances the product meaningfully in every little detail. The menu is a true hit!

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.

Understanding Layout Algorithms
Josh W Comeau pops the hood on CSS and explains how the language is structured, and how to learn it effectively.

Spruce CSS
Spruce CSS is a modern, minimal CSS Framework built on Sass. Read the introduction by Adam Laki to learn more.

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.

Optimising Largest Contentful Paint
Harry Roberts looks at some more technical and non-obvious aspects of optimising Largest Contentful Paint.

Building like it’s 1984: Scrollbars in web applications
Michael Villar’s deep dive into scrollbars, their history and usage.

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.

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.

Canvas + Text
Paul Henschel made a demo that shows how to form self-contained components with their own state and user interaction.

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.

Rhea
Rhea is a geometry-shader based grass for Unity’s Universal Render Pipeline (URP).

Color Morph
Randomly generate beautiful mesh gradients, export them as an SVG or copy the generated CSS code into your project.

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.

Resetting Inherited CSS with “Revert”
Scott Vandehey shares how using all: revert
in CSS can come to the rescue when dealing with inherited styles.

PWA Resources
A curated collection of resources to learn about Progressive Web Apps. Also, a super cool site design.

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.

Tao of Node
Alex Kondov summarizes the set of principles that he has established for building Node applications.

Art gallery
A 3D Art gallery demo using react-three-fiber made by @AndreusCafe.

Tiny renderer or how OpenGL works: software rendering in 500 lines of code
A brief computer graphics and rendering course by Dmitry V. Sokolov.

Locale Aware Sorting in JavaScript
Elijah Manor shows some options that you can use to apply locale-aware sorting.

Coolify
Version 2 of the amazing open-source and self-hostable Heroku/Netlify alternative.

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.

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.
The post Collective #705 appeared first on Codrops.