Collective #462

Inspirational Website of the Week: Femme & Fierce - She is Fire and Ice
Beautiful colors and components with a fresh look and lovely details. Our pick this week.
Get inspired
Earn your master's in Information Design and Strategy
Learn to drive effective digital communication and blend information architecture and experience design with branding and messaging.
Apply now
Random irregular grid
Vincent De Oliveira shows how to use a single paint worklet on multiple elements showcased on a creative grid.
Check it out
Confessions of a Flawed Designer
Pablo Stanley created these fun comics on some bad habits he's trying to fix.
Check it out
Robin Delaporte - Creative developer
Looking for a position as a creative/front-end developer, Robin Delaporte made this beautiful portfolio.
Check it out
Splicing HTML's DNA With CSS Attribute Selectors
John Rhea explains how attribute selectors work and shows some use cases.
Read it
Simplify Styling with Functional CSS
Harry Nicholls explains what functional CSS is and shows how it can simplify styling.
Check it out
The Intl.RelativeTimeFormat API
Mathias Bynens introduces the brand new Intl.RelativeTimeFormat API and shows how it can be used for relative time-formatted values.
Read it
User flow is the new wireframe
An illustrated guide on the different "resolutions" of user flows, and when to use them. By Alexander Handley.
Read it
DesignBase
DesignBase is a database of highly curated free resources for all designers.
Check it out
The Mine: No JS, CSS only adventure game
Jamie Coulter's contribution to the Codepen Halloween challenge.
Check it out
Incomplete List of Mistakes in the Design of CSS
A list of CSS design mistakes that should be corrected if anyone ever invents a time machine.
Check it out
Websites in 2018
This is how many website visits indeed look like. Coded by Seva Zaikov.
Check it out
Invaders
Gerard Ferrandez created this fantastic invaders pattern with canvas.
Check it out
Dweb: Identity for the Decentralized Web with IndieAuth
Aaron Parecki shows what IndieAuth is all about and how to get started using it.
Check it out
Gradient Shapes
Shapes generated with CSS background gradients by Yuan Chuan (includes conic gradients, which are currently Chrome only).
Check it out
April Landing Page Template
April is a new free HTML landing page for startups available on Cruip.
Get it
Hard Costs of Third-Party Scripts
Dave Rupert investigates User Experience costs of third-party scripts.
Read it
Firefox 63 - Tricks and Treats!
Great news: support for modern Web Components APIs has shipped in Firefox!
Read it
Design in China featuring A Black Cover Design
An interview with the founders of "A Black Cover" that offers some great insight into the Chinese design community.
Read it
Hexagon
A beautifully animated hexagon wave made by Misha Tsankashvili with CSS only.
Check it out
Free Monster Enemy Game Sprites
A set of 10 evil little characters in various image formats including AI, EPS, SCML and PNG.
Check it out