DEV Community: Emmanuel Gatwech

Introducing: Planet Of The Bugs

Emmanuel Gatwech — Sun, 30 Apr 2023 06:09:08 +0000

Planet Of The Bugs

As a software developer, you might have experienced situations where your code just doesn't work as expected, and you find yourself spending hours trying to figure out why or you may find yourself falling into the trap of copying and pasting code from Stack Overflow or GitHub without fully understanding the implications it could bring. This can introduce bugs or even security vulnerabilities that can be detrimental to the project. However, with a solid understanding of debugging techniques, developers can quickly identify and fix these issues.

The Need for Debugging Skills

Debugging is an essential skill for any developer, but it's often overlooked in traditional programming courses and tutorials. That's where Planet of the Bugs comes in - an interactive learning platform that teaches developers to debug and troubleshoot problems. Our aim is to save developers from numerous headaches caused by bugs such as memory leaks, and dependency incompatibilities.

This project and Hackathon use the dev branch as the active branch. Please note that the main branch is outdated and does not reflect the current status of the project.

Note: Please use the dev branch for running the app or viewing the latest code changes. The main branch is currently suspended, so kindly avoid it.

The Problem 🕵🏾

Most learning platforms only teach you how to code, but when you get a job or work on a real-life project, debugging takes a huge amount of effort, and most developers lack these skills. Many don't know how to use debuggers, how to spot code smells, or what patterns to avoid to prevent bugs from occurring. Common bugs such as auth bugs, memory leaks, and async bugs can cause significant issues and leave developers feeling frustrated and overwhelmed.

Planet of the Bugs is designed to bridge this gap and provide developers with the knowledge and skills they need to write secure and robust software.

The Platform 💡

It's a unique and innovative learning platform that offers a comprehensive approach to debugging and troubleshooting. It aims to combine the power of AI-generated fake bug scenarios with real-world problem-solving opportunities. This app is designed to help developers of all levels hone their skills, improve their chances of success in the software development industry, and advance their careers.

Planet of the Bugs uses AI to generate fake bug scenarios for developers to learn debugging skills and the fundamentals of writing secure and robust software. By using AI, the app can provide an endless supply of unique scenarios, allowing developers to practice and hone their skills.

Inspiration

The app was largely influenced by my own personal experiences studying computer science at University and a Bootcamp after that saw well as working remotely for the past 4 years.

I got my aha moment when I discovered these sites Codecrafters, Exercism, Codewars, Coding Game, and Frontend Masters. I highly recommend you sign up because of how great their content is.

The platform is built around these core two concepts:

Theoretical knowledge 🤔

By providing a practical and collaborative environment for learning and practicing debugging skills, we believe that Planet of the Bugs can help developers become more confident and skilled in their craft.

Practical Knowledge 👩🏾🔧

solving real-world problems from Github that will be recommended by the AI according to the user's skill and level of experience. This unique approach helps developers gain practical experience in solving complex issues that they may encounter in their daily work or when they finally get jobs.

Tech Stack

The app uses Sveltekit for the front-end end GraphQL for the API, and MindsDB for the AI models. Sveltekit is a lightweight and efficient frontend framework that allows for quick and easy development, while GraphQL provides a powerful and flexible API for data manipulation.

Core Features 🕸

The app is packed with exciting features designed to help both companies and developers achieve their goals! With cutting-edge AI technology, we've created a unique bug scenario generator that recommends personalized debugging strategies based on user behavior. This allows developers to improve their skills and become proficient at debugging, giving them a competitive edge in the software development industry.

Markdown Editor 📠

The Smart Markdown Editor in Planet of the Bugs is not just for documentation, it's also a powerful content management system (CMS) for creating course content. The editor makes it easy to create, edit, and publish content without needing to know HTML or other complex programming languages.

With the Smart Markdown Editor, you can create interactive tutorials, exercises, and quizzes that engage learners and help them develop their debugging skills. The editor allows you to add images, code snippets, and other multimedia elements to your content, making it more engaging and dynamic.

Built-in Code Editor 💻

Here at Planet of the Bugs, we understand the importance of having a text editor that can handle any type of code. That's why we built our editor on top of the powerful Monaco editor. With our text editor, you can write and run any type of code with ease. Whether you're working with JavaScript, Python, or any other programming language, our editor has got you covered.

The benefits of our text editor go beyond just being able to handle any code. It also has features like syntax highlighting, auto-completion, and code snippets that make writing code faster and more efficient. Plus, with the ability to run your code right from the editor, you can test and debug your code in real time without having to switch between different applications.

Our text editor is an essential tool for any developer, whether you're a beginner just starting out or an experienced pro. With its powerful features and ease of use, you can focus on what matters most - writing great code.

Real-Time Collaboration (WIP)

The platform currently supports real-time collaboration in the form of audio calls for pair programming/debugging. This feature will allow developers to work together to solve problems in real time, making the learning experience more interactive and engaging.

Real-Life Experience 🚀

The platform integrates with Github, allowing developers to receive updates about issues and bugs in the areas they've trained on. AI is used to provide issue and repo recommendations, enabling developers to practice solving issues from real-world projects on GitHub.

AI Integration via MindsDB 🤖

MindsDB provides AI models for generating fake bug scenarios and recommendations based on user behavior.

Course Creation 👨🏾🏫

We know that AI models are not always perfect, so we created a Markdown editor to give users the option to create courses in order to practice solving bugs in the stacks they are interested in learning. There is a CMS with a markdown editor for course creation, and a text editor built on top of Monaco to run code snippets. The app also uses a third-party library to import npm packages.

A bounty Program 🤑

A bounty hunting program to help companies crack bugs: We want to help companies find and fix bugs in their software. That's why we're planning to launch a bounty-hunting program that will reward developers for finding and fixing bugs in real-world projects.

Community Building 🥑

In addition, experts who have encountered bugs and sticky situations in the past can create courses on the platform to teach new developers how to avoid and fix such bugs. This approach allows new developers to learn from the mistakes of experienced developers and gain valuable insights into how to write secure and robust software.

The ability to create teams is another powerful feature of the platform. A tech lead could create a team and then a course to train their team on the company's stack. The code will be executed locally via a CLI, and the company's code will not be used in training any AI nor shared with the public unless explicitly allowed.

Leaderboards 🥇

Who doesn't love a bit of friendly competition? With the leaderboards feature, you can see how you stack up against other developers on the platform. Show off your skills and climb the ranks to be crowned the ultimate bug-squasher. Plus, top contributors will be rewarded with some seriously cool prizes, so keep on crushing those bugs!

Connections 🙌🏾

But our platform is not just about learning debugging skills. It's also about collaboration and community. Our platform encourages developers to work together to solve bugs and learn from each other's experiences. With features like team creation and personalized training, we're creating a space where developers can come together to improve their skills and build stronger teams.

Future Plans 🕺🏾

We're excited to see the impact that our platform can have on the developer community and we look forward to continuing to improve and expand our offerings we have big plans for Planet of the Bugs!

Our current goal is to continue expanding the platform and reaching as many developers as possible. We want to make sure that our app is serving the needs of the dev community in the best way possible, and I am always open to feedback and suggestions from users.

Here are some of the features we're planning to add:

CLI for Local Development

While our online editor is a great place to practice debugging, we recognize that developers may want to work on real projects locally. That's why we're planning to develop a CLI that allows users to clone or work on projects locally and track their progress in a similar fashion to websites such as Codecrafters, Exercism, Codewars, Coding Game, and Frontend Masters.

Sandboxed environments come with limitations, and the app aims to provide users with a more realistic development environment for practicing debugging.

Personalized training 🏋🏾

Personalized training for teams: Finally, we recognize that different teams have different needs when it comes to training. That's why we're planning to offer personalized training for teams, tailored to their specific stacks and challenges

