Feed on
Posts
Comments

Farewell Digg

Sep 1st, 2010 by | No Comments »

About a week ago Digg.com unveiled its latest redesign (“version 4.0“) along with some changes in the way the site works. I first noticed this when I went to check Digg’s mobile website and saw that it looked like something was broken. Little did I know that the entire site had changed, and as many people feel, changed was for the worse.

If you’ve never heard of Digg, what Digg originally was was a tech-oriented news aggregation site. Users submitted links to tech stories and stories got dugg up or buried based on their popularity, with the most popular stories making it to Digg’s homepage. In the beginning, Digg only had 14 categories: apple, deals, design, gaming, hardware, links, linux/unix, mods, movies, music, robots, security, software, and technology. It was a great place to learn about and spread news of cool tech stuff. Almost anyone with a link to an interesting story (including me) could get it promoted to the front page. Over the years Digg slowly evolved into more of a social news aggregation site that covered topics other than technology (see below) and along with it’s growth in popularity came abuses to the system. Users found ways to game the system, and advertisers used it as a way to promote their products and services. For the most part, we, the users, of Digg, were able to tolerate the various abuses that crept in. That is up until now. Continue Reading »

Posted in Rants | No Comments »

jQuery hide() vs. fadeOut() vs. animate()

Aug 31st, 2010 by | 1 Comment »

If you’ve ever used jQuery to fade out an element, you’ve probably discovered that there are a few ways to accomplish the effect. You could use hide(), fadeOut(), or animate() to change an element’s opacity, but what are the differences between these methods and are there any gotchas?

Both hide() and fadeOut() work similarly in that they gradually change an element’s opacity to zero and then change the display style property to none (hide() will also change the height and width of an element to zero). However, while using animate() to change the opacity will look like it accomplishes the same result, it doesn’t change the display style property to none like both hide() and fadeOut() do. Therein lies the gotcha. If you use hide() or fadeOut() to make an element disappear, you can’t use animate() to change the opacity and make the element visible again. Since hide() and fadeOut() also set the display style property to none, animate() can’t do its job because hide() and fadeOut() have effectively hidden the element from animate being able to see it, causing it to remain invisible. To bring make an invisible element visible again that was hidden with hide() or fadeOut(), use show() or fadeIn().

This has tripped me up from time to time, especially when I’m trying to keep an element hidden and then animate a few properties simultaneously as I fade it back in. So while hide() and fadeOut() are quite capable on their own, and show() and fadeIn() work well to make elements visible again, stick with using animate to hide or fade out an element when you want to fade it in later as well as animate other properties at the same time.

The following table quickly shows the differences between jQuery methods when fading an element:

CSS Property Changed
opacity display width/height
hide() X X X
fadeOut() X X
animate() X

The same goes for the reverse process of showing or displaying elements. Show() animates the opacity, display, width, and height CSS properties, and fadeIn() animates the opacity and display properties.

Posted in JavaScript/jQuery | 1 Comment »

Adjustable Columns with jQuery

Aug 12th, 2010 by | 1 Comment »

View the demo here

I’m currently working on a project that uses jQuery throughout the user interface to improve the user’s experience. In one section of the application there are three divs laid out next to each other horizontally as if they were three columns. The leftmost div contains a series of items to select from via check boxes. When you pick one (or more) items, the middle div is populated by a jQuery Ajax query and displays a list where the content is based on what was selected in the first (leftmost) group. Finally, you can click on an item in the middle div which will then bring up detailed information in the rightmost div.

Normally this wouldn’t be a problem, but in this case the issue is that the width of the columns needed to be dynamic. If we had made the column widths fixed, then whenever the data in any of the columns was wider than the containing div, a horizontal scrollbar would’ve popped up. While this wasn’t a showstopper, it’s wasn’t visually appealing. You might be thinking that using a table would be a good solution except for the fact that resizing table cells isn’t much easier than resizing multiple divs, plus we’re not displaying true tabular data. Another possible answer could lie in using frames, except for the fact that frames disappear in HTML5 and I haven’t used frames in over 10 years. Continue Reading »

Posted in JavaScript/jQuery, Usability | 1 Comment »

