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

JavaScript

A collection of 95 posts

#node #testing #javascript

Node.js Native Test Runner

If anyone missed it, Node.js 18 includes a test runner/test definition module (node --test and node:test respectively). node:test exports a test function and you can run the Node CLI with a --test flag which does some basic search/matching for test files. Full Documentation: node ...

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

Tips for real-world Alpine.js

Alpine Day 2021 Talk: tackling Alpine FAQs, common issues & web patterns with Alpine.js ...

  • Hugo Di Francesco
    Author
6 min read
#javascript #react #node

Why doesn't React.useEffect run on React server-side renders (SSR)?

Why doesn’t React.useEffect run during a server-side render (SSR) for example when using it inside a Next.js application? The obvious spots in the docs for information like this are the React docs on useEffect and the React docs on string/static rendering neither of which m ...

  • Hugo Di Francesco
    Author
3 min read
#cypress #testing #javascript

Cypress Scroll Position Assertions

This post goes through approaches to asserting on the scroll position. First we’ll see how to assert that we’re at the top of the page. Next we’ll look at 2 approaches to assert that we’ve scrolled to an element. The examples for this post are available at ...

  • Hugo Di Francesco
    Author
4 min read
#javascript #typescript

What is the "?." JavaScript/TypeScript operator

In JavaScript and TypeScript, the “?.” operator is called optional chaining. It works in a similar fashion to the . (chaining) operator, except that it short-circuits instead of causing an error when a value is null or undefined. That means const obj = {}; console.log ...

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