ICS 314 Fall 2024

Readings "Passive" learning opportunities

This page collects together all of the “readings” associated with individual modules.

In this site, readings represent “passive” learning opportunities, as opposed to experiences, which represent “active” learning opportunities. In many courses, readings and experiences together constitute the “assignments”.

Module: ICS 314 PreGame

Guided tour of the PreGame module

Watch this short video to learn about the ICS 314 pregame experience.

Screencast 10 min

Module: Introduction

Guided tour of Morea course websites

How to use this website to succeed in ICS 314

Screencast 5 min

Guided tour of the Introduction module

Introducing the introduction.

Screencast 9 min

Introduction to ICS 314

Goals, texts, prerequisites, and more

Screencast 15 min

Grading

How grades for this class will be determined

Laptop requirements

The hardware you need to succeed in software engineering

Athletic Software Engineering

An overview of Athletic Software Engineering and results from AY 2016-2017

WOD Weekly Rhythm

Course structure for learning by WODs

How to watch screencasts the smart way

There is an art to watching screencasts effectively. Here are some heuristics.

Teach yourself programming in 10 years

“Researchers have shown it takes about ten years to develop expertise in any of a wide variety of areas…”

How writing can advance your career as a developer

“I didn’t take a single English class to receive my undergraduate engineering degree. It’s a shame because writing has been arguably one of the most important skills I’ve had in my career as a software engineer and team leader.”

ICS 314 Syllabus

Basic information about the ICS 314

Rules of the WOD

WODs during first 10 weeks

Module: Professional Persona

Guided tour of the professional persona module

Why, what, how, and when you will learn about professional personas.

Screencast 4 min

Professional Persona

Concepts of a professional persona

screencast 10 min

Professional portfolio style guide

Guidelines for creating a usable and effective professional portfolio

Technical essay style guide

Guidelines for creating high quality technical essays

Module: Typescript 1: Basics

Guided tour of the Typescript 1 module

Why, what, how, and when you will learn about Typescript, Phase 1.

Screencast 2 min

JavaScript vs. TypeScript: What's the difference?

Why you want to learn Javascript first then Typescript

Screencast 2 min Short Article

Introduction to Typescript Playground

Quick introduction to the Typescript Playground environment

Screencast 5 min

ZE Javascript/Typescript Style Guide

Javascript/Typescript style guidelines for ICS 314

Reference

ES6: for-of, for-in

How to iterate over arrays and objects in ES6

Module: Open Source Software

Guided tour of the open source software module

Why, what, how, and when you will learn about open source software.

Screencast 5 min

Open Source Software

History of open source, licenses, prime directives, how to participate effectively

Screencast 14 min

Understanding Open Source Licensing

Short summary of copyright, copyleft, and the motivation for open source licenses.

Choose a (open source) license

Simple overview of several open sources licenses and their implications.

How to ask questions the smart way

The classic guide to how to participate in the open source community effectively

The three prime directives for open source development

Three simple rules for assessing the open source quality of your project.

The Cathedral and the Bazaar

“I anatomize a successful open-source project, fetchmail, that was run as a deliberate test of some surprising theories about software engineering suggested by the history of Linux.”

Optional

Research Update: Impact of the Ask Question Wizard

What happens when StackOverflow automates the process of asking Smart Questions

Optional

Ceci ñ'est pas une programme

Why you should not upload images of your code when asking for help.

Module: Typescript 2: Object orientation

Guided tour of the Javascript 2 module

Why, what, how, and when you will learn about object orientation in Javascript

Screencast 6 min

Object Orientation: Java vs. Javascript

An beginners guide to objects in Java and Javascript

Screencast 24 min

Typescript Handbook: Classes

Comprehensive reference on ES6 classes

Tutorial on ES6 classes (ExploringJS)

Comprehensive reference on ES6 classes

Tutorial on ES6 classes (Mozilla)

Introduction to classes, showing how they evolved from prior JS idioms

ES6: template strings

Use templates to simplify string construction

TypeScript: Template Literal Types

Use string templates create new string literal types

Module: Configuration management

Guided tour of the configuration management module

Why, what, how, and when you will learn about configuration management

Screencast 4 min

Introduction to version control and configuration management

Basic concepts of VC and CM, from rcs to cvs to svn to git

Screencast 15 min

Introduction to GitHub Desktop

How to use GitHub Desktop for this class

Screencast 20min

