DEV Community: Jay Cruz

Conditional Rendering in React

Jay Cruz — Fri, 04 Feb 2022 22:25:25 +0000

What is Conditional Rendering?

Conditional rendering in React is a way to display components or elements based on a specific condition. It works the same as conditions do in regular Javascript. We can use Javascript operators such as the if statement and ternary operator to determine what gets rendered to the UI.

How to use Conditional Rendering in React

There are several ways we can choose to implement conditional rendering in React. The most common ways are the if statement, && operator, and the ternary operator. One way may be better suited for you over the other depending upon what your condition is and or preference.

We’ll be utilizing this App component to help demonstrate the different ways of implementing conditional rendering in React.

export default function App() {
    const [ isLoggedIn, setIsLoggedIn ] = useState(false)

    function toggleLogin() {
        setIsLoggedIn(prevState => !prevState)
    }

    return (
        <div>
            <OnlineStatus isLoggedIn={isLoggedIn} />
            <button onClick={toggleLogin}>Toggle</button>
        </div>
    )
}

if Statement

You may want to use an if, else statement when you have to decide between two or more different elements or components to be displayed.

export default function OnlineStatus({ isLoggedIn }) {
    if (isLoggedIn) {
        return <h1>Online 🟢</h1>
    } else {
        return <h1>Offline 🔴</h1>
    }
}

This is a simple way to render the element based on the value isLoggedIn. It involves more lines of code than the other ways but it still works just fine. The caveat with this though is that you cannot use a if statement within the render and JSX part of your component.

Ternary Operator

The ternary operator in React is a more common way to decide between two options to be rendered.

export default function OnlineStatus({ isLoggedIn }) {
    return isLoggedIn ? <h1>Online 🟢</h1> : <h1>Offline 🔴</h1>
}

Just like the if statement, this will check if isLoggedIn evaluates to true then render the correct element based on its value. Unlike the if statement, it can be used within JSX and it only takes up one line of code!

&& Operator

The && logical operator may be familiar to you from regular Javascript. In Javascript, it’s usually found inside of a if statement. It will check if multiple conditions are true and run the code inside of the if block when both evaluate to true or truthy.

const condition1 = true, condition2 = true;

if (condition1 && condition2) {
  console.log("This code runs!");
}

In React we can take advantage of this when we have one condition that needs to evaluate to true in order for an element to be rendered to the UI.

