DEV Community: Emmanuel Os

Think You’re Doing It Right as a Software Engineer?

Emmanuel Os — Sun, 13 Oct 2024 20:08:15 +0000

Article Overview:

2024 is shaping up to be a transformative year for software engineering, with new trends, frameworks, and methodologies challenging developers to rethink what they know. This article will delve into the state of modern software engineering, covering the essential technical skills, overlooked practices, and potential blind spots in three key areas: Web Development, Backend Development, and Mobile Development.

We’ll dissect each field, explore the latest practices, and identify where software engineers often go astray, focusing on the real issues:

Introduction:

The Comfort Zone of Complacency
Imagine a scenario: A senior frontend engineer, Joe, confidently codes a complex React app. He’s been in the industry for a decade and thinks his skills are up-to-date because he follows popular trends. However, his application is suffering from sluggish performance and his team is always firefighting bugs during deployments. Joe wonders: What am I missing? The issue isn’t the code alone—it’s the mindset of being too comfortable and not questioning his approach as the technology landscape evolves.

This article explores the traps engineers like Joe fall into and the technical nuances that separate good from great developers in 2024.

1. Web Development in 2024: Beyond the Frontend Framework Wars

Misuse of Modern Frameworks

Real-life Example: Imagine a developer using React.js for a small static website. React’s initial render times are slower compared to static site generators like Next.js or Astro. The developer may argue, “I know React, so I’ll use React,” but this decision impacts performance and SEO negatively. This misuse of frameworks is a common issue.

Solution: For a content-heavy website, use static site generators like Gatsby or Astro, which can optimize for performance and build static pages that are faster to load.

SSR vs. CSR: Understanding the Trade-offs

Real-life Example: A high-traffic e-commerce site relies heavily on Client-Side Rendering (CSR) and uses React hooks for rendering products. During peak sales, their server experiences high CPU usage, and the pages take too long to load, resulting in a drop in conversion rates.

Solution: Switch to Server-Side Rendering (SSR) using frameworks like Next.js to reduce server load and ensure faster initial load times, leading to better user experiences.

Design Systems and Accessibility

Real-life Example: A popular SaaS application, designed beautifully, struggles to accommodate visually impaired users. The team realized too late that they never accounted for screen reader compatibility or keyboard navigation.

Solution: Implement a design system that prioritizes accessibility. Use tools like Storybook to test component accessibility, ensuring color contrast ratios and ARIA attributes are set correctly.

Common Pitfalls: Overusing Libraries or Ignoring New Tools

Real-life Example: A team uses a heavy date-handling library like Moment.js across the app. In 2024, they realize that smaller, modern libraries like date-fns could achieve the same functionality with less performance overhead.

Solution: Regularly audit your libraries and adopt leaner alternatives like date-fns or day.js. Staying updated with tools like BundlePhobia helps identify the cost of each dependency.

2. Backend Development in 2024: Performance, Scaling, and Cloud-Native Architectures

Microservices Gone Wrong

Real-life Example: A startup, in an attempt to follow the "microservices hype," splits their application into 20 services. Each service communicates with another via HTTP calls, leading to an overly complex network. During scaling, the application becomes almost impossible to manage, and latency issues creep up, delaying feature releases.

Solution: Apply a "right-size" approach. Start small, using a monolithic or modular monolith design, and split services only when necessary. Tools like Dapr or service meshes like Istio can help manage service communication efficiently.

Event-Driven Architectures Misuse

Real-life Example: A logistics company adopts Kafka to build an event-driven architecture. Instead of simplifying processes, they now face a chaotic data flow and debugging has become a nightmare because no one has a clear overview of how events propagate through the system.

Solution: Use event-driven architectures only when a clear benefit, such as real-time analytics or complex event handling, outweighs the added complexity. Focus on building observability using tools like OpenTelemetry for tracing.

Kubernetes Overkill

Real-life Example: A small business with only a few services tries to migrate to Kubernetes, thinking it’s the industry standard. The overhead of managing Kubernetes clusters outweighs its benefits. The team spends more time fighting with Kubernetes configurations than developing new features.

Solution: Use simpler container orchestration solutions like Docker Compose for small-scale applications. Adopt Kubernetes only when scaling and high availability are a must.

Security and Compliance: Adapting to Regulations

Real-life Example: A fintech startup fails a security audit because they didn’t account for new European regulations like PSD2. This mistake costs them a significant partnership.

Solution: Proactively build security into your pipeline using automated compliance tools like Open Policy Agent (OPA) and regularly update systems based on regulatory changes.

Database Decisions: Picking the Right Storage

Real-life Example: A company chooses a NoSQL database like MongoDB for a financial application, only to discover that complex transactions are a nightmare to implement. They end up rewriting significant portions of their backend.

Solution: Understand your data needs. For complex relational data, consider using PostgreSQL or a NewSQL database like CockroachDB. For flexible schema and document storage, MongoDB or FaunaDB might be a better fit.

3. Mobile Development in 2024: Moving Beyond the Basics

State Management Overuse

Real-life Example: A React Native app uses Redux for every component state, leading to convoluted, unmaintainable code. The app suffers from slow state updates and the developer spends more time refactoring than building features.

Solution: Use simpler solutions like the Context API or Zustand for local state. Reserve Redux for managing global app states that need cross-component sharing.

Cross-Platform Confusion

Real-life Example: A team starts with React Native but switches to Flutter mid-project because of performance concerns. They spend months rewriting code, only to realize that the performance bottlenecks were due to poor state management, not the framework.

Solution: Pick a framework based on your team’s strengths and project requirements. Tools like Expo for React Native simplify development, while Flutter excels in scenarios where UI consistency is paramount.

Ignoring Device Capabilities

Real-life Example: An app that performs well on high-end devices fails on mid-range Android phones due to poor memory management and overuse of animations.

Solution: Test your app on a variety of devices, focusing on optimizing memory usage and performance. Tools like Android Profiler and Xcode Instruments can identify bottlenecks early.

4. Trends and Technologies to Watch: What’s Rising and What’s Fading?

AI-Enhanced Development Tools

Real-life Example: A team using GitHub Copilot reduces development time by 20% by automating repetitive coding tasks. However, they also realize that relying too heavily on it introduces subtle bugs due to over-reliance.

Solution: Use AI as an assistant, not a replacement. Always review and refactor code generated by AI tools to ensure quality.

Edge Computing

Real-life Example: A SaaS provider uses Cloudflare Workers to serve dynamic content closer to users, reducing latency by 50%. This move significantly improves their user retention in regions with slower network speeds.

