Smashing Newsletter: Issue #202

Editorial

As a dotcom webmaster in 2000, one of my roles was to collect and share details of visitors to our site. At the time, the data came from raw server logs. The data was limited to information on visit time, location via IP address, and User Agent. I returned to my team from one meeting, laughing that the sales team had asked me if I could tell them how many of the visitors were women. It seemed a nonsensical request at the time.

In 2018, however, this would not be such an outlandish request, with many sites collecting a huge amount of data about individuals. As we have seen over the past week, this data can then be used for purposes that the people handing over the data would never have imagined or agreed to.

As web designers and developers, we find ourselves on both sides of the issue. Most of us are using products that collect and use our personal data, but we also design products that deal with data. We are sometimes put in the position of knowing that technically something would be possible, but having to make the decision about whether it is ethical. This is something we care about here at Smashing, and over the past two weeks we have published articles on Using Ethics in Web Design and Ethical Design A Practical Getting Started Guide. We want to start conversations on this subject, and help to keep it in all of our minds as we make decisions about how we deal with the people who use our websites and applications.

Let’s keep talking about these issues,
— Rachel (@rachelandrew)

Getting The Most Out Of Vue.js
Freebie: Watercolor Text Effect For Photoshop
How To Make Your React Apps Accessible
Designing For Fingers, Touch, And People
A Look Inside The DNA Of Good Design
Swapping Images With The Sizes Attribute
Free Audio And Video Lectures From MIT

1. Getting The Most Out Of Vue.js

Vue.js gives us the opportunity to create reusable and consistent components, which is pretty much the core idea of building and maintaining a design system. Viljami Salminen has built “Vue Design System” which is a set of workflows and patterns that help you incorporate a design system into your existing workflows, and also keeps your pattern library and production perfectly in sync. Have a look at Viljami’s article to learn more about it.

And don’t worry if you have yet to start learning Vue. Vue Mastery is a free online course by Gregg Pollack and Adam Jahr that presents weekly Vue.js video tutorials. Also, Sarah Drasner is running a full-day workshop at SmashingConf San Francisco on April 16, 2018, where you can deep-dive into common problems such as building forms, managing data, caching, filtering, and so much more. Check out the schedule → (cm)

2. Freebie: Watercolor Text Effect For Photoshop

How about a watercolor effect to give your design a bit of a handcrafted touch? If you want to create one without spending a lot of time on it, Chris Spooner has got your back. He created a free watercolor effect for Photoshop that lets you customize text and graphics quickly thanks to the built-in Smart Object.

The watercolor text effect uses a mix of Photoshop filters to create a painted effect with subtle coloring. By altering the Color overlay layer, you can fine tune the effect or randomly generate new textures with a click — and all of that while keeping your original artwork intact. (cm)

3. How To Make Your React Apps Accessible

React is gaining more and more popularity these days, and this means that we should keep in mind to make the React experiences we create accessible for everyone. But where to start? Scott Vinkle recently posted a tweet in which he shared some good reads that are bound to get your React accessibility undertakings onto the right track.

A good place to begin is Emily Mears’ article Getting Started With Web Accessibility In React which covers some of the basic accessibility features that React enables or supports, as well as some basic implementations. Marcy Sutton’s slides about how React.js impacts accessibility share some useful accessibility tools. And, last but not least, Scott Vinkle wrote up his tips for overcoming some of the more challenging accessibility issues in React. Put together, the three of them form a fine set of tools to cater for inclusive React experiences. (cm)

4. Designing For Fingers, Touch, And People

Cradled, hold and touch, two hands. The ways people hold and use their smartphones are as different as, well, the people themselves. When building digital products, however, we often tend to think we know how others interact with their touch devices and base design decisions on opinion, personal bias and hearsay instead of real data.

To put an end to designing with assumptions, Steven Hoober closely examined how users interact with their phones and tablets and summarized his findings in a set of touch-friendly design guidelines. They’ll help you understand why people interact with their smartphones and tablets the way they do, so you can better tailor mobile experiences to their actual needs. (cm)

5. A Look Inside The DNA Of Good Design

What fuels great design? InVision wanted to find out and studied design-forward teams. What came out of the undertaking is the Design Genome Project, a series of extensive case studies that grant a look behind the scenes of how companies that shape the world around us with their products design and build.

Netflix, Slack, Shopify, Capital One, and Pinterest are the first ones that shared their processes, tool stacks, and philosophies for the Design Genome Project, and more are about to come. A great way to discover what sets the best digital product teams apart. (cm)

6. Swapping Images With The Sizes Attribute

Building dynamic components that enable users to magnify, swipe, and pan around images used to be tricky if you wanted to use image sizes responsibly. Luckily, responsive image standards have gained support, and we can offload much of the source selection logic to the browser. And, well, there’s one particular trick that takes dynamic image components to a new level, as Scott Jehl points out. In a nutshell: When using srcset and sizes, sizes allows you to lie about an image’s layout size.

Why you would want to do that? Well, as Scott explains, you can manipulate sizes to swap sources in a dynamic component — take a magnifier component, for example. To see it in action, be sure to check out the quick demos of a JavaScript-enhanced image magnifier component that Scott has built. (cm)

7. Free Audio And Video Lectures From MIT

Have you always had a sweet spot for architecture? Or maybe you’re fascinated by philosophy? Whatever it might be that sparks your interest, now’s the time to learn something new: The MIT has just released audio and video lectures from 34 departments that you can tune into for free.

Ranging from aeronautics to writing and humanistic studies, the variety of available courses is huge. You’ll find a lot of computer science and electrical engineering ones, for example, but cognitive sciences and arts are also featured. A great source of knowledge! (cm)

March 27, 2018 Smashing Newsletter: Issue #202

Previous Issues