gabriel mcgovern


Archive for the ‘work’ Category

Top 10 Worst Types of Blog Post (and one big example)

Monday, September 15th, 2008

Anyone who writes will eventually be guilty of writing something bad. Most do so only incidentally, as a result of error or ignorance. It’s a sin of professional writers, however, to be systematically bad.

Following are some of the worst things that I’ve ever done … and worse!

badpost10.gif10: The blockquote sandwich

Lede, blockquote, analysis, quip.

The form is simple, and done well, it makes for a perfect post. As a formula, however, it’s poison.

First, introduce what you’re going to quote. Then quote it. Then say what you think of it. Got nothing to add? Drop the analysis altogether, or replace the quip with a question for your readers.

It’s a vital part of the cross-referenced idea feast that blogging kindles. With insight and wit, it’s a powerful and laconic form of filtering others’ work. But it’s all too easy to do nothing but this as an alternative to research, reportage and in-depth review. It generates superficially meaty content quickly and with little effort–no wonder it typifies the output of those markets that still pay by the post and throw demanding daily quotas at writers.

Improve such posts by making every part count. If you’re “just linking,” let the original speak for itself without adding half-hearted commentary. Try reducing it to a single sentence and hyperlink an active verb to the source: this echoes how people blogged before blogging was a business.

Related offense: Posts that try an humanize dry subjects by prefacing the real lede with a short anecdote. Blog posts—at least mine—are best when they’re about one thing.

badpost9.gif9: The Reblog

This is rewriting something that someone else wrote, in your own words. This is the blockquote sandwich’s insecure sibling, who feels it has to work even harder to prove itself — but not so much that the author must engage in original reporting or insightful analysis.

There is an extended form of this, wherein a writer glowingly approves of another’s more substantive opinion piece by quoting all the best parts, interspersing them with an occasional interjection that amounts to “me too!”

Fix these by reducing it to the concise form, that lesser evil, number 10.

badpost8.gif8: The Image Macro

Unless it’s your specialist subject or you’re a razor-sharp practitioner of visual catachresis, forget about lolcats and all the other cut-’n'-pastage. You’ll just make yours seem a commonplace mind.

When the urge rises to post such a thing, ask yourself these questions: why is this funny, here and now? What am I saying by posting it? What am I feeding?

Then do something entirely original that does all of the above, but which others will remember you for.

badpost7.gif7: The Fisk

Fisking is when you disagree with someone by reprinting their piece one sentence at a time, adding your response to each as if you were a computer processing it one syntax error at a time.

Just cut it out. This is the disease of the internet sub-autist who cannot let even a single error go unpunished, because they’re mentally incapable of engaging the totality of their adversary’s argument or the abstractions that embody it. It’s one thing to treat written English like a compiler, but taking that attitude to your own response just makes you look too scatterbrained to compose a reasoned and self-contained critique.

Yes, yes, I’ve done this about eighty times.

badpost6.gif6: The Snark

Snark is blogging’s rottenest bough. Few are gifted enough to pull it off as a general mode of creativity. Most can’t even crank out a single example without losing it to non sequiturs and awful similes.

The solution is not to try and build jokes when you’re in a sneering mood. Don’t set out to be a funny man. If humor doesn’t arise effortlessly from the subject as you write about it, you’ll gain nothing from forcing it.

Mean-spiritedness, contempt and ridicule make it seem easier to get a laugh, but it’s just not true. Instead, look for the unexpected to converge amid the mundane, then report it with a light heart in as few words as possible.

Pro-tip: when ranting on the internet, guard against letting it dissolve into snarking. This kills credibility if you’re sincere, and betrays your artifice if you aren’t. If you read masters of the form, you’ll note that what looks like simple sarcasm is often irony that hooks deep into assumptions that the author knew you would bring to the reading.

badpost5.gif5. Look at Me!

Keep the trolling to forum threads. If you need attention, there are countless ways to do it without being a dick. At the very least, think carefully before publishing something deliberately contrary, unpopular or offensive. What exactly is your plan should it work? Are you ready to be identified, perhaps forever, with the response it garners?

