Empowering Innovation: Unveiling the Impact of Open Source Project During My Internship Journey

Expressing my heartfelt gratitude to Kibo School for granting me the invaluable opportunity to embark on an internship journey with CodeDay Working alongside two fellow teammates on a project, and under the mentorship of Papa Kojo Ampim-Darko, I found myself in an environment of growth and collaboration.

During my enriching summer internship, I had the privilege of contributing to the open-source project Zulip, an innovative team collaboration tool with a unique topic-based threading system. This experience allowed me to not only enhance my technical skills but also provided a platform for me to appreciate the art of self-directed problem-solving in the realm of software development.

Zulip, with its cutting-edge topic-based threading approach, brings together the best of email and chat to create a productive and delightful remote work environment. This open-source project, used by Fortune 500 companies and countless organizations, fosters live and asynchronous conversations for efficient collaboration.

The Task:

Tweak Avatars for Bot Users

My initial challenge was to add an indicator for Bot users. The aim was to add an indicator to Bot users’ avatars to provide a clear distinction between a Bot and a Guest user from other users.

Navigating the Zulip Codebase

The Zulip codebase, being extensive, presented its own set of challenges. My journey involved navigating through the codebase, identifying the relevant files, and understanding the intricacies of the implementation. This process allowed me to familiarize myself with the project’s architecture and code organization.

The Challenges

  • In approaching the task, got into the following challenges :
  • Identifying the relevant files containing avatar-related code.
  • Distinguishing bot user rendering within a large codebase.
  • Deciding where to address the issue: avatar generation or frontend display.
  • Understanding Zulip’s code structure and organization.
  • Setting up the code on a new Linux environment. How to run the code on a new environment (Linux)?

The Solutions

To be able to solve these challenges, I took the following steps:

Documentation: I read Zulip’s documentation about setting up the environment, contributing, and best practices. I learned how to set up Linux and use it for editing.

Codebase Exploration: I used the search function in the codebase to find relevant code related to avatars. I found files like “web/styles/app_components.css, web/styles/popovers.css, web/templates/message_avatar.hbs, web/templates/user_info_popover_title.hbs, web/templates/user_profile_modal.hbs, zerver/lib/avatar.py, zerver/models.py”, which were relevant to avatars.

Narrowing Down Search: I narrowed down my search to the files I found and focused on the relevant code sections.

Technologies

Zulip’s tech stack includes a variety of tools and technologies, such as

  • Django: A high-level Python web framework that provides the foundation for Zulip’s server-side functionality.
  • PostgreSQL: An open-source relational database management system used by Zulip to store and manage data.
  • Redis: An in-memory data structure store used for caching and handling real-time features like notifications.
  • Tornado: A Python web framework and asynchronous networking library, used for handling real-time events and WebSockets.
  • Handlebars: A templating engine utilized to create dynamic templates on the client side for rendering user interfaces.
  • Node.js: A JavaScript runtime that allows Zulip to execute JavaScript on the server side, enabling efficient real-time features and server scripting.
  • React: A JavaScript library for building user interfaces, used in Zulip’s web client to create dynamic and responsive UI components.
  • Redux: A predictable state container for JavaScript apps, used with React to manage the application’s state and data flow.
  • Less: A CSS preprocessor that enhances the styling capabilities of Zulip’s user interface.
  • Webpack: A module bundler used to bundle JavaScript files, CSS, and other assets for efficient delivery to the browser.
  • Babel: A tool for converting modern JavaScript code into versions compatible with older browsers.
  • Puppeteer: A headless browser tool used for automated testing and generating screenshots of Zulip’s user interface.
  • Python: Besides Django, Zulip’s server-side codebase involves the use of Python for various features and components.
  • GitHub: The platform where Zulip’s source code is hosted, enabling collaborative development and version control.

Solving the Tasks

