Collective #150

Inspirational Website of the Week: Wonderful Colorado
A beautiful design with excellent typography and a clean layout. Our pick this week.
Get inspired
Flexbugs
A list of cross-browser flexbox issues and their workarounds. Based on this article by Phil Walton.
Check it out
Zero element loading animations
A great pseudo-elements method for adding CSS loading animations without additional markup. By Mike Riethmuller.
Check it out
3D Curtain Template
A great tutorial on how to create a beautiful layout with a curtain-like effect on scroll. By Claudia Romano from CodyHouse.
Check it out
How we use web fonts responsibly, or, avoiding a @font-face-palm
Some very useful methods for including web fonts more efficiently. An article by Zach Leatherman from the Filament Group.
Read it
TheaterJS
With TheaterJS you can have typing effects that mimic human behavior. Made by Gabin Aureche.
Check it out
The Guide to Mockups
A free e-book that will teach you about different mockup types, methods and best practices.
Get it
Sass Guidelines
An in-depth guide on how to write maintainable and scalable Sass by Hugo Giraudel.
Check it out
Quick tip: conditional form fields with CSS
A valuable break down of using the :checked pseudo class and the adjacent sibling selector for showing conditional elements by Christian Heilmann.
Check it out
Creating Your First Desktop App With HTML, JS and Node-WebKit
Danny Markov shows you how to get started with Node-WebKit for creating a desktop app.
Check it out
365 awesome designers
365 awesome designers is a small project by WILD, where they post one designer each day for one year.
Check it out
Dashel Icon Set (45 Icons, SVG, PSD, PNG)
An absolutely gorgeous free icon set made by Matt Skiles for Smashing Magazine.
Get it
Canvas, images and pixels
A tutorial by Christian Heilmann that explains some of the features of Logo-O-Matic, with detailed information on how to manipulate pixel images in Canvas. Read more about it here.
Check it out
Designing For Print With CSS
An interesting article by Rachel Andrew on designing for print with CSS including formatting books, catalogs and brochures.
Read it
The Core Model: Designing Inside Out for Better Results
A great article by Ida Aalen on how a "homepage last" or core model approach for designing a website can help getting things done better.
Check it out
Cross-tab Communication
Nicolas Bevacqua explores cross-browser cross-tab communication using localStorage
. He has also put together a module, local-storage, that provides a simplified API to localStorage.

The God Login
How would God build a login dialog? Jeff Atwood shares his experience with building the login for Discourse.
Read it
Introduction to HTML Imports
Learn about HTML Imports, what they are and how to use them. An article by Eiji Kitamura.
Check it out
Free Font: Wild Spaces
Wild Spaces is a beautiful font for outdoor related designs. Made by Nathan Brown for WeGraphics.
Check it out