Solution: Adopt edge computing to reduce latency for global users. Explore platforms like Vercel, Cloudflare, or AWS Lambda@Edge for building performant edge applications.

Conclusion: "Do You Really Know What You’re Doing?"

In a field as fast-paced as software engineering, thinking you’ve mastered a technology can be a dangerous mindset. Always be ready to question your approach, stay updated with industry shifts, and embrace the discomfort of constant learning. After all, what worked yesterday might be holding you back today.

Balancing Codes and Mental Wellbeing: A Guide for Software Engineers

Emmanuel Os — Mon, 11 Dec 2023 10:13:24 +0000

In the fast-paced world of software development, where deadlines loom and challenges abound, it's easy to neglect one's mental well-being. While technical expertise is crucial, prioritising mental health is essential for a fulfilling and sustainable career. This article explores the unique challenges software engineers face and offers practical strategies to achieve a balanced and healthy life.

Understanding Mental Wellbeing

Mental wellbeing encompasses more than just the absence of mental health issues. It's a state of positive mental health, characterized by self-awareness, emotional regulation, and the ability to navigate daily life's challenges. For software engineers, a healthy mind translates to:

Boosted Productivity: Mental clarity and focus lead to smarter, not harder work.
Enhanced Creativity: A well-rested mind is fertile ground for innovative solutions.
Improved Relationships: Strong mental health fosters better communication and collaboration.
Adaptability: The ability to roll with the punches is crucial in the ever-evolving tech landscape.
Longevity in Career: Avoiding burnout fuels a longer and happier professional journey.
Positive Role Model: You inspire others to prioritize personal well-being.

Balancing the Scales: Codes vs. Mental Wellbeing

Balancing codes and mental wellbeing means creating a sustainable work-life balance within the demanding context of software engineering. Just as your body needs a balanced diet, your mind needs both work and relaxation. This includes:

Recognising Overwork: Learn to identify when stress levels climb and take proactive steps to de-stress.
Setting Boundaries: Establish clear limits between work and personal time to avoid work-life bleed.
Prioritising Self-Care: Regular exercise, healthy eating, and adequate sleep are non-negotiable.
Open Communication: Discuss workload expectations and challenges with managers and colleagues.
Rewarding Yourself: Celebrate accomplishments and milestones to maintain motivation.
Embracing Flexibility: Adapt to changing demands and be open to new approaches.
Seeking Support: Don't hesitate to seek help from colleagues, friends, family, or a therapist.

Challenges to Mental Wellbeing

Software engineers face unique challenges that can negatively impact their mental health. These can be broadly categorised into:

Work-related: Complex problems, tight deadlines, unrealistic expectations, and lack of control.
Personal: Imposter syndrome, perfectionism, social isolation, and work-life imbalance.
Industry-specific: Competitive environment, lack of recognition, and rapid technological change.

Statistics on Mental Health

62% of software engineers experience anxiety or depression.
69% face stress or burnout at work.
The suicide rate among software engineers is significantly higher than the national average.

Signs You Need a Wellness Check

Frequent anxiety or panic attacks.
Social withdrawal and isolation.
Difficulty concentrating and making decisions.
Physical symptoms of stress.
Suicidal thoughts or attempts.

Strategies for a Balanced Life

By adopting healthy habits and prioritising well-being, software engineers can build a sustainable and fulfilling career. Here are some tips:

Set boundaries and stick to them.
Practice effective time management.
Prioritise self-care, including exercise, healthy eating, and sleep.
Communicate openly with your team and manager.
Reward yourself for achievements.
Embrace flexibility and adaptability.
Seek support from your network or a professional therapist.

Conclusion

Balancing codes and mental well-being is an ongoing journey. By prioritising self-awareness, implementing healthy practices, and seeking support when needed, software engineers can achieve a fulfilling career and a happy life. Remember, you are not alone in this struggle. Many resources are available to help you along the way.

React's Unexpected Offspring: How the Web Gave Birth to React Native

Emmanuel Os — Sat, 09 Dec 2023 16:36:52 +0000

A Tale of Innovation and Unintended Consequences

In the ever-evolving world of technology, unexpected twists and turns can lead to groundbreaking advancements. Such is the story of React Native, a revolutionary framework that emerged from the fertile ground of the web. Unlike its parent, React, which reigns supreme in the realm of web development, React Native unexpectedly ventured into the seemingly distant territory of mobile apps, defying expectations and rewriting the rules of the game.

This captivating journey began with the phenomenal rise of React. Its declarative nature and component-based approach brought order and elegance to the chaotic world of web development. Engineers were captivated by its simplicity and efficiency, leading to its widespread adoption by companies like Facebook and Netflix.

However, amidst this web-centric triumph, a hidden yearning for a mobile experience began to stir. Developers craved the power and flexibility of React on their smartphones and tablets. This yearning, initially dismissed as a mere pipe dream, planted the seeds for a daring experiment - to bridge the gap between web and mobile, to bring React's magic to the world of apps.

Enter React Native, the unforeseen offspring of this ambition. It was a bold move, a daring attempt to transplant the DNA of web development onto the fertile soil of mobile platforms. And it worked. React Native seamlessly integrated with native components, allowing developers to write JavaScript code that could be rendered across iOS and Android platforms.

This unexpected birth was met with both excitement and skepticism. Some saw it as a game-changer, a revolution in mobile app development. Others questioned its viability, highlighting the potential challenges of adapting a web framework to the demands of native platforms.

But React Native defied the naysayers. Its intuitive API, combined with the familiar React syntax, made it a breeze for web developers to build mobile apps. The rapid iteration cycle, a hallmark of React, found its way onto mobile, allowing developers to experiment and innovate with newfound speed and efficiency.

Today, React Native stands tall as a testament to the unpredictable nature of innovation. It has empowered developers to create a new generation of mobile apps, apps that are not only beautiful and engaging but also built on a foundation of speed and efficiency.

As we look towards the future, the story of React Native serves as an inspiration. It reminds us that sometimes the most unexpected ideas can lead to the most groundbreaking advancements. It encourages us to embrace the unknown, to experiment and explore, for in the fertile ground of uncertainty, the seeds of revolutionary innovation may lie hidden, waiting to be discovered.

Tech is not for me, I am a fraud: A Journey of Growth and Overcoming Imposter Syndrome

Emmanuel Os — Tue, 05 Dec 2023 19:11:12 +0000

In 2019, I embarked on a journey into the world of tech, fueled by excitement and ambition. I devoured tutorials, mimicking code and building basic projects. Looking back, it was a charade, a performance of competence built on shaky foundations. I convinced myself I was good, even landing a job as a Frontend developer using Angular. But the truth soon came crashing down. I was lost, overwhelmed, and ultimately, a failure.

