Projects

Weekly Problems

Due Weekly; See Calendar

Project Description

Each week, we will all work together through a problem related to the week’s readings and your progress on the two larger projects. You should post to Basecamp as you are working on the problems. Part of their purpose is to help everyone in the class learn to work together and compare different approaches to solving challenging problems.

Project One: Static API Consumption and Display

Due June 17, 11:59pm CT

Project Description

You will create an Express.js-backed application on top of Node.js that consumes API data and presents the data in a useful format tied to some specific user task or information need. Your display will be a single HTML page, styled with CSS and progressively enhanced with JavaScript as necessary in the browser. Think of your display as something like an information dashboard. Your display will contain limited user interaction, other than perhaps modifying views of data. But no interaction should trigger the fetching of additional data (that will be the focus of Project Two).

Project Goals

  • Develop familiarity with the conventions of API documentation, including coverage of authentication, endpoints, responses, and acceptable use as governed by both professional ethics and legal documents, such as terms of service
  • Programmatically access and parse API data in a variety of data-serialization formats, such as CSV, XML, or JSON
  • Leverage JavaScript and the asynchronous features of Node.js to consume API data and deliver it in web-friendly formats, using the Express.js framework
  • Effectively structure, design, and present consumed API data to serve specific user needs in a responsively designed web-based data display
  • Thoughtfully evaluate and adopt only the most standards-compliant documentation, libraries, and development techniques for accessing, authenticating to, and parsing API data
  • Write valid, well-formed semantic HTML; error-free, backward- and forward-compatible CSS; and error-free, progressively enhanced JavaScript over HTML pages that continue to function in the absence of JavaScript
  • Make use of validators, linters, and custom test suites to ensure code quality both in terms of expected function and adherence to published standards and documentation
  • Effectively comment on and format source code for maximum readability
  • Track the development of a project over time and collaborate with others using version control

Deliverables & Milestones

  1. In-progress drafts of your work posted to Basecamp during Weeks Two and Three; your post should contain a link to your repository on GitHub and specific requests for help and feedback. Tip: start a message thread for your project during Week Two and post your follow-up post in Week Three as an update or a comment on your Week Two thread.
  2. Substantive to at least six other student drafts posted to Basecamp during Weeks Two and Three
  3. An email to the instructor containing the projects two final deliverables (by June 17, 11:59pm CT):
    1. A 4-5 sentence self-critique memo of your project and your progress in class to this point
    2. The https:// link to your project’s GitHub repository

General Requirements

  • All source files in UTF-8/Unicode character encoding with Unix-style line endings (LF), entabbed with spaces (two spaces per tab)
  • Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf frameworks). A JavaScript framework for basic DOM manipulation is permissible, such as jQuery or a lightweight alternative such as Umbrella JS or Shoestring.
  • Make use of validators and linters to ensure the quality of HTML, CSS, and JavaScript
  • A Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make
  • Your GitHub repository must contain ONLY the files and commits from this project

Back-End Requirements

  • Use the Express.js framework to develop your app
  • Generate the skeleton of your app using the Express application generator; your initial Git commit should immediately follow generating the skeletal app that way
  • Properly fill out and maintain your package.json file to track additional dependencies and version your project
  • Rely solely on asynchronous patterns to fetch API data on the server side, through your app
  • Project must be built to deliver to the browser only one valid well-formed HTML file, one valid CSS file, and one JavaScript file.

Front-End Requirements

  • Your HTML, CSS, and JavaScript files should all be indented with 2 spaces per level of indent; indent all CSS style rules inside the declaring block, and further indent all rules and blocks inside your media queries. Indent inside of all blocks in JavaScript.
  • Semantically structured text-based content to accompany any media elements (image, audio, video). Make use of the <figure> and <figcaption> tags
  • The opening lines of your screen.css file should be the Eric Meyer reset CSS styles
  • Use of only relative units (em, rem, vm, %) in your CSS; no px, pt, or other absolute units are permitted in your CSS
  • Use at least three min-width media queries to enhance mobile-first styles for larger screens
  • Use JavaScript only for progressive enhancement. All site content and basic functionality (e.g., clicking links, viewing images and other media, scrolling, submitting forms) must still be available even in the absence of JavaScript.
  • Absolutely no on- or other deprecated event attributes in your HTML. Handle all events via event listeners in your JavaScript. The only element of your HTML that should contain any references to JavaScript should be a <script> element that loads your JavaScript file, and possibly also your DOM-manipulation framework. In other words, keep your JavaScript unobtrusive to progressively enhance your HTML.
  • Avoid using JavaScript to manipulate your CSS whenever possible. Limit client-side JavaScript to manipulating the DOM, including adding and removing state classes, and keep style information and transitions where they belong: in your CSS file.

Project Two: Interactive API Consumption and Display

Due July 1, 11:59pm CT

Project Description

You will build upon and improve your work from Project One and create a more interactive system for navigating API data, including additional data requests based on user input, if necessary. However, if your API requests already include additional data, you might only need to manipulate what’s already there. Let your API and your user interactions be your guide.

As you’ll see below, the requirements for this project are almost identitical to Project One.

