hit counter
Duncan McClean 0 minute read
September 3, 2018

The Dream Web Development Stack: Statamic, Laravel, TailwindCSS and VueJS

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.

The Dream Web Development Stack: Statamic, Laravel, TailwindCSS and VueJS

Statamic

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.

42645e5cda510356a80d527bdbecdbfb

The Dream Web Development Stack: Statamic, Laravel, TailwindCSS and VueJS

Laravel

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.

The Dream Web Development Stack: Statamic, Laravel, TailwindCSS and VueJS

TailwindCSS

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.

The Dream Web Development Stack: Statamic, Laravel, TailwindCSS and VueJS

VueJS

You’ve probably used jQuery or some other Javascript library before. Personally, I had used jQuery and I hadn’t really got the hang of it. I was always coping and pasting code and when things broke I had absolutely no idea what happened.
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.


Comments