Alpha channel

I’m not much of a visual designer, but here’s a subtle little use for alpha channel I found while build a related episode feature. (You may have to squint a bit here or alternatively zoom in.)

In the before pic, we have dark text on a dark-and-light texture:

The text blends into the background too much, so we can sharpen it up with a subtle background (#eee):

Better, but observing closely shows the discontinuity. So instead of full light-gray, let’s blend it into the background. Here I used a 0.5 alpha channel (rgba(240,240,240,0.5)) and to make the transition even less jarring, a 5 pixel border radius too. (I suppose I could have added a box shadow for max combo.) I think it’s considerably sharper now, but without any noticeable background.

Amazon’s Pure CSS Solution to Avoid Cutting Off Text

Amazon is using a nice CSS trick to truncate a text block without showing half-lines (like someone cut the document horizontally). The problem is that CSS “overflow: hidden;” is a crude creature that will brutally cut lines off halfway through like a 1970s dot-matrix printer. There’s no “overflow hidden, but jeez be gentle about it okay” property. So this is a workaround, but it does impose a change on the UI…the fading text on the bottom.

Using Devtools for the image below, I’ve enhanced the mask with outline and gradient colour, and also filled the block with text to build a continuous paragraph on the bottom.

There’s a semi-transparent gradient mask in front of the content. The mask is mostly clear, but has a white band on the bottom 15%. This band is turquoise for illustration purposes here. So this bottom band covers up text on the next line without occupying too much whitespace. You’ll notice the band starts where the bottom line ends. So the bottom line is already fading, and then BOOM! It’s all white below that.

The mask is 50 pixels, so there will be about 45 pixels (85% of 50px) transition from full text to fully-transparent text, followed by about 5 pixels of white.

A side note is the layout technique for the mask. Probably basic for most CSS designers, but not how I would have done it. It’s simply using standard flow, but with position: relative to shift the mask up 50px, and a 50px negative margin to ensure the mask doesn’t actually affect the flow. (I would have done it by making the whole thing position relative, and absolute elements inside it. This technique is much simpler.)

I found this technique via StackOverflow a little while ago, as mentioned here earlier, so I was chuffed to spot it in the wild, and on Amazon no less.

Update: Syd Lawrence points out that it’s worth using pointer-events: none on the mask. This is the CSS property that makes the front layer porous, allowing mouse clicks to cheekily slip through to the element behind it.

HTML5 Full Screen Mode: Quick Notes

Just been playing with full-screen mode in Chrome, which lets any element become full-screen (not just video, as I think it was envisioned in earlier days). Wanting to get this working nicely on mobile devices, I’ve also done some experimenting with graceful degradation / progressive enhancement as it applies to full-screen mode.

Basic Version

Although you can full-screen any element, I decided to full-screen the entire body, then use a kind of classy HTML to show what needs to be shown in full-screen mode. (Mainly because I’m using a component that wasn’t immediately working when I full-screened it directly.)

I’m using a full-screen toggle element, here’s the CoffeeScript:

  1. $('#fullScreen').click (ev) ->
  2.     if document.webkitIsFullScreen then document.webkitCancelFullScreen() else document.body.webkitRequestFullScreen()

Note that you cancel on document (that’s the only thing you can cancel on), but you set it on any element (though you actually can’t set it on document!). Also, note that the user could manually hit escape to exit, so don’t think that you’re always in control of full-screen state. Hence the webkitIsFullScreen check instead of trying to maintain state in a flag variable.

Following the Classy HTML pattern, the CSS here is based on a new pseudo-selector which gets applied to the body element. We can easily decide what to include in full-screen mode. In this case, as the SCSS below shows, I’ve simply elevated the map element above everything else, but knock yourself out.

  1. :-webkit-full-screen {
  2.   #map {
  3.     position: absolute;
  4.     z-index: 2000;
  5.     top: 0;
  6.     left: 0;
  7.     width: 100%;
  8.     height: 100%;
  9.   }
  10. }

And no, it’s not just for Webkit…go check out MDN’s full-screen docs for more info.

Graceful Degradation Version

