DEV Community: Serah Nderi

Making Debugging Easier: Stacktrace Support in Logpoints

Serah Nderi — Mon, 04 Aug 2025 12:14:29 +0000

After wrapping up my Outreachy Internship and my work with the SpiderMonkey team implementing the Iterator.range among other features, I spent some time contributing to Firefox Developer Tools.

Photo by Rubaitul Azad on Unsplash

My task was to implement a checkbox that allows Developers to print a stacktrace for a logpoint.

If you’re unfamiliar with logpoints, here’s a quick refresher. In the Firefox Debugger, when you click on the gutter next to a line of code, an “Add log” option appears. Clicking it opens an input where you can enter a JavaScript expression.

Before

Every time that line is executed, the expression is evaluated and its result is printed to the console — similar to using console.log(), but without modifying your source code. While this is incredibly useful, it can be even more powerful when paired with a stacktrace. By printing the stacktrace along with the result, developers can better understand the context in which a line was executed — helping track down where and why a function was called.

Adding a Stacktrace option would:

Add a Show stacktrace option checkbox to the logpoint when enabled.
Show stacktrace information — similar to console.trace()
Requires changes in both the DevTools Server (where the page actually lives) — to retrieve the stacktrace, and the client component for UI updates.

After

Understanding the Implementation

At first, the implementation seemed straightforward — famous last words. The key tasks were:

Locate the files to modify.
Add a checkbox UI element labeled “Show stacktrace”.
Update component state to track the checkbox state (checked or unchecked).
Connect that state to the logic that retrieves and displays the stacktrace.

The end-to-end flow looked like this:

The showStacktrace boolean starts from the Conditional Panel UI (the checkbox),
Passes through the client-side logic,
Gets sent to the server (with the setBreakpoint command)
Is received on the server,
And is finally used to conditionally trigger logEvent.

Challenges Faced

1. Manipulating React State

The Firefox Debugger is built using React, and in this case, the ConditionalPanel.js component is implemented as a class component. It utilises the hyperscript functions (div, input, label, etc.) imported from React DOM factories instead of JSX. This presented a learning curve compared to the functional components and hooks I’m more familiar with.

Instead of using useState, I had to work with class instance properties and understand the component lifecycle methods. This not only introduced complexity in managing state but also made the debugging process more nuanced, especially when ensuring state flowed correctly from the UI to the server logic.

2. Controlled and Uncontrolled elements

Speaking of state, I experienced a lot of React UI desync problems. The Show Stacktrace UI was being rendered based on outdated props or state due to lifecycle render quirks. While the state was changing correctly, the changes weren’t reflected in the DOM until a later re-render.

As a result, I spent quite some time reading GitHub issues on the same topic. While they enhanced my understanding on the topic, most of them were not browser-focused and relied heavily on React hooks, which didn’t apply directly to my case.

However, this particular GitHub issue turned out to be incredibly useful.

The key was using defaultChecked instead of checked, which makes the checkbox uncontrolled. In our case, we realized we didn’t need to store _showStacktrace on the component instance. Instead, we could use:

defaultChecked: this.props.breakpoint?.options?.showStacktrace

This allowed us to simplify the component by avoiding internal state and relying on form submission (FormData.get) to read the final value when needed:

input({
  type: "checkbox",
  id: "showStacktrace",
  name: "showStacktrace",
  defaultChecked: this.props.breakpoint?.options?.showStacktrace,
}),

The checkbox behavior now:

Uses defaultChecked instead of checked, so the initial state is set once when the component first renders.
There’s no onChange handler to update any component state.
The value is read from the form data only when the form is submitted via handleFormSubmit. After the initial render, the parent component has no way to programmatically change the checkbox state. When the form is submitted, the code retrieves the checkbox value like this:

const formData = new FormData(this.panelNode);
const showStacktrace = formData.get("showStacktrace") === "on";

This boolean value is then passed to the saveAndClose function, which forwards it to setBreakpoint, fully replacing the use of this._showStacktrace and aligning better with the form-based approach.

3. Checkbox Disappearance onClick in Firefox

Previously, the conditional panel (where you edit logpoints) would close when the logpoint input lost focus (onBlur event). However, we’re now introducing new UI elements, like checkboxes and buttons, so the panel should remain open during interaction.

Clicking on the new checkbox triggered the onBlur event from the input field, which caused the panel to disappear.

To fix this, my mentor Nicolas suggested using a Firefox-specific event property: e?.explicitOriginalTarget. I added a check to the onBlur handler to verify whether the explicitOriginalTarget is still within the conditional panel. This prevents the panel from closing when users interact with its internal elements, like the checkbox.

 onBlur = e => {
   let explicitOriginalTarget = e?.explicitOriginalTarget;
   // The explicit original target can be a text node, in such case retrieve its parent
   // element so we can use `closest` on it.
   if (explicitOriginalTarget && !Element.isInstance(explicitOriginalTarget)) {
     explicitOriginalTarget = explicitOriginalTarget.parentElement;
   }

   if (
     // if there is no event
     // or if the focus is the conditional panel
     // do not close the conditional panel
     !e ||
     (explicitOriginalTarget &&
       explicitOriginalTarget.closest(
         ".conditional-breakpoint-panel-container"
       ))
   ) {
     return;
   }

   this.props.closeConditionalPanel();
 };

Testing the Implementation: Mochitests

After completing the implementation, I needed to verify that everything worked as expected, and make sure that we do get the stacktrace. For Firefox, this means writing Mochitests, Mozilla’s testing framework that allows us to simulate user interactions and verify expected behaviors.

From Internship to Contribution

Contributing to Firefox DevTools has felt like a natural next step after my internship, building on the foundations I laid while working on Iterator.range with the SpiderMonkey team. The experience working on Iterator.range provided a solid foundation, but DevTools presented its own unique challenges and opportunities for growth.

Impact for Developers

This small enhancement to logpoints makes a significant difference for developers debugging complex applications:

