Firefox 68 and dark patterns at scale

#399 — July 10, 2019 Read on the Web Frontend Focus Firefox 68: BigInts, Contrast Checks, and the QuantumBar — Version 68 is now available, featuring support for big integers, whole-page contrast checks, and a new implementation of a core Firefox feature: the URL bar. Camera and microphone access now requires HTTPS in version 68 — matching how Chrome behaves. Here's a full list of developer facing changes in 68. You can see the full release notes here. Dan Callahan (Mozilla) CSS Lists, Markers, And Counters — There’s a lot more to styling lists using CSS than you might think, says Rachel Andrew, including using the new ::marker pseudo-element introduced with this week’s Firefox 68 release (featured above). If you want to be the up-to-date CSS list expert in the office this week, read this. Rachel Andrew Image & Video Management Made for Front-End Developers — Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today. Cloudinary sponsor Dark Patterns at Scale: Findings from a Crawl of 11K Shopping Websites — The findings from a large-scale study, analyzing ~53K product pages from ~11K shopping websites to characterize and quantify the prevalence of dark user interface patterns. Princeton University and University of Chicago An Intro To Screen Reader Testing for Sighted Developers — This quick guide will give you an introduction to the why and how of testing your website’s user experience using screen readers. Uncaught Reference Error Blog Chrome to Get Video Play/Pause Button on the Toolbar — Google Chrome users will soon have a quicker way to pause auto-playing media across all tabs in their browser. This feature is in the Canary build now. Catalin Cimpanu The Future of Websites: Headless CMSes? — An increasing number of CMS’s have been shunning traditional database-driven systems in favor of API driven ones, known as “headless CMS”es. Here’s a run through some pros and cons of the approach. Dan Fries 💻 Jobs Frontend Senior Software Engineer & Architect at TrainingPeaks — Bring your engineering best practices to the brand helping athletes and coaches around the world analyze and plan their training. TrainingPeaks Front-end Engineer — Goldstar is looking for Front-end Engineers with React expereince onsite in Portland, Oregon and Pasadena, California. Goldstar Job Searching Without the Searching? Try hackajob 🔎 — Let your skills do the talking. Get matched to roles based on your favourite frontend frameworks. hackajob 📙 Tutorials & Opinion The Many Ways to Include CSS in JavaScript Apps — A look at the ways in which CSS can be handled within a JavaScript application — something of a controversial topic in the land of frontend development. I like option 1. Dominic Magnifico CSS Architecture for Multiple Websites — Elad shares his knowledge and experience from writing a reusable and scalable CSS architecture for use across multiple websites. Elad Shechter The Little Legacy Code That Could: A Fable of Software Ownership — A lack of software ownership isn’t a simple problem, but we have a few recommendations that can help your teams. CircleCI sponsor Developing a Robust Font Loading Strategy for CSS-Tricks — Zach takes a look at the font loading behavior for the latest redesign of the popular CSS-Tricks site. Zach Leatherman Fun Places to Learn CSS Layout – Grid Layout — We’ve linked to a few of these in the past, but here’s a good round-up of some fun places, tutorials and sandbox sites to help you learn Grid Layout. Stéphanie Walter Responsive Design Ground Rules — Some ground rules to follow to keep your responsive design robust and predictable. Polypane Creating A Multi-Level Hierarchical Flyout Navigation Menu Using Only HTML and CSS Abhishek Ghosh A Little Reminder That Pseudo Elements are Children, Kinda Chris Coyier How Google Pagespeed Works: How to Improve Your Score Ben Schwarz 🔧 Code, Tools & Resources Pie Chart Maker: An Easy Way to Create Pie Charts — A free tool to create good looking customizable pie charts. Insert your data and it offers up a JPG, PNG, or even an animated version to embed. Beautiful Dingbats p5.js: A Client-Side JS Platform for Creative, Arty Coding — This mature project has just had a big release. Check out some of the examples in the live p5.js playground for a feel for how cool this is – it makes putting together visualizations and visual experiments very easy. Processing Foundation Web Audio DAW: Using the Web Audio API for Dynamic Sound Synthesis — A Javascript library for manipulating audio using the HTML Web Audio API. “It’s like jQuery for your ears”. Raphael Serota Proactively Identify & Improve Issues Before They Affect Customers with Datadog Synthetics Datadog sponsor simpleParallax: A JavaScript Library for Parallax Effects — A straightforward, tiny library which adds parallax animation to any image. Geoffrey Signorato FormPersistence.js: Preserve HTML Form Data Across Sessions — If people start to fill out a form, why not keep the data around in their local storage in case they leave and come back? Finn Thompson    🗓 Upcoming Events An Event Apart, July 29-31 — Washington, D.C. — A popular three-day conference that focuses on all things relating to digital design and user experience. WebAIM: Web Accessibility Training, August 13-14 — Logan, Utah — Covers everything from basic web accessibility principles to advanced accessibility techniques. Front Conference, August 29-30 — Zurich, Switzerland — A two-day double-track conference for everyone involved from concept to implementation. Web Unleashed 2019, September 13-14 — Toronto, Canada — Covers a variety of front-end topics leaving you 'informed, challenged and inspired'. CSSConf, September 25 — Budapest, Hungary — A community conference dedicated to the designers and developers who love CSS.

by via Frontend Focus