DEV Community: Lawani Elyon John

Models and Simulations

Lawani Elyon John — Mon, 27 Jan 2025 20:08:20 +0000

What's a model?

A model is described as a special type of algorithm. In software an algorithm is a hard-coded set of instructions to calculate a deterministic answer.
Models are algorithms whose instructions are induced from a set of data and are then used to make predictions, recommendations, or prescribe an action that is based on probabilistic assessment. The models uses algorithms to identify patterns in the data that form a relationship with an output.

Why models

Models can predict things before they happen more accurately than human beings, such as catastrophic weather events or who is at risk of imminent death in a hospital.
Models can build each on other. One model's output can act as the input to another, more complex model and then creates a living connected, trainable army of decision makers.

What is a simulation?

A simulation is a process that represents the real-world system and is often utilized when conducting an experiment on systems that is impossible or not viable.
Simulation lets you simulate or mimic the behavior of a system to analyze different outcomes

Why simulation

Simulations are necessary in order to figure out a how to change a system before putting a large quantity of time and money into it.
Business over the years have been using simulations to test various scenarios to make business decisions with more confidence e.g.: Optimizing resource utilization, product pricing.

Modeling vs Simulation

Modelling and simulation are very similar in many ways but have a distinct quality that makes them different. Altough they are both systems that work to save time and money for scientists, engineers, and anyone else in the field of training, analyzing, etc, modeling can be described as a static process and simulation is described as dynamic. Due to the fact that the variables will change in a simulation, it sets itself apart from modeling in that way.

The Burj Al Arab

The Burj Al Arab which is one of the most iconic buildings in the world is a perfect example of how modelling and simulation work together.

Modelling in the Burj Al Arab

During the design phase of the Burj Al Arab, models were created to calculate the building's areodynamics properties, structural integrity, and ability to withstand extreme weather conditions, such as high-speed winds and potential earthquakes. These models used algorithms to analyze thousands of data points, providing architects and engineers that had critical insights.

These models allowed engineers to iterate on the design without building costly physical prototypes.

Simulation in the Burj Al arab

Simulations were conducted to test how the building would respond to real-world scenarios, such as extreme weather events.
Engineers were able to stimulate scenarios using advanced software:

Simulating high-speed winds pushing against the unique sail-shaped facade.
Stimulating the effects of shifting foundations due to the artifical island the building rests on.
Stimulating the process of evacuation processes during emergancies, ensuring the safety for all occupants

By using these techniques, engineers could anticipate challenges and make informed decisions, saving time, resources, and costs.

AGILE Method and it's principles

Agile Software development includes testing as a fundemental component, it is the continous process that occurs in tandem with the development phase and serves as a feedback loop for the team.

Agile development teams increasingly include testers. Every member of an agile team is expected to participate in testing instead of having specialised “testers” or “QA engineers.”

In some organizations, test experts exist, but they report directly to developers and participate in their daily work.

Conclusion

Modeling and simulation are indispensable tools in today's technological and business landscape. The synergy between these tools, as demonstrated in the iconic Burj Al Arab, showcases their potential to drive innovation and solve complex problems. Similarly, adopting principles like those in Agile development further enhances the effectiveness of teams, ensuring continuous improvement and adaptability. Embracing these practices is key to building efficient, resilient, and forward-thinking systems.

Why 1 === 1 is true but {} === {} is false.

Lawani Elyon John — Sat, 18 Jan 2025 23:24:44 +0000

When you dive into JavaScript, one of the first things you'll notice is its strict equality operator (===). At first glance, it seems straightforward, but some cases might leave you scratching your head. Let's explore why 1 === 1 evaluates to true while {} === {} evaluates to false.

The Memory Game: Primitives vs Objects

To understand this behavior, you need to know how JavaScript handles primitives and objects in memory.

Primitives

Primitives include values like numbers, strings, booleans, undefined, null, and symbols. When you compare two primitive values using ===, JavaScript checks if their values are the same. Since both 1 in 1 === 1 refer to the same value, the comparison returns true.

Objects

Objects, on the other hand, are more complex. They are stored in a special area of memory called the heap. Every time you create an object, it gets a new memory location in the heap. When you use === to compare objects, JavaScript checks if the two objects refer to the same memory location. Since {} and {} are two different objects created in memory, they don't share the same location, and {} === {} evaluates to false.

A Deeper Dive: Memory and the Heap

Here’s a simplified diagram to illustrate:

const obj1 = {}; // Created at memory location A
const obj2 = {}; // Created at memory location B

console.log(obj1 === obj2); // false, because A !== B

const obj3 = obj1; // obj3 points to the same location as obj1
console.log(obj1 === obj3); // true, because both point to A

This difference arises because objects are reference types, meaning comparisons check if the references are identical, not the contents.

Using `typeof` to Inspect Values

