Bi-Weekly Frontend News

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 inspired

Intro to CSS Masking


See how CSS masking and clip paths work in this great introduction by Razvan Calimanto. Very nice in-browser presentation.

Watch it

Real 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 out

VideoSWS 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 out

Performance 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 it

Line icon set for UI & more


Situ Herrera shares these beautiful vector-based UI icons in AI, EPS, and PSD.

Read it

Web 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 out

Mozilla 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 it

Mapsicon 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 out

Free Font: AC Mountain


Adrian Candela designed this fine typeface that got inspired by a wrought-iron sign board.

Get it

Welcome 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 out

Designing iOS7 style icons


Some very useful tips on how to design delicate iOS7 style icons from the Campaign Monitor blog.

Read it

3D Piano Player with three.js


An amazing 3D Piano player demo made with Three.js and MIDI.js. Created by Borja Morales.

Check it out

requestAutocomplete - 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 it

Free iPad & iPhone 5s Mockups (PSD)


Some great Apple devices mockups by Regy Perlera.

Read it



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 out

Google 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 it

PHP 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 out

36 Thinicons (PSD)


A very fine icon set with 36 app icons by Rovane Durso.

Get it

Blueprint Wireframe Kit (PSD)


Some nice elements for creating a blueprint style wireframe by Göksel Vançin.

Get it

Polygon Backgrounds


A collection of stylish and colorful high-resolution polygon backgrounds by Shantha Abeyrathne.

Get it

Long 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 it

Perspective App Screens Mock-Up (PSD)


A fantastic 3D app screens perspective mockup by Pixeden.

Get it