Part 1: Introduction to Visual Studio Code

Open your browser and go to code.visualstudio.com. Click the big download button.

Visual Studio Code

https://code.visualstudio.com

Depending on your operating system, follow the installation instructions for macOS, Windows or Linux. On Windows, you should check the box to add to the PATH during installation if it is offered.

Open the program by selecting Visual Studio Code from your macOS Applications folder, Windows Start Menu or via another method. You should consider making a shortcut to your dock or desktop for easy access later.

The program should open in a new window that looks something like this. You may be greeted by a welcome message in the center. Feel free to close it for now.

The far left-hand sidebar is called the Activity Bar. It has icons for different views like Explorer, Search, Source Control and Extensions. You can hover over each icon to see its name. Click on the top icon that looks like two files stacked on top of each other. This is the Explorer view, where you can see and manage your project files. It should pop out a sidebar on the left side of the window.

Create a code folder

Click the open folder button in the Explorer sidebar. A file dialog will open.

Create a new folder in your user's root directory called Code. This is where you will keep all your coding projects for this class.

Inside of that directory, create another new folder called coding-the-news-week-1. This is where you will keep the files for this week's exercises.

Hit the open button to select that empty folder as your project in VS Code. The Explorer sidebar should now show the name of your folder at the top, with no files inside yet.

Create a README.md file

The top right-hand corner of the Explorer sidebar has a small icon that looks like a page with a plus sign. This is the new file button. It will create a blank file in your project.

Click it and type README.md as the file name, then press Enter. The new file will open in the main editor area.

Since the 1970s, software developers have included an explanatory file named README to describe their projects. Today, those files are commonly called README.md to signal that they are formatted in Markdown, which provides a simple way to add headings, lists and links.

Add a little content to your README. Start by adding a headline at the top, which is done in Markdown by using the # symbol followed by a space and the headline text. Body copy can be written in plan text. The ## symbols create a subheading. Hyperlinks are created by wrapping the link text in square brackets [] followed by the URL in parentheses ().

# Coding the News Week 1

Live from New York, this is my first README file.

## About Me

I'm learning to code at CUNY. You can reach me at [[email protected]](mailto:[email protected]).

You'll see a circular dot to the right of the file's name in the tab bar at the top of the editor area. This means there are unsaved changes.

You can save the file by pressing Cmd + S on macOS or Ctrl + S on Windows.

Part 2: Introduction to GitHub

Install git

The git program allows you to carefully track the changes you make to files over time. This can be useful when you’re working on your own, but quickly becomes essential when you work with other developers.

Git

https://git-scm.com

You can think of git as an air traffic controller. It makes sure the code you’re writing at your desk and the code your colleague is writing in her home office don’t clobber each other like two wayward Boeings. If you each make changes to the same lines of code, git steps in and forces you to reconcile the work before it can be combined into the published version.

Git does this by keeping a flight log. Every change to your code is recorded in a series of entries known as commits. Not only does it keep you from crashing into your colleagues, it provides a comprehensive record of the project’s history, which you can use to identify when bugs are introduced, and by whom.

Before we can use git, we need to make sure you have it installed on your computer. You can do this by opening a terminal window in Visual Studio Code, where you'll be able to issue commands directly to your computer's operating system.

Click on the Terminal menu at the top of the screen and select New Terminal. A new panel should open, either at the bottom of the VS Code window or in a separate tab.

You can check if git is installed by typing the following command into the terminal and pressing Enter:

git --version

If git is installed, you should see a version number like git version 2.42.1 or similar.

If you see an error message instead, you'll need to install git first. On macOS, this can be done by installing the official Xcode Command Line Tools. You can do that by typing the following command into the terminal and pressing Enter:

xcode-select --install

On Windows, you can download and install Git for Windows. After installing, restart VS Code and try the git --version command again. You should now see the version number.

Log in to GitHub

GitHub is a popular website for hosting git projects online. It allows you to share and collaborate with other developers.

GitHub

https://github.com

If git is an air traffic controller, then you can think of GitHub as an airport. It’s a central, systemized place to launch and land code. It has become an integral part of development at most newsrooms. In addition to code management, it offers an array of other services for project tracking, file hosting, task scheduling and more.

If you don't already have a GitHub account, go to github.com and fill out the registration form at the center of the page. Use your CUNY email to create the account. It will earn you access to free student tools.

