Summary

The ability to embed tweets inside posts/content.

Basic example

Motivation

Small enhancement to the reader's experience 😄

Summary

https://www.netlify.com/blog/2020/04/23/enable-gatsby-incremental-builds-on-netlify/?utm_source=twitter&utm_medium=gatsby-inc-builds-jl&utm_campaign=devex

Basic example

If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.

Motivation

Why are we doing this? What use cases does it support? What is the expected outcome?

Summary

I want to add some validation to categories (when I add them)

Basic example

Kyle proposed customizing my schema

• https://www.gatsbyjs.org/docs/schema-customization/#nested-types
• https://github.com/gatsbyjs/gatsby/blob/master/www/src/data/tags-docs.js

Tweet thread

• https://twitter.com/gill_kyle/status/1254976853518868480?s=20
• https://twitter.com/gill_kyle/status/1254977854145585152?s=20

Motivation

• ensure that I only use tags which have icons/images (when I add them)
• avoid mistyping a tag (javascrpt vs javascript)

When I implement this, add @gillkyle to the contributor's table

Describe the bug
You can't sign up for the newsletter.

To Reproduce
Steps to reproduce the behavior:

1. Go to site
2. Add email to form
3. Click subscribe
4. Open console
5. See "Invalid Token" error

Expected behavior
A clear and concise description of what you expected to happen.

Screenshots
If applicable, add screenshots to help explain your problem.

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Pointed out by @petercr

Summary

Use custom code syntax theme.

Basic example

I'd love to use my current VSCode theme: Noctis Minimus

Motivation

Adds an extra layer of personality to my blog and matches what I use :)

Summary

Add a new page /uses

Basic example

• new page in /pages
• new folder in /content/pages and then transform Markdown to pages at build time

Motivation

Show what I use and get featured on Wes Bos' uses website

Summary

Add console.log to hygen template so that when you create a new post, it logs a url (maybe even opens it up in the browser) to show that it's ready!

Basic example

Your draft has been started! View at http://localhost:8000/<slug>

Motivation

It'll save a bit of time.

🙅‍♂️manually copying is bad
👍 automating the little bits are good

Summary

Similar to notes, but like this

Basic example

If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.

Motivation

Why are we doing this? What use cases does it support? What is the expected outcome?

Summary

I don't know what this would look like, but I would love to draw inspiration from them and figure out a template/standard/component for adding tests to my blog posts. It could be a lot of fun!

I don't know if Gatsby Recipes would play into this at all but worth investigating as well.

Essentially, make it easy to include challenges in blog posts.

Basic example

A blog post that explains how to do something:

• teach me about a thing (JavaScript arrays)
• practice in this challenge
• test your code to make sure it works!

Motivation

I want to engage with people who come to my blog. Instead of just reading, read learn and then do something!

Summary

Before this blog, I had written a decent amount of posts elsewhere. It would be great to link those here.

Articles

• https://learntocodewith.me/posts/make-money-coding/
• fCC articles
• Twilio articles
• SitePoint articles
• https://www.contentful.com/blog/2019/03/13/implementing-graphql-rest-api/
• dev.to articles

Basic example

I imagine it looking like my "All Articles" page with a search, a "card" for each post along with an excerpt or summary.

Motivation

It would be a good way to keep everything on one site.

Summary

When you hover off the sun or the moon, they don't stay in place and it looks a bit janky. It would look smoother if we continued the animation on hover off.

Basic example

Here's the issue:

Ideally, it would stay in place, or continue on hover off.

Motivation

Small improvements lead to large gains over time :)

Resources

Different Transitions for Hover On / Hover Off

Summary

Brian Lovin wrote about this idea of "Incrementally Correct Personal Websites". I'm thinking about embracing it by adding some piece of information that says "Updated on" to posts.

Basic example

At the top of the post, or bottom of post "Updated on March 22, 2020"

Motivation

Shows that the posts are living and can/could be updated. Also shows my commitment to keeping things accurate and correct.

Describe the bug
The site doesn't work in Russia.

To Reproduce
Steps to reproduce the behavior:

1. Use a VPN or something to make it look like I'm in Russia??
2. Visit joeprevite.com

