Posting Source Code on WordPress

Posting Source Code on WordPress

While writing technical content for this blog, I usually find it tough to include source code in the posts in a way that makes it readable and appealing. I want it to be enjoyable to read the code, rather than a struggle.

This led me to explore various solutions and in this post I go over the options I considered and what I eventually found to work best for me.

In my search, I considered the following 3 options:

Gist Embed

This is where I post the source code on gist.github.com and then embed the gist in the blog post.

Pros:

  • Gist embedding is natively supported in WordPress
  • Amazing out of the box syntax highlighting
  • Simple for the reader to copy the code directly from the post if they need to

Cons:

  • Content not rendered on some platforms e.g. In the Pocket mobile app and in the AMP version of the site

This is how a Gist embed looks:

WordPress Source Code Embed

This works through using some special tags directly in the post, and any text you put between these tags, is then interpreted as code and gets syntax-highlighted. More details on this on this WordPress Support page.

Pros:

  • Extremely simple to insert code right in the editor as the post author
  • Simple for the reader to copy the code directly from the post
  • Natively supported in WordPress

Cons:

  • Not the best syntax highlighting option
  • Limited languages supported

I wasn’t able to properly embed the JSX code snippet above using this option without trying to pull my hair out, so to see how this option looks, I suggest you check it out in my previous post: A Practical Use Case for React’s componentDidUpdate

carbon.now.sh

This is a relatively new option and one that I’m excited to try out.

There’s an awesome website carbon.now.sh that claims to help you create and share beautiful images of your source code, and it definitely fulfills this bold claim. All you have to do is post your code on the website and it generates a beautiful image of the source code that you can embed anywhere, including on a blog post.

Pros:

  • Truly beautiful images 😍
  • Awesome syntax highlighting, almost exactly what you would get in your editor
  • A variety of themes to choose from
  • Directly import source code from GitHub gist (carbon.now.sh/GIST_ID_HERE)

Cons:

  • Generates images, so it’s not possible to copy the source code from the post

This is how this ends up looking on a post:

carbon_2018-08-11_14-20-13

Conclusion

Afer evaluating all these options, I found that what works best for me is a combination of gist.github.com and carbon.now.sh

My workflow now involves posting the code in GitHub Gist and using the Gist ID to generate an image on Carbon. In the actual post, I then embed the Carbon generated image and add a link to the gist. This way I can take advantage of both these awesome services.

To see all of these options in a practical post, you can check out my previous post: A Practical Use Case for React’s componentDidUpdate

How to Introduce Elm to a React Codebase

How to Introduce Elm to a React Codebase

Elm is a delightful language that helps make web applications more reliable by eliminating runtime exceptions. I find it extremely productive working with Elm, and would like to be able to use it in a JavaScript codebase without breaking the existing application or having to rewrite it altogether. However, it’s not obvious how to try out Elm in a small piece of the application, just enough to evaluate how well it works. This is what we will address in this article by exploring how to add a new feature to a React codebase with Elm.

Continue reading “How to Introduce Elm to a React Codebase”

Problem-Driven Development

Problem-Driven Development

As a mostly self-taught programmer, most of the things that helped me learn programming and understand its concepts is the fact that I applied the concepts I was learning to help solve some actual problems that I was encountering in my day-to-day life.

A few years ago while I was trying to teach myself Python, I found it hard to be able to make the leap from the beginner to the intermediate level. I understood the basic syntax of the language, and I wanted to transition to a relatively proficient programmer, one who could make useful software that people would want to use.

I soon came to realise that this was hard to do since I had no avenue to apply the skills I was learning. While there are lots of programming quizzes and challenges online, I couldn’t find something that I cared enough about to invest the required time and effort.

However, in my day to day usage of my computer, I discovered that there were a bunch of things that I used to do repetitively, that I would rather automate. One of these was the process I was using to discover new music.

I am a big fan of The Official UK Top 40 Charts, and I used to love to check out new music from there all the time. Back then, my process for discovering new music was to go to the chart’s website, check out any new songs, if I saw one that caught my eye, I would search for the track and listen to it on YouTube.

Now, for one or two songs, this is not a problem, but when it is in the range of around ten songs that might change every week, this quickly becomes tedious. I would rather have one place that would have all the tracks in the Top 40 charts and their corresponding YouTube links, so it would be easier to find and listen to any song on the charts with one click.

I figured that this was a good problem to automate, and proceeded to come up with a command line script written in Python (GitHub link), that would help me view all the songs in the charts right in my terminal along with their corresponding YouTube links. This way I would just have to run the script, get the Youtube links to all the songs in the Top 40 Charts in one place, and I wouldn’t have to go through my previous tedious routine ever again.

In the process of solving this problem for myself, I learnt a whole lot of stuff about Python and by the time the program was complete (This may make it sound like it was easy but trust me, it wasn’t), I realised I could make software that people would find useful, even if I was the only person using it. This project helped me make the leap from a Python beginner to a person who could come up with viable solutions to problems I encountered.
Of course, the greatest benefit to come out of this was saving myself a lot of unnecessary effort 🙂

The best part about all this is that anyone can apply this method to accelerate their learning. If you are trying to learn a new thing, especially related to computers and programming, think about this.

What is a problem that I care about solving that I could apply this set of skills that I am learning?

You are likely to learn more by applying what you are learning in practice. One of the best ways to do this is to look at the problems or inconveniences you or others are facing each day and asking yourself:

Can I learn more by trying to solve this for myself?
Would somebody
want to use your product?
How could I make it better for my users?

I believe that by collectively adopting a problem-solving mindset and applying it to learning, we all could make a difference in the world, by acquiring more knowledge for ourselves and solving most of the world’s problems in the process.

Featured Photo by ™ Pacheco