Context Awareness: Stacktraces provide immediate context about how execution reached a particular point
Debugging Efficiency: Developers can now get the information they need without switching between tools
Optional Verbosity: The checkbox allows developers to control information density based on their current needs.

Contributing to Firefox

For anyone interested in contributing to Firefox DevTools, my experience suggests:
Start Small: Focus on well-defined features or bug fixes to understand the codebase.
Ask Questions: The Firefox development community is supportive and responsive.
Test Thoroughly.

Helpful links to get started:

DevTools contribution opportunities - There's a lot of good first issues for developers who are new to Firefox.
Join the DevTools chat on Matrix.

I’m grateful for the guidance provided by my mentor Nicolas throughout this process. His feedback and support was instrumental in bringing this feature to completion.

You may also like:
Implementing Iterator.range in SpiderMonkey

Decoding Open Source: Vocabulary I’ve Learned on My Outreachy Journey

Exploring Career Opportunities in Open Source & Data Science

Serah Nderi — Mon, 17 Feb 2025 08:21:11 +0000

Career Reflections: What's Next After Outreachy?

In September 2022, I joined ALX to learn programming and work on my programming knowledge. As a Manual Quality Assurance Engineer, my goal was to learn enough programming to automate repetitive tasks, such as regression testing, and eventually transition into an Automated QA Engineer role. Over time, my interests expanded to software development, leading me to seek further learning opportunities

Previously, I had always wanted to study Data Analysis and Data Science, and sought out to Datacamp to learn python and data analysis. As an Economics and Statistics graduate, this was a full circle moment for me - using data and leveraging my undergraduate degree. However, I quickly discovered that I was lacking in simple skills such as Git and that I could benefit from structured learning, deadlines, and learning the basics which led me to ALX.

Defining My Career Goals

My career journey has evolved into something far greater than I initially envisioned. Transitioning from Quality Assurance to Software Development, I have actively contributed to Open Source projects, participated in Outreachy, and contributed to organizations like Ushahidi, Humanitarian OpenStreetMap Team (HOTOSM), and Mozilla.

As a Mozilla Outreachy intern, I had the opportunity to work on TC39 proposals in SpiderMonkey - the JavaScript engine powering the Firefox browser.

I implemented the Error.isError and Range proposals, collaborating with incredible mentors and gaining exposure to a development ecosystem far different from my previous experience in eCommerce. Through this work, I have not only deepened my understanding of JavaScript internals but also actively contributed to shaping the future of the language.

Current Skills & Tools

My role at Mozilla required strong knowledge of JavaScript and Git, and while C++ was preferred, I was fortunate to already possess the skills necessary to contribute effectively to a production-level codebase.

Skills & Expertise:

JavaScript: Deep understanding of JS fundamentals and advanced concepts. Experience with working on TC39 proposals in SpiderMonkey and contributing to open-source projects. -** Tailwind CSS:** Expertise in building responsive, scalable UIs using utility-first CSS frameworks.
React.js: Proficient in building dynamic, single-page applications, with a focus on component-based architecture.
Test262 Tests: I wrote and contributed to Test262 tests for SpiderMonkey, the JavaScript engine behind Firefox, to validate the correct implementation of proposals like Error.isError and Iterator.range. Test262 is a test suite designed to ensure that JavaScript engines correctly implement ECMAScript standards.
Software Testing: Skilled in White, Gray, and Black Box Testing and API testing with Postman.

Languages & Communication:

English: Native proficiency, with excellent verbal and written communication skills.
Kiswahili: Native proficiency, enabling effective communication in both formal and informal settings.
German: Intermediate proficiency (B1 level), certified by the Goethe Institute Nairobi.

Getting a Datacamp Scholarship

I was awarded a one-year DataCamp scholarship to further develop my data skills. Over the next year, I plan to focus on enhancing my SQL, database management, Python, and data analysis capabilities.

This opportunity feels like a full-circle moment, as my programming journey began with DataCamp. This time, I'm equipped with the programming skills needed to truly understand and make the most of the coursework.

Opportunities that I'm Looking forward to

I'm eager to contribute to frontend development projects, especially those with a strong connection to data and data analysis. I'm particularly interested in roles that allow me to grow my skills while making meaningful contributions.

Roles of Interest:

Full-time or part-time Frontend Development positions
Paid internships that allow me to contribute while gaining valuable experience
Open-source opportunities where I can collaborate and make meaningful contributions.
Open source opportunities in the data analysis and data science space.

Availability

I will be available for new opportunities starting March 2025, after my Mozilla internship concludes.

Flexibility

I am open to remote or hybrid software development roles.
I am willing to relocate for positions, particularly within the DACH region.
Additionally, I am available for contract or consultant roles.

If you're working on any projects or know of opportunities that align with my interests, or believe they could, I'd love to hear from you! Feel free to connect with me on LinkedIn or X (formerly Twitter).

Mid-Internship Progress Report: Achievements and Goals Ahead

Serah Nderi — Fri, 07 Feb 2025 12:12:10 +0000

What's Done, What's Changed, and What's Next

In my last post I went in depth on my work at Mozilla, specifically my implementation of TC39 proposals and my current work on the Range Proposal. What was remaining was setting up BigIntsupport and setting a proper Prototype for the iterator returned by Iterator.range.

My implementation followed the specification, ie - create a separate prototype that inherits from the iterator, along with the necessary implementations for toString and next.

Background

Initially, I had an IteratorRangeGenerator* function (ie, step 18 of the Range proposal), that when called doesn't execute immediately, but returns a generator object which follows the iterator protocol. Inside the generator function you have yield statements which represents where the function suspends its execution and provides value back to the caller.

The generator will pause at each yield, and will not continue until the next method is called on the generator object that is created.
The NumericRangeIteratorPrototype is the object that holds the iterator prototype for the Numeric range iterator.

