Smashing Newsletter: Issue #296

Editorial

When it comes to our rights and our privacy, we’ve got used to lengthy documents, often poorly formatted, impossible to read and written in a perfect legalese. At the same time, most of us have experienced spambot attacks in our forms and perhaps one or two vulnerability exploits.

In this newsletter issue, we look into privacy and security, with useful little tools and resources to help you prevent spam, get better at web security, make sense of licenses and terms and conditions, and block one or two unfriendly trackers.

A quick note from the Smashing universe: we have ongoing online workshops on front-end & UX, with a few new workshops announced, and we have a free online meet-up coming April 27 — we’d be honored and humbled to welcome you there.

Stay safe and secure, everyone!
— Vitaly (@smashingmag)

1. Spam Prevention Strategy

When it comes to preventing spambots for polluting your forms with spam comments and requests, usually it’s common to think about invisible CAPTCHA first. Luckily, we don’t have to fill in CAPTCHAs much any longer — and it has become remarkably difficult — yet instead we’ve been trained to identify crosswalks and fire hydrants. Can we do better than that?

It’s not a big revelation that CAPTCHAs have significant usability and accessibility issues (PDF). So when we look into spam prevention, we’ve come up with a simple strategy — and with it, CAPTCHA isn’t going to be the first choice. We suggest to use Akismet and similar tools to block known spam IPs.

If it doesn’t work, we go for a random plain “human” question (what color is the sun?). As a next level, we use a honeypot technique to lure bots into input. Then, we use a keyboard-accessible slider to verify or time traps

2. Making Sense of Licenses

So what’s the difference between MIT License and BSD license again? It can be difficult to navigate through the restrictions of licensing for software. To avoid legal trouble, you can check tl;drLegal, a repository of all software licenses explained in Plain English.

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. You can look for specific terms and conditions of a software, but also filter by personal use and commercial use, along with a few other filters. The summaries are peer-reviewed, the most visible licenses even checked by a lawyer. A real timesaver.

3. Boosting Web Security

Getting web security right isn’t easy. It’s enough to have just one loophole or vulnerability for adversaries to use to find their way around your application. Feross Aboukhadijeh has been running a freely available Stanford Web Security Video Course, which includes HTTP(S), cookies, sessions, same origin policy, cross-site scripting (XSS), cross-site script inlcusion, Webauthn and many other related topics.

And if you are building a React application, take a look at 10 React security best practices, a cheatsheet with common things to keep in mind to avoid issues down the road: XSS protection with data binding, rendering HTML, direct DOM access, JSON state and a few others.

4. Upcoming Front-End & UX Workshops

Building and designing good experiences isn’t easy, but we can learn to do so together. For examples, with our friendly online workshops. The same experience and access to experts as in an in-person workshop, without needing to leave your desk. On design systems, interface design, web performance and CSS.

We do our best to provide a truly smashing experience with wonderful folks from all over the world. There are still some early-birds left, with a lil’ friendly discount. Perhaps you’d like to join us and recommend to others — thank you!

5. Terms of Service Didn’t Read

Terms and conditions of a service aren’t usually the evening reading fun material, but before using a service, it’s a good idea to check what will actually happen to your data once you perhaps decide to switch to another service, or use another tool. Terms of Service Didn’t Read tracks the ToS-legalese and converts them to plain English.

The project is run by a user rights initiative to rate and label website terms and privacy policies. For most popular services, tools and sites, the site provides a detailed description of what is allowed, and what isn’t, along with key highlights, a privacy grade and the official documents from the service. Not all services are rated, but you can search for the one in question and at least get an overview of what it provides.

6. Open Source Cookie Consents

In times of GDPR and CCPA, it has become common to rely on third-parties to provide options for EU customers to opt in or opt out from tracking. However, like with any other third-party script, their performance can have a quite devastating impact on the entire performance effort.

As Boris Schapira noted, we might want to study a few different web performance profiles. Normally cookie consent prompts shouldn’t have an impact on CLS, but sometimes they do, so if you aren’t quite happy with your current solution, consider using free and open source options Osano, cookieBAR or cookie-consent-box.

All tools are heavily customizable for your needs, but it’s critical to make sure that the customer’s choices are obvious. You’ll also need to look into listing all used cookies on your privacy policy page, and allow customers to opt-out from them if they wish.

7. Blocking Tracking In Email

Most marketing emails include trackers in HTML email, so they can track how often, when and where customers open emails. MailTrackerBlocker acts pretty much as an ad-blocker for browsers, but works with email clients.

The tool labels who is tracking customers and removes tracking pixels before they can be displayed, so you can still load all remote content and keep you private. Currently only available for Apple Mail on macOS 10.11–11.x.

8. Better Design Guide

With tracking all around us, it’s important to see how as designers and developers we can produce better products that give users control of their privacy and their data while meeting business goals and business requirements. Ethical Design Guide includes a huge overview of useful resources, books, tools and courses, all filtered by topic of interest, to design better.

We’ve also published The Ethical Design Handbook, packed with practical techniques to make honest interfaces work for digital products. Finally, there’s a growing list of tools and resources that are bound to help you keep an eye on inclusive design: A11y Resources.

That’s All, Folks!

Wow, you’ve made it this far! Thank you so much for reading and for your support in helping us keep the web dev and design community strong with our newsletter. See you next time!

April 13, 2021 Smashing Newsletter: Issue #296

Previous Issues