From 50e36e86d852c2d1c59a2c25dd68f58e7dd00699 Mon Sep 17 00:00:00 2001 From: Kamran Ahmed Date: Thu, 22 Dec 2022 14:46:55 +0400 Subject: [PATCH] Add content for web apis --- .../roadmaps/100-frontend/content-paths.json | 10 +- .../117-progressive-web-apps/100-apis.md | 8 - .../117-progressive-web-apps/100-storage.md | 8 + .../101-web-sockets.md | 10 + .../102-server-sent-events.md | 10 + .../103-service-workers.md | 10 + .../117-progressive-web-apps/104-location.md | 8 + .../105-notifications.md | 8 + .../106-device-orientation.md | 10 + .../117-progressive-web-apps/107-payments.md | 13 + .../108-credentials.md | 10 + .../100-frontend/content/123-bonus-content.md | 1 + public/project/frontend.json | 744 +++++++++++------- 13 files changed, 549 insertions(+), 301 deletions(-) delete mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/100-storage.md create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/101-web-sockets.md create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/102-server-sent-events.md create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/103-service-workers.md create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/104-location.md create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/105-notifications.md create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/106-device-orientation.md create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/107-payments.md create mode 100644 content/roadmaps/100-frontend/content/117-progressive-web-apps/108-credentials.md diff --git a/content/roadmaps/100-frontend/content-paths.json b/content/roadmaps/100-frontend/content-paths.json index f9ecc4bc2..e4a62fdd4 100644 --- a/content/roadmaps/100-frontend/content-paths.json +++ b/content/roadmaps/100-frontend/content-paths.json @@ -108,7 +108,15 @@ "type-checkers:flow": "/roadmaps/100-frontend/content/116-type-checkers/101-flow.md", "progressive-web-apps": "/roadmaps/100-frontend/content/117-progressive-web-apps/readme.md", "progressive-web-apps:performance": "/roadmaps/100-frontend/content/117-progressive-web-apps/101-performance.md", - "progressive-web-apps:apis": "/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md", + "progressive-web-apps:storage": "/roadmaps/100-frontend/content/117-progressive-web-apps/100-storage.md", + "progressive-web-apps:web-sockets": "/roadmaps/100-frontend/content/117-progressive-web-apps/101-web-sockets.md", + "progressive-web-apps:server-sent-events": "/roadmaps/100-frontend/content/117-progressive-web-apps/102-server-sent-events.md", + "progressive-web-apps:service-workers": "/roadmaps/100-frontend/content/117-progressive-web-apps/103-service-workers.md", + "progressive-web-apps:location": "/roadmaps/100-frontend/content/117-progressive-web-apps/104-location.md", + "progressive-web-apps:notifications": "/roadmaps/100-frontend/content/117-progressive-web-apps/105-notifications.md", + "progressive-web-apps:device-orientation": "/roadmaps/100-frontend/content/117-progressive-web-apps/106-device-orientation.md", + "progressive-web-apps:payments": "/roadmaps/100-frontend/content/117-progressive-web-apps/107-payments.md", + "progressive-web-apps:credentials": "/roadmaps/100-frontend/content/117-progressive-web-apps/108-credentials.md", "server-side-rendering": "/roadmaps/100-frontend/content/118-server-side-rendering/readme.md", "server-side-rendering:react-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/readme.md", "server-side-rendering:react-js:next-js": "/roadmaps/100-frontend/content/118-server-side-rendering/100-react-js/100-next-js.md", diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md deleted file mode 100644 index 4df62827f..000000000 --- a/content/roadmaps/100-frontend/content/117-progressive-web-apps/100-apis.md +++ /dev/null @@ -1,8 +0,0 @@ -# PWA APIs - -One of the main purposes of PWAs is to provide a native-app-like experience. APIs like service workers, web sockets, and storage allow a PWA to fast load, access data offline, and other capabilities, similar to a native app. - -Free Content -Progressive Web Apps -Progressive web apps (PWAs) - 5 new APIs to try out in your PWA diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/100-storage.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/100-storage.md new file mode 100644 index 000000000..a67707af2 --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/100-storage.md @@ -0,0 +1,8 @@ +# Web Storage API + +The Web Storage API provides mechanisms for storing key-value pairs in a web browser. It includes two storage objects: localStorage and sessionStorage, which allow you to save data on the client side and persist it across multiple browser sessions, respectively. + +The Web Storage API is designed to be simple and easy to use, and it is widely supported across modern web browsers. It is often used as an alternative to cookies, as it allows for larger amounts of data to be stored and is more efficient in terms of performance. + +Free Content +Web Storage API - MDN diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/101-web-sockets.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/101-web-sockets.md new file mode 100644 index 000000000..be15de820 --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/101-web-sockets.md @@ -0,0 +1,10 @@ +# Web Sockets + +Web Sockets is a technology that allows for full-duplex communication over a single TCP connection. It enables real-time, bi-directional communication between a client and a server, and is typically used in applications that require high-speed, low-latency communication, such as online gaming and real-time data streaming. + +Web Sockets utilizes a persistent connection between a client and a server, allowing for continuous data exchange without the need for the client to send additional requests to the server. This makes it more efficient and faster than other technologies, such as HTTP, which require a new request to be sent for each piece of data. + +Web Sockets is supported by most modern web browsers and can be used with a variety of programming languages and frameworks. + +Free Content +Web Sockets - MDN diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/102-server-sent-events.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/102-server-sent-events.md new file mode 100644 index 000000000..512625dfa --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/102-server-sent-events.md @@ -0,0 +1,10 @@ +# Server Sent Events + +Server-Sent Events (SSE) is a technology that allows a web server to push data to a client in real-time. It uses an HTTP connection to send a stream of data from the server to the client, and the client can listen for these events and take action when they are received. + +SSE is useful for applications that require real-time updates, such as chat systems, stock tickers, and social media feeds. It is a simple and efficient way to establish a long-lived connection between a client and a server, and it is supported by most modern web browsers. + +To use SSE, the client must create an EventSource object and specify the URL of the server-side script that will send the events. The server can then send events by writing them to the response stream with the proper formatting. + +Free Content +Server-Sent Events - MDN diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/103-service-workers.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/103-service-workers.md new file mode 100644 index 000000000..708c84c2f --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/103-service-workers.md @@ -0,0 +1,10 @@ +# Service Workers + +Service Workers are a type of web worker that acts as a proxy between a web page and the network, allowing web developers to build offline-first and reliable applications. Service Workers can intercept network requests, access the cache, and make decisions on how to respond to a request based on the available resources. + +Service Workers are written in JavaScript and are registered by a web page. Once registered, they can control the page and all its requests, even when the page is not open in a browser. This allows Service Workers to enable features such as push notifications, background synchronization, and offline support. + +Service Workers are supported by most modern web browsers, and they are an essential component of progressive web applications (PWAs). + +Free Content +Service Workers - MDN diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/104-location.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/104-location.md new file mode 100644 index 000000000..57d19640a --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/104-location.md @@ -0,0 +1,8 @@ +# Location API + +The Geolocation API is a web API that provides access to the device's location data, such as latitude and longitude. It allows web developers to build location-based applications, such as mapping and location sharing, by using the device's GPS, Wi-Fi, and other sensors to determine the user's location. + +To use the Geolocation API, a web page must first request permission from the user to access their location. If permission is granted, the page can then use the `navigator.geolocation` object to access the device's location data. The API provides several methods for getting the user's current location, watching for location changes, and calculating distances between two locations. + +Free Content +Geolocation API - MDN diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/105-notifications.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/105-notifications.md new file mode 100644 index 000000000..c0523121c --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/105-notifications.md @@ -0,0 +1,8 @@ +# Notifications API + +The Notifications API is a web API that allows web pages to display system-level notifications to the user. These notifications can be used to alert the user of important events, such as new messages or updates, even when the web page is not open in the browser. + +To use the Notifications API, a web page must first request permission from the user to display notifications. If permission is granted, the page can then use the `Notification` constructor to create a new notification and display it to the user. The notification can include a title, body text, and an icon, and it can be customized with options such as a timeout and a click action. + +Free Content +Notifications API - MDN diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/106-device-orientation.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/106-device-orientation.md new file mode 100644 index 000000000..7a58a965b --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/106-device-orientation.md @@ -0,0 +1,10 @@ +# Device Orientation API + +The Device Orientation API is a web API that provides access to the device's orientation and motion data, such as its pitch, roll, and yaw. It allows web developers to build applications that can respond to the device's orientation and motion, such as augmented reality and motion-controlled games. + +To use the Device Orientation API, a web page must first request permission from the user to access the device's orientation data. If permission is granted, the page can then use the DeviceOrientationEvent object to access the device's orientation data and respond to changes in orientation. The API provides several properties for accessing the device's orientation and motion data, as well as events for detecting changes in orientation. + +The Device Orientation API is supported by most modern web browsers and is often used in conjunction with other APIs, such as the Geolocation API, to build location-based applications. + +Free Content +Device Orientation API - MDN diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/107-payments.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/107-payments.md new file mode 100644 index 000000000..02cd41084 --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/107-payments.md @@ -0,0 +1,13 @@ +# Payments + +The Payment Request API is a web API that allows web developers to build checkout flows within their web applications. It provides a standardized, browser-based interface for collecting payment and shipping information from the user, and it supports a wide range of payment methods, including credit cards, debit cards, and digital wallets. + +To use the Payment Request API, a web page must first create a `PaymentRequest` object and specify the payment and shipping options that are available to the user. The page can then invoke the Payment Request UI by calling the `show()` method on the `PaymentRequest` object. The user can then select their preferred payment and shipping options and confirm the payment, at which point the Payment Request API will return a payment response object that can be used to complete the transaction. + +The Payment Request API is supported by most modern web browsers and is designed to be simple and efficient for both the developer and the user. + +Free Content +Payment Request API - MDN + + + diff --git a/content/roadmaps/100-frontend/content/117-progressive-web-apps/108-credentials.md b/content/roadmaps/100-frontend/content/117-progressive-web-apps/108-credentials.md new file mode 100644 index 000000000..6a5b44b63 --- /dev/null +++ b/content/roadmaps/100-frontend/content/117-progressive-web-apps/108-credentials.md @@ -0,0 +1,10 @@ +# Credentials API + +The Credential Management API is a web API that allows web developers to integrate password-based and federated login flows into their applications. It provides a standardized, browser-based interface for storing and retrieving user credentials, such as username and password combinations and OAuth tokens. + +To use the Credential Management API, a web page must first create a Credential object and specify the credentials that the user wishes to store. The page can then use the navigator.credentials object to store and retrieve the user's credentials. The API provides several methods for storing and retrieving credentials, as well as for prompting the user to sign in or sign up. + +The Credential Management API is supported by most modern web browsers and is designed to improve the security and usability of login flows by allowing the user to store and reuse their credentials across multiple sites and devices. + +Free Content +Credential Management API - MDN diff --git a/content/roadmaps/100-frontend/content/123-bonus-content.md b/content/roadmaps/100-frontend/content/123-bonus-content.md index f31c035fb..b44766698 100644 --- a/content/roadmaps/100-frontend/content/123-bonus-content.md +++ b/content/roadmaps/100-frontend/content/123-bonus-content.md @@ -3,6 +3,7 @@ It is not required to complete the bonus content, it just expands on the topics covered in the roadmap and has the items which were missed in the roadmap. * **UI / UX Knowledge** - Gaining UI/UX knowledge is not a must for a Frontend Developer but having an eye for design and a good understanding of UI/UX will help you in your career. +* **[Design Systems](/design-system)** - Learn how to create and work with design systems. * **Visual Programming** — it is entirely possible to be a successful, competent frontend developer without it, but for many frontend developers this path represents a serious chunk of their workload, and represents a very in-demand option for frontend development – especially for developers who are have a visual aptitude. * **For Animations**: [GSAP](https://greensock.com/gsap/), [Lottie](https://airbnb.design/lottie/), [Framer Motion](https://github.com/framer/motion) or [MoJs](https://mojs.github.io/) * **Web Graphics Library (WebGL)**: [WebGL MDN](https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial), [WebGL Fundamentals](https://webglfundamentals.org/webgl/lessons/webgl-fundamentals.html) diff --git a/public/project/frontend.json b/public/project/frontend.json index 0c08139a1..3bbf64240 100644 --- a/public/project/frontend.json +++ b/public/project/frontend.json @@ -4370,14 +4370,14 @@ "ID": "2", "typeID": "Label", "zOrder": "2", - "measuredW": "35", + "measuredW": "45", "measuredH": "28", - "x": "76", + "x": "65", "y": "8", "properties": { "color": "16777215", "size": "20", - "text": "http" + "text": "https" } }, { @@ -6525,12 +6525,12 @@ "ID": "13902", "typeID": "Arrow", "zOrder": "147", - "w": "114", - "h": "2", + "w": "115", + "h": "6", "measuredW": "150", "measuredH": "100", - "x": "1035", - "y": "2690", + "x": "1038", + "y": "2689", "properties": { "color": "2848996", "curvature": "-1", @@ -6539,16 +6539,16 @@ "rightArrow": "false", "stroke": "dotted", "p0": { - "x": 114, - "y": 1 + "x": 115, + "y": 6 }, "p1": { - "x": 0.5359734790789353, - "y": 0.012722874294418289 + "x": 0.5359734790789354, + "y": 0.012722874294418285 }, "p2": { - "x": -0.014960820635678829, - "y": -0.04934377859763117 + "x": 0.4352964490888098, + "y": -0.2504109310075364 } } }, @@ -9717,245 +9717,10 @@ } } }, - { - "ID": "13957", - "typeID": "__group__", - "zOrder": "197", - "measuredW": "237", - "measuredH": "439", - "w": "237", - "h": "439", - "x": "144", - "y": "2338", - "properties": { - "controlName": "100-progressive-web-apps:apis" - }, - "children": { - "controls": { - "control": [ - { - "ID": "0", - "typeID": "Canvas", - "zOrder": "0", - "w": "228", - "h": "428", - "measuredW": "100", - "measuredH": "70", - "x": "9", - "y": "11" - }, - { - "ID": "1", - "typeID": "TextInput", - "zOrder": "1", - "w": "192", - "measuredW": "147", - "measuredH": "32", - "x": "27", - "y": "139", - "properties": { - "align": "center", - "color": "16776960", - "text": "Service Workers", - "size": "18" - } - }, - { - "ID": "2", - "typeID": "TextInput", - "zOrder": "2", - "w": "192", - "measuredW": "78", - "measuredH": "32", - "x": "27", - "y": "27", - "properties": { - "align": "center", - "color": "16776960", - "text": "Storage", - "size": "18" - } - }, - { - "ID": "3", - "typeID": "TextInput", - "zOrder": "3", - "w": "192", - "measuredW": "84", - "measuredH": "32", - "x": "27", - "y": "177", - "properties": { - "align": "center", - "color": "16770457", - "text": "Location", - "size": "18" - } - }, - { - "ID": "4", - "typeID": "TextInput", - "zOrder": "4", - "w": "192", - "measuredW": "115", - "measuredH": "32", - "x": "27", - "y": "214", - "properties": { - "align": "center", - "color": "16770457", - "text": "Notifications", - "size": "18" - } - }, - { - "ID": "5", - "typeID": "TextInput", - "zOrder": "5", - "w": "192", - "measuredW": "167", - "measuredH": "32", - "x": "27", - "y": "252", - "properties": { - "align": "center", - "color": "16770457", - "text": "Device Orientation", - "size": "18" - } - }, - { - "ID": "6", - "typeID": "TextInput", - "zOrder": "6", - "w": "192", - "measuredW": "94", - "measuredH": "32", - "x": "27", - "y": "289", - "properties": { - "align": "center", - "color": "16770457", - "text": "Payments", - "size": "18" - } - }, - { - "ID": "7", - "typeID": "TextInput", - "zOrder": "7", - "w": "192", - "measuredW": "108", - "measuredH": "32", - "x": "27", - "y": "327", - "properties": { - "align": "center", - "color": "16770457", - "text": "Credentials", - "size": "18" - } - }, - { - "ID": "8", - "typeID": "TextInput", - "zOrder": "8", - "w": "192", - "measuredW": "120", - "measuredH": "32", - "x": "27", - "y": "64", - "properties": { - "align": "center", - "color": "16776960", - "text": "Web Sockets", - "size": "18" - } - }, - { - "ID": "9", - "typeID": "Label", - "zOrder": "9", - "w": "156", - "measuredW": "151", - "measuredH": "25", - "x": "45", - "y": "372", - "properties": { - "size": "17", - "text": "Learn different Web" - } - }, - { - "ID": "10", - "typeID": "Label", - "zOrder": "10", - "w": "148", - "measuredW": "143", - "measuredH": "25", - "x": "49", - "y": "398", - "properties": { - "size": "17", - "text": "APIs used in PWAs" - } - }, - { - "ID": "11", - "typeID": "Icon", - "zOrder": "11", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "0", - "properties": { - "color": "16777215", - "icon": { - "ID": "circle", - "size": "small" - } - } - }, - { - "ID": "12", - "typeID": "Icon", - "zOrder": "12", - "measuredW": "24", - "measuredH": "24", - "x": "0", - "y": "0", - "properties": { - "color": "10066329", - "icon": { - "ID": "check-circle", - "size": "small" - } - } - }, - { - "ID": "13", - "typeID": "TextInput", - "zOrder": "13", - "w": "192", - "measuredW": "170", - "measuredH": "32", - "x": "27", - "y": "102", - "properties": { - "align": "center", - "color": "16776960", - "text": "Server Sent Events", - "size": "18" - } - } - ] - } - } - }, { "ID": "13958", "typeID": "__group__", - "zOrder": "198", + "zOrder": "211", "measuredW": "269", "measuredH": "290", "w": "269", @@ -10126,7 +9891,7 @@ { "ID": "13959", "typeID": "__group__", - "zOrder": "199", + "zOrder": "212", "measuredW": "285", "measuredH": "59", "w": "285", @@ -10205,7 +9970,7 @@ { "ID": "13960", "typeID": "__group__", - "zOrder": "200", + "zOrder": "213", "measuredW": "125", "measuredH": "41", "w": "125", @@ -10284,7 +10049,7 @@ { "ID": "13961", "typeID": "__group__", - "zOrder": "201", + "zOrder": "214", "measuredW": "116", "measuredH": "41", "w": "116", @@ -10363,7 +10128,7 @@ { "ID": "13962", "typeID": "__group__", - "zOrder": "202", + "zOrder": "215", "measuredW": "127", "measuredH": "41", "w": "127", @@ -10459,7 +10224,7 @@ { "ID": "13963", "typeID": "__group__", - "zOrder": "203", + "zOrder": "216", "measuredW": "121", "measuredH": "41", "w": "121", @@ -10555,7 +10320,7 @@ { "ID": "13964", "typeID": "__group__", - "zOrder": "204", + "zOrder": "217", "measuredW": "127", "measuredH": "41", "w": "127", @@ -10651,7 +10416,7 @@ { "ID": "13965", "typeID": "__group__", - "zOrder": "205", + "zOrder": "218", "measuredW": "122", "measuredH": "41", "w": "122", @@ -10747,7 +10512,7 @@ { "ID": "13966", "typeID": "__group__", - "zOrder": "206", + "zOrder": "219", "measuredW": "220", "measuredH": "59", "w": "220", @@ -10827,7 +10592,7 @@ { "ID": "13967", "typeID": "__group__", - "zOrder": "207", + "zOrder": "220", "measuredW": "156", "measuredH": "41", "w": "156", @@ -10907,7 +10672,7 @@ { "ID": "13968", "typeID": "__group__", - "zOrder": "208", + "zOrder": "221", "measuredW": "147", "measuredH": "41", "w": "147", @@ -10954,7 +10719,7 @@ { "ID": "13969", "typeID": "__group__", - "zOrder": "209", + "zOrder": "222", "measuredW": "157", "measuredH": "41", "w": "157", @@ -11034,7 +10799,7 @@ { "ID": "13970", "typeID": "__group__", - "zOrder": "210", + "zOrder": "223", "measuredW": "157", "measuredH": "41", "w": "157", @@ -11130,7 +10895,7 @@ { "ID": "13971", "typeID": "__group__", - "zOrder": "211", + "zOrder": "224", "measuredW": "147", "measuredH": "41", "w": "147", @@ -11178,7 +10943,7 @@ { "ID": "13972", "typeID": "__group__", - "zOrder": "212", + "zOrder": "225", "measuredW": "152", "measuredH": "50", "w": "152", @@ -11257,7 +11022,7 @@ { "ID": "13973", "typeID": "__group__", - "zOrder": "213", + "zOrder": "226", "measuredW": "175", "measuredH": "41", "w": "175", @@ -11353,7 +11118,7 @@ { "ID": "13974", "typeID": "__group__", - "zOrder": "214", + "zOrder": "227", "measuredW": "238", "measuredH": "60", "w": "238", @@ -11432,7 +11197,7 @@ { "ID": "13975", "typeID": "__group__", - "zOrder": "215", + "zOrder": "228", "measuredW": "199", "measuredH": "40", "w": "199", @@ -11512,7 +11277,7 @@ { "ID": "13976", "typeID": "__group__", - "zOrder": "216", + "zOrder": "229", "measuredW": "199", "measuredH": "40", "w": "199", @@ -11592,7 +11357,7 @@ { "ID": "13977", "typeID": "__group__", - "zOrder": "217", + "zOrder": "230", "measuredW": "199", "measuredH": "40", "w": "199", @@ -11672,7 +11437,7 @@ { "ID": "13978", "typeID": "__group__", - "zOrder": "218", + "zOrder": "231", "measuredW": "156", "measuredH": "43", "w": "156", @@ -11752,7 +11517,7 @@ { "ID": "13979", "typeID": "__group__", - "zOrder": "219", + "zOrder": "232", "measuredW": "156", "measuredH": "41", "w": "156", @@ -11832,7 +11597,7 @@ { "ID": "13980", "typeID": "__group__", - "zOrder": "220", + "zOrder": "233", "measuredW": "212", "measuredH": "40", "w": "212", @@ -11928,7 +11693,7 @@ { "ID": "13981", "typeID": "__group__", - "zOrder": "221", + "zOrder": "234", "measuredW": "159", "measuredH": "40", "w": "159", @@ -12021,7 +11786,7 @@ { "ID": "13982", "typeID": "__group__", - "zOrder": "222", + "zOrder": "235", "measuredW": "159", "measuredH": "40", "w": "159", @@ -12130,7 +11895,7 @@ { "ID": "13984", "typeID": "__group__", - "zOrder": "223", + "zOrder": "236", "measuredW": "157", "measuredH": "41", "w": "157", @@ -12211,7 +11976,7 @@ { "ID": "13985", "typeID": "__group__", - "zOrder": "224", + "zOrder": "237", "measuredW": "158", "measuredH": "49", "w": "158", @@ -12290,7 +12055,7 @@ { "ID": "13986", "typeID": "__group__", - "zOrder": "225", + "zOrder": "238", "measuredW": "152", "measuredH": "40", "w": "152", @@ -12385,7 +12150,7 @@ { "ID": "13987", "typeID": "__group__", - "zOrder": "226", + "zOrder": "239", "measuredW": "152", "measuredH": "40", "w": "152", @@ -12480,7 +12245,7 @@ { "ID": "13990", "typeID": "__group__", - "zOrder": "227", + "zOrder": "240", "measuredW": "204", "measuredH": "39", "w": "204", @@ -12559,7 +12324,7 @@ { "ID": "13991", "typeID": "__group__", - "zOrder": "228", + "zOrder": "241", "measuredW": "116", "measuredH": "41", "w": "116", @@ -12638,7 +12403,7 @@ { "ID": "13992", "typeID": "__group__", - "zOrder": "229", + "zOrder": "242", "measuredW": "159", "measuredH": "41", "w": "159", @@ -12717,7 +12482,7 @@ { "ID": "13993", "typeID": "__group__", - "zOrder": "230", + "zOrder": "243", "measuredW": "196", "measuredH": "41", "w": "196", @@ -12827,7 +12592,7 @@ { "ID": "13995", "typeID": "__group__", - "zOrder": "231", + "zOrder": "244", "measuredW": "157", "measuredH": "41", "w": "157", @@ -12906,7 +12671,7 @@ { "ID": "13996", "typeID": "__group__", - "zOrder": "232", + "zOrder": "245", "measuredW": "128", "measuredH": "40", "w": "128", @@ -13031,7 +12796,7 @@ { "ID": "13998", "typeID": "__group__", - "zOrder": "233", + "zOrder": "246", "measuredW": "122", "measuredH": "41", "w": "122", @@ -13185,7 +12950,7 @@ { "ID": "14001", "typeID": "__group__", - "zOrder": "234", + "zOrder": "247", "measuredW": "411", "measuredH": "87", "w": "411", @@ -13306,7 +13071,7 @@ { "ID": "14006", "typeID": "__group__", - "zOrder": "235", + "zOrder": "248", "measuredW": "333", "measuredH": "228", "w": "333", @@ -13363,7 +13128,7 @@ { "ID": "14007", "typeID": "__group__", - "zOrder": "236", + "zOrder": "249", "measuredW": "145", "measuredH": "40", "w": "145", @@ -13458,7 +13223,7 @@ { "ID": "14008", "typeID": "__group__", - "zOrder": "237", + "zOrder": "250", "measuredW": "150", "measuredH": "37", "w": "150", @@ -13553,7 +13318,7 @@ { "ID": "14009", "typeID": "__group__", - "zOrder": "238", + "zOrder": "251", "measuredW": "157", "measuredH": "39", "w": "157", @@ -13648,7 +13413,7 @@ { "ID": "14010", "typeID": "__group__", - "zOrder": "239", + "zOrder": "252", "measuredW": "149", "measuredH": "37", "w": "149", @@ -13743,7 +13508,7 @@ { "ID": "14011", "typeID": "__group__", - "zOrder": "240", + "zOrder": "253", "measuredW": "161", "measuredH": "39", "w": "161", @@ -13838,7 +13603,7 @@ { "ID": "14012", "typeID": "__group__", - "zOrder": "241", + "zOrder": "254", "measuredW": "161", "measuredH": "39", "w": "161", @@ -13929,6 +13694,401 @@ ] } } + }, + { + "ID": "14013", + "typeID": "Canvas", + "zOrder": "197", + "w": "228", + "h": "428", + "measuredW": "100", + "measuredH": "70", + "x": "153", + "y": "2349" + }, + { + "ID": "14022", + "typeID": "Label", + "zOrder": "206", + "w": "156", + "measuredW": "151", + "measuredH": "25", + "x": "189", + "y": "2710", + "properties": { + "size": "17", + "text": "Learn different Web" + } + }, + { + "ID": "14023", + "typeID": "Label", + "zOrder": "207", + "w": "148", + "measuredW": "143", + "measuredH": "25", + "x": "193", + "y": "2736", + "properties": { + "size": "17", + "text": "APIs used in PWAs" + } + }, + { + "ID": "14024", + "typeID": "Icon", + "zOrder": "208", + "measuredW": "24", + "measuredH": "24", + "x": "144", + "y": "2338", + "properties": { + "color": "16777215", + "icon": { + "ID": "circle", + "size": "small" + } + } + }, + { + "ID": "14025", + "typeID": "Icon", + "zOrder": "209", + "measuredW": "24", + "measuredH": "24", + "x": "144", + "y": "2338", + "properties": { + "color": "10066329", + "icon": { + "ID": "check-circle", + "size": "small" + } + } + }, + { + "ID": "14027", + "typeID": "__group__", + "zOrder": "199", + "measuredW": "192", + "measuredH": "32", + "w": "192", + "h": "32", + "x": "171", + "y": "2365", + "properties": { + "controlName": "100-progressive-web-apps:storage" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "192", + "measuredW": "78", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16776960", + "text": "Storage", + "size": "18" + } + } + ] + } + } + }, + { + "ID": "14028", + "typeID": "__group__", + "zOrder": "205", + "measuredW": "192", + "measuredH": "32", + "w": "192", + "h": "32", + "x": "171", + "y": "2402", + "properties": { + "controlName": "101-progressive-web-apps:web-sockets" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "192", + "measuredW": "120", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16776960", + "text": "Web Sockets", + "size": "18" + } + } + ] + } + } + }, + { + "ID": "14029", + "typeID": "__group__", + "zOrder": "210", + "measuredW": "192", + "measuredH": "32", + "w": "192", + "h": "32", + "x": "171", + "y": "2440", + "properties": { + "controlName": "102-progressive-web-apps:server-sent-events" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "192", + "measuredW": "170", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16776960", + "text": "Server Sent Events", + "size": "18" + } + } + ] + } + } + }, + { + "ID": "14030", + "typeID": "__group__", + "zOrder": "198", + "measuredW": "192", + "measuredH": "32", + "w": "192", + "h": "32", + "x": "171", + "y": "2477", + "properties": { + "controlName": "103-progressive-web-apps:service-workers" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "192", + "measuredW": "147", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16776960", + "text": "Service Workers", + "size": "18" + } + } + ] + } + } + }, + { + "ID": "14031", + "typeID": "__group__", + "zOrder": "200", + "measuredW": "192", + "measuredH": "32", + "w": "192", + "h": "32", + "x": "171", + "y": "2515", + "properties": { + "controlName": "104-progressive-web-apps:location" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "192", + "measuredW": "84", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16770457", + "text": "Location", + "size": "18" + } + } + ] + } + } + }, + { + "ID": "14032", + "typeID": "__group__", + "zOrder": "201", + "measuredW": "192", + "measuredH": "32", + "w": "192", + "h": "32", + "x": "171", + "y": "2552", + "properties": { + "controlName": "105-progressive-web-apps:notifications" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "192", + "measuredW": "115", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16770457", + "text": "Notifications", + "size": "18" + } + } + ] + } + } + }, + { + "ID": "14033", + "typeID": "__group__", + "zOrder": "202", + "measuredW": "192", + "measuredH": "32", + "w": "192", + "h": "32", + "x": "171", + "y": "2590", + "properties": { + "controlName": "106-progressive-web-apps:device-orientation" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "192", + "measuredW": "167", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16770457", + "text": "Device Orientation", + "size": "18" + } + } + ] + } + } + }, + { + "ID": "14034", + "typeID": "__group__", + "zOrder": "203", + "measuredW": "192", + "measuredH": "32", + "w": "192", + "h": "32", + "x": "171", + "y": "2627", + "properties": { + "controlName": "107-progressive-web-apps:payments" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "192", + "measuredW": "94", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16770457", + "text": "Payments", + "size": "18" + } + } + ] + } + } + }, + { + "ID": "14035", + "typeID": "__group__", + "zOrder": "204", + "measuredW": "192", + "measuredH": "32", + "w": "192", + "h": "32", + "x": "171", + "y": "2665", + "properties": { + "controlName": "108-progressive-web-apps:credentials" + }, + "children": { + "controls": { + "control": [ + { + "ID": "0", + "typeID": "TextInput", + "zOrder": "0", + "w": "192", + "measuredW": "108", + "measuredH": "32", + "x": "0", + "y": "0", + "properties": { + "align": "center", + "color": "16770457", + "text": "Credentials", + "size": "18" + } + } + ] + } + } } ] },