COMP-496: Ethical Web Development

Course Description

This course introduces modern best practices for developing a more humane web. Students will explore the ethical ramifications behind various software decisions, including web performance, security, and user/developer experience. The course simulates a team-based working environment in which students will build individual portfolios exhibiting job-ready, front-end skills. In the process, students will learn to leverage modern JavaScript, CSS, Markdown, Git, intrinsic design principles, and static site generation. No prior coding experience necessary.

Course Rationale

In keeping with Olivet’s mission, this course provides a vital space for the University to explore “web development with a Christian purpose” together. Other courses in the curriculum are designed specifically for advanced computer science students who have met several prerequisites. By lowering the barrier to entry, however, this course invites students from a variety of fields to learn with and from one another. Furthermore, by focusing on the ethical ramifications behind various software decisions, students may better advocate for justice along their respective career paths.

Course Aims and Outcomes

Course Aims

The primary goal of this course is to explore the question, How should we make the Web? Too many who use the Internet know too little about how it works. Worse, many who do know how the Internet works take advantage of those who know less—and with little personal consequence. Profiteering, surveillance, and malicious intent abound online. As aspiring computer scientists, entrepreneurs, business leaders, content creators, and users of the Web in general, what can we do to ensure the otherwise worthwhile opportunities the Web provides do not simultaneously encourage the violation of users’ privacy, safety, or other rights?

In addition to acquiring and improving upon basic coding skills, students will shape a personal philosophy of web development. With these skills and principles in hand, students will be better prepared to lead projects and companies in making the Web a more just space. None of us has any business learning to make the Web if we are not learning to make it better.

Specific Learning Outcomes

By the end of this course, students will:

• Write semantic, accessible, and performant HTML, CSS, and JavaScript
• Leverage distributed version control systems and static site generators
• Apply principles of Jamstack, mobile-first, and documentation-driven development
• Compare licensing practices for creative works
• Contribute to a class-led open source software project
• Build a personal online portfolio

Format and Procedures

Class Session Format

Each two-and-a-half-hour class session comprises five thirty-minute timetables: twenty-five minutes of work followed by a five-minute break. Each timetable is dedicated either to a brief lecture, discussion topic, tutorial, in-class project, or other task. By allowing for these periodic breaks, the instructor otherwise expects students’ full participation and undivided attention.

The first half of the semester focuses on basic language training and design principles. After Spring Break, the semester shifts to a whole-class, team-based software project.

Electronic Equipment Policy

Except in emergencies, students should silence and refrain from using mobile phones, personal computers, tablets, and other electronic devices without the professor’s invitation during class. While in session, workstations may only be used for material related to this course. In turn, the professor’s workstation can observe, gain access to, and project the screen contents for each student’s workstation. The professor reserves the right to enforce these guidelines at any time.

Assignment Policy

Submission Process

Unless otherwise instructed, students will follow a two-step process for submitting code samples for grading.

1. Push code sample assignments to the relevant GitLab project repository
2. Post a link to the GitLab commit in the corresponding assignment in Canvas

Style Guidelines

Each student is responsible for submitting grammatically correct work. All written assignments must follow the Chicago Manual of Style and Merriam-Webster’s Collegiate Dictionary as well as any templates and supplements distributed by the professor for style, formatting, grammar, mechanics, and spelling. In turn, all code samples and issue posts must follow the relevant coding standards and collaboration guidelines in the course GitLab project repository. Students are expected to use gender-inclusive, gender-neutral, and other inclusive forms of language whether speaking or writing. When in doubt, students should consult the professor.

Late Assignments

Any assignment a student fails to submit by the time it is due will automatically receive a grade reduction of fifty percentage points. Late assignments will be reduced an additional ten percent for each successive day that assignment is late. No assignment will be accepted after 4:00 p.m. on the final day of classes. Graduating seniors must likewise make arrangements to submit all work as instructed by the Office of the Registrar.

Professor’s Assumptions

While this course does not require any prior coding experience, the professor assumes each student, by registering for this course, (a) comes motivated to learn and improve upon all skills necessary throughout the semester; and (b) is comfortable making and troubleshooting mistakes in class. To that end, students should be prepared to allocate four to eight hours per week outside of class to complete readings, tutorials, and other assignments, as is typical of a two-credit-hour course. The work for a given session may not require that entire time allotment. The rapid pace and scope of this course, however, may require a student to complete additional research and tutorials outside of class. In any case, the professor aims to create a charitable and justifiably challenging learning environment for each student. Programming is hard! Students are welcome to work ahead. And students should not hesitate to ask the professor and other classmates for assistance.

