30+ New Resources, Tools & Apps For Kick-Ass Web Developers

June 3, 2012 — Leave a comment

If you are looking for a tool that will check your Javascript or validate your freshly made CSS, or give you an creative advantage with the newest jquery plugins, or do you need the help to create an image sprite, or a new HTML5 Canvas library, or even learning a new CSS framework.

Well today’s post is just for you as we look into what the newest tools, resources and apps that been released in the web development industry.

Javascript & jQuery Plugins

TimelineJS

TimelineJS can pull in media from different sources. It has built in support for:Twitter, Flickr, Google Maps, YouTube, Vimeo, Dailymotion, Wikipedia, SoundCloud and more media types in the future. Creating one is as easy as filling in a Google spreadsheet or as detailed as JSON.

CanJS

CanJS is an MIT-licensed, client-side, JavaScript framework that makes building rich web applications easy. It provides:

  • can.Construct – inheritable constructor functions
  • can.Observe – key-value binding
  • can.Model – observes connected to a RESTful JSON interface
  • can.view – template loading, caching, rendering
  • can.EJS – live binding templates
  • can.Control – declarative event bindings
  • can.route – back button and bookmarking support

Fixie.js

Fixie.js is an open source tool that automatically adds filler content to HTML documents. By interpreting your semantic HTML5 tags, Fixie will automagically add the right type of content in the right places. Headings, paragraphs, links, images, sections… trust me, it’s all there. That way you can focus on your design, instead of finding the right filler content.

foresight.js

Foresight.js gives webpages the ability to tell if the user’s device is capable of viewing high-resolution images (such as the 3rd generation iPad) before the image is requested from the server. Additionally, it judges if the user’s device currently has a fast enough network connection for high-resolution images. Depending on device display and network connectivity, foresight.js will request the appropriate image for the webpage.

heatmap.js

heatmap.js is a JavaScript library that can be used to generate web heatmaps with the html5canvas element based on your data. Heatmap instances contain a store in order to colorize the heatmap based on relative data, which means if you’re adding only a single datapoint to the store it will be displayed as the hottest(red) spot, then adding another point with a higher count, it will dynamically recalculate.

The heatmaps are fully customizable – you’re welcome to choose your own color gradient, change its opacity, datapoint radius and many more.

sigma.js

sigma.js is an open-source lightweight JavaScript library to draw graphs, using the HTML canvas element. It has been especially designed to:

  • Display interactively static graphs exported from a graph visualisation software – like Gephi
  • Display dynamically graphs that are generated on the fly

jPages

jPages is a client-side pagination plugin but it gives you a lot more features comparing to most of the other plugins for this purpose, such as auto page turn, key and scroll browse, showing items with delay, completely customizable navigation panel and also integration with Animate.css and Lazy Load.

keymaster.js *Beta

Keymaster is a simple (100 LoC or so) micro-library for defining and dispatching keyboard shortcuts. It has no dependencies.

leaflet

Leaflet is a modern, lightweight open-source JavaScript library for mobile-friendly interactive maps. It is developed by CloudMade to form the core of its next generation JavaScript API. Weighing just about 22kb of gzipped JS code, it still has all the features most developers ever need for online maps, while providing a fast, pleasant user experience.

It is built from the ground up to work efficiently and smoothly on both desktop and mobile platforms like iOS and Android, taking advantage of HTML5 and CSS3 on modern browsers.

Typed JS

Sanity Check your JavaScript and harness the power of type annotations and program specifications to make your code robust

Underscore JS

Underscore is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects. It’s the tie to go along with jQuery’s tux, and Backbone.js’s suspenders.

Underscore provides 60-odd functions that support both the usual functional suspects: map, select, invoke — as well as more specialized helpers: function binding, javascript templating, deep equality testing, and so on.

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.

Dynamo

Dynamo is the easiest way to add a new dimension to your site content. Cycle through various bits of text to add subtle variations to your work, or to draw attention to portions of your webpage.

EpicEditor

EpicEditor is an embeddable JavaScript Markdown editor with some minor Markdown enhancements such as automatic link creation and code fencing.

URI.js

URI.js is a javascript library for working with URLs. It offers a “jQuery-style” API (Fluent Interface, Method Chaining) to read and write all regular components and a number of convenience methods like .directory() and .authority().

URI.js offers simple, yet powerful ways of working with query string, has a number of URI-normalization functions and converts relative/absolute paths.

Retina JS

When your users load a page, retina.js checks each image on the page to see if there is a high-resolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.

The script assumes you use Apple’s prescribed high-resolution modifier (@2x) to denote high-resolution image variants on your server.

JQ idealforms

jq-idealforms is a small framework to build awesome responsive forms. It’s built on top of jQuery and LESS.

