Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

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 Barcelona, dedicated to smart front-end techniques and design patterns.

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 Page1
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 layout2

CSS media queries in JavaScript, Part 23
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 practice4
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.

Contentchoreography5

Pure CSS scrolling shadows with background-attachment: local6
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 Do7
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 WebKit8
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-hidden9
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-wrap10
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 Issues11

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

Footnotes

  1. 1 https://www.smashingmagazine.com/2012/05/02/applying-macrotypography-for-readable-web-page/
  2. 2 https://www.smashingmagazine.com/2012/05/02/applying-macrotypography-for-readable-web-page/
  3. 3 http://www.nczonline.net/blog/2012/01/19/css-media-queries-in-javascript-part-2/
  4. 4 http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography
  5. 5 http://www.jordanm.co.uk/post/21863299677/building-with-content-choreography
  6. 6 http://lea.verou.me/2012/04/background-attachment-local/
  7. 7 http://blog.bearded.com/post/21447195970/mocking-up-is-hard-to-do
  8. 8 http://bricss.net/post/22718920352/subpixel-layout-coming-to-webkit
  9. 9 http://www.456bereastreet.com/archive/201205/hiding_visible_content_from_screen_readers_with_aria-hidden/
  10. 10 http://www.456bereastreet.com/archive/201204/automatic_line_breaks_in_narrow_columns_with_css_3_hyphens_and_word-wrap/
  11. 11 www.smashingmagazine.com/the-smashing-daily-archive/
  12. 12 www.smashingmagazine.com/the-smashing-daily-archive/
SmashingConf Barcelona 2016

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? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ Back to top Tweet itShare on Facebook

Advertisement

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