Fixing this by being both respectful and ruthless. Respectful, by challenging your opinions with research and by not treating your own readership as a target for venom. And ruthless, by learning to distance yourself gracefully from your own handiwork should all hell break loose.

badpost4.gif4. The Third-Party PR Shot

This isn’t the evil stuff, like astroturf or paid viral marketing. It’s the mundane burden of every enthusiast market, be it gadgets, games or obituaries.

In its benign form, such blogging amounts to a condensed press release, given proper context with some fresh analysis. But like blockquote sandwiches, one should either keep it short and sharp, or as a lead-in for something more involved. Something that maybe involves making a phone call.

How to fix: if you have nothing to add after condensing the specs to a graf or two, you had nothing to say about it to begin with and should not bother at all. Don’t write stuff you don’t care about.

The “colossal blockquote,” bracketed with some perfunctory comment like “if they pull this off, they might…,” is a particularly numbing form.

Sometimes avoidable compromises arise from ignorance of journalistic standards, or, in their most malign form, by those who consciously reject them on misguided principle.

A common example is when someone recomposes a press release as news so as to put someone else’s marketing under an editorial byline. This is bullshit and should not be done at all.

A relatively minor but related wrong is using marketing buzzwords, especially in headlines. This is hard to avoid, as it’s natural to want to mix up language: it’s the blogging equivalent of closing dialog with terms like “he muttered” or “she prognosticated” instead of simply “he said.”

As as result, we often echo phrases like “unveils”, “unleashes,” “declares war on”, “officially announces,” and so on. Ciphers that add geek chic (”decloaks”) tire fast: use them only when context makes them apt. Exactly how often do you cover the latest Klingon battleship?

badpost3.gif3: Fake News

Too many people think that fake news is easy to toss off. Most of it is dreadful. There are three necessary skills for writing in the style of The Onion. The first two can be explained, but the last is, in truth, innate. You either have it or you don’t. I don’t!

First, gain an intimate familiarity with AP style (or a similarly universal analog, such as BBC English or the libel-skirting lexicon of Florida tabloids).

Second, understand the inverted pyramid structure used by reporters. Even if you get the tone and language right, it won’t work if it’s applied to a formless journey around the subject. Start with the most important thing in the story, then proceed to detail and exposition. Absorbing this approach will improve your normal blogging, too!

Thirdly, you have to be a seriously funny motherfucker. The strict format makes it harder, not easier, to maintain the laughs. This is because the inherent humor of fake news wears off after the headline and lede, so the rest has to be particularly imaginative and cutting, as it must all lie within the self-imposed limitations of the newswriting format.

badpost2.gif2. The Spec Bump

Sure, it’s covered in passing by at least two of the other entries here, but it’s so common and so foul that it deserves its own place in the shade. Almost all of us in this game do it every day, but it’s bad, folks. It’s really bad.

Technology is a product of mankind’s ingenuity. It raises bridges and flattens cities. It mows the lawn and collides hadrons. It’s fed, clothed and sheltered us for thousands of years, and now it will have to stop climate change and generate new energy sources, or we’re screwed.

So don’t waste energy writing about anything so boring that nothing beyond a few numbers are worthy of inclusion. What does it do?

badpost1.gif1: The Top List

Yes, even this one!

The purpose is to aim a harpoon at our psychological inclination toward the ordered and curated, at our favor for quality rendered as quantity. Lucky 7, perfect 10, top 100; it’s a world-simplifying numerology to which we are addicted. It adds a hook to any old rope.

These aren’t going to go away: They’re just too much fun to write, and when they’re good, too much fun to read.

Pure, unadulterated evil, however, is found the meta list. Lists of lists. Websites facing one another like mirrors, a cloned tulip in every graf. Such things speak for oversaturation, for spent fuel endlessly reprocessed.

That said, would someone please do a top 10 list of top “10 iPhone flaws” lists? It is time.

++!

