David Walsh Blog
type: channel
description: A blog featuring tutorials about JavaScript, HTML5, AJAX, PHP, CSS, WordPress, and everything else development.
date: 2025-11-20T00:40:04Z
update period: hourly
update frequency: 1
update base: 2000-01-01T12:00+00:00
generator agent: https://wordpress.org/
items: JavaScript SpeechSynthesis API
items: Fix “This video format is not supported” on YouTube TV
items: Easy way to upload, transform and deliver files and images (Sponsored)
items: How to Download a YouTube Video or Channel
items: How to Add a Header to a curl Request
items: Case Insensitive CSS Attribute Selector
items: How to Set Date Time from Mac Command Line
items: How to Retrieve WiFi Password on Windows
items: How to Fix: Windows WASD Keys Reversed with Arrow Keys
items: HTML popover Attribute
items: Get Started in AI and NFTs with the Limewire API (Sponsored)
items: I’m So Old: Web Edition
items: Detect Caps Lock with JavaScript
items: How to Override width and height HTML attributes with CSS
items: Fixing Cumulative Layout Shift Problems on DavidWalshBlog
items: Date.now()
items: Extract a Number from a String with JavaScript
items: Thoughts on Streaming Services: 2024 Edition
items: AutoGrow Textareas with CSS
items: How to Play Grand Poo World 3

JavaScript SpeechSynthesis API
type: item
date: 2025-11-20T00:39:07Z
creator: David Walsh
subject: Uncategorized
description: As the web continues to be the medium for all users, standards bodies need to continue to provide new APIs to enrich user experience and accessibility. One underused API for unsighted users is speechSynthesis, an API to programmatically direct the browser to audibly speak any arbitrary string. The Code You can direct the browser to […] The post JavaScript SpeechSynthesis API appeared first on David Walsh Blog.
encoded: As the web continues to be the medium for all users, standards bodies need to continue to provide new APIs to enrich user experience and accessibility. One underused API for unsighted users is speechSynthesis, an API to programmatically direct the browser to audibly speak any arbitrary string. 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.

Fix “This video format is not supported” on YouTube TV
type: item
date: 2025-11-17T23:47:34Z
creator: David Walsh
subject: Uncategorized
description: Setting up a new computer is bliss — no old, unused apps and the machine performs much better than the previous. Unfortunately, you may encounter new problems based on the new hardware. One such issue I encountered with my new MacBook was a “This video format is not supported” message when I went to YouTube […] The post Fix “This video format is not supported” on YouTube TV appeared first on David Walsh Blog.
encoded: Setting up a new computer is bliss — no old, unused apps and the machine performs much better than the previous. Unfortunately, you may encounter new problems based on the new hardware. One such issue I encountered with my new MacBook was a “This video format is not supported” message when I went to YouTube TV. 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: Open your browser settings and do a search for DRM You should see reference to Widevine, a form of DRM Enable this Widevine setting Restart your web browser <img src="https://davidwalsh.name/demo/2025/11/SCR-20251116-labx-1024x719.png" alt="" class="wp-image-27894" srcset="https://davidwalsh.name/demo/2025/11/SCR-20251116-labx-1024x719.png 1024w, https://davidwalsh.name/demo/2025/11/SCR-20251116-labx-300x211.png 300w, https://davidwalsh.name/demo/2025/11/SCR-20251116-labx-768x539.png 768w, https://davidwalsh.name/demo/2025/11/SCR-20251116-labx.png 1532w" sizes="(max-width: 1024px) 100vw, 1024px" /> 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.

Easy way to upload, transform and deliver files and images (Sponsored)
type: item
date: 2025-03-24T22:58:30Z
creator: David Walsh
subject: Sponsored
subject: Uncategorized
description: Managing media is a really difficult task if you try to do all of it yourself, especially if the media comes from other sources. The file can be submitted in any state and size, but what if you need something really specific? You can code it all yourself or you can use an awesome service […] The post Easy way to upload, transform and deliver files and images (Sponsored) appeared first on David Walsh Blog.
encoded: Managing media is a really difficult task if you try to do all of it yourself, especially if the media comes from other sources. The file can be submitted in any state and size, but what if you need something really specific? You can code it all yourself or you can use an awesome service like Filestack, a utility to upload, transform, and deliver that media in the most optimal style imaginable! 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: <img src="https://davidwalsh.name/demo/2025/03/SCR-20250316-ntgo-1024x567.png" alt="" class="wp-image-27886" srcset="https://davidwalsh.name/demo/2025/03/SCR-20250316-ntgo-1024x567.png 1024w, https://davidwalsh.name/demo/2025/03/SCR-20250316-ntgo-300x166.png 300w, https://davidwalsh.name/demo/2025/03/SCR-20250316-ntgo-768x425.png 768w, https://davidwalsh.name/demo/2025/03/SCR-20250316-ntgo.png 1564w" sizes="(max-width: 1024px) 100vw, 1024px" /> 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 …