The typeof operator in JavaScript can help you understand the type of a value. Here's how it works:

console.log(typeof "hello"); // "string"
console.log(typeof 42);       // "number"
console.log(typeof true);     // "boolean"
console.log(typeof undefined);// "undefined"
console.log(typeof null);     // "object" (a known bug!)
console.log(typeof {});       // "object"
console.log(typeof []);       // "object"
console.log(typeof function () {}); // "function"

Surprise: `null` and Arrays Are Objects

You might notice something odd: typeof null returns "object." This is a historical mistake in JavaScript that can't be fixed without breaking the web. Arrays and functions, however, are intentionally objects under the hood.

Functions Are Special Objects

Functions are indeed objects, but they come with a unique property: [[Call]]. This internal property makes them callable, which is why you can invoke them like this:

function greet() {
  console.log("Hello!");
}

greet(); // "Hello!"

Why This Matters

Understanding the distinction between primitives and objects is essential for writing robust JavaScript code. When comparing objects, use deep equality checks if you want to compare their contents. For instance:

const objA = { name: "Alice" };
const objB = { name: "Alice" };

// Shallow equality
console.log(objA === objB); // false

// Deep equality
const isEqual = JSON.stringify(objA) === JSON.stringify(objB);
console.log(isEqual); // true

Conclusion

The key takeaway is that 1 === 1 evaluates to true because primitives are compared by value, while {} === {} evaluates to false because objects are compared by reference. With this knowledge, you’re one step closer to mastering JavaScript's quirks and intricacies!

Different Data types in JavaScript.

Lawani Elyon John — Tue, 14 Jan 2025 20:13:10 +0000

We have different data types in JavaScript.

Primitive types: string, number, boolean, undefined, null, symbol, and bigint.
Reference types: object, function, and array.

Primitive Types

Primitive types are the most basic data types in JavaScript. They're immutable. This means that once a primitive value is created, it can't be changed. Don't confuse this with reassigning a variable. Reassigning a variable is not the same as changing the value of a primitive type.

Reassigning Is Okay 👍🏾

let str = "hello";
str = "Hello"; // str -> "Hello"

In this example, we're reassigning the variable str to a new value. This is perfectly fine.

Same Values Are Same Values in Memory

let str1 = "hello";
let str2 = "hello";

Here we have two variables, str1 and str2, that have the same value. In JavaScript, if two primitive values are the same, they're equal. They're equal because under the hood, both variables point to the same memory location.

Same strings aren't re-created in memory. They're stored in memory only once. JavaScript engineers use a technique called string interning to optimize memory usage. This technique is also used for numbers.

Primitive Types Are Immutable

let str = "hello";
str[0] = "H"; // str -> "hello"

You cannot change a string once it's created. In this example, we're trying to change the first character of the string str to "H." This won't work. The string str will remain the same. Primitive types are immutable.

If you need to create a new string, you can do so explicitly:

let newStr = "H" + str.slice(1); // newStr -> "Hello"

Reference Types

Reference types are mutable. This means that you can change the value of a reference type. They're called reference types to highlight that they're stored as references in memory. While strings are stored as references too, they're immutable and use the interning technique to avoid re-creating identical values in memory.

Objects Are Newly Created in Memory

let obj1 = { name: "John" };
let obj2 = { name: "John" };

Here, obj1 and obj2 are two different objects. They're stored in different memory locations. Even though they have the same properties and values, they're not equal because objects are compared by reference, not by value.

Mutating Objects with the Same Reference

let obj1 = { name: "John" };
let obj2 = obj1;

Here, obj1 and obj2 are the same object. Both variables point to the same memory location. If you change the value at this location, it will be reflected in both variables.

Example

obj2.name = "Jane"; // obj1 -> { name: "Jane" }, obj2 -> { name: "Jane" }

To visualize how this would look in memory:

Memory location 1: { name: "John" }

obj1 -> Memory location 1
obj2 -> Memory location 1

With the update:

Memory location 1: { name: "Jane" }

obj1 -> Memory location 1
obj2 -> Memory location 1

We updated the value in memory location 1. It's only natural that both obj1 and obj2 reflect this change since they both reference the same memory location.

Conclusion

Primitive types are immutable and optimized for memory usage with techniques like string interning, while reference types allow for greater flexibility through mutability and shared references. By mastering these concepts, you can better predict and control the behavior of your code, leading to more robust and maintainable applications.

Statements VS Expressions with JavaScript

Lawani Elyon John — Wed, 01 Jan 2025 21:15:10 +0000

When we encounter JavaScript, you'll often dive into the terms "statements" and "expressions." While they may seem interchangeable at first glance, understanding their differences is crucial to mastering the language.

In this blog post, I'll break down the concepts with examples, explain their traits and roles in JavaScript, and show you how to use them effectively in your code. By the end, you should have a solid grasp of how to use them in your projects.

Expressions

