David Walsh Blog

https://davidwalsh.name

A blog featuring tutorials about JavaScript, HTML5, AJAX, PHP, CSS, WordPress, and everything else development.

フィード

記事のアイキャッチ画像
How to Download a YouTube Video or Channel
David Walsh Blog
<p>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 [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/download-youtube-mp3">How to Download a YouTube Video or Channel</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
4ヶ月前
記事のアイキャッチ画像
How to Add a Header to a curl Request
David Walsh Blog
<p>curl is one of those great utilities that&#8217;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 [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/curl-add-header">How to Add a Header to a curl Request</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
5ヶ月前
記事のアイキャッチ画像
Case Insensitive CSS Attribute Selector
David Walsh Blog
<p>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 [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/css-attribute-case">Case Insensitive CSS Attribute Selector</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
6ヶ月前
記事のアイキャッチ画像
How to Set Date Time from Mac Command Line
David Walsh Blog
<p>Working on a web extension that ships to an app store and isn&#8217;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&#8217;t know how to quickly change the date on your local [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/mac-set-date">How to Set Date Time from Mac Command Line</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
6ヶ月前
記事のアイキャッチ画像
How to Retrieve WiFi Password on Windows
David Walsh Blog
<p>Remembering the WiFi password when on a guest network is never easy. Even worse is when it&#8217;s no longer posted and someone else is asking you for it. Luckily there&#8217;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 [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/retrieve-wifi-password-windows">How to Retrieve WiFi Password on Windows</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
7ヶ月前
記事のアイキャッチ画像
How to Fix: Windows WASD Keys Reversed with Arrow Keys
David Walsh Blog
<p>This past weekend I had the opportunity to be what every father wants, if only for a moment: the &#8220;cool dad&#8221;. 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 [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/fix-wasd-keys">How to Fix: Windows WASD Keys Reversed with Arrow Keys</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
8ヶ月前
記事のアイキャッチ画像
HTML popover Attribute
David Walsh Blog
<p>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&#8217;t know that the HTML and JavaScript specs have implemented a native modal system via the popover attribute &#8212; let&#8217;s check [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/html-popover-attribute">HTML popover Attribute</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
8ヶ月前
記事のアイキャッチ画像
Get Started in AI and NFTs with the Limewire API (Sponsored)
David Walsh Blog
<p>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 [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/get-started-in-ai-and-nfts-with-the-limewire-api">Get Started in AI and NFTs with the Limewire API (Sponsored)</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
9ヶ月前
記事のアイキャッチ画像
I&#8217;m So Old: Web Edition
David Walsh Blog
<p>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 [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/im-so-old-1">I&#8217;m So Old: Web Edition</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
9ヶ月前
記事のアイキャッチ画像
Detect Caps Lock with JavaScript
David Walsh Blog
<p>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&#8217;t so obvious. That leads to the user&#8217;s password being incorrect, which is an annoyance. Ideally developers could [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/detect-caps-lock">Detect Caps Lock with JavaScript</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
10ヶ月前
記事のアイキャッチ画像
How to Override width and height HTML attributes with CSS
David Walsh Blog
<p>One of the HTML elements that frequently comes into collision with CSS is the img element. As we learned in Request Metrics&#8217; Fixing Cumulative Layout Shift Problems on DavidWalshBlog article, providing image dimensions within the image tag will help to improve your website&#8217;s score. But in a world where responsive design is king, we need [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/css-override-width-height">How to Override width and height HTML attributes with CSS</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
1年前
記事のアイキャッチ画像
Fixing Cumulative Layout Shift Problems on DavidWalshBlog
David Walsh Blog
<p>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 [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/fixing-cumulative-layout-shift-problems-on-davidwalshblog">Fixing Cumulative Layout Shift Problems on DavidWalshBlog</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
1年前
記事のアイキャッチ画像
Date.now()
David Walsh Blog
<p>Ask any software engineer and they&#8217;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 &#8212; usually a timestamp. To get the immediate time [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/date-now">Date.now()</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
1年前
記事のアイキャッチ画像
Extract a Number from a String with JavaScript
David Walsh Blog
<p>User input from HTML form fields is generally provided to JavaScript as a string. We&#8217;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&#8217;s rely on regular expressions to extract those numbers! To employ a regular expression to [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/javascript-extract-string">Extract a Number from a String with JavaScript</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
1年前
記事のアイキャッチ画像
Thoughts on Streaming Services: 2024 Edition
David Walsh Blog
<p>Streaming services have revolutionized content delivery, sending linear media companies into a panic as they watch traditional cable services decay. &#8220;Cutting the cord&#8221; is a common practice these days, but the streaming landscape isn&#8217;t perfect. We&#8217;re a decade into streaming so I wanted to share my thoughts on the state of new media: first impressions, [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/streaming-2024">Thoughts on Streaming Services: 2024 Edition</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
1年前
記事のアイキャッチ画像
AutoGrow Textareas with CSS
David Walsh Blog
<p>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&#8230;and it&#8217;s finally here! [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/autogrow-textareas">AutoGrow Textareas with CSS</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
1年前
記事のアイキャッチ画像
How to Play Grand Poo World 3
David Walsh Blog
<p>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&#8217;s mechanics. Over the past decade, incredible ROM hacks like Grand Poo World 1 and 2, Invictus, and Dram [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/play-grand-poo-world-3">How to Play Grand Poo World 3</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
1年前
記事のアイキャッチ画像
How to Get the Current Branch Name with git
David Walsh Blog
<p>Most developers spoil themselves with fun command line utilities to make their work easier and more efficient. One such command line helper allows developers to always show the git branch in the command line. How can you get the current branch? With this handy snippet: git branch --show-current It&#8217;s great to keep this snippet around [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/git-current-branch">How to Get the Current Branch Name with git</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
1年前
記事のアイキャッチ画像
AutoSave with VSCode
David Walsh Blog
<p>Visual Studio Code has taken the crown of most used text editor, at least in JavaScript spheres. VSCode is fast, feature-filled, and supports thousands of plugins to boost productivity. Developers can also tweak hundreds of settings to enrich functionality. One such feature is the autoSave feature. To autoSave files with VS Code, you can add [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/autosave-with-vscode">AutoSave with VSCode</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
1年前
記事のアイキャッチ画像
How to Detect Failed Requests via Web Extensions
David Walsh Blog
<p>One of the best things that ever happened to t he user experience of the web has been web extensions. Browsers are powerful but extensions bring a new level of functionality. Whether it&#8217;s crypto wallets, media players, or other popular plugins, web extensions have become essential to every day tasks. Working on MetaMask, I am [&#8230;]</p><p>The post <a rel="nofollow" href="https://davidwalsh.name/browser-webrequest-onerroroccurred">How to Detect Failed Requests via Web Extensions</a> appeared first on <a rel="nofollow" href="https://davidwalsh.name">David Walsh Blog</a>.</p><p><a href="https://tkjs.us/dwb"><img style="margin:0 auto" alt="" src="https://davidwalsh.name/demo/tjs_block-1.svg"></a></p>
1年前