June 9, 2020 Smashing Newsletter: Issue #256

Editorial

This week, we were hoping to run our very first online conference, SmashingConf Live. Smashing has always been about community and bringing people together for a celebration of one another.

However, we don’t feel like now is the time for a ‘celebration.’ The murder of George Floyd, Ahmaud Arbery, and Breonna Taylor, and the protests around the world against racism and police brutality should be the focus right now. Therefore, we took the difficult decision to postpone the conference.

Instead, we’ll host a free Smashing Meets event today. An event that is open to everyone in the web community. With sessions on performance, CSS, GraphQL, and creative courage. If you’d like to come along to listen and to chat with friends around the world, we’d love you to join us.

— Rachel (@rachelandrew)

Table of Contents

1. Black Illustrations
2. Increase Conversion Without Alienating Customers
3. The Future Is Here
4. Insights Into How Developers Work Today
5. A Magic Notebook For Exploring Data
6. Global And Component Style Settings With CSS
7. See Easing Curves In Action
8. Licenses Summarized At A Glance
9. CSS Art In A Single Div
10. Upcoming In Smashing Membership
11. Our Next Smashing Workshops

1. Black Illustrations

Black people and people of color are often underrepresented in illustrations and visuals. To spark change in the digital landscape, the team at 5four created Black Illustrations, illustration packs that paint a more diverse picture and show black people and people of color in a myriad of tasks.

There are six illustration packs that can be used on websites, pitch decks, infographics, or anywhere you like. Two of the decks are free to download: “The Office Hustle” shows people in an office environment, working from home, and having conversations, as well as in a healthcare setting, while “The Movement Pack” calls attention to #BlackLivesMatter and the fight against racial inequality. Other packs include education- and lifestyle-themed images. Beautiful designs with a powerful message. (cm)

2. Increase Conversion Without Alienating Customers

Does your manager insist on using dark patterns to trick customers into buying? Or has an A/B test shown that an annoying pop-up does increase sign-ups? Whether we are designers, marketers, entrepreneurs, or product owners, we are all in the same boat: We want to give users a good experience, but we also need them to take action. More often than not, these things are considered to be mutually exclusive, but they don’t have to be.

That’s why we teamed up with Paul Boag to create Click! How to Encourage Clicks Without Shady Tricks, a practical guide that shows you how to increase clicks, build trust and loyalty, and drive leads while keeping users respected and happy at the same time. You can download the complete first chapter as a free PDF excerpt (17.3 MB) or get your copy right away, of course. Books are now shipping worldwide.

3. The Future Is Here

Imagine you are working on a project and want to add a picture of a book to it. You have the book right beside you on your desk, so you take out your phone, take a picture of the book, send the picture to your computer, open it in Photoshop, remove the background, and, finally, include the picture in your file. Well, now what if you could copy and paste the book from reality onto your screen, just where you want it to be? What might sound like science fiction, is already possible today.

The research prototype AR Copy Paste allows you to copy elements from your surroundings and paste them into an image editing software. Three independent modules make it happen: a mobile app, a local server that acts as the interface between the app and Photoshop and finds the correct position on your screen, and, last but not least, an objection detection/background removal service to cut the image into shape. An impressive peek at the future of AR. (cm)

4. Insights Into How Developers Work Today

Since almost a decade, the yearly Developer Survey conducted by Stack Overflow is the largest survey of people who code. This year, they made it more representative of the diversity of programmers, asking 65,000 developers from around the world how they learn, which tools they use, and what they want. The survey was conducted in February and the results offer a comprehensive look inside the community.

The survey covers the developers’ professional and demographical background, looks at tools and their popularity, what the respondents’ dev environments look like and how they learn and solve problems, just like at their career values, job priorities, and working conditions. Interesting insights guaranteed. (cm)

5. A Magic Notebook For Exploring Data

Open source has transformed software development, making sharing, collaboration, and transparency the norm. Inspired by this, Observable aims at reimagining data science for a connected world. To make it more approachable, accessible, and social.

