A trick I just learned to develop faster! 😄
Original email from August 6, 2024
I'm staring at my screen, yet again, waiting 10 seconds for a page to load before seeing my changes.
😩
"Okay that looks good and... oops, I forgot to change the text."
So I go to the code, update the text, save and...
...
I'm staring at my screen yet again, waiting 10 seconds for a page to load before seeing my changes.
😩
Ahh but wait, the session expired! So now I have to log back in again, navigate to the page I was developing for, and then see my changes.
😩
This is a huge "mojo" killer when developing. And that's why I say...
Multi-step forms and workflows are the absolute WORST part about developing on the frontend
I'm talking about the pages where before you can navigate to them, you need to fill in one or more forms (or follow specific un-skippable steps) before you can access that page.
There are 2 reasons for my disdain for these types of development situations:
Saving a change to your code in your IDE will cause a refresh of the page. Most of the time when you're working with a multi-step form, this alone could be enough to cause you to go back to step 1. Cue redoing all the steps again 😩
In cases where saving your work doesn't cause a refresh of the page, you might still have to keep a session active or make lots of API calls on every refresh to load back the progress. Like I said earlier, sessions can expire or API calls can take long enough on every refresh to make developing feel eternal. 😩
I'm developing a feature that fits the second point and holy heck, it hasn't been fun.
The workflow here has been:
Log in to start the session,
navigate to the page I need,
wait 10 seconds for the API calls to do their thing, and then
start developing.
Repeat steps 3 and 4 for every code change because it causes a refresh.
Repeat steps 1 - 4 if the session expires.
It makes development take way longer than it has the right to for this reason.
But then I realized something that sounds incredibly obvious yet has saved me probably hours of constant waiting.
Just... mock all the API calls used to access the page. And make the delay zero.
I use an extension called Mokku. It has a button that lets you record the network calls made on the website, which then can be added automatically as a mock. You can then grab all of them and make the delay zero so it loads the page immediately.
In my brain, it has never clicked in my head that I can use mocked calls to navigate through websites faster. Skipping wait times where a lot of processing has to happen behind the scenes (like when a user is purchasing something).
We tend to use mocking as a tool so we can develop in parallel as the backend creates the API, for testing our code, and whenever it relates to what we're working on but... what nobody has ever mentioned is:
You can use mocking to navigate through forms faster, keep yourself artificially logged in for longer, and make API calls happen instantly
Of course, this is very situational and will depend on the project you're on. At least for me, it's been a lifesaver for what I'm at least currently working on.
Just, you know, don't forget to turn off mocking when you're actually testing. Else you'll wonder what's going on and waste time in another way 😅
Have a productive Tuesday!