Code with Hugo

Node.js and JavaScript Guides

  • Home
  • Books
  • Jest
  • Alpine.js
  • JavaScript
  • Node
  • More...
  • Search
  • About
  • Gear & Setup
Subscribe
#alpinejs #javascript

Sync Alpine.js x-data to localStorage/sessionStorage

Alpine.js is great for writing widgets. localStorage/sessionStorage are Web APIs that enable JavaScript application to store data beyond the life of the current JavaScript process. This is useful for example if we wanted to persist our todos when the user closes the tab and comes ...

  • Hugo Di Francesco
    Author
3 min read
#alpinejs #javascript

How to Access Alpine.js Magic Properties from inline handlers and function/component methods

Alpine.js magic properties are crucial to leveraging its best features. When using Alpine.js in a “mainly markup” configuration (no script tags), the magic properties tend to be accessible seamlessly. Alpine.js magic properties are as follows: $el: the element to whi ...

  • Hugo Di Francesco
    Author
6 min read
#alpinejs #javascript

Access Alpine.js component data/state from outside its scope

Warning this uses Alpine.js v2 internals, there isn’t currently a public-facing API to do this. As an active Alpine.js and Alpine.js Devtools contributor, I’ve had the pleasure of explaining how to access Alpine.js component data from outside the component and of usin ...

  • Hugo Di Francesco
    Author
2 min read
#alpinejs #javascript

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 ...

  • Hugo Di Francesco
    Author
8 min read
#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 ...

  • Josh Ternyak
    Author
11 min read
#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), ...

  • Hugo Di Francesco
    Author
6 min read
#javascript #es6 #data structures

JavaScript remove duplicates, get unique/distinct 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 ie. get distinct/unique values from an Array using ES6 Set. This gives you a one-line implementation of lodash/underscore’s uniq f ...

  • Hugo Di Francesco
    Author
4 min read
#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 ...

  • Hugo Di Francesco
    Author
3 min read
#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 ...

  • Hugo Di Francesco
    Author
4 min read
#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, ...

  • Hugo Di Francesco
    Author
1 min read
← Next Posts Page 3 of 13  Previous Posts →

Get The Jest Handbook (100 pages)

Take your JavaScript testing to the next level by learning the ins and outs of Jest, the top JavaScript testing library.

Find out more close
Code with Hugo
Latest Posts Twitter Github Medium