Welcome to our wiki!

This is a collection of resources from past workshops that we have conducted, such as those from our Hackers Toolbox series. Feel free to use the information here for your own learning, experimentation and hacks.

Reach out to us if you want to conduct your own workshop!

This workshop is renamed and heavily lifted from the original workshop: Hacker Tools - Shell and Scripting, which itself is lifted from the

Introduction

There are tons of ways for us to interface with modern computers, from beautiful GUIs and web applications. But that can only really get us so far. To fully utilize your computer to it's maximum potential and efficiency, learning how to use your a textual interface like your terminal is necessary.

Many applications and use cases are terminal first, as it is extremely easy to develop for and work with. No fancy framework or dependencies needed, just good ol' text input and outputs. In this specific case, we'll be going through Bash, a unix-like shell (or a POSIX-compatible shell).

What's next

Some really cool resources to take your terminal skills to a different level:

• Hackers' Toolbox on working with data quickly in the terminal

Introduction to the terminal/shell

Nearly all platforms you can get your hands on have a shell in one form or another, and many of them have several shells for you to choose from. While they may vary in the details, at their core they are all roughly the same: they allow you to run programs, give them input, and inspect their output in a semi-structured way.

-- Excerpt from the Missing Semester

For the most part, when people talk about the terminal, we normally talk about Bash, or POSIX-compliant shells. POSIX is just a fancy name for a set of rules that a shell should abide by, so that different shells can have similar behaviour. Other shells include:

It is very common for many Github workflows to involve:

1. (Optional) Creating a fork of a repository

2. Working on a feature/bug fix on a feature branch

3. Pushing the feature branch to Github

4. Creating a pull request of the feature branch to the main branch of the repository

5. Have some set of tests and automated checks start to verify the state of the pull request

We are going to replicate this workflow on the example application.

To avoid being overwhelmed with tasks, let's break down the "expected set of tests and automated checks" to be the following:

1. Run unit tests (calculator.test.ts)

2. Lint

Then, once the pull request is merged in main, we also want to (3) deploy it to Github Pages.

This section will introduce you to HTML, a markup language that is used to define and structure webpages. We'll start off by making a page and adding some elements, then adding more elements and giving those element properties (or attributes), add an HTML form to submit queries to Google Search, and wrap up with a look into Firefox's Browser Inspector tool.

Slides

Introduction

Required Software

• Download and install VirtualBox

• Download Ubuntu 24.04 ISO file

Linux & Virtual Machines

Brief Introduction to Linux & Unix

Linux is a Unix-like operating system kernel, known for being the most popular kernel in the world. It's widely used in various devices and systems, including Android smartphones, Chromebooks, most routers, servers, and even supercomputers.

Unix-like systems, including Linux, are at the heart of the most popular operating system family in the world. Their architecture and principles have influenced countless other systems, making them a staple in the world of computing.

If you're a computing student, sooner or later, you'll find yourself developing for a Unix-like platform!

Virtual Machine: What? Why?

A virtual machine (VM) is a simulated computer that allows you to run an operating system and applications in a completely isolated environment. You can configure a guest virtual machine with any operating system and settings you want, and use it without affecting your host environment.

Why Use a Virtual Machine?

Virtual machines are incredibly useful for several reasons:

• Experimentation: They allow you to test out different operating systems, software, and configurations without the risk of damaging your main system.

• Software Compatibility: You can run software that is only compatible with a specific operating system by creating a VM with that OS.

• Safe Testing: If you need to experiment with potentially malicious software, a VM provides a safe, isolated environment to do so.

Useful Features of VMs

• Isolation: A VM isolates the guest environment from the host, which means you can run buggy or untrusted software with a reasonable level of safety.

• Snapshots: VMs can take snapshots, which capture the entire machine's state at a particular point in time. This allows you to make changes, test configurations, or install software and then easily revert to a previous state if something goes wrong.

Disadvantages of Virtual Machines

• Performance: VMs are generally slower compared to running an operating system directly on your hardware (bare metal).

• Resource Competition: VMs share the host system's resources, such as CPU, memory, and storage, which can impact performance.

• Unsuitability for Certain Applications: VMs might not be ideal for resource-intensive applications like games or high-performance computing tasks.

Virtual Machine: Setting up

Why Choose VirtualBox?

We're using VirtualBox because it offers several advantages:

• Free and Open-Source Software (FOSS): VirtualBox is completely free and open-source, making it accessible to everyone.

• Graphical User Interface (GUI): It comes with a user-friendly graphical interface, making it easier to use, especially for beginners.

• Cross-Platform: VirtualBox works on multiple operating systems, including Windows and Linux. There is a developer preview for M1+ Macs, but the performance isn't great.

Setting up your first virtual machine

1. VirtualBox Main UI

• Once you open VirtualBox, click on the "Add" button to start creating a new virtual machine.

2. Creating a New VM

• Name: Enter "Ubuntu" as the name of your new virtual machine. VirtualBox should automatically detect the type (Linux) and version (Ubuntu) based on the name.

3. Set the Amount of Memory (RAM)

• Memory Allocation: Ubuntu requires a minimum of 512 MiB of RAM and recommends 2 GiB. However, as a general rule, do not allocate more than 1/4 of your physical RAM to the virtual machine to ensure that your host system runs smoothly.

4. Create a Virtual Hard Disk

• Step 1: Your virtual machine needs a virtual hard disk. Click on "Create" to begin setting it up.

• Step 2: Use the default virtual hard disk format for the best performance.

• Step 3: Opt for a dynamically allocated disk. This means the virtual hard disk will only use as much space as it currently needs, rather than reserving a large chunk of your storage upfront.

• Step 4: Ubuntu recommends a minimum of 10 GiB of storage and 25 GiB for a full installation. For this guide, we'll be using the minimum installation, which will require about 6 GiB.

Back to the Main UI

• After setting up the virtual hard disk, return to the main VirtualBox interface and click on "Settings".

Configuring Settings

• Storage Settings: Navigate to "Storage", then select the "Empty" slot under "Controller: IDE". Click on the disc icon beside "IDE Secondary Master", and then choose "Choose Virtual Optical Disk File".

Choose Your Ubuntu ISO File

• Select the Ubuntu ISO file that you have downloaded earlier.

Final Steps

You're all set up with VirtualBox! You can further customize your settings later if needed. For now, return to the main UI and click "Start" to launch your new virtual machine.

For power users

Skip this part if you're not familiar with working in a command line environment

We can easily do exactly what we just did in a matter of seconds, using the command line interface (cli).

