Collective #167

Inspirational Website of the Week: Werkstatt - l'atelier interactif
A beautifully creative design together with some thoughtful smooth scrolling make Werkstatt our pick this week.
Get inspired
There Is No Fold
Luke Wroblewski shows how "above the fold" arguments fail in the light of new insights on users' engagement behavior.
Read it
Building Nonlinear Narratives for the Web
Learn about how to create nonlinear narratives on the web in this fascinating article by Senongo Akpem.
Read it
ES Feature Tests
ES6+ feature tests that allows you to test your code and determine what to deliver for your app. Made by Kyle Simpson.
Check it out
wwwhere
Wwwhere provides a carefully curated list of tools and resources for people who make websites.
Check it out
An Introduction To Graphical Effects in CSS
Sara Soueidan shows how we can achieve advanced graphical effects with CSS only in this Adobe Dreamweaver Team Blog article.
Read it
Experiment: Material Design Stopwatch, Alarm and Timer
Danny Markov from Tutorialzine shares this JavaScript application that consists of an alarm clock, a stopwatch and a timer based on Google's Material Design.
Check it out
Enhance Your JavaScript Debugging with Cross-Browser Source Maps
David Rousset shows how to use Source Maps for efficient production debugging.
Check it out
We Tested How Googlebot Crawls Javascript And Here's What We Learned
How does Google crawl and index certain JavaScript functions? Some interesting results from a series of tests by Adam Audette.
Read it
The Designer Litmus Test
An interesting article on the key personality traits of great product designers.
Read it
Form Inputs: The Browser Support Issue You Didn't Know You Had
Learn about all the different browser inconsistencies when it comes to form inputs. An article by Aaron Ladage.
Read it
Free Font: Nervous Energy
Pelle Sten designed this unique looking handwritten typeface.
Get it
Typedrummer
Create awesome beats by typing letters in this fun app by Kyle Stetz.
Check it out
Smoke
A jQuery plugin that is designed to work with Bootstrap 3 with lots of helpful functionality including form validation, notifications, progress bar and more. Made by Alfredo Barron.
Check it out
Random Stuff Free Iconset
A really stylish icon set by Ghani Pradita.
Get it
Awesome MySQL
A curated list of awesome MySQL software, libraries and resources by Shlomi Noach.
Check it out
Happycons (AI, Sketch, PNG, SVG, EPS)
40 essentials icons designed by uiSurf in a happy and unique manner. Free for a limited time.
Check it out
Workshape.io
Workshape is a talent matching service for Startups that helps match engineers with startups.
Check it out
Icons - Font, Inline SVG or Background SVGs?
Some interesting results on which kind of icon type is better in terms of performance.
Read it
Viosk
Create and render your own videos with this video content management system.
Check it out