Project Goals

  • Develop deeper familiarity with the conventions of API documentation, including coverage of authentication, endpoints, responses, and acceptable use as governed by both professional ethics and legal documents, such as terms of service
  • Programmatically access and parse API data in a variety of data-serialization formats, such as CSV, XML, or JSON
  • Leverage JavaScript and the asynchronous features of Node.js to consume API data and deliver it in web-friendly formats, using the Express.js framework
  • Effectively structure, design, and present consumed API data to serve specific user needs in a responsively designed web-based data display
  • Thoughtfully evaluate and adopt only the most standards-compliant documentation, libraries, and development techniques for accessing, authenticating to, and parsing API data
  • Write valid, well-formed semantic HTML; error-free, backward- and forward-compatible CSS; and error-free, progressively enhanced JavaScript over HTML pages that continue to function in the absence of JavaScript
  • Make use of the Fetch API or another means (AJAX) for handling user requests for additional data, when appropriate
  • Make use of validators, linters, and custom test suites to ensure code quality both in terms of expected function and adherence to published standards and documentation
  • Effectively comment on and format source code for maximum readability
  • Track the development of a project over time and collaborate with others using version control

Deliverables & Milestones

  1. In-progress drafts of your work posted to Basecamp during Weeks Five and Six; your post should contain a link to your repository on GitHub and specific requests for help and feedback. Tip: start a message thread for your project during Week Five and post your follow-up post in Week Six as an update or a comment on your Week Two thread.
  2. Substantive to at least six other student drafts posted to Basecamp during Weeks Five and Six
  3. An email to the instructor containing the projects two final deliverables (by July 1, 11:59pm CT):
    1. A 4-5 sentence self-critique memo of your project and your progress in class this summer
    2. The https:// link to your project’s GitHub repository

General Requirements

  • All source files in UTF-8/Unicode character encoding with Unix-style line endings (LF), entabbed with spaces (two spaces per tab)
  • Organized, readable source that is hand-written and original (no WYSIWYGs or code-generators, no Bootstrap or other off-the-shelf frameworks). A JavaScript framework for basic DOM manipulation is permissible, such as jQuery or a lightweight alternative such as Umbrella JS or Shoestring.
  • Make use of validators and linters to ensure the quality of HTML, CSS, and JavaScript
  • A Git repository with frequent commits and meaningful commit messages that accurately reflect each set of changes that you make; you can continue work in the repository that you created for Project One, if you like

Back-End Requirements

  • Use the Express.js framework to develop your app
  • Generate the skeleton of your app using the Express application generator; your initial Git commit should immediately follow generating the skeletal app that way
  • Properly fill out and maintain your package.json file to track additional dependencies and version your project
  • Include a .gitignore file that prevents inclusion of the node_modules in your repository
  • Rely solely on asynchronous patterns to fetch API data on the server side, through your app
  • Project must be built to deliver to the browser only one valid well-formed HTML file, one valid CSS file, and one JavaScript file.
  • Use environment variables and the process.env object in Node.js to keep API keys and other sensitive information out of your repository

Front-End Requirements

  • Your HTML, CSS, and JavaScript files should all be indented with 2 spaces per level of indent; indent all CSS style rules inside the declaring block, and further indent all rules and blocks inside your media queries. Indent inside of all blocks in JavaScript.
  • Semantically structured text-based content to accompany any media elements (image, audio, video). Make use of the <figure> and <figcaption> tags
  • The opening lines of your screen.css file should be the Eric Meyer reset CSS styles
  • Use of only relative units (em, rem, vm, %) in your CSS; no px, pt, or other absolute units are permitted in your CSS
  • Use at least three min-width media queries to enhance mobile-first styles for larger screens
  • Use JavaScript only for progressive enhancement. All site content and basic functionality (e.g., clicking links, viewing images and other media, scrolling, submitting forms) must still be available even in the absence of JavaScript.
  • Absolutely no on- or other deprecated event attributes in your HTML. Handle all events via event listeners in your JavaScript. The only element of your HTML that should contain any references to JavaScript should be a <script> element that loads your JavaScript file, and possibly also your DOM-manipulation framework. In other words, keep your JavaScript unobtrusive to progressively enhance your HTML.
  • Avoid using JavaScript to manipulate your CSS whenever possible. Limit client-side JavaScript to manipulating the DOM, including adding and removing state classes, and keep style information and transitions where they belong: in your CSS file.

ITMD 569: Data-Serialization Format Report

Due June 3, 11:59pm CT

Project Description

For students enrolled in the 569 section: The instructor will assign you a common data-serialization format, such as JSON, XML, or CSV. You will then create a GitHub Gist containing a brief description of the format, including its history and development, as well as links to documentation of the format, examples of the format you find on the internet, and Node.js core libraries and third-party modules for parsing or delivering the format. You will post the link to your Gist on Basecamp as a reference for all students in the class. The instructor will also link to your Gist from the Links page on the course site.

Project Goals

  • Learn to research and report on a technical topic for a peer audience
  • Thoughtfully evaluate and adopt only the most standards-compliant documentation, libraries, and development techniques for your assigned data-serialization format
  • Learn to write in GitHub-flavored Markdown (specification) to present readable documentation with useful headings, lists, and block & inline code examples.

Deliverables & Milestones

  1. The URL of your report’s GitHub Gist, posted to Basecamp by 11:59pm CT on June 3

Requirements

  • Format your report for easy readability using GitHub-flavored Markdown
  • Include the history of your format, including any ancestor formats or formats that inspired your format’s design
  • Provide a list of links to the most authoritative documentation for your format
  • Provide a list of links pointing to examples of the format that you find in the wild, on the internet