Web Development Quick Tip: Highlighting the Current Page in Your Navigation Links

Posted by Jeff Edsell on Aug 18, 2011 in Uncategorized

Here’s a bit of jQuery I use pretty regularly:

    var pathname = window.location.pathname;
    var path = pathname.split('/');
        path[path.length-1] = 'index.php';

    $('#nav a').each(function(){
    if($(this).attr('href') == path[path.length-1]){
        document.title = document.title + ': ' + $(this).text();

It grabs the filename of the page you’re currently on, then runs through your navigation links (in this case they’re inside an element with the id nav) and compares what they link to. If it matches, it adds the class current to the link. This way the page automatically highlights the current page in the navigation.

For extra points, it takes the text of the link and adds it to the page title after a colon. So if every page of your site was titled “ACME”, and you followed the About Us link, the title would automatically change to “ACME: About Us”.


Google Takes Another Important Step Towards Being Just Like Apple

Posted by Jeff Edsell on Aug 15, 2011 in Uncategorized

I’ve been accused of being an Apple fanboy. And while it’s true that I like Apple products and use a lot of them, I also get frustrated with many of Appel’s decisions, and have no problem being critical. But when it comes to the iOS devices, it’s hard to deny that Apple has pretty much made all the right moves.

Apparently Google thinks so too. Recent articles have shown that the famously “open” Android operating system is not so open. And today it was announced that Google bought Motorola’s handset business. Partly, they did so to secure the wireless patents already owned by Moto. But certainly the biggest reason was so that they can make Android devices over which they can have complete end-to-end control — and that other companies can’t muck up.

Just like Apple.

Also, just like Apple’s full control over the iOS platform’s hardware and software has kept AT&T and Verizon from being able to pile shovelware onto the iPads and iPhones they sell, Google will be able to make the “pure” Android devices they seem to have been striving for from the beginning. (Android was always intended to be customized, but I think Google’s been rather…shocked by the products that have resulted by that permissiveness.) “Want to be able to offer the absolute best Android phones anyone has ever made, and will ever make?” Google can ask the carriers. “Then leave them the hell alone!

So welcome to Apple’s world, Google. As an Apple user, I look forward to the way that the pressure of a truly solid competitor will keep Apple on their toes, and speed up the pace of their innovations. And as a gadget fan, if you do really knock it out of the park, my next phone may well be an Android.

As an aside, Google’s major handset partners can’t be happy. They’ve issued statements which seem strikingly similar — almost as if someone suggested what would be in their best interest to say? Ah, well, odds are that some of those companies will start hedging their bets by adding Windows phones to their product lines, giving a boost to that platform. And that’s a good thing, too.


The White House receives the news about Bin Laden

Posted by Jeff Edsell on May 2, 2011 in Uncategorized


Originally uploaded by The White House

They really need a bigger Situation Room.


Casting a Portal Movie

Posted by Jeff Edsell on Apr 22, 2011 in Uncategorized

Of course, if the wonderful Portal video games were made into a movie, it would be a crime to re-cast anyone. But, movie studios are serial practitioners of this crime, recasting roles whenever a stage play, TV show or other work is filmed.

So if you were charged with getting Portal to the big screen, and were handed down the edict that you couldn’t use anyone from he original cast, who would you pick? Here’s my stab:

Jane Lynch as GlaDOS It’s particularly hard to imagine anyone but Ellen McLain voicing GlaDOS, the cheerfully malicious AI. Who could come close to the subtle, snide, casually evil maliciousness? The deadpan stylings of Jane Lynch would fit the bill. Her comedy is tightly controlled and laser-focused, and she’d likely provide some wicked improvisations as well.

Michelle Rodriguez as Chell The exotic and lovely Alesia Glidewell served as the model for the game’s protagonist, and though I don’t recall her providing any dialogue, Chell will be much more vocal and visible in a film version. Michelle Rodriguez portrays tough and strong like few other current actors.

Simon Pegg as Wheatley Stephen Merchant is great as the excitable wannabe-sidekick robot Wheatley in Portal 2. But If I couldn’t use him, Simon Pegg would be an excellent fit.

Alec Baldwin as Cave Johnson Though J. K. Simmons brings Aperture Labs’ founder to wonderful, arrogant life, Alec Baldwin is also great for a totally confident, larger-than-life blusterer who gives no thought to consequence.

What do you think?


The City

Posted by Jeff Edsell on Feb 23, 2011 in Uncategorized

Last night I dreamed of the City.

Over the course of my life, I’ve had dreams at various times about certain recurring places: a high-rise hotel on a mountain, a mall, a suburb, a freeway, a college.

At some point I realized that all of these places were connected. That they made up an entire dream landscape. They even had routes connecting them: the mountain with its hotel was downtown, and from there you could get on a freeway to the suburbs, or take an elevated train (which hung from overhead tracks instead of riding on them) to the mall.

Of course the City has its own dream logic. I usually found myself at the university on final exam day, when I realized I had been enrolled all semester and hadn’t attended a single class. And I was most often on the freeways while circling he city, unable to find just the right exit. And for a luxury hotel, the elevators were very strange—cages suspended in the dark elevator shafts, which swayed frighteningly as they took their riders up dozens of floors.

But often, spending time in the City was just like spending time in any city. I remember walking past neighborhoods, seeing convenience stores, taking the train to the mall and browsing.

At one point the dreams were so common, and the City’s geography was so familiar to me, I considered trying to map it out, or possibly tell stories set there, either as its own self-contained world or a parallel to the real world (like my own personal Matrix, or Inception). But it seemed I would have the dreams in clusters, months or even years apart. Eventually I just seemed to stop having them altogether.

And then, last night, I found myself in an elevator in a high-rise building. The elevators had gotten an upgrade: real elevator cars now, with glass panels still allowed the riders to see the shaft walls moving by. But I was in the City again. I was sure of it.

I wonder if I’ll return tonight, and what other changes I might find.


Nature by Numbers

Posted by Jeff Edsell on Jan 14, 2011 in Uncategorized
YouTube Preview Image

This is a fascinating YouTube clip about the Fibonacci series, the Golden Ratio, and how both of the above appear in nature. I explained the topic briefly on Facebook for a couple of friends who seemed to like the explanation. So here it is:

The Fibonacci series is a set of numbers where each one is the sum of the previous two. So: 1 1 2 3 5 8 13 21 34 55 etc. The first part of the video shows how the escalating sizes of these numbers relate to th…e golden ratio.

The golden ratio is 1.618—”golden” because a rectangle of proportions 1 x 1.618 is said to be the most pleasing to the eye.

If you take a “golden” rectangle and divide off an exact square, the piece that’s left is another, smaller golden rectangle. If you divide a square off this piece you get another, even smaller one. You can do this forever.

If you draw an arc through each of the squares you made, you get a “golden spiral”—which occurs LOTS of places in nature, most obviously seashells, but also in other places, some of which are shown in the video.


From PSD to Web Page Part 1: Pre-Coding

Posted by Jeff Edsell on Apr 9, 2010 in Uncategorized

I’ve been building web sites for more than a decade now, and one of the best resources is the web itself. There’s all kinds of help for aspiring Web Designers/Web Developers/Web Whatever-We’re-Calling-Ourselves-These-Days. Online coding dictionaries, tutorial sites and inspiration sites abound.

What I’m considering doing here is a bit different, perhaps a combination of some of the above. I recently built a few pages of an upcoming website, designed by my friend and frequent collaborator Dave. I thought it might be interesting to write about the process that fell between receiving the Photoshop file from Dave and the pages as they now stand.

I’m hesitant to call it a “tutorial,” because that seems to presume that what I’m showing is the only way, or even the best way, to do this. But my hope is that by demonstrating some of the steps I followed, I can shed some light on possible approaches to common web design tasks and problems. Also, the reverse might be true — commenters may provide me with insight on how I might do a better job of approaching these issues. So don’t hesitate to post comments, questions, or suggestions.

The Photoshop (PSD) file

Okay. Dave wants to send me the Photoshop file. He can email it to me, which is nice because a copy will always be there in my email. If I need to go back to the original, I can just download it again. But it occurs to me that I may need other files from Dave, and he may want to revise some things. So instead, I use my Dropbox account. I create a folder that Dave and I can share and he puts a zip file of the PSD in it. Now whichever machine I use has access to the latest file, and I’ll see if Dave modifies or adds anything.

I never, ever modify the original PSD file a designer provides for me. Ideally, I’ll keep the initial zip file plus the PSD that comes out when I first unzip it. Then I’ll make a copy of the PSD, and work on that. From then on, if I need to, I’ll either make another copy of the original, or a copy of one of my copies. Sometimes by site launch I’ll have half a dozen copies of the PSD, depending on how many modifications I have to make to get the slices I need.

The first thing I do is take a look through the layers, to get an idea of what each page will look like. Ideally, you’ll be presented with a nice, neat set of concisely-labeled layers and folders, which you can easily turn on and off to view pages, popups, etc. Noupe.com has a great article about how designers should prepare PSD files for web developers. Often, though, it’s not a bad idea to follow these steps yourself if the designer hasn’t. Dave’s done a pretty good job of setting up the PSD for me — thought not a perfect one, as we’ll see later.

Muay Thai homepage mockup

So let’s start by looking at the home page. Ordinarily it’s better to start with a sub-page, because the home page is almost always different from the rest of the site in many respects, and it’s better to start by creating styling that will affect the most pages, then create the styles which will occur less often. But in this case, I’m only making three pages — the home page, the Gear page, and the Fighters page — and they all share enough elements that I’m comfortable starting here.

One of the first questions I usually have to ask about most designs is, “What happens when the user resizes the window?” It’s easy to overlook, even for experienced designers like Dave. But Dave has it covered this time: the right, left and bottom of the design fade to black. So I can just give a black background to my page and place the background image at top center.

The Background

Which brings me to my first issue: the background. It’s red. It’s very, very red. And it’s quite detailed. check out the diagonal stripes at the bottom, before the fade to black:

MuayThai background detail

So this means I’m going to have to make a really big JPEG for the background image. One with a lot of red in it. Why is red a problem? It simply doesn’t compress well.

Sound crazy? It’s true though. The human eye is more sensitive to variations in shades of red than it is to variations of other colors. So JPEG compression artifacts (the kind of crinkly weirdness you see in some web graphics) are far more noticeable in images with lots of red.

So what to do? Well, if it were feasible, I’d try to make the background color a solid red and lay the other parts of the background image on top. But I can’t really do that here. Another option would be to put a black box in the middle of the background image, where it’s covered by the boxer photo. But this background is used on other pages where the middle is seen, so that won’t work.

So there’s really nothing for it but to play with the settings to try to get the best-looking image I can in the smallest file size I can. Which is going to be a fairly big file. But at least once it’s downloaded it will be cached. And it will load in over a black background, which will allow the other elements to be perfectly visible while the background loads.

The Header and Navigation

Muay Thai header and navigation

After I really started getting into CSS-based design, I kind of went on an anti-image vendetta. I wanted the page to have no images except what CSS brought in. Everything needed to be text. Including the logo at the top or top-left of most sites which links you back to the homepage. It would be the company name in an H1, then CSS would hide the text and add the logo as a background image (a common form of CSS image replacement).

My position on that has changed. While I still think that you should carefully consider which images are truly page content and which are decoration, I like to have the logo appear at the top of the page. Why? Well, there are a few reasons. For one thing, if the logo is on the page, search engines can grab it, which is good. Second, if a user shares a link on Facebook, usually the first large image is chosen to be part of the Facebook post. Also, if your user is viewing the page with an older smartphone browser and seeing most of the page content as unstyled text, one image you would like them to see is the company logo. (Most of these browsers will shrink the image to fit.)

When I first looked at the design, I seriously considered making the logo part of the background image. It’s in the same place on every page, and it would save a server call and the download of a somewhat large PNG. But because of the arguments listed above, I decided to have it sit on top.

Now the navigation. I’ve become a big fan of the CSS @font-face tag lately, and I’ve had good results with it. So it’s tempting to render the navigation links as text and use CSS to add the red bars and drop shadows.

However…There’s a gradient fill on the text to make it look shiny and metallic. Hm. There are methods to create gradient text in CSS. But it’s kind of a hack. The drop shadows are doable, even in IE. But the red bars will need to be borders, and how will the drop shadow affect them? And if the red bars are background images…

After some internal debate I decide to go with the sprite method for the navigation text. If you’re not familiar, here it is quickly. I create one image that contains the normal and rollover states for all navigation items:

Muay Thai navigation background

The navigation links will be in an unordered list. Each item uses the image above as its background image, so it’s only one server call for all the images needed for the navigation. CSS is used to hide the text  and position the background so that only the appropriate part shows for the appropriate navigation item. Better yet, the :hover pseudo-class can take care of the mouseovers — no javascript required.

(If the above paragraph didn’t make much sense, do a search for “CSS sprites.” It’s a technique well worth learning.)

So far, I’m still in the realm of thinking about how to create this. I’ve written no code. Next time I’ll talk about handling the big main image and the links below.

Tags: ,


Digital media soup

Posted by Jeff Edsell on Jan 11, 2010 in Uncategorized

So I’ve been trying to participate in this grand new push-button world of tomorrow by figuring out the best way to deal with digital media in my home. I do have an HDTV, so I can view digital media, but I’m trying to get a handle on corralling all of the sources in a way that’s convenient for couch viewing.

Here’s how things stand:

I have digital cable and a DVR though AT&T U-verse. I was a hardcore Tivo user since Tivo first came out, and I still feel it’s the absolute best DVR experience. But you can’t use a Tivo with U-verse, because U-verse is IPTV (that is, all of the television signals come in over my internet connection). In order to stick with Tivo, I would have had to buy an all-new HD Tivo, and stayed with the more expensive Comcast cable. U-Verse has some neat features of its own, like the ability to view DVR content from any cable box in the house, and the ability to record up to 4 shows at once. But Tivo has Netflix streaming, the ability to buy Amazon videos, and the ability to move shows to and from my computer over the network.

So I’m trying to compensate for the lack of accessibility of online content. I have an AppleTV, and while I like it, I don’t love it. It can show any video I’ve added to iTunes — but my iMac has to be awake with iTunes running for it to see everything. Hacks allow it to run XBMC and Boxee, but the processor is rather underpowered for those applications, making it a mixed bag. Also, Netflix streaming isn’t a part of Boxee for AppleTV, and likely won’t be. The AppleTV is essentially a Mac running an older version of the Mac OS.

If your eyes have glazed over by now, believe me, I get it. I really want some sort of all-in-one solution, or failing that, perhaps two discrete, simple solutions which target specific media.

My latest solution is to use two long cables to run digital audio and video directly from the iMac to the TV. It’s not a perfect solution by any stretch, but it does have the advantage of bringing just about any digital media to my TV. So my DVR can handle recording and playback of broadcast/cable shows, and the iMac can show everything else.

We’ll see how that works.

Tags: , , ,


Here we go again…

Posted by Jeff Edsell on Jan 4, 2010 in Uncategorized

Yup, I’ve been on the interwebs for a while now. Taught myself HTML while working at Kinko’s in desktop publishing, using tutorials on the Netscape site. That was [mutter mutter grumble] years ago. Now I wouldn’t be surprised if a lot of the people reading this had never even heard of Netscape. Over the years I’ve left more homepages and blogs to rot than I can remember.

So why try again? I’m not completely sure, to be honest. It’s  a new year. And I do have things to say, if I can just figure them out. So bear with me, and we’ll take on 2010. (Yeah, it’s corny. But I needed a button to end the post, and I gotta go. More later.)


Copyright © 2020 Jeff Edsell All rights reserved. Theme by Laptop Geek.