Web Development Advent Calendars for 2014

For a few years now web developers around the world have celebrated Saturnalia Christmas with advent calendars covering topics related to the web. Some come and go, but you'll probably recognize a few regulars on this list.

I may have missed some, so please pass them along if you know of any. As I learned in prior years where I have tracked them, I don't know them all on December 1, and update accordingly. Some of this is because the sites don't promote the new calendar on the home page.

1. 24 Ways

24 Ways, the one that most of this think about for web development calendars, is back again. It's been going strong since 2005 and based on its history this year should have some good articles.

2. Perl Advent Calendar

Perl Advent Calendar goes all the way back to 2000 (and back then looked a bit more like a traditional advent calendar, too) and has been dispensing tips for Perl developers ever since.

3. 24 Jours de Web

24 Jours de Web is starting its second year as an advent calendar for web folk. Written in French, it is clearly primarily targeted at French speakers, but a round of Google Translate will open it up to far more readers (like me).

4. UXmas

UXmas is an advent calendar aimed at the user experience community. Coming from Australia, American readers may be thrown just a bit by the schedule. The calendar promises everything from sketches, to articles, to tools, to videos.

5. Webkrauts

Webkrauts has an all German advent calendar, and it also dates back to 2005. It covers general web topics, but being in all-German readers like me will benefit from a Google Translate version of the page.

6. Web Accessibility Advent Calendar 2014

Web Accessibility Advent Calendar 2014 is in Japanese, and thanks to the wonderful powers of Google Translate, I can tell you that it is a calendar to make the talk about Web accessibility (based on this statement: Webアクセシビリティに関する話題でつくるカレンダーです。). If you know Japanese, I welcome any corrections. The site Adventar.org appears to host other advent calendars, some about web technologies, some about ramen.

7. 24 Pull Requests

24 Pull Requests is less an advent calendar than it is an effort to mobilize developers. The goal is to get developers to send a pull request every day in December (up to Christmas), thereby supporting your favorite open source projects. There are even Coderwall badges for those who collect those sorts of things.

8. SysAdvent

SysAdvent is targeted to systems administrators, but there is a some cross-over to web developers. It has posts dating back to 2008, so there is plenty of good material there if you're too impatient to wait for each day to be revealed.

9. Lean/Agile Advent Calendar

Håkan Forss's lean/agile calendar was recommended to me by Martin Burns, to whom I generally listen on this topic. Håkan is an Accredited Kanban Trainer (AKT) and a Kanban Coaching Professional (KCP), and his first post seems pretty good, so I've added it. Also, LEGOs.

10. Performance Calendar

Performance Calendar hails this as the speed geek's favorite time of the year, ostensibly because of the tips it has been offering each December since 2009. It isn't just server optimizations you'll find here, so don't shy away because you're not a system admin. While I had it last year, it hadn't launched when I posted this, so I've rectified that.

11. Free Font Calendar

The Free Font Advent is providing information on and links to, you guessed it, a free font every day. The site is in German, but Google Translate will be more than enough to get the narrative written for each typeface. I picked this one up from Deborah Edwards-Onoro's advent calendar post.

12. Amazon Web Services Calendar

AWS Advent is dedicated to sharing information on features and services available from AWS. If you are an AWS user and have something to offer, as of this writing there are still five slots open for contributions. I also picked this one up from Deborah Edwards-Onoro's advent calendar post.

Not Web Related

The Royal Institution has something called Things to Do with Stuff that might be like an advent calendar, given this statement: Throughout December inspired by the 2014 CHRISTMAS LECTURES, we're releasing little nuggets that'll encourage you to interact with and understand the tech that surrounds us. The very first item is how to make a movie projector with a smartphone, a magnifying class, and a box.

Web Development Advent Calendars for 2013

Ganesha may or may not be stealing chocolate from the advent calendar.

For a few years now web developers around the world have celebrated Saturnalia Christmas with advent calendars covering topics related to the web. Some come and go, but you'll probably recognize a few regulars on this list.

I may have missed some, so please pass them along if you know of any. For those I know are not returning, I have listed them at the end.

1. 24 Ways

24 Ways, the one that most of this think about for web development calendars, is back again. It's been going strong since 2005 and based on its history this year should have some good articles.

2. Perl Advent Calendar

Perl Advent Calendar goes all the way back to 2000 (and back then looked a bit more like a traditional advent calendar, too) and has been dispensing tips for Perl developers ever since.

3. 24 Jours de Web

24 Jours de Web is starting its second year as an advent calendar for web folk. Written in French, it is clearly primarily targeted at French speakers, but a round of Google Translate will open it up to far more readers (like me).

4. UXmas

