July 19, 2019 #399 — July 10, 2019Read on the WebFrontend 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 sponsorDark 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 ChicagoAn 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 BlogChrome 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 CimpanuThe 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? JobsFrontend 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.TrainingPeaksFront-end Engineer — Goldstar is looking for Front-end Engineers with React expereince onsite in Portland, Oregon and Pasadena, California.GoldstarJob Searching Without the Searching? Try hackajob ? — Let your skills do the talking. Get matched to roles based on your favourite frontend frameworks.hackajob? Tutorials & OpinionThe 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 MagnificoCSS Architecture for Multiple Websites — Elad shares his knowledge and experience from writing a reusable and scalable CSS architecture for use across multiple websites.Elad ShechterThe 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 sponsorDeveloping 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 LeathermanFun 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 WalterResponsive Design Ground Rules — Some ground rules to follow to keep your responsive design robust and predictable.PolypaneCreating A Multi-Level Hierarchical Flyout Navigation Menu Using Only HTML and CSSAbhishek GhoshA Little Reminder That Pseudo Elements are Children, KindaChris CoyierHow Google Pagespeed Works: How to Improve Your ScoreBen 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 Dingbatsp5.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 FoundationWeb 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 SerotaProactively Identify & Improve Issues Before They Affect Customers with Datadog SyntheticsDatadog sponsorsimpleParallax: A JavaScript Library for Parallax Effects — A straightforward, tiny library which adds parallax animation to any image.Geoffrey SignoratoFormPersistence.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 EventsAn 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. Source link