Author: drweb

You know those One Time Password inputs? The UI is typically 4 or 6 numbers with individual inputs. Just from today… Here’s the UI the Safeway app uses in the Pharmacy section to log in. Here’s how Substack authenticates. Brad Frost was blogging about them recently. They certainly have some issue! Here’s one he spells out that I agree with wholeheartedly: I don’t like the pattern where each digit is its own text box. It’s an affordance that’s supposed to make things clearer, but it doesn’t (for me at least). Can I paste? Where do I paste? Is my paste going to…

Let’s dive into this magical world of CSS where we can create some truly eye-catching effects without needing to resort to any complex sorcery. Today, we’re exploring the holographic CSS effect. You know, that shiny, futuristic look that makes your website elements feel like they’re about to leap off the screen? Yep, that’s what we’re gonna demystify. The CSS Holographic Effect First off, the holographic effect in CSS is like the unicorn of web design. It’s not just about slapping on some glitter, it’s about creating depth, movement, and a touch of futurism, all while making sure it doesn’t look…

Over 250,000 websites are launched every day. With this, it’s essential to use CSS practices that elevate your page and frontload your services. With the right guidelines, you can translate your unique offering to digital consumers who are quick to dismiss subpar websites. If you look at Yahoo Finance’s ranking of the most visited websites in the world, the top 10 is littered with social media platforms. Beyond that, users visit websites built for search aggregation, personalized recommendations, shopping, and content generation. What all these have in common, in terms of the biggest CSS lessons to learn, is that there…

Last updated: December 12, 2023. Most often when defining a function, you are aware of how many arguments the function should accept: function add(x, y) { return x + y; }; add(1, 2); // Returns 3 The number of arguments accept can be extended manually: function add(x, y, z=0) { return x + y + z; }; add(1, 2); // Returns 3 add(1, 2, 3); // Returns 6 But this solution isn’t very scalable because you have to include a parameter in the function for each argument you may pass in when the function is called. A solution is to…

Last updated: December 12, 2023. To get the first date and day of the month, first create a new instance of the native Date object and set its date to the first day of the month: const date = new Date(); // Creates new date object, default is current date date.setDate(1); // Sets date to first day of month (count starts from 1) date.toLocaleDateString(‘en-us’); // returns date e.g. 12/1/2023 You can then extract the day (as a number or string) and the date (in this case always 1) as follows: date.getDay(); // returns 0-6, where 0 = Sunday and 6…

Last updated: December 13, 2023. An item in an array can be moved to its beginning by: Checking if item exists in the array (to prevent an unhandled error) Filtering the array of that value Inserting the item at the beginning of the array Here is an example in code: const array = [“Second”, “Third”, “First”]; // Check if a value exists… if (array.includes(“First”)) { //…filter this value from the array… const arrayFiltered = array.filter((val) => val !== “First”); //…and place it first in a new array, spreading the other values afterwards const res = [“First”, …arrayFiltered]; console.log(res); // […

Last updated: December 15, 2023. You can play an audio file in JavasScript by creating an Audio object, setting a URL and then calling the play() method on it: const audio = new Audio(); // Generates new Audio object, equivalent of HTML element but in JS audio.src = “https://openjavascript.info/2023/12/15/how-to-play-audio-in-javascript/./happy.mp3”; // Set URL to audio file to play audio.play(); // Play audio (usually generates error because user has not interacted with page) To prevent an error occurring when calling play() because the user has not interacted with the page, you can call it in response to a click event: Play The…

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()…

Last updated: December 28, 2023. Consider the following HTML markup: With the following styles applied via a CSS stylesheet: .content { width: 200px; height: 200px; background-color: #a52a2a; } In JavaScript, the styles applied to the with the class name of content can be accessed using the globally available getComputedStyle() function. The function accepts a HTML element and returns all its styling in object format: // Select element to retrieve styling from: const contentDiv = document.querySelector(‘.content’); // Pass element into getComputedStyle() const contentDivStyles = getComputedStyle(contentDiv); console.log(contentDivStyles); // CSSStyleDeclaration {…} Individual CSS styles can be accessed by querying properties on the CSSStyleDeclaration object…

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) { // Warn the user that their caps…