Collective #664
Publikováno: 3.6.2021
CSS for Web Vitals * CSS Layout Generator * DOOM Captcha * Readsom * Boring Avatars
The post Collective #664 appeared first on Codrops.
Inspirational Website of the Week: K72 Agency
A super sharp design with great typography and vibrant details. Our pick this week.
Elementor Birthday Sale – Up to 50% Off
Join the celebration and get up to 50% off the #1 WP website builder
CSS for Web Vitals
Learn about CSS-related techniques for optimizing Web Vitals in this article by Katie Hempenius and Una Kravets.
CSS Layout Generator
A great CSS Grid & Flexbox generator for creating layout components.
Beginner JavaScript Notes
A massive resource and guide to JavaScript.
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.
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.
Spark Freebie
A great freebie by BONT that contains 3 hero designs with different art directions. Made for Figma.
How To Fix Cumulative Layout Shift (CLS) Issues
Barry Pollard looks at ways to tackle issues regarding the Cumulative Layout Shift metric.
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.
Boring Avatars
Boring avatars is a tiny JavaScript React library that generates custom, SVG-based, round avatars from any username and color palette.
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.
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.
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.
yare.io
A real-time strategy game where you control your units by writing JavaScript code.
Responsive design and container queries? Oh my!
Ethan Marcotte shares his excitement about container queries.
Khroma
Khroma uses AI to learn which colors you like and creates limitless palettes for you to discover, search, and save.
CSS morphing
Supercool CSS only text morphing by Amit Sheen. If you like this effect, you might also find this demo interesting.
50 Tips to Improve User Interface
A great collection of useful UI design tips by Victor Ponamariov.
DOOM Captcha
Finally a Captcha that respects your privacy and that is everything but boring!
How to create fancy jumping text input labels
Mikael Ainalem explains how to create a slick input with an animating placeholder.
Follow the Grain
Jay Freestone argues that we should spend less time trying to fix things, and more time trying to understand them.
macOCR
macOCR is a command line app that enables you to turn any text on your screen into text on your clipboard.
FBO Particles with Three.js
Learn how to code the particle cloud seen on the website of Visualdata using Three.js.
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.
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.
The post Collective #664 appeared first on Codrops.