Parsing of URLs on the client side has been a common practice for two decades. The early days included using illegible regular expressions but the JavaScript specification eventually evolved into a new URL
method of parsing URLs. While URL
is incredibly useful when a valid URL is provided, an invalid string will throw an error — yikes! A new method, URL.canParse
, will soon be available to validate URLs!
Providing a malformed URL to new URL
will throw an error, so every use of new URL
would need to be within a try/catch
block:
// The correct, safest way try { const url = new URL('https://davidwalsh.name/pornhub-interview'); } catch (e) { console.log("Bad URL provided!"); } // Oops, these are problematic (mostly relative URLs) new URL('/'); new URL('../'); new URL('/pornhub-interview'); new URL('?q=search+term'); new URL('davidwalsh.name'); // Also works new URL('javascript:;');
As you can see, strings that would work properly with an <a>
tag sometimes won’t with new URL
. With URL.canParse
, you can avoid the try/catch
mess to determine URL validity:
// Detect problematic URLs URL.canParse('/'); // false URL.canParse('/pornhub-interview'); // false URL.canParse('davidwalsh.name'); //false // Proper usage if (URL.canParse('https://davidwalsh.name/pornhub-interview')) { const parsed = new URL('https://davidwalsh.name/pornhub-interview'); }
We’ve come a long way from cryptic regexes and burner <a>
elements to this URL
and URL.canParse
APIs. URLs represent so much more than location these days, so having a reliable API has helped web developers so much!
Create a CSS Flipping Animation
CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there’s…
9 Incredible CodePen Demos
CodePen is a treasure trove of incredible demos harnessing the power of client side languages. The client side is always limited by what browsers provide us but the creativity and cleverness of developers always pushes the boundaries of what we think the front end can do. Thanks to CSS…
Source link
Leave a Reply