Webmasters Gallery

A recent article of mine entitled “20 Websites That Made Me A Better Web Developer” attained a large amount of popularity and I was pleased to find out that many people found a link or two that they’ve bookmarked.

The list started out as a massive collection of 100 websites (after going through my massive-huge bookmark collection) , but I then decided that, instead of overwhelming readers with 100 links that will be skimmed and forgotten the next day, that I would filter it down to only 20 quality websites that have been truly helpful and rich with information. A few things on the list were there for sentimental reasons, such as Web Monkey and SitePoint, which did help at the beginning, but now I’ve outgrown.

I received plenty of feedback regarding sites that should have been on the list. Here, I’d like to make amends and list down websites that have helped you (and me) further our understanding of web development and design.

1) Smashing Magazine

smashing_magazine.gifI started out as a freelancing graphics designer. During my college days, I depended on print (branding, brochures, post cards, posters, etc.) and web design projects to help me attain the necessary things that all college students needed (beer and Xbox 360 games). But as time passed, I realized that my passion and skill set were better suited working in web programming (.NET, Perl, ActionScript, PHP) and CSS/HTML mark-up.

But nowadays, in order to be successful in the field of web-building, you’ve often got to double as a fairly-proficient designer as well. Knowing what designs work and what doesn’t is essential if you’re able to become a valuable asset to your employers or clients.

Several readers mentioned Smashing Magazine, a popular weblog run by Vitaly Friedman and Sven Lennartz.

It’s a website I frequent to stay up to date with the graphics design side of things, as well as to inspire me during the Monday morning slumps. Smashing Magazine is a quick way of obtaining information as they have a way of filtering out the fluff so that you can get to the good stuff faster.
2) Firefox (and some extensions)

Firefox logoFirefox is a key tool for web developers — it’s not really a website — but nonetheless deserves attribution for enabling us to be more effective developers (as described in my earlier work on “9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension“).

Here’s a screenshot of how my home office Firefox set-up looks like (you can click to enlarge the image):

screenshot of Jacob’s Firefox set up – Click it to enlarge

As you can see, my set-up’s fairly minimal. The only development extensions I use (and which you should definitely check out) are:

    * Web Developer extension
    * Colorzilla (check this out if you’re still Print Screen‘ing a web page, pasting it onto Photoshop, and then using the Eyedropper tool to figure out the hexadecimal color values)
    * Firebug, which can’t be seen in the screenshot, but is an excellent tool box that allows the developer capabilities such as easily debugging JavaScript (i.e. no more alert(whatsInThisObject)), finding page errors, and a tree-navigation visual tool for checking out the DOM. Hint: Disable Firebug on AJAX-heavy sites (like Gmail) unless you’re developing it, it slows them down (it seems).

3) Flashkit

Flashkit logoFlashkit is the online “convenience store” for beginning to expert Flash Developers. They have 600,000+ members, a true testament towards their ability to provide solutions to those seeking to improve and learn more about developing Flash applications. Don’t be fooled by the “I didn’t get the web 2.0 memo” user interface, it’s the content and the community that matters the most.

The website features a categorized tutorials section (topics range from “Getting Started” to “Math-Physics” and “3D“), and a collection of free sound loops and pre-built flash movies.

Perhaps the most helpful feature of the website though, is their very large community forums (1 of the 40 forum topics entitled “Flash ActionScript” has 144,000+ threads!). Whether you’re just starting out or you’re already a professional-grade Flasher (a playful term I use for flash developers), Flashkit, if you haven’t heard of it, is the spot to check out.
4) kirupa.com

kirupa.com logokirupa.com is another favorite resource of mine when it comes to Flash. The site has very well-written tutorials and articles for the beginner to advanced Flash developer (though he writes about other web-building topics such as PHP and ASP.Net).

The site’s run by Kirupa Chinnathambi, a young and accomplished (he was offered a book deal by McGraw-Hill in his teens) author and software developer. His writing is light and easy to read, and he often provides several versions of a particular solution that caters to the reader’s skill level.
5) PHP.net

PHP.net logoRecently having to work with XML data on a remote site within a webhost that’s disabled fopen() and runs on PHP4 (and thus doesn’t have SimpleXML), I had to find an alternative way of doing this task. I found my solution in one spot, (cURL and xml_parser) — at PHP.net’s documentation section.

The example above is just one of the problems I encounter on a daily basis, and PHP.net is the first place I look at when troubleshooting problems or if I want to discover better/easier ways of doing certain things.