The weight of my imposter syndrome crushed me. "Tech is not for me," I whispered, the words echoing in the hollow chamber of my self-doubt. Shame and fear became my companions, leading me to a period of stagnation and disillusionment.

But amidst the darkness, a spark of hope flickered. In 2021, I decided to rebuild, not just my skills, but myself. I started from scratch, embracing the fundamentals with humility. I built small projects, honing my craft and rediscovering the joy of creation. I found solace in online communities and learning platforms, connecting with others who shared my struggles and triumphs.

The path wasn't easy. There were countless setbacks, moments of frustration, and nights spent battling self-doubt. But with each challenge, I grew stronger, my resilience forged in the fires of adversity. I began taking on small freelance projects, applying my knowledge to real-world problems.

In 2022, I enrolled in a software engineering school, surrounding myself with fellow aspiring developers and mentors who believed in me. This environment fostered my growth, pushing me beyond my comfort zone and helping me unlock my potential. My hard work and dedication paid off, leading to opportunities I never dreamed possible.

Today, I stand as a Software Engineer at C80 Limited, a testament to the power of perseverance and self-belief. My journey has been a rollercoaster of emotions, a dance between hope and despair, success and failure. But through it all, I have learned that the most important battles are fought within, against the demons of self-doubt and fear.

The tech industry is not for the faint of heart. It demands constant learning, adaptation, and a relentless pursuit of excellence. But for those who dare to dream and have the courage to face their fears, the rewards are immeasurable.

My journey is far from over. I continue to explore new horizons, venturing into the realm of mobile development and embracing the challenge of learning a new backend language, GoLang. The future beckons, and I face it with open arms, ready to learn, grow, and contribute to the ever-evolving world of technology.

To those struggling with similar doubts, I say this: you are not alone. Imposter syndrome is a common enemy, but it can be overcome. Embrace the challenges, learn from your mistakes, and never stop believing in yourself. Your journey may be different, but the destination – a fulfilling career and a life filled with purpose – is within your reach. So, take that first step, keep learning, keep growing, and never give up on your dream.

A Journey from JavaScript to Go: Exploring Data Types

Emmanuel Os — Fri, 24 Nov 2023 14:22:06 +0000

Introduction:

JavaScript developers stepping into the world of Go (Golang) often find themselves in a realm that values simplicity, efficiency, and strong static typing. While JavaScript is dynamically typed, Go's static typing offers a different approach to handling data. In this article, we'll explore how a JavaScript developer can seamlessly transition to Go by comparing and contrasting the data types in both languages.

1. Numeric Types:

JavaScript's numeric types include the generic number type, whereas Go provides a more granular approach.

In JavaScript:

let jsInteger = 42;
let jsFloat = 3.14;

In Go:

var goInteger int = 42
var goFloat float64 = 3.14

In Go, specifying the exact size of numeric types ensures predictability and memory efficiency.

2. String Type:

Strings are fundamental in both languages, but Go's approach is more explicit.

In JavaScript:

let jsString = "Hello, World!";

In Go:

var goString string = "Hello, World!"

Go's strict typing requires explicitly stating the variable type, promoting clarity in code.

3. Boolean Type:

Booleans represent truth values, and here, the languages align closely.

In JavaScript:

let jsBoolean = true;

In Go:

var goBoolean bool = true

The simplicity of boolean handling remains consistent, emphasizing readability.

4. Derived Types:

Both languages support arrays and slices, but Go's static arrays bring a fixed-size advantage.

In JavaScript:

let jsArray = [1, 2, 3];
let jsSlice = [4, 5, 6];

In Go:

var goArray [3]int = [3]int{1, 2, 3}
var goSlice []int = []int{4, 5, 6}

Go's arrays have a fixed size, which aids in performance optimization, while slices offer dynamic sizing.

5. Structs and Objects:

JavaScript objects and Go structs both group variables, but Go's structs are explicitly defined.

In JavaScript:

let jsObject = { name: "John", age: 30 };

In Go:

type GoStruct struct {
    Name string
    Age  int
}

var goInstance GoStruct
goInstance.Name = "John"
goInstance.Age = 30

Go's structs enforce a clear structure, promoting maintainability.

6. Interfaces:

JavaScript is prototype-based, while Go embraces interfaces for defining method sets.

In JavaScript:

// JavaScript uses prototype-based inheritance
function JSObject() {
  this.method = function() {
    console.log("Method");
  };
}

In Go:

// Go uses interfaces to define method sets
type GoInterface interface {
    Method()
}

type GoType struct{}

func (g GoType) Method() {
    fmt.Println("Method")
}

Go's interface approach ensures explicit method declaration and implementation.

Conclusion:

Transitioning from JavaScript to Go involves embracing a statically typed, explicitly defined world of data types. While the syntax may differ, the fundamental concepts align, making the journey smooth for developers. By understanding and applying these data type comparisons, JavaScript developers can harness the power and efficiency that Go offers, creating robust and scalable applications. The key lies in appreciating the strengths of each language and leveraging them effectively in code.

Comparing Currency Formatting in JavaScript and Go: A Case Study

Emmanuel Os — Fri, 24 Nov 2023 13:28:52 +0000

In the world of web development, presenting financial information in a clear and standardized way is crucial for a positive user experience. Currency formatting is a common task, and different programming languages offer various approaches to achieve this. In this article, we'll compare the implementation of a currency formatting function in JavaScript and Go, using the same case study.

The Case Study Function

Let's consider a simple currency formatting function named formatPrice. The function takes a numeric value and returns a formatted string representing the currency. We'll look at the JavaScript version implemented using TypeScript and its equivalent Go implementation.

JavaScript (TypeScript) Implementation

const formatPrice = (amount: number | null | undefined): string => {
  const _amount = amount ?? 0;
  return new Intl.NumberFormat("en-NG", {
    style: "currency",
    currency: "NGN",
  }).format(_amount);
};

export default formatPrice;

Go Implementation

package main

import (
    "fmt"
    "text/template"
)

func FormatPrice(amount float64) string {
  const currencyTemplate = "₦{{printf \"%.2f\" .}}"
  tmpl, err := template.New("currency").Parse(currencyTemplate)
  if err != nil {
    panic(err)
  }
  var result string
  err = tmpl.Execute(&result, amount)
  if err != nil {
    panic(err)
  }
  return result
}

func main() {
  price := 1500.0
  formattedPrice := FormatPrice(price)
  fmt.Println(formattedPrice) // Output: ₦1,500.00
}

