Menu Search
Jump to the content X X
Smashing Conf Barcelona

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

Smashing Newsletter: Issue #182

This newsletter issue was sent out to 229,438 newsletter subscribers on Tuesday, May 23rd 2017.

Editorial

Designing and building responsive components? Sure, we’ve got this! Crafting flexible, responsive layouts? Not a problem! Performance issues? We’ve got a set of performance techniques and practices1 to make anything fast! But, have we discovered a really efficient responsive workflow? Oh well, it seems like we aren’t quite there yet.

Whether your company has committed to agile or something between waterfall and agile, the handoff from design to code remains one of the issues that slow down the entire workflow. Unless designers on your team have front-end skills or developers have design skills, there still is a cut-off point when deliverables trade hands. No wonder that we see attempts on both sides to bridge that gap, e.g. by rendering React components into Sketch2 or integrating front-end views into design tools with Zeplin3, Sympli4, Invision Craft5 and Avocode6.

React Sketch App7
React Sketchapp8 allows developers to render React components straight into Sketch.

In that light, the old question “should designers code or should developers design” seems to be a wrong question. We all can benefit from learning how to move to HTML/CSS prototyping as early as possible. It’s not that developers need to learn Sketch or designers have to learn Node.js, but knowing just enough to make simple adjustments could go a long way.

P.S. Design workflow, tooling and front-end strategies — we’ll be looking into all of them thoroughly at our upcoming SmashingConf NYC9 in just a couple of weeks. No theory, just practical, useful tips and techniques. Perhaps see you there? ;-)

Stay smashing,
Vitaly (@smashingmag)

Table of Contents

  1. How To Design Avatars That Make Sense10
  2. Unveil The Front-End Superhero Inside Of You!11
  3. Community-Curated Spreadsheets For Startups And Web Professionals12
  4. A Security Checklist For Web Developers13
  5. New Tab, New Perspectives14
  6. Tools For Collaborative Coding And Designing15
  7. Free Sketch Plugins To Make Your Workflow More Efficient16
  8. Women Who Draw17
  9. Upcoming Smashing Workshops18
  10. New On Smashing Job Board19
  11. Smashing Highlights (From Our Archives)20
  12. Recent Articles On Smashing Magazine21

221. How To Design Avatars That Make Sense

Avatars. They are supposed to represent us online, but not seldomly do they exclude users because of their gender or ethnicity. Even efforts to make avatars gender and race neutral often backfire as the default avatar still uses rather male and white-type imagery. How can we do better? Well, Michelle Venetucci Harvey, product designer at Lyft, shares some valuable ideas in her all-in-one guide to better avatars23.

Design Avatars That Make Sense24

Identicons, for example, like the ones that GitHub is using, are based on a hash of a user’s ID or IP address and, thus, get along without any physical characteristics. Animals, initials, simple smiley faces, symbols made up of brand colors, even aliens and monsters also provide neutral (and fun!) ways to design avatars that don’t leave anyone out, as Michelle’s article nicely illustrates. So, as a designer, don’t rely on generic solutions, even if they seem to be easiest. Choose to be creative instead! (cm)

252. SmashingConf New York Is Coming!

What could be better than learning from people who know their craft and, as a result, enhancing your superpowers? Well, SmashingConf New York26 is soaring into the New World Stages on June 13th and 14th, playing host to hands-on, practical sessions by some of the most respected members of the community. Plus, on the second day, we have a Mystery Speaker on stage — probably somebody you’ve heard of. ;-)

I feel like Superwoman27

The conference experience is all about learning, networking, and having a wonderful time. Now, to round out your journey in New York City, why not attend one of the SmashingConf workshops28 the day before, or the day after the conference, too? (aa)

293. Community-Curated Spreadsheets For Startups And Web Professionals

We all collect resources to make our work easier, be it useful templates and tools, handy checklists, or great links, for example. The toolkits we put together this way are invaluable. And, let’s be honest, they are too good not to share, right?

SpreadShare30