This deserves a bookmark for the times when you need a quick reminder of core functions that you’ve forgotten about, or to discover some that you never knew existed. The pages allow developers to comment and provide scripts so that you can further your understanding of the concepts involved.
6) Popular JavaScript frameworks

A congregated image of jQuery, script.aculo.us, YUI, and prototype JS logoThis is a combined listing. In my previous post, I mentioned mootools as my choice when it comes to JavaScript frameworks, “but that you can’t go wrong with the popular ones”. I failed to mention what the other “popular ones” were. These frameworks/libraries deserve mentions and deserve serious consideration when first deciding which solution is best for you.

    * jQuery – this framework, in my opinion, is the easiest to learn and the most elegant of the bunch. Here’s the documentation page to get you started.
    * script.aculo.us – This is more of an effects library than a fully-featured JavaScript framework, but it’s got some serious stuff going on.
    * YUI – The Yahoo! User Interface Library, if you’re the type of developer that has to have it all (and is willing to pay the price in page load times) — this is probably the one for you. Yahoo’s in-house developers, in my opinion, tend to come up with very bulky solutions even though they have some of the best front-end engineers such as Steve Saunders (who’s article on “Best Practices for Speeding Up Your Web Site” is a very worthwhile and enlightening read).
    * Prototype JS – the big dog, mootools used to require Prototype and script.aculo.us still requires it.

There are others such as dojo and Rico, but those listed above are what I consider to be the most popular and effective.
7) mezzoblue

mezzoblue logomezzoblue is a weblog by a highly-talented designer, Dave Shea, who’s also known for his article on A List Apart, regarding the CSS Sprites technique, css Zen Garden, and his book “The Zen of CSS Design: Visual Enlightment for the Web“.

A notable article that deserves a look-see is mezzoblue’s Testing Grounds Revised Image Replacement which showcases and analyzes the most popular CSS Image Replacement techniques.

mezzoblue seems to put an emphasis on quality over quantity, so articles may sometimes be few and far in between, but they’re worth the read when they come out.
8) Dynamic Drive

Dynamic Drive logoDynamic Drive is a source for CSS and JavaScript solutions. They’ve been around for approximately 10 years and have amassed a wonderful collection of scripts that you can apply onto your web projects.

They also have online tools such as a FavIcon generator (though personally I use Photoshop or favicon.ico Generator) and Button Maker.
9) StumbleUpon

StumbleUpon logoAs BBC news describes it (and quoted on the front page of StumbleUpon): “StumbleUpon is a brilliant downloadable toolbar that beds into your browser and gives you the chance to surf through thousands of excellent pages that have been stumbled upon by other web-users”.

When configured the right way, Stumble’ing allows you a unique way of getting new and interesting websites about web technology that many of the 4+ million subscribers have submitted, reviewed, and liked. It’s where I encountered Magento, an open source e-commerce suite that will soon be a popular contender in the e-commerce application realm, and interesting web applications such as htm2pdf which you can use to convert html mock-ups to PDF so that you may email your designs in one document.
10) Google code

Google Code logo screenshotNot only has Google solved much of my development road-blocks with their search engine (.NET and PHP errors, rendering bugs of particular browsers, existing solutions to a particular feature request, etc.) but it provides you with high-quality resources and API’s saving you the time and effort to develop them yourselves. Google code is a section at Google, geared towards developers and programmers.

Additionally, If you haven’t already, also check out these services and references:

    * Google Charts API – build charts dynamically onto your web page using easy-to-use URL-based requests.
    * Google Maps API – create custom maps.
    * Google Code Search – search public source code.
    * Google Help: Cheatsheat – Improve your search engine savvyness using these search engine commands. Must know stuff for effective troubleshooting of issues.

If you liked this article, be sure to also check these out:

    * 20 Websites That Made Me A Better Web Developer
    * 10 Web-Building Resources You Should’ve Already Bookmarked
    * 9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension – If you liked the entry on Mozilla Firefox, this is a tutorial on the Web Developer extension

Thank you!

… for your wonderful feedback on my first list.

Many of the entries on this list were inspired by the following people’s comments (thanks for the reminder):

    * Aron Filbert (from Digg) for the Firefox entry and the JavaScript frameworks entry
    * hiro protagonist for Dynamic Drive and PHP.net
    * Lee and DieselDaddy for reminding me about Smashing Magazine
    * Jive for reminding me that I forgot to mention Dave Shea on my A List Apart entry in my previous article, which inspired the mezzoblue entry (although css Zen Garden was mentioned, I just didn’t attribute it to the creator).
    * Fragle1980 for the Flashkit comment.
    * Johnathan and Hal for the Google Code entry