The Code

You can direct the browser to utter speech with window.speechSynthesis and SpeechSynthesisUtterance:

window.speechSynthesis.speak(
    new SpeechSynthesisUtterance('Hey Jude!')
)

speechSynthesis.speak will robotically tell the user anything you provide as a SpeechSynthesisUtterance string. Support for this API is available in all modern browsers.

I wouldn’t consider speechSynthesis as a replacement for native accessibility tools, but this API could be used to improve what native tools provide!

The post JavaScript SpeechSynthesis API appeared first on David Walsh Blog.

Not being able to watch my favorite live show is a real problem. After a bit of research, I found the solution to the “This video format is not supported” error message. To solve this problem:

1. Open your browser settings and do a search for DRM
2. You should see reference to Widevine, a form of DRM
3. Enable this Widevine setting
4. Restart your web browser

Enabling Widevine within your browser will make your YouTube TV video feed work properly. Better than needing to install a codec like the good old days, right?

The post Fix “This video format is not supported” on YouTube TV appeared first on David Walsh Blog.

The Setup

The first step in the Filestack journey is signing up for free. You’ll get at 21 day free trial and can cancel at any time. Once signed up, you’ll have full access to the Filestack libraries of code. You’ll also want to spend time catching up on the Filestack documentation, which is a developer’s dream — code samples and detailed usage information.

Upload

Allowing your users to take advantage of easy uploading with Filestack starts with the

// Using JavaScript
const client = filestack.init("apikey");
const picker = client.picker(); 
picker.open();

The result is an elegant, highly functional, and feature filled file uploading UI component:

This great utility integrates with 20+ popular services like Google Drive, Dropbox, GitHub, Facebook, Instagram, and more. As the Filestack picker also illustrates, users can take advantage of the ease of dragging and dropping files to upload.

If you prefer to do your uploading on the back end, you can use the Filestack Python library:

from filestack import Client

client = Client(APIKEY)

store_params = {
    'location': 's3', 
    'path': 'folder/subfolder/',
    'upload_tags': {
          "foo":"bar"
    }
}
filelink = client.upload(filepath='path/to/filename.jpg', store_params=store_params)

Unlike many services, Filestack provides a number of code libraries to make the developer experience much easier. With files uploaded, it’s time to transform!

Transform

Users can upload any type of file at any size or format, so the ability to quickly and easily transform file that file into something more to the developer’s liking is key. Transformations can be applied to videos, images, and even documents. Transformations can also be done on in real time or via sync workflows.

For example, you can resize and manipulate images by adjusting URL parameters:

// Resize an image to have a width of 300px
https://cdn.filestackcontent.com/resize=width:300/pdn7PhZdT02GoYZCVYeF

// Add a color filter, rotate the image, and add a "polaroid" border to the image
https://cdn.filestackcontent.com/resize=width:300/sepia=tone:80/polaroid/pdn7PhZdT02GoYZCVYeF

So what else can be done with transformations beside file dimension and effects? Lots!

• Enhancing: Upscale and remove red eye effects
• Borders & Effects: Rounded corners, vignette, polaroid, torn edges, shadows
• Filters: Sharpen, blur, b&w, Sepia, oil paint, pixelate, and more
• Facial Detection: detect, crop, pixelate, and blur faces
• File Type: format conversion, animation (image to GIF), ASCII, collage, QR code, screenshot
• Documents: PDF create and convert, document to image

All of these commands can be combined to completely transform any file into exactly what you’d like to present to your users! And if you’d prefer to have a UI for users to transform media themselves, you can!

Deliver

With the files uploaded and transforms completed, the last step is delivering to clients. That delivery is incredibly important, as reliability and fast rendering can impact user retention and business conversion.

Filestack’s CDN caches Filestack URLs the first time they are accessed, such as in the case of storage aliases or transformations. The cached copy of any unique Filestack URL will live for 30 days – it will then be re-cached only when it is requested again.

