Archive

Archive for the ‘Tips and Tutorials’ Category

Observe Dojo Events

March 24th, 2009 No comments

Speaking of bookmarklets, in a recent blog post Nathan Kurtyka discusses a scenario familiar to many Ajax developers:

However, I can’t even begin to think about how much time I’ve wasted hunting through source code hoping there might be some event I can subscribe to (e.g. “What event is published when someone clicks on a Tree widget node?”).

So naturally, he created a little something to scratch that itch:

I created a Dojo bookmarklet that can be used to log all events to the console.

So to not only see how rich Dojo is with event publishing (you probably haven’t been leveraging either), but to also see the bookmarklet in action, head on over Dojo Campus. Just enable Firebug, give the bookmarklet a click, browse the demos.. and behold — events everywhere!!

Check out the blog for the bookmarklet.

Categories: Tips and Tutorials Tags: ,

Vizeddit: Visualization of Reddit

March 24th, 2009 No comments

Yvo Schaap has created a reasonably interesting real-time front-end to Reddit data over at erqqvg.com. It’s actually a really cool visualization of how Reddit’s stories change over time, with “yellow-fade” indications when new comments and votes and registered. Super-nice.

Erqqvg

(The screenshot doesn’t do it justice; go check it out.)

But that’s only half the story. They’ve got a much-better-named service called “Vizeddit” that displays the same data with much richer graphics and animations:

vizeddit

Once again, you really need to go see it. The numbers along the bottom represent stories, and they grow and swap places over time, new ones are inserted, and so forth. You see the votes drop down in real-time, and new comments float in as well.

JSONView: JSON browser from within Firefox

March 24th, 2009 No comments

JSONView is a new Firefox extension that gives you a nice way to view your JSON documents (JSONovich also does the trick).

Ben Hollis talks about the extension:

The extension itself is pretty simple. I wasn’t sure how to approach the problem of supporting a new content type for Firefox, so I followed the example of the wmlbrowser extension and implemented a custom nsIStreamConverter. What this means is that I created a new component that tells Firefox “I know how to translate documents of type application/json into HTML”. And that it does – parsing the JSON using the new native JSON support in Firefox 3 (for speed and security) and then constructing an HTML document that it passes along the chain. This seems to work pretty well, though there are some problems – some parts of Firefox forget the original type of the document and treat it as HTML, so “View Page Info” reports “text/html” instead of “application/json”, “Save as…” saves the generated HTML, Firebug sees the generated HTML, etc. Just recently I came across the nsIURLContentListener interface, which might offer a better way of implementing JSONView, but I’m honestly not sure – the Mozilla documentation is pretty sparse and it was hard enough to get as far as I did. I’m hoping some Mozilla gurus can give me some pointers now that it’s out in the open.

How Does Getting Free Stuff Sound?

March 22nd, 2009 No comments

Lately I have been enjoying the Design Pattern series and my posts on becoming a bad developer and decreasing performance have been popular. I entend to expand on these areas meaning you will see more posts on programming principles and best practices some of which will take the more sarcastic and negative side to make the point. In addition to these I plan to try out a new kind of post. This will not be that frequent but I think it will be useful to you.

The Proposal

Occasionally I am going to review a book or service that is relevant to programming, running a website, running your own business, or technology in general. You can take a look at the list of products I will be choosing from here. There will also be a few hanging around on the right side bar as well.

How To Get It Free

The best part of these reviews is that you will easily be able to get these books and services for free. That’s right. These will not be paid reviews so they are my honest opinions. I will have personally used these products so I won’t promote anything that is crap and that I wouldn’t use myself.

In the interest of full disclosure, I do get paid for qualified leads. Meaning, if you decide you want to give the service or book a try, you fill out a small form before you receive the product. If you qualify, I get paid a couple bucks.

I hope that you will find these reviews useful.

11 Excellent Twitter Improvement Ideas

March 21st, 2009 No comments

Last week, I wrote about 10 Features That Will Make Twitter Better – the response was astounding and many people contributed their own ideas in the comments.

What became clear was the need to write a follow-up article that discusses even more user interface suggestions that can improve the Twitter web experience. To provide a well-rounded mix of ideas, the article would have to be from a combination of authors that contributed to one article.

What follows are ideas by ten professionals from different various spheres of expertise.

1. Location, location, location: the Twitter @Locals tab

Jason Finch, Blended Networking Evangelist, The dotSno Project / @dotsno

One of the greatest benefits of Twitter is being able to connect in real-time with conversations going on between those you follow, enabling you to become part of a global conversation on topics in which you have a shared interest. Any time of day or night you’re able to jump into the conversation. Imagine the power of combining this with local knowledge and conversations with local people who you have yet to discover. Think about who is around right now, on your block, talking about the stuff in which you’re interested, the strangers in the coffee shop a few blocks away tweeting about the very subjects that fascinate and engage you and who could easily become your friends. Run along, go meet them!

locals_tab

