Archive for August, 2009


Tuesday, August 25th, 2009

Twitter is down. Again.

This brings me to certain trains of thought: How would a decentralized Twitter work? How can it be implemented? What kind of new-age acronym/abbreviation can we use to describe such a decentralized service?

A ‘DeCent’ service isn’t controlled by any one company, with all that entails. Some friends may be cut off from the rest for a period, but the only way the entire service could be shut down is to take the entire internet offline, and then it would still be possible to connect to others in an intranet. That’s a very powerful concept.
As well, you could make certain tweaks on your own, so you can have any interface you want. As long as the data going out is the same, and as long as you parse the incoming data in the same way, you can choose what you want to do with everything else. You can keep a backlog or you can throw everything away without storing anything.

Here’s how the DeCenTweet would work: You take the Twitter API, and create your own implementation of it. Your program would send out a packet of data indistinguishable from a Twitter tweet. Many of these programs already exist in clients like TweetDeck, Seesmic, Twitteriffic, and many more. Such an implementation would be modified to post to your own database, instead of Twitter’s. Instead of making an API call to Twitter, you’ll instead have a list of Following, each with their own URL. The client would check each in turn, updating your stream accordingly.

Speed would be of the essence. When you have a few hundred people pinging your server every half a minute, you’ll need to be able to serve the data near-instantly.

I think I’ll try to create an implementation and see how it works.

8 Ways to Increase Productivity

Friday, August 14th, 2009

I’m going to try something like a Monday, Wednesday, Friday schedule, because it seems useless to go full-production when I have literally no readership at all. (If you read this, and you want a post every day, by all means say so and I’ll oblige.)

Everyone has those times where they just feel foggy and can’t get any work done. Here are some ideas to help:

  1. Speed-Reading: If you’re anything like most web professionals, you probably subscribe to and/or visit about a million blogs a day. Each of those blogs can have hundreds or thousands of words, and the comments are altogether often longer than the articles they talk about. To cut down the time, try some speed-reading techniques. By reading at 1000 WPM, you can cut down the time it takes to read fifty blogs to about an hour. At first, such intense concentration might drain you, but within a couple days you should find it much easier. Using the middle mouse button to auto-scroll can help, too, because it forces you to keep up, and makes it easier to learn.
  2. Focus: Often, the hardest part of getting anything done is starting. The problem with starting, though, is that it’s not something that’s only done once; you have to re-start every time your attention is pulled away. If you’re used to something like a Twitter client on the side, you can learn to ignore it while you work, but other things, such as constant email notifications, can seriously disrupt your workflow. You need to be able to spend a solid several minutes on things without being interrupted. If necessary, set your twitter/email/etc. to check for new updates every ten or twenty minutes, instead of every five.
  3. Use what you’ve Learned: No matter how much you read, you’re not going to have a very good idea of how things work. The best idea is to use what you’ve learned, either by teaching about the topic or by implementing the techniques you’ve been studying. You’ll quickly realize where the gaps in your knowledge are, and you can fill those in. Afterwards, you’ll end up knowing more about the topic than you would have.
  4. Don’t get Lazy: When you’ve finished speed-reading through your blogs and your emails and your social media, and you’ve written blogs posts and build some new functionality into your projects, and it’s only four hours into the morning, don’t allow yourself to peter off into an afternoon haze. Keep a list of things that need working on, and go through that one-by-one. If you really can’t work anymore, keep a list of things that you’ve been meaning to do, but which are more-or-less mundane: sprucing up old code, reading some pages you had bookmarked for a few months, doing some cleaning, or learning more about those other topic which interest you, but which you’ve never delved into.
  5. Manage Burn-out: Often times, you burn out in one area, as if you were exercising physically. Doing arm curls all day is going to hurt, and isn’t going to get you anywhere. Try engaging your other skills-areas: draw, position things, sort things, create logical arguments, or practice some math. All of these have important applications in the real world, and will help you develop skills in all those areas. Meanwhile, your mind will get an even work-out, and you’ll feel much more limber.
  6. Rest: yes, sometimes it’s necessary to just let go for a while. If you’re tired, you should sleep, so that you’ll be rested up in the morning. No matter how long you stay up, your body needs to sleep for half the time it’s been awake (on average), so you don’t actually gain anything by working when you’re tired. If you find your attention waning, try going for a walk; you can let your mind wander, with nothing else to do, and clear your head. If you get into a position where you aren’t doing anything, which is only really possible away from the computer and internet, you’ll find yourself realizing you know what you want to get done. You’ll have the inspiration to continue work on that project, if you set yourself to it.
  7. Early to Bed and Early to Rise… While it’s not necessarily true that getting up early in the morning is more refreshing, setting some schedules can help greatly. A cluttered schedule leads to a cluttered mind, and you can get so lost that you’ll forget meetings and not know what to do next. Schedules are good, as is change. If you need to, change a few things around so they work better. Witnessing the change between day and night can also change your mood, so experiment with working in the early morning or the late evening.
  8. Reset: This one sounds strange, and you’ll have to figure out how to do this on your own, but sometimes your life is so muddled you need to re-set things so everything fits. Spend a few days keeping awake until it’s impossible to keep your eyes open, and you might realize that your body is pushing you to sleep at a specific time in the day. Try going on a diet, and see how different foods make you feel. Try making a day very physical to see if that refreshes you. By trying everything, you’re bound to find something that helps. Everyone has different needs, and it’s up to you to find out what they are. If you fulfill those needs, you may find your productivity increasing by a tremendous amount!

