Fupio çevrimiçi paylaşmanın en kolay yolu Daha fazla bilgi »

David Walsh Blog

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

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,

2 yıl önce

David Walsh BlogHTML popover AttributeModals 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

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

2 yıl önce

David Walsh BlogHow to Fix: Windows WASD Keys Reversed with Arrow KeysThis 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

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

2 yıl önce

David Walsh BlogHow to Retrieve WiFi Password on WindowsRemembering 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.

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,

2 yıl önce

David Walsh BlogHow to Set Date Time from Mac Command LineWorking 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

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

2 yıl önce

David Walsh BlogCase Insensitive CSS Attribute SelectorCSS 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

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'

2 yıl önce

David Walsh BlogHow to Add a Header to a curl Requestcurl 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

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

1 yıl önce

David Walsh BlogHow to Download a YouTube Video or ChannelThe 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

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

1 yıl önce

David Walsh BlogEasy way to upload, transform and deliver files and imagesManaging 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

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

264 gün önce

David Walsh BlogFix "This video format is not supported" on YouTube TVSetting up a new computer is bliss -- no old, unused apps and the machine performs much better than the previous. Unfortunately, you may encounter new

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!')
)

262 gün önce

David Walsh BlogJavaScript SpeechSynthesis APIAs 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.

David Walsh Blog

https://limewire.com/
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

2 yıl önce

David Walsh BlogGet Started in AI and NFTs with the Limewire APIAI 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

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

2 yıl önce

David Walsh BlogI'm So Old: Web EditionTime can be a funny thing. I still remember discovering HTML, CSS, and JavaScript coding. I still remember my first college programming course. I still

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:

2 yıl önce

David Walsh BlogDetect Caps Lock with JavaScriptAnyone 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

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

2 yıl önce

David Walsh BlogHow to Override width and height HTML attributes with CSSOne of the HTML elements that frequently comes into collision with CSS is the img element. As we learned in Request Metrics' Fixing Cumulative Layout

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

2 yıl önce

David Walsh BlogDate.now()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

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

2 yıl önce

David Walsh BlogExtract a Number from a String with JavaScriptUser 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

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

2 yıl önce

David Walsh BlogThoughts on Streaming Services: 2024 EditionStreaming services have revolutionized content delivery, sending linear media companies into a panic as they watch traditional cable services decay.

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

2 yıl önce

David Walsh BlogAutoGrow Textareas with CSSAs the demands of the web change and developers experiment with different user experiences, the need for more native language improvements expands. Our

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

2 yıl önce

David Walsh BlogHow to Play Grand Poo World 3The underground world of creating and streaming Super Mario World-based ROM hacks continues to gain popularity. This popularity is a tribute to the

Bu akışı okumanın diğer yolları:RSS akışı