--- title: "Machine learning For frontend developers" publication: "Frontend Focus" issue: 409 published_at: "2019-09-18" canonical_url: "https://frontendfoc.us/issues/409" --- This week's HTML, CSS, browser, and frontend news #409 — September 18, 2019 [Read on the Web](https://frontendfoc.us/issues/409) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1568806645/kmjfhds6fsin2bsrfuso.jpg)](https://www.smashingmagazine.com/2019/09/machine-learning-front-end-developers-tensorflowjs/) [Machine Learning For Frontend Developers With Tensorflow](https://www.smashingmagazine.com/2019/09/machine-learning-front-end-developers-tensorflowjs/) — Charlie Gerard covers how to get started with machine learning using JavaScript and frameworks like Tensorflow.js, and highlights some of the limits of using machine learning in the frontend. Smashing Magazine [(Why) Some HTML is "Optional"](https://remysharp.com/2019/09/12/why-some-html-is-optional) — A little look into why certain HTML tags (such as a closing `

`) are optional — it mainly comes to down to historical backwards compatibility and an evolving approach to how syntax is written. Remy Sharp [![\](https://copm.s3.amazonaws.com/94ebdf92.png)](https://cloudinary.com/users/register/free?utm_source=front_end_focus&utm_medium=sponsored_placement&utm_campaign=dev_sign_up&utm_content=primary_listing&utm_keyword=september_18_2019) [Image & Video Management Made for Front-End Developers](https://cloudinary.com/users/register/free?utm_source=front_end_focus&utm_medium=sponsored_placement&utm_campaign=dev_sign_up&utm_content=primary_listing&utm_keyword=september_18_2019) — Simplify and automate the process of uploading, manipulating, optimizing, and delivering images and videos across every device at any bandwidth. Try Cloudinary. See how easy media management can be. Get your own free account today. Cloudinary sponsor [Firefox Moving to a Faster 4-Week Release Cycle](https://hacks.mozilla.org/2019/09/moving-firefox-to-a-faster-4-week-release-cycle/) — It’ll only be a couple of years before we reach Chrome 100 and it seems Firefox wants a piece of the action :-) Firefox’s release cadence will be moving from approx 6-8 weeks per version to just 4 from Firefox 71 onward. Mozilla Hacks [Two Browsers Walked Into a Scrollbar](https://www.filamentgroup.com/lab/scrollbars/) — A quick exercise in styling scrollbars in an unobtrusive, cross-platform considerate manner. Zach Leatherman [All 245 Entries in The 2019 JS13kGames Competition](https://js13kgames.com/entries/2019) — We linked to the competition a few weeks back and now the fruits of everyone’s efforts are here to check out and play. Some very impressive results here considering the 13 kilobyte file size limit. Andrzej Mazur [What's New in Chrome 77 for Developers?](https://developers.google.com/web/updates/2019/09/nic77) — Chrome 77 is rolling out to users now. Here, Pete LePage dives in to what’s new for developers in this latest version. Google Developers 💻 **Jobs** [Can You Help Our Client Migrate to Node.js? Docklands, London](https://job.careersjs.com/seq) — Do you have experience & strong opinions on Node best practices? Come and share your advice with an engaged, friendly team of excellent software engineers. CareersJS [Find a Frontend job through Vettery](https://www.vettery.com/tech?utm_source=newsletter&utm_medium=cooper-frontendfocus&utm_term=tech&utm_content=grouped&utm_campaign=ad-77580) — Vettery specializes in tech roles and is completely free for job seekers. Create a profile to get started. Vettery 📙 **Articles, Tutorials & Opinion** [Logical Operations with CSS Variables](https://css-tricks.com/logical-operations-with-css-variables/) — How to emulate functions like `not(var(--i))` in CSS by using arithmetic operations via the `calc()` function. Ana Tudor [Contemporary Frontend Architectures](https://blog.webf.zone/contemporary-front-end-architectures-fb5b500b0231) — A frontend engineer’s perspective on modern web application architecture. Harshal Patil [Ghost Buttons with Directional Awareness in CSS](https://css-tricks.com/ghost-buttons-with-directional-awareness-in-css/) — Animating the fill of a ghost button such that the background fills up in the direction from which a cursor hovers over it. Jhey Tompkins [Software Development Partner for CTOs, Product Owners and Tech Leaders](https://tsh.io/for-ctos/?utm_source=FrontendFocus&utm_medium=sponsoredlink&utm_campaign=FFocus) — Build or extend your JavaScript team. In days, not months. The Software House sponsor [CSS Grid: Illustrated Introduction](https://dev.to/mustapha/css-grid-illustrated-introduction-52l5) — A detailed, visual look at how to get to grips with Grid. Mustapha Aouas [Why I'm Preloading A Font Even When I Shouldn't Have to](https://www.alexrp.co.uk/blog/preloading-fonts.html) — Talks about the benefits of preloading fonts, even if they’re referenced in inline CSS. Alex Painter 💡 **Tip of the Week** supported by [![Pantheon\](https://res.cloudinary.com/cpress/image/upload/v1562929333/xyhnkflqthpcttxqlzog.png)](https://pantheon.io/webops?utm_medium=paid_email&utm_source=cooperpress&utm_content=webops&utm_ad_group_name=frontendfocus_091819&utm_campaign=2019_09_webops) **Using CSS to highlight images with no `alt` tags** If you're preparing a site for production it can be a good idea to have images call attention to themselves if they're lacking an alt attribute. This is a simple enough thing to do and is **a helpful, _visual_ way to check that your site is accessible**. To do this you'll need to make use of [the CSS negation pseudo class](https://www.w3.org/TR/selectors-3/#negation) `:not()`. This accepts a selector, such as `alt`, as an argument to check against. The `:not()` selector will check if an image has an `alt` attribute specified, and if not, will trigger. The example below will turn any image lacking alternate text to grayscale. img:not([alt]) { filter: grayscale(100%); } ![Jumping](https://res.cloudinary.com/cpress/image/upload/v1568804493/khtujez6egovqaufhhuc.png) The [`filter:` property has a variety of functions](https://css-tricks.com/almanac/properties/f/filter/), so you can experiment with how 'obvious' you want the images lacking an alt tag to be. Another solution may just be using the tried and tested red `border` or you could use `display: none` to hide a non-compliant image entirely! 😉 Ire Aderinokun [runs through a similar technique here](https://bitsofco.de/styling-broken-images/) for highlighting _broken_images. This Tip of the Week is sponsored [Pantheon](https://pantheon.io/webops?utm_medium=paid_email&utm_source=cooperpress&utm_content=webops&utm_ad_group_name=frontendfocus_091819&utm_campaign=2019_09_webops), the WebOps platform built for agility. Learn how you can [empower your web team and drive results on your website with WebOps.](https://pantheon.io/webops?utm_medium=paid_email&utm_source=cooperpress&utm_content=webops&utm_ad_group_name=frontendfocus_091819&utm_campaign=2019_09_webops) 🔧 **Code, Tools & Resources** [image-actions: Automatically Compress Images On Pull Requests](https://calibreapp.com/blog/compress-images-in-prs/) — This new GitHub Action automatically compresses/optimizes raster images (with minimal setup). Here’s [a direct link to the Action](https://github.com/marketplace/actions/image-actions). Calibre [Introducing 'Can I Email'](https://www.caniemail.com/news/2019-09-09-introducing-caniemail/) — An idea heavily inspired by [Can I Use](https://caniuse.com/), a popular index of Web features and their cross-browser support. _Can I Email_ takes the same idea to what different email clients support. Can I Email [Button Contrast Checker](https://www.aditus.io/button-contrast-checker/) — A straightforward tool to test whether your buttons and links are compliant with WCAG 2.1 contrast guidelines. Aditus [Accessibility for Web Developers. Get the Whitepaper](https://www.telerik.com/campaigns/kendo-ui/wp-accessibility?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-general-whitepaper-accessibility&utm_content=brieflink) Progress Kendo UI sponsor [css-camera](https://woodneck.github.io/css-camera/) — A way to add depth to your web page with CSS3 3D transform. [Documentation](https://woodneck.github.io/css-camera/release/latest/docs/index.html), and [repo here](https://github.com/WoodNeck/css-camera). Mingyu Kim [Headroom.js: Hides Your Page Header Until Needed](http://wicky.nillia.ms/headroom.js/) — A pure JS widget for hiding elements until needed. Nick Williams [CSS Card Hover Effect](https://codepen.io/Jhonierpc/pen/MWgBJpy) — A nice hover effect for a card style element. Jhonier Riascos Zapata codepen 🗓 **Upcoming Events** [Fronteers Conference, October 3-4 — Amsterdam, Netherlands](https://fronteers.nl/congres/2019) — One of Europe’s premiere conferences on front-end web development. [SmashingConf New York, October 15-16 — New York, USA](https://smashingconf.com/ny-2019/) — The conference is sold out, but some workshop tickets are still available. [Accessibility Scotland, October 25 — Edinburgh, UK](https://accessibility.scot) — One day of talks. Friendly, open discussion about accessibility. [Frontend Con, November 26-27 — Warsaw, Poland](https://frontend-con.io) — Brings together 30+ top experts with over 500 experienced frontend pros from all over the world. A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). [Change your email address](https://frontendfoc.us/edit_subscription/*|UID|*) or[Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) © Cooper Press Ltd · Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom