Forem: djibril mugisho

[Boost]

djibril mugisho — Sat, 27 Sep 2025 01:02:45 +0000

Getting Started with AI Agent Development with LangChain & LangGraph: Build an Autonomous Starbucks Agent

djibril mugisho ・ Sep 27

Flutter BLoC Architecture

djibril mugisho — Sat, 10 May 2025 23:43:02 +0000

Introduction

Have you ever wondered how companies create and manage large-scale Flutter applications with hundreds of features, countless screens, and tons of API requests, without ending up with a messy codebase? In this article, I will guide you through one of the most effective architectures (the BLoC design pattern) used for building large-scale Flutter products, along with industry best practices and standards.

What is the BLoC design pattern?

BLoC is a design pattern introduced at the Google I/O in 2018, primarily used in Flutter applications to separate business logic from the user interface. It allows developers to manage state and events in a scalable, testable, and maintainable way. The BLoC pattern architecture helps developers separate concerns by dividing each feature into three parts: the presentation layer, the domain layer (business layer), and the data layer for handling networking and data fetching.

Presentation layer 🖌️

In the BLoC architecture, the presentation layer is responsible for everything UI-related — how things look and how they respond to state changes.

It's commonly divided into three parts:

Screens (or Views) – Full pages or routes, usually composed of many widgets and tied to specific features (e.g., LoginScreen, ProfileScreen).
Widgets – Reusable UI components like SearchBar, CustomInput, or Button, which are smaller building blocks.
State Management – This includes the BLoC or Cubit itself, which manages the screen's state through:
- Events (inputs to BLoC),
- States (outputs from BLoC),
- and the BLoC class itself (where logic is handled).

Domain layer or business layer

The domain layer defines the business rules and logic of your app. It contains entities, use cases, and abstract repositories — the core contracts of what the app should do, without worrying about how it's done (no HTTP, no UI, no database details).

This layer defines what operations should exist (like "GetUserProfile", "UpdateCart", etc.), but not how they're implemented. for more on domain driven design(DDD) please use this material

Element of the domain layer

Entities - define the schematization of data within the domain layer.
Repository - Defines a blueprint for the actual repository implementation in the data layer.
usecase - In this folder, you find the core contract of what the application should do(Login, Signup, FetchUserProfile…), each file corresponds to a specific use case or business requirement.

Data layer 🌐

The data layer handles everything related to networking and databases, it doesn’t worry about how the returned data shall be consumed, the core mission of this component, is to get data from the specified destination(localdatabase, HTTP request) and return it to the repository, no UI manupilation, no state changes only data fetching.

The data layer is also divided into three major parts. Yes 😙, I know - another layer with three parts! But don't worry, there's a reason behind these divisions.

Elements of the data layer

Models 📁 - Models 📁 - This part defines the structure of the fetched data. Every model corresponds to an entity from the use case. This organization is essential as it enables a smooth data flow from repository implementation to use case.
Repository 🔌 - The repository implementation acts as a bridge between the domain layer and the data source layer, it handles the conversion of row JSON data into a usable domain model(User, Account…)
Data source 🗺️ - This is where the actual data fetching takes place. This layer is responsible for querying data either remotely or locally through local data storage like SQLite, this layer does not handle the conversion of data into usable use case models.

We are going to build a simple application that fetches posts. This mini example will help us put into practice everything we have learned so far.

Quickly create a new Flutter project flutter create my_project , and install all the below dependencies.

Dependencies installation.


flutter pub add flutter_bloc // State management 
flutter pub add fpdart  //handles async operations and error management using types like Either, Option, and Task, promoting safer and more predictable code.
flutter pub add get_it // Handles dependency injection and service location. 
flutter pub dio //Handles HTTP requests and everything networking related(please choose what fits well for you)

Now that we have all the required dependencies in place, let’s organize the folder structure based on the recommended standards.

For the scope of this article, I will create only one custom exception.

class Failure implements Exception {
  final String message;
  Failure({this.message = "Unexpected error occurred."});
}

Most tutorials start with the presentation layer and end with the data source. However, we'll take a different approach. We'll begin with the domain layer, move to the data layer, and finish with the presentation layer.

📂 Domain layer

domain/
    ├── entities/
    │   └── post_entity.dart
    ├── repository/
    │   └── post_repository.dart
    └── usecase/
        ├── create_post_usecase.dart
        └── get_post_usecase.dart

post_entity.dart

This file contains the structure of the data that will be consumed by the UI, it’s pure dart, no libray, just a pure model


class PostEntity {
  final String title;
  final String body;
  final int id;

  PostEntity({required this.title, required this.body, required this.id});
}

post_repository.dart

post_repository.dart is an abstract class that acts as a blueprint of the actual repository(repository implementation), it defines all methods that the implementation version should have and the type of data it should return. Please note that repositories in the domain layer do not interact with the datasource, rather, they define how the repository implementation should look.

import 'package:bloc_patter_course/core/errors/failure.dart';
import 'package:bloc_patter_course/features/post/domain/entities/post_entity.dart';
import 'package:fpdart/fpdart.dart';

abstract interface class PostRepository {
  Future<Either<Failure, List<PostEntity>>> getPosts();
  Future createPost({required String title, required String body});
}

Usecases(Business requirements)

In our case, we only have one use case, the one for getting the posts. For example, if we were working on an authentication feature, we would have use cases like signup_usecase or login_usecase and so on…

get_post_usecase.dart

class GetPostUsecase {
  final PostRepository repository;

  GetPostUsecase({required this.repository});
  Future<Either<Failure, List<PostEntity>>> call() async {
    return await repository.getPosts();
  }
}

The use case does not interact directly with the datasource, it needs a bridge, and that bridge is the repository(repository implementation).

🌐 Data layer

data/
    ├── models /
    │   └── post_model.dart
    ├── repository/
    │   └── post_repository_imp.dart
    └── datasource/
        └── post_remote_datasource.dart

Time to explain how this folder structure brings stuff together 😚.

The data layer also includes data schematization. The models folder contains files that describe the structure of the data received from the data source. These models implement their corresponding entities from the domain layer, enabling a seamless flow of data between the data and domain layers(as mentioned earlier).

In our case, we do have only one model, and it’s the post_model.dart

import 'dart:convert';
import 'package:bloc_patter_course/features/post/domain/entities/post_entity.dart';

class PostModel extends PostEntity {
  PostModel({required super.title, required super.body, required super.id});

  Map<String, dynamic> toMap() {
    return <String, dynamic>{
      'title': title,
      'body': body,
      'id': id,
    };
  }

  factory PostModel.fromMap(Map<String, dynamic> map) {
    return PostModel(
      title: map['title'] as String,
      body: map['body'] as String,
      id: map['id'] is int ? map['id'] : int.parse(map['id'].toString()),
    );
  }

  String toJson() => json.encode(toMap());

  factory PostModel.fromJson(String source) =>
      PostModel.fromMap(json.decode(source) as Map<String, dynamic>);
}

In the repository folder, we find the concrete implementations of the repositories, not the interface abstractions defined in the domain layer. Each repository file implements the methods declared in the corresponding repository interface from the domain layer. This is important because it ensures the data layer aligns with the expectations and contracts defined by the domain layer.

post_repository_imp.dart → (post_repository_implementation)


import 'package:fpdart/fpdart.dart';
import 'package:bloc_patter_course/core/errors/failure.dart';
import 'package:bloc_patter_course/features/posts/data/datasource/post_remote_datasource.dart';
import 'package:bloc_patter_course/features/posts/data/models/post_model.dart';
import 'package:bloc_patter_course/features/posts/domain/entities/post_entity.dart';
import 'package:bloc_patter_course/features/posts/domain/repository/post_repository.dart';

class PostRepositoryImplementation implements PostRepository {
  PostRemoteDatasource postRemoteDatasource;
  PostRepositoryImplementation({required this.postRemoteDatasource});

  @override
  Future<Either<Failure, List<PostEntity>>> getPosts() async {
    try {
      final posts = await postRemoteDatasource.getPosts();

      final data = posts.map((post) => PostModel.fromMap(post)).toList();

      return Right(data);
    } on Failure catch (e) {
      return Left(Failure(message: e.message));
    } catch (e) {
      return Left(Failure());
    }
  }
}

And at the end we have the datasource folder, this is the part in charge of getting data from the actual source, it can be from the device local store(offline use cases) or remote,like in our scenario.

In this article i am using Dio for API requests but feel free to use any library of your choice.

Dio’s configurations

lib/core/network/dio_client.dart. Feel free to update this file to match your requirements.

import 'package:dio/dio.dart';
import 'package:dio_cache_interceptor/dio_cache_interceptor.dart';

final options = CacheOptions(
  store: MemCacheStore(),
  hitCacheOnNetworkFailure: true,
  maxStale: const Duration(days: 7),
  priority: CachePriority.normal,
);

class DioClient {
  static Dio instance() {
    final dio = Dio(BaseOptions(
      baseUrl: "https://jsonplaceholder.typicode.com", //Jsonplaceholder is a great place for getting dummy data.
    ));

    //Optional cashing, 
    // dio.interceptors.add(DioCacheInterceptor(options: options));
    return dio;
  }
}

Datasource

post_remote_datasource.dart


import 'package:bloc_patter_course/core/errors/failure.dart';
import 'package:bloc_patter_course/core/network/dio_client.dart';
import 'package:dio/dio.dart';

Dio http = DioClient.instance();

