lukezilioli.com Website Redesign - Tech Post
7 min read • 1252 words
Hello everybody! It's been forever since I updated the code that drives this site. (Just under eight years). But I have been doing stuff! I wanna show you my redesigned website. For the non-technical version of this post, read A Long Overdue Update
The old lukezilioli.com was written in PHP, the new one is written in NodeJS (with a super light-weight front-end). There's lots of cool technical stuff going on behind the scenes. Some of it has been open sourced.
I've got the new site set up so that I can edit blog posts in markdown on my iPad, commit and push the changes to a git repository, and have them published to this site automatically.
While architecting this blog, I kept open source in mind. It is not open-sourced yet, but I have defined a standard format for a blog repository (written in markdown, of course), and created
@lzilioli/blog-parser, a module that I am using internally to turn my blog into structured data for rendering this website. Eventually I will open source this module.
I also created md-macros, which I use to embed rich markup and data into my blog posts.
I wanted to include a shoutouts section with this post, like I did with the launch of the last redesign.
I love RSS. I was sad when Google Reader died. I have long since switched over to feedly, a more than sufficient replacement. Since I am such a fan of RSS, I created an RSS feed for the site. Subscribe here. Like most node-based web services that provide an RSS feed, I am using an npm package, rss.
At the bottom of every post, if your browser supports it, you can find a "Share" button, which will pop up your browser's native share sheet. If you are on an iOS device or using Safari on your Mac, sharing posts from this site is extra easy.
I am no longer using ZeroClipboard. (Flash is sooo 2013.) This redesigned website uses ClipboardJS to provide the same functionality. ClipboardJS doesn't need flash and instead relies on browser standards.
Try it! Click on the copy icon on the right to copy this block of text to your clipboard.
Now paste it here:
If you are using MacOS or iOS latest versions, you will notice this site will match your system-level light or dark preference. Switch to light or dark mode and watch the page update!
My old website displayed circular read/unread indicators beside the post titles. This is impossible using the
:visited pseudo element styling, so the old website was tracking post read/unread status in the browser's
localStorage. At the time, I wanted to learn how to work with
localStorage, and that feature was the perfect place to do it. As part of simplifying the codebase for this redesign, I ripped out
localStorage usage in favor of
:visited pseudo-element styling.
Most would say this simple blog could be published as a static site. I didn't want to do that for a few reasons. First, as part of migrating from the old design to the new design, I implemented some better practices. (Working on an SEO optimization team at RetailMeNot rubbed off of me). On my old site, blog post urls were formed as follows:
/blog?id=<post-id>. Here they live at
/blog/post/<post-slug>, which makes the urls more human readable, follows RESTful principles, and is better practice all around. However, you can still visit the old urls, and get 301 redirected to their new URLs. That small bit of redirect logic mapping post ids to post slugs was much easier to put on a node server than in a static front-end app.
Also, I'm a front-end engineer, so this was the perfect excuse to play with supporting and building node app in a production environment.
I'm using bitbucket pipelines to build the site and push it out whenever I push code to the repo. Its mad easy, and it took me 10 minutes to integrate with heroku. Everything is so standardzed these days, I love it.
I don't even know how I would compile a front-end (or node back-end) without webpack. It has become my go to TypeScript bundler, is highly extensible, and gets better with every update.
With this website overhaul, I jumped ship from Grunt over to gulp, since its better supported and been updated to play nicely with newer versions of node. I ditched
I have used
When you share a link to a post using iMessage or another modern messaging app, you will get rich inline previews of what is on the page. This improves everyone's life, and it means if you share a link to my blog with a friend, they are more likely to know what you sent them, even if they don't bother to click the link.
I have a few rules when it comes to selecting a template library:
- Must encourage minimal logic in templates (but support
- Read like html insofar as possible
Handlebars checks these boxes, and I have used it in many projects both personal and professional, making it the obvious candidate for this site.
A lot changes in the web development community, and as such, some of the tools that I was excited about back when I first created this site in 2012 have fallen by the wayside.
Twitter Bootstrap had its time, but I have stopped using it. These days, I write my own custom styles for stuff.
I still love Sass. Lucky for me, so does the web community. There are some great people behind the project, and it now has a c++ implementation (Libsass) which is much faster and more reliable.
I'm still using jQuery. Its great in my opinion. This site is super lightweight on the front-end, so jQuery is the perfect candidate.
Even for more complex applications, I am a big fan of event delegation combined with stateless functions and centralized state management (shoutout to redux). But I work on an Angular app as my day job, and as an engineer I try and remain framework agnostic. Finding, fixing, and folding code patterns onto themselves is what I'm good at.