Introducing a @Locals tab to Twitter would enable you to connect immediately with those around you in the physical world. Clicking it would show the tweets happening around you, right now, wherever you are; integrating the tweets with a 3D virtual world would enable you to ‘walk through’ conversations happening in your neighborhood; it would enable Twitter to show conversation "hotspots" where ideas and thoughts are developing; it would start your journey into blended social networking, creating a seamless connection between your online conversations and your offline relationships, whether business or personal.  As social animals, we find the human web to be a great place, but nothing can replace face-to-face contact. The @Locals tab would blend everything by combining "time" and "place".

Twitter’s existing location awareness is poor and even third-party applications can rely only on the data presented by Twitter, with some people providing only their city or their country. By enabling us to accurately specify our location, and by providing the security of allowing us to provide exact location without it being revealed publicly, Twitter could provide us with so many more services on a local basis. The guy on the next block really needs two extra bottles of vodka for the party and you can join in too if you bring one! The business owner around the corner desperately needs some flyers printed before this afternoon, you can have the work if you deliver the order to her door. Traffic is getting backed up thanks to a traffic accident near the location of your next meeting, you can avoid it simply by checking out the local tweets.

We don’t need to be precise about our location, broad localization can still bring people together, enabling serendipitous discovery of new friends and relationships. Like the farm-hand who looks for the needle in the haystack, only to find the farmer’s daughter, so we may find extraordinary new relationships on our doorstep simply by clicking the @Locals tab and interacting with our neighbors.

2. Time Shifting Prime-Time Tweets

Arley McBlain, Web Designer / Developer, Debut Creative / @ArleyM

setting_prime-time

By Arley McBlain

The concept of Time Shifting tweets is a simple one and has been used throughout other broadcasting media for decades. It is my opinion that Twitter, like anything else has Prime-Time. For example, one of the first web developers I started following was @boagworld. He is currently in GMT (+0.00), and I am in EST (-5.00). From my perspective, as an office employee his Prime-Time will be his 9am – 5pm. I am following him and many others to see how the giants of the industry work. Sadly, when I get to my computer in the morning he’s already going for lunch! I am not dedicated enough to see what those I am following have been up to for the morning, so onward the day goes. Before too long he has gone home and is tweeting about his free time while I am still working away. While there’s nothing wrong with his "non-prime-time" tweets, I am following him because of his expertise in the field. Wouldn’t it be nice if when you got to your computer you were seeing everyone’s "hello world" messages in the context of your day?

The benefits of this are obvious: seeing more of what makes the rock-stars of this industry tick, seeing what your friends from around the world are doing in context of the day. This feature is not without it’s problems though.

For one thing it only works for people you are following East of your location. So what do you do about users to the West? The easy answer is "too bad". For me, someone like @dburka from the West Coast (PST -8.00) would have to be either set to -21 hours (which is arguably way too long in the twitterverse), or have some kind of rotating time scale where the balance of the 9 – 5pm day wraps-around the next day. This is disorienting and only works for people using Twitter from 9 – 5. Naturally @replying to any time shifted tweets would be senselessly out of context for the followed, but by clicking their tweet you could go to their profile page to see the message in context.

tweets_in_context

By Arley McBlain

Brainstorming this feature raises a lot of questions. Would you set the Prime Time by the followed user, or globally for time zones? Could I as a Twitter author choose to shift my tweets for those who follow me, or conversely would I have the option to decline time shift? Who knows, but I love the extreme example of kids years from now setting Prime-Time to -20 years to follow the pioneers of the internet in the context of their days.

3. Add Pagination with date select to search through archived tweets.

Charity "Shelly" M. Colvin, Multimedia and User Experience Design Specialist / Texas Dream Designs, @Texasbrat

update2

By Charity "Shelly" M. Colvin

Currently tweeters often get frustrated when they need to locate a tweet from someone they are following.  Twitter prides itself on the idea that less is best, and on this theory, the best solution to reduce the convolution is to incorporate pagination.  Since tweets are organized by time stamps incorporating a calendar drop down with pagination will enable users to pick which date they wish to view tweets.
This will provide users with a quick and simple method of searching through their archived tweets.  This also practically eliminates the need to press the dreaded “older” button a hundred times.

Since Twitter is already using pages to catalog tweets, implementation of this feature shouldn’t affect the results as far as SEO (search engine optimization).

  • View a clickable prototype
4. Follow these tweeps!

Adam Pieniazek, Co-founder – Writer, Consultant & Host,

The 42nd Estate / @AdamPieniazek

At one point or another nearly every Twitter user asks the same question: who should I follow now

Twitter could and should utilize our existing connections and interactions to recommend additional tweeps to follow. There’s already an application, WhoshouldIfollow, which suggests users to check out, but integrating this feature into Twitter’s web interface would ease the transition to Twitter for newcomers and help all of us find good users quickly and easily.

For example, say you go to mommyblogger’s profile and choose to follow her, a small field right below the follow button could show who else her readers are following. After clicking follow, a box would appear stating: Tweeps who follow mommyblogger also follow IamMom, iTwitmykids, and howtomothermytweeps, with links to those users’ profiles. Twitter could also list mommyblogger’s closest contacts. After you click follow on her profile, Twitter would list the three users she most often tweets with or about.

Twitter could also implement a you should follow feature in the sidebar that would combine the data from our current relationships and communications to list a few users you would enjoy following. As you choose to follow or not follow tweeps from the sidebar, Twitter would pick up on your tendencies and then analyze which data set is most likely to suggest someone you’d actually end up following, refining itself over time.