An expression is a piece of code that produces a value. For example, 2 + 2 is an expression that produces the value 4. Expressions can be as simple as a single value or as complex as a function call that returns a value.

5 + 4; // This evaluates to the value 9
"Hello, " + "World"; // This evaluates to the string "Hello, World"
x[1, 2, 3]; // This evaluates to the value of the variable x
[1, 2, 3].pop(); // This evaluates to the number 3

Expressions can be used as part of a statement, such as assigning the result of an expression to a variable or using an expression as a condition in an if statement.

Key Traits of an Expression:

Produces a value when evaluated.
Can be used wherever a value is expected, such as a function argument or an assignment.
Can be combined with other expressions using operators to form more complex expressions.

For example:

let sum = 5 + 4; // The expression `5 + 4` produces the value 9, which is assigned to `sum`
if (sum > 5) {
  console.log("Sum is greater than 5"); // The expression `sum > 5` evaluates to `true`
}

Statements

A statement is a piece of code that performs an action or controls the flow of the program. Unlike expressions, statements do not produce values directly, although they may contain expressions.

let x = 5; // Variable declaration and assignment
console.log("Hiiii"); // Function call statement
if (x == 3) { ... } // Conditional statement
for (let i = 0; i < 10; i++) { ... } // Loop statement

Statements are typically terminated with a semicolon (;). However, in JavaScript, semicolons can often be omitted depending on your code style and configuration.

Key traits of statements:

Perform actions or control the flow of a program.
Often composed of expressions, but do not necessarily produce a value themselves.
Structure the program and determine its execution flow.

Differences Between Expressions and Statements

The main difference between expressions and statements is that:

Expressions produce a value.
Statements perform actions or control the program flow.

Despite these differences, there is a relationship between expressions and statements. Expressions can be used as parts of statements, and some statements can contain expressions.

Examples:

let x = 5 + 3; // The expression "5 + 3" is part of the assignment statement.
if (x > 10) { 
  // The expression "x > 10" is used as the condition in the if statement.
  console.log("x is greater than 10");
}

Form validation with YUP

Lawani Elyon John — Thu, 19 Dec 2024 22:17:15 +0000

Simplify your Form Validation in React with Yup

When building web applications, form validation is key to ensuring data integrity. If you're looking for a simple yet powerful way to validate forms in React, Yup is your best friend! This blog will walk you through the steps to set up Yup and create a polished form with validation.

What You’ll Learn

By the end of this blog, you'll know how to:

Set up Yup for validation in React.
Build a form with validation rules.
Style your form using external CSS.

Prerequisites

Before diving in, make sure you have:

Basic knowledge of React.
Node.js installed on your computer.

Step 1: Setting Up Yup

First, install Yup in your React project. Run the following command in your terminal:

npm install yup

Step 2: Creating the Form

Here's a simple form with fields for a name and email. We'll use React's useState to manage input values and errors.

import React, { useState } from 'react';

function MyForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Validation will go here
  };

  return (
    <form onSubmit={handleSubmit}>
      <div>
        <label>Name:</label>
        <input
          type="text"
          name="name"
          value={formData.name}
          onChange={handleChange}
        />
      </div>
      <div>
        <label>Email:</label>
        <input
          type="email"
          name="email"
          value={formData.email}
          onChange={handleChange}
        />
      </div>
      <button type="submit">Submit</button>
    </form>
  );
}

export default MyForm;

Step 3:

Now it is time to integrate Yup. I'll be creating a validation schema and then check the form data once submitted.

import * as Yup from "yup"

const validationSchema = Yup.object({
name: Yup.string().required('Name is required!')
email: Yup.string().email('Your email is invalid').required('email is required')
})

I'll use this schema in the handleSubmit function to validate the form

  const handleSubmit = (e) => {
    e.preventDefault();
    try {
    await validationSchema.validate(formData, { abortEarly: false });
    setErrors({});
    alert('Form is valid!');
  } catch (err) {
    const newErrors = {};
    err.inner.forEach((error) => {
      newErrors[error.path] = error.message;
    });
    setErrors(newErrors);
  }
  };

Step 4: Styling the form

To make the form look good, create an external CSS file (MyForm.css) and add these styles:

.form-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 20px;
  background: #f9f9f9;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.label {
  font-weight: bold;
}
.input {
  width: 100%;
  padding: 10px;
  margin: 5px 0;
  border-radius: 4px;
}
.error {
  color: red;
  font-size: 12px;
}
.button {
  background: #4caf50;
  color: white;
  padding: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.button:hover {
  background: #45a049;
}

Import the CSS file into your component:

import './MyForm.css';

Full Code:

import React, { useState } from 'react';
import * as Yup from 'yup';
import './MyForm.css';

function MyForm() {
  const [formData, setFormData] = useState({ name: '', email: '' });
  const [errors, setErrors] = useState({});

  const validationSchema = Yup.object({
    name: Yup.string().required('Name is required!'),
    email: Yup.string().email('Invalid email!').required('Email is required!'),
  });

  const handleChange = (e) => {
    setFormData({ ...formData, [e.target.name]: e.target.value });
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      await validationSchema.validate(formData, { abortEarly: false });
      setErrors({});
      alert('Form is valid!');
    } catch (err) {
      const newErrors = {};
      err.inner.forEach((error) => {
        newErrors[error.path] = error.message;
      });
      setErrors(newErrors);
    }
  };

  return (
    <div className="form-container">
      <h1>Simple Form</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label className="label">Name:</label>
          <input
            type="text"
            name="name"
            value={formData.name}
            onChange={handleChange}
            className="input"
          />
          {errors.name && <div className="error">{errors.name}</div>}
        </div>
        <div>
          <label className="label">Email:</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleChange}
            className="input"
          />
          {errors.email && <div className="error">{errors.email}</div>}
        </div>
        <button type="submit" className="button">Submit</button>
      </form>
    </div>
  );
}

export default MyForm;

Conclusion

Yup is a powerful tool for form validation, even without Formik. With just a few lines of code, you can add robust validation to your React apps.

Data Visualization and Dropdowns made simple in Vite React: Chart.js, React-Chartjs-2, and React-Select

Lawani Elyon John — Wed, 11 Dec 2024 01:47:29 +0000

Introduction

When building dashboards or data-centric applications, visualizations and interactive elements like dropdowns play a significant role.
So In this tutorial, I’ll walk you through integrating Chart.js, React-Chartjs-2, and React-Select into a Vite React project.

Setting Up Your Vite React Project

Start by creating a new Vite React project. Run the following command:

npm create vite@latest cov-dashboard -- --template react

Navigate into the project folder:

cd cov-dashboard

Install dependencies:

npm install

Installing Chart.js, React-Chartjs-2, and React-Select

To include these libraries in your project, install them with:

npm install chart.js react-chartjs-2 react-select

📝 Note: Ensure you use npm instead of yarn if you prefer a consistent package management approach.

Creating a Simple Bar Chart

Here’s how you can create a Bar Chart using react-chartjs-2:

Component: BarChart.jsx

import React from 'react';
import { Bar } from 'react-chartjs-2';
import Chart from 'chart.js/auto';

const data = {
  labels: ['Jan', 'Feb', 'Mar'],
  datasets: [
    {
      label: 'Sales',
      data: [30, 50, 70],
      backgroundColor: ['rgba(75, 192, 192, 0.6)'],
    },
  ],
};

const BarChart = () => <Bar data={data} />;

export default BarChart;

Adding a Dynamic Dropdown

Let’s add a dropdown menu with react-select:

Component: Dropdown.jsx

import React from 'react';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'vanilla', label: 'Vanilla' },
  { value: 'strawberry', label: 'Strawberry' },
];

const Dropdown = () => <Select options={options} />;

export default Dropdown;

Integrating the Components

Import and use the components in your main App.jsx:

Main App:

import React from 'react';
import BarChart from './BarChart';
import Dropdown from './Dropdown';

const App = () => (
  <div>
    <h1>Dashboard</h1>
    <BarChart />
    <Dropdown />
  </div>
);

export default App;

Conclusion

With this simple minimal setup, you’ve learnt how to successfully add powerful tools for visualizations and interactive UI components in your Vite React project.

Making HTTP Simple with Python request Module.

Lawani Elyon John — Sat, 07 Dec 2024 23:28:59 +0000

Introduction

HTTP is a TCP/IP-based application layer communication protocol that standardizes how clients and servers communicate with each other.
It is used to load webpages using hypertext links.
"Whether you're fetching data from an API or submitting form data, the requests library in Python is your go-to tool for making HTTP requests seamless and intuitive."

How to install `requests`

In your terminal type in:

pip install requests

Well it’s part of the Python standard library’s ecosystem but needs to be installed.

This is us making our first basic request so.... :

import requests
response = requests.get('https://jsonplaceholder.typicode.com/todos')
print(response.json())

The response object contains all the details of the request, including status codes, headers, and data. Use response.json() to parse JSON data directly.

The HTTP Methods that are used with requests:

If you're using the request library there are various requests the library supports:

GET: Used to retrieve data from the server.
POST: Used to send data from a server.
PUT/PATCH: Used to update an existing resource
DELETE: Used to remove a resource.

This is my second request using a POST Method:

data = {'title': 'Create an example', 'completed': 'true', 'userId': 1}
response = requests.post('https://jsonplaceholder.typicode.com/todos',json=data)
print(response.json())

How you handle the errors and check the status code.

response = requests.get('https://jsonplaceholder.typicode.com/todos')
if response.status_code == 200:
print("Success:", response.text)
else:
print("Failed with status code:", response.status_code)

