{"payload":{"feedbackUrl":"https://github.com/orgs/community/discussions/53140","repo":{"id":219412826,"defaultBranch":"main","name":"blog","ownerLogin":"dgp1130","currentUserCanPush":false,"isFork":false,"isEmpty":false,"createdAt":"2019-11-04T03:50:19.000Z","ownerAvatar":"https://avatars.githubusercontent.com/u/11010321?v=4","public":true,"private":false,"isOrgOwned":false},"refInfo":{"name":"","listCacheKey":"v0:1721793553.0","currentOid":""},"activityList":{"items":[{"before":"94a9c0bb4f0539a953d3c06f9d3e38d2fda8cd84","after":"29e67f3dd7077def103da11ccbb7a4e6fdb92fce","ref":"refs/heads/posts/html-whitespace","pushedAt":"2024-08-15T05:39:06.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"WIP: Minor edits.","shortMessageHtmlLink":"WIP: Minor edits."}},{"before":"74af4e691fd782c270da06eae3b45b0af60e4126","after":"83a5116f315670fc5902ab2335bcdf91e6aaaa84","ref":"refs/heads/deploy","pushedAt":"2024-07-27T05:33:29.000Z","pushType":"push","commitsCount":2,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Set image performance attributes for logo and author images.\n\nThe logo is above the fold, so I marked that with `loading=\"eager\"` and `fetchpriority=\"high\"` to ensure the browser prioritizes it. I'm a little worried browsers will prioritize it over the LCP image, which I don't want, but that should also have the same attributes and there's few enough resources loaded at the start that there shouldn't be too much network contention.\n\nThe author image is all the way at the bottom of the document, not just below the fold. I also tend to write long blog posts, so most users won't see this image at all. As a result, I gave that the laziest options of `loading=\"lazy\" fetchpriority=\"low\"`. I normally wouldn't go out of my way to specify `fetchpriority=\"low\"`, but this seems like the image that most applies to.\n\nI also added `decoding=\"async\"` to both of them as I don't see any reason not to, regardless of how prominent the images are. The two other images I could find for opening a demo in a new tab and a Twitter avatar both got the generic `loading=\"lazy\" decoding=\"async\"`.","shortMessageHtmlLink":"Set image performance attributes for logo and author images."}},{"before":"74af4e691fd782c270da06eae3b45b0af60e4126","after":"83a5116f315670fc5902ab2335bcdf91e6aaaa84","ref":"refs/heads/main","pushedAt":"2024-07-27T05:33:23.000Z","pushType":"push","commitsCount":2,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Set image performance attributes for logo and author images.\n\nThe logo is above the fold, so I marked that with `loading=\"eager\"` and `fetchpriority=\"high\"` to ensure the browser prioritizes it. I'm a little worried browsers will prioritize it over the LCP image, which I don't want, but that should also have the same attributes and there's few enough resources loaded at the start that there shouldn't be too much network contention.\n\nThe author image is all the way at the bottom of the document, not just below the fold. I also tend to write long blog posts, so most users won't see this image at all. As a result, I gave that the laziest options of `loading=\"lazy\" fetchpriority=\"low\"`. I normally wouldn't go out of my way to specify `fetchpriority=\"low\"`, but this seems like the image that most applies to.\n\nI also added `decoding=\"async\"` to both of them as I don't see any reason not to, regardless of how prominent the images are. The two other images I could find for opening a demo in a new tab and a Twitter avatar both got the generic `loading=\"lazy\" decoding=\"async\"`.","shortMessageHtmlLink":"Set image performance attributes for logo and author images."}},{"before":"ef4d0fbcb258fee7d53e1ce14a4171dda2aea30c","after":"74af4e691fd782c270da06eae3b45b0af60e4126","ref":"refs/heads/deploy","pushedAt":"2024-07-26T03:14:25.000Z","pushType":"push","commitsCount":2,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Increases font size of the header.\n\nSince the recent font adjustments, this font size was equivalent to the base text, which is definitely too small for a header. This brings it closer to the post title size.","shortMessageHtmlLink":"Increases font size of the header."}},{"before":"ef4d0fbcb258fee7d53e1ce14a4171dda2aea30c","after":"74af4e691fd782c270da06eae3b45b0af60e4126","ref":"refs/heads/main","pushedAt":"2024-07-26T03:13:59.000Z","pushType":"push","commitsCount":2,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Increases font size of the header.\n\nSince the recent font adjustments, this font size was equivalent to the base text, which is definitely too small for a header. This brings it closer to the post title size.","shortMessageHtmlLink":"Increases font size of the header."}},{"before":"36eaf68a96527a5028bd50c50fb889b3ddcf8fc3","after":"ef4d0fbcb258fee7d53e1ce14a4171dda2aea30c","ref":"refs/heads/deploy","pushedAt":"2024-07-26T02:55:11.000Z","pushType":"push","commitsCount":2,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Adds `` tag declaring Eleventy as the generator.\n\nThis is required to be added to the Eleventy leaderboard.","shortMessageHtmlLink":"Adds <meta> tag declaring Eleventy as the generator."}},{"before":"d9021ff532d8ae66d055615a579cb70131f2de79","after":"ef4d0fbcb258fee7d53e1ce14a4171dda2aea30c","ref":"refs/heads/main","pushedAt":"2024-07-26T02:55:03.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Adds `` tag declaring Eleventy as the generator.\n\nThis is required to be added to the Eleventy leaderboard.","shortMessageHtmlLink":"Adds <meta> tag declaring Eleventy as the generator."}},{"before":"36eaf68a96527a5028bd50c50fb889b3ddcf8fc3","after":"d9021ff532d8ae66d055615a579cb70131f2de79","ref":"refs/heads/main","pushedAt":"2024-07-26T02:51:30.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Defines size adjusted Times New Roman as a fallback font for Lora.\n\nThis size adjustment brings Times New Roman roughly in line with Lora's sizing. This allows the browser to show this adjusted Times New Roman while downloading Lora. Once the download completes, the browser can swap it in with minimal CLS because the sizes match up. I generated the fallback font settings via the amazing [Fallback Font Generator](https://screenspan.net/fallback) tool.\n\nI also switched the fallback font from Verdana to Times New Roman. I didn't realize that Verdana is actually sans-serif while Lora is serif. Aligning serif-ness makes the sizing more consistent and also just reduces visual jitter when the swap occurs.\n\nSince the size is so close and the swap so minor, I decided to replace `font-display: fallback;` and `font-display: optional;` with `font-display: swap;`. We had both `fallback` and `optional` previously due to browser support. Browsers that supported `fallback` would use that by nature of it coming after `optional`. Other browsers would use `optional` since that's the only property they understand. `optional` has no swap period, meaning that if the font is not downloaded fast enough, the page will render without it to avoid blocking the user. `fallback` has a \"short\" swap period meaning it will replace the font after it is displayed to the user, but only for a short time. The idea is that we don't want the user to have a slow download of the font, start reading a post, and then have the page re-render with a different font while they're in the middle of reading it.\n\nI decided on `font-display: swap;` instead which always replaces the font when its loaded. This is typically not recommended, but I think it is ok because the size adjust reduces visual noise from the swap. It should be relatively low impact to change the font, even if the user has already started reading.","shortMessageHtmlLink":"Defines size adjusted Times New Roman as a fallback font for Lora."}},{"before":"ee35f969606bc35e2f3e8a1f081d7abd97d97b78","after":"36eaf68a96527a5028bd50c50fb889b3ddcf8fc3","ref":"refs/heads/deploy","pushedAt":"2024-07-25T06:03:52.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Adds fluid type scale to maintain 50-75 characters per line.\n\nPer [UX studies](https://baymard.com/blog/line-length-readability) and [Wikipedia](https://en.wikipedia.org/wiki/Line_length), optimal line length for legibility and readability is ~50-75 characters per line. This commit adds a \"fluid type scale\" whereby the font size is scaled to the viewport width. This allows us to roughly maintain that line length throughout different screen sizes.\n\nI generated this fluid scale which is basically a linear interpolation from a defined minimum font and screen size (1em x 400px) to a defined max font and screen size (1.5em x 1024px) scaled with the viewport. As the viewport gets wider, the font size increases. This isn't perfect and line length seems to hover between 45-80, but this seems close enough. I'm also hesitant to go lower than 1rem for the minimum size, since that's the device's base font size. Any smaller is going to be an accessibility issue in itself.\n\nSee this [line length snippet](https://gist.github.com/dgp1130/d619a39fb90058635d27f258466259a8) I wrote to calculate the average line length on the page.","shortMessageHtmlLink":"Adds fluid type scale to maintain 50-75 characters per line."}},{"before":"ee35f969606bc35e2f3e8a1f081d7abd97d97b78","after":"36eaf68a96527a5028bd50c50fb889b3ddcf8fc3","ref":"refs/heads/main","pushedAt":"2024-07-25T06:03:46.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Adds fluid type scale to maintain 50-75 characters per line.\n\nPer [UX studies](https://baymard.com/blog/line-length-readability) and [Wikipedia](https://en.wikipedia.org/wiki/Line_length), optimal line length for legibility and readability is ~50-75 characters per line. This commit adds a \"fluid type scale\" whereby the font size is scaled to the viewport width. This allows us to roughly maintain that line length throughout different screen sizes.\n\nI generated this fluid scale which is basically a linear interpolation from a defined minimum font and screen size (1em x 400px) to a defined max font and screen size (1.5em x 1024px) scaled with the viewport. As the viewport gets wider, the font size increases. This isn't perfect and line length seems to hover between 45-80, but this seems close enough. I'm also hesitant to go lower than 1rem for the minimum size, since that's the device's base font size. Any smaller is going to be an accessibility issue in itself.\n\nSee this [line length snippet](https://gist.github.com/dgp1130/d619a39fb90058635d27f258466259a8) I wrote to calculate the average line length on the page.","shortMessageHtmlLink":"Adds fluid type scale to maintain 50-75 characters per line."}},{"before":"16e668c425b78b35614863db732ba86daaf5ca64","after":"ee35f969606bc35e2f3e8a1f081d7abd97d97b78","ref":"refs/heads/deploy","pushedAt":"2024-07-25T03:42:35.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Adds underline to links.\n\nI didn't realize until Lighthouse pointed this out, but apparently my links required color to identify since the contrast was similar enough to be indistinguishable from regular text for colorblind users. The underscore serves as a visual indicator of a link which does not depend on color.","shortMessageHtmlLink":"Adds underline to links."}},{"before":"16e668c425b78b35614863db732ba86daaf5ca64","after":"ee35f969606bc35e2f3e8a1f081d7abd97d97b78","ref":"refs/heads/main","pushedAt":"2024-07-25T03:42:29.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Adds underline to links.\n\nI didn't realize until Lighthouse pointed this out, but apparently my links required color to identify since the contrast was similar enough to be indistinguishable from regular text for colorblind users. The underscore serves as a visual indicator of a link which does not depend on color.","shortMessageHtmlLink":"Adds underline to links."}},{"before":"6b45d72d673e454fa5b1aad63d70087494e5cc98","after":"16e668c425b78b35614863db732ba86daaf5ca64","ref":"refs/heads/deploy","pushedAt":"2024-07-24T05:32:41.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Updates \"About the author\" to use an `

` instead of `

`.\n\nOn the page this is under an `

` section, so it's more appropriate to use an `

`.","shortMessageHtmlLink":"Updates \"About the author\" to use an <h2> instead of <h3>."}},{"before":"6b45d72d673e454fa5b1aad63d70087494e5cc98","after":"16e668c425b78b35614863db732ba86daaf5ca64","ref":"refs/heads/main","pushedAt":"2024-07-24T05:32:35.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Updates \"About the author\" to use an `

` instead of `

`.\n\nOn the page this is under an `

` section, so it's more appropriate to use an `

`.","shortMessageHtmlLink":"Updates \"About the author\" to use an <h2> instead of <h3>."}},{"before":"60254ba27da081165c1af4d61eb7fcacc57f54ee","after":"6b45d72d673e454fa5b1aad63d70087494e5cc98","ref":"refs/heads/deploy","pushedAt":"2024-07-24T05:19:05.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Fixes `` prompt.\n\nThis component was recently updated to a hard 44px height to avoid CLS, but if it renders a prompt string, the content overflows. To address this, I pulled the prompt string outside `` so it can remain the hard-coded 44px regardless of the prompt being there. This also prerenders the prompt string which makes it a little more accessible.","shortMessageHtmlLink":"Fixes <dwac-share> prompt."}},{"before":"60254ba27da081165c1af4d61eb7fcacc57f54ee","after":"6b45d72d673e454fa5b1aad63d70087494e5cc98","ref":"refs/heads/main","pushedAt":"2024-07-24T05:18:59.000Z","pushType":"push","commitsCount":1,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Fixes `` prompt.\n\nThis component was recently updated to a hard 44px height to avoid CLS, but if it renders a prompt string, the content overflows. To address this, I pulled the prompt string outside `` so it can remain the hard-coded 44px regardless of the prompt being there. This also prerenders the prompt string which makes it a little more accessible.","shortMessageHtmlLink":"Fixes <dwac-share> prompt."}},{"before":"167172f3f787b59b1f05685c27f36020a4eb8c67","after":"60254ba27da081165c1af4d61eb7fcacc57f54ee","ref":"refs/heads/deploy","pushedAt":"2024-07-24T05:02:50.000Z","pushType":"push","commitsCount":3,"pusher":{"login":"dgp1130","name":"Douglas Parker","path":"/dgp1130","primaryAvatarUrl":"https://avatars.githubusercontent.com/u/11010321?s=80&v=4"},"commit":{"message":"Removes `/` on `