DEV Community: Ibrahim Bagalwa

Imagine this:

You and your friends start a music band. You practice in your garage every weekend.
Everything works well: your instruments, your sound system, your setup it's perfect.

The First Gig… and the First Problem

One day, someone invites your band to play in another city. You are excited, you pack your things and go. But when arrive problems start:

Drummer forgot something important: it could be a pedal or drumsticks.
The speaker doesn’t work with the power in this city.
The keyboard isn’t connecting properly.
The microphone cables are different.

You spend hours trying to fix everything.

By the time you start playing, it's… okay. But something’s off.
It doesn’t sound like home.

Then, you get more gigs. More travel.

And every single time, something breaks:

The sound is weird.
Something is missing again.
You keep wondering: Why does it work at home but not here?

It’s frustrating. You’re tired of fixing things all the time.

You realize:

We don't just need our music, we need our whole setup, the same setup everywhere we go.

So, you come up with a smart solution:

You buy a big van and load it with everything you need inside: speakers, instruments, cables, lights, adapters, even your power adapters.

Now, no matter where you go, you just open the van, plug things in, and start the show.

Same setup.
Same sound.
Every time.

It works anywhere. No more surprises.

That Van? It’s Docker.

When developers write code, it often runs perfectly on their computer.

But when it’s deployed somewhere else, another laptop, a teammate’s machine, or a server, it breaks.

Why?

Missing files
Incorrect settings
Conflicting software versions
Different environments

It’s the same problem your band had.

Docker is the Smart Solution.

Docker lets you package your app and everything it needs, along with all its dependencies (code, tools, settings, environment) into one small, clean box called a container.

You can send that container to any machine, and it will run exactly the same.

No bugs. No surprises. No “it works on my machine” excuses.

It’s like putting your entire music setup into a van:

Wherever you go, the experience stays the same.

What You’ll Learn in This Series

In this beginner-friendly series, we’ll go from “What is Docker?” to “I’m confidently using Docker in real-world projects.” Here's what’s coming:

Understanding Docker
Installing and Exploring Docker
Using Docker in Real Projects
Docker Compose for Real-World Apps

Customizing Rust Error Messages with Diagnostic Attributes

Ibrahim Bagalwa — Fri, 03 May 2024 04:48:35 +0000

Rust now supports diagnostic attributes which helps you customize the error messages you get from the compiler.
You can now add a special tag, #[diagnostic], to your code to give hints to the compiler about how you want your error messages to look.

One example of this is #[diagnostic::on_unimplemented], which you can put on a trait to change the error message when that trait is required but not implemented for a type.

Before this feature, you'd get a standard error message from the compiler saying that the trait wasn't implemented for the type you used.
Here is the example before Rust 1.78.0:

But with #[diagnostic::on_unimplemented], you can now provide your own custom message, a label, and additional notes to help explain the issue better.

So instead of just getting a generic error, you can now see a message that you wrote yourself, along with any additional explanations or hints you think are useful. This makes it easier to understand what went wrong and how to fix it, especially for trait authors who can now give more helpful hints about the missing implementation.

Before you can use the cool new diagnostic features in Rust, ensure you have the latest version installed.
If you haven't installed Rustup yet, follow the instructions on the official Rust website: Install Rust.
If you have Rust already installed you can run the following command:
rustup update

Understanding TypeScript Utility Types: Pick and Omit

Ibrahim Bagalwa — Wed, 26 Jul 2023 14:17:50 +0000

TypeScript provides several utility types to facilitate common type transformations.

These good features make it easy to manipulate types, either by selecting specific properties or removing unwanted ones from objects.

In this article, we'll demystify TypeScript's utility types, focusing on Pick and Omit. Whether you're new to TypeScript or a pro, understanding these concepts will improve your coding skills.

These utility types make it easy to work with just the data you need and simplify object manipulation in TypeScript.

Pick

Allows you to create a new type by selecting specific properties from an existing type.

interface User {
  id: number;
  username: string;
  email: string;
  isAdmin: boolean;
  createdAt: Date;
}

If, you want to create a new type that only contains the essential information for displaying a user's profile, like their username and email. You can use Pick to achieve this:

type UserProfil = Pick<User, "username" | "email">;

const user: UserProfil = {
  username: "Ibrahim Bagalwa",
  email: "ibrahim.bagalwa.dev@gmail.com",
};

UserProfil is a new type created using Pick, which includes only the username and email properties from the original User interface.

