So you’re new to JavaScript — *high five* and also… buckle up! As I’m still a newbie myself, I’ve wondered what I could possibly contribute to the programming community at this point in time that others might find useful. Instead of simply copying over some of the ideas and compiling them here, I thought it might be best (and !(plagiarism || illegal)) to create a resource list for others to refer to. Enjoy and good luck on your JavaScript journey!
Ruby & JavaScript | Similarities & Differences
Before you dig in, it’s nice to know what you’re getting into. Whenever you learn a new skill, sometimes it’s most useful to see if there’s any overlap with something you already know. The logic behind ruby and JavaScript, as with any coding languages, are very similar, but understanding how their syntax and functionality map to each other can be a bit tricky.
Ruby & JavaScript — A Quick Overview
Ruby vs. JavaScript: Compared & Contrasted
Built-in Methods
One of the first things I missed in my move from Ruby to JavaScript was built-in methods. Because Ruby has datatype classes, there are lot of built-in methods in Ruby that don’t exist in JavaScript. To soften the blow, here are some resources that list built-in methods that JavaScript DOES offer.
Array Properties & References — w3schools
Arrays in JS — MDN
HTML DOM Document — w3schools
HTMLCollections vs. Node Lists
Are they the same? Are they different? How do they function like arrays and hashes? What is the deal????
DOM Nodelist — w3schools
HTML Collection — MDN
NodeLists — MDN
Functions in JavaScript
Unlike in Ruby, there are many ways to declare methods/functions in JavaScript. It means that there’s a lot of flexibility, but it’s hard to keep track of the different
Event Types
So “click” may be the most intuitive type of event, but what other options are there?
Ruby Enumerables => JS
Ruby enumerables – love them or hate them (choose love!), this blog shows .each/.forEach(), .map/.map() and .select/.filter() examples right next to each other so that you can clearly see the difference in syntsx.
Best Extensions for Visual Code
Who knew there were so many helpful tools ready for use? From snippet shortcuts to automatically generated comments, there’s a huge variety of extensions that can help make your code more consistent and efficient.
Examples: browser debugger, cleaner testing, live server, consistent code for collaborators, icons for folders, beautifiers to decipher JSON, keyword color options, etc…
Visual Code Recommended Extensions
11 Awesome JS Extensions
10 VS Code Extensions — Node.js
Top JS VS Code Extensions
Keyboard shortcuts for Visual Code
I recently saw a reddit thread asking for keyboard shortcuts, and some users said they went up to 50 years not knowing some of these time-saving techniques. Do yourself a favor and learn some of these now.
VS Shortcuts
VS Code Shortcut Sheet
Default Keyboard Shortcuts
I hope these tools make your transition into JavaScript a little bit smoother! Fare thee well!