That’s what the folks behind SpreadShare thought, too, and so they created a platform where web professionals can explore community-curated spreadsheets31 full of precious resources. Resources to get press coverage for your startup, for example, lists with recruiting contacts, tool comparisons, addresses of co-working spaces, expense sheets, learning resources, and everything else that might be interesting for web workers. A treasure chest. (cm)

Anything you download during the trial is yours to keep and use forever, royalty-free. Impress your audience and blow your competition away with stunning visuals. You can download 20 free images a day. Happy downloading32!

334. A Security Checklist For Web Developers

We learn from our mistakes, but some mistakes are more painful to make as others — especially when it comes to the security of our web applications. Michael O’Brien knows from his own experience. After creating secure web applications for over 14 years, he has now published a handy Web Developer Security Checklist34 to help prevent his fellow developers from common security pitfalls.

Web Developer Security Checklist35

The list covers everything from authentication and DOS protection to validation, cloud configuration and setting up your infrastructure. It’s by no means complete, as Michael points out, but considering the aspects seriously, is a huge step towards making your web applications more robust. (cm)

365. New Tab, New Perspectives

These days, algorithms decide what we see. Advertisements that are tailored to our interests, articles we might want to read, even people we might want to follow on social media — we’re trapped in the bubble of our own interests. That’s what inspired Steve Jain to a little project that can help us escape that bubble for a moment so that we can discover new ideas and perspectives, as well as thoughts we wouldn’t have stumbled upon otherwise. And could there be a better occasion to do so as each time we opened a new browser tab?

100 Million Books37

Steve’s browser extension 100 Million Books38 presents a quote from a book each time you open a new tab. From fiction to nonfiction, old to new, science to literature: the aim is to open our minds and inspire us to see things in a new light. (cm)

396. Tools For Collaborative Coding And Designing

Collaboration is key to bringing outstanding results forth. However, working together on one project, also means that there can be quite some friction involved. Just think of version control. If you’re a designer working together with a team on a UI design, the interface design tool Figma40 could help ease some of that friction.

Figma41

It works right in the browser, so you won’t need to worry about uploading or downloading the newest versions of your files. Instead, you can just share design files with a link, and your team can participate: marketing can edit the copy, for example, while engineers inspect the design. Figma also lets you build a component library for your team, it notifies you of changes, and comments make it easy to exchange opinions and ideas. The tool can be tried for free, while regular team plans start at $12 per editor and month.

Now one for the front-end developers: Have you already heard of CodePen’s Collab Mode42? The CodePen feature lets you and your team edit a Pen at the same time. All collaborators will see the changes in real-time and can communicate in the live chat area. To enable it, just go to the Editor View of your Pen, and switch to “Collab Mode” from the “Change View” menu. Please note that the owner of the Pen needs to have a Pro subscription in order to be able to invite others to a project, though. Perfect to tinker with new ideas or to explain a concept to a fellow developer. (cm)

437. Free Sketch Plugins To Make Your Workflow More Efficient

You love Sketch? Well, the folks at InVision put together a list of 30 free Sketch plugins44 that’ll help you get even more out of the app. In this collection, you’ll find all sorts of plugins to close existing gaps or automate tedious actions and make your Sketch workflow more efficient.

30 Free Sketch Plugins45

Whether it’s baseline aligning text layers, batch creating symbols, renaming layers, creating charts, or making gradients more beautiful, the use cases of the plugins solve the big and small everyday challenges smoothly. Definitely worth checking out. (cm)

468. Women Who Draw

Living in 2017, gender inequality isn’t completely a thing of the past, unfortunately. While illustrator Julia Rothman was once skimming through back issues of a prominent magazine, she made an alarming discovery: Out of 55 covers done in 2015, only 4 had been created by women. Together with fellow illustrator, Wendy MacNaughton, she decided that something had to be done to change that, and so they brought Women Who Draw47 to life.

Women Who Draw48

Women Who Draw is an open directory of female illustrators, artists, and cartoonists. It’s aim: To increase their visibility and make it possible for publications, art directors and editors to find female talent more easily. Today, there are more than 2,700 women (a focus also lies on trans and gender non-conforming artists) listed on the site, and the number is growing. (cm)

499. 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 Workshops50