Try Filestack!

Filestack’s platform is incredibly flexible, powerful, and useful. From the start of uploading, to transforming into a custom file, and delivering that file quickly, Filestack is a great platform that takes those files from start to finish; from source to consumer!

The post Easy way to upload, transform and deliver files and images (Sponsored) appeared first on David Walsh Blog.

To download an entire channel, you can use yt-dlp:

yt-dlp https://www.youtube.com/@beetlejuicearchives3490

If you’re like me and only care for the audio, you can use a few more arguments:

yt-dlp -x --audio-format mp3 https://www.youtube.com/@beetlejuicearchives3490

youtube-dl used to be the standard for downloading YouTube videos but yt-dlp seems to have taken the throne. YouTube has such a wealth of information on just about anything, be sure to download content for travel, long walks, or any other reason!

The post How to Download a YouTube Video or Channel appeared first on David Walsh Blog.

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.

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.

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.

The Shell Code

Open cmd and execute the following command:

netsh wlan show profile name="David Walsh's Network" key=clear

The result of the command, assuming the network is found, is a long text output with a variety of information about the network. To get the see the password for the network, look under the “Security settings” heading which will look like this:

Security settings
-----------------
    Authentication         : WPA2-Personal
    Cipher                 : CCMP
    Authentication         : WPA2-Personal
    Cipher                 : GCMP
    Security key           : Present
    Key Content            : **THE_PLAIN_TEXT_PASSWORD**

As with any complicated command line format, it’s best to create an alias so that you don’t need to remember the full string!

The post How to Retrieve WiFi Password on Windows appeared first on David Walsh Blog.

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.

Modals have been an important part of websites for two decades. Stacking contents and using fetch to accomplish tasks are a great way to improve UX on both desktop and mobile. Unfortunately most developers don’t know that the HTML and JavaScript specs have implemented a native modal system via the popover attribute — let’s check it out!

The HTML

Creating a native HTML modal consists of using the popovertarget attribute as the trigger and the popover attribute, paired with an id, to identify the content element:

<!-- 
  "popovertarget" attribute will map to "id" of popover contents
-->
<button popovertarget="popover-contents">Open popover</button>
<div id="popover-contents" popover>This is the contents of the popover</div>

Upon clicking the button, the popover will open. The popover, however, will not have a traditional background layer color so we’ll need to implement that on our own with some CSS magic.

The CSS

Styling the contents of the popover content is pretty standard but we can use the browser stylesheet selector’s pseudo-selector to style the “background” of the modal:

/* contents of the popover */
[popover] {
  background: lightblue;
  padding: 20px;
}

/* the dialog's "modal" background */
[popover]:-internal-popover-in-top-layer::backdrop {
  background: rgba(0, 0, 0, .5);  
}

:-internal-popover-in-top-layer::backdrop represents the “background” of the modal. Traditionally that UI has been an element with opacity such to show the stacking relationship.

The post HTML popover Attribute appeared first on David Walsh Blog.

AI media creation has expanded to incredible video art and a host of other important improvements, and LimeWire is leading the way in creating an awesome interface for the average user to become an AI artist. Limewire has just released its Developer API, a method for engineers like us to create dynamic AI art on the fly!

Quick Hits

• Free to sign up!
• Provides methods to create a variety of quality images from any number of AI services and algorithms
• Create images based on text and other images
• Modify existing images to scale them, remove backgrounds, and more
• Use JavaScript, PHP, Python, or any of your favorite languages
• Documentation is clean and easy to understand
• Very easy to get started

A simple API call is as easy as:

curl -i -X POST \
  https://api.limewire.com/api/image/generation \
  -H 'Authorization: Bearer MY_API_KEY' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'X-Api-Version: v1' \
  -d '{
    "prompt": "A beautiful princess in front of her kingdom",
    "aspect_ratio": "1:1"
  }'

