In this podcast, we'll bring you the inspiring learning and career development stories of developers, technical content creators, and other tech professionals We'll also share their insights into the world of tech with you.

This week we'll release the first three episodes:

Liu Rui with his daughter

Ep. 1 - Liu Rui: Enjoy Coding and Live with Developer's Mindset

Liu Rui is an engineer with 15 years of experience in Java development. Over the past few years, he has published many articles and video tutorials on the freeCodeCamp community publication and YouTube channel.

When Liu Rui was in junior high school, he was inspired to learn about computers and coding because of his father's enthusiasm for teaching himself coding. Then Liu Rui taught himself Java in university.

In this episode, he shares how he grows from a developer without confidence to a software architect, and how he lives with the wisdom he's gained from coding – not wanting to repeat himself, accepting imperfections, and compromising wisely. He also talks about teaching his daughters to code :)

Papaya Huang

Ep. 2 - Papaya Huang: Coding is My Hogwarts

Papaya taught herself to code in her thirties. Now, she is a front-end developer working with a remote team.

She is big fan of Harry Potter, and she feels that the process of exploring the world of code is quite like going to Hogwarts: even though there's a number of obstacles, she keeps solving problems and having fun in the process.

She talks about her love for coding in this episode, and how she has overcome various challenges as a learner. She also shares a bunch of useful and interesting books, video tutorials, and APIs.

Ep. 3 - Chen Zhicheng: Front End Development vs Back End Development

Zhicheng is an experienced full-stack engineer. When he was in junior high school, he worked with his father to develop a grade management system for his school using Visual Basic. And while he was at university, he worked with his teacher to build a Q&A platform to answer all kinds of questions from students.

In the first few years of his work, he always worked overtime, and his work and life were out of balance. So, he quit his job and became a "digital nomad".

After understanding the meaning of life a bit better, he completed all the freeCodeCamp certifications within one month, systematically studied front-end development and NodeJS, and got a job at a big company. Now, he works as a technical lead at a start-up.

In this episode, Zhicheng shares his learning and working experience, his insights into front-end and back-end development, and how he's exploring his life's mission.

See You in the freeCodeCamp Chinese Podcast

We plan to post one episode every Friday.

If you enjoy these episodes, please share the podcast with your friends. It will help us a lot.

We'd also appreciate it if you could leave us a 5-star review on the platform where you listen to this podcast. Your support is valuable to freeCodeCamp and will help us provide more coding education resources for free.

Start your coding journey at freeCodeCamp and share your stories along the way. If you'd like to share your own story in our podcast, please email us at chinese@freecodecamp.org.

Happy coding!

Object-oriented programming is an important programming paradigm. It organizes code into objects which makes it easier to manage and maintain your applications.

Many articles explain in detail the benefits of object-oriented programming and how you can use it to build applications.

But beginners may have questions: Why should I apply object-oriented programming? When should I use it?

This article will help beginners understand these questions by building the same timer functionality based on both procedural and object-oriented programming methods.

What We Will Cover

• HTML basics, such as DOM methods and DOM events
• CSS basics, like flex layouts
• JavaScript knowledge, such as regular expressions, classes, constructor()s, objects, the this keyword, the setInterval() method, event mechanisms, and so on.

Table of Contents

• How to Create a Timer Interface with HTML and CSS
• How to Build a Timer using Procedural Programming
  • Build the Basic Functions
  • How to Restrict the Input Range of the Hours, Minutes, and Seconds
  • How to Optimize the Format of the Hours, Minutes, and Seconds
• How to Build a Timer using Object-Oriented Programming
  • New Timer Class
  • Timer Update
  • Start the Timer
  • Stop the Timer
  • Pause the Timer
  • Display Current Time
  • Create Object Instances
  • User Interface Interaction with Functions
• How to Add the Event Mechanism to Object-Oriented Programming
  • Create the Event Generator
  • New Timer Class
  • Create Object Instances
  • User Interface Interaction with Functions
• Conclusion

How to Create a Timer Interface with HTML and CSS

First, let's write a basic timer interface with HTML and CSS, including an input field to display the time and a few buttons.

The HTML looks like this:

<!DOCTYPE html>
<html>

<head>
    <title>Timer</title>
</head>

<body>
    <div class="container">
        <h1>Timer</h1>
        <div class="ipt">
            <input id="inputh" type="number" placeholder="hour">
            <input id="inputm" type="number" placeholder="minute">
            <input id="inputs" type="number" placeholder="second">
        </div>
        <div class="btn">
            <button id="btn-start" onclick="start_counting()">Start</button>
            <button id="btn-pause" onclick="pause_counting()">Pause</button>
            <button id="btn-stop" onclick="end_counting()">Stop</button>
        </div>
        <p id="currentTime">current time: </p>
    </div>
</body>

The timer contains three input elements, with ids of inputh, inputm and inputs, and types of number. These allow the user to enter the values of hours, minutes, and seconds.

Below the input field, three button elements start, pause, and stop the timer, respectively.

Each button has an onclick event. The property value of the onclick is a function, and we will write the code for this function in the JavaScript section. When the user clicks a button, the corresponding function is executed.

In JavaScript, we call the function by its name, so we need to put parentheses after the function name.

You can learn more about the onclick event in this article.

The p element below the button synchronizes the time in the input elements.

Let's add some simple CSS to the timer and style it:

