Forem: Valentina Peric

Local Storage vs Session Storage in JavaScript

Valentina Peric — Sun, 07 May 2023 22:43:48 +0000

Let's dive into two fundamental web storage mechanisms in JavaScript: Local Storage and Session Storage. These two mechanisms are important for creating personalized user experiences by using data persistence. They both store data in the users browser in a way that cannot be read by a server. We are going to dive into both, explain its use cases, and the differences between them.

Prerequisites 📝

A working knowledge of javascript
A working knowledge of web browsers

Let's Get Started ✨

What is Local Storage?

Local storage stores key-value pairs in the user's browser. This stored data is persisted even after the user closes their browser or when they shut down their device. This data can be cleared by the user manually clearing their browser cache or until the app clears the data. It has a storage capacity of about 5MB which is larger than what cookies can store.

Local storage is great for storing global data that is going to be accessed often in your app like username, email, name, etc. It is also great for features like remember me which can help streamline a user's experience by skipping steps that they have already inputted before.

What is Session Storage?

Similar to local storage, session storage also stores key-value pairs in the user's browser. In fact, they are both objects that are part of the web storage API with the difference being that their data is handled differently. Instead of the data being persisted for multiple sessions, it is only available during the duration of its user's specific session. This means that when the user closes its browser or tab, the data gets cleared. This is great for multi-step processes like booking flights and hotels, shopping carts and user authentication.

Local Storage vs Session Storage

Let's compare the two. You know that they have differences in how their data is persisted. What other differences do they have? Firstly, the scope is different. Local storage has global scope across all tabs and windows while session storage is limited to its single tab or window. Local storage also has a larger capacity which makes sense given that it can persist data among multiple tabs and windows.

This may even have an impact on performance when not used wisely. Given its large size, if used improperly, it can slow down your app, however, it does not make a huge difference. The most important thing is to choose which scenario is best for the specific use case of your app. Should the data be persisted for multiple sessions? Use local storage. If not, consider session storage.

Next Steps ✨

How can you personalize the user experience of your app using local or session storage? Go take a deep dive into this! You can even take a look at how apps do this by looking into the Application tabs in dev tools shown below 👇

Have you used local or session storage before? What use cases have you used them in? What use cases are you considering? Let me know in the comments!

The Heart of all Vue.js Applications: Vue Instance

Valentina Peric — Sun, 07 May 2023 03:12:29 +0000

Let's talk about the heart of all Vue.js applications. The motherboard. The part that is absolutely essential to running these applications: Vue Instance. What is it? How do we use it? In this article, I will help break down what this fundamental topic is and how they are used in Vue applications.

Prerequisites 📝

A working knowledge of javascript
A code editor (I recommend Visual Studio Code)
A working knowledge of Vue.js (V2)

Let's Get Started ✨

Please note: This is in Vue.js V2. You will see in V3, the initialization is a bit different. You can read more about it here. Back to our scheduled programming 👇,

To put it simply, the Vue Instance is the root of every Vue application. It is used to connect the data, properties, and lifestyle hooks. Let's take a look at an example and go from there,

new Vue({
  el: '#app',
  data: {
    books: Seed.books
  },
  created: function () {
    console.log('hello world')
  }
});

When a Vue instance is created, an options object is passed in. In the example above, this object contains the el and data property. el represents a specific part of the DOM that the Vue instance will be mounted to, which in this case, is the #app. Typically, you will see that #app is the root of application.

The second property is data. This property passes in an object that contains reactive data. Any changes to that data will cause a rerender of its corresponding view in the DOM. This happens because of vue's reactivity system which consists of two-way databinding.

In the example above, you will see that books was passed in. This could be an array of objects holding data about books. If this app was a library system and a librarian added a book to the system, this array would be updated which would cause the #app view to rerender. This creates a seamless user experience.

The Vue instance also provides a set of lifestyle hooks. These hooks help with tasks like initialization and clean-up. Common hooks are created, mounted, updated, and destroyed. The above example shows the created hook. This means that its function will get called when the Vue instance is created which in this case, hello world will get printed out in the console.

Next Steps ✨

So there you have it, the heart of all Vue applications. Do not forget to add this instance to your Vue app (I have! It will cause errors hehe) and you will see how it essential it is for building your app. Take a look at Vue projects or build your own to see it in action.

Breaking down Promises in JavaScript

Valentina Peric — Fri, 24 Mar 2023 19:50:56 +0000

Promises became widely supported and popularized in JavaScript when ES6 was released in 2015. Although, fun fact, the term was proposed by Daniel P. Friedman back in 1975. By definition, a promise is an object that contains the results of the eventual completion or failure of an asynchronous operation. This article will break down what this all means.

