Smashing Newsletter #296: Security and Privacy

With CAPTCHA, web security, spam prevention, security, vulnerabilities, tracking blocker and guide to better design.Issue #296 Tue, April 13, 2021 View in the browser 💨

Smashing Newsletter


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?

Spam Prevention Strategy

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 (vf)

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.

Making Sense of Licenses

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. (vf)

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.

Boosting Web Security

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. (vf)

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.

Smashing Online Events

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! (vf)

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.

Terms of Service Didn’t Read

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. (vf)

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.

Open Source Cookie Consents

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. (vf)

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.

Blocking Tracking In Email

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. (vf)

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.

Better Design Guide

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. (vf)

9. New On Smashing Job Board

10. Recent Articles

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!

This newsletter issue was written and edited by Cosima Mielke (cm), Vitaly Friedman (vf) and Iris Lješnjanin (il).

Sent to truly smashing readers via Mailchimp.
We sincerely appreciate your kind support. You

Follow us on Twitter Join us on Facebook

unsubscribe update preferences view in your browser

Older messages

Smashing Newsletter #295: Boosting Your Coding Workspace

Tuesday, April 6, 2021

With tools for a better command line, text editor, finding git commands and pets for your VS Code. Issue #295 • Tue, April 6, 2021 • View in the browser 💨 Smashing Newsletter Ahoj Smashing Friends,

Smashing Newsletter #294: SVG Generators and Tools

Wednesday, March 31, 2021

With SVG filters, cropping tools, SVG assets manager, tet warping generators, animation and SVG transformation. Issue #294 • Tue, March 30, 2021 • View in the browser 💨 Smashing Newsletter Ahoy

Smashing Newsletter #293: Jamstack, Headless, Static Site Generators

Tuesday, March 23, 2021

With static site generators, headless CMS, the state of Jamstack and how to choose if headless options are a good fit for your projects. Issue #293 • Tue, March 23, 2021 • View in the browser 💨

Smashing Newsletter #292: JavaScript, Bundlers, Frameworks

Tuesday, March 16, 2021

With vanilla JavaScript snippets, bundlers, on migrating JavaScript to TypeScript, and how to choose a JavaScript framework. Issue #292 • Tue, March 16, 2021 • View in the browser Smashing Newsletter G

New Live Workshops On Front-End & Design

Thursday, March 4, 2021

Live workshops on web performance, design systems, CSS with Lea Verou, Harry Roberts, Stephanie Eckles and Dan Mall. From front-end to design, to help your boost your skills online. Live workshops on

Inside Claude Monet's Home at Giverny

Wednesday, June 16, 2021

(image) Architectural Digest AD PRO Logo Image may contain: Garden, Outdoors, Arbour, and Porch Forget the Gardens: The Best Part of Giverny Is Monet's Kitchen Read More → (image) Condé Nast

Typography Trends, Tutorials UX, Safari 15, Brave Onboarding, Loaf

Wednesday, June 16, 2021

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar June 16 2021 Typography Trends in 2021: What Should You Know?

Issue 307

Tuesday, June 15, 2021

Fixing up all the table things, equal columns with flexbox, avoiding layout shift when loading web fonts. CSS Layout News Issue 307 By Rachel Andrew – 15 Jun 2021 – View online → It's still sunny

✏ Samsung Redesigns the Save Icon, 22 Exciting New Tools, Typography Trends, and more…

Tuesday, June 15, 2021

Samsung Gives the “obsolete” Floppy Disc Save Icon a Facelift for the 2020s ITSNICETHAT.COM COMMENTS 22 Exciting New Tools for Designers, June 2021 WEBDESIGNERDEPOT.COM COMMENTS Typography Trends in

96 / Not boring avatars for your apps, design resources, iOS 15 UI kit and epic fails

Tuesday, June 15, 2021

Product Disrupt Logo Product Disrupt Half-Monthly Jun 2021 • Part 1 View in browser Image Boring Avatars Tiny JavaScript React library that generates custom, SVG-based, round avatars from any username

Smashing Newsletter #305: Color Palettes Generators and Tools

Tuesday, June 15, 2021

With CSS variables, HSLA, color generators, color combinations and color scales for data visualizations. Issue #305 • June 15, 2021 • View in the browser 💨 Smashing Newsletter Ciao Amici, Color may

👨‍⚕️ Curative Medical UI Kits + 🏆 Challenge Updates

Tuesday, June 15, 2021

Don't Miss This Week's UpLabs Designer Digest 👇 Firstly, we'd like to wish a warm congratulations to Yolan Puspa, the winner of our latest 🎙Clubhouse App Redesign Challenge! Secondly, we

✏ Is A Graphic Design Career For You? Create React Custom Hooks, Health Icons, and more...

Monday, June 14, 2021

Is a Graphic Design Career for You? (7 Questions to Ask Yourself) DRIBBBLE.COM COMMENTS When CSS Isn't Enough: JavaScript Requirements for Accessible Components SMASHINGMAGAZINE.COM COMMENTS Health

A Filmmaker's Kubrickian Loft

Monday, June 14, 2021

Design editor Wendy Goodman takes you inside the city's most exciting homes and design studios. Design Hunting A visual diary by Design Editor Wendy Goodman The living room (that's not really a

This New Tabletop Collection Has Us Falling Back in Love With Formality

Monday, June 14, 2021

Plus, 10 kitchen trends taking TikTok by storm (image) Architectural Digest AD PRO Logo The Expert Taps Former Domino EIC Jessica Romm Perez to Lead Partnerships Read More → CeCe Barfield's New