Introduction to GitHub Desktop, Part 2 (Branching and Merging)

Branching and merging with GitHub Desktop

Screencast 17min

Introduction to GitHub Desktop, Part 3 (Merge Conflicts)

Merge conflicts with GitHub Desktop

Screencast 17min

Local Repository Directory Path: No Spaces!

No spaces in the path to your local git repositories

Pro Git, Chapter 1

About version control, a short history of git, git basics

GitHub Basics

Signup, setup git, create a repo, fork a repo, be social, try git

Module: Typescript 3: Functional programming

Guided tour of the Typescript 3 module

Why, what, how, and when you will learn about functional programming in Typescript.

Screencast 6 min

Functional programming in Typescript

Understand the basics: how to use functions as values, functions as arguments, and functions as return values.

Screencast 32 min

Functional Programming Jargon

Know the terminology used in FP

Functional Programming in Typescript

Let’s see how we can combine functional programming and TypeScript to build highly reusable and maintainable software.

Module: Development Environments

Guided tour of the development environments module

Why, what, how, and when you will learn about development environments

Screencast 5 min

Introduction to Development Environments

ROI for IDEs, basic capabilities, our class standard IDE.

Screencast 13 min

How to install GitHub Copilot

Installation instructions for GitHub Copilot

Module: QA Part 1: Coding standards

Guided tour of the coding standards module

Why, what, how, and when you will learn about coding standards

Screencast 4 min

Introduction to coding standards

Why use coding standards, and how we will use them in this class

Screencast 10 min

JS/TS on the client vs on the server

JS/TS can be run on the server (your laptop) or on the client (your browser). Here’s how.

Screencast 15 min

Typescript coding standards

Typescript coding standards to observe in this class

ZE Javascript/Typescript Style Guide

Javascript/Typescript style guidelines for ICS 314

Reference

Symbolic Links in Windows 10

Handling user names with spaces in Windows 10.

Module: UI Design (Basics)

Guided tour of the UI Design (Basics) module

Why, what, how, and when you will learn about user interface design basics.

Screencast 5 min

UI Design Basics

Introduction to user interface design using HTML and CSS and supporting tools.

Screencast 11 min

Getting started with Google Web Fonts

How to use the Google Web Fonts API to add fonts to your web pages.

Ten Google WebFont Combinations

A hand-picked set of 10 title/text font combinations.

Chrome Developer Tools

Documentation for the developer tools associated with the Chrome browser.

Module: UI Design (Frameworks)

Guided tour of the UI Design (Frameworks) module

Why, what, how, and when you will learn about UI Design and framework support.

Screencast 6 min

UI Frameworks

Introduction to user interface frameworks.

Screencast 15 min

Bootstrap 5 Docs

Official Bootstrap 5 Documentation

Browser Color Pickers

How to use browser-based plugins to determine page colors.

Screencast 6 min

7 rules for creating gorgeous UI (Part 1)

A non-artsy primer in digital aesthetics.

7 rules for creating gorgeous UI (Part 2)

A guide to visual aesthetics, written by a nerd

Clean up your mess: A guide to visual design for everyone

If you’re like most people, you feel like a baby when it comes to visual design. You sometimes have a vague sense of what you want, but can’t articulate it or make it come about. All you can do is point and cry…

Optional

Bootstrap 5 Hello World

Quick start to using Bootstrap 5 with VSCode

Color Blocked Home Pages

A common design pattern for home pages

Spaces vs non spaces in CSS rules

What’s the difference between ‘.classA.classB’ and ‘.classA .classB’?

Introduction to GitHub Desktop, Part 2 (Branching and Merging)

Branching and merging with GitHub Desktop

Screencast 17min

freeCodeCamp Full Bootstrap 5 for Beginners

3 hour tutorial

Module: UI Design (React)

Guided tour of the React module

Why, what, how, and when you will learn about React

Screencast 3 min

React Docs

React official reference documentation

Bootstrap 5/React Docs

Official Bootstrap 5/React documentation

Nextjs Docs

Nextjs official reference documentation

Module: Databases (PostgreSQL)

PostgreSQL Documentation

PostgreSQL Official Documentation

Prisma/docs

Prisma Official Documentation

W3 Schools SQL Tutorial

Read through the w3schools SQL Tutorial

Module: Application Design (Nextjs), Part 1

Introduction to Web Application Frameworks

Ruby on Rails, Spring, Meteor, Request-Response, AJAX, LAMP, MEAN

