Fresh Resources That Web Designers Could Use – 34 Tools

I have gathered 34 more tools and resources for you, new ones, of course, that could help you with your work. There are a lot of neat stuff in here, or like I like to say, a little something for everyone. Enjoy the resources, bookmark them and use them wisely.

Camera slideshow

Camera slideshow

Camera slideshow is tested on new browsers, but I tried to make it compatible with the old versions of Internet Explorer too (8 and 7). But I don’t think I will spend many hours to improve this feature, sorry.

978.gs

978.gs

The 978 grid system uses 12 columns at 54px, with extra roomy 30px gutters. This comes out to a total of 978px, which uses up most of the space on a 1024×768 monitor. Almost every computer and tablet in the world today is capable of displaying designs built on this grid.

Ajaxplorer

ajaxplorer

A modern browser is all that’s needed to access AjaXplorer : the interface is very similar to OS-native file explorers, and all users can find their way in it. Users can easily share files or folders over the Internet, preview and edit most common file formats directly online, without having to download/upload the files to/from their local computer.

AjaXplorer is another “brick” that you can install on your web server : you may know WordPress, Joomla! or other “web-based” softwares. It’s the same technology (PHP), and AjaXplorer is normally accessed via an URL such as http://yoursite.com/ajaxplorer/.

AjaXplorer comes fully equiped with a complete users management system, securing the whole installation at once. It can also be interfaced with existing authentication mechanisms, to implement a “Single-Sign On” system and make users life easier.

TYPEDJS

TYPEDJS

Harness the power of type annotations and program specifications to make your code robust. It’s easy to get started.

Sequence: The jQuery Slider Plugin with Infinite Style

Sequence: The jQuery Slider Plugin with Infinite Style

Sequence is the jQuery slider plugin with infinite style. It provides the complete functionality for a website slider without forcing you to use a set theme. In fact, Sequence has no in-built theme, leaving you complete creative control to build a unique slider using only CSS3 — no jQuery knowledge required!

PageScroller

PageScroller

Page Scroller is a simple and elegant navigation plugin that adds smooth scroll functionality to your web page. The plugin is so simple, you can animate any web site.

Glisse.js

Glisse.js

Glisse.js is a simple, responsive and fully customizable jQuery photo viewer. You’ll like the transitions between two pictures entirely assumed by CSS3.

Curtain.js

Curtain.js

This plugin allows you to create a web page with multiple fixed panels that unroll with an amusing effect. Exactly like a curtain rises.

To navigate, you can use your keyboard instead the scrollbar or your mousewheel to navigate into the document. But that’s not all, there is more features! For example, you can easily add a fixed element or multiple “steps” element into a pannel.

jQuery tubular

jQuery tubular is a plugin that places a YouTube video of your choice into your page as a background.

Tinycon

Tinycon

Tinycon allows the addition of alert bubbles and changing the favicon image. Tinycon gracefully falls back to a number in title approach for browsers that don’t support canvas or dynamic favicons.

Alerts in the favicon allow users to pin a tab and easily see if their attention is needed.

turn.js

turn.js

turn.js is a plugin for jQuery that adds a beautiful transition similar to real pages in a book or magazine for HTML5.

Intype

Intype

Get spoiled by well-balanced behavior. Enjoy smart select & edit, snippet insertion and management, auto-paired characters, fast syntax highlighting and code-coloring themes.

Centurion

Centurion

Centurion is an open-source CMS delivered as a flexible PHP5 Content Management Framework.

Flotr2

flotr2

Flotr2 is a library for drawing HTML5 charts and graphs. It is a branch of flotr which removes the Prototype dependency and includes many improvements.

UIKit: Modern UI components for the modern web

UIKit is a small collection of flexible, decoupled jQuery JavaScript components for the modern web. With an emphasis on structure-only styling it’s easy to style UIKit to match your application, no preprocessor variables, just raw CSS structure! As a result most of the styling you see in this document is for demonstration only.

CodeMirror

CodeMirror

CodeMirror is a JavaScript library that can be used to create a relatively pleasant editor interface for code-like content ― computer programs, HTML markup, and similar. If a mode has been written for the language you are editing, the code will be coloured, and the editor will optionally help you with indentation.

Auto-detecting Credit Card Type

Auto-detecting Credit Card Type

There was a time when people thought the internet required a completely different payment method than the real world. After a very short period of time, everyone came to realize that credit cards were actually quite well-suited to the web, and so the credit card form was born.

Backstretch

Backstretch is a simple jQuery plugin that allows you to add a dynamically-resized background image to any page.

Adipoli jQuery Image Hover Plugin

Adipoli jQuery Image Hover Plugin

Adipoli is a simple jQuery plugin used to bring stylish image hover effects.

The jQuery HTML5 Audio / Video Library

The jQuery HTML5 Audio / Video Library

jPlayer is the completely free and open source (GPL/MIT) media library written in JavaScript. A jQuery plugin, jPlayer allows you to rapidly weave cross platform audio and video into your web pages. jPlayer’s comprehensive API allows you to create innovative media solutions while support and encouragement is provided by jPlayer’s active and growing community.

