A Must See Movie: The Imitation Game

Keira Knightly and Benedict Cumberbatch in The Imitation Game.
Keira Knightly and Benedict Cumberbatch in The Imitation Game.

I don’t normally review movies here, but I’m making an exception of this film about the early beginnings of the computer because I think it’s a must see for anyone working with a computer.

The Imitation Game stars Benedict Cumberbatch as English mathematician and logician, Alan Turing. Turing helped crack the Enigma machine, a Nazi encryption device, by developing a code breaking machine which has come to be known as the computer.

Benedict Cumberbatch as Alan Turing next to his "Turing machine."
Benedict Cumberbatch as Alan Turing next to his “Turing machine.”

Cumberbatch gives a brilliant performance. He’s absolutely flawless as this graceless, socially inept, mathematical genius who was a marathon runner and a closeted homosexual.

The team of mathematical genius watching the first time they decrypt a message from the Enigma machine
The team of mathematical geniuses at Bletchley Park watching the first time they decrypt a message from the Enigma machine.

Others starring in The Imitation Game are Keira Knightley, Matthew Goode, Allen Leech, and Matthew Beard as the team at Bletchly Park, site of the UK’s code and encryption school, who worked together to crack the Enigma machine.

Charles Dance plays the commander and Rory Kinnear plays the detective whose decision to prosecute Turing for homosexuality probably led to his death.

Alex Lawther plays the school boy Turing: a wonderful performance from one so young. By peering into Turing’s past, it helps the audience see how so many things that happened were the way they were.

The movie starts in 1951 and jumps between that time, the war years, and Turing’s school days.

For anyone interested in computers (and who isn’t) this movie is a must see. Additionally, it’s an excellent rendering of an important historical period, complete with film from the time. The film looks at what it means to be different, to not fit in, and to be forced to hide what you are for fear of imprisonment.

Images ©Black Bear Pictures

For Completeness

For completeness, you may want to watch some of the other movies about Alan Turing. Sir Derek Jacobi played him in the 1997 Breaking the Code. There’s a documentary called Codebreaker. If you haven’t already seen these two films, they should be watched as well. I intend to watch them!

If you want to go old school and get more factual information than a movie offers, there are some books about Alan Turing: Alan Turing: The Enigma: The Book That Inspired the Film “The Imitation Game” and Alan Turing: Unlocking the Enigma.

Accessibility Teaching Materials: Free Download

Accessibility Teaching Resources
A free booklet for web educators

I prepared a booklet (PDF) of materials that I use to teach a short class in web accessibility. There really isn’t a great resource for a class in web accessibility that covers the basics in just a few hours. I took some of my handouts and made such a resource for you. It’s a free download.

Get Accessibility Teaching Resources now. Free!

When to use the null alt option for images

The standards set in WCAG 2.0 state:

Guideline 1.1 Text Alternatives: Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.

Among those text alternatives is where alt text (or alternative text) for an image is used.

The HTML5 specification states that all images must have an alt attribute. Here’s the fine print. All images must have an alt attribute, but there are times when the alt attribute can be empty or null. That is, the attribute has to be there, but there might be nothing in it. Like this:

<img src="image.png" alt="">

When is null alt text acceptable?

There are times when the text surrounding an image gives the alt text of the image. It’s part of the content. Therefore, to put the same information in an alt attribute becomes redundant and unnecessary.

Here’s an example from the blog Old Ain’t Dead in the section where the most popular posts are displayed. Alt text is shown using the tools in the Web Developer Toolbar.

An example of redundant alt text.
The alt text and the clickable link are the same

You can see that the alt text for the image is exactly the same as the link text that goes with it. On a screen reader, a user would have to listen to the same text read twice. It would be better if these images had null alt text because the function of the link is explained by the text accompanying it.

Look at how Twitter deals with null alt text.

Jeffrey Zeldman's Twitter image receives no alt text
An example of null alt text

If the alt text for Twitter avatars was not null, but in fact contained the name of the Twitter account, then the name would be spoken twice in a screen reader. In the example above, with null alt text, you would hear “Jeffrey Zeldman” spoken once only because of the null alt text.

Even if you couldn’t see the little profile image, you’d still know it was Jeffrey Zeldman’s twitter account.

What about when images are not loaded or otherwise not displayed by the browser?

If you consider the two examples already mentioned – the list of top posts and the Twitter avatars – in neither situation would null alt text on the image result in the user becoming confused. The information is there in text form and it’s all that is needed.

What if the text surrounding the image does not explain what the image is?

In that case, put a description in the alt attribute that explains the function of the image or provides the content of the image.

Feminist Lorem Ipsum

Photo of Gloria Steinem with the words "Feminist Lorem Ipsum" superimposed on her image.

I saw Samuel L. Ipsum thanks to this tweet from Chris Carfi. I checked out the Samuel L. Jackson version of lorem ipsum and thought it was clever. I realized that we need a feminist paragraph or two that can be used as filler by web designers.