After identifying the relevant files to change (`web/src/popovers.js, web/styles/app_components.css, web/styles/popovers.css web/templates/message_avatar.hbs, web/templates/user_info_popover_title.hbs, web/templates/user_profile_modal.hbs, web/tests/popovers.test.js’.), We made the following changes:

  • In web/src/popovers.js, We added the is_bot parameter to render the bot user avatar appropriately.
  • In web/styles/app_components.css, We added styles to differentiate guest and bot avatars from other users’ avatars.
  • We consolidated avatar styles in web/styles/app_components.css from web/styles/popover.css for consistency.
  • In web/templates/message_avatar.hbs, We added a parameter to check if it’s a bot user.
  • In web/templates/user_info_popover_title.hbs and web/templates/user_profile_modal.hbs, We added checks to determine the type of user avatar to be displayed.
  • In web/tests/popovers.test.js, We wrote test cases to ensure the changes were working as expected.

Pull Request and Collaborative Reviews

After implementing the avatar changes for Bot users, We submitted a pull request to Zulip. The collaborative nature of open-source development came to light as We engaged in conversations with reviewers and made iterative changes based on their valuable feedback.

Valuable Feedback and Growth

Reviewers provided insightful feedback on code style, CSS consistency, and commit message discipline. This iterative feedback loop allowed me to refine my contributions and align them with Zulip’s standards. I also learned the importance of adhering to guidelines and maintaining consistent coding practices.

Knowledge Acquired

  • Codebase: Getting used to an extensive codebase in Zulip gave me hands-on-experience in understanding a complex project’s structure.
  • Problem Solving: Encountering challenges such as identifying relevant files and deciding where to address the issue helped me develop problem-solving skills.
  • Technologies stack: I gained exposure to new tech stack including Node.js, React, Webpack, Babel and Puppeteer.
  • Testing Skills: Writing test cases improved my knowledge in testing.
  • Community: Contributing to a project like Zulip exposed me to a broader perspective on software development.
  • Self-Directed Learning: Understanding the codebase improved my knowledge as a developer.

Conclusion: The Power of Open Source

My journey with Zulip taught me the significance of open-source collaboration, self-directed learning, and the value of community-driven development. Contributing to an impactful project like Zulip not only enhanced my technical skills but also fostered my appreciation for the global community that comes together to create exceptional software.

The link to my linkedin post is here

BLOG POST

Loops benefit computer science students by saving their time while coding. It also helps them to reuse codes instead of writing codes all over from scratch. In this post I will teach you how to use Loops. As you follow along with the post, try to practice the activity along. Remember as a computer science student you learn more from practice.

LOOPS

Loops are a fundamental aspect of programming, and are used repeatedly to execute a block of code for a specified number of times, or until a certain condition is met. They are a key tool for automating repetitive tasks and are used extensively in a wide variety of applications.

There are several types of loops commonly used in programming, including:

  •  For Loops
  • While Loops
  • Do-While Loops

For Loops

For loops are used to repeat a block of code a specified number of times. It is a good fit when we want to run a block of code a definite number of times, or when we want to iterate over a list of things. For loops are useful when you need to repeat a task a known number of times. See this example and you can copy the code to practice it.

for i in [5, 4, 3, 2, 1] :    print(i)print(‘Blastoff!’)

  The output will be:

5

4

3

2

1

Blastoff!

While Loops

While loops are used to repeat a block of code as long as a specified condition is true. The condition is checked before each iteration, and the loop continues to execute as long as the condition remains true. While loops are useful when you need to repeat a task an unknown number of times. For example, we want a code to keep going like in the case of a password the program might ask a user for their password until they enter a valid password. The program doesn’t know ahead of time the number of tries the user will need. Instead, it knows when to stop asking. This type of situation is perfect for a while loop. There is a practical example below:

If you copied this example. You will notice the code keeps on running until you get the correct password.

Try it out!

Do-While Loops

Do-while loops are similar to while loops, but the condition is checked after each iteration, rather than before. This means that the loop will always execute at least once. Another explanation is when the statements inside the loop body will be executed at least once even if the condition is never true. The do while loop is an exit-controlled loop, where even if the test condition is false, the loop body will be executed at least once. They are useful when you need to repeat a task an unknown number of times, but you know that the loop should execute at least once. Let us consider the example below:

This prints out the program even if (number != 0.0)

        Differences between For Loops, While Loops and Do While Loops

For loop:

  • It is used when the number of iterations is known.
  • In case of no condition, the loop is repeated infinite times.
  • Initialization is not repeated.
  • Statement of Iteration is written after running.
  • Initialization can be in or out of the loop.
  • The nature of the increment is simple.
  • Used when initialization is simple.

While loop:

  • It is used when the number of iterations is not known.
  • In case of no condition, an error will be shown.
  • Initialization is repeated if carried out during the stage of checking.
  • It can be written at any place.
  • Initialization is always out of the loop.
  • The nature of the increment is complex.
  • Used when initialization is complex.

Do While loop:

  • The difference between While loop and Do While loop is that this loop checks for the body of a code before it runs the code.
  • The difference between a For loop and a Do While is the same with that of While loop.

As a computer science student, it is important to note that loops can be nested, meaning that one loop can be inside another loop. This allows the program to be able to repeat an argument when a user enters an incorrect input., and is a powerful tool for solving a complex problem. Like you are given a project to create a password validator, using a loop can help with this.

Loops are a fundamental aspect of programming, and are an essential tool for automating repetitive tasks. For-loops are typically used when the number of iterations is known before entering the loop, a “While” loop is used to repeat a specific block of code an unknown number of times, until a condition is met and a “Do While” loop is used when we have a conditional execution. Understanding the different types of loops and how to use them effectively is a crucial skill for any programmer.

Design a site like this with WordPress.com
Get started