Smashing Newsletter: Issue #230

Editorial

When we talk about privacy, we tend to see a collection of our data as a necessary evil. The content is free, so our data is the price we are often willing to pay to access it. After all, we believe we have nothing to hide and there isn’t really much sensitive information we have in the first place.

Personally, I feel that privacy is all about truly authentic moments. True, intimate moments where something is shared between two people, without a fancy tech giant reading behind the shoulders. It’s not about hiding something; rather, it’s about valuing that precious moment when something personal is shared.

Nobody loves searching for a shoe one day, just to find it appearing in all the wondrous social networks a few seconds later, literally following your every step across the web. Nobody would love to expose their search history, or publicize their personal photos or spam their friends and colleagues with unwanted messages.

We’ve all implemented our GDPR cookie consent prompts, yet many of them are merely tricking customers into content, and annoying them along the way. More often than not, these solutions aren’t GDPR-compliant though.

We are missing established design patterns and development practices that respect and favor users’ privacy while protecting sensitive data and enabling businesses to strive. Privacy by Design is one of them, but it hasn’t gained much traction just yet. With first data privacy investigations on the way, it’s more necessary than ever that we share what we’ve learned and discovered, and benefit from it, together. That’s also why we’ve started writing about privacy UX, and we’d love to hear your stories and case studies as well.

The web is ours; let’s shape it to be more respectful and privacy-aware. Do you have a story to share, or maybe you’ve built a tool that could be worth supporting? Let us know @smashingmag, and we’d certainly spread the word. That’s what we are here for in the first place.

— Vitaly (@smashingmag)

UI Animation In React
Coming Up This Summer: SmashingConf Toronto And JAMstack_conf London
From Napworking To Font Loading: New Conference Videos
How To Create A Sticky Hero Section
A Look Inside The JPEG
Redesigning The Passpod App: A UX Case Study
Inclusive Design Tips And Tools
Upcoming In Smashing Membership
Our Next Smashing Workshops

1. UI Animation In React

Small but meaningful animations are a great way to polish up the user experience. To give your React apps that special extra, Donovan Hutchinson wrote a blog post in which he explores when and how you can add animation to situations when the UI changes to cater for a more delightful and consistent experience. Page transitions, prices, and add-to-cart buttons are just some of the potential use cases which are covered. (cm)

2. Coming Up This Summer: SmashingConf Toronto And JAMstack_conf London

The web is diverse and fascinating because it’s designed by people who are diverse and fascinating. To celebrate this wonderful community, we have two new events coming up: our second annual SmashingConf Toronto (June 25-26) and the brand-new JAMstack_conf London (July 9-10).

Jenny Shen and Phil Hawksworth are two of the faces you’ll meet at our upcoming events. As a little appetizer, we interviewed them on their topics: Jenny shares her knowledge from designing across cultures and Phil attempts to demystify JamStack.

With SmashingConf Toronto, we want to explore the bright and dark sides of front-end and UX — from Service Workers and Designing Across Cultures to Design Systems, Performance, Vue.js, Animation, and much more. Tickets are now available with a 15% discount for four or more conference tickets if you want to take along your team (we’ve got your back in case you need to convince your boss)! Also, don’t forget to sneak a peek at our hands-on workshops.

Monica Dinculescu at the first JAMstack_conf last year talking about things you didn’t think your browser could do. This year’s speakers include Sarah Drasner, Jake Archibald, Una Kravets, Matt Biilmann, and many more.

For JAMstack_conf London we’re very happy to be teaming up with our good ol’ friends at Netlify to learn directly from the engineers and companies who are pushing the boundaries of tomorrow’s web architecture. Let’s explore how to design, build, debug, and deploy fast, modern web projects with the help of static site generators, serverless architecture, and powerful APIs. The revolution is here, be prepared!

3. From Napworking To Font Loading: New Conference Videos

There’s hardly anything that’ll leave you with so much inspiration and new ideas as visiting a conference. Luckily, it has become a bit of a best practice that conference organizers share videos of the talks after the event has ended so that as many people as possible can learn from them. If you couldn’t make it to beyond tellerrand two weeks ago, good news, the talks are now waiting online for you to catch up on them. The same goes for the talks from ng-conf which took place at the beginning of the month. Happy viewing! (cm)

4. How To Create A Sticky Hero Section

A sticky hero section is a nice visual detail, and the CSS position sticky combined with the Intersection Observer API helps you realize it. In her new tutorial, Claudia Romano takes you step by step through the process. In a nutshell: To build a sticky section that reveals its content on scrolling, you’ll create a section composed of two main parts — a media element that will be fixed on scroll and a content element that will scroll over the fixed field. By using a sticky value of the CSS position property and applying it to the media part of the sticky hero element, the element can flow inside its container as you scroll. (cm)

5. A Look Inside The JPEG

JPEG images are everywhere, and without them, the web would be less colorful and a lot slower, as Omar Shehata points out. But what’s behind the image standard? How does it work and what does it take to convert the data stored on your computer to the image you see on the screen? In “Unraveling The JPEG”, Omar takes us on a journey through the different layers of compression of a JPEG, our perception and vision. An entirely new look at something we deal with every day. (cm)

6. Redesigning The Passpod App: A UX Case Study

50% more revenue and a whopping 4698% rise in engagement — these are the hard facts from Felix Lee’s Passpod app redesign. Felix now published a case study in which he shares insights into how he redesigned the travel app to simplify the booking process and make the user experience more intuitive and flexible. An inspiring behind-the-scenes look at the complete redesign process — from gathering user feedbacks to mapping user journeys, wireframing, and conducting usability tests. (cm)

7. Inclusive Design Tips And Tools

Is your web app or site accessibility compliant? Accessibility Insights helps you find out. Available as Chrome and Microsoft Edge Insider extensions, the tool checks for compliance with approximately 50 accessibility requirements and provides instructions and a visual helper to help you fix existing issues.

Speaking of accessibility: If you’re building a web application or single application and are using Vue, React, or Angular, Accessible App is for you. The site collects strategies, links, patterns, and plugins to make your app inclusive. Contributions are welcome. (cm)

8. Upcoming In Smashing Membership

Thank you for being smashing! Over the last months, we’ve been increasing the number of webinars (without increasing the price of membership — it still starts at just $5 a month!) and have also improved video quality since we’ve moved to Zoom. Also, the eBook version of Andy Clarke’s brand new book “Art Direction for the Web” is now available as a part of the Membership, too. Obviously.

Coming up next:

Smashing TV on May 29 at 17:00 GMT
“Every Product Has A Voice” with Benjamin Hersh

We are very grateful for your support which allows us to bring you great content, pay all our contributors fairly, and reduce advertising on the site. (You could become a Member, too and join us in Smashingland where everyone is beautiful and you never get merge conflicts. )

9. New On Smashing Job Board

(Senior) Fullstack Developer at Cluno GmbH (Munich)
“We’re looking for someone who will work closely with colleagues to develop a microservice architecture that offers our customers innovative and platform-independent products.”
Senior PHP Developer at VONQ (Rotterdam)
“We’re looking for a true PHP expert who gets excited when it comes to practices such as domain driven design, event sourcing & CQRS.”
Front-End Software Engineer at CERN (Geneva)
“We’re looking for an experienced front-end software engineer with a deep understanding of the web and a focus on maintainability, resilience and how to deliver the best experience to users.”

10. Our Next Smashing Workshops

In our workshops, we are looking into the current state of front-end and interface design, covering advanced challenges and actual real-life solutions to front-end problems.