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.

Open Source

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 parse my blog's markdown, and embed rich markup and data into my blog posts.

Shoutouts

I wanted to include a shoutouts section with this post, like I did with the launch of the last redesign.

Newcomers

RSS Feed

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.

ClipboardJS

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:

Dark Mode

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.

Nodejs + heroku

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.

bitbucket pipelines

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.

2023 Update

  • Heroku raised prices, so I switched to render.com
  • As part of this process, I replaced BitBucket & pipelines with GitHub & actions

TypeScript

JavaScript has come a long way, but it remains error prone and untyped. Thankfully, theres TypeScript. I don't write JavaScript anymore, everything I do is TypeScript. If you haven't made the switch, do so. I can't believe I could ever write functioning applications using vanilla JS.

Webpack

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.

Gulp

Out with the old and in with the new (less old?). Over the years, I have used Grunt as my task runner. I used it for a long time. Longer than most. I'd even created a shared-grunt-config package that encapsulated all of my favorite grunt plugins and standardized my JavaScript development workflow across multiple repos.

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 shared-grunt-config in favor of Github's template repo feature. I created lz-ts-template which will be the basis for my future JavaScript projects.

I have used npm scripts, which is everybody's favorite way to manage their scripts these days, but I still prefer the power and abstractions provided by a JavaScript task runner.

Open Graph Tags

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.

Handlebars

I have a few rules when it comes to selecting a template library:

  1. Must be able to render client, or server-side in JavaScript
  2. Must encourage minimal logic in templates (but support if/else/for)
  3. 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.

Updates

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

Twitter Bootstrap had its time, but I have stopped using it. These days, I write my own custom styles for stuff.

Old-Timers

Sass

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.

jquery

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.

tagged
share