You can also upscale an existing, uploaded image:

curl -i -X POST \
  https://api.limewire.com/api/image/upscaling \
  -H 'Authorization: Bearer MY_API_KEY' \
  -H 'Content-Type: application/json' \
  -H 'Accept: application/json' \
  -H 'X-Api-Version: v1' \
  -d '{
    "image_asset_id": "116a972f-666a-44a1-a3df-c9c28a1f56c0",
    "upscale_factor": 4
  }'

The value in creating AI art dynamically is hard to stress the enormity of for engineers and authors alike. Rather than scouring Google Images for image to match my blog post, I can use LimeWire’s API to send keywords from the article to create a representative image. Likewise, authors can feed their story to LimeWire to generate illustrations! You can even integrate the developer API into your platform for your users to employ!

Give LimeWire’s new developer API a try! LimeWire lets you create AI images where you are!

The post Get Started in AI and NFTs with the Limewire API (Sponsored) appeared first on David Walsh Blog.

Time can be a funny thing. I still remember discovering HTML, CSS, and JavaScript coding. I still remember my first college programming course. I still remember my first day at my first coding job, then my first day at my second coding job, and then my first day at Mozilla. I still remember my first day coding for MetaMask. This year marks my 20th year as a professional software engineer and it’s happened in the blink of an eye.

Every once in a while I will make an old programming reference to a much younger engineer and then realize they have no idea what I’m talking about.

I’m so old…

• Webpage layouts were being done with <table>s and this new “CSS float” property was becoming the new standard
• Rounded corners were achieved via images and VML hacks for Internet Explorer
• FTP was the best way to upload websites changes
• SVN and copying its trunk was the best versioning tool
• alert and confirm were the standard for “modals”
• Firebug was the best debugging tool available
• The “standard” for getting videos to play properly was finding the right codec to install
• ActionScript knowledge was as valuable as JavaScript knowledge
• Dreamweaver was best in class text editor and design tool
• XML was the future of data structures
• Mobile-first? Mobile didn’t exist
• Reactive navigation? How about Java Applets…
• …or even different <img src="proxy.php?url="> upon mouseover and mouseleave!
• Want to code a desktop app with web tech? Try Adobe Air!
• NPM stood for “not performant, man”
• Voting on a poll meant the page would refresh
• “Social media” meant HotOrNot.com
• The love sound of the web was a 56k modem connection purrrrr
• Disabling right-click enforced image security
• Bitmap (.bmp) was a viable image format
• JavaScript had a competitor called JScript
• SpyJax’ing let you detect where your user had been
• Cookies were the pinnacle of user tracking
• Social media wall? It’s called a “guestbook”…
• …and a friends list? It’s called a “web ring’
• Search engine optimization was spamming the <title> with keywords=

Whew, those where the days. How old are you in web?

The post I’m So Old: Web Edition appeared first on David Walsh Blog.

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.

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.

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 make a site feel slow to a user.

CLS and the rest of the Core Web Vitals are super important. Not only because they measure user experience, but also because they influence the pagerank of a site in search. And search traffic is life for bloggers, media sites, e-commerce stores, and pretty much everyone with a website.

If we can fix the site’s CLS problem, we’ll give readers a faster experience, and boost the search ranking so David can help even more people. Sounds like a great incentive, let’s figure it out.

Crashing with Google Lighthouse

To find a performance problem, many developers will use a tool like Google Lighthouse. I ran a Lighthouse report on David’s site, and here’s what I got.

A perfect score! Let’s pack it up and go home.

The trouble is that Google Lighthouse is a lie. Real users won’t have this performance. That score only represents a single test, from my lightning-fast computer, in the USA, on a fast broadband connection.

David’s real users come from all over the world, on varying devices and networks, and at all times of the day. Their performance experience is far from perfect. That’s why we need to get real user monitoring for the performance, otherwise we might never know that there is a problem.

Where are the CLS problems?