UXmas is an advent calendar aimed at the user experience community. Coming from Australia, American readers may be thrown just a bit by the schedule. The calendar promises everything from sketches, to articles, to tools, to videos.

5. Webkrauts

Webkrauts has an all German advent calendar, and it also dates back to 2005. It covers general web topics, but being in all-German readers like me will benefit from a Google Translate version of the page.

6. 12 Devs of Xmas

12 Devs of Xmas will also start the day after Christmas and go for 12 days from then. When all the other calendars have wrapped up, you'll still have one to read. The site is silent on its return, but this tweet suggests it's gotten writers and has a plan.

7. Freelancember

Freelancember 2013 is targeted squarely at freelancers. Its daily entries will consist of downloadable gifts in the form of PDF worksheets. Think of this as less about web-tech and more about MadLibs for projects. It has last year's calendar there as well, and so far (as of December 1) I cannot tell the calendar will just be a repeat of last year.

8. Mozilla Developer Network Holidays calendar

Mozilla Developer Network Holidays calendar includes brief links to resources or demos and suggests that you can edit them (if they are MDN resources). It doesn't link to previous years, but you can just hack the URL.

9. SysAdvent

SysAdvent is targeted to systems administrators, but there is a some cross-over to web developers. It has posts dating back to 2008 (and yet I missed it in last year's collection), so there is plenty of good material there if you're too impatient to wait for each day to be revealed.

10. Performance Calendar

Performance Calendar hails this as the speed geek's favorite time of the year, ostensibly because of the tips it has been offering each December since 2009. It isn't just server optimizations you'll find here, so don't shy away because you're not a system admin.

11. Web Accessibility Advent Calendar 2013

Web Accessibility Advent Calendar 2013 is in Japanese, and thanks to the wonderful powers of Google Translate, I can tell you that it is a calendar to make the talk about Web accessibility (based on this statement: Webアクセシビリティに関する話題でつくるカレンダーです。). If you know Japanese, I welcome any corrections. The site Adventar.org appears to host other advent calendars, some about web technologies, some about ramen.

12. Creative Bloq Advent Giveaway

Creative Bloq Advent Giveaway posts aren't collected in one place, so you'll have to find them on the site yourself (I linked the first one). Creative Bloq is the parent of .net Magazine, but you can expect most of its freebies will be targeted toward designers. Also, not all the gifts will be free, some will be discounts.

13. 24 Pull Requests

24 Pull Requests is less an advent calendar than it is an effort to mobilize developers. The goal is to get developers to send a pull request every day in December (up to Christmas), thereby supporting your favorite open source projects. There are even Coderwall badges for those who collect those sorts of things. This entry via Creative Bloq.

Not Returning

A handful of calendars aren't returning this year (so far), but in most cases content from previous years is still available. These include Font Deck's Adfont Calendar (which also skipped 2012), the Fronteers advent calendar (in Dutch, and also skipped 2012), Web Advent (it's taking a year off), HTML & CSS Advent (this is the 2012 calendar), She Said It (no access to old calendar), 12 Days of Podcasts (or at least there is no indication on its site or Twitter).

Not Web Related

ScienceGeek Advent Calendar Extravaganza is not web-related at all, and frankly it isn't promoted nor is it tagged (although I linked to “special” since that tag had the first day and nothing else). It is, however, probably going to be neat stuff given the first day is a giant image of the Christmas Tree Cluster.

Chromatic Type with Pseudo Elements

Typography on the web has come a long way from the days of a handful of web-safe fonts, six sizes, and little other control. With the ability to embed custom typefaces in web pages and exert a great deal of control via CSS, it was a matter of time before old-world printing techniques for multi-colored text came to the web.

Over at Webfonts.info there is a tutorial, Layering type with CSS z-index, which shows how to achieve a multi-colored text effect by stacking the same piece of text on itself and applying a different font specifically meant for this kind of layering. The problem is that you have to duplicate the text for each layer, creating redundant text on the page that, without CSS, can look pretty odd (or sound pretty odd when read aloud by a screen reader). Discussing accessibility or SEO is outside of what I want to cover here, though.

The HTML

For my demo I am relying on CSS pseudo elements and generated content to duplicate the text for me up to two times. I also use the HTML5 data-* attribute to contain the same text value of the content itself. While I could use the title attribute, that would result in tool-tips appearing whenever you put your mouse over the text. For my demo I am using the following block of HTML:

<div>
<p class="chromatic" data-copy="Vote early &amp; vote often.">
Vote early &amp; vote often.
</p>
</div>

The CSS

I am using a new typeface family built from old wood type blocks and specifically built to be layered. More information on the typeface is at the end of this post.

Example 1: Strike Up the Band

Click/tap/select to see demo page.

This example is intended to sit on a background made up of a texture or color different than you want for the text. I use the white fill as the lowest layer, then stack the blue border on top to trap the white text and add the red stars on top from there.

div {
  position: relative;
  margin: 0; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: #fff;
  font-family: 'hwt_american_solidregular';  }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: #00f;
  font-family: 'hwt_american_outlineregular'; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: #f00;
  font-family: 'hwt_american_starsregular'; }

Example 2: That Old-Timey Feel

Click/tap/select to see demo page.

I am mimicking the mis-registration of old-timey print by off-setting the text and applying some transparency to show the texture underneath as well as the overlapping points of the "inks." I also use the distressed font for the letter fill.

When you hover over the text the alignment snaps into place, the letters become opaque, and I replace the distressed font with a solid fill.

div {
  position: relative;
  margin: 0; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: rgba(255,255,255,.85);
  font-family: 'hwt_american_shopwornregular'; }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: rgba(255,51,51,.9);
  font-family: 'hwt_american_starsregular';
  margin-left: -0.02em; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: rgba(0,0,0,.5);
  font-family: 'hwt_american_outlineregular';
  margin-top: 0.02em; }