Smart Markdown Editor (Similar to Hashnode's)

We want to make it easy for developers to create and share courses on Planet of the Bugs. That's why we're planning to add a smart markdown editor that will make it easy to format and style your content.

Built-in AI assistant for `Rubber-Duck Debugging`

Built-in AI assistant for Rubber-Duck Debugging: Sometimes, all you need to do is talk through a problem with someone else to find the solution. That's why we're planning to add a built-in AI assistant that will act as a rubber-duck debugger, helping you work through your problems step-by-step.

A Job Board 💼

We know that job boards are very cliche but we still decided to build one because we realized it would bring about many benefits for both, companies and developers.

For Organizations 🏢

We know how frustrating it can be for companies to find the right fit for their team, especially with all the challenges of the current hiring process such as bias, false positives, bad recommendations, and other factors. That's why we want to lend a hand and help companies make data-driven hiring decisions that will benefit both them and their potential employees.

Happy Hiring!: Hiring developers who are already familiar with your products and codebases, and who have experience with your technology. By doing so, you can save time and resources on training and ensure a seamless onboarding process. So, consider hiring developers who have contributed to your codebase before and who can hit the ground running.
It's a Match!: Besides being familiar and experienced with your codebases, you can trust that these individuals have a passion for your company's vision and are more likely to stay with your organization for the long haul.
The Right Fit for Every Position: We believe in giving everyone an equal opportunity to showcase their skills and passion. Our job board will be 100% merit-based, ensuring that all developers, regardless of their background, have a chance to find their dream job. This benefits both developers and organizations, as companies will have access to a wider pool of talented and dedicated individuals who are passionate about their products and mission.
You Deserve the Best: By posting job openings exclusively for our top contributors, organizations will have access to some of the best and most committed developers in the community.

For Developers 👨🏿💻

We understand how daunting the job search process can be for developers, especially with the current challenges such as biased hiring practices, lack of opportunities, and inadequate job recommendations. That's why we want to make the process easier and more equitable for developers.

Find Your Dream Job: Gain access to opportunities from organizations that genuinely appreciate your skills and enthusiasm. This increases your chances of securing your dream job and joining a company that aligns with your career goals. Furthermore, with a glimpse into company culture, you can be confident that it's the right fit for you!
Dedication Earns Recognition: We understand that as a dedicated developer, you've invested countless hours in honing your skills to become the best in your field. At our platform, we recognize and reward your expertise for your hard work. By contributing to our platform and showcasing your skills, you can stand out in the competitive job market and increase your chances of landing your dream job.
Giving Is Receiving: Showcase your skills and build a strong online presence by creating custom courses easily. But that's not all - by sharing your expertise, you can gain recognition and even earn through monetization.
Make Valuable Connections: Make genuine connections with top companies and leaders. Grow personally and professionally. Connect with like-minded professionals, gain industry insights, and find mentors who can guide you to success.

Development Process

"Every Castle started at the basement" - Lupe Fiasco

GitHub GraphQL AP

The GitHub GraphQL API is really easy to use and explore. Their explorer is simple and intuitive, and it helped me find some great repositories that I could use to train MindsDB models.

MindsDB Integration

I couldn't integrate the mindsdb-js-sdk due to time constraints, but I was able to create some models and make repository recommendations using the data from the GitHub API. I plan to improve the SDK integration soon and also add a ChatGPT bot for generating bug scenarios and more.

Issue and repo recommendations via MindsDB

With MindsDB, we can give our users sweet repo and GitHub recommendations. You can check out our current explore page to see what we're working with. And don't worry, we'll be adding more AI magic and spicing up the UX/UI as we go!

Future Goals: Investing in Community Growth

Learning more about AI

As someone who is passionate about technology, I have always been fascinated by the potential of artificial intelligence. I believe that AI has the power to revolutionize the way we live and work, and I am eager to learn more about how it works and how it can be applied to different industries. My current goal is to continue exploring the world of AI and building my knowledge and skills in this area.

Summary 🏾

The Planet of the Bugs platform is designed to help developers learn and master the art of debugging and troubleshooting by using AI-generated fake bug scenarios. The app uses advanced machine learning algorithms to create endless supplies of unique scenarios, allowing developers to practice and hone their skills in a safe and secure environment.

It's a unique and innovative learning platform that offers a comprehensive approach to debugging and troubleshooting. It aims to combine fake bug scenarios and real-world problem-solving opportunities via issues provided by our GitHub integration to create a comprehensive environment to help developers hone their skills and advance their careers in the tech industry.

Resources 📚

Thank you so much for reading this article! You can find the app's source code on this GitHub Repository and demo right here.

Special s/o to the following platforms/ people:

Joy of Code: For helpful Svelte tips and tutorials.
Svelte Society: For the amazing collection of resources and recipes!
Hashnode & MindsDB Community: Thanks to the awesome MindsDB team (specially Zoran & for this incredible hackathon and for introducing me to the powerful potential of MindsDB.

The Planet of The Bugs, Book 1

Emmanuel Gatwech — Sun, 26 Feb 2023 20:24:00 +0000

The Planet of The Bugs 🪐 - First Act

"With great power comes great responsibility." - Uncle Ben

In the Renderland saga, we learned about Renderland's history, its new savior, and the invaders who sought to destroy it. The planet was invaded by an intelligent species of bugs. They came in different shapes and sizes and wreaked havoc on the planet.

This part will trace back the origin and history of those bugs and how they came into existence. We will explore multiple debugging techniques.

The Origins of the Bugs 👾

I was back on earth watching Planet of The Apes when my TV started peeping and glitching the screen turned blue. I tried switching it off, but suddenly got sucked into a portal and found myself in Renderland again!

I was greeted by the federation's chairman, Dennis Ritchie who then started briefing me about an imminent danger. The once-defeated bugs have been regrouping and are seeking revenge!

Years have passed since the battle on Renderland and the bugs have been evolving, they are more complex now, reproduce and spread at incredible speeds, and have adopted and can even hide in plain sight!

What is a software bug?

💡 How do bugs occur?

The chairman then began narrating some of the most common causes of bugs he had witnessed during his days. Things have changed and the list might be a lot bigger.

Dennis explained that bugs were a natural result of the complex systems and languages used to build programs. Sometimes, the simplest mistakes, like a misplaced semicolon, could cause a catastrophic failure. Other times, bugs arose from the very design of the program, or due to miscommunication between the stakeholder.

💡 Here are some of the common reasons why bugs occur in programs:

Human Errors

Human errors refer to mistakes made by people during the software development process, such as incorrect data entry, incorrect interpretation of requirements, and programming mistakes.

Miscommunication or no communication during initial project discussions.
Lack of collaboration or communication blockers.
Communication or Miscommunication might result in unwanted outcomes.
Scope creep, team conflicts, and unrealistic deadlines.

How to mitigate such errors

Creating specification documents and agreeing on deliverables before embarking on development.
Thorough self-review of code before pushing and further reviews by teammates/managers.
Participating in pair programming and utilizing methodologies such as QA.

For instance:

interface User {
    id: int;
    email: string
}

// assume we would like to add more info the user object before we send a response
const returnUserByID = async (id: User["id"]): User => {
    const user = fetch(`/users/${id}`);

// this function will return `undefined` because JavaScript automatically inserts semicolons after every return statement.
    return 
    {
        ...user,
        online: false
    };
}

// this should be the right way to return a way object
    return {
        ...user,
        online: false
    };

Syntactical and Programmaticals

These bugs arise due to a lack of understanding of the programming language in use i.e syntactical errors or implementing the wrong types.

Lack of understanding of certain/advanced programming language features.
Copying code from sources such as StackOverflow or ChatGPT (what works for others might not work for you).
Using deprecated features and ignoring compiler warnings.

How to mitigate such errors

Reading documentation and ensuring that you're adhering to the API protocols. Each API has a list of standard inputs, outputs, and metadata. Make sure none is violated and that the API is being used as intended.
When working on a large codebase, you could identify patterns from other parts of the system. Try asking existing team members for an explanation of these patterns, no need to re-implement the wheel.
You could become proactive and suggest updating the contributing doc for your project! (This will give you extra points!)

might arise due to issues interpreting the project requirements and relying on assumptions rather than communicating before the development.

Compatibility:

Compatibility issues arise when you try running a program on an unsupported platform. For instance, this site shows how many browsers support CSS Grid natively supported in each browser.

How to avoid compatibility bugs

Make sure you run your programs in a consistent/ predictable environment such as Docker or NVM which lets you switch between Node versions.
Suggesting polyfills or alternatives for systems that don't support some of the required dependencies. Also using nightly releases of certain software pieces such as Nightly Rust
Document the installation/ setup instructions in your README.md file for future reference and new contributors.

💡 Note on software release patterns

Stable Version, Release Candidate, Beta, Alpha Release, etc.

Environment Bugs

These are often caused by hardware or software failures, such as crashes, memory errors, and network issues when working with external services.

The Search Party 🥷

We decide to form a search party that consists of the federation's top heroes. Together, we'll go out on a hunt, traditionally known as debugging which is the process of identifying, analyzing, and resolving errors or bugs in computer programs. The goal of debugging is to identify the root cause of a problem.

Identifying Bugs 🔎

To prove a bug exists, we need to reproduce it. This step may involve running the program multiple times to confirm the existence of the bug. It involves comparing the current and desired behavior of the program.

Current Behavior: Modal closes before confirming user info.
Desired Behavior: Modal closes after confirming user info.

Bugs are affected by factors such as the environment (hosted vs local), and it's hosted, there could be multiple instead of a hosted environment (staging, QA, and production).

Reproducing a bug involves 💡

Replicating the same environment that bug occured i (Operating System, Version)
Producing detailed description of the steps that led to this bug i.e login, click create button and fill out the new form, etc.

If you contribute to open-source projects, you'd find issue templates such as:

New Bug Template from Cal.com.
This issue from Exalidraw.

Isolating Bugs 🔐

After locating the bug, the next step is to isolate it. This involves understanding the conditions under which the bug occurs and identifying any relevant info.

Find out where the bug is and how much of the system it affects.
Think about any recent changes that might be connected to the bug.
Use debugging tools such as log files, tracing, or a debugger to pinpoint the source of the bug.Resolving Bugs

Fixing the Bug 🧹

Once the bug has been located and isolated, the next step is to fix it. This may involve rewriting code, changing input values, or making other modifications to the software program.

This could be as simple as changing a single line of code or as complex as re-engineering the entire software system.

The hero has also discovered that debugging is an iterative process, where they must test and refine their code until all the bugs have been resolved.

The Bug Hunter Training 🎯 - Second Act

I fear not the man who has practiced 10,000 kicks once, but I fear the man who has practiced one kick 10,000 times. Bruce Lee

In order to defeat the newly evolved bugs, our hero needs to train further and learn new skills.

Dennis Ritchie shares programming and debugging techniques that have been practiced for centuries planet.

Console Training 🎮

This is the simplest and most commonly used debugging method. Used by beginners and experienced developers. It's a very powerful tool and this section will help equip our heroes with newer skills and techniques.

The chairman has cast a simple spell to summon all the children of this technique.

console.log(Object.keys(console)); // outputs an array of methods
/**
['debug', 'error', 'info', 'log', 'warn', 'dir', 'dirxml', 'table', 'trace', 'group', 'groupCollapsed', 'groupEnd', 'clear', 'count', 'countReset', 'assert', 'profile', 'profileEnd', 'time', 'timeLog', 'timeEnd', 'timeStamp', 'context', 'createTask', 'memory']
*/

Some of these methods aren't built into JavaScript. For instance, the memory method is provided by Google Chrome.

Console.log

This method is used to print out information to the console. It's the simplest and probably the first one we learn in JavaScript. It's very customizable and you could do a lot with it.

You could customize it by passing CSS rules. For instance, Facebook displays a message to warn users when they open the DevTools while browsing.

console.log("hello, world!");
// styling output
const style = 'background-color: maroon; color: white; border: 5px solid #333; font-size: 2em; padding: 0.5rem'

console.log("%cHello, World", style);

You could also pass multiple arguments and substitute strings as well!

Console.error

This is used to display error messages on the console. You might wonder, why to use this method instead of the good o' log? Because this method comes with additional enhancements such as an error Stack Trace.

The Stack Trace shows the sequence of function calls that led to the error and can be very helpful for debugging.

💡 The stack trace may not be available in some environments, like certain versions of Internet Explorer.

import { LicenseNotError } from "utils/errors";
const retrieveImages = async (userId: User["id"]): Promise<User> => {
    try {
        const licencseInfo = await getLicencseInfo(userId);
        if(licencseInfo === null) {
            throw new LicenseNotError("Not Found"); // custom error
        }
    } catch (error) {
        // automatically displays a stack trace
        console.error(error);
    }
}

It's recommended to use this level if you're collaborating with others or developing a library or public API. It will help other developers trace the origin of the bug.

Console.table

const levels = [
{
    name: "memory",
    description: "provides memory usage info on a web page",
    arguments: ""
},
{
    name: "info",
    description: "used to display an informational messages",
},
{
    name: "warning",
    description: "used to display warninings"
},
{
    name: "error",
    description: "Used to log error messages. It allows you to include additional data such as a stack trace."
}
];

console.table(levels);

This should output the following table:

Useful for displaying tabular information such as a list of users.

Console.group

  const label = 'The ancinent debugging techniques are';
  console.group(label);
  console.info('Identifying Bugs');
  console.info('Isolating Bugs');
  console.info('Resolving Bugs');
  console.groupEnd(label);

This will output the following:

Console.dir

  const wrapper = document.getELementById("_next");
   console.log(wrapper)
  const label = 'The ancinent debugging techniques are';
  console.dir(label);

This will output the following:

Useful for displaying related information. For instance, you could use it to print out nested values or the values in an array of objects.

Filtering Levels

There are several options to filter logs such as level, source, text or regular expression.

Popular frontend frameworks and libraries make use of these logging levels to display different types of messages. For example, React does:

Use console.error to highlight errors in code, they often include a stack trace to help find issues quickly.
Use warn to display warnings such as when you forget to include dependencies in an useEffect array.
They use source based filtering to show you where each console.log came from.

Console Best Practices & Tips

Use the appropriate logging level so you could easily filter and search for logs.
Clicking on the source of a log will take you to the file the log lives in.

Debugger Training 💻

After learning the basic debugging principles and passing the console exam, the hunters now move on to the second stage of the training. In this stage, they will learn how to use a very powerful weapon known as a debugger. A debugger consists of the following:

Breakpoints

A breakpoint is a signal to the debugger that tells it to pause the execution of the program at a specific point. This allows the developer to inspect the state of the program at that point and step through the code line by line to identify bugs.

Step-through execution:

This feature allows the developer to step through the code one line at a time, examining the state of variables and the program as a whole as they go.

Variable inspection:

Debugging environments usually provide a way for developers to view the values of variables and data structures at any point in the program's execution.

Call stack inspection:

Debuggers also allow developers to examine the call stack, which shows the sequence of function calls that led to the current point in the program's execution. This helps developers trace the flow of control and identify where bugs may be occurring.

Log analysis:

Debugging environments may also provide tools for analyzing log files, which can help developers identify issues that are difficult to reproduce or diagnose.

Hunter Code of Conduct

You have now passed your basic hunter exam. Go out there and gain more skills and become the best hunter you could become!

And of course, after completing the Bug Hunter training, each Hunter had to swear an oath.

Document every bug along with the necessary information to help others verify and reproduce.
Submit error/ bug reports when possible.

Bug Bounties - Third Act

Practice is the best way to learn! You could try exploring Open Source projects for bugs. This will help you gain practical skills. There are also several bug bounty programs that you can participate in and hopefully earn some cash. Best of luck hunters!

Preventing Bugs

We have explored how to identify and deal with various bugs, this section will explore prevention methods.

Preventing Bugs

Preventing bugs is a crucial step in building robust software.

The 3 Questions Method

I usually ask myself 3 simple questions whenever I try to solve problems at work and on personal projects.

What?

Understanding a problem is 50% of the solution. This helps me understand the problem I am dealing with at a deeper level. This is where I'll ask questions and try to clarify everything before I attempt anything.

How?

After formulating a good understanding of the problem, I'd then start exploring the possible solutions and comparing them.

Why?

Why choose approach A over approach B or C?

Conclusion

The other parts of the saga will explore each concept in detail. Stay tuned!

The Planet of The Bugs, The Markup Tribes (Explores HTML and CSS)
The Planet of The Bugs, The Scripts Tribe
The Planet of The Bugs, The Web (Explores Networking, CORs)

Resources 📚

Chrome Developers

Eman's Journey - Dev Retro 2022

Emmanuel Gatwech — Thu, 22 Dec 2022 19:16:10 +0000

The Civil War

I had a relatively privileged upbringing, attending private schools and doing well academically. In 2013, I completed high school and traveled to Juba to get a new passport and prepare my documents for university admission. This was an exciting and important time in my life as I prepared to take the next step in my education and embark on a new journey.

Unfortunately, a civil war broke out in my country, causing a dramatic shift in the political landscape and leaving a lasting impact to this day. Millions of people, including my family and myself, were forced to leave our homes and seek refuge in Uganda.

The war led to the collapse of the economy, resulting in widespread financial losses and hardship. The war and its aftermath were difficult times for my family and many others in my country.

What is Computer Science?

I was given the opportunity to study Computer Science in Zimbabwe through a scholarship. Although I was unfamiliar with the field, I had no other options and therefore accepted the offer. The scholarship presented itself as a chance for me to not only further my education, but also to create a better future for myself and my family potentially.

I arrived in Harare, Zimbabwe on September 11, 2015, nearly a month after the beginning of the semester. I had no idea what computer science was and I had never heard of any programming languages.

Everything the lecturer said felt like a foreign language to me and I scored 2 out of 50 on my first programming test!

Bucky Roberts 🚀

I came across a fellow named Bucky Roberts on YouTube, he had a channel called TheNewBoston, and he provided simple and entertaining explanations of programming principles. I began staying up all night watching his tutorials and eventually, my understanding of programming improved significantly. In a few weeks, I became the person that my classmates would turn to for help with programming questions.

This is the video that made me fall in love with programming.

First Semester

I enjoyed studying Operating Systems and Programming in C and found myself spending a lot of time on these two subjects. I took the exams for the first semester and passed 5 out of 7 modules, but I didn't do well in Communication Skills and Analogue Electronics.

Due to financial constraints, we were unable to go back home for the holidays and had to stay on campus. It ended up being a good thing because the other students went back to their homes and the internet speeds were much faster. I took advantage of this opportunity by spending countless hours watching programming tutorials on YouTube and illegally downloading courses from FrontEnd Masters and Lynda.com.

In the second semester, I became passionate about programming and ended up learning more than what was required for the course. I was always striving to improve my skills.

Facebook Developer Circles

In 2017, the Facebook Developer Circles program was launched in Harare, and I had the opportunity to attend the ceremony with some of my university colleagues. I was blown away by what I saw and experienced.

It was a different feeling compared to my school days, I met developers who were creating real-world applications, which was something new to me as I was only familiar with basic hello world programs and exercises from my C Programming textbook.

The meetup exposed me to concepts such as development servers, APIs, and the differences between frontend and backend development.

I was very inspired by Achim Munene (Far right) and Kudzai Chase. There was a Hackathon and Kudzai won an award for a bot he built. was the day I decided I wanted to become like them.

Dropping Out 🤦🏿

In 2017, I experienced several challenges and made a series of wrong decisions during my second year of university that ultimately led to the loss of my scholarship. These challenges included alcohol dependency, undiagnosed ADHD, depression related to past experiences with war and trauma, and an intense focus on programming that caused me to neglect other courses. As a result, it became difficult for me to maintain my scholarship and continue my studies.

I used this laptop to learn programming and borrowed the screen from a friend in the Electronics Engineering department who used it for experiments.

Back to Uganda 🇺🇬

In 2019, I returned to Uganda after a difficult period of time in university. I knew that it was unlikely that I would receive another scholarship, and my family was unable to provide financial support. However, my older brother was able to send me $400, which I used to purchase a used Lenovo laptop. This allowed me to start coding again after a 2-year break, during which I had forgotten much of what I had learned. It was a challenging time, but I was determined to keep working towards my goals and was eventually able to pick up where I left off and continue learning and growing as a programmer.

Overcoming my challenges

To experience personal growth, I realized that I needed to make sacrifices and put in extra effort to improve myself.

After returning to Uganda and committing to making changes in my life, I took the following actions to work towards becoming the best version of myself:

Talking to Professionals

In order to better understand and address my situation, I sought out the advice of medical professionals and found their guidance to be extremely valuable.

Cutting Off bad habits

In 2019, I made the decision to stop consuming alcohol and staying up late. To better manage my time and career, I used Trello boards to organize my plans and set specific goals for myself, including learning certain skills. By making these changes, I was able to better focus on my goals and make progress toward achieving them.

Imposter Syndrome

I spent a lot of time watching tutorials and felt like I was making a lot of progress. I was able to follow along with the instructors and solve any code challenges they presented, but I struggled to build anything on my own. Despite being able to grasp concepts quickly, I found it challenging to apply what I had learned to my projects. As a result, my GitHub profile remained largely empty until this point. It was frustrating to be able to understand the material but struggle to put it into practice.

Brian Holt is Hosting an AMA on Hashnode!!

I knew Brian Holt from Frontend Masters and I owe him a debt of gratitude for teaching me React and also encouraging me to break out of the tutorial hell and overcome my imposter syndrome.

It is said that an image is worth a thousand words.

The green dots in the image represent countless hours of hard work and effort. I was determined to make the most of my circumstances and work towards my goals. I was willing to put in the time and effort needed to achieve success, even when the path ahead was uncertain.

A Second Chance 🙌🏿

Thanks to my participation in the Facebook Developer Circles program, I was awarded a scholarship to pursue a diploma in web development. This opportunity allowed me to learn and grow in my field, and it significantly impacted my career by helping me reach the next level of professional development. I am grateful for this opportunity and the knowledge and experience it provided.

OpenClassrooms 🎓

I received a diploma in front-end development from OpenClassrooms, a leading online learning platform in Europe. The program is designed to provide students with hands-on, project-based learning experiences that teach relevant and in-demand skills. To earn the accredited diploma, which is recognized at level 6 of the European Qualifications Framework (EQF), students are required to complete nine real-world projects that cover a range of topics including database modeling, software design, interface design, and API development.

Completing the diploma program gave me a huge boost in confidence, and I began to contribute to open-source projects and volunteer in local developer communities. I would either facilitate programming workshops or act as a coach for complete beginners looking to learn how to code. These experiences allowed me to share my skills and knowledge with others, while also continuing to learn and grow as a developer.

During my studies at OpenClassrooms, I worked on the following projects.

La Revue (React.js, Google Maps APIs, Express.js).
Shadows of Mordor (jQuery, HTML5, CSS).
Quote Generator (HTML, JavaScript, Sass).
Express Food (MySQL, PHPMyAdmin).

I also had the pleasure of becoming friends with some amazing individuals such as Mahfoudth Arous, Yahya, Donna, and Chaimaka Osuji, who wrote a very kind message to me earlier this year.

Outreachy

I later learned about Outreachy, an online internship program that offers opportunities to work on open-source projects. If you're just starting in programming, I highly recommend applying for this program.

I applied and chose a project called "Mozilla's Tokenserver - From Python to Rust" to work on. At the time, I was learning Rust and thought this would be a great opportunity to put my skills to the test. By the end of the contribution period, I had submitted a total of seven pull requests. I vividly still remember these two.

My First Job 🚀

In June 2020, I was able to secure my first job thanks to my contributions to open-source projects and involvement in the local developer community. The job involved working on a project called LabXpert, a comprehensive laboratory information system designed to streamline and improve the medical testing process from sample collection to the release of results. This was a great opportunity for me to apply my skills and knowledge to a real-world project, and I was excited to be able to make a positive impact on the quality and efficiency of the testing process.

Summary 🏾

The project I was working on was very dynamic, requiring me to constantly adapt to changes. I learned that it is often more effective to abandon initial, complex plans that may include unnecessary or flashy elements and instead focus on quickly delivering the product and getting feedback from users.

Things I have learned 👨🏿💻

Becoming familiar with development practices such as containerization, multi-environment deployments, and working with CI/CD pipelines.
Examining the pros and cons of using existing infrastructure versus creating custom solutions.
Determining which features are most important and focusing on delivering value to users.

Skills Gained 💪🏾

MongoDB (Aggregation Framework, Advanced Data Modelling).
Redis, Messaging Queue, Event Sourcing, and Event-Driven Architecture.
Docker, Portainer, Gitlab CI/CD, Traefik, and Firewalls.
TypeScript, Redux, Progressive Web Apps, and Web Workers.

GitStart

After working on LabXpert for 10 months, I was offered a new role with a remote startup in the USA that offered a higher salary than my previous job. This allowed me to better support my family financially.

In this new position, I worked on large-scale commercial and open-source projects with distributed remote teams. It was a great opportunity for me to continue developing my skills and experience in the field.

Summary 🏾

Working at GitStart has taught me the importance of being proactive in ensuring that projects are completed efficiently and effectively, as well as the importance of putting the team's goals ahead of my own. This includes taking the initiative to address any issues or challenges that may arise, setting up regular check-ins and updates, and seeking out resources or support when needed. I have also learned how to delegate responsibilities when necessary, and how to step up when my team lead is absent. Overall, my time at GitStart has allowed me to develop valuable skills related to teamwork and project management.

Things I have learned 👨🏿💻

Gaining experience with Mongorepos and Microservices, as well as learning how to properly structure projects.
Conducting self-reviews of my code and documenting discussions in Pull Requests or public channels, rather than private direct messages.
Exploring the inner workings of popular open-source projects such as React.js and Calcom.
Developing technical writing skills, giving tech talks, and working together as a team to grow and improve.

Skills Gained 💪🏾

GraphQL (Apollo and Relay).
Advanced SQL (PostgreSQL), Prisma, and Hasura.
Advanced TypeScript, Abstract Syntax Trees, and Compilers.
i18n, State Machines, and more about state management in web applications.

Hashnode

I have participated in three hackathons from Hashnode this year, and I have emerged as a winner in two of them.

Although I was not successful in my last hackathon attempt, it inspired me to keep working on my app and turn it into a full startup. I have joined forces with a poet from Rwanda and a UX/UI designer from Germany, and together we are building a company called Inspirers.

Inspirers 🚀

Inspirers is an app that connects you with experts who have achieved success in various fields and can provide guidance and inspiration. Through the app, you can learn about their stories, methods, and tools and see how they were able to achieve their goals. You can then adopt elements that fit your personality and add your creative twist to them as you work towards your own goals.

Ways to increase productivity

To effectively manage my time, I maintain a calendar and schedule blocks of time for meetings, writing, and coding. I use tools such as Google Calendar and Calendly to assist with this.
Listening to Lofi music and using the Pomodoro technique has been extremely beneficial for me. I use an app called Llama Life for this.
Using an external monitor and being able to efficiently manage multiple apps and windows has greatly improved my productivity. I use an app called Rectangle to help me with this task.
To streamline my workflow, I use two different web browsers (Firefox and Google Chrome) simultaneously. I have installed the extensions Toby and dailydev in one of the browsers, with Firefox being used for documentation and quick reference, and Chrome for my daily tasks. Toby allows me to save my tabs for later, and dailydev provides me with a curated feed of articles related to my interests.

2022 Wins 🎉

Winning two Hashnode Hackathons.
Earning from technical writing.
Traveling for my first international conference.
Upgrading my home office.

2023 and beyond 🙌🏿

I have been offered a job as a Frontend Engineer at a software company in Manchester, UK and I will begin working there in January.

My other 2023 goals include:

Returning to college (again 😂).
Launching my Startup (Inspirers).
Relocating to [Redacted].
Repaying the kindness and support that I received early in my career by mentoring other developers.
More office upgrades!!!!!!

I appreciate you taking the time to read my article. I hope you had a happy and successful year .

I'm available on the following platforms if you'd like to connect:

I want to express my gratitude to Tasha, my mentor, who inspired me to start writing.

Understanding Docker and Containers

Emmanuel Gatwech — Tue, 18 Oct 2022 13:32:27 +0000

Introduction

Docker is a handy tool for managing application deployments. It's increasingly popular in organizations that need to deploy applications efficiently and securely in the cloud. If you're new to Docker, fear not this post will help you gain a practical understanding of its most commonly used features. There are many decisions to be made when using it, so this article will also serve as a guide on avoiding common mistakes and using Git more efficiently. Let's get started!

Docker provides an open-source platform for managing application deployments. It's a useful tool for enterprise IT organizations that want to deploy applications efficiently and securely in the cloud.

If you are new to Docker, it can feel like a daunting task: figuring out where to start, which concepts are essential, and how they all fit together. This article will help you gain a practical understanding of Docker's most commonly used features. A solid grasp of these concepts will help you avoid common mistakes and use Docker more efficiently.

Containerization

Containerization is the process of packaging an application and its dependencies (such as system libraries, config files, etc.) into a single unit known as a container.

The main benefit of containerizing your applications is that you can run them anywhere (on a server, laptop, etc.), regardless of the underlying operating system.

A container is a small independent program that runs in its own environment. Containers are lightweight and easy to create, modify and run. With containers, you can move applications between environments with greater speed and flexibility than traditional virtual machines allow.

The other benefit of containerizing your applications is that they allow you to build them quickly without worrying about configuring the operating system. Docker and containerization are two ways of providing isolated environments for your applications. The main benefit of containerizing your applications is that developers can run them anywhere (on a server, laptop, etc.), regardless of their underlying operating system.

Containers

A container is a small independent program that runs in its environment. Containers are lightweight and easy to create, modify and run. With containers, you can move applications between environments more quickly and flexibly than traditional virtual machines allow.

Containers are self-contained environments. They can be considered an operating system in their own right, or a sandbox separate from the host operating system. Containers have their filesystem, processes and network interfaces, and they can run on any machine with access to a Docker container's filesystem.

Containers are nothing more than a combination of a few Linux kernel features at their core.

Why Containers?

Containers are a great way to package and deploy your software. In this blog post, I'll discuss the merits of containers for deployment and best practices for using them on a modern Linux infrastructure.

Okay, so now at least you have a pool of servers responding to web traffic. Now you just to worry about keeping the operating system up to date. Oh, and all the drivers connecting to the hardware. And all the software running on the server. And replacing the components of your server as new ones come out. Or maybe the whole server. And fixing failed components. And network issues. And running cables. And your power bill. And who has physical access to your server room. And the actual temperature of the data center. And paying a ridiculous Internet bill. You get the point. Managing your own servers is hard and requires a whole team to do it.

Isolation

I've heard people call this "cha-root" and "change root". I'm going to stick to "change root" because I feel less ridiculous saying that. It's a Linux command that allows you to set the root directory of a new process. In our container use case, we just set the root directory where the new container's new root directory should be. And now the new container group of processes can't see anything outside of it, eliminating our security problem because the new process has no visibility outside of its new root.

Portability

Suppose you're migrating an application from one environment to another or need to run multiple versions of the same app side by side on different servers. In that case, using containers makes sense because you can efficiently run these apps inside other containers without requiring code changes or worrying about configuring the environment.

Security

Let's say you're running a big server that's in your home and you're selling space to other people (that you don't know) to run their code on your server. What sort of concerns would you have? Let's say you have Alice and Bob who are running e-commerce services dealing with lots of money. They themselves are good citizens of the servers and minding their own business. But then you have Eve join the server who has other intentions: she wants to steal money, source code, and whatever else she can get her hands on from your other tenants on the server. If just gave all three them root access to server, what's to stop Eve from taking everything? Or what if she just wants to disrupt their businesses, even if she's not stealing anything?

Your first line of defense is that you could log them into chroot'd environments and limit them to only those. Great! Now they can't see each others' files. Problem solved? Well, no, not quite yet. Despite the fact that she can't see the files, she can still see all the processes going on on the computer. She can kill processes, unmount filesystem and potentially even hijack processes.

Enter namespaces. Namespaces allow you to hide processes from other processes. If we give each chroot'd environment different sets of namespaces, now Alice, Bob, and Eve can't see each others' processes (they even get different process PIDs, or process IDs, so they can't guess what the others have) and you can't steal or hijack what you can't see!

There's a lot more depth to namespaces beyond what I've outlined here. The above is describing just the UTS (or UNIX Timesharing) namespace. There are more namespaces as well and this will help these containers stay isloated from each other.

Namespaces

So let's create a chroot'd environment now that's isolated using namespaces using a new command: unshare. unshare creates a new isolated namespace from its parent (so you, the server provider can't spy on Bob nor Alice either) and all other future tenants. Run this:

Resource Management

What is Docker?

Docker is an open-source project that provides tools for creating and managing application containers. It also enables users to package their applications into containers, which are then run in a virtual machine like an operating system. Docker also provides an API for interacting with the images to create these containers.

Docker is a tool for building, running, and deploying containers.

tldr: Docker does a lot more for you than just this like networking, volumes, and other things but suffice to say this core of what Docker is doing for you: creating a new environment that's isolated by namespace and limited by cgroups and chroot'ing you into it.

Images

These pre-made containers are called images. They basically dump out the state of the container, package that up, and store it so you can use it later. So let's go nab one of this image and run it! We're going to do it first without Docker to show you that you actually already know what's going on.

Building Images

A Quick Note on COPY vs ADD

FROM node:12-stretch

USER node

WORKDIR /home/node/code

COPY --chown=node:node index.js .

CMD ["node", "index.js"]

This is something very powerful about Docker: you can use images to build other images and build on the work of others.

Layers

Multi Stage Builds

Hey, we're already half-way to ridiculous, let's make our image EVEN SMALLER. Technically we only need npm to build our app, right? We don't actually need it to run our app. Docker allows you to have what it called multistage builds, we it uses one container to build your app and another to run it. This can be useful if you have big dependencies to build your app but you don't need those dependencies to actually run the app. A C++ or Rust app might be a good example of that: they need big tool chains to compile the apps but the resulting binaries are smaller and don't need those tools to actually run them. Or one perhaps more applicable to you is that you don't need the TypeScript or Sass compiler in production, just the compiled files. We'll actually do that here in a sec, but let's start here with eliminating npm.

Docker Hub

Containers 2

Networking

If you've been using Docker for a while, you've probably seen some things it can do.

One of the reasons Docker containers and services are so powerful is that you can connect them or connect them to non-Docker workloads. Docker containers and services do not even need to be aware that they are deployed on Docker or whether their peers are also Docker workloads or not. Whether your Docker hosts run Linux, Windows, or a mix of the two, you can use Docker to manage them in a platform-agnostic way.

This topic defines some basic Docker networking concepts and prepares you to design and deploy your applications to take full advantage of these capabilities.

Networking in Docker provides several benefits:

It enables a more straightforward way of provisioning applications on top of existing infrastructure rather than creating a new one from scratch.

It helps simplify your development workflows by removing the need for setting up networks manually every time you deploy changes through CI/CD pipelines or via manual deployment processes.

Data Persistence

So far, we have learned that containers are ephemeral, temporary, and disposable. Docker has a few features that allow use to make containers stateful.

Bind Mounts

Volumes

Bind mounts are great for when you need to share data between your host and your container as we just learned. Volumes, on the other hand, are so that your containers can maintain state between runs. So if you have a container that runs and the next time it runs it needs the results from the previous time it ran, volumes are going to be helpful. Volumes can not only be shared by the same container-type between runs but also between different containers. Maybe if you have two containers and you want to log to consolidate your logs to one place, volumes could help with that.

We can create volumes on a host system with different namespaces than the client applications running within them. For example, suppose you have an application running inside a container with access to some directory via a volume mounted from within the container. In that case, you can also use that same volume for external access without needing to change any files inside or outside the container itself. This makes it possible for many applications to share a single set of files without compromising security or performance due to conflicting paths between containers (e.g., one container having access to another container's volumes).

Volumes can be resized as needed. -Volumes support snapshotting to create backups of your data at any time.
Containers can be started from a volume, allowing for easy debugging and testing of code without starting containers from scratch.

Volumes are more efficient than bind mounts in terms of memory footprint and disk usage. Bind mounts require a directory entry in each container to access files outside the container's path. This adds complexity to your application's underlying codebase, which may introduce bugs or cause other undesirable behavior due to issues with file permissions.

Volumes are the preferred mechanism for persisting data generated by and used by Docker containers. While bind mounts depend on the host machine's directory structure and OS, volumes are completely managed by Docker. Volumes have several advantages over bind mounts:

Volumes allow you to create a temporary file system independent of your host filesystem, which means you can persist data even when your host machine crashes or reboots.
Volumes provide easy access to files from within a container. You can mount a volume directly into your container, allowing you to pull in files from outside of your container (e.g., from S3). This makes it easier to build robust applications that scale based on their runtime requirements.
Volumes allow for quick removal of data once it's no longer needed so that resources aren't wasted when they aren't being used anymore (e.g., persistent volumes delete older versions of files).

Dockerize a Simple Node.js application

Explain the steps in the Dockerfile!

Development Tips

Local Develpment
.gitignore

Conclusion

Whether you're considering using containers for your next project or simply want to get a deeper understanding of them, having this information at your disposal will help you make the right decisions regarding containerization. Thank you for reading this article, and good luck with your project!

Control Groups Chroot Other Stuff

Web Performance - Renderland's Saga, Book 2

Emmanuel Gatwech — Fri, 20 May 2022 20:09:37 +0000

The Galactic Federation 👮🏽👽🧝🏾🤖 - Fourth Act

Despair and frustration will not shake our belief that resistance is the only way to liberation. - Emile Lahoud.

In the first part of the series, we learned about Renderland's history, its new savior, and the invaders who sought to destroy the planet.

The Galaxy is governed by a federation known as the Feds or the Federalis, they are an intergalactic organization that governs thousands of planets and galaxies including the Web Galaxy.

The Bugs 👾

A coalition of criminals who were sentenced to and then escaped from the Devil's Planet intergalactic prison, a maximum-security prison for the galaxy's worst of the worst. The bugs seek to dismantle the Feds.

The attack on Renderland was the first of many attacks that soon followed after. Their primary goal is to destroy the Pillars and Federation's RAIL Model in Renderland and eventually the entire Federation.

RAIL Model 🛤

RAIL is a user-centric performance model developed by the Feds. It provides a structure for thinking about performance. The model breaks down the user's experience into key actions (for example, tap, scroll, load) and helps you define performance goals for each of them.

Response

is the time it takes from user interaction (such as a tap) to paint. Basically its the time between user interactivity and feedback from the interaction

Based on human perception, it's recommended that user-initiated actions are responded to within 100ms in order to make users feel like their interactions are instantaneous.

Animation 🅰

Animation is a technique used to make objects appear like they're moving. The Feds have defined a budget for each frame in animation which is 16 ms (1000 ms / 60 frames per second 16 ms).

Browsers generally need an average of 6 ms to render a single frame, that's why the guideline recommends 16 ms per frame.

Humans view animations that take 16ms or less per frame as fluid, smooth and consistent

Idle

Maximize idle time to increase the odds that the page responds to user input within 50 ms. Complete work in 50ms chunks so as to give the user a sense that the page is responsive

Load 💔

Loading pages should be seamless and in order to acquire that, the recommended time a page should take to load is 1000ms (1s).

When pages load slowly, user attention wanders, and users perceive the task as broken. Sites that load quickly have longer average sessions, lower bounce rates, and higher ad viewability.

The Chairman 🏾

A bearded elderly man appeared to us in hologram form to assure us that the federation is fully aware of Renderland's situation and is currently mobilizing re-enforcements to rescue the planet. They've shared a list of measures to be taken to hold back the bugs until help arrives.

It was later revealed that the elderly man was the Federation's chairman and it was non-other than Dennis Richie!

Here is what you can do to stall the bugs until re-enforcements arrive

Code Split
Compress, Cache, and Minify (CCM)
Optimize Images

Code Splitting

The natives had the ability to split and control their body parts at will. This makes it possible to split code into various bundles or components which can then be loaded on-demand or in parallel.

💡 There are two main types of code-splitting.

Route Based 🚏

Route-based code-splitting is a method of delivering code in chunks based on user navigation.

Component-Based

Component-based code splitting is a method that's used in component-based frameworks/libraries such as React.js and Vue.js.

Caching

Besides Minification, the natives of Renderland also had the ability to create clones of themselves to be used in Cacheland.

Caching is the process of storing copies of files in a cache, or temporary storage location so that they can be accessed more quickly. Caching can be done on both the server-side and client-side.

💡 There are two main types of caches.

Server-Side Cache

Server-side caching is beyond the scope of this article but you can utilize a NoSQL key-value store such as Redis to perform caching. Redis also provides a Client-Side caching mechanism but I haven't tried it yet. You can learn more about it here.

Client-Side Cache

The process of caching assets on the client-side of things. This can be done via HTTP or a Service Worker.

Browser (HTTP) cache

When a browser visits a page for the first time, it stores copies of assets in its HTTP cache. It then serves non-expired requests from the cache. HTTP deals with time-based (TTL) resources.

HTTP caching occurs when the browser stores local copies of web resources for faster retrieval the next time the resource is required. As your application serves resources it can attach cache headers to the response specifying the desired cache behavior

HTTP Cache Headers

Browser caching can be controlled via HTTP header options that can be set on the server.

Cache-Control
ETag
Last-Modified

Service worker cache

Service Worker caching requires a fetch event handler in an app's service worker file. Network requests are intercepted and responses are served from the worker's cache whenever possible.

It's generally recommended to not re-invent the wheel when developing production applications. Use Workbox instead of rolling out your own workers if possible.

Lifecycle

Before you could use a service worker, you must first register it via the ServiceWorkerContainer.register() method. The worker's lifecycle begins after it's successfully registered.

💡Events

To utilize workers, you'd generally listen for events on a worker and then respond accordingly.

Download

The worker is downloaded into the client.

Install

The worker is being installed. If successful, then this is a good time to prepare the worker for usage.

Active

Installation is successful and the worker is ready to receive events. The point where this event fires is generally a good time to clean up old caches and other things associated with the previous version of your service worker.

💡 Caching strategies:

Cache only

Generally used for content that's considered static to a particular "version" of a website. They're usually cached in the install event of a service worker.

💡 It's good for:

Static content.

Cache, falling back to the network

Generally used for building apps that are intended to be offline-first.

💡 It's good for:

Application shell and common resources such as logos.

Network only

This strategy skips the cache and sends requests directly to the server. It's mainly used when your app requires content to always be up to date. It's also ideal for requests that cannot be cached such as POST or PUT requests.

💡 It's good for:

Payment related applications
Content that changes frequently.

Compression

In the previous part, the bugs have infected unoptimized assets with a virus that caused them to grow in size which makes it difficult for them to travel and respond to requests.

The A-Team came up with a temporary technique to reduce their sizes thus reducing their transfer times. This technique is known as compression.

HTTP Compression

💡 There are mainly two types

Lossless means you can retrieve the original data.
Lossy means you might not get the original data due to a change in its quality.

Minification

Minification refers to the process of making assets smaller by removing comments, unnecessary characters, and white spaces.

Optimize Images

Optimizing images allows the creation and display of images using the best format, size, and resolution according to network and device constraints.

Formats

There are new image formats that were developed specifically for the web. They offer greater compression and quality benefits.

WebP is a format created by Google and it was intended as a replacement for jpeg, PNG, and gif formats.

Accessibility

Adding ALT tags can bring about accessibility benefits and a better user experience for users who fail to load images due to network or device constraints.

<figure>
    <img src="awesome-photo.png" alt="An awesome photo!!" />
</figure>

A well-written ALT tag can help your users visualize an image if it fails to load for whatever reason. It can also help images rank higher in search.

Aspect ratio and `srcset`

`srcset`

This is an HTML attribute that allows you to specify different image sources to serve depending on factors such as the width of a device or its resolution.

Aspect ratio

Not using the appropriate aspect ratio can cause cumulative layout shifts.

Lazy-loading

Setting an image's loading attribute to lazy can help the browser prioritize when to load the image

Rendering Patterns

We've previously discussed the two main rendering patterns, namely Client Side Rendering (CSR) and Server Side Rendering (SSR). Now it's time to introduce some new rendering patterns that combine the best of the two worlds.

Static Generation

A static site generator is a tool that generates a full static HTML website based on raw data and a set of templates.

`SSR` with Rehydration 🌨

This pattern uses a pre-built DOM with components rendered as HTML. The app then loads the remaining data in the client side.

CSR with Pre-rendering 🚧

This pattern renders an app shell to static HTML during build time .

The Reinforcements 🚀 - Fifth (Final) Act

Geography has made us neighbors. History has made us friends. Economics has made us partners. And necessity has made us allies. Those whom nature hath so joined together, let no man put asunder. - John F. Kennedy

The Render League and the A-Team has followed the Federation's advice and they managed to hold some of the bugs back. However, the danger still remains as the bugs were still fixed on destroying the pillars.

The techniques listed in the previous act could enhance an app's performance but they aren't really sufficient. Modern apps are quite complex and they contain many moving parts.

Frameworks

A squad of elite Federation warriors known as the Frameworks has finally arrived at the scene. They were described as evolved forms of Scripts. They were.

Dennis Richie has previously mentioned that Scripts have the ability to transform just like the Super Saiyans in Dragon Ball. This transformation gives JS a set of new powers and abilities that will make it easier to fight the bugs. Dennis revealed that the current form of JS is known as Vanilla and that it could evolve into much more powerful forms.

React.js

React is a free and open-source front-end JavaScript library for building user interfaces based on UI components.

At its core lies the mechanism that tracks changes in a component state and projects the updated state to the screen.

The virtual DOM (VDOM) is a programming concept where an ideal, or virtual, representation of a UI is kept in memory and synced with the real DOM by a library such as ReactDOM. This process is called reconciliation.

Code-Splitting

Code splitting in React can be achieved using a bundler like Webpack or Browserfy.

Before


import { robot } from './js';

console.log(robot(16, 26));

After


import("./js").then(robot => {
  console.log(robot.add(16, 26));
});

Conclusion

Book 1 introduced a lot of concepts and book 2 expanded upon them. Book 3 shall include practical examples of most of the concepts presented in this article.

It's highly recommended to spend extra time reviewing and practicing these concepts. Learning by doing is most often the best way to learn IMHO.

Resources 📚

NB: Part 3 of this series will explore the practical aspects of web rendering performance. I decided to break it into parts because I don't want to overwhelm the reader.

Fun Fact: This article's story line was inspired by

This other Tweet
Dragon Ball
Rick and Morty (Season 1)
read this https://twitter.com/adamlbunch/status/1527316680258383874/photo/1

See you in Part 3!

Web Performance - Renderland's Saga, Book 1

Emmanuel Gatwech — Sat, 14 May 2022 02:14:00 +0000

Where Everything Began - First Act

"Knowledge is like money: to be of value it must circulate, and in circulating it can increase in quantity and, hopefully, in value." ~ Louis L'Amour

In February, I had a task to improve the performance of an NFT marketplace. I had surface knowledge of web performance at the time. I spent an insane amount of time researching and watching tech talks on videos. I decided to write this article to make the journey easier for you.

The Portal 👨🏿💻

Aimlessly looking for answers with a gazillion tabs open, my PC freezes with no solution in sight. I decide to shut down my PC and then go out for a walk to clear my thoughts.

I return 30 minutes later to find a strange blue light emitting from my room. It was coming from my PC which was still on but frozen. I try long pressing the power button but I end up getting sucked into the screen.

The Giant Robot 🤖

I wake up in a weird-looking room then I immediately get approached by a giant robot with the letters HTML on its chest.

🤖 Robot: Hi, I'm HTML5. I'm glad you woke up, welcome to Renderland!

👦🏿 Me: Where am I?

🤖 Robot: You're in Renderland.

👦🏿 Me: Render what???

What is Renderland? 🤔

Renderland is the planet on which Rendering takes place. It's the closest planet to the screen and it's what users see and interact with. It's located in the Browser's Solar System which is also under the The Web Galaxy.

This diagram shows how a typical request travels through the internet where it finally reaches a server which sends back a response to the client.

The response manifests different entities such as Styles, Markup, Scripts, Fonts, and other files. They represent the different life forms on Renderland. They live together to make up the content that you see and interact with.

The Citizens of Renderland 🪐

HTML, the planet's elder summoned us all for a meeting under the Sacred Tree.

🤖 Robot 1 I'm HTML, you've probably met my grandson, HTLM5. We're both from the Markup tribe and we make up the content of pages on the web.

🤖 Robot 2 I'm CSS from the Styles tribe, and we give web pages looks and style.

🤖 Robot 3 I'm JavaScript but you can call me JS, I'm from the Scripts tribe- no relation, and we practice making web pages interactive.

🤖 HTML A prophecy spoke of a FullSnack Engineer with a mechanical keyboard and an E mark who'd save Renderland. The Engineer spoke an ancient language called Code.

🤖 JS We believe you're the chosen one.

Renderland's History 🕰

Long ago, the robots lived in a faraway land known as ServerLand where they served a group of entities called clients. The clients lived in ClientLand and they all had different shapes and sizes.

A Serverland native is referred to as server and a Clientland native is referred to as client.

The request-response-cycle is a model that describes how clients and servers communicate over a network via a protocol such as HTTP or Web Sockets.

Rendering

Rendering is the process of turning a web page's assets (HTML, CSS, JSS, and other static assets) into interactive content on the browser. Rendering steps include style, layout, paint, and, in some cases, compositing.

Critical Rendering Path (CRP) 🛣

The Critical Rendering Path is the sequence of steps the browser goes through to convert the HTML, CSS, and JavaScript into actually visible pixels on the screen.

The Render Tree 🌲

HTML5 and CSS then summoned me to the Sacred Tree. They began explaining the history of the tree and how it came to life.

Document Object Model (DOM) describes the structure browsers use to represent HTML elements internally.
CSS Object Model (CSSOM) describes the structure browsers use to represent CSS styles internally.

Both are represented internally as a tree-like structure that allows programs to interact with the CSS and HTML content of a web page.

The Render Tree is the product of combining DOM and CSSOM trees. It defines the structure of a web page. The tree contains only the visible elements of a web page.

The browser calculates the layout of each visible element and then paints it on the screen with the help of the Render Tree.

Layout (Reflow) 🗺

Browser computes the geometry of the layout and its elements based on the render tree.

Paint 🎨

Browser paints pixel by pixel to create the visual representation we see on the screen. Using the Render Tree, the browser engine calculates the position of each visible element of a web page.

Rendering in Short

Assets Converting the web page's HTML and CSS code into DOM and CSSOM.
Render Tree Constructing the Render Tree by combining DOM and CSSOM.
Layout Calculate the size and position of each node.
Paint painting elements on the browser's screen for users to view.

Rendering Patterns

The robots then began explaining how rendering is practiced in Renderland.

Server Side Rendering (SSR) 🛠

The most ancient form of Rendering. This pattern generates the full HTML for the page content to be rendered in response to a user request.

Client Side Rendering (CSR) 💻

This form of rendering became popular during the Ajax era in 2005. Ajax which stands for Asynchronous JavaScript and XML allowed developers to build client-side applications.

In this pattern, the server renders a skeleton of an HTML container whilst the client handles the logic required to render a web page. The client takes care of fetching, templating, routing, etc.

Guardians of Renderland (The Pillars 👺)

Also known as the Web's Vitals, they are Renderland's guardians of performance. They measure and report any issues that may affect the performance of a web page.

This screenshot is from Lighthouse's report on Hashnode's home page.

First Pillar (First Byte) 1

This Pillar is responsible for reporting the arrival of the very first byte of incoming data. It helps quantity a server's response time by measuring the latency of a round trip to and from said server. It precedes every other Pillar.

Time to First Byte (TTFB) The time between the initial request and the arrival of the first byte.

Second Pillar (Paint) 🎨

This Pillar measures the time a browser takes to paint pixels on a screen. The shorter the time, the better the performance.

First Paint (FP)

The first instance of content that appears on the browser. Think of it as the first drop of water when you open the tap.

First Contentful Paint (FCP)

Measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page.

💡 The recommended FCP score is 1.8 seconds or less

Largest Contentful Paint (LCP)

The time when the main page content becomes visible. It consists of the initial HTML document + LCP Resource.

💡 The recommended LCP score is 2.5 seconds or less

Third Pillar (Time to Interactive) 🎬

Also known as (TTI), represents the state at which a web page is ready to respond to events and user interactions. This is made possible when all the Scripts tribe members have arrived/loaded.

TTI is reached only after FCP. Having a huge gap between these two metrics causes serious problems.

💡 The recommended TTI score is 3.8 seconds or less

Total Blocking Time (TBT)

The total amount of time between FCP and TTI. It means that the event handlers are registered for most visible page elements, and the page responds to user interactions within 50 milliseconds.

💡 The recommended TBT score is 200 milliseconds or less

Attack on Renderland 👾 - Second Act

"If you know the enemy and know yourself, you need not fear the result of a hundred battles. If you know yourself but not the enemy, for every victory gained you will also suffer a defeat. If you know neither the enemy nor yourself, you will succumb in every battle." - Sun Tzu, The Art of War.

We receive multiple reports from different locations. Web pages are unresponsive, some fail to load and others are painfully slow.

It was later revealed that Renderland is being invaded by an intelligent species of bugs. They came in different shapes and sizes and wreaked havoc on the planet.

Bugs 👾 vs Pillars 👺

The bugs have directed their first attack on the pillars. Let's see how each metric affects performance.

First Pillar (First Byte) 1

The bugs that affect this network usually manifest in the form of network or device issues.

The following factors may affect TTFB

The Network protocol, HTTP/1 instead of HTTP/2 for example.
Longer network request phases. You can learn more about this here.

Second Pillar (Paint) 🎨

This metric mainly reports performance issues related to static/viewable content. The bugs that affect this metric usually manifest in the form of unoptimized assets such as HTML, CSS, and images.

Third Pillar (Interactivity) 🎬

The bugs that affect this pillar mainly focus on scripts since it focuses on issues related to the interactivity/usability of a web page. Unoptimized JavaScript is the biggest offender in this category because it needs to be parsed and compiled before it's finally executed.

Miscellaneous Performance Bottlenecks

These are some of the most common web performance bottlenecks.

Blocking Resources

These include the scripts, styles, and HTML imports that block or delay the browser from rendering content to the screen.

Bundle Size

This is the amount of JavaScript a user will have to download to load your website. A larger bundle size means users will have to wait longer before they could interact with your site.

Network Requests

Enormous network payloads reduce the application's performance. Also, higher latencies make requests take longer to travel to and from the server.

DOM/CSSOM Bottlenecks

Event handlers are costly.
Layout thrashing and reflows cause re-renders meaning the browser will have to recalculate and re-paint content with every reflow.

The Resistance - Final Act

"With great power comes great responsibility."

As developers, we must make sure that the apps we build are performant and resilient. This section will equip you with new superpowers to assume this role.

Measuring Performance

To defeat the bugs, we need fully understand to how to measure the impact of their attacks on performance.

💡 How is performance measured?

Field Testing Involves real users loading and interacting with the page.
Lab Testing Using tools to simulate a page load in a predictable environment.

Field Testing

Also known as Real user monitoring (RUM) refers to the process of recording user interactions on a production website.

Examples of RUM software: InfluxDB, Google Analytics, CloudFlare, Stackify, etc.

This topic is beyond the scope of this article so we'll jump right into Lab Testing.

Lab Testing

Refers to the process of testing an application in an environment such as development or staging before the site is released to the public.

Rescuing the Pillars

Learning how to measure the performance of a website was the first step. Now we need to learn how to optimize the metrics we measured.

First Pillar (First Byte) 1

This metric indicates how fast or slow a server is. It measures the latency of a round trip to and from a server.

💡 Measuring TTFB

Field Web Vitals Library or Chrome's User Experience Report.
Lab The Developer Tools panel in web browsers or Web Page Test.

How to improve TTFB

Better server infrastructure (Using Load Balancers and Caches) for example.
Pre-connect to required origins for cross-origin resources.
Using HTTP2 if possible.

Second Pillar (Paint) 🎨

Asset optimization can play a huge role in improving this performance metric. Let's see how we can accomplish this.

💡 Measuring Paint Metrics

Field Web Vitals Library or Chrome's User Experience Report.
Lab The Developer Tools panel in web browsers or Web Page Test.

How to improveFCP

Eliminate render-blocking resources.
Minify CSS and remove unused JavaScript code.
Reduce TTFB.
Avoid enormous network loads and pre-load crucial requests.
Serve static assets with an efficient cache policy.

How to improve LCP

Reduce TTFB.
Optimize resource load times, for example compressing images, serving them in different sizes, using a CDN, etc.
Optimizing CSS, for example compressing, removing unused CSS and deferring non-critical CSS.
Shortening the Critical Rendering Path (CRP).
Deferring non-critical scripts and add scripts to the body of the HTML document.

Third Pillar (Time to Interactive) 🎬

You might be familiar with JavaScript's single thread nature, if not then this article might be a great resource for you.

💡 What is a Main Thread?

The main thread is where a browser processes user events and paints. The browser uses a single thread to run a page's JavaScript, as well as the Critical Rendering Path. The browser may not respond to user interactions if the main thread is blocked/occupied by another process.

How to improve TTI

1. Minimizing Main thread's work

We run most of our code on the main thread. Lifting off the burden or delegating some of this work to another Service can increase the performance of a web page.

2. Debouncing Events

Delaying the execution of event handlers can increase performance because it helps the browser avoid fast consecutive events. These events can block frames from completing, and can cause additional and unnecessary layout work.

3. Web Workers

Web workers can be used to delegate complex processes and run tasks in the background in a separate thread.

4. Minification

Minifying and deferring non-critical CSS/JavaScript can increase a web page's performance.

5. Code Splitting

Means the browser will only download the JavaScript users need at the time. For example, let's consider a web app with three pages, namely home, chat and notifications. Code-splitting allows you to download only the JavaScript relevant to your home page and then download the remaining assets on-demand or when a user navigates to a page that actually needs.

6. Event Delegation

Propagating or bubbling up an event in the hierarchy of the DOM tree can increase a web page's performance.

Additional Rendering Patterns

`SSR` with Rehydration 🌨

This pattern uses a pre-built DOM with components rendered as HTML. The app then loads the remaining data in the client side.

CSR with Pre-rendering 🚧

This pattern renders an app shell to static HTML during build time .

Miscellaneous Performance Tips

Detect and eliminate unnecessary re-renders. Why did you render is a great library if you're building an app using React.
Memoize values with React.memo/callbacks.
Analyze your packages if you're using WebPack. WebPack Bundle Analyzer is a great choice. I've personally used it to improve the performance of an NFT marketplace.

Conclusion

Choosing the right tool for the job is a critical skill for every Software Engineer. Software choices are usually determined by the project's requirements.

Resources 📚

I'm currently working on a few more sagas. Let me know if you're interested in more sagas in the comments below 😁

NB: Part 2 of this article. will explore the practical aspects of web rendering performance. I decided to break it into two parts because I don't want to overwhelm the reader.

Subscribe or follow to get notified!

Fun Fact: This article's story line was inspired by

This Tweet
Lupe Fiasco's The Cool.
Demon Slayer: Kimetsu no Yaiba.
Marvel Movies (Thor, Spiderman and Thor 2).
Attack on Titan.

TypeScript Utility Types

Emmanuel Gatwech — Tue, 12 Apr 2022 11:27:48 +0000

Introduction

In this article I'll be going over TypeScript utility types, explain their importance and also include some useful examples and use cases.

Utility types are built-in types that allow you to transform existing types into new modified types.

Say we have type A and we'd like to construct a new type B that may inherit, modify or exclude properties from type A.

We achieve this by using a utility type i.e type B = UtilityType<A, options> where UtilityType represents the type to be used and options describe the type of operation to perform e.g inherit, modify or exclude etc.

Utility types aren't supported by primitives except strings which offer Intrinsic String Manipulation Types to manipulate strings.

Utility types are usually used with compound types such as Interfaces and Union Types.

Before you get started

The TypeScript playground is an excellent place to experiment with Utility Types. It's highly recommended to practice what you learn in order to solidify your understanding of the topic.

Union Types

A union type is a type formed from two or more other types, representing values that may be any one of those types. We refer to each of these types as the union’s members.

Union types basically combine two or more types.

Unions support the following utility types:

Exclude
Extract

This example to demonstrate how to use utility types with unions.

Caveat: Union types are case-sensitive.

type ActivityType =
  "Swimming"
  | "Reading"
  | "Coding"
  | "Dancing"
  | "Jogging";

1 -Extract

Constructs a type by extracting from Type all union members that are assignable to Union.

Syntax Extract<Type, Union>

Where Type is the initial type and Union represents the entries we'd like to extract.

Demo

type CognitiveActivity = Extract<ActivityType, "Reading" | "Coding">;
// transformed type: "Reading" | "Coding"
const activity: CognitiveActivity = "Reading"; 
console.log(activity);

2 - Exclude

Constructs a type by excluding from UnionType all union members that are assignable to ExcludedMembers.

Syntax Exclude<UnionType, ExcludedMembers>

Where UnionType is the initial type and ExcludedMembers represents the entries we'd like to exclude.

Demo

type PhysicalActivity = Exclude<ActivityType, "Reading" | "Coding">;
 // transformed type: "Swimming" | "Dancing" | "Exercise";
const activity: PhysicalActivity = "Swimming";
console.log(activity);

Type Aliases and Interfaces

Type Aliases: A type alias is a name for any type.
Interfaces: An interface declaration is another way to name an object type.

This example to demonstrate how to use utility types with type aliases and interfaces.

Intersection types are types that combine properties from two or more types. They're usually used in conjunction with the following utility types.

The general syntax is

type A = {

};
type B = A & {
   bKey: string;
}; // includes all the properties in A and B


type ElectronicDevice = {
  name: string;
  USBPorts: USBPORT[];
  screenDimensions: Dimension;
  buttons: Buttons[];
  wifiConnectivity: boolean;
  manufacturer: string;
  memory: number;
}

This type represents the properties of an electronic device. Electronic devices come in a variety of shapes and sizes but they share a lot of core features such as buttons, memory, ports etc.

You can test the types in this example on this TypeScript playground.

1 - Pick

Syntax Pick<Type, Keys>

Constructs a type by picking the set of properties Keys (string literal or union of string literals) from Type.

Demo

type Calculator = Pick<ElectronicDevice, "name" | "buttons"> & {
  type: CalculatorType;
  // own types
}

2 - Record

Syntax Record<Keys, Type>

Constructs an object type whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type.

Demo

type DeviceType = "Analogue" | "Digital";

type SmartPhone = Record<DeviceType, ElectronicDevice> & {
  type: CalculatorType;
  // own types
}

const blackberry: SmartPhone = {
    Digital: {

    }
}

3 - Omit

Syntax Omit<Type, Keys>

Constructs a type by picking all properties from Type and then removing Keys (string literal or union of string literals).

Demo

type StopWatch = Omit<ElectronicDevice, "wifiConnectivity" | "USBPorts">;

4 - ReturnType

Syntax ReturnType<Type>

Constructs a type consisting of the return type of function Type.

Demo

const getUserByActivity = async (type: string) => {
  const response = await apiCall(url, params); // fake api call
  return response.data;
}
type NewUser = ReturnType<typeof getUserByActivity>
const user: NewUser = getUserByActivity(activity.type);

References:

TypeScript Utility Types

MongoDB Aggregation Framework

Emmanuel Gatwech — Fri, 01 Apr 2022 17:11:00 +0000

In this tutorial series, I'll guide through MongoDB's Aggregation framework and let you harness its powers to become a more efficient MongoDB user.

I won't assume any prior experience in this article. It's for you if you'd like to take your MongoDB skills to the next level and leverage its aggregation framework to perform even more expressive queries.

This blog series will dive deep into the aggregation framework as well as introduce you to some of the newly added features to MongoDB.

What is the Aggregation Framework?

Aggregations operations process data records and return computed results. Aggregation operations group values from multiple documents together and can perform a variety of operations on the grouped data to return a single result. In SQL count(*) and with the group by is an equivalent of MongoDB aggregation.

Why use the aggregation framework?

Expressive Filters

It gives a powerful set of tools to perform a wide variety of operations such as filtering, sorting, and grouping data.

Data Transformations

It allows you to transform your data in a very efficient manner. You could utilize aggregation operators to perform calculations and more.

Statistical Utilities and Data Analysis

You can use MongoDB Aggregation to perform powerful data analysis.

My previous job relied on the MongoDB aggregation framework to deliver statistical data for visualisations and decision making and that's why I grew to appreciate this framework.

There's plenty more that you can do with this powerful tool!

How to perform Aggregation in MongoDB?

MapReduce
Aggregation Pipelines
Single Purpose Aggregation Functions

Map-Reduce

The official MongoDB documentation site recommends using the Aggregation Pipeline for most use cases due to its simplicity and expressive nature.

An aggregation pipeline provides better performance and usability than a map-reduce operation.

Single Purpose Aggregation Functions

MongoDB also provides db.collection.estimatedDocumentCount(), db.collection.count() and db.collection.distinct().

All of these operations aggregate documents from a single collection. While these operations provide simple access to common aggregation processes, they lack the flexibility and capabilities of an aggregation pipeline.

Aggregation Pipelines

A visual representation of a MongoDB Aggregation Pipeline

db.products.aggregate([{ $match: { discounted: true } }]);

A MongoDB query to perform an aggregation operation.

What are pipelines?

A pipeline is a data processing method that relies on steps. You must at least have one operation in your database to perform an aggregation query.

Aggregation Pipelines

The aggregation pipeline is a framework for data aggregation modeled on the concept of data processing pipelines. Documents enter a multi-stage pipeline that transforms the documents into aggregated results.

In simple terms, a pipeline is a composition of stages where data from each stage will serve as input to the next stage.

An aggregation pipeline consists of stages.

Stages

A stage is a data processing step. A stage could be used to derive insights from data, make changes, perform comparisons, and more. Logically, I like to categorize aggregation stages into the following

CRUD Stages
Data Analysis Stages
Transformation stages
Composition Stages

The structure and syntax

You can perform an aggregation via the aggregate() method which is available on your native driver. This example will use TypeScript so make sure you have it installed!

We aggregate data using the MongoDB aggregate() method which is also available in mongoose. It accepts an array that represents an aggregation pipeline. This array could accept several objects with each being an aggregation stage.

Introducing Neno - Final

Emmanuel Gatwech — Fri, 01 Apr 2022 02:19:08 +0000

Neno

I've introduced the game and a bit of an explanation of the decisions I had to make while developing this game.

In this article, I'll be going over the different game features.

UPDATE: There game is now live at Neno

Project Structure

I've covered the project structure in the previous part of this article series. I also have a README.md file with in-depth explanations of what each component in the project does.

Copy the content of .example.env and then paste it in a new .env file in order to run this project locally.

DB structure

Game Components

Authentication

The game currently supports authentication via (only on localhost due to issues with terms of service policies).

Facebook
Google

I'm currently working on adding email/phone numbers. I'll also add the ability to play as a guest.

Home

The home screen shows a menu where you can perform the following operations

View game instructions
Modify game settings
Start a new game

Mode

Users can create rooms or join an existing room. You can only join public rooms at the moment. Private rooms will need an invitation code.

Creating Room

When a user creates a room, they immediately get redirected to the game lobby where they could chat with other room members until the game starts.

Joining an existing room

Users can browse a list of active rooms and join a room of their choice.

Game Lobby ⌚️

Users can chat with other members before the game starts. The host can customize the room's settings as well.

Only the host can customize or start the game.

Game Screen 🎮

Screen where user plays the quiz in real-time with their friends

Challenges 😩

I am having difficulties keeping the count down timer for each round in sync between the game players.

I know I'm supposed to store the timer state in the server but not sure how to keep it in sync. Will be addressing this issue over the weekend.

Current Bottlenecks

Implement words API.
I need to be able to show a live leaderboard.
Showing game events such as when a user joins or leaves a room.
Implementing optimistic ui for a more interactive user experience.

Planned Improvements 🏆

Fixing the timer synchronisation issue
Allow users to add friends so they could invite them into rooms they create.
Implementing a leaderboard feature
Solo and offline gameplay for when users have no connectivity.
Animations and audio to make the game more interactive.
Making it fully responsive (mobile version).
Serving static assets via s CDN
Refactor the logic in GameScreen to useReducer

Introducing Neno - Part 2

Emmanuel Gatwech — Thu, 24 Mar 2022 21:49:30 +0000

I've introduced the game idea and its rules in the previous part of this series. In this article., I'll be going over the architecture of the project.

This article is a work in progress and I'll frequently update it.

Game Requirements

The first step to building any real world application is requirements analysis and gathering.

Goal Building an online word guessing game with an early 2000's/grade school aesthetic.

Real time

The game is going to be online meaning we'd need to allow users to play in real time.

The game allows players to create or join public/private rooms and play with others in real-time. Such functionality is achieved via web sockets.

I'll be using GraphQL subscriptions to achieve this functionality since we're using Hasura.

I've enabled authentication via Facebook and Google to make it easier to invite friends for new games.

Retro aesthetic

I needed to use a UI library to simplify my development process because I wanted the game to have the following:

Consistent theme
Layout components
Customisable components

I found Chakra UI to be a good library because it gave me tons of flexibility by allowing me to use my own custom styles in most situations. I've only needed to use Chakra components for accessibility and well designed APIs.

Development experience

I chose Next.js as my framework due to it's performance optimisation and easy to follow structure.

Next.js is an opinionated framework for building server rendered applications.

State management

I want the state of my game to be predictable and I also wanted to limit the number of states that I'd have to deal with.

For this I'm going to be using xState which is a state management library that uses state machines.

If you're interested in learning more about state machines checkout this awesome article from Kent C. Dodds.

Directory Structure

I've used Next.js which is an opinionated JavaScript framework but I had an option to create my directorates.

📦src
 ┣ 📂Game
 ┣ 📂Rooms
 ┣ 📂User
 ┣ 📂components
 ┣ 📂hooks
 ┣ 📂layout
 ┣ 📂lib
 ┃ ┣ 📂graphql
 ┣ 📂machines
 ┃ ┣ 📂game
 ┃ ┗ 📂player
 ┣ 📂providers
 ┣ 📂utils

Root

The root consists of configuration files and project directories.

Config files

At the very root of my project, I have some config files which I had use to initialize the project.

nvm.rc to dynamically switch to the desired Node version for this project.
tsconfig.json for my TypeScript rules
codegen to generate types for my GraphQL schema
eslint.rc to enforce proper code styles and rule`
.husky I use it for pre-commit hooks to ensure that my code adheres to quality standards before pushing it. It mainly lints and formats my code before every commit.

Directories

I have structured my directories based on the domain.

Components

These are common UI components that are shared between different parts of the application. They include Button, Inputs timers etc.

Game

Contains game specific components.

Rooms

Contains room specific components.

Hooks

I have created hooks to help aid abstract my GraphQL operations. This is general structure for many of my network related hooks.

Here's how the raw gql mutation looks like:

export const INSERT_ROOM_MEMBER = gql
mutation insertRoomMember($member: rooms_members_insert_input!) {
insert_rooms_members_one(object: $member) {
id
role
roomId
member {
id
lastSeen
createdAt
email
}
}
}
`;

This is how it looks like after wrapping the mutation in a hook.

`
export const useInsertRoomMember = () => {
const [insertRoomMember, { data, loading, error }] = useMutation<
InsertRoomMemberMutation,
InsertRoomMemberMutationVariables

(INSERT_ROOM_MEMBER);
return useMemo(
() => ({
memberLoading: loading,
memberError: error,
member: data?.insert_rooms_members_one,
insertRoomMember: (member: OperationVariables) => {
return insertRoomMember({ variables: { member } }).then(
({ data }) => data?.insert_rooms_members_one
);
},
}),
[loading, error, data?.insert_rooms_members_one, insertRoomMember]
);
};

Machines

I use this directory to define state machines.

I have created two machines to represent/manage the state of my game.

player controls player specific actions
game controls the flow of the game

Providers

This is for global providers which I use to wrap my entire project. I mainly use two providers.

Theme to control theme of the entire game
Game to control the data of the game

Utils

A set of utility functions to help with the control of the game.

Lib

For any 3rd party libraries that I intend to use in my game.

Here is where I initialise my Apollo Client and point it to my running Hasura instance.

I've created a few tables and enabled read/write permissions for operations necessary to play the game.

Codegen

I have also setup codegen which is a very useful tool to generate types for your schema.

I have a codegen script in my package.json file which uses apollo-codegen to generates relevant types to be mapped to our GraphQL queries and mutations. These generated types are what we then use in our query and mutation hooks to state the types.

To specify to the codegen what we would like to generate, a file codegen.js is passed to it.

Game Logic

Players are required to guess 4 words within 40 seconds.
Active players are shown along with their results for each round.
The last player to submit is eliminated while the others proceed to the next round.
Each round generates a new letter and thus a new set of words to be guessed.

Introducing Neno - Part 1

Emmanuel Gatwech — Mon, 14 Mar 2022 15:51:10 +0000

Neno

I'll be sharing my progress in building Neno, an online word guessing game. This is going to be my entry for the Hasura x Hashnode Hackathon and my first ever Hackathon entry.

A little story 📖

I was reminiscing with my little sister about our childhood and all the fun we had. Life was fun and we had little to no worries.

We talked about all the games we played as kids and she showed me modern versions of Snake Xenia and Bounce which we used to play on my Nokia 3310.

Playing those games evoked so much nostalgia it made me feel I should revisit all of our childhood games.

That's why I decided to bring one of my favourite childhood games into life. We didn't really have a name for it that's why I struggled finding a name for this project 😂

I ended up naming it "Neno" which translates to "Word" in the Swahili language.

Neno is a modernised online version of this game. It's played in groups, minimum of 2 and maximum of 8.

Players are assigned a letter and each member is required to come up with 3 words that start with the letter.

There's a timer and the fastest player to guess all the words correctly wins the round.

Game Modes

Solo 🙌🏿

Good for practice
Test your guessing skills against a timer and see how many words you can guess in 3 minutes

Tournament 🏆

The player with the lowest score is eliminated in each round.
The last remaining player wins the game.

Initial steps

Tech setup 👨🏿‍💻

I created a new Hasura project and connected to a Heroku hosted PostgreSQL instance.
I then created a public Github Repository for the project.
Pick a tech stack for the project (GraphQL Apollo, Next.js, Chakra UI and xState).

Brain storming 🧠

I had a brain storming session where I decided

The game will be online and will have public/private rooms (max 8 players).
The game will have a grade school/early 2000s with a modernised touch kind of aesthetic.
The game will have a chat room where players could chat before and after a game has ended.
Search for game assets that'll match the desired aesthetic.

Next Steps 💡

Highlight different game components.
Project setup process on Hasura and Github.
Code structure an organisation.
Tech plan for the project.

Let's connect 🤙🏿

I'm active on Twitter, Github and also Hashnode!

Understanding how Git works

Emmanuel Gatwech — Sat, 29 Jan 2022 13:39:47 +0000

This article will help you gain a practical understanding of Git's most commonly used features. Having a solid grasp of these concepts will help you avoid common mistakes and also use Git more efficiently.

For beginners, it's recommended to read the article from start to finish. Experienced users could use it as a reference guide.

What is Git?

The official Git website defines it as

Git is a free and open-source distributed version control system designed to handle everything from small to very large projects with speed and efficiency. Git is easy to learn and has a tiny footprint with lightning-fast performance.

Why should you use Git?

Git allows you to track bugs by inspecting the commits that led to them.
Automate deployments of code via CI/CD pipelines where each commit triggers a new build.
Git allows you to keep track of changes in your files and manage their versions over time.
Code quality assurance where you could have pre-commit hooks that ensure your code adheres to a particular standard or style guide.

Structure

A Git project consists of a Repository, a Working Tree, and a Staging Area.

How does Git work?

A file has to go through these steps to be processed in Git

Working Tree

Th Working Tree in Git is the directory containing all of your files (track and untracked). Every file and subdirectory is eligible to be added to the staging area.

Changes in the working tree are tracked by the index in Git.

Staging Area

This is the step when a file is added from the working tree to a special area known as the staging area. Git recognises this file and keeps track of the changes to it.

History

A commit log and HEAD will point to the most recent commit.

Git Repositories

A Git repository also known as a repo is a container for your project. Initialising a new Git repository creates a hidden directory.git/ inside the project that allows you to keep track of all of your changes and allows you to manage your work using various commands.

I recommend visiting the ./git directory and navigating it to understand how Git represents and manages files internally

You'll most likely encounter the following objects HEAD, index, logs, and packed-refs in the .git/ directory.

Initialising a git repository

git init

The distributed nature of Git gives you the ability to collaborate with others on the same project with each having a local copy and a remote copy that is always kept in sync between all collaborators.

A Local Repository.
A Remote Repository also known as a remote.

Working Tree

The working directory consists of files that you are currently working on. You can think of a working tree as a file system where you can view and modify files.

A working tree consists of the files you're currently working on. Files are usually stored in the same directory as the .git/ folder.

The Index

Also known as the staging area is where commits are prepared. The index compares the files in the working tree to the files in the repo. When you make a change in the working tree, the index marks the file as modified before it is committed.

State in Git

A file in Git could be in one of the 4 stages

You can view the state of your repository by running the following command.

git status

Untracked

Existing in the working directory but has not been staged yet.

Staged

Now in the staging area but has not been committed yet.

Modified

Has been added to the staging area but was subject to a change. Items have to be re-added to the staging area after every change.

Committed

The file is now committed and can be pushed to a remote branch.

Commits in Git

A commit is a snapshot of what the working tree looked like at the time. Commits are stored in the ./git/objects/ directory.

A commit is represented as a Sha1 hash that contains the following information.

Author
Date
Message

Git is Distributed

Distribution in Git means that everyone gets their own version to control. All changes are local to users unless explicitly shared and maybe merged using a version control provider such as Github or Gitlab.

A distributed version control system is a system that allows you to track changes to files collaboratively.

This allows you to collaborate with others on the same project. Git offers a feature called branching to separate your work and it's generally recommended to work on a different branch other than the main.

Branches in Git

A Git branch is similar to a tree branch. It belongs to the same repository but might contain different data. You can create new branches and more! Branches are managed via references.

Remote Repository

A remote in Git is a common repository that all team members use to exchange their changes. In most cases, such a remote repository is stored on a code hosting service like GitHub or on an internal server. In contrast to a local repository, a remote typically does not provide a file tree of the project's current state.

You need a version control provider that supports Git to work with remote repositories. Gitlab and Github are popular options.

Remote repositories are useful if you'd like to:

Sharing your code with others.
Collaborating on a project.
Contributing to other people's projects.

You can create your own remote repo or use an existing repo, I'll show you how to do both.

Creating a remote repository You create a remote by running the following command

git remote add <origin>< https://github.com/user/repo.git>

This command takes two arguments

Name which is origin in this case
Url points to the location of the remote repository.

Using an existing remote repository There are generally two ways to do this. You could either clone the project and push code directly, provided that you've been granted access to write into it or use the Git Workflow by forking the project and then making contributions.

Cloning

git clone <origin>< https://github.com/user/repo.git>

This creates a copy of that repository on your machine with the origin pointing towards this repository.

Forking

Contributing to other people's repositories

git clone <origin>< https://github.com/user/repo.git>

Staying in sync

It's important to stay in sync when collaborating on a project and Git provides different ways to do it.

We'll look at two strategies to keep your work in sync.

Git Merge and Rebase

These are two common methods Git uses to keep your files in sync when collaborating with others on a project.

Merge

You merge by pulling the remote repository changes into your local branch. You have to make sure that your staging area is clear before attempting a merge. The newly added changes will be added via a merge commit.

Rebase

Rebasing is integrating changes from one branch into another.

Interactive Rebase

This is a type of rebasing where Rebasing files is quite straightforward files in Git is a simple process.

Squash

This command allows you to squash the last n commits into a single commit. This is really nice if you'd like to have a neat commit history. It's usually recommended to use the last commit message but you can totally customise the message.


commit 5b937deaf4f6ae6f2239a7ac488ece186ff573d3
Author: `<Your Name> <yourname@domain.com>`
Date: Tue Dec 1 10:41:41 2020 +0000

commit 5b937deaf4f6ae6f2239a7ac488ece186ff573d3
Author: `<Your Name> <yourname@domain.com>`
Date: Tue Dec 1 10:41:41 2020 +0000

commit 5b937deaf4f6ae6f2239a7ac488ece186ff573d3
Author: `<Your Name> <yourname@domain.com>`
Date: Tue Dec 1 10:41:41 2020 +0000

This is not a Git command, it's rather a concept that can be implemented via a rebase.

Ideal for This command is useful if you'd like to keep your commit log/history clean by combining all of your commit messages into a single message.

Git Stash

Allows you to save work without committing it. You stash changes by running git stash on the currently active directory.

Stash Pop Retrieves the latest stashed changes.

Stash apply <n> where n is the stashed item. Applies a particular change from your stash list. I use this feature a lot when I'm required to push code for a review while still experimenting with an idea locally.

Ideal for

experimenting with an idea locally.

Miscellaneous Git Commands

Amend
Revert
Cherry Pick

Amend

A Git command cannot be edited, the Sha1 hash contains commit-related metadata such as the author and date of creation.

Amending a commit means creating a new copy of that said commit with a new message.

git amend -m commit.

Revert

The git commit --amend allows you to edit your last commit.

Stash

The git stash command allows you to save your changes.

Writing better commit messages

Add a descriptive name related to the task the commit addresses. The name of the commit should summarise the reason for the commit.
Use active voice, simple descriptions.
I recommend following the Conventional Commits Spec, a specification for adding human and machine readable meaning to commit messages.

Commit messages are pre-fixed with tags such as feat:, fix: to insinuate intend behind the commit.

Resources

Official Git Documentation
Git Tower