Menu Search
Jump to the content X X
Smashing Conf New York

You know, we use ad-blockers as well. 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. our upcoming SmashingConf New York, dedicated to smart front-end techniques and design patterns.

Smashing Newsletter: Issue #178

This newsletter issue was sent out to 231,624 newsletter subscribers on Tuesday, March 21st 2017.

Editorial

Nobody likes major changes, and so major redesigns never go unnoticed. With the announcement of the open beta of the shiny new Smashing Magazine1 last week, we were literally overwhelmed with feedback, ranging all the way from surprise and delight to shock, concerns and skepticism.

The shiny new Smashing Magazine. After 18 months, we are now finally happy to launch the public, open beta.2

We’ve been introducing significant changes both technically and visually. We removed the back-end altogether. Instead, static HTML, advanced JavaScript APIs, running as a progressive web app with a service worker in the background and blazingly fast performance — served from a CDN near you. Instead of pushing advertising over the edge, we’ve taken the drastic decision of removing advertising almost entirely, focusing instead on featuring our lovely products. Visually, we have rediscovered what Smashing Magazine means and how it’s perceived, and fully embraced the quirky, informal personality that we developed over the years.

Indeed, our new journey is quite radical, and there are many reasons that prompted us to introduce major changes. One of them is the unbeatable performance benefit of static sites. Another reason is the dysfunctional advertising ecosystem which doesn’t sustain the magazine any longer. Yet another is the unique chance to design a truly smashing experience from start to finish, with the entire stack running on good ol’ HTML, CSS and JavaScript — all progressively enhanced.

We’re not stubborn though. We’ve been listening to the concerns, bugs and issues raised, and we’ll be working to improve the overall experience over the next weeks and months. Not everything is set in stone already, and I am eternally grateful for your fantastic feedback so far, and your kind support in our little journey. We’ll be sure to keep you informed of the next steps, and we’ll even have a couple of articles coming up to explain what exactly is happening behind the scenes!

Never stop learning, and stay smashing!
Vitaly (@smashingmag)

Table of Contents

  1. The Inbox Of Forgotten Emails3
  2. Home Sweet Freiburg4
  3. How To Design Clean And Fuss-Free APIs5
  4. Meet Zwizz, A Free Sans-Serif Font6
  5. A Playground For CSS Animations7
  6. Tiny Words Matter8
  7. Inspiring Podcasts For Designers And Developers9
  8. Storytrail: A Digital Travelling Experience10
  9. The Boat: A Powerful Piece Of Storytelling11
  10. Upcoming Smashing Workshops12
  11. New On Smashing Job Board13
  12. Smashing Highlights (From Our Archives)14
  13. Recent Articles On Smashing Magazine15

161. The Inbox Of Forgotten Emails

Remember that time when you wanted to send that angry email to your colleague, but you never did? Or those desperate words intended for your ex that didn’t make it out of the “Drafts” folder? Well, there’s now a place for all those embarrassing email writing moments that never reached their recipients.

Inbox Of Forgotten Emails17

An idea brought to life by Creative Mornings and Mailchimp, the “Inbox Of Forgotten Emails18” puts all those thoughts, feelings, and confessions into the spotlight that we had a hard time sharing. Some of the exhibits are plain funny (the “Sauce Hollandaise Confession19,” for example), some so relatable20 that you could sign them off without hesitation, others simply touching21. If you happen to have an email lurking in your Drafts folder that you didn’t have the courage to send off, then feel free to contribute it to the project. No worries, anonymously, of course. (cm)

222. Home Sweet Freiburg!

We are all craftsmen in a way, no matter if you create delightful experiences, snappy performances, or innovative products. While our tools now fit into the thinnest laptops or even the cloud, we still have much in common with the stonemasons and the carpenters who lived centuries before us. We have to share our knowledge in order to get better and smarter at what we do. Like in a guild.

SmashingConf Freiburg23

And what place could be better for a guild of web designers and developers to get together for a friendly conversation, to learn from each other and to spark new ideas as a location that lives and breathes centuries of crafted skills? We are headed back to the Historic Merchants’ Hall in our lovely hometown Freiburg, and we’d love you to join us there for SmashingConf Freiburg 201724.

Taking place September 11th and 12th, this conference will be two days of jam-packed real-live web design problems and techniques that you can immediately apply to your work. Umar Hansa, Alla Kholmatova, Scott Helme, Rachel Andrew, and Mathias Biilmann are among the first confirmed speakers and more will be announced shortly. Sound good? Well, tickets will go on sale Tuesday March 28, at 14:00 CET (8 AM EST). So, don’t forget to set your alarm clock — tickets are limited! See you in Freiburg! (cm)

253. How To Design Clean And Fuss-Free APIs

