Forem: Kobe Ruado

Making More Meaningful Contributions in Hacktoberfest 2023

Kobe Ruado — Tue, 31 Oct 2023 15:49:23 +0000

Intro

Hacktoberfest is a great way to get started making contributions to open source projects. As this month comes to a close, I want to share my experience as a contributor for this year's Hacktoberfest, as well as the things I learned along the way as I make more meaningful contributions than previous years.

Getting started contributing to Open Source with Hacktoberfest

When I started learning to code, I was using GitHub mainly as a place to track my progress as I take online courses and build projects to improve my developer skills, meaning pretty much all I did was commit my code and push straight to the main branch. But I knew I can do so much more than that. I always wanted to make my own contributions to open source, but back then I felt I don't have enough skills to navigate the extremely large codebases of popular open source repositories. But sure, even if I can't navigate those popular repos with their large codebases, at least there's loads of guides on how to find good first issues or smaller projects with more beginner-friendly issues that I can tackle!

Looking back, making my first PR was a lot easier said than done. I didn't want my first PRs to be just scanning the project READMEs for typos then make a PR to fix it and call it a day. I want to make some REAL open source contributions. I want to write some code! But how on earth am I gonna make those PRs if all I knew was basic HTML/CSS/JS, maybe throw in some React and maybe a liiiiittle bit of Python from that one time I was exploring some AI/ML stuff? I can't take those "good first issues" if I don't even know the programming language those projects are written in!

So when I first heard about Hacktoberfest back in 2021, I thought it would be a great starting point for me to make commits and pull requests (PRs) outside of my own repos. It's also a time where a lot of tech communities get together and collaborate on a fairly large project while still being accessible to beginners like me! So that's what my first (legit) Hacktoberfest contributions came to be - I participated in tech communities hosting Hacktoberfest events, found some collaborative projects where I can apply my skills, and followed each project's contribution guidelines to get my PRs approved really quick!

For Hacktoberfest 2022, I wanted to make contributions to bigger open-source repos, not just the one-off projects created specifically for Hacktoberfest to be archived later. My development skills also improved a lot in that year, so I was more confident in finding open source projects that have open issues that match my skillset! So I still participated in community-led Hacktoberfest projects, but I also explored some popular repos to see if I can make some PRs in larger-scale projects.

Cloud Environments FTW

My biggest highlight for Hacktoberfest 2022 was making contributions for freeCodeCamp and Sandpack, and I want to highlight how I navigated these popular repos even when they have such large codebases.

The biggest thing that helped me make contributions to freeCodeCamp and Sandpack was that they both have configurations that we can use to open the repos in cloud environments (Gitpod for freeCodeCamp, CodeSandbox for Sandpack) and let them automagically handle the setup and properly install the projects' dependencies. This lets me just focus on working on the changes I need to make and also test if my solutions actually solve the issues I was working on.

So what sort of issues did I solve in these oh-so-complex projects?

...I clarified some instructions in one of freeCodeCamp's lessons, and added new themes for Sandpack. 😅

Yeah, my PRs were pretty simple, but I learned another valuable lesson that I can use to keep contributing on projects as big as those!

The value of reading instructions

Ideally, each open source project should have instructions on how to navigate their codebase and start making contributions, or at least install the dependencies and get their project working either locally on your machine or a cloud environment like I mentioned before, which you can usually find in a CONTRIBUTING.md file. Additionally, you can also sort the Issues tab and filter the issues labelled something like "good first issue", "help wanted", "contributions welcome", etc. Heck, some projects can even have issues that the maintainers posted specifically for Hacktoberfest!

Even if the project can initially seem too big for you to navigate, following these sorts of instructions can get you a long way to making meaningful contributions. In fact, reading setup instructions was how I found out that I can use cloud environments to help me make changes to big repos (CodeSandbox also has some great guides on how to make your contributions via CodeSandbox)!

Growth

