Collective #84

View All

CSS Masking explained * Real Time App Monitoring * VideoSWS * Performance Tooling * Mockups * Free Fonts

Collective 84

Inspirational Website of the Week

Collective84_fontwalk

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

Collective84_masks

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

Collective84_newrelic

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

Collective84_html5video

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

Collective84_performancetooling

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

Collective84_lineiconset

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

Read it

Web Audio API Loops

Collective84_webaudio

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
Advertisement

Mozilla Appmaker

Collective84_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

Collective84_mapsicon

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

Collective84_acmountain

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

Get it

Welcome to the new JSHint website

Collective84_jshint

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

Collective84_iosicons

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

Collective84_piano

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

Collective84_requestAutocomplete

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)

Collective84_mockups

Some great Apple devices mockups by Regy Perlera.

Read it

Yummi-loader

Collective84_yummiloader

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

Collective84_GoogleWebDesigner

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

Collective84_phpcache

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)

Collective84_icons

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

Get it

Blueprint Wireframe Kit (PSD)

Collective84_blueprint

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

Get it

Polygon Backgrounds

Collective84_polygon

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

Get it

Long Shadow Tutorial

Collective84_longshadowtut

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)

Collective84_perspmockup

A fantastic 3D app screens perspective mockup by Pixeden.

Get it

Would you like to become a Collective sponsor?

You can sponsor a Collective issue with your own news item. Find out more.

Would you like to send us some news?

The Collective features the latest news and resources from the web design & web development community. If you have spotted or created something that you'd like see published in the next issue, just submit the resource or article here.