Workshops at SmashingConf New York — June 12

Workshops at SmashingConf New York — June 15

Workshops at SmashingConf Freiburg

Public Smashing Workshops

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

6610. New On Smashing Job Board

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

  • Director, Web & Mobile Marketing Products68 at Randstad USA (Atlanta, GA)
    “As the Director leading mobile and web for Randstad USA, you will define, build, educate and own the mobile and web experiences for B2C and B2B. This leader will build an unrivaled mobile and web customer experience for job seekers and businesses seeking our unique offering.”
  • Software Development Engineer (UI)69 at Tesco Technology (Welwyn Garden City, UK)
    “The Software Development Engineering team are responsible for the full software development lifecycle. They work with Product Managers to help shape the backlog and future direction of the products we build. They implement and test features to a very high quality and support the product or service in testing and live environments.”
  • Senior Front End Developer70 at Ventura Associates (Lausanne, Switzerland)
    “Ventura Associates is a fast expanding swiss sourcing firm. A tip-top global player seeks a senior front-end developer for a permanent position in Lausanne.”

7111. Smashing Highlights (From Our Archives)

  • How To Enhance Your Creativity – Taming The Wild Mind72
    Myths have developed around and researchers have studied how the human brain juggles creativity and organization. Popular theory tells us that the left brain is structured and logical, while the right brain is artistic and imaginative, and that all human beings use predominantly one side of the other.
  • Quick Course On Effective Website Copywriting73
    Many dismiss copywriting as something that ad agency people do. Truthfully, all of us need to pay close attention to copywriting if we want to achieve our business objectives.
  • Designing With Audio: What Is Sound Good For?74
    Our world is getting louder. Consider all the beeps and bops from your smartphone that alert you that something is happening, and all the feedback from your appliances when your toast is ready or your oven is heated, and when Siri responds to a question you’ve posed.

7512. Recent Articles On Smashing Magazine

Design Articles

Coding Articles

Inspiration, Freebies, Misc.