Installing Ubuntu

Booting Ubuntu

Once your virtual machine starts and boots up, you should see a screen like this:

• Step 1: Choose "Install Ubuntu" to begin the installation process.

Choose Keyboard Layout

• Step 2: Select your keyboard layout. If you're using a computer purchased in Singapore, the default layout should be "English (US)."

Updates and Other Software

• Step 3: Opt for a "Minimal Installation" to save time during the installation process. You can leave the checkboxes unticked for a quicker setup.

Installation Type

• Step 4: Choose "Erase disk and install Ubuntu" to proceed with the installation. When the dialogue box appears, click "Continue" to confirm.

Location

• Step 5: Ubuntu should automatically detect your location as Singapore. If it doesn't, you can manually select your location.

Setting Up Your Username

• Step 6: Enter your name and create a password for your Ubuntu installation.

Sit Back and Relax

• Step 7: Now, just sit back and relax while Ubuntu installs. This may take some time, so feel free to take a break while the installation completes.

Guest Additions

Many Linux distributions offer Guest Additions through their package repositories, making the installation process straightforward. To install them:

1. Open a terminal in your Ubuntu virtual machine.

2. Run the following commands:

This will install the necessary utilities and drivers to enable Guest Additions features.

Installing Guest Additions Using the ISO

If you're using an operating system like Windows or another OS that doesn't have Guest Additions available in its package repository, you can install them using a CD image:

1. In VirtualBox, go to the "Devices" menu.

2. Select "Insert Guest Additions CD image...".

3. This will mount the Guest Additions as a virtual CD in your VM.

4. Follow the on-screen instructions to install the software.

Shared Folders

One cool feature of Guest Additions is shared folders. This provides a useful interface for sharing files between the host machine and virtual machine.

• Click on Settings > Shared Folders

• Click on the folder icon on the right

• The folder path should point to the location on the host machine

• Give the folder a folder name, let's say "SharedFolder"

Now in your virtual machine, run the following command

Now if you drag a folder into your shared folder in your host, you should see it appear in your virtual machine as well!

Nifty Tricks with VM

Force Shutdown the VM

Sometimes, you might need to run unstable software on your virtual machine, which could cause the VM to hang or become unresponsive. If this happens, you can force a shutdown:

• Step 1: Close the VirtualBox window for your VM.

• Step 2: When prompted, choose "Power off the machine." This will force the VM to shut down immediately.

• Step 3: You can quickly bring the VM back up by starting it again from the main VirtualBox interface.

Saving Machine State

You don't always need to completely shut down the operating system inside your VM when you're done working:

• Step 1: To pause and save the VM's current state, simply close the VM's window.

• Step 2: Choose "Save the machine state" from the options. This will pause the VM, allowing you to resume exactly where you left off the next time you start it.

What is a Snapshot?

A snapshot is like a time machine for your VM. It captures the state of your virtual machine at a specific point in time. You can return to this state later if needed, making snapshots very useful for experimentation or testing.

Taking a Snapshot in VirtualBox

To take a snapshot:

• Step 1: In the VirtualBox main interface, click on the list icon beside your VM name (e.g., "Ubuntu").

• Step 2: Select "Snapshots" to view, take, or manage snapshots.

Restoring a Snapshot in VirtualBox

If you want to restore your VM to a previous snapshot:

• Step 1: Ensure your VM is shut down. If necessary, either shut down the OS within the VM or close the VM and select "Power off the machine."

• Step 2: In the list of snapshots, select the one you want to restore.

• Step 3: Click "Restore" to revert your VM to the selected snapshot.

Use Cases

• Running risky programs or commands

• SSH with VSCode

• Experimenting with low level programs that might break your computer

Shell Tools

All these are quite nice if you're working with a bare shell, or an uncustomized shell. However, in this day and age, there's a lot of new commands and tools to enhance your terminal experiences.

Finding out how to use commands and installing them

Before we get started with tools, we need to know how to install them and also how to learn what they do. For commands, we can often pass in flags to tell the program how we want it to run. One of the universal flags is the --help flag.

To install a program, we often times use what is known as a package manager. This allows us to search and install packages without having to googling the tool and trying to find the correct downloadable file

If you're on Linux or WSL, you should have a package manager installed. If you're on Ubuntu/Debian-based distros, this should be apt. If you're on anything else, you should try and figure out what the package manager is based on your distro.

If you're on MacOS, you'll need to install brew:

Now to install a program, you can just do:

Finding Files

Once installed, do:

fzf stands for fuzzy finder. It allows you to find anything with a fuzzy search (you can make spelling errors). If you just run fzf, it will do a fuzzy find on your current directory

But we can do so much more than that! To do so, we need to add some keybindings by running this command:

Now try out these new keybindings:

• CTRL-T - Paste the selected files and directories onto the command-line

• CTRL-R - Paste the selected command from history onto the command-line

• ALT-C - cd into the selected directory

Now notice that if you quit the terminal or start a new terminal, these keybindings won't be available. To make the change permanent, we need to save it into a config file. For bash, this config file is is at ~/.bashrc

Finding code or text

So we can find specific files and directories, but what about finding specific contents within a file? ripgrep is a program that aims to solve this.

Fast directory navigation

It is quite troublesome so jump around directories, especially if you're copying something, or the path is really, really, really long. A good way around this is to have a program guess what directory you want to jump to based on keywords and frequency of which directory you jump to! That is exactly what zoxide does.

You can use z to jump to directories, similar to how you use cd. For example, if you have a directory you frequently go to, like:

You could do something like z funny to jump into it.

Overview

This will aim to get you introduced and using as many tools Git provides you, as quickly as possible. If you want to learn more about Git in detail, here are some resources:

We'll be using lazygit, a nice terminal wrapper around git.

What is Version Control? What is Git?

We use version control all the time in our lives. Think of something like Google Docs, where you can revert changes and "rewind" your changes if you make a mistakes and also see how the document has changed over time.

Why don't we just "Google Docify" everything?

What is CI/CD?

According to , CI/CD is defined as:

(CI) refers to the practice of and frequently integrating code changes into a shared source code repository. and/or deployment (CD) is a 2 part process that refers to the integration, testing, and delivery of code changes. Continuous delivery stops short of automatic production deployment, while continuous deployment automatically releases the updates into the production environment.

Essentially, after writing code, you can think of CI/CD as the pipeline in which brings your code from local to production in an (almost) automated fashion.

