404

Hitting kentcdodds.com gives me a 404.

Url not found

• Page would pull in content from various platforms you have courses/material
• Content would be grouped/categorized
• Content could be searched/filtered/sorted

Ideally, the content pulled in would be able to have a preview/snippet to make a more visually appealing display

Possible Resources:

Gatsby Source YouTube
Gatsby Source Custom API

I was wondering if you're willing to extract the remark-embedder plugin into it's own package, so this could be used in other projects without just copy-pasting the files?

@allcontributors[bot] please add @markerikson for content

See the blog post: React/JSX as a server-side templating language
Markdown file on Github
Blog post on Netlify
Blog post on Medium

It looks like the importer is inserting extra > characters.

> _Another note:_ >
> [_I've been teasing_](https://twitter.com/kentcdodds/status/1041712678970875904) >
> _about something big that I have coming. I'm totally not joking. I'm working
> on something really huge and y'all will be the first to know about it. Stay
> tuned. It's weeks away and I think you're going to love it._

It's not an issue, but I'd like to know how you use the fragment from here

To ue here:

https://github.com/kentcdodds/kentcdodds.com/blob/b5249808fca44281a3596310f2595a97cb0805d5/src/pages/index.js#L311-L317

It's puzzling me how you get the fragments to 'load' and then use them in the index page, tell me @kentcdodds can you use the childImageSharp { ... } in the GraphiQL Gatsby explorer?

404

404

📝 Post: 'When to use Control Props or State Reducers'
📁 File: blog/control-props-vs-state-reducers/index.md
🐛 Line: #96

📽️ Preview:

💻 Code:

![gif of the rendered component showing an input and toggle that sync their state](./images/toggle1.gif)

👇

@all-contributors please add @j-f1 for content

Here's the code that used to be there: kentcdodds/kentcdodds.com@de5dd06

Waiting on (or need to contribute a fix to) this: ChristopherBiscardi/gatsby-mdx#295

404

404

404

This blog post is about mediums multiple claps feature.... As you are moving from Medium, not sure if you need this one, but totally your choice.

Hey @kentcdodds!

I miss highlighting text in your detailed blogposts on medium. So I thought it'd be cool to be able to highlight text in the blogposts, and show a popper, containing, for example, twitter share icon, which will automatically pick selected text and open twitter box, pre filled with template text.

Using a useTextSelection hook, which would return text and position of the text, which can be consumed for example by react-popper, wired with mousedown, mouseup, shift + keydown and shift + keyup events.

Would you like something like that? I've just started something like that over here (https://codesandbox.io/s/usetextselection-react-hook-wip-g0ksf
), thinking you might.

Reference — https://codepen.io/FezVrasta/pen/YEVrGP

Joel Hooks did this:

joelhooks/joelhooks-com@f2dd4e3

joelhooks/joelhooks-com@da4eafa

joelhooks/joelhooks-com@ded6a25

There's also: https://twitter.com/jlengstorf/status/1100158852073279488

Gotta figure out what works best for me and make it happen.

I've noticed that you have some broken links that point to your post on Medium which doesn't exist anymore.
For example in Application State Management post:

that points to https://medium.com/dailyjs/reacts-%EF%B8%8F-new-context-api-70c9fe01596b.
Do you want me to PR with fixed links (4 more places)?

Using this to add a few people who have contributed to this site.

🐛 What?

<figcaption /> texts are not styled

➕ Additional Context

I didn't create a PR for this as I did for the PR #64 because this would require code transformation change.

📖 Articles

• Source: https://medium.com/@kentcdodds/rendering-a-function-with-react-ca3eaf0751e2
• Destination: https://kentcdodds.com/blog/rendering-a-function-with-react

Problem:

Sometimes when this blog post loads, the link points to https://firstpr.me/#kentcdodds

Other times when it loads, it points to https://egghead.io/courses/how-to-write-an-open-source-javascript-library.

Guessing this is unintended behavior?

I was going to submit a PR to fix it but in the actual index.md file, you have the correct link so I'm not sure what's going on 🤷🏼‍♂️

Context

I opened the post in Firefox Developer Edition from your newsletter. Same thing happens in Chrome: http://recordit.co/EkrbLUOs6x

🐛 What?

Following article is missing two CodeSandbox sandboxes.

You can see that the HTML is missing the Sandbox code.

How to reproduce the error

Compare the source article with the destination articles.
The destination article is missing two Sandboxes present in the source article.

🔗 Article Links

• Source article: https://medium.com/dailyjs/reacts-%EF%B8%8F-new-context-api-70c9fe01596b
• Destination article: https://kentcdodds.com/blog/reacts-new-context-api

