This is our web design and web development news series where we share our favorite design/development related articles, resources, tutorials and awesome freebies.

NEW DEVELOPMENT RESOURCES AND TOOLS

The Vibration API for Mobile Devices

The Vibration API is an API specifically made for mobile devices as they are thankfully the only devices that have a vibrate function. The API allows developers to vibrate a device (in a pattern) for a given duration. The vibration API is implemented in navigator.vibrate. So calling the function makes your phone vibrate. You can test if your browser is recent enough to have the vibrate function in navigator.

Google Analytics Plugin to Track PageScrolling – Scroll Depth

Scroll Depth is a small Google Analytics plugin that tracks how far users are scrolling. It monitors the 25%, 50%, 75%, and 100% scroll marks, sending a Google Analytics Event at each one.

You can also track when specific elements on the page are scrolled into view. On a blog, for example, you could send a Scroll Depth event whenever the user reaches the end of a post.
The plugin supports Universal Analytics, Classic Google Analytics, and Google Tag Manager.

Simple Icon Picker – FontIconPicker

jQuery fontIconPicker is a small (1.58kb gzipped) jQuery plugin which allows you to include a simple icon picker with search and pagination inside your administration forms. The list of icons can be loaded manually using a SELECT field, loading an array of icons or directly from a Fontello config.json file.

Letter Based Alphabetical Navigation Bar to Your Lists – ListNav

ListNav is a jQuery plugin to add a slick “letter-based” navigation bar to all of your lists. Click a letter to quicky filter the list to items that match that letter.

Code Guide

Standards for developing flexible, durable, and sustainable HTML and CSS.

Free Visual Typeface Diff Tool – Tiff

Tiff is a typeface diff tool that visually contrasts the differences between two fonts. It’s a tool to help comparing two fonts while learning about typography. At this point, Google Web Fonts serves as the only source of external fonts for Tiff. Since the app uses some features only available in HTML5 and CSS3, use recent versions of modern web browsers for maximum compatibility.

20 Free Online Project Management and Collaboration Tools for Freelancers

This post lists some popular and free project management tools that freelancers can use online to improve their productivity and project management skills. Most of these online project management tools will allow you to create your own project workspace, manage personal and group tasks, collaborate online with project team and get instant overview of project schedule and overall progress.

Open Source Real User Monitoring – Bucky

Bucky is a client and server for sending performance data from the client into statsd + graphite, OpenTSDB, or any other stats aggregator of your choice.

It can automatically measure how long your pages take to load, how long AJAX requests take and how long various functions take to run. Most importantly, it’s taking the measurements on actual page loads, so the data has the potential to be much more valuable than in vitro measurements.

jQuery Plugin to Check If Element is in Viewport – isInViewport.js

isInViewport.js is an ultra-light jQuery plugin that tells you if the element is in the viewport, but with a twist. It lets you select a visible element(s) using the :in-viewport selector or by calling the .isInViewport() method on the element(s).

CSShake

Some CSS classes to move your DOM!

Build Single Page Apps with Durandal

Durandal is a cross-device, cross-platform client framework written in JavaScript and designed to make Single Page Applications (SPAs) easy to create and maintain. They have used it to build apps for PC, Mac, Linux, iOS and Android. Durandal is built on libs you know and love like jQuery, Knockout and RequireJS. There’s little to learn and building apps feels comfortable and familiar.

Float Labels with CSS

RowGrid.js

A small, lightweight jQuery plugin for placing items in straight rows.

Responsive Modal Windows – Remodal

Remodal is a flat, responsive, lightweight, fast, easy customizable modal window plugin with declarative state notation and hash tracking. All modern browsers are supported. You can easily define the background container for the modal(for effects like a blur).

HTML5 JavaScript Physics Engine – Matter.js

Matter.js is a 2D physics engine for the web. Touch and drag to interact, tilt and turn to control gravity.

Find & Give Inspiration

Blindify

Blindify is a jQuery plugin which creates a slideshow featuring a blinds effect transitioning (either vertical or horizontal) between a list of images.

How to Write an Impressive Resume in Less than 30 Minutes with Free Resume Template

This is a free professional resume template with step-by-step guide to creating an impressive resume in less than 30 minutes. This simple resume template will help you showcase your skills and services that may have been overlooked. Using this resume template, you will be able to create a professional resume in less than 30 minutes.

Using blend modes in HTML Canvas

Canvas blending is an HTML feature for designers and web developers. In this blog post, the author presents the syntax and some use cases where blend modes are particularly useful.

FREE TEMPLATES AND THEMES

25 Top Joomla Templates for Business and Portfolio Websites [Free Download]

This post is a special post for Joomla fans. We know we have not talked much about Joomla on this website before but today we are listing an exclusive list of free Joomla templates for business and portfolio websites.

Free Tumblr Theme

Free PSD Template – Quarantie

Free WordPress Resume Theme: Elegant Resume

Elegant Resume theme features a vibrant typographic header that can be used to display your name, tagline, contact information and links to your social profiles. The main body can accommodate your career information as well as an image gallery for your portfolio. The side bar is fully customizable with options to add various types of information – text, RSS Feed, Video etc. The dynamic Skills section allow you to rate your own skills and display them in the form of skills indicator. Additionally, you can add your location map, contact form, and option to view printable PDF resume.

Elegant Resume WordPress theme is designed to optimize your content for search engines as well as for flawless display on mobile devices. It is compatible with WordPress version 3.0x and above.

Free PSD Email Newsletter Template

Clean, minimal and pixel perfect PSD email newsletter template, made with attention to details, the layers are well organised, well named and grouped so you can made changes you like easily.

Free SWOT Analysis Template for Project Managers

SWOT (Strengths, Weaknesses, Opportunities and Threats) Analysis is a simple and effective method of analyzing feasibility of projects. Performed during the project initiation phase, SWOT analysis gives project managers and stakeholders an opportunity to identify strategic advantages and predict possible challenges in a project. SWOT analysis can also be performed at later stages of the project to revisit project plan and resources.

This is a free SWOT analysis template for project managers. This is a standard SWOT analysis template.

DESIGN FREEBIES

Free Line Icon Set for UI & more (Infinitely Scalable)

Metro Style Free Flat User Interface Kit (PSD) – Flatter

Metro Style Free Flat User Interface (UI) Kit along-with its PSD source file.

Free iTunes iOS7 UI Kit [PSD]

400+ Vector Outline Icon Set for Designers/Developers

Free Font – Simplifica