The next() method is added to the NumericRangeIteratorPrototype, when you call the next() method on an object created from NumericRangeIteratorPrototype, it doesn't directly return a value, but it makes the generator yield the next value in the series, effectively resuming the suspended generator.
The first time you invoke next() on the generator object created via IteratorRangeGenerator, the generator will run up to the first yield statement and return the first value.
When you invoke next() again, the NumericRangeIteratorNext() will be called. This method uses GeneratorResume(this), which means the generator will pick up right where it left off, continuing to iterate the next yield statement or until iteration ends.

Generator Alternative

After discussions with my mentors, I transitioned from a generator-based implementation to a more efficient slot-based approach. This change involved defining slots to store the state necessary for computing the next value. The reasons included:

Efficiency: Directly managing iteration state is faster than relying on generator functions.
Simplified Implementation: A slot-based approach eliminates the need for generator-specific handling, making the code more maintainable.
Better Alignment with Other Iterators: Existing built-in iterators such as StringIteratorPrototype and ArrayIteratorPrototype do not use generators in their implementations.

Final Implementation

The final approach stores state in reserved slots rather than relying on generator suspension. This change better fits SpiderMonkey's Iterator architecture and aligns with other built-in iterators such as StringIteratorPrototype and ArrayIteratorPrototype.

By moving away from generators, the implementation now:

Operates purely on numbers without additional complexity.
Avoids cleanup operations, simplifying state management.
Uses a dedicated prototype, ensuring consistency with other iterators.

Adding BigInt Support

Implementing BigInt support was straightforward from a specification perspective, but I encountered two blockers:
1. Handling Infinity Checks Correctly

The specification ensures that start is either a Number or a BigInt in steps 3.a and 4.a. However, step 5 states:

If start is +∞ or -∞, throw a RangeError.

Despite following this, my implementation still threw an error stating that start must be finite. After investigating, I found that the issue stemmed from using a self-hosted isFinite function.

The specification requires isFinite to throw a TypeError for BigInt, but the self-hosted Number_isFinite returns false instead. This turned out to be more of an implementation issue than a specification issue.

See Github discussion here.

Fix: Explicitly check that start is a number before calling isFinite:

// Step 5: If start is +∞ or -∞, throw a RangeError.
if (typeof start === 'number' && !Number_isFinite(start)) {
  ThrowRangeError(JSMSG_ITERATOR_RANGE_START_INFINITY);
}

After making this adjustment, the implementation correctly handled infinite values.

2. Floating Point Precision Errors
When testing floating-point sequences, I encountered an issue where some decimal values were not represented exactly due to JavaScript's floating-point precision limitations. This caused incorrect test results.

There's a GitHub issue discussing this in depth. I implemented an approximatelyEqual function to compare values within a small margin of error.

Fix: Using approximatelyEqual in tests:

const resultFloat2 = Array.from(Iterator.range(0, 1, 0.2));
approximatelyEqual(resultFloat2, [0, 0.2, 0.4, 0.6, 0.8]);

This function ensures that minor precision errors do not cause test failures, improving floating-point range calculations.

This project has been an incredible learning experience, allowing me to deep-dive into SpiderMonkey's internals and improve my understanding of TC39 proposals. I'm excited to continue refining this work and collaborating with the team to ensure an optimal implementation for Iterator.range.

Stay tuned for further updates!

Navigating TC39 Proposals: From Error Handling to Iterator.range

Serah Nderi — Wed, 08 Jan 2025 18:06:27 +0000

A Intern's Journey Through SpiderMonkey and JavaScript Engine Enhancements

The first time I saw the Iterator.range proposal and the algorithms inside I wasn't sure that I'd be able to hack it. As an Outreachy contributor, I and other contributors would contribute for a month, and then one intern would get chosen to work on the proposal/specification.

Preamble

A couple of days into the contribution period, I was assigned tasks designated to Outreachy contributors, but most importantly, I was assigned the ErrorIsError TC39 proposal.

The first step to implementing a TC39 proposal in SpiderMonkey (Mozilla JavaScript Engine) is to add a preference for it.

This allows for the feature to be enabled or disabled at runtime, which is important, because we don't want to enable a feature by default until we've tested it enough to be confident that it won't cause problems for our users. In this case, we create a preference and set the value to false.

As you can see, when implemented with JavaScript, the proposal is quite straightforward and was the initial implementation. However, code review came back and it was better to implement the proposal as a native C++ function which was a learning process for me, both in terms of the reason and working with C++.

During the process, we encountered some interesting challenges involving cross-compartment wrappers (CCWs) and intrinsic type checks in JavaScript engines.

The Issue with Cross-Compartment Wrappers and ErrorObject Checks

When handling Error objects , the IsErrorObject function determines if a given value is an instance of the ErrorObject type. However, a critical edge case arises when the argument is a cross-compartment wrapper (CCW) for an ErrorObject from another compartment. The IsErrorObject check does not account for CCWs directly, as they obscure the underlying object.

Implementation Context: In the code handling intrinsic type checks, the intrinsic_IsInstanceOfBuiltin function is used to check if an object is of a specific type. While it works when applied to the this value; assuming it's already unwrapped; it doesn't handle arguments that might still be wrapped by CCWs.

The Proposed Solution: A Dedicated Native Function

To address this issue, the solution involves:
1. Adding a new native function: A dedicated native function is created to handle CCWs transparently by:

Unwrapping CCWs.
Testing if the unwrapped object is of type ErrorObject.
Verifying the object type in one cohesive operation.

2. Removing Self-Hosted Complexity:
By implementing this new function as JSNative, we can streamline the process, performing all operations within a single native function without relying on self-hosted helpers.

Why This Approach?

Handles Non-Object Cases: The new function integrates checks for whether the value is even an object before proceeding to unwrap it.
Simplifies Specification Alignment: Since CCWs are an implementation detail and not part of the TC39 JavaScript specification, these changes ensure behavior aligns with the spec while avoiding discrepancies.

The above consisted of 45 lines of code, excluding two test files: one for JIT (Just-In-Time) compiled tests and another for Test262 tests/files. However, through those 45 lines of code, I was able to:

