DEV Community: Mitch Chimwemwe Chanza

If CI/CD Pipelines Were Human: A Day in the Life

Mitch Chimwemwe Chanza — Fri, 24 May 2024 09:53:33 +0000

Imagine if Continuous Integration and Continuous Deployment (CI/CD) pipelines were human. This "person" would be the ultimate multitasker, an unsung hero of the software development world, working tirelessly behind the scenes to ensure that every piece of code is flawlessly integrated and deployed. Let’s explore a day in the life of our humanized CI/CD pipeline.

Early Morning: Rise and Shine

Our CI/CD human wakes up early, ready to tackle the day. The first task is a quick review of overnight activities. This includes checking logs and ensuring that all automated tests ran smoothly. Just like a meticulous project manager, they assess the status of the build environment, verifying that everything is in tip-top shape for the day’s work.

Morning Routine: Code Integration

With a fresh cup of coffee in hand, the CI/CD human dives into the morning routine: integrating new code changes. Developers from different parts of the world have submitted their code overnight, and it’s up to our CI/CD to merge these changes. They carefully review each commit, ensuring that there are no conflicts and that the new code aligns with the existing codebase. Any discrepancies are flagged and communicated back to the developers for quick resolution.

Mid-Morning: Automated Testing

By mid-morning, it’s time for automated testing. Like a diligent quality assurance specialist, our CI/CD human runs a series of tests on the integrated code. Unit tests, integration tests, and regression tests are all part of the repertoire. Each test is meticulously executed, and results are promptly analyzed. If any issues are found, the CI/CD human communicates with the relevant developers to get them fixed before the next deployment.

Lunchtime: Monitoring and Optimization

During lunchtime, our CI/CD human takes a brief break but remains vigilant, constantly monitoring the health of the system. They review performance metrics and logs to identify any potential bottlenecks or areas for optimization. Just like a proactive engineer, they tweak configurations and make adjustments to ensure the pipeline runs efficiently.

Afternoon: Deployment Prep

The afternoon is dedicated to deployment preparation. Our CI/CD human works like a seasoned operations manager, ensuring that the deployment environment is ready. They verify that all dependencies are in place, database migrations are prepared, and rollback plans are established in case anything goes awry. Communication with stakeholders is key, and our CI/CD human ensures that everyone is aware of the upcoming deployment.

Late Afternoon: The Big Deployment

As the day progresses, it’s time for the big deployment. With the precision of a skilled technician, our CI/CD human orchestrates the deployment process. They push the code to production, monitoring every step to ensure a smooth transition. Any issues that arise are swiftly addressed, minimizing downtime and ensuring that end-users experience a seamless update.

Evening: Post-Deployment Checks

After the deployment, our CI/CD human performs post-deployment checks, much like a quality control inspector. They verify that the new features are functioning as expected and that there are no critical bugs. They also gather feedback from users and developers, taking notes for future improvements.

Night: Maintenance and Learning

As the day winds down, our CI/CD human engages in maintenance tasks. This includes cleaning up old builds, archiving logs, and preparing the pipeline for the next day. They also spend time learning about new tools and technologies, always looking to enhance their skills and improve the pipeline.

Conclusion: An Indispensable Ally

In the world of software development, a CI/CD pipeline is an indispensable ally, tirelessly working to ensure that code is seamlessly integrated and deployed. If CI/CD pipelines were human, they would embody the qualities of a project manager, quality assurance specialist, engineer, operations manager, technician, and quality control inspector all rolled into one. Their dedication and efficiency would make them the unsung heroes, ensuring the success of every software project they touch.

Understanding React Custom Hooks: A beginer's guide

Mitch Chimwemwe Chanza — Mon, 13 Nov 2023 15:29:36 +0000

before we begin lets grow my twitter population 😄 follow me mitch_chanza

React hooks have become an integral part of modern React development, offering a way to manage stateful logic in functional components. While React provides several built-in hooks like useState and useEffect, creating custom hooks can further enhance code reusability and maintainability. In this blog, we'll explore the basics of custom React hooks, demystify their creation, and illustrate their practical use.

What are React Hooks?

React hooks are functions that allow you to use state and other React features in functional components. They were introduced in React 16.8 to enable functional components to manage state and side effects, which were previously exclusive to class components.

The most common built-in hooks are:

