10 Web-Building Resources You Should’ve Already Bookmarked

I spend a large portion of my day connected to the internet, and as a result I’ve amassed a large collection of websites and links pertaining to web development. Here’s 10 of my favorites:

1. Web Developer’s Field Guide

A collection of links that web builder Wade Meredith has created over time. A big resource list, and I go to it from time to time when I need some web development inspiration. Some categories include “inspiration”, “color theory”, “DOM”, “blogging”, and much more. The Web Developer’s Field Guide stemmed from another website by Vitalie.Friedman.

2. mycelly.com’s Nice and Free CSS templates

Here’s 12 common CSS-based layouts for when you’re in a rush or just starting out as a CSS developer. It’s great to know and understand basic layout styles such as two/three column fixed widths, two/three column fluid widths, etc. and there’s no better way to learn than to study pre-made templates.

3. Cheat Sheet Cheat Sheet by foxinni

A collection of cheat sheets organized in 5 categories: Server-side (PHP, MySQL, Ruby On Rails), Client-Side (JavaScript, CSS), Blogging (WordPress, Movable Type), General, and others.

4. CSS Sandbox

A web application that let’s you experiment with styles in real-time. Great way to preview what styles will look like.

5. Resources For Web Design

A mega-huge list of Web Design resources. Some of the topics include: HTML Tutorials, CSS Tutorials, Browsers, Search Engine Optimization, Perl tutorials, and much more.


Another large list of Web Development and Design links.

7. FreeTechBooks

A website that lists free online books (e-books), textbooks and lecture notes on the topic of computer science and programming. A couple of e-book examples: “Safe-Guarding Your Technology” and “Computer Animation: Algorithm and Techniques”.

8. MiniAjax

Quoted from the MiniAjax Website: “nice looking simple downloadable dhtml and ajax code.” Some of the code listed are: “Digg-like spy script”, “Reflection.js” which allows you to add a reflection effect on text just by assigning it a class=”reflect”, and “Draggable Content” which allows users to drag page objects such as div’s around the web page.

9. PSDTuts

One of my favorite blogs/tutorial sites. Showcases very high-quality Photoshop tutorials. Great instructions, great content, and I follow their tutorials to sharpen and hone my Photoshop skills — I’ve been using Photoshop for close to 8 years, but it’s always good to practice to keep yourself up-to-date with current techniques.

10. CSS Remix

A growing collection of spectacular web designs to inspire you on your next design project.

How I Come Across These Links

I mostly come across links such as these through social-bookmarking sites such as Digg.com and del.icio.us. A majority of these links I came across by using StumbleUpon (an addiction of mine!). Also, I get links from my co-workers and friends (usually through their Gtalk messages).

Connect With Me

Here’s my social-bookmarking profiles in case you want to add me as a friend:

  • StumbleUpon
  • Digg
  • del.icio.us

Eight Tips on How to Manage Feature Creep

post-it notes on bulletin board

Feature creep, also known as scope or requirement creep, refers to unforeseen requests for additions and changes that are outside the project scope. It typically happens due to inadequate requirements gathering, poor initial planning, and an unclear protocol for change implementation, among other things.

In this article, I’d like to discuss eight tips and suggestions, based mostly on my experience, to help minimize and manage the effects of feature creep in your own projects.

1. Accept that feature creep will happen.

That’s right. Here you are thinking that this article’s all about preventing feature creep. On the contrary, I feel that it’s a natural part of any project-based work. Acknowledging this eventuality will allow you to be prepared when it finally rears it’s ugly code-retrofitting, design-wrecking head. Anticipating unforeseen changes in your plans forces you to be more adaptable, and promotes the development of a solution that’s flexible and malleable to your client’s ever-changing needs.

2. Commit enough time to requirements-gathering.

Easy enough, fairly common sense, but we’re all guilty of rushing the planning phase of projects. Maybe it’s because of time and budgetary constraints, or our eagerness to show our clients tangible results, or the assurance we get that the project’s in the bag once we start it (and won’t be given to competition). Skimping on this step can lead to agony at the end, and can take the form of unanticipated feature requirements because of our failure to establish the client’s actual needs. Take time to survey the people involved, observe and shadow employees to see how they might use the system you’re developing, and get an accurate estimation of the technical expertise the organization has. An ounce of prevention is worth a few thousand lines of code revision.

3. Giving a hand might cost you your arm.

If you constantly give in to changes, you might be get more of them in the future. Try to set boundaries of what is and isn’t appropriate to revise, this not only prevents unneeded requests for changes, but gives the project strict quality-control guidelines. When you do decide to comply to un-scoped demands, make sure that you indicate that you’re doing something out-of-scope, and that this can cause delays and additional financial requirements. This may make them re-consider the value of the feature requested, or at least give you an extension in time and budget.

