DEV Community: Michael Kasdaglis

How To Have State Persist Across Refreshes

Michael Kasdaglis — Thu, 21 Sep 2023 19:27:51 +0000

In the fast-paced world of web development, user experience is paramount. Users expect seamless interactions and a smooth flow as they navigate through web applications. One critical aspect of providing this experience is ensuring that the application's state remains intact even when the page is refreshed or closed. This is where window.localStorage comes in. In this beginner-friendly blog, we'll explore how to use window.localStorage to persist state across page refreshes.

What is window.localStorage?
window.localStorage is a built-in web browser feature that allows web applications to store key-value pairs locally within the user's browser. This data persists even after the user closes the browser or navigates away from the page. It's an excellent tool for persisting small amounts of data, such as user preferences, settings, or the current state of a web application.

Getting Started
Before diving into code examples, let's understand the basic concepts of window.localStorage:

localStorage.setItem(key, value): This method stores a key-value pair in the localStorage. Both the key and value must be strings. To store non-string data types like objects or arrays, we'll use JSON.stringify to serialize them into strings.

localStorage.getItem(key): This method retrieves the value associated with a specific key from localStorage. If the stored value is not a string, we'll use JSON.parse to deserialize it into its original data type.

Storing and Retrieving Simple Data
Let's start with a simple example where we store and retrieve a user's name:

Storing data

const userName = "Bird Person";
localStorage.setItem("user", userName);

Retrieving data

const storedName = localStorage.getItem("user");

console.log(storedName); // Output: "Bird Person"

In this example, we've successfully stored the user's name using localStorage.setItem and retrieved it using localStorage.getItem. The retrieved data is a string, which works well for simple values like names or preferences.

Handling Complex Data
Now, let's explore how to use JSON.stringify and JSON.parse to store and retrieve more complex data types, such as objects or arrays. Imagine we want to store and retrieve a user's settings:

Storing complex data

const userSettings = {
  theme: "dark",
  notifications: true,
};

localStorage.setItem("settings", JSON.stringify(userSettings));

Retrieving and parsing complex data

const storedSettings = JSON.parse(localStorage.getItem("settings"));

console.log(storedSettings);
// Output: { theme: "dark", notifications: true }

In this example, we've serialized the userSettings object into a JSON string before storing it in localStorage. When retrieving the data, we used JSON.parse to convert it back into an object. This allows us to work with complex data structures while still using localStorage.

It's essential to handle potential errors and edge cases when working with window.localStorage. Here are a few considerations:

Quota Exceeded: Browsers typically limit the amount of data you can store in localStorage (usually 5-10 MB). You should check for storage quota exceeded errors and handle them.
Data Validation: Before parsing stored data with JSON.parse, make sure it's valid JSON. Invalid JSON will result in parsing errors.
Key Existence: When retrieving data, check if the key exists in localStorage to avoid null or undefined values.

Let's put all these concepts into practice by building a simple to-do list application that persists tasks in localStorage.

import React, { useState, useEffect } from "react";

function ToDoList() {
  const [tasks, setTasks] = useState([]);
  const [taskInput, setTaskInput] = useState("");

  // Load tasks from localStorage on component mount
  useEffect(() => {
    const storedTasks = JSON.parse(localStorage.getItem("tasks")) || [];
    setTasks(storedTasks);
  }, []);

  // Save tasks to localStorage whenever tasks state changes
  useEffect(() => {
    localStorage.setItem("tasks", JSON.stringify(tasks));
  }, [tasks]);

  const addTask = () => {
    if (taskInput.trim() !== "") {
      setTasks([...tasks, taskInput]);
      setTaskInput("");
    }
  };

  const clearTasks = () => {
    setTasks([]);
    localStorage.removeItem("tasks");
  };

  return (
    <div>
      <h1>To-Do List</h1>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>{task}</li>
        ))}
      </ul>
      <input
        type="text"
        value={taskInput}
        onChange={(e) => setTaskInput(e.target.value)}
        placeholder="Add a task"
      />
      <button onClick={addTask}>Add Task</button>
      <button onClick={clearTasks}>Clear Tasks</button>
    </div>
  );
}

