Matt Brundage

Archive for the 'technology' category

Friday, 17 December 2010

I’m hooked on speed

And, no, I’m not talking about alpha-methylphenethylamine or the dopamine receptors in my brain. Nay; I’m referring to improving the efficiency of two aspects of my daily life:

My recreational running speeds over various distances

In the early months of 2010, I began to notice that running at a given speed — say, 7 MPH was progressively taking less and less effort as my overall weight and health improved. So, naturally, I started to increase my average speed. 8 MPH became the new 7 MPH and it looks as if 9 MPH is becoming the new 8 MPH. In July, I started to keep track of my personal records for various distances and times. Records continue to fall, so I know that there’s still room for improvement.

Web page load times of websites for which I code

In September, a random blog post keyed me in to the goodness that is Page Speed, a Firefox extension, that, with the help of Firebug, analyzes a web page’s assets and server settings against a set of web performance best practices and assigns a numeric score between 1 and 100. Do you see where I’m going with this? I now have a somewhat-tangible way of expressing a web page’s speed and a method for calculating speed improvements over time!
Google Page Speed screenshot

Wednesday, 18 August 2010

Two new redesigns for your enjoyment

ECTutoringEducational Connections

Small Image In June, Annie got a referral from a book publisher in need of graphic design and layout for an upcoming title. As it turned out, the client also needed intensive web development, which presented a golden opportunity for Annie and me to work together for the first time. The book, Homework Made Simple (left), features her cover art, layout, and illustrations.

For the website, Annie provided page mockups, designed the logo, and gave much-needed creative input. I made a decision early on in the redesign process to ditch the site’s integration with WordPress — a decision I didn’t make rashly. WordPress definitely has its uses, but for Educational Connections, the drawbacks of WordPress outweighed the benefits.

The site is unique among my projects in that it boasts prominent stock photography of photogenic children and teens. I didn’t think I’d ever say this, but I believe I have a new-found appreciation for happy, bubbly stock photos.

Practical PocketsPractical Pockets

Practical Pockets caters to, admittedly, a very niche market. Post-surgical recovery accessories for women? Hey — the site can’t redesign itself. A caveat: page content is served by a CMS which the client edits from time to time, so any peculiar page-specific layout decisions were probably not made by me.

I think my greatest accomplishment for Practical Pockets is that, even though I developed in Firefox and Chrome, used beaucoup progressive enhancement, and tended to push “aggressive” CSS rules, my Internet Explorer fixes file consists of a single float declaration.

For both of these projects, I “flipped the switch” and opted for the HTML5 doctype. Many developers are of the impression that HTML5 is “the future.” The future is now! Coding from the beginning in HTML5 now means not having to go back and correct markup later, as Jens Meiert can attest.

Wednesday, 3 March 2010

User agent esoterica

IE6 visits For the past 30 days, IE6 visits composed less than 5% of all browser visits to mattbrundage.com, a new low. Because the 5% threshold has now been breached, I’ll take this opportunity to state that, finally, IE6 is no longer a supported browser. Wow, it felt really good to type that! I had been flirting with the idea of dropping support for some time. In fact, it was supposed to be a Christmas gift to myself. But it is finally official.

What are we left with? Managing the quirks of IE7 and IE8 is a walk in the park compared to the frequently illogical rendering behavior of IE6.

Perhaps not coincidentally, Google is phasing out support for the 8 ½-year old browser — with support at YouTube to end just a couple of days before IE9 is announced at MIX10.

List of fun things to do in a post-IE6 world

  • start using alpha transparent PNG
  • start using CSS2/3 selectors
  • start using inline-block instead of float
  • start using “px” and “pt” again in font-sizing (perhaps)
  • start using position:fixed
  • stop adding cellspacing="0" to tables
  • stop filling empty table cells with “ 
  • More fun things to do
Saturday, 30 January 2010

The first ten years

screenshot This month marks the tenth anniversary of my website. I registered mattbrundage.com in early 2003, but the site had existed for three years prior at the now-defunct geocities.com.