Learn where predefined error messages are within the Mozilla codebase and how to use them. This proved handy when I needed to define error messages for Iterator.range.
Understand nightly and nightly builds.
Code consistency: Tailor my code to meet TC39 specifications and avoid shorthand for newly added code as per Mozilla standards.

What I'm Currently Working On: Iterator.range

After diving into the complexities of cross-compartment wrappers and enhancing ErrorObject handling during my Outreachy contribution period, I turned my attention to something equally exciting: the Iterator.range proposal for my Mozilla Outreachy Internship.

For those unfamiliar, Iterator.range is an addition to the TC39 proposals for JavaScript, aimed at making iterators more versatile. This method introduces an efficient way to generate ranges of values, which can be particularly useful in everyday programming, such as iterating over a sequence of numbers or creating step-based loops.
The concept itself might seem simple; generate a series of values from a start point to an end point, but implementing it in SpiderMonkey is proving to be an excellent challenge.

Unlike the previous ErrorObject work, which involved handling abstract operations and native C++ functions, Iterator.range requires a deep dive into how JavaScript iterators work internally and how SpiderMonkey integrates these features at the engine level.

When I started working on Iterator.range, the initial implementation - similar to what I had done for ErrorIsError proposal had been done, ie; adding a preference for the proposal and making the builtin accessible in the JavaScript shell.

The Iterator.range simply returned false, a stub indicating that the actual implementation of Iterator.range was under development or not fully implemented, which is where I came in.

As a start, I created a CreateNumericRangeIterator function that delegates to the Iterator.range function. Following that, I implemented the first three steps within the Iterator.range function.
Next, I initialised variables and parameters for the NUMBER-RANGE data type in the CreateNumericRangeIteratorfunction.

I focused on implementing sequences that increase by one, such as Iterator.range(0, 10). I also updated the CreateNumericRangeIterator function to invoke IteratorRangeGenerator (which handles step 18 of the Range Proposal specification) with the appropriate arguments, aligning with Step 19 of the specification, and added tests to verify its functionality.
This week, I am exploring how to properly set the prototype for generators returned by Iterator.range.

My work for the next couple of weeks/months includes, but is not limited to:

Set proper prototype for generator returned by Iterator.range.
Support BigInt in Iterator.range.
Support other sequences, as I have only covered sequences that increase by one for now.
Add adequate tests for the above.

Decoding Open Source: Vocabulary I've Learned on My Outreachy Journey

Serah Nderi — Thu, 19 Dec 2024 12:46:40 +0000

Speaking the Language of Open Source: Week 2 Reflections

When I first joined Outreachy as a Mozilla contributor, I quickly realized that diving into the world of open source meant immersing myself in a whole new language. Phrases, tools, and acronyms that had been unfamiliar to me just months ago became integral to my daily work.

This week, I'm reflecting on some of the most impactful vocabulary terms I've encountered along the way and what they've taught me about Mozilla and open source development.

Mercurial and Git Cinnabar

I had heard of Mercurial before as an alternative to Git, but I had never used it. To make the transition smoother for contributors familiar with Git, Mozilla provided Git Cinnabar, a bridge tool that lets developers work with Mercurial repositories using Git commands. This small setup process opened the door to working seamlessly with Mozilla's upstream branches without abandoning my Git knowledge.

Phabricator

Phabricator was a revelation. Unlike GitHub, its interface and tools feel tailored to fostering deeper collaboration and feedback on code. Its inline commenting system, in particular, stood out for how naturally it integrates into review workflows. It's more than a code host - it's a communication hub for developers.

Bugzilla

Bugzilla is where all of Mozilla's issues are filed and tracked. While I'd heard of Bugzilla from users needing to report problems with Firefox, using it as a developer felt different. It became my roadmap and task manager, where bugs transitioned from abstract concepts to actionable work items.

Landed/Landing an Issue

I learned that Mozilla developers say an issue has 'landed' when it's been approved to be merged into the codebase. There's no more back-and-forth on reviews, and it marks a tangible accomplishment. For an intern, there's an incredible sense of achievement when your code has 'landed'.

Searchfox

Searchfox has been an invaluable tool during my Outreachy internship. When tasked with implementing features similar to existing ones or reusing predefined error messages or functions, my mentor often provides Searchfox links that take me directly to the relevant lines of code.

This powerful tool streamlines the process of navigating Mozilla's expansive codebase by delivering precise and relevant search results. It has been great in helping me efficiently explore and understand complex sections of the codebase, making development tasks far more manageable.

Nightly and Nightly Builds

The term "Nightly" refers to Mozilla's development channel, where experimental features and early-stage implementations are tested. During my contributor period, I became familiar with the concept of "Nightly Builds," which are essential for testing work in progress, particularly for features still under active development.

My first interaction with this was working on a TC39 JavaScript proposal. I had to ensure the feature I was contributing was enclosed within a nightly build, using the #ifdef NIGHTLY_BUILD directive:

#ifdef NIGHTLY_BUILD
/*
* Code between the nightly
*/
#endif

Free and Open Source Software (FOSS)

Before starting my Open Source journey, I wasn't aware of the FOSS acronym.
Understanding FOSS goes beyond software; it's about embracing a philosophy. Open source isn't just about freely available code - it's about collaboration, shared learning, and the belief that innovation thrives in openness.

This journey as an Outreachy intern at Mozilla is a whirlwind of learning and growth. Each new tool, term, and concept has not only expanded my technical vocabulary but also deepened my understanding of what open source truly represents.

Every "landed" issue and each successfully implemented feature serves as a reminder that learning is iterative - progress builds one commit, one review, and one build at a time. For me, open source is no longer just a concept; it's a space where I continue to challenge myself, contribute, and grow.

For anyone considering stepping into the world of FOSS, know this: you won't just learn tools or frameworks - you'll learn how to be part of something bigger.

Want a Remote Internship Working on Free Software?

Serah Nderi — Tue, 10 Dec 2024 07:30:41 +0000

Read my blog post on how I got an @outreachy internship with Mozilla Firefox

