Simplify remote thumbnail front matter declarations

AleksandrHovhannisyan · Apr 20, 2024 · 4c34734 · 4c34734
1 parent 42d4d56
commit 4c34734
Show file tree

Hide file tree

Showing 40 changed files with 45 additions and 79 deletions.
diff --git a/src/_posts/2019-08-04-learn-to-code-without-wasting-time-and-money/index.md b/src/_posts/2019-08-04-learn-to-code-without-wasting-time-and-money/index.md
@@ -5,8 +5,7 @@ keywords: [learn to code, beginner programming mistakes, advice for beginner pro
 categories: [essay, career]
 commentsId: 29
 lastUpdated: 2021-08-14
-thumbnail:
-  url: https://images.unsplash.com/photo-1499673610122-01c7122c5dcb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1499673610122-01c7122c5dcb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 I remember reading a short story in high school about an aspiring writer who invested a great deal of time and money in procuring a fancy pen and an ornately bound notebook, purchasing a desk only a serious writer would sit at, furnishing his study with shelves full of old books he'd never read, and daydreaming about the prospect of writing. What was missing from this picture was any ink touching paper&mdash;he did anything but actually write.

diff --git a/src/_posts/2019-12-26-the-method-of-least-squares/index.md b/src/_posts/2019-12-26-the-method-of-least-squares/index.md
@@ -6,8 +6,7 @@ layout: mathPost
 categories: [computer-science, math]
 commentsId: 38
 lastUpdated: 2021-06-28
-thumbnail:
-  url: https://images.unsplash.com/photo-1616628188524-65a2deb4f06f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1616628188524-65a2deb4f06f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 The method of least squares is a technique for solving systems of equations, but it can be difficult for beginners to grasp if not explained well. It's something that you'll remember by heart once you understand the intuition behind how it's derived. In this post, we'll look at the problem that motivates the least squares method and gain an intuitive understanding for how it works under the hood.

diff --git a/src/_posts/2020-04-04-seo-blogging-tips/index.md b/src/_posts/2020-04-04-seo-blogging-tips/index.md
@@ -4,8 +4,7 @@ description: SEO is the art of making strategic improvements to a site in order
 keywords: [seo, traffic]
 categories: [seo, writing]
 commentsId: 41
-thumbnail:
-  url: https://images.unsplash.com/photo-1526628953301-3e589a6a8b74?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1526628953301-3e589a6a8b74?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 **Search engine optimization** (SEO) is the art of making strategic improvements to a site's content or performance in order to rank higher in search results and attract more traffic.

diff --git a/src/_posts/2020-04-20-javascript-pass-by-reference/index.md b/src/_posts/2020-04-20-javascript-pass-by-reference/index.md
@@ -5,8 +5,7 @@ keywords: [javascript pass by reference]
 categories: [javascript, memory]
 commentsId: 36
 lastUpdated: 2024-03-20
-thumbnail:
-  url: https://images.unsplash.com/photo-1529448005898-b19fc13465b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1529448005898-b19fc13465b7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 If you're reading this article, chances are that you've heard the terms "pass by value" and "pass by reference"—whatever those mean. Maybe you were told that JavaScript is a pass-by-value language, or maybe you heard that it's pass by reference. More commonly, you've probably heard that it's both. This explanation is very common:

diff --git a/src/_posts/2020-07-26-http-cookies/index.md b/src/_posts/2020-07-26-http-cookies/index.md
@@ -6,8 +6,7 @@ categories: [http, cookies, browsers, javascript]
 commentsId: 49
 redirectFrom:
   - /blog/what-are-cookies/
-thumbnail:
-  url: https://images.unsplash.com/photo-1568051243858-533a607809a5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1568051243858-533a607809a5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 lastUpdated: 2022-12-01
 ---
 

diff --git a/src/_posts/2020-09-01-optimizing-images-for-the-web/index.md b/src/_posts/2020-09-01-optimizing-images-for-the-web/index.md
@@ -5,8 +5,7 @@ keywords: [optimizing images for the web, optimize images for the web]
 categories: [javascript, webperf, images, lighthouse]
 commentsId: 56
 lastUpdated: 2021-12-14
-thumbnail:
-  url: https://images.unsplash.com/photo-1531845116688-48819b3b68d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1531845116688-48819b3b68d9?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 You're a fan of images—who isn't? But those adorable puppy photos, memes, and GIFs don't come without a price. Often, these images range anywhere from a few hundred kB to several megabytes in size. And while that's practically nothing in terms of *storage* space, it's quite a significant cost in terms of network data usage, especially on mobile.

diff --git a/src/_posts/2020-09-21-css-aspect-ratio/index.md b/src/_posts/2020-09-21-css-aspect-ratio/index.md
@@ -7,8 +7,7 @@ lastUpdated: 2021-06-12
 commentsId: 58
 stylesheets:
   - /assets/styles/demos/aspect-ratio.css
-thumbnail:
-  url: https://images.unsplash.com/photo-1550535424-fd4382da050c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1550535424-fd4382da050c?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 If you're not sure how to define aspect ratios in CSS, or if you have no clue what an aspect ratio is to begin with, then you're in luck. This tutorial covers everything that you need to know about creating aspect ratio boxes in CSS, using both a modern approach and an old one with a percentage padding trick. Once you understand aspect ratios and how to define them, you'll be able to do all kinds of neat things—like creating `nxn` square grid layouts, responsively sizing embedded media, reserving space for images, and much more.

diff --git a/src/_posts/2020-09-30-does-web-performance-matter/index.md b/src/_posts/2020-09-30-does-web-performance-matter/index.md
@@ -3,8 +3,7 @@ title: Does Web Performance Matter? It Depends.
 description: Some big brands have a slow page load speed, but they still rank well on Google. So does web performance even matter?
 keywords: [web performance, page load speed]
 categories: [webperf, lighthouse]
-thumbnail:
-  url: https://images.unsplash.com/photo-1579019163248-e7761241d85a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1579019163248-e7761241d85a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 About halfway through writing an exhaustive guide on web performance and Lighthouse, I stopped to wonder: Does any of this actually matter? Is web performance really as important as people claim it is? That prompted me to do a bit of digging... And the results were enlightening.

diff --git a/src/_posts/2020-11-01-dynamic-tag-name-props-in-react/index.md b/src/_posts/2020-11-01-dynamic-tag-name-props-in-react/index.md
@@ -5,8 +5,7 @@ keywords: [dynamic tag name props]
 categories: [react, typescript]
 commentsId: 62
 lastUpdated: 2022-01-02
-thumbnail:
-  url: https://images.unsplash.com/photo-1571907483086-3c0ea40cc16d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1571907483086-3c0ea40cc16d?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 In React, you sometimes need to allow users to pass in a tag name prop to a component as a string. You may have encountered this pattern if you've ever worked with the [`react-intl` library for internationalized strings](https://formatjs.io/docs/react-intl/components/#formattedmessage), where the `FormattedMessage` component accepts an optional `tagName` prop:

diff --git a/src/_posts/2021-02-21-why-you-no-longer-enjoy-reading/index.md b/src/_posts/2021-02-21-why-you-no-longer-enjoy-reading/index.md
@@ -3,8 +3,7 @@ title: Why You No Longer Enjoy Reading
 description: Reading books isn't something that everyone enjoys. But if you used to like reading but can no longer get past the first chapter of a new book, there may be a few reasons why.
 keywords: [reading, reading books]
 categories: [essay, books]
-thumbnail:
-  url: https://images.unsplash.com/photo-1526243741027-444d633d7365?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1526243741027-444d633d7365?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 Reading books isn't something that everyone enjoys. But regardless of how you feel about them, there's no denying that books are amazing—they can tap into your imagination to create new thoughts and experiences, transporting you to an entirely different (or sometimes familiar) world. Books are also one of the few media capable of capturing the full range of human emotions and documenting our experience on this lonely little planet we call home. They've predicted the future time and time again, and they've cataloged the past for posterity.

diff --git a/src/_posts/2021-03-07-setting-width-and-height-on-images/index.md b/src/_posts/2021-03-07-setting-width-and-height-on-images/index.md
@@ -5,8 +5,7 @@ keywords: [setting width and height on images, setting an image's width and heig
 categories: [webperf, images, aspect-ratio, html]
 commentsId: 78
 lastUpdated: 2022-09-26
-thumbnail:
-  url: https://images.unsplash.com/photo-1497296690583-da0e2a4ce49a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1497296690583-da0e2a4ce49a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 {% aside %}

diff --git a/src/_posts/2021-04-07-why-devs-should-write/index.md b/src/_posts/2021-04-07-why-devs-should-write/index.md
@@ -5,8 +5,7 @@ keywords: [writing, dev blog, better developer, developer]
 categories: [writing, career]
 redirectFrom:
   - /blog/how-writing-can-help-you-become-a-better-developer/
-thumbnail:
-  url: https://images.unsplash.com/photo-1592819695396-064b9572a660?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1592819695396-064b9572a660?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 When you picture a software developer in their natural habitat, writing is one of the last things you probably think of them doing. You're more likely to imagine someone writing code, testing things, drinking copious amounts of caffeine, or begrudgingly attending meetings.

diff --git a/src/_posts/2021-04-18-crlf-vs-lf-normalizing-line-endings-in-git/index.md b/src/_posts/2021-04-18-crlf-vs-lf-normalizing-line-endings-in-git/index.md
@@ -6,8 +6,7 @@ categories: [git, operating-systems, tooling]
 commentsId: 79
 isFeatured: true
 lastUpdated: 2022-07-23
-thumbnail:
-  url: https://images.unsplash.com/photo-1583913836387-ab656f4e0457?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1583913836387-ab656f4e0457?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 If you've ever worked on a project where developers use different operating systems, you know that line endings can be a peculiar source of frustration. This issue of CRLF vs. LF line endings is actually fairly popular—you'll find tons of questions on StackOverflow about how to configure software like Git to play nicely with different operating systems.

diff --git a/src/_posts/2021-05-15-atomic-git-commits/index.md b/src/_posts/2021-05-15-atomic-git-commits/index.md
@@ -4,8 +4,7 @@ description: It can be tempting to lump unrelated code changes into a single com
 keywords: [atomic commits, atomic git commits, git]
 categories: [git, practices]
 lastUpdated: 2022-06-08
-thumbnail:
-  url: https://images.unsplash.com/photo-1614350292382-c448d0110dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1614350292382-c448d0110dfa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 We've all been there: You worked on lots of changes at once, some of which didn't have anything in common. For the sake of convenience, you decided to lump all of these changes into a single commit and call it a day. But while this may seem tempting, it could actually cause more problems down the line. Bigger commits can:

diff --git a/src/_posts/2021-05-22-react-iframes-back-navigation-bug/index.md b/src/_posts/2021-05-22-react-iframes-back-navigation-bug/index.md
@@ -4,8 +4,7 @@ description: If an iframe re-renders in React, it can interfere with back naviga
 keywords: [iframes, react, back navigation, browser history]
 categories: [browsers, react, javascript]
 commentsId: 84
-thumbnail:
-  url: https://images.unsplash.com/photo-1609668528780-e364738d8ba5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1609668528780-e364738d8ba5?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 You're using iframes to embed content on a page in React.

diff --git a/src/_posts/2021-07-11-62-5-percent-font-size-trick/index.md b/src/_posts/2021-07-11-62-5-percent-font-size-trick/index.md
@@ -7,8 +7,7 @@ commentsId: 97
 lastUpdated: 2024-03-15
 redirectFrom:
   - /blog/respecting-font-size-preferences-rems-62-5-percent/
-thumbnail:
-  url: https://images.unsplash.com/photo-1612620485998-fe926eccbe18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1612620485998-fe926eccbe18?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 {% aside %}

diff --git a/src/_posts/2021-07-18-cleaner-type-predicates-with-derived-types/index.md b/src/_posts/2021-07-18-cleaner-type-predicates-with-derived-types/index.md
@@ -4,8 +4,7 @@ description: In TypeScript, type predicates allow you to narrow down an abstract
 keywords: [type predicate, derived types, typescript]
 categories: [typescript, javascript]
 commentsId: 98
-thumbnail:
-  url: https://images.unsplash.com/photo-1511688878353-3a2f5be94cd7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1511688878353-3a2f5be94cd7?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 Let's pretend that we're writing the frontend for a juice shop that prepares a combination of fruits and vegetables for its juices. We want to strictly type our ingredients, so we first take a naive approach that lists the types upfront for fruits and vegetables:

diff --git a/src/_posts/2021-08-01-javascript-promise-all/index.md b/src/_posts/2021-08-01-javascript-promise-all/index.md
@@ -5,8 +5,7 @@ keywords: [promise.all, promise, async, javascript]
 categories: [javascript, async]
 commentsId: 104
 lastUpdated: 2024-03-07
-thumbnail:
-  url: https://images.unsplash.com/photo-1606674556490-c2bbb4ee05e5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1606674556490-c2bbb4ee05e5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 Imagine you're creating an app that allows users to batch-upload files. You need to wait until all of the files have finished uploading so you can notify the user and update the UI. But the files all depend on each other, so if just one file fails to upload, you want to cancel the entire operation and start over.

diff --git a/src/_posts/2021-08-24-react-lazy-dynamic-imports/index.md b/src/_posts/2021-08-24-react-lazy-dynamic-imports/index.md
@@ -5,8 +5,7 @@ keywords: [React.lazy, dynamically import components, dynamic import, lazy]
 categories: [react, webperf, javascript, async]
 commentsId: 106
 lastUpdated: 2022-06-10
-thumbnail:
-  url: https://images.unsplash.com/photo-1570288685369-f7305163d0e3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1570288685369-f7305163d0e3?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 In JavaScript frameworks like React, it's tempting to statically import a wide range of components. But not all of them are needed immediately; some components only render after a user interacts with the page or once a certain run-time condition has been met. Some examples of this include:

diff --git a/..._posts/2021-09-14-represent-state-with-html-attributes-not-class-names/index.md b/..._posts/2021-09-14-represent-state-with-html-attributes-not-class-names/index.md
@@ -5,8 +5,7 @@ keywords: [html attributes, CSS attribute selector, class names]
 categories: [accessibility, html, css]
 commentsId: 108
 lastUpdated: 2022-07-17
-thumbnail:
-  url: https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1477414348463-c0eb7f1359b6?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 How often have you seen markup like this?

diff --git a/src/_posts/2021-09-28-nfts-are-a-problem/index.md b/src/_posts/2021-09-28-nfts-are-a-problem/index.md
@@ -5,8 +5,7 @@ categories: [essay, nft, art, money]
 keywords: [nfts, digital ownership, ownership, art]
 lastUpdated: 2021-12-18
 commentsId: 114
-thumbnail:
-  url: https://images.unsplash.com/photo-1626162987518-4fee900a9323?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1626162987518-4fee900a9323?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 Unless you've been living under a rock, you've probably heard of NFTs, cryptocurrencies, digital art, and a whole slew of other dizzying terms. Every cool kid on the block is wearing chains, trading bits for coins, and hoarding digital collectibles. It can all seem like a lot to keep up with, especially if you have no clue what's going on.

diff --git a/src/_posts/2021-10-10-managing-complex-state-react-usereducer/index.md b/src/_posts/2021-10-10-managing-complex-state-react-usereducer/index.md
@@ -3,8 +3,7 @@ title: Managing Complex State in React with useReducer
 description: React's useState hook works well for managing simple state. But once your component starts to grow, useReducer may be a better fit for managing state.
 categories: [react, design-patterns, typescript]
 keywords: [useReducer, react, complex state, managing state, state management]
-thumbnail:
-  url: https://images.unsplash.com/photo-1492552085122-36706c238263?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1492552085122-36706c238263?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 Imagine that you're asked to create a component where users can search for images returned by a paginated API. The component should render a search box followed by a list of image results. When a user types in the search box, the component should fetch images from the API using their query. The component should also render a load-more button at the end of the list to allow the user to fetch the next page of images. Each API response returns the current chunk of images along with pagination information. All of this means that the component needs a state for:

diff --git a/src/_posts/2021-10-20-static-site-comments-github-issues/index.md b/src/_posts/2021-10-20-static-site-comments-github-issues/index.md
@@ -3,8 +3,7 @@ title: Add Comments to a Static Site with Netlify Functions and the GitHub API
 description: Comment systems can be a pain to set up, but they don't have to be. Learn how to use the GitHub Issues API to create a custom comment system powered by Netlify functions.
 keywords: [comment system, comments, github api, netlify functions]
 categories: [netlify, github, node]
-thumbnail:
-  url: https://images.unsplash.com/photo-1512626120412-faf41adb4874?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1512626120412-faf41adb4874?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 commentsId: 117
 lastUpdated: 2024-02-22
 ---

diff --git a/src/_posts/2021-10-31-eleventy-image-plugin/index.md b/src/_posts/2021-10-31-eleventy-image-plugin/index.md
@@ -7,8 +7,7 @@ commentsId: 118
 lastUpdated: 2022-06-10
 redirectFrom:
   - /blog/eleventy-image-lazy-loading/
-thumbnail:
-  url: https://images.unsplash.com/photo-1631739408670-38319df9c5c1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1631739408670-38319df9c5c1?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1600&h=900&q=80
 ---
 
 {% aside %}

diff --git a/src/_posts/2022-02-13-downloading-and-optimizing-google-fonts/index.md b/src/_posts/2022-02-13-downloading-and-optimizing-google-fonts/index.md
@@ -3,8 +3,7 @@ title: How to Download and Optimize Google Fonts
 description: Self-hosting fonts can improve your site's performance and help you remain compliant with privacy regulations like the GDPR. Learn how to download, subset, and optimize any Google Font for your projects.
 keywords: [google fonts, woff2, glyphhanger]
 categories: [typography, webperf]
-thumbnail:
-  url: https://images.unsplash.com/photo-1566404252805-1e6d6bc539d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
+thumbnail: https://images.unsplash.com/photo-1566404252805-1e6d6bc539d1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1600&h=900&q=80
 lastUpdated: 2024-03-03
 ---