--- title: "The importance of establishing code guidelines and standards for a project" publication: "Frontend Focus" issue: 430 published_at: "2020-03-04" canonical_url: "https://frontendfoc.us/issues/430" --- This week's HTML, CSS and browser news #430 — March 4, 2020 [Read on the Web](https://frontendfoc.us/issues/430) Frontend Focus [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1583342414/inikzzeudmdeu2teiok9.png)](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) [Why The GOV.UK Design System Team Changed The Input Type for Numbers](https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/) — Highlights how the `` element can be somewhat problematic in some scenarios, and offers up a solution. Hanna Laakso [Safari to Snub New Security Certs Valid for More Than 13 Months](https://www.theregister.co.uk/2020/02/20/apple_shorter_cert_lifetime/) — From September 1, any new certificate valid for more than 398 days will be rejected by Apple’s _Safari_ browser. While this is a Safari only move for _now_, if this catches on it might affect how you manage your TLS certificates. The Register [![\](https://copm.s3.amazonaws.com/51652c12.jpg)](https://pages.awscloud.com/awsmp-Ops-SS-NewRelic-ScaleK8.html?&trk=el_a131L0000084LRSQA2&trkCampaign=awsmp_Ops_SS_NewRelic_ScaleK8&sc_outcome=Marketplace&sc_country=mult) [AWS Webinar: How to Scale Kubernetes in AWS](https://pages.awscloud.com/awsmp-Ops-SS-NewRelic-ScaleK8.html?&trk=el_a131L0000084LRSQA2&trkCampaign=awsmp_Ops_SS_NewRelic_ScaleK8&sc_outcome=Marketplace&sc_country=mult) — Operating a Kubernetes environment at scale requires monitoring for performance and health. Join this webinar to discover how to proactively approach monitoring of your Kubernetes environments — at any scale and any level of complexity. Amazon Web Services (AWS) sponsor [Rolling Code Standards](https://bradfrost.com/blog/post/rolling-code-standards/) — Covers the significance of establishing code guidelines and standards at the beginning of a project, and the importance of evolving those standards as a project progresses. Brad Frost [The CSS Working Group Publishes Four 'First Public Working Drafts'](https://www.w3.org/blog/news/archives/8343) — This update briefly discusses the first drafts for four specs: CSS Color Module Level 5, Media Queries 5, CSS Transforms Level 2, and CSS Conditional Rules Level 4. W3C [Brave Browser Now Automatically Points to Wayback Machine On 404](https://www.theverge.com/2020/2/26/21154096/brave-browser-wayback-machine-404-internet-archive-lost-pages) — The web browser can now detect when a webpage is unavailable and will offer to search the Wayback Machine for a backup. The feature isn’t just for 404 errors though, as it will also trigger when hitting a 408, 410, 451, 500, 502, 503, 504, 509, 520, 521, 523, 524, 525, or 526 error. Jon Porter [Stop Using ‘Drop-Down’](https://adrianroselli.com/2020/03/stop-using-drop-down.html) — This is a little opinionated because there does seem to be a place for the term, but getting the terminology right in the 11 instances discussed is important. Adrian Roselli 💻 **Jobs** [Frontend Developer at X-Team (Remote)](https://x-team.com/remote-frontend-developer-jobs/?utm_source=cooperpress&utm_medium=email-ad&utm_campaign=frontend) — Work with the world's leading brands, from anywhere. Travel the world while being part of the most energizing community of developers. X-Team [Find a Dev 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 is completely free for job seekers. Make a profile, name your salary, and connect with hiring managers from top employers. Vettery 📙 **News, Tutorials & Opinion** [Ten Ways to Hide Elements in CSS](https://www.sitepoint.com/hide-elements-in-css/) — Each of the 10 methods has an accompanying chart that looks at various pros/cons including accessibility, browser support, layout/reflow, performance, and more. Craig Buckler [Currying in CSS?](https://www.trysmudford.com/blog/currying-in-css/) — The concept here is based on the fact that the values of CSS custom properties aren’t evaluated until they’re used. This kinda sorta resembles ‘currying’ in JS. Trys Mudford [HTML: The Inaccessible Parts](https://daverupert.com/2020/02/html-the-inaccessible-parts/) — Dave has created a “living document” (that he intends to keep updated) that references different problems various sources have found with the accessibility of certain HTML elements. Dave Rupert [How to Build Forms With React the Easy Way](https://www.telerik.com/blogs/how-to-build-forms-with-react-the-easy-way?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-react-blog-easy-react-form&utm_content=sponsored-link) — Building forms with React can be frustrating. TJ VanToll suggests one way to tackle this challenge with ease. [Read more](https://www.telerik.com/blogs/how-to-build-forms-with-react-the-easy-way?utm_medium=cpm&utm_source=frontendfocus&utm_campaign=kendo-ui-react-blog-easy-react-form&utm_content=sponsored-link). Progress KendoReact sponsor [What Frontend Engineers Should Know About Backend](https://terrastruct.com/blog/what-frontend-engineers-should-know-about-backend/) — Subjects discussed include request rates, down time, HTTP status codes, delegating business logic, CORS, and cache busting. Alexander Wang [Negative Margins in CSS](https://www.quirksmode.org/blog/archives/2020/02/negative_margin.html) — As the author points out, this might be the only article that covers negative margins in-depth (though it doesn’t go into flexbox and grid). PETER-PAUL KOCH [How to Use requestAnimationFrame() with Vanilla JS](https://gomakethings.com/how-to-use-requestanimationframe-with-vanilla-js/) — If you’ve never really had a use for this feature, but want to know how it works, this is easy to follow with some simple demos. Chris Ferdinandi [The Mindset of Component Composition in Vue](https://www.telerik.com/blogs/the-mindset-of-component-composition-in-vue) — A step-by-step tutorial building a search bar component. Good for those already familiar with Vue but maybe want to see another developer’s perspective on component composition. Marina Mosti [Build a Single Page Application (SPA) Site With Vanilla.js](https://blog.jeremylikness.com/blog/build-a-spa-site-with-vanillajs/) Jeremy Likness 🗓 **Upcoming Events** [FrontCon, April 1-3 — Riga, Latvia](https://2020.frontcon.com/) — A two-day conference that focuses on front-end concepts and technologies. This year, there will be 23 speakers, 300+ attendees, and four workshops. [ImageCon, April 22-23 — San Francisco, USA](https://www.imagecon.com/) — Learn the latest in innovative approaches to the visual web. [You Gotta Love Frontend Conference, May 14-15 — Vilnius, Lithuania](https://lithuania.yglfconf.com/) — Described as having "big names with irresistible talks and a whole lot of fun". The CFP is now open. 🔧 **Code, Tools and Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1583326121/fknvvzancsugoodr1tsg.png)](https://brumm.af/shadows) [Shadows: A Box Shadow Generator](https://brumm.af/shadows) — This nifty browser-based tool can create smooth looking layered `box-shadows`. There is also [an accompanying Figma plugin](https://www.figma.com/community/plugin/788830704169694737/SmoothShadow). Philipp Brumm [Heroicons: Free MIT-Licensed High Quality SVG Icons for UI Development](https://github.com/refactoringui/heroicons) — 140 icons in total, available in solid or outline style. refactoring ui [css.gg: Over 500 Customizable CSS Icons](https://github.com/astrit/css.gg) — Another icon set, this time a collection of retina-ready icons built in CSS. Astrit Malsija [Customizable Checkout Experiences Made Easy. Build with Square](https://squareup.com/t/f_online/d_newsletter/p_frontendfocus/c_branding/o_brieflink/l_us/dt_alldevice/pr_developers/?route=docs/payment-form/overview&site=developer.squareup.com) Square sponsor [Google Lighthouse Firefox Add-On](https://addons.mozilla.org/en-US/firefox/addon/google-lighthouse/) — The mega-popular performance and website quality tool is now available as a Firefox extension. Mozilla [Pep: Turn Your Website Into a Fast, Installable PWA Instantly](https://pep.dev/) — Ostensibly can be done using a single line of code. Free for sites up to 10k page views per month and there are paid plans after that. pep.dev [Panolens.js: A JavaScript Panorama Viewer Based on Three.js](https://github.com/pchen66/panolens.js) — [View examples here](https://pchen66.github.io/Panolens/). This is a lightweight, flexible, WebGL-based panorama viewer built on top of Three.js. Ray Chen Web Font of the Week [Shake](https://writewithparkinsons.com) There's a deeply personal story behind this font initiative, and although finding a practical use for it may prove tricky, it has been created to raise awareness and fund Parkinson's research. [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60/v1583321572/bjq7emhqirl0oaajctwx.png)](https://writewithparkinsons.com) 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