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

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

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

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

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

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

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

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

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

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

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

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”

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

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

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

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

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

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

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

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

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

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

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

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

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

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?

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

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

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

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

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

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

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!