And now, here we are with Hacktoberfest 2023. For this year my goal is really straightforward: Use the skills I learned and make my Hacktoberfest PRs in open source repos that I have either used in my projects before or at least follow on GitHub/Twitter/etc, and continue that momentum to keep contributing to open source projects beyond Hacktoberfest.

I'm extremely pleased to say that I made better contributions this year than the previous Hacktoberfest! Here's a quick recap:

I fixed a code example in Astro's docs ~~okay that was a two-line fix just changing some imports but still~~
I added a Remix version for a Product Gallery in Cloudinary's example integrations
I created a Playwright test for one of freeCodeCamp's UI components
I fixed some TypeScript types for Cloudinary's utils package

Now I'm not fully satisfied with the contributions I made this Hacktoberfest (I still think the PRs I'm making remain relatively small), but they do feel a lot more impactful than my PRs in the previous editions of Hacktoberfest.

Moving forward, I'm really excited to keep contributing to open source projects using the skills I developed in Hacktoberfest events. In a way, writing this blog post serves as my pledge to continue this good momentum I built and keep making better, more meaningful contributions to open source porjects even outside Hacktoberfest!

How can YOU make more meaningful open source contributions?

Want to join me in making impactful contributions and give back to the wonderful open source projects you use in your projects? I've got you covered! Here are some tips and tricks I wish I knew when starting out making contributions to other people's projects:

Join active tech communities

If you're an absolute beginner and you don't know many programming languages/frameworks or other advanced topics, participating in tech communities can be a great way to get started working in open source! A lot of tech communities have their collaborative projects that members can actively participate in and applying various things while learning to code, plus Hacktoberfest is also a great time for these communities to host their own events with even more open source projects to contribute to!

Build more projects

When finding open source projects to contribute to, there's really no going around simply building more projects and using more open source tools/frameworks along the way. Not only does it give you more experience writing better code, it also gives you a lot better context when use various open source tools/frameworks, encounter issues/bugs or something that you think can be improved, and gives you more incentive to make your own contributions!

RTFM

Like I mentioned before, reading instructions commonly found in the projects' README.md or CONTRIBUTING.md can help a lot especially if you need to run their code in your local machine (or use cloud environments if you're having trouble installing stuff). Reading the issues you want to work on also helps in making your PR - a lot of well-written issues often give enough context of the problem or even give hints to the solution that needs to be done.

Documentation/Localization PRs are underrated

A growing trend I see in Hacktoberfest events is open source projects looking for extra help on documentation or localization. At first glance these might seem like very small fixes, but I often find them equally as meaningful as code contributions, since working with documentations/localizations often involve a lot of communication with the project maintainers to ensure their topics can get relayed properly to other developers looking to use their project.

Collaborate!

At the end of the day, Hacktoberfest is an event that encourages proper collaboration with open source project maintainers to ensure the quality of contributions. When you find an issue you want to work on, be sure to follow the guidelines set by the project maintainers such as waiting to be assigned before making your PR and using the post templates they provide when you do open your PR, and be sure to follow the maintainers' instructions when they request a change in your PR. Not only does it improve the chance of your PR getting merged faster, collaborating with project maintainers also lightens up their workload to ensure that all contributions follow a certain standard of quality.

Hacktoberfest is a great event for beginners to get started giving back to the developer community by making contributions to open source, but the contributions shouldn't stop after this event ends! Keep participating in your local communities, building more projects, and make your next contributions to open source more meaningful.

See you next year!

Building Headless Data Visualizations with D3.js

Kobe Ruado — Sun, 31 Jul 2022 11:41:55 +0000

D3.js is perhaps the most popular framework for building data-driven visualizations in the web. It offers a wide variety of tools that give dynamic properties based on the data that we pass in. It's also a fully-featured framework for working with the DOM, allowing us to give these dynamic properties into tangible elements in the web page.

