Collective #664

Original Source: http://feedproxy.google.com/~r/tympanus/~3/Rltpd29cdPk/

Inspirational Website of the Week: K72 Agency

A super sharp design with great typography and vibrant details. Our pick this week.

Get inspired

CSS for Web Vitals

Learn about CSS-related techniques for optimizing Web Vitals in this article by Katie Hempenius and Una Kravets.

Read it

CSS Layout Generator

A great CSS Grid & Flexbox generator for creating layout components.

Check it out

Beginner JavaScript Notes

A massive resource and guide to JavaScript.

Check it out

The perfect link

There’s more to a link than just a clickable word or image. So, how do you create the perfect link? Rian Rietveld takes you on an informative journey.

Read it

Create a Liquid Hover Effect with GSAP & SVG

Learn how to add a vector-based, fluid hover effect to any simple SVG path. By George Francis.

Check it out

Spark Freebie

A great freebie by BONT that contains 3 hero designs with different art directions. Made for Figma.

Check it out

How To Fix Cumulative Layout Shift (CLS) Issues

Barry Pollard looks at ways to tackle issues regarding the Cumulative Layout Shift metric.

Read it

The Art of Design Spec’ing

Learn about design specs, how to create them, and how they smooth out the hand-off process between design and engineering. By Mahdi Farra.

Read it

Boring Avatars

Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.

Check it out

vanilla-extract

Zero-runtime stylesheets-in-TypeScript: Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.

Check it out

Readsom

Readsom hosts newsletters that are handpicked and filtered through topics to help you find your niche of interest. Explore and discover your next favorite newsletter.

Check it out

Front-End Testing is For Everyone

Evgeny Klimenchenko covers the most popular and widely used types of front-end tests and explains why testing is for everyone.

Read it

yare.io

A real-time strategy game where you control your units by writing JavaScript code.

Check it out

Responsive design and container queries? Oh my!

Ethan Marcotte shares his excitement about container queries.

Read it

Khroma

Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save.

Check it out

CSS morphing

Supercool CSS only text morphing by Amit Sheen. If you like this effect, you might also find this demo interesting.

Check it out

50 Tips to Improve User Interface

A great collection of useful UI design tips by Victor Ponamariov.

Check it out

DOOM Captcha

Finally a Captcha that respects your privacy and that is everything but boring!

Check it out

How to create fancy jumping text input labels

Mikael Ainalem explains how to create a slick input with an animating placeholder.

Read it

Follow the Grain

Jay Freestone argues that we should spend less time trying to fix things, and more time trying to understand them.

Read it

macOCR

macOCR is a command line app that enables you to turn any text on your screen into text on your clipboard.

Check it out

From Our Blog
FBO Particles with Three.js

Learn how to code the particle cloud seen on the website of Visualdata using Three.js.

Check it out

From Our Blog
Trigonometry in CSS and JavaScript: Introduction to Trigonometry

In this series of articles we’ll get an overview of trigonometry, understand how it can be useful, and delve into some creative applications in CSS and JavaScript.

Check it out

From Our Blog
Trigonometry in CSS and JavaScript: Getting Creative with Trigonometric Functions

In the second part of this series on trigonometry, we’ll explore JavaScript trigonometric functions and learn how we can apply them to our CSS code.

Check it out

The post Collective #664 appeared first on Codrops.