It allows you to work with a more concise representation of a user's profile without including unnecessary details.

Omit

Allows you to create a new type by taking all the properties from an existing type (Type) and then removing specific properties represented by Keys.

It's the opposite of the Pick utility type.

interface UserSettings {
    darkMode: boolean;
    notifications:boolean;
    showEmail: string;
    language: string;
}

If you want to create a new type that excludes sensitive settings, like the user's email visibility. You can use Omit to achieve this:

type PublicUserSettings = Omit<UserSettings, "showEmail">

const userSettings: PublicUserSettings = {
  darkMode: true,
  notifications: true,
  language: "en",
};

PublicUserSettings is a new type created using Omit, which includes all the properties from the original UserSettings interface except showEmail.

It allows you to create a type that represents only the public settings, hiding sensitive data from being exposed.

Pick allows you to choose certain properties from an object, while Omit lets you remove specific properties. Both are useful for working with precise data in TypeScript.

JavaScript's Immutable Arrays Revolution.

Ibrahim Bagalwa — Tue, 04 Jul 2023 20:49:10 +0000

Javascript introduced the powerful feature of changing elements, sort,reverse and splice arrays without changing the original, thus giving it immutability.

Four new methods allow you to change arrays without having to create a copy first.

The new methods are:

1. with()

with() method creates a copy and allows changing the value at a specific index. It produces a new array where the element at the specified index is replaced by the provided value.

const arr = ["I", "B", "R", "A", "H", "I", "M"];
console.log(arr.with(2, "b")); // ["I", "B", "b", "A", "H", "I", "M"]
// replace the second index with the provided value "b"
console.log(arr); // ["I", "B", "R", "A", "H", "I", "M"];

2. toSorted()

toSorted() method returns a brand new array, and the elements in that array are arranged in ascending order.

const arr = ["I", "B", "R", "A", "H", "I", "M"];
console.log(arr.toSorted()); // ['A', 'B', 'H', 'I', 'I', 'M', 'R']
console.log(arr); // ["I", "B", "R", "A", "H", "I", "M"];


const numbers = [1, 10, 21, 2];
console.log(numbers.toSorted((a, b) => a - b)) //[1, 2, 10, 21]

3. toReversed()

toReversed() method returns a new array with the elements in reversed order.

const arr = ["I", "B", "R", "A", "H", "I", "M"];
console.log(arr.toReversed()); // ['M', 'I', 'H', 'A', 'R', 'B', 'I']

const numbers = [1, 10, 21, 2];
console.log(numbers.toReversed()) //[2, 21, 10, 1]

4. toSpliced()

toSpliced() method returns a new array with some elements removed and/or replaced at a given index.

const arr = ["I", "B", "R", "A", "H", "I", "M"];
console.log(arr.toSpliced(3, 3, "BAG")); // ['I', 'B', 'R', 'BAG', 'M']

const months = ["Jan", "Mar", "Apr", "May"];
console.log(months.toSpliced(1, 0, "Feb")) // ["Jan", "Feb", "Mar", "Apr", "May"]

No need to create a copy of an array with [...arr] first before modifying it.

Unlocking the Power of Promises.

Ibrahim Bagalwa — Sun, 11 Jun 2023 11:39:56 +0000

JavaScript is a versatile programming language that powers dynamic and interactive web applications. As you delve deeper into JavaScript development, you'll inevitably encounter asynchronous operations. These operations, such as fetching data from an API or reading a file, can take time to complete.

Traditionally, handling asynchronous operations could be challenging, leading to callback hell and convoluted code.

Fortunately, JavaScript introduced Promises, a powerful tool that simplifies asynchronous programming. In this article, we will demystify Promises and explore how they work, allowing you to take your first steps toward mastering asynchronous JavaScript.

Understanding Asynchronous Operations

Before diving into Promises, it's crucial to understand asynchronous operations.

Asynchronous operations are tasks that don't block the execution of other tasks. They allow your code to continue running while waiting for a particular operation to complete.

Common examples of asynchronous operations include making HTTP requests, reading and writing files, and querying databases.

In synchronous programming, the code execution follows a sequential order. If an operation takes a significant amount of time to complete, it blocks the execution of subsequent tasks, leading to unresponsive applications. Asynchronous programming helps mitigate this issue, allowing your application to remain responsive while performing time-consuming operations in the background.

Enter Promises

