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 practices 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 Sketch or integrating front-end views into design tools with Zeplin, Sympli, Invision Craft and Avocode.
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 NYC 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 Sense](#a1)
2. [Unveil The Front-End Superhero Inside Of You!](#a2)
3. [Community-Curated Spreadsheets For Startups And Web Professionals](#a3)
4. [A Security Checklist For Web Developers](#a4)
5. [New Tab, New Perspectives](#a5)
6. [Tools For Collaborative Coding And Designing](#a6)
7. [Free Sketch Plugins To Make Your Workflow More Efficient](#a7)
8. [Women Who Draw](#a8)
9. [Upcoming Smashing Workshops](#a9)
10. [New On Smashing Job Board](#a10)
11. [Smashing Highlights (From Our Archives)](#a11)
12. [Recent Articles On Smashing Magazine](#a12)
### [](#)1\. 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 avatars](https://uxdesign.cc/design-avatars-that-make-sense-and-be-more-inclusive-in-the-process-d4dd6a486ea6).
[](https://uxdesign.cc/design-avatars-that-make-sense-and-be-more-inclusive-in-the-process-d4dd6a486ea6 "Design Avatars That Make Sense")
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)_
### [](#)2\. 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 York](https://www.smashingconf.com) 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. ;-)
[](http://smashingconf.com/ "SmashingConf New York 2017")
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 workshops](https://smashingconf.com/workshops) the day before, or the day after the conference, too? _(aa)_
### [](#)3\. 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?
[](https://spreadshare.co/ "SpreadShare")
That’s what the folks behind _SpreadShare_ thought, too, and so they created a platform where web professionals can explore [community-curated spreadsheets](https://spreadshare.co/) 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 downloading](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)!
### [](#)4\. 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 Checklist](https://simplesecurity.sensedeep.com/web-developer-security-checklist-f2e4f43c9c56) to help prevent his fellow developers from common security pitfalls.
[](https://simplesecurity.sensedeep.com/web-developer-security-checklist-f2e4f43c9c56 "Web Developer Security Checklist")
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)_
### [](#)5\. 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?
[](http://www.100millionbooks.org/ "100 Million Books")
Steve’s browser extension [100 Million Books](http://www.100millionbooks.org/) 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)_
### [](#)6\. 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 [Figma](https://www.figma.com/) could help ease some of that friction.
[](https://www.figma.com/ "Figma")
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 Mode? 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)
7. 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 plugins 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.
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)
8. 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 Draw to life.
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)
9. 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.
Workshops at SmashingConf New York — June 12
- Atomic Design: Process & Patterns – Brad Frost
- Good Ideas Make Great Illustration – Yuko Shimizu
- Persuasive Design – Horace Dediu
- The Modern Front-End Workflow Bootcamp – Umar Hansa
- Smart UX Design Patterns – Vitaly Friedman
Workshops at SmashingConf New York — June 15
- An Introduction To Service Design – Eric Reiss
- How to Design With Science Without Losing The Magic – Joe Leech
- Mastering SVG – Sara Soueidan
- New Front-End Adventures in Responsive Design – Vitaly Friedman
Workshops at SmashingConf Freiburg
- Smart UX Design Patterns – Vitaly Friedman (September 10)
- Modular Design – Alla Kholmatova (September 13)
- Modern Front-End Workflow Bootcamp – Umar Hansa (September 13)
- Advanced CSS Layouts With Flexbox and CSS Grids – Rachel Andrew (September 13)
Public Smashing Workshops
- Hamburg — Germany • New Front-End Adventures in Responsive Design, 25hours Hotel Hamburg HafenCity, July 3rd, 2017
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.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!
10. New On Smashing Job Board
Here are the recent job openings published on our Smashing Job Board:
- Director, Web & Mobile Marketing Products 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) 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 Developer 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."
11. Smashing Highlights (From Our Archives)
- How To Enhance Your Creativity – Taming The Wild Mind
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 Copywriting
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?
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.
12. Recent Articles On Smashing Magazine
Design Articles
- Better Form Design: One Thing Per Page (Case Study)
- Low-Hanging Fruits For Enhancing Mobile UX
- Basic Patterns For Mobile Navigation: Pros And Cons
- Intrusive Interstitials: Guidelines To Avoiding Google’s Penalty
- From Idea To Development: How To Write Mobile Application Requirements That Work
Coding Articles
- json-api-normalizer: An Easy Way To Integrate The JSON API And Redux
- "Why We Didn’t Use A Framework" (Case Study)
- Introducing Mavo: Create Web Apps Entirely By Writing HTML!
- Fluid Responsive Typography With CSS Poly Fluid Sizing
- How To Create Native Cross-Platform Apps With Fuse
- An Abridged Cartoon Introduction To WebAssembly