Skip to content

DEV Community

Michelle Duke

Posted on Sep 1, 2020 • Edited on Feb 23, 2022

The bane of every developer; spelling, casing, and random commas

#javascript #opensource #python #vue

I was recently playing Twilio Quest over on my Twitch channel. Twilio Quest is a coding game where you can learn to program Python, JavaScript, PHP, and more. There's a few modules on open source, as well as how to use the Twilio API.

As I've been learning to code various languages, I've released one very important lesson. Coding is as much about recognising spelling errors, semi-colons, and letter casing as it is about the language itself. Call it the syntax if you will. One small comma out of place can mean the difference between your website loading blank, or working completely. Check out my Vue JS stream for a classic example of this in action. But the better example is the clip above where I was doing Twilio Quest.

Syntax is highly important

In this short snippet, I had spent over an hour trying to fix this JavaScript code. I was coding it live on stream and many senior developers had looked over the code and couldn't find what was wrong either. 30 devs, lots of experience, and no one could figure it out. Until someone said... "ummm, I think you have a lower case 'l' when it should be upper case 'L'". I was like "ahhh okay"; thinking that totally can't be a thing.

But it totally was a thing. Changing one tiny little piece of syntax was the difference between my code working, and it totally breaking. There's been lots of examples of this over on my live streams. A missing semi colon, a rogue comma, or simply a spelling mistake. I will probably never get used to it, but the one thing I do love... is working it all out.

I was so happy when the code (after an hour of trying) finally worked. At this point I felt like a real developer! It's the small things in life right? If you want to watch the full Twilio Quest stream check it out. You can play Twilio Quest for yourself too and learn the ways of the Pythonic Temple, or be a JavaScript boss. And if you want to see the full code, check out my GitHub repo.

Oh and if you're wondering why I was wearing a unicorn onesie, it's because we raised over $2000 USD for the kids of St Jude throughout their charity campaign. So I was stuck being a coding unicorn for about a whole month.

Top comments (15)

Subscribe

Jean-Michel Plourde • Sep 1 '20

Yesterday, I using AngularJS to make put requests. Because I forgot the second paramet of the http request, which is for request parameter and I didn't have any, my request would fail with a really weird and long link. Forgetting to put an empty array {} what interpreted by js like I was passing my whole function anonymous functioin as a parameter. Took me 15 minutes to debug.

I'm also notorious for typos that create bugs that block me for some time.

Michelle Duke • Sep 4 '20

Yeah I feel you. This definitely makes me feel like a developer when I come across these things. But it's a good feeling when you finally figure it out!!!

Leira Sánchez • Sep 1 '20

This VSCode extension will help with spelling mistakes: marketplace.visualstudio.com/items...

it works with camelCase too! Not sure if there's something similar for atom

Michelle Duke • Sep 3 '20

Yes I love this extension! Unfortunately this was being coded in the program itself so I couldn't add any extra extensions. The extensions in VS Code are legit awesome.

Vlastimil Pospichal • Sep 1 '20

Your code is wrong. You deserve it.

Michelle Duke • Sep 3 '20

Hahahah, totally! I was just so confused that no one else could figure it out either. But hey, it's all a learning curve right? I am loving it though!!!

Vlastimil Pospichal • Sep 3 '20

If you show your code, I'll show you how to improve it.

Michelle Duke • Sep 4 '20

I had about 30 developers looking at it live. You can see it in the video link (a link to the full live stream), and you can see a link to my GitHub repo (linked in the article).

Vlastimil Pospichal • Sep 4 '20 • Edited

Sorry, unfortunately I don't see a link to your GitHub.
You used the method toLowerCase() six times, you need it two times only. It doesn't occur to the developer that there can be a typo in one of the six calls, everyone would see it in the two calls.

Michelle Duke • Sep 8 '20

Linking here again: github.com/MishManners/Twilio-Ques...
We just did what the course told us to do. And yes, there were 30 different people arguing over how to best do it. This is what I love about live coding!

Vlastimil Pospichal • Sep 8 '20

const firstValue = process.argv[2].toLowerCase();
const secondValue = process.argv[3].toLowerCase();
if (firstValue < secondValue) {
    console.log(-1);
} else if (firstValue > secondValue) {
    console.log(1);
} else {
    console.log(0);
}

Michelle Duke • Sep 8 '20

Thanks for this. Will check it out

Momchil Georgiev • Sep 1 '20

Yikes - only double equals comparisons in JavaScript and this really strange code style...spelling is the least of your worries

Michelle Duke • Sep 4 '20

Hahaha, 100%!

Jay Dwayne • Sep 13 '20

Hi Mish, I relate with your story on developer setbacks. I was coding a Project on C++ and ' : ' instead of ' ; ' messed me up lol.
I figured it out hooooooouuuuurs later.
Thanks for sharing .

View full discussion (15 comments)

Read next

Distributed computing made easy

Gliimly - Dec 15

Understanding the Barrel Pattern in JavaScript/TypeScript

Aditya Rawas - Dec 15

Can AI finally generate best practice code? I think so.

Quinton - Dec 19

Unlocking the Power of Web Components and Custom Elements for Reusable UI Design

Abhay Singh Kathayat - Dec 19