JavaScript Tutorials
JavaScript closest
When it comes to finding relationships between elements, we traditionally think of a top-down approach. We can thank CSS and
querySelector
/querySelectorAll
for that relationship in selectors. What if we want to find an element's parent based on selector?To look up the element tree and find...JavaScript: Reverse Arrays
Manipulating data is core to any programming language. JavaScript is no exception, especially as JSON has token over as a prime data delivery format. One such data manipulation is reversing arrays. You may want to reverse an array to show most recent transactions, or...
JavaScript Array Group
Managing, sorting, and manipulating data with JavaScript is a skill we've often delegated to third party libraries like lodash. As the JavaScript language progresses, however, these features eventually get. added to the JavaScript specification. Two such APIs for grouping of
Array
data are `Array.prototype.group
...Detect the Content Type in the Clipboard
A user's clipboard is a "catch all" between the operating system and the apps employed on it. When you use a web browser, you can highlight text or right-click an image and select "Copy Image". That made me think about how developers can detect what is...
fetch with Timeout
A few years back I wrote a blog post about how write a
fetch
Promise that times out. The function was effective but the code wasn't great, mostly becauseAbortController
, which allows you to cancel a fetch Promise, did not yet exist. With...Customizing HTML Form Validation
Form validation has always been my least favorite part of web development. You need to duplicate validation on both client and server sides, handle loads of events, and worry about form element styling. To aid form validation, the HTML spec added some new form attributes...
How to Determine a JavaScript Promise’s Status
Promises have changed the landscape of JavaScript. Many old APIs have been reincarnated to use Promises (XHR to fetch, Battery API), while new APIs trend toward Promises. Developers can use
async
/await
to handle promises, orthen
/catch
/finally
with callbacks, but what Promises don't tell...Detect XR Support with JavaScript
A few years ago I wrote an article about how to detect VR support with JavaScript. Since that time, a whole lot has changed. "Augmented reality" became a thing and terminology has moved to "XR", instead of VR or AR. As such...
Document.elementFromPoint
Reacting to events with JavaScript is the foundation of a dynamic experiences on the web. Whether it's a
click
event or another typical action, responding to that action is important. We started with assigning events to specific elements, then moved to event delegation...Detect Browser Bars Visibility with JavaScript
It's one thing to know about what's in the browser document, it's another to have insight as to the user's browser itself. We've gotten past detecting which browser the user is using, and we're now into knowing what pieces of the browser UI users are...