Hopefully, this list helps you feel better and more energetic about your day. You often don’t need to do anything strenuous, but set some goals and make a commitment, and you’ll find some things get easier.

7 Different Facets of the Web

Thursday, August 13th, 2009

In the entirety of the web, you find many broad job descriptions that bring everything together. Here are a few:

  1. Design: A fine and experienced attention to color and position marks the designer apart from mere mortals. Design brings beauty and order to a project that would otherwise be over-run by disorder. An expression or emotion can be embedded by a designer’s touch. Many different media are available, from print to web to clothing. Works well with: Typography, Graphics
  2. Typography: The form of a letter-face can speak with nuanced emotion when in the hands of an experienced typographer. Words are the tools that make us human, and the form they take sets the tone and humanity of the message. Anywhere the written word exists, there you’ll find typography. Works well with: Design, Graphics
  3. Development: The modern world is help up by the logical structure of application development. This vast array of tools places entire lifetimes of information directly into our hands. Developers are an extremely diverse group, calling on a multitude of different languages to run entirely different systems. On the web alone, programmers use PHP, Ruby, ASP, SQL, X/HTML, CSS, Python, ECMAScript, and more. Works best with: Accessibility
  4. Graphics: Throughout the history of humankind, we have used color and shading to portray our deepest fears and most wanton desires. The graphic artist weaves palettes of colour and light into pleasing gradations or fun, vibrant dances of hue. Personality, mood, and business can all be wrapped up into a single logo. Works best with: Typography, Design
  5. Accessibility: The weak and the non-standard are often harshly ignored by the mainstream, but Accessibility gurus lend a strong hand to those who’s needs are different than most’s. Information is made available to the blind, the feeble, and the small-screened, through best-practices, standards, and common sense. The humble accessibility expert expands the world to all, and improves the user interface to enhance the user experience. Works best with: Social Media
  6. SEO: Often accused of dark deeds, the Search Engine Optimization expert cunningly sculpts Page Rank to improve the findability of websites. SEO is a science, and the experts are always attempting to deconstruct the black box. Works best with: Social Media
  7. Social Media: People have an innate need to be included in a community. By creating a community around a brand, social media experts gain followers with genuine loyalty to that brand. If the company takes suggestions from the community, a very powerful bond will form. Works best with: SEO

Expanded Floats

Wednesday, August 12th, 2009

This is a working-out of an idea I’ve had. I can’t think of any solution for it, besides perhaps a script, so I’m going to invent a CSS attribute.

Fluid Layouts

I’m a proponent of fluid layouts, and so I believe that a page with a large number of congruous containers is best laid out by floating the containers. This means they fit as many as they can on one line, and then wrap the rest to the next line. Someone with a small screen might see one or two items per row, while someone with a larger screen will see more. (The Embroidery House has a good example of this.)


Notice the empty bit on the right? Try resizing your browser and watch how the flow works.

Design Problem

There’s one serious design problem with this: If the width of the screen isn’t exactly the right width to contain a specific number of floated items, there’s going to be a gap to the side, up to the size of an item.