For this guide, Mozilla Firefox will be our browser of choice because of its powerful, wide-ranging and easy-to-use developer tools. Feel free to use any browser of your choice, keeping in mind that not all features may be available in the same form as with Firefox.

Removing distractions

When first learning JavaScript, it is customary to open a blank page on your browser to give your Browser Console a clean slate. To do so, open a new tab in your browser and type the following:

and press enter. You should see a completely blank white (or black, based on your settings) page.

So what if I want to manipulate multiple commits at once?

This is where interactive rebasing comes in. Given a bunch of commits, you can change the order, drop certain commits or amend them.

Exercise

Go to

There's a type in 1dab2c. Let's amend it and propagate it up.

In lazygit:

This guide aims to progressively introduce various concepts necessary to start using Git to manage your project.

Using this guide

Before starting the guide, it is highly recommended that you read up on javascript and CSS. It will be good to have some React knowledge though this guide will provide enough guidance even without React knowledge.

We cover some of the more advanced concepts of Git and Github for those who are interested (they are not important for most day-to-day applications of Git).

After going through the guided tour from Basics of Github Actions, you should have a general grasp of how Github Actions works and how workflows are constructed.

Now, you might be wondering how Github Actions can be used beyond the basics of building CI/CD pipelines.

In this section, we will focus on discussing several advanced use cases of Github Actions. This is by no means an exhaustive list of what Github Actions can achieve, but it hopes to broaden how you think of Github Actions and use Github Actions.

Rather than having a central example application like Basics of Github Actions, we will be presenting each use case as individual examples and linked to some live repository to better illustrate how it has been used. We trust that you have the understanding and mental models developed to combine these use cases with what we have previously covered to create infinitely many powerful workflows!

We will cover the following use cases:

1. Creating pollers with Github Actions

2. Using Github script inside workflows

3. Executing third-party scripts

4. Reusing workflows

While the Fork and PR Workflow is the recommended workflow, you could also work collaboratively by creating PRs through the original repository (i.e. no forks involved).

This may be simpler to setup for smaller projects (like Orbital), but we still highly recommend following the Fork and PR Workflow instead.

This workflow is very straightforward:

1. Clone the original repository

2. Create a local branch

3. Make changes to the local branch

4. Push the local branch to the original repository

5. Make a PR from the local branch to the main branch

While it is very simple, it is also very error prone as pushing directly to the original repository may result in directly overriding changes in the original repository if you are not careful and you may not even have the permissions to push directly to the original repository (this is the case for most open-source projects).

There may be times where you wish to have a workflow run at a fixed duration. For instance, using a workflow to fetch and update a set of data everyday. Github Actions supports such workflows by offering the schedule event type that triggers a workflow.

To declare such a workflow, use the schedule event type along with the cron key, specify a cron schedule format:

on:
  schedule:
    # * is a special character in YAML so you have to quote this string
    - cron:  '30 5,17 * * *'

From the official Github Actions documentation on the schedule event, you would specify the cron schedule and this will cause the workflow to be triggered at the given timing. You could even schedule it multiple times a day or across different times.

Once again, taken from the official Github Actions documentation.

You can use this "poller" pattern in conjunction with some of the next use cases to really power up your workflows. We will discuss them as we go.

This section of the guide will cover how JavaScript can be integrated with HTML and CSS to add functionality and interactivity in a page. We'll take a look at the DOM(Document Object Model), events, how to query and manipulate the DOM, and end with fetch requests.

The DOM

DOM stands for Document Object Model and is a way of structuring an html document as a tree. This makes it easier for the browser to update the document's styling and when JS is applied.

Take the following html document:

<!DOCTYPE html>
<html>
   <head>
       <link rel="stylesheet" href="styles.css">
       <title>My web page</title>
   </head>
   <body>
       <h1>Hello world</h1>
       <button onclick="alert('Hello!')">Say hello</button>
   </body>
</html>

This html document is converted into a tree like the one below:

It is not important to know how this is done, but it is important to understand that every html document is converted into this model by the browser to allow for easy querying and updating of the elements.

Events

Events are, quite literally, "things that happen". In this context, they are "things that happen to element(s) on the page". Examples of events are "click", "hover" and "keyup" (when the user presses a key and lets go, letting the key come up).

Events attributes can be assigned to html elements to execute some JS code when the event occurs. Take an example from the above html:

This sets an onclick attribute for the button; this means when the button is clicked, the JS code is executed. In this case, the code is alert('Hello!'), so when the button is clicked, the user gets a popup with the text "Hello!".

There is a full list of JS events .

Next steps

Copy the above html into a separate html file and save it with a name of your choice. Then add some CSS of your choice, or reuse the styles.css file from the previous section. You can even go in with a combination of the two, and define some additonal styles in a separate CSS file, then import both files into the html file.

For the next few sections we'll look at querying the DOM from the Browser Console.

Introduction

This guide is a step-by-step introduction to React.js, one of the most powerful libraries for building modern, interactive web applications. With its component-based architecture, virtual DOM, and declarative approach, React has changed how developers build for the web.

Throughout this guide, you’ll learn core concepts through hands-on examples and progressively build your understanding of React’s capabilities. Here’s what we’ll cover:

Part 1

• State and JSX interaction

• Component structure and file organization

• Props and dynamic rendering

• Events, spread operator, and preventing defaults

Part 2

• API calls with fetch and async handling

• Side effects with useEffect

• Third-party libraries and custom components

• Reading docs and using external tools

Prerequisites

To get the most out of this guide, you should have a basic understanding of:

• and

• HTML and CSS

If you’re not comfortable with these yet, we recommend brushing up on the syntax before diving in.

Setup

Please refer to this .

Remember how to open the Browser Developer Tools? Good, you'll need it.

Press f12 or fn + f12 to open up the Dev Tools. On Firefox, this by default opens the Inspector tab, which is where the page's HTML can be seen. Let's use Google's homepage as an example for now.

You'll see 3 windows in the tab (on Firefox at least).

1. The leftmost window (in the picture above) contains the HTML of the page. It allows to read the HTML, see elements, look at what tags they are using and what attributes they are assigned, and more. It also allows you to look for hidden elements - elements that aren't visible on the page but are present all the same. You can even edit the HTML by double-clicking at a certain part of the code to change its value temporarily and see (in real time) how it affects the contents of the page.

2. The middle window allows you to see the CSS properties of a selected element on the page. We'll get into CSS in the next section, and there this will be handy since you can inspect the CSS of any element on any webpage, as well as edit styles to see what effect the changes have on the page in real time.