class PostRemoteDatasource {
  Future<List<dynamic>> getPosts() async {
    try {
      final Response<dynamic> response = await http.get("/posts");

      return response.data;
    } on DioException catch (e) {
      throw Failure(message: e.message as String);
    } catch (e) {
      throw Exception();
    }
  }
}

💉 Dependency injecttion

with all the pieces in place, it’s time to put them all together. Here is a schema of our dependency injection.

                 ┌──────────────────────────────┐
                 │        Presentation Layer    │
                 │  (e.g. UI + Bloc/Cubit/View) │
                 └────────────▲─────────────────┘
                              │
                              │ depends on
                              │
                 ┌────────────┴──────────────┐
                 │        Domain Layer       │
                 │  (Entities + Use Cases +  │
                 │   Repository Interfaces)  │
                 └────────────▲──────────────┘
                              │
                              │ implemented by
                              │
                 ┌────────────┴──────────────┐
                 │         Data Layer        │
                 │  (Models + Repositories + │
                 │    Data Sources + Dio)    │
                 └────────────┬──────────────┘
                              │
                              │ initialized in
                              ▼
                 ┌──────────────────────────────┐
                 │   Dependency Injection File   │
                 │ (e.g. service_locator.dart)   │
                 └──────────────────────────────┘

While I won’t go into detail about service locators, as that goes beyond the scope of this article, here’s a simple example of how you can use get_it to manage dependency injection effectively in a large-scale Flutter application:

First start by initializing the base class or entry point.

lib/core/injections/service_locator.dart

import 'package:bloc_patter_course/core/injections/post/post_service_locator.dart';
import 'package:get_it/get_it.dart';

final GetIt slInstance = GetIt.instance;

class ServiceLocator {
  Future<void> init() async {

  }
}

Now you can use the above class 👆🏽 as based class, and separate injections based on features.

lib/core/injections/posts/post_service_locator.dart. Dependency injection for the posts feature.

import 'package:bloc_patter_course/features/posts/data/datasource/post_remote_datasource.dart';
import 'package:bloc_patter_course/features/posts/data/repository/post_repository_imp.dart';
import 'package:bloc_patter_course/features/posts/domain/repository/post_repository.dart';
import 'package:bloc_patter_course/features/posts/domain/usecase/get_post_usecase.dart';
import 'package:bloc_patter_course/features/posts/presentation/cubit/posts_cubit.dart';
import 'package:get_it/get_it.dart';

class PostServiceLocator {
  final GetIt sl;
  PostServiceLocator(this.sl);

  void init() {
    sl.registerSingleton<PostRemoteDatasource>(PostRemoteDatasource(),
        instanceName: 'postRemoteDatasource');

    sl.registerSingleton<PostRepository>(
        PostRepositoryImplementation(
            postRemoteDatasource: sl(instanceName: "postRemoteDatasource")),
        instanceName: 'postRepositoryImplementation');

    sl.registerSingleton<GetPostUsecase>(
        GetPostUsecase(
            repository: sl(instanceName: "postRepositoryImplementation")),
        instanceName: "getPostUsecase");

    sl.registerSingleton<PostsCubit>(
        PostsCubit(
          getPostUsecase: sl(instanceName: "getPostUsecase"),
        ),
        instanceName: "postsCubit");
  }
}

Initialize lib/core/injections/posts/post_service_locator.dart. like this


final GetIt slInstance = GetIt.instance;

class ServiceLocator {
  Future<void> init() async {
    final authServiceLocator = PostServiceLocator(slInstance);
    authServiceLocator.init();
  }
}

Diagram

Now that our infrastructure is in place, let's transition into the presentation layer — starting with state management setup, and then moving on to how the UI consumes and displays the data.

🌐 Presentation layer

.
└── lib/features/posts/presentation/
    ├── cubit/
    │   ├── posts_cubit.dart
    │   └── posts_state.dart
    ├── screens /
    │   └── posts_screen.dart
    └── widgets /
        └── post.dart

I prefer cubit over bloc due to it simplicity and non-even-driven approach, if you are more comfortable with bloc please feel free to use it.

posts_state.dart defines all available states.

import 'package:bloc_patter_course/features/posts/domain/entities/post_entity.dart';

//In Dart, a sealed class is a special type of class that restricts inheritance
//to only specific subclasses. The subclasses can only be defined within the same
//library or file where the sealed class itself is defined.
sealed class PostsState {
  PostsState();
}

class PostInitialState extends PostsState {
  PostInitialState();
}

class PostsLoading extends PostsState {
  PostsLoading();
}

class LoadedPosts extends PostsState {
  List<PostEntity> posts;
  LoadedPosts({required this.posts});
}

class PostError extends PostsState {
  PostError();
}

posts_cubit.dart. Cubit implemation

import 'package:bloc_patter_course/features/posts/domain/usecase/get_post_usecase.dart';
import 'package:bloc_patter_course/features/posts/presentation/cubit/posts_state.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class PostsCubit extends Cubit<PostsState> {
  GetPostUsecase getPostUsecase;

  PostsCubit({required this.getPostUsecase}) : super(PostInitialState());

  Future<void> getPosts() async {
    emit(PostsLoading());
    final posts = await getPostUsecase();

    posts.fold(
        (err) => emit(PostError()), (posts) => emit(LoadedPosts(posts: posts)));
  }
}

widgets/post.dart

import 'package:flutter/material.dart';

