All the best in 2011!
A few technical details: I wrote a nice piece of js/canvas code to make the rendering (available here). I originally planed to do an ant colony intelligence inspired animation (so the source code still contains a function to draw an ant).
A long story short: I got my hands on a data-dump of 184 550 hacked usernames and passwords from Gawker. With a bit of data-analysis magick I did a bit of research.
|
|
Now the first entry is rather shocking: the most used password is also the most obvious password possible. A full 1% (and 0.11% of the full DB; see bellow) used this password! What didn’t exactly fit on the list was that another 111 people used ‘Password’ and 129 people used the slightly better ‘passw0rd’.
“lifehack” and “gizmodo” are both names of the sites these passwords were retrieved from. Not very secure. ‘qwerty’ and ‘abc123’ are also extremely obvious passwords. 15 of the remaining passwords are single words contained in any dictionary.
Next I marked the passwords with these simple rules:
The following table shows the distribution of these strengths.
| Score | Count | Percentage |
|---|---|---|
| 0 | 8567 | 4.6% |
| 1 | 96738 | 52.5% |
| 2 | 65876 | 35.6% |
| 3 | 12781 | 6.9% |
| 4 | 586 | 0.3% |
Now a score of 1 is very bad - it is the default unless you use the same password as your name. However a staggering amount of people use these very unsafe passwords.
A new year’s (a bit early, but well) promise should be a bit more online safety for all of us.
The dataset is available here and the details of how it was obtained are here.
The full db contained ~1.5M records out of which the attackers obtained ~1.2M (presumably randomly). They proceeded to crack the week encryption algorithm of ~200K accounts. This I do not assume was completely random. Out of this I got a total number of 184 550 records.
The site apparently stored only the first 8 characters (sic!) of the password. This suggests caution with passwords of length 8 because these were possibly truncated. I set those shorter then 8 characters in an italicized font. However apart from “lifehack” which would be probably “lifehacker” all other passwords in the top 20 seem as complete words or phrases. As an aside a strong password is generally considered to be at least 16 characters long.
I would like to perform more research into password sharing with this dataset but I don’t have the time for that right now. I’d be interested if someone will investigate.
Warning: Technical article ahead. Beware.
As I’ve written before, CSS3 is very good for designing things. Today we’re going to use it to do some fun pixel pushing. Behold our inspiration.
This article contains features and examples that do no work properly in the dashboard. Please follow to the version on my site.
Simple. Use any thing you like. We will be using a div called .board.
We’ll start with designing for Webkit for now. First the basic shape and color.
.board {
padding: 5px 10px;
display: inline-block;
background: rgb(30, 30, 30);
-webkit-border-radius: 3px;
text-transform: uppercase;
color: white;
}
yields:
Now let’s make the dark shadow effects from the top and sides of the box. For this we’ll use multiple inset box shadow declarations:
-webkit-box-shadow:
inset 2px 0px 4px rgba(0,0,0,0.9),
inset -2px 0px 4px rgba(0,0,0,0.9);
Gives:
These sort’s of displays use a spinner and thin boards to display different strings. When you go to a train station or airport (that still use this magnificently old tech) you can see the dividing line between the two halves. We’ll recreate that here.
How? Using a pseudo element with thin boarders.
.board:before {
border-top: 1px solid rgba(0,0,0,0.4);
/* this line will be barely visible, but that's how we want it */
border-bottom: 1px solid rgba(255,255,255,0.08);
height: 0px;
position: relative;
/* you might need to ajust these positions to your layout */
width: 110%;
left: -9px;
top: 11px;
content: " "; /* we have to set this, otherwise it won't be visible */
display: block;
}
This is how it looks:
To make the spinner look realistic we have to also pay attention to the bottom border. It has to have a 3D effect an look plastic enough. We’d also like to see the board bellow it. So we modify our shadows definition and add a border.
border-bottom: 1px solid rgba(0,0,0,0.7);
-webkit-box-shadow:
inset 0 -1px 0 rgba(50,50,50,0.7),
inset 0 -2px 0 rgba(0,0,0,0.7),
inset 2px 0px 4px rgba(0,0,0,0.9),
inset -2px 0px 4px rgba(0,0,0,0.9);
Light’s and shadows are a crucial part of any visualization. So as a finishing touch we add a few light effects (with a subtle gradient and a few more shadows):
-webkit-box-shadow:
inset 0 -1px 0 rgba(50,50,50,0.7),
inset 0 -2px 0 rgba(0,0,0,0.7),
inset 2px 0px 4px rgba(0,0,0,0.9),
inset -2px 0px 4px rgba(0,0,0,0.9),
/* This one is new and adds a light edge on the bottom*/
0 1px 0px rgba(255,255,255,0.2);
background: -webkit-gradient(linear, center top, center bottom,
color-stop(0.0, rgba(0,0,0, 1)),
color-stop(0.05, rgba(30,30,30, 1)),
color-stop(1.0, rgba(50, 50, 60, 1)));
Which yields:
As you can see, CSS3 enables us to do with a few lines of code some incredible pixel-pushing. So here’s the complete code with syntax for other browsers and fallbacks for graceful degradation:
Let me know if you’d like more articles like this.
Edit: For an animated version see this project by Paul Cuthbertson.
Google just reported several extremely interesting things:
China launched a targeted and sophisticated attack against Google’s infrastructure (emphasis mine). I dare to speculate that China is following Russia’s lead in creating a highly qualified cyber-warfare unit and is not shy in using it.
Google (apart from posting it to the public) claims to have reported this to US authorities. These have traditionally ignored cyberterrorism. However this seems to be the clearest case of government endorsed attack to date. Lets hope that the US chooses to do something.
Google decided to revert it’s controversial decision to censor it’s Chinese results. This is clearly a retribution of some sort. Google also writes that it is prepared to leave China for good - clearly a statement of not being threatened. It is also quite a powerful threat.
Imagine if Google suddenly stopped working. I presume since you are reading this blog you would be fine. But there are millions of users for whom Google is the internet. Plus a lot of Chinese users (probably including government officials) would loose their Gmail data and their calendars.
I imagine China is facing a tough decision with this.
One of the more notable graphical changes in Leopard was the change of the Mac OS menubar’s style into a translucent white and changing icons from color to a black and white style. (With the exception of the international menu.)
However sadly some developers of third party apps have seemed to ignored this fact and their menu-apps are still playfully colorful. It’s not a terrible mistake but it always irks me. Bizarrely the HIG is silent about this issue.
Fortunately there is an easy fix for this problem. Simply go to the relevant application, right-click on it and choose “Show package contents”.
The locate the menubar icon. This will typically be a png in Contents/Resources. Now simply edit it in your favorite image editor. Then simply restart the app with the icon.
