There are plenty of solutions next-sitemap et al that do it at build time but I thought this approach was cooler, if not overkill.

We just need to do 2 things first:

> npm i sitemap
> vercel secrets set HOSTNAME production

The HOSTNAME var is our FQDN that matches what we have set as our primary domain in Google Webmaster Tools, GA/GTM, et al. For non-production, to keep things clean, we can change the default value w/VERCEL_URL

The base config requires that we expose HOSTNAME, add a rewrite from /sitemap.xml to /api/sitemap.ts, and set some headers in vercel.json:

And then the function itself:

We can also combined different content types and set priorities per type, like so:

The typical stack I like to work in these days is Next.js with a custom express server, and in that server is an Apollo GraphQL layer so that I can make requests to the same server.

This means that the app is highly interlinked and the notion of microservices is out the door. Good riddance, anyway — they rack up costs.

The baseline server is something like so -

With the Apollo server looking something like this:

Where types, contexts, etc are defined elsewhere as a normal GraphQL setup goes. Don’t need to cover that here. So our…

I was curious about how to do react-like things myself without relying on innerHTML or, frankly, any dependencies. It ended up quite easy.

First, fragments via document.createDocumentFragment() are pretty magical. They exist in memory and you can construct them as usual, basically creating a micro virtual dom.

Their purpose is to let you build out a substantial amount of changes to a future DOM before actually rendering. This helps you control repaint count, for ex:

That’s 15k repaints reduced to 1.

With this, there should never be any use case for the expensive innerHTML. However, there are times when…

If you use props to dictate styles in S-C, then I’m sure you’ve noticed that it creates duplicate styles blocks for each iteration.

This is ugly. We can fix this in most cases using the attr method. It will let us add inline styles so that S-C does not generate a completely new, essentially useless, block.

So we go from:


Note: the reason I don’t do uppercase && ‘uppercase’ here is that false is not the same as undefined.

This will add the inline styles as necessary, and remove the pollution that bad.js would otherwise cause.

Another cool…

I don’t see this being used often enough. Maybe there’s a good reason for it, but I’ve yet to find one.

You can go as deep as you need to, but at a certain point it makes sense to keep the contextual object intact.

const { fields: { testimonial: { name, copy } } }
return `${name}, ${copy}`

Would work just fine. This is especially useful for redux connect:

export default connect(({ 
data: { pages }
}) => ({ pathname, pages })(Component)

It’s not hard. Other tutorials make it sound all complex but don’t even boil it down for you. I’ll skip the ‘how’ — all that matters is how to think about it. The rest comes easy.

Even just looking at the CSS it may be obvious, but here’s the gestalt:

  • The border itself should be the size of the arrow that you want — 15px
  • The side that you want the arrow on will use the opposite border.
    ex: left arrow will use border-right-color
  • If you want the border to be centered, then you must offset it by its own size.

All borders naturally concave into each other:

You’re just hiding the ones that you don’t require.

I’ve done this a lot on various projects over the years — it’s a fairly simple process, and it can be very rewarding when used in the right places.

Ideally you would do this after you add a loaded class to the body tag, but you don’t have to — animations can easily be run once to act as a ‘loading in’ effect.

This effect can be very engaging on lightbox content as well.

Talasan Nicholson

Full stack web engineer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store