So, my idea is this: Add expand:x|y|both to the CSS. The renderer would take the active area to the side (the blank spot, minus padding and margins), and divide that, rounding down, into the number of floats. It would increase the width|height|both of each float by that amount, which would fill up the sides, minus a pixel or two for rounding errors.
No matter the width of the window, the items will fill their container.


If the window grows wide enough to fit another item, the items will snap back to their original size and will be reflowed.
That is, the parser first checks the width of the floats (it would have to keep current width separate from the ‘real’ width), and flows from there, and then alters the width to fill the rest of the container.
For the purposes of Webkit: the attribute would not accept -webkit-transition, because doing a regular width transition on the parent container would re-flow and re-expand the floats.


I see the following potential problems.

  • That rounding error sounds tricky. If it rounded up, the floats might wrap, which is why I was saying it would round down.
  • I obviously haven’t given the rendering flow much thought. I’d have to hear from an expert how that could fit into it.
  • Could it keep a size separate from it’s regular size? I suppose its size could be recalculated based on how float sizes are usually calculated.

I’d like to hear your opinions on this issue.

Accessible Descriptions

Tuesday, August 11th, 2009

Alt text

What do you usually put in the alt text of your img elements? Maybe you don’t include the attribute, or maybe you leave it empty. Otherwise, you’ll probably put a half-hearted alt=”image” or alt=”logo” or alt=”me” and leave it at that.

And it’s what we’re all taught to do, frankly; but we’re slightly misled, when we’re told that the alt attribute “describes whatever it is.” Alt is so much more than that.

The Essence of the Media

Alt is the image. Any time you add some form of media to your page, whether aural or visual, you need to store it as text, which is accessibly by basically anyone. Text can be translated, turned into Braille, spoken, or rendered onto the screen. It can be searched, selected, saved, stored, or sent.

Define a Context

When you look at the link to your file, try to imagine what it would be like to be denied it. Forget the title, for a moment, or what it’s there for, or the basic thing inside it: For a moment, imagine you’re on your page, you know there’s an image there, but you have no clue why. What’s the context? You might mention it in the text around the image. What else is needed? Describe anything that would help the context, as well as anything someone might notice.


It isn’t all alt. An image viewed on a webpage will have text around it for context, but if you save the image to disk you won’t have that luxury. Give all your images a filename that best describes it out of context. Instead of ‘team.jpg’ try ‘webdev_team_09.jpg’. It’s a bit longer, but much more descriptive. Filenames take some practice, because you need to keep the filenames to a minimum while also including all the information you can.

Title text

As well, there are the page titles. Most users, when they save a link, don’t bother changing the name. I found an external SSD I wanted, and saved the detail page to my flash-drive to carry with me. To this day, the file is called ‘Welcome to Transcend Online Store.htm’. I know what it is, but it would be confusing if someone else saw the file, or if I had multiple items.
If the page deals with a specific product, try to add the product name to the page title. Each and every page should have a different title. You can keep the company name in there, but also add the page context to the beginning.
The company name is ever-present, and isn’t really important; and the browsers tend to cut off the latter parts of a title if they’re too long. In this light, always put the most important parts of the title first. Because tabs shrink when too many are open, it’s wise to keep the first few characters the most descriptive.
‘Welcome to Transcend Online Store.htm’ could have been ‘SSD eSATA/USB – Transcend Online Store.htm’, which would have made much more sense.

Meta Description

Finally, there’s the meta information. The page description, you might think, can be the same everywhere, and that very well be true; but if the page expresses any different functionality, the meta description should also change. Search engines such as Google display this description when showing your site as a result, so craft it to show as best you can the nature of that page. If the user was searching for something that could be found on another page in your site, Google will include that link, with its own description, right under the main link. This point is mainly SEO, but what’s good for search engines is usually good for accessibility, as well.

Once Again

To recap:
-alt text should make a fine substitute of the media it references, because those who use the alt text cannot gain access to the information in the media
-filenames are sometimes viewed outside the context of the page, and so they should have reasonable names
-titles will be used on saved links, so each page should give its context
-meta description is very helpful to users who are searching for something specific, and also help your different pages gain visibility

This doesn’t only affect blind readers. People with images disabled or hard-of-hearing video-viewers will also be able to find their way around better.