D3 got me really interested in building all kinds of interactive charts, so I decided to take the Fullstack D3 course to help me get going! The biggest takeaway I got from there is this 7-step process for building any dataviz component:

Fetch/Access data
Create chart dimensions (how big do we want our chart to be?)
Draw the canvas (use the dimensions to define the inner/outer bounds of our chart)
Create scales (transform data values into dynamic properties)
Draw data
Draw peripherals (like the X/Y axes, annotations/legends, etc.)
Set up interactions (like showing tooltips on hover)

Let's create a simple Line Chart using D3 as an example. I'm using the same Line Chart example from the free chapter of the Fullstack D3 course. It doesn't include Step 7, but this example should be good enough to show our step-by-step process in action!

async function drawLineChart() {
  //* Step 1. Access Data
  const data = await d3.json("./data/my_weather_data.json");

  const dateParser = d3.timeParse("%Y-%m-%d");

  const xAccessor = (d) => dateParser(d["date"]);
  const yAccessor = (d) => d["temperatureMax"];

  //* Step 2. Create chart dimensions
  let dimensions = {
    width: window.innerWidth * 0.9,
    height: 400,
    margins: {
      top: 15,
      right: 15,
      bottom: 40,
      left: 60,
    },
  };

  dimensions.boundedWidth =
    dimensions.width - dimensions.margins.left - dimensions.margins.right;
  dimensions.boundedHeight =
    dimensions.height - dimensions.margins.top - dimensions.margins.bottom;

  //* Step 3. Draw canvas
  const wrapper = d3
    .select("#wrapper")
    .append("svg")
    .attr("width", dimensions.width)
    .attr("height", dimensions.height);

  const bounds = wrapper
    .append("g")
    .style(
      "transform",
      `translate(${dimensions.margins.left}px, ${dimensions.margins.top}px)`
    );

  //* Step 4. Create scales
  const yScale = d3
    .scaleLinear()
    .domain(d3.extent(data, yAccessor))
    .range([dimensions.boundedHeight, 0]);

  const xScale = d3
    .scaleTime()
    .domain(d3.extent(data, xAccessor))
    .range([0, dimensions.boundedWidth]);

  const freezingTemperaturePlacement = yScale(32);
  const freezingTemperatures = bounds
    .append("rect")
    .attr("x", 0)
    .attr("width", dimensions.boundedWidth)
    .attr("y", freezingTemperaturePlacement)
    .attr("height", dimensions.boundedHeight - freezingTemperaturePlacement)
    .attr("fill", "hsl(180deg 44% 92%)"); // "#e0f3f3"

  //* Step 5. Draw data
  const lineGenerator = d3
    .line()
    .x((d) => xScale(xAccessor(d)))
    .y((d) => yScale(yAccessor(d)));

  const line = bounds
    .append("path")
    .attr("d", lineGenerator(data))
    .attr("fill", "none")
    .attr("stroke", "hsl(41deg 35% 52%)") // "#af9358"
    .attr("stroke-width", 2);

  //* Step 6. Draw peripherals
  const yAxisGenerator = d3.axisLeft().scale(yScale);

  const yAxis = bounds.append("g").call(yAxisGenerator);

  const xAxisGenerator = d3.axisBottom().scale(xScale);
  const xAxis = bounds
    .append("g")
    .style("transform", `translateY(${dimensions.boundedHeight}px)`)
    .call(xAxisGenerator);
}

drawLineChart();

In less than 90 lines of code, we can display this basic line chart:

For vanilla JS projects this code is usually good enough, but I wanted to go a step further. I wanted to integrate D3 code into my existing React projects, so I took some time rewriting the course exercises and projects from vanilla D3 into D3 + React (+ TypeScript, for extra challenge).

What is Headless UI?

The Headless UI pattern (not to be confused with the Tailwind Labs project with the same name) is a pattern in which the logical parts (i.e. the state, dynamic properties, lifecycle methods, etc.) of components are separated from the rendering logic (i.e. the HTML markup and the CSS styles).

