Collective #320

Inspirational Website of the Week: 0 days off
Beautiful design combined with smooth, elegant effects and meaningful content. Our pick this week.
Get inspired
Leveraging the Performance Metrics that Most Affect User Experience
A great article by Philip Walton where performance metrics are defined as user centric ones.
Read it
Free eBook: How to start a WordPress maintenance business
Our 50+ page eBooks covers everything you need to know to start your WordPress maintenance business.
Check it out
#c0ffee is the color
An exploration of word-based HEX codes for CSS colors by the folks of Surge.
Check it out
Fontjoy
Fontjoy lets you generate font combinations with the power of deep learning.
Check it out
Trendy CSS Text Shadows
Some great inspiration for long text shadows including the CSS code by Mixfont.
Check it out
Pattern Libraries
Natasha Hockey made a high quality pattern library to showcase and display the components used in a portfolio website.
Read it
Build a Style Guide Straight from Sass
Benjamin Robertson shows how to use Node-KSS for a comment generated style guide.
Read it
11 things I learned reading the flexbox spec
An insightful and funny compendium of David Gilbertson's experience with the Flexbox specification.
Check it out
Breaking out with CSS Grid explained
Rachel Andrew explains in detail why Tyler Sticka's brilliant "breaking out" grid layout technique works.
Read it
VR development from the comfort of your regular environment
Learn how you can avoid switching to Windows for virtual reality development.
Read it
Brutalist redesigns
Pierre Buttin wondered how Brutalism would look like on mobile and made some really interesting redesigns.
Check it out
<css-doodle/>
An interesting web component for drawing patterns with CSS. By Yuán Chuān.
Check it out
Awesome CSS in JS
A curated resource list of CSS in JS articles, videos, benchmarks etc.
Check it out
Web Design Museum
An exhibition of over 800 carefully selected and sorted web sites that show web design trends between 1996 and 2005.
Check it out
Latex Resume
An easy to use LaTeX resume generator with PDF and source download and some nice templates to choose from.
Check it out
Improving advertising on the web
Google is planning to have Chrome stop showing ads (including those owned or served by Google) on websites that are not compliant with the Better Ads Standards starting in early 2018.
Read it
Fuck Facebook
John Gruber explains why Facebook should be treated as the private walled garden that it is. Read the discussion on HN.
Read it
All Thumbs, Why Reach Navigation Should Replace the Navbar in iOS Design
Brad Ellis explores the problems of the Navbar in iOS with the growing device size and shows how the Reach navigation pattern is the future.
Read it
wregex - How Regular Expression Engines Work
Werner Stoop shares his regular expression engine called wregex and explains how it works.
Read it
Polymer 2.x Cheat Sheet
A well explained cheat sheet for the Polymer 2.x library by Monica Dinculescu.
Check it out
Machine Learning Surveys
A curated list of Machine Learning related surveys, overviews and books.
Check it out
Playful Little Tooltip Ideas
Some little ideas for bouncy and playful tooltip shapes and animations with SVG and anime.js. Among other styles, we use shape morphing and transform.
Check it out