Designers and Developers allowed
We all have our favourite tools we use to make our websites fancier, prettier and more usable. Code clarity changes a mess into an interesting experience as a designer or developer. These tools make the workflow easier and lower the time of editing your work. This is my list of such websites. If you have any other suggestions tweet me, or send me a message on G+. Enjoy!
I chose to start with Dirtymarkup because it's like the magic wand for code validation and formatting. It has been developed by @claviska. Its interface is pretty cute, with two themes (light and dark), indentation setting and spacing settings. But what it actually does? It formats HTML, CSS and JS code fragments or full-code with the quality of any other beautifier and it warns you about code errors or bugs. It literally rocks.
This is actually Unicorn, the most complete validator from W3C: it checks both HTML and CSS and also the feed. As the HTML5 and the vendor properties aren't really stable, this might raise you some errors and about 100 warnings. In most of the cases you should just swipe down, without trying to correct them. But you should read them anyway. It might prove an useful task.
This is the minifier I use for stylesheets. It doesn't have so many options, but it does a really good job. Also, it serves the downloadable file.
This is THE most complete CSS minifier. It offers you lots of options (some not to mess with, like selectors sorting) and URL input for external files. The output can be a downloadable file as well.
A bootstrap website that offers lots of plugins in many languages, made by Andrew Chilton. Even thought he offers quality instruments, I recommend only the JS minify. You should try it.
This is an amazing website that tells you about the browser support of an incredible number of properties. It's a must.
You'll sometimes need a way of comparing two texts character by character. This is the place.
Icomoon helps you to build your own icon font from editable SVGs, and from another dozen packs. Tons of features that will please any one of you.
Sometimes you need help building a color palette or just to find out the rgb() of a hex code. Here your needs are satisfied.
Maybe the best format converter, this website turns almost anything into everything. You'll might wanna check this out.
The device art generator enables you to quickly wrap app screenshots in device artwork. When you market your UI's this will be handy.
This provides the complete package of favicons you will need for any website. It covers almost any browser or operating system.
Even if the tiles are already made by The Favicon Generator, the windows 8 tiles should be handled by their own soft.
Still in the favicon field, grabicon gets the icon of lots of sites using their own soft.
With their new interface, JsFiddle helps you test, save online, share and collaborate pieces of code.
CodePen is a playground for the front end web, as they describe themselves. They have the same functions as JsFidlle and more, like preprocessors for SCSS and LESS.
Plnkr adds further help for the front-end developers, having the functions of JsFiddle, but with a library of well-known stylesheets and scrips.
Size matters. So you will need an image compressor. Tiny PNG does that.
Another image compressor, with more options like lossy or loseless compression.
Page Insights is a tester right from Google. It analyses the desktop and mobile interface and the user experience.
The best speed tester, that can save you a public test, with multiple servers and lots of details.
A soft which compares the loading speeds of two websites once, twice or any number of times, like in a race. It even works on local files, if you're not working in the cloud.
Once a day, Browser Shots can take screenshots of your website on various platforms. Testing is crucial.
Browser Stack covers everything that Browser Shots misses. It is reliable and famous.