The addition of user recommendations to Twitter’s web interface would significantly lower the barrier to entry for new users and keep veterans up to date on the latest people they should follow. The one big unknown is the effect the extra data and analysis would have on Twitter’s servers, though much of this data is already there. If the Twitter team could implement these features without compromising speed and stability, it would greatly improve our ability to find users we should follow.

5. Mark Tweets as Seen

Japheth Thomson, Web Developer, Japheth Thomson / @japh

Monitoring your tweets between all the different avenues available can be quite challenging at times.  At home I use TweetDeck, in the office I use TweetDeck, in between times on my iPhone I use Tweetie, and occasionally I’m in a spot where I need to use the web.

With so many different platforms, and so many tweets streaming past all the time, it can be difficult to keep track of which ones you have an haven’t read.  TweetDeck has a feature to mark tweets as "seen", but as this doesn’t actual carry between installations, or to other applications, it’s actually not as useful as it could be.

I admit this may not be as useful for the web interface as it would be across applications.  Having it added into the Twitter API would enable the various applications to utilise the feature, and make for a much more seamless Twitter experience, however you choose to use it.

6. ReTweet Button

Ted Graf, Front-End Web Developer, TedGrafx / @tedgrafx.

For the longest time the need for a "ReTweet" button has seemed obvious to me.

In my opinion it should be a simple, small icon nestled neatly near the "Favorite" and "Trash" icons.

My vision is simple, and would work like this:

Once a user clicks the "ReTweet" button, it would automatically place the entire message you’re re-tweeting into the Update text box like so: "RT: @username user’s message" – giving the user the option of adding their own bits to it. This would save the user the hassle of copying/pasting this every time. I wouldn’t know of any reasons why this may hinder this feature’s implementation.

retweet_pagination. By Ted Graf

*NOTE: As I’m writing this I noticed a tweet from @mashable about PleaseRT.me.

7. Newer / Older + Pagination

Ted Graf

I’ve tweeted @twitter about this in the past and it seems to make sense – at least to me.

I can only speak for myself here, but when I sign on in the morning, I usually want to catch up on what I’ve missed overnight.

So, my practice has been to go "back" to the page that had my "goodnight" tweet and read on from there, which usually takes me back 5-10 pages.

It would be terrific to have the "Older / Newer" navigation at the TOP of the list as well as at the bottom.

retweet_pagination.

By Ted Graf

And while we’re at it, why not add some page numbering (pagination) to that navigation as well? This would save the user time by not always having to scroll to the bottom of the page to go back or forward – buy only one page, mind you. Again, I wouldn’t know of any reasons why this may hinder this feature’s implementation.

8. Search users by tags

Joerg Pfennig, Internet Product Manager,

What’s still missing is a tagging for the users themselves.

By allowing users to tag their profile with keywords that they’re interested in, you will have the option to not only search for tweets with some relevant content in it – but also for user profiles containing these keyword tags.

This is a web 2.0 feature you can already find, for example, on business networking platforms such as LinkedIn, where you usually tag your main competencies

In Twitter you could use your profile tags to describe, for example, your main interests or hobbies, with which you want to be found by others. That way you can find users with whom you share the same interests without waiting until they drop "the keyword" in one of their tweets.

Maybe you are a real cat’s lover – but do you use "cat" in every single tweet because of this? See.

To prevent misusage/spam the profile tagging should be limited to a small number like 3 to 5.

9. A notification system of relevant tweets

Cesare Rocchi, RIA Designer and Developer, Studio Magnolia / @funkyboy

Twitter is a great source to find smart answer to smart questions.

Many have proven the question-answer scenario: ask a questions a get replies almost instantly and this can be considered the top feature which fits your quick question needs.
There’s more. Twitter is a sort of river of thoughts where many people pass by and drop some tip.

If you are interested in a field I think twitter is the best way to have an almost up-to-date knowledge of that field. But sometimes you don’t have enough time to sit down by the river and look when an interesting drop passes.

A notification system can be really helpful in such a scenario.
Say I usually am able to keep track of what I am interested in on Twitter. Say for a week I am out of office (e.g. to a conference) and during the day and busy talking and gathering new clients.

For sure I have no time to check out what’s happening on twitter, and during a week many thoughts pass by in the twitter river.

This can even lead to some frustration. I could do a quick check in the evening but I might be already overwhelmed by tons of emails.