jQuery Super Labels Plugin

This plugin was born out of the need to use the label-over-field method for forms I was working on. There are other plugins out there that do pretty much the same thing, but none of them had the – for lack of a better word – sexiness that I was looking for. This implementation makes the label slide across the field☨ when gaining focus and fade out when a value is entered.

LLJS: Low-Level JavaScript

LLJS (formerly known as *JS) is a typed dialect of JavaScript that offers a C-like type system with manual memory management. It compiles to JavaScript and lets you write memory-efficient and GC pause-free code less painfully, in short, LLJS is the bastard child of JavaScript and C. LLJS is early research prototype work, so don’t expect anything rock solid just yet. The research goal here is to explore low-level statically typed features in a high-level dynamically typed language.

CSS Tools, CSS Frameworks & HTML5 Libraries

Responsive Grid System

Fluid grid CSS framework for fast, intuitive development of responsive websites. Available in 12, 16 and 24 columns with media queries for all standard devices, clearfix, and optional reset.

Responsive GS was created by Denis Leblanc from Studio Snapsize and inspired by many other published grid systems.

Box-CSS-Framework

This solution is based on box-sizing: border-box and display:inline-block building principles. The grid contains both pixel and percent grid, meaning endless grid combinations and possibilities and the best thing is you can change instantly the gutter value. The percent grid works little different than px grid, you will probably do best by just using the padding like gutter.

CSS 2 Less

Here you can quickly convert your old CSS files to fresh new LESS files. As easy as copy/paste. You can also convert files locally by install the css2less RubyGems.

Gumby 960 Grid Responsive CSS Framework

Create rapid and logical page layout and app prototypes with Gumby Framework, a responsive CSS framework based on the 960 grid you already know.

CSSO (CSS optimizer)

CSSO is a CSS optimizer – more specifically, a CSS minimizer. Use it to improve and streamline your CSS.

Sprite Pad

With SpritePad you can create your CSS sprites within minutes seconds. Simply drag & drop your images and have them immediately available as one PNG sprite + CSS code. No fiddling in Photoshop, no manual assignment of CSS styles.

Spiffing CSS

Why, hello, dear visitor! If you’re the kind of person predisposed to converse about the weather over a round of tea and crumpets, then you’ll appreciate Spiffing: a CSS preprocessor with only one job — to correct the spelling errors prevalent in the language.

KineticJS

KineticJS is an HTML5 Canvas JavaScript library that extends the 2d context by enabling high performance path detection and pixel detection for desktop and mobile applications.

Webshims Lib

Webshims Lib is a modular capability-based polyfill-loading library, which focuses on accurate implementations of stable HTML5 features, so that developers can write modern, interoperable and robust code in all browsers. It is built on top of jQuery and Modernizr.

Web Development Tools, Apps & Other Awesome Tools

Chico UI

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

Code Anywhere

Codeanywhere is a code editor in a browser with an integrated ftp client, and all popular web formats are supported (HTML, PHP, JavaScript, CSS, and XML).

Snip save

Create an account in less than a minute and access your code snippets from anywhere.

SnipSave features a very easy-to-use interface where you can quickly create, edit and delete code snippets. It was designed and built for ease and speed of use.

The Responsive Calculator

Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.

The Responsinator

The Responsinator helps website makers quickly get an indication of how their responsive site will look on the most popular devices. It does not precisely replicate how it will look, for accurate testing always test on the real devices.

LiveScratchpad

Evaluate your JavaScript functions in real-time _while_ editing.Inspect objects or DOM elements manipulated during execution, figure out the code path taken inside the function, directly jump to errors…

Coda 2

It’s been a week since Coda 2 was released to the public. Panic the makers of Coda 2 went beyond expectations with loads of new, much-requested features, a few surprises, and a seriously refreshed UI, this update is, truly, major.

Personal I’ve bought it when it first came out and I’m not happy on what on was released as the final product and many people who written reviews and/or commented on coda 2 have already bought up the same problems that I’ve found/wanting. And down below I’ve posted some links of some Coda 2 reviews.

I hoping that Panic are going through and resolving bugs that people have already bought up in many reviews of Coda 2.

Diet Coda

Diet Coda takes everything we’ve ever learned about world-class web code editing, and wraps it up to-go. It’s packed with features, bathed in fun, ready to work.  So go on, take a vacation and only pack your iPad — you’ll get your job done, quickly and delightfully. It’s so good, you might never touch your desktop again.

GitHub For Windows

GitHub for Windows is here and it’s free. GitHub for windows is a 100% native application that will run on Windows XP, Vista, 7 and even the pre-release Windows 8. Included in the application is a complete installation of msysGit making this the single best way to start using Git on Windows.

No Comments

Be the first to start the conversation!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s