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

Swiping and Reordering Lists on Touch Screens – Slip

Slip is a tiny library for interactive swiping and reordering of elements in lists on touch screens. No dependencies. You interact with the library via custom DOM events for swipes/reordering. Call new Slip to make element’s children swipeable and add event listeners.

Create Stunning Globe Visualizations – Planetary.js

A great library for creating stunning globe visualizations for the web. It is highly customizable and supports dragging and zooming.

Fluidbox – jQuery Plugin for Beautiful Lightboxes

Fluidbox is a jQuery plugin that replicate the distraction-free, fluid lightbox seen on Medium, and to improve on it such that it will allow linking to a larger-resolution image.

Midway.js – Automatically Center Responsive Elements

Midway.js makes it super easy to automatically center the responsive elements on your websites. You all know and love the absolute positioning centering technique, but what happens when those centered elements change sizes, due to percentage based layouts? That’s where Midway.js comes in.

A Collection of CSS3 Powered Hover Effects – Hover.css

Hover.css is a collection of CSS3 powered hover effects to be applied to call to actions, buttons, logos, featured images and so on. Easily apply to your own elements, modify or just use for inspiration. Available in CSS and SASS. All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS and SASS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don’t support these features may need some extra attention to be certain a fallback hover effect is still in place.

TinyColor – JavaScript Color Manipulation Micro Framework

TinyColor is a micro framework for inputting colors and outputting colors as different formats. Input is meant to be as permissive as possible. The following color types are supported: RGB, HSL, HSV, Hex, Name (from SVG color codes).

The Streaming Build System – GulpJS

By preferring code over configuration, gulp keeps simple things simple and makes complex tasks manageable. By harnassing the power of node’s streams you get fast builds that don’t write intermediary files to disk.

Real-time Collaborative Writing Environment – Typewrite

Typewrite is a real-time collaborative writing environment. Format with Markdown. Style text as you type without taking your hands off the keyboard. Collaborate with others on documents in real-time. Write and edit together. Sync with Dropbox. Use your favourite text editors on your phone, tablet, or computer.

Fast, Beautiful, and Painless Social Shares

Simple, light, flexible, and good-looking share button jquery plugin.

Math.js – Extensive Math Library for JavaScript

Math.js is an extensive math library for JavaScript and Node.js. It features a flexible expression parser and offers an integrated solution to work with numbers, big numbers, complex numbers, units, and matrices. Powerful and easy to use.

The Critical Rendering Path

The most important concept in pagespeed is the critical rendering path. This is true because understanding this concept can help you do a very wonderful thing… Understand the concept of the critical render path and learn how to optimize it in this insightful article.

FREE TEMPLATES AND THEMES

Simple and Light Responsive Grid System

GerduKreatip – Free Agency Portfolio PSD Theme

Free Personal vCard One Page HTML Template

DESIGN FREEBIES

Free Download – Flat Apple Devices Mockup

This is a huge collection of flat Apple devices mockups to showcase your responsive web designs. The PSD file includes iPhone, iPad, iMac and Macbook with different viewing angles.

144 Outline Icons (Free PSD and AI)

The icons were first designed using Adobe Illustrator, then converted into Adobe Photoshop vector shapes. So you will get both AI and PSD files. You can use those icons as you want.

Freebie: The White Stripes UI Kit (PSD)

Odin Rounded – Free Font

Odin Rounded is an free experimental font family with a clean and linear appearance. The simple compact nature of the design and the many alternates allows for great economy of space across layouts. it supports upper/lowercase, kerning and opentype features.