"{"slug":[0,"before-your-next-frontend-pull-request-use-this-checklist"],"body":[0,"/*@jsxRuntime automatic @jsxImportSource react*/\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = Object.assign({\n p: \"p\",\n h2: \"h2\",\n a: \"a\",\n h3: \"h3\",\n blockquote: \"blockquote\",\n em: \"em\",\n pre: \"pre\",\n code: \"code\",\n span: \"span\",\n ol: \"ol\",\n li: \"li\",\n hr: \"hr\"\n }, props.components), {Intro, Sidenote, ReferenceEvent, Figure, Image, Figcaption, ReferenceBlogPost} = _components;\n if (!Figcaption) _missingMdxReference(\"Figcaption\", true);\n if (!Figure) _missingMdxReference(\"Figure\", true);\n if (!Image) _missingMdxReference(\"Image\", true);\n if (!Intro) _missingMdxReference(\"Intro\", true);\n if (!ReferenceBlogPost) _missingMdxReference(\"ReferenceBlogPost\", true);\n if (!ReferenceEvent) _missingMdxReference(\"ReferenceEvent\", true);\n if (!Sidenote) _missingMdxReference(\"Sidenote\", true);\n return _jsxs(_Fragment, {\n children: [_jsx(Intro, {\n children: _jsx(_components.p, {\n children: \"Frontend pull requests often contain common mistakes which can cause nasty bugs, jangled nerves, and wasted time. But they can be easily avoided by following this list of 7 small (but crucial) rules. Read on and learn what to check before creating a new PR.\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"It’s always worth re-checking a letter or email one more time before you send it off, isn’t it? Well, the same concept applies before hitting the “request review” button on GitHub or GitLab. But what exactly do we need to check?\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"In the list below, we’ve outlined some fundamental rules to help guide you.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"It’s important to note that your final list might be different from ours depending on the context you’re working within; feel free to modify, delete, or add, as you see fit!\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"1-minimize-your-bundle-size\",\n children: \"1. Minimize your bundle size\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"The bigger the project size, the longer it takes to download the resources necessary for displaying it in a browser—and users who experience slow-loading pages are less likely to return! Additionally, having a reasonable project size is especially critical if you’re browsing via mobile device, or if there are network problems.\"\n }), \"\\n\", _jsx(Sidenote, {\n children: _jsxs(_components.p, {\n children: [\"Want to learn more about why size matters in the world of web development? Check this article by KeyCDN: \", _jsx(_components.a, {\n href: \"https://www.keycdn.com/support/the-growth-of-web-page-size\",\n children: \"The Growth of Web Page Size\"\n }), \".\"]\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"So, an uncontrolled increase in bundle size can quickly become a problem. There are a ton of hacks and ways to make bundle sizes smaller, like \", _jsx(_components.a, {\n href: \"https://developer.mozilla.org/en-US/docs/Glossary/Tree_shaking\",\n children: \"tree shaking\"\n }), \", \", _jsx(_components.a, {\n href: \"https://developer.mozilla.org/en-US/docs/Web/Performance/Lazy_loading\",\n children: \"lazy loading\"\n }), \", or removing unused dependencies, like we’ve already mentioned.\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"That said, for the purposes of this article, let’s consider some simple changes that can have big, immediate results: dealing with libraries and images in your PR.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"use-smaller-libraries\",\n children: \"Use smaller libraries\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"We highly recommend paying attention to the sizes of the packages you install and make note of how the overall bundle size increases when doing so.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Thankfully, to make this task easier, we can use \", _jsx(_components.a, {\n href: \"/opensource/size-limit\",\n children: \"Size Limit\"\n }), \", a performance budget tool that shows how the bundle size of a project will be affected after adding a library. It can even calculate the time it would take a browser to download and execute the code.\"]\n }), \"\\n\", _jsx(Sidenote, {\n children: _jsx(ReferenceEvent, {\n slug: `size-limit-make-the-web-lighter`,\n randomColorIndex: 4,\n title: `Size Limit: make the Web lighter`,\n talk: {\n \"language\": \"en\",\n \"video_url\": \"https://www.youtube.com/watch?v=z2phd2tnibc\"\n },\n slides: {\n \"language\": \"en\",\n \"slides_url\": \"https://slides.com/ai/size-limit/\"\n },\n dateStartISO: \"2017-11-01T00:00:00.000Z\",\n eventTitle: `ReactiveConf`,\n city: `Bratislava, Slovakia`,\n dateStart: `November 1, 2017`,\n dateStartMonth: `November`,\n dateStartDay: `1`,\n theme: {\n \"colors\": {\n \"logo\": {\n \"color\": \"initial\"\n },\n \"title\": {\n \"color\": \"0 0 0\",\n \"oklchColor\": \"0.0000% 0.0000 0.0000\",\n \"opacity\": \"5.00%\"\n },\n \"navigation\": {\n \"color\": \"102 63 76\",\n \"oklchColor\": \"41.7585% 0.0573 358.3435\",\n \"opacity\": \"15.44%\"\n },\n \"text\": {\n \"color\": \"0 0 0\",\n \"oklchColor\": \"0.0000% 0.0000 0.0000\",\n \"opacity\": \"5.00%\"\n },\n \"button\": {\n \"color\": \"161 73 15\",\n \"oklchColor\": \"51.0878% 0.1330 47.5085\",\n \"opacity\": \"17.77%\"\n },\n \"background\": {\n \"color\": \"255 255 255\",\n \"oklchColor\": \"100.0000% 0.0000 0.0000\",\n \"opacity\": \"0%\"\n }\n },\n \"meta\": {\n \"whiteBg\": true,\n \"isDefault\": true\n }\n },\n bgImage: {\n \"publicURL\": \"/static/8d7073ac619607e11227608e20e955bb/bg.jpg?v=15789d8e\",\n \"relativePath\": \"2017-11-01-size-limit-make-the-web-lighter/bg.jpg\",\n \"width\": 1026,\n \"height\": 684,\n \"imgproxySources\": [{\n \"width\": 48,\n \"avif\": \"https://imgproxy.evilmartians.com/kimlvEQDf0S9WKU0fDto06cg9HZHxGivACdv2F4IEjs/width:48/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy84ZDcwNzNhYzYxOTYwN2UxMTIyNzYwOGUyMGU5NTViYi9iZy5qcGc_dj0xNTc4OWQ4ZQ\",\n \"webp\": \"https://imgproxy.evilmartians.com/zX7m_ljKU0BulO288bQ2Tx-L713yZ-MssQAFZULkDW8/width:48/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy84ZDcwNzNhYzYxOTYwN2UxMTIyNzYwOGUyMGU5NTViYi9iZy5qcGc_dj0xNTc4OWQ4ZQ\"\n }, {\n \"width\": 96,\n \"avif\": \"https://imgproxy.evilmartians.com/lvy-iRXXQb_8UuojuC6LI2OfErr8KYpcLZJ0SJbR9hI/width:96/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy84ZDcwNzNhYzYxOTYwN2UxMTIyNzYwOGUyMGU5NTViYi9iZy5qcGc_dj0xNTc4OWQ4ZQ\",\n \"webp\": \"https://imgproxy.evilmartians.com/N82XJyZqRLW5FeW_YwWlG67VB23aiSkIW3RsXw3q06c/width:96/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy84ZDcwNzNhYzYxOTYwN2UxMTIyNzYwOGUyMGU5NTViYi9iZy5qcGc_dj0xNTc4OWQ4ZQ\"\n }, {\n \"width\": 192,\n \"avif\": \"https://imgproxy.evilmartians.com/CPEdIOoJIWPwfjuLPLKxVC5sc-Ipt4qsI9FmPRxs4RY/width:192/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy84ZDcwNzNhYzYxOTYwN2UxMTIyNzYwOGUyMGU5NTViYi9iZy5qcGc_dj0xNTc4OWQ4ZQ\",\n \"webp\": \"https://imgproxy.evilmartians.com/ii0JEsx0dUP_j6g30Zt6u-a5M00MWwqUgXe88g3smGk/width:192/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy84ZDcwNzNhYzYxOTYwN2UxMTIyNzYwOGUyMGU5NTViYi9iZy5qcGc_dj0xNTc4OWQ4ZQ\"\n }, {\n \"width\": 384,\n \"avif\": \"https://imgproxy.evilmartians.com/t3abfS59fM28lFMEHVeozutN4OgWyyen2D7W69fKXx8/width:384/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy84ZDcwNzNhYzYxOTYwN2UxMTIyNzYwOGUyMGU5NTViYi9iZy5qcGc_dj0xNTc4OWQ4ZQ\",\n \"webp\": \"https://imgproxy.evilmartians.com/v1vA7Qtvx7tVftYGLGNYbvdMIa9MlAA61ZxbX-pqbiY/width:384/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy84ZDcwNzNhYzYxOTYwN2UxMTIyNzYwOGUyMGU5NTViYi9iZy5qcGc_dj0xNTc4OWQ4ZQ\"\n }, {\n \"width\": 768,\n \"avif\": \"https://imgproxy.evilmartians.com/rz_sP3Vu7JZDLVnSSyP3cUjEgREINn41Ltwa-0R0GQg/width:768/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy84ZDcwNzNhYzYxOTYwN2UxMTIyNzYwOGUyMGU5NTViYi9iZy5qcGc_dj0xNTc4OWQ4ZQ\",\n \"webp\": \"https://imgproxy.evilmartians.com/30keom6EnDkFFpjRawevGobefE6zACp0RCSZqhWwky0/width:768/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy84ZDcwNzNhYzYxOTYwN2UxMTIyNzYwOGUyMGU5NTViYi9iZy5qcGc_dj0xNTc4OWQ4ZQ\"\n }, {\n \"width\": 1026,\n \"avif\": \"https://imgproxy.evilmartians.com/3YjZ7uaraeTlQ1ZBjyAV_1jg8NqtWa-Fqkn-vEKc3_U/width:1026/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy84ZDcwNzNhYzYxOTYwN2UxMTIyNzYwOGUyMGU5NTViYi9iZy5qcGc_dj0xNTc4OWQ4ZQ\",\n \"webp\": \"https://imgproxy.evilmartians.com/Y-sbqBPoo9A1XX3L_NNhZ9UxR4yP5QLuo55MgSZqWRE/width:1026/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy84ZDcwNzNhYzYxOTYwN2UxMTIyNzYwOGUyMGU5NTViYi9iZy5qcGc_dj0xNTc4OWQ4ZQ\"\n }]\n },\n bgColorOverflow: true,\n type: `event`\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"We can also ensure small bundle sizes by giving library size its proper consideration as we choose a package from one of several analogs. There’s a handy tool which makes this really easy: \", _jsx(_components.a, {\n href: \"https://bundlephobia.com/\",\n children: \"Bundlephobia\"\n }), \"; it checks the size of an npm package and analyzes its impact on application performance. Beyond merely showing the size of a particular library, it also has other valuable development information, such as showing the size effect of dependencies on the composition of the library, as well as its download time from npm.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"use-optimized-images\",\n children: \"Use optimized images\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Pictures and icons make up a significant percentage of a site’s total resources, so smaller image sizes can greatly impact a project’s overall size. Let’s get a quick example of this.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Let’s say we want to place a big photo of outer space on our page. We found a great photo, but the unoptimized version was 9.8 MB and in PNG format.\"\n }), \"\\n\", _jsxs(Figure, {\n align: `content`,\n padding: undefined,\n children: [_jsx(Image, {\n path: `space.jpeg`,\n align: `content`,\n alt: `An image of outer space with a lot of stars.`,\n expandToEdges: undefined,\n imgproxyImageData: {\n \"publicURL\": \"/static/6e1c781f0c5bf9acd6e1c9b09ebe9113/space.jpeg\",\n \"width\": 450,\n \"height\": 253,\n \"imgproxySources\": [{\n \"width\": 48,\n \"avif\": \"https://imgproxy.evilmartians.com/Q4HacaCLMmOy-LKOWSDfqmhGoEbzFxzNuBi6ZFu6mxw/width:48/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy82ZTFjNzgxZjBjNWJmOWFjZDZlMWM5YjA5ZWJlOTExMy9zcGFjZS5qcGVn\",\n \"webp\": \"https://imgproxy.evilmartians.com/RmrDV_qbhzGahbKmq0iHrWhmBz2ptQE7YT_3W_FfgwU/width:48/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy82ZTFjNzgxZjBjNWJmOWFjZDZlMWM5YjA5ZWJlOTExMy9zcGFjZS5qcGVn\"\n }, {\n \"width\": 96,\n \"avif\": \"https://imgproxy.evilmartians.com/7s1o1vOCIeCfuWJWXpN86-awG5wJJHtOBabOds14feg/width:96/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy82ZTFjNzgxZjBjNWJmOWFjZDZlMWM5YjA5ZWJlOTExMy9zcGFjZS5qcGVn\",\n \"webp\": \"https://imgproxy.evilmartians.com/ikcm-1AE-No8E3n7_IzbKAyk06JorAqBlNq3vUmUe78/width:96/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy82ZTFjNzgxZjBjNWJmOWFjZDZlMWM5YjA5ZWJlOTExMy9zcGFjZS5qcGVn\"\n }, {\n \"width\": 192,\n \"avif\": \"https://imgproxy.evilmartians.com/-pOJiVZ6r9bXNTj0QO033bVZlSqbUpi4JfMPr3CAJwU/width:192/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy82ZTFjNzgxZjBjNWJmOWFjZDZlMWM5YjA5ZWJlOTExMy9zcGFjZS5qcGVn\",\n \"webp\": \"https://imgproxy.evilmartians.com/vD2dSP0Y-lG5AX5756zPdwUIJkeMNY8LdzeROo9U2cQ/width:192/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy82ZTFjNzgxZjBjNWJmOWFjZDZlMWM5YjA5ZWJlOTExMy9zcGFjZS5qcGVn\"\n }, {\n \"width\": 384,\n \"avif\": \"https://imgproxy.evilmartians.com/otaKvG1QAwMAYoSeUjMOWYzrF4sn1Ntas6b5YLSIP50/width:384/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy82ZTFjNzgxZjBjNWJmOWFjZDZlMWM5YjA5ZWJlOTExMy9zcGFjZS5qcGVn\",\n \"webp\": \"https://imgproxy.evilmartians.com/_0XXPMFy9t-xpJacEe3pZjaOC1NLPaum0JudOovlFok/width:384/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy82ZTFjNzgxZjBjNWJmOWFjZDZlMWM5YjA5ZWJlOTExMy9zcGFjZS5qcGVn\"\n }, {\n \"width\": 768,\n \"avif\": \"https://imgproxy.evilmartians.com/HTsqeMWc-c-yE-gpYYE0viatWeD8FlK5uL1Yj6HPArE/width:768/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy82ZTFjNzgxZjBjNWJmOWFjZDZlMWM5YjA5ZWJlOTExMy9zcGFjZS5qcGVn\",\n \"webp\": \"https://imgproxy.evilmartians.com/Tltub5Hya5HpgPAQWS9cSPsd_Ge7GHZDORcIoteRLcs/width:768/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy82ZTFjNzgxZjBjNWJmOWFjZDZlMWM5YjA5ZWJlOTExMy9zcGFjZS5qcGVn\"\n }, {\n \"width\": 900,\n \"avif\": \"https://imgproxy.evilmartians.com/9qGWURlUorQZu3ZZxuy5u9n4TqeiKKykZvYDYv40vS4/width:900/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy82ZTFjNzgxZjBjNWJmOWFjZDZlMWM5YjA5ZWJlOTExMy9zcGFjZS5qcGVn\",\n \"webp\": \"https://imgproxy.evilmartians.com/FCGvCaXjzK0kPRiAwbCeOZvatWu8FtqXkU6RvqsEzeQ/width:900/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy82ZTFjNzgxZjBjNWJmOWFjZDZlMWM5YjA5ZWJlOTExMy9zcGFjZS5qcGVn\"\n }]\n },\n width: 450,\n height: 253\n }), _jsx(Figcaption, {\n children: _jsx(_components.p, {\n children: \"Space, home of Evil Martians\"\n })\n })]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"On our page, the performance metric tool \", _jsx(_components.a, {\n href: \"https://developer.chrome.com/docs/lighthouse/overview/\",\n children: \"Lighthouse\"\n }), \" revealed really bad performance on mobile devices, taking more than 50 seconds to render this image!\"]\n }), \"\\n\", _jsx(Figure, {\n align: `content`,\n padding: undefined,\n children: _jsx(Image, {\n path: `lighthouse-before.png`,\n align: `content`,\n alt: `An image with some displeasing metrics from Lighthouse`,\n expandToEdges: undefined,\n imgproxyImageData: {\n \"publicURL\": \"/static/089d9edc1f6959139cafc1eb82bff7fb/lighthouse-before.png\",\n \"width\": 374,\n \"height\": 265,\n \"imgproxySources\": [{\n \"width\": 48,\n \"avif\": \"https://imgproxy.evilmartians.com/0YxDMkuavIFpxizQofPDjG639-8IOF5VCRXSUD879BU/width:48/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy8wODlkOWVkYzFmNjk1OTEzOWNhZmMxZWI4MmJmZjdmYi9saWdodGhvdXNlLWJlZm9yZS5wbmc\",\n \"webp\": \"https://imgproxy.evilmartians.com/WeB3tkiSO7Aa0976rOJD7q1mt_qgaC8sBF1177Y0UD0/width:48/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy8wODlkOWVkYzFmNjk1OTEzOWNhZmMxZWI4MmJmZjdmYi9saWdodGhvdXNlLWJlZm9yZS5wbmc\"\n }, {\n \"width\": 96,\n \"avif\": \"https://imgproxy.evilmartians.com/XMf_t4O41bxev--YtM0NWqHs0eW9spYvg4bh_3tT4Ok/width:96/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy8wODlkOWVkYzFmNjk1OTEzOWNhZmMxZWI4MmJmZjdmYi9saWdodGhvdXNlLWJlZm9yZS5wbmc\",\n \"webp\": \"https://imgproxy.evilmartians.com/sDMIfXZ8x9S5csRajbOogz2npi22JhUdjl3yYd2vbHE/width:96/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy8wODlkOWVkYzFmNjk1OTEzOWNhZmMxZWI4MmJmZjdmYi9saWdodGhvdXNlLWJlZm9yZS5wbmc\"\n }, {\n \"width\": 192,\n \"avif\": \"https://imgproxy.evilmartians.com/R1U5Frjhiwx01BLR-8-Z7amBq1f-ekcquY9oeJYx3pY/width:192/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy8wODlkOWVkYzFmNjk1OTEzOWNhZmMxZWI4MmJmZjdmYi9saWdodGhvdXNlLWJlZm9yZS5wbmc\",\n \"webp\": \"https://imgproxy.evilmartians.com/mg4KdZVBqmtGpDMIH3xgA86laAdU69sd0pxA0xFY1pA/width:192/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy8wODlkOWVkYzFmNjk1OTEzOWNhZmMxZWI4MmJmZjdmYi9saWdodGhvdXNlLWJlZm9yZS5wbmc\"\n }, {\n \"width\": 384,\n \"avif\": \"https://imgproxy.evilmartians.com/1HYDNj7T1VM3YqZuV8uckFTCOnHIlzNtvn39_2Fk5Ns/width:384/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy8wODlkOWVkYzFmNjk1OTEzOWNhZmMxZWI4MmJmZjdmYi9saWdodGhvdXNlLWJlZm9yZS5wbmc\",\n \"webp\": \"https://imgproxy.evilmartians.com/4lvYDfv0iqGSJpTVzWn8e2JO6RIEDTFCXSonv2fTGTA/width:384/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy8wODlkOWVkYzFmNjk1OTEzOWNhZmMxZWI4MmJmZjdmYi9saWdodGhvdXNlLWJlZm9yZS5wbmc\"\n }, {\n \"width\": 748,\n \"avif\": \"https://imgproxy.evilmartians.com/jCG5HwhMcYCGbdQDPk5PkXRqXy7aJII7z_C17jBGums/width:748/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy8wODlkOWVkYzFmNjk1OTEzOWNhZmMxZWI4MmJmZjdmYi9saWdodGhvdXNlLWJlZm9yZS5wbmc\",\n \"webp\": \"https://imgproxy.evilmartians.com/cQNllcAGnpnz6PIe7Ul2m_gVyo_9xMYxXJF0HfuHLCk/width:748/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy8wODlkOWVkYzFmNjk1OTEzOWNhZmMxZWI4MmJmZjdmYi9saWdodGhvdXNlLWJlZm9yZS5wbmc\"\n }]\n },\n width: 374,\n height: 265\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"We’ll definitely need to solve this problem—and here comes \", _jsx(_components.a, {\n href: \"https://squoosh.app/\",\n children: \"Squoosh\"\n }), \" to the rescue. It’s a really handy web app that compresses and reduces image sizes. And super helpfully, it also instantly shows the images post-compression, so you can immediately see the balance of performance/image quality. Plus, with Squoosh, you can work with all modern image formats and perform image format conversion.\"]\n }), \"\\n\", _jsx(Sidenote, {\n children: _jsxs(_components.p, {\n children: [\"If you have many images to compress, \", _jsx(_components.a, {\n href: \"https://imageoptim.com\",\n children: \"ImageOptim\"\n }), \" is especially convenient for batch optimization. \", _jsx(_components.a, {\n href: \"https://imageoptim.com/mac\",\n children: \"Download on Mac\"\n }), \", or use \", _jsx(_components.a, {\n href: \"https://imageoptim.com/versions.html\",\n children: \"the web version\"\n }), \" on your OS of choice.\"]\n })\n }), \"\\n\", _jsxs(_components.blockquote, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"It’s very important to keep size in mind, and it’s also important to use appropriate image formats; new formats like WebP and AVIF perform better than older formats like PNG.\"\n }), \"\\n\"]\n }), \"\\n\", _jsx(_components.p, {\n children: \"So, let’s use Squoosh to make our outer space image smaller and change the format to WebP. We’ll end up an optimized image that’s just slightly more than 100 KB. Let’s take a look at our metrics again:\"\n }), \"\\n\", _jsx(Figure, {\n align: `content`,\n padding: undefined,\n children: _jsx(Image, {\n path: `lighthouse-after.png`,\n align: `content`,\n alt: `An image with some more pleasing metrics from Lighthouse`,\n expandToEdges: undefined,\n imgproxyImageData: {\n \"publicURL\": \"/static/5acc68a747067964118794376548e836/lighthouse-after.png\",\n \"width\": 381,\n \"height\": 192,\n \"imgproxySources\": [{\n \"width\": 48,\n \"avif\": \"https://imgproxy.evilmartians.com/p60uBUISq2fzGB8unbTmsD5jCqkWT8JSXTa6mgzfbl0/width:48/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy81YWNjNjhhNzQ3MDY3OTY0MTE4Nzk0Mzc2NTQ4ZTgzNi9saWdodGhvdXNlLWFmdGVyLnBuZw\",\n \"webp\": \"https://imgproxy.evilmartians.com/aJ0Ubdx2Zk3EF3P3AdV23AW3FpfDuJxpCKc7mqVcwuI/width:48/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy81YWNjNjhhNzQ3MDY3OTY0MTE4Nzk0Mzc2NTQ4ZTgzNi9saWdodGhvdXNlLWFmdGVyLnBuZw\"\n }, {\n \"width\": 96,\n \"avif\": \"https://imgproxy.evilmartians.com/5WCGGWpiVFwugi4RUR3b0VmsRhhoS9otz98nnLjyO30/width:96/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy81YWNjNjhhNzQ3MDY3OTY0MTE4Nzk0Mzc2NTQ4ZTgzNi9saWdodGhvdXNlLWFmdGVyLnBuZw\",\n \"webp\": \"https://imgproxy.evilmartians.com/8Jvums4BBsxgpLPFpo2T5B6kiUaRo5k9yMezrUaBSQ0/width:96/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy81YWNjNjhhNzQ3MDY3OTY0MTE4Nzk0Mzc2NTQ4ZTgzNi9saWdodGhvdXNlLWFmdGVyLnBuZw\"\n }, {\n \"width\": 192,\n \"avif\": \"https://imgproxy.evilmartians.com/Owu9oCSe7zLBrkoHdXhTw4Y87zTzY975cQAoDua_rzw/width:192/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy81YWNjNjhhNzQ3MDY3OTY0MTE4Nzk0Mzc2NTQ4ZTgzNi9saWdodGhvdXNlLWFmdGVyLnBuZw\",\n \"webp\": \"https://imgproxy.evilmartians.com/75qJOyf9mhOe98wpADyhrN3voxnDa8h6lLPMBUNUNRU/width:192/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy81YWNjNjhhNzQ3MDY3OTY0MTE4Nzk0Mzc2NTQ4ZTgzNi9saWdodGhvdXNlLWFmdGVyLnBuZw\"\n }, {\n \"width\": 384,\n \"avif\": \"https://imgproxy.evilmartians.com/gGo7I08pNjWp-zzqAArEZeHLEe2x_g-LLfwTN9Q8-2g/width:384/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy81YWNjNjhhNzQ3MDY3OTY0MTE4Nzk0Mzc2NTQ4ZTgzNi9saWdodGhvdXNlLWFmdGVyLnBuZw\",\n \"webp\": \"https://imgproxy.evilmartians.com/r3bOuTOtwXYiXqJBQKoNA8weODi6jDIEm_ylZTy9dJo/width:384/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy81YWNjNjhhNzQ3MDY3OTY0MTE4Nzk0Mzc2NTQ4ZTgzNi9saWdodGhvdXNlLWFmdGVyLnBuZw\"\n }, {\n \"width\": 763,\n \"avif\": \"https://imgproxy.evilmartians.com/ivS7PxQA_uySSlrn3hfHB4ADUgYQZOo_vBKpgEDkBoE/width:763/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy81YWNjNjhhNzQ3MDY3OTY0MTE4Nzk0Mzc2NTQ4ZTgzNi9saWdodGhvdXNlLWFmdGVyLnBuZw\",\n \"webp\": \"https://imgproxy.evilmartians.com/qplFNQhJsCgMDwtf6F7azfUjh4ISaS4QEyP4Lc02ry8/width:763/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy81YWNjNjhhNzQ3MDY3OTY0MTE4Nzk0Mzc2NTQ4ZTgzNi9saWdodGhvdXNlLWFmdGVyLnBuZw\"\n }]\n },\n width: 381,\n height: 192\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"In particular, take note of the vastly improved Total Blocking Time (TBT is a very important performance metric) in the image above.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"To learn more about optimizing vector and raster graphical content, read this article:\"\n }), \"\\n\", _jsx(ReferenceBlogPost, {\n slug: `images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques`,\n randomColorIndex: 2,\n title: `Images done right: Web graphics, good to the last byte`,\n theme: {\n \"colors\": {\n \"logo\": {\n \"color\": \"0 0 0\",\n \"oklchColor\": \"0.0000% 0.0000 0.0000\",\n \"opacity\": \"5.00%\"\n },\n \"title\": {\n \"color\": \"0 0 0\",\n \"oklchColor\": \"0.0000% 0.0000 0.0000\",\n \"opacity\": \"5.00%\"\n },\n \"navigation\": {\n \"color\": \"0 0 0\",\n \"oklchColor\": \"0.0000% 0.0000 0.0000\",\n \"opacity\": \"5.00%\"\n },\n \"text\": {\n \"color\": \"0 0 0\",\n \"oklchColor\": \"0.0000% 0.0000 0.0000\",\n \"opacity\": \"5.00%\"\n },\n \"button\": {\n \"color\": \"0 0 0\",\n \"oklchColor\": \"0.0000% 0.0000 0.0000\",\n \"opacity\": \"5.00%\"\n },\n \"background\": {\n \"color\": \"177 131 207\",\n \"oklchColor\": \"68.2747% 0.1192 311.2490\",\n \"opacity\": \"100%\"\n }\n },\n \"meta\": {\n \"whiteBg\": false,\n \"isDefault\": false\n }\n },\n createdAt: `October 7, 2019`,\n dateISO: \"2019-10-07T00:00:00.000Z\",\n coverImage: {\n \"publicURL\": \"/static/e24b69561ef26bacf740d1ad3d147a2c/cover.png?v=04af5031\",\n \"relativePath\": \"2019-10-07-images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques/cover.png\",\n \"width\": 1200,\n \"height\": 1000,\n \"imgproxySources\": [{\n \"width\": 48,\n \"avif\": \"https://imgproxy.evilmartians.com/6HK0PMZeLR2nW6_5VweeYNXCAaPHR6sWhtGVFIdFb-I/width:48/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\",\n \"webp\": \"https://imgproxy.evilmartians.com/PbKir2R-MzfGwCoZpKUHyOTKe6kGwMeRfe9m5ZXIOss/width:48/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\"\n }, {\n \"width\": 96,\n \"avif\": \"https://imgproxy.evilmartians.com/G47MiPbZVzk02VZeYk2PlVxzT_WNLsPFy2PHmQZQCm8/width:96/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\",\n \"webp\": \"https://imgproxy.evilmartians.com/Y7HUGhWv0oNn30toluU4JqlSDD-ikdPRFBYy1QYPbIc/width:96/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\"\n }, {\n \"width\": 192,\n \"avif\": \"https://imgproxy.evilmartians.com/qW_aseodBu3DEQIVPcahxUGXiChwJFs0FYX-QxHAzys/width:192/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\",\n \"webp\": \"https://imgproxy.evilmartians.com/-S8DGoKGrEEAe2fDm_TY8Go3a6WlCs2sX3T6ejP-QL4/width:192/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\"\n }, {\n \"width\": 384,\n \"avif\": \"https://imgproxy.evilmartians.com/LKR5L--aquPrAzK_DioQTk5qgeICtmNMQKQvI3nwuVk/width:384/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\",\n \"webp\": \"https://imgproxy.evilmartians.com/0oKSkJejO37dskPemMg1ThpTP2h6p0fKqSqp6ZuO7_c/width:384/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\"\n }, {\n \"width\": 768,\n \"avif\": \"https://imgproxy.evilmartians.com/ZMimTAXBxHRGUsvYdUatgTFS82o6ZQbuVz9gbRU69eA/width:768/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\",\n \"webp\": \"https://imgproxy.evilmartians.com/oV522VjoEDTjrPrzsw4ZCS3b15RKOrN-GA3-ZLbK0KE/width:768/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\"\n }, {\n \"width\": 1080,\n \"avif\": \"https://imgproxy.evilmartians.com/opWUAO5XJZjQQ_Kvibh7tI23_1Wsk_FlfG486dx5oMs/width:1080/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\",\n \"webp\": \"https://imgproxy.evilmartians.com/IQrN4KWU1m41IPiNC7Z4D_1nP_0lcKomNuud68vH-AI/width:1080/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\"\n }, {\n \"width\": 1200,\n \"avif\": \"https://imgproxy.evilmartians.com/2Uj-Er89rutfIsuZdlvDO7Fx1E2JGW56CjZkGvwE82o/width:1200/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\",\n \"webp\": \"https://imgproxy.evilmartians.com/a55p6cWtnD2L1Lne-bb5mzXzIS4pqjmrrLoHpABcDIE/width:1200/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9lMjRiNjk1NjFlZjI2YmFjZjc0MGQxYWQzZDE0N2EyYy9jb3Zlci5wbmc_dj0wNGFmNTAzMQ\"\n }]\n },\n bgColorOverflow: true,\n isBgFullSize: false,\n type: `blogPost`\n }), \"\\n\", _jsx(_components.h2, {\n id: \"2-dont-include-unused-dependencies\",\n children: \"2. Don’t include unused dependencies\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"If you’ve added several packages in the process of implementing a new feature, be sure you really need them all in your PR.\"\n }), \"\\n\", _jsxs(_components.blockquote, {\n children: [\"\\n\", _jsx(_components.p, {\n children: \"Useless dependencies increase the project size, slow down installation, and confuse developers.\"\n }), \"\\n\"]\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"One of the most useful tools to check your project for useless dependencies is \", _jsx(_components.a, {\n href: \"https://www.npmjs.com/package/depcheck\",\n children: \"depcheck\"\n }), \". This tool analyzes the dependencies in your project and provides you with a list of unused dependencies.\"]\n }), \"\\n\", _jsx(_components.h2, {\n id: \"3-support-accessibility\",\n children: \"3. Support accessibility\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Needless to say, it’s important to make your content and features accessible to all users, and we need to keep this in mind during development. The topic of digital accessibility (often abbreviated as \", _jsx(_components.em, {\n children: \"a11y\"\n }), \") is very wide-ranging, and there are many approaches to offer an improved experience. Let’s start small with a few basics to keep in mind.\"]\n }), \"\\n\", _jsx(_components.h3, {\n id: \"ensure-keyboard-accessibility\",\n children: \"Ensure keyboard accessibility\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Before opening a PR with a new feature, make sure to perform a simple accessibility test: your feature should be usable with a keyboard alone. This is crucial for users who aren’t using a mouse.\"\n }), \"\\n\", _jsx(Sidenote, {\n children: _jsxs(_components.p, {\n children: [_jsx(_components.a, {\n href: \"https://webaim.org/techniques/keyboard/\",\n children: \"Go deeper into Keyboard Navigation\"\n }), \" and learn potential problems, plus testing techniques.\"]\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"provide-accompanying-text-for-media-content\",\n children: \"Provide accompanying text for media content\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"If you have images on your page which are not just purely decorative, provide concise \", _jsx(_components.a, {\n href: \"https://accessibility.huit.harvard.edu/describe-content-images\",\n children: \"alt text\"\n }), \" to describe the image so people who use screen readers will better understand its content.\"]\n }), \"\\n\", _jsx(_components.pre, {\n className: \"language-diff\",\n children: _jsxs(_components.code, {\n className: \"language-diff code-highlight\",\n children: [_jsx(_components.span, {\n className: \"code-line deleted\",\n children: _jsxs(_components.span, {\n className: \"token deleted-sign deleted\",\n children: [_jsx(_components.span, {\n className: \"token prefix deleted\",\n children: \"-\"\n }), _jsx(_components.span, {\n className: \"token line\",\n children: \" \\n\"\n })]\n })\n }), _jsx(_components.span, {\n className: \"code-line deleted\",\n children: _jsxs(_components.span, {\n className: \"token deleted-sign deleted\",\n children: [_jsx(_components.span, {\n className: \"token line\"\n }), _jsx(_components.span, {\n className: \"token prefix deleted\",\n children: \"-\"\n }), _jsx(_components.span, {\n className: \"token line\",\n children: \" \\n\"\n })]\n })\n }), _jsxs(_components.span, {\n className: \"code-line inserted\",\n children: [_jsx(_components.span, {\n className: \"token deleted-sign deleted\",\n children: _jsx(_components.span, {\n className: \"token line\"\n })\n }), _jsxs(_components.span, {\n className: \"token inserted-sign inserted\",\n children: [_jsx(_components.span, {\n className: \"token prefix inserted\",\n children: \"+\"\n }), _jsx(_components.span, {\n className: \"token line\",\n children: \" \\n\"\n })]\n })]\n })]\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"If you have video or audio content, provide them with captions—this will be greatly appreciated by those who rely on them.\"\n }), \"\\n\", _jsx(_components.h3, {\n id: \"use-legible-fonts-with-high-color-contrasts\",\n children: \"Use legible fonts with high color contrasts\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"If you’re using custom fonts, ensure they’re clearly legible. There are a ton of amazing, beautiful fonts, but they might be difficult to read for some users. Likewise, keep font color schemes in mind—opt for high, distinguished contrast values. Without appropriate contrast, users may fail to notice or understand important information:\"\n }), \"\\n\", _jsx(Sidenote, {\n children: _jsxs(_components.p, {\n children: [\"You can use \", _jsx(_components.a, {\n href: \"https://www.chhs.colostate.edu/accessibility/best-practices-how-tos/color-contrast-tools/\",\n children: \"color contrast tools like those listed here\"\n }), \" to easily check your site.\"]\n })\n }), \"\\n\", _jsx(\"div\", {\n className: \"bad-contrast\",\n children: \"Very important information\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"But with high color contrasts text and other elements on the page are easier to notice:\"\n }), \"\\n\", _jsx(\"div\", {\n className: \"good-contrast\",\n children: \"Very important information\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Working and communicating with a designer during development will also help avoid accessibility-related issues.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Interested in more on accessible design? Read this article:\"\n }), \"\\n\", _jsx(ReferenceBlogPost, {\n slug: `accessible-design-from-the-get-go`,\n randomColorIndex: 1,\n title: `Accessible design from the get-go`,\n theme: {\n \"colors\": {\n \"logo\": {\n \"color\": \"128 28 194\",\n \"oklchColor\": \"48.3823% 0.2307 305.9882\",\n \"opacity\": \"17.10%\"\n },\n \"title\": {\n \"color\": \"128 28 194\",\n \"oklchColor\": \"48.3823% 0.2307 305.9882\",\n \"opacity\": \"17.10%\"\n },\n \"navigation\": {\n \"color\": \"128 28 194\",\n \"oklchColor\": \"48.3823% 0.2307 305.9882\",\n \"opacity\": \"17.10%\"\n },\n \"text\": {\n \"color\": \"128 28 194\",\n \"oklchColor\": \"48.3823% 0.2307 305.9882\",\n \"opacity\": \"17.10%\"\n },\n \"button\": {\n \"color\": \"128 28 194\",\n \"oklchColor\": \"48.3823% 0.2307 305.9882\",\n \"opacity\": \"17.10%\"\n },\n \"background\": {\n \"color\": \"255 255 255\",\n \"oklchColor\": \"100.0000% 0.0000 0.0000\",\n \"opacity\": \"100%\"\n }\n },\n \"meta\": {\n \"whiteBg\": true,\n \"isDefault\": false\n }\n },\n createdAt: `July 26, 2021`,\n dateISO: \"2021-07-26T00:00:00.000Z\",\n coverImage: {\n \"publicURL\": \"/static/92375d00827e0b0fae8866205a2db267/cover.png?v=1daca564\",\n \"relativePath\": \"2021-07-26-accessible-design-from-the-get-go/cover.png\",\n \"width\": 1200,\n \"height\": 1000,\n \"imgproxySources\": [{\n \"width\": 48,\n \"avif\": \"https://imgproxy.evilmartians.com/fvGtuyQt_wJcALoACEbDLkI1wVi1_xhAVZbuX5pJEb0/width:48/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\",\n \"webp\": \"https://imgproxy.evilmartians.com/3Ts_ud8XzEqbKLwGD59BwP7Ke6AfRQLIiPqRbzOZBR0/width:48/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\"\n }, {\n \"width\": 96,\n \"avif\": \"https://imgproxy.evilmartians.com/qKF9TrjfKvCZsWhhIOos0MuoE8K92FA2tWFrz1WOqA4/width:96/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\",\n \"webp\": \"https://imgproxy.evilmartians.com/zLoimuGq8wP1jn3u8Ighsn0GYnpKun-6Nq3sDM7BFBo/width:96/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\"\n }, {\n \"width\": 192,\n \"avif\": \"https://imgproxy.evilmartians.com/lEmJN2Q7z4h_rgKTwrnjztj6a3iMrR9Y4O3kYKBO_28/width:192/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\",\n \"webp\": \"https://imgproxy.evilmartians.com/XmjuxF5ALVoskyyyVFCAT1K48JcHagwhDmzKy44ub0I/width:192/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\"\n }, {\n \"width\": 384,\n \"avif\": \"https://imgproxy.evilmartians.com/HeIm-XeL0Qd595RTUqMHgc8IOtEU5XAsWdw9E5843JA/width:384/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\",\n \"webp\": \"https://imgproxy.evilmartians.com/JB6geWSMMHY3A6NdICqBOGR9od9sXVv0cN9bUCdMqn8/width:384/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\"\n }, {\n \"width\": 768,\n \"avif\": \"https://imgproxy.evilmartians.com/2V0jFoLdOMT4yqOo-eqU7a_dbS7FovNkQHbRSD-8eNA/width:768/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\",\n \"webp\": \"https://imgproxy.evilmartians.com/-wZW4zwJrqkKhDBSXiAxRIb171GjUWnK2JjhrIFnqOw/width:768/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\"\n }, {\n \"width\": 1080,\n \"avif\": \"https://imgproxy.evilmartians.com/0CxPTFiaEwnOai2w3SB6Gj5zR8660lL4sYdd1G93Wds/width:1080/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\",\n \"webp\": \"https://imgproxy.evilmartians.com/dTK6StkUFljZ-COiTVXszFbZajebha_i2rj4zgE5leA/width:1080/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\"\n }, {\n \"width\": 1200,\n \"avif\": \"https://imgproxy.evilmartians.com/IKEAvw90STO4EU9G-H6aYsTM-NG-gTuc1ycylO3jQ4w/width:1200/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\",\n \"webp\": \"https://imgproxy.evilmartians.com/HMFf7kPQRreCy-schzWsuXYLpz8t5GdzzhJ5uBXMhKc/width:1200/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy85MjM3NWQwMDgyN2UwYjBmYWU4ODY2MjA1YTJkYjI2Ny9jb3Zlci5wbmc_dj0xZGFjYTU2NA\"\n }]\n },\n bgColorOverflow: true,\n isBgFullSize: false,\n type: `blogPost`\n }), \"\\n\", _jsx(_components.h2, {\n id: \"4-use-semantic-markup\",\n children: \"4. Use semantic markup\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"This point is tightly connected with the previous one. First of all, semantic HTML is another way to improve the accessibility of your site because screen readers will interpret the pages better.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"Beyond that, another advantage of semantic tags is that they help search engines recognize the content and structure of a page more effectively, and this can lead to improved search rankings.\"\n }), \"\\n\", _jsxs(Sidenote, {\n children: [_jsx(_components.p, {\n children: \"Got a form in your PR? Check this article for another checklist before you click send, including specialized tips on semantic HTML, accessibility, and more.\"\n }), _jsx(ReferenceBlogPost, {\n slug: `html-best-practices-for-login-and-signup-forms`,\n randomColorIndex: 1,\n title: `11 HTML best practices for login & sign-up forms`,\n theme: {\n \"colors\": {\n \"logo\": {\n \"color\": \"255 210 85\",\n \"oklchColor\": \"88.0560% 0.1482 88.9534\",\n \"opacity\": \"12.39%\"\n },\n \"title\": {\n \"color\": \"255 210 85\",\n \"oklchColor\": \"88.0560% 0.1482 88.9534\",\n \"opacity\": \"12.39%\"\n },\n \"navigation\": {\n \"color\": \"255 210 85\",\n \"oklchColor\": \"88.0560% 0.1482 88.9534\",\n \"opacity\": \"12.39%\"\n },\n \"text\": {\n \"color\": \"255 255 255\",\n \"oklchColor\": \"100.0000% 0.0000 0.0000\",\n \"opacity\": \"10.00%\"\n },\n \"button\": {\n \"color\": \"255 210 85\",\n \"oklchColor\": \"88.0560% 0.1482 88.9534\",\n \"opacity\": \"12.39%\"\n },\n \"background\": {\n \"color\": \"19 109 107\",\n \"oklchColor\": \"48.5822% 0.0783 192.5427\",\n \"opacity\": \"100%\"\n }\n },\n \"meta\": {\n \"whiteBg\": false,\n \"isDefault\": false\n }\n },\n createdAt: `October 23, 2024`,\n dateISO: \"2024-10-23T00:00:00.000Z\",\n coverImage: {\n \"publicURL\": \"/static/f792e42e6784c3a9d0f22b7992151a36/cover.jpg?v=9f19d62f\",\n \"relativePath\": \"2024-10-23-html-best-practices-for-login-and-signup-forms/cover.jpg\",\n \"width\": 1200,\n \"height\": 1000,\n \"imgproxySources\": [{\n \"width\": 48,\n \"avif\": \"https://imgproxy.evilmartians.com/p2nd2_on_QsqWiQkfisVmEqutFqrz2CE9CcDtWjr5sk/width:48/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\",\n \"webp\": \"https://imgproxy.evilmartians.com/sJtubDBkSdzyS6WeMHHA1zDnQbRbvBJmdBzOOyGoP48/width:48/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\"\n }, {\n \"width\": 96,\n \"avif\": \"https://imgproxy.evilmartians.com/SZlslthEqJ2DbDr5k3HphrOmFpuCQtvaCei1Q5l__3Y/width:96/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\",\n \"webp\": \"https://imgproxy.evilmartians.com/51zbIwPvInlaovbuav8PG3SjisVwEYb9jECfsIIAudE/width:96/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\"\n }, {\n \"width\": 192,\n \"avif\": \"https://imgproxy.evilmartians.com/o1VyYSiDxeW51aD1WyLgWAo2BgWMasGIj3qwH5ZhYmc/width:192/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\",\n \"webp\": \"https://imgproxy.evilmartians.com/tE9KG9sq3Q5G5NNZMqu5LLHqLdR7WiiR0qpCWid8kBo/width:192/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\"\n }, {\n \"width\": 384,\n \"avif\": \"https://imgproxy.evilmartians.com/0a6dJ3PPEPenxj-ymP2Zj1p_KcAoil3S7Mex1JSHvR0/width:384/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\",\n \"webp\": \"https://imgproxy.evilmartians.com/dDskOFmfrYZS3r4nbkYxvYy13qHDyrffB4Yb5UnEqeA/width:384/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\"\n }, {\n \"width\": 768,\n \"avif\": \"https://imgproxy.evilmartians.com/YHMG3VXcBDY7-ouLERa6PxinRFjf0_JpEfTDUExoOKc/width:768/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\",\n \"webp\": \"https://imgproxy.evilmartians.com/oh6jA24C4vV_Dlyn99IejstLyhmz6ty4iJ32OBrvnfU/width:768/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\"\n }, {\n \"width\": 1080,\n \"avif\": \"https://imgproxy.evilmartians.com/-W_F-2v-6TzoDNdJ88Yj1xaHi_o-jsdJMnSV1deRNdo/width:1080/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\",\n \"webp\": \"https://imgproxy.evilmartians.com/q5FHLAj-surfqH1fEwC9Z3ChmwXNEVFr2rH9EKCk-9Y/width:1080/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\"\n }, {\n \"width\": 1200,\n \"avif\": \"https://imgproxy.evilmartians.com/EVbv0xY0-0vYZL-W0RWFHBsQPo4hlmLQjf5sLiHbmVI/width:1200/quality:80/format:avif/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\",\n \"webp\": \"https://imgproxy.evilmartians.com/jscfxZyPS91lkeIsEKez0NncaSEafafoAcquNh3ebxA/width:1200/quality:80/format:webp/aHR0cHM6Ly9ldmlsbWFydGlhbnMuY29tL3N0YXRpYy9mNzkyZTQyZTY3ODRjM2E5ZDBmMjJiNzk5MjE1MWEzNi9jb3Zlci5qcGc_dj05ZjE5ZDYyZg\"\n }]\n },\n bgColorOverflow: true,\n isBgFullSize: false,\n type: `blogPost`\n })]\n }), \"\\n\", _jsx(_components.p, {\n children: \"And there’s yet another nice plus: other developers on your team will clearly understand the structure and hierarchy of your pages thanks to semantic markup.\"\n }), \"\\n\", _jsx(_components.p, {\n children: \"How to make your HTML more semantic? The key is to use HTML elements based on their meaning, and not their appearance.\"\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"For instance, if you have some clickable elements on your page, use \", _jsx(_components.code, {\n className: \"language-text\",\n children: \" // Selectable with Tab\\n\"\n })]\n })]\n })]\n })\n }), \"\\n\", _jsxs(_components.p, {\n children: [\"Besides the correct usage of HTML tags, it’s also important pay attention to the meaning of the attributes you use with your tags. You should use (or avoid using) some attributes in conjunction with certain tags. For example, if you’re using an icon-only button, add some clear \", _jsx(_components.code, {\n className: \"language-text\",\n children: \"aria-label\"\n }), \" value to it. On the flip side, it there is text in the button, adding \", _jsx(_components.code, {\n className: \"language-text\",\n children: \"aria-label\"\n }), \" will be redundant. Likewise, placing \", _jsx(_components.code, {\n className: \"language-text\",\n children: \"role=\\\"button\\\"\"\n }), \" into a \", _jsx(_components.code, {\n className: \"language-text\",\n children: \"