44-691 Graduate Directed Project I Syllabus

• Denise Case
• Assistant Professor
• Northwest Missouri State University

Links

• Site: https://denisecase.github.io/44-691-gdp1-syllabus
• Source: https://github.com/denisecase/44-691-gdp1-syllabus

Printing to PDF from Chrome

• Follow these recommended steps to print to PDF from Chrome browser:

1. In the Chrome main menu, go to "More tools" > "Developer tools"
2. Important: Make sure the "Responsive" bar is closed, and that the width of the page is between 1200 and 1250 pixels (when hovering over html tag).
3. In "Developer tools", click the three-dot menu (upper right) and go to "Run command"
4. Under "Run command", select "Screenshot Capture full size screenshot". A PNG file will be saved to your machine.
5. Open the PNG file in another Chrome tab.
6. Important: Click the image for full zoom.
7. In the Chrome main menu, select "Print...".
8. Change destination to "Save to PDF", make sure margins are set to "None", then click "Save"
9. The final PDF will be saved to your machine.

Prerequistes

• Follow these guides for Windows users to get set up for development.

Recommended

Host

• GitHub Pages - free & easy hosting for client-side sites

Basic Tools

• Git version control system
• VS Code - editor
• VS Code extension - Live Server - hot refresh

Windows Tools

• Powershell - Windows CLI
• Chocolatey - software manager for Windows
• TortoiseGit - integrates with Windows File Explorer

Update: Use Winget to update to latest Powershell:

winget install --name PowerShell --exact --source winget

CI/CD Tools

• Husky - Git hooks to auto-lint and more
• Node - JavaScript without the browser
• npm, npx - package manager and script runner (see package.json)

Code Tools

• W3C Markup Validation Service
• W3C Css Validation Service
• Airbnb JavaScript Style - semicolons and more
• Prettier - formats JavaScript, CSS, JSON, and more
• ESLint - linting
• Sort package.json - consistant, std format
• Mark.js - JS keyword highlighter

Responsive Design

• Bootstrap - responsive design
• Material Design for Bootstrap - nice looking styles, great tutorials
• Bootstrap 5 alpha - drops jQuery
• CSS Variables (custom properties)
• 2020 JavaScript - dynamic imports, ??, and more

Audits

• Google Measure
• Lighthouse Badges - PWA audits
• Codacy - online static analysis

Browsers

• Firefox web browser or
• Chrome web browser

PWA

• Google Workbox - Service worker API

Analytics

• Google Analytics

Speech Synthesis

• Built-in Speech Synthesis

As Needed

• Tables Generator (HTML)
• PurifyCSS - reduce size
• PurifyCSS - online
• Icons8
• JSDoc
• JsDoc Cheatsheet
• Test JavaScript Regular Expressions
• Code styles guide

Getting Started

• Fork contents to a new repository.
• Clone your repository down to your local machine.
• From Windows File Explorer, open index.html in Chrome to view.
• Using Visual Studio Code, open the folder to edit.
• Open GitHub repository, under Settings / GitHub Pages, set Source to master branch and click Save.
• Go to your Google Analytics dashboard. Add a new property for your GitHub Page, generate your tracking id, and replace the analytics code in index.html with yours.

Progressive Web App

This syllabus is a progressive web app and can be installed on mobile and other devices.

Track your outcomes with local storage.

Semester Updates

• Update the CDN styles in index.html.
• Update the Canvas course URL in the navigation bar.
• Update outcomes.
• Update tools and requirements.
• Update schedule.
• Update office hours.

Create Custom PWA Icons

PWA require lots of icons.

First, create initial favicons

Basic icon built with Favicon.io

• Generate from Text
• Text: GDP1
• Background: Rounded
• Font family: Cabin Condensed
• Font size: 50
• Color: #FFFFFF
• Background: #006747

Download and save favicon_io.zip file to images folder. Extract and delete the zipfile.

Copy favicon.ico into the root project folder (the one that has the index.html file).

Second, create a full set of PWA icons

Full set of PWA icons built with PWA Builder App Image Generator. Upload your largest favicon (e.g., the 512 size created above) and update settings as desired (these used 0.3 padding with custom color #006747). Check all the boxes. Click the button below the color option to generate a zipfile. Save the AppImages.zip file to images folder. Extract and delete the zipfile.

Update icons property in manifest.json as needed (if the names are the same, updates can be copied from a reference project).

Third, create additional Android icons (optional)

• Android Asset Studio

• Stack Overflow

• 48 × 48 (mdpi) , with 1 dp padding

• 72 × 72 (hdpi), with 1 dp padding

• 96 × 96 (xhdpi), with 1 dp padding

• 144 × 144 (xxhdpi), with 1 dp padding

• 192 × 192 (xxxhdpi) , with 4 dp padding

Try It

• To test automatic formatting and linting and PWA testing, open a PowerShell Window in this folder as an adminstrator.
• Run the following commands to install packages, format the code, and view any recommendations.

npm run sort
npm install
npm run prettier
npm run lint
npm run lint-fix

Current

• Removing jQuery to increase performance
• Moving to JavaScript modules
• Shared custom elements using only JavaScript (components use general page styling)
• Shared web components encapsulate their own styles (not currrently used)

See also

• Source: https://github.com/denisecase/44-517-bigdata-syllabus - uses content from here