Collective #608

Inspirational Website of the Week: 14islands
Fall in love with this amazing website of 14islands and its fantastic organic shapes and effects. Can you discove the easter egg?
Get inspired
A user's guide to CSS variables
Lea Verou's guide to help us understand the differences between declarative CSS variables and variables in other programming languages, and how you can leverage their power.
Read it
Simply build visually with Divi
You've never built a WordPress website like this before. Divi is more than just a WordPress theme, it's a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor.
Discover Divi
AudioMass
AudioMass is a free full-featured web-based audio and waveform editing tool. Find the GitHub repo here.
Check it out
ScrollTrigger
The new ScrollTrigger plugin by GreenSock creates amazing scroll-based animations with minimal code. You can also trigger anything scroll-related, even if it has nothing to do with animation.
Check it out
Free The Docs
Instantly convert documents within Google Docs into reStructuredText. Downloads images, converts markup, bulleted lists, tables, and more.
Check it out
Twin
With twin, you can use Tailwind classes within css-in-js libraries.
Check it out
CUBE CSS
Learn about the CSS methodology oriented towards simplicity and consistency with a heavy dosage of pragmatism.
Read it
Consoleimg
Add images to your website's developer console with this script.
Check it out
Global and Component Style Settings with CSS Variables
Sara Soueidan explains how she uses scoped CSS variables in her own pattern library to speed up prototyping and client work.
Read it
Colors in CSS
Ahmad Shadeed dives into CSS colors and explains many useful details.
Read it
3D First Person Art Gallery - No Javascript!
An amazing demo by Ben Evans.
Check it out
Free Font: HK Grotesk Wide
HK Grotesk Wide is a free font, great for posters, headlines or book/magazine covers.
Check it out
The hamburger menu
A step by step guide to creating a hamburger menu in SVG and CSS by Mikael Ainalem.
Read it
Overlapping Header with CSS Grid
A great CSS grid based solution to an overlapping layout.
Check it out
Colors and Fonts
Colors & Fonts is a curated library of colors and fonts for digital designers and web developers.
Check it out
ScrollTrigger Demo
Mariusz Dabrowski's cool demo that showcases the new ScrollTrigger plugin by GreenSock.
Check it out
Object.is() vs Strict Equality Operator in JavaScript
When should you use Object.is() instead of the strict equality check in JavaScript?
Read it
Semilattice
A collection of system and interaction concepts for personal knowledge management tools that reimagines how we work with and organize information. By Aosheng Ran.
Check it out
Fun with Fonts
Two short multiple choice quizzes on Gutenberg and font identification.
Check it out
Stranger Things, JavaScript Edition
Find the explanation to some of the weirdest JavaScript moments in this article.
Read it
TitleRun
TitleRun is a game that lives in your title bar: jump over the obstacles to survive and reach the flag!
Check it out
Kinetic Typography with Three.js
Discover how to use Three.js to render kinetic typography.
Check it out
UI Interactions & Animations Roundup #7
Some modern UI animation shots to keep you up-to-date with the new motion trends and get you inspired.
Check it out