Tips and Tricks

Project Folders

Each of your assignments should be placed in your server in folders named "assignment1", "assignment2", etc. This way, when we go to grade projects, we can just head to yourdomain.mynmi.new/assignment1 and not have to hunt around for differently-named projects.

Additionally, each of your project folders 1 should contain three folders: css, img, and js. Put you CSS files in css, your images in img, and your Javascript in js; your HTML goes in the main project folder.

Naming Files

In HTML (and CSS, and JS, for that matter), file names are case sensitive, meaning that File.html and file.html are two different files.

You also should avoid spaces and most punctuation. Even though Finder will handle these just fine, they might cause some problems with certain OSes and web browsers.

Finally, there's one magic file name in HTML: index.html. In any given folder, a web browser will first look for and open index.html. This means that if you point a web browser to example.mynmi.net, the browser will check to see if there's a file at example.mynmi.net/index.html, and if there is, it'll open it.

Why does this matter? For all of your assignments 2 for this class, be sure to name the main page of each project index.html.

Indenting Code

Developers will get into huge arguments about how, exactly, you should do this, but the essential thing is that whether you're writing HTML or CSS, you consistently indent your code.

Why? To save your future self from misery. When it comes time to find an error, your life will be infinitely easier if all your work is clearly and consistently indented.


  1. Except WordPress—WordPress creates its own very specific folder structure

  2. Except for anything involving WordPress—it takes care of this stuff for you

Who knows what'll go here?

Who knows what will go on the blog for this site? A changelog? Fun features? We'll just have to wait and see.

Mostly, I just wrote this post so that there'd be something here if you clicked on blog.

How to use this site

Hi there!

This site is the companion 1 for NMIX 4110, New Media Production, taught in the New Media Institute at the University of Georgia.

If you need a pdf to view with your e-reader, click the Print Friendly button at the bottom of a given lesson. Then click pdf and choose the option to   download a pdf file.

Class syllabi are available at the NMI website.


  1. Cool word origin: companion comes from the Latin com (together with) +  panis (bread), so a companion is literally someone who you share bread with.

How to use a Mac

Even if you've been using a Mac for a while, chances are you can learn to use it more effectively and efficiently1.

Initial Set-up

  • Enable right-click - You'll work so much more quickly with this enabled. Go to: System Preferences > Mouse / Trackpad > Secondary Click.
  • Set up Hot Corners - This is one of the biggies for taking advantage of all the drag and drop niceties the Mac offers. Go to: System Preferences > Mission Control > Hot Corners. I set the bottom-left corner to Mission Control and the bottom-right corner to Desktop.
  • Set up DropBox - If you already have an account, add it to your classroom computer. If not, create an account here.
  • Set up Finder as God intended - Your Finder window should look like this:Choose the third Finder view option and sort your files by name.You should also, for this class, click ⌘ + , and set "New Finder windows show..." to Dropbox.
  • Set you Dock to the left, shrink it down a bit, and remove (either by right-clicking or, more satisfyingly, by clicking and dragging toward the middle of your screen until a dust cloud appears) any applications you won't be using every day.

Keyboard Shortcuts

You must must must must must learn to use keyboard shortcuts to use a computer at all efficiently. You'll have to force yourself to do this at first, but once you learn these, you'll wonder how you lived without them.

System-level

  • ⌘ + C - Copy
  • ⌘ + V - Paste
  • ⌘ + X - Cut
  • ⌘ + S - Save
  • ⌘ + Q - Quit the current application
  • Shift (Hold down) + Arrow - Select text
  • ⌘ + Shift (Hold down both) + Arrow - Select text until end of line
  • ⌘ + Tab - Alternate between current and previous applications
  • ⌘ (Hold down) + Tab - Select among open all applications
  • ⌘ + ` (To the left of the 1 key) - Switch among open windows within an application
  • ⌘ + Space - Open Spotlight (Quickly find and open applications and files)
  • ⌘ + Option + Escape - Force Quit (Brings up a dialog that lets you force a frozen application to quit / restart)

Google Chrome

  • ⌘ + T - Create a new tab
  • ⌘ + R - Refresh the current tab
  • ⌘ + Shift + T - Reopen closed tabs
  • ⌘ + 1, ⌘ + 2, etc. - Switch to the

Keychain Access

Using Spotlight (⌘ + Space), open Keychain Access to securely view any passwords you've stored on your computer. Click the checkbox to "Show password" and then enter your user password (the one you use to log on to the computer) to display the password.


  1. Heck, even I can still learn to use a Mac more effectively and efficiently

Course Tools

This course will go much more smoothly if we all use the same tools.

Browser

  • Google Chrome - Don't use Safari. Firefox is okay, if you have specific reasons you want to use it. But for simplicity's sake, let's all use Chrome.

Text Editor

  • Brackets - A great open source text editor from Adobe (weird, I know). Most relevantly for this class, includes syntax highlighting and good preview tools, but a lot of other nice stuff, too.

FTP

  • Cyberduck - Weirdly, you pay for this tool in the Mac App Store, but you can still download it for free straight from their website.

Image Editing

  • Photoshop - Still the industry standard, but fairly expensive to install on your own computer. If you want to use it on your own machine, the Creative Cloud Photography plan ($10/month) is probably your best bet.
  • Pixelmator - A strong challenger to Photoshop. Not as full featured, but more than you'll need for this class.
  • Preview.app - You can resize and lightly edit images with this built-in Mac app.

File Sync

  • Dropbox - There are other file syncing services out there, and if you're comfortable / already invested in one of them, go for it. Otherwise, Dropbox really is pretty great.

Extra Resources

  • Codrops- Really cool and extensive CSS reference with important properties and info.