But what if there’s no full screen mode? We can still make that full-screen toggle useful by expanding content to max out the browser screen, even though the browser itself can’t switch into full screen mode. So here’s another crack at it, where we use the true Classy HTML pattern, i.e. instead of styling according to the built-in full-screen pseudoselector, we make our own “fullScreen” class. If the document is in either :-webkit-full-screen or “fullScreen” state, we’ll max out the important content.

  1. fullScreenEnabled = (typeof(document.webkitCancelFullScreen)!='undefined')
  2.   $('#fullScreen').click (ev) ->
  3.     if fullScreenEnabled
  4.       if $('body:-webkit-full-screen').length
  5.         document.webkitCancelFullScreen()
  6.       else
  7.         document.body.webkitRequestFullScreen()ยท
  8.     else # oh well, at least we can big up the content inside the browser
  9.       console.log('full not enabled')
  10.       if $('body').hasClass('fullScreen')
  11.         $('body').removeClass('fullScreen')
  12.       else
  13.         $('body').addClass('fullScreen')

The style is exactly the same as before, just with two selectors involved. Something like this, in theory:

  1. :-webkit-full-screen,.fullScreen {
  2.   #map {
  3.     position: absolute;
  4.     z-index: 2000;
  5.     top: 0;
  6.     left: 0;
  7.     width: 100%;
  8.     height: 100%;
  9.   }
  10. }

But in practice, for some hair-pulling reason, non-webkit browsers will ignore that entire rule, so I had to duplicate it:

  1. :-webkit-full-screen {
  2.   #map {
  3.     position: absolute;
  4.     z-index: 2000;
  5.     top: 0;
  6.     left: 0;
  7.     width: 100%;
  8.     height: 100%;
  9.   }
  10. }
  12. /* As DRY as mud...but I found this duplication required */
  13. .fullScreen {
  14.   #map {
  15.     position: absolute;
  16.     z-index: 2000;
  17.     top: 0;
  18.     left: 0;
  19.     width: 100%;
  20.     height: 100%;
  21.   }
  22. }

Now the full-screen toggle works for all browsers. But full-screen enabled browsers get the nice bonus of busing out of the browser tab and taking up the entire desktop.

(Again, I confess, this is me messing around with webKit only for now. The graceful degradation stuff does work with Firefox of course, though it could do more than just that. I haven’t used full-screen on Firefox simply because there are other components not working on Firefox, and this post is based on practical experience. It’s well-supported on both Firefox though as well as Chrome.)

HTML5 Fonts: Let’s Make them DRY

The Problem

Much fun can be had designing with the ever-increasing universe of fonts offered by directory’s like Google’s. Photoshop Tamagotchi is a thing of the past as you can rapidly iterate with a few keystrokes. But it’s still a few keystrokes too many …

A niggle with CSS3 fonts is they involve some redundancy. Here’s a real-world example:

  1. @font-face { font-family: Delicious; src: url('Delicious-Roman.otf'); }
  2. @font-face { font-family: Delicious; font-weight: bold; src: url('Delicious-Bold.otf'); }
  3. h3 { font-family: Delicious, sans-serif; }

What happened to Don’t Repeat Yourself? We have “Delicious” mentioned five times here! If we switch from the “Delicious” font to the “Pinboard” font, we’ll need to make five changes. And not everyone uses vim, yo. Moreover, we’ll need to locate a suitable font, e.g. Pinboard, and download it.

I get it, this level of indirection serves a purpose. We can give a handle to the font once and then use that everywhere else. Heck, we could even continue to call the font “Delicious”, but surreptiously switch the “src” to “Pinboard-Roman.otf”. But that wouldn’t be very nice, would it?

Now, a font directory like Google solves part of the problem by explicitly allowing you to link cross-domain to Google. In fact, if you want, it will even generate the stylesheet for you. But you’ll still have the same DRY issue in your CSS – for each new font, you’ll need to include the stylesheet and use it in your CSS.

The Solution

Bottom line, I decided to make this crazy snippet, by manually walking through the font directory and picking out every single possible font:

  1. <link href="|Lobster|Droid+Serif:regular,italic,bold,bolditalic|Nobile|Yanone+Kaffeesatz|PT+Sans:regular,italic,bold,bolditalic|PT+Sans+Caption:regular,bold|PT+Sans+Narrow|Reenie+Beanie|Tangerine:regular,bold|Molengo|OFL+Sorts+Mill+Goudy+TT:regular,italic|Vollkorn:regular,italic,bold,bolditalic|Cantarell|Inconsolata|Crimson+Text|Arvo:regular,italic,bold,bolditalic|Cardo|Neucha|Neuton|Droid+Sans+Mono|Cuprum|Old+Standard+TT:regular,italic,bold|Philosopher|Tinos:regular,italic,bold,bolditalic|Josefin+Sans:100,100italic,light,lightitalic,regular,regularitalic,600,600italic,bold,bolditalic|Arimo:regular,italic,bold,bolditalic|Josefin+Slab:100,100italic,light,lightitalic,regular,regularitalic,600,600italic,bold,bolditalic|Allerta|Geo|Allerta+Stencil|Puritan|Puritan:regular,italic,bold,bolditalic|Cousine:regular,italic,bold,bolditalic|UnifrakturMaguntia|Bentham|IM+Fell+DW+Pica:regular,italic|IM+Fell+English:regular,italic|IM+Fell+English+SC|IM+Fell+DW+Pica+SC|IM+Fell+Double+Pica+SC|IM+Fell+Double+Pica|IM+Fell+Great+Primer+SC|IM+Fell+Great+Primer|IM+Fell+French+Canon|IM+Fell+French+Canon+SC|Coda:800|Raleway:100|UnifrakturCook:bold|Covered+By+Your+Grace|Just+Me+Again+Down+Here" rel="stylesheet" type="text/css" />

