Lauriergracht No. 37

World Literature Opening Phrases Ipsum

thur — Thu, 16 Feb 2012 17:33:51 +0000

In the previous post I referred to Google delicately choosing a paragraph from Franz Kafka’s ‘Die Verwandlung’ as a font showcase bla-bla text.
There is nothing wrong with using the standard Lorem Ipsum text, mind you. Who does not want to use/show the industry’s standard dummy text ever since the 1500s.
(Does make you (look) erudite, scholarly and well-educated: haughtily sprinkling some ‘de Finibus Bonorum et Malorum’ by Cicero … and you are the Man/Woman!)

There are some Lorem Ipsum alternatives. Most of them do not make me happy or smile, to put it mildly, except for the notorious Samuel L. Ipsum Lorem Ipsum Generator (motherfucking placeholder text motherfucker!). You know the guy:

The path of the righteous man is beset on all sides by the iniquities of the selfish and the tyranny of evil men.

Wouldn’t it be great to have a Lorum Ipsum Generator, offering a glorious recapitulation of the World Literature Opening Phrases?

What would I include?
Here are some of my mental bookmarks, all – randomly chosen – sanctifying my soul:

From: Vladimir Nabokov, Lolita, 1955 (first edition) *

Lolita, light of my life, fire of my loins. My sin, my soul. Lo-lee-ta: the tip of the tongue taking a trip of three steps down the palate to tap, at three, on the teeth. Lo. Lee. Ta.

*) This is not a random choice: ‘Lolita’ may not be the finest or most compelling story I have ever read, but Nabokov is a true magician and the above is certainly one of the most beautiful (opening) paragraphs ever written!

Ladies and gentlemen of the jury, exhibit number one is what the seraphs, the misinformed, simple, noble-winged seraphs, envied. Look at this tangle of thorns.

From: Gabriel García Márquez, Cien años de soledad, 1967

Muchos años después, frente al pelotón de fusilamiento, el coronel Aureliano Buendía había de recordar aquella tarde remota en que su padre lo llevó a conocer el hielo.

From: Fyodor Dostoyevsky, Crime and Punishment, 1866 **

On an exceptionally hot evening early in July a young man came out of the garret in which he lodged in S. Place and walked slowly, as though in hesitation, towards K. bridge.

**) Unfortunately I cannot read, write or understand the Russian language.

From: Multatuli (Eduard Douwes Dekker), Max Havelaar, 1859/1860 ***

Ik ben makelaar in koffie, en woon op de Lauriergracht No. 37.

***) Yes, the source of my Site Title.

I especially want to phrase F. Scott Fitzgerald’s ‘Tender is the night’, 1934,

In the spring of 1917, when Doctor Richard Diver first arrived in Zurich, he was twenty-six years old, a fine age for a man, indeed the very acme of bachelorhood.

as well as the complete ‘Der Zauberberg’ (Thomas Mann, 1913-1924), but time and space won’t allow that, I am afraid.

A Wealthy Type Case

thur — Thu, 09 Feb 2012 23:37:58 +0000

Next to all this ‘responsiveness’ there is much – almost feverish – excitement about using non-standard (that’ll be ‘Not Web Safe’, then) Web Fonts. Again, as on the subject of media queries, there are many sound sounding articles written on the subject. (Okay okay, I will never mention that again!)
Curiously I looked at both Typekit and Google Web Fonts.

Browsing the Typekit website I noticed the ‘Try before you buy’ option, or as they say, a ‘Try it for Free’ service with a very limited Trial Library Access. Nice, so I immediately picked the Museo Sans for a starter. The font you are looking at right now. Very stylish, if I may say so.

Notice the small “Fonts from T”-button in the right bottom corner, linking to ‘my‘ Typekit, holding mentioned Museo Sans and the playful CarbonType, the latter for the h1 Site Title, at this moment.

Typekit promises and delivers a fast and easy set up:

create a Typekit account
create a kit (your choice of fonts)
embed 2 lines of code to install the javascript
assign CSS selectors to the different fonts in the Typekit Editor.

I am thinking about upgrading to the Portfolio Plan very soon.

Google Web Fonts offers a different approach.
Just go there,

pick a font,
copy a line of code to link to (or import, or there’s some Javascript as well, where the Google Api calls the AJAX webfont.js) a specific stylesheet and
add the font to your CSS selector(s).

HTML:


@import url(http://fonts.googleapis.com/css?family=Gloria+Hallelujah);

CSS:

font-family: 'Gloria Hallelujah', cursive;

And at Google Web Fonts too, you can start your own Collection. Fast and free.

Listing both methods may look a bit superfluous – just go visit the sites, right? – but it shows in one quick glance how easy it is to build out your very own rich Type Case.

And of course there is the @font-face CSS rule, already supported by Netscape 4 and Internet Explorer 4 ages ago. Another way of allowing web designers to use fonts not installed on end user machines.
Well, I guess designers will start using the Font Services more and more. Quite Rightly So.

Here’s Google’s Gloria Hallelujah in action:

“One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked.” *

*) It is nice to notice Google is displaying the first paragraph from Franz Kafka’s 1912/1915 Erzählung/Narrative ‘Die Verwandlung’:

“Als Gregor Samsa eines Morgens aus unruhigen Träumen erwachte, fand er sich in seinem Bett zu einem ungeheuren Ungeziefer verwandelt. Er lag auf seinem panzerartig harten Rücken und sah, wenn er den Kopf ein wenig hob, seinen gewölbten, braunen, von bogenförmigen Versteifungen geteilten Bauch, auf dessen Höhe sich die Bettdecke, zum gänzlichen Niedergleiten bereit, kaum noch erhalten konnte. Seine vielen, im Vergleich zu seinem sonstigen Umfang kläglich dünnen Beine flimmerten ihm hilflos vor den Augen.”

