For the past few years I’ve been a hobbyist web developer, making websites for friends and family. During this time, I’ve used all sorts of stuff to build my websites. Bootstrap, WordPress and jQuery.
However, most of the stuff I was using felt clunky and I didn’t 100% understand it.
Now in 2018, I think I may have found my dream web development stack. It consists of Statamic, Laravel, TailwindCSS and VueJS.
Statamic is a flat-file content management system which means that all of your data is stored in markdown files. This [is great](https://statamic.com/why) because it means that there is no MySQL database to worry about.
Previously I was working with WordPress to built sites which meant having to write ugly PHP loops every time I wanted to display content. Whereas with Statamic, you can use something like this to display the latest posts.
Laravel is a PHP framework for web artisans. It’s easy to learn and it makes building web applications fast.
If you would like to check out what a Laravel project looks like, check out one I’ve created here.
TailwindCSS is a CSS framework like no other. It’s a utility first framework that allows for quick development.
For example if you want a div with 2rem of padding, a background of black and flexbox, the code would look like this.
It feels a bit strange at first as you’re adding tones of classes, but you’ll get used to it and wonder why you did it any other way.
However, then I stumbled upon VueJS and gave it a try and I loved it. It’s so easy to write.
One of the first things I built with Vue was a postcode locator that hooks into an API and grabs information about a certain UK postcode. I’ve embedded it below.
<pdata-height="265"data-theme-id="0"data-slug-hash="Jvyqwb"data-default-tab="html,result"data-user="damcclean"data-pen-title="Postcodes.io API"class="codepen">See the Pen <ahref="https://codepen.io/damcclean/pen/Jvyqwb/">Postcodes.io API</a> by Duncan McClean (<ahref="https://codepen.io/damcclean">@damcclean</a>) on <ahref="https://codepen.io">CodePen</a>.</p><script async src="https://static.codepen.io/assets/embed/ei.js"></script>
This was initially published on Medium.