Pushing Silverlight

Monday, August 11th, 2008

Silverlight is Microsoft’s competitor to adobe flash. On many computers you will need to download the plugin in order to watch the olympics online. What strange, is that the plugin is an artificial requirement for mac and non ie browsers. On a PC with IE7, you get a “proceed without plugin” option.

Here is a screenshot of IE7 (top) vs. Firefox 3 on the same system:

The joy of compression

Tuesday, August 5th, 2008

I gave a little talk at our monthly “All Developers Meeting” today. The topic was web optimization. Recently we setup http compression on our servers and I decided to take a look at how much bandwidth we save via all of our optimization/compression techniques. Using our academic programs page as a sample, I ran the numbers and found that we are saving from 1-6.5 terabytes annually. Here are my notes for the presentation:

No Optimization - Huge/bad/gross

No css or styles inline. Tables for layout. Scripts directly on page. Won’t even  bother showing an example.

Step 1. Separate code - 283 KB

Style is separated from content (separate .css). Behavior is separated from content (separate .js). Images are used wisely ( for instance 1px background image that repeats horizontally)

Step 2. Compress images, then compress again - 239 KB [44K less]

Choose the correct file type for each image (JPG for photos, PNG > GIF). Compress each image (using photoshop). PNG images can be compressed again (pngslim removes meta and shuffles bits - like defrag)

Step 3. Minify styles and scripts - 158 KB [81K less]

View compressed script library, or layout css. For Javascript we use JSMin (removes comments white space. Need well-formed code.) There are other algorithms like packer, but they requires non-trivial client-side processing time to uncompress the code. For CSS we use CSStidy ( removes white space., compresses colors, combines styles)

Step 4. Enable HTTP compression - 70 KB [88K less]

Note that this is our live version! Text is compressed by server and uncompressed by browser. Unsupported browsers will receive uncompressed version (wiki). Browser support: Internet Explorer (>= 4.0) FireFox (all) Netscape (>= 4.06) Opera (>=5.12) Images are not compressed further (doesn’t result in smaller size).
Minified files compress better then original.

Total Optimization

283 KB original
70 KB compressed
—————————
213 KB saved [That over a 2/3 savings]

And it adds up quickly!

Over the past year (Aug 4, 2007 - Aug 4. 2008) the site received:

  • 32,550,230 Pageviews from
  • 2,213,198 Absolute Unique Visitors

If 13KB was saved per pageview, then:

213 kilobytes * 32,550,230 pageviews = 6.5 terabytes of bandwidth saved

Or, with best-possible caching:

First page: 213 kilobytes * 2,213,198pages = 449.6 gigabytes
Subsequent pages: (32,550,230-2,213,198) pages * 20KB (html+images) = 578.6 gigabytes

So…

Between 1 and 6.5TB saved annually (not to mention the amount of time saved for our end-users)

A List Apart - the survey

Tuesday, July 29th, 2008

A List Apart is currently conducting their yearly survey:

The Survey, 2008

Calling all designers, developers, information architects, project managers, writers, editors, marketers, and everyone else who makes websites. It is time once again to pool our information so as to begin sketching a true picture of the way our profession is practiced worldwide.

All web professionals should take a few minutes to help them get a bigger dataset.

RSS autodiscovery on every page (of a static site)

Thursday, July 10th, 2008

So you have some feeds and want browsers to be able to find them using autodiscovery.

The problem

Unfortunatly, you have static pages and would have to update each one to add the <link> tag. At PCC, we have a site composed of tens-of-thousands of pages. Some are static, some are dynamic applications we can alter, some are closed vendor products.

The solution

Like I said - we have many different types of pages. However, they all use the same JavaScript library!

JS is really good at inserting content into the page. We use the jQuery library, so adding a feed is as easy as:


/* add feed autofind! */
$("head").append('<link rel="alternate" type="application/rss+xml" title="News Releases | Portland Community College" href="http://www.pcc.edu/about/feeds/news/" />');

