Pippin's Introduction to Web Projects with Atom - pippinbarr/dart450-2018 GitHub Wiki

Files and Folders

There are various ways of setting up a web project on your computer, and if you already have one you're comfortable with, you should stick with it. This is just a particular set of ideas.

A typical web project will tend to have a similar set of files and folders in it to create the website. It will likely look something like this:

sitename/
    index.html
    css/
        style.css
    js/
        script.js
        somelibrary.js
  • You have a top-level folder (sitename/) that contains the whole project.
  • Inside that, you have an index.html that is displayed when a user navigates to the website,
  • a css/ folder to store your CSS,
  • and a js/ folder to store your JavaScript.

It's simple, but effective.

Atom

There are various editors you can use to deal with making a website (from TextEdit to TextWrangler to Dreamweaver).

In this class we're going to be using a full-featured text editor called Atom.

Atom is already installed on the CDA computers in the lab. If you're using your own computer, you can download Atom here: https://atom.io/.

Opening your project in Atom

Generally speaking, the easiest way to work with Atom is to open the main folder of your website in it, rather than just a single file. That way all your files will be displayed in a sidebar to the left and you can switch between them easily.

To open a folder in Atom you can either drag the folder onto its icon (at least in Mac OS), or you can go to File > Open and select the folder you want to open before clicking the Open button.

From there it's pretty much just a text editor! You type things and they appear in the window! In our case, those things will be HTML, CSS, and JavaScript.

Local server

One important thing we want when doing web development is to be able to see our work in a browser as we go along. One option would be to upload everything to a server with FTP or something, but that would be time consuming and annoying, so it's often better if we can run a web server locally on our computer.

atom-live-server

  1. When you're editing a web project you can go to Packages > atom-live-server > Start Server
  2. Now you should see a browser open up with your web project's folder loaded in it (and displaying index.html if it's there)
  3. And now if you edit the files of the project the browser window will automatically refresh to reflect the new state of the project!

(If you're working from your own computer with Atom, you'll need to install atom-live-server. Go to Preferences and then choose Install. Type atom-live-server into the search box to find it, then click the Install button.)

Less ideal: Work out of your CDA public_html folder

Note: There are potential issues with working with Git on the CDA network drive and CDA isn't able to support us doing this, so it's a risk, although convenient.

If you use the CDA computers you can put your web development projects inside the public_html folder of your CDA account. So you could technically keep your entire dart450/ folder in public_html and thus have it always hosted on your Concordia account.

If you do store a project in public_html/dart450/project/, for example, you will be able to see it in a browser by going to:

http://hybrid.concordia.ca/yourusername/dart450/webproject/

Whenever you edit the files you can just reload the page in your browser to see the changes.

Auto-reindent

Note: The CDA computers automatically delete your Atom preferences each night, so this will not work on CDA computers.

One thing that is extremely useful when writing code is to be able to automatically re-indent it so that you can more easily read it.

In Atom there is a command to do this, but it's a good idea to add a keyboard shortcut. To do this, we need to edit two files.

First, we edit the "Init Script" (on Mac you go to the menu Atom > Init Script..., on Windows you go to the menu File > Init Script...) and add this to the bottom (just cut and paste it in):

atom.commands.add 'atom-text-editor', 'custom:reformat', ->
    editor = atom.workspace.getActiveTextEditor();
    oldRanges = editor.getSelectedBufferRanges();
    editor.selectAll();
    atom.commands.dispatch(atom.views.getView(editor), 'editor:auto-indent')
    editor.setSelectedBufferRanges(oldRanges);

This sets up a sequence of commands to reindent all the code in the current window. (In fact, as you can see, it's a little more complicated, because it's taking into account the idea you might have some text already selected - so it saves your selection, then selects everything, reindents it, and then restores you selection!)

Second, we edit the "Keymap" (on Mac you go to the menu Atom > Keymap..., on Windows you go to the menu File > Keymap) and and this to the bottom (just cut and paste it in):

'atom-text-editor':
  'ctrl-shift-r': 'custom:reformat'

This sets up control + shift + R as the shortcut to reindent the current window.

You can change the shortcut if you want, of course! See Keymaps In-Depth for information.