Kartograph

Kartograph

A simple and lightweight framework for creating beautiful, interactive vector maps. The core concept of Kartograph is to separate the mapping process in the map generation and map rendering part. The client-side library kartograph.js renders pre-generated maps stored in SVG files. You can chose among hundrets of ready-to-use maps or simply generate your own using kartograph.py, the open source Python SVG map generator.

jQuery File Upload

jQuery File Upload

File Upload widget with multiple file selection, drag&drop support, progress bars and preview images for jQuery. Supports cross-domain, chunked and resumable file uploads and client-side image resizing. Works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form file uploads.

audio.js

audio.js is a drop-in javascript library that allows HTML5’s < audio > tag to be used anywhere.

Morris.js

Morris.js

Making good-looking graphs shouldn’t be hard. Morris.js is a lightweight library that uses jQuery and Raphaël to make drawing time-series graphs easy.

XDate

XDate is a thin wrapper around JavaScript’s native Date object that provides enhanced functionality for parsing, formatting, and manipulating dates. It implements the same methods as the native Date, so it should seem very familiar.

Also, it is non-destructive to the DOM, so it can safely be included in third party libraries without fear of side effects.

TodoMVC

TodoMVC

Developers these days are spoiled with choice when it comes to selecting an MV* framework for structuring and organizing JavaScript web apps. Backbone, Spine, Ember (SproutCore 2.0), JavaScriptMVC… the list of new and stable solutions goes on and on, but just how do you decide on which to use in a sea of so many options?

To help solve this problem, we created TodoMVC – a project which offers the same Todo application implemented using MV* concepts in most of the popular JavaScript MV* frameworks of today.

Solutions look and feel the same, have a common simple feature-set and make it easy for you to compare the syntax and structure of different frameworks so you can select the one you feel the most comfortable with.

cssFx

cssFx

cssFx is a standalone polyfill that inserts the vendor-specific CSS3 properties necessary for old and new browsers. This saves you tons of time, maintenance, and bandwidth!

string.js

string.js, or simply S is a lightweight (< 2k Gzipped) JavaScript library for the browser or for Node.js that provides extra String methods. Originally, it modified the String prototype. But I quickly learned that in JavaScript, this is considered poor practice.

jTable: A JQuery plugin to create AJAX based CRUD tables

jTable: A JQuery plugin to create AJAX based CRUD tables

jTable is a jQuery plugin that is used to create AJAX based CRUD tables without coding HTML or Javascript. It has several features including:
– Automatically creates HTML table and loads records from server using AJAX.
– Creates ‘create new record’ jQueryUI dialog form. When user creates a record, it sends data to server using AJAX and adds the same record to the table in the page.
– Creates ‘edit record’ jQueryUI dialog form. When user edits a record, it updates server using AJAX and updates all cells on the table in the page.
– Allow user to ‘delete a record’ by jQueryUI dialog based confirmation. When user deletes a record, it deletes the record from server using AJAX and deletes the – record from the table in the page.
– Shows animations for create/delete/edit operations on the table.
– Supports server side paging using AJAX.
– Supports server side sorting using AJAX.
– Supports master/child tables.
– Allows user to select rows.
– Exposes some events to enable validation with forms.
– It can be localized easily.
– All styling of table and forms are defined in a CSS file, so you can easily change style of everything to use plugin in your pages. CSS file is well defined and commented.
– It comes with pre-defined color themes.
– It is not depended on any server side technology.
– It is platform independed and works on all common browsers.

Juice UI

Juice UI

Juice UI is an open-source collection of WebForms components that brings jQuery UI Widgets to your project with ease. Start leveraging the power of the world’s most popular JavaScript UI library while working with familiar code in your ASP.NET projects.

Juice UI allows you to create flexible, interactive web applications quickly. Entice your users with behaviors such as drag & drop, resizing, sorting and selecting. Build first class apps with accordions, autocompletes, datepickers, sliders, and more. Juice UI provides the simplicity needed for prototyping and the robustness needed for enterprise class production applications.

DirtyMarkup

DirtyMarkup

DirtyMarkup combines the power of HTML Tidy, CSS Tidy, JS Beautify, and the Ace editor to effortlessly clean up your messy code. Just paste your code into the editor and press “clean”. Now supports HTML5!

Fontomas

Fontomas

This tool helps to combine iconic webfonts for your project. With fontomas you can:
– make a limited symbols subset, with reduced font size
– merge symbols from several fonts to single file
– access large collections of professional-grade open source icons

Now it’s trivial to customise fonts for your needs with 3 simple step. At first, you select needed symbols on source fonts. Then rearrange those on destination font. After that, you can download SVG font and make webpack via fontsquirrel generator or other services.

Chico UI

Chico UI

Chico UI is a free and open source collection of easy-to-use web tools for developers and designers.

KineticJS

KineticJS

You can draw your own shapes or images using the existing canvas API, add event listeners to them, move them, scale them, and rotate them independently from other shapes to support high performance animations, even if your application uses thousands of shapes. Served hot with a side of awesomeness.

Enjoyed this article? Subscribe to read more like it

 

Sponsors