December 4, 2019 #419 — December 4, 2019Read on the WebIn 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 GrundyBootstrap 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 sponsorMozilla 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 HillHow 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 DeveloperA 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)? JobsSoftware 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.FictivFrontend 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-TeamFind 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 & OpinionEdge 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 BottThe 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 GrinsteadAn 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 IsaiahWebSockets 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 SullivanSwitch It Up with CSS Custom Properties — The bare basics of using CSS custom properties (a.k.a. CSS variables) particularly with theming.Kristofer Giltvedt SelbekkLabels 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 KadlecBuilding Animated Draggable Interfaces with Vue.js and Tailwind — Tailwind CSS is an increasingly popular CSS framework.Cristi JoraTried & True Productivity Tips from 25 React ExpertsProgress KendoReact sponsorChecklist to Avoid The Most Common Accessibility ErrorsBruce LawsonCreate HTML5 Native Games in Ionic Capacitor using PhaserAbhijeet 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 codepenWebGLStudio.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 AgenjoFeatured 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 codepenHappy Hues: Curated Colors in Context — A color palette ‘inspiration site’ that shows you the colors in a ‘real-world’ context.Mackenzie ChildCreepyface: JS Library That Makes Your Face Follow The PointerAlejandro TardínScreenshot-to-code: A Neural Network That Transforms A Design Mock-up Into A Static WebsiteEmil WallnerWireframer: Generate SVG ‘Mock Text’ for Your WireframesJim Raptis ? Upcoming EventsFlashback 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. Source link