April 2003 Archives
19 entries
Link to Your iTunes Tracks
Posted at 10:10 AM
What Do I Know?:“…if you right (or control) click on a track in your library, youŠll see a Copy Sharing URL option. When selected, the URL is copied to your clipboard.”
Very cool to be able to point to specific tracks when sharing your music.
Free Ice Cream
Posted at 10:10 AM
I’ve always been a fan of Ben & Jerry’s ice cream. Maybe it’s because I grew up in Vermont, or maybe it’s the environmental and charitably concious way the company has operated. And then again, maybe it’s because it’s just damn good ice cream.Anyhow, today is Free Cone Day. Find out if there’s a scoop shop near you.
While you’re there, check out the new(?) benjerry.com. Roll over the navigation buttons and watch them “melt” and drip into sub-navigation options below. Clever. It’s handled with Flash, but still a cool effect.
iTunes 4
Posted at 10:10 AM
So the big news today was Apple’s announcement of new iPods (don’t they look like an artist’s rendering?) and the iTunes Music Store, where you’re able to browse and purchase 200,000 songs in AAC format. It’ll be interesting to see if this catches on.But what really struck me was a couple of features in the new version of iTunes that was also released today. Most notably the ability to share your iTunes library and playlists with any other computers on your network, using Rendezvous. Like file sharing for your MP3s. What’s nice is that if you have a multi-computer set up, all your separate files can be combined and played from one computer — not to mention accessing at work, where everyone is already connected. Instant radio station.
Lazy Chef: fruit smoothies
Posted at 10:10 AM
I’ve been thinking for awhile about starting a web site called The Lazy Chef — tips and workarounds for people who like to eat good stuff, but are well… lazy. Maybe someday.Anyhow, here’s a first entry: easy fruit smoothies. A couple of card-playing buddies of mine actually tipped me off on this method (one such buddy). Buy a few bags of frozen fruit (strawberries, peaches, pineapple, whatever). If there’s a Trader Joe’s near you, they have a pretty decent selection. Buy some orange juice. Plop a bunch of fruit in a blender. Add some OJ. Add some sugar (optional). Mix. That’s it.
Because the fruit is frozen, there’s no need to add ice. The result is like a sorbet shake. Completely natural, but delicious. I should also mention that I loathe the word “smoothie”.
A Touch of Class
Posted at 10:10 AM
What I was trying to say in my post on CSS Inheritance a few days ago, is more coherently described by Tantek back in December in his A Touch of Class post. Specifically the “Context before class” section.If you haven’t read it, and you’re building sites with CSS, it’s completely worth it. A really simple way to decrease code using inheritance.
Rolling My Own
Posted at 10:10 AM
Was just reading Tantek’s post on why creating a weblog by hand is more satisfying than using a blog app to do the job. I fully agree with him — and do the same for identical reasons, likening it to a craft. It’s often a bummer to see so many weblogs using default themes that come with the application.The only reason I built a weblog application was for the experience in doing so — realizing that I could. But more importantly, it gives me an arena to play with stuff — XML, Perl, XSLT, etc. And like Tantek, being able to quickly and easily change markup whenenver I want to experiment is key.
While current weblog authoring tools might add more functionality to this site, for me simplicity is king.
Acrobot
Posted at 10:10 AM
Acrobot is a really handy tool for automatically finding acronymns and abbreviations in a text block, and then wrapping them inabbr and acronymn tags — with their respective titles. It also clears up the difference between abbr and acronymn and when it’s appropriate to use either or.
I had just been thinking I should add automatic parsing for abbreviations to SimplePost, but now maybe I don’t even have to.
CSS Playing Cards
Posted at 10:10 AM
BrainJar.com:“This example demonstrates using CSS to graphically display standard playing cards on a web page … the method here uses the positioning features of CSS and a few standard HTML tags and character entities to create realistic looking cards with a minimum number of images and HTML tags.”
A nice display of CSS positioning. Be sure to check out the finished demo as well.
The Most Unbelievably Annoying Thing for a Pedestrian
Posted at 10:10 AM
While I’m walking to or from the train station, I use crosswalks. Approximately 3-4 times per commute, the following happens. I step out on the crosswalk. The approaching car on the far side lane that is going really damn fast, slows down and kindly motions to me that it’s OK to cross. I start making my way to the other side of the street — BUT. There’s an evil car going even faster, behind the good car, that is severely annoyed that good car is stopping for no apparent reason. There’s plenty of room to the right of good car (this is always just a two-lane road), so evil car speeds up and goes around good car — to the right. See fig. 1 below:
Now one of two things can happen here. Either I get hit, or I have to stop in the middle of street and wait for evil car to speed past me while I gesture appropriately. I’m stuck. This annoys good car, because even though they were nice enough to let me cross, they have to sit and wait for evil car to pass before I can get to the other side a la Frogger.
This is the single most annoying thing that happens to me throughout the day. And it’s guaranteed to happen at least twice. Carry on…
Enigmo
Posted at 10:10 AM
Enigmo is quite possibly the most addictive puzzle game I’ve played since Tetris. It’s a new shareware game for Mac OS X, with can’t-put-it-down playability and amazingly great three-dimensional graphics. Download the demo and you will be forced to buy it. (link via what do i know)Transitioning to XHTML 2.0
Posted at 10:10 AM
Mark Pilgrim’s latest XML.com column begins to share what elements will be dropped in the XHTML 2.0 draft, and what new elements will be added that achieve similar results. Slightly scary in what’s being proposed, but then someone calmed us down with intelligent and practical thoughts.What I do like about XHTML 2.0 is the introduction of the nl tag for navigation lists. Works like a ul, but semantically more appropriate for navigation — which has fast become the preferred way to mark up navigation items — then styling them with CSS. I had previously wondered if using a definition list was a better choice for navigation, but then was convinced that using a header tag and an unordered list was the way to go (mainly due to a cleaner un-styled presentation).
Now nl is thrown into the mix — although it doesn’t look like I, or anyone else, will be using XHTML 2.0 any time soon, if ever. So, maybe it’s not worth getting excited about.
Excited over a proposed XHTML tag. Yes, it’s come to this…
CSS Inheritance
Posted at 10:10 AM
One of the easiest ways to optimize your code when dealing with basic markup styled with CSS, is to strip out unnecessaryclass declarations as well as redundant div tags. The following is an attempt at a mini-tutorial.
I’ve been looking at a lot of code lately, and something I see more often than not is markup that is “over-declared”. For instance, let’s say you have a div that contains some other tags — h1, maybe a few customized anchor tags, etc. Some might say:
<div id="stuff"><h1 class="red">Big Title<h1></div>
And then in their CSS:
#stuff { padding: 20px; border: 1px solid #000; }
while adding a second declaration for
h1.big { color: red; }
Let’s do this with less code by stripping out the class="red" declaration from h1 tags and use inheritance in the CSS to do the work by assigning all h1 tags within #stuff a style:
HTML: <div id="stuff"><h1>Big Title<h1><div>
CSS: #stuff h1 { color: red; }
Now, stripping out one class declaration may seem like chump change, but when you’re giving class names to elements over and over again — that are easily referenced in CSS by it’s parent id — it begins to add up.
The inheritance works with any HTML tag, so instead of doing:
<div id="stuff"><div id="stuffinside">blah blah<div><div>
You could do:
<div id="stuff"><div>blah blah<div><div>
While declaring in the CSS that a div that’s inside #stuff should be styled a certain way:
#stuff div { background: #369; }
You may even keep going deeper and deeper when nesting elements:
#stuff div div div { background: #369; }
The above would specify the third div that’s nested within #stuff should have a blue background
The point: assign id or class once. Then use CSS to access and style the generic child elements within. It’s an easy way to simplify your structure.
While it might seem elementary to many (and not something I invented) — it is something I’ve been seeing over and over again in CSS-based layouts.
Footnote: There are certainly times where it’s appropriate to use class names inside elements that are already labeled — but there are often just as many times when they are unnecessary and the bloat can be cut down.
45 Degree Swing
Posted at 10:10 AM
It’s days like today that remind me why I put up with living in New England. When the Spring finally comes, it’s shockingly great. Today it’s probably 80 degrees and sunny.
On the right is the forcast for tomorrow. With a predicted high of 80 and a low of 35 degrees, the weather service is decreasing its likelyhood of forcasting inaccurately. There is not much of a margin of error there. So, we’ll be in for a 45 degree swing tomorrow — which is entirely insane.
Bubblegum Altoids? (or... A Post Containing No Acronymns)
Posted at 10:10 AM
I’ve just thought of a great new Altoids flavor: bubblegum. Not mint, but bubblegum as in the kind that used to come with baseball cards — but it wouldn’t be chewing gum. It’d be an Altoid.I’m not sure what “curiously strong” bubblegum flavor would be like, and more importantly what is bubblegum flavor? Why is it pink? It’s not fruity or minty or chocolaty. It has its own unique taste. And this taste would compliment an Altoid very well, I believe. I should also point out that the Wintergreen flavor that Altoids already markets has a hint of bubblegum flavor in it. Hence the idea.
Yahoo! Search... only better
Posted at 10:10 AM
Just a few days after Yahoo! announced their new Search, Douglas Bowman took it upon himself to “markover” what they had using nothing but pure, clean XHTML and CSS. The result should have Yahoo! scrambling to hire Doug to improve what they’ve just updated.Specifically impressive is the manner in which the vertical tabs were handled, using CSS — a great example for anyone trying to do something similar.
Which Orange is Cleaner?
Posted at 10:10 AM
I just used Windex Sparkling Orange multi-surface cleaner to clean up an orange juice spill. There’s something oddly wrong about that.Simplified CSS Tabs Live Example
Posted at 10:10 AM
I realized from a few emails that it would make a lot of sense to point people to a live example of the CSS tabs described in the previous post. Here’s a page where you can see them in action. View source for CSS and XHTML.They’ll also be popping up in the real world throughout various pages within the Fast Company web site, shortly — where they will float in the content area of the page for certain applications. This was one of the reasons I didn’t want to mess around with positioning, since it was needed to be bullet proof within an already complex CSS layout.
Simplified CSS Tabs Trick
Posted at 10:10 AM
While trying anything and everything to get pure text, CSS tabs from an unordered list to work cross-browser — without adding extra elements, I came up with a nice little trick.By adding an id="tabnav" to a single ul element, I then could style an unordered list into a tab-style navigation like this:
The trickiest part was getting the horizontal line to line up correctly with the row of tabs. One pixel off in either direction, and the illusion doesn’t work. I couldn’t quite get this to work right for every browser I was testing on by using CSS borders alone. So I ended up giving the #tabnav a single 1x1 grey pixel background image: background: url(/images/tab_bottom.gif) repeat-x bottom;, aligning it to the bottom and repeating it only horizontally to create the wide line. Then, by giving each #tabnav li a float: left;, adding padding and a grey border of the same color on all sides — I could then override the border-bottom with a white border for active tabs to give the effect that it is highlighted. The fact that that horizontal line is a background image is what makes this method work. A CSS border is assigned to every side, which will overlap the background that’s behind it (grey border on every side for normal tab, white bottom border for an active tab).
Using unordered list for navigation and styling them with CSS is nothing new, but the single pixel background trick worked great for me as far as lining up the tabs to the border — most importantly without having to use any extra divs or other hacks or positioning. Maybe others will find this useful.
Positive response so far
Posted at 10:10 AM
A few comments around the web on the Fast Company redesign:- Stopdesign
- Jeffrey Zeldman
- standblog (in French, but I believe it is positive)
- Joe Grossberg
- photomatt
- Digital Web Magazine
- Living Can Kill You
Bulletproof Web Design Second Edition New Riders
Web Standards Solutions The Markup and Style Handbook Friends of EdA tiny design studio founded by Dan Cederholm. We create simple interfaces balanced with a standards-based methodology, and we’re based in Massachusetts, USA.