4. Be the devil’s advocate when changes are requested.

You were hired and assigned to the project because of your knowledge and expertise in the solution required. If a client asks for a Flash-based navigation menu, it is your expert obligation to convince them that the CSS-based menu you developed is a much better solution. Don’t be afraid to contradict unwise feature requests; providing well-formed reasons will assure them that you know your “shizznit”, and they may actually allow you to proceed as originally planned.

5. Be task-oriented, not vision-oriented.

Be clear on what it is, exactly, you’re developing for them. Don’t promise a grand, exciting, but ambiguous/ambitious end result. Instead of giving broad generalizations such as “I’ll be developing a search engine optimized website”, try to outline the deliverables that you will provide, such as: “I’ll be using image replacement techniques for sub-headings, creating and implementing a Sitemap.xml, submitting the site to major search engines, and optimizing page titles with relevant keywords”. This makes the project less ambiguous and prevents additional tasks, such as developing a link-exchange program to increase page rank results, which is clearly not part of your duties.

Team working through project together

6. Shed the “Customer is Always Right” mentality.

You, more often than not, are a more qualified judge of how things should be developed. You’re not working to get a big tip at the end. You’re working (most probably) on a flat rate fee or an agreed-upon compensation. All you have to worry about is your reputation and producing an excellent solution. The employer can hate everything about you, but if you’ve provided an amazing profit-generating product, you’ll get hired back to do more. In the end, it’s more about profits and deliverables and less about how your employer loves your “reasonable personality” (because they love nothing more than making a bundle of cash or reducing their overhead due to the solution you developed). So don’t give in to unwarranted requests and unreasonable timelines simply because you want to be on your employer’s good side. Don’t feel pressured to do something that isn’t in the job description or something you feel will lead to a less desirable end product.

7. Research before committing.

Assuage the temptation to immediately accommodate a change in project scope, no matter how seemingly simple. If you think the budget and timeline can handle a modification in plans, research thoroughly on what the change actually entails before committing. For example, in a CMS development project I was involved in, I was asked if it was possible to migrate the system from our servers, to the client’s. This wasn’t part of the project scope, as the original plan was to also provide hosting for the system. I agreed to it thinking that a database export/import and file migration would take an hour’s work at most. I failed to account for the fact that our server set-up (being IIS 6.0/Windows and the client’s being Apache/Linux) and server settings were different. Suffice it to say that it took longer than anticipated and the task is still unfinished.

8. Realize that feature creep is a two-way street.

Clients and employers aren’t (purely) evil. They don’t intend to make our jobs more difficult. Oftentimes it’s our desire to please, to prove our worth, and our perfectionist mentality that can be, in part if not equally, to blame. If feature creep happens, it’s only because we allow it to.

I hope this article was able to impart some tips on how to manage feature creep. The suggestions here are based on my own mistakes with regards to allowing scope creep to affect my projects. I hope that by reading this, you have better luck in alleviating the impact that features out-of-scope can have on your timelines and budgets.

I’d like to ask: should feature creep be accepted as part of any project, or should it be prevented flat out? Are these tips ideal but unrealistic, and in what sense? Share your thoughts!

20 Attractive Websites That Make Background Patterns Work

When you mention patterned/tiled backgrounds, people immediately think of horrid MySpace pages and web designs circa-1990’s. It is therefore a worthy achievement when an artist is able to use this technique to make a website look stunning and attractive. An effective background design pattern can leave a memorable and positive feeling on the people who view these works of art.

by Ben Ostrowsky

Here I’ve compiled 20 beautiful and artistic websites that use tiled patterns to set their webpage apart from the ordinary.

1) Enlighten Designs

2) DNA

3) Sideshow

4) We Do The Web

5) Impressive Work

6) Hotel Belwether

7) David Loop

8) Olly Hite

9) OnTrack

10) Elitist Snob

11) Imagined Creative


13) Tanya Merone

14) kesone.de

15) Jen Gordon

16) Viget Labs

17) variable.nz

18) Robert Beerworth Blog Australia


20) Saint Augustine Bed and Breakfast

These are all designs I feel have truly achieved a unique look by using a background pattern instead of going the safe route with a solid color.

Do you have any other websites to add to the list? Did I miss a website that belongs here? Be sure to leave the links on your comments.

Related links:

Mozilla Firefox and Safari Website

9 Practical Ways to Enhance your Web Development Using the Firefox Web Developer Extension

