Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Smashing Daily #22: SVG, Confusion, CSS4

The Smashing Daily is filled with good stuff today: masking text, a confusing Rubik’s Cube, CSS4 selectors, the T-shaped specialist, stacked image sprites, the Kember Identity, and much, much more. Enjoy!

Text masking — The standards way1
Lea Verou shows us how to properly mask text: not by using some sort of obscure proprietary WebKit-only CSS, but by using SVG. This SVG technique works in all modern browsers.

Text masking the right way2

In this document Nicolas Gallagher briefly explains why it is important that “all code […] should look like a single person typed it, no matter how many people contributed“. The rest of the document is a CSS code styleguide. Definitely a must-read if you work in teams (or if there is a chance that one day someone else might have to work with your code).

What’s slated for CSS4 Selectors?4
I’m already happy with the immense power of CSS3 selectors. But when these CSS4 selectors David Storey explains get implemented, I’ll probably walk around with a silly smile forever. Powerful stuff!

HTML5 Rubik’s Cube5
Here’s an insane example of what can be done with current Web technologies (JavaScript and CSS): a working Rubik’s Cube. On devices that support it, it uses the accelerometer to rotate the cube which results in an hilariously confusing usability issue where gestures can be reversed. Great to see something like this, nevertheless.

A cube6

The rise of the T-shaped developer7
As Web development gets more complex and mature, we get more specialized developers. Martin Beeby explains why we Web people need to add appreciation to other fields, like user experience, touch interfaces, context-driven animations and what JavaScript can do. He doesn’t say we must all turn into those rare omni-talents, but rather we have to be specialists with a broader knowledge.

HTML5 Bookmarks8
Do you need more to read on a daily basis? Too many words on The Smashing Daily? HTML5 Bookmarks seems like a great feed to follow. Some good bookmarks in the aside as well.

Oops! I ruined your life. :)
A good in depth rant about funny error messages. I especially like the part where the author Golden Krishna compares how we react to certain behaviors if they are done by babies or done by adults.


SVG Stacks
Image sprites are great for reducing the amount of HTTP requests, but they can be pretty hard to use: you have to calculate the background-position offsets. Wouldn’t it be great if you could just stack the images? It turns out you can do that with SVG and the :target selector. Simurai shows us how it works.

Last Click

The Kember Identity
The Kember Identity is a string which, when hashed, returns itself. Elliott Kember tries to find it with the help of an ever-increasing list of nerds. You should get on that list—you can even win some money with it when you find it!

The Kember Identity

Previous Issues9

For previous Smashing Daily issues, check out the Smashing Daily Archive10.


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10

↑ Back to top Tweet itShare on Facebook

Vasilis van Gemert is the Principal Front-end Developer at Mirabeau in The Netherlands and a board member of Fronteers. His aim is to close the gap between design and (front-end) development. He believes the excess of knowledge he has can be better used by others, by more creative and smarter people. You can follow him on Twitter.

  1. 00

    No comments have been posted yet. Please feel free to comment first!
    Note: Make sure your comment is related to the topic of the article above. Let's start a personal and meaningful conversation!

Leave a Comment

You may use simple HTML to add links or lists to your comment. Also, use <pre><code class="language-*">...</code></pre> to mark up code snippets. We support -js, -markup and -css for comments.

↑ Back to top