My TypeScript Software Design & Architecture book just prelaunched! Check out

Fixing JS Bugs This Week #1

Jul 16th, 2018 / 2 min read / Share / Edit on GitHub
This week, we fixed a couple of bugs that

Bug # 1

Always remember to stringify what you send over the web.

I ran into this problem when I was working on saving the value selected in a dropdown list to my backend.

I noticed that everytime I select the first value in my dropdown list and clicked "Save", the change did not persist to the backend.

I quickly realized that reason was because the value of the first option in my dropdown is the number, 0.

And 0 == false == undefined.

Therefore, let's not forget to surround your numeric values with a JSON.stringify before you attach it to an API call.

return {
  coop_program: JSON.stringify(profileInfo.coopProgram),
  disability: JSON.stringify(profileInfo.disability),
  gpa: JSON.stringify(profileInfo.gpa),
  international_student: JSON.stringify(
  gender_id: JSON.stringify(get(profileInfo, 'gender.gender_id')),
            JSON.stringify(get(profileInfo, 'visibleMinorityBackgroundId.visible_minority_background_id')),
            JSON.stringify(get(profileInfo, 'indigeneousAboriginalId.indigenous_aboriginal_id')),
          resume: profileInfo.resume,
          transcript: profileInfo.transcript

So here's what happened here. We use a dropdown.

Bug #2

Quill JS, we had to make our very own component for this because of the error we kept getting. "The given range isn't in document".

It just kept on re-rendering the page every time that we'd update the store and jump around, making it impossible to fill out the fields on screen.

We fixed it by leveraging internal state and putting it in it's own component.


Liked this? Sing it loud and proud 👨‍🎤.


Be the first to leave a comment


Stay in touch!

About the author

Khalil Stemmler

Khalil Stemmler is a Developer / Designer and co-founder of Univjobs. He frequently publishes articles about Domain-Driven Design and Advanced TypeScript & Node.js best practices for large-scale applications.

View more in javascript

You may also enjoy...

A few more related articles

The 6 Most Common Types of Logic in Large Applications [with Examples]
Sep 16th, 2019 / 12 min read
In this article, you'll learn about the Clean Architecture, why we should separate the concerns of large applications into layers,...
Why I Don't Use a DI Container | Node.js w/ TypeScript
Sep 16th, 2019 / 11 min read
Instead of a DI Container, I just package features by component and use logical naming conventions.
Dependency Injection & Inversion Explained | Node.js w/ TypeScript
Sep 11th, 2019 / 10 min read
Dependency Injection and Depedency Inversion are two related but commonly misused terms in software development. In this article, ...
Command Query Segregation | Object-Oriented Design Principles w/ TypeScript
Aug 29th, 2019 / 11 min read
CQS (Command-Query Segregation) is a design principle that states that a method is either a COMMAND that performs an action OR a Q...

Want to be notified when new content comes out?

Join 2000+ other developers learning about Domain-Driven Design and Enterprise Node.js.

I won't spam ya. 🖖 Unsubscribe anytime.

Get updates