Tuesday, March 27, 2018

Smashing Newsletter #202: Dealing With Data, Design DNA and Vue.js

As web devs and designers, we find ourselves on both sides of the most recent data leak issue, where we end up being the last resort of data privacy.Issue #202 March 27, 2018 View in the browser

Smashing Newsletter

Dear Friend,

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)


Table of Contents

1. Getting The Most Out Of Vue.js
2. Freebie: Watercolor Text Effect For Photoshop
3. How To Make Your React Apps Accessible
4. Designing For Fingers, Touch, And People
5. A Look Inside The DNA Of Good Design
6. Swapping Images With The Sizes Attribute
7. Free Audio And Video Lectures From MIT
8. Upcoming in Smashing Membership
9. Upcoming Workshops With Vitaly Friedman
10. New on Smashing Job Board
11. Popular Articles This Month

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.

Vue Mastery

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 Toronto on June 25th, 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)


SmashingConf Toronto (June 26-27)

"Coming to Smashing Conferences fundamentally changed how I develop websites." — Ryan Chittenden

What's the best way to learn? By observing designers and developers working live. Welcome to SmashingConf #noslides! A brand new conference in Toronto taking place on June 26-27 where the speakers aren't allowed to use any slides at all. Learn from speakers like Dan Mall, Sara Soueidan, Lea Verou and Aaron Draplin and many more! View all speakers →

SmashingConf Toronto 2018

One track, two conference days, 14 brilliant speakers and just 500 available seats. Save $100 and make your experience even more memorable by attending one of our workshops, too.


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.

Free Watercolor Text Effect

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.

React Accessibility

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)


Our sponsor:

Get Your Free Object Pascal eBook

The Object Pascal Handbook (free download ↓) by Marco Cantu is a complete guide (500 pages) that covers object-oriented programming with Object Pascal, and the latest language features, such as:

a) Writing desktop apps and client-server applications,
b) Massive web server modules and middleware,
c) Office automation and mobile apps.

Get Your Free Object Pascal eBook

The idea of the book is to explain core concepts, immediately present short demos, and allow one to understand the concepts behind them. The Object Pascal Handbook progresses through the topics and covers how the language works and how to best use it. You can download the eBook for free.


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.

Designing For Fingers, Touch, And People

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.

Design Genome Project

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.

Swapping Images With The Sizes Attribute

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)


Our sponsor:

Explore And Test Complex And Innovative Data-Driven Apps

Have you tried Qlik Playground yet? It's a free programming environment where you can learn about, use, and experiment with Qlik's Associative Engine and APIs. By accessing public data sets (including your own GitHub data) through their APIs, you can create cool data-driven apps using powerful search, data retrieval without writing queries, out-of-the-box charts with a single line of code and more. Start playing now!

Qlik Playground


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.

MIT Open Courses

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)


8. Upcoming In Smashing Membership

We have a Smashing Membership that helps us keep the site alive and go ad-free. You can make a difference as well, and get valueable content from it, too. Coming up next:

We really appreciate the kind support of our members! You should become one of us, too. ;-)


9. Upcoming Workshops With Vitaly Friedman

๐Ÿ‡บ๐Ÿ‡ธ San Francisco, SmashingConf SF, April 16–19
๐Ÿ‡ต๐Ÿ‡ฑ Gdansk, Infoshare, May 22–23
๐Ÿ‡จ๐Ÿ‡ฆ Toronto, SmashingConf, June 25–28

A Workshop with Vitaly Friedman with some happy attendees

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 some of the most recent job openings at Smashing Jobs:

  • Multilingual WordPress Support Engineer at Kinsta (Remote)
    "Our global client base is growing steadily and we're looking for a competent support engineer from 9AM to 5PM (CET local time zone) with exceptional communication skills who can provide enterprise level technical support to our customers via our support system."
  • Web Designer at U.S. News & World Report (Washington, DC)
    "This position requires an excellent eye for design, coupled with a keen ability to understand user needs, behaviors, and motivations. You should have strong Sketch/Photoshop/Illustrator skills and be comfortable working with HTML, CSS and basic Javascript."
  • Software Engineer (multiple levels) at Averon (New York)
    "Do you want a job where you stop bad guys and make the world a safer place? Want to develop a global scale system? Averon is looking for python developers (all levels) to help reduce cybercrime."

11. Popular Articles This Month

  • Ethical Design: The Practical Getting-Started Guide
    As designers and developers, we have an obligation to build experiences that are better than the norm. This article explains how unethical design happens, and how to do ethical design through a set of best practices.
  • How BBC Interactive Content Works Across AMP, Apps, And The Web
    Publishing content to so many media without lots of extra development overhead can be difficult. Chris Ashton explains how they've approached the problem in BBC's Visual Journalism department.
  • The Thumb Zone: Designing For Mobile Users
    If there is one thing that will stand the test of time, it's thumb placement on mobile devices. This makes consideration of the "thumb zone" an important factor in the design and development of mobile interfaces.

The authors are: Cosima Mielke (cm), Iris Ljeลกnjanin (il), Vitaly Friedman (vf), Christiane Rosenberger (research), Elja Friedman (tools).


Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You
rock.
Follow us on Twitter Join us on Facebook



No comments:

Post a Comment