Author: David Walsh

curl is one of those great utilities that’s been around seemingly forever and has endless use cases. These days I find myself using curl to batch download files and test APIs. Sometimes my testing leads me to using different HTTP headers in my requests.

To add a header to a curl request, use the -H flag:

curl -X 'GET' \
 'https://nft.api.cx.metamask.io/collections?chainId=1' \
 -H 'accept: application/json' \
 -H 'Version: 1'

You can add multiple headers with multiple -H uses. Header format is usually [key]: [value].

The post How to Add a Header to a curl Request appeared first on David Walsh Blog.

CSS selectors never cease to amaze me in how powerful they can be in matching complex patterns. Most of that flexibility is in parent/child/sibling relationships, very seldomly in value matching. Consider my surprise when I learned that CSS allows matching attribute values regardless off case!

Adding a {space}i to the attribute selector brackets will make the attribute value search case insensitive:

/* case sensitive, only matches "example" */
[class=example] {
  background: pink;
}

/* case insensitive, matches "example", "eXampLe", etc. */
[class=example i] {
  background: lightblue;
}

The use cases for this i flag are likely very limited, especially if this flag is knew knowledge for you and you’re used to a standard lower-case standard. A loose CSS classname standard will have and would continue to lead to problems, so use this case insensitivity flag sparingly!

The post Case Insensitive CSS Attribute Selector appeared first on David Walsh Blog.

Working on a web extension that ships to an app store and isn’t immediately modifiable, like a website, can be difficult. Since you cannot immediately deploy updates, you sometimes need to bake in hardcoded date-based logic. Testing future dates can be difficult if you don’t know how to quickly change the date on your local machine.

To change the current date on your Mac, execute the following from command line:

# Date Format:  MMDDYYYY
sudo date -I 06142024

This command does not modify time, only the current date. Using the same command to reset to current date is easy as well!

The post How to Set Date Time from Mac Command Line appeared first on David Walsh Blog.

This past weekend I had the opportunity to be what every father wants, if only for a moment: the “cool dad”. My wife was out of town and my youngest son wanted to play PUBG. I caved in, taught him the basic FPS key binds, and he was having a great time. While he was fragging out, he pressed a bunch of random keys and ended up changing movement buttons. Suddenly the traditional WASD movement keys were useless and the arrow keys triggered movement.

Of course, this was a degradation of player experience. After struggling to figure out what my son did, I found the solution.

To restore the WASD keys as movement keys, press the FN+W key combination. You’ll switch back to WASD keys for movement and be back on top of your game!

The post How to Fix: Windows WASD Keys Reversed with Arrow Keys appeared first on David Walsh Blog.

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 lock is on?
    }
});

I’d never seen getModifierState used before, so I explored the W3C documentation to discover other useful values:

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

getModifierState provides a wealth of insight as to the user’s keyboard during key-centric events. I wish I had known about getModifier earlier in my career!

The post Detect Caps Lock with JavaScript appeared first on David Walsh Blog.

One of the HTML elements that frequently comes into collision with CSS is the img element. As we learned in Request Metrics’ Fixing Cumulative Layout Shift Problems on DavidWalshBlog article, providing image dimensions within the image tag will help to improve your website’s score. But in a world where responsive design is king, we need CSS and HTML to work together.

Most responsive design style adjustments are done via max-width values, but when you provide a height value to your image, you can get a distorted image. The goal should always be a display images in relative dimensions. So how do we ensure the height attribute doesn’t conflict with max-width values?

The answer is as easy as height: auto!

/* assuming any media query */
img {
  /* Ensure the image doesn't go offscreen */
  max-width: 500px;
  /* Ensure the image height is responsive regardless of HTML attribute */
  height: auto;
}

The dance to please users and search engines is always a fun balance. CSS and HTML were never meant to conflict but in some cases they do. Use this code to optimize for both users and search engines!

The post How to Override width and height HTML attributes with CSS appeared first on David Walsh Blog.

Ask any software engineer and they’ll tell you that coding date logic can be a nightmare. Developers need to consider timezones, weird date defaults, and platform-specific date formats. The easiest way to work with dates is to reduce the date to the most simple format possible — usually a timestamp. To get the immediate time in integer format, you can use Date.now:

const now = Date.now(); // 1705190738870

