Recent and Useful Tools for Web Development

Looking for new ideas for your next project? you stepped into the right place. This post talks about brand new web tools that convert good ideas in excellent pieces of web development. Slowly but constantly, web tools are replacing desktop programs and It is very likely that in the future there will be no need of hard drives since everything will be in the cloud. The greatest developers for desktop applications will need to adapt to this or disappear. We bring you some tools that show the future now. So that you start adapting to it.

We Love Icon Fonts

We Love Icon Fonts

Cool website that allows the free hosting of icon fonts. The idea is similar to Google fonts. You may add any icon set to your collection and then integrate it to your CSS and font family.

ABalytics.js

ABalytics.js

This javascript based tool allows to do A/B testing and results are registered into google analytics profile. no need to configure anything on the server.

Reuze.me

Reuze.me

This is a framework designed to easily structure html and CSS. ideal for medium and large content websites. Works well with other frameworks such as Foundation and Bootstrap.

Maskew

Maskew

An innovative javascript library that allows the skewing of elements used within it. Its homesite shows a cool example that allows to manipulate the skewing manually.

Uxpin

Uxpin

A web based tool ideal to create designs that provide good user experience. As stated in developers’ page it is created by UX experts, and has a work scheme that allows real time group design as a plus. Don’t let your prototypes turn into bad applications just because of bad user experience, just let this tool make wonders alongside you.

CSS3 Text Shadow Generator

CSS3 Text Shadow Generator

This is certaily one of the most useful tools you can find. Take the monotony out from your titles and other texts with these awesome, even rare fonts, spectacular effects and shortcode easy to integrate to your web pages. Create awesome titles, banners, logos and whatever else you can imagine with this fantastic tool

Visual Effects with CSS3 Filters

Visual Effects with CSS3 Filters

This is a really cool picture edition tool, with a graphic interface that shows the effects available and allows to manipulate them. Source code is also available with documentation to guide you thru its fantastic features.

Over API

Over API

This is the resource which autodidactic developers will love. Contains the cheat sheets for the most important scripting languages ordered depending on the function, so you will never forget again that code missing in your head right when you needed it. Also contains some other useful resources for web projects.

Best Web Fonts

Best Web Fonts

If you are fed up of the same fonts and the same effects over text, this is the ideal site for you. Probably one of the most complete and easy to use free tools over the web. Choose between 24 title effects and dozens of fonts. Once you find the ideal font and effect, use it by implementing the code that is generated.

Pixabay

Pixabay

This is a growing project made to find and download licensed and public domain images. You even have the option to download the image in several sizes at your convenience or download the scalable vector file for those created digitally.

Scratchpad

Scratchpad

A nice coding tool supporting HTML and CSS. Renders in real time, allows real time collaboration by sharing the URL, and closes opened tags for you. Ideal tool for learning and teaching,

Literally “Canvas”

Literally

A simple drawing tool built in HTML5. Consists of a canvas with the most basic drawing tools. It misses the option to undo last action, but in general is a cool tool and source code is available to be used in external environments.

Metro UI PHP Generator

Metro UI PHP Generator

Since the release of windows 8 metro UI style has become something very popular and demanded. This is quite obvious because this appearance is so comfortable and stands out from everywhere. It would not be strange if it becomes the next trend for websites design besides and even beyond OS design. This is a templating framework for download, put it on your PC and start experiencing the new metro interface.

CSS3 Generator

CSS3 Generator

The ideal tool for those that barely know about using CSS or want to save time talking about serious editions in style. Its simplicity to use graphic interface allows to manipulate the effects at your convenience while generating in real time a snipet to be inserted in your style sheet. It is certainly a good tool for you to learn about how cascade styling works, and a very productive tool that saves you from writing large sets of codes to get a simple effect.

CSS Box Machine

CSS Box Machine

Another CSS nice tool that helps you to quickly create a page using predesigned boxes and background designs with a snipet for both HTML and CSS. Save tons of time with this amazing tool.

Viewport Resizer

Viewport Resizer

This easygoing tool is great to test any site responsiveness in multiple devices. Using it is as simple as bookmarking the page and then clicking on the bookmark whenever on the page we want to test. Developer’s page also offers multiple customization options for you to create your own site responsiveness testing tool.

Mini Help System with jQuery

Mini Help System with jQuery

An easy to follow tutorial to create a jQuery based search tool. Page includes preformated code with explanation of steps to follow in order to reproduce the tool, and the finished product ready for download.

Roots

Roots

This is a cool and useful tool developed for the front end developers. It’s simple to install, simple deployment process and besides, it has real time implementation thanks to its automatic reload.

Makeappicon

Makeappicon

