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