Whether you’re a front-end graphics designer or a back-end web programmer, if you’ve worked long enough in the field of creating web-based solutions, you’ve no doubt heard about an extension for the Mozilla Firefox web browser called (simply enough) the Web Developer extension. If you have no clue what I’m talking about, here’s a brief overview from Webs Tips to get you familiarized with this wonderful tool.

This article lists some practical, everyday uses of the Web Developer extension to help improve your web-building methods. I’ve tried to stay away from the more common and basic uses of the Web Developer extension like troubleshooting layout issues with the Information > Display Div Order option because I feel these have been discussed quite enough in other places. New users, don’t run away quite yet, I think this guide will help you get a rapid jump start into applying this tool into your daily development routine.

So without further ado, here’s nine highly pragmatic uses of the Web Developer extension for Firefox.

1) Change XHTML on-the-fly without changing your web files.

Unfortunately for many developers, we don’t all have the luxury of testing servers and sandbox environments. I for one, confess to developing on live websites even during peak web traffic times.

If you’d like to lessen customer support requests due to an inadvertent display:none; property assignment on the log-in box — use the Web Developer extension to effortlessly check your XHTML modifications before you commit them to the server.

Here’s an (extreme) example of how I was able to change a few of reddit’s XHTML markup.

The original front page:

And here’s the modified version:

As you can see in the above picture, I changed the top three stories (to something else I’d much read about) and modified the background color to pink (I have an odd affection towards hot pink for some reason).

You can achieve the same results by using the Miscellaneous > Edit HTML Markup option which will open up the Edit HTML tab panel displaying the XHTML of the web page. Unfortunately, the window isn’t color-coded and the Search HTML function doesn’t quite work properly (yet).

Tip: You can change the position of the Edit HTML panel by clicking on the Position icon (right next to the Edit HTML tab on the above screenshot).

To change the CSS styles of the page, use the CSS > Edit CSS option, which will allow you to edit the styles used on the web page.

2) Measure things quickly with the Ruler Tool.

Raise your hand if you’ve ever print-screen’ed, and then copy-&-paste’d the screenshot onto Photoshop just to determine dimensions of certain page objects (like the width of an image) with the selection tool. *Raises hand in shame*

With the Ruler Tool (enable it via Miscellaneous > Display Ruler Tool), you can speedily size-up objects inside the web browser. It’s a great tool in conjunction with outline options such as Information > Display Div Order option or Information > Display Block Size option, allowing you to detect the amount of padding and margin between elements.

3) See how web pages look on a non-traditional web browser.

Nowadays, tons of people have mobile devices that lets them view web pages in non-traditional ways. Determine whether your pages render correctly (or close enough) on portable device screens by using the Miscellaneous > Small Screen Rendering option. This saves you from going out and purchasing a Blackberry or a Trio with an internet dataplan just for cross-browser checking.

How the Gamespot website looks on normal browsers:

What it will look like on a Small Screen Rendering device…

4) Find out how optimized your page is.

Use the Tools > View Speed Report option to automatically send your page to WebSiteOptimization.com, a site that provides a plethora of information about your web page load times like how quickly your page loads and how many HTTP connections are being used among a ton of other things.

There are built-in tools in Adobe Dreamweaver and Flash (if you even have access to them) that simulates download speeds, but nothing beats a free, comprehensive and actual live speed report.

5) Populate web form fields instantly.

Don’t you hate it when you have to fill in your custom-built web form for the nth time because you’re testing it? You can quit tabbing and entering junk information on your form fields and switch to using the Form > Populate Form Fields option in the Web Developer extension.

In the example below, you can see that it populates most web forms somewhat intelligently – It was able to guess the email field — but missed the phone number field.

6) Find all the CSS styles that affect an element.

For most fairly-proficient CSS developers, it’s quite easy to find the exact selectors that style an element’s properties – fyi: #selector { property: value; }. This is especially true when you’re the original author and/or the styles are contained in one stylesheet.

But what if you were working on someone else’s project… and the project in question has 1,000+ lines of pure CSS goodness, split into several external stylesheets (because Bob a.k.a. “Mr. Modularity” likes to keep things “simple“)? Another scenario you might encounter is being tasked to theme a content management system like Drupal or WordPress and you’re not quite sure where all the external stylesheets are.

For example, the Yahoo! home page has over 2,400 lines of CSS, spread over several external stylesheets and inline styles (Bob, you built this page didn’t you?).

If you’re tasked with revising this page, you have two choices: (1) look through, understand, and hunt down the styles you need or (2) decide that you’re smarter (and lazier) than that and so you use the CSS > View Style Information option of the Web Developer extension. With this option enabled, clicking on a page element opens up the Style Information panel which displays all the styles that affect the element.

7) View JavaScript and CSS source code in a jiffy.

One of the ways I troubleshoot rendering issues is by looking at how other web pages do it. JavaScript and CSS are often divided into several files — who wants to look through all of them?

Using the Information > View JavaScript and the CSS > View CSS options instantly displays all the JavaScript and CSS in a new browser tab. This has the side benefit of being able to aggregate all the CSS styles or JavaScript in one web page allowing you to use the Find toolof the Mozilla Firefox browser (keyboard shortcut: ctrl + f for PC users).

8) See how web pages are layered.

It’s often very helpful to determine which page div’s and objects are on a higher plane. Using the Information > View Topographic information gives you a visual representation of the depths of the page elements — darker shades are lower than lighter shades of gray.

Original web design…

Using the Topographic Information option renders the page to this:

9) See if your web page looks OK in different screen sizes.

I use a monitor size between 19 – 22 inches (wide screen). This can be problematic because many of our visitors use smaller monitors. Short of switching to a smaller LCD screen to simulate the user experience, I just use the Resize > Resize window option. It helps test whether my fluid layout works well in smaller windows (sometimes you forget to set min-widths for div elements and it jacks up the layout in smaller screen sizes), or if your fixed-width layout displays important content without user’s having to scroll.

Be sure to enable the Resize > Display Window Size in Title option to help you determine the exact dimensions, and also for documentation purposes when you’re taking screenshots of your webpages.

So there we are, nine ways you can employ the Mozilla Firefox Web Developer extension to better your web development experience. I don’t claim to be an expert, but I certainly know enough about the Web Developer extension to improve my web-building speed.

Do you have other tips and strategies on how to further utilize the Web Developer extension? What are the ways you use Web Developer extension in your job? Share them here.

Related links:

6 Things You Need for Your Web Project to Succeed

Being at an age where I’m just beginning to carve my path in the real world, I tend to have many peers and co-workers who constantly think about making an income besides sitting in front of the computer eight to ten hours a day in a windowless room.

by Andrea Mercado

I’ve had thousands of conversations about initiating startup companies, selling IT products or services online, creating profit-generating web applications (like a derivative facebook site), and putting up blogs. Eventually, I began to see characteristics that I feel are needed in order for your own project to succeed, and I present them here.

Don’t be afraid to commit.

If you’re comfortable with your current salary and you need the promise of eating at least one meal a day (sans ramen noodles), why change it? If you can’t commit whole-heartedly to your endeavor, things won’t happen, and you’ll constantly put your project second on your to-do list (i.e. right below playing “teh gamez”). In addition, when you have other obligations that take up the majority of your day, you won’t be able to commit the time and resources needed to get things rolling. Who wants to sit in front of their computer after work to design the UI interface of your application or draft a business proposal to pitch to a small-business venture investor when you’ve already used most of your thinking and creative energy at something else?

While talking to a friend of mine who’s in the midst of developing a startup company, I heard the ultimate startup killer, “I think I’m gonna try and get a part-time job somewhere, just to help pay the bills”. To which I responded with, “There isn’t a better motivation then ‘hungry’”. Put yourself in the situation where there’s no other alternative to success. You can ask anyone who knows me, one of my most-used phrases is a rip-off from Nike, “Just do it”. Take a leap of faith in your ability to succeed and overcome the obstacles of your projects.

I’m not asking you to quit your day job (that would be hypocritical of me), but you may have to consider (a) scaling down your project to something you can manage on a part-time basis, (b) adjusting your commitment to other duties and responsibilities, or (c) coming up with something else that you’re equally passionate about, but can manage do to in your spare time.

Before doing anything, set your goals and develop your idea in a presentable way.

Right on the onset of your project, there should first be a clear definition of goals and what it is, exactly, you’re peddling. When you’re asked about your idea, you should be able to respond in a concise, clear, and marketable way. If it takes more than five minutes to describe your idea, it says that the concept is either (a) too complex — so you should consider simplifying, (b) you’re clueless as to what needs to happen — so you should develop your ideas further, or (c) a combination of both.

Whether you’re talking to an acquaintance about your idea (i.e. a random person you met at the bars) or pitching it to a potential investor, you should always be prepared to cover these questions:

  • How do you describe your project in two to three sentences?
  • Who are you selling to and what’s your plan-of-attack to reach and market to them?
  • Why would people attain services or products from you, or how are you different from what’s already out there?
  • Who are you working with, and how does it compliment your skill set? In other words, do you have the right people to make it happen?

