WDRL — Edition 222: Responsive Image Tech Revisited, Fixing HSTS, Fair Algorithms, Ethic Design, And Design Perfection

Celý článek

Hey,

This is already the 222th edition of my weekly newsletter. When I started it, it was a simple list on my blog that I published every two weeks. Since then, a lot has changed and while my newsletter is now a dedicated resource a lot of people rely on to get useful articles summarized to their inbox every week, the web has changed a lot with it.

This week’s pretty long list shows that our industry is much more diverse, detailed and has evolved from focusing on technical details only over to a job where we need to care about what we do, if it’s in the interest of users — all while constantly using new tools and libraries and learning about accessibility, performance.

News

• The Safari Technology Preview 52 removes support for all NPAPI plug-ins other than Adobe Flash, and adds support for preconnect link headers.

Generic

• Anil Dash reflects on what the web was intented to be and how today’s web differs. But “At a time when millions are losing trust in the the web’s biggest sites, it’s worth revisiting the idea that the web was supposed to be made out of countless little sites. Here’s a look at the neglected technologies that were supposed to make it possible.”
• Morten Rand-Hendriksen on using ethics in web design and what questions we should ask ourselves when suggesting a solution, making a design, new feature. And especially when we think we make something ‘smart’, it’s important to put these important questions whether it actually helps people first.
• With the Facebook / Cambridge Analytica affair a lot of protest and discussions came along, most of them pointing out the technological problems with Facebooks permission model. But the main point is how Facebook designed their company and which ethical baseline they set. If we want this not to repeat, it’s upon us to design the service we want.

UI/UX

• B. Kaan Kavuştuk on why we won’t be able to build a perfect design or codebase on our first try, no matter how much experience we have. Instead, it’s the constant small improvements that pave the way to perfection.
• Trine Falbe introduces us to Ethical Design with a practical getting-started guide. It shows alternatives and things to think about when building a business or building a product, and it doesn’t matter much if you’re the owner, a developer, a designer or a sales person. This is about serving users, and building a layer of real and sustainable trust to your customers.
• Josh Lovejoy shares learnings from working on inclusive tech solutions and why a good intention is not enough to create a fair, inclusive technology. This article goes into the depth of how men and women express different things with the ‘same’ face, how we assume with our intentions and why human judgement is very difficult. If we bring this into algorithms we train them with all our bias and it’s not easy to design and develop one that treats different people equally.
• The HSB (Hue, Saturation, Brightness) color system isn’t especially new, it’s even available on the web since years now but its advantages are still not understood by many people. Erik D. Kennedy explains the principles and advantages of the HSB color system step-by-step.

Tooling

• Brian Schrader found an unknown feature in git that’s very helpful to test ideas quickly: Git Notes lets us add, remove, or read notes attached to objects, without touching the objects themselves and without needing to commit the current state.
• For many projects, I prefer to use npm scripts over calling gulp or direct webpack tasks. Michael Kühnel shares some useful tricks for npm scripts how to achieve what we need, including how to allow CLI option parameters, watch tasks and alert notices on error.
• Anton Sten explains why new tools don’t always equal productivity. We all love new tools and there are new design tools such as Sketch, Figma, Xd, Invision Studio popping up very quickly. But despite these tools solving a lot of common problems and make some things easier, productivity is mostly about what works for your problem and not what is newest. If you need to create a static mockup and Photoshop is what you can work best with, why not use it? I’m pretty much a fan of this and use Photoshop a lot, Sketch a lot, and recently digged deeper into Xd and Figma a bit. But I must say despite these new tools have great functionality it doesn’t matter much if I use Figma or Xd and Sketch’s new prototyping feature is probably what I’ll stay with for a bit longer — because I already know how to use Sketch but would need to learn Invision Studio and Figma first before being able to be productive.

Security

• HTTP Strict Transport Security (HSTS), especially with preloading, has been long seen as one of the best security features to ensure that a browser should connect only securely to a hostname. However, advertisers have found a way to track users with this and using it as a persistent cross-site identifier (known as “super cookie”). The WebKit developers reacted now and in order to protect the privacy of their users, they now weaken the reliability of HSTS by limiting the hostname scope and ignore a HSTS state for subresource requests to blocked domains. Another example of rogue companies ruining security features by exploiting users’ privacy.

Web Performance

• This week, a discussion popped up again on whether the technique of serving compressive images is still a good idea and Tim Kadlec took it as a trigger to revisit it. And Tim now concludes that we should not use the compressive image technique anymore because of the big memory footprint and instead should rely on the new responsive image technologies such as the <picture> element, or srcset,sizes-attributes.
• Eric Portis shares the under the hood principles of the w descriptors and sizes attribute for images. A pretty technical but revealing secrets post that makes you finally understand the magic behind these new responsive image attributes.

Accessibility

• Marcy Sutton shares the new stuff in Axe 3.0, which supports Shadow DOM, and which you can run in your automated test suite.

JavaScript

• WebKit’s gotten an upgrade for the Clipboard API and the team gives some very interesting insights into how it works and how Safari will handle some of the common challenges with handling clipboard data such as images.
• If you work with key value stores that live only in the frontend, IDB-Keyval is a great lightweight library that simplifies the work with IndexedDB and localStorage and doesn’t carry as much weight as the localForage library that carries a lot of legacy code for better old-browser compatibility.
• Ever wanted to create graphics from your data with a hand-drawn, sketchy, appearance on a website? Rough.js lets you do exactly that. It’s usually Canvas based (for better performance and less data) but can also draw SVG paths.
• If you need a drag and drop reorder module, there’s a good solution available now that is accessible and works smooth: dragon-drop.

Work & Life

• James Bennett shares one particular embarrassing situation of making a simple mistake that took him long time to find out in order to raise awareness of how common such situations are for all people. It’s not just me making mistakes, it’s not just you and not just James — all of us make mistakes, and as embarrassing as they seem to be in that particular situation, there’s nothing to feel bad about.
• Adam Blanchard says “People are machines. We need maintenance, too.” and creates a comparison for engineers to understand why we need to take care of ourselves and need people who take care of us. This is an insight on what People Engineers do as a job and why it’s so important for companies to hire such persons to ensure your team is healthy.

Go beyond…

• Now that we discuss the problems of centralized services like Facebook and Google, decentralization is seen as the big savour of the independent web. But I’m sure that if we try to solve the underlying humanitarian issue with technology, nothing changes.
• You might have read the news last week that the first fatal crash with a self-driving car happened. A sad milestone that shows how unreliable this technology can still be and how far away we still are from being able to rely on such systems.
• A decade ago, smart devices promised to change the way we think and interact, and they have – but not by making us smarter. Eric Andrew-Gee explores the growing body of scientific evidence that digital distraction is damaging our minds.

—Anselm