This tool takes an inserted image and converts it to a .PNG application icon. It is something that you could do certainly, but it helps you to save time since the image converted is resized to all standard icon sizes for android and iOS in a really fast way.

HTML Codesniffer

HTML Codesniffer

Based on A, AA, and AAA standars you can test your html code to find any violations to standard coding. Useful for those special cases when you need to know about any errors in your coding, for example if your site is participating for an award.

Cedvel

Cedvel

Do you want to design your own grid easily? CEDVEL could help you to do so. It is now on its prototype version but ready to be used. With a detailed documentation for general use of the tool provided on the page.

Font Custom

Font Custom

This useful tool converts svg files into custom icon webfonts from the command line. Create your own bootstrap like buttons with this tool, Ruby or rubygems are required to use this tool.

Typ.io

Typ.io

This is a growing website with a curious way to share bookmarking of typographies. If you find some of these elements on the internet that you like, simply post them on the page to have it. Definitely worths taking a look at this.

Generator Box Shadow

Generator Box Shadow

This is certainly an excellent tool. Ideal for creation of minimalistic sites with a light colors scheme. The creation of shadows gives more intensity to light colors on the page. You have control of the shadow with a graphic interface, and the snipet edition is done realtime. Once you have the shadow style that you want, simply paste the code on your page.

Telescope

Telescope

The concept idea is similar to Reddit but this news app is built with meteor, which is a real time framework, meaning real time updating.

Fake Images Please?

Fake Images Please?

This is an open source web tool that provides dummy images for your site. If you’re testing a layout, this is an interesting way to do it. You are able to select color, size and text for the dummy image.

Mockup Designer

Mockup Designer

The ideal tool to sketch your project. Are you thinking on how will be the design of your site? test your idea! if you don’t like it, then change it, still do not like it? change it once again, this mockup designer is perfect for that.

EntryDNS

EntryDNS

This is an online tool designed to manage DNS. Easily manage multiple domains and hosts, collaborate and manage work-sharing with other sysadmins, automate and simplify infrastructure.

Vmail

Vmail

Some people are simply not happy with GUI’s or even web browsers and prefer to do their stuff with Vim. That’s the reason why this tool exists: to manage Gmail from Vim. Ruby is required to use this tool, so does a Gmail account, of course. Other requirements are explained on the developers page.

ish

ish

This is a responsivity testing tool available for download at GitHub. It makes the difference by not setting fixed breakpoints. To test and make sure that something works grat at any resolution.

Iconbench

Iconbench

Allows previous editions of mini-icons to find the particular style that you like. After that, select 20 icons that you like (free users) and download them on the style you set up. This is the perfect tool if you come to need a small set of mini icons and specially need to evaluate different styles for them.

Responsive Design

Responsive Design

This is not a web tool but a great blog. Viljami Salminen is the author of this site where you will be able to see his work in terms if responsiveness. Check his blog and the sites he has developed. You’re not gonna regret it.

About the Author:

Shock Family is a team of designers and developers behind projects like: Wp Theme Generator (A great wp themes builder), Jquery Slider Shock (Responsive wp and jquery slider plugin), WordPressThemes Shock (free and premium wp themes) and many more!

Published January 8th, 2013 by

Looking for hosting? WPEngine offers secure managed WordPress hosting. You’ll get expert WordPress support, automatic backups, and caching for fast page loads. Visit WPEngine.

Join Our Newsletter!

Subscribe to our weekly newsletter chalked full of useful tips, techniques, and design goodies. We have 20,000+ loyal readers and counting! We’ll even send you a free e-book (Freelance Designer’s Guide to Multiple Income Streams) and a $10 discount on our most popular product the Freelance Starter Kit.

8 Responses

Comments are now closed on this post.

  • Design Nirvana, January 8, 2013

    Really useful collection of tools… thanks for the roundup…

  • Eugenio, January 10, 2013

    Huge resource, you’ve made me happy :)
    Thank you for sharing

  • Bob, January 10, 2013

    Great collections of tools. Thanks for sharing.

  • Sebastian, January 10, 2013

    Great list, I liked the toaster :) What was missing are tools for software/website localization

  • Sumit, January 12, 2013

    Great list…
    I like it most..
    Thank you for sharing….

  • Jason, January 12, 2013

    Really the best tools described. Man I love it so much. Great piece of work. I am really fond of overapi, which provides cheat sheets of all scripting languages. Going to take the article print out and use it for my reference.

  • Tim, January 14, 2013

    Nice list and resources. The article itself has quite a few spelling errors, though. For example, snippet has two p’s.

  • Kiara, June 1, 2013

    There are many tools and this is a good list of ém. Wolud love to hear a little bit more about responsive design.