I recently watched an excellent talk in React Summit about using the Headless UI pattern in a well-known open-source library, and I realized "Huh, Isn't this pretty much what I've been doing with my D3+React rewrite project?"

And indeed, when I rewrite my D3 charts into React I can see a clear separation between the logical parts of my chart and the markup I render into the page. This makes sense, because I'm still using the same tools D3 gives me, but I swapped the D3 selectors and data joins out and let React handle the rendering instead.

Using D3 for Headless Data Visualizations

As it turns out, our step-by-step process gives us a clear opportunity to separate the logical parts of our chart from the markup and styles!

In my React rewrite of that Line Chart example from earlier, the logical parts of the chart only consists of steps 1, 2, and 4, as well as some helpers for steps 5 and 6. Notice how we're still using the same D3 methods to get the scales and generator functions for our data:

function LineChart({ dataset }: { dataset: WeatherData[] }) {
  //* Step 1b. Access Data
  const dateParser = d3.timeParse("%Y-%m-%d");
  const xAccessor = (d: WeatherData) => dateParser(d.date) as Date;
  const yAccessor = (d: WeatherData) => d.temperatureMax;

  //* Step 2. Create chart dimensions
  const dimensions: BoundedDimensions = {
    width: window.innerWidth * 0.9,
    height: 400,
    margin: {
      top: 15,
      right: 15,
      bottom: 40,
      left: 60,
    },
    //? Initialize the bounded dimensions here, so TypeScript doesn't get all fussy
    boundedWidth: 0,
    boundedHeight: 0,
  };

  dimensions.boundedWidth =
    dimensions.width - dimensions.margin.left - dimensions.margin.right;
  dimensions.boundedHeight =
    dimensions.height - dimensions.margin.top - dimensions.margin.bottom;

  //* Step 4. Create scales
  const xScale = d3
    .scaleTime()
    .domain(d3.extent(dataset, xAccessor) as [Date, Date])
    .range([0, dimensions.boundedWidth]);

  const yScale = d3
    .scaleLinear()
    .domain(d3.extent(dataset, yAccessor) as [number, number])
    .range([dimensions.boundedHeight, 0]);

  const freezingTemperaturePlacement = yScale(32);

  //* Set up steps 5 and 6
  const lineGenerator = d3
    .line<WeatherData>()
    .x((d) => xScale(xAccessor(d)))
    .y((d) => yScale(yAccessor(d)));

  const xTicks = xScale.ticks();
  const yTicks = yScale.ticks();

  //* The rest is the rendering logic
}

The rendering logic for step 6 actually gets a bit tricky, since we used some built-in D3 methods to put our X/Y axes directly into the DOM. Fortunately, D3 also gives us some handy tools to build our own X/Y axes from scratch, with a bit of peeking at the final rendered output to check the markup we need to copy.

Here's what our markup now looks like:

function LineChart({ dataset }: { dataset: WeatherData[] }) {
  //* Steps 1, 2, and 4 omitted for brevity

  return (
    <div>
      {/* Step 3. Draw canvas */}
      <svg width={dimensions.width} height={dimensions.height}>
        <g
          transform={`translate(${dimensions.margin.left}, ${dimensions.margin.top})`}
        >
          <rect
            x="0"
            width={dimensions.boundedWidth}
            y={freezingTemperaturePlacement}
            height={dimensions.boundedHeight - freezingTemperaturePlacement}
            fill="hsl(180deg 44% 92%)"
          />
          {/* Step 5. Draw data */}
          <path
            d={lineGenerator(dataset) ?? ""}
            fill="none"
            stroke="hsl(41deg 35% 52%)"
            strokeWidth={2}
          />
          {/* Step 6. Draw peripherals */}
          <g
            fontSize={10}
            fontFamily="sans-serif"
            textAnchor="middle"
            transform={`translate(0, ${dimensions.boundedHeight})`}
          >
            <line stroke="black" x2={dimensions.boundedWidth} />
            {xTicks.map((tick, i) => (
              <g key={i} transform={`translate(${xScale(tick)}, 0)`}>
                <line stroke="black" y2={6} />
                <text y={9} dy="0.71em">
                  {d3.timeFormat("%B")(tick)}
                </text>
              </g>
            ))}
          </g>
          <g fontSize={10} fontFamily="sans-serif" textAnchor="end">
            <line stroke="black" y2={dimensions.boundedHeight} />
            {yTicks.map((tick, i) => (
              <g key={i} transform={`translate(0, ${yScale(tick)})`}>
                <line stroke="black" x2={-6} />
                <text x={-9} dy="0.32em">
                  {tick}
                </text>
              </g>
            ))}
          </g>
        </g>
      </svg>
    </div>
  );
}

