Collective #387

Inspirational Website of the Week: Antoni
Super smooth transitions and a great design. Our pick this week.
Get inspired
Gain new skills to boost your career - Learn CSS with Treehouse
Add to your creative tool box. You can push pixels, but can you build a responsive web design? Start your path to becoming a front-end web developer, or brush up on your skills with our CSS course. We'll walk through everything you need to know to build web pages.
Claim your free trial
Pigment
One of the fantastic design tools made by ShapeFactory.
Check it out
CSS: The Definitive Guide, 4th Edition
An excerpt from Chapter 19, "Filters, Blending, Clipping, and Masking", of "CSS: The Definitive Guide" by Eric Meyer and Estelle Weyl.
Read it
Let's make multi-colored icons with SVG symbols and CSS variables
A great technique by Sarah Dayan for multi-colored SVG icon symbols.
Read it
Grandchild elements in BEM
Luke Whitehouse writes about the unpleasant issue of grandchild elements in BEM and some options for dealing with it.
Read it
Grid Examples
A place to get inspiration for CSS Grid layout examples in the wild.
Check it out
mdn-browser-compat-data
A repository that contains browser compatibility data that describes which platforms support particular Web APIs. Read more about it in this article.
Check it out
Caire
Caire is a content aware image resize library that leaves the most important part of the image.
Check it out
Stimulus 1.0: A modest JavaScript framework for the HTML you already have
Read about the Stimulus JavaScript framework in this article by David Hansson.
Read it
Sketching in the Browser
Mark Dalgleish shares the great journey of the work that aims to bridge web design and development.
Read it
The Power of Serverless for Front-End Developers
Useful info and resources on serverless for web developers.
Check it out
I shall resist
A beautiful demo for snake lovers by Gerard Ferrandez.
Check it out
Shittiest Project Ever
Smile Studio presents the shittiest project ever to waste your time ;)
Check it out
Digital in 2018: World's internet users pass the 4 billion mark
Some very interesting report insights from We Are Social and Hootsuite.
Read it
Dribbble Color Palette Generator
Generate a .sketchpalette file from any Dribbble shot's color palette to be loaded in the Sketch-Palette plugin. By Amie Chen.
Check it out
One File, Many Options: Using Variable Fonts on the Web
Ollie Williams shows how to use variable fonts in your web projects.
Read it
EasyTimer.js
An easy-to-use timer library compatible with AMD and NodeJS.
Check it out
An introduction to Progressive Web Apps
A great guide to Progressive Web Apps (PWA) by Flavio Copes.
Read it
Web AR with smart plugs using A-frame
First part of an article series about using Web AR using A-Frame to visualize energy consumption using Wemo smart plugs connected to home appliances. By Gemma Vincent.
Read it
Deep-copying in JavaScript
An interesting guide for copying an object in JavaScript.
Check it out
How to use variable fonts in the real world
An interesting article by Richard Rutter on the challenges of using variable fonts.
Read it
GLSL: Underwater Sun
A great GLSL demo by Liam Egan.
Check it out