Prerequisites 📝

A working knowledge of javascript
A code editor (I recommend Visual Studio Code)

Let's Get Started ✨

Three States of Promises

Promises have three different states depending on the operations that are being executed,

Pending: the operation has not yet completed
Fulfilled: the operation has completed successfully and the returned object is ready
Rejected: The operation has failed

Cool, makes sense. Now, how does this look like in code?

const myPromise = new Promise((resolve, reject) => {
  //async operation

  if (success) {
    resolve("the operation has completed successfully!");
  } else {
    reject('"the operation has failed"); 
  }
});

The promise constructor takes in one parameter which is the callback function. The callback function takes in two parameters which are the resolve and reject functions. While the asynchronous operation is executing, the promise is in a pending state. Once the operation of the promise has completed, the resolve function can be called to indicate the operation was successful, and the reject function if it has failed. The promise object returned from calling the Promise constructor can then be used for chaining.

Chaining Promises and Consumers

You can chain promises by using consumers such as .then(), .catch(), and .finally(). Let's go through each one,

.then() continues code execution and is invoked when a promise is either resolved or rejected. it takes in two arguments: the callback function of the fulfilled promise and the callback function for the rejected case.

.catch() is invoked when a promise is rejected. It is also invoked when some error has occurred during execution. Treated similar to the .then() but it does not take in an argument for when the promise is fulfilled.

.finally() gets invoked when the promise has settled, regardless of success or failure. This consumer takes no arguments.

Let's see how they all work together by making a cappuccino. ☕

function boilWater() { 
  return new Promise((resolve, reject) => { 
    setTimeout(() => {
      resolve("water has boiled.");
    }, 2000);
  });
} 

function brewCoffee(water) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("coffee has been brewed.");
    }, 2000);
  });
}

function frothMilk() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log("Milk has been frothed.");
      resolve();
    }, 2000);
  });
}

boilWater()
  .then((water) => {
    return brewCoffee(water);
  })
  .then(() => {
    return frothMilk();
  })
  .then(() => {
    console.log("Enjoy your cappuccino");
    return;
  })
  .catch((error) => {
    console.log(error);
  })
  .finally(() => {
    console.log("Continue coding!")
  });

In the example above, boilWater is called first which returns a resolved promise that gets chained to the brewCoffee function. The chaining continues and once frothMilk returns a resolved promise, enjoy your cappuccino will be logged out. If any promise gets rejected or any other error occurs in the execution, the catch will log out the error. The finally consumer will get called regardless of success or failure. This is the routine that I have every morning :)

Next Steps ✨

You can see that promises can result in a lot of chaining and nested functions which can cause readability in your code to suffer. With async/await, a lot of this will be made simpler. You can read how here.

Async/Await in Javascript

Valentina Peric — Tue, 21 Mar 2023 23:18:49 +0000

Reading codebases and seeing async/await in functions may look a little tricky. With this article, you will see how they work and notice that it is a clever, easier way to work with asynchronous functions.

Prerequisites 📝

A working knowledge of promises (I will give a quick refresher, if you do not remember!)
A working knowledge of try/catch
A code editor (I recommend Visual Studio Code)

Let's Get Started ✨

First, let's breakdown the async keyword

When you see the async keyword before a function, this means that the function is going to return a promise. (here's the refresher!!!) A promise, in simple terms, is an object that contains the results of the eventual completion or failure of an asynchronous operation. Let's see it in action,

async function brewCoffee() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("coffee is done! enjoy :)"), 2000)
  });

  try {
    let coffee = await promise;
    console.log(coffee);
  } catch(error) {
    console.log('error', error);
  }
}

brewCoffee();

//output: coffee is done! enjoy :)

The function brewCoffee starts with a promise that will resolve after 2 seconds. That promise will be assigned to the variable coffee which will be printed out. If the promise is rejected, the error will be printed out in the catch.

How does await play a role?

The await keyword will pause the execution of the function so the promise can resolve.

How they both work together

The await keyword is declared in the async function. Often, you will see async/await in API calls. This will make sure the data is correctly fetched before other lines of code are called. For example,

async function fetchCappiccunoRecipe() {
  const response = await fetch('https://api.sampleapis.com/coffee/hot');
  const recipe = await response.json();
  return recipe; 
}

function makeCoffee(recipe) {
  console.log('The coffee was made with this ', recipe);
}

async function barista() {
  const recipe = await fetchCappiccunoRecipe();
  makeCoffee(recipe); 
}

barista();

