Previously I’ve discussed the concept of CSS filters, and stepped you through converting an image to black and white using CSS, without needing to create a new version. We can use the same approach to sepia-tone an image, for an old-timey photographic effect.

The HTML for this example is an image with an attached class, using a self-portrait photograph of Daniel Proulx, licensed under Creative Commons:

1. <img src=steampunk-man-in-gasmask.jpg alt="Gentleman wearing a
2. steampunk gasmask and top hat" title="Gentleman wearing a
3. steampunk gasmask and top hat" style=width:512px;height:512px class=sepia>

Using the CSS3 Filters 1.0 Module is the easiest approach:

1. img.sepia { filter: sepia(100%);
2. -webkit-filter: sepia(100%); -moz-filter: sepia(100%);
3. -ms-filter: sepia(100%); -o-filter: sepia(100%); -webkit-filter(1); }

…but that only covers Chrome 18+. For Firefox 4+, we write a separate SVG filter:

1. <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
2. <filter id="old-timey">
3. <feColorMatrix values="0.14 0.45 0.05 0 0
4. 0.12 0.39 0.04 0 0
5. 0.08 0.28 0.03 0 0
6. 0 0 0 1 0" />
7. </filter>
8. </svg>

Saving this code in a file with the name sepia.svg allows us to reference it in our CSS:

