A Bare-Bones Eleventy Template for Glitch / / No Comments A few weeks ago I blogged about a simple Alpine.js template for Glitch projects. I’m still new to Glitch and wanted to give it a whirl with an Eleventy demo I wanted to share. Glitch has an Eleventy template, but it’s a bit verbose. It sets up a basic blog with sample posts and such, and that’s great to learn, but if you already know Eleventy, you may prefer to start off a bit simpler. With that in mind, I created this repository: https://github.com/cfjedimaster/glitch-eleventy It defines an .eleventy.js file that specifies an input and output directory. It sets up a very basic HTML layout and an empty index page that uses it. I also used Liquid for my demo whereas the Glitch-provided... more → Posted in: JavaScript Tagged with: BareBones, Eleventy, Glitch, Template
How to Use window.crypto in Node.js / / No Comments I’ve been writing a bunch of jest tests recently for libraries that use the underlying window.crypto methods like getRandomValues() and window.crypto.subtle key management methods. One problem I run into is that the window.crypto object isn’t available, so I need to shim it. To use the window.crypto methods, you will need Node 15+. You can set the window.crypto by importing the crypto package and setting it on the global: const crypto = require('crypto').webcrypto; // Shims the crypto property onto global global.crypto = crypto; I really loathe creating mock functions for missing libraries in Node because they can lead to faulty positives on tests; I really appreciate webcrypto... more → Posted in: JavaScript Tagged with: Node.js, window.crypto
How to Internationalize Numbers with JavaScript / / No Comments Presenting numbers in a readable format takes many forms, from visual charts to simply adding punctuation. Those punctuation, however, are different based on internationalization. Some countries use , for decimal, while others use .. Worried about having to code for all this madness? Don’t — JavaScript provides a method do the hard work for you! The Number primitive has a toLocaleString method to do the basic formatting for you: const price = 16601.91; // Basic decimal format, no providing locale // Uses locale provided by browser since none defined price.toLocaleString(); // "16,601.91" // Provide a specific locale price.toLocaleString('de-DE'); // "16.601,91" // Formatting... more → Posted in: JavaScript Tagged with: Internationalize, JavaScript, numbers
How to Extend Prototypes with JavaScript / / No Comments One of the ideological sticking points of the first JavaScript framework was was extending prototypes vs. wrapping functions. Frameworks like MooTools and Prototype extended prototypes while jQuery and other smaller frameworks did not. Each had their benefits, but ultimately all these years later I still believe that the ability to extend native prototypes is a massive feature of JavaScript. Let’s check out how easy it is to empower every instance of a primitive by extending prototypes! Every JavaScript native, like Number, String, Array, Object, etc. has a prototype. Every method on a prototype is inherited by every instance of that object. For example, we can provide every `Array... more → Posted in: JavaScript Tagged with: Extend, JavaScript, Prototypes
Quick LiquidJS + Eleventy Example – All Posts / / No Comments So, on a whim today I decided to add a page to my blog to display every single post, separated by year. This was not meant to be used by anyone (hence me not linking to it in the nav), but something I’ve wanted around for a while. I’ve got a nice search form here, but sometimes I want to search for something I blogged a few weeks ago and having a simple list of posts would be useful. I didn’t want to build "proper" pagination, just one giant list in on an HTML page. That’s not the best UX but as I’m building this for me, I approve. I thought it would be a quick little script, but as I built it, I ran into a few interesting... more → Posted in: JavaScript Tagged with: Eleventy, example, LiquidJS, posts, Quick
Locate Empty Directories from Command Line / / No Comments As a software engineer that lives too much of his life on a computer, I like keeping my machine as clean as possible. I don’t keep rogue downloaded files and removes apps when I don’t need them. Part of keeping a clean, performant system is removing empty directories. To identify empty directories, I use the following command: find . -type d --empty To remove empty directories, we can add a --delete flag: find . -type d --empty --delete Keeping a clean machine is easy when you know the tools that can help you. find makes identifying and eliminating easy, so don’t be afraid to use it! The post Locate Empty Directories from Command Line appeared first on David Walsh Blog. David... more → Posted in: JavaScript Tagged with: Command, Directories, Empty, from, line, locate
Adding Responsive Images with Cloudinary / / No Comments In case you can’t tell, I’ve been enjoying playing around with Cloudinary these last few weeks. As part of my research, I recently looked around in the docs for things I wanted to dig deeper into. One of the features I thought was fascinating was Cloudinary’s remote image support. What does that mean? Raymond Camden… more → Posted in: JavaScript Tagged with: Adding, Cloudinary, images, Responsive
Integrating Cloudinary Notifications with Pipedream / / No Comments As I continue my journey into learning the awesomeness of the Cloudinary platform, today I decided to take a look at their notifications support. Cloudinary lets you specify a webhook URL that will be hit on different types of events. I whipped up a quick example of using this with Pipedream, my favorite service for processing webhooks. Here’s how I did it. Raymond Camden… more → Posted in: JavaScript Tagged with: Cloudinary, Integrating, Notifications, Pipedream