# Using HTML Entities in Before and After Content

I came across interesting use of content property of ::after pseudo-element.

There was a requirement to append “»” (= &raquo; = right-pointing double angle quotation mark) to “show more” links.

First thought was to use something like:

.show-more:after {
content: " &raquo;";
}

But as content is a generated content entities are not processed.

I did not want to use the character itself for the obvious reason.

After some research I found out it is possible to use unicode hexadecimal notation – e.g. “»” can be written as \bb.

### Demo

.show-more:after {
content: "\a0\bb"; /* space + » */
}
<a href="…" class="show-more">Show more</a>

### Notes

• Sure one can use any UTF-8 character (space = \a0, …)
• \bb, \BB, \00bb and \00BB are all equivalent.
• Excellent support: IE8+ has full support.
• Welcomed by-product: the generated content is not selectable (try it yourself above).

# Yeoman with LESS Bootstrap

Yeoman – if you haven’t heard of it go check it out now! – is an awesome tool for front end developers. And I love it.

However LESS is my preference over SASS, which makes using Yeoman discomfortable. For my and the fellow LESSers’ future use I made a generator, which I proudly present to you, called

# Do Not Put @font-face Inside @media Query

“Roses are red,
Violets are blue,
use mobile first,
and icon fonts too!”

This was told me many times by many people as a universal truth. (Not always in a form of a poem)

I am not a fan of using it unthinkingly every time. However I decided to give it a go in the new project.

### Going smart

OK, so now I have the mobile version, let’s do the desktop design. As I did not need icons in the mobile I shall include them now, right?

@media only screen and (min-width: 720px) {
@font-face {…}
}

It works!

### Everywhere but IE9

IE9 shows squares – as the only one. WTF?

The font is rendered on others sites, so it must work here.

What happens when @font-face is moved to the top of CSS?

It works!

### Why, IE? Why?

We are used that IE does what it want, but this time there is a rational explanation:

At-rules inside @media are invalid in CSS2.1.

CSS 2.1 Specification

This line is not in the current CSS3 Specification. And since IE9 does not know much CSS3 – it refuses to load the font.

Simple.

Update: Old Firefox (e.g. v10.0) behaves the same.

# My 4 Steps Guide to Switch from CSS to LESS in 3 minutes

### Notes:

• This is a kind of proof of concept how easy it is to switch. In real development I would use grunt with recess to automate the task.
• Yes, you need to have node.js and npm installed. But who doesn’t nowadays?
• LESS is a choose we made in our company some time ago. SASS (especially with Yeoman) or Stylus are equally good to use (if not much better).
• Time tracking is a nice feature of smart commits.
• The script was tested in Mac OS X 10.8, but it should work in any UNIX or compatible system.

# Opening a café (Update: discussion)

Update: You can discuss this topic on Branch.

Cafés are awesome places. You can sit there and talk with friends, work or just relax. It does not matter if you spend a few hours every day in one writing a book or just having a quick espresso once a month after a walk with your partner. In a good café you will feel welcomed and somehow disconnected from the outer world.

Christian Stangier

There are many styles of them. One are modern and stylish. Others are more like a pub. Some are new, some have been there for decades. Prices do drastically vary. And the same holds about quality.

There is one style of café I find particularly exciting:

### Café I would run

Many people often think they should buy a bar. But I always wanted to run a café.

My dad and I almost bought an old art gallery and turned it into a café of our dreams about six years ago. Not more than three years ago I had a brainstorm about an ideal café with my friend @ViliamKopecky (oh yes, multiple touch screens and talking avatars included).

As another three years passed, on Wednesday I wrote down how my fantasy (?) café would look like today. The main motto would be:

Not much but only the best

(Yes, I was inspired by Apple)

This is how the motto would transform into real day-to-day practise:

### Menu = { espresso, tea, beer }

• The only coffee available is espresso
The menu would not list all variations, that is no frappuccinos, no lattes and no cappuccinos. These would be offered, of course, if someone asked for them – and so would ristrettos and lungos – but not explicitly listed.
• The only tea available is Dilmah
You can have black, green or fruit tea and it would always come with a Dilmah tag. I have tasted (and tested) a lot of tea brands and I personally enjoy trying new ones but according to the motto I selected the one I found the best together in all types.
• The only beer available is (some smaller local brewery name here)
One beer – great-tasting fabulous-looking Pilsner – is enough.

In the end the menu would look like this:

Espresso – xx Kč

Tea – xx Kč

Beer – xx Kč

(or €x.xx or \$x.xx or whatever currency I would want to accept).

### Atmosphere & style

Although I have a few ideas what the interior should be like – usually contradictory – I would make it to suit the neighbourhood. So no detailed description. Sorry.

There is one notable café – my inspiration and idol: Café Leopold Hawelka in Vienna. Not only it is a must-to-visit place there but it a place to go to Vienna for. BTW the photo above was taken there.

Would (or will) you have a coffee at my place?

# Hands on the New Glif Plus for iPhone 5 and the Cosmonaut

Yesterday in my mailbox I found a long-awaited package from Studio Neat. Inside was the Glif Plus for iPhone 5 and the Cosmonaut stylus.

The Glif Plus was still quite hot as the shipping started at the end of the last week. I think I might be one of the first to receive it!

The feeling of it is very good. And, drawing with this felt-tip pen like stylus is fantastic. Actually I almost did not notice I am not drawing on a whiteboard, but on an iPhone. Well, as said, almost :)

When I attached the Ligature (the metal keyring loop) to the Glif it seamed that it will definitely scratch the iPhone’s back. But it did not! Guys at the Neat Studio licked it into shape and made a 1-2mm gap.

Taking care of these little details made this piece what it is beautiful, smooth and, yes, neat.

TL;DR
I love it, you would too.

P.S. The images in this article have double the size in which they are displayed with 0% JPEG quality. According to @daanjobsis‘s article Retina revolution this should result in smaller images with comparable quality. What do they look like to you? Do you find them in good quality? Let me know.