September 12, 2018 #357 — September 12, 2018Read on the WebFrontend 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 RichardLatest 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 sponsorCustomizing 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 JingInvestigating 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 KadlecDesigning 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 HudsonUse 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. ?CooperpressTwo Amazing Conference Days on Design, UX and Code. Get 100 USD OffSMASHINGCONF NYC sponsor? JobsReact & 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.DatadogTry Vettery — Create a profile to connect with inspiring companies seeking Frontend devs.Vettery? Articles & TutorialsChromium 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-devHow 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 EngineeringCreating Sliding Effects using Sticky Positioning — A break down of a novel slider effect that uses position: sticky.Preethi SamFive Reasons Why You Might Want to Join Us for SIGNAL on Oct 17 & 18Twilio sponsorThe 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 LeathermanUsing the Speech Synthesis Interface of the Web Speech API — Get your browser to speak back to you.Manuel WieserColor Cycling with Workers — A classic, oldschool visual effect but neatly brought into the modern frontend era.Dave RupertThe Benefits of Using CSS Grid for Web Form LayoutCraig BucklerImplementing Single File Web ComponentsTomasz JakutMaster 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 sponsorBabel 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 MukkamalaProgressively 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? CodeInfiniteGrid 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.NAVERSplitting: 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 ShawKy: Tiny, Elegant Fetch-Based HTTP Client for Browsers — Makes the Fetch API tidier to use as shown here.Sindre SorhusReact Color: 13 Color Pickers from Sketch, Photoshop, GitHub, Twitter, etc. — A wide selection of color picking controls for your React projects.Case Sandbergluma.gl: WebGL2 Components for Data VisualizationUber Source link