CS 257: Software Design

Spring 2018

Help

Samples

Class Notes

Thoughts on improving the course next time

Week 1

Two tools, a perspective, and a habit

• [Do right away] Accept the invitation to join our class Slack channel, and set up Slack so that you'll check it once a day for the term.
• [Do right away] Create a GitHub account (if you don't already have one) and post your GitHub account name to the appropriate Slack thread once you have an account. Instructions are provided in the "IntelliJ and git" assignment linked below.
• [Due 11:59PM 3/29] The tools: IntelliJ and git
• [Skim by 3/30] The perspective: User-centered design (UCD). The core idea here is very simple, but as you'll see from the Wikipedia article, it has accumulated a lot of formalism. Read enough to understand the core idea.
• [Skim by 4/2] The habit: Test-driven development (TDD). Ditto the comments on User-Centered Design.
• [Read by 4/2] Sections 1-6 and 21-22 from The Pragmatic Programmer. Bring to class a list of 3-5 ideas you find interesting or insightful or useful, and 1-2 ideas you disagree with or have questions about.

Week 1.5

Start learning vim or emacs in a terminal. Every programmer should know how to use one or both of these venerable editors. They're both old, extremely widely available, and very powerful.

• vi (pronounced VEE-EYE) dates back to the 1976, and is my editor of choice. Its modern versions are usually referred to as "vim" (for "vi improved", pronounced VIM). There are tons of tutorials, including a vim-learning game, a kind of gamelike tutorial, and lots of short introductions.
• emacs also originated in 1976, and is typically associated with the GNU Project. Though vim is powerful, emacs has greater aspirations, with its "e" standing for "extensible." You can work with emacs as just a text editor, but you can also use its extensions to make emacs be your IDE/home-base/terminal/.... I'm not an emacs user (I tried in the early 90s, and it hurt my left wrist, so I went back to vi), so I'm not expert at the huge variety of things you can do with it. But again, there are many, many tutorials on the subject, including the official GNU Emacs guided tour, this "absolute beginner's guide", etc.

Week 2

More TDD, debugging in an IDE, getting more comfortable with git

• [Due 11:59PM Tuesday 4/3] Autocomplete Phase 2: unit tests
• [Due 11:59PM Thursday 4/5] Autocomplete Phase 3: implementation
• [In class, Friday 4/6] Autocompleter Testing Extravaganza

Week 3

Code quality, HTTP APIs

• [By class on 4/9] In case you didn't get around to it earlier, read sections 21 (Design By Contract) and 22 (Dead Programs Tell No Lies) from The Pragmatic Programmer. Also, read section 23 (Assertive Programming).
• [By class on 4/9] Read pages 161-180 of High-Quality Routines from Code Complete, by Steve McConnell
• [By class on 4/11] Read The Commento, from Code Complete, by Steve McConnell
• [First part due 11:59PM 4/11, second part due 11:59PM 4/15] Using APIs

Week 4

git branching and workflows, usability

• [In class 4/16] Git branching lab. Nothing to hand in.
• [Read by 4/18] The Guiding Principles section (i.e. Chapters 1-5) of Steve Krug's Don't Make Me Think, Revisited (3rd edition)
• [Read by 4/18] Section 10 (Tracer Bullets) of The Pragmatic Programmer
• [Read now] Web Application: general description
• [Due 11:59PM 4/18 and in class 4/20] Web Application Phase 1: partners and data
• [Read by 4/20] The Wikipedia pages on User Stories and Requirements Elicitation. Both pages are short.

Week 5

The web application project: more git, API design, database design, flask

• [Due 11:59PM 4/22] Web Application Phase 2: data and user stories
• [Do this soon, nothing to hand in] Lab: PostgreSQL database
• [In class 4/23] Lab: git workflow
• [Due 11:59PM 4/24] Web Application Phase 3: API design
• [Due 11:59PM 4/27] Web Application Phase 4: database design and population
• [In class 4/25] Lab: Flask

Week 6

Midterm break, UI design, HTML, CSS Javascript

• [Due 11:59PM 5/4] Web Application Phase 5: API implementation
• Take a look at my GitHub repository for the course. It includes my most up-to-date versions of my sample programs for Flask and psycopg2, and will shortly have my full books/authors web application sample.
• Here are some profoundly ugly HTML/CSS examples that illustrate some basic HTML techniques.

Week 7

Javascript, and finishing the web applicaiton

• [Due 11:59PM 5/8] Web Application Phase 6: UI mockups
• [Due 11:59PM 5/15] Web Application Phase 7: the completed web application

Week 8

Usability & interaction design. JavaFX. Design patterns.

• [By class time Friday, 5/18] Read these excerpts from About Face 3: Essentials of Interaction Design by Alan Cooper, Robert Reimann, and David Cronin. It's about 75 pages total, so get started early. Be ready to talk about the main themes: user goals, mental models, excise and navigation, experience level (beginner/intermediate/expert), posture, etc.

Weeks 9, 10

MVC, final project, miscellaneous

• [Due 11:59PM Friday, 5/25] Final project, phase 1: description and architecture.
• [As soon as possible] Read about Design Patterns in general, and the Observer Pattern and the Model View Controller (MVC) pattern in particular. All of these topics are described by innumerable bloggers and youtubists out there (e.g. this MVC explanation is probably clearer than the Wikipedia page). We'll continue to discuss these ideas in the coming week.
• [Optional] If you want to (and have time to) go a little deeper into object-oriented design, try this tutorial, which does a pretty clear job of explaining the object-oriented design principles known as SOLID. Watch out, though--some of the earlier code in the tutorial (e.g. for the explanation of the "S" in "SOLID") has some serious design problems that are only fixed when considering the later principles.
• [Due 5:00PM Monday, 6/4] Final project, phase 2: the end!