Collective #731
Inspirational Website of the Week: Головна
A stunning design with unique elements and wonderful typography. Our pick this week.
Get inspired
Our Sponsor
Apple Device Management Made Easy
Managing your business’s Apple devices is time-consuming, especially when employees are WFH. Jamf Now is a mobile device management solution that simply sets up, connects, and secures your devices from anywhere; no IT experience required! Codrops readers can manage up to 3 devices for free today!
Sign Up Free Today
The 2022 Web Almanac
A new edition of the Web Almanac, the annual state of the web report combining the expertise of the web community with the data and trends of the HTTP Archive.
Check it out
The new wave of Javascript web frameworks
Make sense of the proliferation of new Javascript web frameworks. A deep dive into the problems at scale and the recent evolution of innovation.
Check it out
Neodrag
Lightweight multi-framework libraries for draggability on the web. By Puru Vijay.
Check it out
WordPress in the browser
Run WordPress in the browser thanks to WebAssembly magic.
Check it out
Learn HTML
The latest course in a series of courses on web.dev to help get you up to speed with modern web development.
Check it out
Experimenting A New Syntax To Write SVG
What if we could write all SVG attributes in CSS? Yuan Chuan explores this in his css-doodle project.
Check it out
An In-Depth look at Lerp, Smoothstep, and Shaping Functions
Learn about lerp, smoothstep, and shaping functions that game devs use in this video.
Watch it
A details element as a burger menu is not accessible
Gerardo Rodriguez writes how using the native HTML disclosure widget is not an inclusive solution.
Read it
The details and summary elements, again
Scott O’Hara revisists the <details> and <summary> elements and shows what’s new.
Read it
Sam Fairbairn
The super creative and interactive portfolio by Sam Fairbairn.
Check it out
figr.app
You can work together in real time with this simple and advanced calculator.
Check it out
How to Create Wavy Shapes & Patterns in CSS
Temani Afif shows ways to make wavy shapes and patterns using CSS only.
Read it
Creative Section Breaks Using CSS Clip-Path
A video tutorial by Zoran Jambor where you’ll learn how to use CSS clip-path and Clip Path editor in Firefox DevTools to create beautiful, fluid section breaks, dividers, and separators.
Watch it
How To Improve Largest Contentful Paint for Faster Load Times
Optimising Largest Contentful Paint has an outsized impact on when most critical content appears. These four proven methods will help you find and correct performance issues holding your page back.
Check it out
Enhance
Enhance is a web standards-based HTML framework. It’s designed to provide a dependable foundation for building lightweight, flexible, and future-proof web applications.
Check it out
Testing Web Design Color Contrast
An overview of three tools and techniques for testing and verifying accessible color contrast of your design.
Read it
Palette – Colorize Photos
A new Instagram-like AI colorizer. Colorize anything from old black and white photos, style your artworks, or give modern images a fresh look.
Check it out
Devices.css
Updated, modern devices crafted in pure CSS.
Check it out
KREA
Explore millions of AI generated images and create collections of prompts. You can now also access the data they have built it with: Open Promts.
Check it out
Accidental Dismissal of Overlays: A Common Mobile Usability Problem
Read how overlays often need to be dismissed in a manner that goes against users’ expectations.
Read it
Dub – Open-Source Bitly Alternative
An open-source link shortener SaaS with built-in analytics and free custom domains.
Check it out
Free Font: Figtree
Erik D. Kennedy created this friendly sans-serif typeface.
Check it out
React I Love You, But You’re Bringing Me Down
François Zaninotto’s thoughts about his React relationship.
Read it
Hologram
Maxime Heckel is exploring Three.js render targets and layers in R3F in this remake of Patrick Schroen’s hologram scene.
Check it out
Is the iPhone 14’s new Dynamic Island plain stupid or the next revolutionary UX pattern?
A great analysis of the new, exciting UX pattern by Leon Zhang.
Read it
Nightdrive
James Stanley made a JavaScript simulation of driving at night time on the motorway.
Check it out
From Our Blog
How to Recreate Stripe’s Lava Lamp Gradient with Three.js
A video coding session where you’ll learn how to recreate the lava lamp like gradient from Stripe.com.
Check it out