New Tools And Resources For Web Designers

Web design and development represent a domain that is moving forward very fast and new tools appear each day. I made a list from all these tools and resources that have been launched since our previous article and selected the best of them, the most useful ones, to present to you. It is a list of 34 resources that a web designer or web developer would find really interesting.

HTML5 ADMIN

HTML5 ADMIN

A fluid html5 ready template for administration sections (BackEnds) shared for your personal use.

It basically is a mix of Plugins and html structures for developers who want to spend less time on graphics and more on code, without having a UX that sucks.

Sisyphus.js

Sisyphus.js

Imagine you’re filling a complex form on site, or typing effervescent and extensive comment. And when you’re almost done with that browser is crashed, or you closed tab mistakenly, or electricity is turned off, or something else break your efforts. Disgusting, huh?

With Sisyphus on site you just reopen page in your modern (with HTML5 support) browser and see all your changes at that forms. It’s lightweight (3.5 KB) jQuery plugin uses Local Storage to prevent your work being lost.

Syntaclet

Syntaclet

Syntaclet is a bookmarklet, a bookmark which acts like a little computer program rather than taking you to a website. To use Syntaclet simply drag the bookmarklet to your bookmarks bar (or right click and choose “Add to favorites…”). Now anytime you are on a website you can simply click ‘{} Syntaclet’ in your bookmarks bar and it will go to work making all the code on the website easier to read. It will also bring up the Syntaclet toolbar giving you some options.

Cssizer

Cssizer

Cssizer is a simple tool to let you edit the design of an html page in real time (As you type). You can then use the url you are given to share your design with others. A great way to experiment with css, or let a designer tinker with your css rules. An online css sandbox so to speak.

QUnit

QUnit

QUnit is a powerful, easy-to-use, JavaScript test suite. It’s used by the jQuery project to test its code and plugins but is capable of testing any generic JavaScript code (and even capable of testing JavaScript code on the server-side).

QUnit is especially useful for regression testing: Whenever a bug is reported, write a test that asserts the existence of that particular bug. Then fix it and commit both. Every time you work on the code again, run the tests. If the bug comes up again – a regression – you’ll spot it immediately and know how to fix it, because you know what code you just changed.

KeyboardJS

KeyboardJS

KeyboardJS is a library for binding to keys or key combos. It can be used as both a standalone library or an AMD module

Snippely

Snippely

Snippely is a basic text and code organizational tool. Instead of storing bits of code, quick notes, and memos in text files all over your hard drive, this application will let you save and organize “snippets” in one convenient location. A snippet is a collection of one or more pieces of code and notes. Snippets are stored in groups for organization and quick retrieval.

A snippet is composed of a title, description, and one or more ‘snips’. You can add any number of note and code snips in a variety of different languages (more to be added). When not being edited, the snip will be syntax highlighted according to the language selected. Snips are also sortable so you can organize your snippet however you want. Since everything is saved to a local database as you work, there’s no need to worry about pressing the save button or submitting a form.

The Goldilocks Approach

The Goldilocks Approach

The Goldilocks Approach uses a combination of Ems, Max-Width, Media Queries and Pattern Translations to consider just three states that allow your designs to be resolution independent.

csg.js: Constructive Solid Geometry

csg.js: Constructive Solid Geometry

Constructive Solid Geometry (CSG) is a modeling technique that uses Boolean operations like union and intersection to combine 3D solids. This library implements CSG operations on meshes elegantly and concisely using BSP trees, and is meant to serve as an easily understandable implementation of the algorithm. All edge cases involving overlapping coplanar polygons in both solids are correctly handled.

Reverie: Versatile HTML5 Responsive WordPress Framework

Reverie: Versatile HTML5 Responsive WordPress Framework

Reverie Framework is an extremely versatile HTML5 WordPress framework based on ZURB’s Foundation, a powerful tool for building prototypes on any kind of devices. Reverie follows HTML5 Boilerplate standard and is hNews microformat ready. It is optimized for Search Engine while at the same time improve readability.

It is extremely easy to create your blog, CMS, brochure and any other kind of sites with Reverie. You can see some samples on ZURB and how they make these prototypes. Did I just mentioned Reverie works well with bbPress 2.0, even without styling?

Sharrre: Social Sharing jQuery Plugin