I suggest to implement a functionality that allows me to set periodical searches over twitter (by string or by pragma, e.g. #swsx) and receive the results on the channel I prefer (email, sms or even im). This way I am sure that someone will collect the stuff that I like and I will receive it the way I like it.

Of course there are potential problems in the implementation of such a feature. For example databases might not like too frequent searches. Real time notification over IM (or push technology to dekstop applications) can be even more challenging. In any case
I think such a feature will enormously enhance the fruition of Twitter drops.

10. Ability to Mark Direct Messages as a Favorite

Invoice Ninja, Guest Writer, SugarPatch / @InvoiceNinja

A new feature that I’d most like to see Twitter implement is the ability to favorite direct messages. Obviously the whole point of DM’s on Twitter is to have conversations privately without them appearing in your feed, and likewise, I don’t mean that DM’s should have the ability to appear in the publicly available favorites tab.

What I mean is that within the DM’s screen, I’d like to have the ability to star them as well, and have a separate tab to view them. Twitter has various uses for everyone, and for me, it gives me the means to keep in touch with long-distance friends who are always online but can’t call me. It’s made it possible for me to turn my tired old cell phone into an instant messaging client of sorts – they can DM me, and I can receive them and reply at any time wherever I may be.

It’s a wonderful thing, but the end-result is hundreds of DM’s saved up, and a good handful of them are those special ones where they’ve really made me laugh or brightened my day. By being able to star them and pull them up separately, I could reread them without digging through countless pages, and I’d be sure that I never accidentally deleted them or anything. I’m inclined to think that it’d be very simple to implement, and I can’t really see any drawbacks to it, especially since it doesn’t affect the actual feeds whatsoever. It’s always a good thing to be able to get a little more organized!

11. Easier way to post links to tweets.

Maija Haavisto, journalist and medical writer, Fiikus / @ DiamonDie

easier_tweets

Twitter users sometimes post tweet links to other users’ tweets. Currently the only way to do this is to copy & paste the URL of the tweet and you may also have to use TinyURL or a similar to shorten it, because the URLs are rather long.

Many websites use easier methods of posting links to content on that site. DeviantART, for example, allows users to post thumbnails of a particular Deviation (piece of art) by using the syntax :thumb########: where the #’s denote the number of a Deviation. Similarly Twitter could allow us to post a link to a particular Tweet by using the syntax :########: where the #’s denote the number of the tweet, already visible in the URL. So you could write :12345678: and it would translate to a link to tweet number 1234578.

To make things even easier, the web interface should include a button (similar to the Reply and Favorite buttons) for linking to a particular Tweet, which would automatically create a link using the aforementioned syntax.

Categories: Others, Tips and Tutorials Tags:

7 Incredibly Useful Tools for Evaluating a Web Design

March 21st, 2009 No comments

An effective web design is one in which your users are able to find information quickly and in a logical fashion.

Do they visit the content you want them to visit? Are they looking in the right places of your web page? Are you able to keep your user’s attention, or do they just leave quickly?

It’s not just about the content either. If your design loads slowly – or if moving from one section to another takes a long time – it affects the user’s experience.

These things can be the make-or-break factors between a user clicking on a link to find more information, or the back button to find it elsewhere.

Some things to consider:
  • Are important information being seen by the user?
  • Are the navigation and action items intuitive?
  • Is the user being directed to sections in a logical manner?
  • Does the web page load quickly enough to not turn away the user?

If you’re interested in analyzing and optimizing your page layout – here’s some extremely useful tools that you can use to help.

1. ClickHeat

ClickHeat is an open source visual tool for showing “hot” and “cold” zones of a web page. It allows you to see which spots users click on most, and which spots are being ignored.

clickheat_example

It’s very easy to implement on your website, you only have to include an external JavaScript file.

Download: Clickheat on SourceForge.net.

2. Crazy Egg

Crazy Egg offers a myriad of analytical tools to help you visualize what visitors are doing.

crazyegg_confetti

Features include: Confetti – allowing you to see what people are clicking on based on certain factors such as their operating system and where they came from, Overlay – providing you with tons of data about particular links, and Report sharing – enabling you to share the data with team members and clients.

The free version only allows 4 pages to be tracked – so use your top landing pages to get the most data.

3. YSlow for Firebug

A key tenet of a strong design is that, not only should information be presented in a logical and elegant fashion, but that it must also be served quickly, with very little delay.

YSlow for Firebug is a free tool for Mozilla Firefox that gives you information about your front-end design to see if it performs well. It gives you a letter grade (A through F) and outlines your web page’s trouble spots.

It’s based on the Yahoo! Developer Network’s “Best Practices for Speeding Up Your Web Site” initially written by Steve Souders, who was once the Chief of Performance at Yahoo! and is now working over at Google on web performance and open source initiatives.

Downloads: Firebug extension for Firefox (required) and YSlow.

4. clickdensity

clickdensity is a full suite of usability analysis tools that will help you assess your web page design.You can use heat maps showing where users click on the most, hover maps – which shows people scrolling over links but not clicking on them, and A/B Tests which allows you to change certain page elements to see which style is more effective.

The free subscription give you 5,000 clicks and only one page and one site to monitor.

5. ClickTale

ClickTale offers a lot of user data pertaining to how visitors use your website.

There are plenty of things you can look at such as average time it takes for a user to click on a link, a user’s hesitation on clicking a link, hover to click ratio, and much more. It also provides detailed reports and charts on your users’ monitor sizes to better optimize your web page design to cater for the typical visitor.

6. Clicky

Perhaps the most interesting feature that Clicky has is its real-time tracking and monitoring feature, called Spy.

Besides Spy, there’s a host of other analytics data you can look at such as user Actions – which records click data from your users and Visitors – providing you user data.

7. Google Analytics

One of the best free services that Google offers is Google Analytics and probably the most well-known analytics tool. It’s incredibly easy to install and offers plenty of user and content data to help you learn more about your web pages’ performance.

googleanalytics_example

It has a feature called Site Overlay, which gives you a visual representation of the popular places your users like to click on. It also offers data on bounce rates and your top exit pages (to see what pages make users leave).

So there they are, some of the best tools in the market to help you troubleshoot and optimize your page layout. In the end, it’s a combination of great content, as well as how you present this content — that will lead to an effective design.

Categories: Others, Tips and Tutorials Tags:

20 Useful Tools to Make Web Development More Efficient

March 21st, 2009 No comments

There are many available tools to help make web development projects quicker and more productive. Aside from a handy text editor or WYSIWYG editor like Dreamweaver, you can find plenty of tools and utilities that can greatly increase development speed, reduce debugging and testing time, and improve quality of the output. The tools described below are a variety of utilities, optimizers, testing, and debugging tools aimed towards helping developers create websites more efficiently.

1. CSS Grid Builder

cssgridbuilder

CSS Grid Builder is an online GUI for customizing the YUI Grids CSS – a lightweight CSS framework developed by Yahoo! that comes with over 1000 page layout combinations. The CSS Grid Builder allows you to rapidly generate a CSS-based, web-standards compliant page layout in a matter of minutes (or even seconds). Once you’ve got the page layout the way you want it, all you have to do is press "Show Code" and it generates the HTML for you.

You don’t even have to host the CSS file on your web server (saving you some bandwidth and maintenance hassles), the generated code links to the appropriate stylesheet found on Yahoo!’s Developer Network API.

2. CSS Sprite Generator

css_sprite_generator

Using CSS sprites is an excellent way to improve web page performance by reducing the number of HTTP requests needed for rendering images, but it can take a lot of planning, measuring, and coding if done manually.

CSS Sprite Generator allows you to upload all of your images (you have to place them in a .zip file first) and it will combine the uploaded images into a single sprite and also generate the CSS for you.

3. Blueprint: A CSS Framework

blueprint

Blueprint reduces the amount of CSS code you have to write by including common styles that developers typically use such CSS reset and page layouts. A demonstration of a web page that uses Blueprint can be found here.

4. CSSTidy

CSSTidy is an open source application that parses, fixes, and optimizes CSS code to reduce file size and also to standardize CSS code formatting automatically. It also finds and removes redundant styles and properties. You can adjust CSSTidy’s settings to your preferred compression level but even the default setting can often give you 30% compression according to the creators of CSSTidy. Check out the "before and after" examples to get a feel for how CSSTidy works.

5.logicss: CSS Framework

logicss is a collection of CSS files and PHP utilities aimed at reducing web development time. It allows developers to create customizable fixed, elastic, or fluid (liquid) layout grids. Check out the preview of their CSS code generation tool.

6. ___layouts

 

___layouts is a very simple CSS framework that can be used to create web-standards compliant page layouts. ___layouts was inspired by Yahoo!’s Grids CSS and offers 5 preset widths that supports fluid-width or fixed-width layouts. Much like Yahoo!’s Grid.css, ___layouts also has a web-based Layout Builder that was developed for the Firefox browser. Caution: the Layout Builder is still in its early stages of development, so things may be buggy at times.

7. Yahoo! Design Pattern Library

Clean AJAX speeds up Ajax development by cutting down the amount of code you have to write (and rewrite), giving you access to common and proven design patterns used in Ajax applications. Clean AJAX can be used with any server-side technology such as PHP, RoR, and .NET because it’s JavaScript-based. Check out the demo page so you can see Clean AJAX in action.

8. Sajax

Sajax (which stands for "Simple Ajax Toolkit") is an open source framework developed to speed up the creation of Ajax applications. It supports major sever-side technologies such as ASP, Cold Fusion, PHP, Perl, Python, and Ruby. Sajax has a fairly large community of over 39,000 registered users on their forums – so if you run into any troubles while developing a Sajax-based application or if you want to showcase your work, you’ll be sure to have an audience.

9. DOMTool

domtool

DOMTool was created to cut down the time it takes to code DOM structures. Creating DOM statements is as simple as copying your HTML code into the DOMTool and then clicking a button. It’s not meant to be used as a simple copy-and-paste solution and you should verify and optimize the output, but it gives you a great starting point.

10. JavaScript Code Improver

JavaScript Code Improver is a simple, no-frills application that allows you to quickly tidy up and format your JavaScript. It’s a great way for a team of developers to standardize JavaScript code format for easier readability and collaboration.

11. JSUnit

jsunit

JSUnit is a unit testing framework for JavaScript. Testing JavaScript manually is time-consuming and prone to errors, but JSUnit provides the developer a simpler, automated way of doing unit tests to ensure thorough testing at a fraction of the time it would take to test manually. JSUnit allows for the execution of automated tests for multiple browsers and operating systems.

12. Test plugin for JavaScriptMVC

The Test plugin for JavaScriptMVC is another excellent JavaScript testing framework to help make development speedier. It was created with the concept of "JavaScript testing sucks… so we want to make it easier" in mind. The Test plugin is a comprehensive set of utilities allowing you to do unit tests as well as simulate user interaction that can occur in a web page.

13. Venkman: JavaScript Debugger

Venkman is a JavaScript debugging environment for Firefox 2, Netscape, and Seamonkey. It gives you a GUI for stepping through JavaScript code and setting break points. It also comes with a command-line interface built in. Venkman is an extension that you can easily install and download through the Firefox Add-ons section of Mozilla.org.

14. Firebug

Firebug is a Mozilla Firefox extension that gives you plenty of web development tools and features. Firebug has a built-in JavaScript debugger that lets you step through your script as well as allowing you to perform benchmarks to see why your script is slow/sluggish.

You can quickly hunt down CSS, HTML, JavaScript, and XML errors through Firebug, and it even allows you to filter and search for specific errors. Another handy feature is the DOM inspector pane which outlines a web page’s structure; very handy if you’re working on a big website or an open-source application that you’ve recently gotten involved with. It’s an awesome tool though I find that disabling Firebug when I’m not using it is helpful in speeding up normal browsing (such accessing Gmail, for example).

15. Web Developer extension for Firefox

Web Developer extension is a very handy and time-saving extension for Firefox. I’ve written and recommended it plenty of times and is an extension that I use daily. You can rapidly validate your XHTML, find JavaScript/CSS errors, visualize a web page’s structure, quickly fill out web forms for testing purposes, clear your cache with a shortcut key, change XHTML on-the-fly (great for working remotely on a web design), inspect HTTP headers information, and much more.

16. Internet Explorer Developer Toolbar

Even if you prefer Firefox (or Safari) to develop and test your web pages, you have to test your stuff in the Internet Explorer browser for cross-compatibility. Whenever I test in IE, there are plenty of times when I wish certain features in Firebug and the Web Developer extension are accessible through IE, such as the DOM inspector option or the CSS Information option. IE Developer Toolbar is the IE add-on that provides me the features I like in my Firefox extensions.

17. Yahoo! Design Pattern Library

design_pattern

The Yahoo! Design Pattern Library is a large collection of proven optimal web design patterns to save you time in creating highly-sophisticated design solutions. Some things that you can find in the Design Pattern Library are: breadcrumb navigation, auto-complete for web forms, and drag-and-drop solutions. It speeds up development by offering solutions to common design needs so that you don’t have to re-invent the wheel.

18. Test Everything

Test Everything is a web-based application for multi-purpose testing, reducing the time it takes you to use online services and validators. Test Everything is an aggregate of over 100 tools reduced to just one web page. You can validate your XHTML for web standards and accessibility, test your design in several browsers (using the Browsershots service), check page rank, and more – all in one location.

19. Pingdom Tools

pingdom_tools.

Pingdom Tools is web-based application that you can use for easily testing the performance of your web pages. It can give you information on the total loading time of a web page and the total number of objects required to render the page to give you insights on things you can leave out or combine. It gives you a visualization of how page objects are loaded and you can sort the results by load order, load time (helpful in seeing what’s taking so long to load), file size, file type, and URL.

20. Aptana Studio Community Edition

aptana_studio

Aptana Studio is an integrated development environment (IDE) designed for Ajax-based applications. It has JavaScript debugging, an Ajax and JavaScript library that includes some popular frameworks (such as the Dojo Toolkit) syntax colorizing, HTML/CSS/JavaScript code assistance (auto-complete and tool tips) and much more. It makes Ajax development simpler and gives the developer time-saving ways of organizing and managing multiple projects.

Categories: Others, Tips and Tutorials Tags:

7 Applications to Make Working with MySQL Databases Easier

March 21st, 2009 No comments

MySQL is the most popular open-source database. Whether you’re an aspiring web application developer or a person working on an existing database-driven web application like a content management system, ecommerce platform, or blogging platform — there are a variety of handy applications that you can use to make MySQL database design and administration (relatively) a breeze. So if you find yourself in a position where you have to work with MySQL, you don’t have to use a command-line interface, check out these 7 outstanding applications to help you create, write, manage, and visualize your database.

1. TurboDbAdmin

turbodbadmin

TurboDBAdmin is a free web-based AJAX application that helps you manage, explore, and edit MySQL and PostgreSQL databases. It gives you the ability to export your database into a downloadable file which you can keep as a back up in case you need to restore your database. Installation is very simple, just upload the application to your web server, edit the config.php file to reflect your database information, and it’s ready to go — just navigate to your installation directory in your web browser to access the application. It works in Apache and IIS HTTP servers, and requires PHP installed and enabled on the web server.

TurboDBAdmin demo page

2. EMS SQL Manager for MySQL

sql_manager

EMS SQL Manager for MySQL is a first-rate graphical interface tool for MySQL database administration and development. It comes in two versions: the Full version (which isn’t free) and Lite version which is still feature-packed. The Lite version of the EMS SQL Manager for MySQL allows you to effortlessly create and manage users and permissions without having to use a command-line interface. It also has several SQL editors that you can use that have syntax highlighting/coloring to make queries easier to read.

3. MySQL GUI Tools

mysql_gui_tools

MySQL GUI Tools is a bundle of graphical user interface tools that includes MySQL Administrator 1.2, MySQL Query Browser 1.2, and MySQL Migration Toolkit 1.1. MySQL Administrator is a GUI for managing databases and has database optimization features, rapid back up and restoration of databases, access to log and error files, and more. The MySQL Query Browser gives you a script editor that can help easily edit and debug troublesome queries, among other things. MySQL Migration Tool Kit allows you to simplify the process of transferring MySQL databases into other server environments, providing features such as remote server-to-server migration and optimization of migration processes by creating scripts you can run again if you move or copy databases frequently.

4. phpMyAdmin

phpmyadmin

phpMyAdmin is a browser-based MySQL database administration tool written in PHP. It’s my personal graphical interface administration tool of choice because it’s simple to use and has a big list of features and options. You can easily export a database for back up or migration into another server environment. You can also import a database effortlessly. Optimizing a database is a one-click affair, and is useful to try if your web applications seem sluggish (be sure to back up your database first though).

phpMyAdmin demos page

5. Instant SQL Formatter

instant_sql_formatter

Instant SQL Formatter is a web-based application that “beautifies” your SQL code. It’s not strictly a MySQL database tool as it supports other databases such as MS SQL and Oracle. It can output scripts for many popular languages such as PHP, VB.NET, Java, and C#. There’s also a desktop version that has added functionalities such as additional formatting options, batch conversion of files, and highlighting/colorizing SQL statements.

6. DB Designer 4

DB Designer 4 - Screenshot

DB Designer 4 is another excellent visual database editor for MySQL. DB Designer 4 is an open source project released under the GNU GPL license and is available for Linux and Windows OS. It allows developers to create and share plug-ins to extend the existing features of DB Designer 4. It has two modes: Design mode – which is a visualization tool for creating and maintaining databases, and Query Mode – which lets the developer build complex SQL queries for use with PHP or another scripting language. DB Designer 4 also has a full set of documentation options to help you manage and record information about your database.

View DB Designer 4 screenshots

7. WWW SQL Designer

sql_designer

WWW SQL Designer allows you to model databases via your web browser. It’s a great way to document your database design, just use the print screen function key on your keyboard (or your preferred screen-capturing application), paste it into an image editor or word processing software, and you’ll have a document of your database model. Once you’re satisfied with the model, you can auto-generate the MySQL code. WWW SQL Designer is a simpler alternative to more complicated desktop applications, and if you just want to quickly create a database schema example, you can just use the live demo without installing anything.

Categories: Others, Tips and Tutorials Tags:

20 Useful Web Design Books Worthy of Your Collection

March 20th, 2009 No comments

If you’re in search of books on the topic of web design to expand or start up your book collection, here’s 20 web design books worth considering.

All books are linked to their Google Book Search page so you can see previews, reviews, and other related works associated with it.

1) Web Standards Creativity: Innovations in Web Design with XHTML, CSS, and DOM