Course Requirements

Students will:

• Attend all class sessions
• Read, listen to, and view all written, audio, and video assignments
• Participate fully in class discussions
• Complete all assigned in- and out-of-class tutorials
• Complete all portfolio assignments

Course Materials

Supplies

Students are expected to bring either (a) paper and a writing utensil or (b) a tablet and stylus to class.

Although desktop and laptop computers are useful machines, they typically are not suitable for spatial reasoning and higher-order thinking, particularly the facilities needed in the planning phases of software development. Furthermore, the limited desktop space around classroom workstations is not conducive to other electronic equipment.

Accounts and Subscriptions

In lieu of a formal textbook, students are required to purchase the complete set of “Vanilla JavaScript Pocket Guides” by Chris Ferdinandi (https://vanillajsguides.com/complete-set/). The professor has arranged for a special discount code with the author. Prior to purchase, students must contact the professor directly to receive the discount.

Students must also maintain a personal GitLab account for completing assignments (https://gitlab.com/). Those students who do not have a GitLab account will create one during the first class session.

Other Required and Supplemental Materials

All other required readings, audio files, or videos are free. Some publishers may require e-mail validation from the student before granting access.

The professor will include external URLs and other bibliographic information for all required and supplemental online materials in the references section of this syllabus or in Canvas modules for the relevant class session.

Recommended Textbooks

For those interested in more textbook-like resources, students are encouraged to purchase the following.

Attendance Policy

Students should arrive promptly for each class session, sign in to a workstation, and be prepared to follow the professor’s instructions at the start of class.

Bearing in mind that this course meets once per week and for a total of thirteen class sessions, the following guidelines for absences apply in accordance with the University’s Class Attendance Policy.¹

• Each unexcused absence will automatically result in a loss of ten percentage points from the student’s final grade.
• At the professor’s discretion and in consultation with the department chair and Vice President of Academic Affairs, a student with three absences may be disqualified from receiving credit for the course.
• A student with more than three unexcused absences will definitely be disqualified from receiving credit.
• Excused absences are not penalized, but students must report them when they occur in order to be excused.
• Students receiving educational leniency for an absence will be marked as present.
• Students missing class for any reason remain personally responsible for submitting all assignments on time.

Participation Policy

Participation accounts for at least fifteen percent of the student’s final grade. Although students mostly will be seated at workstations during class, each student should be prepared, nonetheless, to respond appropriately to any and all questions and requests from the professor as well as any discussion prompts and other in-class assignments. The nature of the material further requires students to devise creative solutions to inexact problems. The professor, therefore, reserves the right to award or reduce any student’s final grade based on the quality of that student’s in-class participation throughout the term.

Vanilla JavaScript Projects

Students must complete all eight projects from Chris Ferdinandi’s “Vanilla JavaScript Pocket Guides.” Students also must complete a minimum of nine of the project ideas listed at https://learnvanillajs.com/projects/.

For extra credit, students may complete as many as eleven additional projects from the idea list (a maximum of two per week following Spring Break). Each extra credit project is eligible for up to five points (i.e., eleven projects at two points each equals a maximum of fifty-five points of extra credit, or 5.5% of the final grade). Note that the “Accordion” project idea is ineligible since it is already included among the Pocket Guides projects.

Portfolio Project

Students will contribute to a personal portfolio project throughout the term. The professor will grade contributions individually as they are made. All other portions of the portfolio will be assessed at the end of the term.

Grading Procedures

The professor will maintain a record of attendance and scholarship for each student. A report of the student’s class standing is given at the close of the semester. The following percentages are used to calculate final letter grades.

The professor will distribute a rubric for each assignment as relevant material is introduced. Assignments will be eligible for the following point values.

Statement of Academic Integrity

Seeking after truth is at the heart of an education at a Christian university like Olivet. ONU expects students to be truthful in all areas of life, including the academic arena. Those who engage in any form of academic dishonesty value their own gain more than their desire to seek truth; consequently, their behavior is incompatible with the goals and objectives of the University. Such dishonesty takes the form of cheating, plagiarism, or falsification. Specific examples include, but are not limited to:

• Submitting another’s work as one’s own or allowing others to submit one’s work as though it were theirs.
• Failing to properly acknowledge authorities quoted, cited, or consulted in the preparation of oral or written work. All work submitted by students must represent their original work. Outside sources used as references should reveal the name and source and the extent to which the source is used.
• Tampering with experimental data to obtain a “desired” result or creating results for experiments not conducted.
• Lying or otherwise deceiving university personnel about academic matters.
• Falsifying college records, forms, or other documents.
• Students who knowingly assist another in dishonest behavior are held equally responsible.

—University Catalog²

Learning Support Services

Olivet Nazarene University welcomes students with disabilities and is committed to complying with laws regarding equal opportunity for students with disabilities. Qualified individuals who have a disability will not be excluded from participation in, denied the benefits of, or be subjected to discrimination in connection with the services, programs, or activities offered by ONU. These prohibitions against discrimination apply not only to the University’s academic programs but also to other programs and services at the University such as financial aid, housing, student employment, athletics, counseling and placement services, and extracurricular opportunities.

The Office of Learning Support Services at Olivet Nazarene University is dedicated to supporting the University’s efforts toward accessibility and inclusion for students with disabilities. This is accomplished through collaboration, advocacy, education, and accommodation. The Office of Learning Support Services works with students on an individual, case-by-case basis determining appropriate, reasonable accommodations to promote the student’s learning, growth, development, and success. Those with questions should contact the office of Learning Support Services at lss@olivet.edu.

—University Catalog³

Tentative Schedule

Session 1

• Hypertext Markup Language (HTML) and Accessibility
• Cascading Style Sheets (CSS) Syntax, Cascade, and Box Model
• Free and Open Source Software (FOSS)
• Git: Command Line Interface (CLI) and GitLab

Session 2

• Git: Issues and Documentation-Driven Development
• CSS: Styling Text
• HTML: Multimedia and Hypertext Transfer Protocol (HTTP)
• CSS: Styling Images
• HTML: Tables and Data Lists

Session 3

• HTML and CSS Documentation
• CSS: Layouts, Intrinsic Design, and Mobile-First Development
• CSS: Custom Properties and Object-Oriented CSS (OOCSS)
• HTML: Forms and Data Privacy
• Debugging HTML and CSS

Session 4

• JavaScript: Document Object Model (DOM) Manipulation
• JavaScript: Strings and Numbers
• JavaScript: Arrays and Objects
• JavaScript: Variables, Functions, and Scope
• JavaScript: DOM Injection and Traversal

Session 5

• Browser Storage and the General Data Protection Regulation (guest speaker): Paul D. McGrady, Taft Stettinius & Hollister, LLP
• JavaScript: Documentation, Debugging, and Refactoring
• JavaScript: Application Programming Interfaces (API) and JavaScript Object Notation (JSON)
• Jamstack: Node.js and Eleventy Static Site Generator
• Jamstack: Markdown and Front Matter

Session 6

• Modern Agile (guest speaker): Tim Ottinger, Industrial Logic
• JavaScript: Plugins and Code Reuse
• JavaScript: Web Apps and Working with Stateful Data
• Jamstack: Organizing the Code Base
• Transitioning to In-Class Project

Session 7

• Cybersecurity (guest speaker): Prof. Jeffrey Rice, Program Director for Cybersecurity
• Favicons
• Metadata

Session 8

• Humane Documentation
• Web Typography

Session 9

• Environment Variables
• Internationalization (i18n) and Localization (L10n)

Session 10

• Scalable Vector Graphics (SVG)

Session 11

• Digging Deeper into CSS Grid

Session 12

• Progressive Web Apps

Session 13

• The Indie Web

Final Session

• Portfolio Project Presentations

Notes

1. ^ Olivet Nazarene University, “Class Attendance Policy,” in Catalog 2019–2020, http://catalog.olivet.edu/content.php?catoid=7&navoid=408#Class_Attendance_Policy.
2. ^ Olivet, “Statement of Academic Integrity,” in Catalog, http://catalog.olivet.edu/content.php?catoid=7&navoid=408#academic-integrity.
3. ^ Olivet, “Learning Support Services,” in Catalog, http://catalog.olivet.edu/content.php?catoid=7&navoid=408#learning_support_services.