What is DRY (in programming)?

what is dry blog banner nickang showing weed growing on white wall
Photo by Ben Neale on Unsplash

Ever heard someone tell you that your code is not “DRY”? What’s the deal with that? Are they saying that your code can hold a lot of water…?

Sorry for the bad joke. DRY is an acronym, and it stands for Do not Repeat Yourself. As far as I can tell so far in my short career as a software engineer, this is one of the most revered principles in writing software.

In this post, we’ll explore why it’s important to keep your code DRY and in general, how you can go about doing it.

Continue reading “What is DRY (in programming)?”

How to implement a Linked List in JavaScript

implement linked list in javascript banner nickang
Photo by LinkedIn Sales Navigator on Unsplash

In this post, you’ll learn how to implement a linked list in JavaScript. This is the second part of a 2-parter post on linked lists (read part 1).

Let’s jump right in!

Continue reading “How to implement a Linked List in JavaScript”

Bite Size Programming – How to get started with programming (part 2)

how to get started with programming banner nickang blog
Photo by Joshua Sortino on Unsplash

Hello internet!

This is the second part of How to get started with programming. If you haven’t read part 1, I highly recommend you start there as we covered some stuff that I consider pretty important to getting started.

Continue reading “Bite Size Programming – How to get started with programming (part 2)”

Bite Size Programming – How to get started with programming (part 1)

how to get started with programming banner nickang blog
Photo by Joshua Sortino on Unsplash

I’ve only been a professional software engineer for about a year, but one of the questions I’m frequently asked by friends and strangers alike is, “How do I get started with programming?”

To their question, I’d almost always give an answer that I think they find unsatisfying (as if satisfaction was what they were really hoping to get by asking the question!).

To get started with programming, you shouldn’t start by picking the “right” programming language and jumping into learning it immediately.

Continue reading “Bite Size Programming – How to get started with programming (part 1)”

Cheatsheet for working with 2D arrays in JavaScript

Arrays are basic data structures present in all programming languages I’ve been worked with so far: JavaScript, Ruby, Python, PHP. It’s easy enough to understand normal arrays but I’ve found that introducing an extra layer (ie. a second dimension) makes it exponentially harder to work with. This cheatsheet is a growing list of tips and tricks for using 2D arrays in JavaScript. The idea is portable to other languages, since the ideas are universal.

Rule #1: Always use a 1D array if you can help it

We can represent a grid, say a tic tac toe board, using a single array:

But I’ve seen people opt for a 2D array instead:

I wonder, why would anyone do that, especially for a small 3×3 grid? I couldn’t come up with a good, sensible answer. Accessing the 2D array is pain compared to the 1D array using iterators:

What about when the array is much larger? Say, 10×10? Let’s also use a for loop to generate them so we don’t have to manually generate the array (because we’re lazy!):

With the 2D array, we’re basically splitting a grid into columns and rows. So if we were to iterate through every single element, we’d have a for loop nested inside another for loop, which means we’ll go row by row, and within each row, we’ll go from column 1 to the last column. To this rhythm…

R1 C1 >> R1 C2 >> R1 C3 >> … >> R1 C10
R2 C1 >> R2 C2 >> R2 C3 >> … >> R2 C10

R10 C1 >> R10 C2 >> R10 C3 >> … >> R10 C10

Now would it make more sense to use a 2D array? Will it provide greater versatility down the road when we want to manipulate the array?

2D array is good for accessing an element based on a specific coordinate

2D arrays would indeed be superior to 1D arrays if we could access an element based on a specific coordinate, like R3 C6. Do they give us that flexibility?

Yes. R3 C6? That’s as simple as calling grid[2][5]! We now have access to the value 26. That was much easier than using a 1D array, which would require us to first do some calculations before being able to pinpoint the value of a specific element that corresponds to the third row fifth column.

What happens if we need to programmatically change values of the elements surrounding a specific element?

I’ll explore this in tomorrow’s update of this article!

It’s not just JavaScript you’re learning at that Bootcamp

Programming bootcamps are everywhere now. Some are up to the mark while others make up for it with good marketing. Whichever the choice you end up making, it’d be a mistake to think that you’re going into one, say a web development bootcamp, to learn HTML, CSS and JavaScript.

No, you’re not. You are going to learn programming. JavaScript is but one of many languages you’ll need to use as a software engineer.

While it’s probably scary enough to try to pick up a single programming language, and it’s not my intention to scare anyone away from trying to gain this tremendously empowering skill, it’s the truth. Being able to write JavaScript code is not going to make you good enough to be an employable developer. We need to be more versatile than that.

Here’s the good news: if you know JavaScript well enough, you probably already know how to use Python and Ruby and PHP. You just don’t know the specific syntax yet. Forced to use them, you will find a way to write in that language.

That said, I think it’s useful to go into a bootcamp with the mentality that you’re going in to learn how to write software, not to learn how to write web applications or mobile or desktop applications only. Neither are you going to be so clearly labelled as a front-end or back-end developer. No good sculpture comes out of a craftsman who knows only to work the paper or the chisel.

Let’s face it. You’re looking at joining a bootcamp because you’re interested in technology and want to be able to use it to create things. When you’re done with the bootcamp, you’re going to come out as “the software guy/girl” – so it’s best to play the part before you’re made to.

The flash of unstyled text

When I entered the web development industry-complex (is it okay to refer to it as such?) in August this year, the first thing I noticed was how fast it moved. This year EJS and HAML is hot, next year it’s testing frameworks Mocha and Chai, and then Angular2 and React. In our industry, there has been a hot new thing every year.

Recently in a bid to give a well thought out response to a student in class, the instructional team did some googling to see if some esoteric library existed to allow developers to recreate poster-esque typography on webpages. And of course we found one, called Lettering.js. It uses jQuery to transform every single letter in a sentence into a <span> tag, and style it accordingly. Kerning (horizontal spacing in between letters) is easy with margins and relative positioning, and alternating colours is also possible with the :nth-child selector. I thought it is really smart but a bit of an overkill.

But what caught my attention most was a paragraph that espoused the values of the creators of Lettering.js:

“Web performance patterns advise that you put Javascripts at the bottom of your page before your </body> tag. There is an unfortunate side effect where you may experience a FOUT (Flash of Unstyled Text) when you’re manipulating your text after the DOM has loaded. Unfortunately, we found the best solution to avoid/minimize the FOUT caused by this plugin is to put your scripts (jQuery, Lettering.js) in the document . On the one hand, your page will load slower. On the other hand, a flash/restyling makes your site feel slow. Users might ultimately feel the site is faster if they don’t see the FOUT.”

FOUT. What an acronym. To FOUT or not to FOUT is one of many design decisions that developers have to make every day. While the implementation is very simple in this case–moving the <script> tag between the top (at the HTML head) position or the bottom (as the last few lines within the HTML body)–what/how we decide ultimately depends on the project.

The most interesting part about having read this is that I never scrutinised the difference between placing the <script> tags on top or below. I just placed it in the head all the team and used a DOMContentLoaded/jQuery.ready inside my scripts to make sure that the HTML page is fully rendered before JavaScript tries to manipulate them on the DOM.

How fascinating…

How to add event listeners without repeating yourself

One of the key principles of good programming is DRY – Don’t Repeat Yourself!

Here’s one way to reduce repetition with event listeners by using an array .forEach iterator that I’ve used a number of times now. If you haven’t done this before, here you go! If you have an even cleaner and easy to understand solution, please share.

The code below uses jQuery selectors and methods to add ‘mousedown’ event listeners to 4 elements #up, #down, #left and #right.

Code used in an in-class lab to move a ball around the page.