Expected behavior
The site should work in Russia.

Screenshots

Additional context
Found by @talentlessguy

Summary

Migrate entire codebase to TypeScript

Basic example

N/A

Motivation

• type safety
• catch errors before they happen at runtime
• good practice
• better documentation/autocomplete
• fun 😄

Summary

Dependabot is getting greedy and stealing all my build minutes. So I'd like to disable Netlify builds for dependabot branches

Basic example

1. add netlify.toml file
2. use the ignore block with a unix shell command to ignore those branches

Would probably need to add additional GH Action to build and test project though to make sure things still build.

Motivation

Why are we doing this? What use cases does it support? What is the expected outcome?
Build minutes are scarce and we shouldn't be burning through them so quickly!

Summary

I'd like to add additional types of blocks for my posts. Similar to how Tania uses them in her posts here.

Basic example

Motivation

Improve the quality and helpfulness of each article. If I can add different types of information to my posts, they will be more helpful and more enjoyable to read.

Summary

It would be cool to share some stats related to my newsletter, like number of subscribers, average open rate, average clicks, average number of emails sent per month.

Basic example

If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.

Motivation

Practicing transparency. Aligns with the idea of open source. Good for the community, fun to share :)

Summary

Maggie Appleton shared a bunch of great ideas here.

Basic example

If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.

Motivation

Why are we doing this? What use cases does it support? What is the expected outcome?

Summary

Add webmentions to blog

Basic example

Follow @dance2die's blog post

Motivation

I want to show the connection between the post someone is reading, and when someone mentioned it on the web (i.e. Twitter). I think it could benefit:

1. the reader to show what people said about the post
2. the author (me) to easily see a list of mentions for the post

Summary

Make the JP fade in on load.
Make it spin on hover.

Basic example

Like this

Motivation

Add some flava flav to the site 🕺

Summary

Similar to how others with Gatsby blogs (like Tania Rascia), the idea is to have a quick link to edit each post on GitHub. Ideally, it would have a "last updated" with a timestamp as well (maybe using latest commit to file?)

Basic example

See screenshot from blog

Motivation

The reason for doing this is to allow readers or myself a way to easily fix typos or suggest edits.

Summary

https://twitter.com/jsjoeio/status/1258115302199406592?s=21

Basic example

Add exacalidraw link to markdown

at build time, turns into svg

Motivation

Why are we doing this? What use cases does it support? What is the expected outcome?

Summary

Brief explanation of the feature.

Make it like prince’s

https://prince.dev/blog/callout

Basic example

If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.

Motivation

Why are we doing this? What use cases does it support? What is the expected outcome?

https://twitter.com/anthilemoon/status/1261291598178127872?s=21

I want to explore this more

Summary

Each heading in a post should be "linkable" meaning a reader can click on it and it will jump there and append it to the URL.

Basic example

Motivation

It allows readers to be able to share links that jump to specific sections.

Summary

Change all emojis to hand-drawn SVGs

Basic example

Motivation

Adds a bit more personality to the site

Summary

It would be nice to be able to filter posts on the /articles page.

Basic example

If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.

Motivation

I've written about various topics so it would be nice to filter by those (i.e. TypeScript, Rust, etc.)

It's fixed now! Just need to upgrade

excalidraw/gatsby-embedder-excalidraw#22

hi joe, i was following your post on making a twitter card for your blog. https://joeprevite.com/create-a-twitter-card-for-your-blog.
At the end your said to add meta tag as :
I am a bit confused as to where exactly or in which file do i need to put this. I tried searching in your commit history, but couldn't find!

In the 6th step in the post, I don't say where to put this or where it lives.

master was hard-coded in the "Edit on GitHub" logic which causes it to break. This can be fixed by updating it to main.

Summary

Add a new GH action that runs yarn install and yarn build and remove the current Lighouse GH action

Basic example

Use the GH action Node.js template. But use yarn install of npm

Motivation

