10 Awesome Tools for Web Designers and Developers


Are you an avid web designer and developer looking to increase your productivity at work? If yes, you’re in store for something really cool today. Here, we present to you a list of the top 10 tools for web designers and developers, in no particular order.


1. Droplr










Droplr is an awesome sharing tool build for web creators (i.e. designers and/or developers) who work in small or large teams. It is very easy to use: upload > share. That’s it. Droplr is currently available for Windows, Mac, iOS and other 3rd Party apps. You can share code, videos, images, files, documents, notes and a lot more. A basic version allows file sharing at the minimum.


However, if you were serious about sharing stuff regularly (normal for remote teams working across the globe), then a pro solution would be ideal. Droplr Pro gives you ad-free sharing, private drops, theme customization, statistics and even a custom domain. It just starts at 5.99 USD per month.


2. Color Sublime











It is almost rare for a web designer and/or a developer to have not heard of Sublime Text 2. Almost everyone who codes has used this freemium software at least once. The site, Color Sublime enables you to make your Sublime Text 2 more awesome by giving you a variety of themes for download.



For example, the default Sublime Text 2 theme might bore you, and can even cause eyestrain due to its dark colors. With Color Sublime, you have dozens of different themes, light and dark, available for download, those cater to your taste and make your coding time more comfortable. This is a must use for any coder!


3. Just My Type










Just My Type is a font test drive site that uses fonts from popular foundries like TypeKit. If you are a perfectionista with a craze for typography and clean design, you must check out Just My Type. The font types range from highly antique to modern designs. One example showcases the use of font pairing, a technique to merge two different font types into a single sentence. The results are gorgeous.



4. Sidr











Sidr is an awesome jQuery plugin for creating side menus. If you’ve used Facebook mobile, you might want a similar implementation too. Sidr gives you just that.  It is probably the best tool you can use to easily add side menus to your web projects without having to write a single line of code! Sidr works for loading side menus from touch devices and has options for both left and right use cases. It’s not just a side menu with links, you can add in content and other stuff if you will. The best part is it’s responsive!


5. Moment JS









Developers rejoice. There’s finally a JavaScript date library that can parse, validate, manipulate and format dates. Moment JS just weighs a less than 7kb in size and allows you to convert your boring date formats into beautiful English. It supports more than 50 languages and features time ago, internationalization, calendar and date formatting. In all, Moment JS is a nice formatting solution on the client side for easy usage and effectiveness.


6. jQuery Autosize










jQuery Autosize a lightweight library that allows you to automatically adjusts text area height. Usually a text area is a static box that you have to manually resize or scroll down to see the remaining of the text. Overall, this is a bad user experience and quite irritating. But what if the text area automatically resizes itself as you write more text. With the jQuery Autosize plugin, this is now a possibility.


7. Masonry











Masonry is a cool cascading grid layout library (JavaScript) for web designers. You might have seen Masonry being used all over the Internet. So what does it do? Well, put it simply, it is a responsive grid that aligns elements on an optimal position, neatly, based on the available vertical space. Here’s an example for you to look at: http://salon.io/. Masonry is lightweight library that uses JavaScript by default, but it works with jQuery too. There are alternatives to Masonry like http://packery.metafizzy.co/ and http://isotope.metafizzy.co/.


8. OAuth.io









OAuth can be a pain sometimes, taking loads of precious developer time away in fixing bugs and finding where to use the tokens. With OAuth.io, you get access to an API that ‘just works right out of the box’. OAuth allows you to entirely cut out the server side component, reducing complexity and reducing server strain. Currently available on a SaaS model, OAuth allows you 1000 users for free, but charges start once you go above that limit. Developers, it is worth trying!


9. Progression









Progression is a jQuery plugin that gives users real time hints and progress updates as they complete their forms. The Progression documentation is comprehensive enough to guide you throughout the installation process. Designers should incorporate this plugin in their web projects to create better UX.


10. Daux.io











Daux.io is a nice little documentation generator that uses a simple folder structure and Markdown files to create custom documentation. It is a great tool for developers to create great looking documentation in a simpler way. It is responsive, Bootstrap powered and extremely powerful