Omnibus

Stop Nagging Your IE Users. They Get It Already

This week, that grand old bane of a Web developer’s existence—IE6—turned 12 years old. Like any tween, it has been subjected to bullying over the years. A year an a half ago, Microsoft finally took the step toward beating it to death by forcing updates to IE8. And they were widely successful. I go months both here on my little slice of the ‘net and on larger sites maintained by my employer without seeing IE6 pop up in the logs.

So, we’ve turned our attention to bullying its younger sibling, IE7, which turns 7 in October.  Again, those users should have been upgraded to IE9 as part of the Microsoft push, but a few computers still linger. We continue to bully. Some of us even go after four-year-old IE8 when it tantrums over our attempts to use CSS3 and HTML5 (or are we throwing those tantrums?).

Our favorite tactic seems to be telling users to update their browser with imposing messages (standard in templates like HTML5 Boilerplate directing them to browsehappy.com). Some people go farther to redirect to a special page entirely (*cough Jeff Starr*).

Why do we do this? Sure, it’s great to not have to do ugly things to our code to make those browsers display beautiful designs, particularly when our clients won’t listen to why websites don’t need to look the same in every browser.

It’s awesome to have fewer configurations to support for web applications.

We get to show off and go on a power trip, yelling “mwahaha, I refuse to bow to your ancient browser demands, I am all powerful, and I decide what you should use.”

But, what we don’t consider in these decisions is the user.

After more than half a decade, and after Microsoft has tried forcing upgrades, we have to ask why these users are still accessing our sites with browsers that should be a distant memory.

The reason is likely that they have to. For one reason or another (options too myriad to list here) they HAVE to use those browsers. It’s highly unlikely that a user on IE6 or IE7 doesn’t realize that they are using an outdated browser at this point in 2013.

So, why are we bullying our visitors? Why are we telling them that every time they visit our site that we think they don’t deserve to read our content because they have an old browser?

Other than attempting to alienate visitors, I can’t come up with an answer to that.

I’m not saying that we need to care if the design is broken (we don’t). I’m not even sure we need to care if interaction is half-broken. But we should care that our visitors have been reminded about using an old browser countless times yet they continue to do so, and that ultimately they just want to access our content.

So, why not let them access the information we’re providing without reminding them that they are second-class internet citizens? Really, what do you have to lose?

N.B. Yes, I know, pot, kettle, black. I have one of those notices on this very site. I’ve been running this design for over four years now, and a lot has changed in the landscape since then (I think those notices may have been valuable before Microsoft’s auto update move), but my lack of time to set up a redesign has not. Moving forward, though, I’ll be practicing what I post.

Google Mini KeyMatch and Related Query Imports

The Web is ever changing, and this article is relatively ancient having been published 4 years ago. It is likely out of date or even blatantly incorrect in relation to modern better practices, so proceed at your own risk.

Filed under “you mean the documentation doesn’t exist somewhere?”, was my issue trying to import KeyMatches and Related Queries to a Google Mini we have set up for a client. Google’s documentation on them is very straight forward: select the file, press import— but it lacked instructions about how to set up the import file. Since I took the time to sort it all out, here’s a quick rundown.

Import File Specifics

Your import file should be .csv format. With UTF-8 encoding. And, most importantly (especially for those of us using OSX), UNIX line endings.

Your favorite text editor may be able to change those settings if they are not the default when you save a file. I used Coda to do so.

Related Queries

Your related queries import should have two fields (don’t give your columns headings, though):
[search term],[suggested/related query]

Set up your file per the above import file specifics, and import.

KeyMatches

Your KeyMatch import will have four fields:
[search term],[KeywordMatch|PhraseMatch|ExactMatch],[URI],[Result Title]

Word of warning: there is a maximum of five keymatch results per URI, but default settings will only show three.

Simple, yet previously undocumented (as far as my Google-fu skills could determine). Hope it helps.

Exploring Language Trends for Good Writing

I’m probably behind the times, per usual, but I just watched the “What we learned from 5 million books” TED talk: a talk by researchers who used Google Book’s repository to run statistical queries on language usage. They explore how the language shows censorship and propaganda efforts, how our memory is shrinking, and the switch in usage from “throve” to “thrived” among other topics.

It’s really quite interesting, both from a subject-matter standpoint and the witty presentation. Here, watch it for yourself:

