Webdev

Leaflet is a popular and feature-rich JavaScript library for displaying maps. One of these features includes creating and placing markers on a map with an icon, that could represent a dropped pin or something custom. I need to create icons for markers that also contain a number that could be different for each marker and adding text to Leaflet icons can be done in a few ways. Using L.DivIcon to insert a div element inside of an image. Read more...

It has been 87 days since I enabled the ability to show related content at the bottom of each post on this blog, aptly titled “Related ramblings”. This uses Hugo’s built-in Related Content functionality. If you use a pre-made theme you may never directly work with this feature. I wanted to highlight how easy it was to use and how impressed and I am with the results. To enable my theme to use this features, I simply had to create a new partial that could be used in my post template. Read more...

It was a rainy Saturday afternoon when I was at a cafe with my wife scrolling through Hacker News when I came across Arne’s blog on why you should write your own static site generator (SSG). I had recently gone down that road myself, at least partially, so seeing someone’s views on the same topic intrigued me. I’ve been meaning to gather my thoughts around the subject, and what better time than now as somewhat of a response to Arne’s blog? Read more...

What I like about Sass and other CSS preprocessors, despite my limited usage of them, is the ability to nest CSS elements to assign style rules to children. Earlier this year the first version of the CSS Nesting Module specification was published by W3C. This brings the feature of CSS nesting to the browser! According to CanIUse, nesting is already supported by all major browsers as of this year. Here’s a basic example, I have an article with a <h1> and <h2> header where I’d like all <h2> headers within the article to be blue. Read more...

I host all my images outside of Hugo to prevent any large files from residing in my git repository. This has led me to serve high resolution images in most of my posts which aren’t ideal for the end user. I recently learned about Hugos ability to get remote images, aptly titled resources.GetRemote, which then allows me to apply Hugo’s image rendering capabilities. This video by Eric Murphy covers some compressing and resizing methods within Hugo that I’ve applied to this blog. Read more...