{"id":26659021,"url":"https://github.com/denisecase/44-563-webapps-syllabus","last_synced_at":"2025-04-11T14:10:13.661Z","repository":{"id":42992021,"uuid":"141775029","full_name":"denisecase/44-563-webapps-syllabus","owner":"denisecase","description":"Syllabus for 44-563 Developing Web Apps and Services","archived":false,"fork":false,"pushed_at":"2023-01-07T21:31:23.000Z","size":2012,"stargazers_count":1,"open_issues_count":9,"forks_count":14,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T10:17:31.086Z","etag":null,"topics":["codacy-badge","css","eslint","html","husky","javascript","lighthouse-badges","prettier","pwa","syllabus","webapps"],"latest_commit_sha":null,"homepage":"https://denisecase.github.io/44-563-webapps-syllabus/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/denisecase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":".github/SECURITY.md","support":null}},"created_at":"2018-07-21T02:32:27.000Z","updated_at":"2024-01-26T12:09:09.000Z","dependencies_parsed_at":"2023-02-08T02:18:04.706Z","dependency_job_id":null,"html_url":"https://github.com/denisecase/44-563-webapps-syllabus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisecase%2F44-563-webapps-syllabus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisecase%2F44-563-webapps-syllabus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisecase%2F44-563-webapps-syllabus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/denisecase%2F44-563-webapps-syllabus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/denisecase","download_url":"https://codeload.github.com/denisecase/44-563-webapps-syllabus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248413874,"owners_count":21099373,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["codacy-badge","css","eslint","html","husky","javascript","lighthouse-badges","prettier","pwa","syllabus","webapps"],"created_at":"2025-03-25T10:17:35.419Z","updated_at":"2025-04-11T14:10:13.643Z","avatar_url":"https://github.com/denisecase.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# [44-563 Developing Web Apps and Services Syllabus](https://denisecase.github.io/44-563-webapps-syllabus)\n\n![CI](https://github.com/denisecase/44-563-webapps-syllabus/workflows/CI/badge.svg)\n[![Codacy Badge](https://app.codacy.com/project/badge/Grade/cf28398117374422ab14e715916852fb)](https://www.codacy.com/manual/denisecase/44-563-webapps-syllabus?utm_source=github.com\u0026utm_medium=referral\u0026utm_content=denisecase/44-563-webapps-syllabus\u0026utm_campaign=Badge_Grade)\n[![MIT Licensed](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n![GitHub repo size](https://img.shields.io/github/repo-size/denisecase/44-563-webapps-syllabus?style=flat)\n[![code style: prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://github.com/prettier/prettier)\n[![Code Style](https://badgen.net/badge/code%20style/airbnb/ff5a5f?icon=airbnb)](https://github.com/airbnb/javascript)\n\n[![Lighthouse Performance Badge](./test_results/lighthouse_performance.svg)](https://github.com/emazzotta/lighthouse-badges)\n[![Lighthouse Accessibility Badge](./test_results/lighthouse_accessibility.svg)](https://github.com/emazzotta/lighthouse-badges)\n[![Lighthouse Best Practices Badge](./test_results//lighthouse_best-practices.svg)](https://github.com/emazzotta/lighthouse-badges)\n[![Lighthouse SEO Badge](./test_results/lighthouse_seo.svg)](https://github.com/emazzotta/lighthouse-badges)\n[![Lighthouse PWA Badge](./test_results/lighthouse_pwa.svg)](https://github.com/emazzotta/lighthouse-badges)\n\n- Denise Case\n- Assistant Professor\n- Northwest Missouri State University\n\n## Links\n\n- Site: \u003chttps://denisecase.github.io/44-563-webapps-syllabus\u003e\n- Source: \u003chttps://github.com/denisecase/44-563-webapps-syllabus\u003e\n\n## Prerequisites\n\n- [Follow this guide for Windows users](https://github.com/denisecase/windows-setup/blob/master/README.md/) to get set up for development.\n\n## Recommended\n\nHost\n\n- [GitHub Pages](https://pages.github.com/) - free \u0026 easy hosting for client-side sites\n\nBasic Tools\n\n- [Git](https://git-scm.com/download/win) version control system\n- [VS Code](https://code.visualstudio.com/) - editor\n- [VS Code extension - Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) - hot refresh\n\nWindows Tools\n\n- [Powershell](https://docs.microsoft.com/en-us/powershell/) - Windows CLI\n- [Chocolatey](https://chocolatey.org/) - software manager for Windows\n- [TortoiseGit](https://tortoisegit.org/) - integrates with Windows File Explorer\n\nCI/CD Tools\n\n- [Husky](https://github.com/typicode/husky) - Git hooks to auto-lint and more\n- [Node](https://nodejs.org/en/) - JavaScript without the browser\n- [npm, npx](https://www.npmjs.com/) - package manager and script runner (see package.json)\n\nCode Tools\n\n- [W3C Markup Validation Service](https://validator.w3.org/)\n- [W3C Css Validation Service](https://jigsaw.w3.org/css-validator/validator)\n- [Airbnb JavaScript Style](https://github.com/airbnb/javascript) - semicolons and more\n- [Prettier](https://prettier.io/) - formats JavaScript, CSS, JSON, and more\n- [ESLint](https://eslint.org/docs/user-guide/getting-started) - linting\n- [Sort package.json](https://www.npmjs.com/package/sort-package-json) - consistant, std format\n- [Mark.js](https://markjs.io/) - JS keyword highlighter\n\nResponsive Design\n\n- [Bootstrap](https://getbootstrap.com/) - responsive design\n- [Material Design for Bootstrap](https://mdbootstrap.com/) - nice looking styles, great tutorials\n- [Bootstrap 5 alpha](https://mdbootstrap.com/docs/standard/bootstrap-5/) - drops jQuery\n- [CSS Variables](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) (custom properties)\n- [2020 JavaScript](https://auth0.com/blog/javascript-whats-new-es2020/) - dynamic imports, ??, and more\n\nAudits\n\n- [Google Measure](https://web.dev/measure/)\n- [Lighthouse Badges](https://github.com/emazzotta/lighthouse-badges) - PWA audits\n- [Codacy](https://app.codacy.com/) - online static analysis\n\nBrowsers\n\n- [Firefox](https://www.mozilla.org/en-US/firefox/) web browser or\n- [Chrome](https://www.google.com/chrome/) web browser\n\nPWA\n\n- [Google Workbox](https://developers.google.com/web/tools/workbox/) - Service worker API\n\nAnalytics\n\n- [Google Analytics](https://analytics.google.com/analytics/web/)\n\nSpeech Synthesis\n\n- [Built-in Speech Synthesis](SpeechSynthesisUtterance)\n\nAs Needed\n\n- [Tables Generator (HTML)](https://www.tablesgenerator.com/html_tables)\n- [PurifyCSS](https://github.com/purifycss/purifycss) - reduce size\n- [PurifyCSS](https://purifycss.online/) - online\n- [Icons8](https://icons8.com)\n- [JSDoc](https://jsdoc.app/)\n- [JsDoc Cheatsheet](https://devhints.io/jsdoc)\n- [Test JavaScript Regular Expressions](https://regexr.com/)\n- [Code styles guide](https://medium.com/@uistephen/style-guides-for-linting-ecmascript-2015-eslint-common-google-airbnb-6c25fd3dff0)\n\n## Getting Started\n\n- Fork contents to a new repository.\n- Clone your repository down to your local machine.\n- From Windows File Explorer, open index.html in Chrome to view.\n- Using Visual Studio Code, open the folder to edit.\n- Open GitHub repository, under Settings / GitHub Pages, set Source to master branch and click Save.\n- 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.\n\n## Progressive Web App\n\nThis syllabus is a progressive web app and can be installed on mobile and other devices.\n\nTrack your outcomes with local storage.\n\n## Semester Updates\n\n- Update the CDN styles in index.html.\n- Update the Canvas course URL in the navigation bar.\n- Update outcomes.\n- Update tools and requirements.\n- Update schedule.\n- Update office hours.\n\n## Create Custom PWA Icons\n\nPWA require lots of icons.\n\n### First, create initial favicons\n\nBasic icon built with [Favicon.io](https://favicon.io)\n\n- Generate from Text\n- Text: DATA\n- Background: Rounded\n- Font family: Hanalei Fill\n- Font size: 50\n- Color: #FFFFFF\n- Background: #006747\n\nDownload and save favicon_io.zip file to images folder. Extract and delete the zipfile.\n\nCopy favicon.ico into the root project folder (the one that has the index.html file).\n\n### Second, create a full set of PWA icons\n\nFull set of PWA icons built with [PWA Builder App Image Generator](https://www.pwabuilder.com/imageGenerator). 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.\n\nUpdate icons property in manifest.json as needed (if the names are the same, updates can be copied from a reference project).\n\n### Third, create additional Android icons (optional)\n\n- [Android Asset Studio](https://romannurik.github.io/AndroidAssetStudio/icons-launcher.html)\n\n- [Stack Overflow](https://stackoverflow.com/questions/12768128/android-launcher-icon-size)\n\n- 48 × 48 (mdpi) , with 1 dp padding\n- 72 × 72 (hdpi), with 1 dp padding\n- 96 × 96 (xhdpi), with 1 dp padding\n- 144 × 144 (xxhdpi), with 1 dp padding\n- 192 × 192 (xxxhdpi) , with 4 dp padding\n\n## Try It\n\n- To test automatic formatting and linting and PWA testing, open a PowerShell Window in this folder as an adminstrator.\n- Run the following commands to install packages, format the code, and view any recommendations.\n\n```PowerShell\nnpm run sort\nnpm install\nnpm run prettier\nnpm run lint\nnpm run lint-fix\n```\n\n## Current\n\n- Removing jQuery to increase performance\n- Moving to JavaScript modules\n- Shared custom elements using only JavaScript (components use general page styling)\n- Shared web components encapsulate their own styles (not currrently used)\n\n## See also\n\n- Source: \u003chttps://github.com/denisecase/44-517-bigdata-syllabus\u003e - uses content from here\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenisecase%2F44-563-webapps-syllabus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdenisecase%2F44-563-webapps-syllabus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdenisecase%2F44-563-webapps-syllabus/lists"}