The Lighthouse action has a step called "wait for netlify preview" that consistently fails :( So I think it makes more sense to simplify the process.

Summary

@maxcell wrote an excellent post about adding line highlighting. I'd like to try and let them know how well it went!

Basic example

See blog post.

Motivation

Allow me to highlight key pieces in code snippets, without having to make them diffs

Summary

Brief explanation of the feature.

http://proselint.com/checks/

Basic example

If the proposal involves a new or changed API, include a basic code example. Omit this section if it's not applicable.

Motivation

Why are we doing this? What use cases does it support? What is the expected outcome?

Describe the bug
Currently, when you open a PR, the CI fails on the first run. This is because the GH action runs before the Netlify deploy is ready.

To Reproduce
Steps to reproduce the behavior:

1. Open a PR
2. Watch the GitHub Checks/CI run
3. See error

Expected behavior
The CI should run after the deploy preview is ready.

Screenshots
N/A

Additional context
N/A

It's almost done. Just need to add it in and add to ConvertKit for people to receive.

Summary

Better Twitter Cards for SEO

Basic example

Here's what it looks like now:

Here's what I want it to look like:

Motivation

Because I expect people to share them and look good. And if not, I want them to look good when I share them.

Resources

Twitter's card validator
swyx: "Your Site's Calling Card"

Summary

I've used GA in the past but trying to move away from it (and it's also not reliable thanks to the ad blockers). I don't want to pay for something (I say that now...). I'm wondering, how difficult can it be to build my own analytics?

Really, all I want to know is:

• website traffic (page visits)
• visits to each blog post

Basic example

A page on my website /site or /analytics that displayed a table with:

• the page/blog post name
• the number of views

Motivation

It's good to have a metric of some sort 😄

Add @maxcell's post to the learning quickly post

https://prince.dev/rust-map

Summary

set up an RSS feed for posts

Basic example

a simple RSS feed

Motivation

@chriscoyier might read my blog if it has an RSS feed.

Summary

Could be overkill, (honestly probably...) but would be cool to add Storybook and show the different components available for MDX.

Basic example

• run on localhost, shows components
• stretch: deployed to storybook.joeprevite.com lol

Motivation

We don't really need it...just a random idea

Summary

I want to be able to test myself and readers at the end of blog posts.

Basic example

I imagine the API looking like this:

<Quiz title="JavaScript Arrays">
  <Question 
        title="Arrays are immutable." 
        type="TF"  // truefalse
        answer="F" 
  >
     <Hint>
       Read about `Array` on [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
     </Hint>
  </Question>
  <Question 
        title="What is the name of the method for filtering an array?" 
        type="MC" // multiplechoice
        options={[".map()", ".pop()", ".push()", ".filter()"]}
        answer={4} // meaning the fourth option
  />
</Quiz>

Motivation

It would be a great way to test my readers and myself!

It's really hard to tell which filters are active on the /articles page when using the site in dark mode

The idea behind this issue is to stop opening new issues every time something cool comes up 😂

Instead, I'll post them here as comments. Then if I decide to go with one, I'll turn it into a proper issue.

Describe the bug
Name is not appearing with light mode (due to font color)

To Reproduce
Steps to reproduce the behavior:

1. Go to site
2. Switch to dark mode
3. See name
4. Switch to light mode
5. See name disappear

Expected behavior
You should be able to see the name "Joe Previte" on both light and dark mode

Screenshots

Desktop (please complete the following information):

• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context
Add any other context about the problem here.

Found by @Darth-Knoppix

Feedback from @tatianamac

Oh! and also, I might offer mindfulness around tracking percentage; there is no 100%. You may plan to address that, but something to note in an industry full of metric-obsessed folks. :)

Call it out with a <Note /> in the post!

Summary

I like what Max does with his notes. I know Chris does something similar.

Basic example

Create a section for notes

Motivation

Ability to put things out more quickly. Don't know if it will work that easy but could be worth trying.

Summary

When creating a new post with yarn g:post, it should automatically start the dev server (yarn dev) if not running and open the new Markdown file in VSCode.

Basic example

if (noDevServer) {
  exec(`yarn dev`)
}

code.open(newfile)

Motivation

Because we want to automate the little things and save some time :)

This has come up multiple times. I need to have a short link or something with a recording on how to pronounce.

Recognize everyone who played a part in making this come to life.

I can't remember who said it (someone in the Twitter DMs). But there's some issues with the header color and dark mode. Look into this!