Generally, I’d just share this on social media and be done talking about it, but I was in the midst of authoring a short bit of character building for a costume project (my creative process is a bit strange, yes). That writing may never see the light of day, but it did make me wonder about whether some of my phrasing fit the character—an educated British individual circa 1885 (albeit in an alternate reality).

Take the phrase “needs must,” which sounds deliciously antiquated to our ears. Graphed it in Google Ngrams, that makes sense—though never immensely popular, it has seen a pretty steady decline in usage from the late 19th century through the present. My character might use it, however.

The vignette focuses on my character meeting a journalist, but would she have called the journalist a “journalist”? Possibly, but it is more likely that she’d use the term “correspondent”.

And when they meet? Well, one of them might say “pleased to make your acquaintance,” or perhaps “pleased to meet you,” but “nice to meet you” would be very unlikely according to the Ngram viewer.

When writing period pieces, it’s worth the effort to your readers and craft to cull blatantly anachronistic phrases from your writing. Not to mention, if you’re stuck on something, you can play around with alternatives to see what might be a more timely fit.

After all, we wouldn’t want our writing to fit the message of this XKCD comic:

XKCD Period Speech

Do you grok me? Go explore Google Ngrams on your own. You never know what you might find.

Creating Quarter-Circles in Adobe Illustrator

Here’s a quick way to draw a quarter-circle in Adobe Illustrator. It involves using just one tool: the arc tool.

These instructions will work in Adobe Illustrator from CS–CS5.

How to create a quarter-circle (or quarter-ellipse) in Illustrator

  1. Select the arc tool. (Click and hold the straight-line–segment tool to bring up the sub-menu of additional line-segment tools)
  2. Use the arc tool to make your quarter-circle:
    A. Freehand method
    Before drawing a freehand quarter-circle for the first time, you must use the exact-size method to enable closed-shape drawing. If you do not, you will only get the curved line, not the whole the shape.
    Quarter-circle: Hold down the shift key on your keyboard, click and drag to draw a quarter-circle of the desired size.
    Quarter-elipse: Click and drag to draw a quarter-elipse of the desired size.
    B. Exact-size method
    Click once anywhere on your artboard to open the arc tool options dialogue.

    Type in your desired dimensions for the radius of your quarter-circle, and select Closed from the Type drop-down. If your y-axis and x-values are equal, you will be drawing a quarter-circle, but if they differ, you will draw a quarter-ellipse.

    Click ok.

  3. Success. You now have a quarter circle. You can change the fill, size, stroke, etc as with any other shape.

How to Schedule Planned Maintenance Using RewriteEngine

… or how I set my sites up to go black tomorrow in protest of SOPA and PIPA. You might not see this prior to that blackout, but it has useful applications for other things—essentially any time you want to do a redirect that has a specific schedule.

If you are running your sites on an Apache server with the rewrite module, scheduling a temporary redirect to a maintenance page is pretty simple:

# MAINTENANCE REDIRECT 
RewriteEngine on
RewriteCond %{TIME} >20120118000001 [NC]
RewriteCond %{TIME} <20120118235959 [NC]
RewriteCond %{REQUEST_URI} !/maintenance.html$ [NC]
RewriteRule ^(.*)$ /maintenance.html [R=307,L]

To explain the code:

Line 2: RewriteEngine on
Turns on the RewriteEngine, if it isn’t already.
Line 3: RewriteCond %{TIME} >20120118000001 [NC]
Checks to see if the date is greater than a specific time. In this case 2012-01-18 00:00:01.
Line 4: RewriteCond %{TIME} <20120118235959 [NC]
Checks to see if the date is less than a specific time. In this case 2012-01-18 23:59:59.
Line 5: RewriteCond %{REQUEST_URI} !/maintenance.html$ [NC]
Checks to be sure that you’re not trying to access the maintenance page itself, otherwise we’d end up in a redirect loop.
Line 6: RewriteRule ^(.*)$ /maintenance.html [R=307,L]
If all of the above conditions are true, it does a temporary (307) redirect to your maintenance page.

Here’s the code again, with the variables you need to modify italicized.

# MAINTENANCE REDIRECT 
RewriteEngine on
RewriteCond %{TIME} >20120118000001 [NC]
RewriteCond %{TIME} <20120118235959 [NC]
RewriteCond %{REQUEST_URI} !/maintenance.html$ [NC]
RewriteRule ^(.*)$ /maintenance.html [R=307,L]

Drop it in your .htaccess file, and you should be good to go.

