‌‌‌‌In this podcast, we'll dive into the stories of inspiring people in the world of technology and content creation. Our goal is to bring you closer to the experiences of those who are making their mark in the Spanish-speaking developer community.

To start off on the right note, I'm pleased to share with you our first three episodes:

Matías Baldanza

Episode 1 – Matías Baldanza: Retaking Programming and Building in Public (@matiasbaldanza)

In this episode, Matias shares with us his unique career path, his shift in focus to web development, and how he deals with challenges in learning programming.

This is an episode full of valuable tips and a unique perspective on the world of web development.

Kelvin Sanchez

Episode 2 – Kelvin Sanchez: Testimony of Perseverance and Determination (@kelvin_sanchez)

Kelvin talks about his fascinating professional transformation and his significant contribution to freeCodeCamp as a translator and proofreader.

He also gives us an in-depth insight into his experience with publishing a original article on Next.js.

Estefania Cassingena Navone

Episode 3 – Estefania Cassingena Navone: From MITx Student to freeCodeCamp Content Creator (@EstefaniaCassN)

Estefania shares with us her passion for programming, her teaching experience, and how she keeps up to date in such a dynamic field.

Get ready to learn about her content creation process and how she has managed to spark interest in programming in many through her online courses.

Check Out freeCodeCamp's New Spanish Language Podcast

We hope these episodes provide you with a fresh perspective, inspiration, and a greater understanding of the world of technology. ‌‌‌‌

We invite you to join us on this adventure and look forward to seeing you on our new freeCodeCamp podcast.‌‌‌‌

If you find our content useful, please share it with your friends to help more people discover it. Also, we would greatly appreciate it if you could leave us a five-star review on the platform you use to listen to us. ‌‌‌‌

Your support is invaluable and helps us continue to provide educational programming resources for free.

See you soon!

Over the past few years, hundreds of volunteer contributors have worked to translate freeCodeCamp into major world languages. In February, Quincy announced that freeCodeCamp had successfully launched both Spanish and Chinese editions. And Portuguese and Italian soon followed.

During World Translation Month, we will celebrate what we have achieved collectively – and what we will accomplish for everybody around the world. Watch this one-minute announcement video:

If you are interested in participating in translating freeCodeCamp into any world language, you can visit our contributors channel and learn more.

Latest Translation Accomplishments

Today, we have successfully launched the Italian and Brazilian Portuguese curriculum. We are eager to see what is to come for these active communities.

And the Ukrainian community has really taken off in their translation efforts. They have eight certifications fully translated and two close to 100%, almost all completed within a month. It is remarkable to witness the dedication and perseverance every language community has shown.

We have multiple other communities and individuals who are translating the curriculum to their native languages. You can take a look at the current statuses of all the active translations and their progress here.

Current Translation Progress

Currently, volunteers around the world are in the process of translating freeCodeCamp's curriculum into 28 world languages.

And many of these world languages are showing significant progress, especially the French, Romanian, Japanese, and German-speaking communities. Keep up the great work!

What is the Goal of the World Translation Month Event?

freeCodeCamp's goal is to give every individual the tools to translate the curriculum into their native language. Also, we will dedicate all our efforts and time to this event to reach significant progress for every world language.

We have witnessed what a handful of contributors can do together with a singular purpose. And we hope that World Translation Month will become a yearly event when all world languages can celebrate having access to free programming education translated by their community for their community.

Our Reward System 🥇

freeCodeCamp wants to make this a memorable event for every contributor who participates.

During the WTM event, we will give all participants a World Translation Month Badge. Also, at the end of the event, we will present special badges to the Top Translators and Top Proofreaders who have made the most contributions.

You can display these badges on your freeCodeCamp curriculum and forum profiles if you want to do so.

2021 World Translation Month badges

The freeCodeCamp Localization Roadmap

The freeCodeCamp curriculum is already available in Chinese and Spanish. And beyond this, these communities have many other resources at their disposal, thanks to the efforts of hundreds of contributors.

For example, the Chinese-speaking community has translated nearly all the certifications into Chinese. They also have close to 600 articles translated, there are 10 of freeCodeCamp's video tutorials with subtitles on Bilibili, and they've organized hundreds of meetups, hackathons, conferences, live coding events, and coding workshops in universities and high schools.