It doesn't look exactly the same, but I think it's pretty indistinguishable from our original example unless you squint hard enough!

The full code for the Line Chart rewritten in React results in slightly longer code, adding up to a little over 100 lines. I'd say that's good enough, given that we had to create our X/Y axes from scratch!

What's more, we can actually make our Line Chart a bit more reusable. We can skip Step 2 by accepting the chart dimensions as a prop instead, and we can also make a different Line Chart for other metrics my passing the metric we want as a prop as well (as long as that metric returns a numeric value, of course 😉)!

function LineChart({
  dataset,
  dimensions,
  metric,
}: {
  dataset: WeatherData[];
  dimensions: BoundedDimensions;
  metric: NumericWeatherDataMetric;
}) {
  //* Step 1b. Access Data
  const dateParser = d3.timeParse("%Y-%m-%d");
  const xAccessor = (d: WeatherData) => dateParser(d.date) as Date;
  const yAccessor = (d: WeatherData) => d[metric];

  //* We can skip Step 2 here because we're now accepting the dimensions as a prop.

  // Literally everything else stays the same!
}

Going further

Another awesome part of that React Summit talk was taking the Headless UI pattern one step further and going Framework Agnostic, essentially having the same functionality no matter which framework you use. Let's apply the same concept with our Line Chart!

Adding code snippets for the same component written in different frameworks feels redundant, so I'll just provide links instead:

Here's a quick tl;dr:

Separating the logical parts of our chart from the markup and styles pretty much did most of the heavy lifting for making our chart framework agnostic! The main difference across my rewrites had to do with the framework-specific ways to render the markup, and passing the dynamic properties to the relevant elements.
Having the same logic reused across different frameworks let me do these rewrites a lot faster than I expected! I had basically zero knowledge on how to write Vue/Svelte/Solid components before I did these rewrites, but since I already know what goes into the Line Chart, all it took to rewrite it in these different frameworks was a couple minutes of browsing thru their respective docs about a few basic topics on their rendering logic:
- Fetching data
- Passing props to components
- Using dynamic properties in the markup
- Rendering lists

I see a lot of potential with this Headless UI pattern paired with D3. For instance we can extract some of these commonly used D3 methods and generator functions into a custom React hook (or whatever their equivalents are in other frameworks), and make a reusable headless library of common charts powered by D3!

Rewriting my previous D3 exercises and projects into React provided an even more awesome learning experience beyond the course material, and thanks to that one React Summit talk I also gained some new insights about reusable code patterns and even applied my knowledge in different frameworks!

The 2022 Training Arc Begins!

Kobe Ruado — Tue, 01 Feb 2022 04:20:38 +0000

It's time to start the year off with a bang! I've had lots of fun doing the #100DaysOfCode challenge last year, and I had an absolute blast doing several online courses and building their major course projects with my own personal take, from adding minor improvements and additional features to adding another layer to the tech stack used in the project. That's why I'm starting this year off with a fresh new round of #100DaysOfCode, with more focus on doing the things I really like and satisfying my curiosity on the various technologies I encounter in my career.

