How I Teach: Version Control with G Sheets

Mia — Mon, 13 Jan 2020 12:03:15 +0000

Hello and (a very late) happy new year!

For the first blog post of the decade I thought I'd talk a little bit about how I like to introduce students to version control ✨.

I was first taught version control through a GitHub Desktop demo, I got there in the end but let me tell you ... it took months before I finally understood what a commit is! After being taught version control by two courses after that, I believe I have narrowed down the issue that a lot of people encounter when they first teach version control:

There isn't anything you can compare it to - you could say it's like 'saving' a file but let's be real, it's not really!

A fantastic and visual example of how GitHub works is Google Sheets version history feature. Go ahead and create a sheet, you could even name it repository to introduce the concept!

Once the sheet is created, you can access its version history like so:

The version history has a list of all the changes that have been made by the user over time:

These are commits, you can click on them to view what the user changed and you can even revert back to that commit:

After running through this example, you can go back to GitHub in the browser and show the exact same process:

Create a repo
Make a change (do this online first)
Commit it and show the commit in the commits history

Top Tips

I would only introduce the idea of local and remote repositories after both these demos. Since you have just created a remote repository, the transition should be quite smooth. Simply clone or download the repository and continue working on it locally to convey the concept of a local repo.

Here are some common mistakes to avoid:

Demo version control from the command line;
Even worse getting the students to code along with you in the command line, chances are half of the students will get lost in spelling mistakes and not focus on the wider concepts;
Talking about branches and merges straight away;

I hope this was helpful and let me know in the comments what topic you want me to cover next!

How I Teach: Scope in JavaScript

Mia — Wed, 23 Oct 2019 12:13:47 +0000

I choose to write about scope in my first blog post as I think that it's a tricky concept to explain to someone if you've been writing code in JavaScript for a long time.

In fact, after the initial learning curve scope becomes an integral part of JavaScript and it can be easily overseen while teaching - it's just how JavaScript works, right?

Here is a breakdown of how I would use a zoo metaphor to explain scope in JavaScript. I hope that wether you are a student who is looking for a more in-depth explanation or a teacher looking for some new examples, this will help! 🙌🏼

Basic Scope Concepts

I start off by setting up a simple zoo function with a global variable of a pigeon called Pidgey and a local variable lion called Leo.

Pidgey, being a bird, is allowed to go in and out of the zoo 🐦. However Leo can’t leave - as it would cause some chaos around Regent’s Park, duh! In order to show that Pidgey can leave the zoo, I would add a console.log outside the zoo function:

To prove what would happen if Leo tried to leave the zoo, you can log the local lion variable outside the zoo:

The console at this point will give a nice big red message, complaining that lion is undefined. Lions can't leave the zoo! 🦁

Re-assigning Variables

The next step is to see what would happen if Pidgey was to evolve whilst at the zoo (aka what happens when you update a global variable inside a function 😉).

Here is also a good time to note that the code inside the zoo function only runs when the function is invoked, so before Pidgey visits the zoo his name is still the same:

Since leaving the zoo, Pidgey has evolved and is now Pidgeotto. His name is different everywhere, not just at the zoo. But what would happen if we created a new pigeon inside the zoo called Pidgeotto:

At this point, one might expect that the global pigeon will still change name after the function. However, this doesn't happen because the pigeon in the zoo is a completely different bird from the one outside. This is the perfect opportunity to consolidate understanding of variables definition - declaring a variable inside a function creates a brand new local variable even if it's called the same as another global variable.

Arguments & Parameters

The third and most advanced topic one could cover in a scope lesson is the use of arguments and parameters in functions. When coming to terms with JS functions, it can be tricky to understand whether you need to or even should pass an argument to a function and what the consequences are 😨.

If you pass pigeon as an argument in the zoo function, it becomes apparent that the global pidgeon Pidgey is not affected by the local change inside the zoo function:

At this stage you can go into as much or little detail about the reason why this is happening, depending on how confident you think the students are with the materials covered so far. Here is the SandBox I used for this example, feel free to fork it and let your students play around with it:

Thanks for taking the time to read my post, let me know in the comments what topic I should cover next 😊

DEV Community: Mia