Collective #636

Inspirational Website of the Week: Loftgarten
Design excellence in every way: layout, typography, colors and interactions are just spot-on!
Get inspired

The Divi Black Friday Sale
Black Friday is the only time each year that we offer 25% off new Divi memberships and Divi membership upgrades and along with each purchase, customers also get access to a free prize. We are giving away premium Divi modules, child themes and layouts in batches.
Get ready!

Playfulness In Code: Supercharge Your Learning By Having Fun
The master of dev fun, Jhey Tompkins, shows how having fun can supercharge your learning in this great article.
Read it

Swimming on Scroll with GSAP
Alex Trost dissects the amazing “Weird Fishes” demo by Michelle Barker.
Read it

What are design tokens?
Learn why design tokens are a powerful way of sharing design properties and how they work.
Read it

Color Theming with CSS Custom Properties and Tailwind
Michelle Barker explains how custom properties can be used for theming, and how they can be integrated with Tailwind to maximize the reusability of our code.
Read it

Tomorrowland: Digital Event
Dogstudio’s great case study of how they built a new kind of immersive experience for Belgium’s EDM sweetheart.
Read it

Web Development for Beginners – A Curriculum
Azure Cloud Advocates at Microsoft are pleased to offer a 12-week, 24-lesson curriculum all about JavaScript, CSS, and HTML basics.
Read it

Text Gradients in CSS
A great tip on how to create text gradients in CSS using the background-clip property.
Read it

The case for Weak Dependencies in JS
Lea Verou has some interesting thoughts in “weak dependecies” in JavaScript.
Read it

Liquid masking – scroll
A great demo by Cassie Evans that shows a cool liquid masking scroll effect.
Check it out

Thinking Like a Front-end Developer
Learn how to think as a front-end developer and account for edge cases you might have missed.
Read it

MIDWAM
A really cool immersive web experience.
Check it out

Disable mouse acceleration to provide a better FPS gaming experience
Learn about how web apps can now disable mouse acceleration when capturing pointer events.
Read it

Draggable elastic
A great starting template for a cool slider by Jesper Landberg.
Check it out

CSS clip-path Editor
A very useful clip-path
editor made by Mads Stoumann.
Check it out

The most accurate way to schedule a function in a web browser
A detailed analysis of 3 JavaScript timeout strategies (setTimeout, requestAnimationFrame & Web Worker) and how they perform in thousands of web contexts. By Benoit Ruiz.
Read it

Shifting an image with canvas
Christian Heilmann shows how to use HTML canvas to shift the pixels of an image.
Read it

Flash Animations Live Forever at the Internet Archive
Great news for everyone concerned about the Flash end of life planned for end of 2020: The Internet Archive is now emulating Flash animations, games and toys in our software collection.
Read it

Building a Web App Powered by Google Forms and Sheets
Learn how to use Google Forms and Sheets to build a client-side application.
Read it

A centered CSS navigation with fit-content
Stefan Judis shows a CSS pattern that uses ‘fit-content’ to center a flexible-width navigation.
Read it

Modern HTML Starter Template
Igor Agapov created this starter template for HTML projects that comes with some useful contents.
Check it out

Inspirational Websites Roundup #20
Our favorite website designs that we’ve collected over the past couple of weeks for your inspiration.
Check it out

Image Stack Intro Animation
Two simple intro animations where an image stack moves to become a grid using GSAP and Locomotive Scroll.
Check it out

Replicating the Icosahedron from Rogier de Boevé’s Website
Learn how to replicate the beautiful icosahedron animation from Rogier de Boevé’s website using Three.js and GLSL.
Check it out