If you already have an account, log in and make sure that your CUNY email is added to your profile. You will receive a verification email to confirm the address.

Connect Visual Studio Code to GitHub

Visual Studio Code can act as a communication channel between your local project, managed by git, and your GitHub account, which will store your code on the web.

You can connect the two by clicking on the Account icon in the lower left-hand corner of the window. It looks like the silhouette of a person with a circle around it. Click it and select Sign in to Sync Settings.

That will open up a web browser window asking you to authorize Visual Studio Code to access your GitHub account. Do it. After a few moments, the process will complete and your code editor will be authorized to communicate with GitHub.

Now let's set up your first project on GitHub. Click on the Source Control icon in the left sidebar. It looks like a branch with dots, or a Y shape.

This will display two buttons, one of which says Initialize Repository. Click it to set up git for your project. This will create a hidden folder called .git in your project directory, which will store all the information git needs to track your changes.

Commit your work

The Source Control tab will now show your README.md file under Changes with a U next to it. U means "untracked." This means that git sees it but isn't logging changes to it yet.

Git won't log changes until you tell it to do so. This is done through a process called committing. A commit is like a snapshot of your project at a specific moment. Every commit includes a bundle of changes along with a message describing what was changed.

The Source Control tab makes it easy to log your work with its user interface. You should hover your mouse over the word Changes and click the + icon that appears. This stages all your changes, moving your file from Changes to Staged Changes. The letter changes from U to A. A means added.

Type a brief message into the box at the top of the Source Control tab. This is your commit message that will be logged in git's history. It should be short and descriptive, like a headline. For example, you could write Added README.md.

Click the green button with the checkmark icon to commit your changes. This completes a snapshot of your project in your local git repository.

You may receive an error message about setting your user name and email for git. If so, you can set those by typing the following commands into the terminal, replacing the example name and email with your own.

git config --global user.name "Your Name"
git config --global user.email "[email protected]"

After you do that, return to the Source Control tab and try committing again. It should work.

Publish to GitHub

You can see your first commit logged in the Graph window at the bottom of the Source Control tab. It shows the commit message, author and timestamp. The button in the Changes window now says Publish Branch. Click it to create a new project on GitHub and push your local commits up to the web.

You may be asked to authorize Visual Studio Code to access your GitHub account again. Do it.

A popup at the top of Visual Studio Code will then present you with two options, which are asking whether you'd like your new repository to be public or private. Choose public. This means anyone can see your code. If that makes you uncomfortable, you can always delete it later.

A popup will appear in the lower-right corner of the window reporting that your GitHub project has been created. Click the Open on GitHub button to view it in your web browser. That will take you to a page like this one, linked to your GitHub account instead of mine.

coding-the-news-week-1

https://github.com/palewire/coding-the-news-week-1

This cycle of editing files, committing changes and syncing them to GitHub is the core workflow of using git and GitHub. You'll do it hundreds of times in this class.

So it's a good idea to get some practice.

Let's all pause here and create a few more commits to our README.md file. Try to make at least three more commits before we move on. Push them to GitHub and refresh the page to see them appear online.

If you're looking to get creative, consult GitHub's guide to Markdown and try adding some formatting options we haven't covered yet, like images, blockquotes or code snippets.

Part 3: Introduction to GitHub Copilot

GitHub Copilot is an AI coding assistant that can help you write code. It uses machine learning to suggest snippets, correct errors and even write entire files based on your input.

GitHub Copilot

https://github.com/features/copilot

In a very short time, Copilot and similar tools have become widely adopted in the software development industry. News organizations like Reuters are already using AI tools every day to write, vet and improve their code.

One strength of Copilot is that it can be configured in Visual Studio Code as an extension that integrates directly into your coding workflow.

Access GitHub Copilot for free

Students at CUNY are eligible for free access to GitHub Copilot through the GitHub Student Developer Pack. Go to education.github.com/pack to sign up with your university email. You may need to provide proof of enrollment by uploading a picture of your student ID.

GitHub Education

https://education.github.com/pack

Once you have Copilot authorized for your account, return to Visual Studio Code to install the necessary extension.

Install the GitHub Copilot Chat extension

You should select the Extensions icon in the left sidebar. It looks like four squares. Then search for GitHub Copilot Chat in the search bar at the top of the sidebar. Select the main extension by GitHub from the list and click the Enable button.

You may be asked to restart your extensions or Visual Studio Code. Go for it.

