#javascript #es6 #data structuresJavaScript remove duplicates, get unique/distinct 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 ie. get distinct/unique values from an Array using ES6 Set. This gives you a one-line implementation of lodash/underscore’s uniq fu ...
#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 ...
#node #javascript #typescriptUse microbundle for a TypeScript npm moduleFor those looking to write a package and publish it to npm, TypeScript + microbundle is a low-friction way to build a high-quality library. I’ve created a GitHub repository template with microbundle, TypeScript, ava and xo. You can find it at github.com/HugoDF/microbundle-t ...
#javascript #dateAdd days to a Date in vanilla JavaScriptDespite the JavaScript Date warts, it’s straightforward to add day(s) to a date in JavaScript. While it would be very easy to reach for moment.js or another date manipulation library (date-fns, luxon, dayjs) to do something as simple as adding days to a Date in JavaScript, ...
#alpinejs #javascriptSynchronize x-data and the URL in Alpine.js with the location/History APIs and $watchAlpine.js doesn’t have a router as yet since it’s designed to deliver simple interactive experiences on top of server or statically rendered sites. For single page applications that make heavy use of the History API or require a router, one would be better served head ...
#alpinejs #eleventy #javascript #laravel #laravel #rails #craftcmsIntegrating Alpine.js + Pre/Server-rendered contentAlpine.js is a great choice for adding some interactive feature to a server rendered, static or pre-rendered site. In the Alpine.js GitHub Issues, we’ve seen a lot of questions around how to deal with content that’s pre-rendered or server-rendered in Alpine.js in orde ...
#alpinejs #eleventy #javascriptIntegrating Alpine.js with Eleventy & YAML files to create Alpine Playground's CollectionsAdding collections to Alpine.js Playground, essentially bringing it in line with projects such as awesome-alpine and alpinetoolbox.com. It came from the fact that I’m curating quite a bit of content for each newsletter and it makes sense that content featured on the newslet ...
#eleventy #alpinejs #javascript #nodeHow to migrate a bunch of HTML pages (Alpine.js Playground) to EleventyAlpine.js Playground was recently migrated from custom build scripts & HTML pages to leverage Eleventy. For context, Alpine.js Playground’s custom build scripts + HTML files had the following pros and cons. Pros: simple very simple, everything is in the scripts folder. ...
#alpinejs #javascriptPractical Alpine.js: x-data data access & data fetching/AJAX examplesAlpine.js “A rugged, minimal framework for composing JavaScript behavior in your markup.” is a great, lightweight replacement for interactive jQuery or Vanilla JS sprinkles due to its small size (~7kb min-gzipped) & the fact it can be included from a CDN with a sc ...
#alpinejs #javascriptRun Alpine.js inside of ReactAlpine.js is well-suited for building widgets and easily creating client-side experiences for websites that are mainly server-side rendered or static. Good news: it is possible (at the time of writing with Alpine.js 2.x) to integrate Alpine.js with React trivially. Alpine.js is & ...