Advance cases in requests.

File Uploading :

files = {'file': open('firstexample.txt', 'rb')}
response = requests.post('https://jsonplaceholder.typicode.com/todos', files=files)
print(response.status_code)

Some practical use cases :

These are some real - world applications where requests library can be used:

API Integration: API Integration: Fetch and display data from public APIs like weather, news, or user information.
Webhooks: Interact with services like Slack or Zapier to automate workflows.
Web Scraping: (Be responsible!) Fetch HTML content for analysis using tools like BeautifulSoup in conjunction with requests.

Conclusion

Mastering Python’s requests library is an essential skill for developers working with APIs or web services. It simplifies complex HTTP operations, making it easier to focus on your application’s logic.
For more information, refer to the official documentation.

🖼️ Build an Image Converter WebApp Using Python and Streamlit

Lawani Elyon John — Thu, 28 Nov 2024 01:13:41 +0000

🌟 Introduction

Have you ever wanted a quick, browser-based tool to convert image formats without installing extra software? 🤔 Well, I built an Image Converter WebApp using Python and Streamlit, and it does just that! 🚀 In this post, I’ll walk you through the app, its features, the process of building it, and what I’ve learned along the way.

🛠️ Tech Stack

This project uses:

Python: The powerhouse behind image processing.
Streamlit: A fantastic framework for building fast, interactive web apps.
Pillow (PIL): For handling image file processing.

✨ Features

Here’s what this app offers:

🖼️ File Upload: Supports image formats like PNG, JPG, JPEG, JFIF, and BMP.
🔄 Format Conversion: Easily convert images into formats like PNG, JPEG, JFIF, or BMP.
📤 Image Preview: Displays the uploaded image and its original format.
⬇️ Download Option: Allows you to download the converted image instantly.

🛤️ Let's build the App

Step 1: Setting Up the Project

Open your terminal or command prompt.
Create a new directory named IMGCONVERTOR and navigate into it:

   mkdir IMGCONVERTOR  
   cd IMGCONVERTOR

Open the project folder in VS Code:

   code .

Install the required libraries using the following command:

   pip install streamlit pillow

Now you’re ready to start building the app! 🎉

Step 2: Writing the Core Functionality

Inside your project directory, create a new Python file named imgconvrtr.py:

   touch imgconvrtr.py

If you're using Windows, you can create the file with:

   echo. > imgconvrtr.py

Open the imgconvrtr.py file in your text editor, and add the following code to define the core function for image conversion:

   from PIL import Image  
   import io  

   def convert_img_format(image_file, frmat):  
       with Image.open(image_file) as img:  
           output_img = io.BytesIO()  
           img.save(output_img, format=frmat.upper())  
           output_img.seek(0)  
           return output_img

This file acts as a module that will be imported into your main Streamlit app to handle image processing.

Step 3: Creating the Streamlit Interface

Streamlit makes building interactive web apps easy, and it's perfect for this project:

In your project directory, create a new Python file named app.py:

   touch app.py

For Windows users:

   echo. > app.py

Open the app.py file in your text editor, and add the following script:

   import streamlit as st  
   from PIL import Image  
   from imgconvrtr import convert_img_format  

   # App Title  
   st.title("Image Converter")  

   # File Uploader  
   uploaded_file = st.file_uploader("Upload an Image", type=["png", "jpg", "jpeg", "jfif", "bmp"])  

   if uploaded_file is not None:  
       # Display the uploaded image  
       img = Image.open(uploaded_file)  
       st.image(img, caption="Uploaded Image", use_column_width=True)  
       st.write(f"Original format: {img.format}")  

       # Format selection dropdown  
       output_format = st.selectbox("Choose the output format", ["PNG", "JPEG", "JFIF", "BMP"])  

       # Convert and download the image  
       if st.button("Convert 📸"):  
           converted_img = convert_img_format(uploaded_file, output_format.lower())  
           st.download_button(  
               label=f"Download as {output_format}",  
               data=converted_img,  
               file_name=f"image.{output_format.lower()}",  
               mime=f"image/{output_format.lower()}"  
           )

Save the file. This script builds an interactive interface where users can upload images, select a desired format, and download the converted image.

You’re now ready to test your app! Run the following command in your terminal:

streamlit run app.py

This will launch the app in your default web browser, allowing you to interact with the converter. 🚀

🌱 What I Learned

This project taught me:

How to use Pillow for image processing.
Creating interactive UI with Streamlit.
Handling file uploads and downloads in web apps.

🚀 Improvements

Here are some ideas to take this project further:

Add GIF and WebP format support.
Enable image resizing and cropping.
Improve accessibility with better keyboard navigation.

💻 Running the Project

To run this app locally:

Clone the repo:

   git clone https://github.com/Lawani-EJ/Image-Convertor