We can now add/remove feeds at a later date without opening every page on the site. If desired, the script could check the URL and only display the feed on appropriate pages, but for now lets put them everywhere.

Final Thoughts

I looked around the web, but didn’t see much discussion on this meathod. It seems to work in all modern browsers, but let me know if you find any problems.

Safely using FeedBurner

Wednesday, July 9th, 2008

So you have some feeds and you want to track subscriptions using FeedBurner.

The problem?

FeedBurner is a great service and probably will stay that way since it was recently acuired by google. However, it is still a 3rd-party service and that’s somthing you should always be worried about.

You see, when someone subscribes to a burned feed, they will be pointing the agregator to: <feeds.feedburner.com/your-feed>. This means that you will loose all of your subscribers if any of the following happens:

  • FeedBurner goes down, closes shop, or starts charging an outrageous fee. (unlikely)
  • The person who set up the account forgets the password, or becomes a disgruntled employee. (possible)
  • A better service comes along and you decide to switch. (very likley)

The solution

The simple solution is to have users subscribe to a feed on your domain.

  1. Create a folder structure for the feeds - like: /feeds/news/ and /feeds/videos.
  2. In each folder create an index page using you favorite server-side language - index.php, index.cfm, etc. This gives us added flexibility. We can even change the language at a later date!
  3. Use this page to mirror the FeedBurner feed. below is an example in ColdFusion. In PHP you will want to look into cURL:

<!----------------------------------------------------------------------------------------------------
-  This is a placeholder for a feed.
-  Make sure to link to the folder and not this .cfm page for even more flexibility.
-  Created:   2008-04-09 Gabriel McGovern
-  Modified:
----------------------------------------------------------------------------------------------------->

<cfhttp url="http://feeds.feedburner.com/pcc-videos/">
<cfoutput>#cfhttp.filecontent#</cfoutput>

Examples

Check out the feeds we offer for Portland Community College. Each is being run through FeedBurner, but you subscribe to a URL in our domain. If we decide to change services - all we have to do is update the index page. You as a subscriber would never even have to know.

Extracting DVD Subtitles

Wednesday, July 2nd, 2008

Problem

  • Our foundation has a great little video produced by an outside complany and they want us to put it online, but…
  • We require that all online video includes captioning for accessibility (dfxp format) and…
  • They only have a DVD of the video with captions (not original text).

Solution

Well we could re-transcribe the video, but that seems like a lot of redundant work since someone already took the time to make the captions for the DVD. The only problem is that DVD captions are stored as bitmap images rather then acctual timed- text.

Step 1: OCR the DVD subtitles

OCR stands for “Optical Character Recognition”. Your scanner may have this for decoding paper documents. Because the subs are actually images - OCR is needed here too. There is a cool little application called SubRip that does exactly what we need.

You point to the correct DVD file and it will attempt to transform the subtitle images into text. Since subtitles can come in all different fonts, languages and colors - the process is not completly automatic. From time to time it will ask you to identify certian charater(s). Think L vs. I and m vs. rn.

Step 2: Convert the subs to dfxp

SubRip does a pretty good job, but you will still need to clean up the output and transform it into the correct format.

SubRip outputs an .srt file where the captions look like:
1
00:00:06,373 --> 00:00:08,933
Whether we realize it or not, we need
each other.

We need them to be in dfxp format like:
<p begin="00:00:06.37" end="00:00:08.93">Whether we realize it or not, we need each other.</p>

This is a job for regular expressions!

  • Replace the entry number (1,2,3) with a marker: /n/d+/n becomes ~
  • Then grab the srt timecode and text info:
    ~(\d\d:\d\d:\d\d),(\d\d)\d --> (\d\d:\d\d:\d\d),(\d\d)\d
    ([^~]+)
  • This becomes:
    <p begin="$1.$2" end="$3.$4"><span tts:fontStyle="italic" >Speaker</span><br/>$5</p>

Step 3: Check your work

Now, you just need to make sure that it all worked as expected.

