Live Demo đ All Demo, No Pitch: Content & Commerce / Builder.io & Elastic Path on 12/13
Use Cases
Pricing
Blog
Ă
Visual CMS
Drag-and-drop visual editor and headless CMS for any tech stack
Theme Studio for Shopify
Build and optimize your Shopify-hosted storefront, no coding required
Resources
Blog
Get StartedLoginâ°
Can you spot the bug in this code?
There are at least three!
We will break them down below:
Oops! This is certainly a newbie mistake, but one so easy to miss Iâve caught this in my own code even after 10 years of JS development.
A common culprit for this in my experience is after editing or moving code. For example, you have a correctly structured URL, then copy one piece from one to another, and then miss that the param separator was wrongly ordered.
This can also happen when concatenating. For instance:
But wait, the original url
may have had a query param in it. Ok, so this should be:
But wait, if the original url
didnât have query params then this is now wrong. Argh.
Gah. model
and locale
likely donât need to be encoded, as they are URL-safe values, but I didnât stop to think text
can be all kind of text, including whitespace and special characters, which will cause us problems.
So maybe weâll overcorrect and play things extra safe:
But things are feeling a littleâŚuglier.
Oof. In order to break this long URL into multiple lines, we accidentally included the newline character and extra spaces into the URL, which will make fetching this no longer work as expected.
We can break the string up properly now, but weâre getting even messier and harder to read:
That was a lot just to make constructing one URL correct. And are we going to remember all this next time, especially as that deadline is rapidly approaching and we need to ship that new feature or fix asap?
There has to be a better way.
URL
constructor to the rescueA cleaner and safer solution to the above challenge is to use the URL constructor:
This solves several things for us:
?
for the first param, and thereafter).It is also incredibly helpful for situations where we are modifying a URL but we donât know the current state.
For instance, instead of having this issue:
We can instead just do:
Similarly, you can also write other parts of the URL:
Now, the age-old problem of âI just want to read a query param from the current URL without a libraryâ is solved.
Or for instance update the current URL with:
But this is not just limited to the browser. It can also be used in Node.js
As well as Deno:
URL instances support all of the properties you are already used to in the browser, such as on window.location
or anchor elements, all of which you can both read and write:
Or, at a glance:
The URLSearchParams
object, accessible on a URL
instance as url.searchParams
supports a number of handy methods:
searchParams.has(name)
Check if the search params contain a given name:
searchParams.get(name)
Get the value of a given param:
searchParams.getAll(name)
Get all values provided for a param. This is handy if you allow multiple values at the same name, like &page=1&page=2
:
searchParams.set(name, value)
Set the value of a param:
searchParams.append(name, value)
Append a param â useful if you potentially support the same param multiple times, like &page=1&page=2
:
searchParams.delete(name)
Remove a param from the URL entirely:
The one big pitfall to know is that all URLs passed to the URL constructor must be absolute.
For instance, this will throw an error:
You can resolve that, by providing an origin as the second argument, like so:
Or, if you truly need to only work with URL parts, you could alternatively use URLSearchParams directly if you just need to work with query params of a relative URL:
URLSearchParams
has one other nicety as well, which is that it can take an object of key value pairs as its input as well:
new URL
supports all modern browsers, as well as Node.js and Deno! (source)
Builder.io is a Visual CMS that let's you drag and drop to create content on your site visually, using your components.
Stop drowning in a backlog of requests - build with your whole team instead.