APIs might seem simple to create, but once you dive deeper, their real complexity crops up. A lot of them are simply hacked together from internal services, i.e. “undocumented spaghetti monsters26” that pile up technical debt and make the lives of the developers who have to work with them unneccessarily hard. But you know what? You can do better!

Ultimate Guide To API Design27

A good companion through your API endeavours is Erich Reich’s comprehensive guide To API Design28. It takes you through the necessary steps to build a good, clean footing from scratch or to refactor an existing API into something more manageable. And if that’s not enough for you yet, Rodney Rehm also put together a timeless how-to of designing better JavaScript APIs29 some time ago. An oldie but goodie sharing the most important things you have to consider when writing utilities or libraries, so that they are accessible and fuss-free to use for fellow devs. Because, well, that’s what we all wish for, right? (cm)

304. Meet Zwizz, A Free Sans-Serif Font

Sans-serif, compact, perfect for diacritic-heavy languages. That’s Zwizz31, a new free front designed by Alfredo Marco Pradil. And, well, with its horizontal and vertical termination cuts that remind us of the all-time classic Helvetica, Zwizz does indeed feel a bit Swiss.

Zwizz32

Its compact design makes Zwizz a good fit for tight typographic compositions. Especially when set in bold on large font sizes, the typeface knows how to make a statement, at the same time it masters the art of stepping a step back in running text to give the textual content the room it needs to breathe. A timeless piece. (cm)

335. A Playground For CSS Animations

Wouldn’t it be cool to have something like a playground where you can play around with CSS animation? Just to see what effect a different delay or duration would have on your animation, for example? That’s essentially the idea behind Animista34. Ana Travas, the creative mind who brought the library to life, wanted to provide a meaningful and accessible way to test and tweak pre-made animations so you can easily reuse them in your own projects.

Animista35

Animista offers a lot of customization options, from entrances and exits to text and attention-grabbing wobble effects, even background color changes. Just tweak them to your heart’s content, and, if you like what you see, copy and paste the code and you’re good to go. Handy! (cm)

366. Tiny Words Matter

It’s the small details that make a difference. A friendly error message, a witty tooltip, a placeholder that makes you chuckle. Microcopy might be a small part of your design, but one you shouldn’t underestimate. So how about some inspiration to polish up your little text snippets? Tiny Words Matter37 has some stellar examples that are bound to cater for fresh ideas.

Tiny Words Matter38

The showcase curates microcopy findings from all over the web, from buttons, labels, error messages, placeholders, tooltips, even URLs. And, well, there are some real treasures to discover. A logout screen that has the URL /see-ya-later (seen on Mailchimp), for example, a placeholder in an email form field with dana.scully@fbi.gov (Trello), or an onboarding process that promotes the site’s app with the words “Congratulations. Now you’re a real user. You deserve an app.” (Tumblr). Crafting such little sparks of delight isn’t hard, but they are a small puzzle piece that can leave a lasting impression and top off an already great user experience. (cm)

397. Inspiring Podcasts For Designers And Developers

Listening to fellow designers and developers share their stories is a great way to find new inspiration. And, well, could there possibly be a more comfortable way to indulge in these kinds of things as with a podcast? If you’re on the hunt for a new favorite podcast or eager to tune into something different for a change, the selection of podcasts40 which Design & Development Tomorrow curated has got you covered.

Podcasts For Designers And Developers41

Their list is divided into “podcasts for designers” and “for developers” and offers the right material for any type of listener, no matter if you’re interested in responsive web design, design and front-end news, UX, the future of the web, interviews or book reviews. Worth checking out. (cm)

428. Storytrail: A Digital Travelling Experience

The travel bug often bites when you don’t have the time or the money to go on a journey. But there’s something that could ease the wait until your next vacation — at least a bit: Storytrail43. Storytrail lets you explore the world’s greatest cities in little videos. Your tour guide: world traveller and co-founder Jason.

Storytrail44

Jason will guide you through the must-sees and hidden gems of New York, San Francisco, LA and Rome (Lisbon and London will follow in summer) and tell you their curious, weird and wonderful stories. Stories about flying donkeys, buried ships, and the basement of horror, for example. What makes the experience so special is that the videos are laid out like actual walking trails through different neighborhoods so you’ll actually feel a bit as if you’re strolling through the scenic alleys, buzzing streets or sunny piazzas yourself. By the way, the site is also a great example of well-done responsive art direction: Depending on the width of your browser window, you get to see a broader or a narrower view of the scenery. Now excuse us please, we’re off to some lunchbreak travelling. (cm)

459. The Boat: A Powerful Piece Of Storytelling

Some stories are so dense, so intense, that they capture you and don’t let you go. “The Boat46” is such a story. Based on the short story by Nam Le, “The Boat” combines animation, audio, and ink and charcoal drawings into a powerful, interactive graphic novel.

