Case study image
Changing the browser URL without reloading the page

Changing the browser URL without reloading the page. Handy when you want to keep the filters on a web page when the browser reloads is easy to accomplish with the browsers history API.

e.g. To keep the filters on a web page when the browser reloads is easy to accomplish with the browsers history API.

Assume we have a page like this (don’t mind the styling) 🌸

Example web page

You have some filters coffee, wine, etc and a list that’s going to be filtered with a result like below:

Filtering the webpage

To keep the list filtered after a reload you can use the history api, namely the history.pushState

It is as simple as:

history.pushState(null, ‘’, theUrlYouWantItToBe);

In our case:

const search = '?filter=["wine","milk"]';history.pushState(null, ‘’, location.origin + search);

You can find the full snippet below to play with:

To easily serve a local file you can use http-server

npm install http-server -g

Create an index.html file with the code from the snippet. In the folder serve the file with the following command

http-server

And boom! 💥

Some other stories

A new way to discover Apps

A new way to discover Apps

Can you still find your way through all the apps on your homescreen?

Read story study
5 Tips to improve your code quality while prototyping

5 Tips to improve your code quality while prototyping

If you don't enough measures at the start of the prototyping cyclus, the increase in scope of a prototyping project could hurt you. In the long run, code could get dirty and unreadable, depending on how fast you need to deliver. In this blog, we give 5 tips to improve code quality while prototyping.

Read story study
Decrease your React CI/CD build time by 50%.

Decrease your React CI/CD build time by 50%.

Building web pages anno 2020 is not an easy task. A simple interface that holds animations and HTTP requests can become immensely bloated in a matter of days. Our team at Craftworkz specializes in prototyping applications at a fast pace, which often translated in a “write code, check back later” mentality. One of our prototypes became so bloated, which led us to do some self-reflection. In this blog, we discuss how to decrease your React CI/CD build time by 50%.

Read story study
Scroll up icon