Every month myriad of tools and web apps have been released for developer and designer to help them with their development and design related issues. Each of these tools serves a unique purpose and most developers have integrated them into their workflow. The purpose of these tools is not only to make ones workflow easier and save time – but moreover to serve within a utilitarian and clutter-free way.
In this article we have gathered up a list of 25 Free Useful Tools for Designer and Developers for April 2014. Following tools are free and useful for your development and design projects, We hope you will find the list handy and useful for your projects. If you are aware of useful web tools which has been released recently you can let us know by posting a comment in comment box, we would love to hear from you.
1. Gridlover
Gridlover gives you adjustable css for font sizes, line heights and margins. The default css output is for body, p and h1 – h4 headings, but you can of course apply your adjusted values to any element by editing the css. Simply drag the numbers in the top toolbar left and right to adjust their value. Elements in Gridlover are always kept aligned to a pixel perfect baseline grid. The font scale in Gridlover is calculated by stepping up the font size by the scale factor for each heading level. Line heights are fitted to the font size.
2. Magic CSS3 Animations
Magic CSS3 Animations is a package of CSS3 animations with special effects that you can freely use for your web projects. Simple include the CSS style: magic.css or include the mynified version: magic.min.css. The project is now hosted on GitHub. There are special effects like bling, perspective, rotate, slide, tin, bomb and etc.
3. Awesome UX Kit
Awesome UX kit is a free set of 26 Adobe Illustrator wireframe templates and two custom brushes, designed by George Vasyagin. At this point “Awesome UX kit” is totally FREE and comes for iOS7 (iPhone) version only. Tablet and Desktop versions coming very soon.
4. Framework 7
Framework7 is a fully featured HTML framework just for building hybrid (Phonegap) and web-based apps with a native iOS7 feel. It’s lightweight and flexible and uses Ajax for navigation between pages you will need a server. So to make it work you should put dist folder (or Kitchen Sink) on a server. Or, as an option, you may use Grunt’s server. Framework7′ JS and CSS files in Kitchen Sink are temporary linked to build/ to make development process easier on this stage. So to make it work you need to build Framework7 (see Build section) or to re-link JS and CSS files to dist/ folder.
5. Winjs
The WinJS project is dedicated to creating the best possible solution for HTML/CSS/JS application development. It provides a distinct set of UI controls with high polish and performance with fundamental support for touch, mouse, keyboard, and accessibility. It also provides developers with a cohesive set of components and utilities to build the scaffolding and infrastructure of their applications.
6. Gillie : JavaScript Framework
Gillie is a lightweight MVC framework 4k inspired in Backbone. It provides useful methods to perform RESTful HTTP requests and allows for a separation of concerns using models, views and handlers. On the other hand offers an events API with which you can make your views listen for model events and take the appropriate actions, following in that way the observer design pattern.
7. Infinite Slider
Infinite Slider is an innovative slider plugin for WordPress based sites that bring the best content of your site to the surface! While other sliders feature one image or piece of content at a time, Infinite Slider features 20+ (depending on your screen size). There are lots of options to customize the slider: autoslide on and off switch, font settings (you can use Google Fonts or any other provider), you can set which posts or custom post types, categories and tags to show in the slider and much more!
8. Lets Chat
Let’s Chat is a self-hosted chat app for small teams. It supports Persistent messages, Multiple rooms, New message alerts, Mentions (hey @you), Image embeds, Code pasting, File uploads, SSL/TLS and more. It is licensed under MIT License.
9. The ZeroClipboard
The ZeroClipboard library provides an easy way to copy text to the clipboard using an invisible Adobe Flash movie and a JavaScript interface. The “Zero” signifies that the library is invisible and the user interface is left entirely up to you. This library is fully compatible with Flash Player 10.0.0 and above, which requires that the clipboard copy operation be initiated by a user click event inside the Flash movie. This is achieved by automatically floating the invisible movie on top of a DOM element of your choice. Works in IE7+ and all of the evergreen browsers.
10. Obelisk.js
Obelisk.js is a JavaScript Engine for building isometric pixel objects. With the simple and flexible API provided by this engine, you can easily add isometric pixel element like brick, cube, pyramid onto HTML5 canvas. Obelisk.js strictly follows the pixel neat pattern: lines with 1:2 pixel dot arrangement, leading to an angle of 22.6 degrees.
11. Bootflat
BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.1.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps. Bootflat is built on the foundations of Bootstrap, visioned in a stunning flat design. Bootstrap itself is a trusted, reliable and proven tool for developers. Built with Sass 3.3.3.
12. jQuery Trigger Tracker
TriggerTracker is a tool for tracking jQuery events. It is a single JavaScript file that, when loaded, provides output to the browser’s console related to jQuery event triggering and event handlers. TriggerTracker has been tested with jQuery versions 1.7.0 through 1.11.0.
13. Share Drop
ShareDrop is HTML5 clone of Apple AirDrop service. It allows you to transfer files directly between devices, without having to upload them to any server first. It uses WebRTC for secure peer-to-peer file transfer and Firebase for presence management and WebRTC signaling. At the moment ShareDrop allows you to send files only to other devices in the same local network, i.e. devices with the same public IP address.
14. Dribbbox
Dribbbox displays your work in a clean, easy-to-browse gallery, avoiding the noise of Dribbble’s comments, rebounds, ads and etc. It’s your portfolio, not your social network profile. You host your site, using your own domain. There is no server-side code or external dependencies involved.
Dribbbox is just vanilla HTML, CSS and JavaScript, and since you are hosting all the files, you can easily tweak the look and behavior of your site. Dribbbox works well on mobile and showcases your Dribbble shots front and center. Try the demo on your smartphone to see how the mobile version feels.
15. Pintjs
Pint is a small, asynchronous, dependency aware wrapper around Grunt attempting to solve some of the problems that accompany a build process at scale. A typical Gruntfile starts with, at a minimum, some variation of: jsHint, jasmine, LESS, handlebars, uglify, copy, and clean stack. Just these half dozen or so plugins can balloon your Gruntfile upwards of 300 lines and when you add complex concatenation, cache busting, and versioning can cause it to grow well in to the 1000+ lines. Pint allows you to break up and organize your build into small testable pieces.
16. Mithril
Mithril is a client-side Javascript MVC framework, i.e. it’s a tool to make application code divided into a data layer (called “Model”), a UI layer (called View), and a glue layer (called Controller). Mithril is around 3kb gzipped thanks to its small, focused, API. It provides a templating engine with a virtual DOM diff implementation for performant rendering, utilities for high-level modelling via functional composition, as well as support for routing and componentization.
17. News Readers UI Components
It’s created for learn & try new libraries when todo mvc apps are not enough. In javascript world, there are too many mv* libraries/plugins things to create fast apps and it continues to grow. Most of developer doesn’t have time to learn every library, maybe this project can help them. For now, there are news reader components for Angular JS, Backbone JS and Polymer JS but i’m working on for adding new libraries like React JS, Knoutout JS, Ember JS. Help to Grow this project.
18. Outlined Iconsets
Outlined Iconset is a simple but useful icon set, completely free now and ever. Currently 150 icons are available, and more are planned to come. The package includes PSD, AI, sliced SVGs and an awesome Webfont ready to be included in your website. Aim of the project is to create also a custom Icon Font as an alternative to the svgs for web development.
19. Scout Realtime
Scout Realtime is a better top command: it gives you disk, memory, network, CPU, and process metrics. And it gives you smooth-flowing charts for everything. Troubleshooting is so much easier when you can see a few minutes worth of realtime data instead of watching individual numbers flash on your terminal window.
20. Lavish Bootstrap
Lavish Bootstrap is a Ruby app that lets you easily grab a color palette for Bootstrap directly from an image. It’s built on the Prizm gem, and lets you easily customize the generated palette.
20. Vega
Vega is a declarative format for creating, saving, and sharing visualization designs. Describe your data visualizations in JSON and then generate interactive views in SVG or HTML5 Canvas.
21. CSS Perf
CSS-perf makes it easy to conduct some super unscientific CSS testing on your web pages. For the most part, these tests revolve around methodologies and techniques for determining effective CSS architecture.
22. Ease.js
GNU ease.js is a framework, not a compiler. It may be used wherever JavaScript may be used, and supports all major browsers; ease.js also provides support for older, pre-ES5 environments by gracefully degrading features (such as visibility support) while remaining functionally consistent.
23. Vibration API
The Vibration API is an API specifically made for mobile devices as they are thankfully the only devices that have a vibrate function. The API allows developers to vibrate a device (in a pattern) for a given duration. The vibration API is implemented in navigator.vibrate. So calling the function makes your phone vibrate. You can test if your browser is recent enough to have the vibrate function in navigator.
24. Coffeekup
CoffeeKup is a Node.js templating engine that lets you write your HTML templates entirely in CoffeeScript. It’s very simple to use, with intuitive markup and thorough documentation.
25. Refills
Bourbon provides Sass mixins and eliminates vendor prefixes, for faster CSS coding. Neat provides a lightweight grid framework. Bitters provides basic variables and structure to a Bourbon/Neat project. Refills are prepackaged patterns and components, built on top of Bourbon, Bitters, and Neat. Simply click the “Show Code” link under the component/pattern you want to copy to your project and use the “copy” buttons to get the code to your clipboard. If a component uses Javascript, that code will be included at the bottom of the HTML file. Each component/pattern has a set of variables at the very top of its Scss file. These pull out the most important properties of the component/pattern to enable quick changes of color, size and general appearance.