div:hover p {
  color: rgba(255,255,255,1);
  font-family: 'hwt_american_solidregular'; }

div:hover p::before {
  color: rgba(255,0,0,1);
  margin-left: 0; }

div:hover p::after {
  color: rgba(0,0,0,1);
  margin-top: 0; }

Example 3: Accounting for Different Backgrounds

Click/tap/select to see demo page.

Here I want the text fill to be the same color as the background, which allows me to use three different colors (black for the 3D effect, blue and red). On hover I change the background color of the container, which requires me to swap the bottom layer to the fill font and set it to white.

div {
  position: relative;
  margin: 0;
  background-color: #fff; }

div:hover {
  background-color: #000; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: #000;
  font-family: 'hwt_american_outlineregular'; }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: #00f;
  font-family: 'hwt_american_stars_topregular'; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: #f00;
  font-family: 'hwt_american_stars_bottomRg'; }

div:hover p {
  color: #fff;
  font-family: 'hwt_american_solidregular'; }

Example 4: Using CSS for More Colors

Click/tap/select to see demo page.

Using some CSS drop shadows can help keep the text have more contrast with the background color or texture. On hover I turn the bottom stars red. While red usually looks terrible against blue, adding a white edge with CSS makes them stand out against the blue. It's a subtle effect that shows how you can use CSS in conjunction with chromatic typefaces to create even more effects.

div {
  position: relative;
  margin: 0; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: #44f;
  font-family: 'hwt_american_solidregular';
  text-shadow: 0 0 0 transparent, 0 0 0 transparent, 0 0 0 transparent, 0 0 5px #fff; }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: #fff;
  font-family: 'hwt_american_stars_topregular';
  text-shadow: none; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: #fff;
  font-family: 'hwt_american_stars_bottomRg';
  text-shadow: none; }

div:hover p::after {
  color: #f00;
  text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff; }

Example 5: Swap Fonts and CSS to Make It Pop

Click/tap/select to see demo page.

Using CSS to outline the text gives even more flexibility, so the hover effect with the 3D font and color swap makes the text pop.

div {
  position: relative;
  margin: 0; }

div p.chromatic {
  font-size: 600%;
  margin: 0;
  padding: 1em;
  position: relative;
  color: #fff;
  font-family: 'hwt_american_solidregular';
  text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000; }

div:hover p {
  color: #000;
  font-family: 'hwt_american_outlineregular';
  text-shadow: none; }

.chromatic::before, .chromatic::after {
  content: attr(data-copy);
  position: absolute;
  padding-right: 1em; }

.chromatic::before {
  z-index: 3;
  color: #f00;
  font-family: 'hwt_american_stars_topregular';
  text-shadow: none; }