Promises are JavaScript objects that represent the eventual completion (or failure) of an asynchronous operation. They provide a more elegant and structured way to handle asynchronous code compared to traditional callbacks. Promises serve as placeholders for the results of asynchronous tasks, allowing you to define how to handle those results once they become available.

A Promise can be in one of three states:

Pending: The initial state when a Promise is created. It represents an ongoing operation whose outcome is yet to be determined.
Fulfilled: The state when a Promise is successfully resolved with a result value. It represents a completed operation.
Rejected: The state when a Promise encounters an error or fails to fulfill its intended operation. It represents a failed operation.

Promises help us structure asynchronous code by allowing us to attach callbacks, known as handlers, to handle the results or errors produced by a Promise. These handlers are executed once the Promise settles, whether it's fulfilled or rejected.

Creating a Promise

To create a Promise, you use the new Promise() constructor and pass it a function that contains the asynchronous operation you want to perform. This function, known as an executor, takes two parameters: resolve and reject. Inside the executor, you perform your asynchronous task and call either resolve(value) when the task is successful or reject(reason) when an error occurs.

Here's an example that demonstrates creating a Promise that resolves after a delay of 1 second:

const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Operation completed successfully!');
  }, 1000);
});

In this example, the Promise represents an operation that resolves after a 1-second delay. Once the operation completes successfully, it calls resolve() with the provided value, indicating that the Promise is fulfilled.

Handling Promise Results

Once you have a Promise, you can attach handlers to it using the then() method. The then() method takes two arguments: a success handler and an optional error handler. The success handler is executed when the Promise is fulfilled, and the error handler is executed when the Promise is rejected.

Continuing from the previous example, let's attach success and error handlers to the myPromise object:

