VannTile's Portfolio

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!

<Dirtymarkup/>

Dirtymarkup

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.

Markup Validator

Markup Validator

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.

CSS Minifier

CSS Minifier

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.

Devilo.us

Devilo.us

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.

JS Minifier

JS Minifier

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.

Can I Use...

Can I Use

This is an amazing website that tells you about the browser support of an incredible number of properties. It's a must.

Text Compare

Text Compare

You'll sometimes need a way of comparing two texts character by character. This is the place.

Icomoon.io

Icomoon.io

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.

Color Hex

Color Hex

Sometimes you need help building a color palette or just to find out the rgb() of a hex code. Here your needs are satisfied.

Online Convert

Online Convert

Maybe the best format converter, this website turns almost anything into everything. You'll might wanna check this out.

Android device art

Android device art

The device art generator enables you to quickly wrap app screenshots in device artwork. When you market your UI's this will be handy.

Real Favicon Generator

Real Favicon Generator

This provides the complete package of favicons you will need for any website. It covers almost any browser or operating system.

Windows Tiles

Windows Tiles

Even if the tiles are already made by The Favicon Generator, the windows 8 tiles should be handled by their own soft.

Grabicon

Grabicon

Still in the favicon field, grabicon gets the icon of lots of sites using their own soft.

Jsfiddle

JsFiddle

With their new interface, JsFiddle helps you test, save online, share and collaborate pieces of code.

Codepen

Codepen

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

Plnkr

Plnkr adds further help for the front-end developers, having the functions of JsFiddle, but with a library of well-known stylesheets and scrips.

Cloud9

Cloud9

Cloud9 is the ultimate site for testing code in any about a hundred programming languages. With a shell and a Javascript console, it makes a new world of possibilities come to life.

Tiny PNG

Tiny PNG

Size matters. So you will need an image compressor. Tiny PNG does that.

Kraken.io

Kraken.io

Another image compressor, with more options like lossy or loseless compression.

Page Speed

Gogle Insight

Page Insights is a tester right from Google. It analyses the desktop and mobile interface and the user experience.

Pingdom Tools

Pingdom Tools

The best speed tester, that can save you a public test, with multiple servers and lots of details.

Which Loads Faster

Which Loads Faster

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.

Browser Shots

Browser Shots

Once a day, Browser Shots can take screenshots of your website on various platforms. Testing is crucial.

BrowserStack

BrowserStack

Browser Stack covers everything that Browser Shots misses. It is reliable and famous.