I didn’t build it into a fancy lorem ipsum generator, but I did put together some random quotes that can be stuffed into a new layout while you’re in the design stages. It isn’t a widget, it’s old fashioned copy and paste, but here you go:

One Paragraph

Whisky, gambling and Ferraris are better than housework. -Françoise Sagan Women don’t get raped because they were drinking or took drugs. Women do not get raped because they weren’t careful enough. Women get raped because someone raped them. -Jessica Valenti I love being single. It’s almost like being rich. -Sue Grafton In fact, there is perhaps only one human being in a thousand who is passionately interested in his job for the job’s sake. The difference is that if that one person in a thousand is a man, we say, simply, that he is passionately keen on his job; if she is a woman, we say she is a freak. -Dorothy L. Sayers While falling in love is fun, it’s not everything, and it’s not the antidote to an unfulfilled life, despite what Reese Witherspoon movies may tell you. -Jessica Valenti There will be no mass-based feminist movement as long as feminist ideas are understood only by a well-educated few. -bell hooks

Two Paragraphs

Whisky, gambling and Ferraris are better than housework. -Françoise Sagan Women don’t get raped because they were drinking or took drugs. Women do not get raped because they weren’t careful enough. Women get raped because someone raped them. -Jessica Valenti I love being single. It’s almost like being rich. -Sue Grafton In fact, there is perhaps only one human being in a thousand who is passionately interested in his job for the job’s sake. The difference is that if that one person in a thousand is a man, we say, simply, that he is passionately keen on his job; if she is a woman, we say she is a freak. -Dorothy L. Sayers While falling in love is fun, it’s not everything, and it’s not the antidote to an unfulfilled life, despite what Reese Witherspoon movies may tell you. -Jessica Valenti There will be no mass-based feminist movement as long as feminist ideas are understood only by a well-educated few. -bell hooks

A woman without a man is like a fish without a bicycle. -Gloria Steinem I only know that people call me a feminist whenever I express sentiments that differentiate me from a doormat. -Rebecca West Feminism is the radical notion that women are human beings. -Cheris Kramarae There is no female mind. The brain is not an organ of sex. As well speak of a female liver. -Charlotte Perkins Gilman Men are from Earth, women are from Earth. Deal with it. -George Carlin No woman can call herself free who does not control her own body. -Margaret Sanger I cannot understand anti-abortion arguments that centre on the sanctity of life. As a species we’ve fairly comprehensively demonstrated that we don’t believe in the sanctity of life. The shrugging acceptance of war, famine, epidemic, pain and life-long poverty shows us that, whatever we tell ourselves, we’ve made only the most feeble of efforts to really treat human life as sacred. -Caitlin Moran

If someone wanted to take this idea and put it into a widget or app, that would be lovely.

President Obama on Net Neutrality

Four million average citizens have spoken out in favor of Net Neutrality. Now the most powerful man in the country shares his opinion.

All the petitions I’ve signed, all the letters I’ve sent off the of FCC on this topic do make a difference, of course. But I’m hoping the POTUS’s words will make a major difference.

See the text of this statement.

Using Clearfix to Clear Floats in a Layout

First, let’s review some of the older methods of clearing floats in a layout. In a CSS layout with two or more columns, there is generally some use of float to create the column structure. For the layout to include a footer at the bottom of the page, those floats need to be cleared.

A technique used some time back was to add some element – a br or a div – with a class attached that applied clear:both. This br or div was inserted immediately after the elements that needed clearing. This element added no content, it simply cleared the float (or floats). This works, but it does add an unnecessary element into the HTML content.

Another technique put a clear:both rule in the element following the float (or floats) preceding it. So a footer element might be set to clear:both to move it below any floated elements above it. This works. It puts the clear after the elements that need to be cleared.

Example code for this type of clearing in a two column layout.

<div class="container">
 <header>
 . . .
 </header>
 <main>
 . . .
 </main>
 <div class="sidebar">
 . . .
 </div>
 <footer><!--clear:both rule applied to footer-->
 . . .
 </footer>
</div>

Clearfix

The .clearfix difference is that the class is applied to the parent element containing the floats. The parent element becomes self-clearing.

An advantage of using .clearfix is that it makes the container div height equal to the tallest of the floated columns enclosed. This gives you options with borders, backgrounds and more, particularly when all of the contained elements are floated.

Using .clearfix generally will require the addition of another wrapper div to the HTML. Here’s a example similar to the one above, but designed for .clearfix. The header and footer elements are outside the wrapper div which contains the floated columns.

<div class="container">
<header>
. . .
</header>
 <div class="wrapper"><!--.clearfix class applied to wrapper-->
 <main>
 . . .
 </main>
 <div class="sidebar">
 . . .
 </div>
 </div><!--end wrapper div-->
<footer>
. . .
</footer>
</div><!--end of container div-->

The Clearfix Rule

The CSS for a .clearfix class rule is applied to the parent element containing the floats. It uses the pseudo class :after with no content. It declares the element as display:table.

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

That’s it.