Print Styles Talk from WordCamp Buffalo 2013

Back in October I had the pleasure of speaking at Buffalo’s second WordCamp. Unlike the talk I gave at least year’s event, I opted to go for something a bit more technical, something we build into every site we develop at Algonquin Studios and that I have been promoting for years now.

So I crafted a presentation on how to use print styles on a web site. At Algonquin Studios we support many platforms, including our own homegrown content management system (CMS), QuantumCMS. I have also learned that many WordPress developers also work on other platforms, so I opted to discuss print styles independent of the CMS used to power the site.

I focused on the background of print styles and related them to responsive design, I covered best practices and techniques, demonstrated how you can use Google Analytics to track what pages are printed from a site, and touched on the future of print styles.

All of my slides are here along with a video from my talk. Below the embedded content are links to other articles and posts I have written about print styles for those who want to get a deeper dive into some of the aspects.

The Slides

The Video

The video gets cut off before the end, but the key information is still in the slides.

Further Reading

You Should Be Using Two-Factor Authentication. Everywhere.

We’re not very good with passwords, although we think we are. According to a recent study by security company CSID, 89% of us think we practice safe password routines. Unfortunately, 1 in 5 of us have had an online account compromised and yet only about half of us change our passwords more frequently than once per year. The best passwords typically utilize a combination of letters, numbers, and punctuation, and the longer they are the better (at least 8 characters). Only 6% of users have passwords that meet these criteria. Even worse, 60% of us reuse the same password for multiple sites. This is a recipe for disaster.

Here’s a quick scenario: Tommy has a forum account on a fan-made music site. The music forum that he visits regularly doesn’t maintain their security patches regularly, and a random hacker manages to hack into the site and steal his password. A simple web search reveals that Tommy works for Company X. Company X uses the Outlook web app, and wouldn’t you know it, Tommy uses the same password everywhere. Through a little trial and error, the hacker discovers that tommy@companyx.com is his work email, and boom, the hacker now has access to Tommy’s work email.

So what is two-factor authentication, and how does it solve this problem? Well, two-factor authentication (2FA) is a multi-stage method of verifying that you are who you say you are. Typically it’s a combination of something you know (a password), and something you have access to (a phone). Most commonly, the second factor of authentication will be a code that you will be sent through a text message or an automated phone call, and it’s only valid for a short period of time. This code will be entered on a secondary screen before you can have access to your account.

Unfortunately a lot of people don’t know what 2FA is – roughly 75% of people surveyed didn’t have a clue. It has also garnered a reputation for being a hassle, which is simply not the case. Most two-factor implementations will allow you to “register” a device as a “trusted device” for a period of time (typically ranging from a day to a month). I know what you’re probably thinking – what if I lose my phone? Then what? Well, the answer to that is “it depends.” Every two-factor implementation has different ways to handle account recovery in the event of a lost device, but this shouldn’t deter you from using 2FA – the benefits outweigh the risks by far.

So where are some common places you should start using two-factor authentication to protect your online accounts? Here’s a list:

  1. Google: Sends a 6 digit text message when you attempt to login from a new device. They also provide a Google Authenticator app for Android, iOS, and BlackBerry that can be used to obtain the second factor authentication codes.
  2. Apple: Sends you a 4-digit code via text message or Find My iPhone notifications when you attempt to log in from a new machine.
  3. Facebook: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  4. Twitter: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  5. PayPal: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  6. Microsoft Accounts: Sends you a 7-digit code via text message or email when you attempt to log in from a new machine.
  7. Yahoo! Mail: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  8. LinkedIn: Sends you a 6-digit code via text message when you attempt to log in from a new machine.
  9. WordPress: Utilizes the Google 2FA app.

For a more complete list of companies and products that support two-factor authentication, please review Evan Hahn’s list. Ask your local security or IT professional if your organization could benefit from using 2FA for email or work accounts. There are also ways to implement two-factor authentication into your own custom applications and web sites.

Passwords are becoming less secure all the time, and hackers are getting better at cracking them (check out the strength of your password). Enabling two-factor authentication provides an extra layer of security at a negligible cost. Protect your financial accounts, identity, and your career by using it wherever you can.

Styling Tabular Data with CSS3

In my career as a web developer, I’ve helped build many web applications that require the display of tabular data in a clean and simple fashion. Over time, I’ve developed a few techniques for doing so that are effective and easy to implement.

But before I go into that, let me quickly remind my fellow web developers that tables are not, in fact, the enemy. Although the days of using tables for layout are long past, tables are still a perfectly appropriate method for displaying tabular data on the web.

However, I must also acknowledge that there are some disadvantages to working with tables to be aware of, including:

  1. Tables don’t always scale down well and may display poorly when space is limited, like on mobile devices. If your primary audience is viewing your web site on mobile devices, it may be better to use lists or other markup that’s better suited for vertical display.
  2. Tables are not as adaptable as other elements, especially in older versions of Internet Explorer, and that can limit your options when developing a responsive web site.
  3. Display tends to vary slightly across different browsers. This is particularly true with column widths. I’ve encountered many situations where the text in one column wraps to two lines while there is clearly ample space to accommodate for it in another cell. There are ways to get around that of course, but the solution is generally specific to the situation.

So after much preamble, here are four simple examples that I’ve created to demonstrate different ways you can work with tables to display data cleanly:

  1. Basic Grid with Alternating Row Colors
  2. Basic Grid with Alternating Row and Column Colors
  3. Basic Grid with Rounded Corners
  4. Simplified Grid with Generated Content

Error Messages Visible During Site Upgrade

During the course of a client web site upgrade today, one of the site’s visitors informed us that the web site was displaying an error and was exposing passwords in the error message.

While a password was in the error message, that password was only valid for the session state database and does not expose any other databases to access, including those with client data.

For those who would like a little more technical detail, the targetFramework error is expected while the site and applications are in transition across the .NET framework boundaries as the site is updated. The presence of the session state password and machine keys was not intended but was a side effect of an issue that has already been addressed. Some of the values are not in use and were commented out, but still displayed in the XML exposed in the error message.

As a result of this exposure, we removed existing accounts and set up new accounts and passwords.