<style>
    .container {
        margin: 0 auto;
        width: 300px;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .ipt {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    input {
        width: 100px;
        height: 50px;
        font-size: 20px;
        text-align: center;
    }

    .btn {
        margin: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    button {
        margin: 10px 10px;
        width: 50px;
        height: 30px;
        font-size: 10px;
    }

    #currentTime {
        margin: 10px;
        color: green;
    }
</style>

We use Flexbox to center the elements. Add the CSS below to the parent element:

display: flex;
justify-content: center;
align-items: center;

This centers the child element horizontally and vertically, relative to the parent element.

You can see more information about CSS Layout in this article, or you can further style the timer as you like.

Next, we'll add the JavaScript code to start, pause, and stop the timer.

How to Build a Timer using Procedural Programming

Build the Basic Functions

This code shows a timer program designed with an event-driven, procedural-oriented mindset consisting of:

• 2 sets of global variables: the hour/minute/second variables and the return value of the setInterval() function
• 4 key functions: the event handlers for the start, pause, and stop buttons, and the execution function that is called in a loop during the countdown

First, initialize the button state with the DOM method document.getElementById().disabled.

// initialize button state
document.getElementById("btn-pause").disabled = true;
document.getElementById("btn-stop").disabled = true;

Next, we define global variables to store hour, minute, and second values.

// define global variables
var timer = null; // store the returned value of timer
var h = 0; // store the value of hour
var m = 0; // store the value of minute
var s = 0; // store the value of second

In the start_counting() function which starts the timer, we use document.getElementById().value to get the values of the elements with id of inputh, inputm, and inputs, respectively. These are the values of hours, minutes, and seconds entered by the user in the timer input field, and assign values to h, m and s.

Then we check the hour, minute, and second values entered by the user through the if statement. If the values are all equal to 0, or if one of the values is less than 0, it shows the popup message The time entered is illegal! and returns, and the program stops execution.

Assign the value setInterval() to the timer variable timer. This method takes two arguments, the first being a function and the second being a time in milliseconds. In this example, we specify that the timer executes a function counting every 1000 milliseconds (i.e., 1 second), which is described below.

For more information about the setInterval() method, you can see the MDN docs.

After that, change the state of buttons and input fields to prohibit users from re-entering numbers.

// define a function
// start the timer
function start_counting() {
    // get the time entered or set a default value
    h = +document.getElementById("inputh").value || h;
    m = +document.getElementById("inputm").value || m;
    s = +document.getElementById("inputs").value || s;

    // check for illegal input
    if (
        (h == 0 && m == 0 && s == 0) ||
        (h < 0 || m < 0 || s < 0)
    ) {
        alert("The time entered is illegal!");
        return;
    }

    // start the timer
    timer = setInterval(counting, 1000);

    // change the state of buttons and input fields to prohibit users from re-entering numbers
    document.getElementById("btn-start").disabled = true;
    document.getElementById("btn-pause").disabled = false;
    document.getElementById("btn-stop").disabled = false;
    document.getElementById("inputh").disabled = true;
    document.getElementById("inputm").disabled = true;
    document.getElementById("inputs").disabled = true;
}

Then, in the pause_counting() function, which is responsible for pausing the timer, you set the state of the buttons and input fields when the timer is paused, and call clearInterval() to remove the timer and stop the countdown.

// pause the timer
function pause_counting() {
    // change the state of buttons and input fields to allow users to re-enter numbers
    document.getElementById("btn-start").disabled = false;
    document.getElementById("btn-pause").disabled = true;
    document.getElementById("btn-stop").disabled = false;
    document.getElementById("inputh").disabled = false;
    document.getElementById("inputm").disabled = false;
    document.getElementById("inputs").disabled = false;

    // pause the timer
    clearInterval(timer);
}

The end_counting() function ends the timer. It also calls clearInterval(), and resets the hours, minutes, and seconds to 0. The text below, "Current time:", is updated to "Timer stopped".

// stop the timer
function end_counting() {
    // change the state of buttons and input fields to allow users to re-enter numbers
    document.getElementById("btn-start").disabled = false;
    document.getElementById("btn-pause").disabled = true;
    document.getElementById("btn-stop").disabled = true;
    document.getElementById("inputh").disabled = false;
    document.getElementById("inputm").disabled = false;
    document.getElementById("inputs").disabled = false;

    // stop the timer
    clearInterval(timer);

    // reset the time variables
    h = 0;
    m = 0;
    s = 0;
    document.getElementById("currentTime").innerHTML = "Timer stopped";
}

Next is the counting() function, which is the function called in setInterval(). It checks if the hour, minute, or second is 0 with an if statement, and performs the relative action.

This is the conventional implementation for timers, and it is easy to understand with our experience in daily life, for example, when the number of seconds hits 0, it then becomes 59 by "borrowing" 1 from the number of minutes – like this: 00:03:02, 00:03:01, 00:03:00, 00:02:59...

The setInterval() method updates the values of h, m and s once per second. We synchronize the updated time in the current time: text by using document.getElementById().innerHTML.

Finally, the if statement checks the hour, minute and second values, and when all three values are 0, the end_counting() function and the setTimeout() function are executed. In the setTimeout() function, execute the popup message "Time is up!".

Here's an interesting fact: you can try removing setTimeout() and running alert("Time is up!") directly after end_counting(), you'll see that the popup blocks DOM rendering - that is, it pops up the "Time is up!" and then change the state of the button and input fields. When we use setTimeout(), these two actions happen synchronously. You can think about the function of setTimeout() here.

If you want to learn more about the usage of setTimeout(), check out this article on freeCodeCamp.

// countdown
function counting() {
    // check if the second is 0
    if (s == 0) {
        // check if the minute is 0 when the second is 0
        if (m == 0) {
            // the entered time has already been checked for legality before starting the timer, so there is no need to check the value of the variable h again here
            h--;
            m = 59;
            s = 59;
        } else {
            // when the minute is not 0, the minute minus 1 and the second becomes 59
            m--;
            s = 59;
        }
    } else {
        // when the second is not 0, the second minus 1
        s--;
    }

    // display current time
    document.getElementById("currentTime").innerHTML = "current time: " + h + " h " + m + " m " + s + " s";
    document.getElementById("inputh").value = h;
    document.getElementById("inputm").value = m;
    document.getElementById("inputs").value = s;

    // check if the second is 0
    if (s == 0) {
        // when the second is 0, check if the minute is 0
        if (m == 0) {
            // when the minute is 0, check if the hour is 0
            if (h == 0) {
                // when the hour is 0, stop the timer
                // stop the timer
                end_counting();
                // execute popup in the next event loop to prevent it from blocking DOM rendering
                setTimeout(function () {
                    alert("The time is up!");
                }, 0);
                return;
            }
        }
    }
}

Sometimes the user may enter a negative number in the hour, minute, or second input fields, and the code alerts the user by popping up "The time entered is illegal!". Other times, the user may enter hours greater than 24, or minutes and seconds greater than 59, which doesn't work either.

In addition, to make the time display more beautiful, we may want to display the hours, minutes, and seconds as two digits.

We can improve the code above in two ways.

How to Restrict the Input Range of the Hours, Minutes, and Seconds

When the number of hours entered is greater than 24, we want to modify it to 24 automatically. Similarly, when it is less than 0, we want to modify it to 0.

And when the number of minutes and seconds entered is greater than 59, we want it to be automatically modified to 59. When it is less than 0, modify it to 0.

The event listener method addEventListener() is used here to execute the function when the input event occurs. parseInt() is also used to convert the input values to numeric types.

var inputh = document.getElementById("inputh");
inputh.addEventListener("input", function() { 
    inputh.value = parseInt(inputh.value||0);
    if (inputh.value > 24) inputh.value = 24;
    if (inputh.value < 0) inputh.value = 0;
});

var inputm = document.getElementById("inputm");
inputm.addEventListener("input", function() {
    inputm.value = parseInt(inputm.value||0);
    if (inputm.value > 59) inputm.value = 59;
    if (inputm.value < 0) inputm.value = 0;
});

var inputs = document.getElementById("inputs");
inputs.addEventListener("input", function() {
    inputs.value = parseInt(inputs.value||0);
    if (inputs.value > 59) inputs.value = 59;
    if (inputs.value < 0) inputs.value = 0;
});

How to Optimize the Format of the Hours, Minutes, and Seconds

When the numbers of hours, minutes, or seconds are a single digit, we can prefix them with 0 by using a regular expression.

h = h.toString();
m = m.toString();
s = s.toString();
if (h.match(/^\d$/)) { // If the hour is a single digit, add 0 in the front
    h = "0" + h;
}
if (m.match(/^\d$/)) { // If the minute is a single digit, add 0 in the front
    m = "0" + m;
}
if (s.match(/^\d$/)) { // If the second is a single digit, add 0 in the front
    s = "0" + s;
}

You can view the online demo on CodePen:

See the Pen pp by miyaliu666 (@miyaliu666-the-styleful) on CodePen.

Alright, we've built a timer!

You might be thinking: what if I want to add multiple timers to a project?

In this case, you'll need to set different ids for each timer's input field so that document.getElementById().value gets the corresponding value.

For example, for timer No.1 with id inputh1, we assign h1 = +document.getElementById("inputh1").value to start_counting(). For timer No.2 with id inputh2, we assign h2 = +document.getElementById("inputh1").value, and so on.

The actual project business is usually not as simple as just creating a bunch of timers. As you can imagine, the code can easily become lengthy and messy.

So now it's time to introduce object-oriented programming.

How to Build a Timer using Object-Oriented Programming

You may have heard developers say they need to "new an object" on some occasions - as if you can get what you want by just using the new keyword. Behind this is the concept of object-oriented programming.

In this section, we'll refactor the timer in the previous section with object-oriented programming, separating the "timer function" from the "user interface interaction".

The HTML and CSS are similar to the previous section, so we won't go over them here. You can see the entire code in this CodePen demo.

See the Pen oop by miyaliu666 (@miyaliu666-the-styleful) on CodePen.

If you have gone through freeCodeCamp's Object-Oriented Programming course, you'll likely remember that "objects in JavaScript are used to model real-world objects, giving them properties and behavior just like their real-world counterparts", such as cars, shops, and birds.

So let's start by defining the properties and methods (behavior) of objects :)

New Timer Class

The class keyword creates a class named Timer that has a constructor() with _on_update(), start(), stop(), pause(), and show() methods.

<script>
    class Timmer {
        constructor() {
            this.name = 'undefined';
            this.timmer = undefined;
            this.h = 0;
            this.m = 0;
            this.s = 10;

            this._on_update_callback = undefined;
            this._on_stop_callback = undefined;
        }

        _on_update() {

        }

        start() {

        }

        stop() {

        }

        pause() {

        }

        show() {

        }
    }

</script>

According to the MDN,

The constructor method is a special method of a class for creating and initializing an object instance of that class.

In it, we initialize several variables – that is, properties of the object – with the this keyword.

In JavaScript, the value of this depends on context. In this case, it refers to the object that calls the function, that is an instance of Timer.

We also use this to initialize the callback function _on_update_callback when the timer is updated and the callback function _on_stop_callback when the timer is stopped.

The _on_update(), start(), stop(), pause(), and show() methods are used to update, start, stop and pause the timer, and display the current time, respectively. We will add code for them step by step.

Timer Update

We'll handle the timer update using the _on_update() method. As above, we'll still use the if statement to execute code when the hours, minutes, and seconds are 0.

Call the external callback function _on_update_callback if it exists.

_on_update() { 
    if (0 === this.h && 0 === this.m && 0 === this.s) {
        this.stop();
        return;
    } else if (0 === this.s) {
        this.s = 59;
        if (0 === this.m) {
            this.m = 59;
            this.h = this.h - 1;
        } else {
            this.m = this.m - 1;
        }
    } else {
        this.s = this.s - 1;
    }

    this.show();
    if (0 === this.h && 0 === this.m && 0 === this.s) {
        this.stop();
    }

    // call the external callback function if it exists
    if (this._on_update_callback && typeof this._on_update_callback === 'function') {
        this._on_update_callback();
    }
}

Start the Timer

We're using the start() method to start the countdown – that is, it is executed after the user clicks the Start button. With the setInterval() method, _on_update() is executed once every second.

start() {
    if (this.timmer) {
        console.log(`[${this.name}] started`);
        return;
    }
    console.log(`[${this.name}] starts`);
    this.timmer = setInterval(() => {
        this._on_update();
    }, 1000);
    this.show();
}

Stop the Timer

The stop() method is used to stop the timer. Use clearInterval() to stop the countdown. Call the external callback function _on_stop_callback() if it exists.

stop() {
    console.log(`[${this.name}] stopped`);
    clearInterval(this.timmer);
    this.timmer = undefined;

    // smiliar to update, check for the stop callback function
    if (this._on_stop_callback && typeof this._on_stop_callback === 'function') {
        this._on_stop_callback();
    }
}

Pause the Timer

Use the pause() method to pause the timer and use clearInterval() to stop the countdown.

pause() {
    console.log(`[${this.name}] paused`);
    clearInterval(this.timmer);
    this.timmer = undefined;
}

Display Current Time

Use the show() method to print the current time on the console.

show() { // display the current time
    console.log(`[${this.name}] current time: ${this.h}:${this.m}:${this.s}`);
}

Create Object Instances

Next, use the new keyword to create two object instances, that is two timers, which have the properties and methods of the Timer object.

According to MDN,

The new operator lets developers create an instance of a user-defined object type or of one of the built-in object types that has a constructor function.

Assign two objects to t1 and t2 and put them into the array list_timmer. Also, create an array of sounds list_sound, which we will use later.

const t1 = new Timmer();
t1.name = 'Timer 1';
const t2 = new Timmer();
t2.name = 'Timer 2';
const list_timmer = [t1, t2];
const list_sound = ['meow', 'woof'];

User Interface Interaction with Functions

Next, we'll create 6 functions.

The first function, play_audio(), has one argument. The function creates an audio element in the DOM and assigns it to audio. Then it sets the value of the src property to a template literal and calls its play() method to play the sound.

function play_audio(sound) {
    // meow.mp3 and woof.mp3 are local files and should be in the same directory with HTML file
    const audio = document.createElement('audio');
    audio.src = `${sound}.mp3`;
    audio.play();
}

The second function, btn_start_onclick(), has one argument, i. This function is called when the "start" buttons of the two timers are clicked, passing either 1 or 2 as an argument:

<input id="tmr-1-btn-start" class=" btn" type="button" value="start" onclick="btn_start_onclick(1)" />

<input id="tmr-2-btn-start" class="btn" type="button" value="start" onclick="btn_start_onclick(2)" />

The function first gets the value of the input field and assigns it to the timer. Then it sets the state of the input field and the button with the dom_update_inputs() function. We will set dom_update_inputs() later.

Remember that we initialized two callback functions at the beginning? Here we will assign an arrow function to them.

_on_stop_callback executes the callback function dom_update_inputs, which we'll discuss below.

The callback function play_audio() is also executed here with the argument list_sound[i - 1], that is it takes the element meow or woof from the array list_sound defined earlier and passes it to the src property of audio to play the corresponding sound when the timer is stopped. For example, when i is 1, audio.src = meow.mp3;.

_on_update_callback executes the callback function dom_update_timmer(), which we will talk about shortly.

Take the corresponding timer from the timer array through const tmr = list_timmer[i - 1]; and execute the start() method to start the timer.

function btn_start_onclick(i) {
    // get the input value
    const ipt_h = document.getElementById(`ipt-${i}-h`);
    const ipt_m = document.getElementById(`ipt-${i}-m`);
    const ipt_s = document.getElementById(`ipt-${i}-s`);

    // set the state of input fields and buttons
    dom_update_inputs(i, "COUNTING");
    // take the corresponding timer from the timer array
    const tmr = list_timmer[i - 1];
    // assign the input value to timer
    tmr.h = Number(ipt_h.value);
    tmr.m = Number(ipt_m.value);
    tmr.s = Number(ipt_s.value);

    // set the callback function
    tmr._on_stop_callback = () => {
        // play the sound
        play_audio(list_sound[i - 1]);
        // set the state of input fields and buttons
        dom_update_inputs(i, "STOPPED");
    }
    tmr._on_update_callback = () => {
        dom_update_timmer(i);
    }
    // start the timer
    tmr.start();
}

The third function, btn_pause_onclick(), has one argument and is called when the pause buttons for both timers are clicked, passing in either 1 or 2. The callback function, dom_update_inputs, is executed to set the state of the input fields and buttons, and the pause() method is executed to pause the timer.

function btn_pause_onclick(i) {
    dom_update_inputs(i, "PAUSED");

    // take the corresponding timer from the timer array
    const tmr = list_timmer[i - 1];

    // pause the timer
    tmr.pause();
}

The fourth function, btn_stop_onclick(), is similar to the third function. It's called when the "stop" buttons of both timers are clicked, and sets the state of the input fields and buttons when the timer is stopped. Then the stop() method is executed to stop the timer.

function btn_stop_onclick(i) {
    dom_update_inputs(i, "STOPED");

    // take the corresponding timer from the timer array
    const tmr = list_timmer[i - 1];


    // stop the timer
    tmr.stop();
}

The fifth function dom_update_inputs() has two arguments, i and status. It sets the state of the input fields and buttons through if.... .else if... statements when status is met.

When this function is called in the second, third, and fourth functions above, it defines the state of the input fields and buttons when the timer is started, paused, and stopped.

function dom_update_inputs(i, status) {
    if ('COUNTING' === status) {
        // set the state of input fields
        document.getElementById(`ipt-${i}-h`).disabled = true;
        document.getElementById(`ipt-${i}-m`).disabled = true;
        document.getElementById(`ipt-${i}-s`).disabled = true;

        // set the state of buttons
        document.getElementById(`tmr-${i}-btn-start`).disabled = true;
        document.getElementById(`tmr-${i}-btn-pause`).disabled = false;
        document.getElementById(`tmr-${i}-btn-stop`).disabled = false;
    } else if ('PAUSED' === status) {
        // set the state of input fields
        document.getElementById(`ipt-${i}-h`).disabled = false;
        document.getElementById(`ipt-${i}-m`).disabled = false;
        document.getElementById(`ipt-${i}-s`).disabled = false;

        // set the state of buttons
        document.getElementById(`tmr-${i}-btn-start`).disabled = false;
        document.getElementById(`tmr-${i}-btn-pause`).disabled = true;
        document.getElementById(`tmr-${i}-btn-stop`).disabled = false;
    } else if ('STOPPED' === status) {
        // set the state of input fields
        document.getElementById(`ipt-${i}-h`).disabled = false;
        document.getElementById(`ipt-${i}-m`).disabled = false;
        document.getElementById(`ipt-${i}-s`).disabled = false;

        // set the state of buttons
        document.getElementById(`tmr-${i}-btn-start`).disabled = false;
        document.getElementById(`tmr-${i}-btn-pause`).disabled = true;
        document.getElementById(`tmr-${i}-btn-stop`).disabled = true;
    }
}

The sixth function dom_update_timmer() is used to synchronize the time to the page.

function dom_update_timmer(i) {
    // take the corresponding timer from the timer array
    const tmr = list_timmer[i - 1];

    // synchronize the time to the page
    document.getElementById(`ipt-${i}-h`).value = tmr.h;
    document.getElementById(`ipt-${i}-m`).value = tmr.m;
    document.getElementById(`ipt-${i}-s`).value = tmr.s;
}

Above, we have encapsulated the "timer function" in the Timmer class and kept the "user interface interaction" in the global scope, so that multiple timers as the Timmer class instances can run simultaneously.

In this section, I didn't set a limit on the range of hour, minute and second inputs or optimize their format. If you are interested, you can refer to the code in the previous section and do it yourself in the CodePen demo :)

Thinking further, what if our project has other functional modules besides this set of two timers - for example, two sets of timers, which are object instances of the same type Timer? When assigning values to the callback function _on_stop_callback, one set of instances needs to play a beep through the play_audio() function, while the other set needs to set the color of the timer by another function. Then the second assignment will overwrite the first one.

Here we'll introduce the event mechanism to solve this problem.

How to Add the Event Mechanism to Object-Oriented Programming

This section is similar to the previous section, except we'll add an event mechanism to replace the original callback function.

The benefit of the event mechanism is that multiple objects can be notified when the state of the timer changes. In our case, when the timer's state changes, it notifies the buttons on the page so that the buttons' states change in sync.

Again, the HTML and CSS are similar to the first section so I won't repeat them here.

You can see the full code in this CodePen demo.

See the Pen oop_with_events by miyaliu666 (@miyaliu666-the-styleful) on CodePen.

Create the Event Generator

First, we create a new class EventEmitter, which is an event emitter used to implement the event mechanism – in this case, to implement the timer state change notification.

on is used to listen (subscribe) to events. When an event occurs, a callback function is executed, and the parameters of the callback function are the parameters of the event. this in the callback function refers to the trigger of the event.

emit is used to emit (throw) the event.

removeListener is used to remove a listener from an event.

class EventEmitter {
    constructor() {
        this._events = {};
    }

    on(type, listener) {
        if (this._events[type]) {
            this._events[type].push(listener);
        } else {
            this._events[type] = [listener];
        }
    }

    emit(type, ...args) {
        if (this._events[type]) {
            this._events[type].forEach(listener => {
                listener(...args);
            });
        }
    }

    removeListener(type, listener) {
        if (this._events[type] && listener) {
            this._events[type] = this._events[type].filter(l => l !== listener);
        } else if (this._events[type] && !listener) {
            this._events[type] = [];
        }
    }
}

New Timer Class

Here, we create a new class Timmer. The extends keyword means that Timmer is a child class of the EventEmitter class. The child class inherits all the properties and methods of the parent class.

Check this doc for more information about the extends keyword.

class Timmer extends EventEmitter {
    constructor() {
        super();
        this.name = 'undefined';
        this.timmer = undefined;
        this.h = 0;
        this.m = 0;
        this.s = 10;
    }

    _on_update() {
        if (0 === this.h && 0 === this.m && 0 === this.s) {
            this.stop();
            return;
        } else if (0 === this.s) {
            this.s = 59;
            if (0 === this.m) {
                this.m = 59;
                this.h = this.h - 1;
            } else {
                this.m = this.m - 1;
            }
        } else {
            this.s = this.s - 1;
        }

        this.show()
        // emit an event
        this.emit('update', {
            h: this.h,
            m: this.m,
            s: this.s
        });
        if (0 === this.h && 0 === this.m && 0 === this.s) {
            this.stop();
        }
    }

    start() {
        if (this.timmer) {
            console.log(`[${this.name}] started`);
            return;
        }
        console.log(`[${this.name}] starts`);
        this.timmer = setInterval(() => {
            this._on_update();
        }, 1000);
        this.show();

        // emit an event
        this.emit('start', {
            h: this.h,
            m: this.m,
            s: this.s
        });
    }

    stop() {
        console.log(`[${this.name}] stoped`);
        clearInterval(this.timmer);
        this.timmer = undefined;

        // emit an event
        this.emit('stop', {
            h: this.h,
            m: this.m,
            s: this.s
        });
    }

    pause() {
        console.log(`[${this.name}] paused`);
        clearInterval(this.timmer);
        this.timmer = undefined;

        // emit an event
        this.emit('pause', {
            h: this.h,
            m: this.m,
            s: this.s
        });
    }

    show() {
        console.log(`[${this.name}]current time: ${this.h}:${this.m}:${this.s}`);
    }
}

In the above code, you can see in the comments that there are four "throw events". The emit method throws four events update, start, stop, and pause, which emit the changes inside the timer. All objects subscribed to these events will execute the corresponding callback functions.

Create Object Instances

Similarly, we create two new timer object instances t1 and t2, and arrays storing timers and sounds assigned to list_timmer and list_sound.

const t1 = new Timmer();
t1.name = 'Timer 1';
const t2 = new Timmer();
t2.name = 'Timer 2';
const list_timmer = [t1, t2];
const list_sound = ['meow', 'woof'];
const list_sound_str = ['🐱meow~~~', '🐶woof~woof~woof~'];

User Interface Interaction with Functions

In this case, we'll create 6 functions as well.

Among them, play_audio(), btn_pause_onclick, btn_stop_onclick, dom_update_inputs(), dom_update_timmer() are the same as the functions in the previous section.

Let's take the btn_start_onclick() function as an example to illustrate the mechanism of event subscription.

function btn_start_onclick(i) {
    // get the input value
    const ipt_h = document.getElementById(`ipt-${i}-h`);
    const ipt_m = document.getElementById(`ipt-${i}-m`);
    const ipt_s = document.getElementById(`ipt-${i}-s`);

    // set the state of input fields and buttons
    dom_update_inputs(i, "COUNTING");

    // take the corresponding timer from the timer array
    const tmr = list_timmer[i - 1];
    // assign the input value to the timer
    tmr.h = Number(ipt_h.value);
    tmr.m = Number(ipt_m.value);
    tmr.s = Number(ipt_s.value);

    // listen to the timer's update event and synchronize the time to the page
    tmr.removeListener('update');
    tmr.removeListener('stop');
    tmr.on('update', () => dom_update_timmer(i));
    tmr.on('stop', () => {
        console.log(list_sound_str[i - 1]);
    });
    tmr.on('stop', () => {
        // play the sound
        play_audio(list_sound[i - 1]);
        // set the state of input fields and buttons
        dom_update_inputs(i, "STOPPED");
    });

    // start the timer
    tmr.start();
}

This function is called when the user clicks the "Start" button. It listens to the update event via the on() method, and executes the dom_update_timmer() callback function.

It subscribes to the stop event twice, executing different function modules - first to print the sound text in the console, and then to play a sound and set the state of input fields and buttons (without interfering with each other).

This is the advantage of the event mechanism compared to the _on_stop_callback callback function in the previous section.

Note the tmr.removeListener('update'); and tmr.removeListener('stop'); at the beginning - this is to remove the event listener (if any) each time this.start() is executed.

Conclusion

In this article, we built timers based on both process-oriented and object-oriented programming. We also added an event mechanism to our app built with object-oriented programming and explored some best practices of the programming paradigm step by step.

If you want to discuss this article with me or give me suggestions, please send me a message on the freeCodeCamp Forum. My id is miyaliu.

Thank you for reading this article. Happy coding!

Cover image by Yogendra Singh on Unsplash

Hello, I'm Yuyu Liu (Miya) from the freeCodeCamp community.

freeCodeCamp.org is the world's largest open-source non-profit programming education community. It is also an open-source project that has more stars than any other repository on GitHub.

In this article, I'll share how I got invovled in the freeCodeCamp community way back in 2015.

I am an ordinary person who grew up in a rural area, who graduated from an ordinary second-tier university with an uncompetitive liberal arts major, and who switched from a traditional industry. And I've never worked at any of the famous Chinese companies (BAT as we call them in China: Baidu, Alibaba, Tencent).

If you are as ordinary as I am, and wondering if you can manage to do something, then I hope my story will give you some encouragement.

There are too many stories to write about from these past six years, but here are some that are the most meaningful to me:

Table of Contents

• Who Should Read This Article
• A Bit of Background
  • About the Topic of This Article
• "Are you Miya?"
• The Awakening of Self-awareness
• "In Shenzhen, it is really important to find a few friends and spend the holidays together."
• Bubble
• "Kedou School is the closest open source community to us"
• What Was I Born for?
  • Learning by Doing
  • Accept Yourself
  • This World Is Pretty Good

Who Should Read This Article

If you:

• are thinking of exploring to be a better version of yourself and bring a beautiful change to the world at the same time, or
• want to understand the impact of open communities and open collaboration on people, or
• like people and stories with warmth

I believe you'll find something useful.

A Bit of Background

After the successful conclusion of the China Open Source Conference (COSCon'21) a few days ago, my friends and I who organized the Chengdu event stayed up all night for an in-depth recap.

The next day, I conducted a self-review and posted in the WeChat Moments:

Nowadays, the things I think about the most, talk about the most, and that touch me the most are still the same as when I entered this field on the first day a few years ago. So I feel relieved and calm. The original intention is precious, and we encourage each other.

In fact, my original intention was simple - I hope that I can have a good influence on others, and at the same time, that I can easily be moved by those who have pure, big or small dreams and are full of energy and sparkle.

I believe that all content that can convey goodwill is worthy of recommendation, so I have talked about many stories of friends or strangers on various occasions.

This time, with the opportunity to write for the "Open Source Story Collection" of the kaiyuanshe, I reviewed and recorded my own story for the first time and shared it publicly.

About the Topic of This Article

Community (社区) - Some people translate it as "community group (社群)." This word may remind people of "community economy (社群经济)" or something similar. I think it is a bit utilitarian, so I never liked it.

And recently, I have been reading the book "The Crowd: A Study of the Popular Mind Book" which talks about "group psychology." I just try not to be included in any group, hoping to live a little more freely and smartly within the scope of my ability, with fewer labels.

Some friends also translate it as "community (共同体)" and study it combined with anthropology, sociology, and economics. I find it very interesting, but I haven't done so much research yet, so I don't use this word.

In addition, although this article is submitted to the "Open Source Story Collection", I don't want to use the "Open Source Community (开源社区)". This is because, in fact, my feelings about the term "Open Source" are not as deep as those of friends who have been exposed to it from their school days and early days of work.

My "community" enlightenment does not come from "open source". Moreover, I believe that the "open source community" is included in the "open community," specifically referring to the "open community" built around software and hardware technologies.

Let's get started!

"Are you Miya?"

The first story is the prologue of all the stories, so I will look back quite far.

I come from a rural area of Sichuan.

Before high school, I was a top student in my hometown. Most of my self-confidence in life was cultivated at that time.

Later, I entered the best class in the best high school in the county. For various reasons, I got worse and worse in exams. Fortunately, I graduated before my confidence was completely worn away.

Due to age and geographical constraints, when filling out college applications, I, like many classmates, didn't know anything about what I would like to do in the future. So my university and major were not satisfying.

In the first semester, in a large literature class with one or two hundred people, I wanted to show off and asked the teacher a question about the book "The Ordinary World."

The teacher did not answer the question but changed the topic immediately and asked other students to read the articles in the book, just like we did in high school.

I sat down, feeling awkward. I thought this was very different from my imagined university atmosphere. I thought teachers and students would talk freely and explore the truth of the world. What could I gain from this university?

So, after the class, walking on the sunny wooded path, I decided that I would skip class and study independently.

From that point on, and even while working for a few years at an electronics company and a construction management company, I was thinking about and exploring what I should do, what I am suitable for, and what I will be really happy about in the future.

In May 2015, I accidentally participated in the Toastmasters International Speaking Association event.

It was the first time I came into the open community. When I first met some entrepreneurs in the Internet industry, I was infected by their vitality and thought that I would be thrilled if I could become one of them.

In July, I came across a special bus driver by chance.

Here's what this picture says: I met a young bus driver of Suzhou Bus 178, who was discharged from the army and had been driving the bus for a year. He had decorated the little area in front of him very interestingly. I asked him if I could take photos because good things should be shared. Everyone who can be positive with their current position deserves a better future. 🌞 He's the most handsome bus driver in Suzhou. Let's spread his story!

I think people like bus drivers, security guards, migrant workers, and so on may never get a chance to attend events like Toastmasters. Still, they also have touching stories to share, and they also desire better jobs and lives.

I suddenly realized that I wanted to spread the good stories of ordinary people or to create a stage for ordinary people to show themselves.

So I ran to the bus terminal and spent an afternoon waiting for Bus 178, found the driver, told him that I might organize some activities in the future, and invited him. We exchanged WeChat IDs.

Later, my friend and I tried to build a community around "reading, speaking, and making friends." We invited him to share his story. He also donated some books to the community.

Soon, he told me that he started to drive the "Suzhou Top Ten Model Bus."

I told this story on the stage of Suzhou's first New Year's Eve speech party at the end of 2015: Suzhou has more than 10,000 buses, but there are only 10 Model Bus. About two years after we met, he switched careers to Bosch Automotive for project management.

When writing this article, I contacted him again, and he said that he is doing well now.

I couldn't help crying. Haha, it has been six years, and I am still so emotional...

One night, it was pretty late, and I was sitting at the bus stop waiting for the bus. A car drove past the station and stopped. The driver leaned out from the passenger's door. It was the driver!

- Are you Miya?

- Yeah, but you are not supposed to stop here, right?

- My shift has already ended. Do you need a ride?

- Sure!

I rarely tell people about this scene. Later, whenever I think of him leaning out to greet me with the simple smiles and the dialogues between us, I feel warm and moved.

As bus drivers and passengers, we wouldn't have any communication except eye contact while swiping the cards or inserting the coins.

But in the community, when we remove our professional identity and just express and communicate as two people on an equal footing, we can become friends.

It's just like when I invited an old friend whom I had not seen for three years to dinner. He was Professor Sun, who was in his 80s. I was about to leave Suzhou, where I had stayed for ten years, and return to Chengdu.

He said:

I like the light relationship between people, just like Miya suddenly invited me to dinner. I feel delighted. This is a heartfelt feeling, as precious as a pearl. It reminds us that there are good things in this world besides bad things. So I came to the dinner, let it be.

I really like this pure feeling not intentionally groomed. Therefore, I understand that my state in the community is the most satisfying and happiest.

The Awakening of Self-awareness

My first computer lesson came from my PE teacher. I know it sounds like a joke, but it is.

In the summer after graduating from junior high school, he taught me how to use Word, Excel, and Baidu in a small training room, facing a heavy and mysterious desktop computer. He might have also taught me something else, but I can't remember.

I couldn't wait to play Mario or mushroom picking or other small games during the break between classes. And he was playing "Red Alert."

I have almost no memory of the computer class in high school. Computer teachers often had unexpected errands at that time, so Science teachers often came and kept an eye on us.

But I remember that I had my first QQ account (a chat app) in my freshman year and gradually stopped taking care of UC (another older chat app).

At university, they "kindly" did not assign Advanced Mathematics for liberal arts students like me. Even in computer class, we just learned the simplest Visual FoxPro. After graduation, I never heard these two words again.

VFP was straightforward for me, and my first experience of writing programs was fun for me.

I often heard science and engineering students discussing challenging Advanced Mathematics and C Programming Language exams. I envied them for having the opportunity to study such exciting things.

In my sophomore year, I decided to sign up for the National Computer Rank Examination: Level 2 C Language Programming.

I borrowed a textbook from the library for self-learning, and found that C was very abstract for me. I then searched online for the previous year's test questions and the predictions of the current year's questions.

I worked on the questions, compared the answers, and felt that I could pass the exam. Yes, I learned the C language like I was learning other literature subjects.

At that time, the school put on training sessions on the computer before the exam. I only went to the training once to understand the basic procedures of the exam since I often skipped classes.

Finally, on exam day, I finished the questions very fast, ran the code and passed the test, and then submitted the code with confidence.

However, because of my absence from the pre-exam training, the way I submitted the code was wrong, and I did not get the certificate. I never took the exam again.

In 2012, I started to use WeChat, but I was still far from the Internet. I followed my predecessors to learn to do jobs that I thought had little value and adapted to different stuff in the workplace.

At the same time, I was thinking about the meaning of life. I was unwilling to kill my passion in a closed circle, yet I didn't know where I should go. I didn't even know that the Internet, entrepreneurship, technology, and so many dynamic things were happening on the other side of the city.

They were only a half-hour drive away from me at that time, but it was a completely different world.

However, I always longed for the future. Even my WeChat ID is Hello MrT. T stands for tomorrow. And I am still using it today.

It referred to a song called "Hello Tomorrow" by Milk Coffee (a pop group in China).

This song is a good representation of my state of mind in most of my youth, and now when I hear it, I can still feel it:

When I walk in the opposite direction / Huddled in the corner of the stairway, I seek courage / Shoulders visibly shaking as I weep / I ask myself, where am I?

After every cry, I will smile running forward / Losing and finding something as I go along / To tomorrow, hello. Even in a small voice / But it jolts me awake to the meaning of courage.

In 2016, my startup partner at the time introduced freeCodeCamp to me.

I was surprised that the community could have such energy. Thanks to my former partner.

As a result, I spent two consecutive nights working on the curriculum challenges and achieved more than 160 points. That was the first time I felt that my code might become a product.

In a phrase that we are familiar with - this opened the door to a new world for me:

I started to understand what kind of product WeChat is, and I also started to understand other products, instead of just being a regular user.

I connected with a larger world through the Internet, and gradually got in touch with open source, education, and public welfare, social innovation, and social enterprise. And I also started to get in touch with the people in various countries who were intensely involved in these fields.

I gradually understood the world's rules, learned to accept others and myself, and saw many possibilities in my future.

I remember that when I walked with Luoyang Hu, who's an early contributor to the Chinese freeCodeCamp site, in early 2019, I talked about a point: In this complex and changeable world, the rarest thing for people is the awakening of self-awareness.

At that time, I looked back and was surprised that I started to embrace the Internet gradually in 2015. Without this change, how long would I remain in the closed circle?

My awakening in the past few years has been more profound than in the past two decades!

But...

• when I graduated from junior high school and had just started to use the computer, if someone had told me that the machine in front of me could not only type, click the mouse, and pick mushrooms, but also do many more things – and that Baidu is not the entire Internet –

• and when I first became interested in programming in college, if there were learning resources and open source communities like freeCodeCamp –

• and in the first few years of my work, when I was trying to find the meaning of life, if I could've understood that there were many ordinary, passionate young people in this age who were making contributions to areas that are ignored by the public - it has nothing to do with fame and wealth, and they just hope to make this world a little better, and get some peace of mind –

...would these awakenings have come earlier?

Or, how many children and young people are like me who are eager to change but unable to start because of various constraints? What can I do for them?

Education is a tree shaking a tree, a cloud to promote a cloud, a soul to awaken another soul. - Unknown Source

I once read the sentence, "We go to college for those who didn't go to college." I think it's true.

Therefore, I decided that this was the field I wanted to do well in: education for the public. I wanted to transform the knowledge and insights I had acquired over the years into educational resources, and pass them on to those in need in the community so they could bring good changes to their lives. In persevering and clarifying the "initial intention," my life became calmer and clearer.

Also, in 2019, I officially joined the freeCodeCamp team to collaborate with contributors.

I like to introduce myself as a freeCodeCamp contributor or freeCodeCamp Chinese community ambassador on formal occasions.

In fact, the freeCodeCamp team is a flat organization. There is no concept of subordinates, and no one has a title.

Quincy usually introduces himself as a teacher of freeCodeCamp, and when necessary, he will say that he is the founder.

Regarding my title, I told Quincy that I need a title to cooperate with others in China.

We don't like the term "person in charge (负责人)," which is a bit old-fashioned. So then he suggested the term "ambassador (大使)" instead. I know there are also names like "ambassador" in communities such as TEDx, so I accepted it.

"In Shenzhen, it is really important to find a few friends and spend the holidays together."

In September 2021, I recorded a video to promote the China Open Source Conference, and I mentioned this story again.

Since 2016, I have often called and chatted with friends from various cities, including Chengdu, Guangzhou, Xi'an, Shenzhen, Tianjin, Zhengzhou, and others.

Most of them are programmers who want to organize freeCodeCamp offline technical events in their cities to help everyone learn to program and meet like-minded friends. Many times we've talked for one or two hours.

I also introduced them to help them get to know each other. I wrote in the 2016 community annual summary:

In my view, these people are like pearls scattered in every corner of the world. I can feel their unique beauty.

However, I did not expect that as Sister Miya, I helped to gather them, attract each other, and connect them into a string of sparkling necklaces. This is one of the few things I have done in my life that I feel is particularly valuable.

In 2017, I will work hard to be a better Sister Miya.

And then, I happened to see sentimental You Tiao (油条) posting an article in his moments, as sensitive as I am, and tears came instantly.

The article explained why he had to continue to lead a group of people to operate the freeCodeCamp Shenzhen Community, even when he had just dropped out of school and switched to front-end development less than a year ago. The boss of his team had high hopes, and the work was super busy:

Everyone around me, including me, is facing perhaps the most challenging stage of life:

At the age of 20, we came to this city alone. And Shenzhen's ridiculously high rents have caused almost everyone to stay in a room smaller than 10 square meters (107.64 square feet) or live in an area that is an hour away from the company.

Life is difficult, and everyone starts to do everything alone. Extroverts may be better, but introverts are always in a bad situation.

I often say that the freeCodeCamp Shenzhen community wants to be an offline knowledge-sharing platform, but it is actually inaccurate.

It is really important to find a few friends to spend the holidays with through offline events.

Sometimes, my friends' conversations make me feel sorry.

I remember one night, while drunk, a friend said to me, "Did you know? I no longer have a home."

I didn't know. If he hadn't mentioned it, I would never have known it. I saw the kind of loneliness in his eyes.

I know he needs someone to help him, but Shenzhen is so big. Who cares about a person who usually does not talk?

One day, a friend from freeCodeCamp stayed after dinner and took me home. I guessed that he wanted to speak to me. We spoke pretty late that night.

He talked to me about his work, his love, and his social fears. Under the dim light of my house, I could feel the deep concern in his eyes.

That's it! If a person who is not good at expressing his feelings doesn't get a chance to do so, how can he expose his thoughts to others?

I do understand this feeling! I once went to Suzhou to look for a job alone. Without a companion. I didn't even know where to go shopping if I wanted to buy clothes.

At that age, "loneliness" may be our closest friend. That was the first time I knew that freeCodeCamp has such meaning to these people. It would be great if every city had such a warm community.

You Tiao's article reminded me: We need to meet, to chat face to face, and to feel and listen attentively.

It's like the point in Fyodor Dostoevsky's "Brothers Karamazov" described by Prof. Luo Xiang (A famous Chinese jurist) recently:

Love a specific person, not an abstract person.

Since then, I no longer like to stand on stage in the spotlight. I prefer to listen to other people's stories off stage, encourage everyone to share, and applaud for them.

During the 2020 China Open Source Conference, I exchanged ideas about the concept of community with two volunteers.

I recently chatted with a friend. He said the most touching thing was that some friends told him that "participating in the community activities organized by you relieved my depression."

Yes, the impact of the community on people is far more significant than we thought. I am happy to have friends who have made the same discovery as I have and continue to pass on warmth and kindness through the community ^_^

At the end of the second day of this year's China Open Source Conference, a girl said to me:

"I have been observing you for a day and found that you can explain the word 'open source' in different ways that different people can understand. That is, you can combine with their own experience and make them understand - 'Oh, it turns out that this is open source.'

You also encouraged everyone to share. Nobody will feel that the activity has anything to do with them here. I like your warmth."

I said, "Thank you for expressing your approval for me so bluntly. The word 'warmth' is what I want to express!"

In fact, I understand what it is like to "feel that the activity has nothing to do with me and feel out of place."

Before switching to the Internet industry, I worked in an international project management company as a project assistant.

Later, I also started to work on contract management and business development. At that time, I worked very hard and the general manager, my superiors, colleagues, and customers all really appreciated me.

Once, the general manager Michael went to a large meeting and specifically asked my boss Jessie to inform me to go with him.

The purpose of letting me attend the event was to allow me to gain insight.

That morning, I was wearing my only formal suit, awkwardly stepping on high heels, and following Jessie into a large and luxurious meeting room in the hotel.

It was the first time I participated in such a grand event, and I was excited.

I was thinking about where I would sit when Jessie told me, "They only planned two seats for us. You should go and find somewhere else to sit."

As a result, I went to the conference room corner and sat in the staff resting area. I tried to listen to those one or two hundred people in academia and business area discussing topics that I did not understand. I couldn't listen at all. Even though I was well-dressed, I felt that I did not even have a seat.

It was ironic that, even though I was well-dressed, I did not even have a seat, and I didn't fit in with those successful people. Soon, my face was flushed, and I thought to myself: I hate this place, I want to leave.

Thanks to Michael, he is a very caring boss. Thanks to my boss Jessie, she always takes care of me like a big sister.

They seemed to notice my embarrassment, so Jessie walked over to me and said, "Miya, go sit next to Michael. I have to go back to the company."

I have no impression at all of what people discussed in that meeting. But I remember that Michael lowered his head and said to me very gently: "To be honest, what they said has no value. You are nobody now, and no one will listen to you. But one day, when you become somebody, you will speak on it. Others will think what you are talking about is very important."

I was impressed by his words. I just nodded and thought secretly:

If I really become somebody one day, I don't care where I sit or how many people listen to me. But I will pay attention to whether there is a girl in the corner who looks embarrassed because of being incompatible with the crowd.

I would walk over and smile and ask her: "What is your name? Do you have any thoughts on the topic everyone is talking about?"

Just like I am willing to listen to a bus driver who is easily ignored - I believe that everyone has a story that is worth being heard. If no one provides them with such a stage, I will.

Bubble

In Quincy's AMA, I liked his answer to the following question. AMA stands for ask me anything.

How do you plan to teach/educate your kids? Did you ever consider homeschooling?

Homeschooling is a good alternative if you have a lot of kids, and a parent at home who can teach. But socialization and building up EQ is important, and you kind of get that built in to the public school experience.

I learned a lot from going to public school. There were short-comings. But if I had just gone to a private school, I would have been insulated from reality. I don't want my kids to grow up in a bubble.

What does it mean to grow up in a bubble? Maybe all her friends are little princes or princesses with good family conditions. She has no chance to meet someone who can't pay the tuition and has to eat buns in the corner during lunchtime. She will think everyone in this world is like her. That they all enjoy convenient and abundant living resources and educational resources.

But the reality of this world is not like this. When she grows up, can she handle the impact of reality?

Now, try to think about it. Are there any moments that make you feel that a bubble has broken?

Let me share some:

In December 2018, in Beijing, Quincy told me that a young man in rural Nigeria was learning to program on an old Nokia phone because he couldn't afford a computer.

Later, he became an Android engineer and worked remotely with people from Harvard and MIT. In fact, many people in the world learn to program like this.

At that time, I had just bought my second MacBook.

In May 2019, I participated in the ChangemakerXchange Asia Summit in Hangzhou. The organizer selects 20 people from nearly 1,000 applicants to participate in this event every year. These participants are very kind young people who care about the world.

In a discussion, a guy from Thailand who runs a non-profit organization in Myanmar asked us how we learned English. Two participants from Singapore and a girl from Beijing said they had English classes since the third grade of elementary school. I said, in Sichuan, I started to learn it in junior high school. I thought that guy would say that he started learning English in high school or university. Still, he told us he learned English in a refugee camp a year ago for the first time.

In June 2019, my team and I were working in Hong Kong. Every night we would have a walk at Victoria Harbor after dinner and explore the city.

One night, I went back to the hotel, turned on the air conditioner, opened Facebook, and saw a piece of news: A refugee father and daughter drowned while trying to swim to the United States. The child was only one year old. Her mother was standing at the shore, looking at her, but could not help.

Also, in 2019, I read from an article by the founder of the Kedou School: According to the statistics of the Stanford Rural Education Action Program (REAP), 63% of rural students in poverty-stricken areas of China have never entered a high school, let alone a university.

According to statistics from the National Bureau of Statistics of China, nearly 10 million children aged 16-18 become a new generation of migrant workers, constituting 3% of the migrant worker group.

I used to be a left-behind child. In May, I returned to my hometown to visit a teacher in junior high school. He told me that almost 20 years have passed, and most of the children in my hometown are still left-behind children.

In September 2021, I was sitting on the side of the road waiting for an old friend to have a hot pot together. A takeaway courier stopped his car in front of me, looking a little worried and helpless.

I asked him if he couldn't keep up with the delivery and advised him not to worry. He could call the customer to explain. The customer should understand.

He said that he had already missed the deadline, and the customer canceled the order for more than 50 cups of milk tea. The platform punished him for more than 500 yuan.

Even though I usually did not drink milk tea, I bought two cups from him and chatted with him.

The young man is 18 years old and just dropped out of high school. He came to Chengdu from his hometown in Dalian for love.

He was looking for various jobs and was scammed for money during that time. Now that he is looking for his next job, he is worried that he will not be able to get married in the future, and he is very anxious.

So I recommended freeCodeCamp to him so he could learn to program. I added his WeChat ID and sent him the website.

He said it was great, and he had heard of programming and wanted to learn! When he was about to set off, I told him that his life had just begun, and safety was the most important thing. Don't learn bad things. Learn a skill. If you can't persist, you can go back to your hometown.

On the way home that night, I thought: We weren't in such a good state at the beginning. When I was 18, I seemed to be so anxious to see what my future life would be like. With so many young couriers hurrying past us in this city, do they have a chance to stop and talk about their anxiety?

When I see and hear these things, I always feel sad and helpless: many people in this world need help. I can listen to some people and support some, but I can't help everyone.

In the article Yi Nuo: What We See Is Often a One-Sided Fact, Li Yinuo (李一诺), founder of ETUSchool and former chief representative of the Beijing Representative Office of the Bill and Melinda Gates Foundation, wrote:

Whose voice are we hearing? I think it is the voice of those who can speak. However, many social problems are often impacted by those who cannot speak up.

Fortunately, in so many corners of the world, we have so many kind friends who are willing to listen to the voices of those who have no chance to speak up and then devote themselves to caring for refugees, migrant workers, longly old people, and left-behind children...

When discussing the focus of my work, Quincy once asked me: Do you want to help only people in Chengdu, Sichuan, or people all over the world?

I agree with what Quincy said:

freeCodeCamp will help people at scale. Our resources are limited, and we want to help many people a little bit, not a few people a lot.

In fact, a person who really desires to change only needs a little help and guidance from us. And they will follow the path to change. Sometimes, they will also turn around to guide others.

I like this article: How I became a programmer with the #100DaysofCode challenge. The protagonist was born in a rural village in eastern Nigeria where resources are scarce, electricity is not available year-round, and people have no access to the Internet. Her mother knew that the only way out for a rural girl was to get an education, so she worked hard to receive higher education.

After graduation, she worked as a customer service representative in a company. The company was reorganized, so she decided to learn to program. Because she could not afford the tuition, she found that she could study for free at freeCodeCamp.

Later, she became a developer, improved her work and life, and founded a social enterprise, GreyAfricaHub, to help other young people learn to program and reduce the country's unemployment rate.

There are many such student stories in the freeCodeCamp community. For example, a security guard on the university campus switched his career to become a back-end developer through self-taught programming, created a better life for his family and founded a programming community Open Source Weekends to help more people.

When we want to help a large community, working smart is more important than working hard.

There are so many meaningful things we can do. Writing an article, recording a video tutorial, answering a question on the forum, submitting an issue or pull request on GitHub, chatting with a volunteer contributor, discussing activities with partners, and introducing to a university teacher what we are doing...

How can we prioritize everything among all the inexhaustible details and do the most correct thing at the moment? It is in this ability that a community leader needs to be trained.

And if we continue to do the right thing, more and more people will support us, and the road will become broader and broader.

Thanks Mr. Wang Wei from East China Normal University, for inviting us to participate in the First Symposium on Open Source Education in China (SOSEC).

We were honored to be the only representative from the grassroots community to communicate with people from more than a dozen universities, scientific research institutes, and large domestic and foreign companies across the country and benefit a lot.

The conference was held at the Sichuan Nationalities Institute in Kangding. I was happy to see many students at the meeting because I always hope that my sharing can inspire young people. Some friends told me one thing I said that they liked most:

Bringing a beautiful change to the world is not about one person doing a lot, but everyone doing a little bit.

At dinner, President Zhou of East China Normal University quoted Shui Ge in his speech:

The open community is a space for young people to educate themselves in addition to family, school, and social education.

President Zhou said that colleges and universities should cooperate in providing such space for young people. Thanks for the recognition!

"Kedou School is the closest open source community to us"

In the open session of this year's open source conference, someone told me that after hearing me talk about "open source," as a person who is not in this field, they feel that everyone has their own understanding of "open source community" in their hearts. I said that was right. I just wanted to share a story.

In 2019, my friend Ying from the Ginkgo Foundation introduced me to the Principal Ouyang Yanqin (欧阳艳琴, the founder of the Kedou School, and volunteer Teacher Chen Yishuai (陈一帅). They are using freeCodeCamp's programming courses.

I have read a lot of information about this public welfare school for children of migrant workers or fringe urban youths aged 16-18, and have paid attention to its developments.

The school is committed to "promoting educational equity," similar to freeCodeCamp. The kindness and vitality of the teachers and classmates deeply moved me.

Especially Chen Yishuai, an associate professor at the School of Telecommunications of Beijing Jiaotong University. He is very easy-going. He volunteers at the school to teach programming. He explores with friends the front-end programming education program for high school students with limited resources under holistic education.

Later, I met several teachers from different universities, such as Teacher Wang Wei (王伟) from East China Normal University and Teacher Zeng Zheng (曾铮) from Beijing Information Science and Technology University.

These teachers have two things in common. One is that they are dedicated to helping students grow. The other is that they all recognize the value of freeCodeCamp.

Sometimes I think, should I connect these teachers so they can get to know each other just like I connect young people?

In October of this year, I recommended that Junyan (俊雁) and Eric from the Kedou School give presentations at the Student Open Source Conference.

This event is similar to the China Open Source Conference organized by the Chengdu community. However, it is the world's first open-source technology summit organized entirely by students. The primary purpose is to guide and encourage students so they learn how to understand, participate in, and contribute to open source.

Then, on the first evening of the China Open Source Conference, I chatted with Zhu Ruijie (朱芮捷), the chief orgnizer of the Student Open Source Conference and a student from the University of Electronic Science and Technology of China. He told me that he felt that the speakers from the Kedou School were better than most of the students he knew in the university.

Previously, I had read a lot of positive feedback about the students in the Kedou school from teachers, students, media, parents, and employers. But this was the first time I had heard such high feedback from an outstanding person of their peers!

That was the happiest moment in the whole COSCon. I felt very excited and pleasantly surprised. I wanted to share the story of the Kedou School with more people.

Of course, Ruijie is good at discovering the advantages of people around him and expressing his approval straightforwardly, which is also commendable in itself.

You know, the Kedou School is for children who are considered "study slackers" under the traditional education system, and some of them have been abandoned by teachers and expelled from the school.

Thank you, Kedou School, for showing us another possibility for education.

When I forwarded Ruijie's feedback to Ouyang, she said, "Miya, thank you, although I have never met you before, I feel so much warmth and support from you." Haha, the warmth is mutual.

Here is the speech (in Chinese) of the two students above. Feel free to read: Using Online and Offline Open Source Communities, Young People Who Have Never Had a Chance to Learn Become Programming Learners.

In an interview before the meeting, the two students said:

I think the Kedou School is the closest open source community to us. In the school, some students will learn programming, some will learn design, and some will learn other majors. Offline, students study together, discuss together, and help each other.

Every Saturday, students will also have a discussion meeting. Each student will share what they have learned this week, what problems they have encountered, and how they feel. There is a board in the school, with three words written on it, <Love />, <Study />, <Together />. I think this is the experience that the open-source community of Kedou School brings to us.

I like to communicate with these kinds of young, curious students who can speak very well when they talk about things they like.

I remember that in the open session of the China Open Source Conference, Eric (龙则灵), a freshman at the University of Electronic Science and Technology of China, shared with everyone his microservice framework Hive written in Rust with great enthusiasm. Even when the host directly told him, "It's time to stop," it couldn't stop him from talking.

My little fellow, Charles, a freshman at the University of Electronic Science and Technology of China, is very eager to share his experience in the school Linux user group.

I asked him what he did in the club, his big eyes flickered, and he said, "I'm a freshman, now I'm studying." Haha, it's cute.

And Ruijie, their senior, introduced to us the significance of the Student Open Source Conference and the Linux User Group to help students grow, which is as stable as ever and inspiring.

Jin Xiao (金霄) from Sichuan University talked about how he went from being quite introverted to becoming active in the community and actively cooperating with everyone in the student's association.

At the same time, he prepared the "Guess the Open Source Logo Game" to create a relaxed and cheerful atmosphere.

Ever since I met that bus driver in 2015, I have often been moved by energetic young people – they're always young, and they always have stars in their eyes.

At this stage, I started to wonder, besides "education and public welfare," what else do I like and am I good at? What else do I have the capacity to do? I think it is "youth development."

As mentioned above, in the whole process of exploring and discovering the meaning of life, I basically guided myself through the chaos bit by bit. Back then, I had hoped someone else could give me some guidance. Now, maybe I could give others some guidance.

Thanks to this great era, young friends have many channels and opportunities to communicate with and learn from people from all fields of society. Of course, joining an open community is a great way to do it. In the community, no matter what you want to do, as long as you share it, someone will respond.

We are already collaborating with individuals and organizations concerned with developing youth at different stages – from elementary school to junior high school, high school, and university – to plan some beautiful actions. All this requires long-term investment, and no rush. We'll spend many years doing this.

What Was I Born for?

Recently, I was chatting with a musician friend trying to "bring music closer to life." I said to him, "You were born for 'music for good.'"

Then I thought: What was I born for?

This is the last story of this article, and we finally reach this ultimate question.

After writing thousands of words eloquently, I got stuck here.

I didn't know how to write it down, so I flipped through the book, went through Zhihu (知乎, a Chinese version of Quora), and thought about it...Three hours later, I suddenly understood: thinking about this question, it really takes a lot of time (smiling face).

I know that many young friends came to the community with this question, so let me talk about some key points that I think of now.

Learning by Doing

In 2015, in the office of an entrepreneur friend, I saw a message from the founder of Virgin:

If somebody offers you an amazing opportunity, but you are not sure you can do it, say yes – then learn how to do it later! —— Richard Branson

I stood by that wall and looked at it for a long time. Then I kept this sentence in my heart and practiced it in the same way. This is similar to the learning philosophy advocated by our freeCodeCamp community – learning by doing.

If we always feel confused, it may be because we have not done enough.

I like this photo of myself. It makes me feel calm. It was taken in Chengdu in 2019, and I named it "Fang Hua (芳·华)", or Beautiful Age.

Accept Yourself

In 2019, at the sharing session before the end of the five-day ChangemakerXchange summit, I said:

My biggest gain in this event is to accept myself – I don't have to be so good, I don't have to be so different, I don't have a high degree of education, I'm weak in hands-on skills, I don't know how to play Legos, I can't dance, I'm introverted. I won't be able to chat with everyone anytime soon ...

In my work, I will chat with many people, help many people, try to tolerate others, and act as if I can do everything.

Thanks for the experience of this event. It turns out that "admitting that I can't do it" is not so terrible. I really accepted myself for the first time.

The official introduction of ChangemakerXchange is "the world's premier community platform for more than 600 young social entrepreneurs across 80 countries including Europe, Africa, and Asia".

In my opinion, it is to help everyone relax and heal. This event is the best event I have ever participated in.

When exchanging sugar cube parting words with each other, two of the things I received were:

- You are the most adorable person I have ever seen, and you taught me to be myself and find courage in fragility.

- You are the most outstanding member of this summit, and you are as beautiful as blooming flowers.

Accepting yourself is a required course in life.

This World Is Pretty Good

In 2019, I saw this article telling a story that happened in Detroit, USA:

On the day an 86-year-old grandfather retired, the bus driver, passengers, family, friends, and colleagues held a warm and pleasant surprise "retirement ceremony" for him on the bus that he had been riding for 60 years.

For some of the drivers, they and the grandfather had not just had a typical relationship of driver and passenger, but had become friends for life.

A boy had been on the bus with this grandfather for more than ten years and came back from another city where he was working to take the 530 bus with him for the last time.

They boarded the bus with photos of this grandfather at different ages, from 20, 30, 40, to 86 years old... On this bus, the grandfather seemed to see his entire life.

I wrote in WeChat moments at the time:

I feel more and more that this world is pretty good, and there is no need for the so-called "world-changing people," and no one can change the world.

What we need to change is ourselves. When we are more used to expressing our love and gratitude for others sincerely and naturally, we take a step towards a better world.

This action is simple, but it seems complicated.

May we all treat this world tenderly and be treated tenderly by the world.

Well, the world is pretty good. We don't have to worry about what we will change, just relax and experience and feel it.

Now, the story is over.

So, I don't think about the profound question of "what was I born for." I used to discuss with a good friend that life is meaningless – go to bed early, get up early, go out in the sun when the weather is good, look at the flowers on the way to work, and spend every day vigorously......feel it, explore it – that is the meaning.

Oh, yes, I saw a chubby puppy jumping up happily on the road two days ago, so cute. I met it again the next day, and I couldn't help laughing.

A student in the Kedou School described his programming volunteer teacher Chen Yishuai as "a lively and kind fish." I like this description. I think it’s full of spirituality. It must be a wonderful student and a wonderful teacher to come up with such a beautiful sentence.

I also hope that I have that status.

There are two Yu, which means fish in Chinese, in my name, it just so happens. And I am Pisces, which also contains fish. I also like to eat fish. So I have a good relationship with fish ;)

Do good things, and don't ask about your future, as Steve Jobs said:

You can't connect the dots looking forward; you can only connect them looking backward. So you have to trust that the dots will somehow connect in your future.

Perhaps, when we are old, looking back on our life and connecting the bits and pieces together, we can answer very well why we lived in this life.

Thanks for reading.

And now – even as the pandemic lets up in China – schools remain closed. Most of the shops are still closed. People still can’t go out and enjoy the spring.

In this global public health crisis, it's not just front line medical staff taking action. Other people are producing masks and protective equipment, transporting daily supplies, and providing psychological assistance to people in affected areas.

And developers are jumping into action, too.

The Hack for Wuhan Hackathon**

The wuhan2020 open source community planned a big hackathon. The theme: open source collaboration to tackle the challenges behind the epidemic.

Together, they encouraged developers to take advantage of their own technology to support this new smokeless war.

wuhan2020 is a group of independent developers who write code to aggregate and analyze epidemic data. They use this to predict the spread of the virus and figure out where to send medical supplies.

Since wuhan2020 was created in January, it has already attracted more than 3,000 volunteers from different countries.

They reached out to freeCodeCamp asking if we'd be interested in helping support their upcoming hackathon. I also discovered that the leader of freeCodeCamp's Chengdu study group, Shui Ge, was one of wuhan2020's core developers.

How freeCodeCamp Got Involved

freeCodeCamp joined the hackathon organization team as a cohost. Several of our contributors helped plan the competition, served as judges, and maintained the GitHub repository.

It took only 20 days from initial idea to hosting the hackathon itself.

Here is some quick data about the event:

• More than 50 volunteers hosted the competition
• 902 contestants from 33 countries signed up
• 33 teams entered the preliminary round. 12 teams reached the final round. And 8 teams won the grand prize.
• 4 companies provided technical resources for the competition, including IBM Developer, Agora.io, Tencent Serverless, and Amazon Web Services.
• 45 industry professionals around the world provided guidance, such as Connie Chan at the Andreessen Horowitz Venture Capital firm, former Alibaba CTO Zhuang Ziming, and Eva Woo from The Stanford Center on Philanthropy and Civil Society (PACS)
• 48 media published articles about the hackathon that more than 700,000 people read

Even more data. Yes - this is in Chinese but if you can't read Chinese you may be able to guess the meaning from the icons :)

Hackathon Themes

The overall theme of the hackathon was: use open source software to solve the social challenges behind the epidemic.

Introducing Some of the Winning Projects

The 12 finalists started their live demos online, and judges were able to comment online as well.

Finalist: A One-stop Open Platform for Epidemic Data**

This open platform helps researchers efficiently collect, label, and analyze outbreak data.

Lots of official agencies and health commissions report fine-grained epidemic data. But the data formats are often incompatible, and require humans to interpret them. This makes it impossible to use crawlers to automatically crawl and structure the data. You have to introduce skilled manual labor.

So how do you collect data efficiently with as little labor as possible?

This project adopts an open source collaboration method, bringing all people interested in the data to this platform. Then the platform helps people structure and label the data.

Once that's done, the platform makes the data available through a public API. Scientists and developers can build other tools on top of this API.

autovax

Autovax is a web application that allows a vaccine and other treatment drugs to be automatically generated from the virus genome and virus genes.

A researcher from Harvard is developing this to help with COVID-19.

City Hero

In this educational game, you can choose a profession – such as doctor or nurse – to experience their life during the pandemic. This helps players understand the people involved in the aid effort, and the difficult choices they face.

The Path Forward

The Hack for Wuhan hackathon was not just a challenge for the contestants, but also a challenge for the organization team. We planned and executed everything in just 20 days, and helped 900 developers participate.

I want to thank everyone involved. And thank you for reading this hackathon report.

I hope you all will stay safe, and that we can all embrace spring as soon as it's safe.

If you are interested in learning more about these projects, or participating in our next hackathon, you can contact me on WeChat at fcczhongguo, or on Twitter.