Width, Size, and Accessibility

Monday, August 10th, 2009

If you took a close look at this page, you’ll find that it allows you your default text size, and that you can open the page as wide or shrink the page as thin as you might want.

This is accessibility. You can view this page on a tiny cellphone screen, a smallish old CRT monitor, or the newest 50″ 1080p plasma TV.
(Admittedly, I should give the page a maximum width, but that’s another matter.)

Most pages today, especially if they’re well designed, are fit to a permanent 960-pixel grid. The more over-designed of those also set your text-size for you, in case it was only by accident that you’ve made the text appear larger on your monitor.

When you visit those sites on a screen smaller than 960 pixels wide—plus browser window, plus scrollbar, which makes the total width more like 984px—our good friend Horizontal Scrollbar comes out. Except that he’s not a good friend, and we all hate him.

With newer browsers, you can at least zoom out to shrink the 960px width to a more-manageable 600px. If they’ve set the text to 12px, though, you just can’t zoom out without having the entire page’s text turn into an ill-defined mass of faded grey squiggles.

There are lessons to be learned in all of this: While a great number of people use a screen greater than 960px in width, a fair number have screens of much smaller size. This includes cellphones, iPhones, iPod Touches, very old computers, browsers with side-panels, and extremely large monitors divided into sections.
While many can’t fit 960 pixels on their screens, every one of them can fit 100 percents. Therefore, try to make fluid 100% grids instead of fixed-width 960px grids, and always, always let your users set their font size.


Friday, August 7th, 2009

Since the redesign, I’ve decided I’m going to go for a more professional blogging style.
I’ll make one entry every weekday, and I’ll take pains to outline How To Do something instead of just telling a story about something I did.

If any of you have suggestions on topics, I’d love to hear.
I’ll also start using the Categories.

Before and After

Thursday, August 6th, 2009

I just went through my archives, because I wanted to see what happened when in my development of The Embroidery House.

This image [2022×372, 213KB] is a string of all backups, generally made after a big night of fiddling around with things. usually gets backed up once a month, it seems, and has also come a long way.

The Embroidery House creation, from left to right:

  1. February 11th: This was actually a rough draft, which was only meant to show the functionality behind what I was doing: using a primitive AJAX form to load the clothing from an XML file. I got carried away, and tried to make everything look like stitches. Most everything had custom padding or margin, and almost all the style was inline. At this point, I was still mainly a programmer who did web stuff on the side.
  2. February 23rd: Having finished the AJAX, I decided to try beautifying it up. This wasn’t my first day with this design, but I don’t have backups of the other days. Basically, I decided that the site should be sporty, and sporty sites always had bold reds or blues, and usually whites. I wanted to give the site a textured feel, as if it were made of fabric. On February 19th, I had my Great Epiphany and became a web designer/developer. On the same night, I discovered transparency and abused it about as much as you’d expect someone to abuse something he just found. The logo suddenly looked like a watermark, which was appealing to me, but then I was trying to make practically everything transparent, and it just didn’t work. I was going to put a fading-transparent set of coat-hangers in the corner, so be thankful I didn’t. At about this time, I had discovered Doug Bowman’s A List Apart article called Sliding Doors of CSS, at just that point where I was experimenting with making my links more like buttons.
  3. March 4th: I eventually decided that the last style was so disgusting and unforgivable that I scrapped the entire thing and started from scratch (except the styles set up to lay out the clothing). I settled on a minimalist approach, to really bring out the soft cream of the fabric in the background. I made the main navigation blue, because red just seemed stupid. I also made a bit of javascript that loaded up a Google Maps window if you clicked on the address, which I was kind of proud about. My client had finally given me the text for his logo, which I used in a sort of banner text.
  4. March 10th: A week later, not much had changed. I had fixed up the styles a bit, and made the items look more individual. I started working on the UI, so that the site would be actually usable. Some things got re-written, as well.
  5. March 24th: My client finally got an idea of what he wanted the site to look like, and drew up a plan. He wanted sky above, with the menu above the main content area, and a sidebar for showing new items. I chose some colours quickly, but things ended up looking a bit aquarian. I ended up completely changing the style. I was in the middle of converting the pages to PHP, which finished a few days afterwards.
  6. August 2nd: There were other steps in-between, but few of them are stye-based. I went through a phase where there were trees in the sidebar, but the client didn’t like it. I photographed the sky and took samples from that, so the tones should be far truer. I tried to give a gradient feel, to replicate the gradients of the sky. I also tried to keep the images small, to fit with all screen sizes. At some point, I filled the sidebar, redid the copy on most of the pages, consolidated those extra pages (like About and Contact) to a small toolbar in the corner, and added a miniscule floating footer. I redid the entire clothing system to run with php, from a database, and added the options to filter those. I’ve got to add sorting, sometime. At the moment, you can sign in, browse clothing, select the one you want, and add it to a cart. I’ve also added a forum, though it’s yet to be used. I also haven’t actually changed it for about a month, so it’s really more like July 2nd.

