44-517 Big Data Syllabus

• Denise Case

• Assistant Professor

• Northwest Missouri State University

• Site: https://denisecase.github.io/44-517-bigdata-syllabus

• Source: https://github.com/denisecase/44-517-bigdata-syllabus

Table of Contents

• 44-517 Big Data Syllabus
  • Table of Contents
  • Prerequistes
  • Recommended
  • Autogenerate Table of Contents
  • Getting Started
  • Progressive Web App
  • Semester Updates
  • Create Custom PWA Icons
    • First, create initial favicons
    • Second, create a full set of PWA icons
    • Third, create additional Android icons (optional)
  • Try It
  • Recent Efforts
  • See also

Created by gh-md-toc

Prerequistes

• If Windows 10, first follow this guide to get your computer ready 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

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

Autogenerate Table of Contents

Run a Bash script (in Git Bash):

./tools/gh-md-toc.sh ./README.md > ./tools/toc.md

Paste from the updated content into the Table of Contents section above.

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, installable on mobile and other devices.

Outcome completion is tracked using 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 (or copy from a similar 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

Recent Efforts

• Removing jQuery to increase performance
• Moving to JavaScript modules
• Shared custom elements built with JavaScript
• Possible: Moving to shared web components, which encapsulate their own styling (not currrently needed)

See also

• Source: https://github.com/denisecase/44-563-webapps-syllabus
• Article: Combining Prettier with ESLint + Airbnb Style Guide
• Article: Managing caching strategies with service workers - The Offline Cookbook