1. img.sepia{ filter: sepia(100%);
2. -webkit-filter: sepia(100%); -moz-filter: sepia(100%);
3. -ms-filter: sepia(100%); -o-filter: sepia(100%); -webkit-filter(1);
4. filter: url(sepia.svg#old-timey);
5. }

Unfortunately there’s no explicit sepia filter for Internet Explorer, so we must fake it by placing a sepia color behind the image and making the image slightly transparent, restricting these changes to IE:

1. img.sepia{ filter: sepia(100%);
2. -webkit-filter: sepia(100%); -moz-filter: sepia(100%);
3. -ms-filter: sepia(100%); -o-filter: sepia(100%);
4. filter: url(sepia.svg#sepia);
5. -webkit-filter: sepia(1);
6. background-color: #5E2612;
7. filter: alpha(opacity = 50);
8. zoom:1;
9. }

(The zoom: 1 line is a hack for IE; just know it has to be there and applied).

Next, we’ll look at blurring HTML content, including image elements.

Filters allow us to visually process an image in the browser without needing to go through PhotoShop or use cycle-intensive, script-heavy methods in JavaScript or PHP. CSS3 filters are broadly supported in the most recent versions of Firefox and Chrome, and we can gain support in older versions and alternative browsers – even IE –  by using a combination of techniques.

In this article we’ll convert an image to black & white with pure CSS using the classic test image of Lena Söderberg. In future articles I’ll discuss how to achieve sepia toning, blurring, brightness, contrast and other visual effects with CSS.

The CSS3 greyscale filter

Desaturating a color image couldn’t be simpler with CSS3. We’ll apply the filter as a class, as you’d typically desire several images to be affected by the code at the same time:

1. img.desaturate { filter: grayscale(100%); }

Naturally, all current browsers implement CSS3 filters via vendor prefixes, so our first job is to insert that code, writing in CSS that does not yet exist in order to future-proof our work:

1. img.desaturate { filter: grayscale(100%);
2. -webkit-filter: grayscale(100%);
3. -moz-filter: grayscale(100%);
4. -ms-filter: grayscale(100%);
5. -o-filter: grayscale(100%);
6. }

Applying the class to the image is easy:

1. <img src=lena-söderberg.png alt="Lena Söderberg"
2. style=width:512px;height:512px class=desaturate>

Add An SVG Filter Effect

The CSS shown to this point works only in Chrome 18+, with support in other browsers expected to arrive soon. To gain the same effect in Firefox 4+, we need to use an SVG filter, which I’ll create as a separate document named desaturate.svg. The code for that file will be:

1. <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
2. <filter id="greyscale">
3. <feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
4. 0.3333 0.3333 0.3333 0 0
5. 0.3333 0.3333 0.3333 0 0
6. 0  0  0  1 0"/>
7. </filter>
8. </svg>

If the SVG code looks slightly daunting – and the matrix math behind it is somewhat complex – don’t worry. This is one piece of code that I’d actually encourage you to copy and paste as a generic “recipe”. I’ll explain matrix transformations in a future article.

With the SVG file saved beside our HTML page and test image, we will extend the CSS to become:

1. img.desaturate{
2. filter: grayscale(100%);
3. -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
4. -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
5. filter: url(desaturate.svg#greyscale);
6. }

Add Support for IE

So far our code covers future browsers, recent versions of Chrome and Firefox 4+. To include IE 6 – 9, we'll apply Microsoft’s simple but proprietary use of filter:

1. img.desaturate{
2. filter: grayscale(100%);
3. -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
4. -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
5. filter: url(desaturate.svg#greyscale);
6. filter: gray;
7. }

If you want to add in support for older versions of Webkit:

1. img.desaturate{
2. filter: grayscale(100%);
3. -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%);
4. -ms-filter: grayscale(100%); -o-filter: grayscale(100%);
5. filter: url(desaturate.svg#greyscale);
6. filter: gray;
7. -webkit-filter: grayscale(1);
8. }

Unfortunately Safari and Opera are still left out of the picture, but Safari 5.2 – due to be released very soon – should support the –webkit CSS3 filter prefix, and Opera’s support for CSS3 is continuing to improve.

The CSS we've written here allows us to visually convert an image to black and white on the fly in our browser, with no need to save new versions in PhotoShop. Using CSS also makes the image much easier to modify: for example, you’ll see that lowering the percentage used in our declaration from 100% to 50% causes a visual blend of the desaturation effect with the original color image.

The advice of essayist Sir Arthur Quiller-Couch, “murder your darlings” is not a call to infanticide, but a command to cull cleverness from written sentences. This is especially true when writing for the web, due to the fact that most visitors read less than 20% of web page content. Rather than reading word-by-word, users scan web page text for useful or interesting information, ignoring content that is too complex. Web content is experienced differently from books or magazine, which means that body copy for the web has to be written in a different manner.

Writing for the web is made more difficult by the need to target search engines while optimizing delivery on mobile devices. These demands have to be balanced with the expectations of the client and the expected literacy levels of users.

Key concepts in writing effective web body copy are:

• Write concisely. Long pages have a greater likelihood of being skipped or ignored. Text on the web should be roughly half the length of a printed version: ideally, your sentences should consist of no more than 20 words each, and paragraphs six sentences or less.

• If you cannot avoid writing long pages, make sure that you have an effective print stylesheet, and that the page is ready for Instapaper/Readability services.

• Write backwards. Rather than trying to lead your reader to a conclusion, start with a summary, filling in details later in the body. This makes it much easier for readers to understand what you’re talking about, and for those in a rush to retain your central point.

• Use headings and subheadings to clearly identify concepts.

• Insert ordered and unordered lists to drive key points home.

• If possible, highlight key words and concepts throughout the body copy.

• Link to relevant resources. If you’re writing copy for a glass company that mentions shower doors, link the words “shower doors” to the relevant page on the site. Not only does this add SEO value, but it also avoids diverting the user’s attention from the body text to the site navigation. Don't be anxious about linking to resources outside your own site: if your work is good, visitors will return.

• Make sure your spelling and grammar are correct by setting your type in a word processor before including it on a web page. Spelling errors make your work (and by association the site and/or company) appear rushed, ignorant, or inattentive.

• Target your sentences to the reader's literacy level. Unexpected or unknown words will distract and confuse most readers.* Write to personas from your expected audience. You may wish to use a literacy level service such as Readability Score to test your final body copy before placing it on the page.

• Define acronyms by using the <abbr> tag. Use abbreviations sparingly, as they can confuse users.

• Use images to retain interest. “A picture is worth a thousand words” is especially true on the web. Careful use of images gains the interest of younger readers while illustrating the text content. Avoid using clipart or stock images, which tend to look cheap and forced.

• Avoid “marketing-speak”. Users will distrust language that is obviously trying to sell a product or service.

• Use mixed case. Do not use UPPERCASE for more than a few words on a page. Multiple instances of uppercase text used in extended prose drastically reduces readability.

• Write as if you have only six exclamation points to use in your entire life.

• Place a “call to action” in the text. Inspire the user to respond to the piece: fill out a poll, place an order, comment on an article, etc. Do not abuse this: too many requests to “Add me on Facebook!” may make your work appear craven.

Finally, keep the text on the page updated. If information changes, alter the body copy. Displaying relevant, up-to-date information will instill a sense of trust and gain greater value in search engine listings: remember to include an indication of when the page was last changed.

* This is probably the rule I find hardest to follow: I love language, and find it extremely difficult to write or talk down to anyone. To me, every conversation – including the web – should be an occasion to extend one’s vocabulary.

Prior to my leaving for Boston to attend the Event Apart web development conference I needed a new personal business card. While I will be at the conference primarily in my role as a teacher, there are contexts in which I will need to interact separately from my employer; thus, this design. I’d like to thank Lea Verou for cutting through hours of indecision with a font combinations suggestion (Futura and Baskerville Italic) that worked perfectly. (The moustache-like rotated curly braces are set in Big Calson).

The email address created by this mashup of information is set to forward to my gMail account, allowing me to correspond under a separate identity; other contact information remains the same.

While web development is not (usually) dangerous, it is physically demanding: long hours spent in front of a computer create a working environment replete with repetitive stress disorders, eyestrain, backache, exhaustion and general poor physical conditioning. In turn, these can lead to illness and chronic health issues.

Part of the problem is the sheer amount of tasks involved in designing and coding, for which there never seems to be enough time; another is the fact that the work is mentally engaging but does not exercise our muscles, quieting the usual warning systems that allow us to recognize when we are overworked or under stress. Behaviors such as sitting in cramped positions from morning until well after sunset, rarely venturing outside, and eating at the desk while working are endemic in the profession. Repeated over years, these habits can be seriously debilitating, ultimately trading short-term progress at work for long-term health risks.

Of course, these habits are by no means confined to web developers; they are equally true of daytraders, serious gamers, and many other pursuits. The recommendations I have to counter them are broadly applicable to many professions, but do not come with any kind of medical guarantee: they are only based on my personal experiences. Nor do I wish to represent myself as some kind of paragon of healthy living: I often work 12 – 14 hours a day, and need constant reminders to take better care of myself.

Ensure that your monitors are correctly calibrated

Web developers who tolerate computer monitors with the contrast washed out or brightness lowered to a dim setting are doing themselves and their work a disservice. Properly calibrated monitors make color management far more predictable and consistent, and reduce eyestrain. You can go the full route with a professional hardware/software color calibration suite, or use the tools built into your operating system. Of course, you should also ensure that the screens themselves remain clean and dust free, and that the lighting conditions are appropriate to the work you do.

Use good posture in a well-made chair that is adjusted to you.

You’re likely to spend eight hours or more in a chair: as much (or even more) time as you spend in bed. It makes sense that your office chair should be as much of an investment as your computer, and that you maintain a good posture when using it, not scrunched forward or twisted into a pretzel. I have a Herman Miller Aeron chair in my home office, but the make and model doesn’t particularly matter: just be sure it is comfortable and that you adjust it regularly to fit you.

Use web-based tools to help maintain your health.

Since we’re already on the web, it makes sense to use it in ways that help us keep healthy. This is really a subject for a seperate article, but I’ll leave a few suggestions here: I use Nike+ to track my runs on my various iDevices, Fitday to maintain an online log of workouts, and a WiFi enabled Fitbit Aira bathroom scale to track my weight and bodyfat. All of these tools also serve as motivation: if I have data, I have something I can track and improve upon.

Maintain good support for your wrists when typing; do things with your hands other than typing.

Our fingers move most in web development, but they tend to do so in very pre-determined patterns, potentially leading to repetitive stress injuries. Learning new keyboard shortcuts and using macros not only reduces and varies the number of keystrokes we make daily, saving our hands, while keeping your mind engaged and saving time.  Use your breaks and leisure time to do other tasks with your hands, keeping them flexible.

Stand up and move regularly

Everyone gets into “the zone” of activity in which time seems to pass quickly and work feels effortless. Even in that state it is important to take short breaks away from the computer:at least five minutes every hour.  While it might feel like a disturbance to your workflow, taking breaks provides greater benefits over the long term. (And if you’re struggling with work, sometimes stepping away from it for a short time is the best thing you can do).

Enhance your workspace with plants

It seems a silly point, but having greenery around your workspace really can help your sense of wellbeing. Plants freshen the air, work as a pleasant distraction from the computer, and create a more inviting work environment. Hardy, low-maintenence, shade-tolerant plants suitable for offices include Peace Lilies (Spathiphyllum), spider plants (Chlorophytum comosum) and cacti.

Provide yourself with scheduled “disconnect time”

I sometimes joke that human beings are evolving into homo sapiens neticus: always on, always connected, constantly checking Facebook and Twitter feeds. That’s fine, but it also puts us into a condition of desiring constant feedback and affirmation-seeking behavior. Try to give yourself at least a little time away from network connection every day to recharge and gain perspective.

Keep regular hours of sleep

The hardest goal for me to achieve personally, but the most rewarding when it is achieved, is achieving regular sleeping hours. We tend to burn daylight and push back rest for work, but inevitably that leads to showing up exhausted the next day, affecting our performance and creating a cycle that is very hard to break out of. Most people really do need eight hours of quality z’s, and you are unlikely to be the exception. Try to get to bed at regular hours, and give yourself a little time between working at the computer and bed.

Maintain good, consistent lighting in your office

Orient your computer monitor to avoid glare on the screen from sunlight or desk lamps; adjust lighting in your area so that you can view your display without eyestrain, removing bulbs if necessary.  In northern climes, consider adding full-spectrum UV lighting during winter months to compensate for decreased sunlight exposure. UV bulbs will also naturally produce vitamin D in your body, which may be useful if you don’t get outdoors during daylight hours. They may also reduce symptoms of Seasonal Affective Disorder.

Try to use different focal lengths and sightlines in your work environment

Staring at a screen set at a constant fixed distance strains your eyes. If possible, arrange your workspace so that looking up forces your eyes to focus on a surface significantly further away, providing them with some relief. (Office partitions designed to reduce disturbance can make this difficult).

Make time for exercise

Just fifteen minutes of exercise a day can really help. At the very least, most forms of physical activity will strengthen your back muscles, which is important for maintaining a good posture in your chair and general spinal health.

If you find it difficult to schedule gym time, try to integrate exercise into your daily routine and activities: consider commuting to work on bicycle, make the determination to always use the stairs in your office rather than the elevator, or consistently use your lunch break to take a walk outside.

Keep your workspace organized, clean and tidy

Not only is a good for workflow, but removing clutter makes it easier to focus, clears your mind of distractions, makes it more difficult for germs and bacteria to accumulate, and avoids the “depressive slump” felt when confronted with a mess.

Avoid processed snacks and fast food

It is very, very tempting to grab the nearest calorie-rich snack and consume it is fast as possible while continuing to code. Try to avoid doing so; vary your meals and eat fresh food as much as possible. If you must snack, try eating dried fruits and nuts rather than sweets.

Schedule regular medical checkups

No-one likes going to the doctor: we tend to deny personal ailments and keep working. Few people like bringing their cars in for an oil change or service check either, but we know that to maintain our vehicle in good working order it must be regularly inspected by a licensed mechanic. Our bodies are the same way: get regular eye exams and general medical assessments.

Treat your body

Programmers tend to consider their bodies as fleshy buckets used solely to contain their brains. We forget that we are slaves to our flesh; keeping the epidermis and nerve endings happy is an important part of both physical and mental health. Use moisturizers and conditioners; maintain your grooming; as nerds tend to be somewhat touch-deprived, regularly seek out therapeutic massage and other personal esthetic services.

It should be fairly obvious by now, but don’t smoke, over overeat, or regularly drink alcohol to excess.

If you have your own tricks and tips to keep healthy, please share them in the comments below!

Last night saw the final television episode of my beloved House; this morning was the birthday of Sir Arthur Conan Doyle, the creator of Sherlock Holmes, a central model for the character of Gregory House. Between the two events, it seemed an appropriate time to review and wrap up the series (which will include some spoilers for the final episode).

House was originally envisaged as a “hospital CSI” series exploring medical drama, but over time the invasive CGI shots visualizing the inner biological lives of House’s patients diminished, even as the home invasion sequences (in which House and his minions broke into the patient’s homes to find the truth behind their medical mysteries) remained. Over eight seasons House became much more about the lives of its characters – driven, intelligent, often semi-dysfunctional misfits – than that of the patients.

Leaning on a cane in the middle of a swirling vortex of players, and often adding to the chaos, was Gregory House: hyperintelligent, irascible, impatient, misanthropic, disdainful of social convention and driven to excess. House was very much inspired by Sherlock Holmes (who was in turn inspired by a real-life doctor), and the original character was referenced throughout the series: not only in the homonymic reflection of the character’s names (House/Holmes, Wilson/Watson) but his drug use (Sherlock’s “7% solution” of cocaine, House’s Vicodin), a shared interest in music (Holmes’ playing of the violin, House on piano and guitar (making great use of Hugh Laurie’s underappreciated musical skills) even the number of the apartment they both live in (221B)).

Central to both characters was an interest in puzzles rather than people: House constantly manipulated those around him, not only to get what he wanted and to entertain himself but in order to maintain a constant sense of imbalance, a requisite amount of unpredictability that he believed helped to generate unusual diagnoses from his team, confronted with patients who had conditions that had stumped other doctors. This manipulation also served to keep people from interacting with House himself: whirling through House’s games (often to his wry amusement) prevented people from getting close to and diagnosing the man: House was never more discomforted or dismissive than when he was forced to sit down and talk about himself.

The writers of the show were extremely skilled in building up the inevitable and ultimately inescapable consequences of this behavior: the physical and mental toll of his addiction leading to arrests and incarceration in both prison and a sanatorium (creating some of the best episodes of the series); the self-destruction of his relationships through selfishness or benign neglect. At the same time, House did stand for some difficult things: an unflinching honesty, a constant search for the truth, a willingness for self-experimentation and an unrepentant atheism.

House’s most resistant patient was always himself, and the most hopeful line of the final program (“Everybody Dies”, a coda to the pilot, “Everybody Lies”) was his realization that he could become someone else: “I can change”. Trapped inside a burning building and apparently killed (as Holmes was at the Reichenbach Falls), House had an opportunity for rebirth: to simultaneously renew his commitment to his best friend and to play his greatest and final trick.

My major dissatisfaction with the final show was its rushed nature: using the standard trope of patient diagnosis meant that the plot sometimes felt pushed, jumping from scene to scene with little exposition. House’s internal mental debates with figures from his life gave the welcome opportunity for cameos from characters throughout the history of the series, with the notable absence of Lisa Cuddy (Lisa Edelstein), who’s departure at the end of season seven was the initiating event for the closure of the entire series. I was surprisingly okay with the decision to end: as House himself frequently insisted, it is better to let someone (or something) die on their own terms, while they hold on to a shred of self-respect, than to extend their life to the point that they are a husk of their former selves. I only wish that the producers had used the hour of the special that followed (Swan Song, a tribute to the many skilled hands behind the series) to extend the show.

House was not unique on television: medical dramas will always be with us. But it was an excellent ensemble cast built around a remarkably skilled actor. Informed by a team of talented and daring writers and some excellent directors, Laurie brought a characterization of obsession, addiction, and intellectual curiosity to the screen that asked some hard questions, and who will not soon be forgotten.

In a previous article I gave a brief explanation of lorem ipsum text, its historical use in typesetting, and 18 modern filler text generators. The number and diversity of loren ipsum generators continues to grow, necessitating an entirely new article.

• Ironically, the most useful of the new sites is probably Not Lorem Ipsum, which generates contextual body copy for over fifty industries and professions, including banks, florists and web design. The site is great for creating specific filter text for business website mockups.

• In terms of fun (and great design) the best site would be ZombieIpsum.

• Lorem ipsum for skaters has a REST API and a JQuery plugin. BaseballIpsum uses quotes from the game, while Comic Ipsum derives its content from graphic novels.

• If you want regional variations: local dialect texdt from Newfoundland, Spanish, Yorkshire, and Australia. make | TEXT generates paragraphs in English, Spanish, Afrikaans, Dutch and French from a variety of sources (the King James Bible, the Kama Sutra, and more).

• Still more literary sources: Fillerati uses a corpus of 19th and early 20th century writers: Edgar Rice Burroughs, Jules Verne, H.G. Wells, and more, with a great slider interface and options to generate marked-up HTML content.

• Filler text from more celebrities: Arnold Schwarzenegger, Chuck Norris.

• Finally, Journo ipsum, from the wonderful Neimen Journalism Lab, together with CorporateIpsum, generates appropriate business-speak boilerplate.

Many thanks to Jeff Atwood for supplying many of the links used in this post.