Collective #84
Inspirational Website of the Week
This week's pick is a beautifully designed scroll experience where you get to meet five outstanding fonts. It's the second edition of FontShop's type presentation.
Get inspiredIntro to CSS Masking
See how CSS masking and clip paths work in this great introduction by Razvan Calimanto. Very nice in-browser presentation.
Watch itReal Time Application Monitoring
If you are developing a web or mobile application you will definitely find New Relic's monitoring very useful. You'll be able to get an overview of page load times, error rates, slow transactions, and a list of servers running the app and a lot more.
Check it outVideoSWS HTML5 Video Player Comparison
Video "See What Sucks" is a very insightful comparison of HTML5 video players. You can test all players and get an overview of their differences. The site was created by Philip Bräunlich and Gerrit van Aaken.
Check it outPerformance Tooling
Paul Irish shows how to use Chrome DevTools to improve performance on a website. The event was recorded live at the #perfmatters event hosted by the San Francisco HTML5 User Group. link to the slides
Watch itLine icon set for UI & more
Situ Herrera shares these beautiful vector-based UI icons in AI, EPS, and PSD.
Read itWeb Audio API Loops
Learn how to make audio loops with the Web Audio API in this great tutorial by Daniel Gagan. Don't miss to see the demo here.
Check it outMozilla Appmaker
A very recent and promising-looking project by Mozilla for creating mobile apps. It's pre-alpha at this point so it might be a bit buggy.
Try itMapsicon Country Maps
Mapsicon by Régis Freyd is a free collection of maps for most of the countries in the world. Many different sizes and SVG versions are available.
Check it outFree Font: AC Mountain
Adrian Candela designed this fine typeface that got inspired by a wrought-iron sign board.
Get itWelcome to the new JSHint website
JSHint is an excellent tool for detecting errors and potential problems in your JavaScript code. The new site comes with the option for instant feedback and insights on your code.
Check it outDesigning iOS7 style icons
Some very useful tips on how to design delicate iOS7 style icons from the Campaign Monitor blog.
Read it3D Piano Player with three.js
An amazing 3D Piano player demo made with Three.js and MIDI.js. Created by Borja Morales.
Check it outrequestAutocomplete - Take my money, not my time
Jake Archibald introduces the genius of requestAutocomplete and how it can ease the payment process by requesting payment details from the browser, which stores them on the user's behalf.
Read itFree iPad & iPhone 5s Mockups (PSD)
Some great Apple devices mockups by Regy Perlera.
Read itYummi-loader
A LESS file with some CSS3 animations that allows for adding a on/off class to the body element for fancy loading effects. Made by the Gummibear Lab.
Check it outGoogle Web Designer
Google's new WYSIWYG editor that let's you create interactive HTML5-based designs. Probably a great tool for creating cross-device, rich media ads.
Try itPHP Image Compression & Caching
Image Cache is a very useful PHP class that compresses and caches an image, then moves it to a new directory, and returns the new source for the image.
Check it out36 Thinicons (PSD)
A very fine icon set with 36 app icons by Rovane Durso.
Get itBlueprint Wireframe Kit (PSD)
Some nice elements for creating a blueprint style wireframe by Göksel Vançin.
Get itPolygon Backgrounds
A collection of stylish and colorful high-resolution polygon backgrounds by Shantha Abeyrathne.
Get itLong Shadow Tutorial
There have been many generators and CSS versions out there but if you'd like to know how to create long shadows on your designs with Photoshop then this tutorial will enlighten you.
Read itPerspective App Screens Mock-Up (PSD)
A fantastic 3D app screens perspective mockup by Pixeden.
Get it