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