ICS 314, Fall 2023

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 5 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 6 min

Introduction to ICS 314

Goals, texts, prerequisites, and more

Screencast 12 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 3 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

ICS Portfolios

Hundreds of portfolios created by UH students just like you.

TA Portfolio

Get to know your TA from their professional portfolio

Module: Javascript 1: Basics

Guided tour of the Javascript 1 module

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

Screencast 6 min

7 reasons why Javascript is better than Java and C++

Why you want to learn Javascript (even if you don’t do web app development)

Screencast 13 min

Introduction to JSFiddle

Quick introduction to the JSFiddle Javascript environment

Screencast 8 min

AirBnB Javascript Style Guide

Javascript 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: Javascript 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

Tutorial on ES6 classes (Vegibit)

Tutorial on JS 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

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: Javascript 3: Functional programming

Guided tour of the Javascript 3 module

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

Screencast 6 min

Functional programming in Javascript

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

Screencast 32 min

Stop writing for loops. Start using underscore.

Make your code more compact and understandable with Underscore.js

Underscore home page

Reference guide to underscore functions

Use the source, Luke!

Annotated source code for Underscore. Highly readable.

Optional

Functional Programming Jargon

Know the terminology used in FP

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

Diagnose IntelliJ startup delays

Hints for improving performance if needed

Optional

Configuring IntelliJ IDEA for MacOS

Configuring your Mac so that IntelliJ keyboard shortcuts work as advertised.

Mac users only

ICS Code Style for IntelliJ IDEA

An XML file containing code style preferences for this class.

How to install GitHub Copilot

Installation instructions for GitHub Copilot

IntelliJ Brainscape Flashcards

Online IntelliJ keybinding flashcards made by Blake Wallick

Optional

Top 15 IntelliJ IDEA shortcuts

Highly useful keyboard shortcuts.

JetBrains Screencast 8 min

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 on the client vs on the server

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

Screencast 15 min

Javascript coding standards

Javascript coding standards to observe in this class

AirBnB Javascript Style Guide

Javascript 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 IntelliJ

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 7 min

React Docs

React official reference documentation

Bootstrap 5/React Docs

Official Bootstrap 5/React documentation

Meteor, Node, and NPM tips

Trouble shooting for Meteor, Node, and NPM

Module: Databases (MongoDB)

Guided tour of the Mongo module

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

Screencast 7 min

Module: Application Design (Meteor), Part 1

Guided tour of the Meteor, Part 1 module

Why, what, how, and when you will learn about Meteor, Part 1

Screencast 5 min

Introduction to Web Application Frameworks

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

Screencast 27 min

Meteor Fundamentals

What makes Meteor different? What concepts do I need to understand as a newbie?

Screencast 30 min

Meteor for Newbies: Application Structure

How to organize your files to make a Meteor application

Screencast 19 min

Tips for Meteor

Advice from students on how to improve your Meteor experience

Meteor debugging: Named vs. Default Exports

Getting named vs. default exports right, and what happens when they go wrong

Screencast 20 min

Meteor Q&A (Fall 2020)

Responses to student questions in Fall 2020.

Module: Application Design (Meteor), Part 2

Guided tour of the Meteor (Part 2) module

Why, what, how, and when you will learn about Meteor (Part 2)

Screencast 5 min

meteor-application-template-react

Template for quickly starting Meteor development projects.

Screencasts 5 min 15 min 23 min 25 min 10 min

meteor-example-form-react

Illustrates simple form processing with React and Uniforms

Screencast 35 min

Bowfolios

Illustrates a simple, final project style web application

Screencasts 5 min 14 min 22 min 20 min

React Uniforms

A package to simplify form management in React and meteor

Meteor Guide: Introduction

About Meteor

Reference

Meteor Guide: Code Style

Suggested style guidelines for your code

Reference

Meteor Guide: Collections and Schemas

How to define, use, and maintain MongoDB collections in Meteor.

Reference

Meteor Guide: Publications and Data Loading

How and where to load data in your Meteor app using publications and subscriptions.

Reference

Meteor debugging: Named vs. Default Exports

Getting named vs. default exports right, and what happens when they go wrong

Screencast 20 min

Understanding data in Meteor in development mode

Connecting to and manipulating server-side and client-side data during development

Screencast 13 min

Refreshing the data in development and deployment

How to clear and reinitialize the database.

Meteor Debugging Strategies

High level approaches for debugging a Meteor application

Module: Application Design (Meteor), Part 3

Guided tour of the Meteor (Part 3) module

Why, what, how, and when you will learn about Meteor (Part 3)

Screencast 5 min

Meteor Debugging Strategies

High level approaches for debugging a Meteor application

AMA: Branden Ogata on Meteor

Branden, former ICS 314 TA, answers your questions on Meteor

Ask Me Anything

Meteor Guide: Introduction

About Meteor

Reference

Meteor Guide: Code Style

Suggested style guidelines for your code

Reference

Meteor Guide: Collections and Schemas

How to define, use, and maintain MongoDB collections in Meteor.

Reference

Meteor Guide: Publications and Data Loading

How and where to load data in your Meteor app using publications and subscriptions.

Reference

Meteor DevTools Evolved

An essential Chrome plugin for Meteor development

Screencast 12 min

Final Project Brainstorm

Develop a Final Project idea

30 Oct 09:00 AM

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

Module: Deployment

Guided tour of the Deployment module

What’s in store for this module.

Screencast 5 min

How to deploy software

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

Deploy a Meteor app to Digital Ocean

Deploy using Meteor Up to Digital Ocean

Monitor MongoDB at Digital Ocean

Inspect your MongoDB database on Digital Ocean using Robo3T

Meteor Application Performance Monitoring

Use Monti APM for development and production

Custom domain names for Digital Ocean

How set up a custom domain name for your Meteor application

Setup HTTPS

Use Meteor Up to set up HTTPS on Digital Ocean

Refreshing the data in development and deployment

How to clear and reinitialize the database.

Module: Testing

Guided tour of the testing module

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

Screencast 3 min

Introduction to testing

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

Screencast 32 min

Introduction to acceptance testing in Bowfolios

How to use TestCafe to test the BowFolio system.

Screencast 25 min

Meteor Guide: Testing

How to test Meteor applications

Mocha: A Javascript Test Framework

Reference guide to Mocha

Chai: A Javascript Assertion Library

Reference guide to Chai

Test Cafe: A Javascript Acceptance Test Framework

Reference guide to TestCafe

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

Meteor mockup development tips

Common issues when creating your first application mockup

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 Tips

How to win the HACC