div:hover .chromatic::before {
  color: #00f; }

.chromatic::after {
  z-index: 5;
  left: 1em;
  top: 1em;
  color: #00f;
  font-family: 'hwt_american_stars_bottomRg';
  text-shadow: none; }

div:hover .chromatic::after {
  color: #f00; }

About American Chromatic

The typeface I used for this demo is HWT American Chromatic, a collaboration between the Hamilton Wood Type & Printing Museum in Two Rivers, Wisconsin and P22 Type Foundry in Buffalo, New York. Some detail about the typeface from the readme file:

The HWT American Chromatic set is a multilayered font set that will allow for thousands of possible color and pattern combinations. The original 19th Century Chromatic that this font set is based upon included 2 fonts. The HWT digital version includes 8. The alignment isconfigured to allow any combination of the 8 fonts to all align when identical text is set and arranged, one on top of the other.

American Chromatic was originally created by Wm. H. Page & Co. circa 1857-59. It was created as a two part chromatic where portions of each color would overlap to create a third color via the blending of semi-transparent inks. Chromatic wood type was an innovative approach to the limits of the technology of the time. To print them as shown in their specimen books required a highly skilled printer.

No, I wasn't paid or given a free font family to write this.

Update: December 9, 2014

Tiffany Brown took this example to its logical conclusion by using JavaScript to automate the text duplication into the data-copy attribute in her post Using attr(), with pseudo-elements and JavaScript.

Copying Content Styled with Text-Transform

Using the CSS property text-transform to automatically shift copy to uppercase has been popular for a while now, but a combination of a recent explosion in the use of that style and my slow move to Chrome as my default browser has caused me to regularly paste text into emails, tweets, and blog posts that is not what I expect.

If you've had to support a WYSIWYG editor you are probably already familiar with the style-purging technique of copying content from a web page or Microsoft Word, pasting it into a plain text editor (Notepad in my case), and then copying it from there to then paste it into your WYSIWYG editor window. WYSIWYG editors have caught up in the last few years and offered options to paste content as plain text, sans formatting.

The problem is that none of those techniques addresses when the lowercase characters have been replaced with uppercase characters (or vice versa). This isn't a style you can purge, the characters are truly different.

Testing It

I was curious to see how the browsers have handled text copied from a page where the content was styled to uppercase. I made the following sample block using the text-transform values capitalize, uppercase, lowercase, and full-width:

This content has no text-transform applied to it.

This content has text-transform: capitalize applied to it.

This content has text-transform: uppercase applied to it.

This content has text-transform: lowercase applied to it.

This content has text-transform: full-width applied to it.

I then fired up the following browsers and copied that block of text from each one, pasting into a Notepad (or equivalent) window each time:

• Google Chrome
• Apple Safari
• Mozilla Firefox
• Opera
• Internet Explorer 6
• Internet Explorer 7
• Internet Explorer 8
• Internet Explorer 9
• Internet Explorer 10 (beta)
• Apple Mobile Safari on the iPad
• Apple Mobile Safari on the iPhone
• Android Browser
• Mozilla Firefox Mobile
• Opera Mobile

Results

All the Webkit browsers (Safari, Mobile Safari, Android Browser, Chrome) behaved the same. They each kept the capitalized text (and the lowercase initial character, where it was styled that way):

This content has no text-transform applied to it.

This Content Has Text-Transform: Capitalize Applied To It.

THIS CONTENT HAS TEXT-TRANSFORM: UPPERCASE APPLIED TO IT.

this content has text-transform: lowercase applied to it.

This content has text-transform: full-width applied to it.

On a side note, screen reader NVDA pronounces the word "it" as "IT" (eye-tee) when it has the text-transform: uppercase style applied. This happens regardless of browser.

Workarounds?

I installed some Chrome extensions that promise to remove all formatting, specifically Copy Plain Text 0.1, Copy Without Formatting 0.31, and Plain Text Copy And Paste 1.1.0. None of them revert the text case back to what it is in the source code.

I went to both the CSS 2.1 and CSS3 specifications to see if there is direction to browser makers on how to treat text that has been styled with text-transform, but I see nothing defining how browsers should put that content into the clipboard.

Ugh

I have an issue with how Webkit handles this. The fact that it breaks from my experience with other browsers, and thus my expectation, is more my issue. I can't hold Webkit responsible for that. I can, however, hold Webkit responsible for requiring me to either view the source code or open it in another browser to copy the unmodified text.

I feel that changing case is not just technically a matter of changing the specific character entity, but it also changes the meaning of the text when taken out of context. For example, let's say I write a blog post titled Adrian Likes Bananas, style it with a special typeface and shift it to all caps. This reads differently when someone copies it (without my custom typeface that softens the all-caps effect) and tweets the "shouted" version of the title, ADRIAN LIKES BANANAS. It actually makes the title read as if it's gone … bananas.

Add to this the unintended acronymization (look, a new word) by screen readers as I show in the it/IT example above, and you run a further risk of creating a confusing block of pasted copy when pulling from Chrome.

I am curious if others feel the same way as I do, or have a different expectation. Bonus if someone can point me to where the W3C specifications define how a user agent should treat this styled content when posted to the clipboard.

Thanksgiving, Social Media and Tech Support

Does this Foursquare map of holiday travel look like a turkey to anyone but me?

Three years ago I hosted Thanksgiving at my house, tweeting photos of the bird and small brush fire. Two years ago I wrote a post Enjoying Thanksgiving with Social Media and then wrapped my car around a lamppost instead of enjoying it. Last year I ran with the topic again and wrote Thanksgiving and Social Media, Redux, had a lovely meal without crashing, and mourned the coming doom of my favorite photo sharing site.

This year people are trying to make it different, and I don't know that I like all of the suggestions.

My not-so-local grocery store is using social media to help people who might be in a bind, offering to help folks who tweet it with the #Turkey911 hashtag, something that is happening across the country. Having quick access to someone who can help you is far better than calling the real 911, and is something that we just couldn't do very easily a few years ago. At least not without calling the one family member that maybe you don't want to tell that you are struggling.

Wait, what's that typeface? You want to be taken seriously?

Much as I'd like to talk about the typeface used in the photo I lovingly stole from the Atlantic article, Forget Shopping, Friday Is Update Your Parents' Browser Day!, I'm not going to. Instead I am going to marvel in awe at the suggestion that younglings sneak off to their parents' computers (insert grandparents, aunts and uncles, elder host, etc.) and fiddle with them. The article at least counsels the intended saviors (but instead unwitting harbingers of doom) not to move their parents to a new browser, but to at least try to keep them using what they are used to. There are two key problems with this:

1. The browser will work differently, whether within the UI or just from how pages look;
2. Some machines just can't be upgraded without slowing them or upgrading them;
3. Most IE6 offenders (who I suspect the article is truly targeting) are corporate users who can't change it (and aren't hosting you in their office).

Those first two will result in needless frustration on the part of your parents (elders) and deserved tech support hassle for you.

Gizmodo took this creepy photo from True American Dog.

For much of my family they only know that I "work with computers." While it is somewhat accurate (although nearly everyone works with computers nowadays), to them it means I can fix them along with any other electronic device ever invented. Since I tend not to wear my "No, I will not fix your computer" T-shirt to more formal events, I am often assaulted with the kind of help desk questions that make 11-year-olds cringe.

Gizmodo feels my pain and is trying to help with its article How to Keep Thanksgiving From Being a Family Tech Trainwreck. Though the article attempts to keep your hassle to a minimum, it also recommends you upgrade, nay, crossgrade your parents to a whole new browser. Don't be a twit, you'll get calls forever. Otherwise the article offers good advice — answer their questions for them, not for you. Pushing your parents to some new bleeding edge tech is just more hassle for you in the long run. Pay attention to what tech they complain about (is the TV remote to complicated? do they struggle with the computer set-up at their job?) and steer clear of creating an analogous situation.

If you really want to help, make notes of everything you do and pass them down to your children. Then when you are struggling with new technologies in your old age, you can justify your smugness at how new technology has it all wrong and your children can justify their pity for you.

MOAR!

Now go relax. Read The Oatmeal's comic on Thanksgiving as a Kid vs. as an Adult. Prepare for where you'll site using College Humor's Thanksgiving Seating Chart. Take this Map of Thanksgiving Dinner to plan your assault on Crudités Dam. Go over to the Opera site (the folks who make the browser, not the faster-than-light neutrino source) and weigh in on whether or not the lucky bird should live. In short, disregard your family and stare at your computer/phone all day, just like the moody teen we all truly are.

Don't Let HTML5 Become the New DHTML

This photo represents some of the technologies (pint glasses) that HTML5 (t-shirt) is thought to encompass (drink). The horror of that concept is represented by the hands (defensive wounds coming).

I had the pleasure of sharing some pints with Bruce Lawson and Chris Mills last week in London. While discussing what bands are emo versus punk rock and during an exchange of favorite phrases to refer to the chronically daft, we touched on HTML5 and its perceptions a bit.

This thought process was rekindled just this week when I got in a discussion with a not-very-technical manager of web projects who insisted on mobile support and decidedly CSS3-based styling by implementing HTML5. The key here is the insistence on using HTML5. For a little context, we use HTML 4.01 Transitional for our projects. It's a valid and complete specification. It allows us to use things like WOFF, CSS3, AJAX, support mobile devices and so on.

I understand that many have co-opted "HTML5" as a brand for a suite of new technologies (most of them even from the W3C or WHATWG). I do not accept that, however, because it confuses the point when it comes time to make choices about technologies. This is a battle I have already fought repeatedly back when DHTML (and IE4!) became the rage and I had clients asking what technologies I would use to build their pages — insisting in advance that it be DHTML. I could explain that DHTML was just a terrible term coined to mean HTML4, CSS and JavaScript, but clients didn't care. It didn't matter to them. Good for them.

For developers and the people that manage them, including those who write on these topics, I have a different expectation than I have from clients. Allowing HTML5 to mean CSS3, geolocation, H.264, or any other technology just makes it harder on us who work in this space. A technology for a project should be chosen based on the goals at hand, not because a client insists on it because of a misunderstanding of a brand or because the press release will sound great when citing how cutting edge everyone is. Most importantly, a technology should not be chosen because of confusion over terminology — least of all when that term actually refers to one particular specification.

Please, fellow developer/writer/manager, make an effort to understand the technologies you reference so you do not confuse other developers/writers/managers, set incorrect expectations with clients, or generally demonstrate that you do not get it (especially if you want to work for me).

I have written on this extensively (with many links in each article that are to further details not written by me):

• W3C Clarifies HTML5 Logo Is for HTML Only
• HTML5 Finally Gets... a Logo?
• Google, Arcade Fire Confused on HTML5
• Google Doodle: Bouncy Balls Aren't HTML5
• HTML5 and CSS3 Confusion

If you are a writer (whether a journalist, blogger or analyst) then please take a few moments to read this useful and informational post: HTML5: notes for analysts and journalists (also not written by me). There will be a quiz. I don't know when, but there will be a quiz.

Now, to reveal how Bruce and Chris really felt about the HTML5 confusion:

Here are posts from both Bruce and Chris discussing this confusion, within the context of the new HTML5 logo muddying the point earlier this year:

• On the HTML5 logo, by Bruce Lawson on January 18, 2011.
• HTML5 logo: be proud, but don’t muddy the waters!, by Chris Mills on January 18, 2011.

Two Advent Calendars for Web Developers

One of the best parts of December, regardless of whether you believe in Christmas or that it belongs in December, is the fun of the advent calendar. As a kid I used to look forward to jamming a new piece of creche-themed chocolate (chocolate stablehand, anyone?) into my mouth every morning before breakfast. Now that I am a little older and can wait until after breakfast, I can also appreciate more evolved advent calendars.

24 Ways

Today marks the start of 24 Ways, an article-a-day site presenting web design and development posts from authors such as Dan Mall, Simon Collison, Richard Rutter, Cennydd Bowles, Sarah Parmenter, Veerle Pieters, etc. The site has been dispensing holiday nuggets ever December since 2005 and, based on past years (2005, 2006, 2007, 2008, 2009), this year will have some gems. Last year I had a write-up on 24 Ways as well (24 Ways Is Back Over 24 Days), and I can tell you that I have referred back to some of the posts often.

You can find daily updates right on the home page, or by following 24 Ways on Twitter (@24ways), Facebook and/or following the RSS feed in your favorite aggregator (full content of each article is in the feed).

This year 24 Ways is changing it up and also offering a printed annual with all the 2010 articles with all the proceeds from the sales to be given to UNICEF. The printed version of 24 Ways is only on sale during December 2010 (for £8) and will be printed at some point after that. You can read more and place an order at the 24 Ways Annual site.

Adfont Calendar

Fontdeck has created its own advent calendar, or its Adfont Calendar (see the image above). Each day a user can select the appropriate "drawer" to access another free web font special. Here's the cool part about it — these are web fonts.

Before you get too excited, it's clearly a sales promotion, but at least you get to try out some new typefaces and enjoy a discount to buy the whole thing. According to Fontdeck, all of their web fonts are free to trial for up to 20 visitors, but the fonts in the Adfont Calendar are also free to upgrade for use on a web site with up to 1 million page views. You will need to sign up for an account and provide Fontdeck with the URL of the site on which you will use the typeface. Once you do that, Fontdeck provides you with code to link to the CSS file and the appropriate CSS to use in your site.

I signed up for today's free font, Museo 900. All I had to do was create my account and then click the big red "Purchase font licenses" option. Since it's a $0 annual license, I wasn't too concerned about clicking the button (but I shouldn't count on it lasting past December 1 of next year). I was presented with a block of text that, comfortingly, read:

Thank you! We've upgraded this account to unlimited use – now all your site visitors will see the fonts.

And that's it. It looks like it's good to go. Now, today's offering isn't exactly the typeface I would choose for my site, so I will be visiting daily to see what other typefaces open up this month.

If you are really itching to play around with web fonts and want more options, check out the article I wrote in July, Trying Google Font Previewer.

Trying Google Font Previewer

I'm going to make the assumption that if you are reading this you have at least a passing interest in typography on the web and have heard about Google's new font preview tool. There are already plenty of articles talking about how easy it is, how Google hosts the typefaces, how licensing isn't an issue, and so on. Some of them are linked at the end of this article, so go read up. As such, let me just dive right into the piece I find most interesting — the implementation.

I started to play around with Google Font Previewer by dropping code samples onto my development site. I tried to see how many typefaces I could embed, how I could mesh the code into my site, how easy it would be, and how it would look in different browsers. The screen shot below (from Google Chrome) shows my site with three of the typefaces in place: Molengo for the overall copy, IM Fell DW Pica SC for the headlines, and Reenie Beanie for the banner text with my name. You won't see this on my live site because this is, after all, only a test and I am not writing a ransom note.

In order to use these typefaces I needed to drop three references to the Google typefaces into the head of my document (one for each typeface):