3. The rightmost window allows you to see the Box model of a selected element, Flexbox of a selected element and Grid layout of the page. When we get into margin and padding later on, the Box model will become a useful visualising tool, but for now we have nothing to do with it.

If you want to select an element on a page, there are 2 ways. The first is to read through the HTML and try and figure out which element is the one you want. This however, is going to be difficult when pages get long and complicated. Just look at this excerpt from the Google homepage:

The second way, and better, is to use the element picker. You'll notice a cursor icon next to the "Inspector" tab title. This is the element picker.

Click on it, and when you move your cursor over the webpage you'll be able to highlight an element. Click on the element or part of the page you wish to look at in detail, and the element will get selected, showing its style and HTML in the Inspector.

Remember how you can temporarily edit the HTML and CSS of the page? Combine that with the element picker, and you have a powerful set of tools to test out CSS styles and HTML elements in real time for development. Here's an example of me playing around on the Google homepage using these tools:

Once you reload the page, all the temporary changes you make are removed and the page is restored to its original, unaltered state.

Next steps

We've made a pretty nice webpage so far, but it seems... plain. It needs some style, some color, a different font maybe.

In the next section, we'll learn some CSS to add some styling to our page.

However, sometimes what you want goes beyond accessing the Github API. You might want to run a Python script as part of the workflow, calling other APIs. To do so, you can simply treat them as regular files in a filesystem (think back to how jobs run in virtual machine runners) and call these scripts.

The caveat is that you have to setup the job's virtual machine runner to support the third-party script's language. So, if you're using Python, you need to ensure that Python and all of the scripts' dependencies are installed. If you're using Javascript, ensure that Node.js and all of the project dependencies are installed.

Since we've covered how to use Node.js in Github Actions in Basics of Github Actions already, we will focus on setting up the job virtual machine runner to work with Python scripts this time.

Essentially, what you need to do is to:

1. Fetch the current repository

2. Setup Python using the actions/setup-python@v5 action

3. Install all of the Python dependencies from a requirements.txt in the current repository (or individual dependencies)

4. Execute the Python script

It's that simple! Now, the script.py Python script will start to execute and now it will have full filesystem access to the job's virtual machine runner. You can additionally set environment variables for the script to access via env.

You may combine this use case with the previous two to create scheduled scripts that run and interact with the Github API!

Introduction

Continuous Integration and Continuous Deployment (CI/CD) is the cornerstone to many modern day software projects. Automating the process the building, testing, and deploying code tightens the software release cycle, improving the software delivery times and increasing the reliability and consistency of software.

Goals of this guide

In this workshop, we will be covering the following:

1. What is CI/CD?

2. What is Github Actions?

3. Anatomy of Github Actions

4. Implementing a CI/CD pipeline on an example application

As we discuss the types of workflows you can achieve with Github Actions, we will start unpacking the various concepts in Github Actions.

Prerequisites

To start using Github Actions for CI/CD, ensure that the following are properly setup:

1. Create a Github account. You can refer to .

2. Download Git to your local machine and set it up. You may refer to our installation guide .

3. Optionally, download the

This guide will assume that you have some basic understanding of what Github is and some of its core behavior such as repositories, issues, pull requests, etc. We will also be using Javascript as the basic language for all examples for its accessibility. If you have never used Javascript before, you can refer to for a quick refresher. However, this guide does not require in-depth knowledge of Javascript as we will be focusing on writing Github Actions instead.

This section will explore CSS to help us add some style to our pages.

What is CSS?

CSS, which stands for Cascading StyleSheets, is a stylesheet language that is used to specify the styling of an HTML document. This is done by adding properties and values to elements by the way of selectors. Some CSS would look like this:

As you can see, the element that you want to style is at the top, with the properties enclosed in curly braces ({}). The properties are assigned values by the way of property-name: value; and each line ends with a semi-colon.

CSS can be used to assign styles to elements that have the same tag, class, and/or id, and there are ways to give styling for particular events (for example, what a button temporarily looks like when the user hovers over it).

How to add CSS to HTML

There are 2 ways to add CSS styling to an HTML page. The first is to use in-line styling by way of the <style> tag. In the head of the HTML file, add the opening and closing <style> tags. Then you can place the CSS inside of tag.

The second way is to create a new file, add the CSS there, and save it with the .css file extension. Then it can be imported into the html document using the unpaired <link> tag:

There is a third way, which involves using the style attribute to assign styling to a specific element but this is only used in rare cases when just 1 or 2 properties need to be defined for a very specific element, and even then it is recommended to instead use method 2 and give the element an id attribute.

Next steps

Get the index.html file ready, as we're now going to add some styling to that. Note that we will stick to method 2 of adding CSS (create a new file and import) throughout this guide. First, create a file called styles.css and place it in the same folder as the index.html file. The add the following line to the head of the index.html document:

Now, you are ready to add some styling. Let's get started with some core concepts.

About the Guide

This guide was created as an effort by NUS Hackers to make knowledge easily available for various technical topics!

About this Section

This section of the guide will cover JavaScript, from its syntax and constructs to its use in frontend web development. Below are the slides containing an abridged version of the guide (originally intended to accompany a live workshop), along with a link to a repository that holds some sample code as well as sample solutions to exercises posed throughout this guide.

Slides

Code

What is JavaScript?

JavaScript is a high-level programming language that is often combined with HTML and CSS to enhance the frontend of a browser-based application. Its main uses are interactive elements, frontend input validation and fetch requests.

JavaScript as a language has influenced web development (and programming as a whole) a lot since its inception, with other languages being developed to add functionality to it (such as TypeScript, which is a typed version of JavaScript).

What makes JavaScript rather unique is that it does not have its own compiler interpreter. Java has the JVM, Python has its installable interpreter and C has the clang compiler. But JavaScript instead relies on a web browser for execution.

Another feature is non-mandatory semi-colons at the end of each line: you can either omit or leave in a semi-colon at the end of each line in JavaScript. The browser will still be able to understand it either way. However by convention it is recommended to place semi-colons at the end of every line, as this guide will follow.

Getting started

Do you have a web browser that is not Internet Explorer? Do you have an IDE (or other text/code editor) installed on your computer? If you answered yes to both questions, then you are ready to started coding! If not, then install a browser as well as a text editor or IDE of your choice. The browser of choice is Mozilla Firefox, but feel free to use any browser you like.

Next steps

Next, we will look at how the Browser Developer Tools will aid us throughout the development cycle when using JavaScript, HTML and CSS (to be covered in brief in this guide).

