Start from the beginning
(Or scroll past this and the next heading to get to the tech thoughts)
Web programming was where I first discovered a love for computers. I was always bad at painting and drawing but I wanted to be able to do those things. So I loved the simplicity of being able to type specific words and the computer would draw the lines and things for me. With web, there was no compiling or anything, I had an instant visual cue. And if I didn't like it, no erasing, no painting over, no recompiling... just change the words and refresh the browser and see if its better.
So once I got into programming beyond just web pages, I thought it would be great to create my own webpage that was uniquely mine, and could show off things I've worked on (just like so many other tech people out there. I didn't claim to be original).
How did we get here?
A bunch of years ago, I set out to create something with the skills I had at the time. Those were with PHP, MySQL, and some javascript. So I built a relatively complicated solution, much of which was based on complicated animations for interactivity using Anime.js. And the content itself was stored and pulled from a database (Mysql) via php backend files.
This created a number of problems.
- The javascript code was messy. I had hundreds of lines of codes to create all the animations, and they weren't maintainable.
- Storing the content in sql made sense to me at the time, but it meant I had to maintain backend and frontend for
- I also am not great at consistently writing things down. And I never created a CMS to edit the contents. So I'd manually write things (and incorporate html code where necessary to make it look right), then insert them into the database. NOT a great way to encourage me to keep writing & updating.
Then I decided I needed to leave my old host (for a number of reasons not worth getting into), and at the time it made more sense to self-host, which enabled me to run a number of other services & personal apis on the server. I decided the transition was a good time to rebuild.
So with those 3 old problems in mind, I looked around and landed on the current design with 3 goals in mind: Keep the animated written signature, make it lightweight, and make it simple to work with.
I found a pretty NEAT solution!
Ironically, the acronym is already incorrect for a number of reasons, but doesn't sound as cool. The original acronym is Netflify, Eleventy, Alpine.js, Tailwind. But Netlify has rebranded as Decap, and I decided to simplify and not use Alpine at all. So I'm actually using ...DET.
I found this solution very simple and elegant. To keep with the three goals:
Keep the animated written signature
- I simplified the SVG a bit (removed unnecessary lines, regrouped characters together)
- Removed the complicated javascript library to animate the SVG and animated with CSS animation techniques instead, turning a 50 line javascript animation into a few CSS keyframes. Much more manageable.
- Placed it in a layout using Tailwind's design principles
Make it lightweight
I wanted it to load quickly. No extra bloat.
DET is excellent for this because it compiles!
- Decap has an admin portal where I can specify exactly what I want to be able to edit, and how those edits should be written.
- Eleventy is basically stacking templates, so each page can have layers based on each other, so nothing needs to be written twice.
- Tailwind scans your code and only adds the classes that you use to the output css file, keeping only the minimum for your specific work. I LOVE that.
Make it simple to work with
- This is hard for me because I often fall into the trap of reinventing the wheel to show that I can do it instead of working with existing, well-tested products.
- By using the very bare-bones CMS with Decap, and plugging in with simple frameworks in Eleventy & Tailwind, its not only lightweight to load, its also great to make edits.
- Making changes to pages is simple by updating Eleventy template files when necessary or changing / adding Tailwind classes to web tags.
- Writing new (or editing existing) content is a breeze. I can sign into my admin page of Decap on my personal computer using Github auth. That also allows Decap to push changes directly to Github. So I can write content, press publish, and the changes will be uploaded to Github.
- The blog files are stored as Markdown files, and then compiled with Eleventy into each page.
- Once I'm ready to update the live copy, I sign into my self-hosted server, pull the changes from Github and build the changes to the static files that are displayed at isaactaylor.net.
By the way, the NEAT concept was created by @surjithctly who created this starter template.
Badabing, badaboom. Easy setup, easy upkeep. Now we'll see if I can get myself to keep writing down what I'm working on!