I’ll repeat that below for ease of cut-and-paste:

<link href=”|Lobster| Droid+Serif:regular,italic,bold,bolditalic|Nobile|Yanone+Kaffeesatz| PT+Sans:regular,italic,bold,bolditalic|PT+Sans+Caption:regular,bold| PT+Sans+Narrow|Reenie+Beanie|Tangerine:regular,bold|Molengo| OFL+Sorts+Mill+Goudy+TT:regular,italic| Vollkorn:regular,italic,bold,bolditalic|Cantarell|Inconsolata|Crimson+Text| Arvo:regular,italic,bold,bolditalic|Cardo|Neucha|Neuton|Droid+Sans+Mono| Cuprum|Old+Standard+TT:regular,italic,bold|Philosopher| Tinos:regular,italic,bold,bolditalic| Josefin+Sans:100,100italic,light,lightitalic, regular,regularitalic,600,600italic,bold,bolditalic| Arimo:regular,italic,bold,bolditalic| Josefin+Slab:100,100italic,light,lightitalic,regular, regularitalic,600,600italic,bold,bolditalic| Allerta|Geo|Allerta+Stencil|Puritan|Puritan:regular,italic,bold,bolditalic| Cousine:regular,italic,bold,bolditalic|UnifrakturMaguntia|Bentham| IM+Fell+DW+Pica:regular,italic|IM+Fell+English:regular,italic| IM+Fell+English+SC|IM+Fell+DW+Pica+SC|IM+Fell+Double+Pica+SC| IM+Fell+Double+Pica|IM+Fell+Great+Primer+SC|IM+Fell+Great+Primer| IM+Fell+French+Canon|IM+Fell+French+Canon+SC|Coda:800|Raleway:100| UnifrakturCook:bold|Covered+By+Your+Grace| Just+Me+Again+Down+Here” rel=”stylesheet” type=”text/css” />

Now include that in your CSS and you can freely use whatever font you want, whenever you want:

  1. h3 { font-family: Neucha, sans-serif; }
  2. div { font-family: "Reenie Beenie"; }

Production Use

I haven’t tested it, but I’m informed modern browsers will thankfully download only the fonts they need, so this is actually a viable solution for sites which will be frequented only by modern browsers, though obviously the snippet itself is too big for sites where performance is critical.

Unfortunately, IE6-IE8 will actually download every single font specified! So really, you should only be using this for development, and ensure production sites only declare the fonts they need. However, don’t lose site of DRY! In the spirit of Agile, DRY, and Continuous Integration, it would still be worth looking at ways to automate that process, e.g. with a server-side solution that generates the minimalist “link” tag.

Of course, the snippet is limited only to the Google fonts, good enough for my aesthetically-challenged purposes, but the principle could be generalised to encompass other font directories. Or someone in a company which has licensed and/or issued a standard set of fonts via their style guide, could also generate a company-specific snippet fot this purpose, containing all fonts. They could then make this a standard stylesheet which could be linked to from any HTML document.

Photoshop Tamagotchi

… is a wicked expression @psd used in his hardboiled hCards talk at the GTUG event on Chrome and HTML5 the other night.

What’s cool about playing with CSS3 is you can radically muck around with appearance without resorting to graphic editors tweaks, which has always been painfully slow. And partly because of the editors themselves, which make it painful to keep editing-and-saving. ie. every time you save a jpeg, most editors will keep coming up with the same dialog to set quality level, progressiveness, etc.; and then they’ll get you to confirm you want to override the previous file. Oh…and they separate “exporting” to jpeg vs saving in their native format, instead of just doing both.

