Technology

Summary

This site is developed entirely using the TALL stack:

There is no jQuery, and very little direct JavaScript. All reactive functionality is achieved with a combination of Alpine and Livewire. There is almost no direct CSS, with almost all styling achieved with the utility classes of Tailwind CSS.

I have created a fairly large number of Laravel Blade components to maximise reuse, and UI consistency.

I am using Laravel Breeze for authentication. My authentication needs are pretty basic and Breeze more than meets my requirements.

In their own words, Tailwind CSS is:

A utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup.

It enables you to do pretty much all the styling you need without writing any CSS, just using the provided class names. It is also very easy to extend, not that I have needed to add much. Prior to redeveloping this site, I had been working a lot with Bootstrap 4, which is also easy to use, but, in my opinion, is clearly surpassed by Tailwind CSS.

In their own words:

Alpine.js offers you the reactive and declarative nature of big frameworks like Vue or React at a much lower cost. You get to keep your DOM, and sprinkle in behavior as you see fit. Think of it like Tailwind for JavaScript.

In a similar way to Tailwind CSS, it enables you to implement a lot of reactive functionality, without writing any JavaScript. It is so nice to use!

In their own words:

Laravel is a web application framework with expressive, elegant syntax. We’ve already laid the foundation — freeing you to create without sweating the small things.

Laravel is a huge, comprehensive MVC (Model - View - Controller) framework for PHP. It seems like I have barely scratched the surface of its functionality. Yet, I have a fully functional website with authentication, scheduled jobs with emailed results, and more.

In their own words:

Livewire is a full-stack framework for Laravel that makes building dynamic interfaces simple, without leaving the comfort of Laravel.

I have to confess that, at first, I was pulling my hair out trying to get functionality to work in Livewire. Prior to this development, I have done pretty much all of my reactive client-side development with jQuery, and Livewire is a very different beast indeed. When I first started to develop Liverwire components, I got a lot of errors of the format: Cannot read '[some property - usual fingerprint]' of null. I found a very useful set of guidelines, which helped to relieve most of my teething problems.

After about a month, I starting feeling a bit like I did when I started to get the hang of butterfly identification, in that it was hard to see why I had difficulties in the beginning.

My Verdict, so far

For what its worth, my opinion of the TALL stack so far, is that I love it!

In fact, after a period of about a month, during which I was using the TALL stack exclusively, I had to go back developing on a WordPress platform, using Bootstrap and jQuery. In only 2 days I had many instances where I was frustrated by not being able to use Alpine to achieve some simple reactivity, or Livewire to bind some server-side values to the client-side and avoid having to write an ajax call, or trying to use one of Tailwind's utility classes, to find that Bootstrap has no equivalent. I have also been longing for Blade component functionality to avoid ridiculous amounts of repetitive code.

A Brief History

This is the fourth major re-working of my nature site. The original, was a quick-and-nasty PHP sub-site, on the now long-superseded original site of the Rainbow Lodge ecolodge in Tatai, Koh Kong Province, Cambodia, where I lived and worked for eight years. I had to change that quite abruptly when the new owners of the lodge commissioned a new site that did not support mine. As a result, it was another less than optimal site but still had a lot of useful content. That was on the now expired tataiwildlife.info domain. It was all hand-crafted in PHP and was horrendous to maintain.

When I first set up geenature.com, it was for my nature tours business and was focused on that, rather than my nature observations. I decided to use WordPress. I then decided that I should include by nature observations, so set about developing a WordPress plugin to use my keywords (exported as a text file from Adobe Lightroom) to a generate taxon post of a custom post type for each taxonomic keyword. Each post then pulled in photos from my Flickr account, using the Flickr search API. I also added checklist functionality to the site, to help people who are trying to identify fauna and flora from the region. The site became much easier to maintain because, to apply changes, all I had to do was export by Lightroom keyword, upload them to my site and click a button to generate any new taxon posts, and update any affected checklists (oh, I also had to export my photos to Flickr). I was going to install the WordPress and my plugin on my tataiwildlife.info site but business wasn't going so well, so I decided to drop that site.

Then, when I became an enthusiastic iNaturalist user, I soon found that I was struggling to find the time to keep Flickr and iNaturalist up-to-date, even though iNaturalist has a feature to allow imports from Flickr. In addition, as business was still not going so well, I decided to let my Flickr Pro subscription lapse and concentrate my efforts on iNaturalist. In order to achieve that I developed a new WordPress plugin to source my data and photos from iNaturalist, instead of Lightroom and Flickr. It also meant that I could start to include observation-specific data, rather than just taxon data. This plugin had the big advantage of requiring almost no manual site maintenance. I created an overnight job to use the iNaturalist API to fetch any additions or changes to my data, and apply them to the posts on my site. It also automatically updated all the checklists, for which I was storing generated HTML. The job also sends a summary email, so all I had to do is look at that and see if anything needed doing.

And then a complete rewrite to use the TALL stack. I am still using iNaturalist as my data source, and the same principle of almost zero maintenance.

The previous version had functionality to allow users to subscribe to taxa and receive notification emails when there were any changes to a subscribed taxon (or any of its child taxa). As I had not even a single subscriber, I have decided not to implement that feature in the new version of the site.

Also, in the previous version I had some blog posts, which where mostly about tours and were supposed to help me attract more customers for my nature tour business. As I no longer have that business, and I am very poor at writing regular posts, I have decided not to have a blog but, instead, to write articles about nature and about the TALL Stack.