Key Differences and Considerations

1. Language Syntax and Features

JavaScript (TypeScript):
- Uses TypeScript, a superset of JavaScript with static typing.
- Utilizes the nullish coalescing operator (??) for default value assignment.
- Leverages the Internationalization API for number formatting.
Go:
- A statically-typed language with a different syntax compared to JavaScript.
- Provides a simpler default value assignment without the need for the nullish coalescing operator.
- Uses the text/template package for string formatting.

2. Error Handling

JavaScript (TypeScript):
- Error handling is implicit in the use of the Internationalization API.
- The function returns a string, and any errors in formatting are handled internally.
Go:
- Explicit error handling is required using the err variable.
- In the provided example, errors are handled by panicking, but in production code, a more robust error-handling strategy should be implemented.

3. Ecosystem and Use Cases

JavaScript (TypeScript):
- Widely used for web development, especially on the client side.
- Extensive ecosystem with various libraries and frameworks.
Go:
- Frequently used for backend development and system-level programming.
- Known for its simplicity, performance, and concurrency support.

4. Use of Libraries

JavaScript (TypeScript):
- Utilizes built-in features like the Internationalization API for number formatting.
- TypeScript brings static typing to the JavaScript ecosystem.
Go:
- Uses the text/template package from the standard library for string formatting.
- Simplicity is emphasized in the standard library, with a focus on minimalism.

Conclusion

Both JavaScript (TypeScript) and Go provide effective solutions for currency formatting, but they have different strengths and use cases. JavaScript, with its extensive ecosystem and focus on web development, incorporates features like the Internationalization API for this task. On the other hand, Go, with its simplicity and efficiency, uses the standard library's text/template package for a straightforward and effective approach.

The choice between these languages depends on the specific requirements of your project, the development environment, and your team's expertise. Whether you're building a dynamic web application or a robust backend service, understanding the strengths and characteristics of each language will help you make an informed decision.

Creating an NPM Package: From Company Utility to Public Module with 555 Weekly Downloads

Emmanuel Os — Tue, 01 Aug 2023 15:56:43 +0000

Introduction

In the fast-paced world of software development, converting a utility that was initially used internally in a company project into a public NPM package can be a strategic decision. By doing so, not only can you streamline the codebase of your projects, but you also contribute to the open-source community while gaining visibility and traction for your own company. In this article, we will walk through the step-by-step process of converting a "formatPrice" utility used in our fintech app called re:current into an NPM package, resulting in an impressive 555 weekly downloads.

1. Understanding the Utility

Our fintech app, re:current, focused on real estate, requires the ability to convert numerical amounts to Nigerian Naira (₦). Initially, we had a simple function called formatPrice, embedded within our codebase. The function would take a numerical input and return the corresponding value in Nigerian Naira, using the correct currency format.

import { formatPrice } from 'formatnumber-to-naira';

const price = 1234567.89;
const formattedPrice = formatPrice(price);
console.log(formattedPrice); // Output: "₦1,234,567.89"

2. Code Isolation and Unit Tests

Before we convert the utility into an NPM package, it is essential to isolate the utility function from the app's codebase and write comprehensive unit tests to ensure its correctness and robustness. The isolation step will help prevent any unintended dependencies on other parts of the app and ensure the utility remains self-contained.

3. Initializing NPM Package

Now, let's get started with creating our NPM package. First, we need to initialize the package with the npm init command. This will generate a package.json file that stores metadata about our package, including its name, version, author, and dependencies.

npm init

Follow the prompts and fill in the required information to create the package.json file.

4. Structuring the Package

Next, we need to structure our NPM package appropriately. A typical structure includes a "src" folder for the source code and a "test" folder for the unit tests. Additionally, we'll need to create an index.js file in the root of the package that will serve as the entry point for our module.

The directory structure should look like this:

- package.json
- /src
  - formatPrice.ts
  - index.ts
- /test
  - formatPrice.test.ts
- tsconfig.json

5. Implementing the Package Logic

Move the isolated formatPrice function into the src/formatPrice.js file. Update any references and dependencies within the function to make it self-sufficient. Ensure the function remains compatible with various input scenarios and handles edge cases effectively.

6. Writing Comprehensive Unit Tests

In the test/formatPrice.test.js file, write comprehensive unit tests using a testing framework such as Jest. These tests should cover various input cases and verify that the function produces the correct output for each scenario. Proper testing is crucial to ensure the utility's reliability and maintainability in the long run.

7. Exporting the Function

In the index.js file, export the formatPrice function from the src/formatPrice.js module using CommonJS or ES6 module syntax. This will make the function accessible when the package is installed in other projects.

8. Publishing to NPM

Once the package has been implemented and tested thoroughly, it's time to publish it to the NPM registry. Use the following command to publish the package:

npm publish

Note: Before publishing, ensure that you have an NPM account and are logged in using npm login.

9. Updating and Maintaining the Package

After publishing the package, it becomes available for public use. Users from all around the world can now install and incorporate it into their projects using npm install. It's essential to monitor the package for issues and updates, respond to user feedback, and address any bug reports promptly to maintain a healthy package ecosystem.

Conclusion

In this article, we discussed the process of converting an internal utility used in our fintech app re:current into a public NPM package. By releasing our "formatPrice" utility as an NPM package, we not only streamlined our app's codebase but also contributed to the open-source community. We hope this technical and detailed guide inspires other developers to share their useful utilities with the world, enabling innovation and collaboration in the development community.

Do well to give us a star on our GitHub repository and check the NPM package using the links below:

GitHub Repository
NPM Package

Happy coding!

Building a Github Portfolio

Emmanuel Os — Tue, 10 Jan 2023 19:48:37 +0000

Building a GitHub portfolio using ReactJS is a great way to showcase your skills as a developer and stand out. In this article, we will walk through the steps of building a GitHub portfolio using React.

Create a GitHub account
The first step in building a GitHub portfolio is to create a GitHub account.
Create a new repository
Once you have a GitHub account, you can create a new repository to store your portfolio. A repository is a place where you can store your code and collaborate with others on a project. To create a new repository, go to your GitHub profile and click the "New" button. Give your repository a name and description, and choose whether it will be public or private.
Set up the project
Once you have created your repository, you will need to set up the project. To do this, you will need to initialize the project with Node.js and install the necessary dependencies. You can do this by running the following commands in your terminal:

npx create-react-app github-app
cd github-app
npm start

This will create a new React project in a folder called "github-app", and install the necessary dependencies.

we need to install some more dependencies.

