Collective #702
Publikováno: 10.3.2022
WebGPU * The Micro-Frontends future * Type Trends 2022 * Open Source Color System * How to design better APIs
The post Collective #702 appeared first on Codrops.

Inspirational Website of the Week: Jantana Hennard
Smooth and minimal with lovely typography and some playful details. Our pick this week.

Put the “Flow” in Your Workflows with Shortcut
Shortcut helps streamline and evolve your workflows so you can plan, collaborate, ship, and measure success all from one place.

WebGPU — All of the cores, none of the canvas
An in-depth exploration by Surma where he shares what he learned while wrapping his head around GPUs and WebGPU, the upcoming Web API that gives you low-level, general-purpose access GPUs.

Say Hello to selectmenu, a Fully Style-able select Element
Patrick Brosset introduces a new, experimental form control called selectmenu and shows how much easier it is to style than a traditional <select> element.

Taming CSS Variables with Web Inspector
Over the past few releases, Web Inspector in Safari Technology Preview has introduced some features to help you when working on projects that use large numbers of CSS variables.

Type Trends 2022
Check out the latest type trends to see what’s new and exciting in the world of design, branding, and type design.

The Micro-Frontends future
Luca Mezzalira looks at where the micro-frontends journey has arrived so far and analyzes the different challenges where teams are struggling.

Css Checker
Css-checker checks your CSS styles for duplication and finds the diff among CSS classes with high similarity in seconds.

Booqsi
A modern social platform for the book community and an Amazon-free alternative to Goodreads.

Wik
Use wik to get information about anything on the shell using Wikipedia.

Solid.js feels like what I always wanted React to be
Nick Scialli is sold on Solid and explains why it “feels like it uses a lot of the ergonomic parts of React while minimizing confusion and errors”.

Progressive Enhancement, the New Hotness
Chris Ferdinandi reminds what Progressive Enhancement is and why it is important.

10 Useful CSS Tricks for Front-end Developers
CSS is becoming more capable of handling dynamic design features that were often achieved through JavaScript. Learn some creative CSS tricks that are a prime example of that in this article by Alex Ivanovs.

How Does Perspective Work in Pictures?
A super interesting article by Aaron Hertzmann on how perspective works in pictures and how photography isn’t all-seeing in the sense that the eyes see.

TextFrame
TextFrame lets you create animated tutorials for your users so they can get the help they need.

Open Source Color System
An Open Source Color System for Complex Digital Interfaces with Carefully picked colors to match with your interfaces challenges.

A Reason to Self-Host Fonts
Michelle Barker explains how third-party CDN hosted fonts can simply change without you knowing and how that is one more argument in favor of self-hosting them for better control.

Ken Kaneki (Pure CSS)
Beautiful pure CSS art made by Ronnie Lee.

How to design better APIs
15 language-agnostic, actionable tips on REST API design by Ronald Blüthl.

Creating Native Web Components
Learn how to create native web components with the Minze JavaScript framework.

UI Interactions & Animations Roundup #22
The latest motion design concepts and web animation inspiration from the past couple of weeks.

Creating a Risograph Grain Light Effect in Three.js
Learn two ways of applying a creative grain effect to 3D elements in Three.js.

Sketch 010: Image Motion Trail (Perspective)
One of our latest sketches: An image motion trail effect with various layers that follow the mouse.
The post Collective #702 appeared first on Codrops.