<link href="//fonts.googleapis.com/css?family=Molengo:regular" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Reenie+Beanie:regular" rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=IM+Fell+DW+Pica+SC:regular" rel="stylesheet" type="text/css">

From there I simply found the appropriate selectors in my CSS file and added the following styles (you'll note that I edited them heavily from what the tool provides):

body {
  font-family: 'Molengo', Trebuchet, sans-serif;
  font-size: .82em;
  font-weight: 400;
  word-spacing: -0.1em;
  line-height: 1.6em; }

h1 {
  font-family: 'IM Fell DW Pica SC', serif;
  font-size: 25px;
  text-shadow: 2px 2px 2px #333;
  line-height: 1em; }

#Banner p#Title {
  font-family: 'Reenie Beanie', serif;
  font-size: 100px;
  font-weight: 600;
  text-shadow: 4px 4px 4px #333;
  line-height: 1em; }

You can see that I played around with font sizes (switching between using ems and pixels), font weight, drop shadows, and even adding an alternate font in case the user cannot see the selected typeface. I then loaded up my most current browsers on my Windows machine (my Mac and Ubuntu machines are hiding) and ran the site through each, comparing and contrasting. The image below shows a representative slice of the page with all three typefaces loaded in each browser. Click the image (or use whatever input device you prefer, such as your meatstick) to see the full-size screen shot. Browsers used in the test:

