WDRL — Edition 228: Responsive CSS Tables, Progressive Enhancement And Free Product Design Principles

Celý článek

Hey,

we often talk about performance and request browsers to render things faster. But when they finally do, we as developers use the chance to demand even more performance. Alex Russel from the Chrome team shared some thoughts on developer abuse of browser performance and explains why websites are still slow while browsers reinvented themselved, created incredibly faster rendering engines. This is in-line with the article by Oliver Williams indicating that we’re focusing on the wrong things and instead of delivering the fastest solutions for slower machines and browsers, we serve even bigger bundles with polyfills and transpiled code to every browser. And while it’s certainly not easy to break out of this pattern and serve small bundles in the interest of the user, we have all technologies to achieve that. Let’s more often explore the non-traditional ways and think about the actual user experience. And take time upfront before defining a project workflow instead of afterwards.

News

• Firefox 60 is out and brings ECMAScript Modules, the Web Authentication API.
• Chrome 66 changed how it allows Web Audio to be used by webservices. Following a lengthy discussion that revealed how many WebRTC clients depended on that hidden Audio capturing method that’s now blocked, Chrome will revert the autoblocking and delay it until Chrome 70 which is coming in autumn. This said, nothing will change but developers are given a longer time to adapt their codebase.

Generic

• Oliver Williams on the importance to rethink how we’re building websites and implement “progressive enhancement”. It’s us who make the experience worse for our users when blindly transpiling all our ECMAScript code, and it’s us who make things worse when blindly serving tons of JavaScript polyfills to those who already use slow, old machines and software like IE11. Oliver takes on how we can shape the web to work great for everyone by prioritising features properly and stripping code out for older software.

UI/UX

• Some big news this week come from Adobe regarding their Xd prototyping product: From now on, the software will be free for anyone with the new Starter Plan. The only differences to paid plans are limited storage, only one shared prototype (but as many non-shared as you want), and only the free Typekit library. Besides these news, the team improved the Sketch and Photoshop integrations, you can now swap symbols, paste to multiple artboards, and design specs can now be password protected.
• Mei Zhang shares how we can learn better product design principles building cards.

Security

• The latest Firefox version comes with Web Authentication API support — a big step towards eliminating passwords. This lets you login via a hardware key like YubiKey instead of a password if the browser and the web service both support the new technology. Notably, Chrome 67 beta is shipping the API as well already and their team has written a technical implementation guide as well.

Privacy

• Bloomberg published a story about the open source privacy-protection project called pi-hole. It’s one of my favourite softwares I use daily to keep my entire home and work network tracking-free and this article gives a few insights on why it exists and what the goals are.

Web Performance

• Andrew Betts researched how many websites use outdated headers that we don’t want anymore and found out that it’s a lot. He now shares why we should drop old headers and which ones we want to serve instead.

Accessibility

• Scott O'Hara explains the differences between hidden and none keywords in ARIA and when we should which one.

JavaScript

• Chris Ashton “used the web for a day with JavaScript turned off.” This piece highlights the importance of thinking about possible JavaScript failures on websites and why it matters if you provide fallbacks or not.

CSS

• Rarely talked about since the last decade, CSS tables are still used on most websites to show (and that’s totally the correct way to do so) data in tables. But as they’re not responsive by default, we always struggled when making them responsive and most of us used JavaScript to make them work on mobile screens. Lea Verou now found two new ways to achieve responsive tables by using CSS: One is to use text-shadow to copy text to other rows, the other one uses element() to copy the entire <thead> to other rows — I still try to understand how Lea found these solutions but this is amazing!

Work & Life

• Johannes Seitz on project management at the start of projects where we pretty much know nothing about it. He calls the method “Iteration Zero” and it’s certainly an interesting concept to understand the scope, risks of a project better when you still don’t have enough experience from the project itself but need to build a roadmap and build it.

Go beyond…

• Ethan Marcotte elaborates on the ethical issues with Google Duplex that is designed to imitate human voice so well that humans can’t know anymore if it’s a machine or a human being. While technically this sounds quite interesting, this will push the debate about fake news much further and cause more struggle to differentiate between something a human said or a machine imitated.

—Anselm