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.
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.
- 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 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 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.
The heatmaps are fully customizable – you’re welcome to choose your own color gradient, change its opacity, datapoint radius and many more.
- Display interactively static graphs exported from a graph visualisation software – like Gephi
- Display dynamically graphs that are generated on the fly
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 is a simple (100 LoC or so) micro-library for defining and dispatching keyboard shortcuts. It has no dependencies.
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.
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 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.
URI.js offers simple, yet powerful ways of working with query string, has a number of URI-normalization functions and converts relative/absolute paths.
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 is a small framework to build awesome responsive forms. It’s built on top of jQuery and LESS.
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.
CSS Tools, CSS Frameworks & HTML5 Libraries
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.
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.
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.
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 is a CSS optimizer – more specifically, a CSS minimizer. Use it to improve and streamline your CSS.
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.
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.
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 is a free and open source collection of easy-to-use web tools for developers and designers.
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.
Just a simple calculator to help turn your PSD pixel perfection into the start of your responsive website.
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.
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.
- Macworld’s Coda Review
- Coda 2 review on Mac Appstorm
- Panic Coda 2: Early Review & Initial Thoughts By Brian Casel
- Coda 2: Reviewed on Nettuts+
I hoping that Panic are going through and resolving bugs that people have already bought up in many reviews of Coda 2.
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 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.