Collective #47
Inspirational Website of the Week
Libertine Libertine is a very minimal and clean online store with a super-easy navigation. It makes shopping a real breeze; only the necessary information is shown.
Get inspiredImplementing Off-Canvas Navigation For A Responsive Website
An in-depth tutorial by David Bushell on how to create a off-canvas navigation for a responsive website.
Check it outAn Advanced Guide to HTML & CSS
Shay Howe started to create a very useful and practical guide to advanced HTML and CSS covering various important topic. You also might want to check out A Beginner's Guide to HTML & CSS.
Check it outBrowser Awareness Day
Browser Awareness Day is a social campaign by teamgeek that aims to educate people about the importance of updated browsers for techies and non-techies alike. They also offer a JS snippet that you can use to add to your site for alerting users if they have an outdated browser.
Check it outLive Tools
A brilliant collection of generators that allow you to easily create your own UI elements with little coding knowledge. You can also download your creations for use in your websites and online applications.
Check it outThe Accessibility Project
The Accessibility Project is a community-driven effort to make web accessibility easier. You will find helpful articles, a web accessibility checklist and some great resources that will help you maximize the accessibility of a website.
Check it outThe jQuery Plugin Registry
The new jQuery plugin site that will make finding, downloading and registering plugins easier and better.
Check it outxy.css – Responsive Grid Design
xy.css is a lightweight CSS template for building responsive liquid-grid designs. It brings together the best CSS techniques from around the Web and integrates them into a single, powerful style sheet template.
Check it outThe Absolute Beginner's Guide to Sass
If you'd like to start out with Sass, you'll definitely find this introduction by Andrew Chalkley helpful.
Read itTesting jQuery Plugins Cross-Version With Grunt
In the light of the recent news that jQuery will be dropping support for IE8 and below in the new version, Mark Dalgleish shows how to test the cross-version capabilities of a jQuery plugin with Grunt.
Read itHTML5 Drag and Drop Avatar Changer with Resizing and Cropping
Learn how to create a drag and drop avatar uploader and resizer in this in-depth tutorial by Chris Coyier.
Read itWhat No One Told You About Z-Index
Philip Walton explains how the z-index is often not fully understood and gives some examples that will teach you some things that you probably did not know.
Read itSource Maps 101
Learn about source maps in this introduction by Sayanee Basu. In the tutorial you'll take a very simple bit of JavaScript and SASS code, run them through various compilers, and then view the original files in the browser with the help of source maps.
Read itVoice Driven Web Apps: Introduction to the Web Speech API
Glen Shires shows us how the new JavaScript Web Speech API can be used to easily add speech recognition to a website.
Read itTwitter Button Concept
Bennett Feely shares his pen of the beautiful Twitter button concept by Erik Deiner.
Check it outUsing Unprefixed CSS3 Gradients in Modern Browsers
Jennifer Yu from the Internet Explorer team gives us an overview of the changes for the unprefixed CSS3 gradients syntax in this WebAppers article.
Read itFree Font: V.GER Grotesque
A beautiful font that came out of a students project.
Get itSharp Pixel-Icons
For his debut, Natko Hasić shares these tiny pixel gems with us. The set contains 20 sharp pixel icons.
Get itflowtime.js
Marco Lago created flowtime.js, an HTML5/CSS3/JS presentation framework for easily building HTML presentations.
Check it outEmpty States
For his brilliant article "Designing for the Empty States", Craig Dennis created this collection of empty states in apps. You can submit your screenshots and get inspired for how to design the empty states of your app.
Check it outMaxmertkit
Maxmertkit is a CSS framework that is based on a widget-modifier coding style. Combining widgets with a status, size and modifier you can get your ready-to-use code.
Check it outvoxel.js
voxel.js is a collection of projects that make it easy to create 3D voxel games like Minecraft in the browser based on WebGL. It is written by James Halliday and Max Odgen and you can contribute on GitHub.
Check it outMini Keyboard Game
Tastatour is a very minimal but fun keyboard game to train your reaction with some rad sound. It was created by Jan Oelze and Dominik Johann.
Check it outFront-end performance for web designers and front-end developers
An excellent in-depth article on performance of websites and apps by Harry Roberts that aims to give first-hand performance techniques that will help you understand front-end performance and help you make your apps faster.
Read itFlat UI is not the only way forward
Max Rudberg writes about the latest discussion around the "flat look" and why he believes that it is just a stylistic choice and not the only way to design apps in the future.
Read it