Quite a list! I think, if the entire project were to be erased, I’d be able to get everything back up the way it was in a little over one month. At the moment, I’m waiting on the client to finish a list of chores he needs to do to complete the site. I’ve been doing logo work for him, in the interim.

WhatWG Twitter account

Tuesday, August 4th, 2009

We woke up today with a strange message from the @WHATWG twitter account: “fuck off”

There was some astonishment and a couple of small giggles, but I think we largely ignored it. Later, though, we got a few more strange entries.
I think some kid somewhere had stumbled upon the form, which was located on the front page of Just on the front page, with no password.

UI Fail to the extreme.

Anyway, there was a slew of messages as friends contacted friends and everyone realized they could tweet from the WHATWG twitter account. John Gabriel’s Greater Internet Dickwad Theory proved true. Almost everyone who posted to the account sounded like ten-year-olds.

There were a few gems in the pile, though:

  • We’re scrapping HTML5 in favor of HTML 4.5, a more modest update to the spec. Look for it this fall.
  • The HXTML 2.0 spec has been finalized with only one tag which is <text>.
  • <audio><video><disco>
  • Considering an <o rly=”ya”> tag.
  • Won’t someone please think of the children?!
  • My name is Robert’; DROP TABLE students;
  • </html> tag replaced with </kthnxbai>
  • Hello. I am WHATWG and I am EXCELLENT
  • WHATWG announce working group on emoticons. Homer says (_8(|) ~doh!

After ten minutes, it seems they ran out of API. Now it’s starting up again.
I’ve emailed Hixie, but I’ve no clue when he’ll wake up.

The @WHATWG channel started with over 1307 followers, and have since dropped to 1255.

More news in the future!

More as they come.

  • WHATWG to start work on “Bible5”
  • Trapped in twitter factory, send help!

Followers: 1207. I believe this will continue every hour until someone changes the site.

More edit:
This from the IRC channel:
# [16:33] <beowulf> i say abused, i think it’s important that people buy viagra
# [16:34] <gsnedders|work> Are we going to have to get “I abused @WHATWG” t-shirts
# [16:34] <miketaylr> I’ll take a size M
# [16:36] <Lachy> beowulf, did you really tweet about viagra on @whatwg?
# [16:36] <gsnedders|work> Someone did.
# [16:36] * gsnedders|work glares
# [16:36] <miketaylr> the twitter status is about to hit critical mass a la reply-all ‘stop hitting reply-all’
# [16:37] <svl> The follower count is going into freefall

Edit (19:00GMT):
After another round of spamming, which seems to have left them with 1166 followers, several measures have been taken. Everyone started spamming Twitter’s @spam account with details about the spam, I flooded @WHATWG with wrong passwords — which locked the account — and others mentioned in the IRC that they disabled the form.
So, it appears to be over.

CSSquirrel should do a comic on this! It was epic!

Browsers: Best of

Monday, August 3rd, 2009

For posterity, I’ve decided to make a list of all the features browsers have that should be mimicked in all those other browsers. Keep in mind that some have duplicates, just so I didn’t have to add additional ‘combination’ entries. Anything missing would be welcome.

  • IE8: Hideable menu bar, Web Slices, Accelerators, Tab Isolation, Compatibility View, Offline Mode
  • Firefox: Extensions, Offline Mode
  • Chrome: ‘Application’ interface, Full-Themed (no native title bar), Start Page, Tab Isolation,
  • Safari: Document Inspector
  • Opera: Mouse Gestures
  • Others: