Random notes to myself

Discover how to integrate interactive maps into your Metalsmith projects using the Leaflet JS library. From setting up the frontmatter to rendering the map with markers, our guide walks you through every step.

In this blog post, we'll explore how to build a website using the Metalsmith static site generator, aligning with the 'Use the platform' philosophy to streamline web development

Metalsmith First is a website starter and ms-start is a command-line interface (CLI) tool designed to streamline the process of setting up a Metalsmith First project, an innovative and modular approach to crafting static websites

Integrating Nunjucks into a browser-based app requires pre-compilation and path adjustments. Learn from my experience for a smooth development process. Visit the GitHub repository for the complete code.

Discover how to elevate your Metalsmith website with single-page app behavior using Swup. Enhance user engagement with smooth page transitions.

A versatile web component I value: seamlessly blends text links, buttons, color schemes, and link types (external/internal) into a single, efficient component.

Web components are a blend of specifications, not a rigid framework. By seeking community wisdom I have learned a lot about the best practices and pitfalls of web components.

Explore TruncatedAPTitle, a custom web component handling attribute changes with MutationObserver. Learn how it truncates and title-cases text, all inside a span.

In this blog post, we will build a custom web component called CloudinaryImage that allows us to lazy load images from Cloudinary.

Unlock the true potential of web development with Web Components. Embrace reusability, efficiency, and elevate your projects to new heights!

In 2017, I started building static websites using Metalsmith. A client's request led me to switch to Gatsby, but the transition posed challenges. This made me reflect on framework fatigue in web development.

The blog discusses a widget, the 'Clamp Calculator', used for calculating CSS clamp functions for responsive font sizing, padding, and margins. The widget ensures fonts smoothly adjust with viewport width changes.