Collective #602

Inspirational Website of the Week: CUSP
A superb elegant look with very interesting distortion effects. Our pick this week.
Get inspired
Start your own freelance business by becoming a Divi expert
Learn how to develop websites with the most popular WordPress theme in the world and secure your success as a freelancer.
Start learning now
Building dark mode on Stack Overflow
Aaron Shekey talks about the work that went into the new dark mode option of Stack Overflow.
Read it
Kontrapunkt Type
Step inside a virtual experience of the solo exhibition 'Kontrapunkt Type', presented by design agency Kontrapunkt, DNP and Ginza Graphic Gallery in Tokyo.
Check it out
Watched Box
Heydon Pickering made this declarative container queries solution.
Check it out
Writing an Emulator in JavaScript (and Interfacing with Multiple UIs)
A great guide by Tania Rascia where she shares her journey of writing a Chip-8 interpreter.
Read it
Image Compare Viewer
Compare before and after images, for grading, CGI and other retouching comparisons.
Check it out
Image Techniques On The Web
Ahmad Shadeed's guide to including images in HTML covering various techniques.
Read it
Stacks
A set of layout components for building React Native views blazingly fast.
Check it out
How && and || Operators Really Work in JavaScript
An in-depth post that explains in examples how exactly && and || operators work in JavaScript.
Read it
Practice time!
Practice your ukulele with this project by Monica Dinculescu.
Check it out
Generative Data Visualization
The third part of a series where Shirley Wu show how to create custom data visualizations using SVG, Vue, and D3.js.
Check it out
Bubble Tape Text
A super cool unrolling scroll effect by Matthew Rayfield.
Check it out
Prog Arp II
An arpeggiator instrument by Jake Albaugh.
Check it out
Creating Morphing Animations with CSS clip-path
Learn how to implement morphing, a technique for transforming one appearance into another, using CSS in this tutorial by Mikael Ainalem.
Read it
How Google Ruined the Internet
Google has become a card catalog that is constantly being reordered by an angry, misinformed mob.
Read it
Updates to Form Controls and Focus
Microsoft Edge and Google Chrome spent the last year collaborating to retheme and improve the functionality of the built-in form controls on Chromium browsers.
Read it
Meanderer
A JavaScript micro-library for responsive CSS motion paths. Made by Jhey Tompkins.
Check it out
Bongo Cat Codes #2 - Jamming
A lovely animation by Caroline Artz.
Check it out
3D Photography using Context-aware Layered Depth Inpainting
A novel method for converting a single RGB-D input image into a 3D photo.
Check it out
Making a responsive CSS grid layout with just 3 properties
Learn how to pull off a simple responsive template based on CSS Grid.
Read it
Why you should stop using Google Analytics on your website
Here’s a look at why you should remove Google Analytics from your website and help create a more open, independent web that’s more friendly to the visitors.
Read it
Interactive WebGL Hover Effects
A simple tutorial on how to achieve an interactive mouseover/hover effect on images in some easy steps.
Check it out