No special messages at the moment. Just have a good day and stay hydrated!

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.


Thoughts? Share the article if you think it'll be useful to someone + join the discussion about this post on Twitter!

Stay in touch!

About the author

Khalil Stemmler

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

View more in javascript

You may also enjoy...

A few more related articles

Name, Construct & Structure | Organizing Readable Code - Part 1
Jun 15th, 2019 / 6 min read
Naming files & folders well, using well-understood technical constructs and strategically organizing files well are three ways to ...
Domain Knowledge & Interpretation of the Single Responsibility Principle | SOLID Node.js + TypeScript
Jun 13th, 2019 / 8 min read
The Single Responsibility Principle specifies that a class or function should only have one reason to change. Admittedly, that's n...
Over $85 billion spent on fixing bad code [bootcamps, junior devs, JavaScript, and software design principles]
Jun 7th, 2019 / 10 min read
More and more money is being spent by companies on maintaining bad JavaScript code. Here's where I think our industry needs to cha...
Clean Node.js Architecture | Enterprise Node.js + TypeScript
Jun 6th, 2019 / 7 min read
In this article, we'll look at the various different versions of the "clean architecture", simplify it, and understand how we can ...

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