Cybersecurity & Networking Seminar
It is difficult to get a man to understand something when his salary depends upon his not understanding it.
—Upton Sinclair, Oakland Tribune, December 11, 1934
The way to right wrongs is to turn the light of truth upon them.
—Ida B. Wells
- Olivet Nazarene University
- Martin D. Walker School of Engineering and Technology
- Computer Science and Emerging Technologies
- Spring 2020
- Meeting Location
- Reed Hall of Science 212
- Meeting Time
- Tuesdays 5:30 p.m.–8:00 p.m.
- Credit Hours
- Rev. Reuben L. Lillie, MM, MDiv
- Reed Hall of Science 324A
- Office Hours
- Tuesdays 10:00 a.m.–12:00 p.m. or by appointment
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
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:
- 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
Framed with an opening and closing devotional, 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.
Unless otherwise instructed, students will follow a two-step process for submitting code samples for grading.
- Push code sample assignments to the relevant GitLab project repository
- Post a link to the GitLab commit in the corresponding assignment in Canvas
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.
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.
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.
- 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
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
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.
For those interested in more textbook-like resources, students are encouraged to purchase the following.
Falbe, Tina, Kim Anderson, and Martin Michael Fredricksen. The Ethical Design Handbook. Freiburg, Germany: Smashing Media, 2020.
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, beginning with the opening devotional.
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.1
- 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 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.
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.
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.
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.
|Percentage Range||Letter Grade|
The professor will distribute a rubric for each assignment as relevant material is introduced. Assignments will be eligible for the following point values.
|Graded Item||Point Value|
|Vanilla JS Pocket Guide Projects (8 total)||80|
|Philosophy of Web Development—Rough Draft||75|
|Learn Vanilla JS Projects (9 minimum)||90|
|Philosophy of Web Development—Final Draft||75|
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.
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 firstname.lastname@example.org.
- 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
- Git: Issues and Documentation-Driven Development
- CSS: Styling Text
- HTML: Multimedia and Hypertext Transfer Protocol (HTTP)
- CSS: Styling Images
- HTML: Tables and Data Lists
- 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
- Browser Storage and the General Data Protection Regulation (guest speaker): Paul D. McGrady, Taft Stettinius & Hollister, LLP
- JAMstack: Node.js and Eleventy Static Site Generator
- JAMstack: Markdown and Front Matter
- Modern Agile (guest speaker): Tim Ottinger, Industrial Logic
- JAMstack: Organizing the Code Base
- Transitioning to In-Class Project
- Cybersecurity (guest speaker): Prof. Jeffrey Rice, Program Director for Cybersecurity
- Humane Documentation
- Web Typography
- Environment Variables
- Internationalization (i18n) and Localization (L10n)
- Scalable Vector Graphics (SVG)
- Digging Deeper into CSS Grid
- Progressive Web Apps
- The Indie Web
- Portfolio Project Presentations
The Topic of Ethics in Software and Web Development
Burns, Heather. “How GDPR Will Change The Way You Develop.” Smashing Magazine, February 27, 2018. https://www.smashingmagazine.com/2018/02/gdpr-for-web-developers/.
Center for Humane Technology. “Center for Humane Technology: Realigning Technology with Humanity.” https://humanetech.com/.
Criado Perez, Caroline. Invisible Women: Data Bias in a World Designed for Men. New York: Abrams, 2019.
Eubanks, Virginia. Automating Inequality: How High-Tech Tools Profile, Police, and Punish the Poor. New York: St. Martins, 2018.
Falbe, Tina, Kim Anderson, and Martin Michael Fredricksen. The Ethical Design Handbook. Freiburg, Germany: Smashing Media, 2020.
Ferdinandi, Chris. The Lean Web. Self-published e-book. 2019. https://leanweb.dev/ebook/.
Fry, Hannah. Hello World: Being Human in the Age of Algorithms. New York: W. W. Norton, 2018.
Kadlec, Tim. “The Ethics of Web Performance.” January 9, 2019. https://timkadlec.com/remembers/2019-01-09-the-ethics-of-performance/.
Keith, Jeremy. Resilient Web Design. Self-published e-book, 2017. https://resilientwebdesign.com/.
King, Kat. “Building Empathy-Driven Documentation.” Presentation at Write the Docs Portland 2018, Crystal Ballroom, Portland, Oregon, May 7, 2018. Video, 28:01. https://www.youtube.com/watch?v=_HcmFvxxKaQ.
Linders, Ben. “Why Software Developers Should Take Ethics into Consideration.” InfoQ, March 8, 2018. https://www.infoq.com/news/2018/03/software-developers-ethics/.
Noble, Safia Umoja and Brendesha M. Tynes, eds. The Intersectional Internet: Race, Sex, Class, and Culture Online. New York: Peter Lang, 2016.
Noble, Safia Umoja. Algorithms of Oppression: How Search Engines Reinforce Racism. New York: New York University, 2018.
Pomerantz, Jeffrey. Metadata. Cambridge, MA: MIT, 2015.
Rand-Hendriksen, Morten. “Using Ethics In Web Design.” Smashing Magazine, March 22, 2018. https://www.smashingmagazine.com/2018/03/using-ethics-in-web-design/.
Scott, Adam. “Adam Scott on Ethical Web Development.” Interview by Jeff Bleiel. O’Reilly Programming Podcast. August 24, 2017. Audio, 19:52. https://www.oreilly.com/ideas/adam-scott-on-ethical-web-development/.
———. Ethical Web Development, four volumes. Sebastopol, CA: O’Reilly, 2016–2017. https://ethicalweb.org/.
Simonite, Tom. “Should Data Scientists Adhere to a Hippocratic Oath?” Wired, February 8, 2018. https://www.wired.com/story/should-data-scientists-adhere-to-a-hippocratic-oath/.
Waldman, Ari Ezra. Privacy as Trust: Information Privacy for an Information Age. New York: Cambridge, 2018.
Vallor, Shannon. Technology and the Virtues: A Philosophical Guide to a Future Worth Wanting. New York: Oxford, 2018.
Zuboff, Shoshana. The Age of Surveillance Capitalism: The Fight for a Human Future at the New Frontier of Power. New York: Hatchette, 2019.
Web Languages and Methodologies
AChecker. “Web Accessibility Checker.” https://achecker.ca/checker/index.php.
Accessible Rich Internet Applications Working Group. “(WAI-ARIA) Authoring Practices 1.1.” World Wide Web Consortium (W3C). https://www.w3.org/TR/wai-aria-practices/.
The Accessibility Project. “The A11Y Project: A community-driven effort to make web accessibility easier.” https://a11yproject.com/.
W3C. “Web Accessibility Initiative (WAI).” https://www.w3.org/WAI/.
WebAIM. “WebAIM: Web Accessibility in Mind.” https://webaim.org/.
Agile Software Development
Kerievsky, Joshua. “An Introduction to Modern Agile.” InfoQ, October 20, 2016. https://www.infoq.com/articles/modern-agile-intro/.
“Modern Agile.” http://www.modernagile.org/.
Ottinger, Tim. “BONUS: Tim Ottinger on Practical Ways to Enable Psychological Safety: The Trust Transaction,” Interview by Vasco Duarte. Scrum Master Toolbox Podcast, May 5, 2018. Audio, 41:58. https://scrum-master-toolbox.org/2018/05/podcast/bonus-tim-ottinger-on-practical-ways-to-enable-psychological-safety-the-trust-transaction/#more-3551.
———. “Make People Awesome? Give Them Superpowers!” Agile Otter Blog, March 12, 2017. https://agileotter.blogspot.com/2017/03/make-people-awesome-give-them.html.
CSS (Cascading Style Sheets)
MDN. “CSS: Cascading Style Sheets.” https://developer.mozilla.org/en-US/docs/Web/CSS.
Leatherman, Zach. “A Comprehensive Guide to Font Loading Strategies.” Non-Canonical Web Standards Fan Fiction, August 14, 2017. https://www.zachleat.com/web/comprehensive-webfonts/.
Simmons, Jen. “Layout Land.” YouTube channel. https://www.youtube.com/layoutland.
Simmons, Jen, and Roger Black. “Web Typography & Layout: Past, Present, and Future.” Interview by Jeffrey Zeldman. A List Apart, December 6, 2017. Video, 1:13:10. https://alistapart.com/event/web-typography-layout-past-present-future/.
Chacon, Scott and Ben Straub. Pro Git, 2nd ed. New York: Apress, 2014. https://git-scm.com/book/en/v2.
Schafer, Corey. “Git Tutorials.” YouTube playlist, six videos, 2:24:44. https://www.youtube.com/playlist?list=PL-osiE80TeTuRUfjRe54Eea17-YfnOOAx.
HTML (Hypertext Markup Language)
Bernard, Philippe. “Favicons, Touch Icons, Tile Icons, etc. Which Do You Need?” CSS-Tricks, January 11, 2019. https://css-tricks.com/favicon-quiz/.
Coti, Adam. “The Essential Meta Tags for Social Media.” CSS-Tricks, December 21, 2016. https://css-tricks.com/essential-meta-tags-social-media/.
Grundy, Julie. “The UX of Form Design: Designing an Effective Form.” Presentation at UX New Zealand, Shed 6, Wellington, New Zealand, November 1, 2017. http://www.uxnewzealand.com/2017-speakers/julie-grundy/.
MDN. “HTML: Hypertext Markup Language.” https://developer.mozilla.org/en-US/docs/Web/HTML.
Web Hypertext Application Technology Working Group (WHATWG). “HTML Standard.” https://html.spec.whatwg.org/multipage/.
W3C. “Nu HTMLChecker.” https://validator.w3.org/nu/.
HTTP (Hypertext Transfer Protocol)
MDN. “HTTP.” https://developer.mozilla.org/en-US/docs/Web/HTTP.
W3C. “HTTP—Hypertext Transfer Protocol.” https://www.w3.org/Protocols/.
Internationalization (i18n) and Localization (L10n)
Coupé, Jérôme. “Language Switcher for Multilingual JAMstack Sites.” Webstoemp, September 12, 2019. https://www.webstoemp.com/blog/language-switcher-multilingual-jamstack-sites/.
———. “Multilingual Sites with Eleventy.” Webstoemp, April 27, 2019. https://www.webstoemp.com/blog/multilingual-sites-eleventy/.
MDN. “Creating Localizable Web Applications.” https://developer.mozilla.org/en-US/docs/Mozilla/Localization/Web_Localizability/Creating_localizable_web_applications.
W3C. “Internationalization.” https://www.w3.org/standards/webdesign/i18n.
JAMstack, IndieWeb, and Static Site Generation
Biilmann, Mathias and Phil Hawksworth. Modern Web Development on the JAMstack. Sebastopol, CA: O’Reilly, 2019. https://www.netlify.com/oreilly-jamstack/.
Coyier, Chris. “The Power of Serverless for Front-End Developers.” https://serverless.css-tricks.com/.
IndieWeb Camp. “What is the IndieWeb?” https://indieweb.org/.
Leatherman, Zach. “Eleventy Documentation.” https://www.11ty.dev/docs/.
———. “Own Your Content on Social Media Using the IndieWeb.” Non-Canonical Web Standards Fan Fiction, October 18, 2019. https://www.zachleat.com/web/own-your-content/.
Netlify. “Netlify Docs.” https://docs.netlify.com/.
———. “StaticGen: Top Open Source Static Site Generators.” https://www.staticgen.com/.
———. “The Vanilla JS Toolkit.” https://vanillajstoolkit.com/.
JSDoc. “Use JSDoc.” https://jsdoc.app/.
Simpson, Kyle. You Don't Know JS Yet, 2nd ed., seven volumes. Frontend Masters, 2019. https://github.com/getify/You-Dont-Know-JS.
Crockford, Douglas. “JSON.” https://json.org/.
ECMA International. “ECMA-404 The JSON Data Interchange Syntax,” 2nd ed. https://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf.
GeoJSON. “The GeoJSON Format.” https://geojson.org/.
Mapbox. “Tutorials.” https://docs.mapbox.com/help/tutorials/.
How To GraphQL. “The Fullstack Tutorial for GraphQL.” https://www.howtographql.com/.
Progressive Web Apps
Frain, Ben. “Designing And Building A Progressive Web Application Without A Framework,” three-part series. Smashing Magazine, July 23–30, 2019. https://www.smashingmagazine.com/2019/07/progressive-web-application-pwa-framework-part-3/.
MDN. “Progressive Web Apps.” https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps.
Rzutkiewicz, Jason and Jeremy Lockhorn. “Why Progressive Web Apps Are The Future of Mobile Web: 2019 Research.” Y Media Labs, 2019. https://ymedialabs.com/progressive-web-apps.
SVG (Scalable Vector Graphics)
Coyier, Chris. “Using SVG.” CSS-Tricks, May 2, 2019. https://css-tricks.com/using-svg/.
Drasner, Sarah. “SVG Will Save Us.” Presenation at #PerfMatters Conference, Canada College Theater, Redwood City, CA, April 2, 2019. Video, 36:42. https://www.youtube.com/watch?v=sxte3WpyO60.
W3C SVG Working Group. “Scalable Vector Graphics (SVG).” https://www.w3.org/Graphics/SVG/.