export default ToDoList;

In this example, we've created a to-do list application that stores tasks in localStorage. Tasks are stored as an array of strings, serialized and deserialized using JSON.stringify and JSON.parse.

In this beginner's guide, we've explored the power of window.localStorage for persisting data across page refreshes. We've learned how to use setItem and getItem methods to store and retrieve data, as well as how to handle complex data types with JSON.stringify and JSON.parse. By mastering these techniques, you can enhance the user experience of your web applications, making them more user-friendly and reliable. The ability to persist user data and settings is a valuable tool in any web developer's toolkit. Happy coding!

Passing State Back to a Parent in React

Michael Kasdaglis — Sun, 03 Sep 2023 16:31:56 +0000

In React, passing state from a child component back to its parent can be achieved using callback functions. This powerful technique allows for seamless communication between components. To understand this concept better, let's explore a metaphor: giving a child a cellphone. Just as a cellphone allows a child to communicate with their parent, a callback function enables a child component to send data to its parent component. In this blog, we will delve into the concept of callback functions and provide code examples to illustrate their usage.

A callback function is a function passed as a prop from a parent component to a child component. This callback function allows the child component to send data or trigger an action in the parent component. It establishes a communication channel between the child and the parent, similar to how a cellphone enables communication between a child and their parent.

Imagine a scenario where a child wants to inform their parent about something important after the child has left the house. The parent gives the child a cellphone and instructs them to call whenever they need to share information. Similarly, in React, the parent component passes a callback function to the child component, allowing the child to communicate with the parent whenever necessary.

Let's consider a simple React application where a parent component, Parent, renders a child component, Child. The child component has a button, and when clicked, it triggers the callback function passed from the parent, sending a message back to the parent.

// Parent.js

import React from 'react';
import Child from './Child';

const Parent = () => {
  const handleCallback = (message) => {
    console.log(`Received message from child: ${message}`);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <Child cellPhone={handleCallback} />
    </div>
  );
};

export default Parent;

// Child.js

import React from 'react';

const Child = ({ cellPhone }) => {
  const callParent = () => {
    cellPhone("Hello from Child! I'm out in the world, but i can still send you information! thanks for this callback function!");
  };

  return (
    <div>
      <h2>Child Component</h2>
      <button onClick={callParent}>Send Message</button>
    </div>
  );
};

export default Child;
In this example, the parent component defines the handleCallback function, which logs the received message to the console. The callback prop is passed to the child component, where it is triggered when the button is clicked. The child component calls the callback function, passing the message "Hello from Child! I'm out in the world, but i can still send you information! thanks for this callback function!" back to the parent.

Using callback functions in React allows for efficient communication between parent and child components. Just as giving a child a cellphone enables them to share information with their parent, passing a callback function from a parent component to a child component establishes a channel for data transfer. By understanding this metaphor and implementing callback functions, you can enhance the interactivity and functionality of your React applications.

Pythons @property vs. property()

Michael Kasdaglis — Thu, 03 Aug 2023 19:10:19 +0000

In this blog, we will examine the use cases of Python's @property decorator versus the property() function.
In many situations, both approaches can be used to implement a property in a class, practically interchangeably. Nonetheless, they have some distinct advantages and disadvantages that we'll look a bit deeper into.

Let's first do a quick review of the syntactical differences between both approaches.

Using the @property decorator:

class MyClass:
    def __init__(self, my_property):
        self.my_property = my_property

    @property
    def my_property(self):
        return self._my_property

    @my_property.setter
    def my_property(self, value):
        self._my_property = value

Using the property() function:

