Collective #731
Publikováno: 29.9.2022
Neodrag * The 2022 Web Almanac * Learn HTML * Enhance * Palette
Inspirational Website of the Week: Головна
A stunning design with unique elements and wonderful typography. Our pick this week.
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!
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.
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.
Neodrag
Lightweight multi-framework libraries for draggability on the web. By Puru Vijay.
WordPress in the browser
Run WordPress in the browser thanks to WebAssembly magic.
Learn HTML
The latest course in a series of courses on web.dev to help get you up to speed with modern web development.
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.
An In-Depth look at Lerp, Smoothstep, and Shaping Functions
Learn about lerp, smoothstep, and shaping functions that game devs use in this video.
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.
The details and summary elements, again
Scott O’Hara revisists the <details> and <summary> elements and shows what’s new.
Sam Fairbairn
The super creative and interactive portfolio by Sam Fairbairn.
figr.app
You can work together in real time with this simple and advanced calculator.
How to Create Wavy Shapes & Patterns in CSS
Temani Afif shows ways to make wavy shapes and patterns using CSS only.
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.
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.
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.
Testing Web Design Color Contrast
An overview of three tools and techniques for testing and verifying accessible color contrast of your design.
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.
Devices.css
Updated, modern devices crafted in pure CSS.
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.
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.
Dub – Open-Source Bitly Alternative
An open-source link shortener SaaS with built-in analytics and free custom domains.
Free Font: Figtree
Erik D. Kennedy created this friendly sans-serif typeface.
React I Love You, But You’re Bringing Me Down
François Zaninotto’s thoughts about his React relationship.
Hologram
Maxime Heckel is exploring Three.js render targets and layers in R3F in this remake of Patrick Schroen’s hologram scene.
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.
Nightdrive
James Stanley made a JavaScript simulation of driving at night time on the motorway.
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.