A Straightforward Introduction to 'Houdini'

#357 — September 12, 2018 Read on the Web Frontend Focus A Straightforward Introduction to 'Houdini' — Three years ago, Houdini was called ‘maybe the most exciting development in CSS you’ve never heard of’. And even now it can be tricky to understand what this collection of mostly incomplete CSS related APIs and technologies really represents. This mini-site helps clear it up. Sam Richard Latest Chrome Stripping 'www' from Hostnames in Location Bar — Chrome is hiding ‘trivial’ subdomains (such as www. and m.) in the location bar, but a lot of people aren’t happy about the change, and it kicked off one of Hacker News’s biggest discussions. You can turn the feature off though. Chromium Reduce Time Spent on Meetings & Increase Productivity — monday.com is a project management tool which is the next generation of visual tools, built specifically for developers. It’s designed to work with ease, and allows you to see what everyone on your team is working on in a single glance. monday.com sponsor Customizing Radio Buttons Without Compromising Accessibility — If you want to use HTML’s support for radio buttons to create more elaborate controls, this will be very handy. Chen Hui Jing Investigating Chrome's NOSCRIPT Intervention — Chrome on Android may, in future, disable JavaScript on weak connections to attempt to speed things up. This article looks at how to test the feature out. Tim Kadlec Designing a Textbox, Unabridged — You might think it’s as easy as putting an input type="text" element down but this article goes into much more depth about what’s involved in making a text entry field for the Web that does what you want. Shane Hudson Use React? Check Out Our React-Focused Newsletter — If you work with React and haven’t heard about our React-focused newsletter yet, check it out as that’s where most of our React links go. 🙂 Cooperpress Two Amazing Conference Days on Design, UX and Code. Get 100 USD Off SMASHINGCONF NYC sponsor 💻 Jobs React & Redux Frontend Engineer (New York, Paris, Remote) — We transform complex datasets into beautiful visualizations and implement innovative browser-app UIs. Apply to join us here. Datadog Try Vettery — Create a profile to connect with inspiring companies seeking Frontend devs. Vettery 📘 Articles & Tutorials Chromium Intent to Implement: ElementTiming for 'img' Elements — The ElementTiming API will allow developers to know when certain specified image elements are first displayed on the screen. blink-dev How GitHub Removed jQuery From Their Frontend — GitHub.com has just completely removed jQuery as a dependency but it’s taken years and here’s how they pulled it off. GitHub Engineering Creating Sliding Effects using Sticky Positioning — A break down of a novel slider effect that uses position: sticky. Preethi Sam Five Reasons Why You Might Want to Join Us for SIGNAL on Oct 17 & 18 Twilio sponsor The Web Font Loading Checklist — Four key points to consider when both getting the most out of Web fonts and keeping your perf budget tight. Zach Leatherman Using the Speech Synthesis Interface of the Web Speech API — Get your browser to speak back to you. Manuel Wieser Color Cycling with Workers — A classic, oldschool visual effect but neatly brought into the modern frontend era. Dave Rupert The Benefits of Using CSS Grid for Web Form Layout Craig Buckler Implementing Single File Web Components Tomasz Jakut Master the Latest Technology and Trends Impacting Software Engineering — Online & evening M.S. in Software Engineering. Advanced understanding of Java™, C# and Swift, JavaScript, HTML, and CSS. Regis University sponsor Babel Explained in Simple and Digestible Terms — Babel 7 came out recently and if you’re wondering what the fuss is about, this might help. Kashyap Mukkamala Progressively Enhanced CSS Layouts: Floats to Flexbox and Grid — How to convert a traditional, float-based layout into one that harnesses flexbox and grid, plus tips on graceful degradation and progressive enhancement. Diogo Souza 🔧 Code InfiniteGrid 3.4: Arrange Card Elements Infinitely on a Grid Layout — If you want to build a card-based layout, this could come in very handy. Check out this tutorial on making a Pinterest-style layout with it. GitHub repo. NAVER Splitting: CSS Variables for Split Words, Characters, and Other Elements — “Splitting creates elements and adds CSS variables to unlock amazing possibilities for animating text, grids, and more.” Stephen Shaw Ky: Tiny, Elegant Fetch-Based HTTP Client for Browsers — Makes the Fetch API tidier to use as shown here. Sindre Sorhus React Color: 13 Color Pickers from Sketch, Photoshop, GitHub, Twitter, etc. — A wide selection of color picking controls for your React projects. Case Sandberg luma.gl: WebGL2 Components for Data Visualization Uber

by via Frontend Focus