• Internet Explorer 8
• Chrome 5.0.375.99
• Safari 5.0 (7533.16)
• Firefox 3.6.7
• Opera 10.6

I noticed the browsers were generally consistent on the font scaling and weight, with minor differences in anti-aliasing and line-height. Shadows showed greater variance among the browsers. Opera seemed to have a whole different idea of font weight, size, and anti-aliasing, but wasn't so far out of the park that it was unusable. Most interesting was how punctuation was treated. Note how only Internet Explorer and Opera show the commas in the tag-line under my name, or after the word "project" in the first sentence. Chrome, Safari, and Firefox each lost the commas altogether. While I am comfortable with the other display differences, losing punctuation is a deal killer for me.

Overall, the Google Font Previewer is a great way to quickly select and style type, drop it into your pages, and get it done quickly enough to go get an ice cream before your Dallas reruns. However, take some time to clean up the CSS it provides so that it matches your site coding style and isn't full of unnecessary declarations (do you really need to define word-spacing if you aren't changing the browser defaults?). Consider adding other, standard typefaces into the list as back-ups. Once you've done that, make sure you fire up your newly-typographized page in a few different browsers and are comfortable with the results. Those punctuation marks can be a killer, so check those. Don't limit yourself to your own browsers, either. Go find some variety and give the page a spin in alternative browsers, older browsers, and even mobile devices. You just might find that you added a style that works well with current browsers, but blows up the version of Netscape 4.x sitting on your grandmama's old Centris 610.

Related

• New Google Font Previewer - Webfonts Easier and More Fun
• Google Font Previewer
• Test Drive Your Type With Google Font Preview
• HOW TO: Implement Google Font API on Your Website
• Google Makes Custom Web Typography Ridiculously Easy

ALL-CAPS: Harder to Read?

Susan Weinschenk, Ph.D. wanted to write an article about why it's harder to read text set in all-caps than text set as mixed case. The argument for this has centered around how people read words — recognizing a word shape from its letters, whereas an all-caps word has no unique shape. She started to research this idea for her article but could find little to support it. Her article, 100 Things You Should Know About People: #19 — It's a Myth That All Capital Letters Are Inherently Harder to Read, outlines a different method for how letters and word shape work to make it easier for people to read.

In her research she found that people respond to letters they recognize and anticipate, essentially recognizing letter sequences within a word, not the shape of the word. Because of the eye's jumpy nature, thanks to saccades (great article in an old Scientific American issue), your eyes essentially leap ahead a bit and leverage peripheral vision to recognize letters and, as a result, words. A reader can generally pick up 15 letters at a time this way.

From here she argues that text set in all-caps isn't harder to read by its nature, readers just don't have much experience with it. Readers will still take longer to read it, so there is no reason to assume the difference in speed is a myth. They can be trained, however, to bring that speed up.

