#414 — October 23, 2019 |
Frontend Focus |
Firefox 70 Released — The latest release includes a handful of interesting CSS changes, such as the 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 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 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 ' 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 Red Stapler |
|