Over this past month I've been ~~taking a much-needed break from coding~~ assembling a new curriculum of online courses I'll be taking this year, focusing mainly on courses with a ton of exercises and projects that I can maybe tweak to my liking as I learn more stuff over the course of this year.

#100DaysOfCode Round 1: Mad Science

This round is an improvement of sorts refining the ideas from the previous round I completed last year, improving the parts I really liked about last round, and developing a streamlined curriculum of online courses mostly about various topics I'm curious about (hence "Mad Science"), and other topics that reinforce the skills relevant to my career.

My main task for this round remains the same: Complete as many of these courses as I can, making steady progress each day for the next 100 days. This includes, but is not limited to:

Getting the 100% Complete status on the course, and thus acquiring the Certificate of Completion
Completing the course projects

Why Online Courses?

Honestly? Because it's fun! After doing a bunch of online courses last year, it tuned out to be something I very much enjoy. As such, I want to take the parts I liked about last round, refine these ideas to make a curriculum of online courses, and pretty much just continue doing what I love and make lots of progress this year!

For this round, I've chosen exercise-driven courses for topics I don't know much about (or want to take a deeper dive in). To help myself come up with project ideas, something that I admittedly lack the skill (or creativity?) to do, I've also picked a bunch of project-based courses with some interesting and comprehensive projects that I can tweak to my liking as I learn more throughout this round.

The Starting Lineup

I've organized my courses into two distinct categories. The first category consists of courses where I plan to follow along with the course content from start to finish. These will typically be the courses that I'll be adding to my Main Curriculum for this round. The second category consists of courses about topics I've already done, or courses that have plenty of comprehensive projects about various topics. For these courses, I'll be taking the major course projects and use those as supplementary resources/extra credit material for my Main Curriculum courses, ideally incorporating the things I learn from the Main Curriculum courses to add extra features and/or provide an alternate implementation for these course projects.

Here is the first batch of courses I plan on doing for this round:

1. Epic React

Starting the year off strong with this course! I'm really excited about the workshop format of this course, which is unlike any other video-based course I've seen so far.

Epic React also has a Typescript-based next branch for most of its workshops, and I do plan on checking those out and learn Typescript as I go along with the course.

Supplemental Resources

Typescript: The Complete Developer's Guide

💯 Extra Credit

freeCodeCamp - Front End Development Libraries Projects
- Build a Markdown Previewer
- Build a Drum Machine

2. CSS for Javascript Developers

This is another course with a somewhat different format to what I'm used to with Udemy courses. Combined with a solid course content, I have high hopes that this course will help me get even better with CSS!

Supplemental Resources

💯 Extra Credit

freeCodeCamp: Responsive Web Design Projects
- Build a Technical Documentation Page
- Build a Personal Portfolio Page

3. Fullstack D3 and Data Visualization

After I finished the D3 section of The Advanced Web Developer Bootcamp last year, I've always been intrigued by data visualization with D3. With this course, I hope to satisfy that curiosity about D3 and build some beautiful data visualization projects. Bonus points if I can combine React with D3 to make the visualizations interactive as well!

Supplemental Resources

freeCodeCamp - Data Visualization Certification Projects

💯 Extra Credit

Redo projects using React + D3

4. Major Project - TBA

I've got plans to redo a past E-commerce project into the latest version of the frameworks/libraries I used the first time around. More details soon!

Supplemental Resources

Fullstack Advanced React & GraphQL

There's a lot more courses that I want to take other than the ones listed above, and for now I've organized them into Specializations, Electives, and other courses to take project ideas from. My plan is to do this first batch of courses first, then add these other courses into the Main Curriculum and see where my curiosity takes me!

2021: Year in Review

Kobe Ruado — Fri, 31 Dec 2021 11:49:38 +0000