There is a contrary viewpoint to this, however. A dyslexic writer at the Daily Kos has posted her own plea for writers (blog commentors, etc.) to avoid using all-caps in their comments, posts, articles, etc. This writer claims that she relies on the shape of a word:

However letters mean little to me still I read by a form of pictogram system. Every word has a shape therefore I read the word by its visual form and not its content. [...] [W]hen someone writes in all caps I just cannot see the shape of the intended word [...] I know quite a few dyslexics of varying severity and know that word form is important to many.

In short, while it may be possible to train a reader to recognize all-caps, you certainly won't train your users to do it. Nor do you want to be the application, web site, book, journal, etc. that drives people away in such a misguided attempt. Even if you did manage to train your readers, you would clearly be leaving some selection of dyslexic users out in the cold, perhaps not to return (or worse, to recommend against reading to all their friends).

Architects and engineers who are used to reading all-caps may be excluded from the first part, but I am in no position to form a focus group to test that theory for the scope of this brief piece.

Bulletproof @font-face Syntax (reprint)

Paul Irish has gone ahead and created a block of CSS that we can reliably embed into our pages that will import .eot and .ttf/.otf font files. In his article Bulletproof @font-face syntax, he breaks down the various options and their support, providing arguments for and against each. In the end, he provides what he considers the best method to declare your @font-face styles in your CSS:

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'), 
         url('GraublauWeb.otf') format('opentype');
}

If you can support (generate) WOFF or SVG typefaces, then he provides a slightly expanded block of code that can support Chrome 4 and Firefox 3.6 (neither of which has been released yet):

@font-face {
  font-family: 'Graublau Web';
  src: url('GraublauWeb.eot');
  src: local('Graublau Web Regular'), local('Graublau Web'),
    url("GraublauWeb.woff") format("woff"),
    url("GraublauWeb.otf") format("opentype"),
    url("GraublauWeb.svg#grablau") format("svg");
}

Firefox 3.6 to Support Web Open Font Format

Mozilla's developer blog today posted that they have added support for the Web Open Font Format (WOFF) to Firefox 3.6. Firefox 3.5 gave us support for linking to TrueType and OpenType fonts, but this takes it a step further to support a format that is more robust for two key reasons:

1. WOFF is a compressed format, resulting in files smaller than an equivalent TrueType or OpenType font.
2. It avoids DRM and domain labels by containing meta data about its source, garnering support from typeface designers and foundries.

If you want to see this in action, you'll need to grab a Firefox 3.6 nightly build until the full release is out the door. If you should feel compelled to do that, the nice folks at Mozilla have provided a sample block of CSS that uses the @font-face rule to link to a WOFF font:

@font-face {
  font-family: GentiumTest;
  src: url(fonts/GenR102.woff) format("woff"),
       url(fonts/GenR102.ttf) format("truetype");
}

body {
  font-family: GentiumTest, Times, Times New Roman, serif;
}

Structured this way, browsers that support the WOFF format will download the WOFF file. Other browsers that support @font-face but don’t yet support the WOFF format will use the TrueType version. (Note: IE support is a bit trickier, as discussed below). As WOFF is adopted more widely the need to include links to multiple font formats will diminish.

If you are fortunate enough to have a build of Firefox 3.6 already up and running on your machine, go to a test page using ff Meta set up by the nice folks at edenspiekermann (if part of the name is familiar, Erik Spiekerman is the designer of the Meta family, and if the typeface is familiar, it's what we use at Algonquin Studios). The image below shows how that page looks in Firefox 3.6 using ff Meta (left side) and how it looks rendered in Internet Explorer 8 (right side).

Because IE8 only supports the EOT format, the blog offers some code to account for IE8 in the CSS. Because IE8 doesn't understand the format hints, it will parse the hints as part of the URL, resulting in requests to the server for files that don't exist. The end user will see things just fine because of the EOT reference, but your logs will show some odd 404s as a result of this technique. The Mozilla post has more details on this and some other issues. The code to do this:

@font-face {
  font-family: GentiumTest;
  src: url(fonts/GenR102.eot);  /* for IE */
}
 
@font-face {
  font-family: GentiumTest;
  /* Works only in WOFF-enabled browsers */
  src: url(fonts/GenR102.woff) format("woff"); 
}

The main Mozilla blog has a post today listing the supporting organizations with the following endorsement:

We endorse the WOFF specification, with default same-origin loading restrictions, as a Web font format, and expect to license fonts for Web use in this format.

Updates

• font_dragr: a drag and drop preview tool for fonts
• after Firefox 3.6 – new font control features for designers