David has been writing for a long time and has hundreds of posts on his site. Request Metrics tracks the CLS score per page so we can zero-in on the problems.

The largest traffic page is the root page, and that has a good CLS. But many of his posts, like Play Grand Poo World and Pornhub Interview have troubling CLS scores. We can also track the elements responsible for CLS, and for most of the posts its main > article > p. That means the first paragraph of the article is the thing shifting. Why would it do that?

What is common about these posts with the worst CLS scores? Images. Images are a very common cause of CLS problems because a browser doesn’t always know how big an image is until it’s downloaded. The browser assumes it’s 0x0 until it has the image, then shifts everything around it to make room.

Posts with lots of images would shift many times as each image was downloaded and the article shifted to make room for the new content.

Using images correctly for CLS

To avoid layout shifts when using images, we need to give the browser hints about how big the images will be. The browser will use these hints to reserve space in the layout for the image when it’s finished downloading.

<img src="proxy.php?url=/path/to/image" width="300" height="100" />

Notice that the width and height are specified as their own attributes — not part of a style tag. These attributes set both a base size of the image as well as the aspect ratio to use. You can still use CSS to make the image bigger or smaller from here.

Also notice that there is no px unit specified.

Image Sizes in WordPress

DavidWalsh.name is hosted on WordPress, where there are some built-in tools to do this. We can utilize wp_image_src_get_dimensions to get the dimensions of images he’s using and add them to the markup.

Proving it works

David made the image changes a few days ago, and we’re already seeing an improvement. CLS has dropped 20% to 0.123. We’re real close to the “Good” range of CLS now.

There’s still some issues to sort out around fonts, but that will be a story for another time and another post.

If you’re looking to improve the real performance of your site, or worried about losing your SEO juice from Core Web Vital problems, have a look at Request Metrics. It’s got the tools to track your performance and actionable tips to actually fix the problems.

Plus it’s free, so it’s got that going for it.

The post Fixing Cumulative Layout Shift Problems on DavidWalshBlog appeared first on David Walsh Blog.

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.

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.

• 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.

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.

The underground world of creating and streaming Super Mario World-based ROM hacks continues to gain popularity. This popularity is a tribute to the creativity of gamers and the quality of the original 30 year old video game’s mechanics. Over the past decade, incredible ROM hacks like Grand Poo World 1 and 2, Invictus, and Dram World have brought joy (and horror) to the Mario community. Sure, Nintendo released Mario Maker and Mario Maker 2, but I love SMW Central patches because they allow all of us to create, much like open source.

The most anticipated hack in years, Grand Poo World 3, was just released and is taking the Super Mario World community by storm. You cannot, however, just download GPW3; due to legal reasons, and the ability to modify it further, the process takes some work. Let’s learn how to build Grand Poo World 3!

What You’ll Need

You’ll need multiple apps and files to build and play Grand Poo World 3:

• The Grand Poo World 3 bps file from SMWCentral
• A clean ROM file (with .smc file extension) for Super Mario World (…Google helps; use JSRomClean to verify your file)
• A patching utility for your OS (MultiPatch for macOS, FloatingIPS for Windows)
• An emulator to play the resulting .smc file (OpenEmu for Mac, Snes9x for Windows)

Patching Grand Poo World 3

With the files and utilities available, open the patching utility and provide the path, Super Mario World ROM File, and patched file path:

If the input files are successful, you’ll get a working .smc file for GPW3! The risk is usually the SMW ROM file, so be sure to validate it with JSRomClean.

With a successful Grand Poo World 3 created, it’s time to play!

The whole process of creating Grand Poo World 3 gives me joy due to two of my loves: video games and open source coding. SMWCentral has thousands of patches you can apply on top of and parellel to ROM hacks to implement features like retry system and loads more.

Enjoy (the pain of) Grand Poo World 3!

The post How to Play Grand Poo World 3 appeared first on David Walsh Blog.