It had been a long time since I updated deviaene.eu and lately, I had been thinking about giving blogging a shot. Also, There are a lot of new frameworks and libraries I come across when browsing GitHub and I needed a project to try these out. Anything was possible, the only thing that was for certain is that I’m using Laravel.
So a few weeks ago, I started working on a new face for my personal website, Deviaene.eu.
Finding a good admin panel is one of the main reasons that kept me from turning this website into a blog. I didn’t want to put too much time in creating my own from scratch and I could not find a pre-baked admin panel that suited all my needs.
Then I thought about Laravel Nova. I had followed the development and several talks about Nova and then forgot about it. But this looked like the right tool for this case.
So, I started by getting myself a Nova license to use for my own website. After going through most of the documentation on fields and relations, building an admin panel with Nova was a blast! Creating forms for all models is as easy as creating resources for them and defining the fields that can be edited. Currently, I only used the basic functionality, but I feel like there is a lot more to learn when I dive deeper into the documentation.
Lately, I heard a lot about this thing called Tailwind CSS, it was supposed to be a new way of styling your website that is totally different from Bootstrap or Foundation. As a long time Bootstrap user, I had to know what the fuss was all about.
Tailwind does not have any pre-defined style or components. Instead, it gives you all the tools you need to create your own. It has a class for every css option you can think of and gives you an API to easily combine them into your own components. For example, if you want to create a button you can create a class using the following code:
.btn-blue {
@apply bg-blue text-white font-bold py-2 px-4 rounded;
}
This class will give the container a blue background color, white text, a bold font, horizontal and vertical padding, and rounded corners. All colors are defined in your tailwind config file so they will be uniform throughout the whole css without having to remember them.
I really like this way of working. As a way of learning this framework, I have completely redone me resumé using Tailwind. I am also planning to make the entire front-end website for TableTopFinder using Tailwind.
I can’t wrap up this post without a few important honorable mentions.
First and foremost, reading murze.be is what gave me the idea to start my own blog. I might have also taken some of the design ideas from this website.
I am also using several packages of the company Spatie. Be sure to take a look at their open source page, they have some great packages you didn’t even know you needed. ( Don’t worry Spatie, I will be sending you guys a postcard. ;) )
I’m really happy I finally got the new website online, and I hope I will find the time to write a blog post from time to time.
After I have polished the code and created some tests I might put the source code on GitHub so other users could potentially learn from my code as I did from others.
Thanks for reading, and hopefully until the next one!