Screencast 27 min

Reading Next.js Project Structure

Standard Next.js project structure.

Module: Application Design (Nextjs), Part 2

nextjs-application-template

Template for quickly starting Nextjs development projects.

Screencasts 5 min 15 min 23 min 25 min 10 min

nextjs-example-form

Illustrates simple form processing with React and React Hook Form

Screencast 35 min

Bowfolios

Illustrates a simple, final project style web application

Screencasts 5 min 14 min 22 min 20 min

Module: Agile Project Management

Guided tour of the agile project management module

Why, what, how, and when you will learn about agile project management

Screencast 3 min

Introduction to common software development processes

Waterfall, Spiral, CMM, Agile…

Screencast 14 min

Introduction to issue driven project management

The agile software process to be practiced in this class

Screencast 14 min

IDPM Guidelines

Guidelines for the IDPM agile software process

GitHub hosting project management guidelines

Guidelines for using GitHub effectively for project hosting

Mastering Issues

GitHub documentation on their Issue manager

GitHub documentation

Tracking the progress of your work with Project

GitHub documentation on their Projects tool

GitHub documentation

GitHub Issue Guidelines

Guidelines for GitHub Issue Specification

IDPM AntiPatterns

Don’t use forks, pull requests, or rebasing with IDPM

IDPM Effort estimation

Effort estimation for IDPM

Module: Deployment

How to deploy software

Deployment goals. Preparation, branching, controlling, and monitoring deployments.

Deploy a Nextjs app to Vercel

Deploy nextjs-application-template to Vercel

Connecting to a Vercel Postgresql database using pgAdmin

Connect to a Vercel Postgresql database using pgAdmin

Module: Testing

Introduction to testing

Motivation, unit, integration, and acceptance testing, and continuous integration

Screencast 32 min

Playwright: Reliable End-to-End Testing for Modern Web Apps

Getting started guide to Playwright

Playwright: VSCode Extension

Installing Playwright VSCode Extension

The testing pyramid should look more like a crab

It’s time to fully embrace end-to-end (acceptance) testing

Optional

Module: Ethics in Software Engineering

Guided tour of the ethics module

Overview of the ethics module

Screencast 3 min

What do we mean when we talk about ethics?

Definition of ethics, ethics in software engineering, personal vs. professional ethics

Foundations: 1

ACM Code of Ethics

This Code identifies a commitment to ethical professional conduct through 24 statements of personal responsibility.

ACM Software Engineering Code of Ethics and Professional Practice

This Code contains eight Principles related to the behavior of and decisions made by professional software engineers.

Module: Design Patterns

Guided tour of the design patterns module

Overview of the design patterns module

Screencast 3 min

Introduction to design patterns

What are design patterns? Why are they useful?

Screencast 20 min

Design pattern examples in Bowfolios

A walkthrough of Bowfolios, illustrating its design patterns

Screencast 22 min

React and Javascript Design Patterns

Patterns.dev is a free book on design patterns and component patterns for building powerful web apps with vanilla JavaScript and React.

Module: Final Project

Software Engineering Requirements

General process and product requirements

Project: Campus Jam

Requirements for a UHM music jam locator

Project: Club Hub

Requirements for a UHM Student Organization directory application

Project: Manoa Flea Market

Requirements for a UHM Flea Market application

Project: Manoa Munchies

Requirements for a UHM Munchies application

Project: Study Buddy

Requirements for a UHM Study Buddy application

Project: Toaster Oven Lovin'

Requirements for a UHM recipe application

Project: Company Connector

Requirements for a UHM employment locator

Module: HACC

HACC Home Page

The Hawaii Annual Code Challenge Home Page

HACC 2016

Reflections on my experience participating in the 2016 HACC

HACC 2017

ICS student teams place 1st and 2nd at HACC 2017

HACC 2018

ICS student teams place 1st, 2nd, and 4th in HACC 2018

HACC 2019

ICS student teams place 1st and 3rd in HACC 2019

HACC 2020

ICS student teams sweep HACC 2020 (1st, 2nd 3rd)

HACC 2021

ICS student teams place 1st and 2nd in HACC 2021

HACC 2022

ICS student teams sweep HACC 2022 (1st, 2nd, 3rd)

HACC 2023

ICS student teams sweep HACC 2023 (1st, 2nd, 3rd)

HACC Tips

How to win the HACC