When the barista function is called, the recipe will be fetched which will be passed in as a parameter in the makeCoffee function.

Key Takeaways ✨

async/await will make your code easier to work with, especially since it makes it more readable. It is also a more concise way of writing asynchronous functions. Alternatively, it could have been written like this,

function fetchCappiccunoRecipe() {
  return fetch('https://api.sampleapis.com/coffee/hot');
}

function makeCoffee(recipe) {
  console.log('The coffee was made with this ', recipe);
}

function barista() {
  fetchCappiccunoRecipe().then((response) => {
    response.json().then((recipe) => {
      makeCoffee(recipe); 
    });
  });
}

barista();

You can see that there is more nesting and callback functions. Overall, a more confusing experience.

Next Steps ✨

There may be opportunities in your code base to refactor functions to use async/await. I recommend this article on migrating promises into async/await functions: https://afteracademy.com/blog/migrating-from-promise-chains-to-async-await/ if you need additional guidance! Thanks for reading and happy coding :)

Working With Cache

Valentina Peric — Tue, 18 May 2021 01:25:52 +0000

Whether you are new to programming or you have been at it for a couple of years, you will run into cache. Maybe you have deployed updated code to a project that you have been working on and noticed that the changes are not there. You refresh the page and still nothing! You check deployment and everything looks good. Why are the changes not showing up? The answer probably is that the cache has not cleared.

So, what is cache? How do you work with it?

Cache is something that the browser will access quickly so it does not have to make a request to the server to see the contents of the page you are trying to access.

Picture this: you want to bake cookies. Instead of going to the store to retrieve flour, sugar, chocolate chips, etc. you go right to your kitchen and grab the ingredients you need. Instead of making the request to the server (i.e. going to the store to retrieve items), you accessed cache (i.e kitchen) to get your items in a much faster time.

Cache enhances user experience so you do not have to sit and wait for a page to load. In other words, you do not have to go the store every single time you want to bake cookies.

Back to the beginning of the article: Always. Remember. To. Clear. Cache! 😄

Writing If Statements with the Ternary Operator

Valentina Peric — Mon, 24 Aug 2020 16:47:10 +0000

When I first saw if statements using ternary operators, I was confused. "Why is there a question mark?" and "Why is there a colon?" were probably some of the thoughts I had.

After some research and practice, I was finally getting the grasp on how to take my if statements to the next level using ternary operators.

Prerequisites 📝

A working knowledge of JavaScript (i.e. if statements and truthy/falsy expressions)
A code editor (I recommend Visual Studio Code)

Let's Get Started ✨

First, let's breakdown ternary operators using MDN

The conditional (ternary) operator is the only JavaScript operator that takes three operands: a condition followed by a question mark (?), then an expression to execute if the condition is truthy followed by a colon (:), and finally the expression to execute if the condition is falsy. This operator is frequently used as a shortcut for the if statement.

It looks like this,

condition ? truthy expression : falsy expression

Second, let's take a look at an if statement that could be refactored using the ternary operator

let userIdValid; 

if (userId.value.length === 10) { 
  userIdValid = "the user ID is valid";
}
else {
  userIdValid = "the user ID is not valid";
}

This if statement is a great opportunity to refactor using ternary operators. Let's break it down step by step.

Find the condition (userId.value.length === 10)
Find the truthy value userIdValid = "the user ID is valid";
Find the falsy value userIdValid = "the user ID is not valid";
Put it all together using "?" and ":"

(userId.value.length === 10) ? userIdValid = "the user ID is valid" : userIdValid = "the user ID is not valid";

Notice that you only need the ";" at the very end of the statement.

🎉As a bonus🎉, you can refactor this even further by assigning the statement to the userIdValid variable like this,

let userIdValid = (userId.value.length === 10) ? "the user ID is valid" : "the user ID is not valid";

Key takeaways ✨

Refactoring this took 8 lines of code and simplified it down to 1 line. This is great! Adding a code comment right above the statement can help explain what is going on. This is helpful for future you and other fellow developers!

//checking the validity of the userId by checking its length
let userIdValid = (userId.value.length === 10) ? "the user ID is valid" : "the user ID is not valid";

And there you have it! You just wrote an if statement using ternary operators.

Next Steps ✨

Take a look at some of the if statements you have already written in past or current projects. Do any of them present an opportunity to be refactored using ternary if statements? If yes, I encourage you to give it a try!

Thanks for reading! Was this article helpful for you? Any ideas that can be shared? Post a comment below!

P.S. This is my first technical blog post! I found a lot of encouragement from reading The Developer's Guide to Content Creation by Stephanie Morillo. I highly recommend it!