Collective #127
Inspirational Website of the Week: DUNCKELFELD

An incredibly smooth interactive experience and an impeccable design made this website our pick of the week.
Get inspiredCSS Triggers

A definitive reference for what work is triggered by changing various CSS properties. Read more about it in this article by Paul Lewis.
Check it outUnderstanding SVG Coordinate Systems & Transformations (Part 2): The <transform> Attribute

The second part of a really great guide to understanding the SVG coordinate system and transformations by Sara Soueidan.
Read itSVG Masks

A fantastic demo by Yoksel that shows the power of SVG masks.
Check it outFontface Ninja

With Fontface Ninja you can instantly find out what fonts are used on a website and experiment with it.
Check it outPoints Of Interest

A beautiful component by Claudia Romano from Cody for showing points of interests of products.
Check it outAnimating SVG text On A Path

Learn how to animate SVG text on a path in this great tutorial by Joni Trythall.
Check it outFree Lined Icons (AI)

A beautiful little freebie by buatoom.
Get itLet's Talk About RTL

A great guide on how to create RTL websites by Ahmad Alfy.
Read itCreating dub delay effects with the Web Audio API

Chris Lowis shows you how to make some seriously cool dub delay effects with the Web Audio API.
Check it outFree Font: Thin Line Font

Gatis Vilaks shares this unique and harmonious font for free.
Get itbaguetteBox.js

A simple and easy-to-use JavaScript lightbox script.
Check it outHow we make RWD sites load fast as heck

Some great advice and tips how to make responsive websites load fast. An article by Scott Jehl.
Read itT3

T3 is a template to build three.js applications without worrying about the common set up process and allowing multiple applications per page. Made by Mauricio Poppe.
Check it outAn Alphabet of Accessibility Issues

Anne Gibson lists 26 personae as examples of why we need to make simple, readable, effective content on the web.
Check it outGame About Squares

A really cool and addictive little game by Andrey Shevchuk.
Check it outThe jungle of mobile HTML5 development

A solid collection of HTML5 mobile development resources by Yacine Rezgui.
Read itFull-width pinned layouts with flexbox

Learn how to use flexbox to pin two things to opposite ends of the viewport with a heading centered in between. A tutorial by Zoe Mickley Gillenwater.
Check it outRadio-Controlled Web Design

Radio-control the web? Art Lawry explains how the radio button technique can help spare some JS and therefore make websites lighter.
Read it