• Home
  • Books
  • Jest
  • Alpine.js
  • JavaScript
  • Node
  • More...
  • Search
  • About
  • Gear & Setup

JavaScript

A collection of 95 posts

#javascript #github

Github Pull Request Review: reset viewed files

GitHub Pull Request Review workflow is great. What I particularly like is the “file viewed” toggle, which mean that I’m not tempted to re-review the whole Pull Request when a single file has changed and I’ve already checked the rest of them. However there ...

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

Alpine.js In-Depth: x-data "state" & x-text "echo"

The simplest Alpine.js application is the following HTML file. It loads Alpine.js version 2+ from the JSDelivr CDN using a script tag and has an Alpine.js component with x-data="{ msg: 'Hello Alpine.js' }" and a p element with x-text="msg". ...

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

Alpine.js `x-for` a number of iterations (n times)

Alpine.js falls back to JavaScript to allow you to iterate a set number of times. For example if I want to create 4 lines on a page I can use the following. <div x-data> <template x-for="_ in Array.from({ length: 4 })"> <hr> </template> </div> ...

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

Alpine.js `x-for` with objects: 4 ways to iterate/loop through JavaScript objects

One of the missing features of Alpine.js is the ability to iterate through objects with x-for. Alpine.js is heavily inspired by Vue.js but it’s designed to be lean and rugged instead of incrementally adoptable. Therefore x-for only supports arrays/iterables. The reason ther ...

  • Hugo Di Francesco
    Author
6 min read
#javascript #jsdoc #typescript #node

How to get type-checking and generate TypeScript Typing declaration (types.d.ts) from JSDoc annotations

How to achieve TypeScript-like behaviour in Vanilla JavaScript using JSDoc and @ts-check in VSCode: that’s the purpose of this post. TypeScript is a JavaScript superset with types. It solves one of the big problems with JavaScript, which is “what parameters does this ...

  • Hugo Di Francesco
    Author
5 min read
#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
#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
← Next Posts Page 2 of 10  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