Described as a “magic notebook for exploring data and thinking with code”, Observable lets you sketch with live data. You can prototype visualizations, connect to Web APIs, and see your “notebook” update instantly when changes are made. Learning from one another, sharing and reusing components with a community of fellow authors is a key part of the concept, teams are even able to edit a notebook together in realtime. Now what to make with it? Reports, explanatory visualizations, UI prototypes, documentation, art projects, visual designs — only your imagination is the limit. (cm)

6. Global And Component Style Settings With CSS

Have you ever considered using CSS Variables to create a pattern library? If not, Sara Soueidan shares some valuable tips for doing so.

The ability to scope variables to components comes in especially handy to create more manageable project styles and more portable patterns, as Sara shows. You can use them to create a stylesheet that contains the global settings of a project (think colors, fonts, type scales, icons, etc.) so that, whenever any of those settings need to change, you know exactly where to make that change, and it will propagate consistently throughout the entire system. To go a step further, Sara also explains how she uses CSS Variables to define a library of local, component-scoped styles that can be used across projects. A great way to speed up your prototyping workflow. (cm)

7. See Easing Curves In Action

Movement in the real world is something fluid, no harsh or instant starts or stops, no constant speed. Easing curves help us bring that natural feel to motion on the web. However, in practice, they can be quite abstract to grasp, too.

With Easings, Paul Macgregor built a useful tool to visualize the effect common easing curves have on a range of interfaces — from a gallery carousel to a side menu, scroll jack, and modal. Just choose an easing curve from the collection to see it in action or enter a custom one. One for the bookmarks. (cm)

8. Licenses Summarized At A Glance

Too long, didn’t read. That’s the reaction many of us have when it comes to licenses or terms of service. However, sometimes there’s no getting around them. TLDRLegal might help you in those cases.

The site summarizes popular open source and software licenses at a glance, giving short and concise information on what can be done, what cannot, and what’s necessary to keep in mind. The summaries are peer-reviewed, the most visible licenses even checked by a lawyer. A real timesaver. (cm)

9. CSS Art In A Single Div

What can you do in a single div? Lynn Fisher has a lot of creative answers to this question, as her CSS drawing project A Single Div shows.

Every drawing is made up of CSS living inside a single div element and uses a combination of Pug for templating and Stylus for CSS preprocessing. From lettering and geometrical patterns to random objects and little characters, each colorful tile is a wonderful example of what can be accomplished with CSS. (cm)

10. Upcoming In Smashing Membership

Click! How to Encourage Clicks Without Shady Tricks is finally here, our new practical guide on how to build trust, increase conversion, and boost business KPIs effectively — without alienating people along the way. The eBook (PDF, ePUB, Kindle) is, and always will be, available to Smashing Members for free.️

We’re also busy preparing new Smashing TV live sessions at the moment, so be sure to keep an eye on the schedule to not miss out on anything.

Dear friends, thank you for your kind support. It allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. Join us in Smashingland where everyone is beautiful and you never get merge conflicts. 😉

11. Our Next Smashing Workshops

In our workshops, we explore best practices and interesting techniques in front-end and interface design, always focusing on actual solutions to real-life problems.

We also have online workshops that are designed to give you the same experience and access to experts as in an in-person workshop, but without needing to leave your desk.

• The CSS Layout Masterclass with Rachel Andrew (June 11–12)
• Front-End Accessibility Masterclass with Marcy Sutton (June 16-30)
• Building Modern HTML Emails with Rémi Parmentier (June 18-26)
• Buy! The eCommerce UX Workshop with Vitaly Friedman (July 2-17)
• Design Systems with Brad Frost (July 7-21)

Or, if you’d like to run an online workshop with your team, please get in touch with Vitaly at vitaly@smashingconf.com and briefly describe what problems you’re facing and would like to solve. Get in touch — it’s that easy! (vf)

Smashing Newsletter

Useful front-end & UX bits, delivered once a week. Subscribe and get the Smart Interface Design Checklists PDF — in your inbox. 🎁

Your (smashing) email Subscribe →

Front-end, design and UX. Sent out 1× a week.
You can always unsubscribe with just one click.