David Llop

Back-End Developer

Written on

Building my own blog

A few months ago I finished a big project that occupied all of my free time and I started to feel empty. I have a lot of hobbies in my to-do list but coding is the one I prefer over the rest if I have something in mind. Also there were a few things I wanted to try since I was doing the same kind of code for a long term:

  • Laravel 5.5 arrived and brought the API Resources which were introduced by Taylor on his Laracon EU talk and I was dying to try it out, I love building API's 😄.
  • In October, Tailwind CSS appeared in scene. A utility-first CSS framework to make ours life, the backend developers, easier (or at least that is what it looks to me 🙂).
  • A co-worker started to learn and enjoy Vue and I really wanted to learn it too. It was on my pending-to-learn list for almost a year.
  • I found a podcast from Full Stack Radio in which Adam Wathan and Taylor Otwell talked about Resource Controllers and how to use it in a cleaner way.
  • I wanted to experiment with Markdown.

With all this things in mind I decided to build something easy with a bit of each and I thought about this. I already owned the domain davidllop.com for almost 2 years containing a simple landing page with my name and Twitter link.

Freek's work

When I was writing the code of this project, a tweet appeared on my teamline from Freek Van Der Herten

I was shocked. He did the same as I was trying to do! I checked out the repo and saw he used Vue, Resource Controllers, Tailwind CSS... I thought about deleting all my work and just fork his to add the API Resources. His code was amazing and he also had RSS feed, newsletter subscription, Algolia search, and much more.

Finally I decided to continue with my own code, and when I got stuck I checked how Freek's solved the problem. I implemented the Algolia search box (which is currently broken due to my free plan 😅) following the steps that Freek describes in his entry.

What I've learned

It took me much more time than I thought it will, but I learned a few more things than planned at the beginning.

  • I had to fight with webpack since I didn't had experience with frontend assets yet. Freek's repo helped here 🙂.
  • I decided to use Spatie's Vue tables to show the data from the API Resources I planned to use. It was so easy to use and even I created my own component to encapsulate the table definitions using a JSON schema.
  • I tried the new Font Awesome 5 icons and the SVG with JS way to display icons, but finally I had to switch back to v4 because of incompatibility with simpleMDE. Latelly I saw that is also used by Freek's on backend 😅.
  • I tried to use something I learned using ASP MVC Framework called View Models, to encapsulate the data passed to a view. I ended up creating a Form View Model which can create common form inputs easily. I always used LaravelCollective/HTML for this purpose but I wanted to try a different approach this time.
  • I also started to play with SASS

OpenSourcing

This is my first open source project and I have enjoyed it a lot. Yes, it's my work and I spent a lot of hours on it, but it'll be glad if someone uses it or can gather ideas from it in any way.

The project is located in my GitHub account

Spotted a mistake? Noticed something to improve? Feel free to edit this post on GitHub.


Special thanks 🙏 to Dieter Stinglhamber for the amazing code of this blog