Certain projects may include private files (like secrets) or downloaded content (like dependencies). Such files may contain very sensitive information or very large amounts of data and they should not be included in ANY snapshots of the project.

This is where ignoring files with .gitignore comes into play.

Using .gitignore

To start, let's create a new file secrets.txt:

If you run git status, you will notice that Git prompts you to stage secrets.txt. But we don't want that to happen. So we can add a file .gitignore and add the path to secrets.txt:

Then, when you run git status again, you will notice that Git no longer prompts you to stage secrets.txt. Wonderful!

Predefined .gitignore

You can find a set of predefined .gitignore files here:

We highly recommend going with them for any project so that you are not redefining/missing any common files and folders that should be ignored.

When creating a repository on Github, can select a predefined .gitignore to be added in the repository so you can save a step of adding the file

What to ignore?

Typically, we ignore files like build artifacts and generated files that are usually derived from the human-authored code in the repository.

• Dependency caches like /node_modules

• Compiled code like .o, .pyc files

• Build output directories like /bin, /out

Further reading on ignoring files on git

Let us first understand some of the key terminologies and ideas behind Git to help improve your intuition of Git.

What is Git?

Git is a version control system first created by Linus Torvalds with the aim of managing software changes over time. It is not the first version control system (SVN and Mercurial existed before it) but it is one of the most commonly used ones.

At a high level, version control systems track the "history of changes" of a piece of software over time. Git, in particular, emphasizes the use of a decentralized collaborative workflow, allowing teams to collaborate and work on a codebase without an active connection to the centralized repository.

Introducing the commit

To track a codebase, Git relies on a system of commits.

You can think of a commit as a snapshot of the instance of the codebase at a given point in time. For instance, when you are fixing a bug or implementing a new feature, you may want to save the current state of the codebase (take a snapshot). Every time you take a snapshot, it gets added over the previous snapshot as a set of changes that were introduced in the new version of the codebase.

Internally, Git tracks these commits by creating an , with every commit representing a node in the graph and every edge points back to the previous commit that occurred.

You may notice that each commit node may have more than one incoming edge. This is where the idea of branching stems from.

Branching

Suppose that you were working on some changes when a bug report comes in and you have to urgently fix it. You don't know if the bug fix works immediately so you don't want to work on the bug fix in the same location where you're working on your changes. This is when branching comes in handy.

Unofficially, you can try thinking of a branch as an independent line of work that stems (or branches off) from a point in development. They can be seen by the nodes C2 <- C3 <- C5 in the previous diagram. They let you work on features or bug fixes without interfering with the current set of changes.

By default, Git starts out with a main branch.

More information about branching is covered under .

Recall that in , you had the option to create a private repository. Private repositories allow you to work on projects without having the source code be publicly available such as when you are building an closed source project.

However, if you just created a private repository, your friends cannot join the repository and contribute to it. To allow them to view and contribute to the repository, you will need to add them as a collaborator to the project.

To do so, navigate to the "Settings" tab and under "Access" > "Collaborators", you will see this page:

Then, select "Add people" and enter your friend's Github username. They will receive an email notification about the invite which they have to accept. Once done, they will be able to view the private repository.

For this workshop, you'll also need lazygit. Follow the instructions here

Why React Native?

• It is cross platform (Android and iOS phones can use my app)

• It is very similar to React (React is arguably the most popular framework for web development right now, skills can be easily transferrable between them)

Commit Manipulation

In many projects, commits are more than a snapshot. It should represent a working state of the repository. That means, some projects don't really like it if you have a typo, then you have to create a separate commit to fix said typo.

So then, how do we rewrite the commit to fix the typo? That's where commit manipulation comes in.

The core of Github Actions are workflow files found in a repository. These workflow files are stored in the folder .github/workflows and are automatically read by Github.

Before we dive into the common workflows in Github Actions, let's first understand the high-level anatomy of Github Actions.

Anatomy of Github Actions