Footnotes

  1. 1 https://www.smashingmagazine.com/2016/12/front-end-performance-checklist-2017-pdf-pages/
  2. 2 https://github.com/airbnb/react-sketchapp
  3. 3 https://zeplin.io/
  4. 4 https://sympli.io/
  5. 5 https://www.invisionapp.com/craft
  6. 6 https://avocode.com/
  7. 7 https://github.com/airbnb/react-sketchapp
  8. 8 https://github.com/airbnb/react-sketchapp
  9. 9 https://smashingconf.com/speakers
  10. 10 #a1
  11. 11 #a2
  12. 12 #a3
  13. 13 #a4
  14. 14 #a5
  15. 15 #a6
  16. 16 #a7
  17. 17 #a8
  18. 18 #a9
  19. 19 #a10
  20. 20 #a11
  21. 21 #a12
  22. 22 #
  23. 23 https://uxdesign.cc/design-avatars-that-make-sense-and-be-more-inclusive-in-the-process-d4dd6a486ea6
  24. 24 https://uxdesign.cc/design-avatars-that-make-sense-and-be-more-inclusive-in-the-process-d4dd6a486ea6
  25. 25 #
  26. 26 https://www.smashingconf.com
  27. 27 http://smashingconf.com/
  28. 28 https://smashingconf.com/workshops
  29. 29 #
  30. 30 https://spreadshare.co/
  31. 31 https://spreadshare.co/
  32. 32 https://www.graphicstock.com/join/gs-extab-may17?utm_v=2&utm_source=SmashingMagazine&utm_medium=publication&utm_campaign=GS-newsletter---99&utm_campaigndate=2017-5-16-&utm_content=---GS450x325SM
  33. 33 #
  34. 34 https://simplesecurity.sensedeep.com/web-developer-security-checklist-f2e4f43c9c56
  35. 35 https://simplesecurity.sensedeep.com/web-developer-security-checklist-f2e4f43c9c56
  36. 36 #
  37. 37 http://www.100millionbooks.org/
  38. 38 http://www.100millionbooks.org/
  39. 39 #
  40. 40 https://www.figma.com/
  41. 41 https://www.figma.com/
  42. 42 https://blog.codepen.io/documentation/pro-features/collab-mode/
  43. 43 #
  44. 44 https://www.invisionapp.com/blog/free-sketch-plugins/
  45. 45 https://www.invisionapp.com/blog/free-sketch-plugins/
  46. 46 #
  47. 47 http://www.womenwhodraw.com/
  48. 48 http://www.womenwhodraw.com/
  49. 49 #
  50. 50 https://www.smashingmagazine.com/smashing-workshops/#public-workshops
  51. 51 https://shop.smashingmagazine.com/products/workshop-brad-frost-NY-2017
  52. 52 https://shop.smashingmagazine.com/products/workshop-yuko-shimizu-NY-2017
  53. 53 https://shop.smashingmagazine.com/products/workshop-horace-dediu-NY-2017
  54. 54 https://shop.smashingmagazine.com/products/workshop-umar-hansa-NY-2017
  55. 55 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-NY-2017
  56. 56 https://shop.smashingmagazine.com/products/workshop-eric-reiss-NY-2017
  57. 57 https://shop.smashingmagazine.com/products/workshop-joe-leech-NY-2017
  58. 58 https://shop.smashingmagazine.com/products/workshop-sara-soueidan-NY-2017
  59. 59 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-rwd-NY-2017
  60. 60 https://shop.smashingmagazine.com/products/workshop-vitaly-friedman-ux-freiburg-2017
  61. 61 https://shop.smashingmagazine.com/products/workshop-alla-kholmatova-freiburg-2017
  62. 62 https://shop.smashingmagazine.com/products/workshop-umar-hansa-freiburg-2017
  63. 63 https://shop.smashingmagazine.com/products/workshop-rachel-andrew-freiburg-2017
  64. 64 https://shop.smashingmagazine.com/products/rwd-workshop-vitaly-friedman-hamburg-2017
  65. 65 mailto:vitaly@smashingconf.com
  66. 66 #
  67. 67 http://jobs.smashingmagazine.com/
  68. 68 http://jobs.smashingmagazine.com/j/Director-Web-Mobile-Marketing-Products/2493666
  69. 69 http://jobs.smashingmagazine.com/j/Software-Development-Engineer-UI-/2493640
  70. 70 http://jobs.smashingmagazine.com/j/Senior-Front-End-Developer/2493301
  71. 71 #
  72. 72 https://www.smashingmagazine.com/2012/05/taming-the-wild-mind/
  73. 73 https://www.smashingmagazine.com/2012/05/quick-course-on-effective-website-copywriting/
  74. 74 https://www.smashingmagazine.com/2012/04/designing-with-audio-what-is-sound-good-for/
  75. 75 #
  76. 76 https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/
  77. 77 https://www.smashingmagazine.com/2017/05/enhancing-mobile-design-ux/
  78. 78 https://www.smashingmagazine.com/2017/05/basic-patterns-mobile-navigation/
  79. 79 https://www.smashingmagazine.com/2017/05/intrusive-interstitials-guidelines-avoid-google-penalty/
  80. 80 https://www.smashingmagazine.com/2017/05/writing-mobile-application-requirements/
  81. 81 https://www.smashingmagazine.com/2017/05/json-api-normalizer-redux/
  82. 82 https://www.smashingmagazine.com/2017/05/why-no-framework/
  83. 83 https://www.smashingmagazine.com/2017/05/introducing-mavo/
  84. 84 https://www.smashingmagazine.com/2017/05/fluid-responsive-typography-css-poly-fluid-sizing/
  85. 85 https://www.smashingmagazine.com/2017/05/fuse-native-cross-platform-apps/
  86. 86 https://www.smashingmagazine.com/2017/05/abridged-cartoon-introduction-webassembly/
  87. 87 https://www.smashingmagazine.com/2017/05/free-virtual-conference-take-agile-ux-skills-next-level/
  88. 88 https://www.smashingmagazine.com/2017/05/web-development-reading-list-183/
  89. 89 https://www.smashingmagazine.com/2017/05/web-development-reading-list-182/

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

Comments are closed.

↑ Back to top