Hello world! To most of you this is probably the first time you've heard of me, but to a certain group of people this is the first time you've heard from me in a really long while. A lot has happened not just this year, but coming back from the 2020 lockdowns as well. Now that I'm feeling much better after this honestly amazing year, I think I can finally take a step back and talk about the mess I made and what I've been doing to make up for them. And what better way to explain myself than write my very first blog post about what exactly I've been up to?

Let's talk.

Crash and burn

2020 has not been a kind year to me, which I assume can also be said for a lot of other people. I had big plans at the time, ready to bounce back once and for all with a clear roadmap to graduation thanks to the help of my friends and mentors. And then the lockdowns started, and even in the comfort of my own home I found myself unable to fulfill even the simplest most basic requirements, and it snowballed to me ending up dropping literally every project I had.

Looking back, I have to admit that this problem wasn't entirely caused by the lockdowns. Even a few years before I was barely scraping by, managing to do the bare minimum of tasks in both my work and at university so that I can at least call myself "productive". In hindsight I think that stubbornness only prolonged the inevitable, and failing to adjust with the "new normal" of the lockdown period was the final nail in the coffin. I started dropping projects at work and even wasted my progress in my university thesis project, and the shame I felt from my failures made me cut off contact from basically the entire outside world, and isolated myself for months during the lockdown.

One of the most memorable lessons I learned while I was working at startups was to fail fast, and fail often. What I think these lessons neglect to mention is that failures cost a lot. Even moreso when that one little misstep snowballs into more serious failures, and suddenly I find myself with a lot of burned bridges, friendships destroyed, and my reputation completely and utterly ruined.

Going up from rock bottom

Somewhere along those several months of isolating myself, I realized that I needed to move forward somehow. I wanted to get rid of that nasty feeling of shame and disappointment, and if I can't do anything to make it up to the people I failed, the least I could do was to offer a genuine apology with the intent to work on improving myself and maybe not fail any more people next time.

Towards the end of 2020, I started reaching out to a certain few of my most respected people (of which I felt that I disappointed the most) - At first I just wanted to apologize for my mistakes, not even expecting any response in return, I really just wanted to get some closure for my mistakes and maybe start moving on and screw up less next time. To my surprise I was actually greeted back with open arms, and after a few weeks of me sorting myself out I was offered back my job and before I know it, I got myself a miraculous second chance to continue the project I was previously working on.

For the first few months of me getting back to work, I was playing it as safe as I possibly could, purely because I absolutely did not want to waste this miraculous second chance that I got and disappoint the people that put their trust in me yet again. Regardless, I contributed whatever I can to move our projects along, and going into 2021 I decided to make the most out of this opportunity to climb back up from rock bottom, and work on improving myself to contribute better on the job that I just got back.

I started 2021 with a pretty simple goal: Make what used to be an insurmountable, monumental task for me right now into a lazy Sunday afternoon for me in the future. With the help of my online course backlogs I started (re-)learning everything from the ground up, contribute to my work using the things I learned, and then rinse and repeat, and maybe make a little bit more progress the next day. At the start of 2021, there were a lot of days where I'd consider it a massive win to even be able to open my code editor, and at best I would just watch a couple online course lectures without actually following along with the code. There's a certain value in those small actions however, and over the course of this year my progress steadily kept getting bigger and more consistent, and I've started to gain back the strength and confidence that I once had thanks to that small start.

Starting #100DaysOfCode

Once I felt a bit more comfortable with my workflow, I started taking on a tougher challenge, focusing on what's going to give me the best value for my time learning new things and contributing more to my work at the same time. To achieve this I started my Perpetual Testing Initiative, a spin-off of sorts to the #100DaysOfCode challenge that I came up with just to start with a more casual ruleset:

I was tracking my progress not by time spent, but rather an arbitrary amount of progress that I feel is "just right" for the day,
Focusing less on the complete 100-day streak and more on the learning experience along the way (i.e. taking breaks as needed to preserve what little stamina I had 😛).
Relying heavily on online courses to (re-)learn my skills and improve my work.
Working in silence until the round is complete (See: I Triggered It Thirty-Five Minutes Ago)

