The same way a mechanic uses his tools, a web designer or web developer uses his. In order to create modern websites or web apps with complex functionality you must use newly released tools when working on such projects. I’m trying to do my best in gathering these tools hoping that they’ll help you. Enjoy!
This is a CSS3 variant of the Apple’s CoverFlow design pattern
The jQuery plugin that suggests a right domain when your users misspell it in an email address.
HTML is great for declaring static documents, but it falters when we try to use it for declaring dynamic views in web-applications. AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop.
Lightweight form validation for jQuery or Zepto.js
Handsontable is a minimalistic (60 KB unminified) approach to Excel-like table editor in HTML & jQuery
Balloons.IO is a web multi-room chat server and client ready to use. It’s built with the help of node.JS, Express, Socket.IO and Redis. Balloons uses easy-OAuth for authentication with Twitter
jQuery++ is an MIT licensed collection of extremely useful DOM helpers and special events for jQuery 1.7 and later. It’s not a UI project like jQuery UI or jQuery Tools. Instead, it’s all about providing low-level utilities for things that jQuery doesn’t support. If Underscore is jQuery’s functional-programming tie, this is jQuery’s bald-spot covering toupee.
wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach. It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
Have a play around with the app. You can draw shapes, apply shadows, background gradients and add a variety of other styles. Double click on an element to add text, and use keyboard shortcuts, such as command z to undo. In the latest versions of Chrome, you can even copy elements and paste their CSS into a text editor.
Developing for mobile phones and tablets becomes a breeze. The emulator is super simple to install and lets you do serious mobile development from your desktop. Connect the Opera Mobile Emulator to Opera Dragonfly and do your mobile CSS, JS and performance debugging, using a powerful developer toolkit.
Cookie Control enables you to comply with UK and EU law on cookies, in a couple of quick and easy steps. Proudly developed in Scotland by CIVIC.
Underscore.string provides you several useful functions: capitalize, clean, includes, count, escapeHTML, unescapeHTML, insert, splice, startsWith, endsWith, titleize, trim, truncate and so on.
FnordMetric is a highly configurable (and pretty fast) realtime app/event tracking thing based on ruby eventmachine and redis. You define your own plotting and counting functions as ruby blocks!
Brunch is an assembler for HTML5 applications. It’s agnostic to frameworks, libraries, programming, stylesheet & templating languages and backend technology.
To simplify app development, brunch watches your files for changes and automatically wraps your scripts and templates in common.js modules. All build errors are printed to console. If you have growl / libnotify, brunch will use them too.
Nitro is the best way to get things done. It’s simple, fast and powerful at the same time. Nitro also syncs with Dropbox or Ubuntu One. Due to the power of Nitro, you’ll never get a “conflicted copy”.
Detector dynamically creates profiles using a browser’s (mainly) unique user-agent string as a key. Using Modernizr it records the HTML5 & CSS3 features a requesting browser may or may not support. ua-parser-php is used to collect and record any useful information (like OS or device name) the user-agent string may contain.
pageguide.js is an interactive visual guide to elements on web pages. Instead of cluttering your interface with static help message, or explanatory text, add a pageguide and let your users learn about new features and functions.
gmaps.js allows you to use the potential of Google Maps in a simple way. No more extensive documentation or large amount of code.
Responsify is a browser based tool, which allows you to create your own responsive template. Think of it as a foundation for you to build upon. You can customise the grid to suit your content, rather than trying to make the content fit the grid.
chronoline.js is a library for making a chronology timeline out of events on a horizontal timescale.
Inspired by OmniAuth for Ruby, Opauth provides a standardized method for PHP applications to interface with authentication providers.
Opauth as a framework provides a set of API that allows developers to create strategies that work in a predictable manner across PHP frameworks and applications.
The Grid lets you lay out pages quickly and easily in a natural, logical way. The Gumby Framework’s grid system can be customized and molded to fit your every need — it’s easily adapted to any screen size or application. The possibilities are endless; the results are extraordinary.
A free light weight jQuery plugin that allows you to create a custom drop down with images and description.
– Converts forms into AJAX simply.
– No programming background needed.
– Lightweight code (3KB uncompressed).
– Easy to understand and to modify.
– Cool for Developers, designers and website ownsers.
Why another jQuery calendar? I needed something very specific for a personal project which led me to created this calendar. After making it I thought it was pretty neat-o
You’ll love Juicebox’s simple set up and easy-to-use image galleries, and with full major browser and mobile device support, you can be sure your viewers will love them too, wherever they are.
Use the full sync mode to backup your entire gmail account in a unique directory. Your email backup repository can then be easily tar and moved from one machine to the other.
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Look and feel of Select2 is based on the excellent Chosen library.
jQuery Gantt Chart is a simple chart that implements gantt functionality as a jQuery component.
Backbone Aura is a decoupled, event-driven architecture on top of Backbone.js for developing widget-based applications. It takes advantage of patterns and best practices for developing maintainable applications and gives you greater control over widget-based development. Aura gives you complete control of a widget’s lifecycle, allowing developers to dynamically start, stop, reload and clean-up parts of their application as needed.
Super-smooth CSS3 transformations and transitions for jQuery
jQuery Picture is a tiny (2kb) plugin to add support for responsive images to your layouts. It supports both figure elements with some custom data attributes and the new proposed picture format. This plugin will be made redundant when the format is approved and implemented by browsers. Lets hope that happens soon but in the meantime this plugin will be kept up to date with latest developments.
Singool.js is a lightweight framework built on top of Backbone.js that helps you develop single-page web applications. It has a structure similar to popular server-side MVC frameworks, and supports plugins and themes.
Don’t let tables break your responsive layout anymore. This simple JS/CSS combo will let your tables adapt to small device screens without everything going to hell.
Imagine you could create complex animations that look the same on IE7+, Android, and iPhone/iPad. Now, imagine that it does not use Flash, SilverLight, SVG, or HTML5. Create professional quality jQuery animations and special effects that work on all major browsers and devices. Build the same animations found on this website using the BASIC version of jCSML
A cross-browser framework-independent responsive images loader. The goal of this library is to deliver optimized, contextual image sizes in responsive layouts that utilize dramatically different image sizes at different resolutions in order to improve page load time.
Siimpler is a simple HTML starting framework. This framework contains only the files and folders what you really need to start a web project.