Moving from just doing web design mocks in Photoshop to actually hand-coding HTML and CSS can be an extremely difficult and somewhat daunting task when you’re first starting out.
Fortunately for those of you just getting started, Firefox offers some amazing free Add-Ons that allow you to get a better look at the source code of your favorite sites as well trouble shoot some of your own front-end mark up.
The three Firefox add-ons that I find most useful are Firebug, Web Developer and ColorZilla.
Firebug allows you to click throughout the page layout and look at any portion of the mark up as well the the styles applied to each element. This can be extremely useful when you want to see how the developer accomplished a certain attribute or if you are trying to identify a section of code that might be buried inside a larger file structure.
Web Developer has some features similar to Firebug but it also has a lot of cool hidden tools that can be a real time-saver including showing image dimensions, resizing your viewport & window, as well as auto-filling forms for QAT (quality assurance testing). It also allows you to quickly measure or identify portions of your layout structure with it’s ruler and outline tools.
Last and certainly not least I would recommend trying out ColorZilla for color inspection. ColorZilla allows you to drop sample any color on the page and depending on your user preferences copy the hex-code with or without the “#” hashtag, RGB and even HSL percentages. I most commonly use this to identify colors that I like then copy and paste the combination into my Photoshop Document.
While there are many amazing Firefox Add-Ons, these are the three main tools that I use on a day to day basis while doing front-end web development. New tools and Add-Ons come out everyday so make sure to try them out to help decide what will help speed up or improve your work-flow.
Did I fail to mention a Add-On that you absolutely couldn’t work without? Make sure to post a comment and let me know! I am always on the look out for new Firefox Add-Ons that can improve my front-end web development skills.
I’ve never really considered myself much of a “techy” but the longer I work in the design and development industry the more I find myself appreciating the improvements to computer hardware and accessories more and more.
In the past I was fortunate enough to have roommates who built their own PC’s and as much as I am a die-hard Mac user, they taught me how to build a great computer without paying an arm and a leg, a lesson that has continued to come in handy over and over again.
During the recent ice storm the electric in my apartment went pretty crazy and fried my power supply (see pic below), which unfortunately was pretty new. I had purchased the now blown power supply without doing much research and now after talking with a few people have come to find out the brand “Diablotek” isn’t really known for surviving power surges.
While at Microcenter they recommended upgrading to a better power supply that is more well known for surviving power surges – The CoolerMaster 700 Watt Extreme Power Plus, fortunately for me they were running a 20% off sale so I was able to upgrade for only $75.00.
As soon as I opened the box I could tell that this was a much better product. The unit it self was nicely powder-coated with black paint and all the cables were contained by some sort of mesh netting to help with random wire management (if you haven’t switched a power-supply on your own before it can be a challenge to keep the wires where you want them and out of the way of your components). All in all I was very impressed and satisfied with my purchase.
That being said, I wanted to add even more protection and help avoid this situation in future – enter the UPS / Battery Back-Up with Surge Protection!
After looking through the selection at the store I settled on the CyberPower 625 (pictured below). It took me sometime to unplug my very poorly strewn about power-chords but all in all the swap was pretty painless.
So if this ever happens to you – make sure you get a quality power supply and learn from my mistakes, a UPS with surge protection can save you A LOT of hassle.
- victim of the ice storm 2011
- my electronics new best friend!
- bad pic – but it's just to show the box
- My new and better power supply – note the finish!
- Battery Backup Unpacked!
I create top-notch websites for clients on a daily basis – most of the time I have an abundance of concepts and ideas I have to tame and limit but for some reason creating my new portfolio site seemed to take WAY longer than I could have imagined.
While it could just be that the old saying “You are your own worst critic” is true, I think the time it is taking is more closely related to a quote I heard once – “A piece of art takes as much time as you have”.
I still have so much I want to do with the site even though there are some very basic items that need take care of (meta-data, blog styling, validating, seo). Guess I know what I’ll be doing this weekend!