Where Have You Been?

Jul 22nd, 2010 by | No Comments »

So I’ve been busy working on a few projects but I thought I’d talk about a few things that interested me lately.

First off wallpaper. I love interesting wallpaper for my computer. Paying for it is our of the question. Actually I used to be a paying member of Webshots since they had a good variety of high res stuff, but since that time I’ve found a few sites with a great selection. And they are:

  • National Geographic – National Geographic has been around a long time and one reason is due to their stunning photography. Head over to their site to find loads of high resolution, free images for your pleasure.
  • InterfaceLift – With thousands of high resolution images in a wide variety of sizes, InterfaceLift can keep you busy for hours downloading wallpaper.
  • Mike Swanson – Back in 2005 Mike (a Microsoft employee) began posting his own high resolution, mostly macro shots of just about anything. Most are worthy of being framed and hung on your wall. 150 and counting.

Apple. Despite problems, Apple seems to be coated in Teflon™ and resistant to anything negative. The new iPhone has major issues (even though I want one I won’t buy one due to AT&T sucking hard) yet sales are stellar. Hell even businesses have been born due to their problems. The iPad has yet to become the magical device Steve Jobs would love you to believe it is and sales are stellar. Looking back a little further does anyone remember the MacBook Air? Beautiful to look at, ridiculous to use. How does a company with so many issues continue to go unscathed? Anyway, getting back to cell phones in general, is it just me or does anyone else think that there are just too damn many models of phone to choose from? And doesn’t it feel like new phones come out and then disappear from the market faster than ever? I can’t keep up anymore. You’ve got the iPhone, Droid variants, HTC, BlackBerry, LG, Samsung, Motorola, Nokia,  and on and on and on. And let’s not forget Microsoft’s recent foray into the cell market with the only-on-the-market-for-seven-weeks Kin fail.

Switching gears. I’ve slowed down my jQuery development a bit and gotten back into more PHP work lately. Until recently, my main server was still running PHP 4 (yes really) however about a week ago it finally got the bump to PHP 5 (yeah, yeah I know, welcome to 2004). What I found funny about making the change from JavaScript work back to PHP was how similar the languages are, as well as the little quirks that make them quite different. The biggest face palm I had was regarding variable scope. In JavaScript, variables outside of functions are scoped globally by default. In PHP that’s not the case. This little difference caused me to lose far more time debugging than I care to share. That aside, I still love PHP and think that it’s the best language to use when developing for the web.

And finally, my favorite image this week:

Posted in Uncategorized | No Comments »

Msnbc.com’s Weird Redesign

Jun 30th, 2010 by | 1 Comment »

If you’re a regular visitor to msnbc.com you may or may not have noticed the recent changes to their website. At first it appears as if there were only minor cosmetic changes to the header of the page but upon closer inspection you’ll notice something else – a ridiculous choice of content placement.

The first time you visit the page you see what appears to be a normal home page

Notice that the vertical scroll isn’t at the top of the page? It’s almost imperceptible and in fact, I didn’t notice it for a week. Why does this happen? Scroll up the page and you’ll see that msnbc.com now has a large chunk of content sitting up above what appears to be the normal top of the page. It wasn’t until I saw a link where some of the old navigation used to be that said “Where’s my navigation? We’ve moved it to the top” that I noticed this big change.

So I have to ask why would you redesign a page and place a large chunk of important content up above where the visitor will see when a page loads so that they have to scroll up to see it? This just seems completely counter intuitive to web navigation. Visit a news site and then scroll up to read the headlines? That’s like opening the New York Times and then finding that the top stores section was folded down behind the front page.

Msnbc.com explains this change by saying “We’ve moved the news menu to the top of story pages and made it easier to see what’s happening across the site. When you first get to a story, you’ll see sections and shows displayed across the top of the page. Below is the name of the section you’re in and a search box. Scroll up to see top headlines, slideshows, video and hot topics. Roll over a section name to see more from that section and click on a section name to go there.” Scroll. Roll. Click. Are they serious? Is it just me?

Posted in Rants, Usability | 1 Comment »

« Newer Posts - Older Posts »