The first time I applied to Outreachy was this year, for the May internship around, although I didn't make it past the contributor round, I was priviledged to work on great projects on accessibility and localization.

In particular, I worked on interpreting a Deutsch Transifex glossary from English to German. This was fun because I recently learned German in 2023 and 2024 and I'm currently at the B1 level, so it was exciting to use the language at a professional level.

The second time I applied to Outreachy was this year July/August thereabout, for the October Contributor period and subsequently for the December through March 2025 Internship round. I got chosen for the Contributor stage and later on got accepted for the internship as a Mozilla Firefox Intern working on their JavaScript engine.

The Contributor Stage

The contributor stage is a month long open source contribution period, where you choose two projects from different firms to work with and contribute to.

The projects usually have a list of required, preferred, nice to have skills that one must have in order to successfully contribute to the projects and stand a chance to be accepted as an intern. Projects range from Accessibility, Localisation, Frontend, Backend, Shell, Devops, Marketing, Design, Data and Geospatial Analysis.
You don't necessarily have to know how to code to be an Outreachy Intern as the projects and firms are diverse and vary from each internship round.

The projects that I chose require development and engineering knowledge and I was lucky to be chosen by my first choice which was Mozilla Firefox. Mozilla was my first choice because the issues were broken down into good first issues issues which made it easy to find files, functions etc in the codebase and start contributing which was pretty neat.

Also Mozilla is a notable firm to contribute to. The mentors Daniel and Arai, were very helpful and were quick in giving feedback. They were also very accessible and reachable through out the contribution stage.

Contributor Stage Tips

Are your issues merged?: Aim to have at least four issues merged into the codebase. Outreachy organizers look at your contributions during the final application, so document your progress carefully. If you are working on non-development tasks, ask your mentor what this looks like for you.
Ask Detailed Questions: When stuck, ask detailed questions, e.g., "I encountered this bug while doing XYZ. Here's what I tried and what didn't work. How can I proceed?" This demonstrates initiative and problem-solving.
Be Efficient: The contributor stage can be competitive. Prioritize tasks, engage with mentors, and ensure you are consistently making progress.

Apart from working on a couple of bugs during my contributor stage, I worked on the ErrorIsError TC39 proposal which was a full feature complete with tests. It tested me for a moment but it also helped me understand the codebase and find things, pre-defined error messages etc. I also got to work with C++ on a production level codebase which was fun.

During the contributor period, I kept a diary on my substack open source newsletter of the experience, highs, lows, blockers and how I resolved them. You can access it here to see what mind space I was in at the time.

Week 1 Status Report

I just started my Internship as of 9th December 2024. Apart from these blog posts, I will continue writing my weekly diary reports on my Substack should anyone fancy reading that or following along my journey. I anticipate to post a lot after the holidays or from January 2025.

I spoke with my mentors last week and have a few issues assigned to me from last week Thursday thereabout that I have already started on. We'll have more detailed reports and blog posts as the weeks go by.

Until the next report, bye.

How to Connect a Private Windows EC2 Instance to VPC Resources via S3 Gateway Endpoint

Serah Nderi — Sun, 07 Jul 2024 21:01:07 +0000

I recently had to connect a private Windows EC2 instance to VPC resources through an S3 Gateway endpoint and run into a couple of issues which has prompted me to write this article.

Many of the online resources that I found focused on Linux servers and provisioning resources from the terminal or as a service. I, however, was doing it via the AWS console and not provisioning the resources through Infrastructure as a service.

Here are a couple of problems I faced and how I resolved them as well as a step by step guide on how to provision a similar cloud system. If you're a Mac user, download Microsoft Remote Desktop from the App Store. If you're a Windows user, search for remote connection on the Windows start tab.

Testing your implementation

To test that your implementation works as it should be - a user outside the VPC should not be able to download or upload images to the S3 bucket while a user within the VPC should be able to access the items in the S3 bucket.

This being the case and considering that we're doing all these in a private subnet without internet connection, how do we :

Download python from the internet?
Install the aws cli?
Interact with AWS resources from the terminal?

I spent quite a while trying to understand how to manoeuvre this problem.

A public VPC is public by virtue of it being accessible to the internet.

A private VPC is private by virtue of it being unaccessible to the internet. This is where we're going to place the private EC2 instance.

Now that you have downloaded Microsoft Remote Desktop, lets start.

Step 1: Create 2 Windows EC2 instances, one public, one private

We're going to use the public EC2 instance as a jump box/ Bastion host, and then connect to the private EC2 instance from the Bastion Host. Both EC2 instances should have a Windows Amazon Machine Image (AMI).

Within Network settings, we're going to specify the subnets. The public EC2 instance should be in the public subnet, while the private EC2 instance should be in the private subnet.

To ensure that our connections are right, check the route tables. The public subnet should have a local and an internet gateway attached, while the private subnet should only have the local route attached.

Ideally, your VPC's route table should be resemble this - which means you'll have to create a separate route table for the private subnet.

Create the S3 bucket and the VPC S3 gateway endpoint

To create an S3 bucket, navigate to S3 and create one, making sure to block all public S3 access.

To create a VPC S3 gateway endpoint, under VPC navigate to endpoints, search for gateway and create the endpoint. Make sure to attach it to the VPC you created earlier.

Your options while creating could look like this:

For our bucket to now use the S3 endpoint, we need to update the S3 bucket policy. AWS offers a resource to generate S3 bucket policies based on your needs. Mine looks like this:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Effect": "Deny",
            "Principal": "*",
            "Action": [
                "s3:PutObject",
                "s3:GetObject",
                "s3:DeleteObject"
            ],
            "Resource": [
                "arn:aws:s3:::bucketname",
                "arn:aws:s3:::bucketname/*"
            ],
            "Condition": {
                "StringNotEquals": {
                    "aws:SourceVpc": "vpc-id"
                }
            }
        }
    ]
}

Essentially, we're denying any S3 interaction with resources that are outside the VPC. Replace bucket name and VPC id with the actual bucket name and VPC Id.