Web Standards Creativity features innovative examples of beautiful and feature-rich web designs that are fully web standards compliant and includes entries by some of the world’s top web designers.

2) Designing the Obvious: A Common Sense Approach to Web Application Design

Designing the Obvious offers pragmatic solutions and ideas for developing web application designs to make the users’ experience more effortless and less unproblematic.

3) Designing With Web Standards

Written by the highly-accomplished designer and editor in chief of A List Apart, Jeffrey Zeldman’s Designing With Web Standards covers intermediate to advanced techniques to help you create designs that comply with current web standards.

4) Don’t Make Me Think!: A Common Sense Approach to Web Usability

Don’t Make Me Think! is a very popular web usability book that covers viable techniques and concepts that you can apply to a winning web design.

5) Designing Web Navigation: Optimizing the User Experience

An ineffective navigation scheme can confuse viewers and reduce the likelihood that they’ll navigate outside of the landing page. Designing Web Navigation is an in-depth book on the topic of web navigation.

6) Bulletproof Web Design

Bulletproof Web Design by Dan Cederholm talks about creating designs that cater to a large variety of situations. With websites being viewed in non-traditional ways (such as mobile devices), it’s imperative to develop accessible designs.

7) Pro CSS and HTML Design Patterns

Written by the world-renowned author Michael Bowers, Pro CSS and HTML Design Patterns talks about advanced CSS/HTML models and formulas. Expect to read about browser box model differences, explanation of the different doctypes, and much more.

