In the past weeks I made articles with tools for web designers that would fall under a certain category, searching for golden resources on the internet for myself and for you also. While making those articles I postponed a few times this article with newly released or discovered resources that would make a web designer’s or web developer’s life easier.
From the multitude of tools, apps and jQuery plugins that are present here, I hope you will find those that can be of help to you, depending on what projects you are working on and what specialization you have.
Conditionizr
Conditionizr is an intelligent jQuery plugin, that detects the end-users browser and pixel ratio, allowing you to serve specific conditional JavaScript and CSS files they need
OverAPI: Collecting All Cheat Sheets
jQuery Kit
Framer
Framer is a modern prototyping tool. It can help you to quickly build and test complex interactions and rich animations for both desktop and mobile.
Reuze
Reuze is a teeny-tiny front end framework that makes generating structure for blogs and article-heavy sites a breeze. It plays nice with other frameworks such as Foundation and Boostrap but also works equally well on it’s own.
Junior
A front-end framework for building HTML5 mobile apps with a native look and feel.
Centurion
Built using SASS and CSS3 media queries, Centurion is a responsive web framework that scales with your device. No longer do you need to worry about the screen size of an iPhone or an Android tablet since Centurion does the work for you.
FooTable
FooTable is a jQuery plugin that aims to make HTML tables on smaller devices look awesome – No matter how many columns of data you may have in them.
Gemicon
Gemicon is handcrafted icon set by Turqois, that comes in 3 different sizes (16px, 32px, 64px). Each pixel-perfect icon is available as a separate Photoshop layer. Download the set in PNG or PSD format. Gemicon is FREE and ready to use in your next awesome project!
CSS Browser Selector +
Photobox – CSS3 jQuery image gallery
Vagrant
Vagrant is a tool for building complete development environments. With an easy-to-use workflow and focus on automation, Vagrant lowers development environment setup time, increases development/production parity, and makes the “works on my machine” excuse a relic of the past.
Literally Canvas
Literally Canvas is an extensible, open source (BSD-licensed), HTML5 drawing widget that currently supports a minimal set of drawing operations. You can draw, erase, set the color with the eyedropper, undo, redo, pan, and zoom. It depends on jQuery and Underscore.js.
Spritemachine
Any List Scroller
foauth.org: OAuth for one
Vegas Background jQuery Plugin
RadiApp
jQuery.Shapeshift
Inspired heavily by the jQuery Masonry plugin, Shapeshift is a plugin which will dynamically arrange a collection of elements into a grid in their parent container.
Shapeshift is intended to be a very bare bones version of these grid systems, however the drag and drop is what sets it apart from the other similar plugins.
Framote
Thanks to Framote technology, you can give someone an unique URL (Framote URL) and change the content on the fly, so there’s no need the user (or users) to reload the page or revisit the link, because the content will be updated automatically.
Workless
A clean & classy HTML5, CSS3 framework that helps you to get your project up and running as fast as possible and helps prevent repetitive tasks.
dbv.php
dbv.php is a database version control web application featuring schema management, revision scripts, and more!
Eden
Ever thought about doing a Facebook+Twitter+Google mashup? How about integrating that with PayPal? Is setting up shipping options in your cart a pain? Adding different libraries form different sources add more complexity to your project and ends up to be hard to maintain. Eden simply a set of reusable components, that works with any PHP framework and CMS. Eden makes code logical and readable with dead simple syntax.
Responsive Img
Responsive Img swaps out an image’s src attribute based on its container’s width when the DOM is ready and when the browser is resized.
ish
ish. is yet another viewport resizer. What’s with the name, you ask? Small-ish. Medium-ish. Large-ish. That’s the idea. Many have long been preaching to let content, not device widths determine breakpoints in responsive designs, so rather than determining several fixed breakpoints, ish. roughs out general ranges in order to better serve the entire resolution spectrum.
xCharts
xCharts is a JavaScript library for building beautiful and custom data-driven chart visualizations for the web using D3.js. Using HTML, CSS,
and SVG, xCharts are designed to be dynamic, fluid, and open to integrations and customization.
EntryDNS
EntryDNS delivers a totally free DNS management service for your enjoyment.
WebSafeColors
Forward
A full-featured, developer centric e-commerce platform that makes custom code easy, with powerful templates & expressive syntax.
Parsimony
jQuery App-Folders
Use jQuery to create iOS-like App Folders on any website. They can contain any content and be styled in any way.
One div
One div aims to highlight the potential of CSS3 through a library of single element logos.All icons displayed on the website are realised in pure css with only one html div. The challenge is also to provide an alternative to SVG. Indeed icons allow precise borders preserved even resized (As vector format). Then we can see a clear interest in responsive design.
MobileDetec
MobileDetect is a lightweight PHP class for detecting mobile devices. It uses the user-agent string combined with specific HTTP headers to detect the mobile environment.
HTML5 Bones
HTML5 Bones is a template that goes back to basics and provides you with the bare minimum required to get going with HTML5. Inline comments explain how and when to use some of the most common HTML5 elements. Can also be used as a guide when building your own pages from scratch.
Useless CSS3 Generator
As a web designer, you can use CSS3 to create many cool effects which were earlier achievable only with images and photo editors. But if you start to write the css codes manually, it will be real difficult to remember all the syntax and visualize the effects just with the codes. You may need to change the code several times and refresh your web page to achieve the appearance you want.
This CSS3 generator can save you from this hassle by providing you with the simplest graphical interface to create the perfect appearance. Once you are done, you can directly copy and paste the auto-generated css snippets and save a lot of your time and energy. This is upto you to turn this CSS3 Generator useful!
DataMaps
jQRangeSlider
HTML_CodeSniffer
HTML_CodeSniffer is a client-side script that checks HTML source code and detects violations of a defined coding standard. HTML_CodeSniffer is written entirely in JavaScript, does not require any server-side processing and can be extended by developers to enforce custom coding standards by creating your own “sniffs”.
Sparky
Sparklines are intense, simple, word-sized graphics. Sparky is a JavaScript library for drawing them dynamically in your web browser.
a!ertifyjs: An unobtrusive customizable JavaScript notification system
Apaxy
Apaxy is a customisable theme built to enhance the experience of browsing web directories. It uses the mod_autoindex Apache module—and some CSS—to override the default style of a directory listing.
Batch
A lovingly designed and crafted suite of 300+ icons for web and user interface design.
Motio
jQuery plugin for simple but powerful sprite based animations and panning
Springy.js
Analytics.js
Every project needs analytics. But you shouldn’t have to litter your codebase with third-party-specific calls. Changing or adding new services should be a snap.
That’s where analytics.js comes in! Instead of adding hooks for every single analytics service you integrate, you add a single set of provider-agnostic hooks that then route to any analytics service you want!
You’ll never want to go back to those unfriendly third-party APIs again!
ABalytics.js: pure js + Google Analytics A/B testing
This pure javascript library allows you to do simple A/B testing working only on your client-side code. All data is registered as custom variables in your website Google Analytics profile, so you don’t need to configure anything server side.
