Using Auth0 Login with JavaScript – Some Tips / / No Comments Despite having worked at Auth0 a few years back, I never actually used their main identity product. (When I was there, I was part of a team working on a serverless offering.) It’s been in the back of my mind to try the product for some time now, but I never got around to it. This past week Adobe was shut down for the holiday so with a lot of free time, I decided I’d finally give it a shot. I got something working, but had some troubles with their documentation so I figured I’d share what I ran into, and some code as well in hopes it will be helpful for others. Raymond Camden… more → Posted in: JavaScript Tagged with: Auth0, JavaScript, Login, Some, tips, using
JavaScript String replaceAll / / No Comments Replacing a substring of text within a larger string has always been misleading in JavaScript. I wrote Replace All Occurrences of a String in JavaScript years ago and it’s still one of my most read articles. The confusion lies in that replace only replaces the first occurrence of a substring, not all occurrences. For example: 'yayayayayaya'.replace('ya', 'na'); // nayayayayaya To replace all instances of a substring, you’ve needed to use a regular expression: 'yayayayayaya'.replace(/ya/g, 'na'); // nananananana Using regular expressions is certainly powerful but let’s be honest — oftentimes we simply want to replace all instances of a simple substring that shouldn’t... more → Posted in: JavaScript Tagged with: JavaScript, replaceAll, String
How to Reverse an Animated GIF / / No Comments Modifying visual media via code has always been a fascination of mine. Probably because I’m not a designer and I tend to stick to what I’m good at. One visual effect I love is seeing video reversed — it provides a sometimes hilarious perspective on a given event. Take this reversed water effect for example: To reverse an animated GIF or video, you can use the ImageMagick library: convert water-forward.gif -coalesce -reverse -quiet -layers OptimizePlus -loop 0 water-reversed.gif If you’re interested in media engineering, check out my previous ImageMagick tutorials. These awesome media libraries are as close to an artist I will ever get! The post How to Reverse an... more → Posted in: JavaScript Tagged with: Animated, Reverse
Related Content by Day of Year in Eleventy / / No Comments Ok, chalk this up to something that is probably useful to one out of ten of my readers, but the idea’s been bouncing around my brain for a few months now and I finally took the time to build it out. Imagine a content site that’s been around for a while, for example, this blog (twenty years next February). It may be interesting to tie articles to content written in the past, specifically, on the same day in previous years. This requires a site with years of content and enough content such that there would actually be a decent chance of that happening, but I could see newspaper sites or other news organizations being able to meet that criteria. For... more → Posted in: JavaScript Tagged with: Content, Eleventy, Related, year
Testing the Netlify Cache Plugin with Eleventy / / No Comments For months now I’ve been meaning to check out, and try, the Netlify Caching plugin. This plugin lets you cache resources between builds saving you time when doing builds. I didn’t doubt it worked, but I needed to give it a try myself to see it in action. To test it out, I used Eleventy, but note that you can use any static site generator with the plugin. (It just won’t be as cool.) Raymond Camden… more → Posted in: JavaScript Tagged with: cache, Eleventy, Netlify, plugin, Testing
How to Flatten git Commits / / No Comments One of my least favorite tasks as a software engineer is resolving merge conflicts. A simple rebase is a frequent occurrence but the rare massive conflict is inevitable when many engineers work in a single codebase. One thing that helps me deal with large rebases with many merge conflicts is flattening a branch’s commits before fixing merge conflicts. Let’s have a look at how to flatten those commits before resolving those conflicts! My typical command for rebasing off of the main branch is: # While on the feature branch... git rebase -i master To flatten commits before the rebase, which can make resolving merge conflicts easier, you can slightly modify the original command: ... more → Posted in: JavaScript Tagged with: Commits, Flatten
Building a Quiz with Eleventy and Eleventy Serverless / / No Comments A few days ago, I was thinking about what a "quiz" would look like in Eleventy. I put that in quotes because there’s a lot of different ways you can think of quizzes and how they’re built. For my demo, I set my list of features to the following: Raymond Camden… more → Posted in: JavaScript Tagged with: building, Eleventy, Quiz, Serverless
Immediately Executing setInterval with JavaScript / / No Comments Employing setInterval for condition polling has really been useful over the years. Whether polling on the client or server sides, being reactive to specific conditions helps to improve user experience. One task I recently needed to complete required that my setInterval immediately execute and then continue executing. The conventional and best way to immediately call a function at the beginning of a setInterval is to actually call the function before the initial setInterval` is called: myFunction(); setInterval(myFunction, 1000); // Every second If you truly want to isolate the function call to the setInterval, you can use this trick of self-executing function that returns itself: // Use... more → Posted in: JavaScript Tagged with: Executing, Immediately, JavaScript, setInterval