Menu Search
Jump to the content X

Smashing Daily #28: Hyphens, Subpixels, Shiny Things


In this edition of The Smashing Daily we have an incredible article with an almost invisible (but very important) technique, articles on JavaScript, CSS, accessibility, design and workflow, an an amazing collection of shiny things. Enjoy!

Applying Macrotypography For A More Readable Web Page
Here’s an interesting article about macrotypography and how it can have a positive influence on readability. The article is filled with examples. The weird thing is that it is pretty hard to see the differences in each step of the process—but if you compare the initial design to the end result, the difference is clear. A very good article on design by Nathan Ford. Every Web designer should definitely read it and understand it.

Good text layout

CSS media queries in JavaScript, Part 2
Media queries in JavaScript… we often need them, but how do they work? Nicholas Zakas wrote this second article on a rather complex subject.

Content Choreography in practice
A while ago Trent Walton wrote about content choreography, the idea that the source order of a Web page might not always be in the optimal visual order. Jordan Moore experimented a bit with this idea and created a nice demo which uses flexbox.


Pure CSS scrolling shadows with background-attachment: local
Here’s a great visual CSS trick you can use when you have a section of your page that may or may not scroll, depending on the content. Lea Verou explains how it works. Looks great, and it works in many modern browsers.

Mocking Up Is Hard To Do
The people at Bearded have decided to stop making mock-ups in Photoshop. In this article they explain why, and how they are doing it now. I especially like the first reason they give as to why mock-ups in Photohsop are attractive.

Subpixel layout coming to WebKit
Subpixels layout is a good thing, and Lennart Schoors explains why, in yet another handy bite-sized Bricss.

Hiding visible content from screen readers with aria-hidden
Hiding content from everybody is easy (we know how to hide content from sighted users while showing it to screen readers). But how do you hide content from screen readers while keeping it visible in graphic browsers? Roger Johansson explains.

Automatic line breaks in narrow columns with CSS 3 hyphens and word-wrap
On international websites, on websites where content changes a lot and on websites with a fluid of responsive layout you want to be able to use hyphens to break words. This used to be impossible (or at least, that’s what we thought). Roger Johansson explains how it works.

Last Click

Shiny Demos
The Opera Developer Relations Team created this great collection of shiny demos—things that you can do with current Web technologies in (many) modern Web browsers. There’s some excellent stuff in here—as you might expect—like the hilarious Hixie Keyboard, and the incredible Real Life Color Picker which creates a pallet using your webcam (probably only works in Opera). Some amazing things in here, well worth your time!

Shiny demos

Previous Issues

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

Smashing Book #5

Hold on tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? For example, Smashing Book 5, packed with smart responsive design patterns and techniques.

↑ 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

Yay! You've decided to leave a comment. That's fantastic! Please keep in mind that all fields are mandatory, comments are moderated and rel="nofollow" is in use. So, please do not use a spammy keyword or a domain as your name, or else it will be deleted. Let's have a personal and meaningful conversation instead. Thanks for dropping by!

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