#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 ...
#alpinejs #javascriptSync Alpine.js x-data to localStorage/sessionStorageAlpine.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 ...
#alpinejs #javascriptHow to Access Alpine.js Magic Properties from inline handlers and function/component methodsAlpine.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 ...
#alpinejs #javascriptAccess Alpine.js component data/state from outside its scopeWarning 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 ...
#alpinejs #javascriptA guide to Alpine.js component communicationLearn 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 ...
#alpinejs #javascript #jqueryAlpine.js + jQuery/JavaScript Plugin Integration: a Select2 exampleOne 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), ...
#javascript #es6 #data structuresJavaScript remove duplicates/unique values from Array with ES6 Set and spreadWith ES6, more developers should be leveraging built-ins than are using lodash functions. This post will go through how to remove duplicates from an Array using ES6 Set. This gives you a one-line implenentation of lodash/underscore’s uniq function: const dedupe = list =&g ...
#ava #Testing #node #javascriptAVA: pass or fail a test if an environment variable is missing/emptyIn 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 ...
