Collective #544
Inspirational Website of the Week: Save whales
A beautiful website dedicated to a wonderful creature. Lovely transitions and 3D models. Our pick this week.
Get inspired
SVG Artista
SVG Artista is a useful tool that helps you animate strokes and fills in your SVG image with CSS transitions.
Check it out
The Ultimate WordPress Page Builder
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.
Try it
Designing Dark Mode
Jon Friedman shares how Dark Mode experiences are being crafted across Microsoft 365.
Read it
Bottom Navigation Pattern On Mobile Web Pages: A Better Alternative?
Arthur Leonov explores a better alternative to the mobile top navigation pattern with a hamburger menu.
Read it
Color Palette Generator
A superb color palette generator that will create truly working color themes.
Check it out
Sorry Not Sorry
A fantastic experiment that shows the magical power of variable fonts.
Check it out
3D Switch animation
A truly amazing little switch component with a 3D twist. By Aaron Iker.
Check it out
Creating a Maintainable Icon System with Sass
Tracy Rotton explains how to tackle the drawbacks of the data URL background image technique for including icons.
Read it
Get started with GPU Compute on the Web
François Beaufort plays with the experimental WebGPU API and shares his journey with web developers interested in performing data-parallel computations using the GPU.
Read it
Color Collision
A really cool game made by Sikriti Dakua.
Check it out
Optional chaining
Learn all about the optional chaining operator and what you can do with it.
Read it
Announcing TypeScript 3.6
Learn about all the exciting new features of Typescript 3.6 in this article by Daniel Rosenwasser.
Read it
How to Accessibly Split Text
Michelle Barker takes a look at why splitting a string of text can be problematic from an accessibility point of view, and what we can do to make sure that split text is accessible to everyone.
Read it
Label Studio
Label Studio is a multi-type data labeling and annotation tool with standardized output format.
Check it out
Drag & Drop Elements with Vanilla JavaScript and HTML
Jess Mitchell shows how to create a drag and drop feature using the HTML Drag and Drop API with a little vanilla JavaScript to set up the event handlers.
Read it
Voice User Interface Design by Cheryl Platz
Jeremy Keith's liveblog of Cheryl Platz's An Event Apart presentation on voice interfaces.
Read it
Optional HTML: Everything You Need to Know
Jens Oliver Meiert gives an overview of what HTML code is optional.
Read it
Perfect loops in Processing
Some valuable tips on creating slick looping animations in Processing.
Read it
Color this sofa! – SVG + Blend Mode trick
Kyle Wetton created this amazing demo where you can color a sofa using some smart SVG and blend mode trickery.
Check it out
Calculating PI Using Raindrops
A great demo by Mustafa Enes which is based on a real-life experiment that gives an approximation to PI.
Check it out
CSS Can Do This... And It's Terrifying!
Aaron Powell lists some interesting ways to "exploit" CSS.
Read itBear Illustration Process
Illustrator Pierre Kleinhouse shares some insight on his process and answers some interesting questions.
Watch it
Delaunay
Johan Karlsson implemented the Bowyer-Watson algorithm to perform the Delaynay triangulation. Click to generate a new pattern.
Check it out
The problem with tooltips and what to do instead
Adam Silver lists the numerous problems that come with using tooltips to reveal more content.
Read it
Js13kGames
A friendly reminder that the epic JavaScript coding competition for HTML5 Game Developers is still running for 2 weeks.
Check it out