8) The Zen of CSS Design: Visual Enlightenment for the Web

Authors Dave Shea and Molly Holzschlag discuss key design ideas for creating a visually-appealing web design. The book features designs from css Zen Garden and is a great read for anyone looking to be inspired.

9) Adapting to Web Standards: CSS and Ajax for Big Sites

Using the work of premier talented designers in its dialogue, Adapting to Web Standards discusses the application of standards-compliant designs and code that can be adopted into high-traffic websites.

10) Web Redesign 2.0: Workflow That Works

Web redesign 2.0 offers methods for web redesign workflow management. It discusses logistical constraints and how to effectively analyze feature requirements to reach the company’s goals.

11) The Design of Sites: Patterns For Creating Winning Web Sites

The Design of Sites is a very thorough and sensible book on the topic of customer-centered designs. It discusses formulas that lead to powerful web designs.

12) Web Design: Studios 2

Web Design: Studios 2 is a collection of some of the best web designs. If you’re looking for a book to inspire you on your own projects, check this one out.

13) Web Accessibility: Web Standards and Regulatory Compliance

Many projects require compliance to section 508 (especially true for government work and accessible websites). Web Accessibility shares vital information on the subject of accessibility on the web.

14) CSS Mastery: Advanced Web Standards Solutions

CSS Mastery is about modern CSS best practices and solutions. Two hypothetical websites are included at the end to hammer down concepts covered throughout the book.

