To Semicolon, Or Not To Semicolon

Code on the Rocks

You’re a 10x developer until the language changes.

print("Hello world");

Nope…

console.log("Hello world");

No…

System.out.println("Hello world");

There it is!

Speaking In Tongues

Because I wasn’t careful, I recently found myself programming in 3 languages, each with its own accents and innuendos:

• Dart: For my day job. I’m working on a Flutter app for Android, iOS, and the web. I’ve been working with Dart for almost 4 years so this is my happy place.
• TypeScript: For landing pages and various other React-based web interactions. I’ve dabbled with JavaScript, HTML, React, and the like but I only have a few months of experience under my belt.
• Swift: For the Apple Vision Pro. I couldn’t resist the siren call of spatial computing. There’s only 1000 apps on the store so the competition is small, right? I’ve never written Swift code before.

Everyone will tell you that trying to learn multiple programming languages at the same time is ineffective and they’re not wrong. You instantly recognize the similarities between languages, making it faster for you to understand how the code works, but the syntax differences absolutely slow you down. Sure, Dart, TypeScript, and Swift all give you the ability to create a variable that can later change, but they all do it a little bit differently.

Dart

var name = "Joseph";

Pure, simple, and easy to understand.

TypeScript

let name = "Joseph";

Now we’re using let instead of var. Remember that.

Swift

var name = "Joseph"

Back to using var ...but without the semicolon.

Its possible to remember each of these syntax rules. Its also possible to cut your grass with scissors. The issue is that you don’t just need to remember variable instantiation. You need to remember syntax related to variables, constants, data types, flow control, commenting, debugging, and everything else that makes programming what it is.

In Practice

GitHub copilot eased the pain of transitioning back and forth between Dart and TypeScript but writing TypeScript still felt slow because of my inexperience.

Simple things like untyped variables were layups for copilot:

let //...copilot finishes the statement with something that makes sense

The more layered the request however, the more wait time. For example, if I wanted a nullable String, I’d type out this comment and let copilot figure out the next line:

// nullable String variable

When you’re attempting to get the code out of your head and onto the screen, any waiting feels like too much. Waiting just a few seconds to let copilot think was frustrating. Plus, typing out a comment for such a simple request was admittedly awful.

The old school advice would be to learn the syntax and use it without relying on copilot. My response would be that using copilot to program is effectively learning the syntax on the fly and its faster than repeatedly googling basic syntax questions. After copilot politely showed me how to create a nullable variable a few times I didn’t need the extra comment. I had remembered.

When you introduce a third or fourth language however, the difficulty of remembering the individual syntaxes is multiplied (by 3 or 4 times, actually). Another language, another specific pattern. Static typing here, dynamic typing there. Semicolons only in languages that have the letter “T” in their name. Printing, logging, printing lines, logging lines? If you’re actively using multiple programming languages, you’ve had to feel the sting of forgetting something basic.

Copilot definitely helps but if you use it regularly, you’ll always be a bit slower than the alternate universe version of yourself that remembers all syntaxes perfectly.

And then there are days when you need Xcode and your trusty copilot is AWOL.

What If It Was Easy?

It was during this dark time of my life when I asked myself why it had to be this way. The syntax of every language was different but I was asking them each to do very similar things.

• Create a variable
• Construct a class
• Set up a switch statement
• Print this thing so I can look at it

And thus the idea for Code on the Rocks (COTR like “coder”) was formed.

What if there was a unifying language I could take everywhere and use to code confidently as a beginner?

The cotr-snippets extension is a simple extension for VS Code that maps about 40 snippets to their implementations in a bunch of different languages. For example, the snippet cotrPrint generates the following code depending on the file type you currently have open:

Dart

print('My message');

TypeScript

console.log('My message');

Swift

print("My message")

Rust

println!("My message");

Go

fmt.Println("My message")

In total there are 14 supported languages with more in the works. In addition to the cotrPrint snippet, there are also all of these:

The extension was designed with the Pareto Principle, or the “law of the vital few”, in mind. The snippets above don’t provide 100% coverage of each language but with them you can build something substantial and feel confident in any code base.

What’s Next?

While the extension is already super handy for multilingual coders, I think it could be especially useful for people that are new to programming. Each snippet could come with an optional explainer comment or alternative approaches. Rather than simply printing out brief statements or for loops, the extension could be packed with factual snippets about each language.

• cotrTypes -> List out all data types
• cotrPackages -> Prints primary package management site
• cotrDetails -> Prints classification details about the language

I’m also working on a frameworks variation of the extension for different frontend frameworks like Flutter, React Bootstrap, and SwiftUI. A few examples of the snippets:

• cotrText -> Text widget, div with text, Text view
• cotrButton -> ElevatedButton, Bootstrap Button, SwiftUI Button
• cotrColumn -> Column widget, Flex Grid Col, Swift VStack

Frontend frameworks are a bit tricker to standardize so this idea needs to be baked a little longer.

Try It

The open source GitHub repo can be found here: https://github.com/CodeOTR/cotr-snippets

The VS Code extension cotr-snippets is available on the marketplace: https://marketplace.visualstudio.com/items?itemName=CodeontheRocks.cotr-snippets

Feel free to make contributions or submit issues/feature requests to the repo. Happy coding! 🍹

Originally published at https://codeontherocks.dev on March 5, 2024.