Today, my dad’s Gmail password was compromised. Google received a login request with his information from Tsentralnyy rayon, Voronezh, Voronezh Oblast, Russia.

This immediately made me think of an article in The Atlantic by James Fallows, a reporter who got a taste of how important password security is when his wife’s Gmail account was hacked. The hacker changed the reporter’s wife’s (Deb’s) password so that she couldn’t log back in, and then the hacker sent an email–from her gmail address–to everyone in her contact list. The email, purportedly from Deb, informed her closest friends and family that she had gone on a quick trip to Madrid, gotten mugged, and was stranded in an embassy without any identification or money. It continued:

I need you to lend me some Money to sort my self out of this predicament, i will pay back once i get this over with because i need to make a last minute flight.

They had no way of knowing how many people fell for this and sent money. If that were the end of the story, it would be tragic. But James writes poignantly about the impact this had beyond the sleepless night answering phone calls and trying to change credit card numbers:

Six years’ worth of correspondence and everything that went with it were gone. All the notes, interviews, recollections, and attached photos from our years of traveling through China. All the correspondence with and about her father in the last years of his life. The planning for our sons’ weddings; the exchanges she’d had with subjects, editors, and readers of her recent book; the accounting information for her projects; the travel arrangements and appointments she had for tomorrow and next week and next month; much of the incidental-expense data for the income-tax return I was about to file—all of this had been erased.

As a result of his experience, Fallows has three suggestions he strongly advises everyone take immediately.

  1. Start using a password manager like LastPass to generate and store passwords like V*!amYEg5M5!3R
  2. Stop re-using passwords across multiple sites!
  3. Enable Google’s two-step verification, which will call your phone with a code to enter every time you log in.

At the time I read this article (Oct. 2011) I knew it was good advice, but I wasn’t ready to put in the effort required. I told myself that I would get around to improving my security when I had time. I did make marginal efforts to increase the length of some of my passwords, but I didn’t really get around to it until I received this email:

Hey there Brenton. You have a weird password.
depl8aneasdfasdfdepl8ane
I just thought you wanted to know, You got hacked.

Yeah, that was my actual password. There was also a link to a page on my website that he had created. With a sick feeling I realized that I had re-used this password for my Gmail and my website, and now both were compromised. In fact, this was my "secure" password that I used on my "important" sites that I thought weren't likely to get hacked. I actually replied to the email and asked the hacker how he did it. He said that I had "signed up to some other website, that was vulnerable to an SQL injection." Anonymous mask watching a login screen To this day I'm not sure which account it was that got compromised, but only a week later news broke of the LinkedIn breach. I had a LinkedIn account, and I used that password for it. Was mine one of the 8 million accounts affected? Did I get hacked because I trusted LinkedIn? Or was it my own website that got hacked? Or was it some other site? I don't know. But on that day I stopped re-using passwords. And I enabled Google two-step verification.

I was lucky: my account was compromised by someone just trying to verify that a hack on another site was successful. My dad was lucky too. Google blocked the login from Russia as suspicious. Had the hacker been in California, or used a proxy to make it look like they were in California, I might be wondering why my dad made a quick trip to Madrid.

The First Problem

The first problem of password security isn't bad password strategies, weak tools, or lax site requirements. What we all discovered is that the first problem of password security is apathy. At the conclusion of the Atlantic article, James Fallows was sharing his password safety strategies with a security expert, who remarked "I see that you’ve got it! … The zeal of the convert. People in the business think about the risks all the time, but normal people don’t, until they’ve gotten a taste of the consequences of failure."

If you're like most people, at this point you will say to yourself "man, it would really suck if my account got hacked" and then you won't do anything. Because it isn't real to you. You probably have a number of friends who have had some sort of account hacked, but it still isn't real to you. And it probably won't be real to you until it's too late.

The Second Problem

So what is the second problem of password security? It's this:

23710738935

That is a password. I went to a movie night at a friend's house and we all watched as she logged into her media streaming service with that password. "Wow, that's a super secure password!" one person said. "I know! I'm kind of paranoid ever since my Facebook account got hacked" she replied. But the truth is that her password is terrible. All numeric-only passwords under 14 digits have already been exhaustively cracked. There is a difference between is "difficult for me" and a password that is "difficult for computers." We tend to think these are the same, and since writing numbers out like that is a pain in the butt, we think we're safe.

The second problem of password security is common sense. Unfortunately, common sense can only take you so far with your password, and at some point, common sense will work against you and make you create a really annoying to type password that is amazingly easy to crack.

XCKD comic: Password Strength

XKCD's famous Correct Horse Battery Staple Comic

