Code with Hugo

A guide to Alpine.js component communication

Learn how to share information between Alpine.js components with the $dispatch magic property and the window/document as an event bus. This post will show how to trigger and listen to global/window/document events with Alpine.js in order to use it as an event bus to communicate b ...

#web development

App Ideas: 17 Web Apps You Can Build To Level Up Your Coding Skills

Have you ever wanted to build something as a web developer? The answer is probably…yes. A common problem web developers have is that they don’t know WHAT to build and HOW to build them. Well, you’ve come to the right place. This is a list of 17 web apps you can ...

#alpinejs #javascript #jquery

Alpine.js + jQuery/JavaScript Plugin Integration: a Select2 example

One of the jQuery ecosystem’s greatest strength is the wealth of drop-in plugins available. Alpine.js is a great way to phase out jQuery spaghetti code from current and future projects with its declarative nature and small bundle size. What Alpine doesn’t have (yet), ...

#javascript #es6 #data structures

JavaScript remove duplicates/unique values from Array with ES6 Set and spread

With ES6, more developers should be leveraging built-ins than are using lodash functions. This post will go through how to remove duplicates from an Array using ES6 Set. This gives you a one-line implenentation of lodash/underscore’s uniq function: const dedupe = list =&g ...

#ava #Testing #node #javascript

AVA: pass or fail a test if an environment variable is missing/empty

In a recent project I needed to fail/pass some AVA if a runtime environment variable was unset or empty. Here’s how I solved this issue. AVA is a test runner for Node.js with a concise API, detailed error output, embrace of new language features and process isolation that l ...

#node #javascript #typescript

Use microbundle for a TypeScript npm module

For those looking to write a package and publish it to npm, TypeScript + microbundle is a low-friction way to build a high-quality library. I’ve created a GitHub repository template with microbundle, TypeScript, ava and xo. You can find it at github.com/HugoDF/microbundle-t ...

#javascript #date

Add days to a Date in vanilla JavaScript

Despite the JavaScript Date warts, it’s straightforward to add day(s) to a date in JavaScript. While it would be very easy to reach for moment.js or another date manipulation library (date-fns, luxon, dayjs) to do something as simple as adding days to a Date in JavaScript, ...

#alpinejs #javascript

Synchronize x-data and the URL in Alpine.js with the location/History APIs and $watch

Alpine.js doesn’t have a router as yet since it’s designed to deliver simple interactive experiences on top of server or statically rendered sites. For single page applications that make heavy use of the History API or require a router, one would be better served head ...

#alpinejs #eleventy #javascript #laravel #laravel #rails #craftcms

Integrating Alpine.js + Pre/Server-rendered content

Alpine.js is a great choice for adding some interactive feature to a server rendered, static or pre-rendered site. In the Alpine.js GitHub Issues, we’ve seen a lot of questions around how to deal with content that’s pre-rendered or server-rendered in Alpine.js in orde ...

#alpinejs #eleventy #javascript

Integrating Alpine.js with Eleventy & YAML files to create Alpine Playground's Collections

Adding collections to Alpine.js Playground, essentially bringing it in line with projects such as awesome-alpine and alpinetoolbox.com. It came from the fact that I’m curating quite a bit of content for each newsletter and it makes sense that content featured on the newslet ...