Why I created this project?
There can be a lot of pressure when putting out content on the internet. Because I was learning about technical things, like Redux, I wanted to write about it. I felt like it had to be perfect. I wanted to try and cover all my bases and accurately explain everything. This put a lot of pressure on writing and it became more of a chore. I don't want to release incorrect content on purpose, but you also can't know everything. The idea of the digital garden is more focused on exploring and learning.
Articles on my digital garden are expected to grow and evolve as I learn more. It gave me an environment that's more focused on sharing and learning. Even just small notes can be found in my garden. There's an edit button along with every article so readers can open up a PR to share their knowledge or help me fix small mistakes.
I also wanted to have a site where I was in control of the content. Other blogging platforms are great but if that ever goes away all that content might be lost.
Technology
- Gatsby
- GraphQL
- MDX
- Tailwind, previously had Sass
For side projects when it comes to choosing technologies I normally go with what I know or what I'm interested in. For Gatsby, I already knew it from previously building a couple of different portfolio sites. Gatsby seemed like the perfect tool since I could create automatically create dynamic routes for my articles.
GraphQL was one of the technologies I was super interested in. I had been hearing about it a lot and wanted to give it a shot. So the fact that Gatsby came with a way to get my feet wet with GraphQL was a big plus.
Before creating this project I had never heard of MDX. I knew what Markdown was but MDX was new to me. MDX allows you to add components to your Markdown documents. The MDX site shows an example of using a Chart component in a Markdown file.
I started using MDX to get Syntax highlighting for my code blocks. I think this makes my code examples a lot more readable and just looks cool! There's a lot more I still want to do to full advantage of MDX.
I started styling this site at first with Sass. A friend told me about Sass and I enjoyed it. The nested styling and variables you could do with Sass were exciting. It helped me break down styling and I enjoyed how specific I could make it.
I heard about Tailwind from Twitter and thought it was pretty neat. Originally I was going to just stick with Sass but after reading Refactoring UI which was written by Adam Wathan and Steve Schoger, the creators of Tailwind I decided to switch.
I love how Tailwind is a bit opinionated when it comes to creating breakpoints for things like width and margin but still allows for that flexibility if you want to extend the styling.
Features
- Dark mode
- Auto-generated routes from MDX articles
- Dynamic Social Media Images, thanks to Jason Lengstorf for the great blog post
- Code Blocks with Prism React Renderer
Issues
The plugin environment of Gatsby can feel very overwhelming sometimes. And it can quickly get complicated with all the moving pieces. The biggest issue I'm running into right now is how I want to prioritize tickets. I have some tickets to add new features, but I also have a ticket to redesign the website.
Plan for the future
According to GitHub, my first commit was May 24, 2020. And I still have so much I want to do. I use Trello to keep track of bugs I want to fix as well as new features I want to add.
Some tickets are ideas that I want to explore further or were suggestions given to me, such as "Add an RSS feed for Jono". A friend asked if my digital garden had an RSS feed and I said no but I figured that would be fun and I said I would look into it.
Since I have no idea how to do that the ticket details are left blank and I include the yellow "Needs Research" label I've set up. When the time comes that I want to tackle this. I'll google "Gatsby RSS feed" and see where it leads me!
For other tickets, I have links to docs that I've found that might help me. Like a link to the plugin "gatsby-transformer-gitinfo".
Whenever I think of something new I want to add or explore I can create a ticket and come back to it later.