#html #javascriptDisable a HTML <a> link/anchor tagHere are 2 ways to disable a HTML <a> link/anchor element using CSS or by using inline JavaScript. ...
#alpinejs #javascriptAn accessible Alpine.js menu toggleThe “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 ...
#alpinejs #javascriptAlpine.js in-depth: listen to JavaScript events using x-onThe 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 ...
#alpinejs #javascriptAlpine.js in-depth: reactive HTML attribute binding with x-bindWe’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 ...
#alpinejs #javascriptShow/hide in Alpine.js with x-showIn 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”. ...
#javascript #githubGithub Pull Request Review: reset viewed filesGitHub 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 ...
#alpinejs #javascriptAlpine.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". ...
#alpinejs #javascriptAlpine.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> ...
#alpinejs #javascriptAlpine.js `x-for` with objects: 4 ways to iterate/loop through JavaScript objectsOne 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 ...
#javascript #jsdoc #typescript #nodeHow to get type-checking and generate TypeScript Typing declaration (types.d.ts) from JSDoc annotationsHow 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 ...