15) HTML, XHTML, and CSS Bible

Most of the books featured here aren’t comprehensive reference books, but it’s a good idea to own one that’s complete and easily-searchable. If you’re interested in purchasing one, have a look at HTML, XHTML, and CSS Bible.

16) CSS Cookbook

This book is 500+ pages of professional-grade CSS design patterns. CSS Cookbook covers all elements of a web page (including navigation, page layout, and typography) and is appropriate for intermediate to advanced CSS developers.

17) The Essential Guide to CSS and HTML Web Design

The Essential Guide to CSS and HTML Web Design is geared for beginning to intermediate web designers, or designers wanting to catch up on modern design patterns and standards-compliant coding.

18) Advanced Professional Web Design: Techniques & Templates

Advanced Professional Web Design uses a "teaching by showing" methodology. The book is accompanied by loads of customizable designs that you can use to jump start your learning.

19) Transcending CSS: The Fine Art of Web Design

Targeted for web designers who want to improve their understanding of CSS, Transcending CSS provides visual examples and talks about design workflow.

20) Communicating Design: Developing Web Site Documentation for Design and Planning

Designing websites involves more than just the design itself, it’s also about managing and presenting information to the client. Communicating Design offers tips on presenting designs and developing usability tests, amongst other things.

Categories: Others, Tips and Tutorials Tags:

