Firefox 70 is here

#414 — October 23, 2019 Read on the Web Frontend Focus Firefox 70 Released — The latest release includes a handful of interesting CSS changes, such as the display property now accepting two keyword values (for setting both inner and outer display types), password generation for input type='password' fields, improved underline styling, and more. There's also the usual Firefox 70 for developers post outlining all the key changes in a bulletpoint fashion. Mozilla Focusing on Focus — Focus behavior in Web browsers has been in flux and under-specified for years. Efforts are now underway to clear up some of the confusion (particularly around Shadow DOM and autofocus) and begin to firm up the specs “to hopefully make focus in HTML make sense to browser engineers and web authors”. Rakina Zata Amni (WHATWG) Frontends Without Backend with FaunaDB Auth + Native GraphQL — FaunaDB is a globally distributed, scalable database. Thanks to built-in security and native GraphQL, frontends can directly communicate with FaunaDB in a secure way which eliminates the need to pass through a backend and greatly reduces latency. FaunaDB sponsor The "P" in Progressive Enhancement Stands for "Pragmatism" — Demonstrates how using progressive enhancement with CSS can be used to build things up gradually. “With a Progressive Enhancement mindset, support actually means support. We’re not trying to create an identical experience: we’re creating a viable experience instead.” Andy Bell Can We Please Style The <select> Control? — Highlights issues developers are facing when working with the the built-in <select> element, and what efforts are being undertaken to hopefully improve it. Greg Whitworth Style Hover, Focus, and Active States Differently — Why you should (and how to) style hover, focus, and active states differently. Zell Liew 💻 Jobs Frontend Developer at X-Team (Remote) — Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers. X-Team Have You Tried Vettery? — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started. Vettery 📙 Articles, Tutorials & Opinion Making Tables Responsive with Minimal CSS — When creating table-based layouts you may be tempted to implement some sort of custom grid-system or pull in a pre-built library. The author argues against this, recommending using just “tables and some simple CSS”. Bradley Taunt Box Alignment and Overflow — Runs through a data-loss issue you may face when using box alignment properties in certain scenarios, and highlights how the 'safe' overflow alignment keyword can help prevent such a loss. Chen Hui Jing State Management for Flutter Apps with MobX — Learn how to use MobX to ease state management on a Flutter project. CircleCI sponsor How to Design Delightful Dark Themes — Plenty of practical tips here on how to design dark themes that are “readable, balanced, and delightful”. Teresa Man Options for Hosting Your Own Non-JavaScript-Based Analytics — Rounds-up a range of alternatives to Google Analytics. Chris Coyier The 'Perfect' Responsive Menu — Here’s how to create a menu that is accessible and works across mobile and desktop browsers without any duplication. Polypane JAMstack Tools and The Spectrum of Classification — An overview of JAMStack services and tools, along with some notes on their pros and cons. Chris Coyier The React Hooks Guide: In-Depth Tutorial with Examples. Start Learning Progress KendoReact sponsor An Introduction to Regular Expressions for Web Developers Chris Achard 🔧 Code, Tools & Resources Peaks.js: Interact with Audio Waveforms — A client-side JavaScript component to display and interact with audio waveforms in the browser. Here’s the related GitHub repo. Indrek Lasn TinaCMS: A Site Editing Toolkit for Modern React-Based Sites — An open-source real-time site editing toolkit currently aimed at Gatsby and Next.js users. Tina Open Doodles: A Collection of Free CC0 'Sketchy' Illustrations — You can even generate a set with your own custom colors (as above). Pablo Stanley Typetura: Fluid Typesetting — We linked to this responsive typography tool when it was in beta earlier this year, and now it’s generally available (paid). It'll help set up text transitions between breakpoints — here’s a demo of it in action. Typetura ▶  A Realistic 'Water Effect' with Just HTML & CSS — A very convincing effect using the <feTurbulence> SVG filter. Here's the code. Red Stapler    🗓 Upcoming Events VueConfTO 2019, November 11-12 — Toronto, Canada — The first ever Vue Conference in Canada. Chrome Dev Summit, November 11-12 — San Francisco, USA — A two-day summit to learn about the latest from Chrome, plus techniques for building the modern Web. Note: Registrations are now closed, but the event can be joined remotely. Performance Now, November 21-22 — Amsterdam, Netherlands — A single track conference with fourteen speakers, covering the most important web perf insights. HalfStack Conf, November 22 — London, UK — A single day event focused on UI-centric JavaScript and web development. Frontend Con, November 26-27 — Warsaw, Poland — Brings together 30+ experts with over 500 experienced frontend pros from all over the world. dotCSS, December 4 — Paris, France — The largest CSS conference in Europe.

by via Frontend Focus