myPromise
  .then((result) => {
    console.log(result);
  })
  .catch((error) => {
    console.error(error);

Promises are a powerful tool in JavaScript that simplify asynchronous programming. They allow us to handle asynchronous operations in a structured and elegant way, replacing the complexities of traditional callbacks. By understanding the states of Promises (pending, fulfilled, and rejected) and how to create and use them, we gain the ability to write more readable and maintainable code.

Unleashing the Power of Reducers: How React Developers Can Revolutionize Their State Management!

Ibrahim Bagalwa — Mon, 24 Apr 2023 06:43:40 +0000

Are you tired of managing state in your React application? Do you find it difficult to keep track of changes to your application's state and wish there was an easier way to handle it?
Look no further than useReducer hook in React!

Reducers are pure functions that take the current state and an action as arguments, and return a new state. The state in Redux is typically represented as a plain JavaScript object, and actions are plain JavaScript objects that describe changes to that state. A reducer is responsible for updating the state based on the action that was dispatched.

Let's take a simple example of a counter app. We have a state object that contains a single property called count, and we want to be able to increment or decrement that count.
Here's what our initial state might look like:

const defaultState = {
    count: 0
}

Next, we define our reducer function:

   function counterReducer(state = defaultState, action) {
     switch (action.type) {
       case "INCREMENT":
         return { ...state, count: state.count + 1 };
       case "DECREMENT":
         return { ...state, count: state.count - 1 };
       default:
        return state;
     }
  }

In this example, our reducer function takes two arguments: the current state and the action. We use a switch statement to determine what action was dispatched, and we return a new state object based on the action. In the case of "INCREMENT", we create a new state object using the spread operator (...) to copy all of the properties of the current state object, and then we increment the count property by 1. Similarly, in the case of "DECREMENT", we create a new state object and decrement the count property by 1.

Now that we have defined our reducer function, we can use it in our React component. We can use the useReducer hook from React to create a state object and a dispatch function. The state object will hold the current state, and the dispatch function will be used to update the state by dispatching actions. Here's an example of how we might use the useReducer hook in our counter app:

import { useReducer } from "react";

function Counter() {
 const [state, dispatch] =useReducer(counterReducer,defaultState);
 const handleIncrement = () => {
    dispatch({ type: "INCREMENT" });
  };

 const handleDecrement = () => {
    dispatch({ type: "DECREMENT" });
  };

 return (
    <div>
      <h1>Count: {state.count}</h1>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
}

In this example, we use the useReducer hook to create a state object and a dispatch function based on our counterReducer function and defaultState. We also define two functions to handle the "INCREMENT" and "DECREMENT" actions, which we can use to update the state by dispatching actions. Finally, we render a simple UI that displays the current count and two buttons to increment or decrement the count.

The reducers are an important part of state management in React, and they provide a predictable way to update state based on actions. By defining a reducer function, we can update our state in a way that is easy to reason about and test. If you are using Redux for state management in your React application, understanding reducers is essential.

When to use OR and Nullish coalescing Operator.

Ibrahim Bagalwa — Mon, 27 Feb 2023 16:23:03 +0000

In javascript both logic operator OR || and Nullish coalescing ?? are used to provide fallback values when the variable or expression is nullish or falsy.

However they have few differences which we will explore bellow:

OR Operator `||`

The OR operator uses the right value if left is falsy.
This means that if the left value of the logical OR operator is truthy but not nullish, the right value will not be evaluated.
A falsy value is something which evaluates to FALSE, for instance when checking a variable. You can check all the falsy values here.

Nullish coalescing Operator `??`

This operator ??uses the right value if left is only null or undefined . nullish coalescing operator provides the fallback value only on null and undefined.

The OR operator performs type conversion of the left value to a bolean value instead of nullish coalescing operator check if the value is a nullish (null or undefined).

This means that if the left value of the OR is a non-Boolean value, it will be converted to a Boolean value before the operator is applied.

For Example:

let value = "";
let orSolution = value || "default value";
let nullishSolution =  value ?? "default value"

console.log(orSolution) // defaut value
console.log(nullishSolution) // ""

In this example value is an empty string and empty string is a falsy value, || provides the fallback value "default value" However, ?? only considers null undefined as nullish, so it returns the value of value variable which is an empty string.

Example:

const add = (value)=>{
    let nullishValue = value ?? 1;
    return 70 + nullishValue;
}

const addNumber = (value)=>{
    let orValue = value || 1;
return 70 + orValue 
}

//nullish coalescing
console.log(add(0)) // 70
console.log(add(10)) // 80
console.log(add(null)) // 71
console.log(add(undefined)) // 71
console.log(add()) // 71

// OR
console.log(addNumber(0)) // 71
console.log(addNumber(10)) // 80
console.log(addNumber(null)) // 71
console.log(addNumber(undefined)) // 71
console.log(aaddNumberdd()) // 71

Conclusion

The logical OR operator (||) and the nullish coalescing operator (??) are both used to provide fallback values in JavaScript, but they have some differences in their behavior.

The choice of operator depends on the specific use case and the desired behavior.

I hope you guys found this article useful, and I hope I was able to show you the difference between || and ??.

Javascript - Introduction to ES6

Ibrahim Bagalwa — Tue, 31 Jan 2023 22:06:45 +0000

ECMAScript 6 (ES6) is the latest version of JavaScript and offers a wealth of new features and improvements to the language. ES6 is now widely supported across modern browsers and is the future of JavaScript development. In this article, we'll take a closer look at some of the most important features of ES6 and how they can make your code more efficient, maintainable, and readable.

const and let variables

ES6 introduces two new variable declarations, let and const, which offer more control over variable scope.

let allows you to declare variables within a block scope, while
const is used for declaring constants that cannot be reassigned.

The following examples illustrates the difference between let and const:

let number= 10;
number= 20;
console.log(number); // 20

const PI = 3.14;
PI = 3.15;
console.log(PI); 
// PI = 3.15;
   ^
//TypeError: Assignment to constant variable.

let x = 5;
if (true) {
  let y = 6;
  console.log(x + y); // 11
}
console.log(y); 
//console.log(y);
            ^
//ReferenceError: y is not defined

Exercise:

Try declaring a variable using let and change its value within the same block scope.
Try declaring a variable using const and try to change its value.

Arrow functions

ES6 introduces a new syntax for creating functions called arrow functions.
Arrow functions allow us to write shorter function syntax and makes your code more readable, more structured, and look like modern code.

const greet = name => console.log(`Hello, ${name}!`);
greet('Ibrahim'); // Hello, Ibrahim!

const numbers = [1, 2, 3, 4];
const square = numbers.map(n => n * n);
console.log(square); // [1, 4, 9, 16]

Exercise:

Create an array of numbers and use an arrow function with the map() method to square each number in the array.
Try using arrow functions in an array method such as filter, javascript reduce, or sort ##Template Literals ES6 introduces a new syntax for creating template literals or template strings, which allow you to embed expressions in string literals.This makes concatenation of strings much easier and more readable. The following example illustrates the use of template literals:

let name = "Ibrahim";
let message = `Hello, ${name}!`;
console.log(message); // Hello, Ibrahim!

Exercise:

Create a template literal that concatenates two strings.

Default parameters

Default function parameter allow named parameters to be initialized with default values if no value or undefined is passed (you define a parameter in advance).
The following example illustrates the use of default parameter

const myDefaultParameter = (name = "Jack", age = 22) => {
  return `${name} is ${age}`;
};

console.log(myDefaultParameter()); //Jack is 22
console.log(myDefaultParameter("Olivier", 25)); //Olivier is 25

Destructuring

Destructuring allows you to extract values from arrays or objects into variables. This makes it easier to work with data structures and reduces the need for repetitive code.

//Oject
const student = { name: 'John', age: 25, grade: 'A' };
const { name, age } = student;
console.log(name, age); // John 25

//Array
const numbers = [1, 2, 3, 4];
const [first, second, ...rest] = numbers;
console.log(first, second, rest); // 1 2 [3, 4]

Exercise:

Create an object and an array and use destructuring to extract values into separate variables.

Spread and Rest Operators

Spread operator allows you to spread elements of an array into a new one, and the rest operator, allows you to collect multiple elements into an array.

//spread operator
const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5];
console.log(newNumbers); // [1, 2, 3, 4, 5]

//rest operators
function add(...args) {
  return args.reduce((sum, number) => sum + number, 0);
}
console.log(add(1, 2, 3)); // 6

Modules

Modules allow you to export and import functions, objects, or values between different files, making it easier to write reusable code. The following example illustrates the use of modules:

// myModule.js
export const add = (a=0, b=0) => a + b;
export const multiply = (a=1, b=1) => a * b;

// index.js
import { add, multiply } from "./myModule";
console.log(add(1, 2)); // 3
console.log(multiply(2, 3)); // 6

Promises

Allow you to write asynchronous code. It can be used when, we want to fetch data from an API, or when we have a function that takes time to be executed, etc

const promise = ()=>{
    return new Promise((resolve,reject)=>{
        resolve("Promise resolve successfully!")
    })
}
console.log(promise())//Promise { 'Promise execute successfully!' }

Promises it a big topic in javascript es6 if you need to learn more about Promises, left a comment.

Classes

Class makes it easier to write object-oriented code. Classes are used to create objects that have methods and properties, and they allow you to encapsulate and reuse code.
The following example illustrates the use of classes:

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, I am ${this.name}`);
  }
}

const josh = new Person("Josh", 30);
josh.greet(); // Hello, I am Josh

Conclusion

ES6 provides a number of new features and improvements that make JavaScript a more powerful and efficient language. The new let and const variables, arrow functions, template literals, destructuring, spread and rest operators, modules, default parameters, promises and classes, make it easier to write clean, readable, and maintainable code. By incorporating these new features into your projects, you can take advantage of the benefits they provide and build more powerful and sophisticated applications.

I hope you guys found this article useful, and I hope I was able to introduce you some of the ES6 features.
Thank you for taking the time to read it & do let me know your feedback on this article.

DEV Community: Ibrahim Bagalwa

In this beginner-friendly series, we’ll go from “What is Docker?” to “I’m confidently using Docker in real-world projects.”

Become a Docker Superstar - part 1

[Boost]

Become a Docker Superstar - part 1

Become a Docker Superstar - part 1

Why Your Code Breaks on Other Machines and What You Can Do About It

The First Gig… and the First Problem

That Van? It’s Docker.

Docker is the Smart Solution.

What You’ll Learn in This Series

Customizing Rust Error Messages with Diagnostic Attributes

Understanding TypeScript Utility Types: Pick and Omit

Pick

Omit

JavaScript's Immutable Arrays Revolution.

1. with()

2. toSorted()

3. toReversed()

4. toSpliced()

Unlocking the Power of Promises.

Understanding Asynchronous Operations

Enter Promises

Creating a Promise

Handling Promise Results

Unleashing the Power of Reducers: How React Developers Can Revolutionize Their State Management!

When to use OR and Nullish coalescing Operator.

OR Operator ||

Nullish coalescing Operator ??

Conclusion

Javascript - Introduction to ES6

const and let variables

Arrow functions

Default parameters

Destructuring

Spread and Rest Operators

Modules

Promises

Classes

Conclusion

OR Operator `||`

Nullish coalescing Operator `??`