Image for post
Image for post
Photo from Susannah Burleson on Upsplash

As a disclaimer, this guide is not meant to be an in-depth user guide to Pry, just a launching pad for those who don’t know where to start. This is the quick and dirty guide I wish I had early on to give me the basics for building a foundation. If you are looking for detailed guides and documentation, you can easily find a plethora of those on the internet. I’ll even throw in some links at the bottom of my article in case you want to dive in. Happy reading!

I honestly don’t even want to admit how long it took me to get on the Pry bandwagon, but I certainly regret not doing it sooner. Pry not only makes it easier to test code, it literally allows you to pry it open and see how it works under the hood — hence the name! Sure, you could keep using IRB (Interactive Ruby Shell) for testing, but aren’t you tired of copying and pasting snippets of your code over, and over, and over again? Wouldn’t it be great to actually see how things are working in your application rather than just guessing? …


Image for post
Image for post
Photo by Xavi Cabrera on Upsplash

1) Order matters with unary operators

Chances are that as you started learning JavaScript, you picked up the handy trick of using unary operators such as ++ and— — to increment or decrement your numeric values, respectively. In case you need a refresher, JavaScript has both binary and unary operators. A unary operator only requires one operand and is most commonly used with variables.


Higher-Order functions are one of those things in JavaScript that sounds incredibly complicated, but isn’t. By definition, a higher-order function is just a function that either accepts or returns a function. That’s it! Some of the most common and useful functions in JavaScript are higher-order functions, such as .map(), .filter(), .reduce(), and .forEach(). In this article, we will explore each of these functions in more detail.

.map( )

This HOF is one of the most popular and most commonly used functions in JavaScript. The .map() function takes in a callback function as an argument and returns a new array object. …


Helping you create visual contrast and intrigue without using a million different fonts.

Image for post
Image for post
Screenshot by author

While building anew project, I wanted to create some contrast with my homepage h1 without mixing too many fonts. I personally find it annoying when sites go “font crazy” because my eyes start to focus on the style of the text rather than the content itself. My first step was to look through the available Google fonts but I didn’t find any “hallow” text fonts which I was keen to use. …


Image for post
Image for post

While working on a side project recently, I found myself in a situation which, surprisingly, I hadn’t been in before. In my quest to collect user feedback, I found that I needed a way to collect and store unique values from these responses without caring about how often the same responses appeared or who they were initiated by. I wracked my brain for a good hour trying to find an elegant solution when I finally gave up and went to the Temple of Knowledge (stack overflow) and came across the mystical Set object.

The Set object was the perfect solution to my problem and I was honestly baffled how I could have never come across it before. It really was one of those moments that brings you such joy, like finding out you can buy containers of pure Lucky Charm marshmallows level of joy. The Set object, to me, is my container of LC marshmallows and I am happy more than happy to share this simple pleasure with you, dear reader! …


Image for post
Image for post
Photo by Ronald Cuyan via Unsplash

Being able to traverse, alter, and inspect an array is an essential foundation for any programming language. In this article, I explore and outline the basic methods available to the array object that every programmer using JavaScript should know.

Table of Contents:

  • Adding to an array: unshift(), push()
  • Removing elements from an array: shift(), pop()
  • Changing the order of an array: sort(), reverse()
  • Inspecting an array: indexOf(), lastIndexOf(), includes()

Adding to an array

unshift() — Adds one or more elements to the beginning of an array and returns the new length of the array. This method is destructive, meaning that the original array will be modified.

Click here to view more information on MDN web docs. …


A Quick Way to Unpack Data

Image for post
Image for post
Photo by Charles Deluvio from Upsplash

The destructuring assignment in JavaScript is a fast and easy way to delegate data from object and array literals to variables. If you ever find yourself writing line after line of variable assignments, consider using the destructuring assignment to save lines and time.

Basics of destructuring

Order is the name of the game when it comes to the destructuring assignment. The order of variables on the left side of the equality operator determines the values that will be assigned to them. If you remember nothing else about destructuring, remember this nugget. ORDER. MATTERS.

Syntax

For array destructuring:
[var1, var2, etc.] = [value1, value2, etc.]

For object destructuring:
( {var1, var2, etc.} = {key1: value1, key2: value2, etc.} …


The smart way to store additional information on the DOM

Image for post
Image for post
Photo by Franki Chamaki via Upsplash

This article is a short and quick guide to using data attributes in JavaScript— something I wish I knew more about when I was beginning my own JavaScript journey.

What are data attributes?

Data attributes are actually HTML attributes that allow you to create and assign bespoke data points to HTML elements. They are accessible via HMTL, CSS, and JavaScript, making them a powerful choice for storing bits of information that maybe aren’t so appropriate for class lists or ids. After all, we should aim to keep class and id attributes reserved for styling purposes, otherwise, things can get very messy and confusing quickly.

Data attributes in HTML

Identifying data attributes in HTML is pretty easy, just look for anything in the HTML element tags that has data-something. The something, in this case, can be anything you want under the sun although it is best practice to name it expressively so that you, and other programmers using your code, can easily tell what type of information is being stored in that data attribute. To create a data attribute in HTML, simply start the property with data- and pick a name that makes sense for you. You will want to use the assignment operator, = , to set the data attribute value to a string. If your data attribute requires two or more words, just add a dash between each word. …


Understanding why Big O notation is important and how to calculate it

Image for post
Image for post
Image from: Bae S. (2019) Big-O Notation. In: JavaScript Data Structures and Algorithms. Apress, Berkeley, CA.

Big O notation is a core concept in Computer Science and a frequent, if not obligatory, part of the technical interview process. In a nutshell, Big O notation allows us to figure out the efficiency of algorithms. More specifically, it allows us to measure the time complexity of an algorithm in algebraic terms as its input grows increasingly towards infinity. But why is this important?

Why we use Big O

Imagine asking ten developers to come up with a function that performs a certain task. They all create functions that work perfectly, but how many do you imagine are identical in code? Probably none, especially if the task is moderately complex. So how do you know which function will be the most efficient? Could it be the developer that wrote their function in three lines of code? But what if they have computer from 2006 and have spotty wifi? …


Understanding how primitive data types and objects behave in JavaScript

Image for post
Image for post
Photo by Glenn Carstens-Peters on Upsplash

If you are new to JavaScript, chances are you’ve already run into some of the funny behavior this language has to offer (exhibit A). At first, these weird quirks might seem ridiculous and frustrating, but I promise there is a method behind all of that madness.

One of the hardest hurdles to overcome, in my humble opinion, is the difference between passing by value vs passing by reference. Why is this concept so tricky? For starters, you can certainly get pretty far without really understanding how JavaScript interacts with primitive values and reference values. This can, and more often than not, will result in a ton of bugs that are hard to track down and annoying to fix. …

About

Alexandra Ortiz

Software Engineer, volleyball player, lover of tiny houses and all things spicy.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store