DPS909 & OSD600 Winter 2017 - Lab 6

From CDOT Wiki
Jump to: navigation, search

Picking and Learning a Good Editor

In this lab you will work with some modern code editors, learn how to work with editor package managers and addons, and learn some common workflows. You will also learn how to use screen recording software.

1. Editors

One of the most important tools a software developer has is his/her code editor. Choosing an editor is important, because it determine the limits of what you can work on, and where (e.g., OS) you can use it. The extensibility is also one of the determinates of how much you can grow as a developer: does your editor support you as you learn new things, as new tooling, practices, and workflows become available?

Some of the most popular editors at the moment include:

2. Test Drive some Editors

From the list of editors above, pick at least 2 that you've never used before and install them. Use the Mozilla Brackets repo to test the editor (i.e., try opening the entire project) in the chosen editors to see how they perform.

Research and try doing some common tasks with both editors, for example:

  • How to open a file, a folder of files (e.g., an entire project)
  • How to change your indent from tabs to spaces, 2-spaces, 4-spaces, etc?
  • How to open the editor from the command line
  • How to find things (e.g., a string, a file)
    • Finding something in an open file (current editor)
    • Finding something in any file in a project
  • How to split the screen into multiple panes/editors/views
  • How to install editor extensions (a.k.a., plugins, packages, etc.)
  • How to use multiple cursors to change common code at the same time
  • What are some common key bindings
  • How to change keybindings
  • How to enable/use autocomplete for coding HTML, JS, CSS, etc
  • How to change editor preferences and some common preferences you might want to set/change

Which editor is easier to use and learn for these tasks? Based on your experience, pick one of the editors for the next section.

3. Install some Extensions

Modern editors are extensible, and can be improved by adding third-party extensions/packages/plugins. Using the editor you chose in step 2. research some popular extensions for your editor. Here are some categories to consider:

  • Language support (integrated docs, autocomplete, etc)
  • Linting (reporting warnings, errors in code syntax)
  • Beautifiers (clean up spacing/indentation in files)
  • Git integration (make it possible to see git info, or use git from the editor)
  • Git Merge Conflict tooling (help when dealing with merge conflicts in files)
  • Debugging (connect to remote debugging tools from the editor)
  • Themes (change how things look)
  • Syntax Highlighting for common formats (Vagrantfile, npm, docker, etc)
  • Spell checking
  • Tools for Files (allow working on files in advanced ways)
  • Helper Tools (image viewers, colour pickers, etc)
  • Terminal integration (allow interaction with the terminal from the editor)
  • Documentation tooling (make it easier to write docs for code)

Pick a few categories above, and install some extensions to your editor. Make sure you install at least 5 extensions.

4. Blog your Results

Write a short introductory guide to your chosen editor. In your guide, please include some screencasts recorded as animated gifs using licecap (Windows/Mac) or byzanz/peek (Linux). Your guide should include the following:

  • Editors you tried in your experiment
  • Name of editor you ended up choosing and link for downloading it
  • Why you chose this editor over the other(s)
  • Screenshot of what it looks like with the Brackets code open
  • Instructions on how to do 5 of the tasks from section 2. Use screencast gifs where appropriate to demonstrate.
  • Discussion of your 5 favourite extensions from section 3 and what they do. Use screencast gifs where appropriate to demonstrate.

After you've tested the editors and written your guide, add your name, the chosen editor name, and your blog guide:

# Name Editor (Name) Guide Blog Post (URL)
1 Margaryta Chepiga Atom, Brackets https://mchepigablog.wordpress.com/2017/03/05/picking-and-learning-a-good-editor/
2 Simon de Almeida Nuclide, VSCode http://sdealmeida.com/the-battle-of-editors-atom-vscode/
3 Andrey Bykin Atom, Sublime https://andreybykin.wordpress.com/2017/03/03/osd600-lab-6-editor-comparison/
4 Eugueni Antsyferov Brackets, vim https://cartryblog.wordpress.com/2017/04/03/osd-600-lab-6/
5 Oleg Mytryniuk Atom, Nuclide https://osd600mytryniuk.wordpress.com/2017/03/08/atom-vs-nuclide/
6 Theo Dule Atom, Visual Studio Code https://theoduleblog.wordpress.com/2017/03/12/blog-post-8-finding-an-editor-lab-6/
7 Xiao Lei Huang Atom, Vs https://dps909blog.wordpress.com/
8 Jerry Goguette VSC, Atom https://jgoguette.wordpress.com/2017/04/20/choosing-the-right-editor/
9 Ray Gervais Spacemacs, Sublime http://raygervais.ca/going-evil/
10 Tiago Aguiar Vscode, Atom http://dps909lab5.blogspot.ca/2017/04/visual-studio-code.html
11 Nagashashank P IntelliJ IDEA, KOMODO IDE https://npolugari.wordpress.com/lab-6-editor-tryouts/
12 Timothy Moy Atom, Sublime https://timothymoy.wordpress.com/2017/03/01/osd600-lab-6-a-word-on-editors/
13 Michael Kavidas Atom, Sublime
14 Christopher Singh Atom, VS Code https://cgsingh.wordpress.com/2017/03/03/lab-6-vs-code-editor-osd600/
15 Rahul Gupta Visual Studio Code, Atom https://rahul3guptablog.wordpress.com/2017/03/13/lab-6-picking-and-learning-a-good-editor/
16 Badr Modoukh Atom, Brackets https://badrmodoukh.wordpress.com/2017/03/08/dps909-lab-6-picking-and-learning-a-good-editor/
17 Peiying Yang Sublime Atom https://pyang16.wordpress.com/2017/03/17/two-good-editors-for-programming/
18 Heetai Park Atom, Visual Studio Code https://tonypark0403.wordpress.com/2017/03/03/picking-and-learning-a-good-editor/
19 Dmytro Sych Atom,VSC
20 Dang Khue Tran VS Code, Brackets https://trandangkhue27.wordpress.com/2017/03/02/osd600-lab-6-picking-and-learning-a-good-editor/
21 John (Bohoon) Kim ATOM, VS Code http://pokim8989.blogspot.ca/2017/03/lab-6-editors.html
22 Maya Filipp Atom, Brackets https://mordax.github.io/2017/03/02/atom.html
23 Kevin Ramsamujh Atom, VS Code https://kramsamujh.wordpress.com/2017/03/05/osd600-lab-6-editors/
24 Len Isac VS Code, Sublime https://lenisac.wordpress.com/2017/03/07/front-end-development-w-visual-studio-code/
25 John James Atom, Sublime https://johnjamesa70.wordpress.com/2017/03/08/osd-lab6-new-editor/
26 Wayne Williams Atom/Nuclide , Visual Studio Code http://osd600osp.blogspot.ca/2017/02/lab-6-picking-and-learning-good-editor.html
27 Shivam Gupta Atom/Brackets https://sgupta44blog.wordpress.com/2017/03/09/lab-6-atom/
28 Max Fainshtein Atom, nuclide https://wordpress.com/post/mfainshtein4.wordpress.com
29 Zenan Zha Atom, Brackets http://zhazhazenan.blogspot.ca/2017/03/brackets-vs-atom.html
30 Brandon Bhagwandeen Visual Studio Code, Nuclide https://www.tumblr.com/dashboard/blog/bbhags/158636598224
31 Eduardo Sorozabal Atom, Brackets https://edyedyschool.tumblr.com/post/159769061483/lab-6
32
33
34