How to Download a YouTube Video or Channel
type: item
date: 2024-09-04T04:42:36Z
creator: David Walsh
subject: Quick Tips
subject: Shell
description: The ability to download media on the internet almost feels like a lost art. When I was in my teens, piracy of mp3s, movies, and just about everything else via torrents and apps like Kazaa, LimeWire, Napster, etc. was in full swing. These days sites use blob URLs and other means to prevent downloads. Luckily […] The post How to Download a YouTube Video or Channel appeared first on David Walsh Blog.
encoded: The ability to download media on the internet almost feels like a lost art. When I was in my teens, piracy of mp3s, movies, and just about everything else via torrents and apps like Kazaa, LimeWire, Napster, etc. was in full swing. These days sites use blob URLs and other means to prevent downloads. Luckily we have tools like yt-dlp to download individual YouTube videos or entire channels of content. 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.

How to Add a Header to a curl Request
type: item
date: 2024-08-03T16:51:46Z
creator: David Walsh
subject: Quick Tips
subject: Shell
description: 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 […] The post How to Add a Header to a curl Request appeared first on David Walsh Blog.
encoded: 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.

Case Insensitive CSS Attribute Selector
type: item
date: 2024-06-19T11:31:27Z
creator: David Walsh
subject: CSS
subject: Quick Tips
description: 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 post Case Insensitive CSS Attribute Selector appeared first on David Walsh Blog.
encoded: 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.

How to Set Date Time from Mac Command Line
type: item
date: 2024-06-17T12:01:38Z
creator: David Walsh
subject: Quick Tips
subject: Shell
description: 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 […] The post How to Set Date Time from Mac Command Line appeared first on David Walsh Blog.
encoded: 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.

How to Retrieve WiFi Password on Windows
type: item
date: 2024-05-13T10:45:29Z
creator: David Walsh
subject: Microsoft
subject: Shell
description: Remembering the WiFi password when on a guest network is never easy. Even worse is when it’s no longer posted and someone else is asking you for it. Luckily there’s a built in Windows command to recover the password of a given WiFi network. The Shell Code Open cmd and execute the following command: netsh […] The post How to Retrieve WiFi Password on Windows appeared first on David Walsh Blog.
encoded: Remembering the WiFi password when on a guest network is never easy. Even worse is when it’s no longer posted and someone else is asking you for it. Luckily there’s a built in Windows command to recover the password of a given WiFi network. 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.

How to Fix: Windows WASD Keys Reversed with Arrow Keys
type: item
date: 2024-05-02T01:55:27Z
creator: David Walsh
subject: Quick Tips
description: 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 […] The post How to Fix: Windows WASD Keys Reversed with Arrow Keys appeared first on David Walsh Blog.
encoded: 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.

HTML popover Attribute
type: item
date: 2024-04-15T11:19:02Z
creator: David Walsh
subject: CSS
subject: HTML5
description: 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 […] The post HTML popover Attribute appeared first on David Walsh Blog.
encoded: 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: Open popover This is the contents of the popover 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.