I also selected a set amount of online courses to work on for this first round, as a way to direct my focus rather than getting distracted by the shiny new stuff, and also to use the knowledge I gained from these online courses to improve the quality of my work. Here are the twelve courses I chose for this round:

I've also marked each course as follows:

BLUE - Priority courses to complete (i.e. get 100% progress and complete the major course projects)
ORANGE - Optional courses, but it would still be nice if I can also complete them within these 100 days

I dubbed this initial round Round 0 for a number of reasons: When I started this round I really wasn't sure if I was going to be able to complete the full 100 days, so my initial objective was to just do as many days as I can and then peace out when my stamina runs out and I did not see myself being able to continue further, and so I just wanted to see how well I can do on this round without making it fully "official". I also saw this round as kind of a new starting point - or in other words, staring from zero. And hey, who doesn't like some good ol' 0-indexing puns?

Throughout the first few weeks of this round, I'd already consider it a whole day's worth of progress to be able to complete just a few lecture videos. I also immediately broke my streak to remind myself to preserve my stamina and take a break whenever I start to feel like not coding anything. Taking breaks as needed also played a large part of preserving my motivation throughout this round, and I think it's even one of the main reasons I was able to do so much progress in this round at all! After taking a break for a couple weeks about halfway through the round, I started to find myself actually wanting to write some more code and watch a couple more lecture videos. Towards the end of this round I'd say I've actually accomplished my main goals: I went from being barely able to muster up the strength to even open up my code editor to casually breezing through multiple sections of the online courses I'm taking without breaking a sweat - and not only was I able to complete the whole 100 days, I also fully completed most of the courses I picked for this round, along with a few more extra courses whose progress I wasn't even counting for this round!

Here's my final progress in the courses I selected above:

Throughout the 100 (not necessarily consecutive) days of this round, I've managed to complete 10 out of the 12 courses I selected. I'd say that's some pretty good progress!

Highlights

I've managed to surprise myself with how much progress I made this year. Here are some highlights I particularly liked:

Completing all five of freeCodeCamp's Scientific Computing with Python projects in one day
Completing 3/4 of the Pull Requests I needed for the Hacktoberfest challenge in one day, and adding more pull requests throughout the month of October
Starting to deviate from my comfort zone of simply following along with the course lecture videos, culminating in remaking the final major project in one of the courses from good ol' Node/Express/EJS into a full blown MERN stack project

Fun stats

2021 ended up being a very productive year for me. Let's take a look at some fun stats.

Here's a pretty neat visualization of my GitHub contributions in 2021, thanks to GitHub Wrapped:

There's also my 2021 GitHub Skyline, where my GitHub contributions are visualized into a 3D skyline.

I also managed to keep up a fairly decent streak on Duolingo:

What's next?

I dedicate this year to the many people I disappointed with my mistakes and failures. At this point I feel like it's already too late to fix my mistakes, but the least I can do is to move forward with a genuine conviction to never let other people down the way I did back then. Throughout this year, I made it my number one goal to keep improving myself, and maybe through a continuous effort and an honest motivation to do better, someday I can have the power to mend the broken connections and the bridges I burnt back then. And so moving forward this upcoming year, I'll keep building even bigger and better projects in the purpose of doing better than I did last time.

While 2021 has been a really amazing year for me in terms of progress, both in doing #100DaysOfCode and lots of extra stuff I've also done outside the challenge as well, I can still see quite a few improvements to be done and incorporate as I move forward in 2022. I'm already cooking up some big plans for the next round of #100DaysOfCode, and it honestly feels exciting to look forward to the projects I'm planning to do in 2022. For now, I'm happy to report that I've accomplished everything I can for this year, both personally and at work, and I'll be taking a much-deserved break for the time being while I flesh out my plans for the upcoming year's round of #100DaysOfCode. Until then, stay tuned!