Your routes should look like these:

Connect the private EC2 instance to the internet via a Nat Gateway

I did a lot of research to avoid using the Nat gateway to get internet access on the private instance but I had to anyway.

Here's how to create a NAT Gateway.

However, be advised that you can't connect to the private subnet with a Nat gateway and a VPC S3 gateway endpoint at the same time. The S3 endpoint gets dropped, and the Nat gateway remains.

To access the Internet on the private subnet, attach the Nat Gateway on the private subnet and then:

Connect to the public EC2 instance via RDP by passing in the the it's public IP address and the password. You can generate the password by clicking on connect on the EC2, and parsing the key/value pair you created while creating the EC2 instance.
Now that you're inside/within the public instance, repeat step 1. Pass the private IP address and the password generated when you click on connect on the private EC2 instance.

Now that you're connected to the private EC2 instance, configure AWS by:

Opening Microsoft Edge within the private EC2 instance and downloading the latest version of Python for Windows.
Run the python installer.
Download a random image from the internet.
Open the Windows command line and run the following command. You should see python installed, indicating successful installation

python --version

Install the AWS CLI using pip

pip install awscli

Verify AWS CLI installation by running this command. You should see the installed version of the awscli.

aws --version

Now run the following command to configure AWS

aws configure

To configure AWS, you'll need:

Your AWS access key ID which you can find under 'My security credentials'
Your AWS secret key.
Specify the region. You can find the region by hovering on the region next to your name on the top right corner of your screen.
Default output format - json format.

To NAT Gateway or to S3 gateway

This depends on your needs. If you want to continue accessing the internet on the private instance, you can continue using the NAT Gateway but be ware of AWS charges before committing.

If you choose to use S3 gateway, drop the NAT Gateway, reattach the S3 gateway endpoint and use endpoint only after you have configured AWS for the private EC2.

If you choose the S3 gateway endpoint

And you want to test the connection, follow these instructions:

Upload an image to the S3 bucket from the private EC2 instance by running the following command on the Windows command line. This should be successful.

 aws s3 cp <image> <bucket name>/

On your Mac terminal/ Windows command line outside the VPC, try downloading the image using the following command. Replace with actual names. This should result in a Fatal/ forbidden error.

aws s3 cp s3://<bucket name>/<image>

Conclusion

This was a fun and tough project to work on and using Windows made it a bit more complex. Figuring out how to work the remote connection which can raise its own errors can be tedious, but hopefully this gives you a roadmap if you want to interact with Windows EC2 instances.

Another solution would be to provision this through infrastructure as code.

Comparing Svelte and Vue.js: A Battle of Frontend Technologies

Serah Nderi — Tue, 02 Jul 2024 09:26:21 +0000

The field of frontend development is dynamic and offers a wide selection of frameworks and libraries. Notable participants are Vue.js and Svelte. Both provide strong tools for creating contemporary web apps, but they differ in their capabilities and methods. We will explore the key distinctions between Svelte and Vue.js in this post and look at what makes each platform unique. I'll also talk about my hopes for the HNG Internship and my excitement about utilising ReactJS.

Svelte: What is it?

Rich Harris founded Svelte, a relatively young contender in the frontend framework market. Svelte transfers most of the work to compile time, in contrast to conventional frameworks that operate by executing in the browser.

Essential Elements of Svelte

No Virtual DOM: Svelte updates the DOM directly with compiled JavaScript, doing away with the requirement for a virtual DOM. Performance is enhanced and rendering is accelerated as a result.
Reactive Declarations: Reactive declarations are a feature of Svelte that let developers construct reactive variables with less boilerplate.
Scoped Styles: Svelte components have pre-installed scoped styles, which guarantee that the component contains the styles.
Simplicity: Svelte is a great option for both novice and seasoned developers because of its simple and easy to learn syntax.

Benefits and Drawbacks of Svelte

Benefits

No virtual DOM means high performance.
Reduced bundle sizes.
The syntax is clear and easy to read.
Easy reactive programming.

Drawbacks

Smaller ecosystem in comparison to older models.
Fewer tools and libraries from third parties.
For those accustomed to conventional frameworks, a learning curve.

Vue.js: What is it?

Evan You developed the progressive JavaScript framework Vue.js, which is used to construct user interfaces. Because of its incremental adoption architecture, it may be applied to a single component or a whole application. The greatest elements of React and Angular are combined in Vue.js, giving developers a feature-rich and adaptable environment.

Principal Attributes of Vue.js

Virtual DOM: To enhance rendering and boost speed, Vue.js makes use of a virtual DOM.
Component-Based Architecture: Vue promotes maintainability and reusability by using a component-based architecture.
Two-Way Data Binding: This feature of Vue makes it easier to synchronise data between the view and the model.
Vue CLI: Strong project management and scaffolding features are available through Vue's command-line interface.

Benefits and Drawbacks of Vue.js

Benefits

Adaptable and multipurpose, fit for a variety of uses.
Huge, vibrant community with a diverse ecosystem.
thorough documentation and educational materials.
Integration with current projects and other libraries.

Drawbacks:

Its feature-rich design may make it difficult for novices to use.
Greater bundle sizes than that of Svelte.
Larger applications might not have performance comparable to Svelte.

My anticipations and enthusiasm around ReactJS in HNG

ReactJS is a great option for creating dynamic user interfaces because of its virtual DOM and component-based architecture. I'm excited to learn more about ReactJS as a software engineer intern and use its powers to make effective and interesting web applications.

The extensive React ecosystem offers a full platform for creating intricate applications, with features like Redux for state management and React Router for navigation. I'm excited to work with mentors and other interns, pick up best practices, and contribute to actual projects.

The HNG Internship presents a special chance for me to develop my abilities, work on fascinating projects, and acquire priceless experience in the tech sector. Visit HNG Internship to find out more about the programme and find out how you can join this incredible group of individuals.

In summary