What time value should I use?

We’re talking server time, so your time will be based on what your server setting is. Mine is set to EST, although it gets funky about Daylight Savings Time sometimes, so it might be off by an hour. If you know your server is running 3 hours slower than your timezone, adjust your times by 3 hours.

Then, figure out your date and time in the format YYYY-MM-DD HH:MM:SS and remove anything that isn’t a number: YYYYMMDDHHMMSS.

Why are you doing a redirect instead of rewrite?

I like to make it very clear to search engines that we’re on a new page and it is only temporary, so no caching should happen. If a search engine hits my homepage and I’ve rewritten the URI, the search engine thinks that my maintenance content should be indexed, which I definitely do not want to happen. Instead, it knows that there was a redirect.

You want the redirect to be temporary (307) so that the search engines know to continue to request the original URI in the future, and not the maintenance page.

What is this SOPA and PIPA stuff?

The American legislative bodies are both currently considering bills that will allow easy censorship on the Web in the name of protecting copyright and intellectual property. A good analogy is that the bills are kind of like trying to kill a squirrel with an atomic bomb. As someone who is both a Web developer and creative professional, I strongly believe that this bill will hinder creative and economic progress as well as the dissemination of information.

If you’re reading this on Jan 17, or any day after Jan 18, you can learn more on Wikipedia, but it will be blacked out on Jan 18. Of course, your favorite search engine will surely return plenty of hits as well.

When to Use Events vs. Pageviews for Google Analytics

How to set up a schema for tracking certain things on a website is a polarizing topic. I’ve seen numerous schema that rely solely on pageviews to track everything—outbound link clicks, downloads, modal dialogs, etc—and the creator is dogmatic about the approach. But, semantically speaking, one of those three actions is a legitimate pageview; two aren’t. They’re events. I’m admittedly zealous when it comes to semantic use of Web technologies, but let’s face it: it makes for intelligent information architecture.

A good philosophy for tracking is: if new information is shown in the browser, at an address owned by you, it is a pageview. Everything else is an event.

Tracking link clicks

The short answer: tracking a link is tracking an event.

For instance, clicking on an outbound link does not result in a pageview for your website. Viewers are not looking at content on your site. Thus, an outbound link click is an event.

Clicking on a related link—such as to another similar blog post—is not a pageview, it is an event. The pageview itself will be tracked when the new page loads, but if you want to track the actual link click, you should register an event. Otherwise, you’ll be double tracking pageviews or tracking pageviews for a single page under multiple paths. Neither is ideal or desirable in an intelligent tracking schema.

Clicking a link that triggers a popup is covered in:

Tracking pop-up, modal, or ajax-inserted content

Are you tracking this based on link clicks? Why?

When tracking a popup, you should add tracking code to the popup file. The new window is a pageview. There’s no reason to track the link click as the pageview when you can add basic code to the popup and let Google handle it all.

For modal or ajax-inserted content, proper tracking means triggering a pageview when the content is shown. This is different from when the triggering link is clicked. Most plugins that allow modal dialogs or on-screen popups have an API that features some sort of onShow or afterRendering hook. This is the best place to put your pageview tracking. And yes, this is a pageview, because it is showing new content.

There are some cases where the link should be tracked, and those should be tracked as events. For instance, if you have a modal or popup contact form, you’ll want to track a pageview when the form is displayed, and an event to track which page the form is on or which link is used to display the form. Two different types of tracking that happen at two different (but very close together) points in the interaction.

The tricky case of PDF documents

PDF documents are one case where I entertain either option, but that is because there are two possible ways that PDFs extend the website: as downloadable content or as browser-viewable content. Older browsers and the default installation of Firefox treat PDFs as downloads. They are not displayed in-browser. Thus, under my definition of a pageview, clicking on a PDF link is an event. Think of it this way: we know that the user clicked the link, but we can’t be sure that the user actually downloaded or opened the document, so there’s no empirical evidence that there was a pageview.

However, modern browsers like Safari and Chrome, and certain mobile platforms will open PDF files seamlessly. In that case, for most intents and purposes, clicking a link results in a definite pageview.

Example cases:

Server forces PDF download, will not serve in browser
Event. There is no possibility the page is viewed in the browser. Any content is downloadable, not viewable.
PDF is provided because resources/desire/ability to convert to Web are not available, but is considered Web content
Pageview. There is a possibility that the page will be viewed in the browser, and that is the intended functionality anyway.
File is of a form or tutorial intended for printing
Event. The intent is not to view the content, but to provide a format for printing and interacting with outside of the Web. This is not pageview content.

