为设计人员和开发人员准备的30个实用Web工具

Runway Framework

This particular framework works wonders if you are looking to develop a WordPress theme. You can choose if your theme depends on plugins, you can set child themes and even create an option for drag and drop with this wonder tool.

StackIcons

One of the best resources around the web if you are looking to develop an icon. Typically, you should be able to find an icon and adjust it according to your needs to a certain extent. But how far can you adjust it? Well, these repository offers icons with every single part being adjustable for a more powerful customizing experience.

TagTree

If you are in the process of learning JavaScript, you will find this collection of video screencasts very useful. It will help you polish and hone your JavaScript abilities. The resource is updated consistently with more screencasts for continuous improvements to your abilities with JavaScript.

Atom

This is a code editor developed by Github. The idea is to generate a customizable, hackable and an extensible color editor. It is quite similar to Sublime Text in a sense. This particular resource is still in Beta, but works wonders.

SassConf

If you are looking to catch on web development conferences that you may have missed for some reason, you can visit this resource in order to watch the screencast. The screencasts are usually uploaded to Vimeo, but there is a whole lot of things you can find on this website covering everything about Sass including tips and tricks etc.

Ratchet

This is a mobile application framework. Using this framework, you should be able to build an application for mobile using HTML, CSS and JavaScript.

Manager

If you are looking for a job board for your website, this is perhaps the best one top go. You can install it and instantaneously you will be provided with a new menu on the dashboard which will allow you do add new job listings including various details.

Crowe Wireframe

This tools is a collection of design patterns such as text block, buttons, images and navigation which you can use for prototyping at a quick rate. This tool offers a visually rich and detailed experience when you are prototyping, unlike other such resoruces.

Cerberus

Everything is shifting to smartphones and tablets and, in that, it makes sense to assume that you will be checking your e-mails on your smartphones as well. This is one resource you can use to at least view your e-mails the way they are meant to be viewed. It is compatible with various e-mail service providers.

Typebase

Typebase.css is a collection of different styles that allow you to reset web typography. It works pretty much like Normalize.css. This particular resource is available in Sass, LESS and CSS format for better compatibility.

Hookr

This web application will record and list the number of Hooks in WordPress. It will also organize the hooks in an alphabetical order for ease.

WinJS

If you are a fan of Metro UI, you will find this resource particularly useful as it lists a collection of UI elements found in Windows 8 and its mobile variant. Some examples include DataPicker, Tooltip and Toggle buttons etc.

Thermal API

If you are looking to get APIs of websites based on WordPress this is your resource. It will allow you to access content, and even publish it in various different forms of media.

Workspace

If you use Adobe Photoshop extensively when building websites, you will have noticed upon updating the application to CS6 that it lacked the Web workspace. This resource will help you greatly in that regard.

Moment.js

You can use this JavaScript library to quickly format numbers into date and time. It includes many regions and languages so it is very convenient and adaptable.

CSS Font Stack

The default fonts on your computer are often insufficient when you are developing websites. You may want to visit this resource to get a whole lot of font families compatible with CSS.

HiResStock

Finding the right image for reference, or using as is, is quite impossible. Even if you find one, the perfect resolution is hard to find. I guess the name speaks for itself as to what this resource can do for you.

Voice Elements

Web Speech API is not all that easy to utilize. This particular tool is a JavaScript library that makes that job significantly easier. It also introduces voice-player that comes in very handy.

Payment Webfont

This is a library of font icons for payment processors including Paypal, Bitcoin, Wallet and Stripe. Comes in very handy especially if you are running an e-commerce website.

Pondasee

This particular tool has been built with Sass and Compass. It includes various libraries including Normalize, Seletivzr, and Formalize which makes it quite useful when building websites.

FenixWebServer

This is a GUI application for running servers which run static websites. The websites are fast shifting to the static side, which is why this will prove quite useful.

Pixelvicon

If you are looking for a nice collection of icons, this is a free collection that you can use. You even get access to PSDs for better customization.

Breach

This is one of the more powerful browser which works best with rendering HTML5 based websites. It is written in JavaScript.

Mazwai

This particular resource contains videos. These short videos can freely be used whether your website is commercial or personal.

Pagekit

This is a content management system which is fairly new. There are loads of different new features which will help with the management of your content. You can use this to create pages and even blog posts.

 jsPDF

If your website is something that people generally export for later viewing, you may want to consider this tool. It allows you to turn your website pages into PDF rather easily.

Sassline

This particular library contains Mixins for better web typography. A lot of stuff will be recommended to improve your web typography.

CSS ColorGuard

If you are working with plain CSS, this tool will come in very handy. It so happens that sometimes, you are using colors and you end up using similar colors when you are not meant to. This tool will warn you when you are about to do that.

Web Designer Checklist

This is a list of common suggestions that you should keep a check on while designing websites. You would want to go through the list before you begin on your project to see if everything is ready.

Beautiful Web Type

Finally, this particular resource is something that allows you to make sure that different types of fonts on your website fit together. Think of it as a Font Palette or a font theme if you may. Very useful and perfect for adding aesthetic sense to your font choices.