The problem is that password security is counter-intuitive, which means that common sense is actually just ignorance. But the good news is that once you've overcome apathy, just a little education goes a long way. If you're willing to, you can secure your sites online, and it takes less effort than shredding all of your mail or covering your PIN pad at the bank ATM. Because common sense is wrong when it says that a secure password is a pain. You can have the best of both worlds: a simple-for-humans password that is also difficult-for-computers. It just takes the willingness to learn.

Tagged , , | Leave a comment

Google has announced that they will be forking WebKit to create a new rendering engine for Chrome called Blink.[1][2] Google will be able to remove millions of lines of code from Blink that isn’t needed for Chrome, and will be able to work more aggressively to develop Chrome-specific features into Blink.

This won’t unsettle things too much—at least not right away. The latest builds of Canary are already using Blink, and there is no perceptible difference. The CSS -webkit- prefixes even still work. So how long will it be until we have to switch over to using a -blink- or -chrome- prefix for our rounded corners? The answer to that question is: “wrong!” There will be no -chrome- prefix, or any other vendor prefixes at all, moving forward. Instead, you’ll have to change a setting in your browser to enable experimental CSS features.

Vendor prefixes seemed like a good idea. And maybe they would have worked, if developers had used them as intended. Eric Meyer wrote the seminal article advocating vendor prefixes, Prefix or Posthack. He explained that we could use vendor prefixes to escape the conflicting standards of the bad old days, when the same code was rendered differently by different browsers. Due to Internet Explorers broken box model, width meant one thing in Trident (IE’s layout engine) and something entirely different in Gecko (FireFox’s layout engine). Furthermore, because these differences were alive and living on the internet, there was no way for either browser to fix (or compromise) its definition to unify the web without breaking existing pages. Internet Explorer eventually fixed it’s box model, but it has been an arduous, difficult journey, one that has not yet reached it’s destination. Despite years of very clever attempts to fix things with the creation of quirks mode, doctype switching, and for IE, conditional comments and the problematic compatibility view (which still persists in IE10!).

With vendor prefixes, none of that would happen, because new CSS features would go through a vetting period, during which the feature could only be accessed by prefixing a code to the property name. After a time of testing, and when the standard was defined more definitively, the browser could begin supporting the property without the prefix, and nobody would have incompatible CSS anymore!

This quickly created a situation where the simple task of rounding some corners turned into this mess:

-ms-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
-khtml-border-radius: 10px;
border-radius: 10px;

When it comes to background gradients, things are even worse:

background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-9 */

Not only does each browser get its own line, the WebKit browsers actually use two lines, due to a change in syntax. The messiness of this is annoying, but it isn’t actually that huge of a problem, in terms of web compatibility. In fact, it saved us from having to write crazy javascript to detect the browser and version number in order to give one syntax to < Webkit 4 browsers and another syntax to all others. The real problem is that this is how most developers began coding their sites:

-webkit-border-radius: 10px;
border-radius: 10px;

or even just:

-webkit-border-radius: 10px;

You can see how this sort of abuse caused problems. Developers got used to Chrome being on the bleeding edge of CSS3 features, and began coding specifically for it without taking the time to check whether other browsers had supported the features yet. Effectively, vendor prefixes had become browser detection all over again, and developers were using this browser detection to block functionality from all browsers except WebKit. As you can imagine, this annoyed other browser vendors, like Opera, who were working hard to keep their browser up to date with CSS3, but which was blocked from applying the styles due to lazy coding. Developers had turned -webkit- into the very -beta- prefix which Eric Meyers dismissed in his article.

The -beta- prefix was proposed by Peter-Paul Koch as a compromise to his original proposition to abolish vendor prefixes. Koch’s vision was prophetic. In March 2010 he wrote:

Eventually Opera will discover that plenty of sites use -webkit-transition, but not -o-transition. Will Opera start to support -webkit-transition, too?

Despite a widely circulated call for action to web developers to change their ways and prevent “judgement day,” two years after Koch’s prediction, Opera announced it would support -webkit- prefixes. Mozilla had been planning to do the same. Microsoft’s massive attempt to change the bad behavior of developers had failed, and they too would follow suit.

It looked like things were going to get really messy. Then suddenly, Opera announced that it was abandoning its rendering engine Presto, and would instead use WebKit. While many saw this as a sad day for the web, the silver lining was that judgement day had been pushed back a little. Furthermore, Opera is adopting Blink with Google, and Mozilla is creating yet another rendering engine called Servo. So we aren’t looking at a rendering engine monoculture or a return to the “bad old days.”

So with all these new rendering engines, what will happen to vendor prefixes? They’re all going to go and live with the <blink> tag and IE’s broken box model. Mozilla is heading in the same direction as Chrome: “avoiding vendor prefixes by either turning things off before shipping or shipping them un-prefixed if they’re stable enough.” This is where all the vendors are headed, and the W3C working group on CSS has already put together a policy that rang the death knell of vendor prefixes.

