Whenever we invite designers and developers to speak at our conferences, it’s always because we sincerely believe they have
something valuable to share with the community: Insights, experiences, failures, successes, and lessons learned in small as well as large projects. Having a diverse line-up of speakers has always been important to us, and we take pride in not giving up easily — sometimes chasing speakers until it becomes remarkably difficult to say “No.” 1
Sara Soueidan speaking in San Francisco, interviewed by Christian Heilmann after her talk. (Image credit:
Marc Thiele ) 2
A lot of communication goes on behind the scenes, and usually planning an event means planning
way ahead of time. For San Francisco, we tried very hard to make sure that our dear friend and colleague Sara Soueidan from Lebanon could speak at the conference, despite the recent travel ban in the US. Sara has been through a tedious visa issue in the past already, but Marc was stubborn enough 3 not to give up . We’re happy to have convinced Sara to still come and speak despite of all the ongoing issues that might occur along the way. She wasn’t allowed to take a laptop on the plane, but she still was able to share her insights from a friend’s laptop on stage. 4
Sara will also be speaking at
SmashingConf New York , and she’ll be running her brilliant 5 SVG workshop as well. As a conference organizer, 6 don’t get discouraged by the limitations imposed by authorities or rumours, and keep on bringing good people to great events — events with a fantastic, caring community around it. The community support for Sara was remarkable, and we know that we are doing the right thing. If something happens to your event, we’d be happy to step up — it’s worth it.
Stay stubborn! – Vitaly @smashingmag Table of Contents
Popular Brand Logos As SVGs 7
Mastering CSS Grid Layout 8
Custom Font-Face Code Made Easy 9
Service Workers: Guides, Tutorials, And Copy-Paste Snippets 10
Freebie: Editable And Scalable Vector Emoji 11
Saving GitHub Issues Offline 12
The State Of Email 13
Making The Web A Better Place 14
Loopy: A Tool To Visualize Complex Systems 15
An Alphabetical Adventure 16
Upcoming Smashing Workshops 17
New On Smashing Job Board 18
Smashing Highlights (From Our Archives) 19
Recent Articles On Smashing Magazine 20
1. Popular Brand Logos As SVGs 21
Every now and again, you need to include a brand logo in a mock-up. Not only the common social media icons but also assets that are less common, like the logo of a certain online service, a programming language, banking provider, or an app maybe. If you need a brand logo next time, be sure to check
Simple Icons — chances are they have what you’re looking for. 22
Maintained by Dan Leech, the site features a huge collection of more than 300 SVG brand icons ranging from big players and online services like Google, Instagram and MasterCard to programming languages, browser vendors, apps, and everything else tech- and web-themed. A nice bonus: Simple Icons also provides you with the matching hex color code for each logo. And if you’re looking for a logo that isn’t part of the collection yet, you can make contributions and requests via GitHub. One for the bookmarks.
2. Mastering CSS Grid Layout 24
Easter is just around the corner, and, well, what better way could there be to make an Easter bunny happy as with some tasty carrots? To plant the carrots, however, you need a special skill, but none you can’t master, we’re sure of that: CSS Grid. To teach us the basics of it, Thomas Park came up with
Grid Garden , a browser game in which you need to write CSS code to grow — you probably guessed it already — carrots. 25
There are 28 levels in total and each one has a little challenge you need to master to make your garden flourish — using
grid-column-start to water the areas of the garden that have carrots, for example, or to kill the weeds so that your plants can grow nicely. The tasks will get harder as you approach, of course.
Once you’ve grown familiar with CSS Grid and are ready to use it out in the wild, be sure to take a look at Anthony Dugois’
CSS Grid Template Builder and Drew Minns’ 27 Griddy . Tools help you build layouts by providing you with the necessary templates and a visual interface to see the layout in action. Handy! 28 (cm)
3. Writing @Font-Face Declarations Made Easy 29
@font-face declarations can be a tedious task that requires a lot of repetitive typing. Just think of the mass of code you need to write just to define each font weight and font style you want to add to your site. A remedy now comes from Daniel Tonon. His
font-face-generator npm package handles all the repetitive 30
@font-face styling for you.
All you have to do to get things up and running is import the file, and after you’ve assigned some custom settings, you can enjoy the magic behind the little SCSS-powered helper. Instead of typing the usual string of code for each font weight and style individually, you only enter a minimum of information and the
$fonts variable generates the CSS code from it. It even works with multiple fonts. A real time saver.
4. Service Workers: Guides, Tutorials, And Copy-Paste Snippets 32
To create reliable, fast experiences on the web, there’s no getting around service workers. But where to begin if you want to implement them on your site? We’ve collected some helpful guides, tutorials, and copy-paste snippets that are bound to make your service worker endeavor a lot smoother. One of them is Jake Archibald’s
Offline Cookbook . 33
Just like in a real cookbook, Jake provides different recipes for different occasions. What kind of caching patterns are suitable for what kind of content (static content, dynamic content, bigger resources that aren’t needed right away, for example)? And how exactly are requests handled? The tutorial also provides tips for using service workers in combination with the Push API and for implementing a “Save for offline” button so users can select the content they want available offline themselves. Handy!
Another valubale resource comes from Lyza Danger Gardner. After giving her “
The Pragmatist’s Guide To Service Workers ” talk at last year’s SmashingConf Freiburg, she collected the accompanying code examples in a 35 GitHub repository . They cover everything from providing an offline message and responding to fetches for content and static assets differently to adding a fallback offline image. And if you’re looking for even more practical examples of service worker usage, check out the 36 ServiceWorker Cookbook that Marco Castelluccio put together on GitHub with service worker recipes that illustrate a number of APIs. Suitable for both beginners and experts. 37 (cm)
5. Freebie: Editable And Scalable Vector Emoji 38
Who doesn’t love emoji? Well, here comes good news if you can’t get enough of the little yellow guys with their smirks, puzzled looks, and rosy cheeks. Thanks to Michael Flarup who
recreated 68 popular smileys as layered PSDs , you can now scale and edit the round fellows to your liking. For free. 39
Design-wise, the vector versions appear just as you know the emoji from Apple platforms, and, in fact, all the familiar faces are included in the Photoshop kit spreading their joy, mischief, anger, and despair and pretty much every other feeling you can think of. Yes, even the nerdy guy with the rabbit teeth and the friendly poop join the fun. Happy editing!
6. Saving GitHub Issues Offline 41
Wouldn’t it be great if you could work on fixing GitHub issues even when you’re offline? When travelling with a bad internet connection, or on a plane, for example? Well, actually you can. A little Node.js helper called
makes it possible. offline-issues 42
The command line application fetches the GitHub issues you specify and conveniently saves them in HTML and Markdown formats on your computer. You can even decide if you want to make one issue, all issues or multiple respositories and issues available offline. Filtering for open or closed issues is also possible. To use the tool, you need to have Node.js installed on your computer. Convenient.
7. The State Of Email 44
Let’s face it, designing for email can be tough. Email client rendering quirks, spam flagging, getting lost in the shere mass of emails users receive these days — if you’re sending out newsletters or are doing email marketing, you know the pitfalls that email brings along. To help us stay on top of trends in all things email, Litmus has been publishing their annual State Of Email Report for a few years already, and, well, the
2017 edition is now here and just as useful as always. 45
Over the past year, Litmus tracked 13 million email opens and distilled valuable knowledge about new and updated email clients from them just like tips to make your email stand out from the crowd. Among other things, their State Of Email report dives deep into mobile, webmail and desktop trends and sheds a light into the things you need to know to avoid spam complaints. Practical tips for streamlining your email workflow and automating the more mundane aspects of email creation so that there’s more room for experiments (think personalization, dynamic content, and gamification, for example) are also part of it. Definitely worth a read.
8. Making The Web A Better Place 47
In a fast-moving industry like the web industry, staying on top of current trends and developments is key. But despite all the excitement for hot new technologies, techniques, and tools, we shouldn’t forget about the more human aspects of our work either — the community, diversity, and workplace culture, for example.
Design.blog provides a place for all those things that often get lost in this loud industry oh so easily. 48
The blog shares essays of over 50 thought leaders, their voices on design, inclusion and tech. A good opportunity to consider the power and relevance of inclusion, not only when designing and working but in our lives in general.
9. Loopy: A Tool To Visualize Complex Systems 50
We are surrounded by complex systems — not only seen from a technical perspective, but in every other aspect of our lives, too, be it social, political, economical, or environmental. Grasping how the different parts of these systems interact and how they depend from each other can already be hard. However, if you need to explain them, things get even more challenging.
A new tool that can provide a solution for all those occasions when you need some visual aid to explain a complex system is
Loopy . Loopy lets you create explorable diagrams simply by drawing circles and connections with your mouse. No need to install anything, it all happens right in the browser. Easy as pie. 52 (cm)
10. An Alphabetical Adventure 53
“A” is for “Albert”, “B” is for “Bounce”, “C” for “Cowabunga”. If you have no idea what this all is about, well, no worries, we’ll tell you: it’s the beginning of a very special piece of eye candy. Brought to life by design agency Studio Lovelock, “
A Is For Albert ” explores the moments of happiness and the little mishaps that life with kids brings along — with an animated alphabet. 54
Each letter from A to Z tells the story of how Albert, a blonde little boy, explores the world in his own cute yet chaotic (and seen from his parents’ perspective sometimes maybe even a bit annoying) way. He decorates the livingroom wallpaper with his brush artworks, for example, and shows his love for the family cat by hugging it a bit too tight. Simple geometric shapes and a soft color palette are everything the project needs to breathe life into Albert’s (and his parents’) everyday adventures and make us smile.
11. Upcoming Smashing Workshops 56
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.
57 Workshops at SmashingConf
New York — June 12 Workshops at SmashingConf
New York — June 15 Workshops at SmashingConf
Freiburg — September 10 Workshops at SmashingConf
Freiburg — September 13 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
email@example.com 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! 73
12. New On Smashing Job Board 74
Here are the recent job openings published on our
Smashing Job Board : 75
Mobile UIUX/Motion designer at 76 Touchlab (New York)
“As an experienced UIUX/Motion designer, you have a deep understanding of mobile design patterns and you’re fluent in the design languages of both Android and iOS. You know the rules and know how to break them to create amazing interfaces centered around the user.”
UI Designer at 77 Achievement Network (Boston, MA)
“We are looking for a talented UI Designer to create visual design (storyboards/prototypes, proof of concepts and content layout) and information architecture (site structure/organization, navigation/findability etc.) for ANet’s online assessment creation, delivery, reporting and resource applications.”
Full Stack Developer at 78 Superrb (Hayling Island, Hampshire, UK)
“You’re an experienced web developer. Your code is tidy and your stack is phat. You know the drill but you’re willing to experiment. You’re borderline geek and so are we. But your ability to communicate with humans as well as computers keeps you from full nerd metamorphosis. And critically your eye for what looks hot makes you the perfect fit for our studio.”
13. Smashing Highlights (From Our Archives) 79
How To Stop Designing For Ourselves 80 How often do we look at a website or app and remark to ourselves (and on Twitter) that “these designers must have been blind!” Sometimes we’re just being whiney about minute details (as we should be), but other times we do have a point: “What were they thinking?”
When You Learn Something, Write About It! 81 Noone can deny that the Web has changed the way people teach, learn, and do research. Of course, this doesn’t mean that everything we read online is true and accurate — far from it. But through honest discussion and objective collaboration, accurate and useful information is much more likely to be the end result of any educational endeavor.
Understanding The Difference Between Type And Lettering 82 Coming out of the grunge, graffiti and David Carson era through the ’90s, there has been a major resurgence of interest in typography. We have seen a number of designers and artists make their careers out of designing type or custom lettering, and it has become common to list typography among our skills and disciplines. Unfortunately, as with any popularity surge, there have come with it a lot of misunderstandings of some of the terms and concepts that we use.
14. Recent Articles On Smashing Magazine 83
Coding Articles Inspiration, Freebies, Misc.
1 https://www.flickr.com/photos/marcthiele/albums/72157682212844705/page1 2 https://www.flickr.com/photos/marcthiele/albums/72157682212844705/page1 3 https://twitter.com/SaraSoueidan 4 https://beyondtellerrand.com/blog/why-you-never-should-give-up 5 https://smashingconf.com/ 6 https://smashingconf.com/workshops/sara-soueidan 7 #a1 8 #a2 9 #a3 10 #a4 11 #a5 12 #a6 13 #a7 14 #a8 15 #a9 16 #a10 17 #a11 18 #a12 19 #a13 20 #a14 21 # 22 https://simpleicons.org/ 23 https://simpleicons.org/ 24 # 25 http://cssgridgarden.com/ 26 http://cssgridgarden.com/ 27 http://codepen.io/anthonydugois/pen/RpYBmy 28 http://griddy.io/ 29 # 30 https://www.npmjs.com/package/font-face-generator 31 https://www.npmjs.com/package/font-face-generator 32 # 33 https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ 34 https://developers.google.com/web/fundamentals/instant-and-offline/offline-cookbook/ 35 https://vimeo.com/184236467 36 https://github.com/lyzadanger/pragmatist-service-worker 37 https://github.com/mozilla/serviceworker-cookbook 38 # 39 https://applypixels.com/template/vector-emoji/ 40 https://applypixels.com/template/vector-emoji/ 41 # 42 https://github.com/jlord/offline-issues 43 https://github.com/jlord/offline-issues 44 # 45 https://litmus.com/lp/state-of-email-2017 46 https://litmus.com/lp/state-of-email-2017 47 # 48 https://design.blog/ 49 https://design.blog/ 50 # 51 http://ncase.me/loopy/ 52 http://ncase.me/loopy/ 53 # 54 http://www.aisforalbert.com/ 55 http://www.aisforalbert.com/ 56 # 57 https://www.smashingmagazine.com/smashing-workshops/#public-workshops 58 https://shop.smashingmagazine.com/products/workshop-brad-frost-NY-2017 59 https://shop.smashingmagazine.com/products/workshop-yuko-shimizu-NY-2017 60 https://shop.smashingmagazine.com/products/workshop-horace-dediu-NY-2017 61 https://shop.smashingmagazine.com/products/workshop-umar-hansa-NY-2017 62 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-NY-2017 63 https://shop.smashingmagazine.com/products/workshop-eric-reiss-NY-2017 64 https://shop.smashingmagazine.com/products/workshop-joe-leech-NY-2017 65 https://shop.smashingmagazine.com/products/workshop-sara-soueidan-NY-2017 66 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-NY-2017 67 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-freiburg-2017 68 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-freiburg-2017 69 https://shop.smashingmagazine.com/products/workshop-umar-hansa-freiburg-2017 70 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-freiburg-2017 71 http://fitc.ca/presentation/workshop-smart-responsive-design-patterns/ 72 http://www.webdirections.org/respond/ 73 mailto:firstname.lastname@example.org 74 # 75 http://jobs.smashingmagazine.com/ 76 http://jobs.smashingmagazine.com/j/Mobile-UIUX-Motion-designer/2479252 77 http://jobs.smashingmagazine.com/j/UI-Designer/2479001 78 http://jobs.smashingmagazine.com/j/Full-Stack-Developer/2478101 79 # 80 https://www.smashingmagazine.com/2012/02/designer-myopia-stop-designing-for-ourselves/ 81 https://www.smashingmagazine.com/2012/03/publish-what-you-learn/ 82 https://www.smashingmagazine.com/2013/01/understanding-difference-between-type-and-lettering/ 83 # 84 https://www.smashingmagazine.com/2017/03/user-research-sample-size-data/ 85 https://www.smashingmagazine.com/2017/03/understanding-stacked-bar-charts/ 86 https://www.smashingmagazine.com/2017/03/resilient-web-design/ 87 https://www.smashingmagazine.com/2017/04/guide-http2-server-push/ 88 https://www.smashingmagazine.com/2017/04/browser-extension-edge-chrome-firefox-opera-brave-vivaldi/ 89 https://www.smashingmagazine.com/2017/04/automated-testing-system-android-phones/ 90 https://www.smashingmagazine.com/2017/04/secure-web-app-http-headers/ 91 https://www.smashingmagazine.com/2017/03/building-for-mobile-rwd-pwa-amp-instant-articles/ 92 https://www.smashingmagazine.com/2017/03/improve-billing-form-ux/ 93 https://www.smashingmagazine.com/2017/04/ultimate-guide-e-commerce-software-platforms/ 94 https://www.smashingmagazine.com/2017/04/vibrant-illustrations-inspiration/ 95 https://www.smashingmagazine.com/2017/03/desktop-wallpaper-calendars-april-2017/ 96 https://www.smashingmagazine.com/smashing-conference-freiburg/ 97 https://www.smashingmagazine.com/2017/03/web-development-reading-list-175/ 98 https://www.smashingmagazine.com/2017/03/web-development-reading-list-176/ 99 https://www.smashingmagazine.com/2017/04/web-development-reading-list-177/
↑ Back to top
Tweet it Share on Facebook