Web Developer Tools & Resources
Writing email with code in it is pretty tedious. Markdown Here is a Google Chrome, Firefox, and Thunderbird extension that lets you write email in Markdown and render it before sending. Homepage: https://github.com/adam-p/markdown-here Firefox Extension: https://addons.mozilla.org/en-US/firefox/addon/markdown-here/ Chrome Addon: https://chrome.google.com/webstore/detail/…
chronoline.js is a library for making a chronology timeline out of events on a horizontal timescale. It only requires raphael.js to function and qTip2 are used to provide nicer tooltips, but these aren’t required. To use it, provide a target element and an array of dates (possible ranges) with event descriptions, and it will render [...]
Moobile is a new mobile application framework built on MooTools. Homepage: http://moobilejs.com/ Demo: http://moobilejs.com/#demo Docs: http://moobilejs.com/doc/0.1 GitHub: https://github.com/jpdery/moobile-core
jCS Media Library lets you create animated media that, without changing any code, will work in all desktop and mobile browsers. It does not use Flash, SilverLight, SVG, HTML5, or quirky CSS3 Animations. Homepage: http://www.jcsml.com/ Demo: http://www.jcsml.com/pageshell.html?root=Tutorials Getting Started: http://www.jcsml.com/pageshell.html?root=GettingStarted
EU Cookie Law WordPress Plugin The EU Cookie Law WordPress Plugin prevents your site from fully loading until the person clicks to accept cookies. After being clicked your site will load as usual. This is done via a lightbox opt-in that then disappears so it no longer hinders the user experience of your site. If [...]
Siimpler is a simple HTML starting framework. This framework contains only the files and folders that you would need to start a web project. For better use you should configure the download file by clicking the + button. Homepage: http://siimpler.com/
Koottam is a simple, powerful and elegant Social jQuery Plugin to display your social bookmarking services. The plugin comes packaged with seven themes that can be easily customised to your needs with CSS. Homepage: http://jobyj.in/koottam-jquery-plugin/index.html Demo: http://jobyj.in/koottam-jquery-plugin/demo.html Docs: http://jobyj.in/koottam-jquery-plugin/how-to-use.html
Riloadr is a cross-browser framework-independent responsive images loader. The goal of this library is to deliver optimized, contextual image sizes in responsive layouts that use different image sizes at different resolutions in order to improve page load time. Homepage: https://github.com/tubalmartin/riloadr Demo: http://www.margenn.com/tubal/riloadr/demos/ Docs: https://github.com/tubalmartin/riloadr#howto GitHub: https://github.com/tubalmartin/riloadr
Foundation Icon Fonts are a custom @font-face icon set from ZURB. All you will need to get going is a couple of lines of CSS and minimal HTML. As with all @font-face icons, they can be any size, any color and any CSS style can be applied. Homepage: http://www.zurb.com/playground/foundation-icons GitHub: https://github.com/zurb/foundation-icons
Quake Slider is a jQuery based image and content slider with some cool animations effects with some of them being very unique. Like SwirlFadeIn, SwirlFadeOut and more. With this slider you can combine images with short summary/caption that helps you optimize contents for search engines and make SEO easy for you. You can also link [...]
AngularJS lets you extend HTML vocabulary for your application. The resulting environment is extraordinarily expressive, readable, and quick to develop. It is fully extensible and works well with other libraries. Every feature can be modified or replaced to suit your unique development workflow and feature needs. Homepage: http://angularjs.org/#/list Docs: http://angularjs.org/#/list GitHub: https://github.com/angular/angular.js
stroll.js is a collection of CSS list scroll effects. The style of scroll effect is determined via the class that is set on the list. Homepage: http://lab.hakim.se/scroll-effects/ Demo: http://lab.hakim.se/scroll-effects/ GitHub: https://github.com/hakimel/stroll.js
Style Tiles are a design deliverable (in PSD format) consisting of fonts, colors and interface elements that help you communicate a web products visual brand. They are for when a moodboard is too vague and a comp is too literal. Style tiles establish a direct connection with actual interface elements without defining layout. They work [...]
Mixpanel Flow is a simple and free app that works out where your users go and when they leave, all in real-time. Instead of a line graph or a table, you get a diagram of the actual paths people take as they browse your site. Follow your users every step of the way – from [...]
Responsive Grid System is a 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. Homepage: http://responsive.gs/
Retina.js is an open-source script that makes it easy to serve high-resolution images to devices with retina displays. 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 for [...]
Colllor lets you easily generate a consistent color palette with just a few clicks. You should use colors consistently, so you have a common look and feel throughout your design. This tool will let you find the exact value of darker/lighter shades of any color, not just something that ‘looks darker or lighter’. This all [...]
With Css2Less you can quickly convert your old CSS files to fresh new LESS files. As easy as copy/paste. Homepage: http://css2less.cc/ GitHub: https://github.com/nicooprat/Css2Less
rwdImageMaps allows image maps to be used in a responsive design by recalculating the area coordinates to match the actual image size on load and window.resize. Homepage: https://github.com/stowball/jQuery-rwdImageMaps Demo: http://www.mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html
Skrollr allows you to animate any CSS property of any element depending on the horizontal scrollbar position. All you need to do is define key frames for each element at certain points in top offset. Each key frame consists of one or multiple CSS properties and values. Homepage: http://prinzhorn.github.com/skrollr/ Docs: https://github.com/Prinzhorn/skrollr#documentation GitHub: https://github.com/Prinzhorn/skrollr
Cookie Control is a universal solution for cookie law compliance. It’s a mechanism for obtaining a user’s explicit consent for the use of cookies on their computer. It takes just minutes to configure and add Cookie Control to your website. And it has an elegant user-interface that doesn’t hurt the look and feel of your [...]
jq-idealforms is a small framework to build awesome responsive forms. It’s built on top of jQuery and LESS. It’s fully responsive, has keyboard support, customizable input types with LESS, “on the spot” validation, and placeholder support for every browser. Homepage: http://elclanrs.github.com/jq-idealforms/ Demo: http://elclanrs.github.com/jq-idealforms/ GitHub: https://github.com/elclanrs/jq-idealforms/
dgrid is a ‘next-generation’ grid component that takes full advantage of modern browsers and object stores. Lightweight, modular, and easily extensible, dgrid is released under the same open-source license and CLA as the Dojo Toolkit. Homepage: http://dojofoundation.org/packages/dgrid/ Demo: http://dojofoundation.org/packages/dgrid/#demos Docs: http://dojofoundation.org/packages/dgrid/#docs GitHub: https://github.com/sitepen/dgrid/
Fixie will automatically adds filler content to HTML documents. Adding lorem ipsum text to HTML documents involves copy-pasting, manual editing, and increasingly unwieldy code. By interpreting your semantic HTML5 tags, Fixie will automagically add the right type of content in the right places. Headings, paragraphs, links, images, sections… Homepage: http://fixiejs.com/ Demo: http://ryhan.me/fixie/sample.html GitHub: https://github.com/rthprog/fixie
cPrompt is a simple JavaScript solution for the EU Cookie Law. It can be easily thrown into any page, and will display a banner that will ask the user if you are allowed to store cookies. Homepage: http://michaelwright.me/cPrompt GitHub: https://github.com/michaelw90/cPrompt
3D it! lets you use CSS 3D to make every website into 3D (kind of). It is a little bit buggy but you can bookmark the script to your bookmark bar and have some 3D fun on any websites with a single click. You gotta try this! Homepage: http://www.edankwan.com/lab/3dit
Codeanywhere is a code editor in a browser with support for all popular web formats including HTML, PHP, JavaScript, CSS, and XML. It lets you code from anywhere, without the need to bring anything along with you. Just log on to Codeanywhere with any computer or smartphone, and all your servers (FTP, SFTP and Dropbox), [...]
tQuery is a small library on top of three.js. It is an extension system for people to write plugins and helps share code. It mimics the jQuery API, well known for its usability. tQuery’s aim is “it is should not be harder than playing with lego bricks.” Homepage: http://jeromeetienne.github.com/tquery/ Demo: http://jeromeetienne.github.com/tquery/www/playground/ Docs: http://jeromeetienne.github.com/tquery/docs/ GitHub: http://github.com/jeromeetienne/tquery
Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser. Crossfilter supports extremely fast (30ms) interaction with coordinated views, even with datasets containing a million or more records. Homepage: http://square.github.com/crossfilter/ GitHub: https://github.com/square/crossfilter
RWD Calculator is a simple calculator to help turn your PSD web template into the start of your responsive website. In other words, it turns pixels into percentages. Homepage: http://alwaystwisted.com/rwdcalc/ GitHub: http://github.com/sturobson/Responsive-Calculator
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 has been 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 [...]
iPicture is an easy to configure and customize jQuery plugin that can give images added interactivity with descriptions. It even comes with a configuration wizard and it is compatible with most slideshows and sliders with just a little configuration needed. Homepage: http://ipicture.justmybit.com/
Timeline, as its name suggest, lets you create beautiful timelines that are easy and intuitive to use. It can pull media from different sources, with built in support for Twitter, YouTube, Flickr, Vimeo, Google Maps and SoundCloud. More media types are planned in the future. Creating a timeline is as easy as filling in a [...]
jQuery Scroll Path is a plugin for defining custom scroll paths. It uses canvas flavored syntax to draw lines and arcs. It comes with a custom scrollbar and also does rotations in supported browsers. Homepage: http://joelb.me/scrollpath/ GitHub: https://github.com/JoelBesada/scrollpath
The idea of this tutorial is to create a horizontal layout with several content panels, with each panel individually scrollable. The challenge is dealing with different viewport sizes meaning that you will change the layout if the screen is not wide enough in order to be stacked vertically instead of horizontally. Homepage: http://tympanus.net/codrops/2012/04/02/responsive-horizontal-layout/ Demo: http://tympanus.net/Tutorials/ResponsiveHorizontalLayout/
jQuery HiddenPosition is a jQuery plugin that lets you position any element to any element, even if they are hidden. This plugin works like the position plugin from jQuery UI, except for the addition of also being able to work with hidden elements. Homepage: http://www.garralab.com/hiddenposition.php
rcarousel is a jQuery UI continuous carousel with lots of cool features. It is simple to use, is highly customizable, can do multiple and vertical carousels, and supports even older browsers like IE6. Homepage: http://ryrych.github.com/rcarousel/ Demo: http://ryrych.github.com/rcarousel/#examples Docs: http://ryrych.github.com/rcarousel/#getting-started GitHub: https://github.com/ryrych/rcarousel
jQuery File Upload is a file upload widget with multiple file selection, drag & drop support, progress bars and preview images for jQuery. It supports cross-domain, chunked and resumable file uploads and client-side image resizing. It works with any server-side platform (PHP, Python, Ruby on Rails, Java, Node.js, Go etc.) that supports standard HTML form [...]
Filtrify is an advanced tag filtering plugin, inspired by Chosens multiple select feature and Orman Clark’s Vertical Navigation Menu. Advanced because you can search tags within tags and filter items by multiple tags from different categories and get a live feedback on the number of items containing related tags. Homepage: http://luis-almeida.github.com/filtrify/ GitHub: http://github.com/luis-almeida
NHP Theme Options Framework is a simple, easy to use, very extendable options framework for WordPress themes. Every function/action can be customized, with more hook points and configuration options being added with every update. Homepage: http://leemason.github.com/NHP-Theme-Options-Framework/ Docs: https://github.com/leemason/NHP-Theme-Options-Framework/wiki GitHub: https://github.com/leemason/NHP-Theme-Options-Framework
cannon.js is a lightweight and simple 3D physics engine for the web. It’s lightweight, smaller file size than ported physics engines such as ammo.js and JigLibJS. It uses typed arrays for fast number crunching, an iterative Gauss-Seidel solver to solve generic constraints, and SPOOK for time stepping. Homepage: http://schteppe.github.com/cannon.js/ Demo: http://schteppe.github.com/cannon.js/demos/container.html GitHub: http://github.com/schteppe/cannon.js
Camera is a responsive/adaptive slideshow. Camera provides many customization options to customize, it supports captions, HTML elements and videos and it validates in HTML5. Different color skins and layouts are also available, and it’s fullscreen ready too. Homepage: http://www.pixedelic.com/plugins/camera/ GitHub: http://github.com/pixedelic/Camera
WebPutty is a simple CSS editing and hosting service. WebPutty gives you a syntax-highlighting CSS editor you can use from anywhere, the power of SCSS and Compass, a side-by-side preview pane, and instant publishing with minification, compression, and automatic cache control. Get started with just a pair of tags in your website’s template and WebPutty [...]
Intelligist is a jQuery plugin that makes it easy to share and demo code in-page, using GitHub gists. It allows you to share one or more gists, and even execute the code, which makes it ideal for demoing JavaScript and CSS in-page. Homepage: http://srobbin.com/jquery-plugins/intelligist/ GitHub: http://github.com/srobbin/jquery-intelligist
Graphene> is a realtime dashboard & graphing toolkit based on D3 and Backbone. It offers a very aesthetic realtime dashboard that lives on top of Graphite (but could be tailored to any back end). Combining D3′s immense capabilities of managing live data, and Backbone’s ease of development, Graphene provides a solution capable of displaying thousands [...]