Collective #553

Voidcall - Making of
Dominic Szablewski shares the making of Voidcall, a WebGL real-time strategy game in just 13kb of JavaScript.
Read it
Accentuate Custom Fields for Shopify
The professional solution to extend Shopify with checkboxes, selection lists, images and 15 other field types. Cross-reference objects to create anything you need.
Check it out
Frankenstein Migration: Framework-Agnostic Approach
Denys Mishunov explains the "Frankenstein Migration" technique which is a new, framework-agnostic approach to the process of migration. Make sure to read the first part, too.
Read it
Text Rendering Hates You
Alexis Beingessner on the challenges of rendering text.
Read it
Design Tips
A collection of great design tips by Steve Schoger and Adam Wathan.
Check it out
Why Progressive Web Apps Are The Future of Mobile Web
Read why Progressive Web Apps work much better than your typical mobile website in this white paper by Jason Rzutkiewicz and Jeremy Lockhorn.
Read it
Create a semantic "breakout" button to make an entire element clickable
Andy Bell explains how to make an element fully clickable, while also using proper semantic elements and JavaScript and as an enhancement.
Read it
Working with GitHub Actions
Jeff Rafter explores some fun ways to use GitHub Actions in Typescript covering building, testing, lint configuration and more.
Read it
How to exit vim
Some dead simple methods for exiting vim.
Check it out
Directionally blooming words
Some great direction-aware fill animations by Jhey.
Check it out
Work Responsibly
In case you missed it: a collection of resources for a healthy and balanced approach to work.
Check it out
Uiprint
Collection of printable wireframe, mockup and dot grid sketchpad templates.
Check it out
sdnotes.com
Probably the world's easiest website maker. Yet another great project by Unfounded Labs.
Check it out
Build a PWA Using Only Vanilla JavaScript
A tutorial by Sayan Mondal where you'll learn how to build a Progressive Web App (PWA) from scratch.
Read it
Devices
Updated images and Sketch files of popular devices from Facebook Design.
Check it out
Revelation
A beautiful liquid reveal effect made by Damien Montastier.
Check it out
3D Boxes Loader CSS only
A really nice box loader made by Aaron Iker.
Check it out
HTTP Toolkit
Intercept, debug and build with HTTP using this cross-platform HTTP(S) proxy, analyzer and client. Free for hobbyist.
Check it out
10x Faster Nuxt builds on Netlify
Learn how to create faster Nuxt builds on Netlify without affecting UX or site performance.
Read it
Winning Vector Icons
A set of free vector icons in three different styles.
Get it
Dots
An amazing particles experiment by Yi-Wen Lin. Best viewed with a powerful CPU. You can find the code here.
Check it out