404

Hello Sir, I am learning with you, and found your blog is enhanced fork of eggheadio starter. I'm so inspired by this. As I'm learning, I want to write some articles with the forked version & deploy it over netlify. I tried to deploy with the minimal version(removing many unwanted things) as well as with original source code.

Unfortunately, I never able to succeed with deployment over netlify, no matter how many times I refactored it and tried again. Might, I'm missing something either some important stuff or may be some credentials in .env or .netlify file, or something else.

Can you please help me to make lite version of blog, lite not as eggheadio starter but as enriched as your blog with less dependencies, so everyone from us can deploy their blog easily.

Nice one on the article. Here, it did seem like there were 2 public effect hooks and 1 mystery hook.

References to that:

• All three of these
• some are more optimal than others
• and use the other two hooks
• the difference between the other two

I wanted to edit and send in a PR, but I can't write like you 😅

The other pages, like talks, have no issue with this

• https://kentcdodds.com/blog/
• https://kentcdodds.com/talks/

Note that the first result in the google for your blog, uses trailing slash

So people can find the kind of stuff they want to find better

404

404

So people can find what they want to find better.

When converting all of @CompuIves' Medium posts over to @codesandbox' blog, I copy-pasted the remark-embedder. (see codesandbox/codesandbox-client#2011)

When looking at all the pages I came across a bug with the Twitter embed when the username contains 2 underscores (_).

When I try to embed the following Tweet, I just see the link with an italic d instead of the Tweet card itself:

https://twitter.com/brian_d_vaughn/status/901488766581227520

An example can be seen at https://pr2011.build.csb.dev/post/creating-a-parallel-offline-extensible-browser-based-bundler-for-codesandbox

By the way site looks grt 👍

But one thing I noticed while loading was @kentcdodds your avatar image in home page takes time to load although you have the service worker to cache the subsequent request. But initial load is could be little faster if we optimize the kent.png image in hero folder.

Attaching an optimized version of it.

Its 127KB. Original was around 500KB

When navigating to https://kentcdodds.com/blog/ (note trailing slash) an error is thrown by the browser telling the user that This site can’t be reached. If you remove the trailing slash, you are directed to the blog as expected.

This was brought to my attention via Google by clicking on the link in the screenshot:

Once at the blog it is great 🎉 Thanks for the awesome content Kent!

This component recieves date as 'yyyy-mm-dd' and uses that mm in the Date constructor where it should be a monthIndex (from 0 to 11).

function FutureTime({date: dateString}) {
  const date = new Date(...dateString.split('-'))
  const isFuture = date > new Date()
  return (
    <span>
      <time>{dateString}</time>
      <small css={{opacity: '0.8'}}>{isFuture ? ' future ⚡️' : null}</small>
    </span>
  )
}

This results in having 1 month difference between the real talk/workshop date and the one that is used to compare if it is future or not.

404

Hey Kent,

first of all a huge Thank You for opening up this blog and giving us opportunity to learn and reuse!

I see a warning in your code that I can't quite put my fingers on. When running yarn dev and edit a page so it gets updated in the browser, I see this error:

info changed file at /d/entw/www/kentcdodds.com/content/blog/react-strict-mode/index.md
ℹ ｢wdm｣: Compiling...
warning Action createPage was called outside of its expected asynchronous lifecycle createPages in default-site-plugin.
Ensure that you return a Promise from createPages and are awaiting any asynchronous method invocations (like graphql or http requests).
For more info and debugging tips: see https://gatsby.app/sync-actions

File /d/entw/www/kentcdodds.com/gatsby-node.js:25:5
  23 |     }
  24 |
