DEV Community: Maye Edwin

Delete Documents In Cloud Firestore For Web, Update The UI

Maye Edwin — Mon, 10 Feb 2020 14:28:03 +0000

I have been working on some little side project dubbed Lolfacts, while learning much more of Firebase for Web and need to CRUD(Create, Read, Update and Delete) has been evident in the tiny project. Really exciting.

If this is the first time exploring Firebase Cloud Firestore for Web, be sure to have a look at this codelab code snippets and/or take it just to understand how to render each document data into the Front-end using Vanilla ES6.

1. Within the delete element

 // 1. grab the delete element say "del" and listen to a click event
  del.addEventListener("click", event => {
  // 2. prompt to confirm delete
    let result = confirm("Want to delete? This action can not be undone.");
    if (result) {
      // 3. logic to delete the element named say, "lolfact"
      event.stopPropagation();
      let id = lolfact.getAttribute("data-id");
      console.log(id);
      // 4. get the collection to delete from
      db.collection("lolfacts")
        .doc(id)
        .delete();
      // 5. delete it from the parent element to refresh the ui
      app.removeChild(lolfact);
    }
});

Orginally Posted on maye.pwafire.org

🍏 Easy hands-on starter codelab for Firebase Cloud firestore!

Maye Edwin — Fri, 31 Jan 2020 11:59:44 +0000

In this codelab, we're going to learn how to add Firebase to your web app and serve content from the Firebase Cloud Firestore database and make your Web App work offline as well. Cloud Firestore is magical and good for PWAs because of its offline capability!

⚽️ Setting up cloud firestore

⚽️ ES6 Modules

⚽️ Progressive Web App

Codelab url : https://pwafire.org/developer/codelabs/cloud-firestore-for-web/

Progressive Web App Template - GitHub

Maye Edwin — Sun, 07 Jul 2019 13:24:07 +0000

Build your first-pwa

Learn how to build your first progressive web app with pwafire.org in this starter codelab

In this codelab, you'll be able to build a progressive web app with mostly static resources or meant to work best for static web apps or sites.

Using Workbox instead

We will be adding a more advanced codelab to help you learn how to build Progressive Web Apps that are dynamic or for large scale production scenario by having the power to :

choose what to cache
dictate how to cache
decide how long to cache
decide when to cache
decide what resources to cache
decide how much of a resource to cache

Demo in play...

Whoaaa 🎉 we gatchu! You'll be able to finally create a progressive web app that looks like me here

Progressive Web Apps In VS Code

Maye Edwin — Wed, 22 May 2019 10:30:31 +0000

Build Progressive Web Apps in VS Code on the go and like a pro. We have Workbox Support fully stacked too.

About pwafire.org

Our mission is to make your webdev environment fully stacked up for best web development practices with Progressive Web Apps.

We have an Official Developer Guide published here and updated with latest update for this Extension.

Setting up the PWA Development Environment

We have a pwadev tips repo available here to help guide you if you're just starting up or want to have your setup checklist done right.

Setting up the App Manifest and registering the Service Worker

Write the Service Worker and App Manifest really quick and like a pro!

Command	Purpose and where to type
`register service worker`	register service worker in your landing page say `index.html`
`add web manifest to pages`	link `app.webmanifest` to your pages in the `head tag`
`theme color`	add theme color in your pages head tag
`manifest`	add manifest meta data in your empty `app.webmanifest` file

Simple basic Service Worker

Command	Purpose and where to type
`basic service worker`	create simple service worker for simple static sites

Commands to type in your editor for CDN Workbox

Command	Purpose and where to type
`import workbox`	import workbox in your service worker
`workbox.strategies`	add cache strategies in your service worker
`cache assets`	make your JS and CSS ⚡ fast by returning the assets from the cache, while making sure they are updated in the background for the next use in your workbox `service-worker.js` file
`cache images`	serve images quickly from the cache, while making sure you don’t cache them indefinitely, consuming your users' storage in your workbox `service-worker.js` file
`cache fonts`	rely on google fonts or other fonts being available offline after the user has visited your site
`cache external orgins`	cache external resources from external orgins for example boostrap css
`workbox set config`	workbox set config for debug or production builds
`workbox window`	add workbox window in your landing page for faster new service worker installs and refresh
`workbox page reload`	offer a page reload for users
`workbox.cacheableResponse`	cache based on numeric status code, the presence of a header with a specific value, or a combination of the two; learn more here

Setting up Workbox pre-cache

Command	Purpose and where to type
`precache for npm`	workbox precache config code snippet in your say `sw-config.js` file
`workbox-cli devDependencies`	adding workbox cli de dependancies in your `package.json` file
`workbox injectManifest`	add precache versioned urls config in your workbox `service-worker.js` file

Commands to type in your editor for NPM Workbox, using a bundler

Excerpt : When using a bundler to create your service worker, you install the Workbox packages you want to use from npm, and
then you use import statements to directly reference the Workbox modules you want to use.

Command	Purpose and where to type
`import workbox npm modules`	import all workbox npm modules in your workbox `service-worker.js` file
`workbox register route for npm`	matching a route with a string, basically a block of a complete cache route for a resource(s)
`workbox google analytics for npm`	add offline google analytics in your workbox `service-worker.js` file, at the bottom.

Advanced Progressive Web Apps Features

Add Background Sync - To your javascript source folder, create an empty backgroundSync.js file and type the following
keyword in it to add backgroud sync

Command	Purpose and where to type
`background sync`	add background sync in your new `backgroundSync.js` file

Requirements

   "vscode": "^1.8.0"

Installation

Install vscode-pwa. It's available in Visual Studio Marketplace! OR

Launch VS Code Quick Open ( Ctrl + P ), paste the following command and press enter.

   ext install mayeedwin.vscode-pwa

Demo with PWA VS Code in play

Load preview in your browser here

Known Issues

All good to go with beta!

Release Notes

This beta version allows you to import Workbox and use cache strategies like a pro already!

Latest release of vscode-pwa beta!

Enjoy 😊 🐥 and thanks for checking it out. Let's connect on twitter @mayeedwin1 : )

Introducing Progressive Web User Interface 🎉

Maye Edwin — Wed, 24 Apr 2019 07:27:31 +0000

We've had amazing stories so far with Progressive Web Apps and that's just great. They work for every user, regardless of browser choice because they're built with progressive enhancement as a core principle.

✅ Progressive Web in 360°

When thinking about Progressive Web Apps think of the entitre app cylce. From how you deliver resources at your backend to how the pwa looks like when the user interacts with it.

Users do not care about what actually is happening at the backend of your web app or just any app. What they see and how their goals are fullfilled on your web app is king!

Read more about Progressive Web User Interface and how we're working hard to tap into this at pwafire.org in this pwadev doc