Useful HTML/CSS/JS Tools & Plugins For Designers and Developers
You can either develop everything from scratch, this will take forever or a little while longer, or you can use jQuery plugins, frameworks or other tools to complete the work faster and with less hassle and more accuracy.
Designers and Developers are releasing tools and plugins more often than people would expect and that is a good thing because we have a whole bunch of them to choose from. In this article, we are featuring some wonderful jQuery plugins along with other tools useful for web designers and web developers.
Contents
Topcoat
Yep, it’s another CSS library, this time from the folks at Adobe. This one is being marketed as a library “designed to help developers build web apps with an emphasis on speed”, which is a big topic nowadays and should make a lot of app developers give Topcoat a close look.
Automated Cross-Browser Testing With JavaScript – DalekJS
DalekJS is a free and open source user interface testing tool that is built with JavaScript (Nodejs).
It is capable of running the tests from a set of popular browsers (Chrome, IE, Firefox and WebKit).
Jeet Framework
Jeet takes the best of the open source HTML5/CSS3 World and combines it into a lightweight, semantic, responsive, and blazing fast framework.” You can use Stylus, SCSS, or both.
jQuery Animated Bar Plugin: jqBar
A simple jQuery plugin for creating animated vertical and horizontal bars. The plugin is called jqBar. jqBar can be used in variety of situations where you want to present data with some visual effects. It helps you crate beautiful bar charts to represent skill set or can be used as a progress bar. Plugin is very light weight and can be completely customized.
Animated line drawing in SVG
Jake Archibald explains how to smoothily animate an SVG line drawing.
CSS Prettifier Bookmarklet
If you ever come across a minimized stylesheet you’ve accessed via view-source, this bookmarklet by Addy Osmani (based on a userscript by Sindre Sorhus) will make it readable. I’ve tested it and it works nicely in Chrome.
jQuery Library for Flipping Things – Flippant.js
A customizable, zero-dependency, “mini js+css library for flipping things over.” Check out the on-page demos to see exactly what it does.
Quickly and Easily Build SQL Query Strings – Squel.js
A lightweight library to help you quickly and easily build SQL query strings through an object oriented API.
Hide and Reveal the Contents of a Password Input Field – hideShowPassword
From the folks at Cloud Four, a jQuery or Zepto plugin that lets you easily hide and reveal the contents of a password input field and is based on a mobile design pattern documented by Luke Wroblewski.
Write Better Markup with HTML Inspector
From Philip Walton, here’s a code quality tool that runs in the browser to help dev teams write better markup. It’s customizable and, as far as strictness, may provide a more reasonable alternative to W3C validation.
Is your website social-media enabled? If not, there are many reasons to integrate your website with popular social media platforms like facebook, twitter, LinkedIn etc. However, the #1 reason that I always give in favor of enabling social media on your website is that we are living in the age of social media where everything (recruitment, marketing, branding, sales etc.) is converging rapidly on social media platforms. Therefore, it is quite reasonable to connect your web content to the social media platforms where all the web traffic is going.
Let’s start with the practical stuff. If you have not connected your web content with social medial platforms, you are are just a step behind. All you need to do is add floatShare jQuery plugin on your website. It is a free jQuery plugin that allows your website visitors to share your web content on popular social media platforms with a single- click giving you good coverage and audience on multiple social media platforms. floatShare also gauges popularity of your web content by giving you a summary of total ‘shares’ and ‘likes’.
Plug-and-play CSS3 Animations – Magic CSS3 Animations
Magic is a CSS3 framework with many animations. Is simple to use and many animations are cross-browser compatible.
If you would like to receive our new plugins, responsive templates, free PSDs and keep up to date with the latest and greatest articles and resources from the design/developer community, you can subscribe to our Full RSS Feed, follow us on Twitter and Facebook.
