18+ Web Resources & Tools

Here are a few web tools and resources which I use on a regular basis to help build reliable and fast websites. Most of them are online and well worth checking out (if you haven’t already). They are ruffly split into the categories, ‘Testing & Checking’, ‘Conversion & Compression’, ‘Frameworks & Libraries’ and ‘Text Editors’. Also, if you like this page, but sure to share it with your friends.

Testing & Checking#

1. CSS Lint

CSS Lint

The CSS Lint tool is an online checker for your CSS code, discouraging frowned-upon techniques like the !important rule and encouraging accessibility techniques like denying outline: none.

Visit CSS Lint →{.button.small.blue.alignright}

2. Responsinator

Test your responsive designs with this tool which shows your site on an iPhone, ‘Crappy’ Android Phone, ‘Nicer’ Android Phone, iPad and Kindle.

Visit Responsinator →{.button.small.blue.alignright}

3. Adobe BrowserLab

Adobe’s free* cross browser checker helps you check your websites on IE and others. Doesn’t contain a huge number of of browsers but it does render then accurately and quickly. (* AdobeID needed – which are free)

Visit BrowserLab →{.button.small.blue.alignright}

4. Htaccess Tester

Test your .htaccess files before you upload them, preventing you from breaking your entire site – which is always worth it.

Visit Htaccess Tester →{.button.small.blue.alignright}

5. When Can I Use…

This site has vast quantities of information on whether particular rules and technologies exist in which browsers – super useful for checking browser support.

Visit Can I Use →{.button.small.blue.alignright}

6. Loads.in

Ever wondered how quickly your web page truly loads? A simple website to tell you just that.

Visit Loads.in →{.button.small.blue.alignright}

Conversion & Compression#

7. Sprite Cow

Sprites are a form of loading images quicker by reducing HTTP requests and incorporating the images into a single image. Sprite Cow gives you the CSS code needed to show the right bit of the sprite. Useful when optimizing your site.

Visit Sprite Cow →{.button.small.blue.alignright}

8. Hex To RGBA

A simple Hex to RGB(a) converter. This can also be done through Photoshop but it’s highly useful when converting Hex colours to include transparency.

Visit Hex To RGBA →{.button.small.blue.alignright}

9. YUI Compressor

Minify your CSS and JS with this online YUI compressor – nice ‘n’ simple.

Visit YUI Compressor →{.button.small.blue.alignright}

10. PunyPNG

Online tool to shrink those .png images on your site without losing any quality, similar to smush.it.

Visit PunyPNG →{.button.small.blue.alignright}

11. HTML5 Pattern

A showcase of many different string expressions for limiting form inputs.

Visit HTML5 Pattern →{.button.small.blue.alignright}

12. CSS 2 LESS

An online and real-time converter from standard CSS to the pre-processed LESS.

Visit CSS 2 LESS →{.button.small.blue.alignright}

13. LoremPixum

Placeholder images, for those part made websites which you’ve yet to find the right photo for.

Visit LoremPixum →{.button.small.blue.alignright}

Frameworks & Libraries#

14. HTML5 Boilerplate

The renowned, HTML5 Boilerplate is the ideal starting point to any new build website and is a great place to learn about basic optimizations.

Visit HTML5 Boilerplate →{.button.small.blue.alignright}

15. Spiffing CSS

The English take on the CSS language with correct grammar and replaced words, like !please instead of !important and the use of transparency instead of opacity. Simply an amusing light-weight preprocessor.

Visit Spiffing CSS →{.button.small.blue.alignright}

16. Buttonize

A CSS button making library – as used for the buttons on the right of this page – which is simple to used and relies on modern browser standards.

Visit Buttonize →{.button.small.blue.alignright}

Text Editors#

17. Sublime Text 2

One of the greatest, not-quite-free text editors available for coding anywhere (it’s cross-platform) and it’s also highly customizable.

Visit Buttonize →{.button.small.blue.alignright}

18. CodeAnywhere

CodeAnywhere is an online text editor, which has a Chrome Extension, an Android app and an iPhone for coding on the move.

Visit CodeAnywhere →{.button.small.blue.alignright}

Hope you enjoyed these resources – if so let me know in the comments below