class Post extends StatelessWidget {
  final String title;
  final String body;
  const Post({super.key, required this.title, required this.body});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        child: Container(
          constraints: BoxConstraints(maxWidth: 500),
          padding: const EdgeInsets.all(16),
          decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(8),
            border: Border.all(
              color: const Color.fromARGB(33, 158, 158, 158),
              width: 1,
            ),
          ),
          width: double.infinity,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                title,
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
              ),
              const SizedBox(height: 8),
              Text(
                body,
                style: TextStyle(fontSize: 16, color: Colors.black54),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Not the most beatiful widget but it shoul do it 😁

screens/posts_screen.dart

import 'package:bloc_patter_course/features/posts/presentation/cubit/posts_cubit.dart';
import 'package:bloc_patter_course/features/posts/presentation/cubit/posts_state.dart';
import 'package:bloc_patter_course/features/posts/presentation/widgets/post.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

class Posts extends StatefulWidget {
  const Posts({super.key});

  @override
  State<Posts> createState() => _PostsState();
}

class _PostsState extends State<Posts> {
  @override
  void initState() {
    context.read<PostsCubit>().getPosts();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return BlocConsumer<PostsCubit, PostsState>(
      listener: (context, state) {},
      builder: (context, state) {
        return Scaffold(
            appBar: AppBar(
              title: Text('Posts'),
            ),
            body: Builder(builder: (_) {
              if (state is PostsLoading) {
                return Center(
                    child: Container(
                  padding: EdgeInsets.all(20),
                  child: CircularProgressIndicator(),
                ));
              }

              if (state is LoadedPosts) {
                return RefreshIndicator(
                  onRefresh: () async {
                    context.read<PostsCubit>().getPosts();
                  },
                  child: ListView.builder(
                      itemCount: state.posts.length,
                      itemBuilder: (_, index) {
                        return Post(
                            key: Key(state.posts[index].id.toString()),
                            title: state.posts[index].title,
                            body: state.posts[index].body);
                      }),
                );
              }

              return Center(
                  child: Container(
                padding: EdgeInsets.all(20),
                child: const CircularProgressIndicator(),
              ));
            }));
      },
    );
  }
}

import 'package:bloc_patter_course/core/injections/service_locator.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

void main() async {
  ServiceLocator serviceLocator = ServiceLocator();
  WidgetsFlutterBinding.ensureInitialized();
  await serviceLocator.init();

  runApp(MultiBlocProvider(
    providers: [
      BlocProvider(
          create: (_) => slInstance<PostsCubit>(instanceName: "postsCubit"))
    ],
    child: const MyApp(),
  ));
}

That was quite a lot to unpack, wasn’t it? In short, this is how you implement the powerful BLoC design pattern in your Flutter application — enabling a scalable architecture and maintainable code as your project grows. So, who is this for? This is for teams working on large-scale applications; implementing this architecture on a small application will be shooting a rabbit with a cannon, and adding unnecessary complexities to a small application.

Feel free to leave your comments, thoughts, ideas and improvements. Don’t forget to like and share .

Thanks for reading 🫱🏾‍🫲🏼

source code : https://github.com/DjibrilM/bloc-pattern-architecture-code

Solidity: upgradable smart contracts explained.

djibril mugisho — Tue, 05 Nov 2024 13:37:10 +0000

Introduction

Smart contracts are awesome🤩 and we all love them. What makes them more awesome is their immutability. Once a smart contract is deployed to the blockchain it can't be changed altered or updated, this makes them perfect for any agreement situation and even hard to hack or manipulate. But this is very costly in situations where you want to update the old implementation or improve faced security vulnerabilities or any kind of bugs.

Few solutions were proposed to fix this problem, and some of them were able to solve parts of the problem but still missed some important key features. The famous OPcode CALLCODE was able to delegate a function's call to another contract without modifying the state of the called contract and only perform the function's execution in the context of the contract that delegated the call. The only problem with CALLCODE was that msg.sender would become the calling contract, and msg.value was being set to zero.

To address this issue, and to bring a more reliable solution, on November 15, 2015 a new improvement was proposed (EIP-7) to bring new OPCodes and fix the problem with CALLCODE, leading to the introduction of Delegate Call (delegatecall).

Delegate call (delegatecall)

In Solidity, the delegatecall function allows a contract to call another contract's code while keeping the context (like storage, msg.sender, and msg.value) of the calling contract. It enables the creation of proxy contracts and modular contract designs.

Here's a basic example of how to use delegatecall:

Example scenario

Let's say you have smart contracts A and B

A: Being the entry point to your protocol (Proxy contract) and.

B: Being the library contract, holding all the logic and features of
The protocol.

But remember all the functions from the library contract (implementation contract) are meant to be executed on the context of the proxy contract (Contract A) which means instead of using their own storage they use the storage of the calling contract.

contract A {
    uint256 public num;

    function updateNumber(address implementationContract, uint256 newNum)
        public
    {
        (bool success, ) = implementationContract.delegatecall(
            abi.encodeWithSignature("updateNumber(uint256)", newNum)
        );

        require(success, "Delegation call failed");
    }

    function getNumber() external view returns (uint256) {
        return num;
    }

}

contract B {
    uint256 public num;

    function updateNumber(uint256 newNm) public {
        num = newNm;
    }

    function getNumber() external view returns (uint256) {
        return num;
    }
}

In the above example you will notice that calling get getNumber function on contract B returns 0 while on contract A it returns the number that is supposed to be a contract B.

This is because while updating the variable num, contract B checks the storage slot index of the variable num in itself (Contract B) and updates whatever is in contract A in that given storage slot.

With this discovery, you can create one proxy contract that holds the state of your protocol and, then keep on deploying new upgrades based on your protocol needs.

One flow with our previous implementation was that the proxy contract must encode the targeted function manually, which is inefficient, since the proxy contract must act as the gateway to the implementation contract without knowledge of available functions in the implementation contract. Below you will find a more refined solution, where all the calls to the implementation contract are handled by one delegate call.

    fallback() external payable { 
        (bool success,) = IMPLEMENTATION_CONTRACT.delegatecall(msg.data);
        require(success, "Failed to call the function");
    }

In this example, delegateCall is used to invoke all the functions of the implementation contract, thus eliminating the need for manual encoding. Furthermore, this implementation is more scalable and efficient, as it eliminates the need for a proxy contract to manually encode the target function.

Proxy contracts and transparent upgradeable proxy

In the above example, I showed you how to create upgradable smart contracts, but this is not how you are going to build that million-dollar startup you always dreamed about 😅. You need to follow industry standards and use tools that have been reviewed and tested by the best engineers in this space. To achieve this new standards and improvements were established, like the EIP-1967 improvement proposal and many others.

The Transparent Upgradeable Proxy is a design pattern for upgrading a proxy while eliminating the possibility of a function selector clash. In this design, only the admin contract can update the address pointing to the implementation contract

A functional Ethereum proxy needs at least the following two features:

A storage slot holding the address of the implementation contract
A mechanism for an admin to change the implementation address
A mechanism that prevents the admin contract from interacting with the implementation contract.

In the example below, we are going to use a very robust and trusted proxy developed by the OpenZeppelin team. This approach eliminates the need for having to delegate calls manually. Everything is handled by a powerful smart contract written mostly in Yul for low-level manupilations. I will be using HardHat as a framework, feel free to follow along if you are from a different background. The deployment and upgradability will also be handled by OpenZeppelin's plugin

Here you can find the starter project. In the below example, we get two smart contracts, the first being the version one implementation and the second being the version two implementation. We will write the deployment script for deploying the proxy and all the other required contracts (Admin, and implementation).

Open your contracts folder and create one Implementation.sol file and ImplementationV2.sol file.

Implementation.sol

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.18;

contract Implementation {
    uint256 internal value;
    uint256 internal constant VERSION = 1;

    event ValueChanged(uint256 newValue);

    function setValue(uint256 newValue) external {
        value = newValue;
        emit ValueChanged(newValue);
    }

    function retrieveValue() external view returns (uint256) {
        return value;
    }

    function version() public pure returns(uint256) {
        return VERSION;
    }
}

ImplementationV2.sol

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.18;
import "@openzeppelin/contracts/proxy/transparent/TransparentUpgradeableProxy.sol";

contract ImplementationV2 {
    uint256 internal value;
    uint256 internal constant VERSION = 2;

    event ValueChanged(uint256 newValue);

    fallback() external payable {

    }

    function setValue(uint256 newValue) external {
        value = newValue;
        emit ValueChanged(newValue);
    }

    function retrieveValue() external view returns (uint256) {
        return value;
    }

    function version() public pure returns (uint256) {
        return VERSION;
    }

    /** 
@dev Here we add a new function that doubles the value and returns the new value.
  */
    function doubleValue() public returns (uint256) {
        value = value * 1;
        return value;
    }
}

Proxy deployment scripts.

scripts/createImplementation.ts

import { upgrades, ethers } from "hardhat";
import fs from "fs";
import path from "path";

async function main() {
  const Implementation = await ethers.getContractFactory("Implementation");
  const proxy = await upgrades.deployProxy(Implementation);
  await proxy.waitForDeployment();

  fs.writeFileSync(
    path.join(__dirname, "../proxyContract.txt"),
    await proxy.getAddress(),
    {
      encoding: "utf8",
    }
  ); // Store the proxy contract's address in a file for later usecases(Upgrade).

  console.log("ImplementationV1 deployed to:", await proxy.getAddress());
  console.log(upgrades.admin);
}

main();

As shown in the above example, I store the proxy's address in the proxyContract.txt. This address will let be used to upgrade the proxy contract from version one to version two.

Upgrade the proxy from version one to version two.

import { ethers, upgrades } from "hardhat";
import fs from "fs";
import path from "path";

async function main() {
  const ImplementationV2 = await ethers.getContractFactory("ImplementationV2");

  const instance = fs.readFileSync(
    path.basename(".../proxyContract.txt"),
    "utf8"
  );

  const upgraded = await upgrades.upgradeProxy(instance, ImplementationV2);

  const version = await upgraded.version(); // Get the new version from the new upgrade.
  console.log(version); //2
}

main();

Et voilà, just like that we went from version to version 🤩

Finally, the end. Thanks for reading and I hope you find this article helpful.

Additional materials.

https://github.com/ethereum/EIPs/blob/master/EIPS/eip-214.md EIP-7
https://solidity-by-example.org/hacks/delegatecall/ Delegatecall
https://eips.ethereum.org/EIPS/eip-1967 ERC-1967: Proxy Storage Slots

Demystifying ABI Encoding in solidity

djibril mugisho — Wed, 23 Oct 2024 09:03:59 +0000

introduction

ABI encoding is the standard way used in the Ethereum ecosystem to communicate and exchange data with smart contracts. It can also be defined as a process in Solidity that converts function signatures, arguments, and other data types into their binary format, ensuring that data can be correctly transmitted between external callers (web applications) or even between contract-to-contract communication in the blockchain. This encoding is essential for function invocations and decoding of returned data from functions.

Encoding

The solidity programming language offers diverse functions for encoding and decoding data and in this article, we shall have a look at a few of them like, abi.encode, abi.encodePacked , abi.encodeWithSelector.

Abi encode

abi.encode is a Solidity function that encodes one or more input values into their binary (byte array) format based on the Ethereum ABI standard. This encoding follows strict rules, ensuring compatibility when passing data between contracts or interacting with external callers. The resulting binary data can be used for low-level contract calls, stored, or transmitted, and it retains all the type information needed for decoding back to the original values.

function encode(string memory text) public pure returns (bytes memory) {
   return abi.encode(text);
}

Abi encoded packed

The function abi.encodePacked is also used to convert any given input into its binary format, unlike its sibling abi.encode, abi.encodePacked follows a different approach when it comes to data encoding. Here the function encodes the data into tightly packed binary format, unlike its sibling that uses padding and preserving type information for decoding, this approach is best for storage optimization due to the short size of the encoded data, but this advantage comes with few tradeoffs when decoding, and one of the most famous tradeoffs here is collision resistance when performing hashing operations since two input can produce the same output, for example, AA + BBA encode with abi.encodePacked will result in AABBA at the decoding stage, but if you try to encode A + ABBA you will get the same output as on the previous operation, you can find the code bellow.

abi.encodePacked

function encodePacked(string memory text)
        public
        pure
        returns (bytes memory)
{
   return abi.encodePacked(text);
}

This example shows how working abi.encodePacked can later result in
collision issues when performing hashing

    function willCreatecollision() public pure returns (bool) {
        return
            keccak256(abi.encodePacked("AA", "ABB")) ==
            keccak256(abi.encodePacked("A", "AABB")); //true
    }

Function Signatures and Function Selectors

Before diving into function signatures and selectors, it's essential to understand what an Application Binary Interface (ABI) is and why it's crucial in the Ethereum ecosystem. The ABI serves as a scheme used in Ethereum for interacting with smart contracts, acting as a bridge between the human-readable code and the bytecode executed by the Ethereum Virtual Machine (EVM).
Think of an ABI as a dictionary that defines the structure of a given smart contract. When building smart contracts, developers typically use high-level languages like Solidity or any compatible EVM language. This human-readable code is then compiled into bytecode, which the EVM can interpret. Importantly, this means that the written code never directly reaches the Ethereum network. Unlike traditional backend systems, where you can call functions via API endpoints in the same way they are written, smart contracts operate differently. To execute a specific function from your smart contract, you must identify the exact function to invoke in the compiled bytecode.

Function Signature

A function signature comprises the function's name and the types of parameters it accepts, concatenated as a string without spaces. example. transfer(address,uint256)

Function Selectors

A function is selected from the bytecode using a function selector,
which is the first 4 bytes of the Keccak-256 hash of the function signature because these are used to uniquely identify functions within a contract

In the example below we create a function selector for the transfer function, the selector will later be used for calling the transfer function.


    function transfer(address recipient, uint256 amount)
        public
        pure 
        returns (string memory)
    {
        //Simple empty function
        return "You called the transfer function";
    }

    function createFunctionSelector() public pure returns (bytes4) {
        return
            bytes4(
                keccak256(
                    abi.encodePacked(
                        "transfer(address,uint256)"
                    )
                )
            ); //create function signature and take the first four bytes.
    }

After creating the function selector we can add all the necessary parameters to call the transfer function.

    function addDataTobeCalledWithTheTransferFunction(
        address recipient,
        uint256 amount
    ) public pure returns (bytes memory) {
        return
            abi.encodeWithSelector(createFunctionSelector(), recipient, amount);
    }

With all that information, we can proudly call the transfer function


    function callTransferFunctionDirectly(address recipient, uint256 amount)
        public
        returns (bool, string memory)
    {
        (bool success, bytes memory returnedDate) = address(this).call(
            (addDataTobeCalledWithTheTransferFunction(recipient,amount))
        );

        require(success, "Call failed");
        return (success, abi.decode(returnedDate,(string)));
    }

Beyond the Blockchain

After learning all these concepts, you must ask yourself how we can communicate with smart contracts if we have to perform all those hashing and data serialization. Hashing functions like Keccak256 can be used beyond the EVM, and in the example below, I demonstrate how to create function signatures and derive a function selector from them. I will be using node.js with the Keccak256 node.js library.

const keccak256 = require("keccak256");

const signature = "transfer(address,uint256)";
const address = "0x19708648D2f76607B32CcB1240B0DfC67a222a75";
const amount = 2;

//This will create the same signature as the one we saw on Remix
const generateFunctionSelector = () => {
  const hash = keccak256(signature).toString("hex");
  return "0x" + hash.toString().slice(0, 8);
};

//The returned data can be used directly for making calls to the EVM.

function addParameters() {
  const serializeAddress = address
    .toLowerCase()
    .replace("0x", "")
    .padStart(64, 0);

  const functionSelector = generateFunctionSelector();
  const serializeAmount = amount.toString(16).padStart(64, "0");
  const transactionData = "".concat(
    functionSelector,
    serializeAddress,
    serializeAmount
  );

  return transactionData;
}

console.log(addParameters());

Ohhh😤! That was a lot to cover, thanks for reading the article. Let me know your thoughts in the comments.

All codes and examples can be found here. repo

Understanding HD(Hierarchical deterministic) wallet

djibril mugisho — Thu, 15 Aug 2024 12:30:32 +0000

An HD (Hierarchical deterministic) wallet is a type of wallet that generates child keys from a single seed, which is a binary representation of the mnemonic phrase, the mnemonic phrase, a mechanism introduced by the Bitcoin improvement proposal also known as BIP-39 or BIP-0039 is the single source of truth in all HD wallets, whoever gains access to your mnemonic phrase gain access to all your funds.

so how does this scary yet important mnemonic phrase get created and how does it result in private and public keys?

Some clarifications first 😅, I won’t cover the cryptographic aspects that are involved in the creation of mnemonic phrases but will leave some important materials that cover all the cryptographic details of the process here is a link to a full guide on how things work deeply under the hood, back to our subject, the first process consists of generating the entropy a sequence of random bits that form the foundation for generating cryptographic keys, it’s from that entropy that the mnemonic phrase is derived.

After creating the mnemonic phrase the second process consists of deriving the seed for that mnemonic phrase.

To demonstrate this process I will use the BIP-39 library for javascript in a node.js environment, so make sure to initialize your project with npm init -y and install all the following dependencies bip39, you can either run your project with node your-file.js or specify a start command in your package.json

const bip39 = require("bip39");

const createMnemonic = async () => {
  const mnemonic = bip39.generateMnemonic();

  return {
    mnemonic, //ex: "simple courage strong..."
    words: mnemonic.split(" "), // Returns an array of all the words in an array
  };
};

As I mentioned at the beginning we do need to derive the seed from the given mnemonic phrase, so here is how we can derive the seed phrase.

const generateSeed = (mnemonic) => {
  const seed = bip39.generateSeed(mnemonic);// generates the binary format of the seed;
  return seed; //The seed is useaully returned in bynary so may use something like seed.toString('hex') to make it more readabale
}

Master private key and key derivation path

The master private key is the root of an HD wallet's hierarchical structure. It's a 256-bit number derived from the seed using a cryptographic hash function (typically HMAC-SHA512). This key is crucial as it generates all subsequent child keys within the wallet.

For us to generate unique private and public keys we need some sort of path or in simple words some unique ID for each chain, which brings us to key derivation, a key derivation path is a road map that follows the BIP-32 standards used to find the location of private and public key in the master private key based on the given path. And that’s where the word deterministic comes from, with the exact mnemonic and the exact derivation path you get the same public and private keys, and things will be like that forever😅 since a deterministic system means with the provided input we get the same output forever

You may be curious about how to derive those child keys from the master private key, here is an example with the HDK library for javascript and please make sure to run this in a node.js environment since this library relies on the node.js crypto module.

Please note that this is not the only way to derive child keys, there are several approaches you can use, I prefer this one because it is straightforward and doesn't abstract the process of deriving the derivation path.

Install the dependency

npm i hdkey

const createWallet = async (seed) => {
  const derivationPath = "m/44'/60'/0'/0"; 
  var hdkey = HDKey.fromMasterSeed(Buffer.from(seed, "hex")); //Convert the seed in its binary format if passed as string otherwise leave it as it is.
  var childkey = hdkey.derive(derivationPath);// key derivation path for Ethereum

  //You can use tools like Ether.js to derive the user's address from the private key.
  console.log(childkey.privateExtendedKey);  
  console.log(childkey.publicExtendedKey); 
};

Benefits of HD(Hierarchical deterministic)

HD wallets offer a lot of flexibility and a good user experience, with HD wallets, you only need to remember your mnemonic phrase, and since it consists of human-readable words instead of some crazy hash string, Backing up the wallet becomes much simpler, however, that comes with some security implications, being the single source of truth keeping it in insecure location can lead to loss of funds and probably a big financial disaster to the owners.

I hope you had fun reading, thanks for passing by don’t forget to share your thoughts in the comment and if you find this resource helpful don’t hesitate to share it with others, peace 😇😇

Build your first chrome extension (Part 1)

djibril mugisho — Mon, 06 Nov 2023 16:07:34 +0000

Welcome to this series of articles where you learn how to build Chrome extensions by building a website blocker, in this first episode we shall cover the basic concepts of Chrome web extension development and then move on with intermediate concepts like message passing and background script, if this is your first time building a chrome extension then don't mind about what I have just said. Everything will be explained in a future episode😅.

What is a Chrome extension?

Before writing any line of code, let's define what is a Chrome extension. A Chrome extension is software built on web technologies such(as HTML, CSS, and Javascript) that enable users to customize the browsing experience, this can be achieved by providing external services or with existing Chrome's APIS.

Folder structure

There are two files here that you should pay attention to, manifest.json and popup.html

manifest.json: This file is probably the most important in a Chrome extension project, this file contains configurations and information that Chrome uses to understand and manage extensions, this may include permissions or scripts that should be running in the background.

manifest.json

{
    "manifest_version": 3,
    "name": "simple blocker",
    "version": "1.0",
    "action": {
        "default_popup": "popup.html",
        "default_icon": {
            "128": "images/blocker.png"
        }
    }
}

popup.html: The popup.html is an HTML file that Chrome uses to create the UI that appears when users click on the extension icon, you can use your existing knowledge of Javascript and CSS, to make it beautiful and dynamic.

First code
let's start with the popup skeleton, styling will come after this

popup.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Blocker</title>
    <link rel="stylesheet" type="text/css" href="styles/popup.css">
    <script src="./scripts/pop_up.js" defer></script>
</head>

<body>
    <ul class="blocked-sits">
        <li>
            <div class="title-container">
                <h2>facebook.com</h2>
            </div>

            <div class="trailing">
                <button>remove</button>
            </div>
        </li>
    </ul>
</body>

</html>

Install Extension

Time to test our previous work, please follow the steps bellow

If you were able to install the extension, what you saw may have been the ugliest thing on the internet. Let's work on some styling.
quickly add a popup.css file in the styles folder, Don't forget to import it in your popup.html.

popup.css

@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Poppins:wght@100&display=swap');


* {
    margin: 0px;
    padding: 0px;
}

body {
    font-family: 'Montserrat', sans-serif;
    width: 600px;
    height: 600px;
    padding: 20px;
    border-radius: 10px;
    background-color: white;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}


body::-webkit-scrollbar {
    background-color: white;
    appearance: none;
    margin-right: 3px;
    width: 10px;
}

body::-webkit-scrollbar-thumb {
    background-color: rgba(158, 158, 158, 0.529);
    appearance: none;
}

.blocked-sits li {
    border: 1px solid rgba(0, 0, 0, 0.062);
    display: flex;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0px;
    gap: 10px;
    align-items: center;
}

.blocked-sits li .title-container {
    flex: 1;
}

.blocked-sits li .title-container h2 {
    color: #555;
    margin-bottom: 5px;
    width: 100%;
}

.blocked-sits li .trailing {
    display: flex;
    align-items: center;
    justify-content: center;
}

.blocked-sits li .trailing button {
    padding: 10px 20px;
    background-color: #fa4343;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.blocked-sits li .trailing button:active {
    background-color: rgb(241, 109, 109);
}

For now, everything is static it could be a good idea if that card were rendered dynamically with Javascript 🤔, let do it.

Don't forget to import your Javascript file


const unlockWebsite = (host) => {
    const container = document.getElementById(host)
    container.remove();
}

const siteElement = (host) => {
    const element = document.createElement("li");
    element.id = host;
    element.innerHTML = `
    <div class="title-container">
        <h2>${host}</h2>
    </div>

    <div class="trailing">
      <button>remove</button>
    </div>
    `;

    element.querySelector("button").addEventListener("click", () => unlockWebsite(host))
    return element;
}

const printSiteElement = () => {
    const sites = ['facebook.com', 'instagram.com'];
    sites.forEach((site) => {
        document.querySelector(".blocked-sits").appendChild(siteElement(site));
    })
};

window.addEventListener('load', () => printSiteElement())

Currently what we have just done does not have any impact and seems like a waste of time, please note that it will become important when we start adding more functionalities

Finally, the pop looks a bit nice and this is how you build chrome extensions popup, as I said at the beginning of this series we shall built a full and functional website blocker, and what we have right here is far from being something that can be added on a portfolio 😁.

what's next

The next article introduces more advanced concepts like message passing, storage API, tab management, content scripts, and background scripts. if you enjoyed this first episode then the next one will be much more interesting, here is the link to the second episode, let's meet on the other side.

Build your first chrome extension (Part 2)

djibril mugisho — Mon, 06 Nov 2023 15:39:17 +0000

Here we go again, I published the first episode on how to create a basic popup page for our project and explained some core basic concepts, if you did not read the first article I highly recommend you go through the first episode and then come back after. I will be here waiting for you😇

For those who went through the first article, you noticed that everything was hardcoded, as a website blocker users should have the ability to block and unblock any website they want from their local storage, to achieve this functionality we shall need two things, content scripts and background scripts.

Please note that this is not the only way you can achieve this, I decided to go with this approach because it allows us to see in action some of the most important topics(background script and content script) first let's see what content scripts even mean😅.

Content scripts

A content script, according to Chrome's documentation, is a JavaScript file that can be injected into web pages. It operates within the context of a webpage, allowing it to interact with the Document Object Model (DOM) of that page. This enables the content script to read details from the webpage or make alterations to its content using standard DOM manipulation techniques. Content scripts are typically used in Chrome extensions to enhance or modify the behavior of web pages. They run in isolation, meaning they have their own JavaScript global scope and do not interfere with the page's existing scripts.

configuration

To allow script injection from your extension you will need to ask such permission in the manifest.json file and here is how you achieve that.

The first step consists of creating a Javascript file that will contain your script, with the provided folder >structure from the first episode, the file will be within the scripts folder, I named it controllers.js but you > can give it any name of your choice

manifest.json

{
   "manifest_version": 3,
   "name": "simple blocker",
   "version": "1.0",
   "action": {
      "default_popup": "popup.html",
      "default_icon": {
         "128": "images/blocker.png"
      }
   },
   "content_scripts": [
      {
         "matches": [
            "<all_urls>"
         ],
         "js": [
            "scripts/controller.js" //update with your file path 
         ]
      }
   ],
   "web_accessible_resources": [//more on web_accessible_resources  here https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources 
      { 
         "resources": [
            "styles/content_script.css" //replace this with your file path. this file will contain css for your content script
         ],
         "matches": [
            "<all_urls>" //this ressource will be available in all pages users visit 
         ]
      }
   ]
}

After setting all configurations let's write the scripts, the code we are going to write will be injecting a button in all websites users visit, and that button will soon be used for blocking websites.

controller.js

const  blockWebSite  =  ()  =>  {
 console.log('coming soon 😎')
}


const  createControllers  =  ()  =>  {
    const link = document.createElement("link");
    link.rel = 'stylesheet';
    link.type = 'text/css';
    link.href = chrome.runtime.getURL('styles/content_script.css')

    const container = document.createElement('div');
    container.classList.add("controls-container");
    container.innerHTML = `
    <button>block this sit</button>
    `;

    container.querySelector("button").addEventListener("click", () => blockWebSite());
    document.head.appendChild(link)
    document.body.appendChild(container);
}

window.addEventListener("load",  async  ()  =>  {
createControllers()
checkIfBlocked();

})

In the above code, the function I used to append HTML elements in all websites users visit, for styling those elements is to use chrome.runtime.getURL() function. This is commonly used in Chrome extensions to dynamically load stylesheets into web pages.

With our button in place let's know to introduce background scripts and add more functionalities to our project

Background scripts

In the context of browser extensions or add-ons, a background script refers to a program or script that runs in the background of the browser. It is not directly linked to any tab or page the user is viewing. Instead, it continues to run even when all tabs are closed.

Here is what you can do, intercept requests, manage tabs, access browser storage, message passing, access runtime APIS, and much more. here is the official resource.

before anything open your manifest file and update your configurations with the following configurations.

manifest.json

{
   "manifest_version": 3,
   "name": "simple blocker",
   "version": "1.0",
   "action": {
      "default_popup": "popup.html",
      "default_icon": {
         "128": "images/blocker.png"
      }
   },
   "content_scripts": [
      {
         "matches": [
            "<all_urls>"
         ],
         "js": [
            "scripts/controller.js"
         ]
      }
   ],
   "background": { //add background scripts 
      "service_worker": "background/event.js" //your file 
   },
   "web_accessible_resources": [
      {
         "resources": [
            "styles/content_script.css"
         ],
         "matches": [
            "<all_urls>"
         ]
      }
   ],
   "permissions": [
      "tabs",
      "storage"
   ]
}

The scripts below will consist of blocking selected websites, removing a blocked website from blocked ones, and checking if the visited website is blocked. If blocked the website will be automatically closed

event.json


chrome.runtime.onMessage.addListener(async (request, sender, sendResponse) => {

    if (request.action === 'block') {
        chrome.storage.local.get(['blocked_sits'], (result) => {

            const blockedSites = result.blocked_sits?.length ? result.blocked_sits : []; //check if there are some data in the local storage 


            blockedSites.push(request.host); //push new url within the list of blocked sites 

            chrome.storage.local.set({ blocked_sits: blockedSites }, function () {
                chrome.tabs.query({
                    currentWindow: true,
                    active: true
                }, function (tabs) {
                    chrome.tabs.remove(tabs[0].id);//close current tabe 
                });

                chrome.tabs.create({ url: "pages/forbidden.html" }); //redirect to a forbidden page after blocking (make sure that you have this file in your directory)
            });
        })
        return true; //this is crucial if you plan to return a response body(very importan)
    }

    if (request.action === 'check_if_blocked') { //check it the visited website is blocked(if yes then close the current tabe)
        chrome.storage.local.get(['blocked_sits'], function (result) {
            console.log(result);

            const checkIfBlocked = result.blocked_sits?.length && result.blocked_sits.includes(request.host) ? true : false;

            if (checkIfBlocked) {
                chrome.tabs.query({ //close the current page or tabe 
                    currentWindow: true,
                    active: true
                }, function (tabs) {
                    chrome.tabs.remove(tabs[0].id);
                });

                chrome.tabs.create({ url: "pages/forbidden.html" });
            }

        })
    }

});

I'm sure if you are new to Chrome extensions you are like what is this mess😳 ? Let's break it down.

Message listening : (method) This method is used to listen to sent messages from other parts of the extension. The request parameter contains the request body sent by the sender. sender parameter contains information about the sender, this typically includes the tab's ID, sender URL, and more, and at the end, the send response callback function is used to return a response to the sender if needed

Request action: Within each request body I add a property called action, this will help identify which request has been sent and how to respond to it. you can name the property whatever you want since request bodies are just normal objects in addition I send the host of the website that is about to get blocked. this will make more sense when we start with message-passing

Tab management: In this single article it's very difficult to demonstrate everything you can do with tabs, but at least I introduce the basics you may want to do with tabs. The method chrome.tabs.query is used to query tabs that meet the required conditions, this method returns all call-back function that has the returned tabs in an array, and each tab element has information about itself this can be its ID. After getting the ID of the current tab I use the method chrome.tabs.remove to close the tab and open our forbidden page with chrome.tabs.create, for this one make sure you set the correct path of the page depending on your folder structure.

Local storage: Working with the local storage in Chrome extension may be different from what we used to do, to make this article as short as possible I decided to not enter deeply into this topic but for much more information please use the following resource, and you can check comments on each local storage implementation I left some useful comments.

message passing

What is the point of implementing background scripts if we can't interact with them? By definition message passing in Chrome extension is a communication mechanism used to exchange data and trigger events through different parts of a Chrome extension. this can be from content script to background or popup script to background scripts.

If you remember very well we created we created a button using content script capabilities, let's connect it to the background script and make sure when pressed the opened website gets blocked.

Open the file containing your content script and update it with the following code.

controller.js

const  blockWebSite  =  ()  =>  {

chrome.runtime.sendMessage({ action:  "block",  host:  window.location.host },  function (response) {

if (chrome.runtime.lastError) {

console.error(chrome.runtime.lastError);

} else {

//do whatever you want

}

})

}



const  checkIfBlocked  =  ()  =>  {

chrome.runtime.sendMessage({ action:  "check_if_blocked",  host:  window.location.host }, (response) => {

if (chrome.runtime.lastError) {

console.error(chrome.runtime.lastError);

} else {

// do whatever you want...

}

});

};



const  createControllers  =  ()  =>  {

const  link  =  document.createElement("link");

link.rel  =  'stylesheet';

link.type  =  'text/css';

link.href  =  chrome.runtime.getURL('styles/content_script.css')



const  container  =  document.createElement('div');

container.classList.add("controls-container");

container.innerHTML  =  `

<button>block this sit</button>

`;



container.querySelector("button").addEventListener("click", () =>  blockWebSite());

document.head.appendChild(link)

document.body.appendChild(container);

}



window.addEventListener("load",  async  ()  =>  {

createControllers()

checkIfBlocked();

})

Within the above code, we have two functions, both used for passing messages to the background script, the block_site function is used to ask the background script to block the opened website, and for the check_if_block function, I think the function name speaks for itself self 😅

Well, that was a very long one, if you learned something from this article just drop a small comment and share the content so that other people can gain access to this document, at the beginning of this series I said our application will be presentable, and currently we miss some functionalities, in the coming episode we shall complete with the project and deploy it on the chrome store.

The next episode is right here

Build your first Chrome extension (Part 3 - End)

djibril mugisho — Mon, 06 Nov 2023 15:35:38 +0000

Yeah, it's me again, in this last episode we are adding the remaining functionalities to our project.
we have done a lot of stuff through the previous episode but we still with some uncompleted stuff.

If you went through the first article you remember that we created a list of blocked websites on our popup, but the data used was hard coded, let start by fetching real data from the local storage, and then later on we can proceed with the deletion part. To do so we need another additional action within the background script that will be used for returning the data.

Again if you don't understand anything please start with previous episodes.

event.js

    if (request.action === 'get_blocked') {
        chrome.storage.local.get(['blocked_sits'], function (result) {
            sendResponse(result.blocked_sits);
        });

        return true;
    }

With the ability to fetch data, let's now consume what we get back.
Open your popup script and update the printSiteElement with the below code

const printSiteElement = async () => {
    chrome.runtime.sendMessage({ action: "get_blocked" }).then((result) => {
        if (chrome.runtime.lastError) {
            console.log(console.log(result)) //print error
        } else {
            result?.forEach((site) => {
                document.querySelector(".blocked-sits").appendChild(siteElement(site));
            })
        }
    });
};

now we are rendering real data, let's add the last missing piece of the application which is allowing users to delete a blocked website so that they can visit it again. To do so we shall follow the previous pattern, create an action within the background scripts, and then connect that with the popup script. That makes sense let's do it 😎

action

    if (request.action === 'remove') {
        chrome.storage.local.get(['blocked_sits'], (result) => {
            const index = result.blocked_sits.findIndex((site) => request.host === site); //find index 
            const blockedSites = result.blocked_sits;

            blockedSites.splice(index, 1);//remove  at targeted index 
            chrome.storage.local.set({ blocked_sits: blockedSites });// upadte storage 

        })
    }

update the unlockWebsite function with the above code

popup.js

const unlockWebsite = (host) => {
    chrome.runtime.sendMessage({ action: "remove" }).then(() => {
        if (chrome.runtime.lastError) {
            console.log(chrome.runtime.lastError) //log your error
        } else {
            const container = document.getElementById(host)
            container.remove();
        }

    })
}

Deployment

what is the point of building a Chrome extension if you won't deploy it on the Chrome store 🤔 I realized that explaining each step about how you can get your extension online may be very long and confusing, to make the job easier for me and you, I decided to provide this youtube playlist containing useful information about deploying chrome extensions, it's a very short playlist of only 5 videos of 5min each 😇

playlist 🎬

I'm sure you enjoyed the videos 😅

Finally, this journey is over if you went through all the episodes I'm sure you learned a lot about Chrome extensions. If you think my content is useful or informative please drop a comment or like 🙏. For any incorrect information let me know in the comment.

React state management with Zustand🐻

djibril mugisho — Tue, 08 Aug 2023 01:18:29 +0000

With all the state management libraries that we currently have, deciding what to use for your next project can be douting, but if you want efficiency without complexity, then Zustand is probably your choice.
In this article, we shall discuss some advantages provided by Zustan, and how to introduce Zustand in your React project.

Why zustand

Zustand is not the only good state management library out there, and we have some of them that have been in the field for so long, like Redux and Mobx, but what makes it special? And why is it probably the next for your next project? Here are 3 reasons why Zustand matters and why you should opt for it!

Minimalism and simplicity : Zustand was designed to be simple with a minimal approach, making it easy to learn and use.

Small size bundle: with only 1.16kb of bundle size, Zustand is by far the smallest react state management library and yet one of the performers.

selective component subscription : Zustand allow components to only subscribe state they need, which improves performance by avoiding unnecessary re-render

I think now you are convinced, and can't wait to see what Zunstand has for you. For demonstrating all those amazing features we shall be building one Todo application that will showcase the fundamentals of Zustand

Project setup

we shall use vite and tailwind.css for applying some basics styling, you can go with any CSS framework you want or just use plain CSS. Please note that everything will be built with Typescript.

For saving time and focus on Zustand, I created a simple starter project that contains all installed dependencies and a basic todo UI here is the link to the starter project repository

If you downloaded the starter project I'm sure you found an App.tsx file and Todo.tsx file, in the App.tsx file we got an input text that will be used for creating todos and a list element containing our todos.
The Todo.tsx contains the code for rendering a todo and two buttons, one for deleting the todo, another one for updating the todo, and the last one that will be used for updating the status of the todo

Zustand store

Zustand embraces the idea of actions for updating states, Zustand actions are different from Redux, since actions in Zustand are just properties of the store object. Zustand has several ways of managing stores, but in this article, we shall focus on the easiest way, use the following resource for more information

Todo store

import { create } from "zustand";

export interface Todo {
    id: string,
    completed: boolean,
    content: string,
}


interface state {
    todos: Todo[],
    length: number,
}

interface Actions {
    addTodo: (newTodo: Todo) => void,
    markCompleted: (id: string) => void;
    deleteTodo: (id: string) => void,
    clearAllCompleted: () => void,
    updateTodo: (id: string, content: string) => void
}

const useTodoStore = create<state & Actions>((set, get) => ({
    todos: [],
    length: 0,
    addTodo: (newTodo) => set({ todos: [newTodo, ...get().todos,], length: get().todos.length }),
    markCompleted: (todoId) => {

        const getTodos = get().todos  // get the list of all todos avalaible in the store

        const todoIndex = getTodos.findIndex((todo) => todo.id === todoId);  //find todo index

        getTodos[todoIndex].completed = !getTodos[todoIndex].completed;  //update the complete property by its oposite.

        return set({ todos: [...getTodos], length: get().todos.length });  //update the list all todos in the store with the new changes.

    },

    deleteTodo: (todoId) => set({ todos: get().todos.filter((todo) => todo.id !== todoId) }),  //delete the targeted todo.

    clearAllCompleted: () => set({ todos: [] }),

    updateTodo: (id: string, content: string) => {
        const getTodos = get().todos; //get the list of all todos

        const todoIndex = getTodos.findIndex((td) => td.id === id); //get the targeted todo index

        getTodos[todoIndex].content = content;

        return set({ todos: [...getTodos] });
    }

}))

export default useTodoStore;

I know you have one million questions about the above code, but don't worry I have an explanation for you, the three interfaces are types of data available within the store, the create method used for creating stores provides two methods, a set method for updating states and a get method for getting
available states in the store, the get method is not the only option for the getting state available in the store here is another way

const  store  =  create((set)  =>  ({
    name:  "may be your name",
    getName:  set((state)  =>  state.name)  //access state from set state
}))

Data consumption

After creating our lovely store let's consume its state now, we shall start by creating a method for creating todos and then printing them.

App.tsx file

import { useRef } from 'react'
import Todo from './components/Todo'
import useTodoStore from './store/features/todo'
import { Todo as TodoType } from './store/features/todo';


function App() {
  const addTodoAction = useTodoStore((state) => state.addTodo);
  const todos = useTodoStore((state) => state.todos);
  const input = useRef<HTMLInputElement>();

  const addTodo = () => {
    if (!input.current?.value) return;

    const newTodo: TodoType = {
      content: input.current.value,
      completed: false,
      id: new Date().toISOString(),
    }
    addTodoAction(newTodo);
    input.current.value = "";
  }


  return (
    <main className=' w-full p-2 min-h-screen bg-slate-200 pt-10'>
      <div className=" bg-white border m-auto  max-w-4xl min-h-[300px] ">
        <div className="">
          <h3 className=' text-2xl font-bold p-5 border-b bg-slate-100 text-slate-600'>Simple Todo📝</h3>
        </div>

        <div className="w-full flex   gap-5 p-5">
          <input ref={(el: HTMLInputElement) => input.current = el} placeholder=' Your todo' type="text" className='  px-4 w-full rounded-md border outline-slate-300' />
          <button onClick={() => addTodo()} className=' bg-slate-700 text-white px-10 py-4 active:bg-slate-800 rounded-md '>submit</button>
        </div>

        <ul className=' p-5'>
          {todos.map((td) => <Todo content={td.content} completed={td.completed} id={td.id} key={td.id} />)}
        </ul>
      </div>
    </main>
  )
}

export default App

If you paid attention to details, you probably notice that I did not use any extra hook or a selector for using the store, that is because Zustand is a direct state management library, with Zustand you don't need any extra hook for accessing the store's state, and the store can be accessed outside of the react tree.

Finish the todo app

In this last section of the article, we shall create all the remaining functions, like the one for deleting, updating, and marking todos as completed or not.

Todo.tsx file

import { BsTrash3 } from 'react-icons/bs';
import { MdModeEditOutline } from 'react-icons/md';
import React, { FormEvent, useState, } from 'react';
import useTodoStore from '../store/features/todo';


interface Props {
    content: string,
    completed: boolean,
    id: string
}

const Todo: React.FC<Props> = ({ content, completed, id }) => {
    const [editMode, setEditMode] = useState<boolean>(false);
    const [updateValue, setUpdateValue,] = useState<string>(content);


    //actions from useTodoStore
    const { deleteTodo, updateTodo, markCompleted } = useTodoStore((state) => state);


    //function for updating a todo
    const editTodFunction = (e: FormEvent) => {
        e.preventDefault();
        if (updateValue.trim().length < 1) return //check if the input is empty

        updateTodo(id, updateValue);
        setEditMode(false);
    }


    return (
        <li className=' w-full my-2 cursor-pointer  border flex gap-3 items-center bg-slate-50 p-5 rounded-md'>
            {
                editMode ?
                    <div className="w-full border ">
                        <form onSubmit={editTodFunction} action="">
                            <input autoFocus onChange={(e) => setUpdateValue(e.target.value)} type="text" defaultValue={content} className=' bg-transparent text-slate-500 h-10 w-full outline-none p-2' />
                        </form>
                    </div>

                    : <div className=" w-full">
                        <p style={completed ? { textDecoration: "line-through" } : {}} className=' text-slate-600'> {content} </p>
                    </div>
            }


            <div className=" flex gap-7">
                <button onClick={() => deleteTodo(id)} className=' p-3  rounded-full box-border w-12 h-12 flex items-center justify-center bg-slate-200 hover:bg-slate-300 hover:text-slate-700'>
                    <BsTrash3 className=" cursor-pointer" />
                </button>

                <button onClick={() => setEditMode(!editMode)} className=' p-3  rounded-full box-border w-12 h-12 flex items-center justify-center bg-slate-200 hover:bg-slate-300 hover:text-slate-700'>
                    <MdModeEditOutline className=" text-slate-500" />
                </button>

                <button onClick={() => markCompleted(id)} className=' p-3  rounded-md box-border bg-slate-200 text-sm hover:bg-slate-300 hover:text-slate-700'>
                    Completed
                </button>
            </div>
        </li>
    )
}


export default Todo

Bonus(persisting data)

What is a todo application without persisting data 🥱 Zustand allows stores to persist data not just in the local storage but with any other storage mechanism that the browser provides, in the example below we transform our todo store into a store that persists its data in the local storage, you can be very creative and use other storage like the indexDB, here is a link to the complete resource


const useTodoStore = create(persist<state & Actions>(
    (set, get) => ({
        todos: [],
        length: 0,
        addTodo: (newTodo) => set({ todos: [newTodo, ...get().todos,], length: get().todos.length }),
        markCompleted: (todoId) => {

            const getTodos = get().todos  // get the list of all todos avalaible in the store

            const todoIndex = getTodos.findIndex((todo) => todo.id === todoId);  //find todo index

            getTodos[todoIndex].completed = !getTodos[todoIndex].completed;  //update the complete property by its oposite.

            return set({ todos: [...getTodos], length: get().todos.length });  //update the list all todos in the store with the new changes.

        },

        deleteTodo: (todoId) => set({ todos: get().todos.filter((todo) => todo.id !== todoId) }),  //delete the targeted todo.

        clearAllCompleted: () => set({ todos: [] }),

        updateTodo: (id: string, content: string) => {
            const getTodos = get().todos; //get the list of all todos

            const todoIndex = getTodos.findIndex((td) => td.id === id); //get the targeted todo index

            getTodos[todoIndex].content = content;

            return set({ todos: [...getTodos] });
        }

    }),
    {
        name: 'food-storage', // name of the item in the storage (must be unique)
        storage: createJSONStorage(() => localStorage), // (optional) by default, 'localStorage' is used
    }
))

export default useTodoStore;

And that is it. That was a little introduction to Zustand, Zustand is not only about what I have shown you in this article, you can go beyond that, you can maybe learn how to fetch data correctly... there is always room for growth 😇

Thanks for reading 🙏, if you want some cool stuff just leave a comment, don't forget to like and follow for more contents like this.

Link to the full code

React custom hooks for everyone🪝

djibril mugisho — Thu, 13 Jul 2023 12:24:22 +0000

Maintaining react components that contain too much logic has never been easy, thanks to react custom hook, we can distribute our component's logic into a reusable function that can be imported into any component of our application. In case you are new to React, custom hooks are not special functions provided by React, instead, they are built on top of existing hooks.

In this project, we shall build an application to fetch a location based on the provided IP address, this project will be a favorable scenario for learning custom hooks since we practice both reusability and HTTP request within custom hooks.

Create application

In this project we shall be using Vite, if you are new to Vite don't worry everything you know about React remains the same. Run the command below for building your application, and for more information on Vite use the following link

npm create vite@latest myproject -- --template react-t
cd myproject
npm install 

//use the code editor of your choice

After creating the application, get rid of the App.css or delete all code inside of it, we don't need it in this project, all the styling will be written in the index.css file. To see the custom hooks in action we shall start without them and then change our logic to custom hook later.

css

* {
  margin: 0px;
  padding: 0px;
}

.container {
  max-width: 600px;
  min-height: 300px;
  margin: auto;
  margin-top: 40px;
  border: 0.5px solid rgba(0, 0, 0, 0.127);
  padding: 20px;
}

.container p
{
  margin: 20px 10px;
}

.button-container {
  max-width: 600px;
  margin: auto;
  margin-top: 20px;
  margin-bottom: 50px;
}

.button-container button {
  width: 100%;
  padding: 15px;
}

import { useState } from 'react'

function App() {
  const [loading, setLoading] = useState<boolean>(false);
  const [location, setLocation] = useState<{} | any>();
  const [errorMessage, setErrorMessage] = useState<string>();

  const getLocation = async () => {
    try {
      setLoading(true);
      const request = await fetch("http://ip-api.com/json/"); //provide an ip address as request param if you don't want to use your current ip address e.g:http://ip-api.com/json/24.48.0.1"
      const response = await request.json();
      setLocation(response);
      setLoading(false)
    } catch (error: any) {
      //do what you want with the error 
      setLoading(false)
      setErrorMessage(error.message);
    }

  };

  return (
    <>
      <div className="container">
        <div className="location-info">
           // render location detail
          {location &&
            Object.keys(location).map((key) => {
              return <p><strong>{key}</strong>:  {location[key]}</p>
            })
          }

          {
            loading && <p>...loading</p>
          }
          {
            errorMessage && <p>{errorMessage}</p>
          }
        </div>
      </div>
      <div className="button-container">
        <button onClick={() => getLocation()}>Get location</button>
      </div>

    </>
  )
}

export default App

As you can the application is working perfectly fine, you click on the button you get the location, and everyone is happy 😎, but what if you want to do the same thing in other components of your application, do you imagine how many duplicated code you will end up with 🤔, don't worry let's solve that problem with a custom hook.

In this second example, I'm going to create a useGeoLocation hook that will provide all the states that we need, including the location.

useLocationHook

import { useState } from "react"


export const useGeoLocation = (): { location: any, errorMessage: string, loading: boolean, getLocation: (id?: string) => void } => {
    const [loading, setLoading] = useState<boolean>(false);
    const [location, setLocation] = useState<any>(); //i use any type for this state because i'm not sure about what will be returned;
    const [errorMessage, setErrorMessage] = useState<string>("");

    const getLocation = async (ip?: string) => {
        try {
            setLoading(true);
            const request = await fetch("http://ip-api.com/json/" + (ip ? ip : "")); //provide an ip address as request param if you don't want to use your current ip address e.g:http://ip-api.com/json/24.48.0.1"
            const response = await request.json();
            setLocation(response);
            setLoading(false)
        } catch (error: any) {
            setLoading(false)
            setErrorMessage(error.message);
        }
    }

    return {
        loading,
        location,
        errorMessage,
        getLocation
    }
}

useLocation Hook in action


import { useGeoLocation } from './hooks/useGeoLocation';

function App() {
  const { loading, location, getLocation, errorMessage } = useGeoLocation();

  return (
    <>
      <div className="container">
        <div className="location-info">
          {location &&
            Object.keys(location).map((key) => {
              return <p><strong>{key}</strong>:  {location[key]}</p>
            })
          }

          {
            loading && <p>...loading</p>
          }
          {
            errorMessage && <p>{errorMessage}</p>
          }
        </div>
      </div>
      <div className="button-container">
        <button onClick={() => getLocation()}>Get location</button>
      </div>

    </>
  )
}

export default App

Now you have a portable function that can be used anywhere in your application, you can go a bit deep and use useReducer instead dozen of use states, but since this article is about custom hooks, let's focus on that only.

You may think that states available in the useGeoLocation hook are shared among all components that call it, but that is not the case, each component that calls a custom hook will have its own separate instance of the hook's state, this allows you to use thing like useEffect or useLayoutEffect inside your custom hooks.

Conclusion

Custom hooks 🪝 can improve the quality of your code and help you with reusable code 😊, use them as much as possible clean code always improves the productivity of your team.

If you find this article useful comment, or why not subscribe🤔. Thanks for reading.

Edit and preview Markdown in react.js

djibril mugisho — Sat, 22 Apr 2023 23:41:06 +0000

Introduction

For programmers, we all know that markdown is among the best ways for presenting technical documents, but how do proceed if you have to present that document in your project? You may think that it is a very complex task to achieve, but it is much easier than how you can imagine, what you need to do is provide the markdown script and leave the rest to the library.

Create a React app and install dependencies

In this article, we shall be using Vitejs for developing our application since Vite is much faster and very optimized than CreateReactApp, for more information on Vite consult the following resource https://vitejs.dev/guide/
For saving time and effort, we shall be using tailwind-css for styling.

NB: if you are new to Vite you don't need to learn it since all you know is supported and nothing changes.

create a Vite project and download all dependencies

npm create vite@latest markdown-preview -- --template react
cd  markdown-preview
npm i @uiw/react-markdown-preview
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

open your tailwind.config.js and replace all the currents configurations with the following configurations.

/** @type {import('tailwindcss').Config} */
export default {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

After applying all the needed configurations go and add the following codes on top of your index.css.

@tailwind base;
@tailwind components;
@tailwind utilities;

Time for previewing Markdown😎



import './App.css'
import React, { useTransition, useState } from "react";
import MarkdownPreview from '@uiw/react-markdown-preview';


function App() {
  const [editorValue, setEditorValue] = useState("");
  const [editorMode, setEditorMode] = useState(true);
  const [activeHeader, setActiveHeader] = useState("editor");
  const [isPending, startTransition] = useTransition();

  const switchEditorMode = (viewMode) => {
    if (viewMode === "editor") {
      setActiveHeader("editor")
      setEditorMode(true)
    } else {
      setActiveHeader("preview")
      startTransition(() => {
        setEditorMode(false)
      })
    }
  }

  return (
    <div className="App w-full min-h-screen bg-gray-100 pt-10">
      <section className="max-w-[900px] relative overflow-hidden min-h-[600px] bg-white rounded-md border m-auto">
        <div className="w-full h-12 top-[0px] left-0 right-0 border-b flex justify-between items-center">
          <div className="flex">
            <div
              style={activeHeader === 'editor' ? {
                background: "#d4d3d3"
              } : {}}
              onClick={() => switchEditorMode("editor")}
              className="w-32 relative flex items-center border-r justify-center  h-12 text-gray-700 cursor-pointer">
              {activeHeader === "editor" && <div className="w-2 h-2 bg-gray-500 border rounded-full gap-2 absolute right-2"></div>}
              <p>Edit</p>
            </div>

            <div style={activeHeader === "preview" ? {
              background: "#d4d3d3"
            } : {}}
              onClick={() => switchEditorMode("preview")}
              className="w-32 relative flex items-center justify-center h-12 text-gray-700 border-r cursor-pointer">
              {activeHeader === "preview" && <div className="w-2 h-2 bg-gray-500 border rounded-full gap-2 absolute right-2"></div>}
              <p>Preview</p>
            </div>
          </div>

          <div className="flex gap-5 px-5">
            <div className="h-4 w-4 bg-green-300 rounded-full "></div>
            <div className="h-4 w-4 bg-blue-500 rounded-full "></div>
            <div className="h-4 w-4 bg-red-300 rounded-full "></div>
          </div>
        </div>


        {/* show loading indicator while switching views  */}
        {isPending ? <p className='m-4'>...loading</p> :
          <>
            {editorMode ?
              //used for collecting markdown scripts
              <section className="px-9 py-5">
                <textarea defaultValue={editorValue} onChange={(e) => setEditorValue(e.target.value)} name="" id="" cols="30" rows="10" className="w-full min-h-[550px] text-sm h-full p-2 outline-none border-none" placeholder="Edit">
                </textarea>
              </section>
              :
              //used for displaying collected markdown scripts 
              <section className="w-full h-full min-h-[600px] px-9 py-5">
                <MarkdownPreview className="markdownPreview" source={editorValue} />
              </section>
            }
          </>

        }
      </section>
    </div>
  )
}

export default App

At the end, this is the final look of the application

Please note that most of what I include in the above code may not have anything related to markdown preview, but all I wanted is to show how you can use the provided library for real projects and add more optimization.

There are a lot of things you can do uiw/react-markdown-preview library like switching to dark mode and much more here is the link to the official documentation

Bonus
All the source codes are available on my GitHub account if you want to have look here is the link to the, repo.
And here is the deployed project.

DALL-E with node.js

djibril mugisho — Sat, 18 Mar 2023 19:04:03 +0000

Introduction

over the last few years, we have seen how machine learning and artificial intelligence have improved a lot, and now we are seeing how artificial intelligence is affecting our daily routines and how we interact with the internet. From high-level chatbots to incredible images generators but among those technologies the one I am excited about the most is the possibility of generating images and art through thought and imagination, and this article we shall see how to generate images from inputs also called prompt using DALL-E model, please note that DALL-E is not free after creating your account you will receive free credits that are enough for our min-application and testing purposes.

Create an account

Before start building our application we shall start by creating an account and generate an API token that we shall use to access the network
use the following link to create your account if you don't have one yet

after creating your account click on your profile's image and go to view API keys once there you will be prompted to create an API key create one, here is how the screen looks like

Create a simple node.js application

with all the credentials and information we need for sending our request let us now create our mini node.js application and create some simple images

initialize a node.js application with npm init then install the above dependencies

npm install express nodemon openai body-parser

we shall be using nodemon for reloading our server when we make changes, instead of restarting our application for some small updates. For enabling nodemon go to your package.json file and add the following script "start": "nodemon index.js " don't forget to replace the index.js with your main entry file

create your first image with DALL-E

const express = require("express");
const app = express();
const openai = require('openai');
const bodyparser = require('body-parser');

//body-parser
app.use(bodyparser.json());


app.post('/createImage', async (req, res, next) => {
        try {
        const prompt = req.body.prompt;
        const config = new openai.Configuration({
            apiKey: "your API key",
        });

        const openaiApi = new openai.OpenAIApi(config);
        const createImage = await openaiApi.createImage({
            prompt: prompt,
            n: 1,
            size: "512x512",
        })
        return res.status(201).json({ imageUrl: createImage.data.data[0].url });
    } catch (error) {
        return res.status(500).json({ message: "internal server error" });
    }

})

app.listen(8080, () => {
    console.log('server started on port 8080');
})

let us break down the meaning of that code, the n field represents the number of images that we request, it goes from 1 to 10, and the prompt field
is the text used for creating our image it can be anything like a cat playing on play-station 5😁

please note that not all the sizes are supported here is the list

   "256x256";
   "512x512";
   "1024x1024";

Create image variation

You may also want to create variations of your existing image, which is also possible with DALL-E, please note that your image must respect the following requirements

must be a png image
must be square
must have less than 4mbs

const express = require("express");
const app = express();
const openai = require('openai');
const bodyparser = require('body-parser');
const path = require('path');
const fs = require('fs');

//body-parser
app.use(bodyparser.json());

app.post('/createVariation', async (req, res, next) => {
    const config = new openai.Configuration({
        apiKey: "your API key",
    });
    const openaiApi = new openai.OpenAIApi(config);
    const image = path.join(__dirname, './image.png');
    const file = fs.createReadStream(image);

    try {
        const createVariation = await openaiApi.createImageVariation(
            file,
            2,
            "1024x1024",
        )
        const result = createVariation.data.data;
        return res.status(202).json({ imageUrl: result });

    } catch (error) {
        console.log(error.message);
        return res.status(500).json({ message: error.message, error: error });
    }
})


app.listen(8080, () => {
    console.log('server started on port 8080');
})

In the example above we create two variations of one image which means our response will be an array. Please make sure your image is a square and a valid PNG otherwise this will not work anymore.

Bonus
generating images and creating variations is very amazing and full of fun but what if you want to take the image provided on the URL and write it to your local storage or the storage where your server is running ?🤔 the following functionality does not have anything in relation with openai library this function if fully implemented with nod.js build in functions, this process may take unexpected amount of time since generated images are a bit heavy

  const result = "your image URL";
  const fetchFile = await fetch(result);
  const responseBlob = await fetchFile.blob();
  const arrayBuffer = await responseBlob.arrayBuffer();
  const buffer = Buffer.from(arrayBuffer);
 const filePath = path.join(__dirname, './' + new Date() + ".png");

 const writeFileToDisc = fs.writeFileSync(filePath, buffer);

For this example i use the current date for naming files in a unique fashion please feel free to use any method of your choice.

conclusion
Generating images with DALL-E is very amazing and satisfying but there is another amazing API much more epic and much more creative if this article reaches more than 100 likes I promise to write another article on how to interact with MID-JOURNEY, something that you will like if you liked this article

don't forget to show some love by liking and following for more contents.