Skip to content

denisecase/44-563-webapps-syllabus

Repository files navigation

CI Codacy Badge MIT Licensed GitHub repo size code style: prettier Code Style

Lighthouse Performance Badge Lighthouse Accessibility Badge Lighthouse Best Practices Badge Lighthouse SEO Badge Lighthouse PWA Badge

  • Denise Case
  • Assistant Professor
  • Northwest Missouri State University

Links

Prerequisites

Recommended

Host

Basic Tools

Windows Tools

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

Responsive Design

Audits

Browsers

PWA

Analytics

Speech Synthesis

As Needed

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: DATA
  • Background: Rounded
  • Font family: Hanalei Fill
  • 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