Smashing Newsletter: Issue #108

This newsletter issue was sent out to 178,999 newsletter subscribers on Tuesday, May 6th 2014. If you are not subscribed yet, feel free to subscribe to our email newsletter1 anytime.

Editorial

Some things just don’t change: SmashingConf Freiburg2 is taking place again this year, on September 15th-16th 2014. Two days, one track, 18 brilliant speakers and 300 fantastic attendees, sharing practical insights about their work. And the best bit: lots of networking with good ol’ German beers in beer gardens, at the very foot of the legendary Black Forest.

Smashing Conference Freiburg 20143

The main focus of the conference are hands-on insights and actionable takeaways — things that have actually worked in practice, and the design/development process behind them. But it will also be a friendly community event with lots of delightful (and mysterious!) surprises along the way.

First confirmed speakers4 passionately care about their craft and aren’t afraid of pushing boundaries: Sara Wachter-Boettcher, Marcin Wichary, Jason Grigsby, Phil Coffman, Josh Emerson, Christopher Murphy, just to name a few. And we have a few hands-on workshops as well. Oh my, tickets are now on sale.5

We can’t wait to welcome you in Freiburg in September! So, have you started packing yet? ;-)

Sunny greetings from the Black Forest,
Vitaly and the Smashing Team (@smashingconf)

Table of Contents

01. Monkey Testing For Web Applications6
02. Don’t Just Scale Down Font, Make It Fit!7
03. The Nitty Gritty Of High Networking Performance8
04. A Free Font That Pays Tribute To Your Stories9
05. Public Domain Images For Free Download10
06. Skala: A Great Photoshop Alternative For Color Picking11
07. A Better Sticky Header Solution For Keyboard-Scroll Capture12
08. Making Input Masks A Little Bit Better13
09. Free Video Chat In The Browser, With WebRTC14
10. The Amazing Years Of Super Heroes15
11. The Hipster Alphabet16
12. Don’t Take Yourself Too Seriously!17
13. New on Smashing Job Board18
14. Smashing Highlights (From Our Archive)19
15. Recent Articles On Smashing Magazine20

211. Monkey Testing For Web Applications

Anticipating uncommon user interactions while developing an application is essential to detect and fix bugs before users ever get to discover them. To simplify your testing routine, you can use a clever idea: unleashing a horde of undisciplined gremlins22 to expose your application to the ultimate stress test. The mischievous but helpful little creatures live in a handy JavaScript library.

Monkey Testing For Web Applications23

Gremlins.js24 simulates random user actions such as clicking and touching anywhere in the window, entering random data, selecting options, clicking checkboxes or moving the mouse over elements that don’t expect it, in order to trigger JavaScript errors. You can trace the gremlin’s actions on the screen and in the console log and monitor the application in the logger. Written for Node.js and the browser, the monkey testing library is fully configurable and adaptable to your needs. Another useful tool to build more robust web applications! (cm)

252. Don’t Just Scale Down Font, Make It Fit!

Text-fitting scripts like FitText.js have been very popular lately and are often seen in headers and banners to create a logo, slogan or teaser. However, if you’re trying to create something like a shuffleboard standing or a leaderboard, differently scaled text in multiple rows is likely to create a messy experience. Font-to-width26 is a yet another text-fitting script, but it offers a very different approach in achieving a pefect fit.

Don't Just Scale Down Font, Make It Fit!27

The script by Nick Sherman und Chris Lewis takes advantage of large type families to fit text nicely within their containers. Instead of scaling down the font-size, it chooses a width or weight variant based on what fits best and then allows for letter-and word-spacing adjustments as needed. Keep in mind that the little tool is meant for headlines and short pieces of text, and isn’t suitable for justifying multi-line body copy. It looks best in browser that support subpixel spacing such as Chrome. The creators promise many more changes and improvements, so be sure to stay tuned on GitHub28. (ml)

293. The Nitty Gritty Of High Networking Performance

Latency is the main bottleneck on mobile. We’ve learned to concatenate and minify our code, style sheets and markup, and we keep reducing the number of HTTP-requests, but we can go just so far. The network latency isn’t going anywhere any time soon, even if we had a decent 4G coverage worldwide. In fact, more bandwidth doesn’t matter (much)30.

The Nitty Gritty Of High Networking Performance31

To deal with latency, we need to understand how it works. Ilya Grigorik’s High-Performance Browser Networking32 is a freely available HTML book that covers the nitty gritty details of latency, networking, bandwidth, TCP, TLS, optimization for mobile networks and application delivery, browser protocols and WebRTC. A good book for understanding the underlying layers of the Web and using them effectively to deliver your websites or apps fast to the client. (vf)

334. A Free Font That Pays Tribute To Your Stories

How special must a font be if just looking at it can spark off the wish in you to write a beautiful story? Calendas Plus34 is that special. It’s a font that can trigger a flood of thoughts in you and lets you picture the words and sentences of a wonderful article or story. It’s a font that not only makes you want to write, but also assures you that it’s capable of giving your words the significance and delicateness they deserve.