But mostly it’s because all the mouse-driven tweaking on a GUI graphical editor is just plain slow. And dealing with the file system – saving to the right place and linking to it from the HTML/stylesheet. Lots of overhead.

Some things can be automated by server-side image generation scripts. Tweaking the URL tweaks the gradient, or rounded corners, or angle, whatever. But flexibility lost, not to mention a massive performance and bandwidth drain.

CSS3 does away with all that. You can make all kinds of radical changes in one or two lines. Tweaking from the comfort of your favourite text editor (==vim). Some would say it’s “too easy”. (They are the same people who think spreadsheets shouldn’t include macros because non-programmers might be able to do useful things with them.) Not every project can justify a dedicated visual designer. Most can’t. So now that we have all this power, there’s a need for simple guidance on how to design visually with all these elements. To create passable designs, not masterpieces, which is good enough for most sites. Let’s see that kind of advice from the visual design world!

Events Last Week: Web Fonts, Social Design Patterns, BT Dev Day, Real-Time Javascript

Last week saw a confluence of excellent events. In the same week as a house move, it proved to be a week of much learning and little sleep. I’d hoped to do a better write-up, it never happened, a combination of being too busy and new MAC BATTERIES SUCK, meaning the lappy couldn’t last through the whole session. But fortunately, I have some links to point to. Here’s a quick summary anyway, along with the linkage.

Web Fonts at London Web Standards

@otrops captured the live notes in glorious detail, as did Rob Crowther.

Ben is ideally placed to cover the brave new world of web fonts, being a web maker who studied fonts at uni. He walked us through the evolution of font hacks on the web: image with alt tag; CSS background image with text pushed off the page; rendering with Flash (SiFR); rendering with Canvas or SVG (Cufon, TypeFace.js), using JSON-based font spec data. It all leads up to the holy grail: @font-face.

Great, so we have @font-face, but issues remain: * The foundries – Mark Pilgrim, in no uncertain terms, complains the font vendors are stuck in the dark ages of the printing press, in their resistance to support @font-face. This seems to be changing with WOFF, a web-only format that seems to placate the foundries, who worry their fonts will be stolen. It seems more like a symbolic gesture, since the data could still be converted and in any event the print fonts could still be appropriated, but the foundries are feeling more reassured and making signs they will go along with it. * Performance issue – Bandwidth issues and Paul Irish’s “flash of unstyled text”, where the user notices the font change once the fancy @font-face font has been downloaded. * Compatibility – IE has long supported font-face, but with EOT format fonts, and that remains the case. You therefore need both types of fonts, and licenses will generally not give you both.

Social Design Patterns

I was, needless to say, psyched about this. Yahoo! has been the closest thing to a realisation of the inspiring design pattern vision of the mid-late ’90s. Patterns on the web, for both its own employees and the wider community to learn from and evolve. These are social design patterns mined by Christian Crumlish (@mediajunkie), in many respect the closest thing software has to an analogy of building architecture, where design patterns originally came from.

There are 96 patterns in all and I’m looking forward to poring through them. In these patterns are hundreds of people-years’ experience of observing real-world social systems. In my own pattern work, I’ve found it necessary to articulate the overarching design principles behind the patterns. Pattern languages should be opinionated, so it’s a good thing to make explicit your criteria for filtering design features. Christian has followed this model too, and identified 5 overarching principles:

  • Paving the cowpaths. Facilitating the patterns that are already happening, rather than imposing your own invented process. Also means evolving with your users, ev dogster started as photo sharing but evolved to social network.
  • Talk like a person.
  • Play well with others. Open standards, mashups, etc. “if you love something, set if free”
  • Learn from games.
  • game UI concepts
  • designing the rules, but ultimately letting the people who come into the space finish the experience themselves.*
  • Respect the ethical dimension.

See the wiki or the book for more details.

BT Developer Day

This was an internal conference for BTers in London covering a range of general tech trends, and also being a chance to get together and talk shop. The agenda included talks on Scala, Rails, Kanban, iPhone development, and even a lightning talk from @psd on the horrors and delights of APL.

I gave a talk on Embracing the Web, emphasising open standards and the supreme primacy of Konami Cornification.

Real-Time Javascript

At the Javascript meetup, a great talk on NodeJS and WebSockets. NodeJS is coming on thick and fast, and Makoto Inoue showed how the technology plays nicely with WebSockets. WebSockets are all about Comet-style interaction, so expect to see a lot more of this combo in the next couple years.

Luis Ciprian, visiting from Brazil, gave us an overview of XMPP and talked us through a real-time web app – a basketball score and conversation tracker – using XMPP.