useState: Manages component state.
useEffect: Handles side effects in function components.
useContext: Accesses the value of a React context.

Why Custom Hooks?

Custom hooks empower developers to encapsulate and reuse logic across different components. This can be particularly beneficial when dealing with complex state management, API calls, or any other shared functionality. By creating custom hooks, you can keep your code DRY (Don't Repeat Yourself) and make it more modular.

Anatomy of a Custom Hook

A custom hook is just a JavaScript function whose name starts with "use." By convention, this naming signals to both React and other developers that the function is a hook and should be used with the use keyword.

Let's create a simple custom hook called useCounter to manage a counter in our components.

// useCounter.js
import { useState } from 'react';

const useCounter = (initialValue = 0) => {
  const [count, setCount] = useState(initialValue);

  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return { count, increment, decrement };
};

export default useCounter;

In this example, useCounter initializes a state variable count with an initial value (defaulting to 0) and provides functions to increment and decrement it.

Using the Custom Hook

Now that we've created our custom hook, let's use it in a component.

// CounterComponent.js
import React from 'react';
import useCounter from './useCounter';

const CounterComponent = () => {
  const { count, increment, decrement } = useCounter();

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
};

export default CounterComponent;

By calling useCounter(), we get access to the state (count) and functions (increment and decrement) returned by our custom hook.

Rules of Hooks

When creating custom hooks, it's crucial to follow the "Rules of Hooks":

Only call hooks at the top level: Don't call hooks inside loops, conditions, or nested functions. Always use them at the top level of your functional components.
Only call hooks from React functions: Custom hooks should be called from functional components or other custom hooks, not from regular JavaScript functions.

Conclusion

Custom React hooks offer a powerful way to share logic between components and make your code more modular and maintainable. By creating custom hooks, you can encapsulate complex logic and promote reusability, enabling a more efficient and cleaner React codebase. Happy coding!

ooh yeah about the pupulation, remember to follow me 😄 mitch_chanza

5 tailwindcss utility classes to up your frontend game

Mitch Chimwemwe Chanza — Mon, 13 Nov 2023 11:46:32 +0000

Tailwind CSS is renowned for its simplicity and power in crafting elegant and responsive user interfaces. In this blog post, we'll delve into five indispensable Tailwind utility classes that will effortlessly enhance your frontend development workflow.

1. `space-x` and `space-y`

Tailwind's space-x and space-y classes are your go-to for effortless spacing between child elements. Whether you're horizontally arranging buttons or vertically stacking cards, these classes provide a clean and consistent spacing solution.

<!-- This will create horizontal space between child elements -->
<div class="space-x-4">
  <!-- Your horizontally spaced content here -->
</div>
<!-- This will create vertically space between child elements -->
<div class="space-y-6">
  <!-- Your vertically spaced content here -->
</div>

These classes simplify layout management, creating a polished and visually pleasing design.

2. `divide-y` and `space-y`

Combine divide-x for horizontal dividers and space-y for vertical spacing, achieving a well-structured grid layout.

<div class="divide-y space-y-4">
  <div class=" p-4">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus porro corporis eum eius voluptate omnis nesciunt exercitationem et inventore autem quis magni alias corrupti optio officia temporibus, ipsum neque magnam?
  </div>

  <div class=" p-4">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus porro corporis eum eius voluptate omnis nesciunt exercitationem et inventore autem quis magni alias corrupti optio officia temporibus, ipsum neque magnam?
  </div>
</div>

This combination is particularly handy when dealing with lists or grid-based components.

3. `group` and `group-hover`

The group class, coupled with group-hover, adds an extra layer of interactivity. Apply these classes to a container, and styles defined within them will only activate on hover, creating a seamless user experience.

<div class="group ">
    <!-- This will change the bg to green when hovered -->
    <div class="group-hover:bg-green-200 transition"></div>
    <!-- While this will be red when the entire group is hovered -->
    <div class="group-hover:bg-red-200 transition"></div>
</div>

This is perfect for revealing additional information or highlighting elements on user interaction.

4. `hover` and `scale`

The scale class provides a straightforward way to add scaling effects to an element. Whether you want to emphasize an image or create a zoom-in effect on a button, scale has got you covered.

<!-- This will scale the element when hovered -->
<div class="hover:scale-105">
  <div class="bg-gray-50 rounded-md p-4">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus porro corporis eum eius voluptate omnis nesciunt exercitationem et inventore autem quis magni alias corrupti optio officia temporibus, ipsum neque magnam?
  </div>

</div>

Conclusion:

As we conclude this exploration of Tailwind CSS utility classes, remember that these tools are just the tip of the iceberg. Experiment, dive into the Tailwind documentation, and uncover even more possibilities. Tailwind CSS stands as a beacon of simplicity and versatility, transforming the way developers approach frontend development. Happy coding!

Before you go, why not connect with me on Twitter? Stay updated on the latest web development trends, Tailwind tips, and more

Modern API Development (Part 3) : Add GraphQL

Mitch Chimwemwe Chanza — Mon, 13 Nov 2023 08:11:55 +0000

This post is a follow-up to the previous one at Part 2: Initiating Server. If you're looking to integrate GraphQL into an existing REST API, this guide is tailored for you. For those aiming to incorporate GraphQL into a new REST API, please refer to the instructions provided in the earlier posts. you can also follow the guide on my blog Mitch Guru

I'm delighted that you've reached this point, and I hope you're finding the journey enjoyable. As we continue with this series, there's still much more ground to cover. Now, let's shift our focus to the modernization of the API. I understand if you've been pondering, "What's considered modern about this server?" especially since it relies on the trusted 'express.' Take a moment to relax because you're about to delve into the contemporary aspects of this series.

we are going to cover the following topcs in this guide:

Install additional dependencies - GraphQl Tools, Apollo Server 4
Reconfigure the API to have separate routes, one for Graphql and one for REST
Implement GraphQL Endpont and resolvers
Test the API

Alright, no more talking – let's jump right in!

# install all dependencies for graphql to work in our API
pnpm api add graphql @apollo/server @graphql-tools/load @graphql-tools/graphql-file-loader

The graphql package is now installed. we can proceed to configure our API.
firstly we need to create a graphql folder in the api folder. this is where our graphql files will be stored. i will create a main.graphql file in that folder.

We are going to have three types initialized in this file:

Response - custom type for responses
Query - required root graphql query type
Mutation - required root mution type

#api/graphql/main.graphql file
type Response {
    message: String!
    success: Boolean!
    error: String
}

type Query {
    hello: String
}

type Mutation {
    hello: String
}

Up next we need to move some code from main.ts to be isolated to their own module. i am refering to the router which is set inside the main file.

//api/src/main.ts file
// ... rest of code
const router = express.Router();
// Set initial route
router.get("/", (_req, res) => {
    res.send({ message: "Monorepo API Configured!", success: true});
});
// .. rest of code

We are moving this part to a separate module called api/src/endpoints/rest/restEndpoints.ts. where we will do some modifications and export the module


// api/src/endpoints/rest/restEndpoints.ts
import express, { Router } from "express";

const restEndpoint: Router = express.Router();
// define routes
restEndpoint.get("/", (_req, res) => {
    res.send({ message: "Rest Endpoint Initialized!" });
})

export { restEndpoint }

Now lets updated api/src/main.ts to use the rest endpoint.

// api/src/main.ts file
import { restEndpoint } from './endpoints';

// ... rest of code
// Set v1/api endpoint
app.use("/v1/api", restEndpoint);
// .. rest of code

As observed, the import originates from the ./endpoint module rather than ./endpoint/rest/restEndpoint. This is accomplished by incorporating a barrel file within the endpoints folder, which exports all submodule functionalities.
read more on what a barrel file is here.

We can run our server again to be sure that we did not break anything.

# run server
pnpm api dev
# our server should be running properly  as expected. 
# http://localhost:9100 or http://localhost:9000 depending on the PORT set in .env file

Hold on, this isn't GraphQL yet; we're still operating a REST API! yes you are right, its one of the steps toward adding multiple routes tou our API.
Up next we are going to create another route for our API inside api/src/endpoints/graphql/graphqlEndpoints.ts module. Additionally we also need to create a resolver module api/src/endpoints/graphql/resolvers.ts which is going to be responsible for implementating all resolvers.

// api/src/endpoints/graphql/graphqlEndpoints.ts
import { ApolloServer } from '@apollo/server';
import { loadSchemaSync } from '@graphql-tools/load';
import { GraphQLFileLoader } from '@graphql-tools/graphql-file-loader';
import { resolvers } from '.';
// load schema from graphql files
const typeDefs=loadSchemaSync('./graphql/*.graphql', {
    loaders: [
        new GraphQLFileLoader()
    ]
});

// create apollo server
const server = new ApolloServer({
    typeDefs,
    resolvers
});

// export server
 export {  server}

please note this is a minimal configuration for now.

// api/src/endpoints/graphql/resolvers.ts

export const resolvers = {
    Query: {
        hello: () => `Hello there welcome to api monorepo`
    },
    Mutation: {
        hello: (_: unknown, args: { name: string }) => `Hello ${args.name} welcome to api monorepo`

    }
}

A sigh of relief we are now ready to test our REST + GraphQL APIs running on the same server.

# run server
pnpm api dev
# our server should be running properly  as expected. 
# http://localhost:9100/v1/rest and http://localhost:9000/v1/graphql

We can now happily commit our changes. and push them to our remote repository under the feature/part3 branch.

Watch out for Part 4 where we are going to integrate prisma ORM and part 5 Where we are going to introduce Hasura

2024's Game-Changers: 2 Unstoppable JavaScript Runtimes Transforming App Development

Mitch Chimwemwe Chanza — Sun, 12 Nov 2023 15:13:16 +0000

Each year, emerging technologies reshape the landscape of app development, emanating not only from the vibrant community but also from industry behemoths like Google, Facebook, Microsoft, and others. The current year is no exception, introducing compelling technologies that have stood the test of time.

Let's delve into the newcomers on the scene, where one is generating considerable buzz while the other is still finding its footing. The key distinction lies in their origins, with the hyped contender emerging from a community member and the other crafted in the esteemed Microsoft forge.

You're likely familiar with the ubiquitous JS runtime sensation, Burn. Its remarkable performance has captivated developers worldwide. However, before you break into celebration, let me introduce you to its formidable competitor, Rush.io.

In my pursuit of expediting development and team management, I encountered these two contenders, both proving to be highly proficient. In this post, we'll conduct a head-to-head comparison between rushjs and bun.

Bun made its debut in the development landscape in January 2023, whereas Rush.js has been in circulation since 2016. Interestingly, Rush.js has garnered adoption from a select group of major tech companies, including Microsoft (its creator), HBO, Wix, and a few others, constituting a minority of the industry players

Hold on a moment, let's delve into what Rush.js is all about. According to its website at rush.io, Rush is defined as a scalable monorepo manager tailored for the web. This tool, fostered by Microsoft, is designed to facilitate the seamless management of extensive code repositories, providing a solution for efficiently handling large-scale projects.

On the contrary, Bun.js serves a dual role as both a JavaScript runtime and a package manager, setting the stage for an intriguing competition. As outlined on the bun.sh, website, Bun positions itself as an all-in-one toolkit. While this might sound unconventional, the claim appears to hold merit, indicating a comprehensive solution that spans various aspects of development and runtime management.

In the realm of JavaScript runtimes, two contenders, Burn.js and Rush.js, emerge with distinctive origins, adoption trajectories, functionalities, and developer experiences.

Comparison

Functionality and Purpose

In the arena of functionality and purpose, Rush.js is a scalable monorepo manager designed to streamline the management of extensive code repositories. Tailored for large-scale projects, it efficiently addresses the challenges of scaling development efforts. Thanks to its Microsoft lineage, it seamlessly integrates with Microsoft-centric development environments and tools.

On the flip side, Bun.js distinguishes itself as a versatile tool serving as both a JavaScript runtime and a package manager. Positioned as an all-in-one toolkit, Bun.js simplifies various aspects of development and runtime management, offering flexibility in structuring and organizing projects.

Developer Experience

When it comes to the developer experience, Rush.js emphasizes scalability, striving to enhance developers' interactions by providing tools to manage complex monorepos effectively. Despite not enjoying the same widespread community support as Burn.js, the Rush.js community offers valuable resources for developers navigating its ecosystem.

Conversely, Bun.js positions itself as a versatile tool catering to diverse developer needs. The Bun.js community, while potentially smaller, fosters engagement and collaboration among developers using the toolkit. In this landscape of JavaScript runtimes, each with its unique strengths and community dynamics, developers can choose between the established reliability of Burn.js and the versatile toolkit approach of Bun.js, or opt for Rush.js with its Microsoft-backed scalability and industry legacy.

Conclusion

In the dynamic landscape of app development, Burn.js and Rush.js bring their unique strengths to the forefront. Burn.js, a community darling, boasts widespread adoption and a proven track record of performance. Meanwhile, Rush.js, backed by Microsoft, presents a robust solution for managing large-scale projects and complex monorepos.

The choice between Burn.js and Rush.js extends beyond performance and adoption; it hinges on the specific needs and preferences of developers. Burn.js offers a tried-and-true solution, while Rush.js beckons with the promise of Microsoft-backed innovation and scalability. As we navigate the intricacies of these JavaScript runtimes, the decision ultimately rests on whether to lean towards the established or embrace the evolving landscape of app development in 2024.

Modern API development(Part 2): Initialize Server

Mitch Chimwemwe Chanza — Sun, 12 Nov 2023 09:56:47 +0000

Refer to the earlier post - Part 1, to familiarize yourself with the configuration outlined there. This will enable you to continue with the instructions provided in this guide.

Quick Overview

in this part we are going to implement the following:

Install additional dependencies
Additional project configurations
Setup minimal server using express
Test the server

Initial Server configuration

# create a src folder inside api folder
mkdir -p api/src
#create main typescript file
touch api/src/main.ts
# lets change directory to api
cd api
# install additional api dependencies 
pnpm add cors express dotenv
# this will install three dependencies in devdependencies
pnpm add -D @types/{node,cors,express} nodemon

Important: Additional configuration

It's worth mentioning that when using pnpm, we have the ability to set filters in order to run scripts globally in the project. Let's go ahead and set up some global scripts with filters. We also need to trim the typescript compile configuration file tsconfig.json.

# package.json
  {
    "scripts" {
        "api":"pnpm --filter api"
    }
    // ... rest of the configuration
  }

We need to setup a few additional scripts in this file. we need build script to help in compiling typescript to javascript. we also need to have a watch script for compiling on code change. lastly we need a dev script to run the server using nodemon.
please refer to the section above on how to install nodemon.

# api/package.json
  {
    "scripts" {
        "build":"tsc ",
        "watch":"tsc -w",
        "dev":"nodemon dist/main.js"
    }
    // ... rest of the configuration
  }

Presented below is a revised minimal configuration for the TypeScript compiler in the form of the tsconfig.json file. This configuration serves as the foundational setup to initiate TypeScript compilation. It is recommended to use this as a starting point for your TypeScript projects, ensuring a solid foundation for further customization based on your specific requirements. Feel free to build upon and tailor this configuration to meet the unique needs of your TypeScript development endeavors.

# tsconfig.json
{
  "compilerOptions": {
    "incremental": true,  
    "composite": true, 
    "target": "ES2022", 
    "module": "NodeNext", 
    "moduleResolution": "NodeNext",
    "rootDirs": ["src"], 
    "outDir": "./dist",   
    "strict": true, 
    "noImplicitAny": true, 
    "alwaysStrict": true,   
    "noUnusedLocals": true,  
    "noUnusedParameters": true,  
    "skipLibCheck": true ,
    "esModuleInterop":true
  }
}

Adding additional settings to our project is optional but can help reduce clutter in your script. Specifically, we need to configure nodemon to run .ts files without waiting for compilation. This can be achieved by using the ts-node module. Let's take a look at the configuration.

# we need first to install ts-node
pnpm api add -D ts-node

Following the installation of ts-node, the next step involves configuring nodemon to operate in conjunction with ts-node. To achieve this, it is necessary to establish a nodemon configuration file, nodemon.json, located at the root of our project. Additionally, we must modify our dev script to execute nodemon while adhering to the specified configuration.

# nodemon.json
{
    "watch": ["src","graphql","hasura","prisma,tsconfig.json,package.json,.env"],
    "ext": "ts,graphql,json,prisma,js,env",
    "ignore": ["**/*.spec.ts","**/*.spec.graphql","**/*.spec.json","**/*.spec.js"],
    "execMap": {
      "ts": "ts-node ./src/main.ts"
    },

    "exec": "ts-node ./src/main.ts"
  }

   # api/package.json - updated scripts section
  {
    "scripts" {
        "build":"tsc ",
        "watch":"tsc -w",
        "dev":"nodemon"
    }
    // ... rest of the configuration
  }

Now that we have prepared the environment for our server to run smoothly, it's time to set up the server and test it. we need to create two files, the main entery file for our api api/src/main.ts and environmental variables file api/.env

// api/src/main.ts
import express, { json } from "express";
import cors from "cors";
import dotenv from "dotenv";
dotenv.config();
const env = process.env;
const app = express();
// Initialse base router
const router = express.Router();
// Set initial route
router.get("/", (_req, res) => {
    res.send({ message: "Monorepo API Configured!", success: true});
});
// Set v1/api endpoint
app.use("/v1/api", router);
// configure cors. the delimeter here can be anything that you have used in your .env file. for my example here am using comma to separate the urls.
app.use(cors({ origin: env.ALLOWED_ORIGINS?.split(",") }));
// enable json serialization
app.use(json());
// start server
app.listen(env.PORT ? +env.PORT : 9000, () => {
    console.log(`Server started on  http://localhost:${env.PORT}/v1/api`);
})

# .env file
  PORT=9100
  # allowed frontend applications based on the referer/origin.
  ALLOWED_ORRIGINS=http://localhost:3000,http://localhost:7010

Lets run the server now.

pnpm api dev
# our server should be up and running on http://localhost:9100/v1/api or http://localhost:9000/vi/api depending on the PORT set in .env file

Modern API Development (Part 1)

Mitch Chimwemwe Chanza — Sat, 11 Nov 2023 23:59:32 +0000

Throughout this series, we will construct a comprehensive backend utilizing contemporary tools and cutting-edge concepts. My earnest desire is for you to accompany this journey from its inception, following the episodes in the order of their publication. This sequential approach is designed to facilitate a thorough understanding of the foundational concepts, making it particularly beneficial for beginners. However, if you happen to be an expert in the field, feel free to leverage your skills and customize the process to align with your specific objectives. Whether you're just starting out or a seasoned professional, there's something valuable for everyone in this series as we delve into the intricacies of backend development.

Please note that there will be coresponding youtube videos for each topic we cover in this series

Project Setup

Let's initiate the project setup and push it to GitHub. In this endeavor, we will be employing various frameworks, libraries, and programming languages. The selection of tools is independent of the project structure. Below is a list of tools we will be utilizing:

Node.js 18
PNPM - Package Manager (PNPM will also be employed for managing a monorepo)
Hasura - GraphQL Tool
GraphQL - Schema Engine
Express - Server
Prisma - ORM
Postgres - Database

As the project progresses, additional tools may be incorporated into this list.

Create a Monorepo

Assuming PNPM is installed (for installation instructions, refer to pnpm), let's create a monorepo:

mkdir myproject-monorepo
cd myproject-monorepo
# Create an API folder
mkdir api
# Initialize PNPM project
pnpm init
# Initialize PNPM monorepo configuration
touch pnpm-workspace.yaml
# Add the following in the workspace file
    packages:
        - "api"
        - "frontend" # This is optional for now
# setup api project
cd api
# initialize  project
pnpm init
# install initial dependencies
pnpm add -D typescript @types/node
# initialize typescript
npx tsc --init 
# modify tsconfig.json to suit your development requirements. you might want to enable more features in that file.

With these steps completed, we are prepared to weave together the components of our project. This marks the beginning of our successful project journey.

Dive into part 2 of this series.

It is advisable to commit our modifications and push them to the GitHub repository. This precaution ensures that, in the event of any issues with our local version, we can easily retrieve the latest version from the remote repository. For further insights on GitHub and its functionalities .

Inaugural Correspondence: Google

Mitch Chimwemwe Chanza — Sat, 11 Nov 2023 15:04:43 +0000

Dear Google,

I extend this letter with admiration for Google's prominent position in the tech industry. I trust that all is thriving at your headquarters in Mountain View, California. This correspondence marks the initiation of a dialogue between the dynamic developer community and your esteemed organization.

Google is highly esteemed by the global developer community for its significant impact on technology. Pioneering initiatives from your end have not only reshaped the tech landscape but have also remarkably facilitated the journeys of developers worldwide. The community is appreciative of the innovation and resources that Google has contributed to our field.

This letter primarily serves as an introduction, paving the way for discussions on a myriad of topics in our future correspondences.

I kindly request your consideration in acknowledging and, where appropriate, responding to these letters. Such engagement would not only keep us abreast of your perspective but also foster trust within the community, underscoring your commitment to both developers and your organization.

In conclusion, I extend warm regards to your Chief Executive Officer and Chief Operating Officer, expressing our deep respect for their leadership.

With sincere anticipation, we look forward to the commencement of a fruitful dialogue. Rest assured, we will remain in contact, eager to deepen the connection between our respective realms.

Yours sincerely,

Mitch Chimwemwe Chanza

Tech Community Representative

Inaugural Correspondence: Microsoft

Mitch Chimwemwe Chanza — Sat, 11 Nov 2023 12:53:57 +0000

Dear Microsoft.

I am writing this letter with the utmost respect and appreciation for the work that Microsoft, a titan in the tech industry, consistently undertakes. I trust that all is well in Silicon Valley, and I seize this opportunity to formally inaugurate a line of communication between the vibrant developer community and your esteemed organization.

The developer community, both locally and globally, holds Microsoft in high regard for its profound impact on the world of technology. Your pioneering initiatives have not only transformed the landscape but have also significantly eased the journey of countless developers worldwide. We are grateful for the innovation and resources you have contributed to our field.

Allow me to clarify that this letter primarily serves as an introductory gesture, as there is a wealth of matters and ideas we aspire to explore in our forthcoming correspondences.

I kindly request your consideration in acknowledging and, where necessary, responding to these letters. Such engagement will not only help us stay informed about your perspective but will also instill a sense of trust within the community, reaffirming your commitment to them and your organization.

In closing, I would like to extend my warm regards to your Chief Executive Officer and Chief Operating Officer, conveying our deep respect for their leadership.

With sincere anticipation, we look forward to the start of a productive dialogue. Please be assured that we will remain in touch, eager to foster a more profound connection between our two worlds.

Yours sincerely,

Mitch Chimwemwe Chanza

Tech Community Representative

Open Letters To Tech Giants & Ants

Mitch Chimwemwe Chanza — Sat, 11 Nov 2023 12:53:26 +0000

I humbly ask for your understanding as I embark on this endeavor, for this section is dedicated to open letters addressed to both the tech giants and the rising 'Ants' (smaller companies or establishments) in the tech industry.

Within these letters, you will find a spectrum of content, ranging from critical assessments to applauding achievements, offering advice, and advocating for change. We intend to explore a multitude of topics within the tech community.

My mission is not to appease or boast but rather to instigate meaningful change and make a lasting impact. Consequently, the majority of my content will remain impartial and direct.

Moreover, if you or anyone you know possesses insights or ideas about pressing issues that warrant the attention of tech giants, please feel free to reach out to me. Together, we can craft impactful letters addressing these matters.

Optimizing JavaScript Code: Embrace Async/Await for Clarity

Mitch Chimwemwe Chanza — Fri, 01 Sep 2023 07:42:44 +0000

When it comes to writing clean and maintainable JavaScript code, one of the best practices you can adopt is to leverage the power of async/await. In this tip, we'll explore why using async/await is a game-changer and how it can make your code more accessible and easier to read for developers of all skill levels.

The Power of async/await

Async/await is a modern JavaScript feature that simplifies asynchronous programming. It's particularly useful when dealing with tasks like making network requests, handling file operations, or managing timers. Instead of relying heavily on promise chaining, async/await allows you to write asynchronous code that closely resembles synchronous code.

Readability and Accessibility

One of the most significant advantages of async/await is its ability to enhance the readability of your code. By using async/await, you can write asynchronous operations in a more linear and structured manner. This makes your code easier to follow, understand, and maintain. Even developers who may not be well-versed in JavaScript will find it more approachable.

Reducing Callback Hell

Callback hell, also known as the "Pyramid of Doom," occurs when you nest multiple callbacks within each other. This can make your code hard to read and debug. Async/await helps you avoid this problem by allowing you to write asynchronous code in a sequential and structured way. This results in cleaner and more organized code, reducing the likelihood of errors.

Error Handling

Async/await also simplifies error handling. You can use try/catch blocks to catch and handle errors in a straightforward manner. This leads to more robust code that's easier to troubleshoot.

Getting Started with async/await

To start using async/await in your JavaScript projects, you'll need to define functions as async and use the await keyword inside them to wait for promises to resolve. This approach will make your codebase more consistent, readable, and maintainable.

// define a named function
async function getInformation(){
// a network call - 
const response = await fetch('...')
// the results will be available after the promise resolves above
console.log(await response.json())
}
//or use an arrow function
const getInformation= async()=>{
// same code implemented as above
}

In summary, i highly recommend embracing async/await where possible in your JavaScript code. By doing so, you'll not only make your code more accessible to developers who may be less familiar with JavaScript but also improve the overall readability and maintainability of your codebase. So, why not start integrating async/await into your projects today and experience the benefits firsthand?

The Process of creating Software Libraries

Mitch Chimwemwe Chanza — Wed, 28 Dec 2022 17:16:00 +0000

please note that this post is part of a series of posts if you are not familiar with the topic i suggest you go through part 1 of this post.*

Creating a software library is a complex process that involves several steps. In this post, we'll outline the general process of creating a software library and discuss the key considerations at each stage.

Identify a need or problem that the library will solve The first step in creating a software library is to identify a need or problem that it will solve. This could be a specific task that is commonly performed in a particular domain, or a problem that has been identified through your own experiences as a developer.

It's important to be clear and focused about the scope of the library, as trying to solve too many problems or cover too many use cases can make the library complex and difficult to use.

Plan and design the library Once you have a clear idea of what the library will do, the next step is to plan and design it. This includes deciding on the overall architecture of the library, as well as the specific functions and features it will include.

It's important to consider the needs of the users of the library and design it in a way that is intuitive and easy to use. It's also a good idea to research any existing libraries that might be similar to yours and consider how your library will be different or offer additional value.

Implement the library
The next step is to start implementing the library. This involves writing the actual code for the functions and features you have designed. It's important to follow best practices for writing clean, maintainable code, including commenting your code, using descriptive variable names, and adhering to a consistent style guide.
Test and debug the library
Once the code for the library has been written, it's important to test it thoroughly to ensure that it is working correctly and is free of errors. This may involve writing unit tests to verify the functionality of individual functions, as well as testing the library as a whole in a variety of different scenarios.

If any errors or bugs are discovered during testing, they will need to be fixed in the debugging process.

Document the library
Thorough documentation is crucial for any software library, as it helps users understand how to use the library and how it is intended to be used. Documentation should include a detailed description of the functions and features of the library, as well as examples of how to use them.
Release the library and maintain it over time
Once the library has been tested and documented, it's time to release it to the public. This could involve uploading it to a code repository or hosting it on your own website.

It's important to continue maintaining the library over time, including fixing any bugs that are discovered and adding new features as needed. This will help ensure that the library remains useful and relevant for its users.

In summary, creating a software library involves a number of steps, including identifying a need or problem, planning and designing the library, implementing the code, testing and debugging, documenting the library, and releasing and maintaining it. By following this process, you can create a high-quality software library that is useful and easy to use for other developers.

DEV Community: Mitch Chimwemwe Chanza

If CI/CD Pipelines Were Human: A Day in the Life

Early Morning: Rise and Shine

Morning Routine: Code Integration

Mid-Morning: Automated Testing

Lunchtime: Monitoring and Optimization

Afternoon: Deployment Prep

Late Afternoon: The Big Deployment

Evening: Post-Deployment Checks

Night: Maintenance and Learning

Conclusion: An Indispensable Ally

Understanding React Custom Hooks: A beginer's guide

What are React Hooks?

Why Custom Hooks?

Anatomy of a Custom Hook

Using the Custom Hook

Rules of Hooks

Conclusion

5 tailwindcss utility classes to up your frontend game

1. space-x and space-y

2. divide-y and space-y

3. group and group-hover

4. hover and scale

Conclusion:

Modern API Development (Part 3) : Add GraphQL

2024's Game-Changers: 2 Unstoppable JavaScript Runtimes Transforming App Development

Comparison

Conclusion

Modern API development(Part 2): Initialize Server

Quick Overview

Initial Server configuration

Modern API Development (Part 1)

Project Setup

Create a Monorepo

Inaugural Correspondence: Google

Inaugural Correspondence: Microsoft

Open Letters To Tech Giants & Ants

Optimizing JavaScript Code: Embrace Async/Await for Clarity

The Power of async/await

Readability and Accessibility

Reducing Callback Hell

Error Handling

Getting Started with async/await

The Process of creating Software Libraries

1. `space-x` and `space-y`

2. `divide-y` and `space-y`

3. `group` and `group-hover`

4. `hover` and `scale`