Contact Josh

I write all of my blog posts in MDX(opens in new tab), a technology that allows me to include bespoke React components within a Markdown document.

Essentially it allows me to do stuff like this:

---
title: 'My Blog Post'
---

**This is an MDX document.** It looks just
like _Markdown_, but it can include custom
React components:

<FlexboxDemo
  initialJustifyContent="center"
/>

The wonderful thing about MDX is that it gives us all of the power and flexibility we have when building any other React application. At the same time, it can still be parsed as Markdown, so we can use it as a data format (eg. to display a list of posts, or implement custom search functionality).

That said, MDX adds a significant amount of complexity compared to regular Markdown. It would be overkill if you wanted to build a typical blog.

There are lots of different ways to use MDX. I use next-mdx-remote(opens in new tab), because it aligns most closely with my mental model for how everything should work.

This blog is built using Next.js 14(opens in new tab) using the App Router(opens in new tab). Here are some of the other core pieces:

• I use MDX(opens in new tab) for the articles themselves.
• For CSS, I use linaria(opens in new tab), with the next-with-linaria bindings(opens in new tab).
• For static code snippets, I use shiki(opens in new tab).
• For the interactive playgrounds, I use agneym/playground(opens in new tab) for basic HTML/CSS examples and Sandpack(opens in new tab) when I need multiple files and/or a JS framework.
• I use TypeScript(opens in new tab) in all new content, though some older interactive widgets still use JavaScript.
• I store data (likes / hits) in MongoDB(opens in new tab), accessed from within Next.js Route Handlers and Server Actions.
• For animations, I use React Spring(opens in new tab) and Framer Motion(opens in new tab).
• For icons, I use Lucide(opens in new tab), along with icons I created from scratch.
• For sound effects, I use my own use-sound package(opens in new tab).

I wrote a blog post that explores this stuff in more depth: “How I Built My Blog”(opens in new tab). This post was written for the older version of my blog, built using the Next Pages router, but much of the information is still relevant.

I designed and built this blog from scratch, without using any templates, UI frameworks, or component libraries. It’s my own custom thing. 😄

Tools like Bootstrap / Material UI definitely have their use cases, but if you want to build something with a unique visual aesthetic, it’s so much easier to start from scratch, without any pre-existing styles beyond a CSS reset.

I’ve written about my philosophy in-depth in my post, “You Don’t Need A UI Framework”(opens in new tab).

It’s my own custom pair of themes! I created two separate ones, one for light mode and one for dark mode.

They use TextMate grammar, so in theory they can be used with VSCode or other editors, but I haven’t tested this at all. If you’re feeling adventurous, here are the raw theme files for you to use:

• Dark theme(opens in new tab)
• Light theme(opens in new tab)

This blog, along with some of my other(opens in new tab) sites(opens in new tab), include clay-style 3D assets like this:

I created these assets using Blender(opens in new tab), a popular open-source 3D modelling application. I should warn you: Blender has a pretty steep learning curve. It took several months of learning and practicing every day before I was able to create nice things from scratch, and I still barely know what I'm doing.

I learned Blender by following tutorials on YouTube, hopping around between different teachers and googling specific skills when I needed to know them. I tried some paid resources as well, but honestly they weren’t any better than the free stuff on YouTube, so I'd suggest sticking with that.

The only 3D asset I didn’t make is my main 3D mascot. I commissioned this from an artist(opens in new tab) whose work I really liked. It wasn’t cheap (I think maybe around US$1000 for all of the variants), but it was absolutely a worthwhile investment. 😄

Afraid not, sorry! I explain my reasoning in this post: “Why My Blog is Closed-Source”(opens in new tab).

That said, I have enabled source maps, so you can browse the code in-browser through the Sources pane. You can learn more about how to use this devtool in the Chrome documentation(opens in new tab).

The short answer is no.

I receive messages every day from folks in bad situations who want me to help them out with a discount or free access. Sometimes I really feel for them, but it wouldn’t really be fair for me to make an exception. I shouldn’t be deciding who does / does not deserve a discount based on how sympathetic their story is, or what sort of mood I'm in that day.

Instead, I have transparent policies around pricing, and everybody in the same situation pays the same price. There is no secret discount that can be unlocked by contacting me. Most people who register for one of my courses pay the list price.

Having said that, there are a few specific situations in which we do have discounts:

• If you’d like to purchase multiple licenses, to train the whole team, we offer team discounts starting at 4+ seats.
• If you’re a full-time or part-time student, you can contact us with proof of enrolment to request a 20% discount.
• If you live in a country with significantly lower purchasing power, you may be able to purchase a “regional license”, which offers full access to the content at a reduced price, but with the trade-off that the course can only be accessed from within your home country.

If you have any questions about these specific situations, please feel free to contact me. Otherwise, I'm afraid I no longer reply to requests for special discounts.

I’m afraid I don’t have the bandwidth to do this anymore, sorry!

That said, after reviewing hundreds of portfolio sites, I found I was giving the exact same advice over and over. I compiled all of that feedback, as well as some tips and tricks, into a short ebook. You can download it for free.

Certainly! If you have a blog / newsletter / community in a language other than English, you’re welcome to translate and publish the articles for your audience.

There is only one requirement: A link to the original article must be included at the top of your translated article, so that readers know right away what the original source is.

You can see an example(opens in new tab) of what good attribution looks like.

I’m afraid I’m not looking for work at the moment, sorry! My sole focus is creating the best educational content for developers in the world.

And I probably can’t provide any referrals either. I don’t really know many developers who do freelance / contract work, and it’s just not something I feel comfortable doing unless we have an established relationship.

Afraid not — this is my personal blog, I'm the only one who publishes on it.

I’m also not interested in including your company’s link in one of my articles, or playing any other SEO games. I probably won’t respond if you send these sorts of solicitations.