5 Unconventional Places to Scout for Web Work

March 19th, 2009 No comments

If you’re a freelancer or a full-timer looking for additional income, there’s a variety of places you can go to seek for project-based work.

There’s a ton of websites geared specifically for freelance workers, such as All Freelance Directory and Guru.com. Many of these sites do, however, charge you a subscription fee to access their job listings.

Typically, a lot of work comes from referrals, advertising in your local area, or through your website.

But if projects are running thin or you’re seeking to expand your project search, check out these 5 places you might not have considered before.

1) Google Advanced Search

Google Advanced Search screenshotThere’s a ton of sites you can visit to find project-based work, but it’s not efficient to go to each of these places and wade through outdated job listings.

If you want a speedier way, try out Google Advanced Search. You can customize how your search terms are used, extend the number of results per page, and limit the publish dates.

Here’s a few examples you can try (limited to “this week” dates):

    * “looking for web designer“
    * “freelance programmer job“
    * “freelance web developer required“
    * “seeking rails developer“
    * “craigslist web design needed“
    * “craigslist web freelance needed“

2) eBay

ebay logo screenshotSo you’re really desperate, right? No one’s going to your website or responding to your local paper ads. No better way to get people to buy your stuff than on eBay.

If sellers can find people willing to buy a Wizards & Dragons musical snow globe (it’s nice, I’m going to get one), there’s a good possibility that you can get some jobs from there.

Here’s some categories you may want to list in:

    * Web & Computer Services
    * Graphic & Logo Design
    * Media Editing & Duplication

3) Job Boards of Popular Blogs

technorati top 100 blogs screenshotThere’s a recent trend where top blogs are beginning to include a job listing section where readers can post and find jobs. It gives their audience – who probably have the same interests – a chance to meet and collaborate with other like-minded individuals.

Here’s a few job listing sections of some popular weblogs.

    * FreelanceSwitch Job listings
    * Smashing Jobs
    * Read/WriteWeb Jobs
    * 43 Folders Jobs

To help you find other blogs, here’s Technorati’s Top 100 blogs.
4) Classified Listings

Craigslist screenshotYes, craigslist isn’t only for finding dirt-cheap furniture and late night hook-up’s (or searching for your soul mate); you can also find web projects listed in your local area, as well as other geographical locations. Since it’s web work, many seekers don’t mind if you work remotely.

Aside from craigslist, check out these other online classifieds:

    * edgeio
    * facebook Marketplace
    * realpeoplerealstuff.com
    * Yahoo! Classifieds

5) Websites That Need Work

Iceman Technologies screenshotIf you’re a web worker, chances are, you encounter lots of websites everyday.

Almost instinctively, whenever I see a website that I think needs a bit of work, I automatically check out the page source and reach for some Firefox Web Developer extension options like “Display Div Order“, “View CSS” and “View JavaScript“, looking for traces of Frontpage mark-up, or silly JavaScript code that can be harmful to a website’s security.

If you find a website that you think will benefit from a re-design, or if you find flaws that need immediate attention, shoot the administrator a polite email about the issues you find, and include your proposed fixes.

Contact them in a professional way, and they may hire you to remedy the issue. At the very least, you can feel good about not letting a poorly-developed site go on without doing something about it.

And yes, I am aware of the lack of padding on the left side of Six Revisions which affects people with smaller screen resolutions… and I’m doing something about it real soon. So, please, do exclude it from your list of “websites that need work”, thank you

Categories: Others, Tips and Tutorials Tags: