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

Adaptive Placeholders

Danny King has designed an interactive placeholder thing for his forms and wrote it entirely in CSS. He has shared how he designed that placeholder and how it manages to adapt to user input.

Before he came up with the Adaptive Placeholder, it was just using a normal one, he liked the simplicity of using a placeholder as a label. It actually made a pretty crappy interaction for the user though. A user would type and the text disappeared. The person who enters a value first isn’t always the same person who sees it later. To solve this problem he tried making the placeholder persist through the typing.

Application Shortcut Mapper

ShortcutMapper is a keyboard shortcuts visualiser for popular applications. The application uses ajax calls to load keyboards and application data. First, try and find an online resource that lists all the application shortcuts for each platform. Now you’re going to use that resource to export an to intermediate data format that can be edited by hand easily. SHMAPLIB is short for “Shortcut Mapper Lib”. It’s a Python library that will help you export data in the right format to the right location.

Shine.js – A Library for Pretty Shadows

Shine.js is a library for pretty shadows. You can set dynamic light positions, Customizable shadows. And there is no library dependencies, AMD compatible. It works in browsers that support textShadow or boxShadow and auto-prefixes if necessary.

Photoshop Rulers & Guides Interface on Web Page

RulersGuides.js is a Javascript library which enables Photoshop-like rulers and guides interface on a web page. To create a guide, click the vertical or horizontal ruler and drag-n-drop it somewhere outside the ruler. It is possible to open/save created guides as grids using corresponding hotkeys. Rulers can be locked, so that one of the rulers will scroll along the page and the other will be always visible. Guides can be snapped to defined number of pixels. Detailed info mode is available, which shows position and size of regions created by the guides.

JSCapture: Screen Capture Library with JS and HTML5

JSCapture is screen capturing library implemented with pure JavaScript and HTML5. It allows you to make screenshots and record a video of your desktop from your browser. JSCapture uses getUserMedia for screen capturing. Currently the API for screen capturing is supported only by Google Chrome, Canary and Chromium by enabling an experimental flag.

Griddify – Photoshop Panel to Make Guides & Grids

Griddify is a tiny Photoshop Panel to make Guides and Grids. Griddify is tiny and fast. It helps you compose custom grid systems, vertical rhythm, and do a bunch of other stuff with guides in Photoshop. Make sure you have Adobe Extension Manager installed. Download Griddify, and install using Adobe Extension Manager. Once installed, open your Photoshop CC. You can find the panel in the “Window” menu, under “Extensions”. Best of all, Griddify is free and open-source.

jBox – jQuery Plugin for Popup Windows, Tooltips and Notices

jBox is a powerful and flexible jQuery plugin, taking care of all your popup windows, tooltips, notices and more.

iPresenter – jQuery Plugin for Presentations, Galleries and Sliders

iPresenter is a simple and powerful jQuery plugin that makes it easy to design advanced CSS3 presentations, galleries and sliders.

Gridmanager.js – Building Rows and Grids with Built in Editable Regions

Gridmanager.js is a way of building rows and grids with built in editable regions; requires jQuery, jQueryUI, Bootstrap 3.x, & optional TinyMCE or CKEditor.

Accelerated JavaScript Animation – VelocityJS

Velocity is a jQuery plugin that re-implements $.animate() to produce significantly greater performance (making Velocity also faster than CSS animation libraries) while including new features to improve animation workflow.

FREE TEMPLATES AND THEMES

Tumblr Boilerplate

The tumblr boilerplate is the simple basis of any good tumblr theme. Avoid slow setup times by developing your custom theme fast.

OneEngine – Free WordPress Theme + PSD

OneEngine is a free one page WordPress theme released with its PSD files.

Dashboard UI – Free PSD

A free dashboard user interface including custom icons and created with Photoshop vector shapes.

Bootstrap3 Based Single Page Free HTML Responsive Template – Meilleur

Meilleur is a professional, multipurpose and responsive one page HTML5 website template which has been built using the new Twitter Bootstrap 3 framework.

TemplateVamp: [FREE] Twitter Bootstrap Admin Template

Based on Twitter Bootstrap, TemplateVamp is a fully functional and customizable admin template that leverages the power and flexibility of HTML5 & CSS3. It can be used as a front-end toolkit for rapidly developing web applications that are lightweight, faster, and mobile-friendly; a great starting point.

TemplateVamp contains HTML and CSS-based design templates for typography, forms, buttons, charts, navigation and JavaScript extensions.

A Premium Responsive Business Portfolio HTML Template: Wee

This is Wee, responsive, super clean & creative HTML portfolio template for corporate sites, portfolio showcases and businesses. Wee is a purpose built responsive portfolio HTML template that focuses converting your visitors into leads (clients).

DESIGN FREEBIES

220 Line Icons in PSD Format [Free Download]

Free Summer Beach Colorful Labels Set

Garnata Display (Free Font)