Collective #537

Inspirational Website of the Week: Drink Cann
A refreshing and colorful design with a bubbly motif. Our pick this week.
Get inspired
Writing a Simple MVC App in Plain JavaScript
A tutorial by Tania Rascia where she shows how to write an MVC app in plain JavaScript using the model-view-controller architectural pattern.
Read it
I Used The Web For A Day On A 50 MB Budget
Chris Ashton puts himself in the shoes of someone on a tight data budget and offers practical tips for reducing our websites' data footprint.
Read it
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
The Real Dark Web
A refreshing read by Charlie Owen on the "boring" majority of the web dev world.
Read it
Components AI
An experimental platform for exploring generative design systems. You can cycle through generated designs one or many at a time until you find something inspiring.
Check it out
Truths about digital accessibility
Some things to keep in mind when creating, maintaining, or evaluating accessible technology. By Eric Bailey.
Read it
Deep sea (Chrome only)
Yuan Chuan made this wonderful demo of an animated abstract underwater scene.
Check it out
Planet
Nadieh Bremer shares a magnificent project that visualizes how Planet's satellites create a full image of Earth's landmass in one single day. Read more about it in this tweet.
Check it out
React + Redux + Comlink = Off-main-thread
Surma investigates if and how React and Redux workings can be go off the main thread.
Read it
Making a Realistic Glass Effect with SVG
A tutorial by David Fitzgibbon on how to make a creative glass effect with SVG.
Read it
WebGL Month summary
Andrei Lesnitsky summarizes all tutorials he wrote in the past month for learning WebGL from scratch.
Check it out
The Best Newsletters to Subscribe to for a Frontend Developer
Brian Rinaldi shares a list of newsletters relevant for frontend developers.
Check it out
Aurora web elements for Adobe XD and Sketch
The Aurora UI kit is a free set of 24 web screens with a modern design.
Get it
A Message to GitHub
A repo that raises awareness on GitHub's banning of Iranian and other users from sanctioned countries.
Check it out
Creating my logo animation
Cassie Evans explains how she created the slick SVG path animation of her logo.
Read it
What I Like About Vue
Dave Rupert shares a list of things that make him enjoy Vue.
Read it
Verby
A tool for creating and downloading natural voices as mp3 audio files.
Check it out
New CSS Features in Firefox 68
Rachel Andrew introduces all the exciting CSS features released with the new Firefox.
Read it
Imperial Star Destroyer animated in 3D using only CSS
An impressive CSS only demo made by Hai Le.
Check it out
Figuring out CSS animation properties with a magic kittencorn
Chen Hui Jing writes about how the mascot for SingaporeCSS was brought to life with CSS animations.
Read it
Using CSS Custom attributes generated by JavaScript as a handover mechanism
Chris Heilmann writes about CSS Custom Properties and shows how to only use JavaScript to read a value and leave the rest to CSS.
Read it