1 Setting up your working environment

1.1 Operating System

In principle, you can do the work for this clas in Windows, Mac OS, or Linux. But in order to But the simplest solution (least additional set up on your part) is to use Linux on the machines in the lab.

Be sure to login to Linux and not into Windows.
(After restarting, there will be a blue screen that lets you choose. Use the up arrow to select Linux rather than Windows, then hit return.)

If you right click on the desktop, or click on the icon in the upper left corner, you will get a list of sofware applications that you can run.

1.2 Text Editors

HTML, CSS, and JavaScript files can be created in any text editor. But it is useful to choose a text editor or IDE (Integrated Developement Environment) that has good support for HTML/CSS/JavaScript. There are several good choices available. We are going to start using Atom, but you are welcome to use other editors later on if you like.

Here is a brief description of several useful editors that are available on Calvin’s Linux machines and can be freely downloaded and installed on your own machine.

  • Atom – “A hackable text editor for the 21st Century”

    Cross-platform editing: Atom works across operating systems. Use it on OS X, Windows, or Linux.

    Built-in package manager: Search for and install new packages or create your own right from Atom.

    Smart autocompletion: Atom helps you write code faster with a smart and flexible autocomplete.

    File system browser: Easily browse and open a single file, a whole project, or multiple projects in one window.

    Multiple panes: Split your Atom interface into multiple panes to compare and edit code across files.

    Find and replace: Find, preview, and replace text as you type in a file or across all your projects.

  • VS code, – “Code editing. Redefined. Free. Built on open source. Runs everywhere.”

    IntelliSense: Go beyond syntax highlighting and autocomplete with IntelliSense, which provides smart completions based on variable types, function definitions, and imported modules.

    Debugging: Print statement debugging is a thing of the past. Debug code right from the editor. Launch or attach to your running apps and debug with break points, call stacks, and an interactive console.

    Git: Git commands built-in. Working with Git and other SCM providers has never been easier. Review diffs, stage files, and make commits right from the editor. Push and pull from any hosted SCM service.

    Easily use extensions in VS Code: Extensible and customizable. Want even more features? Install extensions to add new languages, themes, debuggers, and to connect to additional services. Extensions run in separate processes, ensuring they won’t slow down your editor. Learn more about extensions.

    Git: Deploy with confidence and ease With Microsoft Azure you can deploy and host your React, Angular, Vue, Node, Python (and more!) sites, store and query relational and document based data, and scale with serverless computing, all with ease, all from within VS Code.

  • WebStorm – “the smartest JavaScript IDE”

    Use the full power of the modern JavaScript ecosystem – WebStorm’s got you covered! Enjoy the intelligent code completion, on-the-fly error detection, powerful navigation and refactoring for JavaScript, TypeScript, stylesheet languages, and all the most popular frameworks.

    Debugger: Debug your client-side and Node.js apps with ease in the IDE – put breakpoints right in the source code, explore the call stack and variables, set watches, and use the interactive console.

    Seamless tool integration: Take advantage of the linters, build tools, test runners, REST client, and other tools, all deeply integrated with the IDE. But any time you need Terminal, it’s also available as an IDE tool window.

    Unit testing: Run and debug tests with Karma, Mocha, Protractor, and Jest in WebStorm. Immediately see test statuses right in the editor, or in a handy treeview from which you can quickly jump to the test.

    Integration with VCS: Use a simple unified UI to work with Git, GitHub, Mercurial, and other VCS. Commit files, review changes, and resolve conflicts with a visual diff/merge tool right in the IDE.

  • Vim – “the ubiquitous text editor”

    Vim is a highly configurable text editor for efficiently creating and changing any kind of text. It is included as “vi” with most UNIX systems and with Apple OS X.

    Vim is rock stable and is continuously being developed to become even better. Among its features are: persistent, multi-level undo tree; extensive plugin system; support for hundreds of programming languages and file formats; powerful search and replace; integrates with many tools; basic, but powerful, text editor with plugins for specific languages/tasks.

  • RStudio – IDE for R with support for other languages as well.

    • This is not installed on the linux machines, but you should have access to RStudio at <rstudio.calvin.edu>.

    • The “desktop version” can be freely installed on your own machine, if you like.

Do not use a word processing program like Word or Google Docs, since these embed all sorts of additional information into the file.

1.3 Getting started with Atom

  1. Launch Atom from Applications > Development > Atom.

  2. Install two (or three) add-on packages (and their dependencies).

    • Prettier (code formatting)
    • Teletype (code sharing)
    • If you happen to be a vim user, you might also install vim-mode-plus.

  3. Get organized.

    1. Create a directory (folder) for this class. D3course might be a good name for it. You can put this in your home directory or in some sub-directory.

    2. In that directory, create another directory called Day1 (no space).

  4. Start working on your Day 1 project.

    Atom provides a tree view of your project, so you can conveniently navigate to different folders and files. In the Atom menu bar, choose File > Add Project Folder. This will launch your file manager. Navigate to the Day1 folder and select Open. The folder will open in Atom’s side pane. At this point, there should not be any contents in the folder.

  5. Create a new file.

    1. Open a new file. In Atom’s top bar, select File > New File. An untitled, blank file will appear.

    2. Name the file. In Atom’s top bar, choose File > Save or Save As. Name the file hello.txt. The .txt extension indicates that this will be a plain text file.

      File name notes:

      • The file **extention will be important. Use .txt for text files, .html for HTML files, .css for CSS files, and .js for JavaScript.
      • Do not use spaces in your file names. (If you need to visually break the name into parts, use a hyphen (-).)
      • Use all lower case for (most) file names.

    3. Type a few sentences in your file.

  6. Share your file with your partner.

    1. The teletype Atom pacakge allows you to share a file with someone else. You should have an icon that looks like a little radio tower. Click it.

    2. You will be asked to authenticate using your github account.

    3. Once you do that, you will be given a token to copy and paste back into Atom.

    4. Once you have pasted your token, you will be able to “share” your file. Click share and you will be give an URL that you can give someone so that they can edit your file with you. Send this URL to your partner.

    5. Your partner can use this URL to get a view of the file on your machine. When one of you edits the file, changes will show up on both your screens. The file itself, however, only lives on the originator’s machine. But at any time, the partner can use “Save as” to save a copy locally.

1.4 Getting Started with VS Code

1.4.2 Some Extensions to install

  • Prettier - Code Formatter: Code formatter using prettier.

  • Live Share: Real-time collaborative development from the comfort of your favorite tools. (Similar to teletype for Atom).

  • Live Server: Launch a development local Server with live reload feature for static & dynamic pages.

  • ESLint: Integrates ESLint JavaScript into VS Code.

  • D3.js Snippets: d3.js devlopment Toolkit (has relatively few installations – not sure how good it is).

There are many other extensions as well, including some that add additional Git/GitHub features.