The Boat47

The story told is the one of Mai, a girl whose parents send her alone on a boat to Australia after the Vietnam War. And, well, the storytelling experience really is exceptional. Each little element, each thoroughly applied animation contributes to creating an atmosphere that reflects the fear, despair, but also the hope that is linked to the escape. Take some time and see for yourself. It’s worth it. (cm)

4810. Upcoming Smashing Workshops

With so many techniques, tools, style guides, design patterns, strategies, abstractions, frameworks and boilerplates available nowadays, what do you really need to know to keep your workflow fast, smart and efficient? That’s exactly what our classes are all about: practical front-end and RWD workshops that will help you become better front-end developers and designers, today.

Smashing Public Workshops49

Workshops at SmashingConf San Francisco (April)

Workshops at SmashingConf New York — June 12

Workshops at SmashingConf New York — June 15

Public Workshops with Vitaly Friedman

Or, if you’d like to run an in-house workshop at your office, feel free to get in touch with Vitaly at vitaly@smashingconf.com66 and briefly describe what problems you’re facing and would like to solve. Don’t worry about the costs — we’ll find a fair price for sure. Get in touch — it’s that easy!

6711. New On Smashing Job Board

Here are the recent job openings published on our Smashing Job Board68:

  • Senior Experience Design / UXD – Financial Industry69 at Logic State LLC (New York)
    “This is a full time contract position. Logic State’s client base is predominantly composed of banking and insurance industry clients. Candidates that possess experience with enterprise sites involving the presentation of banking concepts and financial information are highly preferred.”
  • Front-End Designer70 at We Make Websites (London)
    “We are looking for a talented and dynamic front-end designer to help us build beautiful e-commerce websites for fashion forward brands. Someone who really cares about the client journey and final result, not just getting the job finished on time. We are the world’s most trusted Shopify Plus agency, so we’re looking for people that can design polished e-commerce experiences that are visually stunning on all screen sizes.”
  • Web Designer71 at U.S. News & World Report (Washington)
    “This position requires an excellent eye for design, coupled with a keen ability to understand user needs, behaviors, and motivations. You should have strong Photoshop/Illustrator skills and be comfortable with HTML/CSS. Strong organizational and communication skills, attention to detail, and ability to meet deadlines are also required.”

7212. Smashing Highlights (From Our Archives)

  • How To Integrate Motion Design In The UX Workflow73
    With the ever-increasing computing power of desktops, browser sophistication and use of native apps, every day we learn of new ways to push the limits of what defines a well-crafted UI. When used correctly, motion can be a key utility in helping your users achieve their goals.
  • Hex Colors: The Code Side Of Color74
    The trouble with a color’s name is that it never really is perceived as the exact same color to two different individuals — especially if they have a stake in a website’s emotional impact. Name a color, and you’re most likely to give a misleading impression. Even something like “blue” is uncertain. To be more precise, it could be “sky blue”, “ocean blue”, “jeans blue” or even “arc welder blue”.
  • Passing The Holy Milestone: How To Meet Deadlines75
    For too many projects, there comes a time when every action taken, every decision and sacrifice made, is spurred on by pressure to finish. Tempers seem to shrink along with the available days, talk about “high standards” gives way to “good enough,” and people realize that deadlines are aptly named.

7613. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.

