Looking at the JavaScript Promise Collection Methods / / No Comments Let me begin by saying that "Promise Collection Methods" is not something I’ve seen mentioned elsewhere, but is my own way of referring to the various methods of the Promise API that work with multiple promises. They are: Promise.all Promise.allSettled Promise.any Promise.race I’ve used Promise.all many times in the past, and I was aware of the other methods but had not taken the time to actually build a demo of them. This weekend I changed that. After spending a few hours in Sanctuary grinding my Necro character, I put down the controller and picked up the laptop. Here’s what I built. As a note, everything shown here works in modern browsers, but you can check MDN... more → Posted in: JavaScript Tagged with: collection, JavaScript, Looking, methods, promise
Detect Caps Lock with JavaScript / / No Comments Anyone is capable of having their caps lock key on at any given time without realizing so. Users can easily spot unwanted caps lock when typing in most inputs, but when using a password input, the problem isn’t so obvious. That leads to the user’s password being incorrect, which is an annoyance. Ideally developers could let the user know their caps lock key is activated. To detect if a user has their keyboard’s caps lock turn on, we’ll employ KeyboardEvent‘s getModifierState method: document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) { const capsLockOn = keyboardEvent.getModifierState('CapsLock'); if (capsLockOn)... more → Posted in: JavaScript Tagged with: Caps, Detect, JavaScript, Lock
– First Episode / / No Comments Just a quick note to share that today I did my first episode of the <Code><Br> show. I had a great audience with some great questions and comments. My next show will be in two weeks and I hope to see you there! Raymond Camden… more → Posted in: JavaScript Tagged with: Episode, first
Using Generative AI as Your Content Assistant / / No Comments Last week I had the honor of presenting one at TheJam.dev. This was my first presentation on generative AI and I got to share what I thought was an interesting use case – helping with the writing process. Now to be clear, I don’t mean using GenAI to write blog posts, that would be a horrible idea. (IMO!) Instead, I looked at how it could help with some of the process. Let me back up a bit and give some background. I’ve been a fan of John Birmingham for many years now. He’s an author who writes in the military/sci-fi/etc genre and has some pretty fascinating ideas. I initially discovered him via his "Axis of Time" trilogy which dealt with the idea of a modern... more → Posted in: JavaScript Tagged with: Assistant, Content, Generative, using
Using Generative AI to Improve Image Filenames / / No Comments Last night I had an interesting thought. Many times I work with images that have vague filenames. For example, screenshot_1_24_12_23.jpg. Given that there are many APIs out there that can look at an image and provide a summary, what if we could use that to provide a better file name based on the content of the image? Here’s what I was able to find. As always, I began by prototyping in Google AI Studio. I apologize for stating this in basically every post on the topic, but I really want to stress how useful that is for development. I used a very simple prompt: Write a one sentence short summary of this image. The sentence should be no more than five words. And then did a quick test: If... more → Posted in: JavaScript Tagged with: Filenames, Generative, Image, improve, using
Fixing Cumulative Layout Shift Problems on DavidWalshBlog / / No Comments Over 50 thousand developers visit DavidWalshBlog every month from around the world to learn JavaScript tricks and fix problems in their code. Unfortunately, some of them have a slow experience on the site. David tracks the performance of his Core Web Vitals and overall performance with Request Metrics. Recently, we noticed that his CLS performance score was trending pretty slow for both desktop and mobile users. Wait, what is CLS? Cumulative Layout Shift (CLS) is one of the Core Web Vital performance metrics. It doesn’t measure load time directly, instead it measures how much a page shifts while it is being loaded. You’ve definitely seen this and been annoyed by it. These shifts... more → Posted in: JavaScript Tagged with: Cumulative, DavidWalshBlog, Fixing, layout, Problems, shift
Extract a Number from a String with JavaScript / / No Comments User input from HTML form fields is generally provided to JavaScript as a string. We’ve lived with that fact for decades but sometimes developers need to extract numbers from that string. There are multiple ways to get those numbers but let’s rely on regular expressions to extract those numbers! To employ a regular expression to get a number within a string, we can use \d+: const string = "x12345david"; const [match] = string.match(/(\d+)/); match; // 12345 Regular expressions are capable of really powerful operations within JavaScript; this practice is one of the easier operations. Converting the number using a Number() wrapper will give you the number as a Number type. The... more → Posted in: JavaScript Tagged with: Extract, from, JavaScript, Number, String
You Should Attend theJam.dev 2024! / / No Comments Next week, a very cool, and very free, online event is being held by the fine folks at Certified Fresh Events, theJam.dev 2024. This is a two-day online conference covering web development, AI, serverless, frameworks, and certainly more than just the Jamstack. Speakers include Cassidy Williams, Alex Russel, Zach Leatherman (creator of Eleventy!), Rizèl Scarlett, and more. I’ll be giving a quick lightning talk on generative AI and writing, and you can see the full schedule on the website. Did I mention it was free? Did I mention it was online? You’ve got no reason to miss this, so check it out! Raymond Camden… more → Posted in: JavaScript Tagged with: 2024, Attend, should, theJam.dev