Both Svelte and Vue.js are strong front-end technologies, with different applications and advantages. Svelte's compile-time methodology and ease of use make it a strong option for applications that require high performance, whereas Vue.js's adaptability and vibrant community suit a diverse array of applications. I'm eager to learn more about ReactJS and advance as a developer as I start my experience with it during my HNG internship.

For additional details regarding the HNG Internship Programme and how to get involved, visit HNG Internship and HNG Hire. Happy coding!

How to Host a Static Website on Amazon S3

Serah Nderi — Sun, 21 Apr 2024 11:26:00 +0000

Amazon S3 is an object storage service provided by Amazon Web Services (AWS). It is designed to store and retrieve any amount of data from anywhere on the web, making it ideal for a wide range of use cases, from simple storage for backup and archiving to serving static website content and hosting entire applications.

If you’re studying for AWS projects and looking for easy and beginner friendly projects, this is one of them.

To start:

Create an AWS account. You will get one year Free to test and use various functions — some are free but some have pay as you go pricing so be careful and do your research.
A static HTML site. If you need inspiration or Figma Designs you can explore Frontend Mentor for the designs.
VScode and Github to code and store your code.

Create a Bucket

Navigate to Amazon S3 and create a bucket. Every object in AWS S3 is stored in a bucket.

Create objects by uploading your static HTML and related files and folders

You can upload them as files or you can upload them as folders. Use the same file structure as you had in your local machine. I have an additional src file as I’m using Tailwind CSS.

This is my view after uploading all the files, similar to what I had in my project locally.

Clicking on the associated Object URL on the index.html object view will return an error, because you need to some changes to your bucket configuration.

To change this, we need to:

Enable static hosting. To do that, navigate to properties on your particular bucket view and scroll down to Static Website Hosting. Click on enable and specify the website home or default page, in this case index.html. Save changes.
Make the website publicly accesible. To do that, click on permissions and uncheck the block public access box. Save changes and confirm.
Within permissions, navigate to Object ownership and make public using ACL.

To find your object URL, click in the index.html object. You should be able to see the Object URL.
Here’s a look on my static site on AWS S3.

This is a fairly easy and beginner friendly AWS project especially if you want to study for your AWS Certified Cloud Practioner certificate. You can also add it to your cloud engineer portfolio.

If you liked this article, support me on Patreon. This article first appeared on Medium.

Seamless Database Integration: How to Use pgAdmin with ElephantSQL

Serah Nderi — Fri, 21 Jul 2023 06:52:13 +0000

Say for instance you’re working in a small team of newbie developers and you need to store and fetch data to a database. You can create the database locally but that would mean only one person can store and fetch data. Other team members cannot access the data.

This scenario is what led me to a PGAdmin and ElephantSQL connection.

What is ElephantSQL?

Elephant SQL is a PostgreSQL database administrator that installs and sets up database management in the cloud. I used their free Shared Instance Tiny Turtle plan that offers shared high performance server, 20 MB data, and 5 concurrent connections.

I’m not sure how many team members are allowed in the free plan, but me and my team member used it for a previous project.

To use:

Create an account here.
Click on Create New Instance.

Name your instance and tag it.

Choose a Data center closest to you. For me, that’s Ireland.
Confirm new instance and create the instance. For the purposes of this article, I’ve named mine Medium.
Click on browser. This opens a SQL Browser view where you can run SQL queries. Start by creating a Database and database tables.

Click on the newly created instance. It opens up a Details view. We’re going to use these details to connect to PGAdmin.

What is PGAdmin?

PGAdmin is a management tool for postgreSQL and derivative relational databases.

While PGAdmin is used to perform administrative tasks, query development, and manage databases on local systems, ElephantSQL is used for cloud-based PostgreSQL database hosting.

Therefore, if you’re developing in a team, you can create the database on ElephantSQL, and then each team member can establish a connection to the database for easier collaboration.

How do you connect ElephantSQL and PGAdmin?

To connect the databases, go to the details view of ElephantSQL.

Copy the URL and use it in your code to establish a connection. I used flask and sqlalchemy so my code will look like this:

`import os
from flask import Flask
from flask_sqlalchemy import SQLAlchemy

app = Flask(name)
app.config['SECRET_KEY'] = "key"
app.config['SQLALCHEMY_DATABASE_URI'] = 'postgres://retxeucg:SUceqLZZySPh56oIBKKc3_c_5ImgGwWf@trumpet.db.elephantsql.com/retxeucg'
app.config['SQLALCHEMY_TRACK_MODIFICATIONS'] = False

db = SQLAlchemy(app)`

If it throws an error, change the URL. Notice that my url starts with ‘postgres’, make it ‘postgresql://…’

After making this change in your code, head over to pgadmin for desktop or MacBook. I’ve had it installed for more than a year so I don’t remember much about the setup. If you haven’t set up pgadmin, do that then come back.

Launch pgAdmin: Open pgAdmin after installation.
Add a new Server: In the pgAdmin interface, you will see a “Browser” section on the left sidebar. Right-click on “Servers” and select “Create” > “Server…”
General Tab: Enter a name for the server in the “Name” field (e.g., MyElephantSQL). Switch to the “Connection” tab.
Connection Tab:
In the “Host name/address” field, enter the database URL provided by ElephantSQL.
In the “Port” field, enter the port number provided by ElephantSQL (usually 5432).
In the “Maintenance database” field, enter the default database name (usually the same as your username).
In the “Username” field, enter the username provided by ElephantSQL.
In the “Password” field, enter the password associated with your ElephantSQL account.
Save the connection: Click on the “Save” button to save the connection settings.
Connect to the database: In the left sidebar, under “Servers,” you should now see the server you just added. Expand it, and you will see the databases available on your ElephantSQL instance. You can now interact with your PostgreSQL database using pgAdmin.
From my URL,; postgres://retxeucg:SUceqLZZySPh56oIBKKc3_c_5ImgGwWf@trumpet.db.elephantsql.com/retxeucg, my connection details that’d need to add on pgadmin are:
Host name/address: trumpet.db.elephantsql.com
Port: Default PostgreSQL port is usually 5432.
Maintenance database: retxeucg
Username: retxeucg
Password: SUceqLZZySPh56oIBKKc3_c_5ImgGwWf
This is because the URL takes the format
postgres://username:password@hostname/databasename
A successful connection should look like this:

