Image by Björn Larsson www.bjornlarsson.se (CC BY-SA 3.0)

Hello World!

It's been a goal of mine to re-start my personal website and start a blog. I'll go over how I built the site and share a sneak peek of some upcoming content!

This was created using a static-site-generator called Jigsaw, created and maintained by Tighten Co. I made some edits to the provided blog template which has everything I'm looking for to bootstrap my site. I'd still like to get Vue upgraded from v2 to v3, but I did update the template's version of Tailwind CSS from v2 to v3 and submitted a PR. To keep things easy I'm using Netlify for hosting; I used Netlify in the past for static site hosting and it's a seamless process!

This was my first time working with Tailwind. I had been hesitant to try using it but it's beginning to grow on me! (Thank goodness since most of the Laravel ecosystem uses Tailwind 😅) While my work spans across the "full stack" I definitely specialize in backend engineering–I'm way behind on frontend best practices and would not rate my eye for design very highly. It still feels awkward at times when I'm trying to translate a vision into Tailwind styling and I can't find the right combination of Tailwind classes to achieve what I'm looking for. I'm also curious about how Tailwind devs handle long lists of classes. I found myself wishing I had a code formatter configured to sort the Tailwind classes and put each one on its own line like so:

<input id="search"
     v-model="query"
     ref="search"
     class="rounded-none
         relative
         block
         h-10
         w-full
         lg:w-1/2
         lg:focus:w-3/4
         bg-gray-100
         border
         border-gray-500
         focus:border-blue-400
         outline-none
         cursor-pointer
         text-gray-700
         px-4
         pb-0
         pt-px
         transition-all
         duration-200
         ease-out"
     :class="{ 'transition-border': query }"
     autocomplete="off"
     name="search"
     placeholder="Search"
     type="text"
     @keyup.esc="reset"
     @blur="reset">

It doesn't seem like there are any clear-cut solutions from some cursory web searching. I'll definitely have to refine my strategy and do a wider survey of best practices if I end up using more Tailwind.

I'll leave this article here, but my next post will be about self-hosting a WebSocket server for your Laravel project. It will be cross-posted on the Knack engineering blog soon so keep an eye out.

Until next time, be well!