class MyClass:
    def __init__(self, my_property):
        self.my_property = my_property

    def get_my_property(self):
        return self._my_property

    def set_my_property(self, value):
        self._my_property = value


    my_property = property(get_my_property, set_my_property)

As you can see, the @property decorator allows you to define the getter and setter methods within the class using method definitions with the same name as the attribute.

On the other hand, the property() function requires you to define separate getter and setter methods and assigns them using the property() function.

Both approaches achieve the same result, allowing you to define a property. Typically, the choice between using the @property decorator or the property() function depends on your preferred coding style. However, specific use cases may demand the use of one approach over the other.

For example:

The @property decorator is commonly used when you want to provide a convenient way to access class attributes as if they were regular attributes, without explicitly calling a method. It's especially useful when you want to perform calculations or validation each time the attribute is accessed. The @property decorator allows you to define getter methods in a clean and concise manner. However, one downside is that it limits your control over attribute setting and deletion, as you cannot define separate setter and delete methods for the property.

The property() function is beneficial when you need greater flexibility and customization options for your property. It enables you to define separate getter, setter, and deleter methods, allowing you to add validation, conversion, or additional logic during property access, assignment, and deletion. However, one downside is that the property() function requires more verbose syntax, as each getter, setter, and deleter method needs to be defined explicitly, which can make the code less concise and thus slightly less readable.

In conclusion, both the property decorator and function tend to be two roads to the same destination, but it is helpful to know each ways benefits and deficits and keep them in mind as you code.

Importing Class Files in Python: A Beginner's Guide

Michael Kasdaglis — Sun, 30 Jul 2023 17:48:39 +0000

Python's import statement is a powerful tool that allows us to use code written in one file within another file. This is especially useful when working with class files, as it helps organize and reuse code efficiently. In this beginner-friendly blog post, we will explore the step-by-step process of importing class files into other class files in Python, using code snippets as examples. So let's dive in!

Step 1: Create the class file To begin with, let's create a class file called calculator.py that contains a simple Calculator class:

calculator.py

class Calculator:
    def add(self, a, b):
        return a + b

    def subtract(self, a, b):
        return a - b

Step 2: Now, let's create another class file called main.py that will import the Calculator class from calculator.py and utilize its functionalities:

# main.py

from calculator import Calculator

Step 2.5 Let's start using our Calculator class from within our main.py file.

# main.py
# Create an instance of the Calculator class
calc = Calculator()

# main.py
# Use the 'add' method from the Calculator class
result = calc.add(5, 3)
print("Addition result:", result)

# main.py
# Use the 'subtract' method from the Calculator class
result = calc.subtract(5, 3)
print("Subtraction result:", result)

Step 3: Understanding the import statement In the code snippet above, we used the import statement to import the Calculator class from the calculator.py file. This allows us to create an instance of the Calculator class and access its methods.

Step 4: Now, save both the calculator.py and main.py files in the same directory (lib is a common choice here.), and run the main.py file. You should see the following output:

Addition result: 8
Subtraction result: 2

Congratulations! You have successfully imported class files in Python.

In this beginner's guide, we explored the step-by-step process of importing class files in Python. We learned how to create a separate class file, import it into another file using the import statement, and utilize the imported class's methods. This technique is an essential aspect of Python programming, enabling code organization and modularity!

Beginners Guide to Understanding javaScript Functions Parameters/Arguments

Michael Kasdaglis — Fri, 14 Jul 2023 05:46:36 +0000

What the Functions?!
The goal of this blog is to leave the reader with a clear understanding of how parameters/arguments work within functions in javaScript.
If you're struggling to understand the difference between a parameter and an argument and when the text in parentheses is subjective and when it isn't; read on.

A Quick(ish) Review of Functions
In JavaScript, a function is a reusable block of code that performs a specific task or calculates a value. Functions are an essential part of JavaScript programming as they help in organizing code, promoting reusability, and making it easier to manage the code.

Below is the basic syntax for how a function is written in javaScript. Like many things in programming, there are other ways to write a function, but don't worry about that now.