Workflows are configurable automated processes designed to run when an event occurs. These may include things creating a pull request or when an issue is created. A single workflow may be triggered by different events, and it may have certain restrictions being placed on it (for example, a workflow triggered by a pull request will only run when the target branch is the

An HTML form allows users to submit data to a server for processing. Let's add some functionality to our previous HTML form to allow queries to Google Search.

The necessary attributes

First, we need to add some attributes to the <form> tag. But what attributes does it accept? Let's look at two of them.

These are some additional recipes you can implement in Github Actions!

Debugging Github Actions

Given that steps in a job can be a script, you can actually perform logging as steps in a job:

These will add a step to the job that logs these echos.

If you're following from the workshop, here are the slides!

Prologue: What is Self Hosting?

The act of providing or serving digital content or an online service typically delivered by a business.

The service or content is generally served locally from your own hardware. Often "self-hosters" use older Enterprise-grade hardware from their home internet connections however they also use other hosting providers hardware. This is still considered self-hosting.

While people who get into self-hosting often use their own hardware, using hosting providers help abstract away the hardware difficulties while getting you 90% of the way there.

Selectors are, as you can guess, ways to select elements. These selectors apply to both CSS and JavaScript later on.

By name

The first way to select a group of elements is to select them by name. An example use in CSS would be this:

Here, the styling will be applied to all <p> elements in the html file. This works with any valid html tag, and the general syntax is:

Input and Output

It's convention to write a program to print out "hello world" when first learning a language, so let's do exactly that. In the browser console that you opened up earlier, type in the following:

And hit enter. You should see "hello world" printed (without the quotation marks) in the line below, and undefined just below it (on Firefox). Here, undefined is the return value of the expression that you just evaluated. In general, assignment and output expressions return undefined, as do functions that have no return value.

What is forking?

Forking is the process of creating a at-the-time copy of a remote repository. So any branches and code from the original (called "upstream") repository.

You can create a fork of a repository by visiting the upstream repository link and selecting the "Fork" button:

Basics

Consider the following:

It looks like a mix of javascript and HTML, and it is called JSX, which you will see a lot in React based applications. It contains an opening tag and a closing tag.

In React Native, the idea behind it the same, except the syntax might be slightly different:

In this example, we declare a variable name and embed it inside the JSX element with curly brackets:

JSX can contain children:

What is State?

State serves as a component's memory, allowing it to store and track information between renders.

The useState Hook

Oh no! I've committed a secret to my repository, and pushed the changes!

Let's go back to our button and try to access and change its style. To get its style, we can use the style property:

You should get a CSSProperties object.

To access a particular property, use dot notation again to access the property. Here are some common ones:

In general, element.style.propertyName should return the value for that property.

Github Actions is a Continuous Integration/Continuous Delivery (CI/CD) platform. CI/CD is essentially an automation of the standard software development lifecycle. Rather than having to manually perform tasks like linting, formatting, and deployment, CI/CD platforms automate the process and allow you, as the developer, to focus on developing meaningful products, rather than worrying about fulfilling a checklist of actions.

You can use Github Actions to build a continuous integration and continuous delivery/deployment pipeline.

Every repo can have many workflows in the .github/workflows directory. You need to create the directory at the root folder. Each workflow is a .yml file using the YAML syntax. Each workflow can have a set of Jobs which itself has a set of steps. Each step is a single 'command' that is ran in order and depends on the step before it.

Official Github Actions documentation:

Guidelines

Writing good commit messages helps you and your teammates to track changes more effectively. The commit message should provide a good summary of the changes made.

Be specific

❌ - bug fix

❌ - refactor

Props is how react components communicate with each other. Every parent component can pass information to its child components by giving them props.

We've already seen props (short for properties) before, like how we pass in onPress is passed to the Button component, or how the styles is passed to the View component. Just like how functions can take in arguments, components can take in properties.

import React from 'react';
import { View, Text, Button } from 'react-native';

// Child component
const Greeting = (props) => {
  return (
    <View>
      <Text>Hello, {props.name}!</Text>
    </View>
  );
};

// Parent component
const App = () => {
  return (
    <View style={styles.container}>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </View>
  );
};

You can also pass functions as props!

import React from 'react';
import { View, Button } from 'react-native';

// Child component
const MyButton = (props) => {
  return (
    <Button title={props.title} onPress={props.onPress} />
  );
};

// Parent component
const App = () => {
  const handlePress = () => {
    alert('Button was pressed!');
  };

  return (
    <View>
      <MyButton title="Press Me" onPress={handlePress} />
    </View>
  );
};

In this example, the MyButton component receives a title and an onPress function as props from the parent App component. When the button is pressed, it triggers the handlePress function in the parent component.

Instead of using props, you can destructure the arguments directly in the function signature. This makes it clear which props the component expects and avoids the need to repeatedly write props.

Before we start installing and running our services, it is good to keep our system up to date. To update our system, do:

Running Services

Hosting a web page with nginx

• nginx is a great web server for these things, but you can pick whatever you want, or are more familiar with

• On Ubuntu, this is pretty simple: apt install nginx

• Enable it and start it: sudo systemctl enable nginx, sudo systemctl start nginx

• Open up your browser and head to — you should see a page there

• Edit files in /var/www/html/..., etc: try replacing index.html? with "hello world"

• check again

Here's a pretty cool, simple website. Let's try and deploy it:

Running a cron job that sends us a message via telegram

One of the best things about a server is that it's meant to run 24/7, something that our laptops or desktops aren't great at doing. This means it's really good at running things constantly at a scheduled interval. To do such a thing, we'll use something known as cron jobs.

• Cron is a scheduling daemon that executes tasks at specified intervals.

• These tasks are called cron jobs and are mostly used to automate system maintenance or administration.

Cron jobs

The crontab command allows you to install, view , or open a crontab file for editing:

• crontab -e - Edit crontab file, or create one if it doesn’t already exist.

• crontab -l - Display crontab file contents.

• crontab -r - Remove your current crontab file.

Cron Syntax

Creating a telegram bot with cronjob

We have an API that gives us the 24 hour weather forecast in Singapore. We want to:

• Check this forecast every morning

• If it's about to rain, send us an alert. For simplicity, lets send a telegram message!

Here's a bash script that sends a telegram message if it's going to rain that day:

• To get a telegram bot id, just go to @BotFather, and create a new bot, enter the token we receive inside

• To get your chat id, just go to @getmyid_bot and copy your chat id there

• You'll need to start a chat with your bot first, go to your bot and do '/start' before you try running the script

Here are some more local APIs you can try to automate/script!

These should give you a very simple idea of hosting some services on our own servers. There's so much more we can't cover in a 2 hour workshop but here are some resources if you're fast/want to learn more!

Syncing your files with Syncthing

Syncthing is an open-source file synchronization tool that allows you to effortlessly synchronize files across multiple devices. It runs on various platforms, providing a seamless experience for syncing files securely and privately over local networks or the internet.

Hosting your own VPN over your own server

There are plenty of reasons why you should . We can set up our own to ensure that we can browse the internet securely or hide our IP addresses by routing our network traffic through our servers instead.

What is HTML?

HTML, which stands for HyperText Markup Language, is a language used to construct web pages by defining their structure and content. The structure is defined by tags, which are keywords that define elements on a page, and are surrounded by angle brackets (<>).

Tags

Tags, as mentioned before, define the structure of a page by creating elements. There are two types of tags: paired and unpaired.

Paired tags have an opening tag, which is the name of element surrounded by angle brackets, and a closing tag, which is the name of the element prefixed with a / and surrounded by angle brackets (<element>...</element>). The content goes in between the opening and closing tags.

Example of paired tags include the <html> tag, the <head> tag and the <body> tag.

Unpaired tags only have a single tag for the element (<element>).

Examples of unpaired tags are the <br> tag and the <hr> tag.

Creating an HTML file

Open up a text/code editor or IDE of your choice, and type in the following code:

Then save the file as index.html. Congratulations, that is your first HTML file ready. To view it in the browser, naviate to the file in your finder/library and open it with a browser of your choice (see below).

In your browser, you should see something like this:

Now lets see what these tags do.

• <!DOCTYPE html> essentially declares to the browser that the document is an HTML file. It's not necessary, but helpful.

• The <html> tag contains the entire contents of the page between its opening and closing tags.

• The <head> tag contains meta information about the page, as well as imported scripts and stylesheets. Here it also contains the <title> tag:

More tags

Let's take a look at some more tags:

• The <div> tag is a paired tag that is often used to create a generic element that may or may not contain text.

• The <a> tag is a paired tag that is used for hyperlinks (a stands for anchor).

• The <button> tag is a paired tag that is used to create a clickable button.

We'll end up using all of these tags throughout the guide, so make sure to keep them in mind. A full list of HTML tags can be found .

Next steps

Next, we'll take a look at tag attributes and how they can be used to give properties to elements.

One of the great features of Zig is that it is fully compatible with C. Let's return to the Hello, world! example, this time using C to print instead of Zig.

const c = @cImport({
    @cInclude("stdio.h");
});

pub fn main() !void {
    _ = c.printf("Hello, world!\n");
}

That's it! Using the cImport directive, we can directly use C code inside of Zig. Of course, please compile this to verify that it works as expected.

Custom C code

Let's write some of our own code instead of using the C standard library. Our custom C program will have just a single greet function, that says hello to the name passed as a parameter.

Let's verify that this works as a C program first. We can create a temporary main file for the C program.

And then compile it using gcc as with any other C program.

It works! So how do we get gcc to work with Zig? Ah! We unveil the secret behind Zig's ability to handle C code so well. It comes with a C compiler :O

Insane! Let's continue by trying using this C code in Zig instead of just C. We can start by modifying our build file to look for greeter.h in the correct place.

Now, we can configure our main.zig file to import our custom greeter.c.

We use the zig build run command instead of zig run, and we can see that everything works well!

On top of commits, we like to label different "lines of work" as branches. By default, your branch will be something like "master" or "main". We can create new branches to group together a bunch of changes and commit.

HEAD

Notice that all commits come with a unique ID. This can make it difficult to reference the exact commit you are on. This is where HEAD label comes in.

HEAD is a special label given to the current commit you are looking at.

To move you HEAD around in lazygit, go to the Commits submenu (hit 4), then navigate with arrow keys/mouse to the commit you want and hit spacebar to switch to that commit.

Without lazygit, you would do something like:

Creating a new branch

By default, a new branch is always created from the point of HEAD of your current branch (usually main) onwards. This means that the branch will have all the snapshots that precede (and include) HEAD but any new snapshots made on the branch are not reflected (yet) on main.

Combining changes of branches

Recall that we mentioned that the changes of a branch are not reflected across any other branch UNTIL otherwise specified? How exactly do we specify this?

An easy way to do so is by merging the branches into one another.

Suppose we have two branches: main and feature-A and we want all the changes from feature-A to be present in main so that we can demo it to the executives. We first need to clearly denote which is the source branch (where the changes exist) and the target branch (where we want the changes to appear in). In this scenario, feature-A is the source branch and main is the target branch.

Then, a simple procedure to perform the merge would be:

1. Switch to the target branch

2. Merge source branch into target branch

This can be done via:

However, this process is not always so straightforward. As you will see in the coming chapter, merging has its own set of "problems" that may arise.

Did you see the !voidreturn type of the mainfunction from earlier? That is Zig's way of indicating that the mainfunction could possibly return an error. Error handling is a feature that was designed carefully in Zig, and worth exploring before we go further.

Defining an error

An error is defined in a similar way to an enum. You can also use ||to combine different error types together. Here are some errors from the standard library.

Returning errors

After defining your error, you have to indicate that a function you've written can possibly return an error. This is done by placing the error name, then a !, then the actual return type.

In the following example, the function myFunctioncan only return MyError. There is no other possible error type. On the other hand, myOtherFunctioncould possibly return other error types — its error type is inferred from the function body.

Handling errors

You can either use tryto propagate errors from functions that you call, or catchto handle the errors at the call site. In Zig, errors must be handled (eventually), otherwise you'll get a compiler error.

Think of it as a tool that allows you to to create stuff with logic and UI. Since CS1101S (or any of the CS1010 variants) focuses mainly on logic, this might be the first time you are dealing with UI.

UI is generally handled with the JSX syntax in the previous section. For React Native, we have some basic out-of-the-box components that we can use.

Common React Native Components

These components are enough to solve 90% of your needs.

• View: A container like div

• ScrollView: Like View but Scrollable

• Text: Displays texts

• Button: Supports touches

• TouchableOpacity: Like Button but can encapsulate Button

• TextInput: Supports inputting texts

• Image: Display images

You can read up on other components .

Organizing Components

Components can be organised using . Understanding the 4 concepts below can meet 90% of your needs. Later on we will try to create the mockup for NUS NextBUS using these concepts alone.

Flex direction

• row: organise components horizontally

• column: organise components vertically

Justify content

• space-between: Spread out components evenly. First component at the left end, last component at the end.

• center: Components are centered.

Styling UI components

You can style components using the StyleSheet:

Alternatively, you can style components using CSS libraries such as . There are different paradigms to approach styling components but the general idea is the same - they all uses concepts from CSS. You can visit the section in the wiki for more info!

Note: We will use the same HTML page we have been using. I'll refer to it as clicker.html.

In this section, we'll make a simple page that has a button and a counter. Each time the button is clicked, the value of the counter is incremented. We'll use the same page we have been using before.

Set up the html file

Set up the html file such its body contains at least the following two items:

• a button with an id

• a text element of your choice also with an id

An example is below:

You can have other elements and other styling to make it nicer, but that is up to you.

The script

Adding an event listener

Add an event listener to the script.js file that listens for the DOM content to be loaded, upon which it adds an event listener to the button. Here's how that looks:

updateCounter is the function that we will use to update the counter on the page.

updateCounter function

Inside this function we need to do the following:

1. Get the counter element from the page

2. Get its text value

3. Increment it by 1

4. Set the counter element's inner value to the new value

Try doing this yourself before looking at the code below.

Test it out

That's all we had to do. Now, test out the code by saving all files, reloading the page, and then clicking the button. The counter value should get incrememented:

Bonus (try it yourself)

Try adding the following features:

1. When the counter value reaches a non-zero multiple of 10, its font color should change to gold, and set back to original color otherwise

2. Add a second button that resets the counter variable to 0

3. Add a third button that decrements the counter, but no longer decreases after reaching 0.

A sample solution can be found .

Next steps

Next we'll look at how elements can be created or removed in a page.

Step 1: Install Node.js

Download the latest LTS version of Node.js from the official website.

Once installed, open your terminal (macOS/Linux) or Command Prompt (Windows), and verify the installation with the following commands:

$ node --version
v22.14.0

$ npm --version
v11.3.0

Your versions might differ slightly — that’s perfectly fine!

Step 2: Create a New React App

Navigate to the folder where you’d like to create your project:

Run the following command to create a new React project with TypeScript:

This will take a few minutes to install dependencies. Once complete, navigate into your project folder:

To start the development server, run:

Your React app should now be running on .

This guide aims to progressively introduce various concepts necessary to start using Git to manage your project.

Using this guide

Before starting the guide, it is highly recommended that you give Setup a read to ensure that everything you need for this guide is correctly setup.

We also highly recommend that you read Fundamental Concepts to understand the terminologies that this guide uses.

The guide is broken up into three parts:

1. Fundamental concepts

2. Collaborative workflows

3. Advanced concepts

The first two parts are the most important and we highly recommend that you, at the very least, finish them. The last part is good to know but not crucial if you are in a rush.

Why this guide?

This guide was created as an effort by to make knowledge easily available for various technical topics!

Where can I find the slides?

The slides are published here:

Changelog

1. 11 May 2024: First draft for first 2 sections

2. 18 May 2024: Conducting the workshop for Orbital 2024

3. 17 May 2024: Conducting the workshop for Orbital 2025

I am getting public key denied errors or permission denied error messages.

These are issues that often relate to your SSH setup.

Please follow the Setup guide correctly.

Should I be using Git Bash or Terminal?

If you are on Windows, please use Git Bash over Command Prompt or Powershell as it supports Bash which is what is used across this guide.

If you are on MacOS or Linux, feel free to use your default terminal.

Does it matter if the default branch is named master or main?

Yes. It is how you reference the branch and it is easiest if your remote and local repositories share the same branch name to avoid confusion.

Does the Github repository name have to match your local folder name?

No. Since all your local repository needs to know about the remote repository (see ) is the remote repository URL. Therefore, the names of both local and remote repositories can be different.

How do I remove the need for a passphrase when using SSH?

This involves setting up password-less authentication. You can refer to this guide:

How do I remove origin if I set origin incorrectly?

You can modify the URL for origin via: git remote set-url origin <new url>

You can rename the remote via: git remote rename <old name> <new name>

Is there a convention to using branches just for feature changes or can I just merge straight into main?

There is no fixed convention. However, traditionally, main usually represents the production ready state of the repository and is managed through CI/CD. This means that if the feature pushed straight to main has bugs, the production state will also have bugs. This is the biggest reason for using a separate feature branch before merging into main.

However, if the feature you are working on is small enough, then it is possible to merge directly into main.

How do I "unpush" a file?

This involves various steps depending on the state that the repository is in. Please refer to this guide:

As mentioned in Branching, branches can be thought of as independent lines of work that allow you to work on features/bug fixes independently from the main branch. This means that any changes made on a branch is not reflected on the main branch UNTIL otherwise specified.

This is very powerful in allowing you to separate your work from the primary branch for development or just from other people's work.

For simplicity in this section, we will focus on the bare basics of branching in Git.

HEAD

Notice that all commits come with a unique ID. This can make it difficult to reference the exact commit you are on. This is where HEAD comes in.

HEAD is a special name given to the latest commit of your current branch. It is a nice syntactic sugar to allow you to easily reference the latest commit without knowing its exact commit ID.

Creating a new branch

By default, a new branch is always created from the point of HEAD of your current branch (usually main) onwards. This means that the branch will have all the snapshots that precede (and include) HEAD but any new snapshots made on the branch are not reflected (yet) on main.

There are two ways to create a new branch:

Then, you can switch to the branch by using:

Alternatively, you can use the git checkout command for both:

Changing branches

As mentioned earlier, you can switch to a branch via:

Viewing all branches created

To view all branches, you can use the following:

Deleting a branch

To delete a branch, you add the -d flag:

Renaming a branch

You may have misspelled the branch name or parts of it. You can rectify it using the -m flag:

Combining changes of branches

Recall that we mentioned that the changes of a branch are not reflected across any other branch UNTIL otherwise specified? How exactly do we specify this?

An easy way to do so is by merging the branches into one another.

Suppose we have two branches: main and feature-A and we want all the changes from feature-A to be present in main so that we can demo it to the executives. We first need to clearly denote which is the source branch (where the changes exist) and the target branch (where we want the changes to appear in). In this scenario, feature-A is the source branch and main is the target branch.

Then, a simple procedure to perform the merge would be:

1. Switch to the target branch

2. Merge source branch into target branch

This can be done via:

However, this process is not always so straightforward. As you will see in the coming chapter, merging has its own set of "problems" that may arise.

So that was a lot to learn! Now, what can we do with it? We haven't really gone through the useful stuff we can do with scripting, so this section will focus more on some cool things we can do with scripting.

To do this, we'll need to learn commands

cURL/wget

curl/wget are two commands that basically do the same thing with slight variations: they both allow us to send and receive data through common networking protocols. For our usecase, the most important thing is that it allows us to talk to an Application Programming Interface (API). Without going into too much detail, APIs are just a magical gateway for us to talk to programs other people have made.

Our final advanced use case we would like to cover is the use of reusable workflows.

Suppose you're in a and have the following sub-projects:

1. web

2. admin

Great, now we have Git set up! You might have some questions about the Git Setup process:

: View commit details

Sample output of git log. Use j and k on the keyboard to scroll up and down and q to exit the log view.

Each log entry will describe what that commit does. Each commit will have a commit hash, author and date.

For example this commit:

Understanding your system

So now we want to be able to navigate, operate and monitor our system. To do this, most servers have a relatively homogenous system: systemd!

systemd is a software suite that provides an array of system components for Linux operating systems. The main aim is to unify service configuration and behavior across Linux distributions.

systemctl is the command-line tool that manages the systemd system and service manager in Linux.

Let's create a sum function that takes in a slice of numbers (any type of number!!) and returns the sum of all the numbers! How can we do that?

Woah, what is comptime? And why is the type of T like type itself?

Open up the html page you made . Open it in the browser, and open the browser console. We're going to query the document for elements and change their attributes, then see the changes in real-time.

Pick an element

Our page currently only has two things: a heading and a button. So lets pick one of them. Run the following in the console:

Now, button has the button element assigned to it. Test it by typing button and hitting enter in the console; you should see something like below:

Now that we have started working on our local repository in , we may want others to view the contents of our repositories. We may also want a layer of security against local machine crashes by storing our repositories somewhere else.

This is where remote repositories and Github come into play.

Creating a Github repository

The box model is a way to visualize the space taken up by an element on a page. It involves 4 main properties:

1. The content: This is content of the element (text, other elements, images, etc.)

2. The padding: This is the space between the content and each border

3. The border: This is the, uh, border around the element

To get a good grasp on Git, we will first focus our attentions on working with Git on local repositories.

Creating a local repository

You can create a local repository from an existing project folder or from an empty folder. For the sake of simplicity, we opted to demonstrate the steps to create a local repository from scratch.

First, create the folder:

Then, navigate to the folder:

Finally, run the following command:

This tells Git that you want this folder to be monitored by Git.

These two are equivalent

Using const syntax for javascript

Using function syntax for javascript

Querying the DOM involves searching for elements in the html document. This is done by the way of (remember them?)

There are a few ways to search for elements in an html document using JS. We'll take a look at some of them here.