npm install react-router-dom
npm install react-icons
npm install react-error-boundary

Now we need to use the react-router-dom to create routes in the react app, so we can switch from one page to another, using the react-router-dom link.

we will open the scr folder and create a folder called pages inside the src. That's where we will create the pages components we will use in our react app.

Home.jsx
ErrorPage.jsx
NotFound.jsx
Repos.jsx
Repo.jsx These are the pages components we will use in building out our github portfolio app.

inside src we will create another folder called components. inside it we will create some little components for our app.
Navbar.jsx
Footer.jsx
HomeRepoItem.jsx
Pagination.jsx
RepoItems.jsx
SafeComponent.jsx
Spinner.jsx
UserProfile.jsx
Phew!!, Lot of components created.
we will open the App.js inside the src. That's where we are going to implement our react-router-dom, because is the parent component.

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import "./App.css";

function App() {
  return (
    <>
      <div className="App">
        <Router>
          <Navbar />
            <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/repo-list/*" element={<Repos />} />
             <Route path="/error-boundary-page" element={<ErrorPage />} />
             <Route path="/not-found" element={<NotFound />} />
             <Route path="*" element={<NotFound />} />
            </Routes>
         </Router>
      </div>
      <Footer />
    </>
  );
}

export default App;

The css file for this project is inside the index.css
Inside our Navbar.js we will write these codes to create a navbar we will use in our app.

import { useState } from "react";
import { NavLink, useLocation } from "react-router-dom";
import { FaBug, FaUser, FaAtom, FaHome } from "react-icons/fa";

function Navbar() {
  const [navOpen, setNavOpen] = useState(false);

  const location = useLocation();
  const handleNavOpen = () => {
    setNavOpen((prev) => !prev);
  };

  return (
    <nav className={navOpen ? "nav open" : "nav close"}>
      <header onClick={handleNavOpen}>
        <FaAtom />
      </header>
      <ul>
        <li className={location.pathname === "/" ? "link-hover" : "none"}>
          <NavLink to="/">
            <span className="icon">
              <FaHome />
            </span>
            <span className="path">User</span>
          </NavLink>
        </li>
        <li
          className={location.pathname === "/repo-list" ? "link-hover" : "none"}
        >
          <NavLink to="/repo-list">
            <span className="icon">
              <FaUser />
            </span>
            <span className="path">Repos</span>
          </NavLink>
        </li>
        <li
          className={
            location.pathname === "/error-boundary-page" ? "link-hover" : "none"
          }
        >
          <NavLink to="/error-boundary-page">
            <span className="icon">
              <FaBug />
            </span>
            <span className="path">Error</span>
          </NavLink>
        </li>
      </ul>
    </nav>
  );
}

export default Navbar;

Inside our Footer.jsx we will write these codes to create a footer we will use in our app

import React from "react";

function Footer() {
  return (
    <footer>
      <div className="footer-container">
        <p>© 2022 by "Put your name or anything"</p>
      </div>
    </footer>
  );
}

export default Footer;

Inside our Spinner.jsx we will write these codes to create a spinner we will use in our app

import React from "react";
import { FaSpinner } from "react-icons/fa";

function Spinner() {
  return (
    <div>
      <div className="spinner-container">
        <FaSpinner className="spinner" />
      </div>
    </div>
  );
}

export default Spinner;

we will create a context folder inside the src folder. we will use react context because it will be an easy way to manage state globally. It can be used together with the useState Hook to share state between deeply nested components more easily than with useState alone.
inside context folder we will these files.
UserContext.js
RepoContext.js
Inside our UserContext.js we will write these codes to handle our github user.

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

const UserContext = createContext();

export const UserProvider = ({ children }) => {
  const [user, setUser] = useState({});
  const [loading, setLoading] = useState(true);

  const url = process.env.REACT_APP_GITHUB_URL;
  const token = process.env.REACT_APP_GITHUB_TOKEN;

  useEffect(() => {
    fetchUser();
  }, []);

  // fetching the user
  const fetchUser = async () => {
    const response = await fetch(`${url}/users/josephe44`, {
      headers: {
        Authorization: `token ${token}`,
      },
    });
    const data = await response.json();
    setUser(data);
    setLoading(false);
  };

  return (
    <UserContext.Provider value={{ user, loading }}>
      {children}
    </UserContext.Provider>
  );
};

export default UserContext;

Inside our RepoContext.js we will write these codes to handle our github repo.

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

const RepoContext = createContext();

export const RepoProvider = ({ children }) => {
  const [loading, setLoading] = useState(true);
  const [repos, setRepos] = useState([]);
  const [repo, setRepo] = useState({});
  const [currentPage, setCurrentPage] = useState(1);
  const [repoPerPage] = useState(9);

  const url = process.env.REACT_APP_GITHUB_URL;
  const token = process.env.REACT_APP_GITHUB_TOKEN;

  useEffect(() => {
    fetchRepos();
  }, []);

  //   fetch all repos
  const fetchRepos = async () => {
    const params = new URLSearchParams({
      sort: "created",
      per_page: 36,
    });
    const response = await fetch(`${url}/users/josephe44/repos?${params}`, {
      headers: {
        Authorization: `token ${token}`,
      },
    });
    const data = await response.json();
    setRepos(data);
    setLoading(false);
  };

  //   fetch a repo by the name
  const fetchRepo = async (repoName) => {
    const response = await fetch(`${url}/repos/josephe44/${repoName}`, {
      headers: {
        Authorization: `token ${token}`,
      },
    });
    const data = await response.json();
    setRepo(data);
    setLoading(false);
  };

  // Pagination logic
  const indexOfLastNumber = currentPage * repoPerPage;
  const indexOfFirstNumber = indexOfLastNumber - repoPerPage;
  const currentRepo = repos.slice(indexOfFirstNumber, indexOfLastNumber);
  const numberOfPages = Math.ceil(repos.length / repoPerPage);

  return (
    <RepoContext.Provider
      value={{
        repo,
        repos,
        loading,
        currentRepo,
        numberOfPages,
        currentPage,
        setCurrentPage,
        fetchRepo,
      }}
    >
      {children}
    </RepoContext.Provider>
  );
};

export default RepoContext;

Now we have our logic been written inside the context, we can now use it inside any component. But before that we need to wrap the context with all the pages that was created inside the parent component App.js

import React from "react";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import { Navbar, Footer } from "./components";
import { Home, ErrorPage, NotFound, Repos } from "./pages";
import { RepoProvider } from "./context/RepoContext";
import { UserProvider } from "./context/UserContext";
import "./App.css";

function App() {
  return (
    <>
      <RepoProvider>
        <UserProvider>
          <div className="App">
            <Router>
              <Navbar />
              <Routes>
                <Route path="/" element={<Home />} />
                <Route path="/repo-list/*" element={<Repos />} />
                <Route path="/error-boundary-page" element={<ErrorPage />} />
                <Route path="/not-found" element={<NotFound />} />
                <Route path="*" element={<NotFound />} />
              </Routes>
            </Router>
          </div>
          <Footer />
        </UserProvider>
      </RepoProvider>
    </>
  );
}

export default App;

Now we will be building out all the pages we have listed above, starting from Home.jsx.
Inside the Home.jsx we have two component to build out, which we will use.

UserProfile.jsx

import React, { useContext } from "react";
import { Link } from "react-router-dom";
import {
  FaFileAlt,
  FaMapMarkerAlt,
  FaPencilAlt,
  FaUsers,
  FaUserFriends,
  FaRegEnvelope,
} from "react-icons/fa";
import UserContext from "../context/users/UserContext";

function UserProfile() {
  const { user } = useContext(UserContext);
  return (
    <>
      <section className="user-container">
        <div className="user">
          <div className="img-card">
            <img src={user.avatar_url} alt="profile-img" />
          </div>
          <div className="user-details">
            <h2>{user.name}</h2>
            <p className="username">{user.login}</p>
            <p className="user-bio">{user.bio}</p>
            <section className="social-container">
              <div className="social-card">
                <div>
                  <FaUsers />
                </div>
                <p>{user.followers}</p>
              </div>

              <div className="social-card">
                <div>
                  <FaFileAlt />
                </div>
                <p>{user.public_repos}</p>
              </div>
              <div className="social-card">
                <div>
                  <FaUserFriends />
                </div>
                <p>{user.following}</p>
              </div>
              <div className="social-card">
                <div>
                  <FaPencilAlt />
                </div>
                <p>{user.public_gists}</p>
              </div>
            </section>
            <div className="contact">
              <div className="social-flex">
                <div className="location">
                  <p>
                    <FaMapMarkerAlt />
                  </p>
                  <p>
                    <span> {user.location}</span>
                  </p>
                </div>
              </div>
              <div className="email">
                <p>
                  <FaRegEnvelope />
                </p>
                <p>
                  <span>{user.email}</span>
                </p>
              </div>

              <div className="group-btn">
                <div className="portfolio-btn">
                  <button>
                    <a target="_blank" rel="noreferrer" href={user.html_url}>
                      <span>View Profile</span>
                    </a>
                  </button>
                </div>
                <div className="portfolio-btn">
                  <button>
                    <Link to="repo-list">
                      <span>View More Repo</span>
                    </Link>
                  </button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </>
  );
}

export default UserProfile;

HomeRepoItem.jsx

import React, { useContext } from "react";
import RepoContext from "../context/repos/RepoContext";

function HomeRepoItem() {
  const { currentRepo } = useContext(RepoContext);

  const repos = currentRepo.slice(0, 6);
  return (
    <div>
      <div className="repo-container">
        {repos.map((repo) => (
          <div key={repo.id}>
            <div className="repo-card">
              <div className="repo-flex">
                <div className="repo-header">
                  <h4>{repo.name}</h4>
                  <div className="repo-avatar">
                    <img src={repo.owner.avatar_url} alt="avatar" />
                  </div>
                </div>
                <p className="desc">{repo.description}</p>

                <div className="repo-desc">
                  <p>{repo.owner.login}</p>
                  <p>{repo.language ? repo.language : ""}</p>
                </div>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

export default HomeRepoItem;

So inside the Home.jsx we will import it and use those components.

import React, { useContext } from "react";
import { UserProfile, Spinner, HomeRepoItem } from "../components";
import UserContext from "../context/users/UserContext";

function Home() {
  const { loading } = useContext(UserContext);

  if (loading) {
    return <Spinner />;
  }

  return (
    <div className="home">
      <UserProfile />
      <HomeRepoItem />
    </div>
  );
}

export default Home;

Now we will be build out the Repos page we listed above.
Inside the Repos.jsx we have two component to build out, which we will use.

RepoItems.jsx

import React, { useContext } from "react";
import { Link } from "react-router-dom";
import RepoContext from "../context/repos/RepoContext";

function RepoItems() {
  const { currentRepo } = useContext(RepoContext);
  const repos = currentRepo;

  return (
    <div className="repo-bottom">
      <div className="repo-container">
        {repos.map((repo) => (
          <div key={repo.id}>
            <Link to={`repo/${repo.name}`}>
              <div className="repo-card">
                <div className="repo-flex">
                  <div className="repo-header">
                    <h4>{repo.name}</h4>
                    <div className="repo-avatar">
                      <img src={repo.owner.avatar_url} alt="avatar" />
                    </div>
                  </div>
                  <p className="desc">{repo.description}</p>

                  <div className="repo-desc">
                    <p>{repo.owner.login}</p>
                    <p>{repo.language ? repo.language : ""}</p>
                  </div>
                </div>
              </div>
            </Link>
          </div>
        ))}
      </div>
    </div>
  );
}

Pagination.jsx

import React, { useState, useEffect, useContext } from "react";
import { FaAngleDoubleLeft, FaAngleDoubleRight } from "react-icons/fa";
import RepoContext from "../context/repos/RepoContext";

function Pagination() {
  const { numberOfPages, currentPage, setCurrentPage } =
    useContext(RepoContext);
  const [disabledPrev, setDisabledPrev] = useState(true);
  const [disabledNext, setDisabledNext] = useState(true);

  const pageNumbers = [...Array(numberOfPages + 1).keys()].slice(1);

  const nextPage = () => {
    if (currentPage !== numberOfPages) setCurrentPage(currentPage + 1);
  };
  const prevPage = () => {
    if (currentPage !== 1) setCurrentPage(currentPage - 1);
  };

  useEffect(() => {
    if (currentPage > 1) {
      setDisabledPrev(false);
    } else {
      setDisabledPrev(true);
    }

    if (currentPage === numberOfPages) {
      setDisabledNext(true);
    } else {
      setDisabledNext(false);
    }
  }, [currentPage, numberOfPages]);
  return (
    <>
      <section>
        <ul className="pagination">
          <li>
            <button
              className={disabledPrev ? "disable-btn" : "page-link"}
              onClick={prevPage}
            >
              <FaAngleDoubleLeft />
            </button>
          </li>
          {pageNumbers.map((pgNumber) => (
            <li key={pgNumber}>
              <button
                onClick={() => setCurrentPage(pgNumber)}
                className="page-link"
              >
                {pgNumber}
              </button>
            </li>
          ))}
          <li>
            <button
              className={disabledNext ? "disable-btn" : "page-link"}
              onClick={nextPage}
            >
              <FaAngleDoubleRight />
            </button>
          </li>
        </ul>
      </section>
    </>
  );
}

export default Pagination;

So inside the Repos.jsx we will import it and use those components.

import React, { useContext } from "react";
import { useLocation, Routes, Route } from "react-router-dom";
import { RepoItems, Spinner, Pagination } from "../components";
import RepoContext from "../context/repos/RepoContext";
import Repo from "./Repo";

function Repos() {
  const { loading } = useContext(RepoContext);

  const location = useLocation();

  if (loading) {
    return <Spinner />;
  }

  return (
    <>
      <div className="home">
        {location.pathname === "/repo-list" ? (
          <>
            <RepoItems />
            <Pagination />
          </>
        ) : (
          <Routes>
            <Route path="repo/:repoName" element={<Repo />} />
          </Routes>
        )}
      </div>
    </>
  );
}

export default Repos;

Now we will be build out the Repo page we listed above.

Repo.jsx

import { useEffect, useContext } from "react";
import { Link, useParams } from "react-router-dom";
import { FaAngleDoubleLeft } from "react-icons/fa";
import { Spinner } from "../components";
import RepoContext from "../context/repos/RepoContext";

function Repo() {
  const { loading, repo, fetchRepo } = useContext(RepoContext);
  const { repoName } = useParams();

  useEffect(() => {
    fetchRepo(repoName);
  }, [repoName]);

  if (loading) return <Spinner />;

  return (
    <div className="eachRepo-container">
      <div>
        <Link to="/repo-list">
          <button className="back-btn">
            <FaAngleDoubleLeft />
            <span> Back</span>
          </button>
        </Link>
      </div>
      <div className="eachRepo-card">
        <div className="eachRepo-item">
          <div>
            <h3>{repo.name}</h3>
            <p>{repo.description}</p>
            <div className="eachRepo-visit">
              <button className="visit-button">
                <a target="_blank" rel="noreferrer" href={repo.html_url}>
                  view on github
                </a>
              </button>
            </div>
          </div>
          <div className="banner-grid">
            <p className="eachRepo-banner">Fork: {repo.forks_count}</p>
            <p className="eachRepo-banner">
              Language: {repo.language ? repo.language : "none"}
            </p>
            <p className="eachRepo-banner">File Size: {repo.size}kb</p>
            <p className="eachRepo-banner">Visibility : {repo.visibility}</p>
            <p className="eachRepo-banner">Watchers : {repo.watchers}</p>
            <p className="eachRepo-banner">Open Issues : {repo.open_issues}</p>
            <p className="eachRepo-banner">
              Network Count : {repo?.network_count}
            </p>
            {repo?.parent?.default_branch ? (
              <p className="eachRepo-banner">
                Branch : {repo?.parent.default_branch}
              </p>
            ) : null}

            {repo?.license?.name ? (
              <p className="eachRepo-banner">License: {repo.license.name}</p>
            ) : null}
          </div>
        </div>
      </div>
    </div>
  );
}

export default Repo;

Now we will be build out the NotFound page we listed above.

NotFound.jsx

import React from "react";
import { Link } from "react-router-dom";
import { FaReply, FaRegTired } from "react-icons/fa";

function NotFound() {
  return (
    <div className="not-found">
      <h1>404</h1>
      <div className="not-found-icon">
        <div>
          <FaRegTired />
        </div>
        <p>Page Not Found</p>
      </div>
      <button className="not-found-btn">
        <Link to="/">
          <div>
            <FaReply />
          </div>
          <span>Go Back Home</span>
        </Link>
      </button>
    </div>
  );
}

export default NotFound;

Inside the ErrorPage.jsx we have one component to build out, which we will use.

SafeComponent

function SafeComponent({ error }) {
  return (
    <div role="alert">
      <p>Something went wrong:</p>
      <pre style={{ color: "red" }}>{error.message}</pre>
    </div>
  );
}

export default SafeComponent;

Now we will be build out the ErrorPage page we listed above.

ErrorPage.jsx

import React from "react";
import { ErrorBoundary } from "react-error-boundary";
import { SafeComponent } from "../components";

function ErrorPage() {
  return (
    <div className="error">
      <h1>Implementation of ErrorBoundary</h1>
      <ErrorBoundary FallbackComponent={SafeComponent}>
        <Error />
      </ErrorBoundary>
    </div>
  );
}

function Error() {
  throw new Error("Error");
}

export default ErrorPage;

Download Any YouTube Video With 5 Lines Of Code In Python

Emmanuel Os — Fri, 14 Jan 2022 15:54:13 +0000

So am going to teach you how to download any YouTube video you like with 5 lines of python. seems impossible right? Don't worry it possible and achieving anything in tech is Possible.

Let Start Coding

There are few steps for us to take in achieving this.

First open your code editor(VScode or Atom)

create a file and name it anything you like app.py with py as your extension.
Then you need to install pytube by running this code in your terminal.

pip install pytube

Once the installation is done, then we need to import YouTube from pytube.

from pytube import YouTube

Then we need to create and call the path in which the video will be downloaded.

DOWNLOAD_FOLDER = "./"

for me I use the current folder as my DOWNLOAD_FOLDER Path.

Then we need to get the link of the video we want to download from YouTube Site.

video_url = "https://www.youtube.com/watch?v=x7X9w_GIm1s"

The video_url is a YouTube video Python in 100 Seconds

Then we need to create a youtube object and assign the video_url to it.

video_obj = YouTube(video_url)

Then we need to create a media stream and know there are streaming technique adopted by YouTube.

stream = video_obj.streams.get_highest_resolution()

Then we need to use the download method to save the file

stream.download(DOWNLOAD_FOLDER)

Your Code Should Be Like This

from pytube import YouTube
DOWNLOAD_FOLDER = "./"
video_url = "https://www.youtube.com/watch?v=x7X9w_GIm1s"
video_obj = YouTube(video_url)
stream = video_obj.streams.get_highest_resolution()
stream.download(DOWNLOAD_FOLDER)

Then one more thing, you could add a print statement to know when is done, by writing this one line of code.

print("Download Complete")

Then click the Run button on your code editor and watch how your video get downloaded into your folder. Hurray you made it!!!

Want to read the pytube doc, here is the link pytube doc

Thanks for reading.
follow me on twitter
@Eworld_Tech

Scope in JavaScript(var, let, const)

Emmanuel Os — Fri, 17 Dec 2021 15:27:22 +0000

Scope in JavaScript is divided into the Block Scope, Function Scope and the Global Scope.

Starting with the Global Scope

// Global scope
var a = 1;
let b = 2
const c = 3
console.log(`Global Scope ${a} ${b} ${c}`)

This is a global scope and everything is fine, if you console.log the value

Function Scope

// Global scope
var a = 1
let b = 2
const c = 3

//Function scope
function num() {
  var a = 10
  let b = 22
  const c = 5
  console.log(`Function Scope ${a} ${b} ${c}`)
}
num()

console.log(`Global Scope ${a} ${b} ${c}`)

So inside the function scope we get our 10, 22, 5 while in the global scope we still get our 1, 2, 3, because they are different variables in different scope.

Var is a Function scope It means they are only available inside the function they’re created in, or if not created inside a function, they are ‘globally scoped..

var a = 1;
let b = 2
const c = 3

for(var a = 0; a < 10; a++) {
  console.log(a)
}
console.log(`Global Scope ${a} ${b} ${c}`)

The value of var a = 10 in the global scope.
The var a in the loop actually changes the value var a in the global scope which is not good, that's the reason let and const was created.

NOTE: var is kind of wired, that's one of the thing that lot of people didn't like about JavaScript. it causes security risks and it can cause confusion if you have some variables in the global scope.

Block Scope

// Global scope
var a = 1
let b = 2
const c = 3

// Block Scope
if(true) {
  var a = 6
  let b = 7
  const c = 10
  console.log(`Block Scope ${a} ${b} ${c}`)
}
console.log(`Global Scope ${a} ${b} ${c}`)

What do you think the global scope var a result will be?

The result will be var a = 6 because after declaring the var a = 1 on the global scope it was change in the block scope.
Notice the let and const didn't change, in the global scope they retain their values and also in the block scope.

Benefit of let & const

They aren't scoped to the function, they are scoped to the block.
What is the block? A block is a set of opening and closing curly brackets.

Points to Take

var is function scope.
let and const are block scope.
Function scope is within the function.
Block scope is within curly brackets.

Building a Countdown App

Emmanuel Os — Sat, 17 Apr 2021 20:10:25 +0000

Building the count app with JavaScript, but before that, I will highlight the steps we will be taking.

write our html code
write our css for styling
write our JavaScript, to manipulate the data and give us a countdown App.

HTML CODE

  <h1>Countdown to 2022</h1>
  <div class="countdown-container">
    <div class="countdown-value days-c">
      <p class="big-text" id="days">0</p>
      <span>days</span>
    </div>
    <div class="countdown-value hour-c">
      <p class="big-text" id="hour">0</p>
      <span>hours</span>
    </div>
    <div class="countdown-value minute-c">
      <p class="big-text" id="mins">0</p>
      <span>mins</span>
    </div>
    <div class="countdown-value seconds-c">
      <p class="big-text" id="seconds">0</p>
      <span>seconds</span>
    </div>
  </div>

from the above code, you can see, how we have written our html code. Now we move to our css for styling.

CSS CODE

* {
  box-sizing: border-box;
}

body {
  background-color: tomato;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  font-family: Georgia, 'Times New Roman', Times, serif;
  margin: 0;
  color: #f4f4f4;
}

h1 {
  font-weight: normal;
  font-size: 4rem;
  margin-top: 5rem;
  text-transform: uppercase;
  font-family: sans-serif;
}

.countdown-container {
  display: flex;
}

.big-text {
  font-weight: bold;
  font-size: 6rem;
  line-height: 1;
  margin: 0 2rem;
}

.countdown-value {
  text-align: center;
}
.countdown-value span {
  font-size: 1.3rem;
}

Now we will move to JavaScript, so we manipulate the data in the html code and make it dynamic.

JavaScript
we will get all the html element using there Id.

const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hour');
const minsEl = document.getElementById('mins');
const secondsEl = document.getElementById('seconds');

then we will choose the date we want to countdown too

const countdown = "1 Jan 2022";

then write our function, where we will bring in our current date and the date will want to countdown too. Do some maths(remember JavaScript have numbers and math object.

function countdownApp() {
  const countdownDate = new Date(countdown);
  const currentDate = new Date();

  const totalseconds = (countdownDate - currentDate) / 1000;

  const days = Math.floor(totalseconds / 3600 / 24);
  const hour = Math.floor(totalseconds / 3600) % 24;
  const mins = Math.floor(totalseconds / 60) %60;
  const seconds = Math.floor(totalseconds) % 60;

  daysEl.innerHTML = days;
  hoursEl.innerHTML = formatTime(hour);
  minsEl.innerHTML = formatTime(mins);
  secondsEl.innerHTML = formatTime(seconds);
}

we will format the time, so as to start the countdown accurate

function formatTime(time) {
  return time < 10? `0${time}` : time;
}

then we will call the function to kick start and set our interval for the countdown

countdownApp();

setInterval(countdownApp, 1000);

Your code is suppose to look like this in the complete version

const daysEl = document.getElementById('days');
const hoursEl = document.getElementById('hour');
const minsEl = document.getElementById('mins');
const secondsEl = document.getElementById('seconds');

const countdown = "1 Jan 2022";

function countdownApp() {
  const countdownDate = new Date(countdown);
  const currentDate = new Date();

  const totalseconds = (countdownDate - currentDate) / 1000;

  const days = Math.floor(totalseconds / 3600 / 24);
  const hour = Math.floor(totalseconds / 3600) % 24;
  const mins = Math.floor(totalseconds / 60) %60;
  const seconds = Math.floor(totalseconds) % 60;

  daysEl.innerHTML = days;
  hoursEl.innerHTML = formatTime(hour);
  minsEl.innerHTML = formatTime(mins);
  secondsEl.innerHTML = formatTime(seconds);
}
function formatTime(time) {
  return time < 10? `0${time}` : time;
}

countdownApp();

setInterval(countdownApp, 1000);

And our countdown App is up and running, counting down to Jan 2022.

*Oh we need to make it responsive for mobile devices
Adding more code to our CSS code

@media screen and (max-width: 600px) {
  body {
    overflow: hidden;
  }
  h1 {
    font-size: 1.5rem;
    font-weight: 800;
  }
  .countdown-container {
    display: flex;
    flex-direction: column;
  }
  .big-text {
    font-size: 4rem;
    font-weight: normal;
  }
  .countdown-value span {
    margin: 1rem;
  }
}

Now is responsive and running.
Thank you

I wish to bring more, as I journey.