Now click on the Toggle Secondary Sidebar icon in the far upper-right corner of the window. It looks like a dark vertical bar at the right edge of a box. This will open a new sidebar on the right side of the window. A tab at the top of it should say Chat. This is where you'll interact with Copilot.

Chat with Copilot

Start off with something simple, a question about computer programming you might ask a teacher or a large-language model. Ask Copilot, "What is a README file?" Then hit the paper airplane icon to send the message.

Now let's try editing a file. Return to the Explorer sidebar icon, the one at the top left, to open your project files. Click on the README.md file to open it in the editor. Now return to the chat and provide Copilot with your name and ask it to add a biography of your journalism career to the README file.

Something like, "Expand the README by adding a short biography about [Your Name], a journalism student at CUNY." Hit the paper airplane icon to send the message.

Click the Keep button to accept Copilot's changes to the file, or hit the undo button to reject them.

Now let's log those changes, but this time let Copilot help write the commit message. Click the Source Control icon in the left sidebar again. Stage your changes by clicking the + icon next to "Changes."

Now, in the Message box at the top, click the sparkle icon next to the text field. Copilot will suggest a commit message based on your changes. If it looks good, click the checkmark to accept.

These simple examples just scratch the surface of what Copilot can do, but they demonstrate how the chat assistant is integrated into your coding environment. You should experiment with it as much as you can as you work on projects this semester.

Part 4: Clone an Existing Project

You won't always be starting projects from scratch. Early in your career, you're more likely to be starting off with an existing codebase created by a colleague.

While most code written in newsrooms is hidden away in private projects, many organizations publish open-source code on GitHub for others to use and learn from. These are great opportunities to learn from real-world projects.

One leader in open-source journalism is The Pudding, a creative digital magazine that uses data visualization and experimental storytelling techniques to cover culture. A recent example is their K-pop fan survey.

The Pudding — K-pop fan survey

https://pudding.cool/2024/10/kpop-survey/

All of the code that powers the page is open on GitHub at github.com/the-pudding/kpop-survey.

GitHub — kpop-survey

https://github.com/the-pudding/kpop-survey/

Let's use Visual Studio Code and Copilot to explore this project. Start by selecting New Window from the File menu to open a fresh instance of VS Code.

Select the Source Control icon in the left sidebar and click the Clone Repository button. A popup will appear at the top of the window asking for a repository URL. Paste in https://github.com/the-pudding/kpop-survey/, then press Enter.

A file dialog will open asking where to save the project. Navigate to your Code folder and tell Visual Studio Code to clone the project there. After a few moments, another popup will appear asking if you'd like to open the cloned repository. Do it.

You'll now see all of the same project files we saw on GitHub in the Explorer sidebar, like README.md, package.json and the src folder.

It's thousands of lines of code written by someone else. How could we ever make sense of it?

Here's where Copilot can work wonders. Return to the chat sidebar and ask Copilot to explain how the project works, and what it would take to run it on your computer.

You'll see a clear, direct explanation of the project structure and purpose. I gave the instructions a try on my computer and here's what I encountered:

localhost:5173

http://localhost:5173/

Not great. But, hey, it's a start! And there are error messages in my terminal that I can ask Copilot about to try to debug the problem.

We won't try to dive down that rabbit hole today, but you could almost certainly use Copilot to help you get this project running if you put in a little time and effort.

Homework Assignments

Your first homework assignments are to get practice creating new projects, cloning existing projects and using Copilot to explore code.

Task 1: Creating

Create three projects on GitHub using Visual Studio Code, each with a README.md. They must be public. It doesn't matter what's in them, the point is to get practice at the workflow. You should send me links to all three before next Monday's class.

Task 2: Cloning

You should find three GitHub projects created by news organizations. If you need help finding them, an index of more than 300 news organizations on the platform is available at github.com/silva-shih/open-journalism/.

Use Visual Studio Code to clone and use Copilot to help you understand what each project does. Ask at least four questions in the chat panel for each project. You could ask about the technology tools used to build the project, or inquire who made the biggest contributions. Be curious!

Copy the text from each chat panel and paste it into a Markdown file. Commit the text to a fourth public project on GitHub. Send me the repository link before next Monday's class.

Task 3: Sharing

Be prepared to present what you learned about one of the repositories to the class next week. You'll be expected to share what the project does, what it would take to install it and who contributed to it.