I’m stopping short of providing a gallery of screen shots of my site through the years, but this I can tell you: the site gets progressively less embarrassing as time goes by. But even in rare instances when the design wasn’t half-bad, the underlying code was — by current standards — atrocious. A few examples:

  • I didn’t specify a doctype declaration, with the reasoning that I was keeping the page weight low. For similar reasons, or perhaps out of sheer laziness, I didn’t always enclose attribute values in double quotes. Doh! Both of these heinous practices ended in 2004.
  • In lieu of server-side file includes, I was using JavaScript includes simply to output common navigation menus on the page. In some parts of the site, this practice persisted until 2007. 2007!
  • I didn’t start validating my code until the summer of 2004, around the time that I started using Firefox. And yes, my site was “broken” when I first viewed it in Firefox, then on version 0.8 or 0.9.
  • I was declaring font sizes in points rather than “em”s or percentages as late as 2005.
  • I would sometimes separate paragraphs with two <br> tags instead of wrapping them in <p> tags. This practice finally ended site-wide in 2007.
  • I didn’t even start indenting my code at any discernible frequency until late 2007 — it was a conscious decision to keep the page weight as low as possible.

I feel as if I have finally absolved myself of past web development sins. The only real bright spot in my early code seems to be my wholehearted embrace of CSS.

Thursday, 17 December 2009

Bringing children into the world

It seems that people are always asking my wife and me when we’re going to have kids. The fact was, I never had an appropriately snarky answer; I’d always say something bland and inoffensive like “oh, I don’t know, two or three years perhaps.” From now on, this is my answer: I don’t want to bring children into a world in which Internet Explorer 6 still holds a statistically significant share of the browser market. The End.

Thursday, 8 October 2009

Browser observations

We are entering a convergence of sorts, with the Big Three (IE7, IE8, Firefox 3.5) edging closer and closer together and with none garnering more than 25% of the total market share. It is entirely possible that Firefox 3.5 will be the most-used browser come November (or at least in a statistical tie). When combined, the Firefox 3.x releases have been the top browser since July.

On October 4, Internet Explorer 6 — for the first time — fell below the latest version of Safari. Expect another month or so before Safari 4 bests IE6 on the weekly average. I stand by my my earlier prognostications regarding IE6. However, here at work, support for IE6 will end “when it ends.”

I see only positive growth ahead for Google Chrome. It’s not a stretch to predict a 5% share by the end of the year. What I’m most enamored with is Chrome’s seamless update system: version 2 lasted for a mere 15 weeks before it was supplanted by version 3 last month. Version 2 now composes only 2% (!) of Chrome usage. By comparison, IE6, despite having been supplanted nearly three years ago by IE7 (and now IE8), still composes about 15% of IE usage.

Tuesday, 14 July 2009

Regex to the rescue

At work recently, I was tasked with splitting one massive directory into two equally massive directories. I soon realized that this seemingly simply task would require hundreds, nay, thousands of link changes across perhaps ten thousand pages. Going through each file one by one and manually editing links would have been unthinkable, so naturally, I turned to EditPad Pro. EditPad especially excels at mass file editing; it never ceases to amaze me how it can open hundreds of files at once, all while taking up minimal memory. Its regex features also came in handy, as we’re about to see.

With hundreds of files open at once, I found myself presented with a golden opportunity to fix years of bad code and legacy issues, all while doing that which was most essential to the project: the actual link changes. What started out as a simple string “find and replace” soon became a full-on diagnostic scan of all content pages. Here’s a rundown of some of the regular expressions that I used and honed during this process.

Problematic characters

(?<!href=.*|aspx?|cfml?|"|/|<)\?\w|\?\s(?-i:[a-z])|[^\x20-\x7E\s]| \s|\s |(?<!<cf.*)&(?:(?=\s)|(?!(?:\w{2,6}|#\d{2,5});))|%5F|%20

Problematic characters originally started when I discovered that many content pages were originally composed in Microsoft Word and still contained proprietary characters from Microsoft’s abominable Windows-1252 text encoding. Depending upon the browser or user setup, these characters would display as empty rectangles, seemingly random characters, or other such gibberish. This regex identifies several characters:

  1. A misplaced question mark, namely one immediately followed by a word character, yet not part of a URL string. This may indicate that a text editor had trouble converting Microsoft’s “Smart Quote” characters (or other such nonsense) to a UTF or ISO encoding. Failing, the text editor may have automatically replaced the unknown character with a simple question mark to warn the user.
  2. A question mark, followed by a whitespace character, followed by a lower-case letter. This may indicate that a letter that needs to be capitalized, or it may be a conversion problem (see #1)
  3. A character that is both 1.) outside of the printable ASCII character set, and 2.) not a whitespace character. A good rule of thumb is to encode non-printable ASCII characters with their HTML entities. For instance, the copyright character (©) would be written in the code as “&copy;“.
  4. A literal “space” followed by any whitespace character, or the reverse: any whitespace character followed by a literal “space” character. This expression captures a space adjacent to a tab. It also captures trailing space characters and two consecutive literal “space” characters. These characters are problematic only in the sense that they are unnecessary and slow down page loads (if even infinitesimally).
  5. An unencoded ampersand (outside of a ColdFusion tag).
  6. The literal text “%5F” or “%20”. Both are URL encodings and are unnecessary in some contexts.

