Code with Hugo

Node.js and JavaScript Guides

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

Disable a HTML <a> link/anchor tag

Here are 2 ways to disable a HTML <a> link/anchor element using CSS or by using inline JavaScript. ...

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

An accessible Alpine.js menu toggle

The “Hello World” of JavaScript frameworks and libraries seems to have become the todo app. In the case of Alpine.js a todo app is almost too large to showcase Alpine’s core benefits and use case. Another issue with a lot of JavaScript examples is that they fore ...

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

Alpine.js in-depth: listen to JavaScript events using x-on

The core Alpine.js functionality beyond toggling visibility, displaying data in HTML textContent and binding HTML attributes to data is listening for events using Alpine.js. Listening to events with x-on is usually coupled with state updates, for example we can create the followi ...

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

Alpine.js in-depth: reactive HTML attribute binding with x-bind

We’ve seen how to print out values using x-text and toggle visibility of elements based on them with x-show. We’ll now see how to set the value of HTML attributes using x-bind. In this example we’ll display and image based on data that’s in our Alpine.js i ...

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

Show/hide in Alpine.js with x-show

In Alpine.js the directive used to toggle visibility of an element is x-show. Per the Alpine.js README, “x-show toggles the display: none; style on the element depending if the expression resolves to true or false”. ...

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