
## Around the Web 🕷
### Aceternity UI
My colleague José shared this UI library with me, and it's really something else. It breaks the mold for UI libraries by providing components that are flashy, animated, and sometimes over the top interactions. Whatever your opinion may be on some of these effects, this library is undeniably eye-catching.

<a href="https://ui.aceternity.com/" class="bookmark-metadata" target="_blank" rel="noreferrer noopener">
<img class="bookmark-metadata-image" src="https://ui.aceternity.com/banner.png" loading="lazy" alt="Referenced media"></img>
<div className="container"><div class="bookmark-metadata-description">Beautiful Tailwind CSS and Framer Motion Components, built with Next.js and TypeScript.</div>
</div></a>

### Optimizing Javascript for fun and for profit
If you're a Javascript developer with any interest in performance optimization, this post is a goldmine. It details 13 common performance pitfalls, and includes optimizations with runnable examples for support. 

<a href="https://romgrk.com/posts/optimizing-javascript" class="bookmark-metadata" target="_blank" rel="noreferrer noopener">
<h4 style="font-size: 2em; margin: 2em;">romgrk</h4>
<div className="container"><div class="bookmark-metadata-description">romgrk’s personal blog</div>
<div class="bookmark-metadata-date">March 21, 2024</div></div></a>

### Grid Item Reveal Animation on Hover | Codrops
My company Metalab recently underwent a gorgeous website and brand overhaul. The website animations make quite a statement, so much so that developers are already creating tutorials to achieve similar effects. [Take a look at the real deal here](https://metalab.com), and learn how to build something similar below.

<a href="https://tympanus.net/codrops/2024/03/13/grid-item-reveal-animation-on-hover/" class="bookmark-metadata" target="_blank" rel="noreferrer noopener">
<img class="bookmark-metadata-image" src="https://codrops-1f606.kxcdn.com/codrops/wp-content/uploads/2024/03/hovergrid_feat.jpg?x87314" loading="lazy" alt="Referenced media"></img>
<div className="container"><div class="bookmark-metadata-description">A recreation of the grid item reveal animation on hover as seen on the website of Metalab.</div>
<div class="bookmark-metadata-date">March 13, 2024</div></div></a>

### Onest + Cal Sans Fonts
A couple geometric sans serif fonts I've been loving lately.

<a href="https://fonts.google.com/specimen/Onest" class="bookmark-metadata" target="_blank" rel="noreferrer noopener">
<img class="bookmark-metadata-image" src="https://www.gstatic.com/images/icons/material/apps/fonts/1x/catalog/v5/opengraph_color.png" loading="lazy" alt="Referenced media"></img>
<div className="container"><div class="bookmark-metadata-description">From thin to extra bold, Onest is designed as a hybrid of geometric and humanistic grotesques. Onest is suitable for reading long texts from the screens of any</div>
</div></a>
<br />
<a href="https://github.com/calcom/font" class="bookmark-metadata" target="_blank" rel="noreferrer noopener">
<img class="bookmark-metadata-image" src="https://opengraph.githubassets.com/1fd42f51caa767e26d7a40c3609492cc29fdf378df6b4b7a0111eff9506fe15f/calcom/font" loading="lazy" alt="Referenced media"></img>
<div className="container"><div class="bookmark-metadata-description">The home for our Cal Sans font. Contribute to calcom/font development by creating an account on GitHub.</div>
</div></a>

### This Pattern Will Wreck Your React App's TS Performance
I've seen this pattern in the wild and not thought much about it. As a bit of a spoiler, it turns out `interface extends` is generally faster than `&`. See the details in Matt Pocock's post below.

<a href="https://www.totaltypescript.com/react-apps-ts-performance" class="bookmark-metadata" target="_blank" rel="noreferrer noopener">
<img class="bookmark-metadata-image" src="https://totaltypescript.com/api/og/og-default?title=This%20Pattern%20Will%20Wreck%20Your%20React%20App%27s%20TS%20Performance" loading="lazy" alt="Referenced media"></img>
<div className="container"><div class="bookmark-metadata-description">Improve React TypeScript performance by replacing type & with interface extends. Boost IDE and tsc speed significantly.</div>
<div class="bookmark-metadata-date">March 25, 2024</div></div></a>



## Some Fave Tweets 🐦
This shows a seemingly complex animation being broken down into discrete and straightforward(ish) steps. A really nicely illustrated look into an effective problem solving approach -- plus I'm a sucker for pixel art. 
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Here is a QUICK explanation for my procedural animations that several people asked for. Hope it helps! <a href="https://twitter.com/hashtag/gamemaker?src=hash&amp;ref_src=twsrc%5Etfw">#gamemaker</a> <a href="https://twitter.com/hashtag/procgen?src=hash&amp;ref_src=twsrc%5Etfw">#procgen</a> <a href="https://t.co/5jTc5LbZJf">pic.twitter.com/5jTc5LbZJf</a></p>&mdash; RujiK (@TheRujiK) <a href="https://twitter.com/TheRujiK/status/969581641680195585?ref_src=twsrc%5Etfw">March 2, 2018</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

This website uses a single font-size throughout, and it looks so dang nice!
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">Currently obsessed with the single font-size aesthetic of <a href="https://twitter.com/emilkowalski_?ref_src=twsrc%5Etfw">@emilkowalski_</a>&#39;s blog 👌🏻<a href="https://t.co/FLJsZ6auQt">https://t.co/FLJsZ6auQt</a> <a href="https://t.co/OSDXsCjzKR">pic.twitter.com/OSDXsCjzKR</a></p>&mdash; Adam Wathan (@adamwathan) <a href="https://twitter.com/adamwathan/status/1770986699599888537?ref_src=twsrc%5Etfw">March 22, 2024</a></blockquote> 

@j3yy with another display of UI wizardry. This time making an absolutely delightful input with controls. [Full codepen here](https://codepen.io/jh3y/pen/XWQXPjd) 
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">the little details™<br><br>Use trigonometric functions in CSS to create a smooth staggered transition delay 🎬<br><br>.character {<br> transition-delay:<br> calc(sin((var(--index) / 12) * 45deg) * 0.475s);<br>} <a href="https://t.co/ttBoPP44w0">https://t.co/ttBoPP44w0</a> <a href="https://t.co/ajAl564U78">pic.twitter.com/ajAl564U78</a></p>&mdash; jhey ▲🐻🎈 (@jh3yy) <a href="https://twitter.com/jh3yy/status/1766216768710664222?ref_src=twsrc%5Etfw">March 8, 2024</a></blockquote> 

This is a good reminder of how much can be accomplished by just using the platform™.
<blockquote class="twitter-tweet"><p lang="en" dir="ltr">*slaps roof of car* this little input can fit so much UX in it <a href="https://t.co/8uFZzj8tYn">pic.twitter.com/8uFZzj8tYn</a></p>&mdash; Ryan Florence (@ryanflorence) <a href="https://twitter.com/ryanflorence/status/1764332124314968495?ref_src=twsrc%5Etfw">March 3, 2024</a></blockquote> 


My collection of new, interesting, useful, and trending content for software developers. The March 2024 edition delves into JavaScript and TypeScript performance optimization, explores an eye-catching UI library, and much more!

Dev Roundup, Mar 2024

My collection of new, interesting, useful, and trending content for software developers. In the April 2023 edition we look at the Vercel Image Gallery starter, a debugging story, some new tool and feature releases, and plenty of design inspiration.

Dev Roundup, April 2023

My collection of new, interesting, useful, and trending content for software developers. The Mar 2023 Part 1 edition.

Dev Roundup, Mar 2023 Part 1

My collection of new, interesting, useful, and trending content for software developers. The Feb 2023 Part 2 edition includes design resources for devs, unconventional backends, staff engineer archetypes, and more!

Dev Roundup, Feb 2023 Part 2

My collection of new, interesting, useful, and trending content for software developers. The Feb 2023 Part 1 edition includes AI, scrolling animations, Lighthouse updates, Typescript tips, and more!

Dev Roundup, Feb 2023 Part 1


## Around the Web 🕷
This edition features React Wrap Balancer, the Golden Kitty Awards, a Shader Gradient app, and more. Let's dive in!

### Improving readability with React Wrap Balancer

This is a deep dive into React Wrap Balancer and the problem it solves. I use React Wrap Balancer on this blog to keep titles visually balanced.

<a href="https://vercel.com/blog/react-wrap-balancer" class="bookmark-metadata" target="_blank" rel="noreferrer noopener">
<img class="bookmark-metadata-image" src="https://assets.vercel.com/image/upload/contentful/image/e5382hct74si/3PNtl6kbXYBUDeHFk6E31n/a8952cfd0608b8f76ee2b2f15deb7b0f/OG_Card-ReactWrapBalancer.png" loading="lazy" alt="Referenced media"></img>
<div className="container"><div class="bookmark-metadata-description">React Wrap Balancer tidies up bad typography and matches line lengths on the fly.</div>
</div></a>

### Hall of Fame - Golden Kitty Awards Winners

Browse 2022's top Product Hunt products. See the winners in categories like productivity, AI, Design, SaaS and more. This is a great way to discover new and exciting products.

<a href="https://www.producthunt.com/golden-kitty-awards/hall-of-fame" class="bookmark-metadata" target="_blank" rel="noreferrer noopener">
<img class="bookmark-metadata-image" src="https://ph-files.imgix.net/7ea9f303-8b09-41b0-9160-87f87889d2c2.png?auto=format" loading="lazy" alt="Referenced media"></img>
<div className="container"><div class="bookmark-metadata-description">The #GoldenKittyAwards2022 results have been announced! Check to see this year’s Golden Kitty winners 👇</div>
</div></a>

### A Tailwind Animated Loading Skeleton

A nice animated loading effected for a card component using TailwindCSS only.

<a href="https://play.tailwindcss.com/T53FThvo8i" class="bookmark-metadata" target="_blank" rel="noreferrer noopener">
<img class="bookmark-metadata-image" src="https://play.tailwindcss.com/social-square.jpg" loading="lazy" alt="Referenced media"></img>
<div className="container"><div class="bookmark-metadata-description">An advanced online playground for Tailwind CSS that lets you use all of Tailwind’s build-time features directly in the browser.</div>
</div></a>

### Shader Gradient, A Generator App

An that showcases beautiful animated, textured gradients. Build your own for Framer, support coming to Figma and React soon.

<a href="https://www.shadergradient.co/" class="bookmark-metadata" target="_blank" rel="noreferrer noopener">
<img class="bookmark-metadata-image" src="https://framerusercontent.com/modules/elnX4yG2dxrrkxIkknad/PTzumRXNPJjs8XZFF7Hg/assets/PhH05ZOFB4Y5fMQk7QjKw9D1PVM.png" loading="lazy" alt="Referenced media"></img>
<div className="container"><div class="bookmark-metadata-description">The easiest and fastest way to create a 3D website using React Three Fiber and NextJS</div>
</div></a>

## Some Fave Tweets 🐦

This thread is packed with valuable resources for any developer looking to dive deep on the craft and philosophy of software development.
<div><div class="static-tweet-embed">
<a class="tweet-author" href="https://twitter.com/thiagoghisi" target="_blank" rel="noreferrer noopener">
  <img src="https://pbs.twimg.com/profile_images/1318348892853932033/FxMKmypV_bigger.jpg" loading="lazy" alt="Thiago Ghisi avatar" />
  <div>
    <span class="tweet-author-name">Thiago Ghisi</span>
    <span class="tweet-author-handle">@thiagoghisi</span>
  </div>
</a><blockquote>I've read thousands of articles over the last 20 years in Tech.

Agile, Career, Distributed Systems, Engineering Management, Metrics, Programming, Testing, Types...

Below are The 22 Articles that Impacted my Career the most ➕ my main highlights from each one.

🧵🧵🧵</blockquote><div class="stats"><a href="https://twitter.com/intent/like?tweet_id=1617249812432424960" class="like"><svg viewBox="0 0 24 24" class="r-m0bqgq r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr" style=""><g><path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"></path></g></svg>1872</a><a href="https://twitter.com/thiagoghisi/status/1617249812432424960" class="reply"><svg viewBox="0 0 24 24" class="r-m0bqgq r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z"></path></g></svg>53</a><a href="https://twitter.com/intent/retweet?tweet_id=1617249812432424960" class="reply"><svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><g><path d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z"></path></g></svg>332</a></div><div class="time"><a href="https://twitter.com/thiagoghisi/status/1617249812432424960">11:56 a.m. – January 22, 2023 - View Tweet</a></div></div></div>

I'm going to reference this tweet any time I have to build a new component library and/or design system.
<div><div class="static-tweet-embed">
<a class="tweet-author" href="https://twitter.com/blvdmitry" target="_blank" rel="noreferrer noopener">
  <img src="https://pbs.twimg.com/profile_images/1096029593335676929/OZbE9ZXV_bigger.png" loading="lazy" alt="Dmitry Belyaev avatar" />
  <div>
    <span class="tweet-author-name">Dmitry Belyaev</span>
    <span class="tweet-author-handle">@blvdmitry</span>
  </div>
</a><blockquote>Working on the content update for the design system checklist content. Starting with reviewing the most common components we cover there. Would you add anything to this list that you think can be found in majority of the systems?</blockquote><a href="https://twitter.com/blvdmitry/status/1617573679994654723" target="_blank" rel="noreferrer noopener"><div class="tweet-media-container"><div class="tweet-media-grid" data-count="1"><img src="https://pbs.twimg.com/media/FnLGrUMWQAEDeu3.png" width="100%" loading="lazy" alt="Tweet media" /></div></div></a><div class="stats"><a href="https://twitter.com/intent/like?tweet_id=1617573679994654723" class="like"><svg viewBox="0 0 24 24" class="r-m0bqgq r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr" style=""><g><path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"></path></g></svg>249</a><a href="https://twitter.com/blvdmitry/status/1617573679994654723" class="reply"><svg viewBox="0 0 24 24" class="r-m0bqgq r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z"></path></g></svg>30</a><a href="https://twitter.com/intent/retweet?tweet_id=1617573679994654723" class="reply"><svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><g><path d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z"></path></g></svg>18</a></div><div class="time"><a href="https://twitter.com/blvdmitry/status/1617573679994654723">9:23 a.m. – January 23, 2023 - View Tweet</a></div></div></div>

A really interesting way to visualize discovery work in software development. Based on Ryan Singer's tweet about defining discovery work as "prototyping" instead of "iterating".
<div><div class="static-tweet-embed">
<a class="tweet-author" href="https://twitter.com/destraynor" target="_blank" rel="noreferrer noopener">
  <img src="https://pbs.twimg.com/profile_images/1080456670684332032/7-4OAu7I_bigger.jpg" loading="lazy" alt="Des Traynor avatar" />
  <div>
    <span class="tweet-author-name">Des Traynor</span>
    <span class="tweet-author-handle">@destraynor</span>
  </div>
</a><blockquote>Ryan's thread overlaps with and reminds me of Bill Buxton's point about the difference in skills/approaches needed between "getting the right design, and getting the design right"</blockquote><a href="https://twitter.com/destraynor/status/1619846363155685376" target="_blank" rel="noreferrer noopener"><div class="tweet-media-container"><div class="tweet-media-grid" data-count="1"><img src="https://pbs.twimg.com/media/FnrZUkPWAAAHI7Q.jpg" width="100%" loading="lazy" alt="Tweet media" /></div></div></a><div class="stats"><a href="https://twitter.com/intent/like?tweet_id=1619846363155685376" class="like"><svg viewBox="0 0 24 24" class="r-m0bqgq r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr" style=""><g><path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"></path></g></svg>205</a><a href="https://twitter.com/destraynor/status/1619846363155685376" class="reply"><svg viewBox="0 0 24 24" class="r-m0bqgq r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z"></path></g></svg>4</a><a href="https://twitter.com/intent/retweet?tweet_id=1619846363155685376" class="reply"><svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><g><path d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z"></path></g></svg>23</a></div><div class="time"><a href="https://twitter.com/destraynor/status/1619846363155685376">3:54 p.m. – January 29, 2023 - View Tweet</a></div></div></div> 

My life before knowing this trick has been a lie. Truly mind-blowing.
<div><div class="static-tweet-embed">
<a class="tweet-author" href="https://twitter.com/yu_angela" target="_blank" rel="noreferrer noopener">
  <img src="https://pbs.twimg.com/profile_images/1523987597751726081/XuQeo7gC_bigger.jpg" loading="lazy" alt="Angela Yu avatar" />
  <div>
    <span class="tweet-author-name">Angela Yu</span>
    <span class="tweet-author-handle">@yu_angela</span>
  </div>
</a><blockquote>Today I learnt…</blockquote><a href="https://twitter.com/yu_angela/status/1615832204604579845" target="_blank" rel="noreferrer noopener"><div class="tweet-media-container"><div class="tweet-media-grid" data-count="1"><img src="https://pbs.twimg.com/media/FmyWziVXwAA6zLf.jpg" width="100%" loading="lazy" alt="Tweet media" /></div></div></a><div class="stats"><a href="https://twitter.com/intent/like?tweet_id=1615832204604579845" class="like"><svg viewBox="0 0 24 24" class="r-m0bqgq r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr" style=""><g><path d="M12 21.638h-.014C9.403 21.59 1.95 14.856 1.95 8.478c0-3.064 2.525-5.754 5.403-5.754 2.29 0 3.83 1.58 4.646 2.73.814-1.148 2.354-2.73 4.645-2.73 2.88 0 5.404 2.69 5.404 5.755 0 6.376-7.454 13.11-10.037 13.157H12zM7.354 4.225c-2.08 0-3.903 1.988-3.903 4.255 0 5.74 7.034 11.596 8.55 11.658 1.518-.062 8.55-5.917 8.55-11.658 0-2.267-1.823-4.255-3.903-4.255-2.528 0-3.94 2.936-3.952 2.965-.23.562-1.156.562-1.387 0-.014-.03-1.425-2.965-3.954-2.965z"></path></g></svg>6465</a><a href="https://twitter.com/yu_angela/status/1615832204604579845" class="reply"><svg viewBox="0 0 24 24" class="r-m0bqgq r-4qtqp9 r-yyyyoo r-1xvli5t r-dnmrzs r-bnwqim r-1plcrui r-lrvibr"><g><path d="M14.046 2.242l-4.148-.01h-.002c-4.374 0-7.8 3.427-7.8 7.802 0 4.098 3.186 7.206 7.465 7.37v3.828c0 .108.044.286.12.403.142.225.384.347.632.347.138 0 .277-.038.402-.118.264-.168 6.473-4.14 8.088-5.506 1.902-1.61 3.04-3.97 3.043-6.312v-.017c-.006-4.367-3.43-7.787-7.8-7.788zm3.787 12.972c-1.134.96-4.862 3.405-6.772 4.643V16.67c0-.414-.335-.75-.75-.75h-.396c-3.66 0-6.318-2.476-6.318-5.886 0-3.534 2.768-6.302 6.3-6.302l4.147.01h.002c3.532 0 6.3 2.766 6.302 6.296-.003 1.91-.942 3.844-2.514 5.176z"></path></g></svg>472</a><a href="https://twitter.com/intent/retweet?tweet_id=1615832204604579845" class="reply"><svg width="18" height="18" viewBox="0 0 24 24" aria-hidden="true"><g><path d="M23.77 15.67c-.292-.293-.767-.293-1.06 0l-2.22 2.22V7.65c0-2.068-1.683-3.75-3.75-3.75h-5.85c-.414 0-.75.336-.75.75s.336.75.75.75h5.85c1.24 0 2.25 1.01 2.25 2.25v10.24l-2.22-2.22c-.293-.293-.768-.293-1.06 0s-.294.768 0 1.06l3.5 3.5c.145.147.337.22.53.22s.383-.072.53-.22l3.5-3.5c.294-.292.294-.767 0-1.06zm-10.66 3.28H7.26c-1.24 0-2.25-1.01-2.25-2.25V6.46l2.22 2.22c.148.147.34.22.532.22s.384-.073.53-.22c.293-.293.293-.768 0-1.06l-3.5-3.5c-.293-.294-.768-.294-1.06 0l-3.5 3.5c-.294.292-.294.767 0 1.06s.767.293 1.06 0l2.22-2.22V16.7c0 2.068 1.683 3.75 3.75 3.75h5.85c.414 0 .75-.336.75-.75s-.337-.75-.75-.75z"></path></g></svg>810</a></div><div class="time"><a href="https://twitter.com/yu_angela/status/1615832204604579845">2:03 p.m. – January 18, 2023 - View Tweet</a></div></div></div>


My collection of new, interesting, useful, and trending content for software developers. The Jan 2023 Part 2 edition features  React Wrap Balancer, the Golden Kitty Awards, a Shader Gradient app, a mind-blowing secret, and more.

Dev Roundup, Jan 2023 Part 2


Sitemaps are documents that can be leveraged to help web crawlers analyze your website/blog more effectively.

They are especially useful for large sites with lots of content. [Read more about sitemaps to see if they're right for your use case](https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview)

## Sitemap Structure
Sitemaps are most commonly written in XML.

Generally they contain an `xml` tag to declare versioning and encoding, and a `urlset` to list out site URLs:

```xml
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
  <url>
    <loc>https://www.noahmatsell.ca/</loc>
  </url>
  <url>
    <loc>https://www.noahmatsell.ca/blog</loc>
  </url>
</urlset>
```

Site URLs are declared using a child `url` tag. Inside each `url` tag, you need at minimum a `loc` child tag which declares the URL. Other optional child tags for a `url` entry include `lastmod`, `changefreq`, and `priority`. [Read more about these tags here.](https://www.sitemaps.org/protocol.html)

## Building Script
Adding entries to a sitemap manually is perfectly valid, but it can become tedious. Especially if you have a really large site — like a blog with many posts. Manual entry can also be error prone, and relies on you remembering to make updates every time a new page is created.

The problem of list and updating URLs for a sitemap is a great candidate for automation. The following will help you automate the process of creating a `sitemap.xml` file for your website, and populate this file with all of the URLs desired.

### 1. Create script file
Create `build-sitemap.ts` script, that we will populate in the following steps:

```ts
// build-sitemap.ts
async function generate() {
  ...
}

generate();
```

### 2. Define Your Dynamic Pages
Inside the `generate` function, we start by getting an array all posts with their slugs and publish date:
```ts
// build-sitemap.ts
...
const allPosts = getAllPosts(["slug", "publishDate"])
  .filter((post) => {
    return Boolean(post.publishDate && post.slug);
  })
  .map((post) => {
    return { ...post, slug: `blog/${post.slug}` };
  }) as PageEntry[];
...
```
This code takes advantage of my blog's `getAllPosts` function, which reads all of my `.md` files and returns the requested metadata fields (in this case `slug` and `publishDate`). You can learn more about setting this up in [my blog post here](https://www.noahmatsell.ca/blog/nextjs-convert-to-md-blog), or [jump straight to the code here](https://github.com/noahub/a-devs-blog/blob/main/code-snippets/nextjs-convert-to-md-blog/api.ts#L62).

### 3. Define Your Static Pages
Next, we can manually build a list of any other URLs we want to include:
```ts
// build-sitemap.ts
const staticPages = [{ slug: "" }, { slug: "resume" }, { slug: "blog" }];
```

Alternatively, if you can use a tool like globby to get all pages in specified folders using pattern matching
  - First install `globby` using npm or yarn
  - Then define the glob pattern to find your pages:
  ```ts
  ...
  const staticPages = await globby([
    'pages/*.tsx',
    '!pages/_*.tsx',
    '!pages/api',
    '!pages/404.tsx'
  ]);
  ...
  ```
  - This pattern will find all of your pages under the `pages` directory, except for those that have a `_` prefix, your `404` page, and you pages under the `api` route.

I personally don't use globby because I only have a few static pages that I want to include in my sitemap.

### 4. Generate XML Markup
Create a `generateSiteMap` function that will generate the XML markup for your sitemap. Provided an array of page entries, it will loop through the pages and build up a list of child `url` tags under the `urlset` tag.
```ts
// build-sitemap.ts
const ROOT_URL = "https://www.noahmatsell.ca";

interface PageEntry {
  slug: string;
  publishDate?: string;
}

function generateSiteMap(pages: PageEntry[]) {
  return `<?xml version="1.0" encoding="UTF-8"?>
   <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
     ${pages
       .map(
         ({ slug, publishDate }) => `
          <url>
              <loc>${`${ROOT_URL}/${slug}`}</loc>
              ${publishDate ? `<lastmod>${publishDate}</lastmod>` : ``}
          </url>`
       )
       .join("")}
   </urlset>
 `;
}
```

Now inside of the `generate` function, I can call this function with my previously defined page arrays:
```ts
// build-sitemap.ts
...
const sitemap = generateSiteMap([...staticPages, ...allPosts]);
...
```

### 5. Format and Write File
Finally, still in the `generate` function nwe can format this file content using prettier (this is optional), and write it to our filesystem:
```ts
// build-sitemap.ts
...
const prettierConfig = await prettier.resolveConfig("./.prettierrc.js");

const formatted = prettier.format(sitemap, {
    ...prettierConfig,
    parser: "html",
  });

writeFileSync("public/sitemap.xml", formatted);
...
```

And that's it. You have a script that will dynamically create your sitemap. It will be written to the `public` folder, and become a live resource when deployed.

### [Review full code here](https://github.com/noahub/a-devs-blog/blob/main/code-snippets/nextjs-dynamic-sitemap/build-sitemap.ts)

## Triggering Sitemap Build
Now that we have our script, we can run it manually any time from the terminal. My preferred method is using `ts-node` like:
```bash
npx ts-node ./lib/build-sitemap.ts
```

However to fully automate our sitemap generation, we can create a `postbuild` script in your project's `package.json` file:
```json
"scripts": {
  "dev": "next dev",
  "build": "next build",
  "postbuild": "npx ts-node ./lib/build-sitemap.ts",
  ...
```
The beauty of `postbuild` is that it will automatically run any time your site is built for deployment. This means that the latest changes to your site will be reflected automatically in your `sitemap.xml` file.

## Wrapping Up
Give this a try on your Next.js website. Once you've written and deployed this script successfully, you can check out your sitemap live at `yourdomain.com/sitemap.xml`. Ensure that Google always has the latest version of your site by adding this sitemap via the [Google Search Console](https://search.google.com/search-console/about).

How to set up a dynamic sitemap that is created and updated automatically at build time.

Create a Dynamic Sitemap for Your Next.js Blog

My collection of interesting, useful, and trending content for software developers. The Jan 2023 Part 1 edition.

Dev Roundup, Jan 2023 Pt 1


Custom OG images make social link sharing more engaging. If you're using Next.js, setting up dynamic OG images should be a quick and familiar process. It takes advantage of api routes and Vercel Edge Functions.

Here's the high-level setup:
- Install the `@vercel/og` package
- Create a component under the api route `/api/og.tsx`
- Return an `ImageResponse` from that route
- Use this new endpoint (`/api/og`) for your blog's `og:image` meta tags

For the full setup details go here: [**Full Guide**](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation)

The rest of this guide goes over how I used this setup to generate dynamic images with titles, metadata, and images from blog posts.
## Dynamic Content in Your Images
### Unique Post data
- The dynamic data highlighted below will change for each blog post, while everything else will remain static:
  [![dynamic og image data](/blog/og-image.png)](/blog/og-image.png)

- Blog posts are created as markdown files, and each file has frontmatter data that looks like this:
  ```md
  ---
  title: 'Build a Mailchimp Subscribe Form in Next.js'
  description: 'Create and embed a simple Mailchimp subscription form on your Next.js site to build your audience list.'
  author: 'Noah Matsell'
  coverImgUrl: '/blog/cover/mailchimp.png'
  publishDate: '2023-01-04'
  date: '2022-12-28'
  tags:
    - nextjs
    - mailchimp
  categories: 
    - tutorials
  ---
  ```
### `og.tsx` API Route Component
- Start with a [basic component setup seen here](https://vercel.com/docs/concepts/functions/edge-functions/og-image-examples#)
- Inside the component, get your URL parameter data and render them in a component passed to a new ImageResponse:
```tsx
...
try {
  const { searchParams } = new URL(req.url);

  const postTitle = searchParams.get("title");
  const publishDate = searchParams.get("publishDate");
  const readTime = searchParams.get("readTime");
  const coverImgUrl = searchParams.get("coverImgUrl");

  if (!postTitle || !publishDate || !readTime || !coverImgUrl) {
    throw new Error();
  }
  // Build component response below
  return new ImageResponse(
    (
      <div>
        <p>{postTitle}</p>
        <p>{publishDate}</p>
        <p>{readTime}</p>
        <img src={coverImgUrl} />
      </div>
    ),
    {
      width: 1200,
      height: 630,
      fonts: [],
    }
  )
...
```
- The above throws an error if any of the query parameters aren't defined. In these cases, we catch the error and return a generic fallback ImageResponse instead:
```tsx
...
} catch (e) {
  // Build fallback component response below
  return new ImageResponse(
    (<div><h1>Fallback Content</h1></div>),
    {
      width: 1200,
      height: 630,
      fonts: [],
    }
  )
...
```

[See my full, non-simplified `og.tsx` here.](https://github.com/noahub/a-devs-blog/blob/main/code-snippets/nextjs-dynamic-og-images/og.tsx)

Your dynamic image is now live! Take a look at either `localhost:3000/api/og` or in production at `yourdomain.com/api/og`. Add query parameters to these URLs to test out the dynamic values passed in.
### Update Your Meta Tags
  - The meta tags in my app are contained in an SEO component, which returns a `Head` component from the `next/head` package.
  - Here the `buildOgImageUrl` utility builds the OG image URL with a hostname (based on environment) and url parameters.
  ```tsx
  ...
  const buildOgImageUrl = ({
  title = "",
  publishDate = "",
  readTime = "",
  coverImgUrl = "",
  }: {
    title?: string;
    publishDate?: string;
    readTime?: string;
    coverImgUrl?: string;
  }) => {
    const hostname =
      process.env.NODE_ENV === "development"
        ? "http://localhost:3000"
        : "https://www.noahmatsell.ca";

    const params = `title=${encodeURIComponent(
      title
    )}&publishDate=${encodeURIComponent(
      publishDate
    )}&readTime=${encodeURIComponent(
      readTime
    )}&coverImgUrl=${encodeURIComponent(
      coverImgUrl
    )}`;

    return `${hostname}/api/og?${params}`;
  };
  ...
  ```
  - Finally, inside the SEO component build the full URL and pass it to the `og:image` meta tag
  ```tsx
  ...
  const ogImgUrl = buildOgImageUrl({
    title,
    publishDate,
    readTime,
    coverImgUrl,
  });

  return (
    <Head>
      <title>{`${title} // A Dev's Blog`}</title>
      <meta name="author" content={author} />
      <meta name="description" content={description} /> 
      {/* update og:image with dynamic URL */}
      <meta name="og:image" content={ogImgUrl} />
      <meta property="og:image:type" content={ogImageType} />
      <meta property="og:image:width" content={ogImageWidth} />
      <meta property="og:image:height" content={ogImageHeight} />
    </Head>
  );
  ...
  ```

[See my full SEO.tsx file here.](https://github.com/noahub/a-devs-blog/blob/main/code-snippets/nextjs-dynamic-og-images/SEO.tsx)

## Gotchas
If you're having issues or seeing errors, check that:
- Node 16+ is installed locally
- Next version > v12.2.3 is installed
- The correct runtime config is set in the `og.tsx` file
- Valid and supported CSS is used in `og.tsx`.
  - [Only a subset of CSS is currently supported](https://vercel.com/docs/concepts/functions/edge-functions/og-image-generation#supported-features)

## Wrapping Up
That's all you need to dynamically generate OG images for your site! Once set up, you can rest assured that your links will look good when shared socially.

How I integrated the @vercel/og package into my blog to automatically build a unique OG image for every post.

Generate OG Images Dynamically for Your Blog Posts


Utterances is a free and lightweight comments widget built on GitHub issues. Embed their script on your page(s) and a comments section will automatically render itself. A big selling point for me is that there are no backend requirements. Instead, all you need is a public Github repo.

When posting comments, users need to log in via Github. This can be a barrier for more general audiences, but makes a lot of sense for a tech and developer focused blog.

## Configuring Utterances
[Utterances website](https://utteranc.es/) provides a nice tool to build your script. Go to their site, choose a few configuration options, and copy the output script.

Some of the customizations I made: 
- **`issue-term`** — choose to map your comments section to an issue named by pathname, url, page title, and more.
- **`repo`** — the repo where the Github issues for your comments will be created.
- **`theme`** — choose from 9 different themes.


## Embedding Comments Section in Next.js
Normally with Next.js I would reach for the `next/script` package to embed a script. However I was seeing a caching/dismount bug where the script/comment rendered for the first time, and would incorrectly show for all subsequent pages and posts.

To correctly embed my comments section, I created a custom component that updates and/or removes a Comments section script on render/dismount. This component is embedded in my blog post template and applied to each individual blog post on my site:

```tsx
// CommentsSection.tsx

export const CommentsSection = () => (
  <section>
    <h3 className="text-xl font-bold flex">Comments</h3>
    <div
      ref={(element) => {
        if (!element) {
          return;
        }

        const scriptElement = document.createElement("script");
        scriptElement.setAttribute("src", "https://utteranc.es/client.js");
        scriptElement.setAttribute("repo", "noahub/a-devs-blog");
        scriptElement.setAttribute("issue-term", "pathname");
        scriptElement.setAttribute("theme", "boxy-light");
        scriptElement.setAttribute("crossorigin", "anonymous");
        scriptElement.setAttribute("async", "true");
        element.replaceChildren(scriptElement);
      }}
    />
  </section>
);
```

## End Result
The comments section defined above renders in the post template for all of my blog posts. Each post will map to its own Github issue based on the pathname.

Check it out in the comments section below!



Utterances has made adding a comments section to posts on my blog an easy and painless experience.

A Free & Lightweight Comments Section for Your Blog


Share env variables, api keys, secrets
Avoid sharing them over slack
Avoid security risks
Keep your vars up to date and fresh

`vercel env pull`

Running the command will create a .env file in the current directory, which can then be consumed by your framework's Development Command (like next dev).

https://vercel.com/docs/concepts/projects/environment-variables#development-environment-variables

## More advanced env Management

Vercel's `env`:

https://vercel.com/docs/cli/env

Simplified Environment Variables with Vercel


In this guide, I'l show you how to create a simple Mailchimp subscribe form component that will look something like this:

![A Mailchimp subscribe form](/blog/mailchimp-form.png "Mailchimp subscribe form")

Along with a [Next.js api route](https://nextjs.org/docs/api-routes/introduction), this form can be used to add subscribers to your Mailchimp audience lists. This solution will also allow you to customize success and error states.

Best of all, this component can be embedded and reused so you can collect email subscribers anywhere/everywhere throughout your app.

## 1. Get MailChimp Credentials
- Get the following credentials from Mailchimp account:
  - `API_KEY` can be found, or created, in your Mailchimp account [***Extras > API Keys***](admin.mailchimp.com/account/api/)
  - `AUDIENCE_ID` can be found from your Mailchimp audience dashboard under ***Manage Audience > Settings***, and then ***Audience Name & Defaults***. This is the audience to which all of your subscribers will be added!
  - `API_SERVER` is the specific "data center subdomain" that is used for your Mailchimp account. This can be found in a few places -- but if you have your API key from the step above, it is appeneded to the end of the key (looks like `us1`, `us18`, etc.). Other ways to find this [are listed in the docs](https://mailchimp.com/developer/marketing/docs/fundamentals/#api-structure).
- Create a `.env` file at the root of your project and create new environment variables:
  ```bash
  MAILCHIMP_API_KEY=<api-key-here>
  MAILCHIMP_API_SERVER=<api-server-here>
  MAILCHIMP_AUDIENCE_ID=<audience-id-here>
  ```

## 2. Set Up Your Form
- Create a form component `components/SubscribeForm.tsx`. This will contain the subscriber's first name and email fields, and/or any other fields you want to collect:
  ```tsx
  // SubscribeForm.tsx
  export const SubscribeForm = () => {
    return (
      <form
      onSubmit={subscribeUser}
      className="grid gap-3 grid-flow-row md:grid-flow-col md:w-fit"
      >
      <label
        className="inline-grid text-sm text-gray-600 leading-[2]"
        htmlFor="FNAME"
      >
        First Name
        <input
          className="bg-blue-50/60 px-2 border-b-2 p-1 border-gray-400 text-gray-900 text-xl rounded-none min-w-[240px] leading-10 focus:outline-none focus:border-blueAccent"
          id="FNAME"
          type="text"
          name="name"
          required
        />
      </label>

      <label
        className="inline-grid text-sm text-gray-600 leading-[2]"
        htmlFor="EMAIL"
      >
        Email
        <input
          className="bg-blue-50/60 px-2 border-b-2 p-1 border-gray-400 text-gray-900 text-xl rounded-none min-w-[240px] leading-10 focus:outline-none focus:border-blueAccent"
          id="EMAIL"
          type="email"
          name="email"
          required
        />
      </label>
      <Button
        variant="secondary"
        type="submit"
        className="md:leading-[0.95rem] mt-4 md:mt-0"
      >
        Subscribe
      </Button>
      </form>
    );
  }
  ```
- Add types based on the fields in your newly created form. **Important**: the `email` and `name` entries in the `FormElements` interface correspond with the input `name` attributes from the form above:
  ```ts
  // SubscribeForm.tsx
  interface FormElements extends HTMLFormControlsCollection {
    email: HTMLInputElement;
    name: HTMLInputElement;
  }

  interface SubscribeFormElement extends HTMLFormElement {
    readonly elements: FormElements;
  }
  ```
- Add a form submission handler. The `subscribeUser` function below gets the form field values and `POST`s them to the `/api/subscribe` route, which we will create in a moment:
  ```tsx
  // SubscribeForm.tsx
  ...
  export const SubscribeForm = () => {
    const subscribeUser = async (
      e: React.SyntheticEvent<SubscribeFormElement>
    ) => {
      e.preventDefault();

      const res = await fetch("/api/subscribe", {
        body: JSON.stringify({
          email: e.currentTarget.elements.email,
          name: e.currentTarget.elements.name
        }),
        headers: {
          "Content-Type": "application/json",
        },
        method: "POST",
      });

      if (res.status === 201) {
        // Custom behaviour on success (like a success message)
        console.log("success");
      } else {
        // Custom behaviour on error (like an error message)
        console.log("error");
      }
    };
  ...
  ```
  - Optionally, replace the success and error console logs with your own custom behaviour. This could include showing a message, a banner, a toast, and much more.
  - *Note:* The form takes advantage of native HTML form validation, so this function triggers only on valid submissions.

[[Full `SubscribeForm.tsx` code]](https://github.com/noahub/a-devs-blog/blob/main/code-snippets/nextjs-mailchimp-subscribe-form/SubscribeForm.tsx)

## 3. Set Up API Route
- Install the `@mailchimp/mailchimp_marketing` module via yarn or npm.
- Create a file `pages/api/subscribe.ts`
- Set up mailchimp client:
  ```ts
  // subscribe.ts
  import type { NextApiRequest, NextApiResponse } from "next";
  const client = require("@mailchimp/mailchimp_marketing");

  client.setConfig({
    apiKey: process.env.MAILCHIMP_API_KEY,
    server: process.env.MAILCHIMP_API_SERVER,
  });
  ...
  ```
- Create the handler for this api route:
  ```ts
  ...
  export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
  ) {
    const { email, name } = req.body;

    if (!email || !name) {
      return res.status(400).json({ error: "Email and name are required" });
    }

    try {
      const response = await client.lists.addListMember(
        process.env.MAILCHIMP_AUDIENCE_ID,
        {
          email_address: email,
          merge_fields: {
            FNAME: name,
          },
          status: "subscribed",
          tags: ["portfolio"],
        }
      );

      if (response.status >= 400) {
        return res.status(400).json({
          error: `There was an error subscribing to the newsletter.`,
        });
      }

      return res.status(201).json({ error: "" });
    } catch (error) {
      return res
        .status(500)
        .json({ error: (error as Error).message || (error as Error).toString() });
    }
  }
  ```
  - This handler will create a new audience member with the submitted first name (FNAME), email address. The handler also sets the member as "subscribed" status and tagged with "portfolio"

[[Full `subscribe.ts` code]](https://github.com/noahub/a-devs-blog/blob/main/code-snippets/nextjs-mailchimp-subscribe-form/subscribe.ts)

## More
You can capture more fields and merge fields as outlined by [Mailchimp's Marketing API](https://mailchimp.com/developer/marketing/api/list-members/add-member-to-list/) and [Merge Fields docs](https://mailchimp.com/developer/marketing/docs/merge-fields/#the-basics). If you do add/change fields, be sure to make the corresponding updates in both the `SubscribeForm.tsx` and `subscribe.ts` files.

## Last Thougts
You now have a small, lightweight subscribe form component that can be embedded anywhere in your app. Add it to your "about" page, at the end of your blog posts, on your personal portfolio page, in a banner.

Create and embed a simple Mailchimp subscription form on your Next.js site to build your audience list.

Build a Mailchimp Subscribe Form in Next.js

My collection of interesting, useful, and trending content for software developers. The Dec 2022 edition.

Dev Roundup, Dec 2022

A Markdown-based blog makes writing and publishing content a breeze.

Markdown is a powerful, lightweight markup language that allows you to write structured content using plain text. With Markdown, you can easily format your text and add rich formatting to your blog posts, without the need for complex HTML tags.

If you have a Next.js site and are looking for a better way to write and manage blog content online, Markdown is a tool that merits strong consideration.

Here are the 3 steps you can take to migrate an existing Next.js website to a site that includes a Markdown blog.

## The Migration Steps

### 1. Markdown posts setup
- Create `blog` directory at the root of your project.
  - This is where you will write and store your `md` blog posts.
- Create a sample post `blog/sample.md`
    - Here's an example `.md` file with some frontmatter metadata
    ```md
      ---
      title: 'Writing Effective Readmes'
      author: 'Noah Matsell'
      description: 'How to write an effective Readme for your project repository.'
      coverImgUrl: 'images/22-09-2021.jpg'
      date: '2021-09-22'
      categories: 
        - dev tips
      ---

      # Introduction

      Text content
    ```
- In your project `types` folder, create a `blog.ts` file for your post metadata types. These will represent the frontmatter metadata parsed by your app and are useful when handling blog post data within your React components.
```ts
  // types/blog.ts
  export interface Post {
    title: string;
    description: string;
    author: string;
    coverImgUrl: string;
    date: string;
    categories: Category[];
    content: string;
    slug?: string;
  }
```

### 2. API Setup
- Install [`gray-matter`](https://github.com/jonschlinkert/gray-matter) via npm or yarn.
      - This package is used to parse your `md` blog post metadata from a string or file.
- Create a `lib/api.ts` file to handle getting posts and their contents.
    - Create a `getPostSlugs` function. This generates an array of slugs from the `md` files contained within the new `blog` folder.
    ```ts
    // lib/api.ts
    const postsDirectory = join(process.cwd(), "blog");
    
    export function getPostSlugs() {
      return fs.readdirSync(postsDirectory);
    }
    ```
    - Create a `getPostBySlug` function. This builds up, parses, and returns post data for a given slug and set of fields.
    ```ts
    // lib/api.ts
    export function getPostBySlug(slug: string, fields: (keyof Post)[] = []) {
      const realSlug = slug.replace(/\.md$/, "");
      const fullPath = join(postsDirectory, `${realSlug}.md`);
      const fileContents = fs.readFileSync(fullPath, "utf8");
      const { data, content } = matter(fileContents);

      const postData: Partial<Post> = {};

      // Ensure only the minimal needed data is exposed
      fields.forEach((field) => {
        // set slug to real slug
        if (field === "slug") {
          postData[field] = realSlug;
        }
        // set content to parsed gray matter content
        if (field === "content") {
          postData[field] = content;
        }
        // set other properties 1:1 if they exist
        if (typeof data[field] !== "undefined") {
          postData[field] = data[field];
        }
        // add [draft] tag to unpublished posts in development
        if (
          process.env.NODE_ENV === "development" &&
          field === "title" &&
          data["title"] &&
          !data["publishDate"]
        ) {
          postData[field] = data[field] + " [draft]";
        }
      });

      return postData;
    }
    ```
    - Create a `getAllPosts` function. This gets all existing posts and their post data for a given set of fields.
    ```ts
    // lib/api.ts
    export function getAllPosts(fields: (keyof Post)[] = []) {
      const slugs = getPostSlugs();

      const posts = slugs
        .map((slug) => getPostBySlug(slug, fields))
        // Sort posts by date in descending order
        .sort((post1, post2) => {
          return (post1.publishDate || "0") > (post2.publishDate || "0") ? -1 : 1;
        });

      // Filter out unpublished posts in production
      if (process.env.NODE_ENV === "production") {
        return posts.filter((post) => post.publishDate);
      }
      return posts;
    }
    ```
    [[Full api.ts code]](https://github.com/noahub/a-devs-blog/blob/main/code-snippets/nextjs-convert-to-md-blog/api.ts)
- Create a `lib/markdownToHtml.ts` file. This is needed to translate the `md` content of a post to html content.
    - Install `remark` and `remark-html` via npm or yarn.
    ```ts
    // lib/markdownToHtml.ts
    import { remark } from "remark";
    import html from "remark-html";

    export default async function markdownToHtml(markdown: string) {
      const result = await remark()
        .use(html, { sanitize: false })
        .process(markdown);
      return result.toString();
    }
    ```

### 3. Component Setup
- Under your `pages` directory, create a `blog` directory.
- Create `pages/blog/[slug].tsx`, a [dynamic route](https://nextjs.org/docs/routing/dynamic-routes) that's responsible for taking your `md` blog posts and turning them into pages!
    - Make a `Post` component, which is a React component that renders the parsed content data of a given blog post.
    ```tsx
    // pages/blog/[slug].tsx
    ...
    interface Props {
      post: PostType;
      morePosts: PostType[];
    }

    export default function Post({ post }: Props) {
      // The component that renders your a blog post.
    }
    ...
    ```
    - The post component can be composed of `Layout`, `PostHeader`, `PostBody` and/or any other presentational components you like. `Post` component.
    - Render your parsed post comment anywhere inside of the `Post` component. Or, create a child `PostBody` component:
    ```tsx
      // components/PostBody.tsx
      ...
      import markdownStyles from "../styles/markdown-styles.module.css";
      const PostBody = ({ content }: Props) => {
        return (
          <div className="max-w-2xl mx-auto">
            <div
              className={markdownStyles["markdown"]}
              dangerouslySetInnerHTML={{ __html: content }}
            />
          </div>
        );
      };
      ...
    ```
- This is where your custom styling and CSS can be applied to the rendered post content. In the example above, I've created `markdown-styles.module.css` and applied it to the rendering `div` tag.

- Make a `getStaticProps` fn
    - Exporting a function called getStaticProps will pre-render a page at build time using the props returned from the function
    ```tsx
    // pages/blog/[slug].tsx
    ...
   export async function getStaticProps({ params }: Params) {
      const post = getPostBySlug(params.slug, [
        "title",
        "date",
        "slug",
        "author",
        "content",
      ]);

      const content = await markdownToHtml(post.content || "");

      return {
        props: {
          post: {
            ...post,
            content,
          },
        },
      };
    }
    ...
    ```
    - The props object is a key-value pair, where each value is received by the page component. It should be a serializable object so that any props passed, could be serialized with JSON.stringify.

    [![getStaticProps diagram](/blog/getStaticProps.svg)](/blog/getStaticProps.svg)


- Make a `getStaticPaths` fn
    - When exporting a function called getStaticPaths from a page that uses Dynamic Routes, Next.js will statically pre-render all the paths specified by getStaticPaths.
    ```tsx
    // pages/blog/[slug].tsx
    ...
    export async function getStaticPaths() {
      const posts = getAllPosts(["slug"]);

      return {
        paths: posts.map((post) => {
          return {
            params: {
              slug: post.slug,
            },
          };
        }),
        fallback: false,
      };
    }
    ...
    ```
    - The paths key determines which paths will be pre-rendered.
    - This is ultimately how we dynamically create all of the blog post pages at build time for the posts in our `blog/` directory.

[![getStaticPaths diagram](/blog/getStaticPaths.svg)](/blog/getStaticPaths.svg)

[[Full [slug].tsx code]](https://github.com/noahub/a-devs-blog/blob/main/code-snippets/nextjs-convert-to-md-blog/%5Bslug%5D.tsx)

## Wrapping up
With these steps in place, your Next.js website will now be able to render Markdown blog content, and you can easily manage and update your blog content using the Markdown syntax.

Your final project structure should look something like this:

```bash
.
├── blog
│   ├── sample.md
│   └── writing-effective-readmes.md
├── components
│   ├── HeroPost.tsx
│   ├── Layout.tsx
│   ├── MorePosts.tsx
│   ├── PostBody.tsx
│   ├── PostHeader.tsx
│   └── PostTitle.tsx
├── lib
│   ├── api.ts
│   └── markdownToHtml.ts
├── pages
│   ├── _app.tsx
│   ├── api
│   ├── blog
│   │   ├── [slug].tsx
│   │   └── index.tsx
│   └── index.tsx
├── styles
│   ├── blog.css
│   ├── globals.css
│   └── markdown-styles.module.css
├── next.config.js
├── package.json
├── postcss.config.js
├── public
├── tailwind.config.js
├── tsconfig.json
└── types
    └── blog.ts
```

## Next steps
Here are some ideas for extending the functionality of your markdown blog in cool ways:
- Add code highlighting via Prism
- Make a blog 'homepage'
- Add a dynamic table of contents
- Add a share button using the Web Share API

A step-by-step guide to adding a markdown blog to an existing Next.js site.

A Dev's Blog

Dev Roundup, Mar 2024self.__wrap_b(":R9jsm:",1)

Dev Roundup, April 2023self.__wrap_b(":R9gjcsm:",1)

Dev Roundup, Mar 2023 Part 1self.__wrap_b(":R9h3csm:",1)

Dev Roundup, Feb 2023 Part 2self.__wrap_b(":R9hjcsm:",1)

Dev Roundup, Feb 2023 Part 1self.__wrap_b(":R9i3csm:",1)

Dev Roundup, Jan 2023 Part 2self.__wrap_b(":R9ijcsm:",1)

Create a Dynamic Sitemap for Your Next.js Blogself.__wrap_b(":R9j3csm:",1)

Dev Roundup, Jan 2023 Pt 1self.__wrap_b(":R9jjcsm:",1)

Generate OG Images Dynamically for Your Blog Postsself.__wrap_b(":R9k3csm:",1)

A Free & Lightweight Comments Section for Your Blogself.__wrap_b(":R9kjcsm:",1)

Simplified Environment Variables with Vercelself.__wrap_b(":R9l3csm:",1)

Build a Mailchimp Subscribe Form in Next.jsself.__wrap_b(":R9ljcsm:",1)

Dev Roundup, Dec 2022self.__wrap_b(":R9m3csm:",1)

Convert a Next.js site to a markdown blogself.__wrap_b(":R9mjcsm:",1)