The elephant sign depicts a successful connection. The cancel sign depicts an unsuccessful connection.
This should give you a head start in creating and using a postgreSQL database.

This post first appeared on Medium.
_
_I'm an ALX Full Stack Engineering student and a QA Engineer. Find me on LinkedIn, Twitter, Github and Medium.

Behind the Scenes: Exploring the Technical Challenges and Solutions in Building Shielded

Serah Nderi — Tue, 11 Jul 2023 09:30:26 +0000

We built Shielded to help girls in FGM practising societies. Our aim is to protect the innocence of girls and women by redefining what purity means in FGM practicing societies.

Team members

Serah Nderi - Backend and DevOps
Hasina Said - Wireframes, Frontend and Devops

Timeline

Research: 3 weeks
Development: 3 weeks

The Problem

In 2014, the national prevalence of FGM was 21%. This decline can be attributed to multifaceted approaches by GoK and NGO's.Yet, despite the steady decline nationally, the prevalence of FGM remains relatively high in some communities.

FGM is not only a harmful practice but also a violation of human rights.

The practice poses serious risks to the health and wellbeing of girls and women and is widely recognised as a human rights violation.

The Solution

Since there is little to no access to internet in FGM practising societies, our USSD Shielded seeks to provide information, access to safe houses credit, airtime, ambulance and emergency services to women in these societies.

Our solution is unique as it consolidates these solutions at a low cost affordable manner. Currently, these solutions are offered in the country independent of each other.

My Personal Focus

Our project helps girls achieve the highest education level possible and escape FGM and early marriages by connecting them with safehouses and social workers through a USSD. It is also designed to work with other shareholders such as Village Chiefs to increase literacy rates in FGM practising areas.

The team members are Hasina and myself and we wanted to focus on a USSD and a website solution. Those who find us via website still have access to the USSD information and an option to donate to the cause. Hasina worked on the FE while I integrated with the Africa's Talking USSD, Airtime, and SMS API.

Why Shielded?

Although I don't have a personal story around FGM and early marriage, I wanted to use Africa's Talking API and what better way than to champion for girls in Marginalised communities.

Educated girls play a vital role in driving social and economic development. When girls receive an education, they contribute to the workforce, drive innovation, and foster economic growth.

Educated women are more likely to become agents of change within their communities, promoting sustainable development and social progress.
Education plays a big role in breaking poverty and abuse cycles.

Accomplishments

For the Frontent we used HTML5, CSS3 and a bit of Vanilla JS around the navigation elements and toggle menu. We did not use any frameworks because we're yet to solidify our understanding of JavaScript which is the focus the next couple of months.

For the Backend, we used Python, Flask web application and Postgresql database with Elephant SQL.

Features

USSD - Serves as an entry point for the users. They dial the USSD and are presented with 3 options.

Donate - For anyone who would like to donate to the course, the donate page integrates with the Safaricom daraja API.

Airtime - Integrates with Africa's Talking API and sends the user airtime should they request the third option which is request airtime.

SMS - For every USSD option, the user gets a message alert for the details they requested or the action they just took.

Technical Challenges

The most difficult challenge we faced is that the USSD wouldn't run and when it did I got a 504 time out error or a duplicate airtime send from the airtime file.

Unbeknownst to me, while the USSD requires no api key, the sms api only consumes live keys and not sandbox keys. Changing my api key to a live key as opposed to a sandbox key solved the sms problem. We had also altered the USSD code a bit so refactoring it to run as a flask app solved our problems and now the app runs via the terminal.

The USSD requires a callback URL which I did not know how to go about but after attending one of their sessions I learnt about ngrok. It was possible to fix errors as they all appeared under their sessions Tab courtesy of the callback URL/ngrok.

What I've Learned

Reading the documentation may not always be adequate. if something is not included in the documentation, join their slack or discord channels and see if there's discussions and how you can get help.

When working on a project, all the concepts you've been reading and working will be a deciding factor on how you choose to go about the project.

I also learned I work best by setting a minimum hours to code, in this case a minimum of 3 hours a day, research not included seemed to be my streak. Moving forward I want to finish some html, css projects and learning about Safaricom daraja API before I can specialise with Frontend or Backend.

I'm an ALX Full Stack Engineering student and a QA Engineer. Find me on LinkedIn, Twitter and Medium.

Shielded on Github
Shielded on Netflify
Follow me on LinkedIn

How to Create a Callback URL using Ngrok

Serah Nderi — Sat, 08 Jul 2023 19:24:04 +0000

A while back I came across the need to create a callback URL while consuming Africa’s Talking USSD API. This was my first time coming across it and I didn’t know how to go about it.
I thought that I’d need to host the project first so I ignored it for a while.

Until I attended one of their sessions and they mentioned ngrok.

Create an Ngrok Account

You’ll be led to this page after signup or login.

If you’re a windows user, follow the instructions. For macOS users you don’t need to follow the instructions because the download isn't a zip file as per their documentation but a Unix Executable file.

Just download and fire it up.

Fire up Ngrok

After opening the downloaded unix file, open a new window on the terminaL, cd to the directory where you downloaded ngrok and run the following command:

./ngrok http <specify the port you want to use>

I used port 3000 so my command was:

./ngrok http 3000

It opens an ngrok session where you can copy your URL. Below is my expired URL.

My call back URL is: https://1f9b-105-163-0-134.eu.ngrok.io

If you’re using Africa’s Talking API, create a channel and update the callback URL, save and start debugging. The details tab will let you know where your code is failing, though their error messages are pretty generic.

The disadvantage of using the free version of ngrok is that the URL expires after 2 hours thus you have to keep changing and updating it. Additionally, being on a free version means you have to keep that terminal open, else you lose the connection to ngrok.

This article first appeared on Medium.