freeCodeCamp bilibili 频道

The Spanish-speaking community has the first two certifications available in Spanish, and they've translated around 250 articles. Community members have also written about 20 original articles, created 3 original full-length video tutorials, and Estefania has created 24 short videos for the Spanish YouTube channel.

The response from the Spanish-speaking community has been remarkable on YouTube and Twitter. Thanks to the fantastic job Estefania has been doing by engaging with the community with posts and short videos on YouTube, the channel now has over 12,000 followers. And freeCodeCamp's Twitter account en Español has reached 7,300 followers while continuing to grow.

YouTube Channel freeCodeCamp en Español

Twitter freeCodeCamp en Español

The Translation Blueprint

As Quincy mentioned in the World Language Translation Effort article, freeCodeCamp's "...long-term goal is for each of these language communities to come into its own."

And we'll take the same steps as we took with the thriving Spanish-speaking and Chinese-speaking communities with other language communities around the world.

The plan is to launch a localized publication, YouTube Channel, sub-forum, and Twitter account for these language communities, each with their own contributors and staff.

Thank You to All the Translators, Contributors, and Proofreaders!

I want to finish up by thanking the proofreaders and translators who have dedicated hours upon hours to translating and proofreading.

Active Translators

Active Proofreaders

Also, thank you to all the proofreaders and participants in the World Translation Month video:

• Andrea Ros - Italian Proofreader
• Daniel Rosa - Portuguese-BR Proofreader
• Stephan Düsterhöft and Michael Franz - German Proofreaders
• Sidemt (Yoko) - Japanese Proofreader
• Adina Solomon - Romanian Proofreader
• Khalid - Arabic Proofreader
• Juan Carrillo - Spanish Proofreader
• S1ng S1ng，Alan Luo，Zhicheng Chen，Nicholas Zhan，Miya Liu - Translators/Proofreaders

If you are interested in participating in translating freeCodeCamp's curriculum into any world language, you can visit our contributors channel and learn more.

When I first learned about MVC patterns, I was intimidated by all the jargon. And even more so when I started applying these concepts to an actual application.

By taking a step back to focus on what MVC is and what it can accomplish, it's much easier to understand and apply the pattern to any web application.

What is MVC?

MVC stands for model-view-controller. Here's what each of those components mean:

• Model: The backend that contains all the data logic
• View: The frontend or graphical user interface (GUI)
• Controller: The brains of the application that controls how data is displayed

The concept of MVCs was first introduced by Trygve Reenskaug, who proposed it as a way to develop desktop application GUIs.

Today the MVC pattern is used for modern web applications because it allows the application to be scalable, maintainable, and easy to expand.

Why Should You Use MVC?

Three words: separation of concerns, or SoC for short.

The MVC pattern helps you break up the frontend and backend code into separate components. This way, it's much easier to manage and make changes to either side without them interfering with each other.

But this is easier said than done, especially when several developers need to update, modify, or debug a full-blown application simultaneously.

How to Use MVC

To better illustrate the MVC pattern, I've included a web application that shows how these concepts all work.

My Car Clicker application is a variation of a well-known Cat Clicker app.

Here are some of the major differences in my app:

1. No cats, only muscle cars images (sorry cat lovers!)
2. Multiple car models are listed
3. There are multiple click counters
4. It only displays the selected car

Now let's dive into these three components that make up the MVC architecture pattern.

Model (data)

The model's job is to simply manage the data. Whether the data is from a database, API, or a JSON object, the model is responsible for managing it.

In the Car Clicker application, the model object contains an array of car objects with all the information (data) needed for the app.

It also manages the current car being displayed with a variable that's initially set to null.