A Free Font That Pays Tribute To Your Stories35

The typeface has been completely revised and redrawn over its predecessor Calendas. The new version has a great legibility and elegance and offers a number of stylistic alternates that were not offered by the original, such as case-sensitive features for numeric typography, very elegant swashes and a taller small caps x-height. You can download the regular version of the font by just paying with a tweet or Facebook post, or you can get the complete family font (Bold & Italic) by paying with anything else you like. (ea)

365. Public Domain Images For Free Download

Looking for royalty-free images for your work? You may want to take a look at PublicDomainArchive.com37: it’s a treasure trove of high-quality public domain images found all over the web. Matt, the site’s creator, wanted to have one place to go to where he could find all the high-quality images his heart desired, so he made this one.

Public Domain Images For Free Download38

Please don’t get confused, it’s not a stock photo site but rather a public domain repository. The images aren’t classified by tags, but a story behind the image and the shot in a large resolution are always provided. Worth bookmarking, sharing and using in almost every project! (sh)

396. Skala: A Great Photoshop Alternative For Color Picking

If you’re tired of starting up Photoshop just for picking a color? Are you tired of screenshotting a web page just to find out what the color is? Or are you a developer who wouldn’t need expensive graphic apps at all if it wasn’t for colour picking? Marc Edwards and his colleagues at Bjango just developed the perfect alternative for you, Skala Color40 is a compact and feature-rich OS X colour picker that will surprise you.

Skala: A Great Photoshop Alternative For Color Picking41

Simply install the light-weight tool and start it up from any other Mac application with ⇧⌘C or choose Format → Font → Show Colors. The extensive interface will allow you to pick a color, change saturation and brightness, adjust hue and opacity sliders or save several colors by making use of the clipboard abilities. You can even choose the web format the colour should be saved in, such as RGBA, Hex or HSLA. What are you waiting for? Head over and start picking right away. (ml)

427. A Better Sticky Header Solution For Keyboard-Scroll Capture

Sad news or not, but one-page websites are everywhere, and so are sticky headers. However, they can be pretty annoying for spacebar paginators because sticky headers effectively change the height of the viewport without telling the browser. This results in wrong scroll points and the reader is missing lines of copy unless s/he scrolls up again. How can you avoid this? Well, you can use a clever fix by Tim Murtaugh.

A Better Sticky Header Solution For Keyboard-Scroll Capture43

Tim’s Sticky Pagination Fixer44 captures native pagination-related events, recalculates the height of the viewport and then scrolls the page to the right line. The tool is of course written in JavaScript but does not require jQuery which is great if you’re trying to keep your page on a vanilla diet. Furthermore, it takes into account when you’re using the space bar for other activities such as entering spaces in text fields. The Sticky Pagination Fixer isn’t perfect just yet. Maybe you can help Tim out, accommodating for several other native behaviours such as using space bar for play/pause? (ml)

458. Making Input Masks A Little Bit Better

Input masks that format complex strings of information, such as credit card details, with whitespace or other characters make it easier for a user to confirm that the information entered in a form is correct. However, this common method brings along some accessibility issues46 that can make the form unusable for users of screen readers. To avoid this, Filament Group has released an unobtrusive alternative: Politespace47.

Making Input Masks A Little Bit Better48

The plugin lets users enter their information without any pre-given formatting and injects whitespace delimiters only after the user has blured off of an input field. Once they focuses back into the field, the delimiters are removed again for easy editing.

An interesting concept that seizes this idea is coming from Brad Frost. To make the input process easier without having to rely on an input mask at all, Labelmask49 inserts formatting hints next to a field label and updates them live as the user inputs his information. Once the user leaves the input field, the formatting is applied to the input value. Two concepts that do not only fix accessibility issues, but improve the overall usability of Web forms. (cm)

509. Free Video Chat In The Browser, With WebRTC

Skype and Google Hangouts have become essential for teams working remotely. They’re free and easy to use. However, why do you need a service if you could establish a direct connection using modern browsers? Here are two alternatives that you can use for keeping your remote conversation up. Hutt51 provides a free instant video chat without the hassle of signing up. Simply copy the link to the conversation and pass it on to everyone invited. It works in the browser and is built with WebRTC.

Free Video Chat In The Browser, With WebRTC52

The second one is Talky53 which also offers simple video chat and screen sharing for groups. Like Hutt, the free browser-based application also runs with WebRTC and people can join by simply knowing the conversation link. You can add people or their screens to the video chat and lock unwelcome people out of private rooms. If your conversation partner haven’t shown up yet, you may also play a game of rocker lander. (ml)

5410. The Amazing Years Of Super Heroes

We all have secrets.The ones we keep, and the ones that are kept from us. Teenage high school student Peter Parker has no clue who he really is until he figures out his secret identity as the amazing Spider Man. Don’t we all love super heroes?

Ultimate 75th!55