Get Started in AI and NFTs with the Limewire API (Sponsored)
type: item
date: 2024-03-25T21:50:46Z
creator: David Walsh
subject: Sponsored
description: 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 post Get Started in AI and NFTs with the Limewire API (Sponsored) appeared first on David Walsh Blog.
encoded: 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 <img src="https://davidwalsh.name/demo/2024/03/SCR-20240324-iiuh-1024x892.png" alt="" class="wp-image-27841" srcset="https://davidwalsh.name/demo/2024/03/SCR-20240324-iiuh-1024x892.png 1024w, https://davidwalsh.name/demo/2024/03/SCR-20240324-iiuh-300x261.png 300w, https://davidwalsh.name/demo/2024/03/SCR-20240324-iiuh-768x669.png 768w, https://davidwalsh.name/demo/2024/03/SCR-20240324-iiuh.png 1146w" sizes="(max-width: 1024px) 100vw, 1024px" /> 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" }' <img src="https://davidwalsh.name/demo/2024/03/9b61cb1b-ce99-420f-98da-112730ef4a7a.jpeg" alt="" class="wp-image-27842" srcset="https://davidwalsh.name/demo/2024/03/9b61cb1b-ce99-420f-98da-112730ef4a7a.jpeg 1024w, https://davidwalsh.name/demo/2024/03/9b61cb1b-ce99-420f-98da-112730ef4a7a-150x150.jpeg 150w, https://davidwalsh.name/demo/2024/03/9b61cb1b-ce99-420f-98da-112730ef4a7a-300x300.jpeg 300w, https://davidwalsh.name/demo/2024/03/9b61cb1b-ce99-420f-98da-112730ef4a7a-768x768.jpeg 768w" sizes="(max-width: 1024px) 100vw, 102…

I’m So Old: Web Edition
type: item
date: 2024-03-18T13:00:20Z
creator: David Walsh
subject: Theory / Ideas
description: 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 […] The post I’m So Old: Web Edition appeared first on David Walsh Blog.
encoded: 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 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 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 with keywords= Whew, those where the days. How old are yo…

Detect Caps Lock with JavaScript
type: item
date: 2024-02-06T10:33:10Z
creator: David Walsh
subject: JavaScript
description: 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 […] The post Detect Caps Lock with JavaScript appeared first on David Walsh Blog.
encoded: 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.

How to Override width and height HTML attributes with CSS
type: item
date: 2024-02-05T11:28:01Z
creator: David Walsh
subject: CSS
subject: HTML5
description: 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 […] The post How to Override width and height HTML attributes with CSS appeared first on David Walsh Blog.
encoded: 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.

Fixing Cumulative Layout Shift Problems on DavidWalshBlog
type: item
date: 2024-01-24T11:56:41Z
creator: Todd Gardner
subject: Optimization
subject: Performance
description: 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 […] The post Fixing Cumulative Layout Shift Problems on DavidWalshBlog appeared first on David Walsh Blog.
encoded: 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 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 ha…

Date.now()
type: item
date: 2024-01-17T12:06:16Z
creator: David Walsh
subject: JavaScript
subject: Quick Tips
description: 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 […] The post Date.now() appeared first on David Walsh Blog.
encoded: 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.

Extract a Number from a String with JavaScript
type: item
date: 2024-01-16T11:48:41Z
creator: David Walsh
subject: JavaScript
subject: Quick Tips
description: 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 […] The post Extract a Number from a String with JavaScript appeared first on David Walsh Blog.
encoded: 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.

Thoughts on Streaming Services: 2024 Edition
type: item
date: 2024-01-15T11:08:32Z
creator: David Walsh
subject: Theory / Ideas
description: 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, […] The post Thoughts on Streaming Services: 2024 Edition appeared first on David Walsh Blog.
encoded: 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 th…

AutoGrow Textareas with CSS
type: item
date: 2023-12-18T11:55:51Z
creator: David Walsh
subject: CSS
subject: HTML5
description: 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! […] The post AutoGrow Textareas with CSS appeared first on David Walsh Blog.
encoded: 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.

How to Play Grand Poo World 3
type: item
date: 2023-11-28T00:35:41Z
creator: David Walsh
subject: Games
description: 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 […] The post How to Play Grand Poo World 3 appeared first on David Walsh Blog.
encoded: 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: <img src="https://davidwalsh.name/demo/2023/11/SCR-20231127-psbj-1024x702.png" alt="" class="wp-image-27791" width="580" height="397" srcset="https://davidwalsh.name/demo/2023/11/SCR-20231127-psbj-1024x702.png 1024w, https://davidwalsh.name/demo/2023/11/SCR-20231127-psbj-300x206.png 300w, https://davidwalsh.name/demo/2023/11/SCR-20231127-psbj-768x526.png 768w, https://davidwalsh.name/demo/2023/11/SCR-20231127-psbj.png 1030w" sizes="(max-width: 580px) 100vw, 580px" /> If the input files are successful, you’ll get a working .smc file for GPW3! The risk is usually the SMW R…