Besides helping you conceptualize your idea in a more graspable way, these points give your audience the basics of what you’re trying to accomplish, and allows them to comment/suggest things constructively.

Avoid going solo.

There are several reasons why a single founder is bound to fail. For one, hard decisions are going to be tough to settle without another person (or two) calling the shots. Things won’t happen and there will always be impasse’s between you and yourself.

Also, there won’t be enough diversity in generating ideas and problem-solving processes. If decisions were made in a group, person A’s idea of “let’s make a myspace derivative… only we give the user even more freedom to customize their page” might be swayed by person B’s more even-keeled reasoning.

Additionally, with a partner, you can motivate each other to keep things going, akin to having a workout buddy to force yourself to go to the gym.

But there’s the other extreme, and it’s the “too many cooks/chiefs/shot-caller” team. This runs into the problem of things being argued constantly, a lot of profanity-slinging, and important decisions not being made in time.

A good-sized decision-making team (drawn from observation and experience) is two to threediverse (but like-minded in the end result) individuals. Personally, I believe a three-person team is the way to go because there won’t be any ties when issues are being decided upon.

For example, I, being technical, simplistic, and lacking business/marketing sense, would choose a more open-minded, “full-of-big-ideas”, business-savvy peer to be in a startup with. Then, I’d pick someone that falls in the middle, someone I’d dub “the mediator”, the person who’s in between the two extreme personalities. We will all have varying skill sets and personalities that compliments each other, and we each “fill in the blanks”, so to speak, of what the other partners lack.

Hire (and pay) well.

When your startup relies on other people (programmers, graphics designers, business school MBA grads), you have to pick the right people, and once you do, you have to keep them on the payroll. Being a cheapskate when it comes to human resources will cost you a lot in the long run. How would you expect employees to commit to developing your idea when you won’t commit to keeping them on board? When your employees jump ship, you’ll be stuck in the water. Your success hinges on the people working with and for you.

Don’t make money your sole goal.

You have to be passionate (borderline obsessive) about your idea. You can’t be in it just to make a boatload of cash. Look at profit as just one of the benefits of accomplishing your project. If you’re not passionate about your plan, come up with something else, because this shows your lack of interest (and most probably your lack of expertise) in your chosen area.

For example, I’ve been trying (for almost two months) to launch a blog that my brother and I co-founded (about consumer-related topics such as mobile phones, PDA’s, cars, etc). Although these are things I’m knowledgeable and deeply involved in, I lack neither the extreme fervor to get it up and running, nor the expertise that, say, a professional consumer technology editor working for a magazine, has. With Six Revisions, it took me two days to launch, design, set-up, and start publishing stories. When you follow your passion instead of chasing after the dollar bills, things happen quickly and successfully.

Be confident and unyielding, but listen to what other people are trying to say.

You have to believe in your idea, you should have the mindset of proving your naysayers wrong… but always listen to what your peers have to say. Believe it or not, other people are smart, reasonable, and experienced too. Don’t miss out on an angle that you failed to see, or make a mistake that your super-PHP-expert friend warned you from the start about SQL injections — listen keenly and avoid the temptation to shut them out just because they’re not saying what you want to hear. If you feel their criticisms or suggestions are wrong or won’t work in your case, simply say, “Thanks for the input, but I think I got it”. This says that even though you’re not going with their idea or suggestion — it still indicates that you appreciate their input and that you’re always open to any ideas they may have in the future. If you shut out these valuable resources, in the end, you’ll have no one to else to blame but yourself.

All in all, I think these are things you should keep in mind and try to have when you’re thinking of that next big project that will oust digg.com’s spot in the social bookmarking arena. My biggest suggestion is to believe in yourself and don’t doubt your abilitiesif you don’t think it’ll work, I can almost guarantee that you’ve killed your idea right there.

I’d like to hear your thoughts about the subject. What are the other ingredients for succeeding in your projects? Drop a comment!

Related links:

RSS News Feed Maker

While building out a website today, I stumbled upon a very helpful tool for RSS Feeds. The site is called newsfeedmaker.com and really saved me a lot of time in adding the RSS feed to my page. The site has a collection of thousands of feeds (at least) for you to choose. Newfeedmakers.com has everything from politics to fashion, including my selection of Geophysics News for the site that I was working on. Once you have selected an RSS feed using the basic version, it allows you to choose from several design templates for the look and layout of your feed. Using the pro version allows you to customize your color schemes to match your site, and choose the format of the feed you want as JavaScript, HTML, RSS, or an iFrame. The end result of this effortless work is emailed directly to you. Simply copy and paste the code onto your page to have a great looking, quick, and easy RSS Feed on your site.