10 essential tools and websites for frontend developers

30 September 2011

1. jsfiddle.net and tinkerbin.com



Fiddle around and learn by doing
Sites like jsfiddle.net and tinkerbin.com are very usefull for rapid prototyping. Sometimes you just want to test something or just fiddle around, but without setting up files, directories, doctypes, css resets, etc. or even setting up a local webserver, just to play around with one simple CSS feature or test that one line of JavaScript.

These sites enable you to get coding right away. Just enter some HTML with JS and/or CSS and off you go!

2. whatthefont.com

What was that font...
Whatthefont.com is a website I don't use every day, but is really really usefull when you've got to identify a font. As a designer I often face the problem where I receive a logo or similar from a client and cant identify the font that is being used.

This is where whatthefont.com comes to the rescue! Take a screenshot, cut out the text which you want to identify, upload it to whatthefont and it tells you what font it is! Not always a 100% succesrate, but most of the times it does what it's supposed to do.

And there's an iPhone app too, wich makes it even easier to identify fonts!

3. Firebug



Firebug is my most valuable tool. I use it for debugging, rapid prototyping, etc. For almost everything I develop, I use firebug. I guess most of you frontend developers already use it, but there are a few features that I'd like to emphasize.

First of all, there is this super neat feature that enables you to quickly align and position elements. Open the firebug window by pressing F12 and use the inspector to select an element on the page. All styles assigned to that element are displayed in the right column of the firebug window. But if you select one value and press the arrow keys on your keyboard, it in- or decreases the value by one. This is especially handy with absolute positioned elements and/or padding and margin of elements. Awesome!

Firebug also has a feature which lets you enable and disable style declarations on the fly. This is usefull when you're debugging some styling errors. By disabling declarations one by one the one that's causing problems will automatically surface. Besides disabling styling you can also edit the complete CSS stylesheet alowing you to quickly style something and save it to the real CSS later.

Furthermore firebug has a lot more cool features like the JS console, JS debugging and profiling, network monitoring and many more features!

4. Content placeholder generators


There are two websites I use a lot to generate placeholder content. Placeholder content is very valuable when you're developing without design (that's no disgrace!) or while developing templates from wireframes.

Lipsum.com generates just lorem ipsum text to use in designs or templates:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget tincidunt elit. Pellentesque erat mi, consectetur sit amet rutrum ac, pretium sed justo. Nulla in lacus et dolor dignissim ultrices eu et orci. Curabitur nibh libero, molestie vitae suscipit quis, molestie ut justo. Vestibulum tristique adipiscing lorem, sit amet varius tellus ultricies non.

But lorempixum.com does an even nicer trick: generating placeholder images. This is a random image from lorempixum.com:


Works like a charm! I've never had problems with this service. It seems like a very reliable and consistent site.
The image changes on every page load, but you can also fix the image to only display one specific image. Or an image from one specific category. Check out the website and discover the options!

5. non-system-fonts



The days that we could only use system fonts are history. Various techniques today give us the possibility to do virtually everything we want to do with fonts and typography. One of my prefered techniques is Cufon which creates beatifull and scaleable typography. Only downside I see in Cufon is the disabilty to select cufonized text.

On the other hand there is the font-face technique. Unlike cufon this is just regular text that ís selectable, but not so smoothly anti aliased if the font itself isn't optimized for use in browsers. Google has a super awesome library of webfonts that are free to use ánd really easy to implement.

Doubting over what technique to use? Read my "Cufon or font-face" article!

Another great resource of free fonts can be found at fontsquirrel.com. Make sure to check that one out too!

6. When can I use...



CSS3 to the rescue!
Since the web and it's design is changing very rapidly these days, it has given us many new cool features we can use when developing a site. It enables designers to be way more creative with cool stuff such as shadows, transformations and animations, but it allows frontend developers to get more done in less time. Remember creating al those darn sprites to make these rounded borders look right? Seems like a long time ago, but it isn't.

You can't upgrade your browser?
Sometimes it can be confusing which tags (html5) or styling (css3) can be used within the boundaries of the project you're doing. When you only have to support the newest browsers for a private project just go nuts with the CSS3 and HTML5, but when working for a big multinational which is still running IE6, the situation is completely different.

There's a helping hand!
To resolve this problem there are few sites that help with providing compatibility tables and cheatsheets. The two sites I use the most and think are the best are caniuse.com and for specific mobile development I recommend mobilehtml5.org.

7. Inspiration



Don't reinvent the wheel over and over!
There are few designers in this world that can come up with new and refreshing designs everytime they are creating something. One has to seek inspiration to be innovative. While surfing around you see small things that you store in your memory to be used later when designing. That little button, those fancy dots, that chequered background, etc.

But don't steal!
It's a thin line between being inspired and just ripping somebody else's work. Recreating something you saw earlier and give it your own "awesome sauce" is not wrong. Taking a screenshot from something and pasting it in your own design is wrong.

Where to look?
You can look for inspiration almost everywhere so there aren't any "you've got to look here" websites. Only thing I can tell you are the places I use to be inspired. Let's put them in an easy list:

  • Thedesigninspiration.com - This is a showcase for website (and other stuff, but I concentrate on the website stuff).
  • Etsy.com - This has nothing to do with websites, but it's all creativity. The people and products on this site are só inspiring it's amazing. But watch out you don't get carried away and click around for hours and hours...
  • Forrst.com - It's a closed community for webdevelopers and -designers, but when you've got access to something like that you'll see tons of work from other designers.
  • Stumbleupon.com - Create an account, add the SU plugin to firefox and set your interests to webdesign and webdevelopment categories only. Click away and discover websites you normally wouldn't see!


8. Handy websites



There are many tools online nowadays. For every little job there's a website that makes things easier. I created a folder in my bookmark toolbar and I try to collect as many of these tools as possible. This is a short selection of these tools:

Update 30-09-2011: Super handy blank templates for designers

9. LESS



Sometimes less actually is more. LESS is a client- and serverside JavaScript library that enables you to create dynamic CSS files.

LESS extends CSS with dynamic behavior such as variables, mixins, operations and functions. LESS runs on both the client-side (IE 6+, Webkit, Firefox) and server-side, with Node.js.

Great features of LESS are mixins, variables, nested rules and functions. Using LESS you will never have to change numerous occurances of colors, border weights, sizes, etc. Remember screwing up a complete CSS file with a crappy search-and-replace job? That's history when you use LESS.

10. Forrst



Last but not least I'd like to point out a successful project from Kyle Bragger named Forrst. It's a closed community for developers and designers. You'll have to be invited to get access, or you need to apply and get approved by three members of the community. Doing this ensures a high level of expertise and content. I'm on Forrst too, and I got some invitations left... If you'd like to have one, comment below why I should give you one and maybe I will do so!
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

3 comments

  1. Gravatar

    Harsh Singh

    09 March 2013

    Send me an invite to forrst because I want to learn from the masters on how to design good websites.
    Some of the websites I've made so far are:
    http://pikd.herokuapp.com/
    http://cure.herokuapp.com/
    http://eva-uiuc.com/
    http://trollo.host56.com/
    and
    http://harsh-singh.com/

  2. Gravatar

    Ajith Paulson

    25 July 2012

    Its a useful article for me, sites you mentioned really handy for a designer/developer. Although if you give me a vote for forrst, I can too a member. Thanks!
    http://forrst.com/i/VNw

  3. Gravatar

    Rob

    29 September 2011

    Good stuff! Definitely got some useful links and info out of this. Thanks