---

---

Happy Coding is Built With

---

• Hardware
• GitHub Pages
  • GitHub Desktop
• Jekyll
• Code Embeds
• Editors
• Backgrounds
• JavaScript and CSS
• Images
• Domain
• Forum
• Other Stuff

---

Here is a list of everything I use to build Happy Coding.

There are many ways to build a website like Happy Coding, and I’m not saying this is The One True Way to go about it. There are a million different tools and workflows you could choose, and you should go with whatever makes the most sense to you. But if you’re curious, here’s what works for me.

Hardware

I use Windows at home. I started creating Happy Coding on an old Dell desktop, but for the last few years I’ve done everything on a Lenovo ThinkPad. This thing is a “laptop” in name only. In reality it’s a monster that weighs about 15 pounds.

GitHub Pages

Happy Coding is hosted on GitHub Pages, which means that the site itself is backed by an open-source repo. To update the site, I update the content in the Happy Coding repo, and then GitHub Pages automatically deploys it.

GitHub Desktop

Because I’m using GitHub Pages, that means I’m also using git. I’m pretty much the only person updating the site and I always push directly to the main branch, so I use GitHub Desktop to push my changes. For any other workflow, I’d probably recommend using the command line.

Jekyll

GitHub Pages uses Jekyll, which uses a mix of Markdown, Liquid, and HTML to create the site.

I write the text of every tutorial and blog in Markdown, and then use Liquid to stitch them together into HTML files.

For example, view the Markdown source for this blog entry.

The section at the top between --- is Liquid front matter that tells Jekyll what to do with the content, and then the rest of the file is Markdown content that gets converted into HTML. That content goes through the blog post layout which adds the title, date, and comment section, and then the default layout which adds everything else.

Jekyll is built in Ruby and Bundler, but I don’t have to deal with that directly other than when I decide to update Jekyll. Jekyll also uses Kramdown and Rogue for syntax highlighting of code blocks, but that’s another thing I almost never have to think about.

I absolutely love Jekyll. Back in the Static Void Games days, I wrote a Java wrapper of Stack Overflow’s pagedown JavaScript library using V8. In hindsight that’s ridiculous, but in my defense this was before CommonMark was a thing. When I was thinking about how to build Happy Coding I almost used the same workflow, where I would have written content in markdown and then used a library to convert that to HTML. But then I discovered GitHub Pages and Jekyll, which did all of that automatically. I was instantly able to cut out a ton of hacky code that probably never should have existed in the first place.

Code Embeds

Wherever possible, I include embedded code editors in tutorials and examples.

For Processing, I use CodePen. Specifically I use CodePen editable embeds which require a pro subscription that currently costs $75 per year.

The Processing embeds also use Processing.js which lets you write Processing syntax that runs as JavaScript code in the browser. This is slightly dangerous as Processing.js is no longer recommended, but it still works for most sketches as long as they don’t require file access or Processing 3 features. I know this will break eventually though.

For p5.js, I use p5.js-widget. Similar to the Markdown converter I mentioned above, I actually went pretty far down the rabbit hole of creating my own p5.js embedded editor before realizing a better solution already existed.

Editors

I use Typora to edit most of the Markdown content, and jEdit for most of everything else. I love how simple both of these editors are. They give me exactly what I need and nothing else.

When I’m working on a language-specific tutorial or project, I also use language-specific editors. For Processing I use the Processing editor; for p5.js I use the p5.js editor; for Android I use Android Studio. For Java I use a little bit of Intellij, but I mostly use jEdit.

Backgrounds

I use Processing to create the background images. See this page for more info on that process, and how to contribute your own background images!

JavaScript and CSS

I don’t use any libraries like jQuery or Bootstrap (anymore). The only JavaScript on the general site is for setting a random background image and changing the background color of the navigation bar. For that last one I use Modernizr to check whether the browser supports CSS transitions, although looking at the availability I could probably get rid of that now.

I wrote all of the CSS myself, except for the syntax highlighting. For that, Jekyll uses Rogue which is styled with Pygments.

Images

I use good old Microsoft Paint for editing and cropping most images. I also use the Snipping Tool to get screenshots, and I press alt + PrtSc a lot. If I need something fancy like transparency I’ll use GIMP, but Paint works for almost everything I need.

For quick and easy GIFs, I use ScreenToGif. For higher-quality GIFs, I export individual frames as images and then use ImageMagick to stitch them together.

I’ve also commissioned a few artists to create images for specific tutorials and blog posts. Generally they’re credited below each image.

Domain

I use Namecheap for my domain. If you want to use a custom domain with your GitHub Pages site, check out this guide.

Forum

The forum is built using Discourse. The comments embedded on each blog are also built using Discourse.

I use Digital Ocean to host the forum, and Mailgun for the emails that the forum sends out.

Other Stuff

Did I forget anything? Are you curious about anything else? Let me know!