Behind many well known comic book super heroes such as Spider Man, the X-Men or Captain America stands one big American publisher — Marvel. And this very year Marvel turns 75 and they are celebrating it. It’s a party you don’t want to miss and you can join it at the Ultimate 75th56 — an iconic digital experience that takes you through the amazing history of Marvel’s super heroes. Do you have any idea who you really are…? (ea)

5711. The Hipster Alphabet

So you want to experiment with responsive design and try out your skills in something new. What do you do? Of course, you launch the Hipster Alphabet58, or any other kind of side project to use as a playground. That was exactly Michael Mahaffey’s motivation, who just wanted to better understand the world of HTML and CSS.

The Hipster Alphabet59

His project is a little website dedicated to different kinds of hipsters, from aviators to dreamcatchers to homebrewers and Polaroid fans—not to mention the Zeitgeist hipster, of course! A lovely little project with beautiful graphics, a bit of irony, and a few media queries along the way. (vf)

6012. Don’t Take Yourself Too Seriously!

Most of us creatives in the web community are lucky enough to continuously being involved in work that excites us and fuels our passion. However, loving your work often comes with long hours and we often forget that there is more out there than work. If you’re a freelancer you’re don’t even have the fun guy in your office breaking up your day with the latest joke. Furthermore, creativity just doesn’t happen under pressure so what can you do to prevent severe workaholism?

Don’t Take Yourself Too Seriously!61

Workaholics Anonymous62 is a series of little, well designed comic strips to break up your days. Every Wednesday, there will be another new comic making fun of the workaholic in us. So if you feel the pressure creeps in, take a step back from your work, drink a cup of tea or coffee and have a laugh. Always remember: Don’t take yourself too seriously! (ml)

The authors in this newsletter are: Esther Arends (ea), Cosima Mielke (cm), Shavaughn Haack (sh), Melanie Lang (ml), Iris Lješnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).

Footnotes

  1. 1 http://www.smashingmagazine.com/the-smashing-newsletter/
  2. 2 http://www.smashingconf.com/freiburg-2014/
  3. 3 http://www.smashingconf.com/freiburg-2014/
  4. 4 http://smashingconf.com/freiburg-2014/speakers
  5. 5 http://smashingconf.com/freiburg-2014/registration
  6. 6 #a1
  7. 7 #a2
  8. 8 #a3
  9. 9 #a4
  10. 10 #a5
  11. 11 #a6
  12. 12 #a7
  13. 13 #a8
  14. 14 #a9
  15. 15 #a10
  16. 16 #a11
  17. 17 #a12
  18. 18 #a13
  19. 19 #a14
  20. 20 #a15
  21. 21 #
  22. 22 https://github.com/marmelab/gremlins.js/
  23. 23 https://github.com/marmelab/gremlins.js/
  24. 24 https://github.com/marmelab/gremlins.js/
  25. 25 #
  26. 26 http://font-to-width.com/
  27. 27 http://font-to-width.com/
  28. 28 https://github.com/chrissam42/font-to-width
  29. 29 #
  30. 30 https://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
  31. 31 https://docs.google.com/a/chromium.org/viewer?a=v&pid=sites&srcid=Y2hyb21pdW0ub3JnfGRldnxneDoxMzcyOWI1N2I4YzI3NzE2
  32. 32 http://chimera.labs.oreilly.com/books/1230000000545/index.html
  33. 33 #
  34. 34 http://www.calendasplus.com/index.html
  35. 35 http://www.calendasplus.com/index.html
  36. 36 #
  37. 37 http://publicdomainarchive.com/
  38. 38 http://publicdomainarchive.com/
  39. 39 #
  40. 40 http://bjango.com/mac/skalacolor/
  41. 41 http://bjango.com/mac/skalacolor/
  42. 42 #
  43. 43 http://murtaugh.github.io/sticky-pagination-fixer/
  44. 44 http://murtaugh.github.io/sticky-pagination-fixer/
  45. 45 #
  46. 46 https://docs.google.com/file/d/0B9rGmqNcHo-mRGpMS0xQbzVzeGM/edit
  47. 47 http://filamentgroup.com/lab/politespace/
  48. 48 http://bradfrostweb.com/blog/post/labelmask/
  49. 49 http://bradfrostweb.com/blog/post/labelmask/
  50. 50 #
  51. 51 https://hu.tt/
  52. 52 https://hu.tt/
  53. 53 https://talky.io/
  54. 54 #
  55. 55 http://www.ultimate75th.com/
  56. 56 http://www.ultimate75th.com/
  57. 57 #
  58. 58 “http://www.thehipsteralphabet.com/“
  59. 59 http://www.thehipsteralphabet.com/
  60. 60 #
  61. 61 http://workaholicsanonymouscartoon.com/
  62. 62 http://workaholicsanonymouscartoon.com/

The Smashing Newsletter Team prepares bi-weekly newsletter issues with lots of love and appreciation for the good ol' Web with the latest tips and tricks for designers and Web developers. Vitaly Friedman, Smashing Magazine's editor-in-chief, started this project back in early 2010. Today, we can't imagine a better way of informing and communicating with our fans and readers!

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  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 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!

↑ Back to top