> 25 |     createPage({
     |     ^
  26 |       path: pagePath,
  27 |       component: path.resolve(`./src/templates/post.js`),
  28 |       context: {

As far as I can tell the function is called in an async context, I'm not sure what's missing. The update works fine, it's just that message that appears.
Is this just a weird combination of HMR and gatsby compiler interfering?

Thanks again,
Torsten.

404

The code blocks have a max width and don't wrap. Something is missing like white-space: pre-wrap; or code samples with lines already wrapped down to the mobile breakpoint. Not sure of the solution, just wanted to mention that readability issue. (especially for those without easy horizontal scrolling device like myself today)

Other than that, thanks for the great content, I'm always happy to read your new stuff 👍

url not found

NOT FOUND
You just hit a route that doesn't exist... the sadness.

Figure out how to make sure there are spaces for markdown formatted like this:

[this is a link](https://google.com/a-very-long-link-that-takes-an-entire-line-by-itself)
[this is another link](https://google.com/which-is-also-a-very-long-link-that-takes-an-entire-line-by-itself)

This will be rendered as:

<a href="https://google.com/a-very-long-link-that-takes-an-entire-line-by-itself">this is a link</a><a href="https://google.com/which-is-also-a-very-long-link-that-takes-an-entire-line-by-itself">this is another link</a>

The solution is to add a space to the end of the first line or place them on the same line with a space between them, but prettier formats it the way it is above.

So I think this is an issue with how mdx converts those. I'm not sure how to solve this problem...

There's a little oddity in your reset.js that renders list bullets in markdown documents above the list item if the text takes the full width:

Not sure if you want it that way, if not I solved it by changing the list-style-position in reset.js:

  ul, ol {
    list-style-position: outside;
    margin-left: 1em;
    font-size: ${typography.baseFontSize};
  }

Which renders:

I see you are "rolling your own" blogging framework with simple react views and routes. Having you looked at gatsby, Metalsmith or Hexo? The setup is pretty extensive and not as expressive as what you are able to do with rolling your own, do you have any thoughts on how to fix this? I was talking to @vonbearshark about how if Jekyll was simply translated one to one to JS it would fit 99.9% of use cases.

Hey Kent!

Congrats for the new website look, it looks cool 👌

Problem (s)

1. The current RSS feeds at rss.xml, doesn't include the actual blog post content (see below).
2. There are double / in all guids right after the base domain which (while works fine) could cause a tiny problem for RSS readers when you later (eventually ) fix it. So, I suggest to fix it now ;)
3. PLEASE, set CORS to Access-Control-Allow-Origin: * for the feed URL so that client-side RSS reader users (like me) could access your posts.

Current behavior

<?xml version="1.0" encoding="UTF-8"?>
<rss
  xmlns:dc="http://purl.org/dc/elements/1.1/"
  xmlns:content="http://purl.org/rss/1.0/modules/content/"
  xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
  <channel>
    <title>
      <![CDATA[Kent C. Dodds]]>
    </title>
    <description>
      <![CDATA[Come check out how Kent C. Dodds can help you level up your career as a software engineer.]]>
    </description>
    <link>https://kentcdodds.com</link>
    <generator>RSS for Node</generator>
    <lastBuildDate>Sun, 10 Feb 2019 15:55:45 GMT</lastBuildDate>
    <item>
      <title>
        <![CDATA[Testing Implementation Details]]>
      </title>
      <description>
        <![CDATA[Last year when I was using enzyme (like everyone else at the time), I stepped
carefully around certain APIs in enzyme. I
 completely avoided shallow rendering ,
 never  used APIs like  instance() ,  state() , or  find('ComponentName') . And
in code…]]>
      </description>
      <link>https://kentcdodds.com//blog/testing-implementation-details</link>
      <guid isPermaLink="false">https://kentcdodds.com//blog/testing-implementation-details</guid>
      <pubDate>Mon, 19 Nov 2018 00:00:00 GMT</pubDate>
    </item>
    <item>
      <title>
        <![CDATA[How to React]]>
      </title>
      <description>
        <![CDATA[This last week I gave
 a talk at called "How to React." 
It's basically an updated version of
 Pete Hunt's 
 react-howto  GitHub repo. I thought
I'd just jot down a few things from this talk for you to enjoy in your inbox
today :) Abstraction Let's…]]>
      </description>
      <link>https://kentcdodds.com//blog/how-to-react</link>
      <guid isPermaLink="false">https://kentcdodds.com//blog/how-to-react</guid>
      <pubDate>Mon, 16 Apr 2018 00:00:00 GMT</pubDate>
    </item>
  </channel>
</rss>

Expected behavior

I'd expect the RSS feed to include something like <content:encoded/> tag (since the necessary namespace is already declared ) that includes an encoded representation of the full post content. See Dan's blog for example.

Continue being awesome :)

The problem arises when there is a scrollbar present. More here

However, you will notice that when a highlighted line runs wider than the surrounding code block container (causing a horizontal scrollbar), its background won’t be drawn for the initially hidden, overflowing part. :(

This website isn't using gatsby-remark-prismjs but the problem is similar

404

Hey Kent,

I'm also starting a blog, and was wondering what's the pros/cons of adding comments?
Seeing you've decided not to add them (and @gaearon as well on overreacted.io).
Is a Twitter thread really a better experience vs. in site comments or Disqus?

Asking here in case other people would be interested in this as well.
Thanks!

Related:
gaearon/overreacted.io#7

@all-contributors, please add @aganglada for bugs

https://twitter.com/aganglada/status/1132303948608675840

404