LP2 Projects


LP2 Projects Part 1

Progressive Web Apps

PWA stands for progressive web app. This is an app built from the web technologies we all know and love, like HTML, CSS, and JavaScript, but with a feel and functionality that rivals an actual native app.

LP2 Projects Part 1 Class Selected Project

In Learning Plan 2 Part 1, I managed to create a Progressive Web App. I added manifest.json for fetch my images and serviceworker.js to program the network connection.

Patrick's PWA Project

LP2 Part 1 Reflection

    In this learning plan, I learned how to create a Progressive Web App. A Progressive Web App is an app built from the web technologies we all know and love, like HTML, CSS, and JavaScript, but with a feel and functionality that rivals an actual native app. To create a PWA, you’ll need a serviceworker.js, manifest.json, and app.js. You will need to keep them all in the same file path where your index file is located. When I first learned about Progressive Web Apps, I never heard of the term before. Once I learned more about it, I learned what it entailed. You can create PWA’s with a mobile platform and it will work perfectly. I had to right click on the browser, Inspect, and clicked on the Application tool to view if my service worker, manifest, and app were working. If I had any JavaScript errors, the tool would notify me in the Console area. For this project, I added a home page and a PWA link. This was an interesting project to learn the functionalities of how to build a Progressive Web App.

Resources

Progressive Web App tutorial – learn to build a PWA from scratch

A Simple Progressive Web App Tutorial

A Beginner’s Guide to Progressive Web Apps

What is a PWA and Why should you care?

What is a progressive web app (PWA)? Why would you want one?

Progressive Web Apps

Progressive Web Apps (PWAs): A Beginner’s Guide for 2020

Your First Progressive Web App Creating a Weather App

O'Reilly: Learning Progressive Web Apps: Building Modern Web Apps Using Service Workers

O'Reilly: Progressive Web Apps (PWA) - The Complete Guide

Introduction To Progressive Web Apps

Build Progressive Web Apps - Chapter 0 to Chapter 4

What makes a good Progressive Web App? (PWA Checklist)

An Extensive Guide To Progressive Web Applications

Which businesses benefit from Progressive Web Apps?

3 Industries Poised for PWA Disruption in 2019

PWA best practices: tips for designing great Progressive Web Apps

PWA 2020 best practices – minimal & optimal checklist for web developers

LP2 Part 2 Student Choice Project

Voice User Interface

Voice User Interface makes spoken human interaction with computers possible by speaking into your computer microphone and using speech recognition to understand spoken commands and answers to a question. I managed to create a Voice UI for my web page with HTML, CSS, and JavaScript JavaScript to create my Voice UI to keep track on what the user is saying in the text area.

Voice UI

LP2 Part 2 Reflection

    In this learning plan, I learned how to create a Voice User Interface. I always wanted to know how it was created because I've used it often on Google and it's very popular in the age we are living in. The Voice User Interface uses speech recognition to recognize what you are saying in the text area. This is very useful for people who can't type and can only use their language to speak. Voice UI helps you to speak instead of typing out what you want to say. When going to Google, you can ask a question by clicking the mic button and you can say "Ok Google, What is this?" or you can say "What is this?" instead. When creating this project, I never knew how Google created it and now that I know how they did it, I can now use this for my future web pages. I used HTML, CSS, and JavaScript to create the speech recognition for what the user is saying. I really enjoyed creating a Voice UI because this is my first time creating one, and learning about how it works and how it functions.

LP2 Part 2 Resources

Web Standards: The What, The Why, And The How

ABOUT W3C STANDARDS

With the Microsoft v. Netscape war long over, the pivotal Web Standards Project is shutting down

11 Must-Know FrontEnd Trends for 2020

Top 10 Best Web Development Frameworks in 2020-2021

12 Leading UI/UX Design Trends to Dominate in 2020-2021

HTML5: Network Information API

Adding a Google Map with a Marker to Your Website

Google Maps Tutorial

Build a voice controlled UI

Designing a VUI – Voice User Interface