IAT-339: 04 Meet Your Toolkit

IAT-339: 04 Meet Your Toolkit — A slide deck

Meet Your Toolkit

Lecture outline

Covered this week:

  • Debugging and troubleshooting code
  • Git
  • P02 introduction

Lecture slides will be made available on the day of the lecture.

A toy Batman utility belt
Meet your toolkit

Dev Environment

Adding to the toolkit

  • Coding application
  • FTP Client

File Structure

Keep things clear

Things to ensure:

  • Use a descriptive naming convention: index.html, product-apple-detail.html
  • Avoid naming based on generics: page01.html, page02.html, page523.html
  • No spaces in file or folder names: use_underscores.html or use-dashes.html
  • Think categorically: logo-siat.jpg, instead of siat.jpg

Dev Environment

Adding to the toolkit

  • Coding application
  • FTP client
  • Developer's tools + validators

Bugs

When we encounter a point where what we expect to happen and what has actually happened don't match; we have encountered a bug. This usually means stepping back through what you did to determine what is not behaving as you expect it to.

Debugging

I recommend starting with:

  1. What is the code supposed to do? Why?
  2. What did the code do?
  3. If you can solve for the why the code did what it did, you have found your bug.

Dev Environment

Adding to the toolkit

  • Coding application
  • FTP client
  • Developer's tools + validators
  • Photo editor/compressor

Save for Web

Images should be sized and compressed appropriately for web distribution. Some suggested tools:

IAT-339 — P02: Company

P02 Expectations

Please note:

  • Both team members must contribute code
  • Both team members must use git
  • Absolutely no HTML/CSS frameworks are permitted
  • Javascript libraries will be permitted with citations

Working as a Team

The horror, the HORROR!

Come to an agreement on:

  • Naming conventions
  • Work towards common code
  • Maintaining files
  • Both do the code

Dev Environment

Adding to the toolkit

  • Coding application
  • FTP client
  • Developer's tools + validators
  • Photo editor/compressor
  • Git client

Enter Git

Your friend in code tracking

Andrew does some doodling here....

An explanation for git done through sketching
View this image full-size.

Break-time

Runaway! Runaway...

See you in ten minutes, though if you haven't already please install GitKraken (Mac/PC).

P02

Commence the coding!

There are three items for this week for you to do. Please note the one that comes first...

  1. Setting up your dev environment
  2. Building out your sitemap
  3. Brand component coding

This week's labs

The low-down

  • More on Git
  • P02 Introduction

Next week

Devices and Their Fickle Owners

  • Reading Quiz
  • More on responsive vs adaptive
  • Web design patterns
  • Responsive images

Reading Quiz

Things to note

  • You will have 30 minutes
  • You can complete it on a computer, or on paper
  • It will be open book
  • It will use any readings/lectures upto and including next week's
  • There will be 1-3 short answer questions.

Next reading

"Introduction / Responsible Design" from Responsible Responsive Design by Scott Jehl

Contacting Andrew

Your Lecturer

Reachable at:

  • Office hours — Mondays from 8:30-9:20am and Thursdays from 8:30-9:20am at the Surrey campus mezzanine.
  • ac.ufs@h_werdna
1/1