Collective #736

Inspirational Website of the Week: Postevand
A modern grid based design with great typography. Our pick this week.
Get inspired
Black Friday is coming early!
Save the date and win an iMac at this year's Black Friday sale! Purchase any Divi product & get our biggest discount of all time, a free prize, a pack of website templates and exclusive access to dozens of additional product deals.
Get notified
Lucia
Lucia is a simple yet flexible user and session management library that provides an abstraction layer between your app and your database.
Check it out
Shadow Mapping In Three.js
In this article Misaki Nakano writes about how to do shadow mapping in Three.js.
Read it
OKLCH in CSS: why we moved from RGB and HSL
Learn about the CSS Color Module 4 which adds oklch() and allows for P3 wide-gamut support.
Read it
The New CSS Media Query Range Syntax
The Media Queries Level 4 specification has introduced a new syntax for targeting a range of viewport widths using common mathematical comparison operators, like , and =, that make more sense syntactically while writing less code for responsive web design.
Read it
The HTTP crash course nobody asked for
Learn all about the functioning of HTTP in this crash course.
Read it
The Perfect Commit
Simon Willison shares his work around the Perfect Commit and what steps it invovles.
Read it
Scroll to Text Fragments
Learn about scroll to text fragments which just landed in Safari. By Jim Nielsen.
Read it
Generative art Open Graph preview images
A how-to on generative art and browser automation by Matthew Ström.
Read it
State of CSS 2022
Web styling features of today and tomorrow, as seen at Google IO 2022, plus some extras.
Check it out
Outstatic
An open source static site CMS for Next.js. Create your blog or website in minutes. No dabatase needed.
Check it out
Designing an Accessible Future
Geri Reid's talk at this year’s WDC in Bristol on applying the principles of WCAG 3.0 to some current visions of the future.
Read it
Image Steganography Tool
A simple C++ encryption and steganography tool that uses Password-Protected-Encryption to secure a file's contents, and then proceeds to embed it insde an image's pixel-data using Least-Significant-Bit encoding.
Check it out
Hydra
Hydra is live code-able video synth and coding environment that runs directly in the browser. It is free and open-source and made for beginners and experts alike.
Check it out
Fragment Shader Art
Another creative coding shader exploration by Daniel Velasquez.
Check it out
Fancy Image Decorations: Outlines and Complex Animations
In this third and final piece of a series on image decorations, Temani Afif shows more techniques using the CSS outline property.
Read it
Masked Gradient Dashed Lines
A very interesting technique for creating dashed lines with a gradient. By Eric Meyer.
Check it out
Wormhole still frames sequence CSS only w/ commands
A really cool CSS Only animation of still frames sequence made by Olivier Blanc.
Check it out
Swurl
Swurl is a new search engine that allows you to search everything instantly!
Check it out
Invasive Diffusion: How one unwilling illustrator found herself turned into an AI model
Andy Baio on a recent Stable Diffusion AI discussion regarding the ethics of using an artist's style.
Check it out
Brett Williams' Portfolio Place
The super cool "Portfolio Place" is the home of Brett Williams' web experiments.
Check it out
Building Chrometober!
Read how the scrolling book came to life for sharing fun and frightening tips and tricks this Chrometober.
Check it out
TamoTam
This project is a combination of a personal education project to learn JavaScript Mobile Development using React Native and a business idea to create a mobile app with offline-only events.
Check it out
Unreveal Effects for Content Previews | Codrops
Some explorations of page transitions using covering elements and CSS clip-paths.
Check it out