<info 340/>

Client-Side (Web) Development

Joel Ross
Summer 2024

About Prof Ross

Associate Teaching Professor

Email joelross@uw.edu        
Zoom https://washington.zoom.us/my/joelross

Your TAs!

Syllabus

https://canvas.uw.edu/courses/1729863​

Assignments

Problem Sets

  • Directed practice problems to make sure you can apply the material in code.
  • Auto-graded on completion basis
  • Due 1-2 times a week to keep you moving
    • 2-day grace period
    • DO NOT FALL BEHIND ON THESE!

Group Project

  • Develop an interactive web app of your own choosing to creatively apply your new skills
  • Completed in small teams (up to 4)
  • Deliverables throughout the quarter

Project Deliverables

  • Project Proposal

    • Tell us what you're going to do!
       

  • Draft 1 (Static Mockup)

    • Do all of the HTML/CSS design work for the whole thing
       

  • Draft 2 (React)

    • Redo mockup in React (copy-paste a lot)
    • add basic interactivity (~1 small feature)
       

  • Final Version

    • Final complete version!

Deadlines

  • Problem Sets
    • Can turn in 2 days late at no penalty
    • After 2 days, earn up to 80% credit
    • Treat these as having "hard" deadlines - don't put them off!
       
  • ​Project Deliverables
    • ​Proposal may be revised until correct
    • Drafts have hard deadlines, with no late credit available
    • Final has hard deadline, with no late credit available
    • Iterating: fixing problems in subsequent drafts can boost earlier scores by up to 20%

We will also provide accommodations for illnesses/etc.

I hereby authorize you to seek help learning from others, and to help others learn in return.

You are expected to develop projects by yourself, from scratch. Using pre-written examples or code from the internet or a generator will not be sufficient to earn credit.

You will not earn credit for code you do not write yourself.

AI Policy (Summary)

While the task maybe to implement a program, the work you need to do for this class is to learn the material. AI can help you with the task, it cannot help you with the work. recognition != recall

  • ❌ Don't use AI tools for problem sets
  • ✅ Use AI tools to support your project work
    • ✅ Scaffolding, code templates, etc 
    • ✅ Finding and solving bugs
    • ❌ Generating entire features for you
  • Cite your usage of these tools:
    1. Briefly in the code or the git commit message
    2. In a statement submitted with project deliverables (part of the peer evaluation)

For full details, see the syllabus on Canvas

Action Items!

  • Do the "Start Here" steps on Canvas

  • Start through week 1's tasks!

  • Watch for and respond to messages about forming groups

Development Tools:
npm and Jest

Joel Ross

npm

A command line package manager ("app store") that comes with Node.js. used to manage external libraries and applications.

  1. npm install -g PACKAGE_NAME to globally (whole computer) install command line programs.

    • Or can use npx PACKAGE_NAME to download and run without installing
  2. npm install PACKAGE_NAME to locally (per project) install a new code package and record it in the package.json file.
  3. npm install to locally install all of the package.json listed dependencies for a project.

Grading Your Work

Exercises contain test suites that you can use to check your work. Run these tests using the Jest test framework:

Optional: install jest globally (or just use npx)

npm install -g jest

Run a particular test suite (e.g., for problem-name.spec.js):

npx jest problem-name
   # or if installed:
jest problem-name

Install the dependencies listed in package.json

# must be in project dir
npm install

Debug code using the browser, not using Jest!

Use Jest only for grading
(once everything is done)

Continuous Integration

Problem Set repositories are set up to automatically run the Jest grader when pushed to GitHub.

GitHub checks per commit, on the entire repo--not on individual problem folders. You will only see the green check when the entire set is completed!