For this example, I found that the captions were actually off about 4 seconds. This could have been due to editing differences between this DVD and my final FLV.

I also found some minor mistakes that the OCR had created.

Luckily, both of these wer easy to fix manually.

Firefox 3 is available…

Tuesday, June 17th, 2008

Or, it would be - if 2 million people weren’t trying to download it all at once.

For weeks the good people at mozilla have been pushing today as “World Download Day”. They even had a site where they asked people to pledge to download, all in the hopes of setting a world record. Early today, they announced that the official starting time would be 10am (PST).

Unfortunatly

It looks like everyone wants to be first. This has resulted in a self inflicted DOS attack. All their relivant sites ark borked including: www.firefox.com, www.spreadfirefox.com and www.mozilla.com/firefox.

You think with all the planning, that they might have expected this.

WebVisions: Overcoming Chaos - Designing the Future Web

Friday, May 23rd, 2008

Jeffery Veen

Second (and final keynote)

…but first some props to the board

The Past

First spoke at WebVisions 5 years ago in 2003.

Worked at HotWIre 16 years ago. Then onto adaptive path for measure map. Bought by google where he worked on the great analytics.

3 weeks ago he split from Google….

Now back to 1974

(before I was born)

  • OPAC crisis where gas spiked to 81cents
  • Nixon left office
  • You could see Elvis OR kiss
  • Ma bell split (almost all back together)
  • First published reference to Internet (packet switch)

He was first introduced to Pong. Had the revelation that you could interact with the TV instead of just consume. Never looked back.

Historical background of data visualization

From 1851 cholera outbreak, to Neapolitans march, to challenger shuttle data.

Need to make stories as clear as possible.

Data

  • Simplicity of data on google analytics - from that scene in Indiana Jones where the plane flies over the ocean, leaving a single red line.
  • Statistics can feel abstract - chrisjordan.com

Interaction

  • Apply tools so that users can draw their own conclusions.
  • Stamen Design is a good example of interactive data visualization.
  • Allow people to follow their own trails.

Participants

  • Need to know your audience. Can be scary.
  • Variety of needs,
  • Of scale,
  • Of locations.
  • Identify needs - then design a product to solve problem.
  • A lot of time talking to a lot of people. (then pull out themes)
  • Stack themes on features. Are the needs met? Gaps? Too much?

Nice Typography:

Gotham

WebVisions: Convergence 2.0

Friday, May 23rd, 2008

Tjeed Hoek

I actually ended up in this session by chance. My original choose “Designing Social Media Interfaces” was scheduled for this room, but was canceled.

But, no regrets. Tjeed seems like an interesting speaker (just look at that dreamy photo :)

FrogDesign

Tjeed works at frog design. Started as a typical physical design company - now doing more and more digital interfaces.

Finds design can make products simpiler AND more complicated.

Convergence

Uses iPhone as a prime example. Not only is the phone more then just a phone - the coolness relies on an entire ecosystem of other things (iTunes, network, ipod, google map). And the design of each of the other items in this ecosystem is essential to the success of the core product.

Also notes the convergence of real-world and digital products.

Research-driven design process

Who are we designing for? What are trends in the world? What do users do before and after visiting your site?

  • Foundational - Ethnographic.
  • Generative - Card sort and concept structure.
  • Evaluative - Concept testing and user testing.

Still need to try your designs out with real people. Often overlooked step. And this does not just mean testing with your coworkers and mom.

  • Do lots and lots of iterations
  • …but dont loose site of main features and values.
  • Feature creep is easy with these converging products.
  • Just adding features is not enough - each feature need to to work well.
  • Being consistency is not enough -need unique, right experience.
  • Attention to detail on usage flow is critical. look at all steps, nit just beginning and end.
  • Beauty in initial appearance remains important.
  • But, beauty and elegance in motion, in the dynamics of using, is becoming more important. (don’t go overboard)
  • Need both nerds and rock stars. Need to bridge the gaps between (shows cool chart)
  • Concurrent process with synchronized workflow is optimal (another cool chart)