Footnotes

  1. 1 https://next.smashingmagazine.com/2017/03/a-little-surprise-is-waiting-for-you-here--meet-the-next-smashing-magazine/
  2. 2 https://next.smashingmagazine.com/2017/03/a-little-surprise-is-waiting-for-you-here--meet-the-next-smashing-magazine/
  3. 3 #a1
  4. 4 #a2
  5. 5 #a3
  6. 6 #a4
  7. 7 #a5
  8. 8 #a6
  9. 9 #a7
  10. 10 #a8
  11. 11 #a9
  12. 12 #a10
  13. 13 #a12
  14. 14 #a13
  15. 15 #a13
  16. 16 #
  17. 17 http://www.forgottenemails.com/
  18. 18 http://www.forgottenemails.com/
  19. 19 http://www.forgottenemails.com/messages/2017-02-28-sauce-hollandaise-confession/
  20. 20 http://www.forgottenemails.com/messages/2017-03-10-re-interview-today/
  21. 21 http://www.forgottenemails.com/messages/2017-03-02-your-child/
  22. 22 #
  23. 23 https://smashingconf.com/freiburg-2017
  24. 24 https://smashingconf.com/freiburg-2017/
  25. 25 #
  26. 26 https://blog.qmo.io/ultimate-guide-to-api-design/
  27. 27 https://blog.qmo.io/ultimate-guide-to-api-design/
  28. 28 https://blog.qmo.io/ultimate-guide-to-api-design/
  29. 29 https://www.smashingmagazine.com/2012/10/designing-javascript-apis-usability/
  30. 30 #
  31. 31 https://www.behance.net/gallery/50016451/Zwizz-Free-Font
  32. 32 https://www.behance.net/gallery/50016451/Zwizz-Free-Font
  33. 33 #
  34. 34 http://animista.net/
  35. 35 http://animista.net/
  36. 36 #
  37. 37 https://tinywordsmatter.tumblr.com/
  38. 38 https://tinywordsmatter.tumblr.com/
  39. 39 #
  40. 40 http://ddtomorrow.com/podcasts-for-designers-developers/
  41. 41 http://ddtomorrow.com/podcasts-for-designers-developers/
  42. 42 #
  43. 43 http://storytrail.co/
  44. 44 http://storytrail.co/
  45. 45 #
  46. 46 http://www.sbs.com.au/theboat/
  47. 47 http://www.sbs.com.au/theboat/
  48. 48 #
  49. 49 https://www.smashingmagazine.com/smashing-workshops/#public-workshops
  50. 50 https://shop.smashingmagazine.com/products/tim-kadlec-http2-performance
  51. 51 https://shop.smashingmagazine.com/products/workshop-chris-holst-SF-2017
  52. 52 https://shop.smashingmagazine.com/products/workshop-sarah-drasner-SF-2017
  53. 53 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-sf-2017
  54. 54 https://shop.smashingmagazine.com/products/workshop-nadieh-bremer-sf-2017
  55. 55 https://shop.smashingmagazine.com/products/workshop-brad-frost-NY-2017
  56. 56 https://shop.smashingmagazine.com/products/workshop-yuko-shimizu-NY-2017
  57. 57 https://shop.smashingmagazine.com/products/workshop-horace-dediu-NY-2017
  58. 58 https://shop.smashingmagazine.com/products/workshop-umar-hansa-NY-2017
  59. 59 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-NY-2017
  60. 60 https://shop.smashingmagazine.com/products/workshop-eric-reiss-NY-2017
  61. 61 https://shop.smashingmagazine.com/products/workshop-joe-leech-NY-2017
  62. 62 https://shop.smashingmagazine.com/products/workshop-sara-soueidan-NY-2017
  63. 63 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-NY-2017
  64. 64 http://fitc.ca/presentation/workshop-smart-responsive-design-patterns/
  65. 65 http://www.webdirections.org/respond/
  66. 66 mailto:vitaly@smashingconf.com
  67. 67 #
  68. 68 http://jobs.smashingmagazine.com/
  69. 69 http://jobs.smashingmagazine.com/j/Senior-Experience-Design-UXD-%E2%80%93-Financial-Industry/2476674
  70. 70 http://jobs.smashingmagazine.com/j/Front-end-designer/2476617
  71. 71 http://jobs.smashingmagazine.com/j/Web-Designer/2475394
  72. 72 #
  73. 73 https://www.smashingmagazine.com/2016/03/integrate-motion-design-animation-ux-workflow/
  74. 74 https://www.smashingmagazine.com/2012/10/the-code-side-of-color/
  75. 75 https://www.smashingmagazine.com/2010/07/passing-the-holy-milestone-how-to-meet-deadlines/
  76. 76 #
  77. 77 https://www.smashingmagazine.com/2017/03/beauty-imperfection-interface-design/
  78. 78 https://www.smashingmagazine.com/2017/03/spark-ux-revolution/
  79. 79 https://www.smashingmagazine.com/2017/03/sketch-figma-showdown/
  80. 80 https://www.smashingmagazine.com/2017/03/beyond-browser-web-desktop-apps/
  81. 81 https://www.smashingmagazine.com/2017/03/prototype-code-custom-pull-to-refresh-gesture-animation/
  82. 82 https://www.smashingmagazine.com/2017/03/interactive-command-line-application-node-js/
  83. 83 https://www.smashingmagazine.com/2017/03/simplify-android-networking-volley-http-library/
  84. 84 https://www.smashingmagazine.com/2017/03/a-little-surprise-is-waiting-for-you-here/
  85. 85 https://www.smashingmagazine.com/2017/03/world-wide-web-not-wealthy-western-web-part-2/
  86. 86 https://www.smashingmagazine.com/2017/03/free-sparkly-icons-ballicons-eps-svg/
  87. 87 https://www.smashingmagazine.com/2017/03/delivering-large-scale-projects-content-hub-strategy/
  88. 88 https://www.smashingmagazine.com/2017/03/web-development-reading-list-173/
  89. 89 https://www.smashingmagazine.com/2017/03/web-development-reading-list-174/

↑ Back to top Tweet itShare on Facebook

The Smashing Editorial 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!

  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