I will oftentimes employ Date.now() in my console.log statements to differentiate likewise console.log results from each other. You could also use that date as a unique identifier for an event in a low-traffic environment.

The post Date.now() appeared first on David Walsh Blog.

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 post Extract a Number from a String with JavaScript appeared first on David Walsh Blog.

Streaming services have revolutionized content delivery, sending linear media companies into a panic as they watch traditional cable services decay. “Cutting the cord” is a common practice these days, but the streaming landscape isn’t perfect. We’re a decade into streaming so I wanted to share my thoughts on the state of new media: first impressions, second thoughts, and the third degree!

• Netflix is king thanks to having first mover advantage, and making smart financial moves over the past six months, but Netflix’s content is unremarkable. Their recent wins are USA’s Suits and content licensed from Max…they need to do better…
• The biggest loser in the current streaming landscape is the sports fan. Want to watch American Football? You need YouTubeTV, Peacock, and Amazon Prime. Soccer fan? You need Peacock, ESPN Plus, Paramount Plus, and then AppleTV Plus if you care about MLS. Being a live sports fan is really, really expensive.
• The parent companies of HBO and Showtime killed their brands with “Max” and “Paramount Plus”. HBO’s brand name and fuzzy fade in are iconic; “Max” means nothing. Part of me died with this stupid brand change.
• Streaming services lured us in with no advertisements but they’ve learned that the ad tiers generate more revenue. Now they’re trying to price us out to get us to choose the cheaper, ad-driven tier. Smart business but I’ll pay more to avoid the ads.
• Apple has all the resources in the world but they treat their streaming service like everything else they do: offer an unremarkable product and skate off of name. Ted Lasso was good, as was Shrinking, but everything else is filler…
• …and charging for Killers of the Flower Moon during the holidays, then providing it for free once people are back to work, is an embarrassing money grab.
• Amazon doesn’t offer nearly enough in exclusive content. These tech companies are half in, half out.
• Warner Brothers Discovery licensing their content, especially the Marvel Comic Universe IP, to Netflix because they need quick cash feels like a self-own. How do you grow Max by giving your best content to a better service?
• AppleTV’s hardware is insanely elegant to use, though I’m annoyed they didn’t commit to their gaming offering. Roku still feels like a Super Nintendo in a N64 world.
• The free streaming options these days are awesome if you don’t want to spend money. YouTube, RokuTV, and Tubi provide loads of great content at no expense.
• Disney Plus offer loads of great old movies but my kids rarely watch it — they’re busy watching cringe shows on Netflix…
• One huge frustration is the lack of a “previous” button that cable remotes had. Navigating between channels in YouTubeTV is painful…
• …and to further improve the experience, it would be great if AppleTV and Roku would allow users to have two apps side by side; let us build our own multi-view.
• Part of me wants to bin off all of my sports streaming services and simply use StreamEast…but the convenience is just too nice.

Agree or disagree? What did I miss? Let me know in the comments below!

The post Thoughts on Streaming Services: 2024 Edition appeared first on David Walsh Blog.

As the demands of the web change and developers experiment with different user experiences, the need for more native language improvements expands. Our presentation layer, CSS, has done incredibly well in improving capabilities, even if sometimes too slow. The need for native support for automatically expanding textarea elements has been long known…and it’s finally here!

To allow textarea elements to grow vertically and horizontally, add the field-sizing property with a value of content:

textarea {
  field-sizing: content; // default is `fixed`
}

The default value for field-sizing is fixed, signaling current behavior. The new behavior, content, will expand as much as possible. To constrain the size a textarea can grow, use traditional width/max-width and height/max-height properties.

The post AutoGrow Textareas with CSS appeared first on David Walsh Blog.

Visual Studio Code has taken the crown of most used text editor, at least in JavaScript spheres. VSCode is fast, feature-filled, and supports thousands of plugins to boost productivity. Developers can also tweak hundreds of settings to enrich functionality. One such feature is the autoSave feature.

To autoSave files with VS Code, you can add the following to your text editor config:

{
  "files.autoSave": "afterDelay",
  "files.autoSaveDelay": 200
}

Just about every Operating System and web action is instant these days, so eliminating the need for manual save just makes sense. Big thanks to my old MooTools colleague Chris Nakazawa for calling this out!

The post AutoSave with VSCode appeared first on David Walsh Blog.