function functionName(parameterName){
console.log(parameterName) 
};

Neat, right? Now here is an example of the syntax for, and what happens, when we 'call' (or 'invoke') the above function.

functionName('argument')
// => argument
// => undefined

In the next section, we'll unpack what's going on here step by step.

A Deeper Dive Into a Basic Function

Let's pause for a moment and thoroughly review the code we just wrote and the reasons behind it.

function functionName(parameterName){
console.log(parameterName) 
};

We declare that we're writing a function by starting off with the declaration function. This is not subjective, function is a keyword that lets javaScript know we're writing a function.
We name our function. In the above code we chose "functionName". What you name your function is subjective, but best practice says it should have something to do with what the function does and be camelCased.
We put a set of () after the function name. This is not subjective and must be done, even if they remain empty.
We specified our parameter inside the (). Much like the functions name, the specific word you choose is subjective. However, best practice dictates it should have something to do with what the expected argument is (you'll understand what I mean by argument in a bit).
We open/close a pair of {}. Everything inside this set of {} is the functions body. Lots of code can be included in a functions body, but we won't go into that here. For our purposes, we simply console.log() our parameter.

We made it through the function! In the next section, let's take the same approach to breakdown what happens when we call our function.

A Deeper Dive Into a Basic Function Call

Before getting started with our deep dive, I want to point out that 'call' and 'invoke' are used interchangeably with functions. They both mean to run the function, causing the code inside the function to be executed. When you call/invoke a function, the program jumps to the function's body, executes the code within it, and then returns to the point where the function was called/invoked.

OK, on to our function call.

functionName('argument')

We simply type the functions name, in our case it's functionName followed by ().
We pass an argument inside the (). Here we passed the string 'argument'.

That's it. We called our function and passed the string 'argument' as an argument.

If you're following along in replit you'll see
// => argument // => undefined
in your console.

When we call a function the code inside the function's body is executed. Whatever we pass as an argument when the function is called, becomes the value of it's parameter. So here, the string 'argument' becomes the value of the parameter parameterName.
The console.log(parameterName) in the body of the function is executed as console.log('argument'). If we called functionName('with a different argument') we would see

// => with a different argument // => undefined

in our console, because the string we passed, once again, became the value of parameterName.

Before we conclude this blog post, there are a few important points that should be clarified. While our discussion has centered on functions with a single parameter, it's worth noting that there can be functions that take no parameters or multiple parameters. Although the logic we cover here will help with understanding these variations, they are not the focus of this blog.

Also, when we called our functionName, we noticed that in addition to the argument we console.loged, we also received the value 'undefined'. This happened because of the fact that functions have the ability to return values. However, since we haven't explored the concept of returns in this blog, our code did not include any. Naturally, the absence of a defined return value resulted in an output of 'undefined'. Lets worry about all that another day, and return our attention to the topic at hand – parameters and arguments.

Putting It Together

Alright, now that we've dived into some complex stuff, let's switch gears and explore another function. It's going to be pretty similar to the functionName we've been tinkering with, but this time let's ditch the boring literal naming and get creative with some metaphors that I've found super useful!

Consider the function;

function aPitcher(aCup){
console.log(aCup)
};

We can call it several times, passing a different argument to the parameter aCup each time.

aPitcher('orange juice')
// => orange juice
// => undefined

aPitcher('coffee')
// => coffee
// => undefined

aPitcher('beer')
// => beer
// => undefined

Hopefully this makes as much sense to you as it did to me. When we call a function and pass an argument to its parameter, it's like filling up a container with that specific value. Then, within the function's code, wherever the parameter is used or referred to, the corresponding value that we passed gets inserted or used in its place. This is incredibly useful. Just like we can use one pitcher and one cup for any number of bevys, we can use one function and one parameter to execute a block of code on many different values.

Thanks so much for reading my blog! I hope it helps make functions a little more approachable. Happy coding!!