{"id":125,"date":"2020-10-15T17:53:49","date_gmt":"2020-10-15T17:53:49","guid":{"rendered":"http:\/\/www.christianmccreary.com\/wpTest\/?p=125"},"modified":"2020-10-15T17:55:58","modified_gmt":"2020-10-15T17:55:58","slug":"lp2-pa1a-scoring-guide-class-selected-project-smoothietime","status":"publish","type":"post","link":"http:\/\/www.christianmccreary.com\/wpTest\/uncategorized\/lp2-pa1a-scoring-guide-class-selected-project-smoothietime\/","title":{"rendered":"LP2 PA1A Scoring Guide &#8211; Class Selected Project &#8211; SmoothieTime"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large is-resized is-style-rounded\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/New-Project-1.png\" alt=\"\" class=\"wp-image-147\" width=\"384\" height=\"384\" srcset=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/New-Project-1.png 512w, http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/New-Project-1-300x300.png 300w, http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/New-Project-1-150x150.png 150w\" sizes=\"(max-width: 384px) 100vw, 384px\" \/><figcaption>SmoothieTime: Recipe log for making smoothies!<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Link to Project:<\/h2>\n\n\n\n<p><a href=\"https:\/\/smoothie-time-pwa.firebaseapp.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/smoothie-time-pwa.firebaseapp.com\/<\/a><\/p>\n\n\n\n<p>OR<\/p>\n\n\n\n<p><a href=\"https:\/\/app.christianmccreary.com\/\">https:\/\/app.christianmccreary.com\/<\/a><\/p>\n\n\n\n<p>The latter link may not work as Google and GoDaddy may take additional hours to verify DNS settings before the redirect goes through. According to Firebase:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"81\" src=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/Firebase-1024x81.png\" alt=\"\" class=\"wp-image-144\" srcset=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/Firebase-1024x81.png 1024w, http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/Firebase-300x24.png 300w, http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/Firebase-768x61.png 768w, http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/Firebase.png 1439w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>You employ responsive design for desktop and mobile.<\/strong><\/h2>\n\n\n<style type=\"text\/css\">\r\n\t#foogallery-gallery-126 .fg-image {\r\n        width: 150px;\r\n    }\r\n<\/style>\r\n\t\t\t\t<div class=\"foogallery foogallery-container foogallery-default foogallery-lightbox-none fg-gutter-10 fg-center fg-default fg-light fg-border-thin fg-shadow-outline fg-loading-default fg-loaded-fade-in fg-caption-hover fg-hover-fade fg-hover-zoom fg-ready\" id=\"foogallery-gallery-126\" data-foogallery=\"{&quot;item&quot;:{&quot;showCaptionTitle&quot;:true,&quot;showCaptionDescription&quot;:true},&quot;lazy&quot;:true}\" >\r\n\t<div class=\"fg-item fg-type-image fg-idle\"><figure class=\"fg-item-inner\"><a href=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/pic1.png\" data-attachment-id=\"127\" class=\"fg-thumb\"><span class=\"fg-image-wrap\"><img decoding=\"async\" width=\"150\" height=\"150\" class=\"skip-lazy fg-image\" data-src-fg=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/cache\/2020\/10\/pic1\/3265555349.png\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3C%2Fsvg%3E\" loading=\"eager\"><\/span><span class=\"fg-image-overlay\"><\/span><\/a><figcaption class=\"fg-caption\"><div class=\"fg-caption-inner\"><\/div><\/figcaption><\/figure><div class=\"fg-loader\"><\/div><\/div><div class=\"fg-item fg-type-image fg-idle\"><figure class=\"fg-item-inner\"><a href=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/pic2.png\" data-attachment-id=\"128\" class=\"fg-thumb\"><span class=\"fg-image-wrap\"><img decoding=\"async\" width=\"150\" height=\"150\" class=\"skip-lazy fg-image\" data-src-fg=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/cache\/2020\/10\/pic2\/1561539547.png\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3C%2Fsvg%3E\" loading=\"eager\"><\/span><span class=\"fg-image-overlay\"><\/span><\/a><figcaption class=\"fg-caption\"><div class=\"fg-caption-inner\"><\/div><\/figcaption><\/figure><div class=\"fg-loader\"><\/div><\/div><div class=\"fg-item fg-type-image fg-idle\"><figure class=\"fg-item-inner\"><a href=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/pic3.png\" data-attachment-id=\"129\" class=\"fg-thumb\"><span class=\"fg-image-wrap\"><img decoding=\"async\" width=\"150\" height=\"150\" class=\"skip-lazy fg-image\" data-src-fg=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/cache\/2020\/10\/pic3\/4279084503.png\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3C%2Fsvg%3E\" loading=\"eager\"><\/span><span class=\"fg-image-overlay\"><\/span><\/a><figcaption class=\"fg-caption\"><div class=\"fg-caption-inner\"><\/div><\/figcaption><\/figure><div class=\"fg-loader\"><\/div><\/div><\/div>\r\n\n\n\n<p>The tutorial I had followed used the Materialize CSS framework, based on the Material Design language popularized by Google. This framework contains media queries that adjust the elements on the page to display properly on both mobile and desktop platforms, as well as enable functionality that works exclusively on mobile platforms. In my app, you can swipe from the left to bring up the form, or from the right to bring up the navigation. But this function only exists when viewing on mobile; on desktop the menus will not appear using the same gesture even when using a touchscreen laptop.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>You employ a service worker to precache the app resources (HTML, CSS, JavaScript, images) needed to run and to cache the data at runtime to improve performance.<\/strong><\/h2>\n\n\n\n<figure class=\"wp-block-image size-large is-style-default\"><img loading=\"lazy\" decoding=\"async\" width=\"798\" height=\"1024\" src=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/service-798x1024.png\" alt=\"\" class=\"wp-image-134\" srcset=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/service-798x1024.png 798w, http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/service-234x300.png 234w, http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/service-768x986.png 768w, http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/service-1196x1536.png 1196w, http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/service-1595x2048.png 1595w, http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/service.png 1620w\" sizes=\"(max-width: 798px) 100vw, 798px\" \/><\/figure>\n\n\n\n<p>The service worker employed not only is able to cache data for online use and better performance online, but the tutorial I followed enabled me to take it to it\u2019s fullest potential and allow the application to cache the necessary resources for online\/offline functionality. This is done using the assets array defined at the top; this is an outline of the important files that the application needs to store locally to be able to function offline\/function more efficiently.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>You employ a web app manifest and the beforeinstallprompt event to notify the user it&#8217;s installable.<\/strong><\/h2>\n\n\n<style type=\"text\/css\">\r\n\t#foogallery-gallery-130 .fg-image {\r\n        width: 150px;\r\n    }\r\n<\/style>\r\n\t\t\t\t<div class=\"foogallery foogallery-container foogallery-default foogallery-lightbox-none fg-gutter-10 fg-center fg-default fg-light fg-border-thin fg-shadow-outline fg-loading-default fg-loaded-fade-in fg-caption-hover fg-hover-fade fg-hover-zoom fg-ready\" id=\"foogallery-gallery-130\" data-foogallery=\"{&quot;item&quot;:{&quot;showCaptionTitle&quot;:true,&quot;showCaptionDescription&quot;:true},&quot;lazy&quot;:true}\" >\r\n\t<div class=\"fg-item fg-type-image fg-idle\"><figure class=\"fg-item-inner\"><a href=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/pic4.png\" data-attachment-id=\"131\" class=\"fg-thumb\"><span class=\"fg-image-wrap\"><img decoding=\"async\" width=\"150\" height=\"150\" class=\"skip-lazy fg-image\" data-src-fg=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/cache\/2020\/10\/pic4\/3383393519.png\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3C%2Fsvg%3E\" loading=\"eager\"><\/span><span class=\"fg-image-overlay\"><\/span><\/a><figcaption class=\"fg-caption\"><div class=\"fg-caption-inner\"><\/div><\/figcaption><\/figure><div class=\"fg-loader\"><\/div><\/div><div class=\"fg-item fg-type-image fg-idle\"><figure class=\"fg-item-inner\"><a href=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/pic5.jpg\" data-attachment-id=\"132\" class=\"fg-thumb\"><span class=\"fg-image-wrap\"><img decoding=\"async\" width=\"150\" height=\"150\" class=\"skip-lazy fg-image\" data-src-fg=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/cache\/2020\/10\/pic5\/3410022361.jpg\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3C%2Fsvg%3E\" loading=\"eager\"><\/span><span class=\"fg-image-overlay\"><\/span><\/a><figcaption class=\"fg-caption\"><div class=\"fg-caption-inner\"><\/div><\/figcaption><\/figure><div class=\"fg-loader\"><\/div><\/div><div class=\"fg-item fg-type-image fg-idle\"><figure class=\"fg-item-inner\"><a href=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/pic6.png\" data-attachment-id=\"133\" class=\"fg-thumb\"><span class=\"fg-image-wrap\"><img decoding=\"async\" width=\"150\" height=\"150\" class=\"skip-lazy fg-image\" data-src-fg=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/cache\/2020\/10\/pic6\/1457936054.png\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3C%2Fsvg%3E\" loading=\"eager\"><\/span><span class=\"fg-image-overlay\"><\/span><\/a><figcaption class=\"fg-caption\"><div class=\"fg-caption-inner\"><\/div><\/figcaption><\/figure><div class=\"fg-loader\"><\/div><\/div><\/div>\r\n\n\n\n<p>When viewing on Android through an emulator, I have been able to receive the prompt to install the application to the homescreen successfully. Also, in Microsoft Edge Chromium, the address bar provides me with the option to install the web application.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>You employ techniques that creates the ability to run project in a browser tab at a 100% functionality in devices of choice.<\/strong><\/h2>\n\n\n<style type=\"text\/css\">\r\n\t#foogallery-gallery-135 .fg-image {\r\n        width: 150px;\r\n    }\r\n<\/style>\r\n\t\t\t\t<div class=\"foogallery foogallery-container foogallery-default foogallery-lightbox-none fg-gutter-10 fg-center fg-default fg-light fg-border-thin fg-shadow-outline fg-loading-default fg-loaded-fade-in fg-caption-hover fg-hover-fade fg-hover-zoom fg-ready\" id=\"foogallery-gallery-135\" data-foogallery=\"{&quot;item&quot;:{&quot;showCaptionTitle&quot;:true,&quot;showCaptionDescription&quot;:true},&quot;lazy&quot;:true}\" >\r\n\t<div class=\"fg-item fg-type-image fg-idle\"><figure class=\"fg-item-inner\"><a href=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/pic7.jpg\" data-attachment-id=\"136\" class=\"fg-thumb\"><span class=\"fg-image-wrap\"><img decoding=\"async\" width=\"150\" height=\"150\" class=\"skip-lazy fg-image\" data-src-fg=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/cache\/2020\/10\/pic7\/3744200945.jpg\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3C%2Fsvg%3E\" loading=\"eager\"><\/span><span class=\"fg-image-overlay\"><\/span><\/a><figcaption class=\"fg-caption\"><div class=\"fg-caption-inner\"><\/div><\/figcaption><\/figure><div class=\"fg-loader\"><\/div><\/div><div class=\"fg-item fg-type-image fg-idle\"><figure class=\"fg-item-inner\"><a href=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/pic8.jpg\" data-attachment-id=\"137\" class=\"fg-thumb\"><span class=\"fg-image-wrap\"><img decoding=\"async\" width=\"150\" height=\"150\" class=\"skip-lazy fg-image\" data-src-fg=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/cache\/2020\/10\/pic8\/1757379791.jpg\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3C%2Fsvg%3E\" loading=\"eager\"><\/span><span class=\"fg-image-overlay\"><\/span><\/a><figcaption class=\"fg-caption\"><div class=\"fg-caption-inner\"><\/div><\/figcaption><\/figure><div class=\"fg-loader\"><\/div><\/div><div class=\"fg-item fg-type-image fg-idle\"><figure class=\"fg-item-inner\"><a href=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/pic9.jpg\" data-attachment-id=\"138\" class=\"fg-thumb\"><span class=\"fg-image-wrap\"><img decoding=\"async\" width=\"150\" height=\"150\" class=\"skip-lazy fg-image\" data-src-fg=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/cache\/2020\/10\/pic9\/3039634428.jpg\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3C%2Fsvg%3E\" loading=\"eager\"><\/span><span class=\"fg-image-overlay\"><\/span><\/a><figcaption class=\"fg-caption\"><div class=\"fg-caption-inner\"><\/div><\/figcaption><\/figure><div class=\"fg-loader\"><\/div><\/div><\/div>\r\n\n\n\n<p>For this criteria, the devices I used were as follows: <\/p>\n\n\n\n<ol><li>Microsoft Surface Book 2 (Tablet\/Laptop)<\/li><li>iPhone X (iOS 14)<\/li><li>Nexus 6 Virtual Device (Android Oreo)<\/li><\/ol>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Is search engine optimized for page titles, meta tags, body text, headings, images, internal links, and navigation.<\/strong><\/h2>\n\n\n<style type=\"text\/css\">\r\n\t#foogallery-gallery-143 .fg-image {\r\n        width: 150px;\r\n    }\r\n<\/style>\r\n\t\t\t\t<div class=\"foogallery foogallery-container foogallery-default foogallery-lightbox-none fg-gutter-10 fg-center fg-default fg-light fg-border-thin fg-shadow-outline fg-loading-default fg-loaded-fade-in fg-caption-hover fg-hover-fade fg-hover-zoom fg-ready\" id=\"foogallery-gallery-143\" data-foogallery=\"{&quot;item&quot;:{&quot;showCaptionTitle&quot;:true,&quot;showCaptionDescription&quot;:true},&quot;lazy&quot;:true}\" >\r\n\t<div class=\"fg-item fg-type-image fg-idle\"><figure class=\"fg-item-inner\"><a href=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/pic10.jpg\" data-attachment-id=\"139\" class=\"fg-thumb\"><span class=\"fg-image-wrap\"><img decoding=\"async\" width=\"150\" height=\"150\" class=\"skip-lazy fg-image\" data-src-fg=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/cache\/2020\/10\/pic10\/2405996637.jpg\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3C%2Fsvg%3E\" loading=\"eager\"><\/span><span class=\"fg-image-overlay\"><\/span><\/a><figcaption class=\"fg-caption\"><div class=\"fg-caption-inner\"><\/div><\/figcaption><\/figure><div class=\"fg-loader\"><\/div><\/div><div class=\"fg-item fg-type-image fg-idle\"><figure class=\"fg-item-inner\"><a href=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/pic11.png\" data-attachment-id=\"140\" class=\"fg-thumb\"><span class=\"fg-image-wrap\"><img decoding=\"async\" width=\"150\" height=\"150\" class=\"skip-lazy fg-image\" data-src-fg=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/cache\/2020\/10\/pic11\/2390357505.png\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3C%2Fsvg%3E\" loading=\"eager\"><\/span><span class=\"fg-image-overlay\"><\/span><\/a><figcaption class=\"fg-caption\"><div class=\"fg-caption-inner\"><\/div><\/figcaption><\/figure><div class=\"fg-loader\"><\/div><\/div><div class=\"fg-item fg-type-image fg-idle\"><figure class=\"fg-item-inner\"><a href=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/pic12.png\" data-attachment-id=\"141\" class=\"fg-thumb\"><span class=\"fg-image-wrap\"><img decoding=\"async\" width=\"150\" height=\"150\" class=\"skip-lazy fg-image\" data-src-fg=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/cache\/2020\/10\/pic12\/513390364.png\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3C%2Fsvg%3E\" loading=\"eager\"><\/span><span class=\"fg-image-overlay\"><\/span><\/a><figcaption class=\"fg-caption\"><div class=\"fg-caption-inner\"><\/div><\/figcaption><\/figure><div class=\"fg-loader\"><\/div><\/div><div class=\"fg-item fg-type-image fg-idle\"><figure class=\"fg-item-inner\"><a href=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/2020\/10\/pic13.png\" data-attachment-id=\"142\" class=\"fg-thumb\"><span class=\"fg-image-wrap\"><img decoding=\"async\" width=\"150\" height=\"150\" class=\"skip-lazy fg-image\" data-src-fg=\"http:\/\/www.christianmccreary.com\/wpTest\/wp-content\/uploads\/cache\/2020\/10\/pic13\/4035083392.png\" src=\"data:image\/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22150%22%20height%3D%22150%22%20viewBox%3D%220%200%20150%20150%22%3E%3C%2Fsvg%3E\" loading=\"eager\"><\/span><span class=\"fg-image-overlay\"><\/span><\/a><figcaption class=\"fg-caption\"><div class=\"fg-caption-inner\"><\/div><\/figcaption><\/figure><div class=\"fg-loader\"><\/div><\/div><\/div>\r\n\n\n\n<p>For this, I enlisted the assistance of the WAVE tool submitted by another student in the weekly discussion, as well as Edge (Chromium) Lighthouse audit. This mostly adhered to the tutorial in order to ensure functionality with the final product. Accessibility seems to be spot-on however, likely since there are very few images and elements needing alt-tags, and the classes for elements like forms are very descriptive. Best Practices scores lower due to the app serving low-res images but this is because mobile is targeted as the desired platform of use. I adjusted some elements in the main HTML to raise the SEO to from 75 to 83.<\/p>\n\n\n\n<p><strong>Resources:<\/strong><\/p>\n\n\n\n<p>Learner synthesizes information from a variety of sources.<\/p>\n\n\n\n<ul><li><a href=\"https:\/\/wave.webaim.org\/report#\/https:\/\/smoothie-time-pwa.firebaseapp.com\/\" target=\"_blank\" rel=\"noopener\">https:\/\/wave.webaim.org\/report#\/https:\/\/smoothie-time-pwa.firebaseapp.com\/<\/a><\/li><li><a href=\"https:\/\/nz.godaddy.com\/help\/create-a-subdomain-4080\" target=\"_blank\" rel=\"noopener\">https:\/\/nz.godaddy.com\/help\/create-a-subdomain-4080<\/a><\/li><li><a href=\"https:\/\/www.w3schools.com\/tags\/tag_meta.asp\" target=\"_blank\" rel=\"noopener\">https:\/\/www.w3schools.com\/tags\/tag_meta.asp<\/a><\/li><li><a href=\"https:\/\/firebase.google.com\/docs\/hosting\/custom-domain\" class=\"rank-math-link\" target=\"_blank\" rel=\"noopener\">https:\/\/firebase.google.com\/docs\/hosting\/custom-domain<\/a><\/li><\/ul>\n\n\n\n<p>Tutorial Used\/Referenced:<\/p>\n\n\n\n<figure class=\"wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe loading=\"lazy\" title=\"PWA Tutorial for Beginners #1 - What Are PWA&#039;s?\" width=\"678\" height=\"381\" src=\"https:\/\/www.youtube.com\/embed\/videoseries?list=PL4cUxeGkcC9gTxqJBcDmoi5Q2pzDusSL7\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>Reflection Statement:<\/strong><\/h2>\n\n\n\n<p>This was really the most challenging learning plan for me. I believe I came out the other end of it with flying colors of learning to navigate database storage, offline usage, and basically making a fully functioning web app with the help of the tutorial video series. The 31 videos immensely helped me get a greater understanding of what\u2019s going on in the JavaScript of the web app, where the real magic of offline storage and database retrieval happens. The focus on this LP was the construction of the PWA itself, and I like that this video series focused on that by utilizing an existing CSS framework and not lingering on the configuration for responsive web design too much. It really let you dive in headfirst into making the actual core functionality of the app and explaining to you what each bit of code does along the way. I certainly will feel a lot more confidence going into Dom\u2019s class next week in that instead of just copying and pasting code snippets together hoping they work, I\u2019ll actually have a better understanding of what the code block is asking of the user and what it is doing with that data. The feedback I had gotten from peers was unfortunately unavailable because I was late to the discussion, but I asked some friends I know in the web development community what they had thought and they had tested out the app to find that there were some elements I had yet to change from the tutorial. The icon sizes weren\u2019t all changed to my icon, the form still had inputs from the general recipes (tofu, garlic, and mushroom ingredients isn\u2019t an appropriate placeholder for smoothies) and that the database just wasn\u2019t working the way it was intended. Fortunately they helped me troubleshoot and narrow down the causes to find the solutions I needed to get back on track.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Link to Project: https:\/\/smoothie-time-pwa.firebaseapp.com\/ OR https:\/\/app.christianmccreary.com\/ The latter link may not work as Google and GoDaddy may take additional hours to verify DNS settings before the redirect goes through. According to Firebase: You employ responsive design for desktop and mobile. The tutorial I had followed used the Materialize CSS framework, based on the Material Design [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":145,"comment_status":"open","ping_status":"open","sticky":true,"template":"","format":"standard","meta":{"_mo_disable_npp":"","footnotes":""},"categories":[1],"tags":[],"_links":{"self":[{"href":"http:\/\/www.christianmccreary.com\/wpTest\/wp-json\/wp\/v2\/posts\/125"}],"collection":[{"href":"http:\/\/www.christianmccreary.com\/wpTest\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.christianmccreary.com\/wpTest\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.christianmccreary.com\/wpTest\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.christianmccreary.com\/wpTest\/wp-json\/wp\/v2\/comments?post=125"}],"version-history":[{"count":3,"href":"http:\/\/www.christianmccreary.com\/wpTest\/wp-json\/wp\/v2\/posts\/125\/revisions"}],"predecessor-version":[{"id":149,"href":"http:\/\/www.christianmccreary.com\/wpTest\/wp-json\/wp\/v2\/posts\/125\/revisions\/149"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.christianmccreary.com\/wpTest\/wp-json\/wp\/v2\/media\/145"}],"wp:attachment":[{"href":"http:\/\/www.christianmccreary.com\/wpTest\/wp-json\/wp\/v2\/media?parent=125"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.christianmccreary.com\/wpTest\/wp-json\/wp\/v2\/categories?post=125"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.christianmccreary.com\/wpTest\/wp-json\/wp\/v2\/tags?post=125"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}