export default function Mail() {
    const [ mail, setMail ] = useState(["📧", "📧"])

    return (
        <>
            { mail.length > 0 && <h1>You've got Mail! 📨</h1> }
        </>
    )
}

In this example, our h1 will be displayed only if we have more than one item contained in the mail array. It will check the condition on the left and then the element on the right. In this case, both will evaluate to true because our state contains more than one item in the array and the h1 element will always be truthy.

Conclusion

In this article, we went over what conditional rendering is and how to implement it with the most common ways it is used in React. There are several other ways to implement conditional rendering such as using switch statements and IFFEs but here we learned about the more common ways it’s used.

Using and understanding conditional rendering in React is very important because you’re likely to see it used frequently in React components.

To learn more about this concept consider reading the React docs on Conditional Rendering.

Linux Basics (Shell Commands)

Jay Cruz — Sat, 25 Dec 2021 04:55:28 +0000

About Linux

Linux was created by a Software Engineer named Linus Torvalds. Linux is a “family of open source Unix-like operating systems based on the Linux kernel” — Wikipedia. The first Linux kernel was written in 1991. The Software layers used to describe the Linux structure are as follows:

. The kernel — Runs the hardware and allocates resources.

. The shell (Which I will focus on here) — Where you type commands into the CLI (Command Line Interface).

. Applications layer — Where programs run, such as GCC (Gnu Compiler Collection) and vi (a popular text editor).

Linux Operating System hierarchy

Linux file system

In most operating systems including Linux, directories (aka. folders) are structured in a hierarchical tree-like way. This keeps our files and folders organized. The root directory is labeled as a forward slash ‘/’ character, all other directories sit below the root. When you first log in you will be taken to the home directory.

Linux file system tree

Basic commands

The following is a list of some of the most common Linux shell commands (each command will be followed by /$ which is just an example of being in the root directory of the terminal):

/$ ls - List storage. This command will list the contents of the current directory you're in.

/$ cd - Change directory. This will bring you to your home directrory. To navigate up a level use cd.., back a directory cd -, to root cd /, or if you have it follow a path it will bring you to that directory, for example cd home/jay/documents.

/$ pwd - Print working directory. Outputs the path of the current working directory starting from the root. Example output /home/jay/photos .

/$ mkdir - Make directory. Short for make directrory, will create a new directory when followed up with a name that the user types (must be all lower case), for example mkdir myfiles.

/$ touch - Mainly used to create new empty files touch myfile.

/$ rm - Remove. This command is mainly used for removing files and directories. Use this with caution as there is no trash bin in Linux.

/$ mv - Move. Moves file(s) from one directory to another mv file1.txt file2.txt, also can be used to rename a file mv name newname.

/$ echo - Outputs lines the user types in front of it as string arguments echo "Hello World!". This command is usually used in shell scripts and batch files.

/$ grep - Global Regualr Expression Print. My favorite, this is a very useful command that can be used to search for string charcaters in a file. When it finds the characters you're searching for it will output the result grep "hello" greeting.txt.

Linux video resources: Linux: a short documentary, What is Linux

Intro to HTML

Jay Cruz — Sat, 18 Dec 2021 04:51:00 +0000

HTML stands for Hypertext Markup Language. It makes up the structure of content on the web. It is not a programming language like Ruby or Java because it can not process logic like programming languages can. For example you can not implement an if else conditional block in HTML.

HTML is strictly just a markup language. An HTML document is made up of tags or markup elements that wrap it's content. These usually consist of an opening and closing tag, though some tags are self closing. A tag that defines the document called the doctype declaration tag is needed at the top of the document to tell the web browser the type of HTML being used.

The HTML tag is used to tell the browser that everything in between these tags is HTML markup. Two other tags needed for your HTML document are the head tag and the body tag. The head tags contain the metadata between it which is data about the HTML document itself and it also contains other information for the web browser. The body tags contain the main content between it which usually includes other tags such as headers and paragraph tags. Headers range from h1 to h6 (largest to smallest), they change the way text appears and allow search engines to determine what the web page is about. A title tag is a tag that contains text which is displayed in the upper tab of the web page usually used to describe the page content.

<!DOCTYPE html>

<html>
  <head>

    <title>Webpage</title>
    <meta charset="UTF-8" />

  </head>
  <body>

  </body>
</html>

Attributes

HTML attributes are used to provide additional information to your elements such as links or properties like width and height. They are implemented with a name="value" in the opening tag of an HTML element, where name is the attribute name and value is the attribute value.

Comments

HTML comments are used as helpful notes in the HTML document. They do not get rendered to the browser with the other code. .

Images and Lists

Images can be inserted into our web pages using the img tag along with the src attribute <img src="image-url" alt="description of image"> , the alt attribute is used to describe the image, it is useful for users with disabilities and for images that have trouble loading. In HTML lists are another common markup element. The types that are usually used are unordered lists and ordered lists. Unordered lists contain list item tags that appear bulleted. Ordered lists contain list item tags that appear numbered.

<!-- Unordered Lists -->
<ul>
 <li></li>
 <li></li>
</ul>

<!-- Ordered Lists -->
<ol>
 <li></li>
 <li></li>
</ol>

Conclusion

In summary, HTML is needed to develop for the web as it is a necessary tool to build web pages and web apps. It makes up the structure of our websites.

Object Accessors in Ruby

Jay Cruz — Sat, 04 Dec 2021 00:37:19 +0000

In Object Oriented Ruby an object's instance variables are variables that are declared inside of a class and are bound to an instance of that class. These can be set and returned with object or attribute accessors. We use what are called a setter(aka writer) method and a getter(aka reader) method. The reader returns the value of the instance variable and the writer sets it. These can be implemented manually as the following :

class Car 

 def model=(model) # Writer
  @model = model 
 end   

 def model # Reader 
  @model 
 end

end

Though in Ruby there is a much more convenient option for your setter and getter or reader and writer methods called macros. When implementing macros they are followed by the attribute name they are being used on. You can sort of think of these as methods that create the definitions of other methods. These are written as follows:

class Car 
  attr_writer :model 
  attr_reader :model 

end

Or for both the reader and writer methods in one you can use the attr_accessor macro as a way to both read and write to the same attribute:

class Car 
 attr_accessor :model 
end

Summary

Macros are generally preferred over the manual method of writing out your reader and writer methods every time you need to make a new attribute. If you don't need to manually customize something within your method then macros should usually be used over the alternative. In object oriented Ruby sometimes less is more!

How to build a Carousel from scratch

Jay Cruz — Sun, 21 Nov 2021 01:42:11 +0000

Featuring JavaScript, HTML, and CSS.

What is a Carousel?

In Web Development, a carousel is a feature that displays a collection of different items (usually images) in a slideshow-like manner. They usually include a couple of arrow buttons that control back and forth navigation through this collection. When the end of the collection or last item is reached it circles back around to the beginning, hence the term carousel.

Some common use cases are image galleries, news headlines, or featured articles on the homepage of a website.

Thinking about how to build a Carousel

To begin building a carousel we should first start thinking about what we want our carousel to look like and what are the main features it will need. Some of the main points to think about are the following.

The basic HTML structure needed to build off of
Including previous and next buttons for navigation (arrow buttons)
What are the types of items we’ll be including as our slides? (zombie images in this case)
Displaying which slide the user is currently on (filled in dots)
Functionality for changing to the next or previous slide (Javascript)
Styling of our carousel (CSS)
Accessibility of our carousel (Use aria labels )

With this in mind, we can begin building out our carousel.

Building a Carousel

To start building out the structure for our carousel we’ll use several HTML divs so we can position it how we need it to be displayed. The first div will be the container to hold all of the items and features. Each item and feature should also be wrapped in its own div. This includes the images, buttons, and dots.

We’ll also give the first item a class carousel-item-visible for displaying a default image. We’ll utilize this later for displaying the image a user is currently viewing. We can also do the same thing for the dots giving the first dot a class selected-dot and setting it to checked.



<html>
    <head>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <div class="carousel">
            <div class="carousel-item carousel-item-visible">
                <img src="https://images.unsplash.com/photo-1537211261771-e525b9e4049b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=450&q=80" 
                     alt="Squirrel zombie" />
            </div>
            <div class="carousel-item">
                <img src="https://images.unsplash.com/photo-1503925802536-c9451dcd87b5?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&h=450&q=80" 
                     alt="Zombie hands" />
            </div>
            <div class="carousel-item">
                <img src="https://images.unsplash.com/photo-1509558567730-6c838437b06b?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=600&h=450&q=80" 
                     alt="Zombie pumpkin" />
            </div>
            <div class="carousel-actions">
                <button id="carousel-button-prev" aria-label="Previous"><</button>
                <button id="carousel-button-next" aria-label="Next">></button>
            </div>
            <div class="carousel-dots">
                <input class="dot selected-dot" type="radio" name="dot" checked />
                <input class="dot" type="radio" name="dot" />
                <input class="dot" type="radio" name="dot" />
            </div>
        </div>

        <script src="index.js"></script>
    </body>
</html>

Next, we want to add styling to make the layout appear how we want it to look. We also want to have our images displayed and navigated through in a smooth and user-friendly fashion so we utilize CSS keyframes for that.



.carousel {
    max-width: 600px;
    position: relative;
    margin: 0 auto;
}

.carousel .carousel-item,
.carousel .carousel-item-hidden {
    display: none; /* hide all slide images not currently being viewed */
}

.carousel .carousel-item-visible {
    display: block; /* show current slide image */
    animation: fadeVisibility 0.5s; /* for fading effect when switching between slides */
}

.carousel .carousel-item img {
    width: 100%;
    max-width: 600px;
    height: auto;
}

/* Navigation control styles */
.carousel .carousel-actions {
    display: flex;
    width: 100%;
    justify-content: space-between; /* put space between the navigation buttons */
    position: absolute; /* position navigation buttons on top */
    top: 50%; /* center navigation buttons on the slide */
    transform: translateY(-50%); /* align navigation buttons */
}

.carousel .carousel-actions button {
    border-radius: 50px;
    background-color: white;
    border: 0;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    width: 40px;
    height: 40px;
}

.carousel .carousel-actions button#carousel-button-prev {
    margin-left: 20px; /* prevent previous button from touching the side*/
}

