--- title: "Was the 'form' element a mistake?" publication: "Frontend Focus" issue: 544 published_at: "2022-06-01" canonical_url: "https://frontendfoc.us/issues/544" --- RIP to HTTPS Everywhere and Internet Explorer, plus digging into color fonts on the web. | [![\](https://res.cloudinary.com/cpress/image/upload/v1602675575/hhmdxfk96fnbq3effjk1.png)](https://frontendfoc.us/) Frontend Focus #​544 — June 1, 2022 | [Read on the web](https://frontendfoc.us/issues/544) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1654087865/fvsrfhyccbtqyq9h8683.png)](https://webkit.org/blog/12662/customizing-color-fonts-on-the-web/) [Customizing Color Fonts on the Web](https://webkit.org/blog/12662/customizing-color-fonts-on-the-web/) — Color fonts provide a way to add richness to your designs without sacrificing any of the many benefits of using plain text. Now, WebKit supports the CSS [`@font-palette-values` property](https://drafts.csswg.org/css-fonts-4/#font-palette-values). This post looks at this new at-rule, how to use it to access predefined color palettes, and customize them to match your design. Myles C. Maxfield and David Jonathan Ross (WebKit) [The 'Form' Element Created the Modern Web. Was It a Big Mistake?](https://www.wired.com/story/form-element-modern-web-mistake/) — “_the `
` element was a pivot point for the entire technology industry. It is what changed the web from a read-only medium for physics papers into a read-write medium for anything_.” Paul Ford [![\](https://copm.s3.amazonaws.com/a522c5eb.png)](https://retool.com/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=cooperpress) [Create a Better Interface for Any Business Problem in Retool](https://retool.com/?utm_source=sponsor&utm_medium=newsletter&utm_campaign=cooperpress) — Retool provides a powerful platform to build your UI, connect your data, and publish your app 10x faster. Skip the boilerplate code with 90+ pre-built UI components, and write custom code nearly anywhere to customize how your apps look and work. Retool sponsor [Creating a Perfect Table of Contents with HTML + CSS](https://css-tricks.com/a-perfect-table-of-contents-with-html-css/) — A table of contents is easy to generate in word processing tools, but can be trickier to pull off in plain HTML and CSS. Here’s one approach. Nicholas C. Zakas ['HTTPS Everywhere' Will Sunset in January 2023](https://www.eff.org/https-everywhere/set-https-default-your-browser) — Major browsers now offer native support for an HTTPS only mode and Let's Encrypt makes TLS certificates available to everyone for free.. so mission accomplished, ten years on, for this browser extension that was always seeking to become redundant. Electronic Frontier Foundation **⚡️ Quick bits:** - Internet Explorer is being [retired _this month_](https://youtu.be/0Q_1Lfgpb5s), on June 15th. - Here's [what you need to know](https://blog.chromium.org/2022/05/chrome-103-beta-early-navigation-hints.html) about the Chrome 103 beta (including Early Hints for navigation). - WordPress recently celebrated its 19th birthday —[here's a site celebrating that fact](https://wp19.day). - Bramus Van Damme makes the case for [browsers having a Dark mode 'toggle' override button](https://www.bram.us/2022/05/25/dark-mode-toggles-should-be-a-browser-feature/) rather than a site by site solution. - The Email Markup Consortium is [a new community-led group of industry pros](https://twitter.com/EmailMarkup/status/1529375215347716096) working to "_improve the email experience for everyone_". - The new season of Stranger Things (set in the 1980s) has [a hacking scene featuring...flexbox](https://twitter.com/swyx/status/1531488793819500550). 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1654076941/ofqx55rroro6do6nyjjl.png)](https://learnui.design/tools/typography-tutorial.html) [Learn the Logic of Great Typography](https://learnui.design/tools/typography-tutorial.html) — This is a neat interactive typography tutorial (with real-time feedback), that aims to teach you some of the fundamentals on font choices, spacing, sizing, etc. Erik D. Kennedy ▶[Sara Soueidan: 'Why Does Accessibility Matter?'](https://www.smashingmagazine.com/2022/05/smashing-podcast-episode-47/) — A 50-min chat where Vitaly Friedman talks in-depth to Sara Soueidan on why accessibility really matters and why it is so important to get it right. _There’s a transcript here too if you’d rather read it_. Smashing Magazine podcast [Add Professional Scheduling to Your Web App](https://www.bryntum.com/products/scheduler-pro/?aw=jswkly20220527) — Bryntum's suite of web components includes powerful Gantt and resource scheduling widgets. Free 45-day trial. Bryntum sponsor [Four Tradeoffs When Designing Navigation Menus](https://medium.com/eightshapes-llc/four-tradeoffs-when-designing-navigation-menus-abbf787ae6e3) — Shares the things that tend to “_crop up again and again, regardless of the project, domain, or product_” when creating menus. Dan Brown [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1654087218/akivm3gj4bgpl5gpg3b4.jpg)](https://baymard.com/blog/line-length-readability) [Readability: The Optimal Line Length?](https://baymard.com/blog/line-length-readability) — The length of text lines substantially impacts their readability. Here’s some best practice pointers. Edward Scott [An Introduction to Contiuous Integration and Delivery/Deployment (CI/CD) for Frontend Devs](https://blog.tegadev.xyz/an-introductory-guide-to-ci-cd-for-frontend-developers) Denedo Oghenetega Joseph [Manage Accessible Design System Themes with CSS `color-contrast()`](https://www.smashingmagazine.com/2022/05/accessible-design-system-themes-css-color-contrast/) Daniel Yuschick [Four Cool Hover Effects That Use CSS Text Shadow](https://css-tricks.com/cool-hover-effects-that-use-css-text-shadow/) Temani Afif Jobs [Software Engineers](https://www.stickermule.com/careers) — Sticker Mule is the Internet's most "kick ass" brand. Our software team operates from 17 countries, and we're always looking for more exceptional engineers. Sticker mule [(Senior) JavaScript Engineer (m/f/d) – Full or Part-Time](https://civey-gmbh.jobs.personio.de/job/264030?display=en%20/%20https://civey-gmbh.jobs.personio.de/job/264030?_pc=629016#apply) — You continuously improve the frontend of Civey together with our team. We offer a hybrid working model. Civey GmbH [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/n5b4juitz8svvz0ingwn.jpg)](https://contrast-grid.eightshapes.com/) [Contrast Grid: Test Foreground and Background Color Combos for Compliance with WCAG 2.0](https://contrast-grid.eightshapes.com/) — This interactive tool lets you quickly create a grid of examples so you can test a number of different combinations while quickly being able to discern the accessibility of each. eightshapes [Obfuscate: A Firefox Extension to Obfuscate Text on Web Pages](https://addons.mozilla.org/en-GB/firefox/addon/obfuscator/) — Such as for when you want to take a screenshot showing a page’s general layout but don’t want to share (potentially) private data. Vincent Tunru [Issue Tracking Has Never Been Easier with Shortcut](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=issuetrack) Shortcut (formerly Clubhouse.io) sponsor [System Font Stack: A Quick Reference for CSS Font Stacks Based on System Fonts](https://systemfontstack.com/) — Includes three “stacks”, one each for sans-serif, serif, and mono. Tom MacWright [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1654085902/b4j2ds6stvwxsgcrp16c.png)](https://xsgames.co/randomusers/) [Random Users: API to Generate Random User Names and Profile Pics for Placeholders](https://xsgames.co/randomusers/) — You can select gender, shapes/filters for the images, and pixel-based avatars, all via a simple URL-based API. Frank Eno [Openverse: Openly Licensed Images, Audio and More](https://wordpress.org/openverse/) — From the WordPress team, a search engine with access to 600 million images and audio files that are in the public domain or using a Creative Commons license. More info on the project [here](https://make.wordpress.org/openverse/). Wordpress [Meshed Up: 48 Beautiful Mesh Gradients (Inline SVG or Figma)](https://meshedup.dev/) Michael Andreuzza 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/peterc). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*)