Navigate to the project directory:

   cd Image-Convertor

Install dependencies:

   pip install -r requirements.txt

Start the Streamlit server:

   streamlit run app.py

Open your browser at http://localhost:8501.

🎥 Demo

Here’s a quick look at the app in action:

And a screenshot of the app interface:

🙏 Thank You!

Thanks for reading! If you found this project interesting, give it a star ⭐ on GitHub and share your thoughts in the comments below. Let’s make image processing easier for everyone! 😄

Aliases in React with Vite: And how they Simplify Your Imports 🚀.

Lawani Elyon John — Thu, 21 Nov 2024 08:58:04 +0000

Managing Import Paths in React? Meet Your New Best Friend: Aliases!

Managing import paths in React projects can quickly turn into a nightmare, especially as your application grows. Constantly navigating through long relative paths like this:

import MyComponent from '../../../components/MyComponent';

...can feel frustrating and messy. But don’t worry—there’s a solution: aliases! ✨

In this blog, I’ll show you how to configure aliases in your React project using Vite. By the end, you’ll see how aliases can simplify your workflow, improve code readability, and make refactoring a breeze.

What Are Aliases in JavaScript Projects?

Aliases allow you to replace long, relative import paths with short, predefined keywords. For example:

Without Aliases:

import MyComponent from '../../../components/MyComponent';

With Aliases:

import MyComponent from '@/components/MyComponent';

In this case, the @ alias maps to the /src directory, making your imports more concise and manageable.

Setting Up Aliases in Vite

Step 1: Install Vite and React Plugins

If you haven’t already, set up your Vite project by running:

npm create vite@latest my-app --template react  
cd my-app  
npm install

Step 2: Modify the `vite.config.js` File

Open vite.config.js or vite.config.ts and configure the alias:

import { defineConfig } from 'vite';  
import react from '@vitejs/plugin-react';  

export default defineConfig({  
  plugins: [react()],  
  resolve: {  
    alias: {  
      '@': '/src', // '@' now represents the 'src' directory  
    },  
  },  
});

Step 3: Start Using Aliases

Instead of writing:

import Header from '../../components/Header';

You can now write:

import Header from '@/components/Header';

Why Should You Use Aliases?

Here’s how aliases can enhance your workflow:

Improved Readability: Clean, concise, and easy-to-understand import paths.
Refactoring Made Easy: Change your project structure without worrying about breaking import paths.
Consistency Across Teams: Standardize how your team organizes imports.

Conclusion

Aliases are a simple yet powerful tool for improving code navigation, readability, and maintainability. Whether you’re building a small project or working with a team on a large-scale application, this technique can save you time and headaches.

So, what are you waiting for? Try aliases in your next project and let me know how it transforms your workflow!

Alive Progress Bars 🚀

Lawani Elyon John — Tue, 12 Nov 2024 21:19:19 +0000

Add Life to Your Terminal with Alive Progress Bar

If you’re tired of plain terminal output, here’s something fun! This demo uses the alive_progress library to add an interactive progress bar that visually updates as tasks progress. It’s perfect for those times when you want to bring some life to your terminal! 🎨

📝 What is Alive Progress Bar?

alive_progress creates an animated progress bar that adapts to task speed, making it great for visualizing longer tasks and improving UX in CLI apps. Plus, it’s open-source and easy to implement!

🛠️ Setting Up

Install alive_progress by running:

   pip install alive-progress

Run the Code

Here’s a simple example:

   from alive_progress import alive_bar
   import time

   for x in 1000, 1500, 700, 0:
       with alive_bar(x) as bar:
           for i in range(1000):
               time.sleep(.005)
               bar()

🎛️ How It Works

The code cycles through different task durations, with each one triggering a unique progress animation in the terminal:

x: Sets the task duration.
alive_bar(x): Initializes the progress bar.
bar(): Updates it each loop cycle.

Try experimenting with these values to see different speeds in action!

📸 Showcase

Here’s a snapshot of it in action:

📣 Why Use It?

It makes waiting less boring and adds professionalism to your scripts. Try it out, and let me know what you think! Check out the official alive_progress GitHub page for more features.

Give it a try and enjoy coding with style! 😎

Build a TODO Application With React and Vite.

Lawani Elyon John — Tue, 12 Nov 2024 16:12:01 +0000

Introduction ✨

In this project walkthrough, I’ll share insights on building a Todo Web Application using React and Vite. We’ll cover essential topics like state management, responsive design, and interactivity to create a simple but feature-rich productivity tool. You can find the complete code on GitHub and follow along to build your own version!

GitHub Repository: Todo Web Application

Why a Todo App? 🤔

Creating a Todo app is a foundational project for developers, helping to hone skills in component-based architecture, event handling, and state management. This app lets users manage tasks, offering features to add, remove, and reorder them as needed—ideal for organizing daily activities! 🗓️

Project Overview 📋

The application includes the following functionalities:

Adding and Deleting Tasks ➕🗑️: Users can seamlessly manage their tasks list.
Reordering Tasks 🔄: Users can reorder tasks by dragging and dropping, a feature that enhances usability.
Responsive Layout 📱: The design adapts to different screen sizes, making it mobile-friendly.

Tools and Technologies Used 🛠️

React: Handles the UI with reusable components and efficient state management.
JavaScript (ES6): Adds dynamic interactions and efficient logic for task management.
CSS: Styles the app with responsive design elements.
Vite: Provides a fast, optimized environment for building and previewing React applications.

Building the Todo Web Application 🚀

So... Yup! Let’s go through the setup, components, and some notable code snippets.

Initial Setup ⚙️ To set up the project, clone the repository and install dependencies:

   git clone https://github.com/Lawani-EJ/Todo-WebApplication.git
   cd Todo-WebApplication
   npm install
   npm run dev

Using Vite provides faster refresh times and optimized builds—an excellent choice for modern web development! ⚡

Component Structure 🧩 Each component in React encapsulates a part of the UI. This is the breakdown:

App Component: The root component that manages state and renders child components.
TaskList Component: Displays the list of tasks, handling the addition, deletion, and ordering of tasks.
Task Component: Represents individual tasks with functionalities for updating and removing items.

This modular approach ensures a clean and maintainable codebase, allowing components to be updated independently.

Adding and Managing Tasks 📝 Using React’s state and event handling, this application enables users to add, edit, and delete tasks. Here’s a snippet for adding a task:

   function addTask() {
       if (newTaskText.trim() !== "") {
           setTasks(t => [...t, { id: self.crypto.randomUUID(), text: newTaskText }]);
           setNewTaskText("");
       }
       event.preventDefault();
   }

Each task update triggers a re-render, allowing the UI to refresh immediately with new data.

Styling the Application 🎨

Using CSS Flexbox and Media Queries, the app adapts to various screen sizes:

.container {
  display: flex;
  flex-direction: column;
  gap: 1em;
}
@media (max-width: 600px) {
  .container {
    flex-direction: column;
  }
}

Challenges and Solutions 🧠

While developing, some challenges arose, including:

Efficient State Management: Handling multiple states in React can get complex, especially with interactive features like drag-and-drop.
Responsive Layout: Ensuring that the layout works seamlessly on various devices required careful planning and testing.
Data Persistence: Setting up local storage involved managing synchronization between the app’s state and the saved data.

Conclusion and Future Improvements 🔮

Building a Todo Web Application is an excellent way to deepen your understanding of React and front-end development. It reinforces knowledge of components, state management, and responsive design principles.

Future Enhancements 🌟

Adding user accounts with cloud storage for tasks ☁️
Implementing task categories or tagging 📂
Adding animations to improve UI experience during interactions 🎬

Thank you for reading! Feel free to explore, fork, and contribute to the Todo Web Application on GitHub.

Simple Command-Line Task Manager in Python.

Lawani Elyon John — Mon, 07 Oct 2024 18:13:00 +0000

🛠️ Setting up the Development Environment
📋 Prerequisites
🚀 Project Initialization
🧩 Implementing Features
🐛 Testing and Debugging
🏁 Final Project

In this tutorial, we’ll build a command-line task manager using Python. Task managers are great for learning programming basics like user input, loops, conditionals, and lists. By the end, you'll have a working task manager where you can add, view, update, and delete tasks.

Setting up the Development Environment 🖥️

Choosing a programming language is crucial. Python is versatile for web development, software, math, and system scripting. To start, make sure you have Python installed. Download Python.

Install an IDE: We’ll use Visual Studio Code for code writing, debugging, and compiling. Download VS Code.

Project Initialization 🚀

With everything set up, create a directory and a Python file:

mkdir task_manager
cd task_manager
touch task_manager.py

This will be your main file where the task management logic goes.

Implementing the Features ✨

Adding Tasks ➕

Here’s a function to add tasks:

tasks = []

def create_tasks():
    title = input("Enter Your Task Title: ")
    description = input("Enter Your Task Description: ")
    tasks.append({"Task Title": title, "Task Description": description})
    print("✅ Task Created Successfully.")

This function prompts the user for a task title and description, then adds it to the task list.

Main Menu 🗂️

Create an interactive loop for user options:

while True:
    print("\nWelcome to the Interactive Task Manager")
    print("1. Add Task")
    print("2. View Task")
    print("3. Update Task")
    print("4. Delete Task")
    print("5. Exit")

    choice = input("Select an option from (1-5): ")

    if choice == '1':
        create_tasks()
    elif choice == '2':
        see_tasks()
    elif choice == '3':
        update_tasks()
    elif choice == '4':
        delete_tasks()
    elif choice == '5':
        print("Exiting the task manager.")
        break
    else:
        print("⚠️ Invalid option. Please select between 1 and 5.")

Viewing Tasks 👀

To view created tasks:

def see_tasks():
    if tasks:
        print("Available Tasks:")
        for idx, task in enumerate(tasks, start=1):
            print(f"{idx}. Task Title: {task['Task Title']}, Task Description: {task['Task Description']}")
    else:
        print("📭 No Tasks Available.")

Updating Tasks ✏️

The update_tasks() function enables flexible task updating:

def update_tasks():
    see_tasks()
    if tasks:
        tasks_index = int(input("Provide the Index of your task to be updated: ")) - 1
        if 0 <= tasks_index < len(tasks):
            new_task_title = input("Provide your new title or (Press Enter to keep current title): ")
            new_task_description = input("Provide your new description or (Press Enter to keep current description): ")
            if new_task_title: ""
                tasks[tasks_index]['Task Title'] = new_task_title
            if new_task_description: ""
                tasks[tasks_index]['Task Description'] = new_task_description
            print("✅ Task Updated")
        else:
            print("⚠️ Invalid Index.")
    else:
        print("📭 No Tasks Available.")

Deleting Tasks 🗑️

To remove unwanted tasks:

def delete_tasks():
    see_tasks()
    if tasks:
        tasks_index = int(input("Provide the Index of the task to be deleted: ")) - 1
        if 0 <= tasks_index < len(tasks):
            deleted_task = tasks.pop(tasks_index)
            print(f"🗑️ Task '{deleted_task['Task Title']}' deleted successfully.")
        else:
            print("⚠️ Invalid Index.")
    else:
        print("📭 No Tasks Available.")

Testing and Debugging 🔍

Testing the Add Function: Check if tasks are stored and displayed.
Testing the Update Function: Ensure title or description updates work independently.
Testing the Delete Function: Try deleting tasks and see if the list updates correctly.
Edge Cases: Test program behavior with no tasks, invalid inputs, etc.

Output 🎉

Conclusion 🏆

You’ve built a simple task manager using Python! You learned:

Setting up a development environment
Task management features like add, view, update, delete
Testing and debugging techniques

Future Extensions 🚀

Add file-saving for persistence.
Add due dates for tasks.
Create categories for task organization.

Acknowledgments 🙌

Special thanks to codingdidi for inspiration. Check out the helpful YouTube video here: YouTube Tutorial.

DEV Community: Lawani Elyon John

Models and Simulations

What's a model?

Why models

What is a simulation?

Why simulation

Modeling vs Simulation

The Burj Al Arab

Modelling in the Burj Al Arab

Simulation in the Burj Al arab

AGILE Method and it's principles

Conclusion

Why 1 === 1 is true but {} === {} is false.

The Memory Game: Primitives vs Objects

Primitives

Objects

A Deeper Dive: Memory and the Heap

Using typeof to Inspect Values

Surprise: null and Arrays Are Objects

Functions Are Special Objects

Why This Matters

Conclusion

Different Data types in JavaScript.

Primitive Types

Reassigning Is Okay 👍🏾

Same Values Are Same Values in Memory

Primitive Types Are Immutable

Reference Types

Objects Are Newly Created in Memory

Mutating Objects with the Same Reference

Example

Conclusion

Statements VS Expressions with JavaScript

Expressions

Key Traits of an Expression:

Statements

Key traits of statements:

Differences Between Expressions and Statements

Examples:

Form validation with YUP

Simplify your Form Validation in React with Yup

What You’ll Learn

Prerequisites

Step 1: Setting Up Yup

Step 2: Creating the Form

Step 3:

Step 4: Styling the form

Full Code:

Conclusion

Data Visualization and Dropdowns made simple in Vite React: Chart.js, React-Chartjs-2, and React-Select

Introduction

Setting Up Your Vite React Project

Installing Chart.js, React-Chartjs-2, and React-Select

Creating a Simple Bar Chart

Adding a Dynamic Dropdown

Integrating the Components

Conclusion

Making HTTP Simple with Python request Module.

Introduction

How to install requests

This is us making our first basic request so.... :

The HTTP Methods that are used with requests:

This is my second request using a POST Method:

How you handle the errors and check the status code.

Advance cases in requests.

Some practical use cases :

Conclusion

🖼️ Build an Image Converter WebApp Using Python and Streamlit

🌟 Introduction

🛠️ Tech Stack

✨ Features

🛤️ Let's build the App

Step 1: Setting Up the Project

Step 2: Writing the Core Functionality

Step 3: Creating the Streamlit Interface

🌱 What I Learned

🚀 Improvements

💻 Running the Project

🎥 Demo

🙏 Thank You!

Using `typeof` to Inspect Values

Surprise: `null` and Arrays Are Objects

How to install `requests`

Step 2: Modify the `vite.config.js` File