.carousel .carousel-actions button#carousel-button-next {
    margin-right: 20px;  /* prevent next button from touching the side*/
}

.carousel-dots {
    text-align: center; 
}

.dot {
    opacity: 0.7; /* gray out dots for slides not being visted */
}

.dot:focus {
    border: 1px solid black; /* dot for currently visited slide */
}

/* hanlde smooth transitions between slides */
@keyframes fadeVisibility {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

Now that we have our structure and styling completed for the carousel we can put some life into it. We’ll need to use Javascript to build the functionality for allowing back and forth navigation through our collection of images.

First, we’ll grab all of the moving parts of the carousel that will be needed from the DOM. This includes all of the slides, the next button, the previous button, and the dots. Next, we need a way to keep track of and set the current slide position we’re on and a reference to the total number of slides.



const slides = document.getElementsByClassName("carousel-item");
const nextButton = document.getElementById("carousel-button-next");
const prevButton = document.getElementById("carousel-button-prev");
const dots = document.getElementsByClassName("dot");
let position = 0;
const numberOfSlides = slides.length;

From there we can start to think about the logic for controlling the back and forth movement of changing image slides. One important thing to note is that we should only be viewing one slide at a time so we’ll need a way to hide all other slides besides the one at the current position. For this we can use a helper function, we’ll call it hideAllSlides() .



function hideAllSlides() {
    // remove all slides not currently being viewed
    for (const slide of slides) {
        slide.classList.remove("carousel-item-visible");
        slide.classList.add("carousel-item-hidden");
    }
}

Now we can utilize our helper function inside of our slide navigation functions which we’ll be building shortly!

Let’s implement our navigation functions to control slide movement, we’ll call them handleMoveToNextSlide() and handleMoveToPrevSlide() . For each function that handles moving to the previous or next slide, we’ll first call our helper hideAllSlides() inside of the function so we don’t get multiple slides rendering at once when they are invoked.



const handleMoveToNextSlide = function(e) {
    hideAllSlides();
}

const handleMoveToPrevSlide = function(e) {
    hideAllSlides();
}

Afterward, we’ll need to set up conditionals that check the current slide position so we know which way to move.

For the next slide, it will be a check for if we’ve reached the end and in that case, we reset back to the first slide. The previous slide will be the exact opposite, moving to the last slide once we’ve reached the first. The final task would be to set the current slide by adding the class name carousel-item-visible to the slide at the updated position, then to add the selected-dot class to the dot at the same position and set it to be checked.



const handleMoveToNextSlide = function(e) {
    hideAllSlides();

    // check if last slide has been reached
    if (position === numberOfSlides - 1) {
        position = 0; // go back to first slide
    } else {
        // move to next slide
        position++;
    }
    // make current slide visible
    slides[position].classList.add("carousel-item-visible");

    // update dot to represent current slide
    dots[position].classList.add("selected-dot");
    dots[position].checked = true;
}

const handleMoveToPrevSlide = function(e) {
    hideAllSlides();

    // check if we're on the first slide
    if (position === 0) {
        position = numberOfSlides - 1; // move to the last slide
    } else {
        // move back one
        position--;
    }
    // make current slide visible
    slides[position].classList.add("carousel-item-visible");

    // update dot to represent current slide
    dots[position].classList.add("selected-dot");
    dots[position].checked = true;
}

Just one last step!

Let’s add in the event listeners to listen for each click event on the previous and next slide buttons, passing in our handleMoveToNextSlide() and handleMoveToPrevSlide() as the callbacks.



nextButton.addEventListener("click", handleMoveToNextSlide);
prevButton.addEventListener("click", handleMoveToPrevSlide);

And that’s all folks!

Interact with the code pen for our finished zombie images carousel below:

Resources

Build a Carousel (Scrimba)

How Maps solve the limitations of Objects in JavaScript

Jay Cruz — Fri, 19 Nov 2021 11:51:22 +0000

An overview of Maps in JavaScript and how they can make up for limitations that come with using objects.

In JavaScript, objects are one of the most commonly used data structures. They provide you with a way to organize and store data as key/value pairs. While this is the case they also come with some limitations that are worth pointing out. In this article, we’ll be going over what those limitations are and show how using the Map object vs regular objects can be more effective.

What is the Map object?

The Map object was first introduced with the ES6 version of JavaScript. Like regular objects, they can contain key, value pairs and allow you to add, retrieve, remove, and check for those keys and values.

To create a new instance of the Map object we can do so as the following:

const map = new Map([
    ["key", "value"]
]);

There are several built-in properties and methods that come with an instance of the Map object. These include but are not limited to some of the more common ones such as the following:

.set() - Adds key, value pairs with the first argument being the key and second being the value .set(key, value)
.get() - Retrieves a value linked to a key by passing in the specified key as the only argument .get(key)
.delete() - Removes a key, value pair identified by the passed-in key name .delete(key)
.has() - Checks whether or not a key, value pair exists and returns a boolean value. Takes in the key as the only argument .has(key)
.size - Returns an integer representing the number of key/value pairs contained within the Map object

For more about the Map object’s built-in properties and methods check out this link.

Using Map to avoid limitations of using objects

To show how using the Map object can solve for limitations that arise when using objects let’s go over what these limitations are and how we can avoid them using maps.

Objects are not guaranteed to be ordered

Although this has changed since JavaScript has updated to ES6 the ordering for the key/value pairs of a regular object can still be unreliable.

Take the following object we declared for example:

const obj = {
    1: 2,
    0: false,
    "Greet": "Hello World",
    a: "b",
    c: "c"
}

When we log obj to the console it displays a different ordering from what we originally declared it with:

{0: false, 1: 2, Greet: 'Hello World', a: 'b', c: 'c'}

When we try declaring the same key/value pairs with a map,

const map = new Map([
    [1, 2],
    [0, false],
    ["Greet", "Hello World"],
    ["a", "b"],
    ["c", "c"]
]);

we instead get the original order in which they were declared.

{1 => 2, 0 => false, 'Greet' => 'Hello World', 'a' => 'b', 'c' => 'c'}

No method to quickly determine the length or size of an object

With an object, we determine the size manually by iterating over the object using a for loop and a counter or using the Object.entries() method along with .length.

const obj = {
    1: "one",
    2: "two",
    3: "three"
};

Object.entries(obj).length; // 3

When we need to find out the number of key/value pairs in a Map object we can use the .size property to easily get it.

const map = new Map([
    [1, "one"],
    [2, "two"],
    [3, "three"]
]);

console.log(map.size); // 3

Map object is naturally iterable, Object is not

To iterate over objects we usually use a for..in loop to manually get each key and value.

// obj = {1: 'one', 2: 'two', 3: 'three'}

for (let key in obj) {
    console.log(key, ": ", obj[key]);
    // 1: one
    // 2: two
    // 3: three
}

Note however that Object.keys() and Object.values() or Object.entries() can also be used to make an object iterable.

Object.entries(obj)
    .forEach(entry => console.log(entry[0], ": ", entry[1]));
    // 1: one
    // 2: two
    // 3: three

A map object can be easily and directly iterated over with methods like .forEach() to access each value.

// map = {1 => 'one', 2 => 'two', 3 => 'three'}

map.forEach(value => console.log(value));
// one
// two
// three

Key types of objects can be only string or symbol

When declaring Javascript objects, the only types we can use as the key is a string or a symbol.

const obj = {
    ["key"]: "value"
};

console.log(obj); // automatically converts array key to a symbol: {key:'value'}

const obj2 = {
    ["key"]: "value",
    function key(), "Value"
};

console.log(obj2); // throws an error

While keys for a regular JavaScript object can only be either a string or a symbol the same does not go for Map objects. For the Map object, its keys can be of any type including functions, objects, and arrays.

const map = new Map([
    [ ["key"], "value" ],
    [ function key() {}, "value" ],
    [ { "a": 1 }, "b" ],
]);

console.log(map); 
// {Array(1) => 'value', ƒ => 'value', {…} => 'b'}

Summary

In Javascript, Maps are very useful data structures. They provide more flexibility than regular objects do, for example, Maps give us the ability to use any data type as a key while also maintaining the original ordering they’re declared with.

Next time you’re reaching for that plain ol’ JavaScript object to store some sort of complex data, consider using a map. Depending on the use case it may just serve you better!

Merging objects in Javascript

Jay Cruz — Sat, 13 Nov 2021 04:22:32 +0000

Using Object.assign

The Object.assign() method works by copying over the values and properties of another object (referred to as the source object) into the object we are trying to update (referred to as the target object).

There are several ways we can use Object.assign() to merge our objects. The first way is to simply pass in the original object we want to be updated as the first argument and the other object containing the data we want to merge as the second argument.

Object.assign(target, source);

The problem with this though is that it mutates the original object. So if we don’t want our original object to be mutated we can instead pass in an empty object as the first argument.

Object.assign({}, target, source);

This will assign all of the properties and values from both the target and source objects into a brand new object.

We can also add more objects as arguments to be merged along with the other objects we’re copying data from. This can be done by passing in the object inline as an argument or defining it first and then passing it in.

Object.assign({}, target, source, { name: "Bob" }); // inline

const name = { name: "Bob" }; // predefined object
Object.assign({}, target, source, name);

Using the spread operator

The spread operator is another common method that happens to be more relevant for merging the properties and values of one object into another. I find it to be much simpler and more readable than using Object.assign().

To use the spread operator we precede the object we want to copy data from with ... when passing it in.

const userData = {
  name: "",
  email: "",
  password: ""
};
const newUserData = {
    name: "Bob",
    email: "bob@email.com",
    password: "bobspassword"
};
const updatedUser = {...userData, ...newUserData};

This will extract out all of the properties and values merging them into a brand new user object.

If we want to add more properties we can do so just as we did before with Object.assign() passing in the property inline or as a predefined object.

const updatedUser = {...userData, ...newUserData, updated: true};

This will give us a new object with all of the properties merged in and the added property of updated set to true.

{
  email: "bob@email.com",
  name: "Bob",
  password: "bobspassword",
  updated: true
}

How to Destructure Nested JavaScript Objects

Jay Cruz — Sat, 13 Nov 2021 04:07:40 +0000

How to use destructuring in JavaScript to access deeply nested data

How to destructure objects

Let’s first go over how to destructure objects in JavaScript. We can start with this simple example of an object representing an employee.

const employee = {
    id: 1,
    name: "John Doe",
    occupation: "Programmer"
};
const { id, name, occupation } = employee;

This gives us access to all of the properties within the employee object.

console.log(id); // 1
console.log(name); // John Doe
console.log(occupation); // Programmer

Pretty simple, right?

But what if we have to destructure an object that’s a bit more complex? Maybe one with several levels, meaning objects within objects.

Destructuring nested objects

Now let’s say we need to access data from an object representing several employees.

const employees = {
    engineers: {
        0: {
            id: 1,
            name: "John Doe",
            occupation: "Back-end Engineer"
        },
        1: {
            id: 2,
            name: "Jane Doe",
            occupation: "Front-end Engineer"
        },
    }
};

Here we have our employees object nested several levels deep. If we need to access an employee’s info we can destructure as many levels as it takes to get to our employee object’s properties.

const {
    engineers: {
        1: {
            id,
            name,
            occupation,
        },
    },
} = employees;

Now we have access to all of the second employee object’s properties.

console.log(id); // 2
console.log(name); // Jane Doe
console.log(occupation); // Front-end Engineer

Summary

Destructuring is a very useful feature that was added to the ES6 version of JavaScript. With destructuring, we can quickly and conveniently extract out properties or data from objects and arrays into separate variables.

This was just a brief overview of how to use destructuring to extract out and access data from nested JavaScript objects.

Short circuit evaluation

Jay Cruz — Thu, 28 Oct 2021 00:53:13 +0000

What is short circuit evaluation?

In Programming, many languages use what’s called short circuit evaluation. Short circuit evaluation is the concept of skipping the evaluation of the second part of a boolean expression in a conditional statement when the entire statement has already been determined to be either true or false.

Therefore checking the part of the expression that comes after what made the statement true or false becomes unnecessary. The compiler just skips over it and moves on to the next line of code within the statement if it evaluates to true or exits the conditional statement if it evaluates to false.

Implementing short circuit evaluation in Javascript

To implement short circuit evaluation let’s try it with this conditional statement below as an example.

let isTimeToCode = true;
let needsCoffee = true;

if (!isTimeToCode && needsCoffee) {
    console.log("Make some coffee! It's time to code!");
}

First, we’re setting both isTimeToCode and needsCoffee variables to true. Now in the expression, we’re including the ! (pronounced as the logical NOT operator) making our isTimeToCode variable point to false instead of true. Since our boolean expression (!isTimeToCode && needsCoffee) now says false and true instead of true and true, the needsCoffee part of the expression will be skipped over as there is no need to check it because the condition would evaluate as false no matter what. So it looks like we won’t be making coffee and coding today! :(

Avoiding errors with short circuit evaluation

Let’s get into a bit more complex examples to show where short circuit evaluation can really come in handy.

For example, we’ll take this Javascript object containing names of seasons during the year.

const seasons = {
    "Spring": { isMonth: (month) => month },
    "Summer": { isMonth: (month) => month },
    "Winter": { isMonth: (month) => month }
}

Now take the conditional statement below where we are checking for a season and a month in our seasons object.

if (seasons["Fall"].isMonth("October")) {
    makeCoffee("Pumpkin Spice");
}

What do you think will happen here since "Fall" is not in our seasons object? It’s going to throw a TypeError.

Uncaught TypeError: Cannot read properties of undefined (reading 'isMonth')

This is a situation where we can take advantage of short circuit evaluation. Let’s modify our expression to first check if "Fall" is in our seasons object, then call its isMonth() method on it.

if (seasons["Fall"] && seasons["Fall"].isMonth("October")) {
    makeCoffee("Pumpkin Spice");
}

Here we’re using short circuit evaluation, so if our seasons does not contain "Fall" we’ll ignore the second half of the conditional and avoid getting a TypeError.

Summary

Short circuit evaluation is a helpful way to avoid performing extra or unnecessary tasks in your code. It can also be helpful with avoiding errors in certain cases such as trying to perform an action on some data that doesn’t exist.

For more on this topic, check out the resources I’ve included below.

How to use the FormData object

Jay Cruz — Mon, 04 Oct 2021 23:32:37 +0000

An explanation of what the FormData object is and how to use it with an existing HTML form.

What is a FormData object?

To understand what FormData objects are we should first know where they come from. The FormData objects are constructed from the FormData interface. This FormData interface gives us the ability to create key, value pairs with the FormData constructor to represent our form’s fields and values.

Using FormData in JavaScript

To demonstrate how to implement the FormData object with Javascript we’ll be using this form for our example.

Let’s check out what the HTML looks like for this newsletter form.

One thing to notice here is that we’ve included the name attribute. This is important not to forget because only input fields containing the name attribute will work with the FormData object.

Now that we see how the form is set up let’s head over to our javascript file and code everything out.

Here you can see how we’re first listening for our form to be submitted. Once the submit event is triggered we create a new instance of the FormData object passing in the form element that we grabbed from the DOM. This bundles up everything with a name attribute from our form giving us the ability to access submitted input data.

After we create our FormData object we grab the values from the inputs using the .get() method (make sure to pass in the name attribute values here from the inputs, not the class name or id). After this step, if this were a real-world application we would most likely be sending the form data off to a server somewhere with a fetch request. For demonstration purposes though, we’ll just keep it simple and render a message to the user letting them know they’ve signed up.

Let’s go ahead and try out our newsletter form now that we have everything set up.

Now if we click Signup all our form data will be submitted and we should get a pop-up message letting us know we’ve signed up.

Conclusion

FormData objects are a great tool to use with your HTML forms. They allow you to easily access everything from your form without having to individually get and store each element or input value one by one.

Just create a new object from the FormData constructor passing in your form element and utilize the FormData methods that are provided.

The background-blend-mode property in CSS

Jay Cruz — Sat, 25 Sep 2021 23:59:35 +0000

The background-blend-mode property is a CSS property. It gives us the ability to define how an element's background image blends with the background color.

Blend modes

There are several different blend modes available as property values for use with the background-blend-mode property.

normal - Default blend mode (nothing is changed)
multiply - Color is multiplied by the destination color and replaces the destination
screen - Multiplies the complements of the backdrop and source color values, then complements the result
overlay - Multiplies or screens the colors, depending on the backdrop color value
darken - Selects the darker of the backdrop and source colors
lighten - Selects the lighter of the backdrop and source colors
difference - Subtracts the darker of the two constituent colors from the lighter color
color-dodge - Brightens the backdrop color to reflect the source color
saturation - Creates a color with the saturation of the source color and the hue and luminosity of the backdrop color
color - Creates a color with the hue and saturation of the source color and the luminosity of the backdrop color
luminosity -Creates a color with the luminosity of the source color and the hue and saturation of the backdrop color

Read more about these and other blend modes here.

Using background-blend-mode

To experiment with this property we’ll be using this image of the Joker (figured it’d be relevant with Halloween around the corner 🎃). We’re going to test it out with some of the most popular values that are provided by background-blend-mode.

Let’s go over these values and show what they can do with examples. To start we’ll show a side-by-side comparison of our Joker without background-blend-mode and another one with it.

Here you can see we have the original image on the left and the blend mode version using the darken value on the right. Let’s check out what the code looks like below.

Now let’s try out some of the other blend mode values that are commonly used with this property.

background-blend-mode: screen;

the screen blend brightens the image by removing the darker parts of the color.

background-blend-mode: multiply;

The multiply blend is the opposite of screen. It multiplies the blending color with the base color resulting in a darker appearing image.

background-blend-mode: color-dodge;

The color-dodge blend makes the image brighter while also adding colors to it.

background-blend-mode: overlay;

The overlay blend combines both the multiply and screen blends resulting in a lighter or darker appearance depending on the backdrop color.

background-blend-mode: saturation;

The saturation blend maintains the saturation of the background image while combining the hue and luminosity of the background color.

background-blend-mode: difference;

The difference blend subtracts the base layer from the top layer. If blending with lighter colors or white this blend can invert the image’s color but with black, there will be no change.

Summary

This was an overview of the basics of the background-blend-mode property. There are other ways to use this property that we did not get into in this article such as its use with linear gradients, mixing multiple blend mode values, and the mix-blend-mode property.

The background-blend-mode property can be a great addition if you’re looking to spice up your website’s design. Hopefully, this article proved it to be a useful CSS property that can result in some great-looking background images!

More resources

Optimize Fibonacci with Dynamic Programming

Jay Cruz — Mon, 20 Sep 2021 00:20:25 +0000

What is the Fibonacci Sequence?

The Fibonacci sequence is a series of numbers in ascending order. Each number after the first two is a Fibonacci number that must be equivalent to the sum of the previous two numbers before it. For example, take this Fibonacci series of numbers from 0 to 610:

0, 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, 144, 233, 377, 610

So you may ask why is this useful? Well, Fibonacci is something that’s more so applied in the field of mathematics than it is in Programming. Although it is considered a useful tool for teaching things like recursion. It can also be used as a problem for introducing the concept of dynamic programming like we’ll be doing here.

Solving Fibonacci without Dynamic Programming

So, to begin to figure out how to solve the Fibonacci problem with Dynamic Programming, we should first know how to solve it with just plain recursion.

function fibonacci(n) {
    if (n < 2) {
        return n;
    }
    // get fibonacci number (sum of previous two nums)
    return fibonacci(n - 1) + fibonacci(n - 2);
}

So this would give us our answer. But why is this not the optimal solution? We know that when using recursion, each function call gets pushed onto the call stack. For this specific problem, we can think of it as a recursion tree with many levels.

                      fibonacci(6)
                     /            \
                    f(5)          f(4) 
                  /     \         /   \
               f(4)     f(3)     f(3) f(2)
               /  \     /   \       / \
            f(3)  f(2) f(2) f(1)  f(2) f(1)
           /  \
        f(2)  f(1)

As you can see here we have several overlapping calculations happening from the recursive function calls. This means our solution is doing a lot of unnecessary work. This might be fine when solving for smaller numbers like 1 to 6 but as soon as we scale up to larger numbers it becomes a problem. To further see what I mean let’s add an incrementer variable to get the number of calculations performed.

let numCalculations = 0;

function fibonacci(n) {
    numCalculations++;
    if (n < 2) {
        return n;
    }
    // get fibonacci number (sum of previous two nums)
    return fibonacci(n - 1) + fibonacci(n - 2);
}

Now if we pass in 7 for example we’ll get 13 calculations. But let’s try a larger number like 20.

fibonacci(20); // 6765
console.log(numCalculations); // 21891

Woah! This gives us a whopping 21891 calculations. You might be thinking that can’t be good for the big O runtime of this solution. You’d be right! With this solution, we get a time complexity of O(2^n). Not very fast!

Implementing Dynamic Programming to solve Fibonacci

So what is Dynamic Programming first of all? Dynamic Programming is basically just an optimization technique. It’s commonly used on problems that have overlapping subproblems, just like our Fibonacci problem that is currently solving the same subproblems again and again.

To optimize our Fibonacci solution we’re going to use a Dynamic Programming technique called Memoization. This technique works by storing the result of our function calls inside of a data structure such as a hash map and then checking it on each recursive call to see if we’ve already calculated for that specific problem. Let’s implement this technique with our Fibonacci problem to optimize our solution.

function dynamicFibonacci() {
    let cache = {};

    return function fib(n) {
        // check if already calculated for n
        if (n in cache) {
            return cache[n];
        } else if (n < 2) { // base case
            return n;
        } else {
            // store result in cache
            cache[n] = fib(n - 1) + fib(n - 2);
            return cache[n];
        }
    }
}

Now you can see we’ve added some extra code but this solution greatly optimizes the previous one bringing the runtime down to O(n). So let’s go over what we’re doing here. First, we’re assigning a hash map to a variable called cache. This is a good name for it since what we’re doing is basically caching the result of our function calls. Then on line 4, we’re utilizing the concept of closure in Javascript by returning a function, this is so we don’t keep resetting our cache variable on each recursive call. We pass n into our nested function and on line 6 we check if we’ve already solved for n . We also include our base case on line 8. On lines 12 and 13 is where we perform the calculation, store the result, and return it.

To run this function we can store the function definition in a variable and call it with any number passed in as an argument.

const callFib = dynamicFibonacci();
callFib(10); // 55

This gives us our answer to the Fibonacci problem. Let’s further prove why this solution is optimal to our previous one by tracking the number of calculations with the numCalculations variable again.

numCalculations = 0; // reset to 0

function dynamicFibonacci() {
    let cache = {};

    return function fib(n) {
        // keep track of function calls
        numCalculations++;

        if (n in cache) {
            return cache[n];
        } else if (n < 2) { // base case
            return n;
        } else {
            cache[n] = fib(n - 1) + fib(n - 2);
            return cache[n];
        }
    }
}

Let’s go ahead and pass in the same number as we did with the previous solution so we can compare the two.

const callFib = dynamicFibonacci();
callFib(20); // 6765
console.log(numCalculations); // 39

Wow, we only get 39 calculations here. That’s a lot less compared to the 21891 calculations from the plain old recursive solution.

Identifying Dynamic Programming problems like Fibonacci

To identify problems where Dynamic Programming can be helpful we should ask ourselves several questions about the problem such as:

Can the problem be divided down into sub-problems?
Is recursion involved?
Are the sub-problems overlapping?

This could be a good gauge for identifying problems that can be optimized with Dynamic Programming techniques like Memoization.

Summary

In this article, we went over how to optimize the Fibonacci sequence problem using Dynamic Programming. We utilized the technique of Memoization to get rid of all those extra calculations being made from recursive functions calls.

For our solution, we used what is considered a top-down approach which is about breaking down a larger problem into smaller ones. The opposite of this approach is a bottom-up approach which starts with the smaller simpler problems and works up to the larger more complex ones. We did not go over the bottom-up approach in this article but you can see a video of how it’s implemented for Fibonacci here.

Hopefully, this article has explained clearly how useful Dynamic Programming can be for optimizing our code so it doesn’t perform repetitive tasks and unnecessary work. Next time you’re solving a problem like the Fibonacci sequence, think about how you can optimize with a Dynamic Programming approach.