A blog featuring tutorials about JavaScript, HTML5, AJAX, PHP, CSS, WordPress, and everything else development.
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.
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
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.
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)
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.
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 = 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.
How to Download a YouTube Video or Channel
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.
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.
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.
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 post Case Insensitive CSS Attribute Selector 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.
How to Set Date Time from Mac Command Line
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.
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
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.
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
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.
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.
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.
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)
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.
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, 1024px" /> 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 […] The post I’m So Old: Web Edition 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 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 you in web? The post I’m So Old: Web Edition 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 […] The post Detect Caps Lock with JavaScript 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.
How to Override width and height HTML attributes with CSS
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.
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
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.
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 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. 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.
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.
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
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.
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
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.
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! […] The post AutoGrow Textareas with CSS 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.
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.
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 ROM file, so be sure to validate it with JSRomClean. With a successful Grand Poo World 3 created, it’s time to play! <img src="https://davidwalsh.name/demo/2023/11/SCR-20231127-prbg-1024x774.png" width="1024" height="774" alt="" class="wp-image-27792" srcset="https://davidwalsh.name/demo/2023/11/SCR-20231127-prbg-1024x774.png 1024w, https://davidwalsh.name/demo/2023/11/SCR-20231127-prbg-300x227.png 300w, https://davidwalsh.name/demo/2023/11/SCR-20231127-prbg-768x581.png 768w" sizes="(max-width: 1024px) 100vw, 1024px" /> 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.