Content is read from github directly (we'll fallback to local though #36), so there's no reason to deploy the app if the only change made is in content. Thanks to help from @alexanderson1993, I made it pretty far before: 822a168

Should be pretty straightforward I think. From Ryan in discord:

  if (new URL(request.url).pathname === "/rss.xml") {
    return new Response(await rss(), {
      headers: {
        "Content-Type": "application/xml",
      },
    });
  }

A plugin that provides a composable API for giving elements a fixed aspect ratio. This will be useful on pages with multiple images, such as blog listings or galleries.

From their readme:

Usage

Combine the aspect-w-{n} and aspect-h-{n} classes to specify the aspect ratio for an element:

<div class="aspect-w-16 aspect-h-9">
  <iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Use aspect-none to remove any aspect ratio behavior:

<div class="aspect-w-16 aspect-h-9 lg:aspect-none">
  <!-- ... -->
</div>

https://github.com/tailwindlabs/tailwindcss-aspect-ratio

It would be great if folks could manage their subscription information themselves on the site.

Some blogs have edit on codesandbox buttons. I think it would be nice if they were positioned inside the code block, instead of on the paragraph below.

What do you think? Maybe in the top right corner?

We currently show all details on the /talks page. While it feels like it improves "scannability", it is a LOT of information to digest. I think we're better off moving details to a detail page. Click from /talks to /talks/event-x which then shows things like all tags, the presentations, and the recording.

That gives more space than we have now, and thereby would for example also make it possible to embed the youtube recording and/or slides, while the overview page would feel less crowded.

https://www.npmjs.com/package/nodemailer-mailgun-transport

This will allow mocking the HTTP request with MSW to make it much easier to test (manually and automated).

When submitting empty values to the form in the "Stay up to date" footer section, form validation shows proper validation messages for the missing fields but renders an incorrect message of "Sweet, check your email for confirmation."

The close button works fine, as long as the page was loaded with the button visible (on narrow screen). But when loading the page in "large screen", then resizing to "narrow screen", and then clicking the button, the transition is malformed.

It feels like a bug in framer-motion, as I can also not force the transform-origin on those svg elements.

I expect that this can be fixed by not rendering the button in a hidden state. Will try later.

#28 (comment)

The pre-commit hook tries to delete the Redis cache from the running instance, which resulted in an error at my system. The fix was to stop my dev environment and delete the cache before I git commit.

> [email protected] validate
> kcd-scripts validate

[build] /home/smeijer/dev/remix-kentcdodds/node_modules/rimraf/bin.js:46
[build]       throw er
[build]       ^
[build] 
[build] [Error: EACCES: permission denied, unlink './.cache/redis/dump.rdb'] {
[build]   errno: -13,
[build]   code: 'EACCES',
[build]   syscall: 'unlink',
[build]   path: './.cache/redis/dump.rdb'
[build] }
[build] npm run build --silent exited with code 1
--> Sending SIGTERM to other processes..
[typecheck] npm run typecheck --silent exited with code SIGTERM
husky > pre-commit hook failed (add --no-verify to bypass)

I'll see if it keeps occurring, or if it's a one-time thing. Just wanted to dump this somewhere.

For example:

Interacting with it at all will fix the problem. And once you've interacted with it, your selection is persisted in your session and you won't have the problem again. It only happens when you haven't specified a preference yet. I have some ideas of why this is happening actually...

Hi all,

sorry to chime in here, but I would recommend reducing the spacing on large resolutions. For illustration see the attached screenshots.

I think the /signup route should redirect to /me when visited while already onboarded.

On the profile page, users should get badges for things they've done in the site. Ideas:

• various levels based on the articles they've read (taking into account the category etc)
• badges for listening to chats with Kent episodes
• badge for connecting to discord

More stuff like this would be fun I think.

I don't have the numbers, but I remember reading something once that order of options influences our choice. Maybe we should randomize the order of the team buttons on /signup, to maximize the chance of having equality weighted teams.

There should be a specific API that can be hit to bust the redis cache for a specific key and it should only be possible with an "API secret" of sorts. This will be used in a github action when there's a content-only deploy (#37). We'll need to know what content is impacted by a particular change and refresh the cache for that particular key.

Perhaps the API could not only bust the cache, but also refresh it at the same time.

You know how in Pokemon Go when you start the game you get to choose between yellow, red, and blue teams? For a long time I've wanted to have the same thing on my site. Why? I think it'd be cool to show little indicators on the site that show how many people of a given team are currently on a certain page and how many have been on that page in total. You know... for fun.

Tracking the page views (and time spent on pages) could also help a lot with the suggested articles we plan to put at the bottom of each article as well as feature on the home page.

A simple implementation of this could be done with sessions or local storage. A more legit version of this could involve user accounts which I think is a much bigger idea, but would unlock other cool things I'd like to do...

I'd like a page where you can search through all my content everywhere. This has been discussed quite a bit: #107

The biggest challenge is creating a way to search through and index all that content. Not sure of the best way to go about it...

The tag filter is a bit buggy, because we split on space while some tags include spaces. Because of that, tags like open source cannot be deselected.

https://github.com/kentcdodds/remix-kentcdodds/blob/f1681e5a37456c8af173439ba94bbf13d008ba09/app/routes/blog/index.tsx#L119-L129

Should /chats redirect to the most recent reason? Currently /chats renders the same content as /chats/04.

Check https://kent.dev/blog/concerning-toolkits for an example of how it looks when an author is included.

Check https://kent.dev/blog/application-state-management-with-react for an example of how it looks when there are multiple.

I want to be able to take notes about content and have that available as part of my profile page.

We're doing this already with images. I think we should do it with fonts, the favicon, etc. It will free up the web server to focus on what it does well. I could probably use netlify. I'm pretty happy with them 👍

On all top navigation pages but Discord and About the layout shifts for me after a few seconds. Probably this is not the preferred behavior.

Random thought:

If we can set the team color as a css var like, we could use that in tailwind.config for team.current, and then do something like:

<input className="focus:ring-team-current" />

That way, the focus color of inputs, buttons, and links, could be based on the team color.

I made it so you can leave onboarding and come back later. However, that means people might forget which email address they used. So I just put it in the greeting on the sign up page:

Maybe we should go back to the original design of having an input field (but make it read only). I'm open to suggestions.

Another thing this means is that people may want to "log out" of the account they don't yet have set up (if they want to use a different email) so I think that means we'll need the logout button again. But I don't want to call it "logout." I think I'd want it to be called "Cancel setup" or something. Thoughts?

The images file doesn't do anything to use cloudinary's amazing optimization stuff. I think it'd be cool to be able to call a function for a particular image to specify the desired size/etc and have that function generate the cloudinary URL for that. Cloudinary has a module for this we might consider using.

If the github API request fails for some reason, we should fallback to the local MDX files. We should even cache that value (otherwise it'll still be really slow to compile on demand).

I want to be able to add content as a "favorite" and have a favorites list on my profile page.

When you get around to adding link preview image for sharing blog posts on social media, presumably using https://ogp.me/ like <meta property="og:image" content="..." /> (or using some Remix utility that would automate it), please consider showing a more compact preview that would take less vertical space than the current preview:

IMHO something like these GitHub links would look best:

Not sure how the black magic works exactly, some experimentation with https://ogp.me/#no_vertical might be needed. FTR, GitHub is using following for that particular page:

<meta name="twitter:image:src" content="https://avatars.githubusercontent.com/u/1500684?s=400&amp;v=4" />
<meta name="twitter:site" content="@github" />
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="kentcdodds/esbuild-node-modules" />
<meta name="twitter:description" content="Contribute to kentcdodds/esbuild-node-modules development by creating an account on GitHub." />

<meta property="og:image" content="https://avatars.githubusercontent.com/u/1500684?s=400&amp;v=4" />
<meta property="og:site_name" content="GitHub" />
<meta property="og:type" content="object" />
<meta property="og:title" content="kentcdodds/esbuild-node-modules" />
<meta property="og:url" content="https://github.com/kentcdodds/esbuild-node-modules" />
<meta property="og:description" content="Contribute to kentcdodds/esbuild-node-modules development by creating an account on GitHub." />

The huge cards are nice, but take a lot of space. It's worth exploring to only show its face when rendered on mobile. If those 3 faces would fit next to each other, they'd require a lot less scrolling.

Should we force the aspect ratio, or at least max-height of blog header images, so that the image of articles like http://localhost:3000/blog/super-simple-start-to-remix don't span more than my viewport height?

I guess that just has to be fixed, but just in the unusual case that no featured podcast can be fetched, we also might want to hide the heading, and not just the listing.

#19 (comment)

Gotta run, but wanted to make sure we don't forget to address this:

Regarding the candy dispenser, do a lot of posts have embedded jsx/html? We could adjust the prose classes to either do something with embedded html, or attempt to not target it entirely. But I feel like content like that should be positioned in an iframe, with its own styling.

Otherwise, we'll always have the chance of missing some (edge) cases.

The transparent png at /blog/unit-vs-integration-vs-e2e-tests can easily be fixed by adding a light background color to .prose img to simulate the effect of the current site (transparent on white), but not sure if that has your preference, because then you'll lose the benefit of transparent images.

Thoughts?

If there would be any.

This prettier plugin sorts classNames, helping to keep tailwind based projects organized.

From their readme:

Go from this:

<div class="z-50 z-10 container  text-left md:text-center justify-center">
	...
</div>

To this:

<div class="container justify-center text-left z-10 z-50 md:text-center">
	...
</div>

https://www.npmjs.com/package/prettier-plugin-tailwind

The footer columns look sub-optimal around 1024px window width (Firefox 92, MacOS):

Especially the padding for the email field looks odd - it still seems to be functional, so just a cosmetic issue.

Converted from a note, which stated the following:

If the user is logged in and already on the mailing list, we shouldn't show the newsletter subscription thing. Figure out what to render instead.

Do these things before changing this site from kent.dev to kentcdodds.com:

• Update the robots.txt to allow indexing.
• Remove the robots: 'noindex', from meta in root.tsx.
• Remove the 'X-Robots-Tag': 'none', header from entry.server.tsx
• Check that the meta on every page is correct.
• Update the domain we deploy to
• Setup custom domain with fathom: https://usefathom.com/docs/settings/custom-domains
• Pray 🙏

I think we should ignore the color scheme preference, and just default to dark mode. This site looks best in dark mode, and most people don't take the trouble of changing browser settings (which defaults to light mode).

If they really prefer light mode, it's just one click away, and persisted in a cookie any ways.

TLDR; Default to dark mode, regardless of browser settings.

When you click one of the hash tag links in the footer (Terms of use, Privacy Policy), the Transparency page is opened but instead of scrolling to the correct location the page is opened at the top.

If you navigate to https://kent.dev/transparency#terms in a new tab/window it works correctly.

Tested on Chrome Version 93.0.4577.82 and Firefox 91.0.2

Inspiration: https://gist.github.com/andrelandgraf/0112631dcdf6640e4bd44360d3e7a08e

I'm sure there will be people who want to be able to change their team. I plan to link them to this issue when they ask.

... am I talking about you? 😆

Here's the thing. The teams thing is mostly a just for fun thing. There's no benefit to being on one team or the other. If I allow folks to change their team, they'll take it too seriously. They'll prefer to be on a "winning" team or whatever. I even considered randomly assigning teams for this reason, but I thought it'd be fun to let people choose.

However, I realize that some folks might really want to change their team and I can make it happen. It just takes time out of my day. So here's the compromise: You do something good in the world, tweet about what you've done with the hashtag #KCDTeamsMakeTheWorldBetter, send me a link to that with your account email and the team color you want to be and I'll make the change for you.

Not sure what to do? Donate to a good cause. Pick up some garbage in your neighborhood. Visit an elderly person or someone in the hospital. Whatever. Just make the world better and I'll call it even.

Copy buttons need a full URL to be copied to the clipboard.

I can construct something using new URL(frontmatter.slug, location.origin).toString(), but this will not work server-side.

My proposal; add a BASE_URL env var, and use that to construct perma-links that will be part of the frontmatter.

Due to this, the navbar is still showing the profile image after logout.

https://github.com/kentcdodds/remix-kentcdodds/blob/d97b3fe8c607eae3942c82e252fe78d0efeaddf3/app/components/navbar.tsx#L239-L240