How to Open an App from Anywhere on Mac Command Line / / No Comments Many engineers like myself live in the command line, and perform actions from command line that most others would click an icon for. I’ve always found opening apps from command line on Macs painful. You need to references the Applications directory, add .app to the name, etc. I just want to open apps by name. To open an app from any directory by its simple name, you can use the -a argument to open: open -a Cyberduck # Works regardless of case as well open -a CyBeRdUcK I love -a for a command like open. Being able to open any app by name is exactly what I want! The post How to Open an App from Anywhere on Mac Command Line appeared first on David Walsh Blog. David Walsh Blog… more → Posted in: JavaScript Tagged with: Anywhere, Command, from, line, open
Customizing HTML Form Validation / / No Comments 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 like required and pattern to act as very basic validation. Did you know, however, that you can control native form validation using JavaScript? validity Each form element (input, for example) provides a validity property which represents a ValidityState. ValidityState looks something like this: // input.validity { badInput: false, customError: true, patternMismatch: false, rangeOverflow: false, rangeUnderflow: false,... more → Posted in: JavaScript Tagged with: Customizing, form, HTML, Validation
5 Web Design Trends for 2023 That You Should Pay Attention To (Sponsored) / / No Comments The start of a new year is usually a time when we start looking for ways to make something a little better. That something could be our life, work, or what we produce. Web designers, for example, might look for ways to make their designs more interesting or effective. In this post we will focus on 5 web design trends that are designed to help users get the most from the websites they visit and we will use 10 pre-built websites from BeTheme to demonstrate how best to implement those trends . BeTheme is one of the world’s most popular and highly-rated WordPress Themes with 268,000+ sales and a 4.83/5 star-rating. 5 new web design trends for 2023 To improve anything, you have to know what it does... more → Posted in: JavaScript Tagged with: 2023, Attention, design, should, Sponsored, Trends
A Simple Slideshow Web Component / / No Comments As I continue to play around with and learn more about web components, I thought I’d build a simple component to make it easier to add a slideshow. By that, I mean something that renders one picture but provides controls to go to more images. I’ve probably built this many times in the past, both in JavaScript and server-side code, and I thought it would be a nice candidate for a component. As with most of my demos so far, there’s a lot more that could be done with it, but I thought I’d share what I have so far. Once again I want to give a shout-out to Simon MacDonald for helping me get this code working. (At the end of the post, I’ll share the mistake I made, as... more → Posted in: JavaScript Tagged with: Component, simple, Slideshow
fetch with Timeout / / No Comments 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 because AbortController , which allows you to cancel a fetch Promise, did not yet exist. With AbortController and AbortSignal available, let’s create a better JavaScript function for fetching with a timeout: Much like the original function, we’ll use setTimeout to time to the cancellation but we’ll use the signal with the fetch request: async function fetchWithTimeout(url, opts = {}, timeout = 5000) { // Create the AbortController instance, get AbortSignal const abortController = new AbortController(); const { signal }... more → Posted in: JavaScript Tagged with: fetch, Timeout
Followup to My Intl Short Number Post / / No Comments A few days ago I shared a blog post about using the Intl object in JavaScript to create short, more readable numbers. So for example, instead of 9123456, it would display 9.1M. This was done using the notation option in Intl.NumberFormat. Yesterday I randomly ran into an interesting modification on this using yet another option, compactDisplay. The compactDisplay option is only used when notation is set to compact. It supports two options, short which is default and what I demonstrated in the previous post, and long. So given a number, i, you would use it like so: new Intl.NumberFormat('en-US', { notation:'compact', compactDisplay:'long'}).format(i); And the result is, well, longer. 😉 What’s... more → Posted in: JavaScript Tagged with: Followup, Intl, Number, Post, Short
Short Number Formatting in Python / / No Comments Yesterday I wrote a blog post about creating short number formats in JavaScript. Definitely check out that post first, but the idea was to take something like 9496301 and display it as 9.5M. In that post, I used the built-in Intl object and it worked really well. It got me thinking, could you do the same in Python? First off, I checked and was happy to see that like JavaScript, Python supports numeric separators. This makes it much easier to read large numbers in code. It also meant I could take my test array and copy and paste it into a Python program: inputs = [ 999, 1000, 2999, 12_499, 12_500, 430912, 9_123_456, 1_111_111_111, 81_343_902_530, 1_111_111_111_111, 62_123_456_789_011,... more → Posted in: JavaScript Tagged with: Formatting, Number, Python, Short
How to Determine a JavaScript Promise’s Status / / No Comments 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, or then/catch/finally with callbacks, but what Promises don’t tell you is their status. Wouldn’t it be great if the Promise.prototype provided developers a status property to know whether a promise is rejected, resolved, or just done? My research led me to this gist which I found quite clever. I took some time to modify a bit of code and add comments. The following solution provides helper methods for determining a Promise’s status: // Uses setTimeout with... more → Posted in: JavaScript Tagged with: determine, JavaScript, promises, status