In most situations where I’ve implemented tracking for PDFs, their use has fallen under the event philosophy, but I do see instances where a pageview does make sense.

How do you make decisions about pageviews or events? How do you use the resulting data?

This post follows , a post about debugging your events and pageview code. I hope to follow this with a tutorial about implementing JavaScript for this tracking.

How to Check If Google Analytics Click Tracking is Triggered

When I add new Event or PageView tracking code that is bound to click events, I want to be sure that the tracking code is fired without waiting for a site visitor to trigger it (or in some cases before the code is even on a live page). Because my own traffic is filtered out of all of my Google Analytics reports, I can’t rely on my clicks to show in my reports (not to mention the delay). But, even with the filter in place, the clicks are sent to Google, and I can check to be sure they’re sending the right information in Firefox using Firebug’s Net panel. Here’s how.

Enable the Net tab

If you don’t already have Firebug installed in Firefox, get it, because you need it for this.

Once it’s installed, enable the Net panel.

Load the page you want to test. Once you do, you’ll see a lot of stuff pop up in the Firebug Net panel. One of my posts looks something like:

Look for the PageView

Once you have enabled the Net panel, you can see if your Google code triggers the initial pageview. Look through the requests for one that starts with _utm.gif?. Expand it by clicking on the arrow to the left of it.

Looking at the params tab (it defaults to headers), you can see the information being passed to Google. The first line is your unique tracking ID. You’ll also see your page title, the domain, and most importantly, the URL being passed.

If you don’t find the _utm.gif? entry, something is wrong with your basic GA tracking code and no data is being sent to Google.

Trigger your event or new pageview and find the tracking info

After verifying that the GA code is tracking the pageview, you can see if your click event code is working. To do so, trigger an event that you’ve attached tracking code to. In my screenshot, I open an external link, which I’ve coded to trigger a GA event. It’s important that if you are triggering a link to a new page that you open it in a new tab or window so that your Firebug Net panel still tracks the original page.

A new _utm.gif? line should show up in the Net panel. Expand this new tab. If you triggered another pageview, the params will look similar to those mentioned earlier. Events look a bit different.

Click to view larger version

The important field here is utme, which shows the information you passed in the _trackEvent call. The arguments you passed to _trackEvent are separated by asterisks. Mine reads Outbound Link*us.php.net/strtotime*Why is date() returning 12/31/1969. This is because I track my outbound links under the category Outbound Link, with the external URL as the action and the h1 text on the page the call was triggered from as the label.

Yours will likely differ depending on your schema for event tracking.

Again, if you don’t find this new _utm.gif? call in the Net panel, your click event code isn’t running, or the GA _trackEvent/_trackPageview code is set up incorrectly. You’ll need to debug it, then check again.

Now you know how to check if your code is working. What do you use Google Event or Pageview tracking for?

Sartorial Stitchery Becomes raevenfea: Simply Stitchery

Some things age more gracefully than others. This was first posted 7 years ago, so caveat lector. Links may be broken, things may be wrong (this is the internet, after all), and you may be better off finding more recent and relevant content. Blogs are rarely graceful on a good day, let alone after a few years.

Just a heads up out there: Sartorial Stitchery has moved to its own domain.

For those of you who don’t follow my stitchery adventures, nothing has changed in your world.

For those of you who subscribe to the Omnibus RSS feed and do like reading about my sewing stuff, unfortunately you’re going to have to add another feed to your reader for the time being: raevenfea.com/feed/.

I hope to somehow integrate the two back together in the future, but no ETA on that any time soon.

Sartorial Stitchery was not only misnamed, but had outgrown this shared space, so it was time to give it its own home (I already owned the domain, with nothing on it).

The design is still rough, and a few more articles need to be moved over, but it’ll be growing over the next few months!

TurboTax Free vs. Freedom, 2010 edition

Some things age more gracefully than others. This was first posted 7 years ago, so caveat lector. Links may be broken, things may be wrong (this is the internet, after all), and you may be better off finding more recent and relevant content. Blogs are rarely graceful on a good day, let alone after a few years.