Sharrre: Social Sharing jQuery Plugin

Sharrre is a jQuery plugin that allows you to create nice widgets sharing for Facebook, Twitter, Google Plus (with PHP script) and more.

All sharing buttons are different, with Sharrre you can create uniform buttons to integrate with your designs. With Sharrre, the API buttons are called on demand and once, regardless of how many buttons you have.

Stitches: HTML5 sprite sheet generator

Stitches: HTML5 sprite sheet generator

Craftyslide

Craftyslide

Craftyslide is a tiny (just 2kb) slideshow built on jQuery. Craftyslide aims to be different, by providing a simple, no-frills method of displaying images; packaged into a small, clean and efficient plugin.

iUI: web framework for smartphones & high-end devices

iUI: web framework for smartphones & high-end devices

iUI is a framework consisting of a JavaScript library, CSS, and images for developing advanced mobile webapps. Made with only iPhone in mind in the first place (reason of i UI), we now supports most smartphones & tablets.

Flatiron: an unobtrusive framework initiative for node.js

Flatiron: an unobtrusive framework initiative for node.js

No one agrees on frameworks. It’s difficult to get consensus on how much or how little a framework should do. Flatiron’s approach is to package simple to use yet full featured components and let developers subtract or add what they want.

Flatiron promotes code organization and sustainability by clearly separating development concerns. Each component works elegantly with or without its counterparts. Many of the components work the same in the browser as they do on the server. This is the motivation behind flatiron. At it’s core flatiron is two things:

Popcorn.js: an event system for HTML5 media developers

Popcorn.js: an event system for HTML5 media developers

Popcorn.js is an event system for HTML5 media developers. Think jQuery for video. You can leave the heavy lifting to Popcorn, and concentrate on what you do best: writing awesome code.

WebPutty: simple CSS editing and hosting service

WebPutty: simple CSS editing and hosting service

WebPutty gives you a syntax-highlighting CSS editor you can use from anywhere, the power of SCSS and Compass, a side-by-side preview pane, and instant publishing with minification, compression, and automatic cache control.

Get started with just a pair of tags in your website’s template and WebPutty will host and serve your published CSS minified and gzipped for super speed.

jQuery contextMenu

jQuery contextMenu

The contextMenu Plugin was designed for web applications in need of menus on a possibly large amount of objects. Unlike implementations as a beautiful site’s or trendskitchens’ this contextMenu treats the menu as the primary object. That means, that a single menu is defined that can be used by multiple objects. Unlike the mentioned plugins, contextMenu doesn’t need to bind itself to triggering objects. This allows injecting and removing triggers without having to re-initialize or update contextMenu.

TileMill: application for making maps

TileMill: application for making maps

TileMill is an application for making beautiful maps. Whether you’re a journalist, web designer, researcher, or seasoned cartographer, TileMill is the design studio you need to create compelling, interactive maps.

TileMill is built on a suite of modern open source libraries including Mapnik, node.js, backbone.js, express and CodeMirror. Every map you make in TileMill is mobile ready. By leveraging the portable, fast MBTiles format, each TileMill map looks and works great on the web and offline.

jQuery Org Chart: data visualising in a tree-like structure

jQuery Org Chart: data visualising in a tree-like structure

jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree structure. To build the tree all you need is to make a single line call to the plugin and supply the HTML element Id for a nested unordered list element that is representative of the data you’d like to display.

Hovercard

Hovercard

A free light weight jQuery plugin that enables you to display related information with the hovered label, link, or any html element of your choice.

Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

Skeleton: A Beautiful Boilerplate for Responsive, Mobile-Friendly Development

Skeleton is a small collection of CSS & JS files that can help you rapidly develop sites that look beautiful at any size, be it a 17″ laptop screen or an iPhone. Skeleton is built on three core principles.

Skeleton has a familiar, lightweight 960 grid as its base, but elegantly scales down to downsized browser windows, tablets, mobile phones (in landscape and portrait).

money.js: JavaScript currency conversion library

money.js: JavaScript currency conversion library

money.js is a JavaScript currency conversion library, done right – with no dependencies, in just over 1 kb.

Designed to work seamlessly with data from the Open Source Exchange Rates API project – but can be set up to use any data source and base currency in just a few lines. And it works as a NodeJS/CJS and RequireJS/AMD module, too.