1 Comment

In a long overdue update, shoutleaf.com is now responsive.  This means that if you view the site in a mobile device such as a phone or tablet, the structure of the page should conform to a shape that works well for your screen size. It also has been updated with some hacks to make Internet Explorer accept CSS Media Queries and HTML5 elements, which means that the site now looks and works much better on versions of Internet Explorer down to IE7.

This isn’t the first incremental improvement that the Shoutleaf site has experienced, and it won’t be the last. One of the strategies of website management that has really proven itself over the last decade is the early-incomplete/often-improved release cycle. Instead of building a website up and out until it is perfect, an early initial release goes live that is in “beta” condition. It’s feature complete–gets the job done–but it isn’t completely polished. Then the site is continually improved and polished even while it is in use, and it never leaves that “beta” condition. This is the strategy that Google uses on their products. If you signed up to Gmail early, you may have wondered why the top banner said “Gmail Beta” 5 years later. They’ve changed the logo, but in many senses, Gmail is still in a middle-ground between a fully stable, tested and mature product (which is is) and a cutting edge, recently-updated, still-being-improved product (which it is).

You’ll find that lots of successful websites fit into this category, and traditional software is moving in this direction as well. You can see it in things like browsers and operating systems. For a long time, Netscape, Internet Explorer and even Firefox measured time between new versions of their browsers in years. It took more than 5 years after IE6 for Microsoft to release IE7. Then, in 2008, Chrome debuted, releasing more than once a year, and increasing their pace in 2010. In 2011, Firefox implemented its rapid release cycle,  releasing new versions every few months.  One can observe the move towards rapid release in OSX and even Windows. The Ubuntu operating system releases a new version twice a year and is even considering moving towards a rolling release cycle, as the Chrome OS operating system already has. A rolling release cycle is the ultimate in software development. If you do it right, every time you log in or log on, your experience is better, easier, and faster than last time.

So keep looking for improvements on our site. We won’t always announce changes, but things should be slightly better every month.

Leave a comment

This is a link. We also call it a HyperLink, Web Link, or Anchor.

This is also a link: http://shoutleaf.com/2013/02/what-is-a-hyperlink/ ‎

We call that a HyperLink, or Web Link. When we can see the details like that, we also call it a URL or Web Address .

When you see it up in the address bar of a browser, we usually call it a URL, Web Address, Path, or Web Location. They’re all kind of the same thing though.

Q: Why do we call it a “link“?

A: Because it’s kind of like a chain link in the way it links various pages together.

Q: Why do we also call it an “anchor“?

A: Maybe because chains come from anchors? I don’t know, honestly, why we need a nautical metaphor for this. Though functionally it makes sense, because a link hooks or “anchors” the URL to some arbitrary text, like this.

Q: What about Hyper Reference? What’s that?

A: I know. I’m sorry. It comes from the fact that HTML is based on HyperText. In Hyper Text, pages could connect to other pages. They didn’t have URLs back then, but they did have ways to reference the other page. Text becomes HyperText, references became HyperReferences. The remnant of this today is in the <a> element which has the attribute href, which stands for HyperREFerence.

<a href="http://shoutleaf.com/2013/02/what-is-a-hyperlink/ ">That HyperReference is Anchored to this HyperText!</a>

It would be a lot less confusing if we just called it url.
You could call a modern URL a “web reference” if you really wanted to, since it’s a reference to something on the web, though there is really no need to be that confusing. Please. There is no need.

Leave a comment

You’ve heard that you need to get on Facebook and Twitter. That social networking is important and you can’t miss out. But I’ll tell you a secret. Most companies that make an effort to utilize social networking are wasting their time. How many advertising campaigns have you seen that seemingly have the singular goal of getting people to ‘like’ their Facebook page? This sort of strategy entirely misses the point of social networking in so many ways.

First, what are the users going to do once they like your Facebook page? Are you going to give them more advertisements? So the first ad is directing users to a place where they may or may not see the real ad? Why not just make the first ad the real ad? Secondly, sites like Facebook work because they enable people to share things that they find interesting and unique, and filter out all the crap. If your Facebook page is not cool and unique enough on it’s own to be getting natural, ‘grassroots’ attention, then it’s just more advertising crap that people are not going to share with eachother.

True social networking will be discovered by people and shared naturally. Not just on Facebook or Twitter or wherever you have put your advertising money, but all over the place. Did you know there are literally hundreds of social networking sites? Good content is shared on all of them, or by email or over IM chats, in a thousand thousand ways. Content that advertisers try to force into the social networking world may get a few perfunctory ‘like’s, but that is as far as they ever go.

Leave a comment