const model = {
    currentCar: null,
    cars: [
        {
            clickCount: 0,
            name: 'Coupe Maserati',
            imgSrc: 'img/black-convertible-coupe.jpg',
        },
        {
            clickCount: 0,
            name: 'Camaro SS 1LE',
            imgSrc: 'img/chevrolet-camaro.jpg',
        },
        {
            clickCount: 0,
            name: 'Dodger Charger 1970',
            imgSrc: 'img/dodge-charger.jpg',
        },
        {
            clickCount: 0,
            name: 'Ford Mustang 1966',
            imgSrc: 'img/ford-mustang.jpg',
        },
        {
            clickCount: 0,
            name: '190 SL Roadster 1962',
            imgSrc: 'img/mercedes-benz.jpg',
        },
    ],
};

Views (UI)

The view's job is to decide what the user will see on their screen, and how.

The Car Clicker app has two views: carListView and CarView.

Both views have two critical functions that define what each view wants to initialize and render.

These functions are where the app decides what the user will see and how.

carListView

const carListView = {
    init() {
        // store the DOM element for easy access later
        this.carListElem = document.getElementById('car-list');

        // render this view (update the DOM elements with the right values)
        this.render();
    },

    render() {
        let car;
        let elem;
        let i;
        // get the cars to be render from the controller
        const cars = controller.getCars();

        // to make sure the list is empty before rendering
        this.carListElem.innerHTML = '';

        // loop over the cars array
        for(let i = 0; i < cars.length; i++) {
            // this is the car we've currently looping over
            car = cars[i];

            // make a new car list item and set its text
            elem = document.createElement('li');
            elem.className = 'list-group-item d-flex justify-content-between lh-condensed';
            elem.style.cursor = 'pointer';
            elem.textContent = car.name;
            elem.addEventListener(
                'click',
                (function(carCopy) {
                    return function() {
                        controller.setCurrentCar(carCopy);
                        carView.render();
                    };
                })(car)
            );
            // finally, add the element to the list
            this.carListElem.appendChild(elem);
        }
    },
};

CarView

const carView = {
    init() {
        // store pointers to the DOM elements for easy access later
        this.carElem = document.getElementById('car');
        this.carNameElem = document.getElementById('car-name');
        this.carImageElem = document.getElementById('car-img');
        this.countElem = document.getElementById('car-count');
        this.elCount = document.getElementById('elCount');


        // on click, increment the current car's counter
        this.carImageElem.addEventListener('click', this.handleClick);

        // render this view (update the DOM elements with the right values)
        this.render();
    },

    handleClick() {
        return controller.incrementCounter();
    },

    render() {
        // update the DOM elements with values from the current car
        const currentCar = controller.getCurrentCar();
        this.countElem.textContent = currentCar.clickCount;
        this.carNameElem.textContent = currentCar.name;
        this.carImageElem.src = currentCar.imgSrc;
        this.carImageElem.style.cursor = 'pointer';
    },
};

Controller (Brain)

The controller's responsibility is to pull, modify, and provide data to the user. Essentially, the controller is the link between the view and model.

Through getter and setter functions, the controller pulls data from the model and initializes the views.

If there are any updates from the views, it modifies the data with a setter function.

const controller = {
    init() {
        // set the current car to the first one in the list
        model.currentCar = model.cars[0];

        // tell the views to initialize
        carListView.init();
        carView.init();
    },

    getCurrentCar() {
        return model.currentCar;
    },

    getCars() {
        return model.cars;
    },

    // set the currently selected car to the object that's passed in
    setCurrentCar(car) {
        model.currentCar = car;
    },

    // increment the counter for the currently-selected car
    incrementCounter() {
        model.currentCar.clickCount++;
        carView.render();
    },
};

// Let's goooo!
controller.init();

MVC Frameworks

JavaScript has grown in popularity, and it's taken over the backend in recent years. More and more full-blown JavaScript applications have opted for the MVC architecture pattern in one way or another.

Frameworks come and go, but what has been constant are the concepts borrowed from the MVC architecture pattern.

Some of the early frameworks that applied these concepts were KnockoutJS, Django, and Ruby on Rails.

Conclusion

The most attractive concept of the MVC pattern is separation of concerns.

Modern web applications are very complex, and making a change can sometimes be a big headache.

Managing the frontend and backend in smaller, separate components allows for the application to be scalable, maintainable, and easy to expand.

If you want to take a look at the Car Clicker app, the code is available on GitHub or checkout the live version here.

🌟Thank you for reading this far!🌟