---
title: "10 HTML Elements You Didn't Know You Needed"
publication: "Frontend Focus"
issue: 384
published_at: "2019-03-27"
canonical_url: "https://frontendfoc.us/issues/384"
---
This week's HTML, CSS, browser, and frontend news
#384 — March 27, 2019
[Read on the Web](https://frontendfoc.us/issues/384)
Frontend Focus
[](https://css-tricks.com/an-illustrated-and-musical-guide-to-map-reduce-and-filter-array-methods/)
[An Illustrated (and Musical) Guide to Map, Reduce, and Filter Array Methods](https://css-tricks.com/an-illustrated-and-musical-guide-to-map-reduce-and-filter-array-methods/) — A look at how to best leverage these three useful JavaScript array methods, with tips on how to remember them.
Una Kravets
[All You Need to Know About Hyphenation In CSS](http://clagnut.com/blog/2395) — We linked to a piece [exploring hyphenation support](https://justmarkup.com/log/2019/01/a-look-at-css-hyphenation-in-2019/) back in January. Here’s another good look at how to use it practice, along with use case examples.
Richard Rutter [](https://www.telerik.com/campaigns/kendo-ui/wp-planning-react-app?utm_source=frontendfocus&utm_medium=cpm&utm_campaign=kendo-ui-react-whitepaper-planreactapp&utm_content=primary)
[What Should Developers Consider When Planning a React Application?](https://www.telerik.com/campaigns/kendo-ui/wp-planning-react-app?utm_source=frontendfocus&utm_medium=cpm&utm_campaign=kendo-ui-react-whitepaper-planreactapp&utm_content=primary) — Start your next React project with confidence. Learn strategies for tooling, frontend and UX, testing and performance to boost your (and your team’s) productivity. [Get your free copy](https://www.telerik.com/campaigns/kendo-ui/wp-planning-react-app?utm_source=frontendfocus&utm_medium=cpm&utm_campaign=kendo-ui-react-whitepaper-planreactapp&utm_content=primary).
Progress KendoReact sponsor
[Crafting Reusable HTML Templates](https://css-tricks.com/crafting-reusable-html-templates/) — We linked to the first post in this five-part Web Components series in [last week’s issue](https://frontendfoc.us/issues/383), and now all posts are available. It’s a good look at why Web Components are a great approach to building front-end components and UI elements in a standardized way.
Caleb Williams
[10 HTML Elements You Didn't Know You Needed](https://dev.to/emmawedekind/10-html-element-you-didnt-know-you-needed-3jo4) — This is reasonably elementary, but reminded me of the sort of things that did well back when we were called _HTML5 Weekly_ so.. here's a quick look at some HTML elements, a few of which you might not have known existed.
Emma Wedekind beginner
[Using `closest()` to Return the Correct DOM Element](https://allthingssmitty.com/2019/03/25/using-closest-to-return-the-correct-dom-element/) — `closest` travels up the DOM tree from the current element and returns the closest ancestor that matches the given parameter.
Matt Smith
💻 Jobs
[Product-Focused & Driven Frontend Engineers in Stockholm](https://careers.dietdoctor.com/jobs/196340-frontend-engineer?promotion=81764-trackable-share-link-frontendweekly-newsletter) — Join our 30-person team of A-players, solve problems at global scale & help us become the most trustworthy online health company.
Diet Doctor Sweden AB
[Find A 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 dev roles and is completely free for job seekers.
Vettery
📘 Articles, Tutorials & Opinion
[Better Web Video with AV1 Codec](https://evilmartians.com/chronicles/better-web-video-with-av1-codec) — How to use AV1 to make videos on your site both smaller and better quality. Includes CLI instructions and some cross-browser tricks.
Andrey Sitnik
[How We Built The Fastest Conference Website in The World](https://2019.jsconf.eu/news/how-we-built-the-fastest-conference-website-in-the-world/) — Yes, a bit of a clickbait headline, but there’s a few handy strategies and tips here that were employed to make the JSConf EU site speedy.
Malte Ubl
[Create Robust Angular Apps Using Pre-Built Components with Full Support](https://www.sencha.com/products/extangular/evaluate/?utm_source=cooperpress&utm_medium=advertising&utm_campaign=sncextangular&utm_content=032719-sncextangular-ad-fef) — Download our free 30-day trial of ExtAngular to gain access to 115+ components, all built to use with Angular applications.
SENCHA, INC sponsor
[Building Accessible Websites and Apps Is A Moral Obligation](https://gomakethings.com/building-accessible-websites-and-apps-is-a-moral-obligation/) — What if web accessibility was legally required in the way handicapped access is in physical businesses? _(Note: It is in some countries.)_
Chris Ferdinandi
[See No Evil: Hidden Content and Accessibility](https://cloudfour.com/thinks/see-no-evil-hidden-content-and-accessibility/) — Looks at scenarios in which you may want to hide content, and how to handle such situations in an accessible manner.
Paul Hebert
[How to Manipulate CSS Colors with JavaScript](https://blog.logrocket.com/how-to-manipulate-css-colors-with-javascript-fb547113a1b8) — This goes into a _lot_ more depth than you might be expecting.
Adam Giese
[SVG Circle Decomposition To Paths](https://www.smashingmagazine.com/2019/03/svg-circle-decomposition-paths/) — How to turn SVG circles into paths which you can use in animation and text paths.
Smashing Magazine
[A Guide to Debugging Common JavaScript Errors](https://dev.to/aspittel/oops-i-did-it-again-a-guide-to-common-javascript-errors-28e7)
Ali Spittel beginner
[How to Keep Your CSS Grid Layouts Accessible](https://webdesign.tutsplus.com/articles/a-guide-to-css-grid-and-accessibility--cms-32857)
Anna Monus
🔧 Code and Tools
[](https://emilkowalski.github.io/css-effects-snippets/)
[CSSeffectsSnipets](https://emilkowalski.github.io/css-effects-snippets/) — A nice little collection of CSS animations, with one-click copy and paste, created with Vue.
Emil Kowalski
[⚡ ZingGrid: Responsive, Interactive JavaScript Data Grids & Tables](https://www.zinggrid.com/hello/front-end-focus?utm_source=front-end-focus&utm_medium=sponsored_email&utm_campaign=front-end_focus_2019-03-27)
ZingGrid sponsor
[Exploding 3D Objects with Three.js](https://tympanus.net/codrops/2019/03/26/exploding-3d-objects-with-three-js/) — A set of effective WebGL demos that show an exploding 3D-object animation.
Yuriy Artyukh demo
[dropcss: A Simple, Thorough and Fast Unused-CSS Cleaner](https://github.com/leeoniya/dropcss) — A simple tool for finding and removing unused CSS.
Leon Sorokin
[x-ray: A Visual Debugger for Your HTML, Executable Via A Bookmark](https://github.com/benscabbia/x-ray) — Enables you to see the space taken up by each individual element.
Benjamin Scabbia
[](https://www.flexulator.com/)
[Flexulator: Browser-Based Flexbox Space Distribution Calculator](https://www.flexulator.com/)
Nick Lyons
[Schedule SQL > MongoDB Migrations | Generate Python + PHP in Studio 3T](https://studio3t.com/whats-new/release-2019-2/?utm_source=newsletter&utm_medium=cooper&utm_campaign=Mar27)
Studio 3T sponsor
🗓 Upcoming Events
[SmashingConf, April 16–17 — San Francisco, CA](https://smashingconf.com/sf-2019/) — A friendly, inclusive event which is focused on real-world problems and solutions.
[IMAGECON, May 1–2 – San Francisco, CA](https://www.imagecon.com/) — A two-day conference with a dozen workshops and seven speakers focused on all things images on the web.
[CityJS Conference, May 3 — London, UK](https://cityjsconf.org/) — Meet local and international speakers and share your experiences with modern JavaScript development.
[Frontend United, May 16-18 — Utrecht, Netherlands](https://www.frontendunited.org/) — A yearly, non-profit, developer-first, community-focused conference.
[CSSCamp 2019, July 17 — Barcelona, Catalunya](https://csscamp.tech/) — A one-day, one-track conference for web designers and developers.
A **[Cooperpress](https://cooperpress.com/)** publication — Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) and [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