Not a day goes by in the Coding Kingdom without some type of debate on the “best” development tools we use, but the team finally put it to a vote and compiled our top ten! Without further ado- our top front-end website development tools (and yes- they are all FREE).
10. favicon.cc
One of the best free icon generators, favicon.cc allows you to create favicons from images or from scratch, and it even supports animations. The best feature of favicon.cc? A pixel by pixel interface that allows the user to create designs from scratch, or tweak uploaded designs. Complete with color picker and the ability to publish your favicon under a Creative commons license, favicon.cc has it goin’ on!
Dev tip: Favicons are aggressively cached by browsers- be sure to version your icon if you ever update it (e.g href=“mywebsite/images/favicon.ico?v=5”)
9. IconFinder
This is search engine designed for icon searches. Customize your results for commercial vs non-commercial use. Iconfinder boasts 208,787 icons and 896 icon sets, making it a great place to find social icon sets and other random icons, pre-sorted and labeled- ready for your key-word search.
Dev tip: Add IconFinder to your search engine list and save space in your bookmarks!
8. FontSquirrel
How do you make an awesome place to find free fonts even better? @font-face kits and an @font-face generator. With the @font-face tag, you are no longer limited to web safe fonts, but making your embedded fonts completely cross browser compatible can be a pain. FontSquirrel takes that hurt away. Each of FontSquirrel’s free @ font-face kits include:
- TrueType Fonts (Firefox 3.5+ , Opera 10+, Safari 3.1+, Chrome 4.0.249.4+)
- EOT fonts (IE 4+)
- WOFF fonts ( Firefox 3.6+, Internet Explorer 9+, Chrome 5+)
- SVG fonts (iPad and iPhone)
- Cufón fonts (just ‘cause)
- Demo.html and stylesheet.css
These kits make uploading and using fancy fonts as simple as possible. And if you need to create a more custom solution- they have an @font-face generator that allows you to add fonts and optimize them.
Dev tip: Avoid some browser bugs by including your @font-face tag as your first definition in your CSS
7. GoogleWeb Fonts
http://www.google.com/webfonts
Another great source for fonts, but instead of creating font packs to use on your server- goggle actually hosts these fonts! A simplein your head tag and you have a whole new font at your disposal. Fast load time, no extra files, with 516 choices and growing.
6. Colorzilla Browser Add-On
What color is that? Good question. ColorZilla will tell you in a click. This add-on allows you to eye-drop color-pick any pixel on your browser and displays the hex and RBG values- automatically copying it to your clipboard for fast-pasting into other programs. Enabling the “status bar” info (which now overlays at the top of the screen) also provides quick access to great, helpful info by hovering over any element on the page. Info provided includes multiple values of color, elements tag, class and id, css calculated size, box object size and more. Have fun with the options and make this great tool work for you whenever you need fast access to an elements size or id/class.
5. Google PageSpeed Insights
https://developers.google.com/speed/pagespeed/insights
Ever wonder what is slowing down your site? Google’s PageSpeed Insights won’t hold back. Telling you like it is- your site will receive a grade (out of 100), and offer suggestions on how to improve the speed of your site. Simply enter the url, click submit and you will receive a list of suggestions classified under high, medium, and low priority- also offered are experimental rules that could help your load time. The tool even gives you a pat on the back for the things you’ve already done. And who wouldn’t like to hear Google tell you you’ve done a good job?
4. W3C Validator
Straight from the W3C, this is THE tool to validate your markup for web files. Validation can be done via url, upload, or direct input into a text field. W3C validator will automatically detect your Doctype and encoding unless otherwise specified, and your error/warning results are sortable, even showing line numbers for debugging. Not one of the most “fun” tools in our top ten, but definitely one of the most helpful for coding standards compliant websites.
3. Ultimate CSS Gradient Generator from ColorZilla
http://www.colorzilla.com/gradient-editor/
Aptly named the “Ultimate” CSS gradient generator, this tool really is fantastic. With this easy to use interface, you can create cross-browser compatible CSS driven gradients. No more images! In fact- one great feature is the ability to re-create an existing gradient into CSS by just uploading the image!! You can also paste in browser specific gradient code which will get translated into the various cross-browser CSS. We could go on about the numerous features and presets, but you are probably just better off checking it out yourself.
Dev tip: Don’t forget about your ability to utilize transparency with RBG colors- hex code may be lighter weight- but it doesn’t offer the same flexibility as RBG
2. CSS3Generator
Can we say HANDY? CSS3Generator is a simple interface that creates cross-browser compatible code for: box shadows, text-shadows, border radius, and so much more. While it is important for any developer to understand how the tool works- it is also important to learn the skill of copy and paste. A boxed preview area and internal text all you to see your code in action dynamically, and with browser support icons directly above the generated code, you know exactly where it is going to work.
1. FireBug / Chrome’s Developer Tools
Firebug: https://getfirebug.com/
Chrome: native (just right-click and “Inspect Element”) Ta-da!
Now to number 1... yes- this is a tie. The largest source of debate within our team is which browser inspector is the best? And the answer really comes down to your taste. The interfaces differ slightly and each have marginally different features, but we believe it has a little to do with how your brain organizes information, and a lot more to do with which browser you like better.
Where they share their undeniable benefits are in their abilities to modify CSS styles and HTML layout in real-time, debug JavaScript, and analyze usage/performance. These tools cannot be beat in development, and work especially well when working in template environments.
Honorable Mentions-
The following tools didn’t make the top ten list but are worth a mention:
- FTP on the Go- FTP Client for iPhone (has a pro version for iPad) http://www.ftponthego.com/
- Subtle Patterns- downloadable image squares for use as repeatable “tiles” for web backgrounds http://subtlepatterns.com/
- Hipster Ipsum - a new twist on Lorem Ipsum (dummy text)- Hipster Ipsum, this one you really just have to see to believe http://hipsteripsum.me/