Bootstrap 4.4.0 arrives, Firefox Replay unveiled on macOS (only, for now)

#419 — December 4, 2019 Read on the Web In case you were wondering if you were missing an issue of Frontend Focus last week, we took a break for Thanksgiving :-) Frontend Focus Making a Better Custom Select Element — Julie Grundy kicks off 24ways’s fifteenth Web developer advent calendar with a fantastic article digging deep into the thorny issue of customizing form inputs while keeping them accessible. Julie Grundy Bootstrap 4.4.0 — This update to the popular component library introduces new responsive containers and classes, new functions and mixins, along with various fixes and deprecations. Mark Otto, Jacob Thornton, and Bootstrap contributors New Course: ⚛️ GraphQL + React Hooks — Learn to use GraphQL on the client-side using React with Apollo Client. Frontend Masters sponsor Mozilla Shows Off Firefox Replay for Nightly Builds on macOS — It's still very early days, but this new tool allows you to record, replay and rewind various processes, including JS behaviour, DOM changes, graphical updates and more. Cross-platform support will come later. Detailed information on the project is over on Mozilla’s site. Paul Hill How to Use New CSS :is() for Easy Element Targeting — A straightforward look at this new “matches-any” pseudo-class, a successor of sorts to the :any() and :matches() selectors. Runs through a few uses cases, including pairing it up with :not. Kezz Bracey ▶  Do This to Improve Image Loading On Your Website — Jen Simmons explains how adding width and height attributes to all your images is something you may want to start doing again, as this can now help stop load ‘jank’. Mozilla Developer A W3C Status Update on Web Games Technologies — The W3C has a quick bullet-point roundup of where things standard regarding various technologies used in building games for the Web, such as WebAssembly, the Gamepad API, and the Web Monetization API. François Daoust (W3C) 💻 Jobs Software Engineers, Frontend at Fictiv (San Francisco) — We bring a user friendly experience to manufacturing, making it easy to turn designs into real products. Use the latest tech and JS to iterate quickly, ensuring a rapid feedback loop between us and our customers. Fictiv 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 Find a Job Through Vettery — Make a profile, name your salary, and connect with hiring managers from top employers. Vettery is completely free for job seekers. Vettery 📙 News, Tutorials & Opinion Edge Vs. Chrome: Microsoft's Tracking Prevention Hits Google The Hardest — The new Edge browser, built on the same open source code as Google Chrome, contains a new Tracking Prevention feature that blocks third-party trackers and, at the Strict setting, many ads. Ed Bott The Firefox UI Is Now Built with Web Components — A few weeks ago Mozilla moved away from their XML-based UI implementation over to one built using Web Components. This blog post explains the what and the why behind this years long effort. Brian Grinstead An Introduction to the Picture-in-Picture Web API — Chrome supports a ‘picture-in-picture’ mechanism for creating floating video windows that continue to play even if a user navigates to a different page. Firefox and Safari have support via proprietary APIs too. Ayooluwa Isaiah WebSockets Vs Long Polling — Should you ever use Long Polling instead of WebSockets? Read more in this protocol comparison. Ably sponsor ▶  Lessons Learned From Performance Monitoring in Chrome — Filmed at the recent performance.now() conference, this talk is full to the brim with insightful performance know how. Here’s the related slides. Annie Sullivan Switch It Up with CSS Custom Properties — The bare basics of using CSS custom properties (a.k.a. CSS variables) particularly with theming. Kristofer Giltvedt Selbekk Labels Are A Last Resort — Worry not, this isn’t about forms and accessibility, more so about practical label placement, emphasis, and whether you may need one at all in certain scenarios. Refactoring UI ▶  Predictive Prefetching — Examines the techniques currently being developed, like GuessJS, to make predictive prefetching a reality. Divya Sasidharan ▶  When JavaScript Bytes — Practical ways to reduce the amount of JavaScript we’re sending down to the people using our sites. Tim Kadlec Building Animated Draggable Interfaces with Vue.js and Tailwind — Tailwind CSS is an increasingly popular CSS framework. Cristi Jora Tried & True Productivity Tips from 25 React Experts Progress KendoReact sponsor Checklist to Avoid The Most Common Accessibility Errors Bruce Lawson Create HTML5 Native Games in Ionic Capacitor using Phaser Abhijeet Rathore 🔧 Code, Tools & Resources CSSYBERTRUCK — An animated CSS recreation of the Tesla Cybertruck. Be a shame if someone was to tamper with those windows... David Khourshid codepen WebGLStudio.js: A 3D Graphics Editor in the Browser — It’s not new but its author says it’s now mature, ready to be extended, and can be used in production (although a 1.0 release is still a little way away). Javi Agenjo Featured GSAP 3 Pens: A Collection by GreenSock — Last week we shared news of GSAP 3’s release, and here the GreenSock team share a collection of Codepens that show off the animation library’s new features. GreenSock codepen Happy Hues: Curated Colors in Context — A color palette ‘inspiration site’ that shows you the colors in a ‘real-world’ context. Mackenzie Child Creepyface: JS Library That Makes Your Face Follow The Pointer Alejandro Tardín Screenshot-to-code: A Neural Network That Transforms A Design Mock-up Into A Static Website Emil Wallner Wireframer: Generate SVG 'Mock Text' for Your Wireframes Jim Raptis    🗓 Upcoming Events Flashback Conference, February 10-11 — Orlando, Florida — Looks at cutting-edge web dev, browser APIs and tooling, but adds the understanding of how they’ve evolved from the past to the web of today. FrontFest, February 15 — Madrid, Spain — A Spanish conference, now in its fourth year. Frontend Developer Love, February 19-21 — Amsterdam, Netherlands — Three full days of talks from 35+ global JavaScript leaders from around the world. CityJS Conf, March 27 — London, UK — A 'JavaScript festival' across London.

by via Frontend Focus