Last year, I posted “Don’t Let TurboTax Free Edition Fool You—You Probably Want FREEDOM Edition,” and it is one of the most often viewed posts on this site. Here’s the update for 2010. In short, before you try the Federal Free Edition, make sure you don’t qualify for Freedom Edition, which will allow you to file more than 1040-EZ and also allow you to file your state for free (in participating states).

Freedom Edition: Do you qualify?

  • Your AGI is under $31,000 (same as last year)
  • You are/were active duty military in 2010 with an AGI under $58,000 (up from last year)
  • You qualify for the Earned Income Credit (EIC) Find out if you qualify at IRS.gov

If any of these are true for you, try the TurboTax Freedom edition.

If you do qualify, you can also file for free in these states: AL, AR, AZ, GA, IA, ID, KY, MI, MN, MO, MS, NY, NC, ND, OK, OR, RI, SC, VA, VT, WV.

What are you waiting for? Head over to the IRS Free File portal today!

The IRS Free File program

TurboTax Federal Free is not associated with the IRS’ Free File program, which allows anyone with an Adjusted Gross Income (AGI) of $58,000 or less e-file for free, including some state returns. TurboTax Freedom is.

TurboTax Freedom has stricter limits than the Free File program, so you may want to explore your options and choose another online preparer if your AGI is over $31,000.

The Free File page can help you choose the preparer that is right for you. Make sure to check if your chosen preparer will allow you to file your state income taxes as well.

More good news: because the normal deadline falls on Emancipation Day, meaning gov’t offices are closed to receiving mail and processing returns, you have until April 18 this year to file your taxes.

What’s the real difference?

For the most part, both programs step you through the process of filing, helping you make sure that you claim all the credits and deductions that you qualify for. Freedom Edition, since it isn’t restricted to Form 1040-EZ, has many more options and will allow you to itemize deductions, claim small business income, and capital gains or losses. Federal Free edition is very limited in what it will allow you to claim beyond the standard exemptions. You can’t itemize deductions at all.

What made me notice the difference is the cost of filing for state income taxes: Freedom Edition allows you to file states for free, so long as they also participate in the Free File program. Federal Free edition charges you $27.95 for each state.

Freedom edition does not have as nice of an interface, though, so if you want to be wowed by pretty graphics (at the expense of not filing for free), it’s not the program for you.

I am not a licensed tax preparer or financial professional of any kind. If you have questions about your taxes, you should consult a qualified tax professional. This is simply my observation based on my own research for filing my own taxes. This is also in no way sponsored by the IRS or Free File program. I just want everyone to be as educated as possible.

New Project Launch

The Web is ever changing, and this article is relatively ancient having been published 7 years ago. It is likely out of date or even blatantly incorrect in relation to modern better practices, so proceed at your own risk.

I launched a new Web project a couple of months ago, but am just now getting a chance to post about it. The project is the Student Loan Facts Page, a site and blog about student loans. The importance of it to this Front-end dev blog, however, is that I want to let you know my thoughts on the HTML5 Boilerplate.

I’ll start with a caveat: this is a personal project, so I made a conscious decision to use elements in the design and coding that won’t work in any current release of IE. That’s not to say that IE users can’t see the site or anything, just that some stuff might be a little wonky. Like, the homepage makes use of the content CSS attribute to display numbers next to the six main links.

But my main goal with this site was to play around with WordPress a little more and start something with HTML 5. HTML5 Boilerplate seemed like a good place to start. I’m a fan of CSS resets, so that’s all there. I’m also intrigued by some of their approaches:

  • CDN hosted jQuery with local fallback failsafe.
  • JS located at the bottom of the page.
  • IE/JS-specific classes on the html tag (or body tag, depending on which version you’re using) to allow for progressive enhancement.
  • Asynchronous Google Analytics use.
  • Forcing a scrollbar in non-IE browsers to for design consistency.
  • Consideration for a:focus.
  • Text input/label alignment.
  • Progressive HTML5 form error classes using the :valid and :invalid selectors.

… and much more.

There’s also some stuff that I’m not as happy with, like non-semantic classes, but I can see why they included it.

As a whole, I think it’s a great start for developers who know what all of the code does. It is a very simple setup to modify as a solid basis for your own personal framework. It’s not really a straight out of the box solution, though.

It’s also not a great solution for a newbie to use. They’ll end up with bloated code and unnecessary stuff. Although, my current code on that site isn’t exactly pretty.

I’m impressed enough to use it as a jumping-off point for a redesign of this site coming later in the year, though. I hope you have a good experience with it as well.