Slider.js: Slideshow with jQuery, CSS Transitions and Canvas

Slider.js: Slideshow with jQuery, CSS Transitions and Canvas

Slider.js is an easy-to-use customizable Javascript library to create image slideshows.

Slider.js relies on latest web technologies: the power of CSS Transitions to perform awesome and efficient effects and the HTML5 Canvas to perform some non trivial transitions.

jQuery.suggest: inline autosuggest jQuery plugin

jQuery.suggest: inline autosuggest jQuery plugin

jQuery.suggest, a simple inline autosuggest jQuery plugin. It takes an array of terms as haystack and suggests the user the first item that matches what has been typed to this point. The suggestion is updated with every keystroke. Tab or Enter will accept the suggestion and update the input field accordingly.

Lungo.js: The first Mobile Framework that uses the actual features of HTML5, CSS3 and JavaScript

Lungo.js: The first Mobile Framework that uses the actual features of HTML5, CSS3 and JavaScript

Features:
- Design and make applications for iOS, Android, Blackberry and WebOs.
- Designed to take advantage of the features of current mobile devices.
- Capture events like Swipe, Tap, Double-Tap…
- Distribute your app in “Mobile Stores” or in websites.
- No need images, everything is vector.
- Implement HTML5 features like WebSQL, Geolocation, History, Device Orientation and more…
- No webserver required.
- Implement native looking with (on iPad & iPhone).
- Fully customizable.
- You can use Lungo Sugars to sweeten your apps.
- Build apps, games, catalogues and everything else you can imagine.

Gridlover

Gridlover

Gridlover is the tool to establish a type system with modular scale and vertical rhythm to build upon.

Gridlover keeps sizing type tidy and logical. Font sizes are calculated by stepping up the font size by the scale factor. For a detailed explanation, see More Meaningful Typography at A List Apart. Elements in Gridlover are always kept aligned to a baseline grid

Minimit: jQuery plugin for galleries, slideshows, carousels, slides

Minimit: jQuery plugin for galleries, slideshows, carousels, slides

Minimit Gallery is a highly customizable jQuery plugin that does galleries, slideshows, carousels, slides… practically everything that has multiple states.

Using Minimit Gallery you have more time to focus on the ideation and the dynamics of your interface, all the logic functionality instead is managed by the plugin. It’s designed for advanced Javascript/Jquery programmers because you need to code all the animations and the css of the gallery.

Amazium Framework

Amazium Framework

So what is Amazium I hear you ask, well you may have been hearing the term “Responsive Web Design” being thrown around the past few months, which simple means a website that can adjust to your screen size without having to make a separate website!

This came about from the simple fact that a lot of people have been making demos of this responsive web design but none seem to be using 960 grid system with 12 columns, and because of this the author was forced to make his own.

MQFramework: A responsive CSS framework

MQFramework: A responsive CSS framework

A responsive CSS framework, MQFramework utilises the @ media property to allow you to design your sites for browsers of all sizes. Based on a 12 column grid, MQFramework degrades perfectly down to mobile screen sizes.

MQFramework is designed for five different screen resolutions. But with that comes the challenge of displaying the information you require.

validate.js: Lightweight JavaScript form validation library

validate.js: Lightweight JavaScript form validation library

Lightweight JavaScript form validation library inspired by CodeIgniter. No dependencies, just over 1kb gzipped, and customizable!

Formee: Fresh baked forms for your websites

Formee: Fresh baked forms for your websites

Formee is nothing but a framework to help you develop and customize web based forms. Did you use to spend a lot of time aligning fields and calculating margins and paddings in a quest for a perfect form? No more!

Don’t worry about having your form being rendered differently in the major browsers. It fits into your project, it’s flexible enough to adapt to the width you have available for the form. You can easily change between a stylish form or a minimalist one. It comes with the basic needed for you to put your touch in it.

SimpLESS: Simplifying website programming

SimpLESS: Simplifying website programming

Writing LESS is cool and lightning fast if you compare it to good old CSS and besides, it trains your thinking in solving functional problems. So far so good, but in the end the web needs a CSS file to show your website as it is. Either you embed a javascript file to live-transform your LESS-Code into CSS in your browser or you find out how to precompile your files into standard CSS.

 
 
 
 
 

Sponsors