Collective #546

Inspirational Website of the Week: ViiSUALiiZER
An incredible celebration of animated ASCII art for artist Bon Iver. Our pick this week.
Get inspired
Ackee
Ackee is a self-hosted, Node.js based analytics tool that runs on your own server, analyzes the traffic of your websites and provides useful statistics in a minimal interface.
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
Webpack Boilerplate
A minimal Webpack 4 boilerplate with Babel, Sass, ESLint, Hot Module Replacement, and development/production optimization. By Tania Rascia.
Check it out
O-GL
O-GL is a small, effective WebGL framework aimed at developers who like minimal layers of abstraction, and are comfortable creating their own shaders. Check out this amazing fluid simulation!
Check it out
Overflow And Data Loss In CSS
In this article, Rachel Andrew explores the situations in which you might encounter overflow in your web designs and explains how CSS has evolved to create better ways to manage and design around unknown amounts of content.
Read it
Laravel 6.0
A major release of the powerful PHP framework for web artisans.
Check it out
Email Love
Email Love is a new online resource curating the best email designs for inspiration while also curating quality newsletters for discovery. By Rob Hope.
Check it out
Model-Based Testing in React with State Machines
David Khourshid's excellent article on how model-based testing with state machines allow you to write fewer tests by hand.
Read it
Bitmelo
In case you didn't know about it: Bitmelo is a game editor and engine for making small pixel art games right here in your browser.
Check it out
Managing accessibility in open source CMSes: a write-up
Hidde de Vries on the efforts and challenges regarding accessibility in the WordPress and Drupal community.
Read it
The Ugly Truth about Design Systems
Mark Boulton exposes the ugly truth of rolling out design systems.
Watch it
Free Font: Misto
An unique font with an outstanding design made by Katerina Korolevtseva.
Get it
Today's Firefox Blocks Third-Party Tracking Cookies and Cryptomining by Default
Read about how Firefox is now blocking third-party tracking cookies and cryptominers by default.
Read it
Regex Crossword
Learn different symbols and regex patterns in a fun way by filling crosswords.
Check it out
A simple homemade JavaScript obfuscator
Learn how to create your own simple JavaScript obfuscator in this tutorial by Antoine Vastel.
Read it
The Ultimate Guide to Not F#!@ing Up Push Notifications
Stéphanie Walter's advice on offering push notifications the right way.
Read it
Animated Verbs II
Ryan Mulligan's second set of awesome animations for verbs.
Check it out
Lifull Design
A website with some stunning WebGL work made by Yoichi Kobayashi.
Check it out
Free Font: Miratrix
Andrey Karter designed this geometric grotesque display font.
Check it out
Sunbeams
A beautiful, realistic looking WebGL sun ray animation made by Ko.Yelie.
Check it out
Firefox 69 — a tale of Resize Observer, microtasks, CSS, and DevTools
Chris Mills introduces the new version of Firefox which features a number of nice new additions including JavaScript public instance fields, the Resize Observer and Microtask APIs, CSS logical overflow properties and @supports for selectors.
Read it
How to Dynamically Change the Colors of Product Images using CSS Blend Mode and SVG
Learn a simple technique for adding a color swap functionality to your product images by creating an SVG and applying a mix-blend-mode to the composition.
Check it out