Since January, I’ve been learning front-end web development through the Udacity Grow With Google scholarship. It’s been a fast, fun 2.5 months. I first learned to code in 1990 (dating myself) when I took a Fortran class. And although I went on to take computer science classes in Ada, Lisp, and Smalltalk, and later learned Perl and some Visual Basic, I’ve never experienced a learn-to-code environment as supportive as this one.
The 3-month challenge course is almost over now, and I’d like to give back to future Udacity students (and anyone else learning front-end web development) by highlighting a few confusing concepts. I’ve created a Medium Publication, Showing Our Work, where I’ll blog about what I’ve learned. And I hope fellow students will join me.
Typing
I don’t mean making the clacky nose on a keyboard. I mean variable types. Some programming languages, like the first ones I learned, are strongly typed languages. A variable can be a few different types. For example, an integer, meaning a whole number; or a string, meaning a series of letters, number, and other characters. You cannot add an integer to a string, or you will get an error.
Not so in JavaScript! Lesson 11.19 in the challenge course explains that you could actually add them, like this:
"julia" + 1
And get the result “julia1”! JavaScript will convert the integer 1 to the string “1” and concatenate it with the string “julia”. So you have to be really careful, especially when comparing values to see if they’re equal. Because JavaScript will let you compare apples to oranges. You can hold this off by always using the === comparison operator (three equals signs instead of two), and it’s a best practice to do that.
JavaScript code not doing what you expected? Make sure you’re using the triple equals sign. That’s my number one tip.
Reference vs. value
There’s a thing you discover when you start writing functions, which is that some languages pass by reference and others pass by value. JavaScript passes by value, meaning it makes a copy of whatever’s in the variable and hands it off to the function.
This can run you into trouble when you think you’re changing a value in your function, but actually you’re just changing a copy of the value.
Fellow student Megan Spaulding does a terrific job of explaining this (with drawings) in her blog post, Changing Array Values in a forEach Loop.
jQuery
Ok, I admit that jQuery is not my favorite subject. When we got to this stage of the course, the lessons switched from a mix of text and video to mainly video. And that’s not my preferred medium. (Shocking to hear from a professional writer, I’m sure.) Also, there are a million ways to do things in jQuery. Some are more efficient than others.
But the main thing about jQuery, the thing that first baffled me when I tackled project 3, the pixel art maker? I forgot you have to include jQuery in your HTML, otherwise you can’t use it. 🙂
In CodePen, which most of us are using to share our projects, this is easy. You can use the quick-add feature for adding a JavaScript library (which is what jQuery is) and select jQuery from the dropdown. Or you can do what I did, which was to edit my HTML file to add this line inside the <head> tag:
I felt like the stupidest person in the world until I figured this out, so I’m passing it on to you, so you can at least get started on your Pixel Art Maker project.
BTW, fellow student Matt Cranford wrote a great blog post on how to get started, so if you’re still feeling stuck, make sure you read Navigating the Pixel Art Maker Project on his blog.
Photo by Nigel Tadyanehondo on Unsplash
Jina Chan 