Bad code

(?:<br ?/?>){2,}|<(?:center|font|u)\b[^>]*>|</?(?-i:[A-Z]+[^>]*>)|(?:&nbsp;){2,}|<(\w*)>\s*</\1>

Bad code was originally a part of the regex Problematic characters, but I forked it because the regex was getting too long. Features of Bad code:

  1. The <br> tag occurring two or more times in succession. Nine times out of ten, the developer is using <br>s to space paragraphs instead of the venerable <p> tag!
  2. The following tags: <center>, <font>, and <u>. All are deprecated elements in HTML 4 (and HTML 5, for that matter)
  3. Any tag written in uppercase.
  4. “&nbsp;” occurring two or more times in succession. Again, nine times out of ten, the developer is trying to hack the non-breaking space! (whether he/she knows it or not)
  5. An empty element. For instance, I’ve seen <strong></strong> — most likely residue from a WYSIWYG editor.

Old variables

Old variables is little more than a piped list of legacy variables that either need updating or removing. Using the list is still much faster than searching for each variable individually.

Remove line breaks in text

Regex: ([^>\s])\s*\r+\s*([^<\s.])

Replacement text: $1 $2

This one removes line breaks where they don’t need to be, such is in passages of text. I say, “Let the text wrap on its own!” This may or may not reduce the file size, but nonetheless, it improves readability.

Caveats

The aforementioned regexes were developed using EditPad Pro, which uses a custom regex flavor — a flavor, I might add, that purports to combine the “best features” of the more prominent regex flavors available: Perl, PCRE, .NET, JavaScript, etc. These code samples may not work as intended in your favorite text editor or programming language.

I’m constantly improving and tightening these expressions. In fact, I made some key improvements to the first two examples as I was writing this post. What is acceptable to me this week I may find to be less than optimal next week. Just a month and a half ago, I posted a regex here; I look back on it and observe how naive and sloppy I was!

Thursday, 28 May 2009

Brain Dump, post-Memorial Day Edition

www.toothpastefordinner.com I wonder what effect — if any — Billy Graham’s Crusades and ministry had on the Catholic Church’s Second Vatican Council. Ecumenicism is a major part of Vatican II and was one of Graham’s hallmarks.

Mixing equal parts Mike’s Hard Lemonade™ and regular lemonade should yield Mike’s Somewhat Firm Yet Pliable Lemonade™. Likewise, equal parts Mike’s Hard™ and, say, grain alcohol, should yield Mike’s Extremely Difficult™.

Simon and Garfunkel’s “Cloudy” may not be Paul Simon’s best song, but the arrangement is top-notch. If there is ever a Baroque-pop revival, “Cloudy” should serve as the blueprint.

Jens Meiert is delving deeper into the increasing pedantry that is long-term HTML/CSS maintenance.

Politician A from Political Party X just did [something]! If instead, Politician B from Political Party Y had just done [something], then media and public reaction would be totally different. Double standard! (wash, rinse, and repeat)

(\s\?[^>]|[^< ]\?\w|\?\s(?-i:[a-z])|“|”|’|?|?|?|—| \s|\s |(?-i:the) FAA(?!\s(?-i:[A-Z<]))|(?<!<cf.*)&(\s|(?!(\w{2,5}|#\d{2,5});)))

I’ve decided that I thoroughly enjoy swimming at the beach. Not just wading up to my knees like a little girl but actually swimming.

Saturday, 18 April 2009

Exacerbating the demise

Asa weighs in again on the future of IE6 usage:

In just a few months, we’re going to see IE users split across three versions, likely with IE8 and IE7 each holding about 25% and IE6 holding about 15%. Firefox will have pretty much all of its 24% on Firefox 3.0, and Safari will be trailing back around 10%.

If things go as they have in the past, by the end of this year, we’re likely to see IE8 and Firefox 3.5 leading the Web with 30% and 27% respectively, IE7 and IE6 next with about 10-15 points each, and Safari+Chrome+Opera rounding out the back with a combined 10-15%.

Hmm. I’m actually expecting IE6 to be borderline edge-case by Christmas and near-death by June of next year. In addition to the effect of Windows Update, there are many corporations (and government agencies) that are waiting to leapfrog over Vista when Windows 7 drops. This will exacerbate the demise of IE6, but won’t effect IE7 to the same degree. So, I see a greater end-of-year disparity between IE6 and IE7.