Discovering this theme

I’ve bought this Jekyll theme some years ago, and haven’t been using it until lately. It was time to take a sneak peak inside of it and understand how it worked. There was some Javascript in it, and I’ve checked the dependencies, and saw some directly “bundled” libraries as well as the usual CDN jQuery link. As a small exercice, I’ve decided to remove the jQuery dependency and look for alternatives for the small libraries that were bundled with it. I’ve been working with VueJS for about 4 years now, and I’ve followed the really quick development of Vite. I decided to add a bundler to my Jekyll project, and thanks to @ElMassimo, it was pretty simple with jekyll-vite. I could write JS the way I was used to, or even faster thanks to Vite!

The list of dependency directly bundled and minified was :

Updating the dependencies

Some of those could be replaced by new browsers API, others I’ve looked for replacement.

  • One of them in particular, fluidbox was exclusively written with jQuery, and no alternative was available that would look the same. I liked the look and feel of it, inspired by the Medium light boxes, so I’ve rewritten the entire library (or almost, I’ve skipped the event emitters part, as it wasn’t used in the theme) in vanilla JS. The code is available on my GitHub here. It is not ready as a JS library yet, the script is simply part of the project for now.
  • I could use the vanilla JS versions of imagesloaded.js and masonry.js.
  • Replacing debounce.js with lodash, importing only lodash/debounce via Vite.
  • You can replace history.js and waypoints.js with native APIs of the browser, respectively the History API, supported by all major browsers and the IntersectionObserver API which can provide the same functionality as the usage made by the theme.
  • I’ve replaced owl.js with tiny slider, which provides the same functionalities. Some CSS was necessary to make it look the same as owl.js, with some parameters.

CSS code to add, with .gallery-carousel being the container of the carousel image.

.tns-nav > [aria-controls] {
  width: 9px;
  height: 9px;
  padding: 0;
  margin: 0  5px;
  border-radius: 50%;
  background: #ddd;
  border: 0;
}
.tns-nav > .tns-nav-active {
  background: #999;
}
.tns-nav {
  text-align: center;
  margin: 10px  0;
}
.gallery--carousel  .tns-slider > .tns-fadeInSoft {
  opacity: 1;
  z-index: 0;
}
.gallery--carousel  .tns-slider > .tns-fadeOutSoft {
  opacity: 0;
  z-index: 1;
}

My parameters

// Creating the new carousel element
const sliderCarousel = tns({
  container: galleryWrapper,
  mode: 'gallery',
  items: 1,
  loop: true,
  mouseDrag: false,
  touch: true,
  controls: false,
  navPosition: 'bottom',
  autoplay: false,
  autoplayButtonOutput: false,
  autoplayTimeout: 6000,
  autoHeight: true,
  speed: 1000,
  animateIn: 'tns-fadeInSoft',
  animateOut: 'tns-fadeOutSoft',
})
// Instead of 
$this.children('.gallery__wrap').owlCarousel({
  items: 1,
  loop: true,
  mouseDrag: false,
  touchDrag: true,
  pullDrag: false,
  dots: true,
  autoplay: false,
  autoplayTimeout: 6000,
  autoHeight: true,
  animateOut: 'fadeOut'
});

As usual, I thought about writing this blog post at the same time as working on the migration, but didn’t take the time to do so. So here I am, writing about it 4 months later. It’s tough to try to remember the little tidbits that made it really interesting. But today, we can ditch jQuery with ease or not import at all in new projects. It’s interesting to see and use the new capabilities of browsers and how relatively fast things have evolved on the front-end side.

Developing with Docker, Jekyll and Vite edition

I had setup Jekyll with Docker, as I didn’t really know Ruby and didn’t want to pollute my system installation. When adding Vite to the mix, it made things a bit more difficult, as it needed different services to run as well for bundling and livereloading (vite and jekyll-vite). I made some experiments at first, with a shell inside the container running the services by myself. I then just launched the different services in the entrypoint script. Not optimal, but it will do for development! At first, it can be surprising, as the ports weren’t opened, and the page would continuously live reload. My entrypoint script looks like this :

#! /usr/bin/env bash
bundle install
bin/vite dev &
sleep 2;
bin/jekyll-vite wait &
sleep 2;
bundle exec jekyll serve --livereload --host 0.0.0.0

And my dev script to launch the container, used in package.json :

#! /usr/bin/env bash
docker run --rm --volume="$PWD/:/srv/jekyll" \
  --env JEKYLL_ENV=development \
  -p 4000:4000 -p 35729:35729 -p 3036:3036 \
  --name jekyll-dev2 \
  jekyll-node /srv/jekyll/entrypoint.sh

Performances ?

I will add a blog post with a Lighthouse test to see if it would have added performance or maybe surpisingly a loss.

Thanks for reading, and I will hopefully be back soon with more informations about the perfomances gains/loss and new posts!