Some further reading (on Typography, not on Franz Kafka):

W3C, always a good starting point: CSS Fonts Module Level 3
Tim Brown – A.L.A. Article – More Meaningful Typography
SmashingMagazine: Review of Popular Web Font Embedding Services
SmashingMagazine: The @Font-Face Rule And Useful Web Font Tricks
I Love Typography

IFFR 2012: Volkskrantdag Route 5

thur — Sun, 05 Feb 2012 23:46:17 +0000

Histórias que só existem quando lembradas
Valley of Saints
King Curling
38 témoins
Lena

A Tradition and a Treat: the IFFR Volkskrantdag is the last sunday of the annual International Film Festival Rotterdam.
Here are the movies we watched, in this order, and enjoyed on our Route 5.
The trailers and the links to the respective information pages on the IFFR 2012 site:

Histórias que só existem quando lembradas

Testing your responsive design

thur — Sun, 29 Jan 2012 20:21:42 +0000

It is true. The only people resizing their browser windows are the web designers.

Me for instance: I do not proudly possess an iPad or any other tablet. I do not have an iPhone, nor a BlackBerry or any other Internet connected small device. (I do own an ancient Nokia though, from Before Time Was Time!)
So I have to resize my browser windows to test all media query break points. What else?

You could use this testpage with some pre-defined iframes: Matt Kersley’s tool. Whereupon @lensco tweaked that page (Simple responsive design test page) and, at last, points out this Responsive Design Test Bookmarklet. All very convenient for a quick glance.

There are several online emulators as well, like iPad Peek.

And ultimately Opera offers a smooth and stylish desktop Mobile Emulator. As they say ‘Do your mobile development straight from your desktop, and pair it with Opera Dragonfly for advanced debugging’.
The emulator comes with a launcher where infinite instances can be defined.

For this I added a new category: Handy!

Ever so smooth and stylish: that’s Opera for you. I always considered the Opera browser ‘beautiful but superfluous’, but they are some really busy and inventive group of people. Dev.Opera is a great place to sniff around.

My new eclectic building

thur — Mon, 23 Jan 2012 23:55:29 +0000

At last, yesterday evening, I created this responsive site. Fasionably late, as always, I finished this design, economically using media queries, flexibel columns and a baseline grid. In recent years I usually kept my designs inside a 960px wrapper to let it fit a 1024px landscape oriented tablet, but being able to resize the browser windows from 320px to a full 1440px does bring a smile on ~~your~~ my face.
Of course there is nothing new about building fluid designs. There exists an old ‘Fluid vs Fixed’ debate, from the time before screen resolutions were as varied as they are now. To keep it short: because of the controll over the appearance of the layout the disputable outcome often would be ‘fixed’!
But now we carry along – and heavily use – our mobiles, our handhelds and tablets (we keep changing the orientation just for fun), netbooks, notebooks, and we started using the enormous Big Brother in the living room.

Enter the media queries. To quote the W3C Candidate Recommendation page:

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Among the media features that can be used in media queries are ‘width’, ‘height’, and ‘color’. By using media queries, presentations can be tailored to a specific range of output devices without changing the content itself.

When starting any research on responsive design all fingers are pointing at Ethan Marcotte’s – A List Apart Article – Responsive Web Design. And understandably so, although googling the term gives you an abundant list of solid essays and case studies.

Naming Mr. Marcotte “the father of responsive web design” – as I have read somewhere – sounds a bit theatrical to me, though. See for example Marc van den Dobbelsteen – A.L.A. Article – Switchy McLayout: An Adaptive Layout Technique: whatever the technique, the idea was (and is) described as “we just define layout and appearance for a series of screen-width ranges, then find a way to match these layouts with the user’s viewport size”!

So I pottered this new place, incorporating as many media queries/CSS3/HTML5 code, features and tricks as possible. This resulting in a mishmash, cluttered with columns all stretching from a 25% to 33.333333333333333% to 50% to 66.666666666666666% to 75% to 100% width. Naturally I invented as many media query break points as possible … and kept resizing my browser windows like a hinny. Only after I implemented some multi-column elements as well, trying to create an ultimate show off, I hit the breaks!

Then I published my one column (max-width: 40em) WordPress theme, allowing as much white space as possible: the opposite side of The New York Times, to be more precise! I even shook off my addictive longing for a big banner image, on the homepage that is. Never made a more modest mockup!

I will start writing (more) about design and code and some other miscellaneous topics. For now I’ll leave you with my very own Lorem Ipsum default model text I’m not talking about your pigtails.

I’m not talking about your pigtails

thur — Fri, 20 Jan 2012 23:25:19 +0000

but I’m talking ’bout your sex appeal.

This is a reprint from an entry written on Saturday, January 21, 2006.
At that moment I was working for my company in Zaandam.
I was pleased with my job … and very pleased with …

Yesterday evening, before hitting the asphalt back home, I visited the AH store beneath the parking-lot, where these two young people, armed with a video-camera and blossoming smiles, tried to capture passers-by.

Normally I would prefer having my head chopped off before … .

She didn’t have any pigtails, but … well … you know, there was a welcoming sight – countenance and appearance!
She did have that kind of Lonneke Engel pinnule and posture. Not at all that perfect, so perchance even more graceful!

Reflecting on the subject I told them I really wasn’t the man they wanted. They acceded this truth quickly enough but we kept chatting for a while – both guy and girl very relaxed, noticeably enjoying their little project.
They probably have wiped this Ugly Faustus Face already, for all that!

A pleasant encounter.