It has been a while since I wanted to get preview working for my blog. There is a lot of custom styling on my blog site, and often things don't look quite right when I publish an article for the first time. This often means it will take a few republishes before getting everything nailed. If someone were to visit my site during this stage, it wouldn't have been good user experience. So I was always curious about the Preview function on Contentful. Last night, I decided to take a stab at it after seeing this contentful doc. It looked easy enough, but as always, I encountered some issues. After getting everything working, I thought I'd share my solution on here, maybe it'll help someone else out.

It seems like everyone has their own Docker Cheatsheet nowadays, and I thought I'd add one more into the mix. I've noted down some handy commands I use most often when I work on Docker-related tasks.

Since Oct 2018, roughly 6 months ago, I have decided to utilise my own custom domain and create my own personal email address with this domain. In my mind, it was always going to be some complex process, and have been avoiding it until now. But recently, I found an easy way to do this and thought I'd share it on here.

All the JavaScript rendering libraries and frameworks we use, all boils down to the fundamental web APIs at the end of the day. People are so used to work with the high-level React APIs or Vue syntaxes (me included), we forget the raw and interesting layer underneath it all. But not today!

If you have seen my previous blog on Parcel bundler then you'd know my thoughts on Webpack. It is big, complicated and slow. It's big and complex because there are a lot of plugins for it and many ways to set it up as well as customising it. It is slow often due to the enterprise applications it is used in, simply because there are a lot of things going on in these projects than someone's SPA (single page application) personal project. Nobody wants to wait more than 1 min for the build process, here I'll be talking about a couple of practical hacks to boost the Webpack build performance used in a recent project.

I started to blog around the end of 2015, 3 years later it has been an interesting journey. I think I benefited quite a lot from it and thought I'd share my experience and some of my blogging practices with people who are looking to start blogging or simply want some inspirations.

I recently created a project using Vue CLI 3, and after got the project set up to a basic state I decided to add it onto Netlify and get the builds going for future reference (Netlify keeps all previous builds and if they are static sites then it also serves them at generated URLs). I started doing this late at night, and after battling it for a few hours I still didn't get anywhere. It was a pretty stressful situation, I just couldn't work out why I kept getting vue-cli-service: not found errors when Netlify runs the build. There was surprising little help online for this, maybe not many people have started using Vue CLI 3 with Netlify yet? I only managed to find out the reason after more digging and thought I'd share my solution so no one else needs to go through the same amount of pain.

First of all, I just want to say that I love the concept of rapid prototyping!

Why? There are so many reasons, but here are just a few which I value deeply:

1. Different to normal development - It gives you a whole new perspective to software development, normal expectations and assumptions are not valid here. Testing? Hmmm, maybe later. Team chat about coding standard? No need, we will use someone else's lint rules.
2. Learning opportunities - It really tests your knowledge of different toolsets, libraries, and services. If you are working with other people, then there is a high chance of you picking up something you didn't know before.
3. Achievement - Literally build something from nothing in a matter of hours or days.

Vue CLI is a powerful tool, designed to help developers to set up a base project on which they could start building on top of with extreme ease. It offers a bunch of configuration options which caters for different people's preferences and needs. However, as someone who's new to Vue or web development, it could be scary trying to go through the manual setup. This blog post attempts to change that, by explaining each step and give my personal recommendation for each configuration.

Everything in JavaScript world moves fast in comparison. Libraries and frameworks often fighting hard to dominate one another, in order to win the hearts of developers. Today let's discuss the positions of npm, yarn and a challenger called pnpm. Both yarn and pnpm were announced around the same time, only difference being Yarn was backed by Facebook and it gained traction much faster.