Collective #545
Leon Sans
Leon Sans is a geometric sans-serif typeface made with code by Jongmin Kim. It allows to change the font weight dynamically and create custom animations, effects or shapes using HTML5 Canvas. The font celebrates Jongmin's newborn baby Leon.
Check it out
Data-Driven Product Design: Create Products Your Customers Love!
Gainsight PX reveals how users engage and feel about your product features. Leverage your customers' voice to create a best-in-class product experience.
Try it free
PWA Asset Generator
A PWA asset generator based on Puppeteer that automatically generates icons and splash screens based on Web App Manifest specs and Apple Human Interface Guidelines.
Check it out
X3D: Declarative 3D for the Modern Web
Adrian Sureshkumar shows how to use X3D with the X3DOM library to write declarative 3D graphics that will run in most modern web browsers.
Read it
Autoneum Acoustic Garage
A fantastic WebGL powered 3D car configurator made by Active Theory for Autoneum.
Check it out
The Enigma Machine
An amazing Enigma Machine simulator by Tom MacWright.
Read it
How Web Content Can Affect Power Usage
An interesting article about factors on web pages that affect battery life, and how developers can make web pages more power efficient.
Read it
Styling Links with Real Underlines
Ollie Williams shows how to properly style underlines on links.
Read it
Asynchronous JavaScript: Introduction to JavaScript Promises
Maciej Treder's easy to understand guide to JavaScript Promises.
Read it
Sketchpad
Brad Arnett created this Sketchpad demo with a 3D pencil made with Three.js.
Check it out
Play Street Fighter with body movements using Arduino and Tensorflow.js
A great tutorial by Charlie Gerard on an experimental gesture recognition system prototype.
Read it
The Baseline Interpreter: a faster JS interpreter in Firefox 70
Read all about the new, generated JavaScript bytecode interpreter that was added to the JavaScript engine in Firefox 70.
Read it
Less Data Doesn't Mean a Lesser Experience
Tim Kadlec shows some examples on the Save-Data header which can be used to control how a page is experienced in data-constrained environments.
Read it
Quark
In case you didn't know about it: Quark is a general purpose software tool specifically designed to help you create projects written in HTML, CSS and JavaScript with native desktop app like capabilities.
Check it out
Designing address forms for everyone, everywhere
A valuable guide to designing forms for global addresses by Virginia Start.
Read it
Build Minesweeper in Under an Hour with Angular
Stephen Fluin shows how to code the Minesweeper game from scratch using Angular.
Watch it
The Most Dangerous Writing App
The Most Dangerous Writing App is designed to get you into a state of flow. If you stop typing for more than five seconds, all progress will be lost.
Check it out
A beginner's guide to scrollytelling
Jeff Cardello shows how to tell a compelling and dynamic story using the full power of web design.
Read it
How to Build Light and Dark Themes With Web Components
Indrek Lasn shows how build a dark and light theme toggle using only web components.
Read it
Internationalization API built into your browser
Marcin Wanago explains the basic features of the ECMAScript Internationalization API.
Read it
Fragments: iOS wireframe kit
Fragments is a wireframe iOS kit for Sketch made by Pixsellz. The free edition contains 25 ready-made screens.
Get it