Create Account
@@ -253,7 +253,7 @@ export class EmailLoginComponent implements OnInit {
Forgot password?
-{{< /highlight >}}
+```
## Bonus Video
diff --git a/hugo/content/courses/angular/user-feature-module.md b/content/courses/angular/user-feature-module.md
similarity index 91%
rename from hugo/content/courses/angular/user-feature-module.md
rename to content/courses/angular/user-feature-module.md
index 0a91d3bd0..11ac3dfdf 100644
--- a/hugo/content/courses/angular/user-feature-module.md
+++ b/content/courses/angular/user-feature-module.md
@@ -19,10 +19,10 @@ Create a lazy-loaded feature module to handle user sign-in and related tasks.
Generate a feature module with routing and add a component to it.
{{< file "terminal" "command line" >}}
-{{< highlight text >}}
+```text
ng g module user --routing
ng g component user/login-page
-{{< /highlight >}}
+```
### Step 2 - Update the User Routes
@@ -30,7 +30,7 @@ ng g component user/login-page
Add the component to the user module routes.
{{< file "ngts" "user-routing.module.ts" >}}
-{{< highlight typescript >}}
+```typescript
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LoginPageComponent } from './login-page/login-page.component';
@@ -45,14 +45,14 @@ const routes: Routes = [
exports: [RouterModule]
})
export class UserRoutingModule { }
-{{< /highlight >}}
+```
### Step 3 - Update the Root Routes
Use a dynamic import in the root router that references the lazy user module.
{{< file "ngts" "app-routing.module.ts" >}}
-{{< highlight typescript >}}
+```typescript
const routes: Routes = [
{ path: '', component: HomePageComponent },
{
@@ -65,4 +65,4 @@ const routes: Routes = [
exports: [RouterModule]
})
export class AppRoutingModule { }
-{{< /highlight >}}
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/hugo/content/courses/angular/user-google-signin-directive.md b/content/courses/angular/user-google-signin-directive.md
similarity index 91%
rename from hugo/content/courses/angular/user-google-signin-directive.md
rename to content/courses/angular/user-google-signin-directive.md
index ba460df23..f90f409d3 100644
--- a/hugo/content/courses/angular/user-google-signin-directive.md
+++ b/content/courses/angular/user-google-signin-directive.md
@@ -15,9 +15,9 @@ video_length: 4:37
{{< file "terminal" "command line" >}}
-{{< highlight text >}}
+```text
ng g directive user/google-signin
-{{< /highlight >}}
+```
The directive listens to the click event on the host element to trigger the signin process in Firebase.
@@ -25,7 +25,7 @@ The directive listens to the click event on the host element to trigger the sign
{{< file "ngts" "google-signin.directive.ts" >}}
-{{< highlight typescript >}}
+```typescript
import { Directive, HostListener } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
import firebase from 'firebase/app;
@@ -42,7 +42,7 @@ export class GoogleSigninDirective {
}
}
-{{< /highlight >}}
+```
The directive can be attached to any button or clickable element.
@@ -51,7 +51,7 @@ The directive can be attached to any button or clickable element.
Update the Login Page to use the directive on a material button and listen to the AngularFire user.
{{< file "ngts" "login-page.component.ts" >}}
-{{< highlight typescript >}}
+```typescript
import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';
@@ -65,10 +65,10 @@ export class LoginPageComponent {
constructor(public afAuth: AngularFireAuth) { }
}
-{{< /highlight >}}
+```
{{< file "html" "login-page.component.html" >}}
-{{< highlight html >}}
+```html
Login
@@ -84,4 +84,4 @@ export class LoginPageComponent {
Logout
-{{< /highlight >}}
+```
diff --git a/content/courses/dart/_index.md b/content/courses/dart/_index.md
new file mode 100644
index 000000000..d34385b1d
--- /dev/null
+++ b/content/courses/dart/_index.md
@@ -0,0 +1,43 @@
+---
+lastmod: 2022-07-05T10:23:30-09:00
+title: Dart 101
+description: Master the fundamentals of Dart before jumping into a Flutter
+weight: 0
+type: courses
+author: Jeff Delaney
+vimeo: 631163204
+tags:
+ - dart
+ - flutter
+ - pro
+
+stack:
+ - dart
+---
+
+**Dart - The Full Course** is designed to teach you the fundamentals of the Dart language to prepare you for a successful journey into Flutter.
+
+
+## 🦄 What will I learn?
+
+This course provides a tour of [Dart](https://dart.dev/) and teaches essential concepts for Flutter developers. Here's what you'll get out of it...
+
+- 👨🎤 Become confident with the Dart language
+- 🐦 Get Prepared for Flutter
+- 🦺 Master null-safety
+- 🦾 Learn how to use the Dart CLI
+- 🕹️ Practice OOP and Functional Programming Concepts
+- 🌊 Asynchronous programming with Futures & Streams
+
+
+## 🤔 Is this Course Right for Me?
+
+This course is beginner level 🟢 and will walk you through the fundamentals of Dart. It is fast-paced and similar to [my style on YouTube](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA?), but far more in-depth and followed in a long linear format.
+
+### When was the course last updated?
+
+
Updated October 13th, 2021 Dart 2.14
+
+### How do I enroll?
+
+The first few videos are *free*, so just jump in. When you reach a paid module, you will be asked to pay for a single course or upgrade to PRO.
\ No newline at end of file
diff --git a/hugo/content/courses/dart/advanced-future.md b/content/courses/dart/advanced-future.md
similarity index 100%
rename from hugo/content/courses/dart/advanced-future.md
rename to content/courses/dart/advanced-future.md
diff --git a/hugo/content/courses/dart/advanced-packages.md b/content/courses/dart/advanced-packages.md
similarity index 100%
rename from hugo/content/courses/dart/advanced-packages.md
rename to content/courses/dart/advanced-packages.md
diff --git a/hugo/content/courses/dart/advanced-stream.md b/content/courses/dart/advanced-stream.md
similarity index 100%
rename from hugo/content/courses/dart/advanced-stream.md
rename to content/courses/dart/advanced-stream.md
diff --git a/hugo/content/courses/dart/basics-cli.md b/content/courses/dart/basics-cli.md
similarity index 100%
rename from hugo/content/courses/dart/basics-cli.md
rename to content/courses/dart/basics-cli.md
diff --git a/hugo/content/courses/dart/basics-dart-100-seconds.md b/content/courses/dart/basics-dart-100-seconds.md
similarity index 76%
rename from hugo/content/courses/dart/basics-dart-100-seconds.md
rename to content/courses/dart/basics-dart-100-seconds.md
index 645a5be46..c7db3227f 100644
--- a/hugo/content/courses/dart/basics-dart-100-seconds.md
+++ b/content/courses/dart/basics-dart-100-seconds.md
@@ -5,13 +5,10 @@ weight: 10
lastmod: 2021-10-08T11:11:30-09:00
draft: false
vimeo:
-youtube:
+youtube: NrO0CJCbYLA
emoji: 🎯
video_length: 1:51
free: true
chapter_start: Basics
---
-
-{{< youtube NrO0CJCbYLA >}}
-
diff --git a/hugo/content/courses/dart/basics-install.md b/content/courses/dart/basics-install.md
similarity index 100%
rename from hugo/content/courses/dart/basics-install.md
rename to content/courses/dart/basics-install.md
diff --git a/hugo/content/courses/dart/basics-null-safety.md b/content/courses/dart/basics-null-safety.md
similarity index 100%
rename from hugo/content/courses/dart/basics-null-safety.md
rename to content/courses/dart/basics-null-safety.md
diff --git a/hugo/content/courses/dart/basics-variables.md b/content/courses/dart/basics-variables.md
similarity index 100%
rename from hugo/content/courses/dart/basics-variables.md
rename to content/courses/dart/basics-variables.md
diff --git a/hugo/content/courses/dart/classes-basic.md b/content/courses/dart/classes-basic.md
similarity index 100%
rename from hugo/content/courses/dart/classes-basic.md
rename to content/courses/dart/classes-basic.md
diff --git a/hugo/content/courses/dart/classes-constructors.md b/content/courses/dart/classes-constructors.md
similarity index 100%
rename from hugo/content/courses/dart/classes-constructors.md
rename to content/courses/dart/classes-constructors.md
diff --git a/hugo/content/courses/dart/classes-extend.md b/content/courses/dart/classes-extend.md
similarity index 100%
rename from hugo/content/courses/dart/classes-extend.md
rename to content/courses/dart/classes-extend.md
diff --git a/hugo/content/courses/dart/classes-generics.md b/content/courses/dart/classes-generics.md
similarity index 100%
rename from hugo/content/courses/dart/classes-generics.md
rename to content/courses/dart/classes-generics.md
diff --git a/hugo/content/courses/dart/classes-interfaces.md b/content/courses/dart/classes-interfaces.md
similarity index 100%
rename from hugo/content/courses/dart/classes-interfaces.md
rename to content/courses/dart/classes-interfaces.md
diff --git a/hugo/content/courses/dart/classes-mixin.md b/content/courses/dart/classes-mixin.md
similarity index 99%
rename from hugo/content/courses/dart/classes-mixin.md
rename to content/courses/dart/classes-mixin.md
index 3b57a9ce5..409b79cbb 100644
--- a/hugo/content/courses/dart/classes-mixin.md
+++ b/content/courses/dart/classes-mixin.md
@@ -9,6 +9,7 @@ emoji: 🎛️
video_length: 1:07
---
+
## What are mixins?
A mixin is just like a class, it can have methods and properties, but it can't be instantiated.
diff --git a/hugo/content/courses/dart/img/featured.jpg b/content/courses/dart/img/featured.jpg
similarity index 100%
rename from hugo/content/courses/dart/img/featured.jpg
rename to content/courses/dart/img/featured.jpg
diff --git a/hugo/content/courses/dart/img/featured.png b/content/courses/dart/img/featured.png
similarity index 100%
rename from hugo/content/courses/dart/img/featured.png
rename to content/courses/dart/img/featured.png
diff --git a/hugo/content/courses/dart/img/featured.webp b/content/courses/dart/img/featured.webp
similarity index 100%
rename from hugo/content/courses/dart/img/featured.webp
rename to content/courses/dart/img/featured.webp
diff --git a/hugo/content/courses/dart/syntax-control-flow.md b/content/courses/dart/syntax-control-flow.md
similarity index 100%
rename from hugo/content/courses/dart/syntax-control-flow.md
rename to content/courses/dart/syntax-control-flow.md
diff --git a/hugo/content/courses/dart/syntax-functions.md b/content/courses/dart/syntax-functions.md
similarity index 100%
rename from hugo/content/courses/dart/syntax-functions.md
rename to content/courses/dart/syntax-functions.md
diff --git a/hugo/content/courses/dart/syntax-list.md b/content/courses/dart/syntax-list.md
similarity index 100%
rename from hugo/content/courses/dart/syntax-list.md
rename to content/courses/dart/syntax-list.md
diff --git a/hugo/content/courses/dart/syntax-map.md b/content/courses/dart/syntax-map.md
similarity index 100%
rename from hugo/content/courses/dart/syntax-map.md
rename to content/courses/dart/syntax-map.md
diff --git a/hugo/content/courses/dart/syntax-operators.md b/content/courses/dart/syntax-operators.md
similarity index 100%
rename from hugo/content/courses/dart/syntax-operators.md
rename to content/courses/dart/syntax-operators.md
diff --git a/content/courses/firebase-security/_index.md b/content/courses/firebase-security/_index.md
new file mode 100644
index 000000000..57a03f9e6
--- /dev/null
+++ b/content/courses/firebase-security/_index.md
@@ -0,0 +1,41 @@
+---
+lastmod: 2020-12-02T10:23:30-09:00
+title: Firebase Security Course
+description: Secure your Firebase app by mastering security rules
+weight: 0
+type: courses
+tags:
+ - firebase
+ - security
+ - javascript
+ - pro
+
+author: Jeff Delaney
+vimeo: 486806998
+stack:
+ - firebase
+ - js
+---
+
+**Firebase Security - The Full Course** will teach you how to write, organize, and test *Firestore security rules*. The goal is to prepare developers for the safe and secure launch of a Firebase project.
+
+## 🛡️ What will I Learn?
+
+- Firestore security fundamentals.
+- How to audit a Firebase app for security vulnerabilities.
+- Common use-cases including role-based auth, access-control lists, and more.
+- Advanced techniques and code optimization tips
+- Unit testing and debugging reports
+
+## 🤔 Is this Course Right for Me?
+
+This course is designed for experienced Firebase developers. It assumes you have built or are currently building a Firebase app, with the intention of shipping it without security vulnerabilities. It is fast-paced and similar to [my style on YouTube](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA?), but far more in-depth and comprehensive.
+
+The course focuses on [Cloud Firestore](https://firebase.google.com/docs/firestore) - if you're looking for specific Realtime Database techniques you may be disappointed.
+
+## Is this Course Updated?
+
+The last code review and update was completed on **December 3rd, 2020** using Firebase rules version `2.0`. The course receives regular updates, especially to address breaking changes Firebase.
+
+
+
diff --git a/hugo/content/courses/firebase-security/advanced-chat-example.md b/content/courses/firebase-security/advanced-chat-example.md
similarity index 95%
rename from hugo/content/courses/firebase-security/advanced-chat-example.md
rename to content/courses/firebase-security/advanced-chat-example.md
index 8b4a06424..641bb3323 100644
--- a/hugo/content/courses/firebase-security/advanced-chat-example.md
+++ b/content/courses/firebase-security/advanced-chat-example.md
@@ -8,6 +8,7 @@ vimeo: 486584623
emoji: 🛡️
video_length: 4:46
---
+Firebase Rules for hypothertical chat application
{{< file "firebase" "firestore.rules" >}}
```javascript
diff --git a/hugo/content/courses/firebase-security/advanced-functions.md b/content/courses/firebase-security/advanced-functions.md
similarity index 100%
rename from hugo/content/courses/firebase-security/advanced-functions.md
rename to content/courses/firebase-security/advanced-functions.md
diff --git a/hugo/content/courses/firebase-security/advanced-read-db.md b/content/courses/firebase-security/advanced-read-db.md
similarity index 100%
rename from hugo/content/courses/firebase-security/advanced-read-db.md
rename to content/courses/firebase-security/advanced-read-db.md
diff --git a/hugo/content/courses/firebase-security/advanced-roles-example.md b/content/courses/firebase-security/advanced-roles-example.md
similarity index 100%
rename from hugo/content/courses/firebase-security/advanced-roles-example.md
rename to content/courses/firebase-security/advanced-roles-example.md
diff --git a/hugo/content/courses/firebase-security/basics-allow.md b/content/courses/firebase-security/basics-allow.md
similarity index 100%
rename from hugo/content/courses/firebase-security/basics-allow.md
rename to content/courses/firebase-security/basics-allow.md
diff --git a/hugo/content/courses/firebase-security/basics-conditions.md b/content/courses/firebase-security/basics-conditions.md
similarity index 100%
rename from hugo/content/courses/firebase-security/basics-conditions.md
rename to content/courses/firebase-security/basics-conditions.md
diff --git a/hugo/content/courses/firebase-security/basics-examples.md b/content/courses/firebase-security/basics-examples.md
similarity index 100%
rename from hugo/content/courses/firebase-security/basics-examples.md
rename to content/courses/firebase-security/basics-examples.md
diff --git a/hugo/content/courses/firebase-security/basics-paths.md b/content/courses/firebase-security/basics-paths.md
similarity index 100%
rename from hugo/content/courses/firebase-security/basics-paths.md
rename to content/courses/firebase-security/basics-paths.md
diff --git a/hugo/content/courses/firebase-security/img/featured.jpg b/content/courses/firebase-security/img/featured.jpg
similarity index 100%
rename from hugo/content/courses/firebase-security/img/featured.jpg
rename to content/courses/firebase-security/img/featured.jpg
diff --git a/hugo/content/courses/firebase-security/img/featured.png b/content/courses/firebase-security/img/featured.png
similarity index 100%
rename from hugo/content/courses/firebase-security/img/featured.png
rename to content/courses/firebase-security/img/featured.png
diff --git a/hugo/content/courses/firebase-security/img/featured.webp b/content/courses/firebase-security/img/featured.webp
similarity index 100%
rename from hugo/content/courses/firebase-security/img/featured.webp
rename to content/courses/firebase-security/img/featured.webp
diff --git a/hugo/content/courses/firebase-security/intro-firebase-security-100-seconds.md b/content/courses/firebase-security/intro-firebase-security-100-seconds.md
similarity index 75%
rename from hugo/content/courses/firebase-security/intro-firebase-security-100-seconds.md
rename to content/courses/firebase-security/intro-firebase-security-100-seconds.md
index fe3496323..535fd535e 100644
--- a/hugo/content/courses/firebase-security/intro-firebase-security-100-seconds.md
+++ b/content/courses/firebase-security/intro-firebase-security-100-seconds.md
@@ -4,13 +4,9 @@ description: A quick primer on Firestore Security rules
weight: 2
lastmod: 2020-11-20T10:11:30-02:00
draft: false
-vimeo:
+youtube: sw1Uy3zwsLs
emoji: 🔥
chapter_start: Intro
video_length: 2:15
free: true
----
-
-
-{{< youtube sw1Uy3zwsLs >}}
-
+---
\ No newline at end of file
diff --git a/hugo/content/courses/firebase-security/intro-get-started.md b/content/courses/firebase-security/intro-get-started.md
similarity index 100%
rename from hugo/content/courses/firebase-security/intro-get-started.md
rename to content/courses/firebase-security/intro-get-started.md
diff --git a/hugo/content/courses/firebase-security/testing-helpers.md b/content/courses/firebase-security/testing-helpers.md
similarity index 100%
rename from hugo/content/courses/firebase-security/testing-helpers.md
rename to content/courses/firebase-security/testing-helpers.md
diff --git a/hugo/content/courses/firebase-security/testing-report.md b/content/courses/firebase-security/testing-report.md
similarity index 100%
rename from hugo/content/courses/firebase-security/testing-report.md
rename to content/courses/firebase-security/testing-report.md
diff --git a/hugo/content/courses/firebase-security/testing-rules.md b/content/courses/firebase-security/testing-rules.md
similarity index 100%
rename from hugo/content/courses/firebase-security/testing-rules.md
rename to content/courses/firebase-security/testing-rules.md
diff --git a/hugo/content/courses/firebase-security/testing-setup.md b/content/courses/firebase-security/testing-setup.md
similarity index 100%
rename from hugo/content/courses/firebase-security/testing-setup.md
rename to content/courses/firebase-security/testing-setup.md
diff --git a/content/courses/firestore-data-modeling/_index.md b/content/courses/firestore-data-modeling/_index.md
new file mode 100644
index 000000000..9eaa04967
--- /dev/null
+++ b/content/courses/firestore-data-modeling/_index.md
@@ -0,0 +1,30 @@
+---
+lastmod: 2021-8-26T10:23:30-09:00
+title: Firestore Data Modeling
+description: Learn how to query and model data in Firestore by example.
+weight: 0
+type: courses
+tags:
+ - firestore
+ - firebase
+ - pro
+
+author: Jeff Delaney
+vimeo: 330781388
+stack:
+ - firebase
+ - js
+---
+
+The **Firestore Data Modeling Course** provides a foundation for modeling data relationships in NoSQL, while optimizing queries for performance, cost, and complexity. Determining the the optimal data model in [Cloud Firestore](https://firebase.google.com/docs/firestore/) is not an easy task because you need to anticipate your app's UI/UX requirements in advance. Failure to consider the tradeoffs between various data models could lead to poor app performance and/or unnecessary cloud computing expenses. The goal of this course is to teach you the concepts necessary to *make good decisions* related to data modeling that minimize costs and maximize read performance.
+
+## Topics Covered
+
+- Core Concepts in Firestore.
+- Comparisons to SQL data modeling.
+- Advanced methods for reading and querying data.
+- Relational data modeling concepts like one-to-one, one-to-many, and many-to-many.
+- How to avoid common pitfalls and anti-patterns.
+- Examples of data models for common real-world app features.
+
+
diff --git a/hugo/content/courses/firestore-data-modeling/advanced-aggregation.md b/content/courses/firestore-data-modeling/advanced-aggregation.md
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/advanced-aggregation.md
rename to content/courses/firestore-data-modeling/advanced-aggregation.md
diff --git a/hugo/content/courses/firestore-data-modeling/advanced-duplication.md b/content/courses/firestore-data-modeling/advanced-duplication.md
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/advanced-duplication.md
rename to content/courses/firestore-data-modeling/advanced-duplication.md
diff --git a/hugo/content/courses/firestore-data-modeling/basics-collections-documents.md b/content/courses/firestore-data-modeling/basics-collections-documents.md
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/basics-collections-documents.md
rename to content/courses/firestore-data-modeling/basics-collections-documents.md
diff --git a/hugo/content/courses/firestore-data-modeling/basics-datatypes.md b/content/courses/firestore-data-modeling/basics-datatypes.md
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/basics-datatypes.md
rename to content/courses/firestore-data-modeling/basics-datatypes.md
diff --git a/hugo/content/courses/firestore-data-modeling/basics-indexes.md b/content/courses/firestore-data-modeling/basics-indexes.md
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/basics-indexes.md
rename to content/courses/firestore-data-modeling/basics-indexes.md
diff --git a/hugo/content/courses/firestore-data-modeling/basics-query-collections.md b/content/courses/firestore-data-modeling/basics-query-collections.md
similarity index 93%
rename from hugo/content/courses/firestore-data-modeling/basics-query-collections.md
rename to content/courses/firestore-data-modeling/basics-query-collections.md
index 7957a3b4a..eff23c6fd 100644
--- a/hugo/content/courses/firestore-data-modeling/basics-query-collections.md
+++ b/content/courses/firestore-data-modeling/basics-query-collections.md
@@ -12,7 +12,7 @@ video_length: 3:22
Examples of how to make queries in Firestore that resemble SQL.
{{< file "js" "firestore.js" >}}
-{{< highlight javascript >}}
+```js
// Basic Where
const rangeQuery = db.collection('users').where('age', '>=', 21);
@@ -30,4 +30,4 @@ const q2 = db.collection('users').where('age', '==', 25);
// NOT
const not1 = db.collection('users').where('age', '>', 21);
const not2 = db.collection('users').where('age', '<', 21);
-{{< /highlight >}}
+```
diff --git a/hugo/content/courses/firestore-data-modeling/basics-read-documents.md b/content/courses/firestore-data-modeling/basics-read-documents.md
similarity index 93%
rename from hugo/content/courses/firestore-data-modeling/basics-read-documents.md
rename to content/courses/firestore-data-modeling/basics-read-documents.md
index 73bc8319d..cd182f076 100644
--- a/hugo/content/courses/firestore-data-modeling/basics-read-documents.md
+++ b/content/courses/firestore-data-modeling/basics-read-documents.md
@@ -13,11 +13,11 @@ video_length: 2:55
Use the helper function below to query an array of document IDs. This is especially useful when you have a many-to-many data model that references IDs from a separate collection.
{{< file "js" "firestore.js" >}}
-{{< highlight javascript >}}
+```js
// Helper: Reads an array of IDs from a collection concurrently
const readIds = async (collection, ids) => {
const reads = ids.map(id => collection.doc(id).get() );
const result = await Promise.all(reads);
return result.map(v => v.data());
}
-{{< /highlight >}}
+```
diff --git a/hugo/content/courses/firestore-data-modeling/basics-security.md b/content/courses/firestore-data-modeling/basics-security.md
similarity index 93%
rename from hugo/content/courses/firestore-data-modeling/basics-security.md
rename to content/courses/firestore-data-modeling/basics-security.md
index 57fc1963d..71e57ef35 100644
--- a/hugo/content/courses/firestore-data-modeling/basics-security.md
+++ b/content/courses/firestore-data-modeling/basics-security.md
@@ -11,7 +11,7 @@ video_length: 1:22
---
{{< file "firebase" "rules.json" >}}
-{{< highlight javascript >}}
+```js
service cloud.firestore {
match /databases/{database}/documents {
match /{document=**} {
@@ -34,4 +34,4 @@ service cloud.firestore {
}
}
-{{< /highlight >}}
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/hugo/content/courses/firestore-data-modeling/bonus-collection-group.md b/content/courses/firestore-data-modeling/bonus-collection-group.md
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/bonus-collection-group.md
rename to content/courses/firestore-data-modeling/bonus-collection-group.md
diff --git a/content/courses/firestore-data-modeling/bonus-top-five.md b/content/courses/firestore-data-modeling/bonus-top-five.md
new file mode 100644
index 000000000..003a05748
--- /dev/null
+++ b/content/courses/firestore-data-modeling/bonus-top-five.md
@@ -0,0 +1,12 @@
+---
+title: Top Five
+lastmod: 2019-04-16T09:12:30-08:00
+draft: false
+description: Five Firestore Data Modeling Techniques from the Course
+weight: 21
+emoji: 🍰
+youtube: 35RlydUf6xo
+chapter_start: Bonus Round
+free: true
+video_length: 11:45
+---
diff --git a/hugo/content/courses/firestore-data-modeling/img/1-account.png b/content/courses/firestore-data-modeling/img/1-account.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/1-account.png
rename to content/courses/firestore-data-modeling/img/1-account.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/1-fa.png b/content/courses/firestore-data-modeling/img/1-fa.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/1-fa.png
rename to content/courses/firestore-data-modeling/img/1-fa.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/ACL.png b/content/courses/firestore-data-modeling/img/ACL.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/ACL.png
rename to content/courses/firestore-data-modeling/img/ACL.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/Cloud Functions.png b/content/courses/firestore-data-modeling/img/Cloud Functions.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/Cloud Functions.png
rename to content/courses/firestore-data-modeling/img/Cloud Functions.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/duplication.png b/content/courses/firestore-data-modeling/img/duplication.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/duplication.png
rename to content/courses/firestore-data-modeling/img/duplication.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/featured.jpg b/content/courses/firestore-data-modeling/img/featured.jpg
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/featured.jpg
rename to content/courses/firestore-data-modeling/img/featured.jpg
diff --git a/hugo/content/courses/firestore-data-modeling/img/featured.png b/content/courses/firestore-data-modeling/img/featured.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/featured.png
rename to content/courses/firestore-data-modeling/img/featured.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/featured.webp b/content/courses/firestore-data-modeling/img/featured.webp
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/featured.webp
rename to content/courses/firestore-data-modeling/img/featured.webp
diff --git a/hugo/content/courses/firestore-data-modeling/img/many-to-many-array.png b/content/courses/firestore-data-modeling/img/many-to-many-array.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/many-to-many-array.png
rename to content/courses/firestore-data-modeling/img/many-to-many-array.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/many-to-many-bucket.png b/content/courses/firestore-data-modeling/img/many-to-many-bucket.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/many-to-many-bucket.png
rename to content/courses/firestore-data-modeling/img/many-to-many-bucket.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/many-to-many-composite.png b/content/courses/firestore-data-modeling/img/many-to-many-composite.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/many-to-many-composite.png
rename to content/courses/firestore-data-modeling/img/many-to-many-composite.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/many-to-many-map.png b/content/courses/firestore-data-modeling/img/many-to-many-map.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/many-to-many-map.png
rename to content/courses/firestore-data-modeling/img/many-to-many-map.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/one-to-many-bucket.png b/content/courses/firestore-data-modeling/img/one-to-many-bucket.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/one-to-many-bucket.png
rename to content/courses/firestore-data-modeling/img/one-to-many-bucket.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/one-to-many-embed.png b/content/courses/firestore-data-modeling/img/one-to-many-embed.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/one-to-many-embed.png
rename to content/courses/firestore-data-modeling/img/one-to-many-embed.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/one-to-many-root.png b/content/courses/firestore-data-modeling/img/one-to-many-root.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/one-to-many-root.png
rename to content/courses/firestore-data-modeling/img/one-to-many-root.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/one-to-many-subcol.png b/content/courses/firestore-data-modeling/img/one-to-many-subcol.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/one-to-many-subcol.png
rename to content/courses/firestore-data-modeling/img/one-to-many-subcol.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/roles-1.png b/content/courses/firestore-data-modeling/img/roles-1.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/roles-1.png
rename to content/courses/firestore-data-modeling/img/roles-1.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/roles.png b/content/courses/firestore-data-modeling/img/roles.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/roles.png
rename to content/courses/firestore-data-modeling/img/roles.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/social-feed.png b/content/courses/firestore-data-modeling/img/social-feed.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/social-feed.png
rename to content/courses/firestore-data-modeling/img/social-feed.png
diff --git a/hugo/content/courses/firestore-data-modeling/img/votes.png b/content/courses/firestore-data-modeling/img/votes.png
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/img/votes.png
rename to content/courses/firestore-data-modeling/img/votes.png
diff --git a/hugo/content/courses/firestore-data-modeling/intro-course-resources.md b/content/courses/firestore-data-modeling/intro-course-resources.md
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/intro-course-resources.md
rename to content/courses/firestore-data-modeling/intro-course-resources.md
diff --git a/hugo/content/courses/firestore-data-modeling/intro-relational-data-sql-vs-nosql.md b/content/courses/firestore-data-modeling/intro-relational-data-sql-vs-nosql.md
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/intro-relational-data-sql-vs-nosql.md
rename to content/courses/firestore-data-modeling/intro-relational-data-sql-vs-nosql.md
diff --git a/hugo/content/courses/firestore-data-modeling/intro-what-is-firestore.md b/content/courses/firestore-data-modeling/intro-what-is-firestore.md
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/intro-what-is-firestore.md
rename to content/courses/firestore-data-modeling/intro-what-is-firestore.md
diff --git a/hugo/content/courses/firestore-data-modeling/models-access-control-list.md b/content/courses/firestore-data-modeling/models-access-control-list.md
similarity index 93%
rename from hugo/content/courses/firestore-data-modeling/models-access-control-list.md
rename to content/courses/firestore-data-modeling/models-access-control-list.md
index 0f3b7b248..8f0d771d2 100644
--- a/hugo/content/courses/firestore-data-modeling/models-access-control-list.md
+++ b/content/courses/firestore-data-modeling/models-access-control-list.md
@@ -12,13 +12,13 @@ video_length: 2:26
Sample Firestore security rules for an Access Control List (ACL), where the content determines which users have authorization.
{{< file "firebase" "rules.json" >}}
-{{< highlight js >}}
+```js
match /posts/{document} {
allow read;
allow write: if resource.data.members.hasAny(request.auth.uid);
}
-{{< /highlight >}}
+```
{{< figure src="/courses/firestore-data-modeling/img/ACL.png" caption="example of an Access Control List in Firestore" >}}
\ No newline at end of file
diff --git a/hugo/content/courses/firestore-data-modeling/models-roles.md b/content/courses/firestore-data-modeling/models-roles.md
similarity index 94%
rename from hugo/content/courses/firestore-data-modeling/models-roles.md
rename to content/courses/firestore-data-modeling/models-roles.md
index a3f2a1235..20c222d27 100644
--- a/hugo/content/courses/firestore-data-modeling/models-roles.md
+++ b/content/courses/firestore-data-modeling/models-roles.md
@@ -12,7 +12,7 @@ video_length: 3:25
Sample Firestore rules for Role-based Authorization where the user document determines the access level.
{{< file "firebase" "rules.json" >}}
-{{< highlight js >}}
+```js
match /posts/{document} {
function getRoles() {
@@ -23,4 +23,4 @@ match /posts/{document} {
allow update: if getRoles().hasAny(['admin', 'editor']) == true;
allow write: if getRoles().hasAny(['admin']) == true;
}
-{{< /highlight >}}
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/hugo/content/courses/firestore-data-modeling/models-social-feed.md b/content/courses/firestore-data-modeling/models-social-feed.md
similarity index 96%
rename from hugo/content/courses/firestore-data-modeling/models-social-feed.md
rename to content/courses/firestore-data-modeling/models-social-feed.md
index aada83f71..8eb7d90fc 100644
--- a/hugo/content/courses/firestore-data-modeling/models-social-feed.md
+++ b/content/courses/firestore-data-modeling/models-social-feed.md
@@ -12,7 +12,7 @@ video_length: 4:21
The code below uses this data model to follow/unfollow users & query the most recent posts from users that are being followed.
{{< file "js" "firestore.js" >}}
-{{< highlight javascript >}}
+```js
import { db } from './config';
import firebase from 'firebase/app;
const remove = firebase.firestore.FieldValue.arrayRemove;
@@ -56,7 +56,7 @@ export const getFeed = async() => {
// render sortedPosts in DOM
}
-{{< /highlight >}}
+```
{{< figure src="/courses/firestore-data-modeling/img/social-feed.png" >}}
\ No newline at end of file
diff --git a/hugo/content/courses/firestore-data-modeling/models-tree.md b/content/courses/firestore-data-modeling/models-tree.md
similarity index 91%
rename from hugo/content/courses/firestore-data-modeling/models-tree.md
rename to content/courses/firestore-data-modeling/models-tree.md
index a46ff3d41..a5194d18d 100644
--- a/hugo/content/courses/firestore-data-modeling/models-tree.md
+++ b/content/courses/firestore-data-modeling/models-tree.md
@@ -11,7 +11,7 @@ video_length: 3:07
{{< file "js" "firestore.js" >}}
-{{< highlight typescript >}}
+```typescript
const topLevel = db.collection('comments').where('parent', '==', false);
@@ -23,4 +23,4 @@ const traverseAll = (id) => {
.where('parent', '>=', id)
.where('parent', '<=', `${id}~`)
}
-{{< /highlight >}}
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/hugo/content/courses/firestore-data-modeling/models-votes.md b/content/courses/firestore-data-modeling/models-votes.md
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/models-votes.md
rename to content/courses/firestore-data-modeling/models-votes.md
diff --git a/hugo/content/courses/firestore-data-modeling/relational-cardinality.md b/content/courses/firestore-data-modeling/relational-cardinality.md
similarity index 100%
rename from hugo/content/courses/firestore-data-modeling/relational-cardinality.md
rename to content/courses/firestore-data-modeling/relational-cardinality.md
diff --git a/hugo/content/courses/firestore-data-modeling/relational-many-to-many.md b/content/courses/firestore-data-modeling/relational-many-to-many.md
similarity index 96%
rename from hugo/content/courses/firestore-data-modeling/relational-many-to-many.md
rename to content/courses/firestore-data-modeling/relational-many-to-many.md
index 44b93e2c7..8c8157515 100644
--- a/hugo/content/courses/firestore-data-modeling/relational-many-to-many.md
+++ b/content/courses/firestore-data-modeling/relational-many-to-many.md
@@ -10,7 +10,7 @@ video_length: 4:09
---
{{< file "js" "firestore.js" >}}
-{{< highlight javascript >}}
+```js
const authorId = 'dr-seuss';
const bookId = 'lorax';
@@ -48,4 +48,4 @@ const getLikedBooks = async() => {
getLikedBooks()
-{{< /highlight >}}
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/hugo/content/courses/firestore-data-modeling/relational-one-to-many.md b/content/courses/firestore-data-modeling/relational-one-to-many.md
similarity index 92%
rename from hugo/content/courses/firestore-data-modeling/relational-one-to-many.md
rename to content/courses/firestore-data-modeling/relational-one-to-many.md
index 08baa7c24..8382ddbfc 100644
--- a/hugo/content/courses/firestore-data-modeling/relational-one-to-many.md
+++ b/content/courses/firestore-data-modeling/relational-one-to-many.md
@@ -10,7 +10,7 @@ video_length: 2:20
---
{{< file "js" "firestore.js" >}}
-{{< highlight javascript >}}
+```js
const authorId = 'dr-seuss';
// 4. Embedded One-to-Many
@@ -25,4 +25,4 @@ const books = db.collection('authors').doc(authorId).collection('books');
const booksFrom1971 = db.collection('books')
.where('author', '==', authorId)
.where('published', '>', 1971);
-{{< /highlight >}}
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/hugo/content/courses/firestore-data-modeling/relational-one-to-one.md b/content/courses/firestore-data-modeling/relational-one-to-one.md
similarity index 94%
rename from hugo/content/courses/firestore-data-modeling/relational-one-to-one.md
rename to content/courses/firestore-data-modeling/relational-one-to-one.md
index 70c9b2418..93983a1f4 100644
--- a/hugo/content/courses/firestore-data-modeling/relational-one-to-one.md
+++ b/content/courses/firestore-data-modeling/relational-one-to-one.md
@@ -10,7 +10,7 @@ video_length: 2:01
---
{{< file "js" "firestore.js" >}}
-{{< highlight javascript >}}
+```js
const userId = 'ayn-rand';
// 1. Embedded, all data contained on single document, One-to-few
@@ -29,4 +29,4 @@ const getAccount = async (userId) => {
return db.collection('accounts').doc(user.accountId)
}
-{{< /highlight >}}
\ No newline at end of file
+```
\ No newline at end of file
diff --git a/content/courses/flutter-firebase/_index.md b/content/courses/flutter-firebase/_index.md
new file mode 100644
index 000000000..f7075e584
--- /dev/null
+++ b/content/courses/flutter-firebase/_index.md
@@ -0,0 +1,82 @@
+---
+lastmod: 2022-07-15T10:23:30-09:00
+title: Flutter Firebase
+description: Build a full-stack Flutter app with Firebase from scratch.
+weight: 0
+author: Jeff Delaney
+type: courses
+vimeo: 645895410
+tags:
+ - flutter
+ - firebase
+ - pro
+
+stack:
+ - flutter
+ - firebase
+ - dart
+---
+
+
+
+**Flutter Firebase - The Full Course** will take you from zero to a complex production-ready iOS or Android app using real-world cloud infrastructure.
+
+{{< figure src="/img/testimonial/flutter-testimonial.png" >}}
+
+## ⚡ What will I build?
+
+
Updated Sep 15th, 2022 Flutter v3.1
+
+This is a project-based course that will teach you how to build a multiple choice quiz app, inspired by apps like Duolingo and QuizUp. The app implements user authentication (Sign in with Google or Apple), tracks quiz progress in Firestore, uses dynamic animations, and shares data between screens.
+
+A quiz was chosen because it provides a
moderate amount of complexity with plenty of variety between learning concepts. My mission is to teach non-trivial concepts without getting bogged down into repetitive or boring tasks.
+
+{{< figure src="/courses/flutter-firebase/img/app-screens-trans.png" caption="Screenshots from the demo app" >}}
+
+
+## 🕊️ What will I Learn?
+
+- 👨🎤 Build a complete Flutter app with Firebase
+- 🐣 Master the most common Flutter UI widgets
+- 🔏 User Authentication (Apple, Google, Anonymous)
+- ⚒️ State Management with Provider
+- 🔥 Model relational Firestore data
+- 🎭 Animation for realtime data streams
+- ⚓ Organize large Flutter projects
+- 🤖 Convert Firestore data to Dart Classes with JSON Serializable
+- 🦺 Null safety
+- 🚀 Deploy to the Apple App Store and Google Play
+
+
+## 🤔 Is this Course Right for Me?
+
+This course is intermediate level and designed to help you become a productive full-stack Flutter app developer. It assumes you have some basic knowledge of programming, ideally in a language similar to JavaScript, C#, or Java. It is fast-paced and similar to [my style on YouTube](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA?), but far more in-depth and comprehensive.
+
+If you're new to programming consider going through the [Dart Language Course](/courses/dart) first.
+
+
+
+## 🚀 Test Drive
+
+You can download the app we're building on Google Play or the App Store, so give it a test drive before you enroll.
+
+
+
+
+
+
+## How do I enroll?
+
+The first few videos are *free*, so just dive in 🤿. When you reach a paid module, you will be asked to pay for a single course or upgrade to PRO.
+
+
+
+
diff --git a/hugo/content/courses/flutter-firebase/auth-apple.md b/content/courses/flutter-firebase/auth-apple.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/auth-apple.md
rename to content/courses/flutter-firebase/auth-apple.md
diff --git a/hugo/content/courses/flutter-firebase/auth-google.md b/content/courses/flutter-firebase/auth-google.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/auth-google.md
rename to content/courses/flutter-firebase/auth-google.md
diff --git a/hugo/content/courses/flutter-firebase/auth-login-screen.md b/content/courses/flutter-firebase/auth-login-screen.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/auth-login-screen.md
rename to content/courses/flutter-firebase/auth-login-screen.md
diff --git a/hugo/content/courses/flutter-firebase/auth-stream.md b/content/courses/flutter-firebase/auth-stream.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/auth-stream.md
rename to content/courses/flutter-firebase/auth-stream.md
diff --git a/hugo/content/courses/flutter-firebase/basic-async.md b/content/courses/flutter-firebase/basic-async.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/basic-async.md
rename to content/courses/flutter-firebase/basic-async.md
diff --git a/hugo/content/courses/flutter-firebase/basic-provider.md b/content/courses/flutter-firebase/basic-provider.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/basic-provider.md
rename to content/courses/flutter-firebase/basic-provider.md
diff --git a/hugo/content/courses/flutter-firebase/basic-training.md b/content/courses/flutter-firebase/basic-training.md
similarity index 98%
rename from hugo/content/courses/flutter-firebase/basic-training.md
rename to content/courses/flutter-firebase/basic-training.md
index f4733da67..4da23bfbb 100644
--- a/hugo/content/courses/flutter-firebase/basic-training.md
+++ b/content/courses/flutter-firebase/basic-training.md
@@ -9,12 +9,9 @@ vimeo:
free: true
video_length: 12:05
chapter_start: Basic Training
+youtube: 1xipg02Wu8s
---
-
- {{< youtube 1xipg02Wu8s >}}
-
-
Before we build our first app, let's get familiar with the core UI building blocks of [Flutter](https://flutter.dev/). This tutorial is a quick introduction to the basic building blocks of Flutter that we'll be using throughout the rest of the course. Play around with these code samples to get a feel for how UI design in Flutter works.
## Main Function
diff --git a/hugo/content/courses/flutter-firebase/firestore-data-model.md b/content/courses/flutter-firebase/firestore-data-model.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/firestore-data-model.md
rename to content/courses/flutter-firebase/firestore-data-model.md
diff --git a/hugo/content/courses/flutter-firebase/firestore-fetch.md b/content/courses/flutter-firebase/firestore-fetch.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/firestore-fetch.md
rename to content/courses/flutter-firebase/firestore-fetch.md
diff --git a/hugo/content/courses/flutter-firebase/firestore-json-serializable.md b/content/courses/flutter-firebase/firestore-json-serializable.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/firestore-json-serializable.md
rename to content/courses/flutter-firebase/firestore-json-serializable.md
diff --git a/hugo/content/courses/flutter-firebase/firestore-relational.md b/content/courses/flutter-firebase/firestore-relational.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/firestore-relational.md
rename to content/courses/flutter-firebase/firestore-relational.md
diff --git a/hugo/content/courses/flutter-firebase/firestore-write.md b/content/courses/flutter-firebase/firestore-write.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/firestore-write.md
rename to content/courses/flutter-firebase/firestore-write.md
diff --git a/hugo/content/courses/flutter-firebase-v1/img/app-screens-trans.png b/content/courses/flutter-firebase/img/app-screens-trans.png
similarity index 100%
rename from hugo/content/courses/flutter-firebase-v1/img/app-screens-trans.png
rename to content/courses/flutter-firebase/img/app-screens-trans.png
diff --git a/hugo/content/courses/flutter-firebase-v1/img/app-screens.PNG b/content/courses/flutter-firebase/img/app-screens.PNG
similarity index 100%
rename from hugo/content/courses/flutter-firebase-v1/img/app-screens.PNG
rename to content/courses/flutter-firebase/img/app-screens.PNG
diff --git a/hugo/content/courses/flutter-firebase-v1/img/apple-signin-firebase.png b/content/courses/flutter-firebase/img/apple-signin-firebase.png
similarity index 100%
rename from hugo/content/courses/flutter-firebase-v1/img/apple-signin-firebase.png
rename to content/courses/flutter-firebase/img/apple-signin-firebase.png
diff --git a/hugo/content/courses/flutter-firebase-v1/img/example1.PNG b/content/courses/flutter-firebase/img/example1.PNG
similarity index 100%
rename from hugo/content/courses/flutter-firebase-v1/img/example1.PNG
rename to content/courses/flutter-firebase/img/example1.PNG
diff --git a/hugo/content/courses/flutter-firebase/img/featured.jpg b/content/courses/flutter-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/courses/flutter-firebase/img/featured.jpg
rename to content/courses/flutter-firebase/img/featured.jpg
diff --git a/hugo/content/courses/flutter-firebase/img/featured.png b/content/courses/flutter-firebase/img/featured.png
similarity index 100%
rename from hugo/content/courses/flutter-firebase/img/featured.png
rename to content/courses/flutter-firebase/img/featured.png
diff --git a/hugo/content/courses/flutter-firebase/img/featured.webp b/content/courses/flutter-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/courses/flutter-firebase/img/featured.webp
rename to content/courses/flutter-firebase/img/featured.webp
diff --git a/hugo/content/courses/flutter-firebase-v1/img/quiz-datamodel.png b/content/courses/flutter-firebase/img/quiz-datamodel.png
similarity index 100%
rename from hugo/content/courses/flutter-firebase-v1/img/quiz-datamodel.png
rename to content/courses/flutter-firebase/img/quiz-datamodel.png
diff --git a/hugo/content/courses/flutter-firebase-v1/img/report-datamodel.png b/content/courses/flutter-firebase/img/report-datamodel.png
similarity index 100%
rename from hugo/content/courses/flutter-firebase-v1/img/report-datamodel.png
rename to content/courses/flutter-firebase/img/report-datamodel.png
diff --git a/hugo/content/courses/flutter-firebase-v1/img/signin-apple-capability-xcode.png b/content/courses/flutter-firebase/img/signin-apple-capability-xcode.png
similarity index 100%
rename from hugo/content/courses/flutter-firebase-v1/img/signin-apple-capability-xcode.png
rename to content/courses/flutter-firebase/img/signin-apple-capability-xcode.png
diff --git a/hugo/content/courses/flutter-firebase-v1/img/topic-datamodel.png b/content/courses/flutter-firebase/img/topic-datamodel.png
similarity index 100%
rename from hugo/content/courses/flutter-firebase-v1/img/topic-datamodel.png
rename to content/courses/flutter-firebase/img/topic-datamodel.png
diff --git a/hugo/content/courses/flutter-firebase/intro-dev-tools.md b/content/courses/flutter-firebase/intro-dev-tools.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/intro-dev-tools.md
rename to content/courses/flutter-firebase/intro-dev-tools.md
diff --git a/hugo/content/courses/flutter-firebase/intro-flutter-100s.md b/content/courses/flutter-firebase/intro-flutter-100s.md
similarity index 75%
rename from hugo/content/courses/flutter-firebase/intro-flutter-100s.md
rename to content/courses/flutter-firebase/intro-flutter-100s.md
index a5fdd05a1..a93324154 100644
--- a/hugo/content/courses/flutter-firebase/intro-flutter-100s.md
+++ b/content/courses/flutter-firebase/intro-flutter-100s.md
@@ -5,12 +5,8 @@ weight: 1
lastmod: 2021-11-11T10:23:30-09:00
draft: false
emoji: ⚡
-vimeo:
+youtube: lHhRhPV--G0
free: true
video_length: 2:20
chapter_start: Getting Started
----
-
-
- {{< youtube lHhRhPV--G0 >}}
-
\ No newline at end of file
+---
\ No newline at end of file
diff --git a/hugo/content/courses/flutter-firebase/intro-flutter-create.md b/content/courses/flutter-firebase/intro-flutter-create.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/intro-flutter-create.md
rename to content/courses/flutter-firebase/intro-flutter-create.md
diff --git a/hugo/content/courses/flutter-firebase/intro-flutter-setup.md b/content/courses/flutter-firebase/intro-flutter-setup.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/intro-flutter-setup.md
rename to content/courses/flutter-firebase/intro-flutter-setup.md
diff --git a/hugo/content/courses/flutter-firebase/intro-resources.md b/content/courses/flutter-firebase/intro-resources.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/intro-resources.md
rename to content/courses/flutter-firebase/intro-resources.md
diff --git a/hugo/content/courses/flutter-firebase/intro-vscode.md b/content/courses/flutter-firebase/intro-vscode.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/intro-vscode.md
rename to content/courses/flutter-firebase/intro-vscode.md
diff --git a/hugo/content/courses/flutter-firebase/project-bottom-nav.md b/content/courses/flutter-firebase/project-bottom-nav.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/project-bottom-nav.md
rename to content/courses/flutter-firebase/project-bottom-nav.md
diff --git a/hugo/content/courses/flutter-firebase/project-demo-app-tour.md b/content/courses/flutter-firebase/project-demo-app-tour.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/project-demo-app-tour.md
rename to content/courses/flutter-firebase/project-demo-app-tour.md
diff --git a/hugo/content/courses/flutter-firebase/project-firebase-setup.md b/content/courses/flutter-firebase/project-firebase-setup.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/project-firebase-setup.md
rename to content/courses/flutter-firebase/project-firebase-setup.md
diff --git a/hugo/content/courses/flutter-firebase/project-google-fonts.md b/content/courses/flutter-firebase/project-google-fonts.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/project-google-fonts.md
rename to content/courses/flutter-firebase/project-google-fonts.md
diff --git a/hugo/content/courses/flutter-firebase/project-organization.md b/content/courses/flutter-firebase/project-organization.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/project-organization.md
rename to content/courses/flutter-firebase/project-organization.md
diff --git a/hugo/content/courses/flutter-firebase/project-routing.md b/content/courses/flutter-firebase/project-routing.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/project-routing.md
rename to content/courses/flutter-firebase/project-routing.md
diff --git a/hugo/content/courses/flutter-firebase/project-themes.md b/content/courses/flutter-firebase/project-themes.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/project-themes.md
rename to content/courses/flutter-firebase/project-themes.md
diff --git a/hugo/content/courses/flutter-firebase/quiz-bottom-sheet.md b/content/courses/flutter-firebase/quiz-bottom-sheet.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/quiz-bottom-sheet.md
rename to content/courses/flutter-firebase/quiz-bottom-sheet.md
diff --git a/hugo/content/courses/flutter-firebase/quiz-page-view.md b/content/courses/flutter-firebase/quiz-page-view.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/quiz-page-view.md
rename to content/courses/flutter-firebase/quiz-page-view.md
diff --git a/hugo/content/courses/flutter-firebase/quiz-state.md b/content/courses/flutter-firebase/quiz-state.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/quiz-state.md
rename to content/courses/flutter-firebase/quiz-state.md
diff --git a/hugo/content/courses/flutter-firebase/release-android.md b/content/courses/flutter-firebase/release-android.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/release-android.md
rename to content/courses/flutter-firebase/release-android.md
diff --git a/hugo/content/courses/flutter-firebase/release-ios.md b/content/courses/flutter-firebase/release-ios.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/release-ios.md
rename to content/courses/flutter-firebase/release-ios.md
diff --git a/hugo/content/courses/flutter-firebase/topics-drawer.md b/content/courses/flutter-firebase/topics-drawer.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/topics-drawer.md
rename to content/courses/flutter-firebase/topics-drawer.md
diff --git a/hugo/content/courses/flutter-firebase/topics-hero-animation.md b/content/courses/flutter-firebase/topics-hero-animation.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/topics-hero-animation.md
rename to content/courses/flutter-firebase/topics-hero-animation.md
diff --git a/hugo/content/courses/flutter-firebase/topics-profile.md b/content/courses/flutter-firebase/topics-profile.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/topics-profile.md
rename to content/courses/flutter-firebase/topics-profile.md
diff --git a/hugo/content/courses/flutter-firebase/topics-progress-bar.md b/content/courses/flutter-firebase/topics-progress-bar.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/topics-progress-bar.md
rename to content/courses/flutter-firebase/topics-progress-bar.md
diff --git a/hugo/content/courses/flutter-firebase/topics-screen.md b/content/courses/flutter-firebase/topics-screen.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/topics-screen.md
rename to content/courses/flutter-firebase/topics-screen.md
diff --git a/hugo/content/courses/flutter-firebase/topics-stream-provider.md b/content/courses/flutter-firebase/topics-stream-provider.md
similarity index 100%
rename from hugo/content/courses/flutter-firebase/topics-stream-provider.md
rename to content/courses/flutter-firebase/topics-stream-provider.md
diff --git a/content/courses/git/_index.md b/content/courses/git/_index.md
new file mode 100644
index 000000000..d2c1786b3
--- /dev/null
+++ b/content/courses/git/_index.md
@@ -0,0 +1,43 @@
+---
+lastmod: 2022-05-15T10:23:30-09:00
+title: Git & GitHub Full Course
+description: Master the fundamentals of Git and GitHub from the ground up
+weight: 0
+type: courses
+author: Jeff Delaney
+vimeo: 599074745
+tags:
+ - git
+ - github
+ - pro
+
+stack:
+ - git
+ - github
+---
+
+**The Git & GitHub Full Course** teaches you how to use Git and GitHub to manage your code like a professional software engineer. Take a hands on approach to learn the basics of version control from the command line with around 1 hour of video content and exercises.
+
+
+## 🦄 What will I learn?
+
+This course will teach the basics of [Git](https://git-scm.com/) and [GitHub](https://github.com/) - essential tools used by virtually every software engineer on the planet. Here's what you'll get out of it...
+
+- 👨🎤 Get Good at Git & GitHub
+- 🦾 Boost Programming Productivity
+- 📰 Be Prepared for Software Engineer Interviews
+- ⚔️ Fix common issues like Merge Conflicts
+- 🤝 Contribute to Open-Source Projects
+- 🔥 Use VS Code like a Pro
+- 🕹️ Use Git for DevOps with GitHub Actions
+
+
+## 🤔 Is this Course Right for Me?
+
+
+This course is beginner level 🟢 and will walk you through the fundamentals of Git & GitHub. It is fast-paced and similar to my style on YouTube, but far more in-depth and followed in a long linear format.
+
+
+### When was the course last updated?
+
+
Updated Sep 6th, 2021
\ No newline at end of file
diff --git a/content/courses/git/advanced-actions.md b/content/courses/git/advanced-actions.md
new file mode 100644
index 000000000..ab74137ed
--- /dev/null
+++ b/content/courses/git/advanced-actions.md
@@ -0,0 +1,15 @@
+---
+title: GitHub Actions
+description: Implement continuous integration and deployment CI/CD with GitHub Actions
+weight: 46
+lastmod: 2021-09-05T10:23:30-09:00
+draft: false
+vimeo:
+youtube: eB0nUzAI7M8
+emoji: 🦾
+video_length: 2:00
+free: true
+---
+
+
+Also see the [GitHub Actions Guide](/lessons/five-useful-github-actions-examples/)
\ No newline at end of file
diff --git a/hugo/content/courses/git/advanced-amend.md b/content/courses/git/advanced-amend.md
similarity index 100%
rename from hugo/content/courses/git/advanced-amend.md
rename to content/courses/git/advanced-amend.md
diff --git a/hugo/content/courses/git/advanced-bonus-tips.md b/content/courses/git/advanced-bonus-tips.md
similarity index 82%
rename from hugo/content/courses/git/advanced-bonus-tips.md
rename to content/courses/git/advanced-bonus-tips.md
index 6bfadf62c..73ccb6212 100644
--- a/hugo/content/courses/git/advanced-bonus-tips.md
+++ b/content/courses/git/advanced-bonus-tips.md
@@ -4,15 +4,12 @@ description: A list of advanced git techniques for boosting productivity
weight: 47
lastmod: 2021-09-05T10:23:30-09:00
draft: false
-vimeo:
+vimeo:
+youtube: ecK3EnyGD8o
emoji: 🔥
video_length: 8:15
free: true
---
-
-{{< youtube ecK3EnyGD8o >}}
-
-
Let's wrap up the course with a fun breakdown of some advanced git techniques that will increase your producivity.
\ No newline at end of file
diff --git a/hugo/content/courses/git/advanced-rebase.md b/content/courses/git/advanced-rebase.md
similarity index 100%
rename from hugo/content/courses/git/advanced-rebase.md
rename to content/courses/git/advanced-rebase.md
diff --git a/hugo/content/courses/git/advanced-reset.md b/content/courses/git/advanced-reset.md
similarity index 96%
rename from hugo/content/courses/git/advanced-reset.md
rename to content/courses/git/advanced-reset.md
index 1e09192a5..edf13350f 100644
--- a/hugo/content/courses/git/advanced-reset.md
+++ b/content/courses/git/advanced-reset.md
@@ -8,6 +8,7 @@ vimeo: 599244967
emoji: 🔨
video_length: 2:32
chapter_start: Advanced
+chapter_icon: 🔨
---
Unstage all staged files.
diff --git a/hugo/content/courses/git/advanced-revert.md b/content/courses/git/advanced-revert.md
similarity index 100%
rename from hugo/content/courses/git/advanced-revert.md
rename to content/courses/git/advanced-revert.md
diff --git a/hugo/content/courses/git/advanced-squash.md b/content/courses/git/advanced-squash.md
similarity index 100%
rename from hugo/content/courses/git/advanced-squash.md
rename to content/courses/git/advanced-squash.md
diff --git a/hugo/content/courses/git/advanced-stash.md b/content/courses/git/advanced-stash.md
similarity index 100%
rename from hugo/content/courses/git/advanced-stash.md
rename to content/courses/git/advanced-stash.md
diff --git a/content/courses/git/basics-add.md b/content/courses/git/basics-add.md
new file mode 100644
index 000000000..b0aff7beb
--- /dev/null
+++ b/content/courses/git/basics-add.md
@@ -0,0 +1,36 @@
+---
+title: git add
+description: Staging changes to be committed
+weight: 13
+lastmod: 2021-09-05T10:23:30-09:00
+draft: false
+vimeo: 599073543
+emoji: ➕
+video_length: 1:19
+quiz: true
+---
+
+
+ What do we call the area for files that will be part of the next commit?
+
+
+Add an entire working directory to the staging area:
+
+{{< file "terminal" "command line" >}}
+```bash
+git add .
+```
+
+Add a single file:
+
+{{< file "terminal" "command line" >}}
+```bash
+git add somefile.txt
+```
+
+Remove a file from the staging area:
+
+{{< file "terminal" "command line" >}}
+```bash
+git reset .
+```
diff --git a/content/courses/git/basics-commit.md b/content/courses/git/basics-commit.md
new file mode 100644
index 000000000..cceea598e
--- /dev/null
+++ b/content/courses/git/basics-commit.md
@@ -0,0 +1,39 @@
+---
+title: git commit
+description: Commit files to a repository
+weight: 14
+lastmod: 2021-09-05T10:23:30-09:00
+draft: false
+vimeo: 599073569
+emoji: 📸
+video_length: 2:05
+quiz: true
+---
+
+
+ How might you preview or try a commit before making it official?
+
+
+Commit staged files to a repository
+
+{{< file "terminal" "command line" >}}
+```bash
+git commit -m "initial commit 🚀"
+```
+
+Tip: Add files and commit in a single command
+
+{{< file "terminal" "command line" >}}
+```bash
+git commit -a -m "additional commit"
+
+# or
+
+git commit -am "additional commit"
+```
+
+Use git log to see the history of commits:
+
+```bash
+git log
+```
\ No newline at end of file
diff --git a/content/courses/git/basics-init.md b/content/courses/git/basics-init.md
new file mode 100644
index 000000000..df7dfa171
--- /dev/null
+++ b/content/courses/git/basics-init.md
@@ -0,0 +1,24 @@
+---
+title: git init
+description: Initialize a git repository
+weight: 11
+lastmod: 2021-09-05T10:23:30-09:00
+draft: false
+vimeo: 599073661
+emoji: 🏠
+video_length: 1:28
+free: true
+quiz: true
+---
+
+Crate a new git repository:
+
+{{< file "terminal" "command line" >}}
+```bash
+git init
+```
+
+
+ How do you un-initialize a git repo?
+ git provides a tools like init to start a repo, but how do you remove git from a project?
+
\ No newline at end of file
diff --git a/hugo/content/courses/git/basics-install.md b/content/courses/git/basics-install.md
similarity index 100%
rename from hugo/content/courses/git/basics-install.md
rename to content/courses/git/basics-install.md
diff --git a/content/courses/git/basics-status.md b/content/courses/git/basics-status.md
new file mode 100644
index 000000000..494e0d778
--- /dev/null
+++ b/content/courses/git/basics-status.md
@@ -0,0 +1,22 @@
+---
+title: git status
+description: Check the status of a repository
+weight: 12
+lastmod: 2021-09-05T10:23:30-09:00
+draft: false
+vimeo: 599073941
+emoji: 👁️
+video_length: 1:24
+quiz: true
+---
+
+View the current status of a repository.
+
+{{< file "terminal" "command line" >}}
+```bash
+git commit status
+```
+
+
+ git status provides a detailed commit history of your repo
\ No newline at end of file
diff --git a/content/courses/git/basics-vscode.md b/content/courses/git/basics-vscode.md
new file mode 100644
index 000000000..91902aa48
--- /dev/null
+++ b/content/courses/git/basics-vscode.md
@@ -0,0 +1,17 @@
+---
+title: VS Code Tips
+description: Tips for working with git in VS Code
+weight: 15
+lastmod: 2021-09-05T10:23:30-09:00
+draft: false
+vimeo: 599073986
+emoji: 🖥️
+video_length: 1:48
+quiz: true
+---
+
+
+ Which term describes the changes between the working tree and previously comitted files?
+
+
+VS Code is a powerful tool for working with git. You can use it to run commands without the CLI, sync it up to GitHub, and to manage your git repositories. Learn more in the [official docs](https://code.visualstudio.com/docs/editor/versioncontrol).
\ No newline at end of file
diff --git a/content/courses/git/basics-what-is-git.md b/content/courses/git/basics-what-is-git.md
new file mode 100644
index 000000000..288641114
--- /dev/null
+++ b/content/courses/git/basics-what-is-git.md
@@ -0,0 +1,18 @@
+---
+title: What is git?
+description: What is git and why is it essential to software engineers?
+weight: 9
+lastmod: 2021-09-05T10:23:30-09:00
+draft: false
+vimeo:
+youtube: hwP7WQkmECE
+emoji: ⚡
+video_length: 2:30
+free: true
+chapter_start: Git Started
+quiz: true
+---
+
+
+ Who invent Git?
+
\ No newline at end of file
diff --git a/content/courses/git/collab-branch.md b/content/courses/git/collab-branch.md
new file mode 100644
index 000000000..298714dea
--- /dev/null
+++ b/content/courses/git/collab-branch.md
@@ -0,0 +1,38 @@
+---
+title: git branch
+description: Create a new branch in a git repository
+weight: 30
+lastmod: 2021-09-05T10:23:30-09:00
+draft: false
+vimeo: 599245578
+emoji: 🌲
+video_length: 2:05
+chapter_start: Collaboration
+chapter_icon: 🌲
+quiz: true
+---
+
+
+ What is a more politically correct name for the master branch?
+
+
+List out branches:
+
+{{< file "terminal" "command line" >}}
+```bash
+git branch
+```
+
+Create a new branch:
+
+{{< file "terminal" "command line" >}}
+```bash
+git branch awesome
+```
+
+Delete a branch
+
+{{< file "terminal" "command line" >}}
+```bash
+git branch -d awesome
+```
\ No newline at end of file
diff --git a/content/courses/git/collab-checkout.md b/content/courses/git/collab-checkout.md
new file mode 100644
index 000000000..828737a2c
--- /dev/null
+++ b/content/courses/git/collab-checkout.md
@@ -0,0 +1,29 @@
+---
+title: git checkout
+description: Move between branches in git
+weight: 31
+lastmod: 2021-09-05T10:23:30-09:00
+draft: false
+vimeo: 599245523
+emoji: 👀
+video_length: 1:35
+quiz: true
+---
+
+
+ Which flag automatically creates a new branch during checkout?
+
+
+Move into a branch
+
+{{< file "terminal" "command line" >}}
+```bash
+git checkout awesome
+```
+
+Create a new branch and move into it:
+
+{{< file "terminal" "command line" >}}
+```bash
+git checkout -b awesome
+```
\ No newline at end of file
diff --git a/hugo/content/courses/git/collab-fork.md b/content/courses/git/collab-fork.md
similarity index 100%
rename from hugo/content/courses/git/collab-fork.md
rename to content/courses/git/collab-fork.md
diff --git a/hugo/content/courses/git/collab-merge-conflicts.md b/content/courses/git/collab-merge-conflicts.md
similarity index 88%
rename from hugo/content/courses/git/collab-merge-conflicts.md
rename to content/courses/git/collab-merge-conflicts.md
index ffda224b2..bbf2e7490 100644
--- a/hugo/content/courses/git/collab-merge-conflicts.md
+++ b/content/courses/git/collab-merge-conflicts.md
@@ -7,8 +7,12 @@ draft: false
vimeo: 599245272
emoji: ❌
video_length: 2:32
+quiz: true
---
+
+ Which flag allows you to safely quit the merge conflit process?
+
## How Merge Conflicts Happen
diff --git a/hugo/content/courses/git/collab-pull-request.md b/content/courses/git/collab-pull-request.md
similarity index 81%
rename from hugo/content/courses/git/collab-pull-request.md
rename to content/courses/git/collab-pull-request.md
index 41dbf5868..a998106a2 100644
--- a/hugo/content/courses/git/collab-pull-request.md
+++ b/content/courses/git/collab-pull-request.md
@@ -5,13 +5,10 @@ weight: 34
lastmod: 2021-09-05T10:23:30-09:00
draft: false
vimeo:
+youtube: 8lGpZkjnkt4
emoji: ✋
video_length: 2:15
free: true
---
-
-{{< youtube 8lGpZkjnkt4 >}}
-
-
The stickers are gone, but feel free to submit a pull request on GitHub for practice.
\ No newline at end of file
diff --git a/hugo/content/courses/git/img/featured.jpg b/content/courses/git/img/featured.jpg
similarity index 100%
rename from hugo/content/courses/git/img/featured.jpg
rename to content/courses/git/img/featured.jpg
diff --git a/hugo/content/courses/git/img/featured.png b/content/courses/git/img/featured.png
similarity index 100%
rename from hugo/content/courses/git/img/featured.png
rename to content/courses/git/img/featured.png
diff --git a/hugo/content/courses/git/img/featured.webp b/content/courses/git/img/featured.webp
similarity index 100%
rename from hugo/content/courses/git/img/featured.webp
rename to content/courses/git/img/featured.webp
diff --git a/content/courses/git/img/prizes/0.webp b/content/courses/git/img/prizes/0.webp
new file mode 100644
index 000000000..325a9385b
Binary files /dev/null and b/content/courses/git/img/prizes/0.webp differ
diff --git a/content/courses/git/img/prizes/1.webp b/content/courses/git/img/prizes/1.webp
new file mode 100644
index 000000000..e77ddaaea
Binary files /dev/null and b/content/courses/git/img/prizes/1.webp differ
diff --git a/content/courses/git/img/prizes/10.webp b/content/courses/git/img/prizes/10.webp
new file mode 100644
index 000000000..576740faa
Binary files /dev/null and b/content/courses/git/img/prizes/10.webp differ
diff --git a/content/courses/git/img/prizes/11.webp b/content/courses/git/img/prizes/11.webp
new file mode 100644
index 000000000..4180ce26d
Binary files /dev/null and b/content/courses/git/img/prizes/11.webp differ
diff --git a/content/courses/git/img/prizes/12.webp b/content/courses/git/img/prizes/12.webp
new file mode 100644
index 000000000..d3fe9371d
Binary files /dev/null and b/content/courses/git/img/prizes/12.webp differ
diff --git a/content/courses/git/img/prizes/13.webp b/content/courses/git/img/prizes/13.webp
new file mode 100644
index 000000000..748c5f72c
Binary files /dev/null and b/content/courses/git/img/prizes/13.webp differ
diff --git a/content/courses/git/img/prizes/14.webp b/content/courses/git/img/prizes/14.webp
new file mode 100644
index 000000000..f9efe9796
Binary files /dev/null and b/content/courses/git/img/prizes/14.webp differ
diff --git a/content/courses/git/img/prizes/15.webp b/content/courses/git/img/prizes/15.webp
new file mode 100644
index 000000000..ff6a021ea
Binary files /dev/null and b/content/courses/git/img/prizes/15.webp differ
diff --git a/content/courses/git/img/prizes/16.webp b/content/courses/git/img/prizes/16.webp
new file mode 100644
index 000000000..572a2a574
Binary files /dev/null and b/content/courses/git/img/prizes/16.webp differ
diff --git a/content/courses/git/img/prizes/17.webp b/content/courses/git/img/prizes/17.webp
new file mode 100644
index 000000000..4f16b0bb3
Binary files /dev/null and b/content/courses/git/img/prizes/17.webp differ
diff --git a/content/courses/git/img/prizes/2.webp b/content/courses/git/img/prizes/2.webp
new file mode 100644
index 000000000..ad84ee628
Binary files /dev/null and b/content/courses/git/img/prizes/2.webp differ
diff --git a/content/courses/git/img/prizes/3.webp b/content/courses/git/img/prizes/3.webp
new file mode 100644
index 000000000..d4388b56c
Binary files /dev/null and b/content/courses/git/img/prizes/3.webp differ
diff --git a/content/courses/git/img/prizes/4.webp b/content/courses/git/img/prizes/4.webp
new file mode 100644
index 000000000..5af9b6774
Binary files /dev/null and b/content/courses/git/img/prizes/4.webp differ
diff --git a/content/courses/git/img/prizes/5.webp b/content/courses/git/img/prizes/5.webp
new file mode 100644
index 000000000..a11effcde
Binary files /dev/null and b/content/courses/git/img/prizes/5.webp differ
diff --git a/content/courses/git/img/prizes/6.webp b/content/courses/git/img/prizes/6.webp
new file mode 100644
index 000000000..ceff1be01
Binary files /dev/null and b/content/courses/git/img/prizes/6.webp differ
diff --git a/content/courses/git/img/prizes/7.webp b/content/courses/git/img/prizes/7.webp
new file mode 100644
index 000000000..44d7f0937
Binary files /dev/null and b/content/courses/git/img/prizes/7.webp differ
diff --git a/content/courses/git/img/prizes/8.webp b/content/courses/git/img/prizes/8.webp
new file mode 100644
index 000000000..8e7ca5cb1
Binary files /dev/null and b/content/courses/git/img/prizes/8.webp differ
diff --git a/content/courses/git/img/prizes/9.webp b/content/courses/git/img/prizes/9.webp
new file mode 100644
index 000000000..1aeda9e19
Binary files /dev/null and b/content/courses/git/img/prizes/9.webp differ
diff --git a/hugo/content/courses/git/remote-clone.md b/content/courses/git/remote-clone.md
similarity index 75%
rename from hugo/content/courses/git/remote-clone.md
rename to content/courses/git/remote-clone.md
index 61a0c1ec3..ac9545aca 100644
--- a/hugo/content/courses/git/remote-clone.md
+++ b/content/courses/git/remote-clone.md
@@ -7,8 +7,13 @@ draft: false
vimeo: 599117168
emoji: 📋
video_length: 0:57
+quiz: true
---
+
+ git clone creates remote-tracking branches in the cloned repo?
+
Clone a remote repository to your local machine and optionally change the name of the director
{{< file "terminal" "command line" >}}
diff --git a/hugo/content/courses/git/remote-codespaces.md b/content/courses/git/remote-codespaces.md
similarity index 100%
rename from hugo/content/courses/git/remote-codespaces.md
rename to content/courses/git/remote-codespaces.md
diff --git a/content/courses/git/remote-merge.md b/content/courses/git/remote-merge.md
new file mode 100644
index 000000000..b0ad8f8ef
--- /dev/null
+++ b/content/courses/git/remote-merge.md
@@ -0,0 +1,23 @@
+---
+title: git merge
+description: Merge code from two different sources
+weight: 22
+lastmod: 2021-09-05T10:23:30-09:00
+draft: false
+vimeo: 599117280
+emoji: 🤝
+video_length: 1:44
+quiz: true
+---
+
+
+ What is the most common merge strategy?
+
+
+Fetch and merge code from the remote repository.
+
+{{< file "terminal" "command line" >}}
+```bash
+git fetch
+git merge origin/master
+```
\ No newline at end of file
diff --git a/content/courses/git/remote-pull.md b/content/courses/git/remote-pull.md
new file mode 100644
index 000000000..64b7b030e
--- /dev/null
+++ b/content/courses/git/remote-pull.md
@@ -0,0 +1,22 @@
+---
+title: git pull
+description: Fetch and merge changes from a remote repository
+weight: 23
+lastmod: 2021-09-05T10:23:30-09:00
+draft: false
+vimeo: 599117229
+emoji: 👇
+video_length: 1:18
+quiz: true
+---
+
+
+ What is a common alternative to git pull?
+
+
+Combine the fetch & merge from the previous section with the pull command.
+
+{{< file "terminal" "command line" >}}
+```bash
+git pull
+```
\ No newline at end of file
diff --git a/content/courses/git/remote-push.md b/content/courses/git/remote-push.md
new file mode 100644
index 000000000..1614d0f96
--- /dev/null
+++ b/content/courses/git/remote-push.md
@@ -0,0 +1,24 @@
+---
+title: git push
+description: Upload local code to GitHub
+weight: 21
+lastmod: 2021-09-05T10:23:30-09:00
+draft: false
+vimeo: 599117496
+emoji: ☝️
+video_length: 1:45
+quiz: true
+---
+
+
+ git push is kinda like saying...
+
+Use git push to upload your local code to GitHub.
+
+{{< file "terminal" "command line" >}}
+```bash
+git push origin master
+```
+
+Note: the `-u` flag is used to set origin as the upstream remote in your git config so git pull can be used without any arguments in the future.
\ No newline at end of file
diff --git a/content/courses/git/remote-remote.md b/content/courses/git/remote-remote.md
new file mode 100644
index 000000000..2ddec9892
--- /dev/null
+++ b/content/courses/git/remote-remote.md
@@ -0,0 +1,33 @@
+---
+title: git remote
+description: Connect a remote GitHub repo to your local repo
+weight: 20
+lastmod: 2021-09-05T10:23:30-09:00
+draft: false
+vimeo: 599117582
+emoji: ☁️
+video_length: 1:40
+chapter_start: Remote
+chapter_icon: ☁️
+quiz: true
+---
+
+
+ What is the parent company of GitHub?
+
+
+## List Remotes
+
+List current remotes in the local repo:
+
+{{< file "terminal" "command line" >}}
+```bash
+git remote
+```
+
+## Create a new remote
+
+{{< file "terminal" "command line" >}}
+```bash
+git remote add origin
+```
\ No newline at end of file
diff --git a/content/courses/javascript/_index.md b/content/courses/javascript/_index.md
new file mode 100644
index 000000000..c13a4ce8d
--- /dev/null
+++ b/content/courses/javascript/_index.md
@@ -0,0 +1,20 @@
+---
+title: That Weird JavaScript Course
+lastmod: 2019-06-22T09:12:30-08:00
+description: Learn the basics of JavaScript and app development while having fun in the process
+type: courses
+tags:
+ - javascript
+
+author: Jeff Delaney
+---
+
+**That Weird JavaScript Course** takes a unique approach towards teaching fundamental programming concepts. Not only will you learn practical techniques for building apps, but you will also gain knowledge about the history, science, and culture that surrounds the world's most widely-used programming language. My mission is to make you a well-rounded [JavaScript](https://fireship.io/tags/javascript/) developer who can nail job interviews and build apps in the browser and NodeJS.
+
+### 🤔 Is this Course Right for Me?
+
+This course is *beginner to intermediate* level and designed to teach you JavaScript programming fundamentals. It is suitable for programmers of all skill levels who want dive into theoretical computer science and practical JavaScript coding techniques that apply to both backend & frontend development.
+
+### 🔨 Work in Progress
+
+This course is being released in weekly intervals and is currently a work in progress. Make sure to [subscribe on YouTube](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA) to catch the next episode.
diff --git a/hugo/content/courses/javascript/beginner-js-functions.md b/content/courses/javascript/beginner-js-functions.md
similarity index 91%
rename from hugo/content/courses/javascript/beginner-js-functions.md
rename to content/courses/javascript/beginner-js-functions.md
index c83358c85..ce5e039c1 100644
--- a/hugo/content/courses/javascript/beginner-js-functions.md
+++ b/content/courses/javascript/beginner-js-functions.md
@@ -6,10 +6,9 @@ description: Key concepts and practical examples of JavaScript functions
weight: 5
emoji: 🤹
free: true
+youtube: gigtS_5KOqo
---
-{{< youtube gigtS_5KOqo >}}
-
[Functions](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Functions) are the backbone of JavaScript development, but perhaps the most difficult concept to master. The following section defines key concepts related to JS functions with practical examples that you can try on your own.
## Anatomy of a Function
@@ -37,29 +36,29 @@ A function declaration on its own does not do anything. You make use of function
A function *declaration* is a statement that describe what your code does. Declarations are [hoisted](/courses/javascript/beginner-js-survival-guide/), which means they are loaded at the top of the scope before any other code runs.
{{< file "js" "fun.js" >}}
-{{< highlight javascript >}}
+```js
makeBread(2); // Call still works here
function makeBread(qty) {
return '🍞'.repeat(qty)
}
-{{< /highlight >}}
+```
An alternative approach is use a function as a value or *expression* by assigning an anonymous function to a variable or parameter.
-{{< highlight javascript >}}
+```js
const makeBeer = function(qty) {
return '🍺'.repeat(qty);
}
-{{< /highlight >}}
+```
While not common, it is possible to also assign a name to a function expression
-{{< highlight javascript >}}
+```js
const makeBeer = function beerFun(qty) {
return '🍺'.repeat(qty);
}
-{{< /highlight >}}
+```
### 🤔 Should you use declarations or expressions?
@@ -70,7 +69,7 @@ There is no universally accepted best-practice, but function expressions are com
You have a variety of ways to structure parameters in a function. Below are examples of positional, named, and rest parameters:
{{< file "js" "fun.js" >}}
-{{< highlight javascript >}}
+```js
// Positional
function makeBreakfast (main, side, drink) {
console.log(arguments)
@@ -95,11 +94,11 @@ makeBreakfast('🥞', '🥓', '🥛');
makeLunch({ main: '🥙', side: '🍟', drink: '🥤' });
makeDinner('🍜', '🥘', '🍙', '🥠', '🍑');
-{{< /highlight >}}
+```
## Arrow Functions
-Arrow functions provide syntactic sugar for writing compact code, while also omitting a new `this` object, which solves common pain points when writing object-oriented code. An arrow function is unique because it:
+Arrow functions provide syntatic sugar for writing compact code, while also omitting a new `this` object, which solves common pain points when writing object-oriented code. An arrow function is unique because it:
1. Does not have its own `this` object.
1. Implicit return value when brackets are omitted. i.e. `() => true` returns true.
@@ -107,13 +106,13 @@ Arrow functions provide syntactic sugar for writing compact code, while also omi
{{< file "js" "fun.js" >}}
-{{< highlight javascript >}}
+```js
const makeBeer = function beerFun(qty) {
return '🍺'.repeat(qty);
}
const makeWine = (qty) => '🍷'.repeat(qty);
-{{< /highlight >}}
+```
## Pure Functions
@@ -122,7 +121,7 @@ A *pure* function is one that only relies only its inputs, produces no side effe
Notice how the impure function below mutates a global variable and uses it to calculate the return value. In other words, it depends on values outside of its own function parameters and/or body.
{{< file "js" "fun.js" >}}
-{{< highlight javascript >}}
+```js
let global = 0;
const impure = () => {
@@ -131,14 +130,14 @@ const impure = () => {
}
const pure = (x) => x ** 2;
-{{< /highlight >}}
+```
## Higher Order Functions
A *higher order* function is created by combining (or composing) multiple functions together by passing (1) functions as arguments or (2) returning functions. There are many built-in JS functions that use HOF, for example `setTimeout` and `Array.map`.
{{< file "js" "fun.js" >}}
-{{< highlight javascript >}}
+```js
// Anonymous
setTimeout( () => console.log('hello!'), 2000);
@@ -149,7 +148,7 @@ setTimeout(log, 2000);
// Array Map
[1,2,3,4].map(v => v ** 2);
-{{< /highlight >}}
+```
🤔 Should you use declarations or expressions?
@@ -158,7 +157,7 @@ setTimeout(log, 2000);
A recursive function is one that calls itself from inside its own function body. If a terminating condition is not provided it will create and infinite loop. Recursive functions are commonly used in algorithm implementations to efficiently handle tasks like binary-tree traversal. Below is an example of a recursive function that traverses the the file system using NodeJS.
{{< file "js" "fun.js" >}}
-{{< highlight javascript >}}
+```js
const fs = require('fs');
const { join } = require('path');
@@ -183,7 +182,7 @@ const traverse = (dir) => {
}
traverse( process.cwd() );
-{{< /highlight >}}
+```
## When should you Write Functions?
diff --git a/hugo/content/courses/javascript/beginner-js-objects.md b/content/courses/javascript/beginner-js-objects.md
similarity index 86%
rename from hugo/content/courses/javascript/beginner-js-objects.md
rename to content/courses/javascript/beginner-js-objects.md
index 522674240..79212dfc7 100644
--- a/hugo/content/courses/javascript/beginner-js-objects.md
+++ b/content/courses/javascript/beginner-js-objects.md
@@ -6,10 +6,9 @@ description: Everything you need to know about the JavaScript Object
weight: 6
emoji: 🧱
free: true
+youtube: napDjGFjHR0
---
-{{< youtube napDjGFjHR0 >}}
-
The JavaScript object is a collection of key-value pairs, similar to a map, dictionary, or hash-table in other programming languages. Anything that is not a JS primitive is an Object.
- An **Object** is a collection of properties.
@@ -26,7 +25,7 @@ The JavaScript object is a collection of key-value pairs, similar to a map, dict
Create an empty object. You have several options.
{{< file "js" "objects.js" >}}
-{{< highlight javascript >}}
+```js
// literal
const dog = { }
@@ -35,7 +34,7 @@ const cat = new Object();
// static method
const horse = Object.create({ })
-{{< /highlight >}}
+```
### Get and Set Properties
@@ -43,26 +42,26 @@ Now that we have an empty object, we need to add properties to it using [accesso
Valid property names include anything that can be coerced to a string, but must not used reserved words like `function`, `var`, `return` and so on.
-{{< highlight javascript >}}
+```js
get = object.property;
object.property = set;
-{{< /highlight >}}
+```
A potential gotcha with dot notation is that you can only access names that follow variable name [identifier](https://developer.mozilla.org/en-US/docs/Glossary/identifier) conventions, i.e without spaces or that do not start with a digit.
-{{< highlight javascript >}}
+```js
obj['hi mom'] = 1;
obj[23] = 1;
// syntax errors
obj.hi mom
obj.23
-{{< /highlight >}}
+```
Since ES6, we have a convenient shorthand for setting properties:
-{{< highlight javascript >}}
+```js
let hello;
let world;
@@ -77,11 +76,11 @@ const obj = {
hello,
world,
}
-{{< /highlight >}}
+```
Use a variable or expression as a property name by wrapping it in brackets - this is called a computed property.
-{{< highlight javascript >}}
+```js
const x = 'howdy';
const obj = {
@@ -89,20 +88,20 @@ const obj = {
}
obj.howdy // 23
-{{< /highlight >}}
+```
Object properties can be removed with the `delete` keyword.
-{{< highlight javascript >}}
+```js
delete obj.hello;
delete obj.world;
-{{< /highlight >}}
+```
## References
An object is stored in the [heap](https://developers.google.com/web/tools/chrome-devtools/memory-problems/memory-101) memory, which means variables maintain a *reference* to it, as opposed to a full copy of it. When checking for object equality, it checks the reference - not the actual value of properties.
-{{< highlight javascript >}}
+```js
const original = { }
const x = original;
@@ -110,22 +109,22 @@ const y = original;
x === y; // true
x === {}; // false
-{{< /highlight >}}
+```
Any variable that points to that reference can set its properties and they will be shared between all variables.
-{{< highlight javascript >}}
+```js
x.hello = 'world';
original.hello; // world
y.hello; // world
-{{< /highlight >}}
+```
## Combine Objects
But what if we want to clone an object to create a separate reference? `Object.assign` allows us to copy an object's properties and create a new reference. Its properties will be copied to the new object, thus changes to the original object will not affect the clone.
-{{< highlight javascript >}}
+```js
const original = {
hello: 'world'
}
@@ -137,19 +136,19 @@ clone === original; // false
original.hello = 'changed!';
clone.hello; // world (did not change)
-{{< /highlight >}}
+```
### Spread Syntax
A more concise alternative to `Object.assign` is the spread syntax.
-{{< highlight javascript >}}
+```js
const clone = Object.assign({ }, original);
const sugar = { ...original };
const sugar = { ...original, hola: 'mundo' };
-{{< /highlight >}}
+```
## Object Methods
@@ -157,7 +156,7 @@ When a function is assigned to an object, it is called a *method*.
### Shorthand
-{{< highlight javascript >}}
+```js
const obj = {
hello() {
console.log('yo')
@@ -165,14 +164,14 @@ const obj = {
}
obj.hello();
-{{< /highlight >}}
+```
### This
In a normal method, `this` refers to the object on which it is defined.
-{{< highlight javascript >}}
+```js
const obj = {
username: 'Jeff',
hello() {
@@ -181,27 +180,27 @@ const obj = {
}
obj.hello(); // My name is Jeff
-{{< /highlight >}}
+```
### Arrow
Functions using the arrow syntax are not bound to `this`, so it refers to the outer or global `this` context.
-{{< highlight javascript >}}
+```js
const obj = {
username: 'Jeff',
hello: () => console.log(this.username)
}
obj.hello(); // My name is undefined
-{{< /highlight >}}
+```
### Chaining
In certain JS libraries you will see method chaining with `obj.doThis().toThat()`, which is made possible by simply returning the value of *this* from each method.
{{< file "js" "jquery.js" >}}
-{{< highlight javascript >}}
+```js
const game = {
hitpoints: 100,
log() {
@@ -225,13 +224,13 @@ game.takeDamage().takeDamage().takeDamage().heal();
👾 80
👾 70
👾 80
-{{< /highlight >}}
+```
## Constructors
Constructors are just functions that describe how to create an Object.
-{{< highlight javascript >}}
+```js
function Boat(name) {
this.name = name;
this.created = Date.now()
@@ -240,13 +239,13 @@ function Boat(name) {
console.log(this.name)
}
}
-{{< /highlight >}}
+```
The object is then instantiated with the `new` keyword.
-{{< highlight javascript >}}
+```js
const sally = new Boat('Sally');
const molly = new Boat('Molly');
sally.horn() // Sally
-{{< /highlight >}}
+```
diff --git a/hugo/content/courses/javascript/beginner-js-survival-guide.md b/content/courses/javascript/beginner-js-survival-guide.md
similarity index 94%
rename from hugo/content/courses/javascript/beginner-js-survival-guide.md
rename to content/courses/javascript/beginner-js-survival-guide.md
index 56eab4907..61f2cf0e5 100644
--- a/hugo/content/courses/javascript/beginner-js-survival-guide.md
+++ b/content/courses/javascript/beginner-js-survival-guide.md
@@ -6,10 +6,9 @@ description: A quick primer for advanced JavaScript concepts like primitives, ho
weight: 4
emoji: 🧟
free: true
+youtube: 9emXNzqCKyg
---
-{{< youtube 9emXNzqCKyg >}}
-
The *JavaScript Survival Guide* is a primer for the so-called "weird" features of the language. These concepts are common pain-points for developers, but they become relatively simple when you understand relationship between your code and the JS engine. Not to mention, these topics come up frequently on JS interviews.
All research this section is based on the guidance from [Mozilla](https://developer.mozilla.org) - the holy grail of JS documentation.
@@ -23,7 +22,7 @@ Anything that is not a primitive is an [Object](https://developer.mozilla.org/en
{{< file "js" "index.js" >}}
-{{< highlight javascript >}}
+```js
typeof 23; // number
typeof "foo" // string
typeof null // null
@@ -31,7 +30,7 @@ typeof null // null
typeof {} // object
typeof [] // object
typeof function() {} // function (which inherits from object)
-{{< /highlight >}}
+```
## Truthy vs Falsy
@@ -39,7 +38,7 @@ When a value is encounted in a *Boolean* context - such as an `if` statement - i
{{< file "js" "index.js" >}}
-{{< highlight javascript >}}
+```js
true; // true
!! "hello"; // true
!! -1; // true
@@ -52,7 +51,7 @@ false; // false
!! 0; // false
!! ""; // false
-{{< /highlight >}}
+```
## Hoisting
@@ -61,14 +60,14 @@ false; // false
Notice how the function below can be called before it's actually declared. That's hoisting in action.
{{< file "js" "index.js" >}}
-{{< highlight javascript >}}
+```js
// hoisting is as if your `function fun() {}` was located here.
fun(); // works.
function fun() {}
-{{< /highlight >}}
+```
## Closures
@@ -81,7 +80,7 @@ If you come from a classical OOP background, you may notice how closure is very
Notice how `outer` contains a local number variable, while `inner` increments it. Even though outer is only called once, we can still access the count because JS "closes over" the inner function to preserve the execution context.
{{< file "js" "closure.js" >}}
-{{< highlight javascript >}}
+```js
function outer() {
let count = 0; // persists in memory after outer is popped off the call stack
@@ -101,6 +100,6 @@ const addOne = outer();
addOne(); // 1
addOne(); // 2
addOne(); // 3
-{{< /highlight >}}
+```
diff --git a/hugo/content/courses/javascript/beginner-js-where-to-run.md b/content/courses/javascript/beginner-js-where-to-run.md
similarity index 90%
rename from hugo/content/courses/javascript/beginner-js-where-to-run.md
rename to content/courses/javascript/beginner-js-where-to-run.md
index 3958ce391..67b9d76ea 100644
--- a/hugo/content/courses/javascript/beginner-js-where-to-run.md
+++ b/content/courses/javascript/beginner-js-where-to-run.md
@@ -14,26 +14,26 @@ In order to follow along with this course, you need to know how and where you ru
Open your editor and create a file named `index.js`.
{{< file "js" "index.js" >}}
-{{< highlight javascript >}}
+```js
console.log('hello world')
-{{< /highlight >}}
+```
## How to Run JavaScript from the Command Line
Running a JS program from the command line is handled by NodeJS. Start by installing NodeJS on local machine if necessary.
-1. {{< prereq "install-nodejs" >}}
+1. Install Node.js
Now simply open the command line in the same directory as the `index.js` script you created (VS Code will do this automatically with the integrated terminal).
{{< file "terminal" "command line" >}}
-{{< highlight text >}}
+```text
node .
// or
node index.js
-{{< /highlight >}}
+```
## How to Run JavaScript from the Browser
@@ -42,13 +42,13 @@ When people think of "JavaScript", they most often think of a web browser. You c
### Run a script from an HTML file
{{< file "html" "index.html" >}}
-{{< highlight html >}}
+```html
-{{< /highlight >}}
+```
Now simply open this HTML file on your local machine and open the developer console (next step) to see the output.
@@ -67,5 +67,6 @@ It is worth mentioning that frameworks like React, Angular, Svelte, etc will tak
This course uses StackBlitz to run JS code examples in an isolated sandbox in the browser. This is a great option for sharing quick demos and issue reproductions 💡.
-
-{{< stackblitz "https://stackblitz.com/edit/js-survival-hello-world?embed=1&file=index.js" >}}
+
+
-->
\ No newline at end of file
diff --git a/hugo/content/courses/react/basics-events.md b/content/courses/react/basics-events.md
similarity index 100%
rename from hugo/content/courses/react/basics-events.md
rename to content/courses/react/basics-events.md
diff --git a/hugo/content/courses/react/basics-lifecycle.md b/content/courses/react/basics-lifecycle.md
similarity index 100%
rename from hugo/content/courses/react/basics-lifecycle.md
rename to content/courses/react/basics-lifecycle.md
diff --git a/hugo/content/courses/react/basics-loops.md b/content/courses/react/basics-loops.md
similarity index 100%
rename from hugo/content/courses/react/basics-loops.md
rename to content/courses/react/basics-loops.md
diff --git a/content/courses/react/basics-nextjs.md b/content/courses/react/basics-nextjs.md
new file mode 100644
index 000000000..48650ace8
--- /dev/null
+++ b/content/courses/react/basics-nextjs.md
@@ -0,0 +1,10 @@
+---
+title: Next.js
+description: SSR with Next.js explained in 100 Seconds
+weight: 15
+lastmod: 2022-02-22T11:11:30-09:00
+draft: false
+youtube: Sklc_fQBmcs
+emoji: 📝
+video_length: 11:47
+---
diff --git a/content/courses/react/basics-prisma.md b/content/courses/react/basics-prisma.md
new file mode 100644
index 000000000..8a0eaa7cd
--- /dev/null
+++ b/content/courses/react/basics-prisma.md
@@ -0,0 +1,11 @@
+---
+title: Prisma
+description: Manage a relational database with Prisma
+weight: 16
+lastmod: 2022-02-22T11:11:30-09:00
+draft: false
+vimeo:
+emoji: 💎
+video_length: 2:30
+youtube: rLRIB6AF2Dg
+---
diff --git a/content/courses/react/basics-pwa.md b/content/courses/react/basics-pwa.md
new file mode 100644
index 000000000..5a1fcf797
--- /dev/null
+++ b/content/courses/react/basics-pwa.md
@@ -0,0 +1,11 @@
+---
+title: PWAs
+description: What is a Progressive Web App?
+weight: 19
+lastmod: 2022-02-22T11:11:30-09:00
+draft: false
+vimeo:
+emoji: 📱
+video_length: 8:15
+youtube: sFsRylCQblw
+---
diff --git a/content/courses/react/basics-query.md b/content/courses/react/basics-query.md
new file mode 100644
index 000000000..9aa87adc5
--- /dev/null
+++ b/content/courses/react/basics-query.md
@@ -0,0 +1,12 @@
+---
+title: React Query
+description: React Query explained in 100 Seconds
+weight: 17
+lastmod: 2022-02-22T11:11:30-09:00
+draft: false
+vimeo:
+emoji: 🔎
+video_length: 2:30
+youtube: novnyCaa7To
+---
+
diff --git a/content/courses/react/basics-react.md b/content/courses/react/basics-react.md
new file mode 100644
index 000000000..a285e97d5
--- /dev/null
+++ b/content/courses/react/basics-react.md
@@ -0,0 +1,10 @@
+---
+title: React in 100 Seconds
+description: What is React.js?
+weight: 2
+lastmod: 2022-02-22T11:11:30-09:00
+draft: false
+youtube: Tn6-PIqc4UM
+emoji: ⚛️
+video_length: 2:25
+---
\ No newline at end of file
diff --git a/content/courses/react/basics-redux.md b/content/courses/react/basics-redux.md
new file mode 100644
index 000000000..65d027ece
--- /dev/null
+++ b/content/courses/react/basics-redux.md
@@ -0,0 +1,12 @@
+---
+title: Redux
+description: Redux Pattern for State Management
+weight: 19.1
+lastmod: 2022-02-22T11:11:30-09:00
+draft: false
+vimeo:
+emoji: ⚛️
+video_length: 2:33
+youtube: _shA5Xwe8_4
+---
+
diff --git a/hugo/content/courses/react/basics-router.md b/content/courses/react/basics-router.md
similarity index 100%
rename from hugo/content/courses/react/basics-router.md
rename to content/courses/react/basics-router.md
diff --git a/hugo/content/courses/react/basics-state.md b/content/courses/react/basics-state.md
similarity index 100%
rename from hugo/content/courses/react/basics-state.md
rename to content/courses/react/basics-state.md
diff --git a/hugo/content/courses/react/basics-suspense.md b/content/courses/react/basics-suspense.md
similarity index 100%
rename from hugo/content/courses/react/basics-suspense.md
rename to content/courses/react/basics-suspense.md
diff --git a/hugo/content/courses/react/basics-vite.md b/content/courses/react/basics-vite.md
similarity index 87%
rename from hugo/content/courses/react/basics-vite.md
rename to content/courses/react/basics-vite.md
index 0824f045d..bb0ff02fc 100644
--- a/hugo/content/courses/react/basics-vite.md
+++ b/content/courses/react/basics-vite.md
@@ -7,11 +7,9 @@ draft: false
vimeo:
emoji: ⚡
video_length: 2:25
+youtube: KCrXgy8qtjM
---
-
-{{< youtube KCrXgy8qtjM >}}
-
[Vite.js](https://vitejs.dev/) is a build tool that can be used to build React projects. It is exceptionally fast and easy to use.
diff --git a/hugo/content/courses/react/img/featured.jpg b/content/courses/react/img/featured.jpg
similarity index 100%
rename from hugo/content/courses/react/img/featured.jpg
rename to content/courses/react/img/featured.jpg
diff --git a/hugo/content/courses/react/img/featured.png b/content/courses/react/img/featured.png
similarity index 100%
rename from hugo/content/courses/react/img/featured.png
rename to content/courses/react/img/featured.png
diff --git a/hugo/content/courses/react/img/featured.webp b/content/courses/react/img/featured.webp
similarity index 100%
rename from hugo/content/courses/react/img/featured.webp
rename to content/courses/react/img/featured.webp
diff --git a/content/courses/stripe-js/_index.md b/content/courses/stripe-js/_index.md
new file mode 100644
index 000000000..801ef1231
--- /dev/null
+++ b/content/courses/stripe-js/_index.md
@@ -0,0 +1,55 @@
+---
+lastmod: 2021-10-25T10:23:30-09:00
+title: Stripe Payments JavaScript Course
+description: A full Stripe Payments Course using Node.js & React
+weight: 0
+type: courses
+tags:
+ - stripe
+ - node
+ - pro
+ - react
+ - cloud-functions
+ - firebase
+
+vimeo: 416381401
+author: Jeff Delaney
+---
+
+
+{{< figure src="/courses/stripe-js/img/review-scssat.png" alt="I’ve just finished your Stripe course. I want to give you the following feedback" >}}
+
+
+ This course has been deprecated. A completely new Stripe course will replace this content in the near future (Fall 2022).
+
+
+The **Stripe Payments JavaScript Course** is a project-based guide to building fullstack payment solutions on the web with Node.js and React.
+
+The goal is to provide a solid foundation for *app monetization* 💸 by implementing common use-cases with [Stripe](https://stripe.com/) APIs including Checkout, Payment Intents, and Billing.
+
+
Updated May 11th, 2020 Stripe API v2020-03-02
+
+## ⚡ What will I build?
+
+You will build a fullstack web app with Node.js and React that contains the following features:
+
+- Node.js Server with Express & TypeScript
+- React frontend UI (functional components, hooks, & suspense)
+- [3D Secure](https://stripe.com/guides/3d-secure-2) payment handling
+- Manage Stripe customers and save cards
+- Setup subscriptions, invoices, and recurring payments
+- Securely listen to events from Stripe via webhooks
+- Dockerize and deploy to Google Cloud Run
+
+## 🤔 Is this Course Right for Me?
+
+This course is beginner-friendly, but expects you to have some experience with web development and JavaScript. It is fast-paced and similar to [my style on YouTube](https://www.youtube.com/channel/fireship), but far more in-depth and comprehensive. I stand by my work 100%, so just drop me a line if you are not satisfied for any reason.
+
+## Is this Course Updated?
+
+The last code review and update was completed on **October 15th, 2021** using Stripe API version `2020-03-02`. The course receives regular updates to address major changes to the Stripe API and its Node SDKs.
+
+
+## 🏎️ Test Drive
+
+Try out the [Live Demo](https://stripe-js-course.firebaseapp.com). It uses Stripe test mode, so feel free to submit mock payments to the server.
\ No newline at end of file
diff --git a/hugo/content/courses/stripe-js/billing-cancel-subscription.md b/content/courses/stripe-js/billing-cancel-subscription.md
similarity index 96%
rename from hugo/content/courses/stripe-js/billing-cancel-subscription.md
rename to content/courses/stripe-js/billing-cancel-subscription.md
index 6b5207dc2..8dfb9df94 100644
--- a/hugo/content/courses/stripe-js/billing-cancel-subscription.md
+++ b/content/courses/stripe-js/billing-cancel-subscription.md
@@ -11,7 +11,7 @@ video_length: 2:21
## List and Cancel Subscriptions
-{{< file "typescript" "index.ts" >}}
+{{< file "ts" "index.ts" >}}
```typescript
/**
* Cancels an active subscription, syncs the data in Firestore
@@ -56,7 +56,7 @@ export async function listSubscriptions(userId: string) {
## API Endpoints
-{{< file "typescript" "api.ts" >}}
+{{< file "ts" "api.ts" >}}
```typescript
// Get all subscriptions for a customer
app.get(
diff --git a/hugo/content/courses/stripe-js/billing-create-subscription.md b/content/courses/stripe-js/billing-create-subscription.md
similarity index 96%
rename from hugo/content/courses/stripe-js/billing-create-subscription.md
rename to content/courses/stripe-js/billing-create-subscription.md
index 2af5d2498..c255bcbcd 100644
--- a/hugo/content/courses/stripe-js/billing-create-subscription.md
+++ b/content/courses/stripe-js/billing-create-subscription.md
@@ -15,7 +15,7 @@ NOTE. I also highly recommend listening to the `customer.subscription.created` t
## Create a Subscription for Existing Customer
-{{< file "typescript" "billing.ts" >}}
+{{< file "ts" "billing.ts" >}}
```typescript
import { stripe } from './';
import { db } from './firebase';
@@ -74,7 +74,7 @@ export async function createSubscription(
## API Endpoint
-{{< file "typescript" "api.ts" >}}
+{{< file "ts" "api.ts" >}}
```typescript
app.post(
'/subscriptions/',
diff --git a/hugo/content/courses/stripe-js/billing-intro.md b/content/courses/stripe-js/billing-intro.md
similarity index 100%
rename from hugo/content/courses/stripe-js/billing-intro.md
rename to content/courses/stripe-js/billing-intro.md
diff --git a/hugo/content/courses/stripe-js/billing-react.md b/content/courses/stripe-js/billing-react.md
similarity index 100%
rename from hugo/content/courses/stripe-js/billing-react.md
rename to content/courses/stripe-js/billing-react.md
diff --git a/hugo/content/courses/stripe-js/billing-recurring.md b/content/courses/stripe-js/billing-recurring.md
similarity index 98%
rename from hugo/content/courses/stripe-js/billing-recurring.md
rename to content/courses/stripe-js/billing-recurring.md
index 42d8db1a7..ba3f0bba2 100644
--- a/hugo/content/courses/stripe-js/billing-recurring.md
+++ b/content/courses/stripe-js/billing-recurring.md
@@ -11,7 +11,7 @@ video_length: 3:02
## Subscription Billing Webhook Examples
-{{< file "typescript" "billing.ts" >}}
+{{< file "ts" "billing.ts" >}}
```typescript
import { stripe } from './';
import Stripe from 'stripe';
diff --git a/hugo/content/courses/stripe-js/checkout-intro.md b/content/courses/stripe-js/checkout-intro.md
similarity index 100%
rename from hugo/content/courses/stripe-js/checkout-intro.md
rename to content/courses/stripe-js/checkout-intro.md
diff --git a/hugo/content/courses/stripe-js/checkout-react.md b/content/courses/stripe-js/checkout-react.md
similarity index 100%
rename from hugo/content/courses/stripe-js/checkout-react.md
rename to content/courses/stripe-js/checkout-react.md
diff --git a/hugo/content/courses/stripe-js/checkout-server.md b/content/courses/stripe-js/checkout-server.md
similarity index 94%
rename from hugo/content/courses/stripe-js/checkout-server.md
rename to content/courses/stripe-js/checkout-server.md
index 551199839..b1d4e022a 100644
--- a/hugo/content/courses/stripe-js/checkout-server.md
+++ b/content/courses/stripe-js/checkout-server.md
@@ -11,7 +11,7 @@ video_length: 3:39
## Stripe Checkout on the Server
-{{< file "typescript" "checkout.ts" >}}
+{{< file "ts" "checkout.ts" >}}
```typescript
import { stripe } from './';
import Stripe from 'stripe';
@@ -39,7 +39,7 @@ export async function createStripeCheckoutSession(
## API Endpoint
-{{< file "typescript" "api.ts" >}}
+{{< file "ts" "api.ts" >}}
```typescript
/**
* Catch async errors when awaiting promises
diff --git a/hugo/content/courses/stripe-js/customers-auth.md b/content/courses/stripe-js/customers-auth.md
similarity index 98%
rename from hugo/content/courses/stripe-js/customers-auth.md
rename to content/courses/stripe-js/customers-auth.md
index 4f5a55b75..2c38571a5 100644
--- a/hugo/content/courses/stripe-js/customers-auth.md
+++ b/content/courses/stripe-js/customers-auth.md
@@ -74,7 +74,7 @@ export async function fetchFromAPI(endpointURL, opts) {
## Express Middleware
-{{< file "typescript" "index.ts" >}}
+{{< file "ts" "index.ts" >}}
```typescript
// Decodes the Firebase JSON Web Token
app.use(decodeJWT);
diff --git a/hugo/content/courses/stripe-js/customers-create.md b/content/courses/stripe-js/customers-create.md
similarity index 96%
rename from hugo/content/courses/stripe-js/customers-create.md
rename to content/courses/stripe-js/customers-create.md
index eb5ff302d..2647e0df8 100644
--- a/hugo/content/courses/stripe-js/customers-create.md
+++ b/content/courses/stripe-js/customers-create.md
@@ -11,7 +11,7 @@ video_length: 2:05
## Get or Create a Stripe Customer
-{{< file "typescript" "customers.ts" >}}
+{{< file "ts" "customers.ts" >}}
```typescript
/**
* Gets the exsiting Stripe customer or creates a new record
diff --git a/hugo/content/courses/stripe-js/customers-firebase.md b/content/courses/stripe-js/customers-firebase.md
similarity index 97%
rename from hugo/content/courses/stripe-js/customers-firebase.md
rename to content/courses/stripe-js/customers-firebase.md
index d904330b7..aef970a73 100644
--- a/hugo/content/courses/stripe-js/customers-firebase.md
+++ b/content/courses/stripe-js/customers-firebase.md
@@ -26,7 +26,7 @@ GOOGLE_APPLICATION_CREDENTIALS="./service-account.json"
```
-{{< file "typescript" "firebase.ts" >}}
+{{< file "ts" "firebase.ts" >}}
```typescript
// Initialize Firebase Admin resources
diff --git a/hugo/content/courses/stripe-js/customers-intro.md b/content/courses/stripe-js/customers-intro.md
similarity index 100%
rename from hugo/content/courses/stripe-js/customers-intro.md
rename to content/courses/stripe-js/customers-intro.md
diff --git a/hugo/content/courses/stripe-js/customers-react.md b/content/courses/stripe-js/customers-react.md
similarity index 100%
rename from hugo/content/courses/stripe-js/customers-react.md
rename to content/courses/stripe-js/customers-react.md
diff --git a/hugo/content/courses/stripe-js/customers-save-card.md b/content/courses/stripe-js/customers-save-card.md
similarity index 94%
rename from hugo/content/courses/stripe-js/customers-save-card.md
rename to content/courses/stripe-js/customers-save-card.md
index 09ca73a56..48f2b5559 100644
--- a/hugo/content/courses/stripe-js/customers-save-card.md
+++ b/content/courses/stripe-js/customers-save-card.md
@@ -11,7 +11,7 @@ video_length: 2:08
## Save and List Credit Cards
-{{< file "typescript" "customers.ts" >}}
+{{< file "ts" "customers.ts" >}}
```typescript
/**
* Creates a SetupIntent used to save a credit card for later use
@@ -41,7 +41,7 @@ export async function listPaymentMethods(userId: string) {
## API Endpoints
-{{< file "typescript" "api.ts" >}}
+{{< file "ts" "api.ts" >}}
```typescript
/**
* Customers and Setup Intents
diff --git a/hugo/content/courses/stripe-js/deployment-cloud-functions.md b/content/courses/stripe-js/deployment-cloud-functions.md
similarity index 100%
rename from hugo/content/courses/stripe-js/deployment-cloud-functions.md
rename to content/courses/stripe-js/deployment-cloud-functions.md
diff --git a/hugo/content/courses/stripe-js/deployment-docker.md b/content/courses/stripe-js/deployment-docker.md
similarity index 100%
rename from hugo/content/courses/stripe-js/deployment-docker.md
rename to content/courses/stripe-js/deployment-docker.md
diff --git a/hugo/content/courses/stripe-js/img/featured.jpg b/content/courses/stripe-js/img/featured.jpg
similarity index 100%
rename from hugo/content/courses/stripe-js/img/featured.jpg
rename to content/courses/stripe-js/img/featured.jpg
diff --git a/hugo/content/courses/stripe-js/img/featured.png b/content/courses/stripe-js/img/featured.png
similarity index 100%
rename from hugo/content/courses/stripe-js/img/featured.png
rename to content/courses/stripe-js/img/featured.png
diff --git a/hugo/content/courses/stripe-js/img/featured.webp b/content/courses/stripe-js/img/featured.webp
similarity index 100%
rename from hugo/content/courses/stripe-js/img/featured.webp
rename to content/courses/stripe-js/img/featured.webp
diff --git a/hugo/content/courses/stripe-payments/img/review-scssat.png b/content/courses/stripe-js/img/review-scssat.png
similarity index 100%
rename from hugo/content/courses/stripe-payments/img/review-scssat.png
rename to content/courses/stripe-js/img/review-scssat.png
diff --git a/hugo/content/courses/stripe-js/intro-express-setup.md b/content/courses/stripe-js/intro-express-setup.md
similarity index 91%
rename from hugo/content/courses/stripe-js/intro-express-setup.md
rename to content/courses/stripe-js/intro-express-setup.md
index a534975ee..7c4dedfe7 100644
--- a/hugo/content/courses/stripe-js/intro-express-setup.md
+++ b/content/courses/stripe-js/intro-express-setup.md
@@ -12,7 +12,7 @@ video_length: 3:46
## Create an Express App
-{{< file "typescript" "api.ts" >}}
+{{< file "ts" "api.ts" >}}
```javascript
import express, { Request, Response } from 'express';
export const app = express();
@@ -33,7 +33,7 @@ app.post('/test', (req: Request, res: Response) => {
## Listen to Incoming Requests
-{{< file "typescript" "index.ts" >}}
+{{< file "ts" "index.ts" >}}
```javascript
// Start the API with Express
import { app } from './api';
diff --git a/hugo/content/courses/stripe-js/intro-node-setup.md b/content/courses/stripe-js/intro-node-setup.md
similarity index 97%
rename from hugo/content/courses/stripe-js/intro-node-setup.md
rename to content/courses/stripe-js/intro-node-setup.md
index 555dfbd49..9bd82fa5f 100644
--- a/hugo/content/courses/stripe-js/intro-node-setup.md
+++ b/content/courses/stripe-js/intro-node-setup.md
@@ -68,7 +68,7 @@ npm run dev
Add a `tsconfig.json` to handle TS compilation.
-{{< file "typescript" "tsconfig.json" >}}
+{{< file "ts" "tsconfig.json" >}}
```json
{
"compilerOptions": {
diff --git a/hugo/content/courses/stripe-js/intro-react.md b/content/courses/stripe-js/intro-react.md
similarity index 100%
rename from hugo/content/courses/stripe-js/intro-react.md
rename to content/courses/stripe-js/intro-react.md
diff --git a/hugo/content/courses/stripe-js/intro-resources.md b/content/courses/stripe-js/intro-resources.md
similarity index 100%
rename from hugo/content/courses/stripe-js/intro-resources.md
rename to content/courses/stripe-js/intro-resources.md
diff --git a/hugo/content/courses/stripe-js/intro-rest.md b/content/courses/stripe-js/intro-rest.md
similarity index 100%
rename from hugo/content/courses/stripe-js/intro-rest.md
rename to content/courses/stripe-js/intro-rest.md
diff --git a/hugo/content/courses/stripe-js/intro-stripe-api-keys.md b/content/courses/stripe-js/intro-stripe-api-keys.md
similarity index 100%
rename from hugo/content/courses/stripe-js/intro-stripe-api-keys.md
rename to content/courses/stripe-js/intro-stripe-api-keys.md
diff --git a/hugo/content/courses/stripe-js/intro-what-is-stripe.md b/content/courses/stripe-js/intro-what-is-stripe.md
similarity index 100%
rename from hugo/content/courses/stripe-js/intro-what-is-stripe.md
rename to content/courses/stripe-js/intro-what-is-stripe.md
diff --git a/hugo/content/courses/stripe-js/payments-create.md b/content/courses/stripe-js/payments-create.md
similarity index 92%
rename from hugo/content/courses/stripe-js/payments-create.md
rename to content/courses/stripe-js/payments-create.md
index d7eea7442..7719d8d6e 100644
--- a/hugo/content/courses/stripe-js/payments-create.md
+++ b/content/courses/stripe-js/payments-create.md
@@ -11,7 +11,7 @@ video_length: 1:39
## Create a Payment Intent
-{{< file "typescript" "payments.ts" >}}
+{{< file "ts" "payments.ts" >}}
```typescript
import { stripe } from './';
@@ -35,7 +35,7 @@ export async function createPaymentIntent(amount: number) {
## Payments Endpoint
-{{< file "typescript" "api.ts" >}}
+{{< file "ts" "api.ts" >}}
```typescript
import { createPaymentIntent } from './payments';
diff --git a/hugo/content/courses/stripe-js/payments-fulfill-webhook.md b/content/courses/stripe-js/payments-fulfill-webhook.md
similarity index 95%
rename from hugo/content/courses/stripe-js/payments-fulfill-webhook.md
rename to content/courses/stripe-js/payments-fulfill-webhook.md
index dfd46451e..8c43b2286 100644
--- a/hugo/content/courses/stripe-js/payments-fulfill-webhook.md
+++ b/content/courses/stripe-js/payments-fulfill-webhook.md
@@ -30,7 +30,7 @@ stripe trigger payment_intent.created
Update the express middleware to include the body buffer.
-{{< file "typescript" "api.ts" >}}
+{{< file "ts" "api.ts" >}}
```typescript
app.use(
express.json({
@@ -39,7 +39,7 @@ app.use(
);
```
-{{< file "typescript" "index.ts" >}}
+{{< file "ts" "index.ts" >}}
```typescript
import { stripe } from './';
import Stripe from 'stripe';
diff --git a/hugo/content/courses/stripe-js/payments-intro.md b/content/courses/stripe-js/payments-intro.md
similarity index 100%
rename from hugo/content/courses/stripe-js/payments-intro.md
rename to content/courses/stripe-js/payments-intro.md
diff --git a/hugo/content/courses/stripe-js/payments-react.md b/content/courses/stripe-js/payments-react.md
similarity index 100%
rename from hugo/content/courses/stripe-js/payments-react.md
rename to content/courses/stripe-js/payments-react.md
diff --git a/content/courses/vscode-tricks/_index.md b/content/courses/vscode-tricks/_index.md
new file mode 100644
index 000000000..642386dfc
--- /dev/null
+++ b/content/courses/vscode-tricks/_index.md
@@ -0,0 +1,42 @@
+---
+lastmod: 2021-11-02T10:23:30-09:00
+title: VS Code Magic Tricks Course
+description: Write code faster with VS Code tips, tricks, and best practices
+weight: 0
+type: courses
+tags:
+ - vscode
+ - productivity
+ - pro
+
+author: Jeff Delaney
+vimeo: 649991100
+stack:
+ - vscode
+ - js
+---
+
+The **VS Code Magic Tricks** course will teach you how to write code *faster* and make you a *happier* developer. It demonstrates dozens of small optimizations that result in long-term productivity gains as a programmer.
+
+## 🧠 What will I Learn?
+
+- 👨🎤 Write better code faster
+- 🎹 Edit code in rhythm with your keyboard
+- 🕹️ Tweak settings for optimal productivity
+- 🤖 Automate repetitive tasks
+- 🦺 Avoid common pitfalls and bottlenecks
+- 🎨 Leverage powerful extensions
+- 🚀 Advanced IDE features like Docker & remote repos
+
+## ⚡ Is the Course Updated?
+
+
Updated Nov 26th, 2021
+
+## 🤔 Is this Course Right for Me?
+
+This course is for beginners and experienced developers alike. It is fast-paced and similar to [my style on YouTube](https://www.youtube.com/c/Fireship), but far more in-depth and comprehensive.
+
+## How do I enroll?
+
+The first 10 videos are *free*, so just give it try. When you reach a paid module, you will be asked to pay for a single course or upgrade to PRO.
+
diff --git a/hugo/content/courses/vscode-tricks/basics-cli.md b/content/courses/vscode-tricks/basics-cli.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/basics-cli.md
rename to content/courses/vscode-tricks/basics-cli.md
diff --git a/hugo/content/courses/vscode-tricks/basics-cmd-palette.md b/content/courses/vscode-tricks/basics-cmd-palette.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/basics-cmd-palette.md
rename to content/courses/vscode-tricks/basics-cmd-palette.md
diff --git a/hugo/content/courses/vscode-tricks/basics-explorer.md b/content/courses/vscode-tricks/basics-explorer.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/basics-explorer.md
rename to content/courses/vscode-tricks/basics-explorer.md
diff --git a/hugo/content/courses/vscode-tricks/basics-intellisense.md b/content/courses/vscode-tricks/basics-intellisense.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/basics-intellisense.md
rename to content/courses/vscode-tricks/basics-intellisense.md
diff --git a/hugo/content/courses/vscode-tricks/basics-keyboard-shortcuts.md b/content/courses/vscode-tricks/basics-keyboard-shortcuts.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/basics-keyboard-shortcuts.md
rename to content/courses/vscode-tricks/basics-keyboard-shortcuts.md
diff --git a/hugo/content/courses/vscode-tricks/basics-settings.md b/content/courses/vscode-tricks/basics-settings.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/basics-settings.md
rename to content/courses/vscode-tricks/basics-settings.md
diff --git a/hugo/content/courses/vscode-tricks/bonus-vscode-pitfalls.md b/content/courses/vscode-tricks/bonus-vscode-pitfalls.md
similarity index 75%
rename from hugo/content/courses/vscode-tricks/bonus-vscode-pitfalls.md
rename to content/courses/vscode-tricks/bonus-vscode-pitfalls.md
index 5db4420dc..4aa4d8b89 100644
--- a/hugo/content/courses/vscode-tricks/bonus-vscode-pitfalls.md
+++ b/content/courses/vscode-tricks/bonus-vscode-pitfalls.md
@@ -7,8 +7,5 @@ draft: false
emoji: 🚩
video_length: 11:30
chapter_start: Bonus Round
+youtube: ifTF3ags0XI
---
-
-
- {{< youtube ifTF3ags0XI >}}
-
diff --git a/hugo/content/courses/vscode-tricks/ide-debugger.md b/content/courses/vscode-tricks/ide-debugger.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/ide-debugger.md
rename to content/courses/vscode-tricks/ide-debugger.md
diff --git a/hugo/content/courses/vscode-tricks/ide-docker.md b/content/courses/vscode-tricks/ide-docker.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/ide-docker.md
rename to content/courses/vscode-tricks/ide-docker.md
diff --git a/hugo/content/courses/vscode-tricks/ide-git.md b/content/courses/vscode-tricks/ide-git.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/ide-git.md
rename to content/courses/vscode-tricks/ide-git.md
diff --git a/hugo/content/courses/vscode-tricks/ide-http.md b/content/courses/vscode-tricks/ide-http.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/ide-http.md
rename to content/courses/vscode-tricks/ide-http.md
diff --git a/hugo/content/courses/vscode-tricks/ide-remote.md b/content/courses/vscode-tricks/ide-remote.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/ide-remote.md
rename to content/courses/vscode-tricks/ide-remote.md
diff --git a/hugo/content/courses/vscode-tricks/ide-tasks.md b/content/courses/vscode-tricks/ide-tasks.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/ide-tasks.md
rename to content/courses/vscode-tricks/ide-tasks.md
diff --git a/hugo/content/courses/vscode-tricks/ide-terminal.md b/content/courses/vscode-tricks/ide-terminal.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/ide-terminal.md
rename to content/courses/vscode-tricks/ide-terminal.md
diff --git a/hugo/content/courses/vscode-tricks/img/featured.jpg b/content/courses/vscode-tricks/img/featured.jpg
similarity index 100%
rename from hugo/content/courses/vscode-tricks/img/featured.jpg
rename to content/courses/vscode-tricks/img/featured.jpg
diff --git a/hugo/content/courses/vscode-tricks/img/featured.png b/content/courses/vscode-tricks/img/featured.png
similarity index 100%
rename from hugo/content/courses/vscode-tricks/img/featured.png
rename to content/courses/vscode-tricks/img/featured.png
diff --git a/hugo/content/courses/vscode-tricks/img/featured.webp b/content/courses/vscode-tricks/img/featured.webp
similarity index 100%
rename from hugo/content/courses/vscode-tricks/img/featured.webp
rename to content/courses/vscode-tricks/img/featured.webp
diff --git a/hugo/content/courses/vscode-tricks/tip-actions.md b/content/courses/vscode-tricks/tip-actions.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-actions.md
rename to content/courses/vscode-tricks/tip-actions.md
diff --git a/hugo/content/courses/vscode-tricks/tip-auto-dir.md b/content/courses/vscode-tricks/tip-auto-dir.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-auto-dir.md
rename to content/courses/vscode-tricks/tip-auto-dir.md
diff --git a/hugo/content/courses/vscode-tricks/tip-colorizer.md b/content/courses/vscode-tricks/tip-colorizer.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-colorizer.md
rename to content/courses/vscode-tricks/tip-colorizer.md
diff --git a/hugo/content/courses/vscode-tricks/tip-copilot.md b/content/courses/vscode-tricks/tip-copilot.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-copilot.md
rename to content/courses/vscode-tricks/tip-copilot.md
diff --git a/hugo/content/courses/vscode-tricks/tip-emmet-wrap.md b/content/courses/vscode-tricks/tip-emmet-wrap.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-emmet-wrap.md
rename to content/courses/vscode-tricks/tip-emmet-wrap.md
diff --git a/hugo/content/courses/vscode-tricks/tip-emmet.md b/content/courses/vscode-tricks/tip-emmet.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-emmet.md
rename to content/courses/vscode-tricks/tip-emmet.md
diff --git a/hugo/content/courses/vscode-tricks/tip-find-refs.md b/content/courses/vscode-tricks/tip-find-refs.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-find-refs.md
rename to content/courses/vscode-tricks/tip-find-refs.md
diff --git a/hugo/content/courses/vscode-tricks/tip-folding.md b/content/courses/vscode-tricks/tip-folding.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-folding.md
rename to content/courses/vscode-tricks/tip-folding.md
diff --git a/hugo/content/courses/vscode-tricks/tip-hints.md b/content/courses/vscode-tricks/tip-hints.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-hints.md
rename to content/courses/vscode-tricks/tip-hints.md
diff --git a/hugo/content/courses/vscode-tricks/tip-linked-editing.md b/content/courses/vscode-tricks/tip-linked-editing.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-linked-editing.md
rename to content/courses/vscode-tricks/tip-linked-editing.md
diff --git a/hugo/content/courses/vscode-tricks/tip-move-fast.md b/content/courses/vscode-tricks/tip-move-fast.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-move-fast.md
rename to content/courses/vscode-tricks/tip-move-fast.md
diff --git a/hugo/content/courses/vscode-tricks/tip-move-lines.md b/content/courses/vscode-tricks/tip-move-lines.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-move-lines.md
rename to content/courses/vscode-tricks/tip-move-lines.md
diff --git a/hugo/content/courses/vscode-tricks/tip-multi-cursor.md b/content/courses/vscode-tricks/tip-multi-cursor.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-multi-cursor.md
rename to content/courses/vscode-tricks/tip-multi-cursor.md
diff --git a/hugo/content/courses/vscode-tricks/tip-multiline.md b/content/courses/vscode-tricks/tip-multiline.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-multiline.md
rename to content/courses/vscode-tricks/tip-multiline.md
diff --git a/hugo/content/courses/vscode-tricks/tip-safe-rename.md b/content/courses/vscode-tricks/tip-safe-rename.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-safe-rename.md
rename to content/courses/vscode-tricks/tip-safe-rename.md
diff --git a/hugo/content/courses/vscode-tricks/tip-snippets.md b/content/courses/vscode-tricks/tip-snippets.md
similarity index 100%
rename from hugo/content/courses/vscode-tricks/tip-snippets.md
rename to content/courses/vscode-tricks/tip-snippets.md
diff --git a/hugo/content/courses/vscode-tricks/vscode-100-seconds.md b/content/courses/vscode-tricks/vscode-100-seconds.md
similarity index 77%
rename from hugo/content/courses/vscode-tricks/vscode-100-seconds.md
rename to content/courses/vscode-tricks/vscode-100-seconds.md
index a36dbf0a9..cefd2147a 100644
--- a/hugo/content/courses/vscode-tricks/vscode-100-seconds.md
+++ b/content/courses/vscode-tricks/vscode-100-seconds.md
@@ -8,9 +8,6 @@ emoji: ⚡
video_length: 2:25
chapter_start: Get Started
free: true
+youtube: KMxo3T_MTvY
---
-
- {{< youtube KMxo3T_MTvY >}}
-
-
diff --git a/content/dashboard.html b/content/dashboard.html
new file mode 100644
index 000000000..d180c39f0
--- /dev/null
+++ b/content/dashboard.html
@@ -0,0 +1,107 @@
+---
+title: Dashboard
+---
+
+
+
+
+ User ID:
+ PRO Status:
+
+ Account Email:
+
+
+
+
+ Sign Out
+
+
+
+
+
Enterprise Account
+
+
Use the form below to assign your seats. Each account will get a welcome email and have full access after signing in. You can always revoke access later.
+
+
+
+
+
+ Manage account
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ FAQ
+
+
+ How do I get my T-shirt & Sticker?
+
+ You should have received an email with a link to a Google Form after upgrading. If not, you can access with the /pro command in Discord
+
+ Can I customize my invoice or receipt details?
+
+ Yes, you can modify your name and address by clicking the change address button above. Once updated, it should be reflected on all invoices and receipts.
+
+ How do I cancel my subscription?
+
+ Click the manage subscription button above. Your pro status will remain active until the billing period ends.
+
+
+
+ Get in Touch
+
+
+ Need help with your account? Reach via your favorite channel and we'll respond in 24 hours or less.
+
+
+
+ Danger Zone
+
+
+ In accordance with GDPR, use this button to delete your account and wipe all data from our servers forever.
+
+
+
You're signed out... This page is useless to to you.
+
+ Sign in Now
+
+
+
diff --git a/content/fail.html b/content/fail.html
new file mode 100644
index 000000000..6faa56b11
--- /dev/null
+++ b/content/fail.html
@@ -0,0 +1,11 @@
+---
+title: Canceled
+type: blank
+---
+
+
+
Purchase Cancelled
+
Looks like you we're not able to complete your purchase. If you ran into any issues or have questions, email hello@fireship.io
+
You may now close this tab
+
+
\ No newline at end of file
diff --git a/content/get-started.md b/content/get-started.md
new file mode 100644
index 000000000..c49a30020
--- /dev/null
+++ b/content/get-started.md
@@ -0,0 +1,26 @@
+---
+title: Get Started
+description: Getting started with Fireship PRO
+---
+
+# Getting Starting
+
+# Learning Paths
+
+This is how you do it.
+
+- webdev
+- react
+- firebase
+- flutter
+
+
+## Get in Touch
+
+This is how you do it.
+
+
+## Experience Points
+
+
+This is how you do it.
diff --git a/hugo/archetypes/bundle/img/.gitkeep b/content/lessons/7-security-concepts-hacks-web-developers/img/.gitkeep
similarity index 100%
rename from hugo/archetypes/bundle/img/.gitkeep
rename to content/lessons/7-security-concepts-hacks-web-developers/img/.gitkeep
diff --git a/hugo/content/lessons/7-security-concepts-hacks-web-developers/img/cia-triad.png b/content/lessons/7-security-concepts-hacks-web-developers/img/cia-triad.png
similarity index 100%
rename from hugo/content/lessons/7-security-concepts-hacks-web-developers/img/cia-triad.png
rename to content/lessons/7-security-concepts-hacks-web-developers/img/cia-triad.png
diff --git a/hugo/content/lessons/7-security-concepts-hacks-web-developers/img/featured.jpg b/content/lessons/7-security-concepts-hacks-web-developers/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/7-security-concepts-hacks-web-developers/img/featured.jpg
rename to content/lessons/7-security-concepts-hacks-web-developers/img/featured.jpg
diff --git a/hugo/content/lessons/7-security-concepts-hacks-web-developers/img/featured.png b/content/lessons/7-security-concepts-hacks-web-developers/img/featured.png
similarity index 100%
rename from hugo/content/lessons/7-security-concepts-hacks-web-developers/img/featured.png
rename to content/lessons/7-security-concepts-hacks-web-developers/img/featured.png
diff --git a/hugo/content/lessons/7-security-concepts-hacks-web-developers/img/featured.webp b/content/lessons/7-security-concepts-hacks-web-developers/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/7-security-concepts-hacks-web-developers/img/featured.webp
rename to content/lessons/7-security-concepts-hacks-web-developers/img/featured.webp
diff --git a/hugo/content/lessons/7-security-concepts-hacks-web-developers/img/xss-diagram.png b/content/lessons/7-security-concepts-hacks-web-developers/img/xss-diagram.png
similarity index 100%
rename from hugo/content/lessons/7-security-concepts-hacks-web-developers/img/xss-diagram.png
rename to content/lessons/7-security-concepts-hacks-web-developers/img/xss-diagram.png
diff --git a/content/lessons/7-security-concepts-hacks-web-developers/index.md b/content/lessons/7-security-concepts-hacks-web-developers/index.md
new file mode 100644
index 000000000..42f2c7a83
--- /dev/null
+++ b/content/lessons/7-security-concepts-hacks-web-developers/index.md
@@ -0,0 +1,102 @@
+---
+title: Top 7 Security Concepts for Web Developers
+lastmod: 2020-02-13T09:37:39-07:00
+publishdate: 2020-02-13T09:37:39-07:00
+author: Jeff Delaney
+draft: false
+description: Security concepts, risks, and exploits that every web developer should know about.
+tags:
+ - javascript
+ - security
+
+youtube: 4YOpILi9Oxs
+# github:
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+Cloud providers and web application frameworks go to great lengths to protect you from writing insecure code. The Cloud provides secure defaults and monitoring for your infrastructure, while Angular and React automatically sanitize HTML to prevent the injection of malicious JavaScript. Despite these safeguards, no application is 100%, secure and clever new exploits will be discovered. The following lesson explains some of the most common hacking techniques and how to secure your app against them.
+
+## 1. Zero-day Vulnerability
+
+A **zero-day vulnerability** is a weakness that is unknown or unfixed as of today. When a hacker decides to attack this weakness, it's called **zero-day exploit**.
+
+After it becomes known, you can think of it as a one-day or 20-day exploit based on the time since the initial discovery.
+
+## 2. Packages with Known Vulnerabilities
+
+> In 2017, the [Equifax Data Breach](https://www.cnet.com/news/equifax-ceo-data-breach-heres-what-went-wrong/) exposed more than 140MM customer records and has cost the company over $1 billion. It was caused by a known exploit over two months old that could have been prevented with a simple update to Apache Struts.
+
+Using packages with [known vulnerabilities](https://owasp.org/www-project-top-ten/OWASP_Top_Ten_2017/Top_10-2017_A9-Using_Components_with_Known_Vulnerabilities) is the most common way hackers exploit web apps.
+
+Audit your current NPM project using the [audit](https://docs.npmjs.com/cli/audit) command. Then update your dependencies as needed.
+
+{{< file "terminal" "command line" >}}
+```text
+npm audit
+
+npm audit fix
+```
+
+
+## 3. Cross-site Scripting (XSS)
+
+> The Samy worm was an XSS attack that spread to over 1 million MySpace pages in 24 hours. If affected, it would update your profile to say *but most of all, samy is my hero*
+
+
+
+
+
+
+Cross Site Scripting occurs when a hacker runs malicious JavaScript on a client's browser. It can happen in a variety of ways, but is commonly the result of rendering raw HTML from the server.
+
+{{< figure src="img/xss-diagram.png" caption="A diagram of a typical Cross Site Scripting attack" >}}
+
+1. Hacker saves some JS code to the database like `` by submitting a comment via the web app.
+2. The victim user visits the webpage with that comment, but the developer did not sanitize the hacker's comment, so the browser thinks it's a trusted script/html.
+3. At this point, the hacker's JS is running as if it were the end-user.
+
+## 4. SQL Injection
+
+> In 2008, Heartland Payment Systems exposed the data encoded on credit cards via a SQL injection attack. The hackers used this data to make physical counterfeit credit cards. The ringleader, Albert Gonzalez, was caught and sentenced to 20 years in prison.
+
+[SQL injection](https://owasp.org/www-project-top-ten/OWASP_Top_Ten_2017/Top_10-2017_A1-Injection) is similar conceptually to XSS, but instead, it runs malicious code on the database.
+
+Notice how the code below relies on an external parameter to construct the query. If not sanitized, an attacker can submit raw SQL code and the database will execute it.
+
+```sql
+"SELECT * FROM users WHERE uid='" + request.getParameter("uid") + "'";
+```
+
+
+Most ORMs will prevent SQL injection attacks because you do not construct the queries on your own. However, there have been hacks on ORMs directly, so again, nothing is 100% secure.
+
+## 5. Credential Leaks
+
+Many APIs and Cloud Providers provide API keys that allow you to interact with paid services. If a hacker discovers a secret API key it can be used to take destructive action on your behalf. There are a few ways credentials are leaked.
+
+1. Using API keys directly in source code, then pushing the repo to Github.
+1. Using API keys directly in source code, then bundling them in your production app.
+
+You can prevent credential leaks by NOT putting them in your source code. Instead, use environment variables or a service like [Secret Manager](https://cloud.google.com/secret-manager/docs).
+
+
+## 6. Principle of Least Privilege
+
+In the event that your credentials are compromised, you can mitigate the damage by following the Principle of Least Privilege. Basically, this means **grant access only when it is absolutely required**.
+
+A good example is [Firestore Database Rules](/snippets/firestore-rules-recipes/), which allow you to customize the permissions of an API key. When defining rules, you should always start by locking down everything, then selectively allow access as needed.
+
+## 7. DDoS Attacks
+
+> In 2018, Github survived the largest DDoS attack in history after it was bombarded with 1.35 terabits of data per second. It only took the site down for about ten minutes thanks to a backup service, Akamai, which re-routed traffic and blocked the spoofed requests.
+
+A [DDoS](https://en.wikipedia.org/wiki/Denial-of-service_attack) attack attempts to flood the service with so much traffic that it simply shuts down. The attack is typically distributed via many spoofed sources, making it impossible to just block a single IP address.
+
+For most developers, the best mitigation strategy is to use a large Cloud provider that has the bandwidth and monitoring capabilities to deal with such attacks.
\ No newline at end of file
diff --git a/content/lessons/_index.md b/content/lessons/_index.md
new file mode 100644
index 000000000..f987619b7
--- /dev/null
+++ b/content/lessons/_index.md
@@ -0,0 +1,3 @@
+---
+title: Lessons
+---
\ No newline at end of file
diff --git a/hugo/content/lessons/7-security-concepts-hacks-web-developers/img/.gitkeep b/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/7-security-concepts-hacks-web-developers/img/.gitkeep
rename to content/lessons/advanced-cloud-vision-ocr-text-extraction/img/.gitkeep
diff --git a/hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/cloud-vision-doc.png b/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/cloud-vision-doc.png
similarity index 100%
rename from hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/cloud-vision-doc.png
rename to content/lessons/advanced-cloud-vision-ocr-text-extraction/img/cloud-vision-doc.png
diff --git a/hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/cloud-vision-text-ocr.png b/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/cloud-vision-text-ocr.png
similarity index 100%
rename from hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/cloud-vision-text-ocr.png
rename to content/lessons/advanced-cloud-vision-ocr-text-extraction/img/cloud-vision-text-ocr.png
diff --git a/hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/featured.jpg b/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/featured.jpg
rename to content/lessons/advanced-cloud-vision-ocr-text-extraction/img/featured.jpg
diff --git a/hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/featured.png b/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/featured.png
similarity index 100%
rename from hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/featured.png
rename to content/lessons/advanced-cloud-vision-ocr-text-extraction/img/featured.png
diff --git a/hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/featured.webp b/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/featured.webp
rename to content/lessons/advanced-cloud-vision-ocr-text-extraction/img/featured.webp
diff --git a/hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/index.md b/content/lessons/advanced-cloud-vision-ocr-text-extraction/index.md
similarity index 100%
rename from hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/index.md
rename to content/lessons/advanced-cloud-vision-ocr-text-extraction/index.md
diff --git a/hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/.gitkeep b/content/lessons/advanced-firestore-nosql-data-structure-examples/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/advanced-cloud-vision-ocr-text-extraction/img/.gitkeep
rename to content/lessons/advanced-firestore-nosql-data-structure-examples/img/.gitkeep
diff --git a/hugo/content/lessons/advanced-firestore-nosql-data-structure-examples/img/featured.jpg b/content/lessons/advanced-firestore-nosql-data-structure-examples/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/advanced-firestore-nosql-data-structure-examples/img/featured.jpg
rename to content/lessons/advanced-firestore-nosql-data-structure-examples/img/featured.jpg
diff --git a/hugo/content/lessons/advanced-firestore-nosql-data-structure-examples/img/featured.png b/content/lessons/advanced-firestore-nosql-data-structure-examples/img/featured.png
similarity index 100%
rename from hugo/content/lessons/advanced-firestore-nosql-data-structure-examples/img/featured.png
rename to content/lessons/advanced-firestore-nosql-data-structure-examples/img/featured.png
diff --git a/hugo/content/lessons/advanced-firestore-nosql-data-structure-examples/img/featured.webp b/content/lessons/advanced-firestore-nosql-data-structure-examples/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/advanced-firestore-nosql-data-structure-examples/img/featured.webp
rename to content/lessons/advanced-firestore-nosql-data-structure-examples/img/featured.webp
diff --git a/hugo/content/lessons/advanced-firestore-nosql-data-structure-examples/img/firestore-threaded-comments.gif b/content/lessons/advanced-firestore-nosql-data-structure-examples/img/firestore-threaded-comments.gif
similarity index 100%
rename from hugo/content/lessons/advanced-firestore-nosql-data-structure-examples/img/firestore-threaded-comments.gif
rename to content/lessons/advanced-firestore-nosql-data-structure-examples/img/firestore-threaded-comments.gif
diff --git a/hugo/content/lessons/advanced-firestore-nosql-data-structure-examples/index.md b/content/lessons/advanced-firestore-nosql-data-structure-examples/index.md
similarity index 100%
rename from hugo/content/lessons/advanced-firestore-nosql-data-structure-examples/index.md
rename to content/lessons/advanced-firestore-nosql-data-structure-examples/index.md
diff --git a/hugo/content/lessons/advanced-firestore-nosql-data-structure-examples/img/.gitkeep b/content/lessons/advanced-flutter-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/advanced-firestore-nosql-data-structure-examples/img/.gitkeep
rename to content/lessons/advanced-flutter-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/advanced-flutter-firebase/img/data-model-root.png b/content/lessons/advanced-flutter-firebase/img/data-model-root.png
similarity index 100%
rename from hugo/content/lessons/advanced-flutter-firebase/img/data-model-root.png
rename to content/lessons/advanced-flutter-firebase/img/data-model-root.png
diff --git a/hugo/content/lessons/advanced-flutter-firebase/img/data-model-sub.png b/content/lessons/advanced-flutter-firebase/img/data-model-sub.png
similarity index 100%
rename from hugo/content/lessons/advanced-flutter-firebase/img/data-model-sub.png
rename to content/lessons/advanced-flutter-firebase/img/data-model-sub.png
diff --git a/hugo/content/lessons/advanced-flutter-firebase/img/featured.jpg b/content/lessons/advanced-flutter-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/advanced-flutter-firebase/img/featured.jpg
rename to content/lessons/advanced-flutter-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/advanced-flutter-firebase/img/featured.png b/content/lessons/advanced-flutter-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/advanced-flutter-firebase/img/featured.png
rename to content/lessons/advanced-flutter-firebase/img/featured.png
diff --git a/hugo/content/lessons/advanced-flutter-firebase/img/featured.webp b/content/lessons/advanced-flutter-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/advanced-flutter-firebase/img/featured.webp
rename to content/lessons/advanced-flutter-firebase/img/featured.webp
diff --git a/content/lessons/advanced-flutter-firebase/index.md b/content/lessons/advanced-flutter-firebase/index.md
new file mode 100644
index 000000000..20920d600
--- /dev/null
+++ b/content/lessons/advanced-flutter-firebase/index.md
@@ -0,0 +1,310 @@
+---
+title: Flutter Provider with Firebase
+lastmod: 2019-05-11T13:59:08-07:00
+publishdate: 2019-05-11T13:59:08-07:00
+author: Jeff Delaney
+draft: false
+description: Advanced state management techniques when working with Firebase Auth & Firestore in Flutter applications.
+tags:
+ - flutter
+ - firebase
+ - firestore
+ - advanced
+
+youtube: vFxk_KJCqgk
+github: https://github.com/fireship-io/185-advanced-flutter-firestore
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+The following article discusses patterns that I have found exceptionally useful when implementing Firebase User Authentication and Firestore in Flutter. In particular, the [Provider](https://pub.dev/packages/provider) provides an excellent solution for sharing and managing streams with minimal boilerplate. However, to take full advantage of this package you must deserialize your raw data to a Dart class.
+
+
+If you are building a major project with Flutter & Firebase, consider enrolling in the [Full Flutter Firebase Course](/courses/flutter-firebase/).
+
+
+## Basic Firestore Read
+
+## Sharing Global Data
+
+When it comes to static values that never change I would highly recommend that you *Keep it Simple*.
+
+### Static Global Data
+
+ Dart supports global variables, so you can just instantiate objects outside of the widget tree as needed, but keep your code organized and avoid polluting the global namespace.
+
+A solution that provides organization and also code-readability is to use a dedicated class that defines static properties and methods. This ensures that you always know where the value originated and prevents the creation of duplicate instances.
+
+{{< file "dart" "globals.dart" >}}
+```dart
+class Global {
+ // App Data
+ static final String title = 'Fireship';
+
+ // Services
+ static final FirebaseAnalytics analytics = FirebaseAnalytics();
+
+ // Helper Methods
+ static doSomethingCool() => print('cool');
+}
+
+
+/// Elsewhere in flutter...
+FlatButton(child: Text(Global.title), onPressed: Global.doSomethingCool );
+```
+
+As an alternative, you can break your data into multiple global singletons with the [get_it](https://pub.dev/packages/get_it) library.
+
+### Global Streams
+
+Streams are a bit more complex because we need to explicitly listen to them and dispose of them when done - this can lead to a lot of boilerplate when done manually in a StatefulWidget.
+
+A better option is to use Flutter's built in `StreamBuilder` widget, which automatically manages your stream and gives you a build context. However, it can still be a challenge to combine multiple streams and/or share their values in multiple places.
+
+An *even better option* is the [Provider](https://pub.dev/packages/provider) package. It is mostly syntatic sugar for *InheritedWidget*, but can also manage Stream subscriptions. In the snippet below, we wrap the entire MaterialApp in with a `MultiProvider`, then listen a Firebase user's global authentication state.
+
+{{< file "dart" "main.dart" >}}
+```dart
+import 'package:provider/provider.dart';
+
+class MyApp extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+
+ return MultiProvider(
+ providers: [
+ // Make user stream available
+ StreamProvider
.value(stream: FirebaseAuth.instance.onAuthStateChanged),
+
+ // See implementation details in next sections
+ StreamProvider.value(stream: firestoreStream),
+ ],
+
+ // All data will be available in this child and descendents
+ child: MaterialApp(...)
+ );
+ }
+}
+```
+
+
+The beauty of this approach is that `StreamProvider` will automatically listen to the subscription for us (and dispose if necessary, it is actually just a StreamBuilder under the hood), allowing us to treat the underlying data as a synchronous value available to the entire app. We can access it in a build method like so:
+
+```dart
+// Some widget deeply nested in the widget tree...
+class SomeWidget extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ var user = Provider.of(context);
+
+ return Text(user.displayName)
+
+ }
+}
+```
+
+
+## Deserializing Firebase Data to a Dart Class
+
+Unlike TypeScript, you cannot just overlay an Interface over a Map in Dart and have it accept those types.
+
+Firebase returns data from Firestore in the form of a `Map`. It is perfectly fine to call properties on a map in your code:
+
+```dart
+Text(data['title']),
+Text(data['description'])
+```
+
+But this becomes increasingly difficult as your app grows, both in terms of code-maintainability and unexpected runtime errors. In addition, it makes it difficult to use the Provider package, because it looks up the widget tree for a specific type signature. We need a way to convert a `Map` to a Class instance, allowing us to write code like:
+
+```dart
+Text(data.title),
+Text(data.description)
+```
+
+### Data Model Class
+
+There are several JSON deserialization strategies in Flutter, but I've found hand-written classes to be the most reliable approach. Let's start by writing the classes that define the shape of our data
+
+{{< file "dart" "main.dart" >}}
+```dart
+
+class SuperHero {
+ final String name;
+ final int strength;
+ final int damage;
+
+ SuperHero({ this.name, this.strength });
+}
+
+class Weapon {
+ final String id;
+ final String name;
+ final int hitpoints;
+
+ Weapon({ this.id, this.name, this.hitpoints });
+}
+```
+
+These classes match the data types that we expect back from Firestore.
+
+{{< figure src="img/data-model-root.png" alt="The heroes root collection in Firestore" >}}
+
+{{< figure src="img/data-model-sub.png" alt="The weapons subcollection, i.e. the weapons owned by the hero" >}}
+
+
+
+### From a Map or JSON
+
+In most cases, it makes the most sense to deserialize from a Map because this makes your data model compatible with other sources, like Dart's HTTP client, or anything that fetches JSON. Below we expand our class with a factory constructor to convert a Map to an instance of `SuperHero`.
+
+
+```dart
+class SuperHero {
+
+ final String name;
+ final int strength;
+
+ SuperHero({ this.name, this.strength });
+
+ factory SuperHero.fromMap(Map data) {
+ data = data ?? { };
+ return SuperHero(
+ name: data['name'] ?? '',
+ strength: data['strength'] ?? 100,
+ );
+ }
+
+}
+```
+
+
+### From a Firestore Document
+
+It is also possible to setup your constructor specifically for a Firestore `DocumentSnapshot`. This makes your code more specialized for Firebase, but has the added benefit of giving you the document ID on collection queries.
+
+```dart
+class Weapon {
+ final String id;
+ final String name;
+ final int hitpoints;
+ final String img;
+
+ Weapon({ this.id, this.name, this.hitpoints, this.img, });
+
+ factory Weapon.fromFirestore(DocumentSnapshot doc) {
+ Map data = doc.data;
+
+ return Weapon(
+ id: doc.documentID,
+ name: data['name'] ?? '',
+ hitpoints: data['hitpoints'] ?? 0,
+ img: data['img'] ?? ''
+ );
+ }
+
+}
+```
+
+
+
+## Database Service
+
+Now that you know how to deserialize data, the next challenge is to write an efficient service for fetching and writing data. Every app has different needs, but the service below separates the business logic from your widgets. It should expose readable methods for data reads/writes that deserialize your data.
+
+
+### Example Database Service
+
+The service below converts a firestore document read, then maps it to a `SuperHero` and a collection query to a `List`, as streams.
+
+{{< file "dart" "db.dart" >}}
+```dart
+import 'package:cloud_firestore/cloud_firestore.dart';
+import 'package:firebase_auth/firebase_auth.dart';
+import 'dart:async';
+import 'models.dart';
+
+class DatabaseService {
+ final Firestore _db = Firestore.instance;
+
+ /// Get a stream of a single document
+ Stream streamHero(String id) {
+ return _db
+ .collection('heroes')
+ .document(id)
+ .snapshots()
+ .map((snap) => SuperHero.fromMap(snap.data));
+ }
+
+ /// Query a subcollection
+ Stream> streamWeapons(FirebaseUser user) {
+ var ref = _db.collection('heroes').document(user.uid).collection('weapons');
+
+ return ref.snapshots().map((list) =>
+ list.documents.map((doc) => Weapon.fromFirestore(doc)).toList());
+
+ }
+
+ /// Write data
+ Future createHero(String heroId) {
+ return _db.collection('heroes').document(heroId).setData({ /* some data */ });
+ }
+
+}
+```
+
+
+### Using the service with Provider
+
+Now that we have a `Stream` based on our data models, we can easily share and combine streaming data throughout the widget tree.
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+class HeroScreen extends StatelessWidget {
+ final auth = FirebaseAuth.instance;
+ final db = DatabaseService();
+
+ @override
+ Widget build(BuildContext context) {
+ var user = Provider.of(context);
+ bool loggedIn = user != null;
+
+ return Column(
+ children: [
+ if (loggedIn)
+
+ StreamProvider.value( // All children will have access to SuperHero data
+ stream: db.streamHero(user),
+ child: HeroProfile(),
+ ),
+
+ StreamProvider>.value( // All children will have access to weapons data
+ stream: db.streamWeapons(user),
+ child: WeaponsList(),
+ ),
+
+ ],
+ );
+ }
+}
+
+
+
+class WeaponsList extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ var weapons = Provider.of>(context);
+ var user = Provider.of(context);
+
+ return Text('Hi ${user.displayName}, you have ${weapons.length} weapons equipped')
+
+ }
+}
+```
diff --git a/hugo/content/lessons/advanced-flutter-firebase/img/.gitkeep b/content/lessons/algolia-cloud-functions/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/advanced-flutter-firebase/img/.gitkeep
rename to content/lessons/algolia-cloud-functions/img/.gitkeep
diff --git a/hugo/content/lessons/algolia-cloud-functions/img/algolia-firestore-demo.png b/content/lessons/algolia-cloud-functions/img/algolia-firestore-demo.png
similarity index 100%
rename from hugo/content/lessons/algolia-cloud-functions/img/algolia-firestore-demo.png
rename to content/lessons/algolia-cloud-functions/img/algolia-firestore-demo.png
diff --git a/hugo/content/lessons/algolia-cloud-functions/img/api-keys.png b/content/lessons/algolia-cloud-functions/img/api-keys.png
similarity index 100%
rename from hugo/content/lessons/algolia-cloud-functions/img/api-keys.png
rename to content/lessons/algolia-cloud-functions/img/api-keys.png
diff --git a/hugo/content/lessons/algolia-cloud-functions/img/create-index.png b/content/lessons/algolia-cloud-functions/img/create-index.png
similarity index 100%
rename from hugo/content/lessons/algolia-cloud-functions/img/create-index.png
rename to content/lessons/algolia-cloud-functions/img/create-index.png
diff --git a/hugo/content/lessons/algolia-cloud-functions/img/featured.jpg b/content/lessons/algolia-cloud-functions/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/algolia-cloud-functions/img/featured.jpg
rename to content/lessons/algolia-cloud-functions/img/featured.jpg
diff --git a/hugo/content/lessons/algolia-cloud-functions/img/featured.png b/content/lessons/algolia-cloud-functions/img/featured.png
similarity index 100%
rename from hugo/content/lessons/algolia-cloud-functions/img/featured.png
rename to content/lessons/algolia-cloud-functions/img/featured.png
diff --git a/hugo/content/lessons/algolia-cloud-functions/img/featured.webp b/content/lessons/algolia-cloud-functions/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/algolia-cloud-functions/img/featured.webp
rename to content/lessons/algolia-cloud-functions/img/featured.webp
diff --git a/content/lessons/algolia-cloud-functions/index.md b/content/lessons/algolia-cloud-functions/index.md
new file mode 100644
index 000000000..f7fdf38fa
--- /dev/null
+++ b/content/lessons/algolia-cloud-functions/index.md
@@ -0,0 +1,181 @@
+---
+title: Algolia Fulltext Search Cloud Functions
+lastmod: 2019-08-25T10:43:13-07:00
+publishdate: 2019-08-25T10:43:13-07:00
+author: Jeff Delaney
+draft: false
+description: Build a pipeline for full-text search indexing with Firestore Cloud Functions
+tags:
+ - node
+ - algolia
+ - firestore
+ - cloud-functions
+
+youtube: dTXzxSlhTDM
+github: https://github.com/fireship-io/203-algolia-firestore-mvp
+---
+
+One of the most commonly encountered limitations of [Cloud Firestore](https://firebase.google.com/docs/firestore) (and GCP) is [full-text search](https://en.wikipedia.org/wiki/Full-text_search). This functionality is essential if you need to query complex text patterns in a database or filter results by multiple dynamic properties. My favorite solution to this limitation is [Algolia](https://www.algolia.com/), which provides a powerful, developer-friendly, search & discovery API. In the following lesson you will learn how to sync your Firestore data to an Algolia index via Cloud Functions.
+
+
+
+{{< figure src="img/algolia-firestore-demo.png" caption="Notice how the Algolia index (left) is synced-up with the Firestore document (right)" >}}
+
+
+## Initial Setup
+
+### Blaze plan required
+
+Make sure you are at least using the Firebase Blaze plan because this will enable you to make network requests to third-party APIs like Algolia.
+
+### Initialize Cloud Functions
+
+First, initialize Cloud Functions in your project with the Firebase Tools CLI. This lesson uses vanilla JS, but feel free to select TypeScript if you prefer.
+
+{{< file "terminal" "command line" >}}
+```text
+npm i -g firebase-tools
+firebase init functions
+```
+
+### Install Algolia
+
+Indexing tasks can be handled in Node with the [Algolia JS SDK](https://www.algolia.com/doc/api-client/getting-started/install/javascript/?language=javascript) package.
+
+```text
+cd functions
+npm install algoliasearch
+```
+
+### Create an Index
+
+Algolia provides a guided UI for building indexes that support full-text search.
+
+{{< figure src="img/create-index.png" caption="Create an index named customers on the Algolia dashboard" >}}
+
+### Add the Algolia API Key to Firebase
+
+You can find your credentials under the *API Keys* tab. Your backend code requires the **Application ID** and **Admin API Key**. Keep the admin key safe and do not expose it to the public.
+
+{{< figure src="img/api-keys.png" caption="You need the Algolia App ID and Admin API Key" >}}
+
+Now set the API key and template ID in the Firebase project with the following command.
+
+{{< file "terminal" "command line" >}}
+```text
+firebase functions:config:set algolia.app=YOUR_APP_ID algolia.key=ADMIN_API_KEY
+```
+
+## Algolia Cloud Functions
+
+Setup the Cloud Functions environment by initializing the Algolia client and index.
+
+{{< file "js" "functions/index.js" >}}
+```js
+const functions = require('firebase-functions');
+const algoliasearch = require('algoliasearch');
+
+const APP_ID = functions.config().algolia.app;
+const ADMIN_KEY = functions.config().algolia.key;
+
+const client = algoliasearch(APP_ID, ADMIN_KEY);
+const index = client.initIndex('customers');
+
+/// Cloud Functions
+
+exports.addToIndex; // TODO
+
+exports.updateIndex; // TODO
+
+exports.deleteFromIndex; // TODO
+```
+
+### Add Record to Algolia
+
+Our goal is to duplicate a subset of data from the Firestore customer document to Algolia. The first step is to add a new record to the index with the `onCreate` Firestore event.
+
+💡 Tip. Only index data in Algolia that is actually useful for searching and/or displaying in search results. Do NOT index personally identifiable information (PII), like phone numbers and email addresses. You may not need to duplicate the entire document.
+
+```js
+exports.addToIndex = functions.firestore.document('customers/{customerId}')
+
+ .onCreate(snapshot => {
+
+ const data = snapshot.data();
+ const objectID = snapshot.id;
+
+ return index.saveObject({ ...data, objectID });
+
+ });
+```
+
+### Update a Record in Algolia
+
+If the Firestore document data changes, we want these changes reflected in the index and search results. We can easily handle this task with an `onUpdate` function.
+
+```js
+exports.updateIndex = functions.firestore.document('customers/{customerId}')
+
+ .onUpdate((change) => {
+ const newData = change.after.data();
+ const objectID = change.after.id;
+ return index.saveObject({ ...newData, objectID });
+ });
+```
+
+### Delete a Record
+
+When a Firestore document is deleted, we must also remove it from the search index. In this case, we simply pass the objectID to Algolia within an `onDelete` function.
+
+```js
+exports.deleteFromIndex = functions.firestore.document('customers/{customerId}')
+
+ .onDelete(snapshot =>
+ index.deleteObject(snapshot.id)
+ );
+```
+
+### Deploy
+
+Deploy your functions and test them from the Firebase console, or follow the seeding instructions in the next section.
+
+{{< file "terminal" "command line" >}}
+```text
+firebase deploy --only functions
+```
+
+## Optional: Seed the Database
+
+In the video you saw how I quickly seeded Firestore with dummy data, which was accomplished with [Faker](https://github.com/marak/Faker.js/) and the Firebase Admin SDK. Create a vanilla node script in the functions directory that sends writes to the database.
+
+{{< file "js" "functions/seed.js" >}}
+```js
+const admin = require('firebase-admin');
+admin.initializeApp();
+
+const faker = require('faker');
+
+const db = admin.firestore();
+
+const fakeIt = () => {
+ return db.collection('customers').add({
+ username: faker.internet.userName(),
+ avatar: faker.internet.avatar(),
+ bio: faker.hacker.phrase()
+ });
+}
+
+Array(20).fill(0).forEach(fakeIt);
+```
+
+Run the script from the command line like so:
+
+{{< file "terminal" "command line" >}}
+```text
+cd functions
+node seed.js
+```
+
+
+This post first appeared as [Episode 109 Algolia Firestore on AngularFirebase.com](https://angularfirebase.com/lessons/algolia-firestore-quickstart-with-firebase-cloud-functions/) and has been fully updated with the latest best practices.
+
diff --git a/hugo/content/lessons/algolia-cloud-functions/img/.gitkeep b/content/lessons/angular-animations-examples/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/algolia-cloud-functions/img/.gitkeep
rename to content/lessons/angular-animations-examples/img/.gitkeep
diff --git a/hugo/content/lessons/angular-animations-examples/img/animate-1.gif b/content/lessons/angular-animations-examples/img/animate-1.gif
similarity index 100%
rename from hugo/content/lessons/angular-animations-examples/img/animate-1.gif
rename to content/lessons/angular-animations-examples/img/animate-1.gif
diff --git a/hugo/content/lessons/angular-animations-examples/img/animate-2.gif b/content/lessons/angular-animations-examples/img/animate-2.gif
similarity index 100%
rename from hugo/content/lessons/angular-animations-examples/img/animate-2.gif
rename to content/lessons/angular-animations-examples/img/animate-2.gif
diff --git a/hugo/content/lessons/angular-animations-examples/img/animate-3.gif b/content/lessons/angular-animations-examples/img/animate-3.gif
similarity index 100%
rename from hugo/content/lessons/angular-animations-examples/img/animate-3.gif
rename to content/lessons/angular-animations-examples/img/animate-3.gif
diff --git a/hugo/content/lessons/angular-animations-examples/img/animate-4.gif b/content/lessons/angular-animations-examples/img/animate-4.gif
similarity index 100%
rename from hugo/content/lessons/angular-animations-examples/img/animate-4.gif
rename to content/lessons/angular-animations-examples/img/animate-4.gif
diff --git a/hugo/content/lessons/angular-animations-examples/img/animate-5.gif b/content/lessons/angular-animations-examples/img/animate-5.gif
similarity index 100%
rename from hugo/content/lessons/angular-animations-examples/img/animate-5.gif
rename to content/lessons/angular-animations-examples/img/animate-5.gif
diff --git a/hugo/content/lessons/angular-animations-examples/img/featured.jpg b/content/lessons/angular-animations-examples/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/angular-animations-examples/img/featured.jpg
rename to content/lessons/angular-animations-examples/img/featured.jpg
diff --git a/hugo/content/lessons/angular-animations-examples/img/featured.png b/content/lessons/angular-animations-examples/img/featured.png
similarity index 100%
rename from hugo/content/lessons/angular-animations-examples/img/featured.png
rename to content/lessons/angular-animations-examples/img/featured.png
diff --git a/hugo/content/lessons/angular-animations-examples/img/featured.webp b/content/lessons/angular-animations-examples/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/angular-animations-examples/img/featured.webp
rename to content/lessons/angular-animations-examples/img/featured.webp
diff --git a/hugo/content/lessons/angular-animations-examples/index.md b/content/lessons/angular-animations-examples/index.md
similarity index 100%
rename from hugo/content/lessons/angular-animations-examples/index.md
rename to content/lessons/angular-animations-examples/index.md
diff --git a/hugo/content/lessons/angular-animations-examples/img/.gitkeep b/content/lessons/angular-elements-quick-start-guide/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/angular-animations-examples/img/.gitkeep
rename to content/lessons/angular-elements-quick-start-guide/img/.gitkeep
diff --git a/hugo/content/lessons/angular-elements-quick-start-guide/img/elements-page-load-optimized.png b/content/lessons/angular-elements-quick-start-guide/img/elements-page-load-optimized.png
similarity index 100%
rename from hugo/content/lessons/angular-elements-quick-start-guide/img/elements-page-load-optimized.png
rename to content/lessons/angular-elements-quick-start-guide/img/elements-page-load-optimized.png
diff --git a/hugo/content/lessons/angular-elements-quick-start-guide/img/elements-page-load.png b/content/lessons/angular-elements-quick-start-guide/img/elements-page-load.png
similarity index 100%
rename from hugo/content/lessons/angular-elements-quick-start-guide/img/elements-page-load.png
rename to content/lessons/angular-elements-quick-start-guide/img/elements-page-load.png
diff --git a/hugo/content/lessons/angular-elements-quick-start-guide/img/featured.jpg b/content/lessons/angular-elements-quick-start-guide/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/angular-elements-quick-start-guide/img/featured.jpg
rename to content/lessons/angular-elements-quick-start-guide/img/featured.jpg
diff --git a/hugo/content/lessons/angular-elements-quick-start-guide/img/featured.png b/content/lessons/angular-elements-quick-start-guide/img/featured.png
similarity index 100%
rename from hugo/content/lessons/angular-elements-quick-start-guide/img/featured.png
rename to content/lessons/angular-elements-quick-start-guide/img/featured.png
diff --git a/hugo/content/lessons/angular-elements-quick-start-guide/img/featured.webp b/content/lessons/angular-elements-quick-start-guide/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/angular-elements-quick-start-guide/img/featured.webp
rename to content/lessons/angular-elements-quick-start-guide/img/featured.webp
diff --git a/hugo/content/lessons/angular-elements-quick-start-guide/index.md b/content/lessons/angular-elements-quick-start-guide/index.md
similarity index 100%
rename from hugo/content/lessons/angular-elements-quick-start-guide/index.md
rename to content/lessons/angular-elements-quick-start-guide/index.md
diff --git a/hugo/content/lessons/angular-elements-quick-start-guide/img/.gitkeep b/content/lessons/angular-firebase-storage-uploads-multi/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/angular-elements-quick-start-guide/img/.gitkeep
rename to content/lessons/angular-firebase-storage-uploads-multi/img/.gitkeep
diff --git a/hugo/content/lessons/angular-firebase-storage-uploads-multi/img/Frame 2.26.webp b/content/lessons/angular-firebase-storage-uploads-multi/img/Frame 2.26.webp
similarity index 100%
rename from hugo/content/lessons/angular-firebase-storage-uploads-multi/img/Frame 2.26.webp
rename to content/lessons/angular-firebase-storage-uploads-multi/img/Frame 2.26.webp
diff --git a/hugo/content/lessons/angular-firebase-storage-uploads-multi/img/dropzone-firebase-storage.png b/content/lessons/angular-firebase-storage-uploads-multi/img/dropzone-firebase-storage.png
similarity index 100%
rename from hugo/content/lessons/angular-firebase-storage-uploads-multi/img/dropzone-firebase-storage.png
rename to content/lessons/angular-firebase-storage-uploads-multi/img/dropzone-firebase-storage.png
diff --git a/hugo/content/lessons/angular-firebase-storage-uploads-multi/img/featured.jpg b/content/lessons/angular-firebase-storage-uploads-multi/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/angular-firebase-storage-uploads-multi/img/featured.jpg
rename to content/lessons/angular-firebase-storage-uploads-multi/img/featured.jpg
diff --git a/hugo/content/lessons/angular-firebase-storage-uploads-multi/img/featured.png b/content/lessons/angular-firebase-storage-uploads-multi/img/featured.png
similarity index 100%
rename from hugo/content/lessons/angular-firebase-storage-uploads-multi/img/featured.png
rename to content/lessons/angular-firebase-storage-uploads-multi/img/featured.png
diff --git a/hugo/content/lessons/angular-firebase-storage-uploads-multi/img/featured.webp b/content/lessons/angular-firebase-storage-uploads-multi/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/angular-firebase-storage-uploads-multi/img/featured.webp
rename to content/lessons/angular-firebase-storage-uploads-multi/img/featured.webp
diff --git a/hugo/content/lessons/angular-firebase-storage-uploads-multi/img/firestore-download-url.png b/content/lessons/angular-firebase-storage-uploads-multi/img/firestore-download-url.png
similarity index 100%
rename from hugo/content/lessons/angular-firebase-storage-uploads-multi/img/firestore-download-url.png
rename to content/lessons/angular-firebase-storage-uploads-multi/img/firestore-download-url.png
diff --git a/content/lessons/angular-firebase-storage-uploads-multi/index.md b/content/lessons/angular-firebase-storage-uploads-multi/index.md
new file mode 100644
index 000000000..c533d5c58
--- /dev/null
+++ b/content/lessons/angular-firebase-storage-uploads-multi/index.md
@@ -0,0 +1,315 @@
+---
+title: Upload Multiple Files to Firebase Storage with Angular
+lastmod: 2019-02-18T13:45:50-07:00
+publishdate: 2019-02-18T13:45:50-07:00
+author: Jeff Delaney
+draft: false
+description: Build a dropzone file uploader in Angular that can send multiple files to Firebase storage simultaneously.
+tags:
+ - firebase
+ - angular
+ - cloud-storage
+
+youtube: ok7633BVa4Y
+github: https://github.com/fireship-io/168-multi-file-upload-angular-firebase
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+versions:
+ '@angular/core': 7.3
+ firebase: 5
+---
+
+
+Firebase makes it easy to upload a huge payload of raw files a cloud storage bucket. The following lesson will teach you how to upload files to [Firebase Storage](https://firebase.google.com/docs/storage/) with Angular, including several advanced concepts about how to...
+
+- Handle multiple simultaneous concurrent file uploads.
+- Save the resulting download URL to Firestore.
+- Display a progress bar and provide UI controls to pause, cancel, and resume uploads.
+
+{{< figure src="img/dropzone-firebase-storage.png" alt="Firebase storage demo with multiple files" >}}
+
+
+This post first appeared as [Episode 82 on AngularFirebase.com](https://angularfirebase.com/lessons/firebase-storage-with-angularfire-dropzone-file-uploader/) and has been updated to handle multiple files and save additional data to Firestore.
+
+
+
+The demo video below demonstrates how the complete feature should work after completing this lesson.
+
+();
+ @Output() hovered = new EventEmitter();
+
+ @HostListener('drop', ['$event'])
+ onDrop($event) {
+ $event.preventDefault();
+ this.dropped.emit($event.dataTransfer.files);
+ this.hovered.emit(false);
+ }
+
+ @HostListener('dragover', ['$event'])
+ onDragOver($event) {
+ $event.preventDefault();
+ this.hovered.emit(true);
+ }
+
+ @HostListener('dragleave', ['$event'])
+ onDragLeave($event) {
+ $event.preventDefault();
+ this.hovered.emit(false);
+ }
+}
+```
+
+## Step 2 - Uploader Component
+
+The next step is put our directive to use in a component that will receive the files and loop over them. This component does not use Firebase directly, but rather it manages the files dropped by the user and renders an `upload-task` (which we will build in step 3) component for each file.
+
+{{< file "terminal" "command line" >}}
+```text
+ng g component uploader
+```
+
+### Listen to File Drop
+
+The HTML we add the `dropzone` directive to a div and listen the custom events that it emits. In addition, we loop over a list of files and render `upload-task` which will be created in the next step.
+
+{{< file "html" "uploader.component.html" >}}
+```html
+
+
+
+
AngularFire Drop Zone
+
Drag and Drop a File
+
Uploads
+
+
+
+```
+
+The component typescript is very simple - it just takes the FileList dropped on the div and pushes it to an array.
+
+{{< file "ngts" "uploader.component.ts" >}}
+```typescript
+import { Component } from '@angular/core';
+
+@Component({
+ selector: 'uploader',
+ templateUrl: './uploader.component.html',
+ styleUrls: ['./uploader.component.scss']
+})
+export class UploaderComponent {
+
+ isHovering: boolean;
+
+ files: File[] = [];
+
+ toggleHover(event: boolean) {
+ this.isHovering = event;
+ }
+
+ onDrop(files: FileList) {
+ for (let i = 0; i < files.length; i++) {
+ this.files.push(files.item(i));
+ }
+ }
+}
+```
+
+
+## Step 3 - Upload Task Component
+
+{{< file "terminal" "command line" >}}
+```text
+ng g component upload-task
+```
+
+Each child component is a self contained [UploadTask](https://github.com/angular/angularfire2/blob/master/docs/storage/storage.md) that will start running as soon as the component is initialized. It will display the upload progress in realtime and save the download URL in firestore when it completes.
+
+
+There is no hard limit on the number of files you can send to Firebase simultaneously. The SDK will attempt to use the most efficient strategy available to transfer them to the cloud, which is mostly dependent on the user's network connection.
+
+
+
+### Show Progress and Provide User Controls
+
+The HTML provides a progress bar and several buttons that allow the user to pause, cancel, or resume an individual upload.
+
+
+{{< file "html" "upload-task.component.html" >}}
+```html
+
+
+ {{ pct | number }}%
+
+
+ {{ snap.bytesTransferred }} of {{ snap.totalBytes }}
+
+
+
+
Pause
+
Cancel
+
Resume
+
;
+ snapshot: Observable;
+ downloadURL: string;
+
+ constructor(private storage: AngularFireStorage, private db: AngularFirestore) { }
+
+ ngOnInit() {
+ this.startUpload();
+ }
+
+ startUpload() {
+
+ // The storage path
+ const path = `test/${Date.now()}_${this.file.name}`;
+
+ // Reference to storage bucket
+ const ref = this.storage.ref(path);
+
+ // The main task
+ this.task = this.storage.upload(path, this.file);
+
+ // Progress monitoring
+ this.percentage = this.task.percentageChanges();
+
+ this.snapshot = this.task.snapshotChanges().pipe(
+ tap(console.log),
+ // The file's download URL
+ finalize( async() => {
+ this.downloadURL = await ref.getDownloadURL().toPromise();
+
+ this.db.collection('files').add( { downloadURL: this.downloadURL, path });
+ }),
+ );
+ }
+
+ isActive(snapshot) {
+ return snapshot.state === 'running' && snapshot.bytesTransferred < snapshot.totalBytes;
+ }
+
+}
+```
+
+The final result should look something like this:
+
+
+
+```
+
+The animations must be included in the app component. Uncomment the name of the animation you wish to use.
+
+{{< file "ngts" "foo.component.ts" >}}
+```typescript
+@Component({
+ selector: 'app-root',
+ animations: [ // <-- add your animations here
+ // fader,
+ // slider,
+ // transformer,
+ stepper
+ ]
+})
+
+prepareRoute(outlet: RouterOutlet) {
+ return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
+}
+```
+
+### Variable Animations with Router Data (Optional)
+
+We can pass data into the router to customize animations on a component-by-component basis. For example, we might want apply different animations for components based on their perceived position in the UI.
+
+{{< file "ngts" "app-routing.module.ts" >}}
+```typescript
+const routes: Routes = [
+ { path: 'about', component: AboutPageComponent },
+ { path: 'right', component: RightPageComponent, data: { animation: 'isRight' } },
+ { path: 'left', component: LeftPageComponent, data: { animation: 'isLeft' } },
+];
+```
+
+## Create the Animations
+
+Now it's time for the fun part - animating. Let's look at four animation examples that become increasingly more complex after each step.
+
+
+Create a file named *route-animations.ts* in the app dir.
+
+{{< file "ngts" "route-animations.ts" >}}
+```typescript
+import {
+ trigger,
+ transition,
+ style,
+ query,
+ group,
+ animateChild,
+ animate,
+ keyframes,
+ } from '@angular/animations';
+```
+
+
+### Basic Fade In
+
+Let's start with a basic animation that is applied the same for every route.
+
+;
+
+ constructor(
+ private afAuth: AngularFireAuth,
+ private afs: AngularFirestore,
+ private router: Router
+ ) { }
+
+}
+```
+
+### Observe the AuthState
+
+The most important element this feature is being able to react to changes to the user's authentiaction state. When logged-out, will have an Observable of `null`. When logged-in, we want to [switchMap](/snippets/rxjs-switchmap) to an Observable of the user's profile document in Firestore. This is equivalent *joining* custom data and we can set this up in the constructor.
+
+{{< figure src="img/firestore-custom-user-data.png" alt="custom user data in the Firestore database" caption="Notice how the UID on the document also matches user's assigned UID from firebase auth." >}}
+
+
+
+{{< file "ngts" "app/auth.service.ts" >}}
+```typescript
+export class AuthService {
+
+ user$: Observable;
+
+ constructor(...) {
+ // Get the auth state, then fetch the Firestore user document or return null
+ this.user$ = this.afAuth.authState.pipe(
+ switchMap(user => {
+ // Logged in
+ if (user) {
+ return this.afs.doc(`users/${user.uid}`).valueChanges();
+ } else {
+ // Logged out
+ return of(null);
+ }
+ })
+ )
+ }
+}
+```
+
+
+### Login and Logout
+
+- `googleSignin()`: Triggers the Google Signin popup window and authenticates the user. It returns a Promise that resolves with the auth credential.
+- `updateUserData()`: This is how we initialize custom data in Firestore. The `{ merge: true }` option is required to make this a non-destructive set for returning users.
+- `signOut()`: Does what it says, plus navigates the user to a safe route.
+
+{{< file "ngts" "app/auth.service.ts" >}}
+```typescript
+export class AuthService {
+
+ // ...omitted
+
+ async googleSignin() {
+ const provider = new firebase.auth.GoogleAuthProvider();
+ const credential = await this.afAuth.signInWithPopup(provider);
+ return this.updateUserData(credential.user);
+ }
+
+ private updateUserData(user) {
+ // Sets user data to firestore on login
+ const userRef: AngularFirestoreDocument = this.afs.doc(`users/${user.uid}`);
+
+ const data = {
+ uid: user.uid,
+ email: user.email,
+ displayName: user.displayName,
+ photoURL: user.photoURL
+ }
+
+ return userRef.set(data, { merge: true })
+
+ }
+
+ async signOut() {
+ await this.afAuth.signOut();
+ this.router.navigate(['/']);
+ }
+
+}
+```
+
+
+#### Tip: Destructuring the Function
+
+You may prefer to modify the **updateUserData** function with [destructuring assignment](/snippets/javascript-destructuring/#function-arguments)
+
+
+
+
+## Step 4: Create a User Profile Component
+
+Now it's time to put our auth service to use inside of a component that will allow the user to login, logout, and view their profile info.
+
+{{< file "terminal" "command line" >}}
+```text
+ng generate component user-profile
+```
+
+### Inject the Auth Service
+
+Inject the auth service in the component's constructor - easy.
+
+{{< file "ngts" "user-profile/user-profile.component.ts" >}}
+```typescript
+import { Component } from '@angular/core';
+import { AuthService } from '../../auth.service';
+
+@Component(...)
+export class UserProfileComponent {
+ constructor(public auth: AuthService) { }
+}
+
+```
+
+In the component HTML, we define two templates based on the `user$` Observable. If the value is `null`, we show the guest template, but if it is defined we show the authenticated template and corresponding user data. The `async` will automatically subscribe to the Observable and unsubscribe when the component is destroyed.
+
+{{< file "html" "user-profile/user-profile.component.html" >}}
+```html
+
+
+
+
+
+
+ Howdy, GUEST
+ Login to get started...
+
+
+
+
+
+
+
+
+
+
+
Howdy, {{ user.displayName }}
+
+
UID: {{ user.uid }}
+
Logout
+
+```
+
+{{< figure src="img/login-google-popup.png" alt="Google signin popup via firebase" >}}
+
+
+## Step 5: Protect Routes with Angular Guards
+
+A useful UX feature is to protect routes based on the user's auth state. Now that we have an Observable `user$` from the previous step, we can implement `canActivate` guard.
+
+When the user navigates, all routes using this guard will subscribe to the `user$`. If it emits true, the route can be accessed. If false, the user is redirected to the login page.
+
+{{< file "terminal" "command line" >}}
+```text
+ng generate guard auth
+```
+
+### Map the User to a Boolean
+
+The guard interface requires our observable to emit a boolean. We can
+
+{{< file "ngts" "app/auth.guard.ts" >}}
+```typescript
+import { Injectable } from '@angular/core';
+import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
+
+import { AuthService} from './auth.service'
+import { Observable } from 'rxjs';
+import { tap, map, take } from 'rxjs/operators';
+
+@Injectable()
+export class AuthGuard implements CanActivate {
+ constructor(private auth: AuthService, private router: Router) {}
+
+ canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
+
+ return this.auth.user$.pipe(
+ take(1),
+ map(user => !!user), // <-- map to boolean
+ tap(loggedIn => {
+ if (!loggedIn) {
+ console.log('access denied')
+ this.router.navigate(['/login']);
+ }
+ })
+ )
+ }
+}
+```
+
+You can then apply this guard to individual routes like so:
+
+{{< file "ngts" "app/routing.module.ts" >}}
+```typescript
+const routes: Routes = [
+ //...
+ { path: 'notes', component: NotesListComponent, canActivate: [AuthGuard] },
+];
+```
+
+PRO Tip - You may find it useful to simplify this guard code by defining a method in your auth service that can [retrieve the Firebase UID as a Promise](/snippets/get-angularfire-userid-as-promise).
+
+
+
+
+
+## Step 6: Backend Security Rules
+
+It is essential that only the *owner* of a user document can modify its data. We cannot just rely on our frontend code to provide this security, so let's setup [Firestore rules](/snippets/firestore-rules-recipes/). I prefer to create a reusable function to determine document ownership because you are likely to need this logic in multiple rules.
+
+
+{{< file "firebase" "firestore rules" >}}
+```js
+service cloud.firestore {
+ match /databases/{database}/documents {
+
+ match /users/{userId} {
+ allow write, read: if isOwner(userId);
+ }
+
+ // Reusable function to determine document ownership
+ function isOwner(userId) {
+ return request.auth.uid == userId
+ }
+ }
+}
+```
+
+It is generally easier to define your rules directly in the Firestore dashboard to where you can take advantage of the integrated testing and versioning.
+
+{{< figure src="img/firestore-rules-auth.png" alt="Google signin popup via firebase" >}}
+
+## The End
+
+That's it! You now have all the basic pieces in place for a reliable and flexible Angular/Firebase authentication system.
diff --git a/hugo/content/lessons/angularfire-google-oauth/img/.gitkeep b/content/lessons/animated-navigation-flutter-flare/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/angularfire-google-oauth/img/.gitkeep
rename to content/lessons/animated-navigation-flutter-flare/img/.gitkeep
diff --git a/hugo/content/lessons/animated-navigation-flutter-flare/img/featured.jpg b/content/lessons/animated-navigation-flutter-flare/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/animated-navigation-flutter-flare/img/featured.jpg
rename to content/lessons/animated-navigation-flutter-flare/img/featured.jpg
diff --git a/hugo/content/lessons/animated-navigation-flutter-flare/img/featured.png b/content/lessons/animated-navigation-flutter-flare/img/featured.png
similarity index 100%
rename from hugo/content/lessons/animated-navigation-flutter-flare/img/featured.png
rename to content/lessons/animated-navigation-flutter-flare/img/featured.png
diff --git a/hugo/content/lessons/animated-navigation-flutter-flare/img/featured.webp b/content/lessons/animated-navigation-flutter-flare/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/animated-navigation-flutter-flare/img/featured.webp
rename to content/lessons/animated-navigation-flutter-flare/img/featured.webp
diff --git a/hugo/content/lessons/animated-navigation-flutter-flare/img/flare-animated-stroke.png b/content/lessons/animated-navigation-flutter-flare/img/flare-animated-stroke.png
similarity index 100%
rename from hugo/content/lessons/animated-navigation-flutter-flare/img/flare-animated-stroke.png
rename to content/lessons/animated-navigation-flutter-flare/img/flare-animated-stroke.png
diff --git a/hugo/content/lessons/animated-navigation-flutter-flare/img/flare-export-screen.png b/content/lessons/animated-navigation-flutter-flare/img/flare-export-screen.png
similarity index 100%
rename from hugo/content/lessons/animated-navigation-flutter-flare/img/flare-export-screen.png
rename to content/lessons/animated-navigation-flutter-flare/img/flare-export-screen.png
diff --git a/hugo/content/lessons/animated-navigation-flutter-flare/img/flare-star-animated.png b/content/lessons/animated-navigation-flutter-flare/img/flare-star-animated.png
similarity index 100%
rename from hugo/content/lessons/animated-navigation-flutter-flare/img/flare-star-animated.png
rename to content/lessons/animated-navigation-flutter-flare/img/flare-star-animated.png
diff --git a/hugo/content/lessons/animated-navigation-flutter-flare/img/flare-star-clip.png b/content/lessons/animated-navigation-flutter-flare/img/flare-star-clip.png
similarity index 100%
rename from hugo/content/lessons/animated-navigation-flutter-flare/img/flare-star-clip.png
rename to content/lessons/animated-navigation-flutter-flare/img/flare-star-clip.png
diff --git a/hugo/content/lessons/animated-navigation-flutter-flare/img/flare-star-rotate.png b/content/lessons/animated-navigation-flutter-flare/img/flare-star-rotate.png
similarity index 100%
rename from hugo/content/lessons/animated-navigation-flutter-flare/img/flare-star-rotate.png
rename to content/lessons/animated-navigation-flutter-flare/img/flare-star-rotate.png
diff --git a/hugo/content/lessons/animated-navigation-flutter-flare/img/flare-star-vert.png b/content/lessons/animated-navigation-flutter-flare/img/flare-star-vert.png
similarity index 100%
rename from hugo/content/lessons/animated-navigation-flutter-flare/img/flare-star-vert.png
rename to content/lessons/animated-navigation-flutter-flare/img/flare-star-vert.png
diff --git a/hugo/content/lessons/animated-navigation-flutter-flare/img/flare-star.png b/content/lessons/animated-navigation-flutter-flare/img/flare-star.png
similarity index 100%
rename from hugo/content/lessons/animated-navigation-flutter-flare/img/flare-star.png
rename to content/lessons/animated-navigation-flutter-flare/img/flare-star.png
diff --git a/content/lessons/animated-navigation-flutter-flare/index.md b/content/lessons/animated-navigation-flutter-flare/index.md
new file mode 100644
index 000000000..123a954fe
--- /dev/null
+++ b/content/lessons/animated-navigation-flutter-flare/index.md
@@ -0,0 +1,280 @@
+---
+title: Flutter Flare 2D Animation Basics
+lastmod: 2019-04-02T11:00:35-07:00
+publishdate: 2019-04-02T11:00:35-07:00
+author: Jeff Delaney
+draft: false
+description: Build an animated navigation menu in Flutter with Flare2D
+tags:
+ - flutter
+ - flare2d
+ - animation
+
+youtube: hwBUU9CP4qI
+github: https://github.com/fireship-io/177-flare-flutter-giphy-navbar
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+Whenever I see an awesome UI element in a native app my first question is *How do I make that in Flutter?*. That's exactly what I asked when I downloaded the [Giphy](https://giphy.com/apps) Android app recently, which has runs a colorful and fun animation for each icon in the bottom navbar.
+
+{{< vimeo 328094871 >}}
+
+These animations are complex. Hypothetically, they could be created in Flutter natively with a custom painter, but that would be very challenging and painful. Thankfully, we have [Flare 2D](https://www.2dimensions.com/about-flare) a design tool that makes it easy to create complex animations with vector graphics and run them in Flutter's rendering engine at 60+ FPS.
+
+## Part 1: Create Animated Icons with Flare 2D
+
+
+Access the files used in this lesson on my [Flare profile](https://www.2dimensions.com/a/delaneyphx/files/recent/all) or from the project github repo.
+
+
+First, we need to create some awesome animated graphics with Flare. Create a free account, then complete the tasks below. These tasks represent the skills you need to have in Flare to re-create Giphy's animated icons.
+
+I highly recommend memorizing the following hotkeys.
+
+- `T` translate or move shapes around.
+- `S` scale or resize shapes.
+- `R` rotate shapes.
+- Hold `space` to drag around the screen.
+- `ctrl+Z` to undo.
+
+
+### Draw a Shape
+
+Flare provides a basic set of design tools that we can use to draw vector graphics. You can also design your graphics in a different tool, like Figma or Sketch for example, then import them into Flare.
+
+
+**Tasks**
+
+1. Draw a basic star shape using the star tool.
+1. Center it on the artboard and have it take up as much space on the Y axis as possible.
+1. Remove the stroke and adjust the fill color.
+
+{{< figure src="img/flare-star.png" caption="Draw a star" >}}
+
+### Animate the Fill Color
+
+We can animate almost anything on the shape. Let's get familiar with the animation timeline by animating the color of the star from gray to yellow.
+
+**Tasks**
+
+1. Switch to animation mode.
+1. Change the untitled animation name to *go* (this will be important when we get the Flutter code).
+1. Create a keyframe by selecting the diamond next to the fill control.
+1. Scrub the timeline to the end and change the fill color. A new keyfame would be added automatically.
+1. Press play. You just created an animation.
+
+{{< figure src="img/flare-star-animated.png" caption="Animate the fill color of the star" >}}
+
+### Animate Transformations - Translate, Scale, Rotate
+
+An easy way to bring your shapes to life is by animating size, movement, and rotation angle.
+
+**Tasks**
+
+1. Create keyframes for rotation and scale.
+2. Adjust the key interpolation to make to ease the timing.
+
+{{< figure src="img/flare-star-rotate.png" caption="Animate the rotation of the star and change the key interpolation to cubic" >}}
+
+
+### Animate the Shape
+
+We can also animate the verticies of the star to to transform it into a completely different shape.
+
+
+**Tasks**
+
+1. Add a keyframe to edit verticies.
+1. Click "edit verticies", scrub to a different time, move the verticies to automatically add a keyframe.
+
+{{< figure src="img/flare-star-vert.png" caption="Use the verticies to change and animate the points of the shape" >}}
+
+### Animate the Stroke for a Hand-Drawn Effect
+
+Stroke animations make it easy to look like you are drawing a shape by hand.
+
+**Tasks**
+
+1. Give the shape a stroke.
+1. Set the end of the stroke to 0% until it is invisible.
+1. Animate the end value to give it a drawing effect.
+
+{{< figure src="img/flare-animated-stroke.png" caption="Animate the stroke end from 0% to 100%" >}}
+
+### Animate the Position in a Clipping Mask
+
+Clipping masks allow you to make shapes disappear behind another shape. A clipping mask is like installing a window on the house - you can only see the contents inside its boundaries.
+
+
+**Tasks**
+
+1. Create a new shape that covers the star.
+1. Select the star, then click *clipping box*, then select the new shape.
+1. Go into animation mode and animate the position of the star.
+
+{{< figure src="img/flare-star-clip.png" caption="Create another shape to serve as a clipping box for the star. " >}}
+
+
+## Part 2 - Flutter Flare Integration
+
+Flare provides package that makes it dead simple to use our animations into an iOS or Android app with Flutter. Run to `flutter create your_project` to get started. The end goal is to build a usable animated icon navigation menu like the demo below:
+
+{{< vimeo 328094871 >}}
+
+### Add flare_flutter to pubspec.yaml
+
+Add [flare_flutter](https://pub.dartlang.org/packages/flare_flutter) to the `pubspec.yaml`.
+
+{{< file "yaml" "build.yaml" >}}
+```yaml
+dependencies:
+ flutter:
+ sdk: flutter
+
+ flare_flutter: any
+
+
+flutter:
+ uses-material-design: true
+ assets:
+ - assets/
+
+```
+
+
+### Export your Animations to Flutter
+
+Export the animations to a folder named `assets` in the root of your project.
+
+{{< figure src="img/flare-export-screen.png" caption="Export the binary file from Flare" >}}
+
+
+### Define a Class for the Menu Item
+
+There are many different ways to build a menu in flutter, but we're going to build our navigation menu from scratch. The data for each menu item can be abstracted into a class.
+
+- `name` is the filename of the *.flr* asset
+- `color` controls the line above the icon
+- `x` is the X-axis alignment of the item (-1 is far left, 1 is far right).
+
+{{< file "dart" "main.dart" >}}
+```dart
+class MenuItem {
+ final String name;
+ final Color color;
+ final double x;
+ MenuItem({this.name, this.color, this.x});
+}
+
+```
+
+### Animating the Colored Top Bar
+
+Our navigation menu is wrapped in a StatefulWidget to keep track of the currently selected item. Here's a breakdown of each important line of code.
+
+1. Set a default menu item on `initState`.
+2. Define a [Stack](https://fireship.io/lessons/flutter-widget-positioning-guide/). The first element is an container for the colored , while the second item is the navigation menu row..
+3. Create an [AnimatedContainer](https://www.youtube.com/watch?v=yI-8QHpGIP4&vl=en) that takes up 20% of the screen width and is aligned to the active menu item.
+4. Define a *Row* to hold the Flare graphics that uses `spaceAround` alignment on the main axis.
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+class NavBar extends StatefulWidget {
+ createState() => NavBarState();
+}
+
+class NavBarState extends State {
+ List items = [
+ MenuItem(x: -1.0, name: 'house', color: Colors.lightBlue[100]),
+ MenuItem(x: -0.5, name: 'planet', color: Colors.purple),
+ MenuItem(x: 0.0, name: 'camera', color: Colors.greenAccent),
+ MenuItem(x: 0.5, name: 'heart', color: Colors.pink),
+ MenuItem(x: 1.0, name: 'head', color: Colors.yellow),
+ ];
+
+ MenuItem active;
+
+ @override
+ void initState() {
+ super.initState();
+
+ active = items[0]; // <-- 1. Activate a menu item
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ double w = MediaQuery.of(context).size.width;
+ return Container(
+ height: 80,
+ color: Colors.black,
+ child: Stack( // <-- 2. Define a stack
+ children: [
+ AnimatedContainer( // <-- 3. Animated top bar
+ duration: Duration(milliseconds: 200),
+ alignment: Alignment(active.x, -1),
+ child: AnimatedContainer(
+ duration: Duration(milliseconds: 1000),
+ height: 8,
+ width: w * 0.2,
+ color: active.color,
+ ),
+ ),
+ Container( // <-- 4. Main menu row
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceAround,
+ crossAxisAlignment: CrossAxisAlignment.end,
+ children: items.map((item) {
+ return _flare(item); // <-- 5. Flare graphic will go here
+ ),
+ )
+ ],
+ ),
+ );
+ }
+
+}
+```
+
+
+### Animating the Flare Graphics
+
+In this final section, we define a method that will turn the Flare animations into tap-able buttons that change the state of the widget. This can be achieved with a `setState` call from a *GestureDetector*, as we do not want Material ink splashes in this demo.
+
+The *FlareActor* is a widget from the flare_flutter package that that will run the specified animation when the state changes.
+
+
+Remember, we defined the animation name as *go* in the Flare editor before exporting the file. By default, the animation name is *Untitled*.
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+ Widget _flare(MenuItem item) {
+ return GestureDetector(
+ child: AspectRatio(
+ aspectRatio: 1,
+ child: Padding(
+ padding: EdgeInsets.only(top: 20),
+ child: FlareActor(
+ 'assets/${item.name}.flr',
+ alignment: Alignment.center,
+ fit: BoxFit.contain,
+ animation: item.name == active.name ? 'go' : 'idle',
+ ),
+ ),
+ ),
+ onTap: () {
+ setState(() {
+ active = item;
+ });
+ },
+ );
+ }
+```
\ No newline at end of file
diff --git a/hugo/content/lessons/animated-navigation-flutter-flare/img/.gitkeep b/content/lessons/api-monetization-stripe/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/animated-navigation-flutter-flare/img/.gitkeep
rename to content/lessons/api-monetization-stripe/img/.gitkeep
diff --git a/hugo/content/lessons/api-monetization-stripe/img/featured.jpg b/content/lessons/api-monetization-stripe/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/api-monetization-stripe/img/featured.jpg
rename to content/lessons/api-monetization-stripe/img/featured.jpg
diff --git a/hugo/content/lessons/api-monetization-stripe/img/featured.png b/content/lessons/api-monetization-stripe/img/featured.png
similarity index 100%
rename from hugo/content/lessons/api-monetization-stripe/img/featured.png
rename to content/lessons/api-monetization-stripe/img/featured.png
diff --git a/hugo/content/lessons/api-monetization-stripe/img/featured.webp b/content/lessons/api-monetization-stripe/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/api-monetization-stripe/img/featured.webp
rename to content/lessons/api-monetization-stripe/img/featured.webp
diff --git a/hugo/content/lessons/api-monetization-stripe/img/stripe-checkout-form.png b/content/lessons/api-monetization-stripe/img/stripe-checkout-form.png
similarity index 100%
rename from hugo/content/lessons/api-monetization-stripe/img/stripe-checkout-form.png
rename to content/lessons/api-monetization-stripe/img/stripe-checkout-form.png
diff --git a/hugo/content/lessons/api-monetization-stripe/img/stripe-metered-product.png b/content/lessons/api-monetization-stripe/img/stripe-metered-product.png
similarity index 100%
rename from hugo/content/lessons/api-monetization-stripe/img/stripe-metered-product.png
rename to content/lessons/api-monetization-stripe/img/stripe-metered-product.png
diff --git a/hugo/content/lessons/api-monetization-stripe/index.md b/content/lessons/api-monetization-stripe/index.md
similarity index 100%
rename from hugo/content/lessons/api-monetization-stripe/index.md
rename to content/lessons/api-monetization-stripe/index.md
diff --git a/hugo/content/lessons/api-monetization-stripe/img/.gitkeep b/content/lessons/apple-signin-with-firebase-tutorial/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/api-monetization-stripe/img/.gitkeep
rename to content/lessons/apple-signin-with-firebase-tutorial/img/.gitkeep
diff --git a/hugo/content/lessons/apple-signin-with-firebase-tutorial/img/featured.jpg b/content/lessons/apple-signin-with-firebase-tutorial/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/apple-signin-with-firebase-tutorial/img/featured.jpg
rename to content/lessons/apple-signin-with-firebase-tutorial/img/featured.jpg
diff --git a/hugo/content/lessons/apple-signin-with-firebase-tutorial/img/featured.png b/content/lessons/apple-signin-with-firebase-tutorial/img/featured.png
similarity index 100%
rename from hugo/content/lessons/apple-signin-with-firebase-tutorial/img/featured.png
rename to content/lessons/apple-signin-with-firebase-tutorial/img/featured.png
diff --git a/hugo/content/lessons/apple-signin-with-firebase-tutorial/img/featured.webp b/content/lessons/apple-signin-with-firebase-tutorial/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/apple-signin-with-firebase-tutorial/img/featured.webp
rename to content/lessons/apple-signin-with-firebase-tutorial/img/featured.webp
diff --git a/content/lessons/apple-signin-with-firebase-tutorial/index.md b/content/lessons/apple-signin-with-firebase-tutorial/index.md
new file mode 100644
index 000000000..20b60f42d
--- /dev/null
+++ b/content/lessons/apple-signin-with-firebase-tutorial/index.md
@@ -0,0 +1,101 @@
+---
+title: Sign In with Apple on Firebase
+lastmod: 2020-04-20T08:41:24-07:00
+publishdate: 2020-02-09T08:41:24-07:00
+author: Jeff Delaney
+draft: false
+description: Authenticate users into your Firebase app using Sign In with Apple on the web
+tags:
+ - auth
+ - ios
+ - javascript
+
+type: lessons
+youtube: UafqYgRoIC0
+# code:
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# - "rxjs": 6.3
+---
+
+[Sign in with Apple](https://developer.apple.com/videos/play/wwdc2019/706/) was announced in 2019 and allows users to authenticate into your Firebase app with an Apple ID. Users must have two-factor authentication (2FA) enabled on their Apple account AND be signed into iCloud.
+
+
+
+The following lesson demonstrates how to configure Apple SignIn with the Firebase JavaScript SDK (web).
+
+🚨 As of April 2020, all native iOS apps that offer social auth methods (Google, Facebook, etc.) MUST also include Apple Sign In as an option. See the detailed [guideline](https://developer.apple.com/app-store/review/guidelines/#sign-in-with-apple). If you're looking for Flutter, check out this [Sign In with Apple on Flutter](/courses/flutter-firebase/project-auth-apple-signin) section from the full course.
+
+
+## Sign in with Apple Setup (Web)
+
+Follow the steps outlined below to implement [Sign In with Apple](https://developer.apple.com/sign-in-with-apple/) in your web app.
+
+### Step 1 - Create or Update an App ID
+
+From the Apple Developer Portal go to [Certificates, Identifiers & Profiles >> Identifiers](https://help.apple.com/developer-account/#/devcdfbb56a3). Create a new **App ID** or update an existing app and give it the **Sign In with Apple** capability.
+
+{{< figure src="/img/snippets/apple-signin-app1.png" alt="Apple Developer Portal App IDs" >}}
+{{< figure src="/img/snippets/apple-signin-app2.png" caption="Make sure Sign In with Apple is Enabled" >}}
+
+### Step 2 - Create and Configure a Service ID
+
+
+From *Certificates, Identifiers & Profiles >> Identifiers*, create a new **Service ID** and make sure is linked to your primary App ID. Configure it point to your Firebase hosting URL.
+
+{{< figure src="/img/snippets/apple-signin-web-config.png" caption="Replace the project ID for your domain" >}}
+
+
+### Step 3 - Verify Domain Ownership
+
+Go to Service ID you created in the previous step and click *configure*, then click *download*. Save the file in your web app's public hosting directory under `./well-known/`.
+
+Deploy this file to your domain so Apple can verify it.
+
+{{< file "terminal" "command line" >}}
+```text
+firebase deploy --only hosting
+```
+
+{{< figure src="/img/snippets/apple-signin-verify.png" caption="You should see a green checkmark next to the domain" >}}
+
+### Step 4 - Register a Private Key
+
+From *Certificates, Identifiers & Profiles >> Identifiers*, create and download a new private key - keep it private. It is used to validate requests from Apple with your Firebase project.
+
+{{< figure src="/img/snippets/apple-signin-private-key.png" caption="Download the private key. Do not expose it publicly." >}}
+
+
+### Step 5 - Enable SignIn Method on Firebase
+
+Head over the to the [Firebase Console](https://console.firebase.google.com/) and go to the *Authentication >> Sign-in Method* tab. Enable Apple and enter the required details.
+
+{{< figure src="/img/snippets/apple-signin-firebase-console.png" caption="Copy the contents of the private key in the console" >}}
+
+
+## Frontend Code
+
+We now have all the pieces in place to implement SignIn with Apple into our web app. Because this is Firebase, it only requires a few lines of code. Assuming you have [Firebase installed](/snippets/install-angularfire/) in your project, simply make a reference the the provider and call `signInWithPopup()`.
+
+{{< figure src="/img/snippets/apple-signin-popup.png" caption="SignIn with Apple popup seen by the end-user" >}}
+
+### Basic JavaScript Implementation
+
+The frontend implementation is an async function that can bound to a button click to trigger the popup modal. Make sure to follow [Apple UI guidelines](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/) when designing the button.
+
+{{< file "js" "app.js" >}}
+```js
+const auth = firebase.auth();
+
+async signInWithApple() {
+ const provider = new firebase.auth.OAuthProvider('apple.com');
+ const result = await auth.signInWithPopup(provider);
+
+ console.log(result.user); // logged-in Apple user
+}
+```
diff --git a/hugo/content/lessons/apple-signin-with-firebase-tutorial/img/.gitkeep b/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/apple-signin-with-firebase-tutorial/img/.gitkeep
rename to content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/.gitkeep
diff --git a/hugo/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/custom-validator-firestore.gif b/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/custom-validator-firestore.gif
similarity index 100%
rename from hugo/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/custom-validator-firestore.gif
rename to content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/custom-validator-firestore.gif
diff --git a/hugo/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/featured.jpg b/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/featured.jpg
rename to content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/featured.jpg
diff --git a/hugo/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/featured.png b/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/featured.png
similarity index 100%
rename from hugo/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/featured.png
rename to content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/featured.png
diff --git a/hugo/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/featured.webp b/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/featured.webp
rename to content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/featured.webp
diff --git a/hugo/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/index.md b/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/index.md
similarity index 100%
rename from hugo/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/index.md
rename to content/lessons/async-form-validation-in-firebase-enforce-uniqueness/index.md
diff --git a/hugo/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/.gitkeep b/content/lessons/auto-save-reactive-forms-with-firestore/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/async-form-validation-in-firebase-enforce-uniqueness/img/.gitkeep
rename to content/lessons/auto-save-reactive-forms-with-firestore/img/.gitkeep
diff --git a/hugo/content/lessons/auto-save-reactive-forms-with-firestore/img/featured.jpg b/content/lessons/auto-save-reactive-forms-with-firestore/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/auto-save-reactive-forms-with-firestore/img/featured.jpg
rename to content/lessons/auto-save-reactive-forms-with-firestore/img/featured.jpg
diff --git a/hugo/content/lessons/auto-save-reactive-forms-with-firestore/img/featured.png b/content/lessons/auto-save-reactive-forms-with-firestore/img/featured.png
similarity index 100%
rename from hugo/content/lessons/auto-save-reactive-forms-with-firestore/img/featured.png
rename to content/lessons/auto-save-reactive-forms-with-firestore/img/featured.png
diff --git a/hugo/content/lessons/auto-save-reactive-forms-with-firestore/img/featured.webp b/content/lessons/auto-save-reactive-forms-with-firestore/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/auto-save-reactive-forms-with-firestore/img/featured.webp
rename to content/lessons/auto-save-reactive-forms-with-firestore/img/featured.webp
diff --git a/hugo/content/lessons/auto-save-reactive-forms-with-firestore/img/reactive-forms-firestore-demo.gif b/content/lessons/auto-save-reactive-forms-with-firestore/img/reactive-forms-firestore-demo.gif
similarity index 100%
rename from hugo/content/lessons/auto-save-reactive-forms-with-firestore/img/reactive-forms-firestore-demo.gif
rename to content/lessons/auto-save-reactive-forms-with-firestore/img/reactive-forms-firestore-demo.gif
diff --git a/hugo/content/lessons/auto-save-reactive-forms-with-firestore/index.md b/content/lessons/auto-save-reactive-forms-with-firestore/index.md
similarity index 100%
rename from hugo/content/lessons/auto-save-reactive-forms-with-firestore/index.md
rename to content/lessons/auto-save-reactive-forms-with-firestore/index.md
diff --git a/hugo/content/lessons/auto-save-reactive-forms-with-firestore/img/.gitkeep b/content/lessons/basics-reactive-forms-in-angular/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/auto-save-reactive-forms-with-firestore/img/.gitkeep
rename to content/lessons/basics-reactive-forms-in-angular/img/.gitkeep
diff --git a/hugo/content/lessons/basics-reactive-forms-in-angular/img/featured.jpg b/content/lessons/basics-reactive-forms-in-angular/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/basics-reactive-forms-in-angular/img/featured.jpg
rename to content/lessons/basics-reactive-forms-in-angular/img/featured.jpg
diff --git a/hugo/content/lessons/basics-reactive-forms-in-angular/img/featured.webp b/content/lessons/basics-reactive-forms-in-angular/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/basics-reactive-forms-in-angular/img/featured.webp
rename to content/lessons/basics-reactive-forms-in-angular/img/featured.webp
diff --git a/hugo/content/lessons/basics-reactive-forms-in-angular/img/form-validation-demo.gif b/content/lessons/basics-reactive-forms-in-angular/img/form-validation-demo.gif
similarity index 100%
rename from hugo/content/lessons/basics-reactive-forms-in-angular/img/form-validation-demo.gif
rename to content/lessons/basics-reactive-forms-in-angular/img/form-validation-demo.gif
diff --git a/hugo/content/lessons/basics-reactive-forms-in-angular/img/formarray-demo.gif b/content/lessons/basics-reactive-forms-in-angular/img/formarray-demo.gif
similarity index 100%
rename from hugo/content/lessons/basics-reactive-forms-in-angular/img/formarray-demo.gif
rename to content/lessons/basics-reactive-forms-in-angular/img/formarray-demo.gif
diff --git a/hugo/content/lessons/basics-reactive-forms-in-angular/index.md b/content/lessons/basics-reactive-forms-in-angular/index.md
similarity index 100%
rename from hugo/content/lessons/basics-reactive-forms-in-angular/index.md
rename to content/lessons/basics-reactive-forms-in-angular/index.md
diff --git a/hugo/content/lessons/basics-reactive-forms-in-angular/img/.gitkeep b/content/lessons/bigquery-ml-quickstart/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/basics-reactive-forms-in-angular/img/.gitkeep
rename to content/lessons/bigquery-ml-quickstart/img/.gitkeep
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-console.png b/content/lessons/bigquery-ml-quickstart/img/bigquery-console.png
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-console.png
rename to content/lessons/bigquery-ml-quickstart/img/bigquery-console.png
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-create-table.png b/content/lessons/bigquery-ml-quickstart/img/bigquery-create-table.png
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-create-table.png
rename to content/lessons/bigquery-ml-quickstart/img/bigquery-create-table.png
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-create-table2.png b/content/lessons/bigquery-ml-quickstart/img/bigquery-create-table2.png
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-create-table2.png
rename to content/lessons/bigquery-ml-quickstart/img/bigquery-create-table2.png
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-datalab.png b/content/lessons/bigquery-ml-quickstart/img/bigquery-datalab.png
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-datalab.png
rename to content/lessons/bigquery-ml-quickstart/img/bigquery-datalab.png
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-datastudio.png b/content/lessons/bigquery-ml-quickstart/img/bigquery-datastudio.png
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-datastudio.png
rename to content/lessons/bigquery-ml-quickstart/img/bigquery-datastudio.png
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-ml-model.png b/content/lessons/bigquery-ml-quickstart/img/bigquery-ml-model.png
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-ml-model.png
rename to content/lessons/bigquery-ml-quickstart/img/bigquery-ml-model.png
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-ml-predict.png b/content/lessons/bigquery-ml-quickstart/img/bigquery-ml-predict.png
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-ml-predict.png
rename to content/lessons/bigquery-ml-quickstart/img/bigquery-ml-predict.png
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-ml-results.png b/content/lessons/bigquery-ml-quickstart/img/bigquery-ml-results.png
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-ml-results.png
rename to content/lessons/bigquery-ml-quickstart/img/bigquery-ml-results.png
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-schema.png b/content/lessons/bigquery-ml-quickstart/img/bigquery-schema.png
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-schema.png
rename to content/lessons/bigquery-ml-quickstart/img/bigquery-schema.png
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-shell.png b/content/lessons/bigquery-ml-quickstart/img/bigquery-shell.png
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-shell.png
rename to content/lessons/bigquery-ml-quickstart/img/bigquery-shell.png
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-shell2.png b/content/lessons/bigquery-ml-quickstart/img/bigquery-shell2.png
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-shell2.png
rename to content/lessons/bigquery-ml-quickstart/img/bigquery-shell2.png
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-upload-data.png b/content/lessons/bigquery-ml-quickstart/img/bigquery-upload-data.png
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/bigquery-upload-data.png
rename to content/lessons/bigquery-ml-quickstart/img/bigquery-upload-data.png
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/featured.jpg b/content/lessons/bigquery-ml-quickstart/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/featured.jpg
rename to content/lessons/bigquery-ml-quickstart/img/featured.jpg
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/featured.png b/content/lessons/bigquery-ml-quickstart/img/featured.png
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/featured.png
rename to content/lessons/bigquery-ml-quickstart/img/featured.png
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/featured.webp b/content/lessons/bigquery-ml-quickstart/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/featured.webp
rename to content/lessons/bigquery-ml-quickstart/img/featured.webp
diff --git a/content/lessons/bigquery-ml-quickstart/index.md b/content/lessons/bigquery-ml-quickstart/index.md
new file mode 100644
index 000000000..e0282e31a
--- /dev/null
+++ b/content/lessons/bigquery-ml-quickstart/index.md
@@ -0,0 +1,198 @@
+---
+title: BigQuery ML Quickstart
+lastmod: 2019-03-13T18:23:18-07:00
+publishdate: 2019-03-13T18:23:18-07:00
+author: Jeff Delaney
+draft: false
+description: Use BigQuery to process massive amounts of data for analysis and machine learning.
+tags:
+ - machine-learning
+ - big-query
+ - sql
+ - python
+
+youtube: ajTp60neMlc
+# github:
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+[BigQuery](https://cloud.google.com/bigquery/) is a serverless [Data Warehouse](https://en.wikipedia.org/wiki/Data_warehouse) that makes it easy to process and query massive amounts of data. It supports standard SQL queries in a web-based UI, via the command line, or with a variety of client libraries. In addition, it recently landed support for integrated machine learning, allowing you to build predictive models without data science skills.
+
+**What can you do with Big Query?**
+
+- Stream data to business intelligence tools like Data Studio, Tableau, etc.
+- Combine Web Analytics with iOS/Android on Firebase.
+- Organize and connect multiple data sources.
+- Build an horse racing machine learning model 🏇
+
+In the following lesson, we will harness the data-crunching power of 👾 BigQueryML, along with DataStudio and DataLab, to build a predictive model from historical Horse Racing Data. Our goal is to turn this dataset into an ML model
+
+
+## Import Data into Big Query
+
+The first step is to import your data into BigQuery. Create a new Google Cloud Platform or Firebase project, then navigate to the [BigQuery Web UI](https://console.cloud.google.com/bigquery).
+
+### Upload Data to Cloud Storage
+
+Download the [Horse Racing Dataset](https://www.kaggle.com/lukebyrne/horses-for-courses) from Kaggle, specifically the *horses.csv* file. Because this file is larger than 10Mb, we need to first upload it to a GCP storage bucket.
+
+{{< figure src="img/bigquery-upload-data.png" caption="Upload horses.csv to a cloud storage bucket" >}}
+
+### Create a Dataset & Table
+
+Click on the **+ Add Data** button and make sure your project is pinned, then click on **Create Dataset**. Provide a name and use the default options.
+
+{{< figure src="img/bigquery-console.png" caption="The big query web UI" >}}
+
+
+Now that you have a dataset, you can start adding tables to it. Tables represent data that you query using SQL. You can define your own schema manually, but BigQuery can autodetect the schema of CSV files based on the header row and a random sample of rows. Click **Create Table** and reference the data in the storage bucket with the following options.
+
+
+{{< figure src="img/bigquery-create-table.png" >}}
+{{< figure src="img/bigquery-create-table2.png" caption="Follow these configuration options closely. Set the schema to auto-detect and the 'Header rows to skip' to 1 under the advanced tab" >}}
+
+
+### Make your First Query
+
+The end result should be a table that looks just like the original spreadsheet. Enter a [Standard SQL Query](https://cloud.google.com/bigquery/docs/reference/standard-sql/query-syntax) in the console to try it out. In this dataset, the *position* value represents a horse's finishing position in a race, which is what we want to predict.
+
+
+{{< figure src="img/bigquery-schema.png" >}}
+
+{{< file "sql" >}}
+```sql
+SELECT age, position, sex
+
+FROM `fireship-lessons.horse_data.horses`
+
+WHERE age > 2
+
+LIMIT 1000
+```
+
+
+If the data looks malformatted at this point, you may need to open horses.csv in a MS excel and manually convert the number columns to numbers. BigQuery will error out if mismatched datatypes are present in the data.
+
+
+
+### Optional: Analyze in Data Studio
+
+Make a query, then click **Export -> Explore in Data Studio**. A solid ML algorithm typically starts off with a thorough exploratory analysis. DataStudio will help you visualize the dataset and create custom charts.
+
+{{< figure src="img/bigquery-datastudio.png" >}}
+
+
+## Create a Predictive ML Model
+
+Now we're ready for the fun part - converting our horse racing data into a predictive ML model. We will use another GCP service called [DataLab](https://cloud.google.com/datalab/), which connects a cloud VM to a Python notebook, along with a connection to your BigQuery dataset. In other words, it puts unlimited compute resources at your fingertips for training ML models on your data.
+
+
+The DataLab instance will accrue costs. Make sure to delete the VM from the compute tab and any other resources after you are finished with this tutorial.
+
+
+### Open a Cloud Shell
+
+Click on the **Activate Cloud Shell** button in the top right next your profile image. This opens a shell session that we can use to launch a DataLab instance.
+
+{{< figure src="img/bigquery-shell.png" >}}
+
+Enter the `datalab create horsemagic` command and follow the steps it gives you, which will result in an SSH tunnel on port 8081.
+
+{{< figure src="img/bigquery-shell2.png" caption="Open the web preview, but make sure to change the port to 8081" >}}
+
+### Access BigQuery from DataLab
+
+Your BigQuery data is automatically available in the DataLab notebook. Create a new notebook, then get familiar with the available commands by running `%% bq -h`.
+
+
+{{< figure src="img/bigquery-datalab.png" caption="Run '%%bq tables list' and you should see the table we created in BigQuery" >}}
+
+
+### Create a Model
+
+Create a new cell in the notebook and run the code below, but make sure to use your own table names. Our goal is to predict the *position* label. This is a [classification](https://math.stackexchange.com/questions/141381/regression-vs-classification) problem, so we use *logistic_reg* as the model type, then select the columns we think will result in the best predictions - feel free to change these and experiment. Reference the [CREATE MODEL](https://cloud.google.com/bigquery/docs/reference/standard-sql/bigqueryml-syntax-create) statement docs for additional BigQueryML options.
+
+{{< file "python" "notebook" >}}
+```python
+%%bq query
+CREATE OR REPLACE MODEL `fireship-lessons.horse_data.ml_model`
+OPTIONS
+ (model_type='logistic_reg',
+ input_label_cols=['position']) AS
+SELECT
+ age,
+ sex,
+ overall_wins, overall_places, handicap_weight, penalty,
+ favourite_odds_win, number, runner_id, bf_odds, barrier, market_id,
+ position
+FROM
+ `fireship-lessons.horse_data.horses`
+```
+
+
+{{< figure src="img/bigquery-ml-model.png" caption="This will take a few minutes, then the ML model should appear in the BigQuery dataset" >}}
+
+### Evaluate Performance and Predict
+
+For this particular ML problem, we are interested in the *log_loss* metric - a smaller value is better.
+
+{{< file "python" "notebook" >}}
+```python
+%%bq query
+SELECT
+ *
+FROM
+ ML.EVALUATE(MODEL `fireship-lessons.horse_data.ml_model`,
+ (
+ SELECT
+ age,
+ sex,
+ overall_wins, overall_places, handicap_weight, penalty,
+ favourite_odds_win, number, runner_id, bf_odds, barrier, market_id,
+ position
+ FROM
+ `fireship-lessons.horse_data.horses`
+ )
+ )
+
+```
+
+
+
+{{< figure src="img/bigquery-ml-results.png" >}}
+
+At this point, we're happy with our model and it should pick the right winner for every horse race, therefore making us extremely wealthy 🤑. To make predictions, we can add new tables to our database with the same schema, then use the ML.PREDICT statement. In this example, I am just taking 10 random samples from the existing data.
+
+
+
+{{< file "python" "notebook" >}}
+```python
+%%bq query
+SELECT
+ sex, runner_id, position
+FROM
+ ML.PREDICT(MODEL `fireship-lessons.horse_data.ml_model`,
+ (
+ SELECT
+ age,
+ sex,
+ overall_wins, overall_places, handicap_weight, penalty,
+ favourite_odds_win, number, runner_id, bf_odds, barrier, market_id,
+ position
+ FROM
+ `fireship-lessons.horse_data.horses`
+ ORDER BY RAND()
+ LIMIT 10
+
+ )
+ )
+```
+
+{{< figure src="img/bigquery-ml-predict.png" caption="The final model predictions that we can take to the racetrack" >}}
\ No newline at end of file
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/img/.gitkeep b/content/lessons/build-a-binary-clock-flutter/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/bigquery-ml-quickstart/img/.gitkeep
rename to content/lessons/build-a-binary-clock-flutter/img/.gitkeep
diff --git a/hugo/content/lessons/build-a-binary-clock-flutter/img/featured.jpg b/content/lessons/build-a-binary-clock-flutter/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/build-a-binary-clock-flutter/img/featured.jpg
rename to content/lessons/build-a-binary-clock-flutter/img/featured.jpg
diff --git a/hugo/content/lessons/build-a-binary-clock-flutter/img/featured.png b/content/lessons/build-a-binary-clock-flutter/img/featured.png
similarity index 100%
rename from hugo/content/lessons/build-a-binary-clock-flutter/img/featured.png
rename to content/lessons/build-a-binary-clock-flutter/img/featured.png
diff --git a/hugo/content/lessons/build-a-binary-clock-flutter/img/featured.webp b/content/lessons/build-a-binary-clock-flutter/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/build-a-binary-clock-flutter/img/featured.webp
rename to content/lessons/build-a-binary-clock-flutter/img/featured.webp
diff --git a/content/lessons/build-a-binary-clock-flutter/index.md b/content/lessons/build-a-binary-clock-flutter/index.md
new file mode 100644
index 000000000..29e1cd0e8
--- /dev/null
+++ b/content/lessons/build-a-binary-clock-flutter/index.md
@@ -0,0 +1,318 @@
+---
+title: Build a Binary Clock with Flutter
+lastmod: 2019-11-21T12:40:31-07:00
+publishdate: 2019-11-21T12:40:31-07:00
+author: Jeff Delaney
+draft: false
+description: "Learn how to build a binary clock with Flutter for the #FlutterClock competition"
+tags:
+ - flutter
+ - compsci
+
+youtube: VkTj1U_exwA
+github: https://github.com/fireship-io/214-flutter-binary-clock
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+
+The Flutter Clock [Contest](https://flutter.dev/clock) is currently running with a submission deadline of Jan 20th, 2020. The following lesson will teach you how to build a basic clock with Flutter.
+
+## Binary Clock Basics
+
+We are building the [binary clock](https://en.wikipedia.org/wiki/Binary_clock) shown in the demo video below. Notice how the clock ticks once-per-second and updates the highlighted boxes in the UI. The actual time is shown in big plain digits at the bottom, with the binary value for each number under it.
+
+Each **column** represents a digit of time in `hh:mm:ss` format. Each **row** represents a binary value of 1, 2, 4, or 8 (or 0 if no boxes are colored). You calculate each digit in regular time by adding all the values (or bits) in a column.
+
+
+
+{{< vimeo 374741877 >}}
+
+
+## Initial Setup
+
+
+### Create a Flutter App
+
+Get started by creating a new Flutter app by running `flutter create my_awesome_clock`. The initial app will import a few dependencies and wrap the `Clock` widget inside of Scaffold.
+
+{{< file "dart" "main.dart" >}}
+```dart
+import 'dart:async';
+import 'dart:math';
+
+import 'package:flutter/material.dart';
+import 'package:flutter/services.dart' show SystemChrome, DeviceOrientation;
+import 'package:intl/intl.dart' show DateFormat;
+
+void main() {
+ runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ home: Scaffold(
+ body: Clock(),
+ ),
+ );
+ }
+}
+
+```
+
+
+### Force the App to Run in Landscape Mode
+
+The Flutter Clock contest requires the app to run in landscape mode. You can tell Flutter to whitelist specific device orientations with the SystemChrome class. In our case, we will allow `landscapeLeft` or `landscapeRight` by updating the main function.
+
+{{< file "dart" "main.dart" >}}
+```dart
+void main() {
+ SystemChrome.setPreferredOrientations([
+ DeviceOrientation.landscapeRight,
+ DeviceOrientation.landscapeLeft,
+ ]);
+ runApp(MyApp());
+}
+```
+
+## Working with Time
+
+### Make the Clock Tick
+
+The only state that ever changes on the clock is the time, which should update once-per-second. Simply create a [DateTime](https://api.dartlang.org/stable/2.6.1/dart-core/DateTime-class.html) property and update it every second with a periodic timer.
+
+{{< file "dart" "main.dart" >}}
+```dart
+class Clock extends StatefulWidget {
+ Clock({Key key}) : super(key: key);
+
+ @override
+ _ClockState createState() => _ClockState();
+}
+
+class _ClockState extends State {
+
+ DateTime _now = DateTime.now(); // or BinaryTime see next step
+
+ // Tick the clock
+ @override
+ void initState() {
+ Timer.periodic(Duration(seconds: 1), (v) {
+ setState(() {
+ _now = DateTime.now(); // or BinaryTime see next step
+ });
+ });
+
+ super.initState();
+ }
+
+
+}
+
+```
+
+### Converting Integers to Binary Strings
+
+A clock displays time on a format that looks like `14:23:55` or `hh:mm:ss`. In order to keep business logic out of the widget, a custom class called `BinaryTime` provides the values we need for the main UI.
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+/// Utility class to access values as binary integers
+class BinaryTime {
+ List binaryIntegers;
+
+ BinaryTime() {
+ DateTime now = DateTime.now();
+ String hhmmss = DateFormat("Hms").format(now).replaceAll(':', '');
+
+ binaryIntegers = hhmmss
+ .split('')
+ .map((str) => int.parse(str).toRadixString(2).padLeft(4, '0'))
+ .toList();
+ }
+
+ get hourTens => binaryIntegers[0];
+ get hourOnes => binaryIntegers[1];
+ get minuteTens => binaryIntegers[2];
+ get minuteOnes => binaryIntegers[3];
+ get secondTens => binaryIntegers[4];
+ get secondOnes => binaryIntegers[5];
+}
+```
+
+
+## Clock UI
+
+### Columns for Each Clock Digit
+
+Each column in the binary clock represents a digit in normal base-10 time. The Clock widget implements six fixed columns for each digit.
+
+{{< file "dart" "main.dart" >}}
+```dart
+
+class Clock extends StatefulWidget {
+ Clock({Key key}) : super(key: key);
+
+ @override
+ _ClockState createState() => _ClockState();
+}
+
+class _ClockState extends State {
+ BinaryTime _now = BinaryTime();
+
+ // Tick the clock
+ @override
+ void initState() {
+ Timer.periodic(Duration(seconds: 1), (v) {
+ setState(() {
+ _now = BinaryTime();
+ });
+ });
+ super.initState();
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Container(
+ padding: EdgeInsets.all(50),
+ child: Row(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ // Columns for the clock
+ ClockColumn(
+ binaryInteger: _now.hourTens,
+ title: 'H',
+ color: Colors.blue,
+ rows: 2,
+ ),
+ ClockColumn(
+ binaryInteger: _now.hourOnes,
+ title: 'h',
+ color: Colors.lightBlue,
+ ),
+ ClockColumn(
+ binaryInteger: _now.minuteTens,
+ title: 'M',
+ color: Colors.green,
+ rows: 3,
+ ),
+ ClockColumn(
+ binaryInteger: _now.minuteOnes,
+ title: 'm',
+ color: Colors.lightGreen,
+ ),
+ ClockColumn(
+ binaryInteger: _now.secondTens,
+ title: 'S',
+ color: Colors.pink,
+ rows: 3,
+ ),
+ ClockColumn(
+ binaryInteger: _now.secondOnes,
+ title: 's',
+ color: Colors.pinkAccent,
+ ),
+ ],
+ ),
+ );
+ }
+}
+```
+
+
+
+### Individual Clock Column
+
+At this point, each column must be split into four cells, where a cell represents a single bit. The code below loops over the digits in a binary integer, then colors them if the cell is active (has a value of 1).
+
+{{< file "dart" "main.dart" >}}
+```dart
+/// Column to represent a binary integer.
+class ClockColumn extends StatelessWidget {
+ String binaryInteger;
+ String title;
+ Color color;
+ int rows;
+ List bits;
+
+ ClockColumn({this.binaryInteger, this.title, this.color, this.rows = 4}) {
+ bits = binaryInteger.split('');
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Column(
+ mainAxisAlignment: MainAxisAlignment.spaceBetween,
+ children: [
+ ...[
+ Container(
+ child: Text(
+ title,
+ style: Theme.of(context).textTheme.display1,
+ ),
+ )
+ ],
+ ...bits.asMap().entries.map((entry) {
+ int idx = entry.key;
+ String bit = entry.value;
+
+ bool isActive = bit == '1';
+ int binaryCellValue = pow(2, 3 - idx);
+
+ return AnimatedContainer(
+ duration: Duration(milliseconds: 475),
+ curve: Curves.ease,
+ height: 40,
+ width: 30,
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.all(Radius.circular(5)),
+ color: isActive
+ ? color
+ : idx < 4 - rows
+ ? Colors.white.withOpacity(0)
+ : Colors.black38,
+ ),
+ margin: EdgeInsets.all(4),
+ child: Center(
+ child: isActive
+ ? Text(
+ binaryCellValue.toString(),
+ style: TextStyle(
+ color: Colors.black.withOpacity(0.2),
+ fontSize: 18,
+ fontWeight: FontWeight.w700,
+ ),
+ )
+ : Container(),
+ ),
+ );
+ }),
+ ...[
+ Text(
+ int.parse(binaryInteger, radix: 2).toString(),
+ style: TextStyle(fontSize: 30, color: color),
+ ),
+ Container(
+ child: Text(
+ binaryInteger,
+ style: TextStyle(fontSize: 15, color: color),
+ ),
+ )
+ ]
+ ],
+ );
+ }
+}
+
+
+```
\ No newline at end of file
diff --git a/hugo/content/lessons/build-a-binary-clock-flutter/img/.gitkeep b/content/lessons/build-a-chatbot-with-dialogflow/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/build-a-binary-clock-flutter/img/.gitkeep
rename to content/lessons/build-a-chatbot-with-dialogflow/img/.gitkeep
diff --git a/hugo/content/lessons/build-a-chatbot-with-dialogflow/img/agent.png b/content/lessons/build-a-chatbot-with-dialogflow/img/agent.png
similarity index 100%
rename from hugo/content/lessons/build-a-chatbot-with-dialogflow/img/agent.png
rename to content/lessons/build-a-chatbot-with-dialogflow/img/agent.png
diff --git a/hugo/content/lessons/build-a-chatbot-with-dialogflow/img/featured.jpg b/content/lessons/build-a-chatbot-with-dialogflow/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/build-a-chatbot-with-dialogflow/img/featured.jpg
rename to content/lessons/build-a-chatbot-with-dialogflow/img/featured.jpg
diff --git a/hugo/content/lessons/build-a-chatbot-with-dialogflow/img/featured.png b/content/lessons/build-a-chatbot-with-dialogflow/img/featured.png
similarity index 100%
rename from hugo/content/lessons/build-a-chatbot-with-dialogflow/img/featured.png
rename to content/lessons/build-a-chatbot-with-dialogflow/img/featured.png
diff --git a/hugo/content/lessons/build-a-chatbot-with-dialogflow/img/featured.webp b/content/lessons/build-a-chatbot-with-dialogflow/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/build-a-chatbot-with-dialogflow/img/featured.webp
rename to content/lessons/build-a-chatbot-with-dialogflow/img/featured.webp
diff --git a/hugo/content/lessons/build-a-chatbot-with-dialogflow/img/functions-service-account.png b/content/lessons/build-a-chatbot-with-dialogflow/img/functions-service-account.png
similarity index 100%
rename from hugo/content/lessons/build-a-chatbot-with-dialogflow/img/functions-service-account.png
rename to content/lessons/build-a-chatbot-with-dialogflow/img/functions-service-account.png
diff --git a/hugo/content/lessons/build-a-chatbot-with-dialogflow/img/intent-train.png b/content/lessons/build-a-chatbot-with-dialogflow/img/intent-train.png
similarity index 100%
rename from hugo/content/lessons/build-a-chatbot-with-dialogflow/img/intent-train.png
rename to content/lessons/build-a-chatbot-with-dialogflow/img/intent-train.png
diff --git a/hugo/content/lessons/build-a-chatbot-with-dialogflow/img/params.png b/content/lessons/build-a-chatbot-with-dialogflow/img/params.png
similarity index 100%
rename from hugo/content/lessons/build-a-chatbot-with-dialogflow/img/params.png
rename to content/lessons/build-a-chatbot-with-dialogflow/img/params.png
diff --git a/hugo/content/lessons/build-a-chatbot-with-dialogflow/img/webhook-fulfill.png b/content/lessons/build-a-chatbot-with-dialogflow/img/webhook-fulfill.png
similarity index 100%
rename from hugo/content/lessons/build-a-chatbot-with-dialogflow/img/webhook-fulfill.png
rename to content/lessons/build-a-chatbot-with-dialogflow/img/webhook-fulfill.png
diff --git a/content/lessons/build-a-chatbot-with-dialogflow/index.md b/content/lessons/build-a-chatbot-with-dialogflow/index.md
new file mode 100644
index 000000000..cef90dfca
--- /dev/null
+++ b/content/lessons/build-a-chatbot-with-dialogflow/index.md
@@ -0,0 +1,332 @@
+---
+title: Build a Chatbot With Dialogflow
+lastmod: 2019-08-12T09:45:18-07:00
+publishdate: 2019-08-12T09:45:18-07:00
+author: Jeff Delaney
+draft: false
+description: Build a fullstack conversational experience with Dialogflow and Firebase Cloud Functions.
+tags:
+ - cloud-functions
+ - node
+ - dialogflow
+ - angular
+
+youtube: 0NXqwT3Y09E
+github: https://github.com/fireship-io/202-chatbot-dialogflow
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+[Chatbots](https://en.wikipedia.org/wiki/Chatbot) make it possible for the average developer to deliver excellent (and affordable) customer service at scale - Building conversational experiences has never been easier thanks to the [Dialogflow](https://dialogflow.com/) conversation platform.
+
+Dialogflow is a free tool on Google Cloud for creating voice and text conversational interfaces. It uses Natural Language Processing [NLP](https://www.kaggle.com/romanj86/introduction-to-nlp/data) technology, allowing you to create experiences similar to Google Assistant or Amazon Alexa. In following lesson creates a chatbot from scratch in the three main steps:
+
+
+1. Create a chatbot on the Dialogflow Console
+1. Connect it to Firebase Cloud Functions (NodeJS)
+1. Interact with it from frontend Angular app
+
+## Part 1: Create a Chatbot
+
+Before getting started, it is recommended that you have an existing Firebase or GCP project.
+
+### Create an Agent
+
+An agent is basically a entity that contains the knowledge and behaviors used to respond to phrases and fulfill user intentions.
+
+{{< figure src="img/agent.png" caption="Create the Dialogflow Agent " >}}
+
+### Create an Intent
+
+Think of a conversation as a **turn-based game**. An [Intent](https://cloud.google.com/dialogflow/docs/intents-overview) represents the end-user's goal or intention based on their last turn. When the bot is able to classify the intent, it can respond with useful information.
+
+Example:
+
+> USER: Can you change my username to bob23
+
+Bot recognizes question/intent and fulfills the request by updating Firestore from a Cloud Function.
+
+> BOT: Absolutely, it has been updated in the database!
+
+
+{{< figure src="img/intent-train.png" caption="" >}}
+
+
+### Actions and Parameters
+
+In this example, we want our bot to determine the user's preferred display name and favorite color. We can do that by providing prompts that extract that data. After all required params have been extracted, we will use them to permanently update the user's record in the Firestore database. Dialogflow will ask the questions specified as *prompts* until it receives a valid *entity* value for that param.
+
+{{< figure src="img/params.png" alt="Dialogflow action and params" >}}
+
+
+### Responses and Fulfillment
+
+When an intent is completed you can setup a simple response in the Dialogflow console OR you can handle the fulfillment with a webhook. Enable a webhook call for this function.
+
+{{< figure src="img/webhook-fulfill.png" alt="Dialogflow webhook fulfillment" >}}
+
+## Part 2: Backend Cloud Functions
+
+Communicating with Dialogflow must be done on the server. In this section, we create HTTP Cloud Functions that enable frontend applications to communication with our agent.
+
+### Add your Service Account
+
+Dialogflow requires your full [service account](https://firebase.google.com/docs/admin/setup#initialize_the_sdk). Download it from the Firebase Console to `functions/service-account.json`.
+
+⚠️ Make sure to add the service account path to your `.gitignore` because it contains sensitive API keys that should not be exposed publicly.
+
+{{< figure src="img/functions-service-account.png" caption="Download your service account" >}}
+
+### Handling Conversations
+
+This first function is a generic endpoint that allows a frontend app to connect to the [Dialogflow API](https://github.com/googleapis/nodejs-dialogflow). The function expects the client to pass a `sessionId`, which is just a string that allows the bot to understand the current context of a conversation. It also expects the users `queryInput` text, which is what the user is saying to the bot.
+
+{{< file "terminal" "command line" >}}
+```text
+cd functions
+npm i dialogflow cors
+```
+
+{{< file "js" "index.js" >}}
+```js
+const functions = require('firebase-functions');
+const cors = require('cors')({ origin: true});
+const admin = require('firebase-admin');
+const serviceAccount = require('./service-account.json');
+
+admin.initializeApp({
+ credential: admin.credential.cert(serviceAccount),
+ databaseURL: "https://fireship-lessons.firebaseio.com"
+});
+
+const { SessionsClient } = require('dialogflow');
+
+
+exports.dialogflowGateway = functions.https.onRequest((request, response) => {
+ cors(request, response, async () => {
+ const { queryInput, sessionId } = request.body;
+
+
+ const sessionClient = new SessionsClient({ credentials: serviceAccount });
+ const session = sessionClient.sessionPath('your-project', sessionId);
+
+
+ const responses = await sessionClient.detectIntent({ session, queryInput});
+
+ const result = responses[0].queryResult;
+
+ response.send(result);
+ });
+});
+
+```
+
+
+### Fulfilling Intents with a Webhook
+
+The benefit of a webhook is that you can perform additional backend logic, like updating a database or reaching out to a another API, then format the response to the user dynamically. In this example, we take the *name* and *color* parameters from the user's conversation and update their account in Firestore.
+
+{{< file "terminal" "command line" >}}
+```text
+npm i dialogflow-fulfillment actions-on-google
+```
+
+{{< file "js" "index.js" >}}
+```js
+
+const { WebhookClient } = require('dialogflow-fulfillment');
+
+exports.dialogflowWebhook = functions.https.onRequest(async (request, response) => {
+ const agent = new WebhookClient({ request, response });
+
+ const result = request.body.queryResult;
+
+
+ async function userOnboardingHandler(agent) {
+
+ // Do backend stuff here
+ const db = admin.firestore();
+ const profile = db.collection('users').doc('jeffd23');
+
+ const { name, color } = result.parameters;
+
+ await profile.set({ name, color })
+ agent.add(`Welcome aboard my friend!`);
+ }
+
+
+ let intentMap = new Map();
+ intentMap.set('UserOnboarding', userOnboardingHandler);
+ agent.handleRequest(intentMap);
+});
+```
+
+## Part 3: Frontend Angular Integration
+
+In this section, we build a user-friendly chat UI to interact with the bot. We can quickly build this feature with the [Nebular theme](https://akveo.github.io/nebular/) and Angular's HTTP client.
+
+### Initial Setup
+
+
+Install [Nebular](https://akveo.github.io/nebular/docs/components/chat-ui/overview#nbchatcomponent) and import Angular's HTTP Client in your app.
+
+{{< file "terminal" "command line" >}}
+```text
+ng new my-app --routing
+cd my-app
+
+ng add @nebular/theme
+
+ng generate component chatbot
+```
+
+The app module should look something like this:
+
+{{< file "ngts" "app.module.ts" >}}
+```typescript
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+import { HttpClientModule } from '@angular/common/http';
+
+import { AppRoutingModule } from './app-routing.module';
+import { AppComponent } from './app.component';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+import { NbThemeModule, NbLayoutModule, NbChatModule, NbSpinnerModule } from '@nebular/theme';
+import { NbEvaIconsModule } from '@nebular/eva-icons';
+import { ChatbotComponent } from './chatbot/chatbot.component';
+
+
+@NgModule({
+ declarations: [
+ AppComponent,
+ ChatbotComponent
+ ],
+ imports: [
+ BrowserModule,
+ AppRoutingModule,
+ HttpClientModule,
+ BrowserAnimationsModule,
+ NbThemeModule.forRoot({ name: 'default' }),
+ NbLayoutModule,
+ NbEvaIconsModule,
+ NbChatModule,
+ NbSpinnerModule,
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
+
+```
+
+### Chatbot Component
+
+{{< file "ngts" "chatbot.component.ts" >}}
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+
+const dialogflowURL = 'https://YOUR-CLOUDFUNCTION/dialogflowGateway';
+
+@Component({
+ selector: 'app-chatbot',
+ templateUrl: './chatbot.component.html',
+ styleUrls: ['./chatbot.component.scss']
+})
+export class ChatbotComponent implements OnInit {
+
+ messages = [];
+ loading = false;
+
+ // Random ID to maintain session with server
+ sessionId = Math.random().toString(36).slice(-5);
+
+ constructor(private http: HttpClient) { }
+
+ ngOnInit() {
+ this.addBotMessage('Human presence detected 🤖. How can I help you? ');
+ }
+
+ handleUserMessage(event) {
+ console.log(event);
+ const text = event.message;
+ this.addUserMessage(text);
+
+ this.loading = true;
+
+ // Make the request
+ this.http.post(
+ dialogflowURL,
+ {
+ sessionId: this.sessionId,
+ queryInput: {
+ text: {
+ text,
+ languageCode: 'en-US'
+ }
+ }
+ }
+ )
+ .subscribe(res => {
+ const { fulfillmentText } = res;
+ this.addBotMessage(fulfillmentText);
+ this.loading = false;
+ });
+ }
+
+ addUserMessage(text) {
+ this.messages.push({
+ text,
+ sender: 'You',
+ reply: true,
+ date: new Date()
+ });
+ }
+
+ addBotMessage(text) {
+ this.messages.push({
+ text,
+ sender: 'Bot',
+ avatar: '/assets/bot.jpeg',
+ date: new Date()
+ });
+ }
+
+}
+
+```
+
+### Chatbot Template
+
+{{< file "html" "chatbot.component.html" >}}
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
diff --git a/hugo/content/lessons/build-a-chatbot-with-dialogflow/img/.gitkeep b/content/lessons/build-an-angular-library-with-ngpackagr/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/build-a-chatbot-with-dialogflow/img/.gitkeep
rename to content/lessons/build-an-angular-library-with-ngpackagr/img/.gitkeep
diff --git a/hugo/content/lessons/build-an-angular-library-with-ngpackagr/img/featured.jpg b/content/lessons/build-an-angular-library-with-ngpackagr/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/build-an-angular-library-with-ngpackagr/img/featured.jpg
rename to content/lessons/build-an-angular-library-with-ngpackagr/img/featured.jpg
diff --git a/hugo/content/lessons/build-an-angular-library-with-ngpackagr/img/featured.png b/content/lessons/build-an-angular-library-with-ngpackagr/img/featured.png
similarity index 100%
rename from hugo/content/lessons/build-an-angular-library-with-ngpackagr/img/featured.png
rename to content/lessons/build-an-angular-library-with-ngpackagr/img/featured.png
diff --git a/hugo/content/lessons/build-an-angular-library-with-ngpackagr/img/featured.webp b/content/lessons/build-an-angular-library-with-ngpackagr/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/build-an-angular-library-with-ngpackagr/img/featured.webp
rename to content/lessons/build-an-angular-library-with-ngpackagr/img/featured.webp
diff --git a/hugo/content/lessons/build-an-angular-library-with-ngpackagr/img/ngpackagr-build.png b/content/lessons/build-an-angular-library-with-ngpackagr/img/ngpackagr-build.png
similarity index 100%
rename from hugo/content/lessons/build-an-angular-library-with-ngpackagr/img/ngpackagr-build.png
rename to content/lessons/build-an-angular-library-with-ngpackagr/img/ngpackagr-build.png
diff --git a/hugo/content/lessons/build-an-angular-library-with-ngpackagr/img/ngpackagr-files.png b/content/lessons/build-an-angular-library-with-ngpackagr/img/ngpackagr-files.png
similarity index 100%
rename from hugo/content/lessons/build-an-angular-library-with-ngpackagr/img/ngpackagr-files.png
rename to content/lessons/build-an-angular-library-with-ngpackagr/img/ngpackagr-files.png
diff --git a/hugo/content/lessons/build-an-angular-library-with-ngpackagr/index.md b/content/lessons/build-an-angular-library-with-ngpackagr/index.md
similarity index 100%
rename from hugo/content/lessons/build-an-angular-library-with-ngpackagr/index.md
rename to content/lessons/build-an-angular-library-with-ngpackagr/index.md
diff --git a/hugo/content/lessons/build-an-angular-library-with-ngpackagr/img/.gitkeep b/content/lessons/build-group-chat-with-firestore/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/build-an-angular-library-with-ngpackagr/img/.gitkeep
rename to content/lessons/build-group-chat-with-firestore/img/.gitkeep
diff --git a/hugo/content/lessons/build-group-chat-with-firestore/img/featured.jpg b/content/lessons/build-group-chat-with-firestore/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/build-group-chat-with-firestore/img/featured.jpg
rename to content/lessons/build-group-chat-with-firestore/img/featured.jpg
diff --git a/hugo/content/lessons/build-group-chat-with-firestore/img/featured.png b/content/lessons/build-group-chat-with-firestore/img/featured.png
similarity index 100%
rename from hugo/content/lessons/build-group-chat-with-firestore/img/featured.png
rename to content/lessons/build-group-chat-with-firestore/img/featured.png
diff --git a/hugo/content/lessons/build-group-chat-with-firestore/img/featured.webp b/content/lessons/build-group-chat-with-firestore/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/build-group-chat-with-firestore/img/featured.webp
rename to content/lessons/build-group-chat-with-firestore/img/featured.webp
diff --git a/hugo/content/lessons/build-group-chat-with-firestore/img/firestore-chat-demo.gif b/content/lessons/build-group-chat-with-firestore/img/firestore-chat-demo.gif
similarity index 100%
rename from hugo/content/lessons/build-group-chat-with-firestore/img/firestore-chat-demo.gif
rename to content/lessons/build-group-chat-with-firestore/img/firestore-chat-demo.gif
diff --git a/hugo/content/lessons/build-group-chat-with-firestore/img/firestore-chat-embedded.png b/content/lessons/build-group-chat-with-firestore/img/firestore-chat-embedded.png
similarity index 100%
rename from hugo/content/lessons/build-group-chat-with-firestore/img/firestore-chat-embedded.png
rename to content/lessons/build-group-chat-with-firestore/img/firestore-chat-embedded.png
diff --git a/hugo/content/lessons/build-group-chat-with-firestore/img/firestore-chat-subcollection.png b/content/lessons/build-group-chat-with-firestore/img/firestore-chat-subcollection.png
similarity index 100%
rename from hugo/content/lessons/build-group-chat-with-firestore/img/firestore-chat-subcollection.png
rename to content/lessons/build-group-chat-with-firestore/img/firestore-chat-subcollection.png
diff --git a/hugo/content/lessons/build-group-chat-with-firestore/index.md b/content/lessons/build-group-chat-with-firestore/index.md
similarity index 100%
rename from hugo/content/lessons/build-group-chat-with-firestore/index.md
rename to content/lessons/build-group-chat-with-firestore/index.md
diff --git a/hugo/content/lessons/build-group-chat-with-firestore/img/.gitkeep b/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/build-group-chat-with-firestore/img/.gitkeep
rename to content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/.gitkeep
diff --git a/hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/featured.jpg b/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/featured.jpg
rename to content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/featured.jpg
diff --git a/hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/featured.png b/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/featured.png
similarity index 100%
rename from hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/featured.png
rename to content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/featured.png
diff --git a/hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/featured.webp b/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/featured.webp
rename to content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/featured.webp
diff --git a/hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/map1.gif b/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/map1.gif
similarity index 100%
rename from hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/map1.gif
rename to content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/map1.gif
diff --git a/hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/map2.gif b/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/map2.gif
similarity index 100%
rename from hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/map2.gif
rename to content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/map2.gif
diff --git a/hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/index.md b/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/index.md
similarity index 100%
rename from hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/index.md
rename to content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/index.md
diff --git a/hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/.gitkeep b/content/lessons/ci-cd-with-google-cloud-build/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/build-realtime-maps-in-angular-with-mapbox-gl/img/.gitkeep
rename to content/lessons/ci-cd-with-google-cloud-build/img/.gitkeep
diff --git a/hugo/content/lessons/ci-cd-with-google-cloud-build/img/cloud-build-fail.png b/content/lessons/ci-cd-with-google-cloud-build/img/cloud-build-fail.png
similarity index 100%
rename from hugo/content/lessons/ci-cd-with-google-cloud-build/img/cloud-build-fail.png
rename to content/lessons/ci-cd-with-google-cloud-build/img/cloud-build-fail.png
diff --git a/hugo/content/lessons/ci-cd-with-google-cloud-build/img/cloudbuild-trigger.png b/content/lessons/ci-cd-with-google-cloud-build/img/cloudbuild-trigger.png
similarity index 100%
rename from hugo/content/lessons/ci-cd-with-google-cloud-build/img/cloudbuild-trigger.png
rename to content/lessons/ci-cd-with-google-cloud-build/img/cloudbuild-trigger.png
diff --git a/hugo/content/lessons/ci-cd-with-google-cloud-build/img/container-firebase.png b/content/lessons/ci-cd-with-google-cloud-build/img/container-firebase.png
similarity index 100%
rename from hugo/content/lessons/ci-cd-with-google-cloud-build/img/container-firebase.png
rename to content/lessons/ci-cd-with-google-cloud-build/img/container-firebase.png
diff --git a/hugo/content/lessons/ci-cd-with-google-cloud-build/img/featured.jpg b/content/lessons/ci-cd-with-google-cloud-build/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/ci-cd-with-google-cloud-build/img/featured.jpg
rename to content/lessons/ci-cd-with-google-cloud-build/img/featured.jpg
diff --git a/hugo/content/lessons/ci-cd-with-google-cloud-build/img/featured.png b/content/lessons/ci-cd-with-google-cloud-build/img/featured.png
similarity index 100%
rename from hugo/content/lessons/ci-cd-with-google-cloud-build/img/featured.png
rename to content/lessons/ci-cd-with-google-cloud-build/img/featured.png
diff --git a/hugo/content/lessons/ci-cd-with-google-cloud-build/img/featured.webp b/content/lessons/ci-cd-with-google-cloud-build/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/ci-cd-with-google-cloud-build/img/featured.webp
rename to content/lessons/ci-cd-with-google-cloud-build/img/featured.webp
diff --git a/hugo/content/lessons/ci-cd-with-google-cloud-build/img/iam-cloud-build.png b/content/lessons/ci-cd-with-google-cloud-build/img/iam-cloud-build.png
similarity index 100%
rename from hugo/content/lessons/ci-cd-with-google-cloud-build/img/iam-cloud-build.png
rename to content/lessons/ci-cd-with-google-cloud-build/img/iam-cloud-build.png
diff --git a/hugo/content/lessons/ci-cd-with-google-cloud-build/img/kms-key.png b/content/lessons/ci-cd-with-google-cloud-build/img/kms-key.png
similarity index 100%
rename from hugo/content/lessons/ci-cd-with-google-cloud-build/img/kms-key.png
rename to content/lessons/ci-cd-with-google-cloud-build/img/kms-key.png
diff --git a/hugo/content/lessons/ci-cd-with-google-cloud-build/img/kms-keyring.png b/content/lessons/ci-cd-with-google-cloud-build/img/kms-keyring.png
similarity index 100%
rename from hugo/content/lessons/ci-cd-with-google-cloud-build/img/kms-keyring.png
rename to content/lessons/ci-cd-with-google-cloud-build/img/kms-keyring.png
diff --git a/content/lessons/ci-cd-with-google-cloud-build/index.md b/content/lessons/ci-cd-with-google-cloud-build/index.md
new file mode 100644
index 000000000..bfcdf73e1
--- /dev/null
+++ b/content/lessons/ci-cd-with-google-cloud-build/index.md
@@ -0,0 +1,316 @@
+---
+title: Continuous Integration and Deployment with Google Cloud Build
+lastmod: 2019-01-17T04:17:11-07:00
+publishdate: 2019-01-17T04:17:11-07:00
+author: Jeff Delaney
+draft: false
+description: Learn how to automate the testing and deployment of an app with Google Cloud Build
+tags:
+ - cloud-build
+ - devops
+ - docker
+
+youtube: Zd014DjonqE
+github: https://github.com/fireship-io/147-cloud-build-firebase
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+versions:
+ firebase-tools: 6.3
+---
+
+Continuous Integration and Delivery, aka CI/CD, aka [DevOps](https://www.atlassian.com/devops) is the process of automating build, test, and deploy tasks between code changes to your software. The practice can yield a wide range of benefits, but most importantly it keeps your development code looking nearly identical to your production code. The adoption of devops has been a macrotrend in tech for the last few years and presents opportunites for both large teams and independent entrepreneurs.
+
+In the following lesson, you will learn how to use [Google Cloud Build](https://cloud.google.com/cloud-build) to automate the following tasks by simply committing your code to Github:
+
+- Run unit tests
+- Build the production code
+- Deploy to Firebase Hosting
+
+## Step 0: Prerequisites
+
+2. Install [firebase-tools](https://github.com/firebase/firebase-tools) CLI.
+3. Install [gcloud](https://cloud.google.com/sdk/gcloud/) CLI.
+4. Be able to create a frontend of your choice like Angular, Vue, or React.
+5. Billing must be enabled on Google Cloud, but the service is free for 120 minutes of build time per day (that's a lot).
+
+
+## Step 1: Build an App
+
+You can follow along with this lesson using your existing Firebase project or by starting from scratch. The frontend code does not really matter - it just needs to be an NPM project that we can build and test. Below are some popular options to quikly create a frontend JS app from the command line.
+
+
+{{< file "terminal" "command line" >}}
+```bash
+# pick your poison ☠️
+ng new my-app
+vue create my-app
+npx create-react-app my-app
+
+cd my-app
+
+firebase init
+# select hosting
+```
+
+
+All of these frameworks ship with basic automated specs and build commands. This is what we want to automate with Cloud Build.
+
+{{< file "terminal" "command line" >}}
+```text
+npm run test
+npm run build
+firebase deploy
+```
+
+## Step 2: Create a Remote Git Repo
+
+At this point, we need to connect your code to a remote git repo. This lesson will be using Github, but Cloud Build also integrates with GCP Source Repositories and BitBucket.
+
+Create a [Github repo](https://help.github.com/articles/create-a-repo/) (can be public or private), then commit your initial code to it.
+
+```text
+git add .
+git commit -m "initial commit"
+
+git remote add origin git@github.com:.git
+git push -u origin master
+```
+
+## Step 3: Grant Cloud Build IAM Permissions
+
+Activate the Cloud Build API on GCP.
+
+Next, give Cloud Build access to your Firebase project. Go to the IAM menu and find the service account for **@cloudbuild.gserviceaccount.com**. Go ahead to grant permission to **KMS Cryptokey Decrypter** and **Firebase Admin** and the **API Keys Admin**.
+
+{{< figure src="img/iam-cloud-build.png" alt="grant permission to cloud build via IAM on google cloud" >}}
+
+## Step 4: Build Steps
+
+Now it's time for the fun part, writing out the build steps in the *cloudbuild.yaml* file, but first we need a Docker container with `firebase-tools` installed.
+
+### Upload the Firebase Builder
+
+Firebase is not available in of the default NPM image on GCP, but we can use a [community builder](https://github.com/GoogleCloudPlatform/cloud-builders-community). You can add it to your GCP project with the following steps:
+
+{{< file "terminal" "command line" >}}
+```bash
+git clone https://github.com/GoogleCloudPlatform/cloud-builders-community
+cd cloud-builders-community/firebase
+
+gcloud builds submit --config cloudbuild.yaml .
+
+# wait for it to finish, then cleanup...
+
+cd ../..
+rm -rf cloud-builders-community
+```
+
+Now we should see the image in the container registry.
+
+{{< figure src="img/container-firebase.png" alt="firebase container in the register GCP" >}}
+
+
+### Define the Build Steps
+
+Create a file named `cloudbuild.yaml` in the root of the project. It will tell Cloud Build the steps required to build and test your code.
+
+The build takes place in four steps. Notice how the `name` field points to a container with a cooresponding command, i.e *npm* or *firebase*. Keep in mind, there are many [additional options](https://cloud.google.com/cloud-build/docs/configuring-builds/create-basic-configuration) you can pass to these steps.
+
+- Install NPM dependencies
+- Run unit tests
+- Run production build
+- Deploy
+
+{{< file "yaml" "cloudbuild.yaml" >}}
+```yaml
+steps:
+# Install
+- name: 'gcr.io/cloud-builders/npm'
+ args: ['install']
+# Test
+- name: 'gcr.io/cloud-builders/npm'
+ args: ['run', 'test:unit']
+# Build
+- name: 'gcr.io/cloud-builders/npm'
+ args: ['run', 'build']
+# Deploy
+- name: 'gcr.io/$PROJECT_ID/firebase'
+ args: ['deploy']
+```
+
+### Add the Build Trigger
+
+Almost done! We just need to connect our Github repo to Cloud Build by registering the build trigger. Make sure to point the trigger the cloudbuild.yaml.
+
+{{< figure src="img/cloudbuild-trigger.png" alt="github cloud build trigger" >}}
+
+### Trigger it
+
+Now for the moment of truth...
+
+```text
+git add .
+git commit -m "feat: added CI/CD pipeline"
+git push origin master
+```
+
+
+{{< figure src="img/cloud-build-fail.png" alt="cloud build results" >}}
+
+
+Hopefully your build succeeds, but errors are very common when setting up CI/CD for the first time. All of the logs can be found be directly in build details page, so review the last entries to see what failed.
+
+## Advanced: Secure your Environment Secrets
+
+
+The env encryption steps are optional for Firebase because you can grant access via IAM. However, this is still a good pattern to follow if you need to authorize other 3rd party APIs. For example, you might want to update your Algolia Search index before deployment, which would require a sensitive API key.
+
+
+There are several ways to manage environment variables for your CI builds, but I find the method outlined below to be the most flexible and it can easily scale to a large number of secret tokens.
+
+
+### Obtain the Firebase CI Auth Token
+
+The command below will create an auth token that can authenticate a server into Firebase.
+
+```text
+firebase login:ci
+```
+
+Let's add a custom NPM script for deployment using this token as an environment variable.
+
+{{< file "npm" "package.json" >}}
+```json
+{
+ "scripts": {
+ // ...
+ "deploy": "firebase deploy --debug --token \"$FIREBASE_TOKEN\"",
+ }
+}
+```
+
+
+### Create an .env file
+
+
+Do not share the contents of the `.env` file publicly and do not commit it to your public source code. It could be used to take destructive action on your project.
+
+
+Create a file named `.env` in the root of your project. It will used to manage the secret tokens (or API keys) required to build/deploy your code. Currently this is only Firebase, but it is likely you will use other APIs and will organize complexity down the road.
+
+Lastly, let's make sure to add this file to the `.gitignore`
+
+
+{{< file "git" ".gitignore" >}}
+```text
+.env
+```
+
+Now copy and paste the token from the previous step to the environment.
+
+{{< file "file" ".env" >}}
+```text
+FIREBASE_TOKEN=
+```
+
+### Create a Keyring
+
+We now have a secret token, so how do we transfer it to the server via a public git repo? We encrypt it.
+
+Go the GCP console and find **IAM >> Cryptographic Keys**. First, create a keyring for your app - it can be used to encrypt multiple keys via a single container.
+
+{{< figure src="img/kms-keyring.png" alt="create a keyring on GCP" >}}
+
+Next, create a key for your secrets - let's give it a name of **cloudbuild-env**.
+
+{{< figure src="img/kms-key.png" alt="create the crypto key" >}}
+
+
+### Encrypt
+
+Run the command below to encrypt the environment secrets into a single file named `env.enc` - this file is safe to commit to the repo and can only be read by services with access to the keyring.
+
+{{< file "terminal" "command line" >}}
+```text
+gcloud kms encrypt \
+ --plaintext-file=.env \
+ --ciphertext-file=.env.enc \
+ --location=global \
+ --keyring=YOUR_KEYRING_NAME \
+ --key=cloudbuild-env
+```
+
+### Decrypt Env Secrets
+
+The first step is important. It unwraps our environment variables and makes them available in the build container, allowing them to work with NPM scripts. Without this step, the server would not have authorization to interact with our 3rd party APIs. Also, make sure firebase-tools is installed in your dev dependencies `npm i -D firebase-tools`.
+
+{{< file "yaml" "cloudbuild.yaml" >}}
+```yaml
+steps:
+- name: gcr.io/cloud-builders/gcloud
+ args:
+ - kms
+ - decrypt
+ - --ciphertext-file=.env.enc
+ - --plaintext-file=.env
+ - --location=global
+ - --keyring=myproject
+ - --key=cloudbuild-env
+# Insert other build steps here
+# Deploy
+- name: 'gcr.io/cloud-builders/npm'
+ args: ['run', 'deploy']
+```
+
+
+## Additional Pro Tips
+
+### Run a Build without a Git Trigger
+
+Sometimes you just want to build without making a git commit. You can do this at any time from the command line:
+
+```text
+gcloud builds submit . --config=cloudbuild.yaml
+```
+
+
+### Conditionally Filter Steps in Cloud Build
+
+It most cases, you only want to deploy your code when changes are merged into the master branch. However, you may still want to run the other CI steps to ensure all tests pass when a pull request is submitted. If you followed the advanced settings above, you can add a conditional bash statement that looks at the `$BRANCH_NAME` env variable.
+
+{{< file "npm" "package.json" >}}
+```json
+{
+ "scripts": {
+ "deploy": "...",
+ "deploy:ci": "if test \"$BRANCH_NAME\" = \"master\"; then npm run deploy; fi"
+ }
+}
+```
+
+If we use the `deploy:ci` command in our *cloudbuild.yaml* it will only deploy when the master branch changes.
+
+### Using a Custom Docker Container Builder
+
+This very site, fireship.io, uses Google Cloud Build for CI/CD, but it cannot use the default Node or Go builders because they don't contain the right mix of dependencies. Fortunately, we can create our own custom builder that serves as the cloud environment for building and testing our code.
+
+{{< file "docker" "Dockerfile" >}}
+```docker
+FROM node:8
+
+RUN npm i -g firebase-tools
+
+ADD your-weird-dependencies-here
+
+```
+
+You can then deploy this image to the GCP container registry and use it in your build steps.
+
+## The End
+
+There are many great CI/CD providers out there like Travis, CircleCI, etc, but Cloud Build is especially nice for Firebase apps because it's a GCP service with generous pricing. It comes with 120 free build minutes per day (that's a lot) then becomes pay-as-you-go if you manage to exceed that cap. By comparison, standalone services usually have a small free tier, then jump to $50+ per month. While it can be tedious and frustrating to configure initially, a solid CI/CD pipeline can be a huge productivity-booster in the long run.
+
diff --git a/hugo/content/lessons/ci-cd-with-google-cloud-build/img/.gitkeep b/content/lessons/cloud-computing-in-2020/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/ci-cd-with-google-cloud-build/img/.gitkeep
rename to content/lessons/cloud-computing-in-2020/img/.gitkeep
diff --git a/hugo/content/lessons/cloud-computing-in-2020/img/featured.jpg b/content/lessons/cloud-computing-in-2020/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/cloud-computing-in-2020/img/featured.jpg
rename to content/lessons/cloud-computing-in-2020/img/featured.jpg
diff --git a/hugo/content/lessons/cloud-computing-in-2020/img/featured.png b/content/lessons/cloud-computing-in-2020/img/featured.png
similarity index 100%
rename from hugo/content/lessons/cloud-computing-in-2020/img/featured.png
rename to content/lessons/cloud-computing-in-2020/img/featured.png
diff --git a/hugo/content/lessons/cloud-computing-in-2020/img/featured.webp b/content/lessons/cloud-computing-in-2020/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/cloud-computing-in-2020/img/featured.webp
rename to content/lessons/cloud-computing-in-2020/img/featured.webp
diff --git a/hugo/content/lessons/cloud-computing-in-2020/index.md b/content/lessons/cloud-computing-in-2020/index.md
similarity index 100%
rename from hugo/content/lessons/cloud-computing-in-2020/index.md
rename to content/lessons/cloud-computing-in-2020/index.md
diff --git a/hugo/content/lessons/cloud-computing-in-2020/img/.gitkeep b/content/lessons/cloud-functions-scheduled-time-trigger/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/cloud-computing-in-2020/img/.gitkeep
rename to content/lessons/cloud-functions-scheduled-time-trigger/img/.gitkeep
diff --git a/hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/Screenshot from 2019-04-24 09-29-09.png b/content/lessons/cloud-functions-scheduled-time-trigger/img/Screenshot from 2019-04-24 09-29-09.png
similarity index 100%
rename from hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/Screenshot from 2019-04-24 09-29-09.png
rename to content/lessons/cloud-functions-scheduled-time-trigger/img/Screenshot from 2019-04-24 09-29-09.png
diff --git a/hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/background-job-index.png b/content/lessons/cloud-functions-scheduled-time-trigger/img/background-job-index.png
similarity index 100%
rename from hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/background-job-index.png
rename to content/lessons/cloud-functions-scheduled-time-trigger/img/background-job-index.png
diff --git a/hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/featured.jpg b/content/lessons/cloud-functions-scheduled-time-trigger/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/featured.jpg
rename to content/lessons/cloud-functions-scheduled-time-trigger/img/featured.jpg
diff --git a/hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/featured.png b/content/lessons/cloud-functions-scheduled-time-trigger/img/featured.png
similarity index 100%
rename from hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/featured.png
rename to content/lessons/cloud-functions-scheduled-time-trigger/img/featured.png
diff --git a/hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/featured.webp b/content/lessons/cloud-functions-scheduled-time-trigger/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/featured.webp
rename to content/lessons/cloud-functions-scheduled-time-trigger/img/featured.webp
diff --git a/hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/task-queue-data-model.png b/content/lessons/cloud-functions-scheduled-time-trigger/img/task-queue-data-model.png
similarity index 100%
rename from hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/task-queue-data-model.png
rename to content/lessons/cloud-functions-scheduled-time-trigger/img/task-queue-data-model.png
diff --git a/hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/task-queue-firebase.png b/content/lessons/cloud-functions-scheduled-time-trigger/img/task-queue-firebase.png
similarity index 100%
rename from hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/task-queue-firebase.png
rename to content/lessons/cloud-functions-scheduled-time-trigger/img/task-queue-firebase.png
diff --git a/content/lessons/cloud-functions-scheduled-time-trigger/index.md b/content/lessons/cloud-functions-scheduled-time-trigger/index.md
new file mode 100644
index 000000000..3c0946c1b
--- /dev/null
+++ b/content/lessons/cloud-functions-scheduled-time-trigger/index.md
@@ -0,0 +1,181 @@
+---
+title: Dynamic Scheduled Background Jobs in Firebase
+lastmod: 2019-04-20T07:44:49-07:00
+publishdate: 2019-04-20T07:44:49-07:00
+author: Jeff Delaney
+draft: false
+description: Trigger Cloud Functions based on cron time intervals and create a task queue for dynamically scheduled jobs.
+tags:
+ - cloud-functions
+ - pubsub
+ - firebase
+
+youtube: h79xrJZAQ6I
+github: https://github.com/fireship-io/181-cloud-functions-task-queue
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+versions:
+ firebase-functions: 2.3.0
+ firebase-tools: 6.7.0
+---
+
+Last week, Firebase announced a new scheduled [cron trigger for Cloud Functions](https://firebase.googleblog.com/2019/04/schedule-cloud-functions-firebase-cron.html) that makes it easy to run serverless code on a set time interval. This function type is special because it combines the powers of [Cloud Scheduler](https://cloud.google.com/scheduler/) and [Pub/Sub](https://cloud.google.com/pubsub/docs/overview) to guarantee security that you don't have with a regular HTTP-triggered function.
+
+
+Scheduling a function on a static time interval is straight forward, but what if you want to build a dynamic task queue where users can schedule their own background jobs? For example, you might want to...
+
+- allow users to customize times for transactional email delivery
+- schedule push notifications or similar alerts dynamically
+- enqueue background jobs to run at specific times
+- build robocallers 🤣 - please don't
+
+## Basic Scheduled Function
+
+Let's start by looking at an example of a basic cron-scheduled Cloud Function.
+
+Make sure you have the latest version of [firebase-tools](https://firebase.google.com/docs/cli/) (or at least version 6.7) installed on your system, then initialize a new project.
+
+Learn more about [cron schedules](/snippets/crontab-crash-course).
+
+{{< file "terminal" "command line" >}}
+```text
+npm i firebase-tools@latest -g
+
+firebase init functions
+```
+
+A basic scheduled Cloud Function can be defined on the `pubsub` namespace.
+
+{{< file "ts" "index.ts" >}}
+```typescript
+export const dailyJob = functions.pubsub
+
+ .schedule('30 5 * * *').onRun(context => {
+ console.log('This will be run every day at 5:30AM');
+ });
+
+export const everyFiveMinuteJob = functions.pubsub
+
+ .schedule('every 5 minutes').onRun(context => {
+ console.log('This will be run every 5 minutes!');
+ });
+```
+
+## Dynamic Task Queue
+
+Our task queue or job queue is simply a Firestore collection that will be queried by a Pub/Sub Cloud Function every 60 seconds. If the current time is greater than the *performAt* time of a task, then we execute it.
+
+{{< figure src="img/task-queue-firebase.png" caption="The task queue query expired tasks on each tick, then execute the business logic associated with the task worker field" >}}
+
+
+### Step 1: Data Model for Background Jobs
+
+A *task* is a generic document that tells the Cloud Function how to run the backgorund code.
+
+- `performAt` when to execute the task as a Firestore timestamp.
+- `status` the state of the tasks, useful for debugging and/or querying.
+- `worker` the name of worker function, which contains the business logic to execute. See step 3.
+- `options` a map containing extra data for the worker function, like a userID argument for example.
+
+
+```
+tasks/{taskID}/
+
+ performAt: TimeStamp
+ status: 'scheduled' | 'complete' | 'error'
+ worker: string
+ options: Map
+```
+
+{{< figure src="img/task-queue-data-model.png" caption="Tasks represent a simple data model for calling JS functions and passing data to our backend code" >}}
+
+
+### Step 2: Task Runner Cloud Function
+
+
+#### Pro Tips
+
+This function will be invoked approx 45,000 times per month, but it can complete multiple tasks per run. Firebase provides 125K free invocations per month.
+
+Max out the memory and timeout settings for your function. This will ensure the task runner can handle large batches of jobs in a single run.
+
+
+Next, we need to define a Pub/Sub Cloud Function that queries the task collection every 60s (or whatever granularity you want) for tasks that are ready to perform.
+
+{{< file "ts" "functions/src/index.ts" >}}
+```typescript
+import * as functions from 'firebase-functions';
+import * as admin from 'firebase-admin';
+admin.initializeApp();
+const db = admin.firestore();
+
+export const taskRunner = functions.runWith( { memory: '2GB' }).pubsub
+
+ .schedule('* * * * *').onRun(async context => {
+
+ // Consistent timestamp
+ const now = admin.firestore.Timestamp.now();
+
+ // Query all documents ready to perform
+ const query = db.collection('tasks').where('performAt', '<=', now).where('status', '==', 'scheduled');
+
+ const tasks = await query.get();
+
+
+ // Jobs to execute concurrently.
+ const jobs: Promise[] = [];
+
+ // Loop over documents and push job.
+ tasks.forEach(snapshot => {
+ const { worker, options } = snapshot.data();
+
+ const job = workers[worker](options)
+
+ // Update doc with status on success or error
+ .then(() => snapshot.ref.update({ status: 'complete' }))
+ .catch((err) => snapshot.ref.update({ status: 'error' }));
+
+ jobs.push(job);
+ });
+
+ // Execute all jobs concurrently
+ return await Promise.all(jobs);
+
+});
+```
+
+
+Keep in mind, this is a compound query that will require a Firestore index.
+
+{{< figure src="img/background-job-index.png" caption="The query requires an index with status Ascending and performAt Ascending" >}}
+
+
+
+### Step 3: Define Worker Functions to Run Jobs
+
+Now that we have a working function in place, we can define the business logic (worker functions) that execute a task.
+
+{{< file "ts" "functions/src/index.ts" >}}
+```typescript
+// Optional interface, all worker functions should return Promise.
+interface Workers {
+ [key: string]: (options: any) => Promise
+}
+
+// Business logic for named tasks. Function name should match worker field on task document.
+const workers: Workers = {
+ helloWorld: () => db.collection('logs').add({ hello: 'world' }),
+}
+```
+
+
+Run `firebase deploy --only functions`.
+
+After the function is deployed we just need to create a task document in Firestore that points the `helloWorld` worker. Within 1 minute you should see the task document update to *complete*
+
+
+
diff --git a/hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/.gitkeep b/content/lessons/code-this-not-that-python-edition/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/cloud-functions-scheduled-time-trigger/img/.gitkeep
rename to content/lessons/code-this-not-that-python-edition/img/.gitkeep
diff --git a/hugo/content/lessons/code-this-not-that-python-edition/img/featured.jpg b/content/lessons/code-this-not-that-python-edition/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/code-this-not-that-python-edition/img/featured.jpg
rename to content/lessons/code-this-not-that-python-edition/img/featured.jpg
diff --git a/hugo/content/lessons/code-this-not-that-python-edition/img/featured.png b/content/lessons/code-this-not-that-python-edition/img/featured.png
similarity index 100%
rename from hugo/content/lessons/code-this-not-that-python-edition/img/featured.png
rename to content/lessons/code-this-not-that-python-edition/img/featured.png
diff --git a/hugo/content/lessons/code-this-not-that-python-edition/img/featured.webp b/content/lessons/code-this-not-that-python-edition/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/code-this-not-that-python-edition/img/featured.webp
rename to content/lessons/code-this-not-that-python-edition/img/featured.webp
diff --git a/content/lessons/code-this-not-that-python-edition/index.md b/content/lessons/code-this-not-that-python-edition/index.md
new file mode 100644
index 000000000..277e95a36
--- /dev/null
+++ b/content/lessons/code-this-not-that-python-edition/index.md
@@ -0,0 +1,267 @@
+---
+title: "Code This, Not That - Python Edition"
+lastmod: 2022-02-20T15:31:36+01:00
+publishdate: 2022-02-20T15:31:36+01:00
+author: Alex Guja
+draft: false
+description: 10 Tips to make your code more Pythonic.
+tags:
+ - python
+youtube: x7X9w_GIm1s
+github: https://github.com/fireship-io/code-this-not-that-python-edition/tree/main/src
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+## Introduction
+
+_Python_ is one of the most popular languages in the world. It has many practical applications including web development, desktop apps, IoT, data analysis, and machine learning. This lesson contains ten tips that will make your code more pythonic.
+
+To make life simpler, we’ll use the following key to denote a few categories
+
+- 💩 - code that you should avoid.
+- 🤔 - code that is generally ok, but ignores built-in language features.
+- 🐍 - code that is considered pythonic.
+- 💡 - bonus tips.
+
+## Null checks
+
+A common scenario is checking that a variable isn't empty (or null) before use. In Python, _null_ is denoted by the keyword None. The two code snippets below produce identical results. However, Python supports a simplified null check using the if keyword followed by the name of a variable.
+
+💡 _Bonus Tip_: Use f-strings for string formatting. Initiate an f-string by typing an _f_ immediately before a regular string (f"..."), and place variables inside curly braces. Python will format the result into a string containing the variables.
+
+{{< file "python" "null_checks.py" >}}
+```python
+# Null check: OK version 🤔 - Explicit "if x is not None" ❌
+n = 42
+if n is not None:
+ print(f"n exists and is equal to {n}")
+
+# Pythonic version 🐍: Use simplified if ✅
+if n:
+ print(f"n exists and is equal to {n}")
+```
+
+
+## Included values
+In this section, we need to check if a list (L) contains the value of a particular variable (x).
+One way to do this is by using a for loop to iterate over all elements and check for equality. Python provides a nice shortcut, using the in keyword.
+
+{{< file "python" "contains.py" >}}
+```python
+# Check if a value is contained in a list
+L = ["JavaScript", "Python", "Ruby", "PHP", "Rust"]
+x = "Rust"
+
+# OK version 🤔 - For loop and a equality check ❌
+for i in range(len(L)):
+ if x == L[i]:
+ print(f"{x} is contained in the list")
+
+# Pythonic version 🐍: Use "if x in L" ✅
+if x in L:
+ print(f"{x} is contained in the list")
+```
+
+
+## List Comprehensions
+A common data processing pattern is to define an empty list and append values to it.
+For example, let's assume we want to generate a list of square numbers in a certain range.
+One way to do this is to define a list, and use a for loop to iterate over a range of values and append each value to the list.
+
+Python provides a neat one-liner for this purpose, called a "list comprehension". To write a list comprehension, start with the expression you would normally pass to the append method. From there, write the for loop condition immediately after the initial expression. Lastly, put everything inside a pair of square brackets. Comprehensions can be used with dictionaries, sets, and generators, however, try to avoid them with complex expressions. Readability is key.
+
+{{< file "python" "list_comprehension.py" >}}
+```python
+# OK version 🤔 - For loop and append ❌
+squares = []
+for num in range(12):
+ squares.append(num ** 2)
+
+# Pythonic version 🐍: Use a list comprehension ✅
+squares = [num ** 2 for num in range(12)]
+
+# Bonus Tip 💡: You can also use dictionary, set, and generator comprehensions
+squares_dict = {num: num ** 2 for num in range(12)} # dictionary
+squares_set = {num ** 2 for num in range(12)} # set
+squares_gen = (num ** 2 for num in range(12)) # generator
+
+```
+
+
+## Using Any/All
+
+Speaking of one-liners, Python provides some built-in functions that can check conditions that apply to at least _one_ element, or _all_ elements in an iterable. To illustrate this, let's consider a simple example. Imagine we're interested to know if a list contains negative numbers. A naive way to check this is to use a combination of a for loop and a flag. A better way is to use the any function.
+
+
+{{< file "python" "any.py" >}}
+```python
+# Checking for negative values in a list
+nums = [1, 2, 3, 4, 5, -42, 6, 7, 8]
+
+# Inefficinet way 🤔 - Using a for loop and a flag ❌
+contains_neg = False # flag
+for num in nums:
+ if num < 0:
+ contains_neg = True
+
+
+# Pythonic way 🐍 - Using the built-in "any" function ✅
+contains_neg = any(num < 0 for num in nums) # True
+
+# Bonus Tip 💡: Python also has a built-in "all" function ✅
+contains_neg = not all(num >= 0 for num in nums) # True
+
+```
+
+ - any - Returns True if a condition applies to any element of the iterable. If the iterable is empty, returns False.
+ - all - Returns True if a condition applies to all elements of the iterable (or if the iterable is empty).
+
+## Iterations
+
+Python provides a nice syntax for iteration that many users tend to ignore. For example, when iterating over the values in a list, a common pattern is to use a for loop and an index. If we're only interested in the values, a neater way is to use a for loop and iterate _directly_ over the list elements. If we need to keep an index, a neater way is to use enumerate.
+
+{{< file "python" "iterations.py" >}}
+```python
+# Iterating over a single list
+L = ["a", "b", "c", "d"]
+
+# OK version 🤔 - Index in range ❌
+for i in range(len(L)):
+ val = L[i]
+ print(i, val)
+
+# Pythonic version 🐍: Access elements directly ✅
+for el in L:
+ print(el)
+
+# Pythonic version 🐍: Use enumerate if you need the index, value pair ✅
+for i, val in enumerate(L):
+ print(i, val)
+```
+
+💡 _Bonus Tip_: These ideas also apply when iterating over multiple lists. We can iterate directly over values in two collections
+using zip. If an index is required, we can use a combination of enumerate and zip.
+
+{{< file "python" "iterations.py" >}}
+```python
+# Bonus Tip 💡: Iterating over multiple lists
+A = ["a", "b", "c", "d"]
+B = ["e", "f", "g", "h"]
+
+# OK version 🤔 - Index in range ❌
+for i in range(len(A)):
+ va, vb = A[i], B[i]
+ print(i, va, vb)
+
+# Pythonic version 🐍: Use zip to get the values ✅
+for va, vb in zip(A, B):
+ print(va, vb)
+
+# Pythonic version 🐍: Use a combination of zip and enumerate to get the index and the values ✅
+for i, (va, vb) in enumerate(zip(A, B)):
+ print(i, va, vb)
+```
+
+## Tuple Unpacking
+Another useful thing to know is how to unpack values directly from a tuple. One way is to access each element using indices.
+A more efficient way is to unpack the elements directly.
+
+{{< file "python" "existence.py" >}}
+```python
+# Tuple unpacking
+some_tuple = (1, 2, 3)
+
+# OK version 🤔 - Unpack elements by index ❌
+x = some_tuple[0]
+y = some_tuple[1]
+z = some_tuple[2]
+
+
+# Pythonic way 🐍 - Unpack elements directly ✅
+x, y, z = some_tuple
+```
+
+## Ternary Operators
+Python uses if/elif/else blocks for control flow. For example, consider the need to decide on the sign of a variable based on its value. The naive way is to use an if/else block to make the decision. A neater way to simplify this is by using a ternary operator.
+
+{{< file "python" "ternary_operator.py" >}}
+```python
+# Assign a value based on a condition
+a = 42
+
+# OK version 🤔 - if/else blocks ❌
+if a > 0:
+ sign = "positive"
+else:
+ sign = "negative"
+
+# Pythonic way 🐍 - Use a ternary operator ✅
+sign = "positive" if (a > 0) else "negative" # parentheses are optional
+```
+
+## Generators
+[_Generators_](https://docs.python.org/3/howto/functional.html#generators) are a powerful tool to save memory and improve performance. In general, they _yield_ one value at a time and can be iterated over multiple times. Let's imagine we're interested in the sum of the first 42 000 natural numbers. We could use a list comprehension to compute the values and call the built-in sum function. Building a list requires 351064 bytes. Using a generator reduces this value to 112 bytes. That's pretty awesome 🔥.
+
+{{< file "python" "generators.py" >}}
+```python
+from sys import getsizeof
+
+# Inefficent way 💩: Using a list ❌
+L = [n for n in range(42_000)]
+sum(L) # 881979000
+getsizeof(L) # 351064 bytes
+
+# Efficient way 🔥: Use a generator ✅
+G = (n for n in range(42_000))
+sum(G) # 881979000 bytes
+getsizeof(G) # 112 bytes
+```
+
+## Mutable Default Arguments
+Python supports default values for function parameters. If a value for a parameter isn't passed during a function call, the specified default value is used. There is a danger associated with this if the default value is of a mutable type. For example, consider specifying an empty list as a default value. If the list is modified, the default value is modified _as well_. In most cases, this is not intended. To avoid it, we can set the default value to None. If no value is passed during the function call, we can ensure an empty list is created.
+
+{{< file "python" "mutable_default_args.py" >}}
+```python
+# Mutable default arguments 💩: Wrong way ❌
+def append_element(elem, L=[]):
+ L.append(elem)
+ return L
+
+L1 = append_element(21) # [21]
+L2 = append_element(42) # [21, 42] - Oops..
+
+
+# Correct way 🔥: Use None ✅
+def better_append(elem, L=None):
+ if L is None:
+ L = []
+ L.append(elem)
+ return L
+
+L1 = better_append(21) # [21]
+L2 = better_append(42) # [42]
+
+```
+
+## Context Managers
+The last tip is to use a context manager to ensure that a resource is properly closed. Let's consider a simple example of writing to a text file.
+In this case, the simple code will run just fine, however, if more complex logic is involved and an exception is raised during the write, the file won't be closed. Another common scenario is simply to forget to close the file. Using a context manager ensures the file will always be closed, regardless of any exception.
+
+{{< file "python" "context_managers.py" >}}
+```python
+# Managing files - using open and f.close() ❌
+f = open("file.txt", "w")
+f.write("Hi mom!")
+f.close()
+
+# Pythonic way 🐍 - Use a context manager ✅
+with open("file.txt", "w") as f:
+ f.write("Hi mom!")
+```
\ No newline at end of file
diff --git a/hugo/content/lessons/code-this-not-that-python-edition/img/.gitkeep b/content/lessons/collection-group-query-firestore/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/code-this-not-that-python-edition/img/.gitkeep
rename to content/lessons/collection-group-query-firestore/img/.gitkeep
diff --git a/hugo/content/lessons/collection-group-query-firestore/img/collection-group-index.png b/content/lessons/collection-group-query-firestore/img/collection-group-index.png
similarity index 100%
rename from hugo/content/lessons/collection-group-query-firestore/img/collection-group-index.png
rename to content/lessons/collection-group-query-firestore/img/collection-group-index.png
diff --git a/hugo/content/lessons/collection-group-query-firestore/img/featured.jpg b/content/lessons/collection-group-query-firestore/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/collection-group-query-firestore/img/featured.jpg
rename to content/lessons/collection-group-query-firestore/img/featured.jpg
diff --git a/hugo/content/lessons/collection-group-query-firestore/img/featured.png b/content/lessons/collection-group-query-firestore/img/featured.png
similarity index 100%
rename from hugo/content/lessons/collection-group-query-firestore/img/featured.png
rename to content/lessons/collection-group-query-firestore/img/featured.png
diff --git a/hugo/content/lessons/collection-group-query-firestore/img/featured.webp b/content/lessons/collection-group-query-firestore/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/collection-group-query-firestore/img/featured.webp
rename to content/lessons/collection-group-query-firestore/img/featured.webp
diff --git a/hugo/content/lessons/collection-group-query-firestore/img/firestore-col-group-error.png b/content/lessons/collection-group-query-firestore/img/firestore-col-group-error.png
similarity index 100%
rename from hugo/content/lessons/collection-group-query-firestore/img/firestore-col-group-error.png
rename to content/lessons/collection-group-query-firestore/img/firestore-col-group-error.png
diff --git a/hugo/content/lessons/collection-group-query-firestore/img/firestore-permission-error.png b/content/lessons/collection-group-query-firestore/img/firestore-permission-error.png
similarity index 100%
rename from hugo/content/lessons/collection-group-query-firestore/img/firestore-permission-error.png
rename to content/lessons/collection-group-query-firestore/img/firestore-permission-error.png
diff --git a/content/lessons/collection-group-query-firestore/index.md b/content/lessons/collection-group-query-firestore/index.md
new file mode 100644
index 000000000..ecda31564
--- /dev/null
+++ b/content/lessons/collection-group-query-firestore/index.md
@@ -0,0 +1,91 @@
+---
+title: Collection Group Query with Firestore
+lastmod: 2019-05-20T08:43:13-07:00
+publishdate: 2019-05-20T08:43:13-07:00
+author: Jeff Delaney
+draft: false
+description: Query across multiple Firestore subcollections for hierarchical data structures, like threaded comments.
+tags:
+ - firebase
+ - firestore
+ - javascript
+
+youtube: fQ4u1J717ys
+github: https://github.com/fireship-io/186-collection-group-queries-demo
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+At Google I/O 2019, Firebase launched a new query type, [Collection Group Queries](https://firebase.google.com/docs/firestore/query-data/queries#collection-group-query), which can have a major impact on your data modeling decisions. It allows you to combine all subcollections that share the same name, then query them together. Prior to this feature release, it was common to model one-to-many relationships with root collections that contained a field (or foreign key if you will) pointing to the parent document. Root collections are still fine, but this new feature makes it far more practical to organize your data in a natural hierarchy.
+
+In the following lesson, we will look at the basic concepts of Collection Group Queries. Check out the full source code for a more complex [threaded comments](https://github.com/fireship-io/186-collection-group-queries-demo) feature in Angular.
+
+
+If you have complex data requirements for Firestore, consider enrolling in the full [Firestore Data Modeling](/courses/firestore-data-modeling/) course.
+
+
+
+## Collection Group Query
+
+Collection Group Queries are just like regular collection queries, with a few minor caveats to consider.Make sure your project is running Firebase JS version 6.0 or later.
+
+### Basic Query
+
+Let's imagine you have a database where users can comment on posts *and* reply to comments, leading to a nested structure that looks like this:
+
+`posts/{postID}/comments/{commentID}/comments/{commentID}/comments/{commentID}...`
+
+A *Collection Group Query* allows you to join all the collections that share a similar name, in this case `comments`, and query across them uniformly.
+
+{{< file "js" "app.js" >}}
+```js
+import * as firebase from 'firebase/app';
+const db = firebase.firestore();
+
+
+const query = db.collectionGroup('comments')
+ .where('user', '==', 'jeffd23')
+ .orderBy('createdAt');
+```
+
+### Rules
+
+{{< figure src="img/firestore-permission-error.png" caption="Firebase Rules Error" >}}
+
+If you have rules enforced in your database, you will need to allow access to the grouped subcollection. You can do this using rules version 2, along with the `path=**` syntax.
+
+{{< file "firebase" "rules.json" >}}
+```js
+rules_version = '2';
+
+service cloud.firestore {
+ match /databases/{database}/documents {
+ match /{document=**} {
+ allow read, write: if false;
+ }
+
+
+ // Allow access to all comments subcollections
+
+ match /{path=**}/comments/{id} {
+ allow read, write;
+ }
+
+ }
+}
+```
+
+
+### Index
+
+Collection Group Queries require an index when ordering or filtering by a specific property. If you need an index, you should see an error that looks like this:
+
+{{< figure src="img/firestore-col-group-error.png" caption="If you see a Firestore index error, just click the link in the error to fix it" >}}
+
+{{< figure src="img/collection-group-index.png" caption="It should result in an exemption that looks similar to this" >}}
diff --git a/hugo/content/lessons/collection-group-query-firestore/img/.gitkeep b/content/lessons/crypto-payments-web-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/collection-group-query-firestore/img/.gitkeep
rename to content/lessons/crypto-payments-web-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/crypto-payments-web-firebase/img/coinbase-api-keys.png b/content/lessons/crypto-payments-web-firebase/img/coinbase-api-keys.png
similarity index 100%
rename from hugo/content/lessons/crypto-payments-web-firebase/img/coinbase-api-keys.png
rename to content/lessons/crypto-payments-web-firebase/img/coinbase-api-keys.png
diff --git a/hugo/content/lessons/crypto-payments-web-firebase/img/coinbase-payment-flow.png b/content/lessons/crypto-payments-web-firebase/img/coinbase-payment-flow.png
similarity index 100%
rename from hugo/content/lessons/crypto-payments-web-firebase/img/coinbase-payment-flow.png
rename to content/lessons/crypto-payments-web-firebase/img/coinbase-payment-flow.png
diff --git a/hugo/content/lessons/crypto-payments-web-firebase/img/featured.jpg b/content/lessons/crypto-payments-web-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/crypto-payments-web-firebase/img/featured.jpg
rename to content/lessons/crypto-payments-web-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/crypto-payments-web-firebase/img/featured.png b/content/lessons/crypto-payments-web-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/crypto-payments-web-firebase/img/featured.png
rename to content/lessons/crypto-payments-web-firebase/img/featured.png
diff --git a/hugo/content/lessons/crypto-payments-web-firebase/img/featured.webp b/content/lessons/crypto-payments-web-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/crypto-payments-web-firebase/img/featured.webp
rename to content/lessons/crypto-payments-web-firebase/img/featured.webp
diff --git a/hugo/content/lessons/crypto-payments-web-firebase/index.md b/content/lessons/crypto-payments-web-firebase/index.md
similarity index 100%
rename from hugo/content/lessons/crypto-payments-web-firebase/index.md
rename to content/lessons/crypto-payments-web-firebase/index.md
diff --git a/hugo/content/lessons/crypto-payments-web-firebase/img/.gitkeep b/content/lessons/css-cards-animated/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/crypto-payments-web-firebase/img/.gitkeep
rename to content/lessons/css-cards-animated/img/.gitkeep
diff --git a/hugo/content/lessons/css-cards-animated/img/cards-clone.png b/content/lessons/css-cards-animated/img/cards-clone.png
similarity index 100%
rename from hugo/content/lessons/css-cards-animated/img/cards-clone.png
rename to content/lessons/css-cards-animated/img/cards-clone.png
diff --git a/hugo/content/lessons/css-cards-animated/img/cards-original.png b/content/lessons/css-cards-animated/img/cards-original.png
similarity index 100%
rename from hugo/content/lessons/css-cards-animated/img/cards-original.png
rename to content/lessons/css-cards-animated/img/cards-original.png
diff --git a/hugo/content/lessons/css-cards-animated/img/featured.jpg b/content/lessons/css-cards-animated/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/css-cards-animated/img/featured.jpg
rename to content/lessons/css-cards-animated/img/featured.jpg
diff --git a/hugo/content/lessons/css-cards-animated/img/featured.png b/content/lessons/css-cards-animated/img/featured.png
similarity index 100%
rename from hugo/content/lessons/css-cards-animated/img/featured.png
rename to content/lessons/css-cards-animated/img/featured.png
diff --git a/hugo/content/lessons/css-cards-animated/img/featured.webp b/content/lessons/css-cards-animated/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/css-cards-animated/img/featured.webp
rename to content/lessons/css-cards-animated/img/featured.webp
diff --git a/hugo/content/lessons/css-cards-animated/index.md b/content/lessons/css-cards-animated/index.md
similarity index 100%
rename from hugo/content/lessons/css-cards-animated/index.md
rename to content/lessons/css-cards-animated/index.md
diff --git a/hugo/content/lessons/css-cards-animated/img/.gitkeep b/content/lessons/css-responsive-icon-navbar/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/css-cards-animated/img/.gitkeep
rename to content/lessons/css-responsive-icon-navbar/img/.gitkeep
diff --git a/hugo/content/lessons/css-responsive-icon-navbar/img/featured.jpg b/content/lessons/css-responsive-icon-navbar/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/css-responsive-icon-navbar/img/featured.jpg
rename to content/lessons/css-responsive-icon-navbar/img/featured.jpg
diff --git a/hugo/content/lessons/css-responsive-icon-navbar/img/featured.png b/content/lessons/css-responsive-icon-navbar/img/featured.png
similarity index 100%
rename from hugo/content/lessons/css-responsive-icon-navbar/img/featured.png
rename to content/lessons/css-responsive-icon-navbar/img/featured.png
diff --git a/hugo/content/lessons/css-responsive-icon-navbar/img/featured.webp b/content/lessons/css-responsive-icon-navbar/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/css-responsive-icon-navbar/img/featured.webp
rename to content/lessons/css-responsive-icon-navbar/img/featured.webp
diff --git a/hugo/content/lessons/css-responsive-icon-navbar/index.md b/content/lessons/css-responsive-icon-navbar/index.md
similarity index 100%
rename from hugo/content/lessons/css-responsive-icon-navbar/index.md
rename to content/lessons/css-responsive-icon-navbar/index.md
diff --git a/hugo/content/lessons/css-responsive-icon-navbar/img/.gitkeep b/content/lessons/css-variables-in-ionic-4/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/css-responsive-icon-navbar/img/.gitkeep
rename to content/lessons/css-variables-in-ionic-4/img/.gitkeep
diff --git a/hugo/content/lessons/css-variables-in-ionic-4/img/featured.jpg b/content/lessons/css-variables-in-ionic-4/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/css-variables-in-ionic-4/img/featured.jpg
rename to content/lessons/css-variables-in-ionic-4/img/featured.jpg
diff --git a/hugo/content/lessons/css-variables-in-ionic-4/img/featured.png b/content/lessons/css-variables-in-ionic-4/img/featured.png
similarity index 100%
rename from hugo/content/lessons/css-variables-in-ionic-4/img/featured.png
rename to content/lessons/css-variables-in-ionic-4/img/featured.png
diff --git a/hugo/content/lessons/css-variables-in-ionic-4/img/featured.webp b/content/lessons/css-variables-in-ionic-4/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/css-variables-in-ionic-4/img/featured.webp
rename to content/lessons/css-variables-in-ionic-4/img/featured.webp
diff --git a/hugo/content/lessons/css-variables-in-ionic-4/img/ionic-color-generator.png b/content/lessons/css-variables-in-ionic-4/img/ionic-color-generator.png
similarity index 100%
rename from hugo/content/lessons/css-variables-in-ionic-4/img/ionic-color-generator.png
rename to content/lessons/css-variables-in-ionic-4/img/ionic-color-generator.png
diff --git a/hugo/content/lessons/css-variables-in-ionic-4/img/ionic-css-variables-demo.gif b/content/lessons/css-variables-in-ionic-4/img/ionic-css-variables-demo.gif
similarity index 100%
rename from hugo/content/lessons/css-variables-in-ionic-4/img/ionic-css-variables-demo.gif
rename to content/lessons/css-variables-in-ionic-4/img/ionic-css-variables-demo.gif
diff --git a/hugo/content/lessons/css-variables-in-ionic-4/index.md b/content/lessons/css-variables-in-ionic-4/index.md
similarity index 100%
rename from hugo/content/lessons/css-variables-in-ionic-4/index.md
rename to content/lessons/css-variables-in-ionic-4/index.md
diff --git a/hugo/content/lessons/css-variables-in-ionic-4/img/.gitkeep b/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/css-variables-in-ionic-4/img/.gitkeep
rename to content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/.gitkeep
diff --git a/hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/csv-fcf-angular.png b/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/csv-fcf-angular.png
similarity index 100%
rename from hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/csv-fcf-angular.png
rename to content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/csv-fcf-angular.png
diff --git a/hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/csv-firebase-cloud-functions-demp.gif b/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/csv-firebase-cloud-functions-demp.gif
similarity index 100%
rename from hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/csv-firebase-cloud-functions-demp.gif
rename to content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/csv-firebase-cloud-functions-demp.gif
diff --git a/hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/featured.jpg b/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/featured.jpg
rename to content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/featured.jpg
diff --git a/hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/featured.png b/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/featured.png
similarity index 100%
rename from hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/featured.png
rename to content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/featured.png
diff --git a/hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/featured.webp b/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/featured.webp
rename to content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/featured.webp
diff --git a/hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/index.md b/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/index.md
similarity index 100%
rename from hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/index.md
rename to content/lessons/csv-exports-from-firestore-database-with-cloud-functions/index.md
diff --git a/hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/.gitkeep b/content/lessons/custom-rxjs-operators-by-example/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/csv-exports-from-firestore-database-with-cloud-functions/img/.gitkeep
rename to content/lessons/custom-rxjs-operators-by-example/img/.gitkeep
diff --git a/hugo/content/lessons/custom-rxjs-operators-by-example/img/featured.jpg b/content/lessons/custom-rxjs-operators-by-example/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/custom-rxjs-operators-by-example/img/featured.jpg
rename to content/lessons/custom-rxjs-operators-by-example/img/featured.jpg
diff --git a/hugo/content/lessons/custom-rxjs-operators-by-example/img/featured.png b/content/lessons/custom-rxjs-operators-by-example/img/featured.png
similarity index 100%
rename from hugo/content/lessons/custom-rxjs-operators-by-example/img/featured.png
rename to content/lessons/custom-rxjs-operators-by-example/img/featured.png
diff --git a/hugo/content/lessons/custom-rxjs-operators-by-example/img/featured.webp b/content/lessons/custom-rxjs-operators-by-example/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/custom-rxjs-operators-by-example/img/featured.webp
rename to content/lessons/custom-rxjs-operators-by-example/img/featured.webp
diff --git a/hugo/content/lessons/custom-rxjs-operators-by-example/index.md b/content/lessons/custom-rxjs-operators-by-example/index.md
similarity index 100%
rename from hugo/content/lessons/custom-rxjs-operators-by-example/index.md
rename to content/lessons/custom-rxjs-operators-by-example/index.md
diff --git a/hugo/content/lessons/custom-rxjs-operators-by-example/img/.gitkeep b/content/lessons/custom-usernames-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/custom-rxjs-operators-by-example/img/.gitkeep
rename to content/lessons/custom-usernames-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/custom-usernames-firebase/img/featured.jpg b/content/lessons/custom-usernames-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/custom-usernames-firebase/img/featured.jpg
rename to content/lessons/custom-usernames-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/custom-usernames-firebase/img/featured.png b/content/lessons/custom-usernames-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/custom-usernames-firebase/img/featured.png
rename to content/lessons/custom-usernames-firebase/img/featured.png
diff --git a/hugo/content/lessons/custom-usernames-firebase/img/featured.webp b/content/lessons/custom-usernames-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/custom-usernames-firebase/img/featured.webp
rename to content/lessons/custom-usernames-firebase/img/featured.webp
diff --git a/hugo/content/lessons/custom-usernames-firebase/img/user-doc.png b/content/lessons/custom-usernames-firebase/img/user-doc.png
similarity index 100%
rename from hugo/content/lessons/custom-usernames-firebase/img/user-doc.png
rename to content/lessons/custom-usernames-firebase/img/user-doc.png
diff --git a/hugo/content/lessons/custom-usernames-firebase/img/username-demo.gif b/content/lessons/custom-usernames-firebase/img/username-demo.gif
similarity index 100%
rename from hugo/content/lessons/custom-usernames-firebase/img/username-demo.gif
rename to content/lessons/custom-usernames-firebase/img/username-demo.gif
diff --git a/hugo/content/lessons/custom-usernames-firebase/img/username-doc.png b/content/lessons/custom-usernames-firebase/img/username-doc.png
similarity index 100%
rename from hugo/content/lessons/custom-usernames-firebase/img/username-doc.png
rename to content/lessons/custom-usernames-firebase/img/username-doc.png
diff --git a/hugo/content/lessons/custom-usernames-firebase/img/username-vs-displayname.png b/content/lessons/custom-usernames-firebase/img/username-vs-displayname.png
similarity index 100%
rename from hugo/content/lessons/custom-usernames-firebase/img/username-vs-displayname.png
rename to content/lessons/custom-usernames-firebase/img/username-vs-displayname.png
diff --git a/hugo/content/lessons/custom-usernames-firebase/index.md b/content/lessons/custom-usernames-firebase/index.md
similarity index 100%
rename from hugo/content/lessons/custom-usernames-firebase/index.md
rename to content/lessons/custom-usernames-firebase/index.md
diff --git a/hugo/content/lessons/custom-usernames-firebase/img/.gitkeep b/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/custom-usernames-firebase/img/.gitkeep
rename to content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/.gitkeep
diff --git a/hugo/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/featured.jpg b/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/featured.jpg
rename to content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/featured.jpg
diff --git a/hugo/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/featured.png b/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/featured.png
similarity index 100%
rename from hugo/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/featured.png
rename to content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/featured.png
diff --git a/hugo/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/featured.webp b/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/featured.webp
rename to content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/featured.webp
diff --git a/hugo/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/username.gif b/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/username.gif
similarity index 100%
rename from hugo/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/username.gif
rename to content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/username.gif
diff --git a/hugo/content/lessons/custom-usernames-with-firebase-authentication-and-angular/index.md b/content/lessons/custom-usernames-with-firebase-authentication-and-angular/index.md
similarity index 100%
rename from hugo/content/lessons/custom-usernames-with-firebase-authentication-and-angular/index.md
rename to content/lessons/custom-usernames-with-firebase-authentication-and-angular/index.md
diff --git a/hugo/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/.gitkeep b/content/lessons/deckgl-google-maps-tutorial/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/custom-usernames-with-firebase-authentication-and-angular/img/.gitkeep
rename to content/lessons/deckgl-google-maps-tutorial/img/.gitkeep
diff --git a/hugo/content/lessons/deckgl-google-maps-tutorial/img/deckgl-heat-layer.png b/content/lessons/deckgl-google-maps-tutorial/img/deckgl-heat-layer.png
similarity index 100%
rename from hugo/content/lessons/deckgl-google-maps-tutorial/img/deckgl-heat-layer.png
rename to content/lessons/deckgl-google-maps-tutorial/img/deckgl-heat-layer.png
diff --git a/hugo/content/lessons/deckgl-google-maps-tutorial/img/deckgl-hex-layer.png b/content/lessons/deckgl-google-maps-tutorial/img/deckgl-hex-layer.png
similarity index 100%
rename from hugo/content/lessons/deckgl-google-maps-tutorial/img/deckgl-hex-layer.png
rename to content/lessons/deckgl-google-maps-tutorial/img/deckgl-hex-layer.png
diff --git a/hugo/content/lessons/deckgl-google-maps-tutorial/img/deckgl-scatter-layer.png b/content/lessons/deckgl-google-maps-tutorial/img/deckgl-scatter-layer.png
similarity index 100%
rename from hugo/content/lessons/deckgl-google-maps-tutorial/img/deckgl-scatter-layer.png
rename to content/lessons/deckgl-google-maps-tutorial/img/deckgl-scatter-layer.png
diff --git a/hugo/content/lessons/deckgl-google-maps-tutorial/img/featured.jpg b/content/lessons/deckgl-google-maps-tutorial/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/deckgl-google-maps-tutorial/img/featured.jpg
rename to content/lessons/deckgl-google-maps-tutorial/img/featured.jpg
diff --git a/hugo/content/lessons/deckgl-google-maps-tutorial/img/featured.png b/content/lessons/deckgl-google-maps-tutorial/img/featured.png
similarity index 100%
rename from hugo/content/lessons/deckgl-google-maps-tutorial/img/featured.png
rename to content/lessons/deckgl-google-maps-tutorial/img/featured.png
diff --git a/hugo/content/lessons/deckgl-google-maps-tutorial/img/featured.webp b/content/lessons/deckgl-google-maps-tutorial/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/deckgl-google-maps-tutorial/img/featured.webp
rename to content/lessons/deckgl-google-maps-tutorial/img/featured.webp
diff --git a/hugo/content/lessons/deckgl-google-maps-tutorial/img/google-map-webpack.png b/content/lessons/deckgl-google-maps-tutorial/img/google-map-webpack.png
similarity index 100%
rename from hugo/content/lessons/deckgl-google-maps-tutorial/img/google-map-webpack.png
rename to content/lessons/deckgl-google-maps-tutorial/img/google-map-webpack.png
diff --git a/hugo/content/lessons/deckgl-google-maps-tutorial/img/webpack-deckgl-structure.png b/content/lessons/deckgl-google-maps-tutorial/img/webpack-deckgl-structure.png
similarity index 100%
rename from hugo/content/lessons/deckgl-google-maps-tutorial/img/webpack-deckgl-structure.png
rename to content/lessons/deckgl-google-maps-tutorial/img/webpack-deckgl-structure.png
diff --git a/content/lessons/deckgl-google-maps-tutorial/index.md b/content/lessons/deckgl-google-maps-tutorial/index.md
new file mode 100644
index 000000000..63cb074cd
--- /dev/null
+++ b/content/lessons/deckgl-google-maps-tutorial/index.md
@@ -0,0 +1,323 @@
+---
+title: Deck.gl Google Maps Tutorial
+lastmod: 2019-10-29T07:53:34-07:00
+publishdate: 2019-10-29T07:53:34-07:00
+author: Jeff Delaney
+draft: false
+description: Create high-performance WebGL-powered data visualizations on Google Maps with deck.gl
+tags:
+ - javascript
+ - deckgl
+ - google-maps
+
+youtube: e_5W-JF_E2U
+github: https://github.com/fireship-io/213-deckgl-google-maps
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+Have you ever tried to load thousands of datapoints into Google Maps? It probably didn't go very well from a performance standpoint. [Deck.gl](https://deck.gl) is a library that solves this problem by running expensive computations on the GPU with WebGL. This means you can run realtime 3D visualizations on datasets with millions of geographic points.
+
+In the following lesson, you will learn how to add high-performance data overlays to Google Maps based on a dataset of 140,000+ incidents of gun violence in the United States.
+
+
+- [Live Demo](https://us-gun-violence.web.app/)
+- [Deck.gl Docs](https://deck.gl/#/documentation/overview/introduction)
+- [Google Maps Docs](https://developers.google.com/maps/documentation/javascript/tutorial)
+
+## Initial Setup
+
+You can use Deck.gl with any framework, but this demo uses vanilla JavaScript with Webpack.
+
+### Enable Google Maps
+
+First, create a Google Cloud (or Firebase) project and obtain a browser API key for [Google Maps JS](https://developers.google.com/maps/documentation/javascript/get-api-key).
+
+{{< figure src="/img/snippets/google-maps-enable.png" caption="Enable the Google Maps JavaScript API from a GCP project. Copy the browser API key from the credentials page." >}}
+
+### Create a Webpack project
+
+Start a new project from an empty directory.
+
+{{< file "terminal" "command line" >}}
+```text
+npm init -y
+npm i -D webpack-dev-server webpack webpack-cli
+```
+
+Create files for `/public/index.html` and `/src/index.js`.
+
+{{< figure src="img/webpack-deckgl-structure.png" caption="Your project structure should look like this." >}}
+
+
+Now let's add a script to the package.json file to build and serve the app locally.
+
+{{< file "npm" "package.json" >}}
+```json
+ "scripts": {
+ "build": "webpack --output-path ./public",
+ "start": "webpack-dev-server --content-base ./public --output-path ./public --hot"
+ },
+```
+
+
+### Install Deck.gl
+
+Deck.gl is a monorepo with layers separated into multiple packages. Install them with the following command:
+
+{{< file "terminal" "command line" >}}
+```text
+npm i @deck.gl/{core,google-maps,layers,aggregation-layers}
+```
+
+### Initialize the Map
+
+Create an HTML file that imports the webpack'd script and Google Maps. Add an empty div for the map.
+
+{{< file "html" "public/index.html" >}}
+```html
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+When Google Maps is ready it will call the global `initMap` function.
+
+{{< file "js" "src/index.js" >}}
+```js
+window.initMap = () => {
+
+ const map = new google.maps.Map(document.getElementById('map'), {
+ center: {lat: 40.0, lng: -100.0},
+ zoom: 5,
+ });
+
+}
+```
+
+Run the start command and you should be up and running with hot module replacement on localhost:8080.
+
+{{< file "terminal" "command line" >}}
+```text
+npm start
+```
+
+{{< figure src="img/google-map-webpack.png" caption="Google Maps with Webpack HMR" >}}
+
+## Get Data
+
+### The Easy way
+
+Download the raw [gun violence JSON data](https://us-gun-violence.web.app/gundata.json) to `public/gundata.json`.
+
+### (Optional) The Developer Way... CSV to JSON
+
+Deck.gl expects and JSON array of objects. The format of the object does not matter, but should at least have properties that represent latitude (y) and longitude (x). Most datasets are in CSV format - here's a useful conversion script for Node.js if you're working with your own custom data.
+
+{{< file "terminal" "command line" >}}
+```text
+npm i -D convert-csv-to-json
+```
+
+Create a file called `convert.js` in the root of the project.
+
+{{< file "js" "convert.js" >}}
+```js
+const csvToJson = require('convert-csv-to-json');
+
+const input = './your-custom-data.csv';
+const output = './public/gundata.json';
+
+csvToJson.fieldDelimiter(',')
+ .formatValueByType()
+ .generateJsonFileFromCsv(input, output);
+```
+
+Run it:
+
+```text
+node convert.js
+```
+
+## Add Deck.gl Data Layers
+
+When you create a Deck.gl layer it takes a unique `id` that allows the library to efficiently make updates. Each layer provides a set of accessor properties like `getPosition` or `getColor` that call a function for each point in the dataset. In other words, it's like looping over the entire dataset to determine each point's position and color.
+
+### Scatterplot Layer
+
+A scatterplot is one of the most basic data visualization layers. It adds a circle for every point in the dataset.
+
+
+{{< figure src="img/deckgl-scatter-layer.png" caption="ScatterPlot layer with tooltips" >}}
+
+
+{{< file "js" "index.js" >}}
+```js
+import { GoogleMapsOverlay } from '@deck.gl/google-maps';
+import { HexagonLayer } from '@deck.gl/aggregation-layers';
+import { ScatterplotLayer } from '@deck.gl/layers';
+import { HeatmapLayer } from '@deck.gl/aggregation-layers';
+
+
+const sourceData = './gundata.json';
+
+const scatterplot = () => new ScatterplotLayer({
+ id: 'scatter',
+ data: sourceData,
+ opacity: 0.8,
+ filled: true,
+ radiusMinPixels: 2,
+ radiusMaxPixels: 5,
+ getPosition: d => [d.longitude, d.latitude],
+ getFillColor: d => d.n_killed > 0 ? [200, 0, 40, 150] : [255, 140, 0, 100],
+ });
+
+```
+
+### Add Tooltips
+
+Listen to events like `onHover` or `onClick` to update the UI in response to events.
+
+```js
+const scatterplot = () => new ScatterplotLayer({
+ // ... omitted
+
+ pickable: true,
+ onHover: ({object, x, y}) => {
+ const el = document.getElementById('tooltip');
+ if (object) {
+ const { n_killed, incident_id } = object;
+ el.innerHTML = `ID ${incident_id} `
+ el.style.display = 'block';
+ el.style.opacity = 0.9;
+ el.style.left = x + 'px';
+ el.style.top = y + 'px';
+ } else {
+ el.style.opacity = 0.0;
+ }
+ },
+
+ onClick: ({object, x, y}) => {
+ window.open(`https://www.gunviolencearchive.org/incident/${object.incident_id}`)
+ },
+
+ });
+
+```
+
+Include a tooltip div and CSS in the HTML file.
+
+{{< file "html" "index.html" >}}
+```html
+
+ #tooltip {
+ position: absolute;
+ background: white;
+ margin: 10px; padding: 10px;
+ }
+
+
+
+
+
+
+
+
+
+```
+
+
+### Heatmap Layer
+
+The heatmap layer will cluster points based on the map's zoom level. As the user zooms out, it will aggregate the points into shapes/colors based on visible points in the view.
+
+{{< figure src="img/deckgl-heat-layer.png" caption="Heatmap Layer" >}}
+
+Notice how `getWeight` is used to give incidents with more deaths and injuries a higher weight.
+
+```js
+const heatmap = () => new HeatmapLayer({
+ id: 'heat',
+ data: sourceData,
+ getPosition: d => [d.longitude, d.latitude],
+ getWeight: d => d.n_killed + (d.n_injured * 0.5),
+ radiusPixels: 60,
+});
+
+```
+
+### Hexagon Layer
+
+A hexagon layer aggregates points into a fixed radius. The elevation is then extruded on the z-axis based on the weight.
+
+{{< figure src="img/deckgl-hex-layer.png" caption="Hexagon Layer" >}}
+
+A hexagon layer is similar to a heatmap, but the weight is extruded into a 3D shape.
+
+```js
+const hexagon = () => new HexagonLayer({
+ id: 'hex',
+ data: sourceData,
+ getPosition: d => [d.longitude, d.latitude],
+ getElevationWeight: d => (d.n_killed * 2) + d.n_injured,
+ elevationScale: 100,
+ extruded: true,
+ radius: 1609,
+ opacity: 0.6,
+ coverage: 0.88,
+ lowerPercentile: 50
+ });
+
+```
+
+
+
+### Add Layers to the Map
+
+The final step is add layers to the map. Deck.gl will composite the layers in a first-in-first-out patter, so the last element of the array sits on top. Update the `initMap` to create an overlay.
+
+```js
+window.initMap = () => {
+
+ const map = new google.maps.Map(document.getElementById('map'), {
+ center: {lat: 40.0, lng: -100.0},
+ zoom: 5,
+ });
+
+ const overlay = new GoogleMapsOverlay({
+ layers: [
+ scatterplot(),
+ heatmap(),
+ hexagon()
+ ],
+ });
+
+
+ overlay.setMap(map);
+
+}
+
+```
\ No newline at end of file
diff --git a/hugo/content/lessons/deckgl-google-maps-tutorial/img/.gitkeep b/content/lessons/deno-quickstart/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/deckgl-google-maps-tutorial/img/.gitkeep
rename to content/lessons/deno-quickstart/img/.gitkeep
diff --git a/hugo/content/lessons/deno-quickstart/index.md b/content/lessons/deno-quickstart/index.md
similarity index 100%
rename from hugo/content/lessons/deno-quickstart/index.md
rename to content/lessons/deno-quickstart/index.md
diff --git a/hugo/content/lessons/deno-quickstart/img/.gitkeep b/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/deno-quickstart/img/.gitkeep
rename to content/lessons/deploy-multiple-sites-to-firebase-hosting/img/.gitkeep
diff --git a/hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/connect-domain.png b/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/connect-domain.png
similarity index 100%
rename from hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/connect-domain.png
rename to content/lessons/deploy-multiple-sites-to-firebase-hosting/img/connect-domain.png
diff --git a/hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/dist-i18n.png b/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/dist-i18n.png
similarity index 100%
rename from hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/dist-i18n.png
rename to content/lessons/deploy-multiple-sites-to-firebase-hosting/img/dist-i18n.png
diff --git a/hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/featured.jpg b/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/featured.jpg
rename to content/lessons/deploy-multiple-sites-to-firebase-hosting/img/featured.jpg
diff --git a/hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/featured.png b/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/featured.png
similarity index 100%
rename from hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/featured.png
rename to content/lessons/deploy-multiple-sites-to-firebase-hosting/img/featured.png
diff --git a/hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/featured.webp b/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/featured.webp
rename to content/lessons/deploy-multiple-sites-to-firebase-hosting/img/featured.webp
diff --git a/hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/multisite-demo.gif b/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/multisite-demo.gif
similarity index 100%
rename from hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/multisite-demo.gif
rename to content/lessons/deploy-multiple-sites-to-firebase-hosting/img/multisite-demo.gif
diff --git a/hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/multisite-hosting.png b/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/multisite-hosting.png
similarity index 100%
rename from hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/multisite-hosting.png
rename to content/lessons/deploy-multiple-sites-to-firebase-hosting/img/multisite-hosting.png
diff --git a/hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/index.md b/content/lessons/deploy-multiple-sites-to-firebase-hosting/index.md
similarity index 100%
rename from hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/index.md
rename to content/lessons/deploy-multiple-sites-to-firebase-hosting/index.md
diff --git a/hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/.gitkeep b/content/lessons/desktop-apps-with-electron-and-angular/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/deploy-multiple-sites-to-firebase-hosting/img/.gitkeep
rename to content/lessons/desktop-apps-with-electron-and-angular/img/.gitkeep
diff --git a/hugo/content/lessons/desktop-apps-with-electron-and-angular/img/angular-electron-timer.gif b/content/lessons/desktop-apps-with-electron-and-angular/img/angular-electron-timer.gif
similarity index 100%
rename from hugo/content/lessons/desktop-apps-with-electron-and-angular/img/angular-electron-timer.gif
rename to content/lessons/desktop-apps-with-electron-and-angular/img/angular-electron-timer.gif
diff --git a/hugo/content/lessons/desktop-apps-with-electron-and-angular/img/featured.jpg b/content/lessons/desktop-apps-with-electron-and-angular/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/desktop-apps-with-electron-and-angular/img/featured.jpg
rename to content/lessons/desktop-apps-with-electron-and-angular/img/featured.jpg
diff --git a/hugo/content/lessons/desktop-apps-with-electron-and-angular/img/featured.png b/content/lessons/desktop-apps-with-electron-and-angular/img/featured.png
similarity index 100%
rename from hugo/content/lessons/desktop-apps-with-electron-and-angular/img/featured.png
rename to content/lessons/desktop-apps-with-electron-and-angular/img/featured.png
diff --git a/hugo/content/lessons/desktop-apps-with-electron-and-angular/img/featured.webp b/content/lessons/desktop-apps-with-electron-and-angular/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/desktop-apps-with-electron-and-angular/img/featured.webp
rename to content/lessons/desktop-apps-with-electron-and-angular/img/featured.webp
diff --git a/content/lessons/desktop-apps-with-electron-and-angular/index.md b/content/lessons/desktop-apps-with-electron-and-angular/index.md
new file mode 100644
index 000000000..cf9eb6d78
--- /dev/null
+++ b/content/lessons/desktop-apps-with-electron-and-angular/index.md
@@ -0,0 +1,337 @@
+---
+title: "Desktop Apps with Electron and Angular"
+lastmod: 2017-09-21T06:56:25-07:00
+publishdate: 2017-09-21T06:56:25-07:00
+author: Jeff Delaney
+draft: false
+description: Learn how to build native desktop apps for Windows, macOS, or Linux using Angular and Electron
+tags:
+ - electron
+ - angular
+
+youtube: u_vMChpZMCk
+github: https://github.com/AngularFirebase/angular-electron
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+In this lesson, you will learn how to build native desktop apps with Angular and [Electron](https://electron.atom.io/). You might be surprised how easy it is to start building high-quality desktop apps for any platform, or even port your existing Angular app to native desktop platforms.
+
+This lesson covers the following topics:
+
+1. Configure Electron 1.7 with Angular.
+2. Build a simple timer app in Angular.
+3. Package the app for install on Windows 10, macOS, and Linux Ubuntu.
+
+## Initial Setup
+
+Let's kick things off by building a new angular app from scratch.
+
+### Generate the Angular App
+
+Generate a default app with the Angular CLI.
+
+```shell
+npm install -g @angular/cli
+ng new angular-electron
+cd angular-electron
+```
+
+### Update index.html
+
+The generated root page in Angular points the base href to `/` - this will cause problems with Electron later on, so let's update it now. Just add a period in front of the slash in `src/index.html`.
+
+```html
+This setup does not support hot code reloads. Whenever you change some Angular code, you need to rerun the electron-build command. It is possible to setup hot reloads by pointing the window to a remote URL (such as https://localhost:4200) and running `ng serve` in a separate terminal.
+
+## Building the Angular App
+
+Now we need to build an Angular App that's worthy of being installed. I am building a single page timer that will animate a progress circle, then make a chime sound when complete.
+
+{{< figure src="img/angular-electron-timer.gif" caption="Example app built with Angular and Electron" >}}
+
+
+To keep things super simple, I am writing all the code in the app.component
+
+### Install Round Progress Bar
+
+To get the progress timer looking good quickly, I installed the [angular-svg-round-progressbar](https://github.com/crisbeto/angular-svg-round-progressbar) package. It gives us a pre-built component that we can animate based on the current state of the timer.
+
+```shell
+npm install angular-svg-round-progressbar --save
+```
+
+Then add it to the `app.module.ts` (also add the FormsModule).
+
+```typescript
+import { BrowserModule } from '@angular/platform-browser';
+import { NgModule } from '@angular/core';
+
+import { AppComponent } from './app.component';
+
+import { FormsModule } from '@angular/forms'; // <-- here
+import { RoundProgressModule } from 'angular-svg-round-progressbar'; // <-- here
+
+@NgModule({
+ declarations: [
+ AppComponent
+ ],
+ imports: [
+ BrowserModule,
+ FormsModule, // <-- here
+ RoundProgressModule // <-- and here
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+### app.component.ts
+
+The app works by allowing the user to set the number of seconds the timer will run `max`. The timer progresses by running an RxJS Observable interval every 10th of a second and incrementing the `current` value.
+
+I also defined several getters help deal with NaN values that can cause errors in the progress circle. They also help keep the HTML logic clean and readable.
+
+```typescript
+import { Component, OnInit } from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+import 'rxjs/add/observable/interval';
+import 'rxjs/add/operator/map';
+import 'rxjs/add/operator/takeWhile';
+import 'rxjs/add/operator/do';
+
+
+@Component({
+ selector: 'app-root',
+ templateUrl: './app.component.html',
+ styleUrls: ['./app.component.scss']
+})
+export class AppComponent {
+
+ max = 1;
+ current = 0;
+
+ /// Start the timer
+ start() {
+ const interval = Observable.interval(100);
+
+ interval
+ .takeWhile(_ => !this.isFinished )
+ .do(i => this.current += 0.1)
+ .subscribe();
+ }
+
+ /// finish timer
+ finish() {
+ this.current = this.max;
+ }
+
+ /// reset timer
+ reset() {
+ this.current = 0;
+ }
+
+ /// Getters to prevent NaN errors
+
+ get maxVal() {
+ return isNaN(this.max) || this.max < 0.1 ? 0.1 : this.max;
+ }
+
+ get currentVal() {
+ return isNaN(this.current) || this.current < 0 ? 0 : this.current;
+ }
+
+ get isFinished() {
+ return this.currentVal >= this.maxVal;
+ }
+
+}
+```
+
+### app.component.html
+
+In the HTML, we can declare the progress component and display the user interface elements conditionally based on the state of the timer.
+
+```html
+
+
+ Electron Timer
+
+
+
+
+ {{ max - current | number: '1.1-1' }}
+
+
+
+
+
+
+
+
+
+ Seconds
+ Start
+ Finish
+
+
+
+
+
+```
+
+## Packaging for Desktop Operating Systems
+
+Now that we have a decent app ready for desktops, we need to package and distribute it. The [electron packager](https://github.com/electron-userland/electron-packager) tool will allow to package our code into an executable for desktop platforms - including Windows (win32), MacOS (darwin), and Linux. Keep in mind, there are several other [electron packaging tools](https://electron.atom.io/docs/tutorial/application-distribution/#packaging-tools) that might better fit your needs.
+
+```shell
+npm install electron-packager -g
+npm install electron-packager --save-dev
+```
+
+Linux and MacOS developers will need to install [WineHQ](https://www.winehq.org/) if they plan on building desktop apps for Windows.
+
+In this example, I am going to build an executable for Windows.
+
+```shell
+electron-packager . --platform=win32
+```
+
+This will generate a directory `/angular-electron-win32-x64/` that contains the executable file.
+
+And why not build one for MacOS while we're at it.
+
+```shell
+electron-packager . --platform=darwin
+```
+
+This will generate a directory `/angular-electron-darwin-x64/` that contains the app. Zip it and extract it on a mac system and you should be able to run it natively. You will get warnings that it's from an *unknown developer*, but this is expected and it's perfectly safe to open - it's your own code after all.
diff --git a/hugo/content/lessons/desktop-apps-with-electron-and-angular/img/.gitkeep b/content/lessons/dgraph-recommendation-engine/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/desktop-apps-with-electron-and-angular/img/.gitkeep
rename to content/lessons/dgraph-recommendation-engine/img/.gitkeep
diff --git a/hugo/content/lessons/dgraph-recommendation-engine/index.md b/content/lessons/dgraph-recommendation-engine/index.md
similarity index 100%
rename from hugo/content/lessons/dgraph-recommendation-engine/index.md
rename to content/lessons/dgraph-recommendation-engine/index.md
diff --git a/hugo/content/lessons/dgraph-recommendation-engine/img/.gitkeep b/content/lessons/docker-basics-tutorial-nodejs/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/dgraph-recommendation-engine/img/.gitkeep
rename to content/lessons/docker-basics-tutorial-nodejs/img/.gitkeep
diff --git a/hugo/content/lessons/docker-basics-tutorial-nodejs/img/featured.jpg b/content/lessons/docker-basics-tutorial-nodejs/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/docker-basics-tutorial-nodejs/img/featured.jpg
rename to content/lessons/docker-basics-tutorial-nodejs/img/featured.jpg
diff --git a/hugo/content/lessons/docker-basics-tutorial-nodejs/img/featured.png b/content/lessons/docker-basics-tutorial-nodejs/img/featured.png
similarity index 100%
rename from hugo/content/lessons/docker-basics-tutorial-nodejs/img/featured.png
rename to content/lessons/docker-basics-tutorial-nodejs/img/featured.png
diff --git a/hugo/content/lessons/docker-basics-tutorial-nodejs/img/featured.webp b/content/lessons/docker-basics-tutorial-nodejs/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/docker-basics-tutorial-nodejs/img/featured.webp
rename to content/lessons/docker-basics-tutorial-nodejs/img/featured.webp
diff --git a/hugo/content/lessons/docker-basics-tutorial-nodejs/index.md b/content/lessons/docker-basics-tutorial-nodejs/index.md
similarity index 100%
rename from hugo/content/lessons/docker-basics-tutorial-nodejs/index.md
rename to content/lessons/docker-basics-tutorial-nodejs/index.md
diff --git a/hugo/content/lessons/docker-basics-tutorial-nodejs/img/.gitkeep b/content/lessons/dockerize-and-deploy-nodejs-gcp/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/docker-basics-tutorial-nodejs/img/.gitkeep
rename to content/lessons/dockerize-and-deploy-nodejs-gcp/img/.gitkeep
diff --git a/hugo/content/lessons/dockerize-and-deploy-nodejs-gcp/index.md b/content/lessons/dockerize-and-deploy-nodejs-gcp/index.md
similarity index 100%
rename from hugo/content/lessons/dockerize-and-deploy-nodejs-gcp/index.md
rename to content/lessons/dockerize-and-deploy-nodejs-gcp/index.md
diff --git a/hugo/content/lessons/dockerize-and-deploy-nodejs-gcp/img/.gitkeep b/content/lessons/dropdown-menu-multi-level-react/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/dockerize-and-deploy-nodejs-gcp/img/.gitkeep
rename to content/lessons/dropdown-menu-multi-level-react/img/.gitkeep
diff --git a/hugo/content/lessons/dropdown-menu-multi-level-react/img/facebook-ui-redesign.png b/content/lessons/dropdown-menu-multi-level-react/img/facebook-ui-redesign.png
similarity index 100%
rename from hugo/content/lessons/dropdown-menu-multi-level-react/img/facebook-ui-redesign.png
rename to content/lessons/dropdown-menu-multi-level-react/img/facebook-ui-redesign.png
diff --git a/hugo/content/lessons/dropdown-menu-multi-level-react/img/featured.jpg b/content/lessons/dropdown-menu-multi-level-react/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/dropdown-menu-multi-level-react/img/featured.jpg
rename to content/lessons/dropdown-menu-multi-level-react/img/featured.jpg
diff --git a/hugo/content/lessons/dropdown-menu-multi-level-react/img/featured.png b/content/lessons/dropdown-menu-multi-level-react/img/featured.png
similarity index 100%
rename from hugo/content/lessons/dropdown-menu-multi-level-react/img/featured.png
rename to content/lessons/dropdown-menu-multi-level-react/img/featured.png
diff --git a/hugo/content/lessons/dropdown-menu-multi-level-react/img/featured.webp b/content/lessons/dropdown-menu-multi-level-react/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/dropdown-menu-multi-level-react/img/featured.webp
rename to content/lessons/dropdown-menu-multi-level-react/img/featured.webp
diff --git a/hugo/content/lessons/dropdown-menu-multi-level-react/img/react-dropdown-basic.png b/content/lessons/dropdown-menu-multi-level-react/img/react-dropdown-basic.png
similarity index 100%
rename from hugo/content/lessons/dropdown-menu-multi-level-react/img/react-dropdown-basic.png
rename to content/lessons/dropdown-menu-multi-level-react/img/react-dropdown-basic.png
diff --git a/hugo/content/lessons/dropdown-menu-multi-level-react/img/react-dropdown-multi-level.png b/content/lessons/dropdown-menu-multi-level-react/img/react-dropdown-multi-level.png
similarity index 100%
rename from hugo/content/lessons/dropdown-menu-multi-level-react/img/react-dropdown-multi-level.png
rename to content/lessons/dropdown-menu-multi-level-react/img/react-dropdown-multi-level.png
diff --git a/hugo/content/lessons/dropdown-menu-multi-level-react/img/react-icon-button-nav.png b/content/lessons/dropdown-menu-multi-level-react/img/react-icon-button-nav.png
similarity index 100%
rename from hugo/content/lessons/dropdown-menu-multi-level-react/img/react-icon-button-nav.png
rename to content/lessons/dropdown-menu-multi-level-react/img/react-icon-button-nav.png
diff --git a/hugo/content/lessons/dropdown-menu-multi-level-react/img/react-navbar.png b/content/lessons/dropdown-menu-multi-level-react/img/react-navbar.png
similarity index 100%
rename from hugo/content/lessons/dropdown-menu-multi-level-react/img/react-navbar.png
rename to content/lessons/dropdown-menu-multi-level-react/img/react-navbar.png
diff --git a/hugo/content/lessons/dropdown-menu-multi-level-react/index.md b/content/lessons/dropdown-menu-multi-level-react/index.md
similarity index 100%
rename from hugo/content/lessons/dropdown-menu-multi-level-react/index.md
rename to content/lessons/dropdown-menu-multi-level-react/index.md
diff --git a/hugo/content/lessons/dropdown-menu-multi-level-react/img/.gitkeep b/content/lessons/electron-screen-recorder-project-tutorial/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/dropdown-menu-multi-level-react/img/.gitkeep
rename to content/lessons/electron-screen-recorder-project-tutorial/img/.gitkeep
diff --git a/hugo/content/lessons/electron-screen-recorder-project-tutorial/img/featured.jpg b/content/lessons/electron-screen-recorder-project-tutorial/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/electron-screen-recorder-project-tutorial/img/featured.jpg
rename to content/lessons/electron-screen-recorder-project-tutorial/img/featured.jpg
diff --git a/hugo/content/lessons/electron-screen-recorder-project-tutorial/img/featured.png b/content/lessons/electron-screen-recorder-project-tutorial/img/featured.png
similarity index 100%
rename from hugo/content/lessons/electron-screen-recorder-project-tutorial/img/featured.png
rename to content/lessons/electron-screen-recorder-project-tutorial/img/featured.png
diff --git a/hugo/content/lessons/electron-screen-recorder-project-tutorial/img/featured.webp b/content/lessons/electron-screen-recorder-project-tutorial/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/electron-screen-recorder-project-tutorial/img/featured.webp
rename to content/lessons/electron-screen-recorder-project-tutorial/img/featured.webp
diff --git a/hugo/content/lessons/electron-screen-recorder-project-tutorial/index.md b/content/lessons/electron-screen-recorder-project-tutorial/index.md
similarity index 100%
rename from hugo/content/lessons/electron-screen-recorder-project-tutorial/index.md
rename to content/lessons/electron-screen-recorder-project-tutorial/index.md
diff --git a/hugo/content/lessons/electron-screen-recorder-project-tutorial/img/.gitkeep b/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/electron-screen-recorder-project-tutorial/img/.gitkeep
rename to content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/featured.jpg b/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/featured.jpg
rename to content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/featured.png b/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/featured.png
rename to content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/featured.png
diff --git a/hugo/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/featured.webp b/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/featured.webp
rename to content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/featured.webp
diff --git a/hugo/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/react.gif b/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/react.gif
similarity index 100%
rename from hugo/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/react.gif
rename to content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/react.gif
diff --git a/hugo/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/index.md b/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/index.md
similarity index 100%
rename from hugo/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/index.md
rename to content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/index.md
diff --git a/hugo/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/.gitkeep b/content/lessons/fauna-db-quickstart/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/facebook-inspired-reactions-from-scratch-with-angular-and-firebase/img/.gitkeep
rename to content/lessons/fauna-db-quickstart/img/.gitkeep
diff --git a/hugo/content/lessons/fauna-db-quickstart/img/fauna-collections.png b/content/lessons/fauna-db-quickstart/img/fauna-collections.png
similarity index 100%
rename from hugo/content/lessons/fauna-db-quickstart/img/fauna-collections.png
rename to content/lessons/fauna-db-quickstart/img/fauna-collections.png
diff --git a/hugo/content/lessons/fauna-db-quickstart/img/fauna-function.png b/content/lessons/fauna-db-quickstart/img/fauna-function.png
similarity index 100%
rename from hugo/content/lessons/fauna-db-quickstart/img/fauna-function.png
rename to content/lessons/fauna-db-quickstart/img/fauna-function.png
diff --git a/hugo/content/lessons/fauna-db-quickstart/img/fauna-index.png b/content/lessons/fauna-db-quickstart/img/fauna-index.png
similarity index 100%
rename from hugo/content/lessons/fauna-db-quickstart/img/fauna-index.png
rename to content/lessons/fauna-db-quickstart/img/fauna-index.png
diff --git a/hugo/content/lessons/fauna-db-quickstart/img/fauna-key.png b/content/lessons/fauna-db-quickstart/img/fauna-key.png
similarity index 100%
rename from hugo/content/lessons/fauna-db-quickstart/img/fauna-key.png
rename to content/lessons/fauna-db-quickstart/img/fauna-key.png
diff --git a/hugo/content/lessons/fauna-db-quickstart/img/featured.jpg b/content/lessons/fauna-db-quickstart/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/fauna-db-quickstart/img/featured.jpg
rename to content/lessons/fauna-db-quickstart/img/featured.jpg
diff --git a/hugo/content/lessons/fauna-db-quickstart/img/featured.png b/content/lessons/fauna-db-quickstart/img/featured.png
similarity index 100%
rename from hugo/content/lessons/fauna-db-quickstart/img/featured.png
rename to content/lessons/fauna-db-quickstart/img/featured.png
diff --git a/hugo/content/lessons/fauna-db-quickstart/img/featured.webp b/content/lessons/fauna-db-quickstart/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/fauna-db-quickstart/img/featured.webp
rename to content/lessons/fauna-db-quickstart/img/featured.webp
diff --git a/hugo/content/lessons/fauna-db-quickstart/index.md b/content/lessons/fauna-db-quickstart/index.md
similarity index 100%
rename from hugo/content/lessons/fauna-db-quickstart/index.md
rename to content/lessons/fauna-db-quickstart/index.md
diff --git a/hugo/content/lessons/fauna-db-quickstart/img/.gitkeep b/content/lessons/firebase-analytics-web-guide/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/fauna-db-quickstart/img/.gitkeep
rename to content/lessons/firebase-analytics-web-guide/img/.gitkeep
diff --git a/hugo/content/lessons/firebase-analytics-web-guide/img/analytics-param.png b/content/lessons/firebase-analytics-web-guide/img/analytics-param.png
similarity index 100%
rename from hugo/content/lessons/firebase-analytics-web-guide/img/analytics-param.png
rename to content/lessons/firebase-analytics-web-guide/img/analytics-param.png
diff --git a/hugo/content/lessons/firebase-analytics-web-guide/img/analytics-remote-config.png b/content/lessons/firebase-analytics-web-guide/img/analytics-remote-config.png
similarity index 100%
rename from hugo/content/lessons/firebase-analytics-web-guide/img/analytics-remote-config.png
rename to content/lessons/firebase-analytics-web-guide/img/analytics-remote-config.png
diff --git a/hugo/content/lessons/firebase-analytics-web-guide/img/featured.jpg b/content/lessons/firebase-analytics-web-guide/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firebase-analytics-web-guide/img/featured.jpg
rename to content/lessons/firebase-analytics-web-guide/img/featured.jpg
diff --git a/hugo/content/lessons/firebase-analytics-web-guide/img/featured.png b/content/lessons/firebase-analytics-web-guide/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firebase-analytics-web-guide/img/featured.png
rename to content/lessons/firebase-analytics-web-guide/img/featured.png
diff --git a/hugo/content/lessons/firebase-analytics-web-guide/img/featured.webp b/content/lessons/firebase-analytics-web-guide/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firebase-analytics-web-guide/img/featured.webp
rename to content/lessons/firebase-analytics-web-guide/img/featured.webp
diff --git a/content/lessons/firebase-analytics-web-guide/index.md b/content/lessons/firebase-analytics-web-guide/index.md
new file mode 100644
index 000000000..722c2c0ba
--- /dev/null
+++ b/content/lessons/firebase-analytics-web-guide/index.md
@@ -0,0 +1,129 @@
+---
+title: Firebase Analytics for the Web
+lastmod: 2019-10-03T13:08:58-07:00
+publishdate: 2019-10-03T13:08:58-07:00
+author: Jeff Delaney
+draft: false
+description: Customize your app's UI/UX with Firebase Analytics and Remote Config in a Progressive Web App
+tags:
+ - firebase
+ - analytics
+ - javascript
+
+youtube: iVHRy_uVtm0
+# github:
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+Firebase recently announced support for [Analytics](https://firebase.google.com/docs/analytics) and [Remote Config](https://firebase.google.com/docs/remote-config) on the web. When combined, these services make it possible to customize the UI/UX of your app based on data collected from Google Analytics. The following lesson will show you how to collect Google Analytics events and user properties, then read aggregated data in your app to customize the experience for a specific audience.
+
+## Initial Setup
+
+Firebase Analytics was added to the JavaScript SDK in version 7.0.0. If you have an existing app, follow the [official setup guide](https://firebase.google.com/docs/analytics/get-started#before_you_begin). If working with a framework like Angular, React, etc, you will likely need to update your NPM package:
+
+{{< file "terminal" "command line" >}}
+```text
+npm install firebase@latest
+```
+
+And make sure the web config in your application contains the new *measurementId* field and calls `firebase.analytics()` on initialization, for example:
+
+{{< file "ts" "app.ts" >}}
+```typescript
+const firebaseConfig = {
+// ... other fields
+measurementId: 'G-XXXXXXXXXX'
+};
+// Initialize Firebase
+import * as firebase from 'firebase/app';
+firebase.initializeApp(firebaseConfig);
+firebase.analytics();
+```
+
+## Collect Data with Firebase Analytics
+
+Firebase will collect data automatically by simply including the analytics package in your app bundle. The default data is useful, but optimizing your analytics for a sales funnel or custom UI will likely require a custom integration.
+
+### Events
+
+[Events](https://firebase.google.com/docs/analytics/events) are critical to any good analytics dataset because they provide insight into how users interact with your app. Google provides a variety of [built-in events](https://developers.google.com/gtagjs/reference/event), but you can also create your own custom events as shown below.
+
+```typescript
+const analytics = firebase.analytics();
+
+function onNewGame() {
+ // do something
+ analytics.logEvent('start_game')
+
+ analytics.logEvent('start_game', { level: '10', difficulty: 'expert' })
+}
+```
+
+Optional: You can then find this event on the Firebase Console and click *parameter reporting*, then select the custom params you'd like to see reported:
+
+{{< figure src="img/analytics-param.png" caption="Reporting for Google Analytics params on custom events" >}}
+
+### User Properties
+
+User properties make it possible to segment or filter your users into smaller groups.
+
+In the example below, we look at the [custom claims](/lessons/firebase-custom-claims-role-based-auth/) on the user's auth record and set an user property accordingly.
+
+```typescript
+const analytics = firebase.analytics();
+
+firebase.auth().onIdTokenChanged(user => {
+ if (user) {
+ analytics.setUserId(user.uid);
+ analytics.setUserProperties({ level: user.claims.level });
+ }
+});
+```
+
+
+## Remote Config
+
+[Remote config](https://firebase.google.com/docs/remote-config/use-config-web) is a service that can fetch key-value pairs from Firebase that contain values related Google Analytics and the current user session. This allows you to change the appearance of the UI based on they behavior of the user without making direct code changes your code.
+
+### Create Parameters
+
+Remote Config parameters are key-value pairs, but the value is assigned based on a condition you define based on the user's Google Analytics data. You might create parameters that activate based on geographic location, device, audience segment, and more. Create a parameter from the Firebase console.
+
+{{< figure src="img/analytics-remote-config.png" caption="Example of a Firebase Remote Config Parameter" >}}
+
+
+### Access Remote Config Properties
+
+Using the JavaScript SDK, make a reference to remote config, then use typesafe getters to access the parameters for the current user session.
+
+```typescript
+const remoteConfig = firebase.remoteConfig();
+
+remoteConfig.settings = {
+minimumFetchIntervalMillis: 3600000,
+};
+
+// Set a default value if it cannot be fetched
+
+remoteConfig.defaultConfig = ({
+'coolParam': '',
+});
+
+await remoteConfig.fetchAndActivate();
+
+// Use these values in your app to customize the UI
+
+const coolParam = remoteConfig.getString('something_cool');
+
+console.log(coolParam);
+
+```
+
+
diff --git a/hugo/content/lessons/firebase-analytics-web-guide/img/.gitkeep b/content/lessons/firebase-custom-claims-role-based-auth/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firebase-analytics-web-guide/img/.gitkeep
rename to content/lessons/firebase-custom-claims-role-based-auth/img/.gitkeep
diff --git a/hugo/content/lessons/firebase-custom-claims-role-based-auth/img/featured.jpg b/content/lessons/firebase-custom-claims-role-based-auth/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firebase-custom-claims-role-based-auth/img/featured.jpg
rename to content/lessons/firebase-custom-claims-role-based-auth/img/featured.jpg
diff --git a/hugo/content/lessons/firebase-custom-claims-role-based-auth/img/featured.png b/content/lessons/firebase-custom-claims-role-based-auth/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firebase-custom-claims-role-based-auth/img/featured.png
rename to content/lessons/firebase-custom-claims-role-based-auth/img/featured.png
diff --git a/hugo/content/lessons/firebase-custom-claims-role-based-auth/img/featured.webp b/content/lessons/firebase-custom-claims-role-based-auth/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firebase-custom-claims-role-based-auth/img/featured.webp
rename to content/lessons/firebase-custom-claims-role-based-auth/img/featured.webp
diff --git a/hugo/content/lessons/firebase-custom-claims-role-based-auth/img/functions-service-account.png b/content/lessons/firebase-custom-claims-role-based-auth/img/functions-service-account.png
similarity index 100%
rename from hugo/content/lessons/firebase-custom-claims-role-based-auth/img/functions-service-account.png
rename to content/lessons/firebase-custom-claims-role-based-auth/img/functions-service-account.png
diff --git a/content/lessons/firebase-custom-claims-role-based-auth/index.md b/content/lessons/firebase-custom-claims-role-based-auth/index.md
new file mode 100644
index 000000000..48e4cbfd8
--- /dev/null
+++ b/content/lessons/firebase-custom-claims-role-based-auth/index.md
@@ -0,0 +1,223 @@
+---
+title: Advanced Firebase Auth with Custom Claims
+lastmod: 2019-09-23T08:11:12-07:00
+publishdate: 2019-09-23T08:11:12-07:00
+author: Jeff Delaney
+draft: false
+description: Implement role-based user authorization and security rules by adding custom claims to the Firebase Auth ID token.
+tags:
+ - firebase
+ - auth
+ - pro
+
+youtube:
+github:
+vimeo: 362111823
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+pro: true
+---
+
+Firebase allows developers to modify authentication [ID tokens](https://firebase.google.com/docs/auth/admin/verify-id-tokens) to provide fine-grained system access to authorized users. The follow lesson adds [custom claims](https://firebase.google.com/docs/auth/admin/custom-claims) to the Firebase user record to build a [role-based access control](https://en.wikipedia.org/wiki/Role-based_access_control) feature that is secured with Firestore rules.
+
+
+## Set Custom Claims from the Command Line
+
+It is not possible (currently) to add custom claims from the Firebase Console. This means we need to write some code with [Firebase Admin](https://firebase.google.com/docs/admin/setup).
+
+
+In the real world, you will most likely update custom claims from a [Cloud Function](https://fireship.io/courses/cloud-functions/). For example, the user makes a purchase and you update their claim as a *paid* user.
+
+
+
+### Initial Setup
+
+Th easiest way to update custom claims is to write a simple Node.js script. If starting from scratch, run the commands below in an empty directory.
+
+{{< file "terminal" "command line" >}}
+```text
+npm init -y
+npm i firebase-admin
+touch index.js
+```
+
+
+### Service Account
+
+Download your [service account](https://firebase.google.com/docs/admin/setup#initialize_the_sdk) from the Firebase settings tab and save it as `service-account.json` in the project directory. ⚠️ The service account contains sensitive API keys that should not be exposed publicly.
+
+{{< figure src="img/functions-service-account.png" caption="Download your service account" >}}
+
+### Update Claims with Firebase Auth
+
+The script below calls the `auth.setCustomUserClaims` method to add a claims object to the user's ID token. You can save any data to the claims object as long as it can be serialized to JSON.
+
+
+The max size of the claims object is 1000 bytes. It is a good practice to only save the bare minimum amount of data required for authorization logic.
+
+
+{{< file "js" "index.js" >}}
+```js
+const admin = require('firebase-admin');
+admin.initializeApp();
+
+const auth = admin.auth();
+
+const uid = 'NUc3KyG2RAfNuOrE0pzMMZegFHS2';
+
+const customClaims = {
+ roles: ['creator', 'auditor', 'admin']
+};
+
+(async() => {
+ await auth.setCustomUserClaims(uid, customClaims);
+ const user = await auth.getUser(uid);
+ console.log('success', user)
+ process.exit()
+})();
+```
+
+Run the script from the command line making sure to set an environment variable that points to the service account.
+
+{{< file "terminal" "command line" >}}
+```text
+GOOGLE_APPLICATION_CREDENTIALS=service-account.json
+node index.js
+```
+
+Now that we have a way to update claims, let's looks at a few common use cases.
+
+## Simple Admin Levels
+
+### Use Case
+
+The most basic type of access control is to distinguish between a boolean value, such as paid/unpaid users or admins/non-admins. You might also fine tune access levels by also setting an integer value.
+
+```js
+const customClaims = {
+ admin: true,
+ level: 7,
+};
+```
+
+### Firestore Rules
+
+The Firestore rules grant read access to all admins, but limit write access to admins above level 5.
+
+{{< file "firebase" "firebase.rules" >}}
+```js
+ match /{path=**}/secrets/{id} {
+ allow read: if request.auth.token.admin;
+ allow write: if request.auth.token.level > 5;
+ }
+```
+
+
+## Role-based Access Control
+
+### Use Case
+
+A very common requirement is role-based authorization. A user can be assigned a list of roles, which determine if that user can perform a certain action. This strategy is common is CMS platforms - Wordpress for example has roles like *super_admin*, *admin*, *editor*, *author*, and so on.
+
+```js
+const customClaims = {
+ roles: ['creator', 'auditor', 'admin'],
+};
+```
+
+### Firestore Rules
+
+We can assume a user with any role has read access, so checking by length is sufficient. For write access, we allow the `admin` to perform all actions, but limit the `creator` and `auditor` roles to specific types of writes.
+
+{{< file "firebase" "firebase.rules" >}}
+```js
+match /{path=**}/secrets/{id} {
+ allow read: if request.auth.token.roles.size > 0;
+ allow create: if request.auth.token.roles.hasAny(['creator', 'admin']);
+ allow update: if request.auth.token.roles.hasAny(['auditor', 'admin']);
+ allow delete: if request.auth.token.roles.hasAny(['admin']);
+}
+```
+
+Tip: You could make the code above more concise my extracting the logic into a rules function.
+
+```js
+match /{path=**}/secrets/{id} {
+ allow create: if userHasRole(['creator', 'admin']);
+ allow update: if userHasRole(['auditor', 'admin']);
+ allow delete: if userHasRole(['admin']);
+}
+
+
+function userHasRole(roles) {
+ return request.auth.token.roles.hasAny(roles);
+}
+```
+
+
+## Access Control List
+
+### Use Case
+
+Imagine an app where **users can belong to multiple organizations AND have customized access assigned for each organization**. For example, each company may want to limit access to a specific department.
+
+An access control list (ACL) is the opposite of role-based auth. Rather than give the user sweeping access to a path, the ID of the resource determines if access can be granted to that user.
+
+
+```js
+const customClaims = {
+ orgs: {
+ uber: ['accounting', 'finance'],
+ tesla: ['manufacturing', 'ai'],
+ mcdonalds: ['nuggets']
+ },
+}
+```
+
+### Firestore Rules
+
+The rule below matches the document ID to the user's custom claims. For example a read to `orgs/tesla/departments/manufacturing` would be allowed in this example.
+
+{{< file "firebase" "firebase.rules" >}}
+```js
+ match /{path=**}/orgs/{orgId}/departments/{departmentId} {
+ allow read: if request.auth.token.orgs[orgId].hasAny([departmentId])
+ }
+```
+
+## Validate Claims from the Frontend
+
+### Retrieve the ID Token
+
+Custom claims can also be used to build the frontend UI. Get the result of the ID token like so:
+
+{{< file "js" "app.js" >}}
+```js
+const token = await firebase.auth().currentUser.getIdTokenResult();
+
+if (token.claims.admin) {
+ // show admin UI
+}
+```
+
+### Force Refresh of the ID Token
+
+The ID token will refresh every 1 hour, or you can force it to refresh manually to propagate changes to the custom claims.
+
+{{< file "js" "app.js" >}}
+```js
+firebase.auth().currentUser.getIdTokenResult(true);
+```
+
+## 👀 Alternative Approach
+ Learn how to implement roles without custom claims with the [Firestore User Roles Tutorial](https://angularfirebase.com/lessons/role-based-authorization-with-firestore-nosql-and-angular-5/)
+
+
+
+
diff --git a/hugo/content/lessons/firebase-custom-claims-role-based-auth/img/.gitkeep b/content/lessons/firebase-emulator-advanced/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firebase-custom-claims-role-based-auth/img/.gitkeep
rename to content/lessons/firebase-emulator-advanced/img/.gitkeep
diff --git a/hugo/content/lessons/firebase-emulator-advanced/img/emulator-fake-data.png b/content/lessons/firebase-emulator-advanced/img/emulator-fake-data.png
similarity index 100%
rename from hugo/content/lessons/firebase-emulator-advanced/img/emulator-fake-data.png
rename to content/lessons/firebase-emulator-advanced/img/emulator-fake-data.png
diff --git a/hugo/content/lessons/firebase-emulator-advanced/img/featured.jpg b/content/lessons/firebase-emulator-advanced/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firebase-emulator-advanced/img/featured.jpg
rename to content/lessons/firebase-emulator-advanced/img/featured.jpg
diff --git a/hugo/content/lessons/firebase-emulator-advanced/img/featured.png b/content/lessons/firebase-emulator-advanced/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firebase-emulator-advanced/img/featured.png
rename to content/lessons/firebase-emulator-advanced/img/featured.png
diff --git a/hugo/content/lessons/firebase-emulator-advanced/img/featured.webp b/content/lessons/firebase-emulator-advanced/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firebase-emulator-advanced/img/featured.webp
rename to content/lessons/firebase-emulator-advanced/img/featured.webp
diff --git a/content/lessons/firebase-emulator-advanced/index.md b/content/lessons/firebase-emulator-advanced/index.md
new file mode 100644
index 000000000..86ab233b7
--- /dev/null
+++ b/content/lessons/firebase-emulator-advanced/index.md
@@ -0,0 +1,277 @@
+---
+title: Firebase Emulator Advanced Usage Guide
+lastmod: 2020-05-31T19:11:38-07:00
+publishdate: 2020-05-31T19:11:38-07:00
+author: Jeff Delaney
+draft: false
+description: Advanced techniques for generating mock data and testing with the Firebase emulator suite
+tags:
+ - firebase
+ - productivity
+ - testing
+ - pro
+
+pro: true
+vimeo: 424882834
+# youtube:
+# github:
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+The [Firebase emulator suite](https://firebase.google.com/docs/emulator-suite) allows developers to run a mock Firebase environment locally. Last week, Firebase released a new feature called the [Emulator UI](https://firebase.googleblog.com/2020/05/local-firebase-emulator-ui.html) to visualize and manage Firestore (and Realtime DB) from the browser. The following lesson contains a variety of advanced techniques for setting up a Firebase development environment.
+
+
+ {{< tweet 1267220417896255488 >}}
+
+
+
+## Initial Setup
+
+First, install/update the Firebase CLI, then initialize the emulators in your project.
+
+{{< file "terminal" "command line" >}}
+```text
+npm i -g firebase-tools
+
+firebase init
+
+firebase emulators:start
+```
+
+### Frontend Integration
+
+How do you use emulated Cloud Functions and Firestore in a frontend app? When developing on localhost, you can tell Firestore and Callable Functions to use the emulator with a simple conditional check on the URL.
+
+{{< file "js" "client-side.js" >}}
+```javascript
+ firebase.initializeApp(yourFirebaseConfig);
+
+
+ if (location.hostname === "localhost") {
+
+ firebase.firestore().settings({
+ host: "localhost:8080",
+ ssl: false
+ });
+
+ firebase.functions().useFunctionsEmulator("http://localhost:5001");
+ }
+```
+
+### Backend Firebase Admin
+
+If using Firebase Admin with Node.js, you can set an environment variable when not in production.
+
+{{< file "js" "server-side.js" >}}
+```javascript
+admin.initializeApp();
+
+
+if (process.env.NODE_ENV !== 'production') {
+ process.env.FIRESTORE_EMULATOR_HOST = 'localhost:8080';
+}
+```
+
+
+### What cannot be Emulated?
+
+Auth, Storage, and FCM are not currently supported. If you need to create a large number of mock records for these services, consider creating a second "sandbox" Firebase project.
+
+
+## Mock Data
+
+The emulator makes the Firebase Admin SDK available on the browser `window`. This means you can just call `firestore.doc(...).set(...)` from a client-side script or the browser console.
+
+### Generate Fake Firestore Data Quickly
+
+We can quickly generate mock data by injecting [Faker.js](https://github.com/marak/Faker.js/) into a browser script. The script appends a button to the UI, then tells Firestore to create 100 user documents with fake data. Run it by simply pasting this code into the browser console.
+
+{{< file "js" "browser console" >}}
+```javascript
+(function () {
+ const script = document.createElement('script');
+ script.src =
+ 'https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js';
+ document.body.appendChild(script);
+
+ setTimeout(() => {
+ faker.seed(23);
+
+ const container = document.querySelector('.Firestore-actions');
+
+ const btn = document.createElement('button');
+ btn.innerHTML = 'Add 100 Users';
+ btn.className = 'mdc-button mdc-button--unelevated';
+ btn.onclick = async () => {
+ Array(100)
+ .fill(0)
+ .forEach((_) => {
+ firestore.collection('users').add(faker.helpers.createCard());
+ });
+ };
+
+ container.appendChild(btn);
+
+ }, 2000);
+})();
+
+```
+
+### Run the Script Automatically
+
+You can run this script each time you visit the `localhost:4000/firestore/*` URL with a browser plugin called [TamperMonkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo).
+
+{{< figure src="img/emulator-fake-data.png" caption="Use TamperMonkey to run the script automatically" >}}
+
+
+## PubSub
+
+[Pub/Sub](https://cloud.google.com/pubsub/) is a secure way to send messages between Google Cloud services. To create messages, install the Node.js client.
+
+{{< file "terminal" "command line" >}}
+```text
+npm i @google-cloud/pubsub
+```
+
+### Create and Send Messages
+
+Below we have an HTTP function used to publish test messages. First, it checks if a topic exists, and if not, creates it. Next, it sends the JSON payload to its subscribers. I would recommend calling this function from an HTTP client like Postman or Insomnia (see video).
+
+```javascript
+const { PubSub } = require('@google-cloud/pubsub');
+const pubsubClient = new PubSub();
+
+
+exports.sendTestMessage = functions.https.onRequest(async (req, res) => {
+
+ const { topic, data } = req.body;
+
+
+ const [exists] = await pubsubClient.topic(topic).exists();
+
+ if (!exists) {
+ await pubsubClient.createTopic(topic);
+ }
+
+
+ const id = await pubsubClient.topic(topic).publishJSON(data);
+
+ res.send(id)
+});
+```
+
+### Receive Messages
+
+Handle messages to a topic with a Pub/Sub Cloud Function.
+
+```javascript
+exports.handleMessage = functions.pubsub.topic('test').onPublish( async (message, context) => {
+
+ const data = message.json;
+
+ // do something here
+
+ return null;
+
+});
+
+```
+
+### Run Scheduled Jobs
+
+The emulator does not currently run cron jobs for your scheduled functions. However, you can test the logic in your function by triggering the associated Pub/Sub topic, such as `firebase-schedule-YOUR_FUNCTION_NAME`.
+
+```javascript
+exports.someBackgroundJob = functions.pubsub.schedule('* * * * *').onRun( ctx => { ... });
+```
+
+For example, this function can be triggered by sending a message to `firebase-schedule-someBackgroundJob`. If you really want to test a schedule, consider creating a script with [node-cron](https://www.npmjs.com/package/node-cron).
+
+## Testing
+
+### End-to-End with Cypress
+
+You can easily add end-to-end (E2E) testing to any frontend project with Cypress.
+
+{{< file "terminal" "command line" >}}
+```text
+cd frontend-app
+npm install cypress -D
+```
+
+Create a file for your spec.
+
+{{< file "js" "cypress/integration/example-spec.js" >}}
+```javascript
+///
+```
+
+
+Next, upload the image to Google Cloud's [Container Registry](https://cloud.google.com/container-registry/).
+
+
+```text
+sudo docker tag 7e6fdc4b97db gcr.io/fireship-lessons/nuxt-server
+sudo docker push gcr.io/fireship-lessons/nuxt-server
+```
+
+{{< figure src="img/container-registry.png" caption="You should now see your image in the Container Registry on GCP" >}}
+
+## Step 3: Create a Microservice on Cloud Run
+
+Create your service on Cloud Run and make sure to tick `YES` to allow unauthenticated requests.
+
+{{< figure src="img/cloud-run-nuxt.png" caption="Create a service for Nuxt on the Cloud Run dashboard" >}}
+
+And that's basically it, you now have a server-rendered JavaScript app microservice hosted in a serverless environment.
+
+{{< figure src="img/cloud-run-deployed.png" caption="Navigate to the URL to view the deployed Nuxt app." >}}
+
+## Step 4: Connect it to Firebase Hosting
+
+As a final touch, let's integrate our microserice with Firebase hosting.
+
+### Initialize Firebase Hosting
+
+Initialize Firebase Hosting, select NO for "single page app", then delete the public folder.
+
+{{< file "terminal" "command line" >}}
+```text
+firebase init hosting
+rm public
+```
+
+{{< file "firebase" "firebase.json" >}}
+```js
+{
+ "hosting": {
+ "public": "public",
+ "ignore": [
+ "firebase.json",
+ "**/.*",
+ "**/node_modules/**"
+ ],
+ "rewrites": [
+ {
+ "source": "**",
+ "run": {
+ "serviceId": "nuxt-server",
+ "region": "us-central1"
+ }
+ }
+ ]
+ }
+}
+```
+
+### Deploy Hosting
+
+Deploy your app to Firebase and you should now see Nuxt running with SSR on Firebase Hosting.
+
+```text
+firebase deploy --only hosting
+```
+
+{{< figure src="img/nuxt-firebase-hosting.png" caption="Nuxt on Firebase Hosting" >}}
diff --git a/hugo/content/lessons/firebase-microservices-with-cloud-run/img/.gitkeep b/content/lessons/firebase-performance-quickstart/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firebase-microservices-with-cloud-run/img/.gitkeep
rename to content/lessons/firebase-performance-quickstart/img/.gitkeep
diff --git a/hugo/content/lessons/firebase-performance-quickstart/img/config-fireperf.png b/content/lessons/firebase-performance-quickstart/img/config-fireperf.png
similarity index 100%
rename from hugo/content/lessons/firebase-performance-quickstart/img/config-fireperf.png
rename to content/lessons/firebase-performance-quickstart/img/config-fireperf.png
diff --git a/hugo/content/lessons/firebase-performance-quickstart/img/featured.jpg b/content/lessons/firebase-performance-quickstart/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firebase-performance-quickstart/img/featured.jpg
rename to content/lessons/firebase-performance-quickstart/img/featured.jpg
diff --git a/hugo/content/lessons/firebase-performance-quickstart/img/featured.png b/content/lessons/firebase-performance-quickstart/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firebase-performance-quickstart/img/featured.png
rename to content/lessons/firebase-performance-quickstart/img/featured.png
diff --git a/hugo/content/lessons/firebase-performance-quickstart/img/featured.webp b/content/lessons/firebase-performance-quickstart/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firebase-performance-quickstart/img/featured.webp
rename to content/lessons/firebase-performance-quickstart/img/featured.webp
diff --git a/hugo/content/lessons/firebase-performance-quickstart/img/firebase-performance-time.png b/content/lessons/firebase-performance-quickstart/img/firebase-performance-time.png
similarity index 100%
rename from hugo/content/lessons/firebase-performance-quickstart/img/firebase-performance-time.png
rename to content/lessons/firebase-performance-quickstart/img/firebase-performance-time.png
diff --git a/hugo/content/lessons/firebase-performance-quickstart/img/login-perf.png b/content/lessons/firebase-performance-quickstart/img/login-perf.png
similarity index 100%
rename from hugo/content/lessons/firebase-performance-quickstart/img/login-perf.png
rename to content/lessons/firebase-performance-quickstart/img/login-perf.png
diff --git a/content/lessons/firebase-performance-quickstart/index.md b/content/lessons/firebase-performance-quickstart/index.md
new file mode 100644
index 000000000..bc7e9ecb8
--- /dev/null
+++ b/content/lessons/firebase-performance-quickstart/index.md
@@ -0,0 +1,217 @@
+---
+title: Firebase Performance Quickstart
+lastmod: 2019-05-09T15:45:01-07:00
+publishdate: 2019-05-09T15:45:01-07:00
+author: Jeff Delaney
+draft: false
+description: Learn how to get up and running with Firebase Performance in an Angular app.
+tags:
+ - firebase
+ - performance
+ - angular
+
+youtube: KYYjdWSrRjI
+github: https://github.com/fireship-io/184-firebase-performance-web
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+Firebase [announced Performance Monitoring](https://firebase.googleblog.com/2019/05/whats-new-Google-IO-2019.html) for the Web at Google I/O 2019 - a long-awaited feature for Progressive Web Apps. It provides a simple way to add robust performance analytics to your app with minimal effort, while also adding the ability to run custom traces in your code. In the following lesson, you will learn how to add this new tool to any web app and setup traces to find performance bottlenecks.
+
+## Initial Setup
+
+The following demo uses Angular, but the principles apply to any frontend JavaScript web app - checkout the [official guide](https://firebase.google.com/docs/perf-mon/get-started-web) for setup instructions in non-Angular projects. By simplying including the performance package in your app you will receive metrics related to page load and HTTP performance.
+
+
+Keep in mind, you can use Firebase Performance as a standalone service without any other Firebase dependencies. In this case, you would want to load the lightweight script via the CDN as described in docs.
+
+
+At the time of this article, performance in [AngularFire](https://github.com/angular/angularfire2) is available under the *next* tag.
+
+{{< file "terminal" "command line" >}}
+```text
+npm i firebase
+npm i @angular/fire@next
+```
+
+
+Grab your Firebase config from the console, then initialize AngularFire & Firebase in Angular.
+
+{{< figure src="img/config-fireperf.png" caption="Make sure you have the new Firebase config object with an appId property" >}}
+
+{{< file "ngts" "app.module.ts" >}}
+```typescript
+const firebaseConfig = {
+ // ...firebase config
+ appId: '1:xxxxxxxxxxxxxxxx' // <-- make sure you have this field
+};
+
+import { AngularFireModule } from '@angular/fire';
+import { AngularFirePerformanceModule } from '@angular/fire/performance';
+
+
+@NgModule({
+ declarations: [
+ AppComponent,
+ ],
+ imports: [
+ BrowserModule,
+ AngularFireModule.initializeApp(firebaseConfig),
+ AngularFirePerformanceModule
+ ],
+ providers: [],
+ bootstrap: [AppComponent]
+})
+export class AppModule { }
+```
+
+
+
+
+### Track Page Load Metrics
+
+Just sit back and relax. Firebase will automatically collect the same page load stats you can find locally in a [Chrome Lighthouse](https://developers.google.com/web/tools/lighthouse/) audit, but will be segmented by region, device, browser, and can even tell you if a service worker is installed. In addition, you can view the latency and payload size of any HTTP request that flows through your app.
+
+{{< figure src="img/firebase-performance-time.png" caption="Firebase Performance will automatically track page loads stats" >}}
+
+## User Login
+
+A common use-case for a custom trace is your user authentication flow. Failing to get a user logged in or signed up quickly is a good recipe to bounce them forever.
+
+
+#### What is the difference between an Attribute and a Metric?
+
+An attribute is a string value segments data on the Firebase console. A metric is a numeric value that can be charted and might change over the lifecycle of the trace - in other words, a metric is a value that you want to measure over time.
+
+
+
+
+### Trace Login Time
+
+For example, **How long does it take the average user to get logged in?**. But we don't have to stop there - we can also add custom attributes to segmenent reports based on custom data attributes and trace specific errors that happen during the login process.
+
+{{< file "ngts" "login.component.ts" >}}
+```typescript
+import { Component } from '@angular/core';
+import { AngularFireAuth } from '@angular/fire/auth';
+
+import * as firebase from 'firebase/app';
+const perf = firebase.performance();
+
+@Component(...)
+export class LoginComponent {
+
+ constructor(private afAuth: AngularFireAuth) {}
+
+ async login(email, pass) {
+ const trace = perf.trace('userLogin');
+ trace.start();
+
+ try {
+ const credential = await this.afAuth.signInWithEmailAndPassword(email, pass);
+
+ trace.putAttribute('verified', `${credential.user.emailVerified}`);
+ trace.stop();
+
+ } catch (err) {
+ trace.putAttribute('errorCode', err.code);
+ trace.stop();
+ }
+
+ }
+
+}
+
+```
+
+{{< figure src="img/login-perf.png" caption="Metrics related to the user login process" >}}
+
+### Trace Lifecycle Hooks
+
+On iOS and Android, Firebase runs a screen trace to measure the lifetime of a screen detect frozen screens. You can use lifecycle hooks in your preferred framework to get similar results on the web. Here's how we can archive this in Angular:
+
+{{< file "ngts" "login.component.ts" >}}
+```typescript
+export class LoginComponent implements OnInit, OnDestroy {
+
+ screenTrace: firebase.performance.Trace;
+
+
+ ngOnInit() {
+ this.screenTrace = perf.trace('loginScreen');
+ this.screenTrace.start();
+ }
+
+ ngOnDestroy() {
+ this.screenTrace.stop();
+ }
+```
+
+## Firestore
+
+Firebase Perf can also be very useful when it comes understanding database performance.
+
+### Trace Read Latency and Quantity
+
+**How many documents did I read in a collection and how long did it take?** Normally, you should have a `limit` set on your queries to avoid excessive reads in large collections, but this is not always possible. The `incrementMetric` method is especially useful if you want to keep a running count of a value during the trace.
+
+
+{{< file "ngts" "some.component.ts" >}}
+```typescript
+ async loadUserData() {
+ const trace = perf.trace('itemsQuery');
+
+ const items = await this.db.collection('items').get();
+ trace.incrementMetric('collectionSize', items.size);
+
+ const things = await this.db.collection('things').get();
+ trace.incrementMetric('collectionSize', things.size);
+
+ trace.stop();
+ }
+```
+
+### AngularFire Performance with RxJS
+
+In this section, we will take an early look at some of the custom RxJS pipes proposed for the [@angular/fire](https://github.com/angular/angularfire2) package. By simply adding the `trace` pipe we can start/stop a trace after an Observable emits data.
+
+{{< file "ngts" "items.component.ts" >}}
+```typescript
+export class ItemsComponent implements OnInit {
+
+ constructor(private perf: AngularFirePerformance, private db: AngularFirestore) { }
+
+ items;
+
+
+ ngOnInit() {
+
+ this.items = this.db.collection('items').snapshotChanges()
+ .pipe(
+
+ // Custom RxJS Operator
+ this.perf.trace('itemsQuery')
+
+ );
+
+ }
+
+}
+```
+
+## Other Ideas for Performance Monitoring
+
+Firebase Performance can be used for almost any feature you suspect might be a bottleneck that hurts the user experience. Here is a short list of additional areas you may want to consider for performance monitoring.
+
+- Complex API Calls (Beyond the automatic traces on HTTP calls)
+- Firebase Storage Uploads & Downloads
+- Component Routing and Rendering
+- Use `trace.record()` to monitor activity on specific time intervals.
+
+
diff --git a/hugo/content/lessons/firebase-performance-quickstart/img/.gitkeep b/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firebase-performance-quickstart/img/.gitkeep
rename to content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/.gitkeep
diff --git a/hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/featured.jpg b/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/featured.jpg
rename to content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/featured.jpg
diff --git a/hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/featured.png b/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/featured.png
rename to content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/featured.png
diff --git a/hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/featured.webp b/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/featured.webp
rename to content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/featured.webp
diff --git a/hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/image1-576x1024.png b/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/image1-576x1024.png
similarity index 100%
rename from hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/image1-576x1024.png
rename to content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/image1-576x1024.png
diff --git a/hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/phonecaptcha.gif b/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/phonecaptcha.gif
similarity index 100%
rename from hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/phonecaptcha.gif
rename to content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/phonecaptcha.gif
diff --git a/hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/phonesuccess.gif b/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/phonesuccess.gif
similarity index 100%
rename from hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/phonesuccess.gif
rename to content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/phonesuccess.gif
diff --git a/hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/index.md b/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/index.md
similarity index 100%
rename from hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/index.md
rename to content/lessons/firebase-phone-authentication-with-angular-4-tutorial/index.md
diff --git a/hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/.gitkeep b/content/lessons/firebase-quickstart/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firebase-phone-authentication-with-angular-4-tutorial/img/.gitkeep
rename to content/lessons/firebase-quickstart/img/.gitkeep
diff --git a/hugo/content/lessons/firebase-quickstart/img/auth-google.png b/content/lessons/firebase-quickstart/img/auth-google.png
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/img/auth-google.png
rename to content/lessons/firebase-quickstart/img/auth-google.png
diff --git a/hugo/content/lessons/firebase-quickstart/img/composite-index.png b/content/lessons/firebase-quickstart/img/composite-index.png
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/img/composite-index.png
rename to content/lessons/firebase-quickstart/img/composite-index.png
diff --git a/hugo/content/lessons/firebase-quickstart/img/demo-auth.png b/content/lessons/firebase-quickstart/img/demo-auth.png
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/img/demo-auth.png
rename to content/lessons/firebase-quickstart/img/demo-auth.png
diff --git a/hugo/content/lessons/firebase-quickstart/img/featured.jpg b/content/lessons/firebase-quickstart/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/img/featured.jpg
rename to content/lessons/firebase-quickstart/img/featured.jpg
diff --git a/hugo/content/lessons/firebase-quickstart/img/featured.png b/content/lessons/firebase-quickstart/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/img/featured.png
rename to content/lessons/firebase-quickstart/img/featured.png
diff --git a/hugo/content/lessons/firebase-quickstart/img/featured.webp b/content/lessons/firebase-quickstart/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/img/featured.webp
rename to content/lessons/firebase-quickstart/img/featured.webp
diff --git a/hugo/content/lessons/firebase-quickstart/img/firebase-web-app.png b/content/lessons/firebase-quickstart/img/firebase-web-app.png
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/img/firebase-web-app.png
rename to content/lessons/firebase-quickstart/img/firebase-web-app.png
diff --git a/hugo/content/lessons/firebase-quickstart/img/firestore-enable.png b/content/lessons/firebase-quickstart/img/firestore-enable.png
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/img/firestore-enable.png
rename to content/lessons/firebase-quickstart/img/firestore-enable.png
diff --git a/hugo/content/lessons/firebase-quickstart/img/firestore-things.png b/content/lessons/firebase-quickstart/img/firestore-things.png
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/img/firestore-things.png
rename to content/lessons/firebase-quickstart/img/firestore-things.png
diff --git a/hugo/content/lessons/firebase-quickstart/img/hosting-deploy.png b/content/lessons/firebase-quickstart/img/hosting-deploy.png
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/img/hosting-deploy.png
rename to content/lessons/firebase-quickstart/img/hosting-deploy.png
diff --git a/hugo/content/lessons/firebase-quickstart/img/project-create.png b/content/lessons/firebase-quickstart/img/project-create.png
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/img/project-create.png
rename to content/lessons/firebase-quickstart/img/project-create.png
diff --git a/hugo/content/lessons/firebase-quickstart/img/project-files.png b/content/lessons/firebase-quickstart/img/project-files.png
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/img/project-files.png
rename to content/lessons/firebase-quickstart/img/project-files.png
diff --git a/hugo/content/lessons/firebase-quickstart/index.md b/content/lessons/firebase-quickstart/index.md
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/index.md
rename to content/lessons/firebase-quickstart/index.md
diff --git a/hugo/content/lessons/firebase-quickstart/img/.gitkeep b/content/lessons/firebase-riverpod-flutter/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firebase-quickstart/img/.gitkeep
rename to content/lessons/firebase-riverpod-flutter/img/.gitkeep
diff --git a/hugo/content/lessons/firebase-riverpod-flutter/img/featured.jpg b/content/lessons/firebase-riverpod-flutter/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firebase-riverpod-flutter/img/featured.jpg
rename to content/lessons/firebase-riverpod-flutter/img/featured.jpg
diff --git a/hugo/content/lessons/firebase-riverpod-flutter/img/featured.png b/content/lessons/firebase-riverpod-flutter/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firebase-riverpod-flutter/img/featured.png
rename to content/lessons/firebase-riverpod-flutter/img/featured.png
diff --git a/hugo/content/lessons/firebase-riverpod-flutter/img/featured.webp b/content/lessons/firebase-riverpod-flutter/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firebase-riverpod-flutter/img/featured.webp
rename to content/lessons/firebase-riverpod-flutter/img/featured.webp
diff --git a/content/lessons/firebase-riverpod-flutter/index.md b/content/lessons/firebase-riverpod-flutter/index.md
new file mode 100644
index 000000000..61e8d1107
--- /dev/null
+++ b/content/lessons/firebase-riverpod-flutter/index.md
@@ -0,0 +1,190 @@
+---
+title: Riverpod with Firebase
+lastmod: 2021-11-27T13:45:48-07:00
+publishdate: 2021-11-27T13:45:48-07:00
+author: Jeff Delaney
+draft: false
+description: Use Flutter Riverpod to manage Firebase auth state and relational realtime data in Firestore
+tags:
+ - pro
+ - flutter
+ - firebase
+
+github: https://github.com/fireship-io/riverpod-firebase-demo
+vimeo: 650906808
+pro: true
+---
+
+[Riverpod](https://riverpod.dev/docs/getting_started/) is a reactive state-management library for Flutter that can simplify the way global data is shared throughout your application. It is especially useful with [Firebase](https://firebase.flutter.dev/) because it allows to you easily join Streams together, like a Firestore document with a Firebase Auth user.
+
+The following tutorial demonstrates how to use Riverpod to manage Firebase Auth state and relational realtime data in Firestore.
+
+**Learning Objectives**
+
+- Riverpod Basics w/ Firebase
+- Listen to the current user's auth state
+- Join realtime Firestore data based on current user's UID
+
+## Setup
+
+This tutorial assumes you have already installed [Firebase](https://firebase.flutter.dev/) into your app. Install Riverpod by adding it to the `pubspec.yaml` file.
+
+### Starter Code
+
+The application should initialize Firebase and look something like this:
+
+{{< file "yaml" "pubspec.yaml" >}}
+```yaml
+firebase_core: "^1.10.0"
+cloud_firestore: "^3.1.0"
+firebase_auth: "^3.2.0"
+flutter_riverpod: ^1.0.0
+```
+
+The main function should initialize Firebase and the root widget should be wrapped in a `ProviderScope`.
+
+{{< file "flutter" "main.dart" >}}
+```dart
+import 'dart:async';
+import 'package:flutter/material.dart';
+import 'package:hooks_riverpod/hooks_riverpod.dart';
+import 'package:firebase_core/firebase_core.dart';
+import 'package:firebase_auth/firebase_auth.dart';
+import 'package:cloud_firestore/cloud_firestore.dart';
+
+
+void main() async {
+ WidgetsFlutterBinding.ensureInitialized();
+ await Firebase.initializeApp();
+ runApp(
+ ProviderScope(
+ child: MyApp(),
+ ),
+ );
+}
+```
+
+## Riverpod Basics
+
+### Provider
+
+A provider is a global state container that can be used to share data between widgets.
+
+{{< file "flutter" "main.dart" >}}
+```dart
+final helloWorldProvider = Provider((_) => 'Hello world');
+```
+
+### ConsumerWidget
+
+Riverpod provides a base class called `ConsumerWidget` to replace the `StatefulWidget` class. It has the ability to listen to changes in the state of a provider. It provides a widget reference that contains a `watch` method to access the current provider value.
+
+{{< file "flutter" "main.dart" >}}
+```dart
+class MyApp extends ConsumerWidget {
+ @override
+ Widget build(BuildContext context, WidgetRef ref) {
+
+ final String helloWorld = ref.watch(helloWorldProvider);
+
+ return MaterialApp(
+ home: Scaffold(
+ appBar: AppBar(
+ title: Text(helloWorld),
+ ),
+ ),
+ );
+ }
+}
+```
+
+## Firebase Auth Provider
+
+FirebaseAuth provides the current user as a `Stream`. Riverpod has a `StreamProvider` class that can wrap the Firebase auth state, allowing you to access the current user from any widget easily.
+
+### Create a StreamProvider
+
+A `StreamProvider` is just a provider that returns a `Stream`.
+
+
+```dart
+final userProvider = StreamProvider(
+ (ref) => FirebaseAuth.instance.authStateChanges(),
+);
+```
+
+### Consume a StreamProvider
+
+The provider contains a `when` method that will build a different UI depending on the `data`, `loading`, and `error` states.
+
+{{< file "flutter" "main.dart" >}}
+```dart
+class MyApp extends ConsumerWidget {
+ @override
+ Widget build(BuildContext context, WidgetRef ref) {
+
+ final user = ref.watch(userProvider);
+
+ return user.when(
+ data: (user) {
+ return MaterialApp(...);
+ },
+ error: (e, s) => Text('error'),
+ loading: () => Text('loading'),
+ );
+ }
+}
+
+```
+
+## Firestore Provider
+
+In this section, we query a Firestore document with the UID and listen to changes in realtime. The beauty of Riverpod is that we can compose providers together to handle complex relationships that react to changes in other providers.
+
+### Query Firestore with UID
+
+This demo assumes every user has an account document in Firestore, like `accounts/{uid}`. The provider will query Firestore with the current user's UID. If the UID does not exist, just return an empty `Stream`.
+
+Note: This pattern is similar to the [relational switchMap](/courses/flutter-firebase/firestore-relational/) technique used in the Full Flutter Course with RxDart.
+
+{{< file "flutter" "main.dart" >}}
+```dart
+final dataProvider = StreamProvider(
+ (ref) {
+ final userStream = ref.watch(userProvider);
+
+ var user = userStream.value;
+
+ if (user != null) {
+ var docRef =
+ FirebaseFirestore.instance.collection('accounts').doc(user.uid);
+ return docRef.snapshots().map((doc) => doc.data());
+ } else {
+ return Stream.empty();
+ }
+ },
+);
+```
+
+### Consume Realtime Data
+
+Now consume the provider just like the previous example.
+
+```dart
+class AccountDetails extends ConsumerWidget {
+ @override
+ Widget build(context, ref) {
+ final data = ref.watch(dataProvider);
+
+ return data.when(
+ data: (data) {
+ return Text(data?['hello'] ?? 'empty');
+ },
+ error: (e, s) => Text('error'),
+ loading: () => Text('waiting for data...'),
+ );
+ }
+}
+```
+
+
diff --git a/hugo/content/lessons/firebase-riverpod-flutter/img/.gitkeep b/content/lessons/firebase-tips-and-tricks/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firebase-riverpod-flutter/img/.gitkeep
rename to content/lessons/firebase-tips-and-tricks/img/.gitkeep
diff --git a/hugo/content/lessons/firebase-tips-and-tricks/img/featured.jpg b/content/lessons/firebase-tips-and-tricks/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firebase-tips-and-tricks/img/featured.jpg
rename to content/lessons/firebase-tips-and-tricks/img/featured.jpg
diff --git a/hugo/content/lessons/firebase-tips-and-tricks/img/featured.png b/content/lessons/firebase-tips-and-tricks/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firebase-tips-and-tricks/img/featured.png
rename to content/lessons/firebase-tips-and-tricks/img/featured.png
diff --git a/hugo/content/lessons/firebase-tips-and-tricks/img/featured.webp b/content/lessons/firebase-tips-and-tricks/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firebase-tips-and-tricks/img/featured.webp
rename to content/lessons/firebase-tips-and-tricks/img/featured.webp
diff --git a/hugo/content/lessons/firebase-tips-and-tricks/index.md b/content/lessons/firebase-tips-and-tricks/index.md
similarity index 100%
rename from hugo/content/lessons/firebase-tips-and-tricks/index.md
rename to content/lessons/firebase-tips-and-tricks/index.md
diff --git a/hugo/content/lessons/firebase-tips-and-tricks/img/.gitkeep b/content/lessons/firebase-v9-migration/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firebase-tips-and-tricks/img/.gitkeep
rename to content/lessons/firebase-v9-migration/img/.gitkeep
diff --git a/hugo/content/lessons/firebase-v9-migration/img/featured.jpg b/content/lessons/firebase-v9-migration/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firebase-v9-migration/img/featured.jpg
rename to content/lessons/firebase-v9-migration/img/featured.jpg
diff --git a/hugo/content/lessons/firebase-v9-migration/img/featured.png b/content/lessons/firebase-v9-migration/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firebase-v9-migration/img/featured.png
rename to content/lessons/firebase-v9-migration/img/featured.png
diff --git a/hugo/content/lessons/firebase-v9-migration/img/featured.webp b/content/lessons/firebase-v9-migration/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firebase-v9-migration/img/featured.webp
rename to content/lessons/firebase-v9-migration/img/featured.webp
diff --git a/hugo/content/lessons/firebase-v9-migration/index.md b/content/lessons/firebase-v9-migration/index.md
similarity index 100%
rename from hugo/content/lessons/firebase-v9-migration/index.md
rename to content/lessons/firebase-v9-migration/index.md
diff --git a/hugo/content/lessons/firebase-v9-migration/img/.gitkeep b/content/lessons/firestore-advanced-usage-angularfire/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firebase-v9-migration/img/.gitkeep
rename to content/lessons/firestore-advanced-usage-angularfire/img/.gitkeep
diff --git a/hugo/content/lessons/firestore-advanced-usage-angularfire/img/doc-reference-angularfire.png b/content/lessons/firestore-advanced-usage-angularfire/img/doc-reference-angularfire.png
similarity index 100%
rename from hugo/content/lessons/firestore-advanced-usage-angularfire/img/doc-reference-angularfire.png
rename to content/lessons/firestore-advanced-usage-angularfire/img/doc-reference-angularfire.png
diff --git a/hugo/content/lessons/firestore-advanced-usage-angularfire/img/featured.jpg b/content/lessons/firestore-advanced-usage-angularfire/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firestore-advanced-usage-angularfire/img/featured.jpg
rename to content/lessons/firestore-advanced-usage-angularfire/img/featured.jpg
diff --git a/hugo/content/lessons/firestore-advanced-usage-angularfire/img/featured.png b/content/lessons/firestore-advanced-usage-angularfire/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firestore-advanced-usage-angularfire/img/featured.png
rename to content/lessons/firestore-advanced-usage-angularfire/img/featured.png
diff --git a/hugo/content/lessons/firestore-advanced-usage-angularfire/img/featured.webp b/content/lessons/firestore-advanced-usage-angularfire/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firestore-advanced-usage-angularfire/img/featured.webp
rename to content/lessons/firestore-advanced-usage-angularfire/img/featured.webp
diff --git a/hugo/content/lessons/firestore-advanced-usage-angularfire/index.md b/content/lessons/firestore-advanced-usage-angularfire/index.md
similarity index 100%
rename from hugo/content/lessons/firestore-advanced-usage-angularfire/index.md
rename to content/lessons/firestore-advanced-usage-angularfire/index.md
diff --git a/hugo/content/lessons/firestore-advanced-usage-angularfire/img/.gitkeep b/content/lessons/firestore-array-queries-guide/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firestore-advanced-usage-angularfire/img/.gitkeep
rename to content/lessons/firestore-array-queries-guide/img/.gitkeep
diff --git a/hugo/content/lessons/firestore-array-queries-guide/img/featured.jpg b/content/lessons/firestore-array-queries-guide/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firestore-array-queries-guide/img/featured.jpg
rename to content/lessons/firestore-array-queries-guide/img/featured.jpg
diff --git a/hugo/content/lessons/firestore-array-queries-guide/img/featured.png b/content/lessons/firestore-array-queries-guide/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firestore-array-queries-guide/img/featured.png
rename to content/lessons/firestore-array-queries-guide/img/featured.png
diff --git a/hugo/content/lessons/firestore-array-queries-guide/img/featured.webp b/content/lessons/firestore-array-queries-guide/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firestore-array-queries-guide/img/featured.webp
rename to content/lessons/firestore-array-queries-guide/img/featured.webp
diff --git a/hugo/content/lessons/firestore-array-queries-guide/index.md b/content/lessons/firestore-array-queries-guide/index.md
similarity index 100%
rename from hugo/content/lessons/firestore-array-queries-guide/index.md
rename to content/lessons/firestore-array-queries-guide/index.md
diff --git a/hugo/content/lessons/firestore-array-queries-guide/img/.gitkeep b/content/lessons/firestore-cloud-functions-data-aggregation/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firestore-array-queries-guide/img/.gitkeep
rename to content/lessons/firestore-cloud-functions-data-aggregation/img/.gitkeep
diff --git a/hugo/content/lessons/firestore-cloud-functions-data-aggregation/img/agg-pattern.png b/content/lessons/firestore-cloud-functions-data-aggregation/img/agg-pattern.png
similarity index 100%
rename from hugo/content/lessons/firestore-cloud-functions-data-aggregation/img/agg-pattern.png
rename to content/lessons/firestore-cloud-functions-data-aggregation/img/agg-pattern.png
diff --git a/hugo/content/lessons/firestore-cloud-functions-data-aggregation/img/aggregate-firestore.gif b/content/lessons/firestore-cloud-functions-data-aggregation/img/aggregate-firestore.gif
similarity index 100%
rename from hugo/content/lessons/firestore-cloud-functions-data-aggregation/img/aggregate-firestore.gif
rename to content/lessons/firestore-cloud-functions-data-aggregation/img/aggregate-firestore.gif
diff --git a/hugo/content/lessons/firestore-cloud-functions-data-aggregation/img/featured.jpg b/content/lessons/firestore-cloud-functions-data-aggregation/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firestore-cloud-functions-data-aggregation/img/featured.jpg
rename to content/lessons/firestore-cloud-functions-data-aggregation/img/featured.jpg
diff --git a/hugo/content/lessons/firestore-cloud-functions-data-aggregation/img/featured.png b/content/lessons/firestore-cloud-functions-data-aggregation/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firestore-cloud-functions-data-aggregation/img/featured.png
rename to content/lessons/firestore-cloud-functions-data-aggregation/img/featured.png
diff --git a/hugo/content/lessons/firestore-cloud-functions-data-aggregation/img/featured.webp b/content/lessons/firestore-cloud-functions-data-aggregation/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firestore-cloud-functions-data-aggregation/img/featured.webp
rename to content/lessons/firestore-cloud-functions-data-aggregation/img/featured.webp
diff --git a/hugo/content/lessons/firestore-cloud-functions-data-aggregation/index.md b/content/lessons/firestore-cloud-functions-data-aggregation/index.md
similarity index 100%
rename from hugo/content/lessons/firestore-cloud-functions-data-aggregation/index.md
rename to content/lessons/firestore-cloud-functions-data-aggregation/index.md
diff --git a/hugo/content/lessons/firestore-cloud-functions-data-aggregation/img/.gitkeep b/content/lessons/firestore-data-modeling-and-queries/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firestore-cloud-functions-data-aggregation/img/.gitkeep
rename to content/lessons/firestore-data-modeling-and-queries/img/.gitkeep
diff --git a/hugo/content/lessons/firestore-data-modeling-and-queries/img/firestore-belongs-to.png b/content/lessons/firestore-data-modeling-and-queries/img/firestore-belongs-to.png
similarity index 100%
rename from hugo/content/lessons/firestore-data-modeling-and-queries/img/firestore-belongs-to.png
rename to content/lessons/firestore-data-modeling-and-queries/img/firestore-belongs-to.png
diff --git a/hugo/content/lessons/firestore-data-modeling-and-queries/img/firestore-has-many.png b/content/lessons/firestore-data-modeling-and-queries/img/firestore-has-many.png
similarity index 100%
rename from hugo/content/lessons/firestore-data-modeling-and-queries/img/firestore-has-many.png
rename to content/lessons/firestore-data-modeling-and-queries/img/firestore-has-many.png
diff --git a/hugo/content/lessons/firestore-data-modeling-and-queries/img/firestore-has-one.png b/content/lessons/firestore-data-modeling-and-queries/img/firestore-has-one.png
similarity index 100%
rename from hugo/content/lessons/firestore-data-modeling-and-queries/img/firestore-has-one.png
rename to content/lessons/firestore-data-modeling-and-queries/img/firestore-has-one.png
diff --git a/hugo/content/lessons/firestore-data-modeling-and-queries/img/firestore-query-console.png b/content/lessons/firestore-data-modeling-and-queries/img/firestore-query-console.png
similarity index 100%
rename from hugo/content/lessons/firestore-data-modeling-and-queries/img/firestore-query-console.png
rename to content/lessons/firestore-data-modeling-and-queries/img/firestore-query-console.png
diff --git a/content/lessons/firestore-data-modeling-and-queries/index.md b/content/lessons/firestore-data-modeling-and-queries/index.md
new file mode 100644
index 000000000..a1453e906
--- /dev/null
+++ b/content/lessons/firestore-data-modeling-and-queries/index.md
@@ -0,0 +1,153 @@
+---
+title: Firestore Data Modeling and Queries
+lastmod: 2019-02-06T20:32:21-07:00
+publishdate: 2019-02-06T20:32:21-07:00
+author: Jeff Delaney
+draft: true
+description: Learn how to handle complex relationships and queries with Firebase Firestore
+tags:
+ - javascript
+ - firestore
+ - nosql
+ - firebase
+
+
+youtube:
+github:
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+[Cloud Firestore](https://firebase.google.com/docs/firestore/query-data/queries) recently came out of beta and can now be used in production with full confidence. Still, the greatest challenge for any app using a NoSQL database almost always comes down to **data modeling**. Firestore gives you a ton of flexibility, but that means you have more decisions to consider.
+
+The following lesson will take you through a variety of practical examples of data modeling and querying on Firestore.
+
+
+
+
+This post first appeared as [Episode 85 on AngularFirebase.com](https://angularfirebase.com/lessons/firestore-nosql-data-modeling-by-example/) and has been fully updated for Firestore v1.
+
+
+## Key Concepts
+
+Here are few key principles to follow when using Firestore.
+
+- Let your frontend design drive decisions about data modeling.
+- Collections can be infinitely large, while documents less than 1Mb
+- Data duplication is OK
+
+
+https://firebase.google.com/docs/firestore/manage-data/structure-data
+
+
+### Types of Queries
+
+Below are examples of the types of queries you can make in Firestore. They can be chained together to build complex compound queries.
+
+{{< file "js" "query.js" >}}
+```js
+// Single Document Read
+const doc = ref.doc(path);
+
+// Full Collection Read
+const col = ref.collection(path);
+
+// Ordered Collection
+col.orderBy(field, 'asc')
+
+// Limited Collection
+col.limit(10);
+
+// Paginated Collection, startAt endAt endAfter endBefore
+col.orderBy(field, 'asc').startAt(offset).limit(10);
+
+// Where, an expressive query
+col.where(field, '>=', value)
+```
+
+**Pro Tip ⚡** You can build queries directly from the Firebase Console and it will generate the necessary code for you.
+
+{{< figure src="img/firestore-query-console.png" alt="Making a query in firestore directly from the console" >}}
+
+
+## Has-One or Belongs-To Relationship
+
+One of the most common data relationships you will encounter is when an entity **has one** item. Or in other words, an item **belongs-to** the entity. If you're using Firebase Auth, you can model ownership giving a document the same ID as the user.
+
+Example: A user has one account. An account belongs to a user.
+
+
+### Database Structure
+
+Notice how both documents share the same unique ID. This allows you to associate and join multiple documents to a single user/entity.
+
+
+{{< figure src="img/firestore-has-one.png" alt="A has one relationship in Firestore" >}}
+{{< figure src="img/firestore-belongs-to.png" alt="A belongs-to relationship in Firestore" >}}
+
+### Query
+
+Now we can query the related data with a basic document read. First, make a reference to the document path, then decide how you want to consume the data.
+
+{{< file "js" "fire.js" >}}
+```js
+const db = firebase.firestore();
+
+const uid = 'userXYZ';
+
+// 1. Make a reference
+const userRef = db.collection('users').doc(uid);
+const acctRef = db.doc(`accounts/${uid}`);
+
+// 2a. single read
+userRef.get().then(snapshot => doStuff);
+
+// 2b. or setup a realtime listener
+acctRef.onSnapshot(snapshot => doStuff);
+```
+
+
+## Has-Many Relationship - Embedded
+
+It is also possible for an entity to **have-many** of a certain item.
+
+Example: A user has many tasks
+
+
+### Database Structure
+
+{{< figure src="img/firestore-has-one.png" alt="A has one relationship in Firestore" >}}
+
+### Query
+
+## Has-Many
+
+
+
+
+- Has one, belongs to
+- Has many
+- Many to many, via embedded array/map
+- Many to many, via connecting col
+
+
+
+## Recipes
+
+Jason baisden So man...thought I was getting the hang of Cloud Firestore. I have an object, LearningNote. Each LearningNote correlates to a goal. I've set this up in my code such that LearningNote has a property of type Goal. So now my LearningNote service is querying my Goal service for each object returned. In Firestore, LearningNote and Goals are their own collections. Any thoughts on how to tidy this up? Is this the "right" way to do it? I've thought about making LearningNotes a child collection of Goals, but am still wondering how I'd get the goal information for each learning note.
+
+alterNerDive hey pro-members, what is the better solution:
+I have 1 collection with articles, articles-doc has a field `type` and could have value A or B.
+On one site, i load this collection and build 2 lists, 1 for `type===A` and 1 for `type===B`.
+
+What is the better solution:
+Load whole collection and filter on template with `*ngIf="article.type===A"` or load data 2 times with filter in query?
+
+
+Anyone have a firestore solution for indexes and tagging when you're querying with tags (setup as based boolean maps) and ordering by something like updatedAt? I have a collection of documents that can have any number of topic based tags. I can query documents that match multiple tags until I try and order the documents and then Firebase wants to create a index for each tag (which is not viable). Any suggestions much appreciated.
\ No newline at end of file
diff --git a/hugo/content/lessons/firestore-data-modeling-and-queries/img/.gitkeep b/content/lessons/firestore-joins-similar-to-sql/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firestore-data-modeling-and-queries/img/.gitkeep
rename to content/lessons/firestore-joins-similar-to-sql/img/.gitkeep
diff --git a/hugo/content/lessons/firestore-joins-similar-to-sql/img/collection-join-firestore.png b/content/lessons/firestore-joins-similar-to-sql/img/collection-join-firestore.png
similarity index 100%
rename from hugo/content/lessons/firestore-joins-similar-to-sql/img/collection-join-firestore.png
rename to content/lessons/firestore-joins-similar-to-sql/img/collection-join-firestore.png
diff --git a/hugo/content/lessons/firestore-joins-similar-to-sql/img/doc-to-doc-join.png b/content/lessons/firestore-joins-similar-to-sql/img/doc-to-doc-join.png
similarity index 100%
rename from hugo/content/lessons/firestore-joins-similar-to-sql/img/doc-to-doc-join.png
rename to content/lessons/firestore-joins-similar-to-sql/img/doc-to-doc-join.png
diff --git a/hugo/content/lessons/firestore-joins-similar-to-sql/img/featured.jpg b/content/lessons/firestore-joins-similar-to-sql/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firestore-joins-similar-to-sql/img/featured.jpg
rename to content/lessons/firestore-joins-similar-to-sql/img/featured.jpg
diff --git a/hugo/content/lessons/firestore-joins-similar-to-sql/img/featured.png b/content/lessons/firestore-joins-similar-to-sql/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firestore-joins-similar-to-sql/img/featured.png
rename to content/lessons/firestore-joins-similar-to-sql/img/featured.png
diff --git a/hugo/content/lessons/firestore-joins-similar-to-sql/img/featured.webp b/content/lessons/firestore-joins-similar-to-sql/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firestore-joins-similar-to-sql/img/featured.webp
rename to content/lessons/firestore-joins-similar-to-sql/img/featured.webp
diff --git a/hugo/content/lessons/firestore-joins-similar-to-sql/index.md b/content/lessons/firestore-joins-similar-to-sql/index.md
similarity index 100%
rename from hugo/content/lessons/firestore-joins-similar-to-sql/index.md
rename to content/lessons/firestore-joins-similar-to-sql/index.md
diff --git a/hugo/content/lessons/firestore-joins-similar-to-sql/img/.gitkeep b/content/lessons/firestore-nosql-data-modeling-by-example/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firestore-joins-similar-to-sql/img/.gitkeep
rename to content/lessons/firestore-nosql-data-modeling-by-example/img/.gitkeep
diff --git a/hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/embedded-data-firestore-07.png b/content/lessons/firestore-nosql-data-modeling-by-example/img/embedded-data-firestore-07.png
similarity index 100%
rename from hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/embedded-data-firestore-07.png
rename to content/lessons/firestore-nosql-data-modeling-by-example/img/embedded-data-firestore-07.png
diff --git a/hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/featured.jpg b/content/lessons/firestore-nosql-data-modeling-by-example/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/featured.jpg
rename to content/lessons/firestore-nosql-data-modeling-by-example/img/featured.jpg
diff --git a/hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/featured.png b/content/lessons/firestore-nosql-data-modeling-by-example/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/featured.png
rename to content/lessons/firestore-nosql-data-modeling-by-example/img/featured.png
diff --git a/hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/featured.webp b/content/lessons/firestore-nosql-data-modeling-by-example/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/featured.webp
rename to content/lessons/firestore-nosql-data-modeling-by-example/img/featured.webp
diff --git a/hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/firestore-subcollection-09.png b/content/lessons/firestore-nosql-data-modeling-by-example/img/firestore-subcollection-09.png
similarity index 100%
rename from hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/firestore-subcollection-09.png
rename to content/lessons/firestore-nosql-data-modeling-by-example/img/firestore-subcollection-09.png
diff --git a/hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/firestore-threaded-comments.gif b/content/lessons/firestore-nosql-data-modeling-by-example/img/firestore-threaded-comments.gif
similarity index 100%
rename from hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/firestore-threaded-comments.gif
rename to content/lessons/firestore-nosql-data-modeling-by-example/img/firestore-threaded-comments.gif
diff --git a/hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/nosql-group-chat-05.png b/content/lessons/firestore-nosql-data-modeling-by-example/img/nosql-group-chat-05.png
similarity index 100%
rename from hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/nosql-group-chat-05.png
rename to content/lessons/firestore-nosql-data-modeling-by-example/img/nosql-group-chat-05.png
diff --git a/hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/nosql-model-likes-04.png b/content/lessons/firestore-nosql-data-modeling-by-example/img/nosql-model-likes-04.png
similarity index 100%
rename from hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/nosql-model-likes-04.png
rename to content/lessons/firestore-nosql-data-modeling-by-example/img/nosql-model-likes-04.png
diff --git a/hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/root-col-firestire-08.png b/content/lessons/firestore-nosql-data-modeling-by-example/img/root-col-firestire-08.png
similarity index 100%
rename from hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/root-col-firestire-08.png
rename to content/lessons/firestore-nosql-data-modeling-by-example/img/root-col-firestire-08.png
diff --git a/hugo/content/lessons/firestore-nosql-data-modeling-by-example/index.md b/content/lessons/firestore-nosql-data-modeling-by-example/index.md
similarity index 100%
rename from hugo/content/lessons/firestore-nosql-data-modeling-by-example/index.md
rename to content/lessons/firestore-nosql-data-modeling-by-example/index.md
diff --git a/hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/.gitkeep b/content/lessons/firestore-pagination-guide/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firestore-nosql-data-modeling-by-example/img/.gitkeep
rename to content/lessons/firestore-pagination-guide/img/.gitkeep
diff --git a/hugo/content/lessons/firestore-pagination-guide/img/featured.jpg b/content/lessons/firestore-pagination-guide/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/firestore-pagination-guide/img/featured.jpg
rename to content/lessons/firestore-pagination-guide/img/featured.jpg
diff --git a/hugo/content/lessons/firestore-pagination-guide/img/featured.png b/content/lessons/firestore-pagination-guide/img/featured.png
similarity index 100%
rename from hugo/content/lessons/firestore-pagination-guide/img/featured.png
rename to content/lessons/firestore-pagination-guide/img/featured.png
diff --git a/hugo/content/lessons/firestore-pagination-guide/img/featured.webp b/content/lessons/firestore-pagination-guide/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/firestore-pagination-guide/img/featured.webp
rename to content/lessons/firestore-pagination-guide/img/featured.webp
diff --git a/hugo/content/lessons/firestore-pagination-guide/img/firestore-pagination.gif b/content/lessons/firestore-pagination-guide/img/firestore-pagination.gif
similarity index 100%
rename from hugo/content/lessons/firestore-pagination-guide/img/firestore-pagination.gif
rename to content/lessons/firestore-pagination-guide/img/firestore-pagination.gif
diff --git a/content/lessons/firestore-pagination-guide/index.md b/content/lessons/firestore-pagination-guide/index.md
new file mode 100644
index 000000000..b6f1e4413
--- /dev/null
+++ b/content/lessons/firestore-pagination-guide/index.md
@@ -0,0 +1,140 @@
+---
+title: Firestore Pagination Guide
+lastmod: 2019-11-26T09:17:06-07:00
+publishdate: 2019-11-26T09:17:06-07:00
+author: Jeff Delaney
+draft: false
+description: Pagination queries with Firestore that move forward and backward.
+tags:
+ - firebase
+ - firestore
+ - javascript
+
+type: lessons
+youtube: yFlhTvxcrQ8
+github: https://github.com/fireship-io/215-firestore-pagination
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+versions:
+ firebase: 7.3.0
+---
+
+[Pagination](https://en.wikipedia.org/wiki/Pagination) is the process of dividing data into discrete pages. In Firestore, it is achieved by ordering a collection by a field, limiting it to a consistent page size, then offsetting the query. The Firebase Web SDK v7.3.0 introduced a new `limitToLast(n)` method that makes the process much easier. The following lesson demonstrates how to paginate Firestore data in both a forward and backward direction and discusses advanced serverside techniques.
+
+
+[Firestore Pagination](https://cloud.google.com/firestore/docs/query-data/query-cursors) is a tricky requirement when also listening to realtime updates. If the position of data changes midway through a query, you might see results jump around the screen, which may confuse users. Pagination is most well suited for collections where the expected query ordering does not change frequently.
+
+
+{{< figure src="img/firestore-pagination.gif" caption="Demo of Pagination feature in Firestore" >}}
+
+## Firestore Pagination Implementation
+
+The following guide will provide high-level JavaScript code designed to work with any frontend UI framework. Check out the source code for a [full demo with Svelte](https://github.com/fireship-io/215-firestore-pagination).
+
+### Step 1 - Make the Initial Query
+
+You have to start somewhere...
+
+{{< file "js" "pagination.js" >}}
+```js
+const field = 'username';
+const pageSize = 3;
+
+const query = ref.orderBy(field).limit(pageSize);
+```
+
+### Step 2 - Move Forward
+
+The next page requires the the **last** document from current query results. Use the `startAfter` method to offset from that document.
+
+```js
+ function nextPage(last) {
+
+ return ref.orderBy(field)
+ .startAfter(last[field])
+ .limit(pageSize);
+ }
+```
+
+### Step 3 - Move Backward
+
+
+Going back to the previous page requires the the **first** document from current query results. Use the `endBefore` method followed by `limitToLast` to offset from that document.
+
+```js
+ function prevPage(first) {
+
+ return ref.orderBy(field)
+ .endBefore(first[field])
+ .limitToLast(pageSize);
+ }
+```
+
+### Step 4 - Show a list of pages
+
+
+Showing a list of pages requires us to know the total number of documents in the query. We cannot simply request the count from Firestore without reading the entire collection, which defeats the purpose of pagination. See the serverside pagination section for your options.
+
+
+## Serverside Pagination
+
+### Option 1 - Offest Query Operator
+
+The Firebase Admin SDK contains a special operator [offset](https://cloud.google.com/nodejs/docs/reference/firestore/0.11.x/Query#offset). A potential solution is to route all paginated requests through Cloud Function with a parameter for the offset.
+
+
+{{< file "js" "index.js" >}}
+```js
+const admin = require('firebase-admin');
+
+const pageThree = ref.orderBy(field).limit(10).offset(20);
+```
+
+### Option 2 - Aggregate data in a Cloud Function.
+
+Another option is create a field specifically for pagination. It is easier to handle pagination when you have a sequential set of values that increase by 1. For example, the number of the first document is 1, next is 2, then 3, 4, and so on.
+
+The cloud function below keeps track of the global count in a metadata document, then assigns the latest number when a new document is created. The operation is performed in a [transaction](https://firebase.google.com/docs/firestore/manage-data/transactions) to eliminate the potential for conflicts or duplicates.
+
+{{< file "js" "index.js" >}}
+```js
+const functions = require('firebase-functions');
+const admin = require('firebase-admin');
+admin.initializeApp();
+
+const db = admin.firestore();
+
+exports.keepCount = functions.firestore
+ .document('customers/{customerId}')
+ .onCreate((snapshot, context) => {
+
+ return db.runTransaction(async transaction => {
+
+ // Get the metadata and incement the count.
+ const metaRef = db.doc('metadata/customers');
+ const metaData = ( await transaction.get( metaRef ) ).data();
+
+ const number = metaData.count + 1;
+
+ transaction.update(metaRef, {
+ count: number
+ });
+
+ // Update Customer
+ const customerRef = snapshot.ref;
+
+ transaction.set(customerRef, {
+ number,
+ },
+ { merge: true }
+ );
+
+
+ });
+
+ });
+```
\ No newline at end of file
diff --git a/hugo/content/lessons/firestore-pagination-guide/img/.gitkeep b/content/lessons/five-useful-github-actions-examples/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/firestore-pagination-guide/img/.gitkeep
rename to content/lessons/five-useful-github-actions-examples/img/.gitkeep
diff --git a/hugo/content/lessons/five-useful-github-actions-examples/img/featured.jpg b/content/lessons/five-useful-github-actions-examples/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/five-useful-github-actions-examples/img/featured.jpg
rename to content/lessons/five-useful-github-actions-examples/img/featured.jpg
diff --git a/hugo/content/lessons/five-useful-github-actions-examples/img/featured.png b/content/lessons/five-useful-github-actions-examples/img/featured.png
similarity index 100%
rename from hugo/content/lessons/five-useful-github-actions-examples/img/featured.png
rename to content/lessons/five-useful-github-actions-examples/img/featured.png
diff --git a/hugo/content/lessons/five-useful-github-actions-examples/index.md b/content/lessons/five-useful-github-actions-examples/index.md
similarity index 100%
rename from hugo/content/lessons/five-useful-github-actions-examples/index.md
rename to content/lessons/five-useful-github-actions-examples/index.md
diff --git a/hugo/content/lessons/five-useful-github-actions-examples/img/.gitkeep b/content/lessons/flutter-drag-and-drop-basics/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/five-useful-github-actions-examples/img/.gitkeep
rename to content/lessons/flutter-drag-and-drop-basics/img/.gitkeep
diff --git a/hugo/content/lessons/flutter-drag-and-drop-basics/img/basic-scree.png b/content/lessons/flutter-drag-and-drop-basics/img/basic-scree.png
similarity index 100%
rename from hugo/content/lessons/flutter-drag-and-drop-basics/img/basic-scree.png
rename to content/lessons/flutter-drag-and-drop-basics/img/basic-scree.png
diff --git a/hugo/content/lessons/flutter-drag-and-drop-basics/img/demo-screen.png b/content/lessons/flutter-drag-and-drop-basics/img/demo-screen.png
similarity index 100%
rename from hugo/content/lessons/flutter-drag-and-drop-basics/img/demo-screen.png
rename to content/lessons/flutter-drag-and-drop-basics/img/demo-screen.png
diff --git a/hugo/content/lessons/flutter-drag-and-drop-basics/img/draggable-parts.png b/content/lessons/flutter-drag-and-drop-basics/img/draggable-parts.png
similarity index 100%
rename from hugo/content/lessons/flutter-drag-and-drop-basics/img/draggable-parts.png
rename to content/lessons/flutter-drag-and-drop-basics/img/draggable-parts.png
diff --git a/hugo/content/lessons/flutter-drag-and-drop-basics/img/featured.jpg b/content/lessons/flutter-drag-and-drop-basics/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-drag-and-drop-basics/img/featured.jpg
rename to content/lessons/flutter-drag-and-drop-basics/img/featured.jpg
diff --git a/hugo/content/lessons/flutter-drag-and-drop-basics/img/featured.png b/content/lessons/flutter-drag-and-drop-basics/img/featured.png
similarity index 100%
rename from hugo/content/lessons/flutter-drag-and-drop-basics/img/featured.png
rename to content/lessons/flutter-drag-and-drop-basics/img/featured.png
diff --git a/hugo/content/lessons/flutter-drag-and-drop-basics/img/featured.webp b/content/lessons/flutter-drag-and-drop-basics/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/flutter-drag-and-drop-basics/img/featured.webp
rename to content/lessons/flutter-drag-and-drop-basics/img/featured.webp
diff --git a/content/lessons/flutter-drag-and-drop-basics/index.md b/content/lessons/flutter-drag-and-drop-basics/index.md
new file mode 100644
index 000000000..09d05c1b3
--- /dev/null
+++ b/content/lessons/flutter-drag-and-drop-basics/index.md
@@ -0,0 +1,126 @@
+---
+title: Flutter Drag and Drop Basics
+lastmod: 2019-04-30T11:45:14-07:00
+publishdate: 2019-04-30T11:45:14-07:00
+author: Jeff Delaney
+draft: false
+description: Learn how to create an interactive drag-and-drop UI in Flutter.
+tags:
+ - flutter
+
+youtube: KOh6CkX-d6U
+github: https://github.com/fireship-io/183-flutter-draggable-game
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+
+
+The following lesson will teach you how to build a simple drag-and-drop UI with the [Draggable](https://docs.flutter.io/flutter/widgets/Draggable-class.html) and [DragTarget](https://docs.flutter.io/flutter/widgets/DragTarget-class.html) widgets. The demo app is a kid's game (ages 2 to 4) that requires the user to drag a fruit emoji 🍋 from the left column to the matching color on the right. If successfully dropped it will mark that item complete ✅ and the score will increase by one. The user can also reset the game at any time by pressing on the floating action button.
+
+
+{{< vimeo 333404934 >}}
+
+## Initial Setup
+
+In most cases, you will need your widgets organized within a `StatefulWidget` to render changes to the UI when certain drag/drop events take place.
+
+{{< file "dart" "main.dart" >}}
+```dart
+class DragScreen extends StatefulWidget {
+ DragScreen({Key key}) : super(key: key);
+ createState() => ColorGameState();
+}
+
+class DragScreenState extends State {
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+ body: Row(
+ children: [
+ Column(
+ // draggable widgets here
+ ),
+ Column(
+ // droppable widgets here
+ )
+ ],
+ ),
+ );
+ }
+}
+```
+
+## How to Drag Widgets
+
+### Draggble
+There are three different visual states to consider when building a draggable widget.
+
+1. *child* - This is the child that is initially present.
+2. *childWhenDragging* - This is the widget that gets left behind after user starts dragging.
+3. *feedback* - This is the widget that moves or sticks to the user's finger. It may be identical to the child, or you may want to add some extra shadow to increase the realism of movement.
+
+{{< figure src="img/draggable-parts.png" caption="The different parts of a Draggable widget after the user starts dragging" >}}
+
+{{< file "dart" "main.dart" >}}
+```dart
+Draggable(
+ data: // optional data to send to the drag target in next step,
+ child: // widget
+ feedback: // widget
+ childWhenDragging: // widget
+);
+```
+
+
+
+
+## How to Drop Widgets
+
+### DragTarget
+
+Now that we have a Draggable widget, we need to give it a "drop zone" using the *DragTarget* widget. It provides a builder function that gives you access to both the incoming and rejected data.
+
+There are several functions that can be used to listen to the various drag/drop events:
+
+- *builder* constructs the UI for the DragTarget.
+- *onWillAccept* fires when the user starts hovering, it must return a boolean to decide whether or not the user can drop the widget here.
+- *onAccept* fires when the user drops and onWillAccept returns `true`.
+- *onLeave* fires if the user leaves without dropping or onWillAcccept returns `false`;
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+// Prop on StatefulWidget
+bool successfulDrop;
+
+// Used inside build method
+DragTarget(
+ builder: (BuildContext context, List incoming, List rejected) {
+ if (successfulDrop == true) {
+ return Text('Dropped!')
+ } else {
+ return Text('Empty dropzone');
+ }
+ },
+
+ onWillAccept: (data) => data == 'GOOD',
+
+ onAccept: (data) {
+ setState(() {
+ successfulDrop = true;
+ });
+ },
+
+ onLeave: (data) {
+
+ },
+ );
+```
diff --git a/hugo/content/lessons/flutter-drag-and-drop-basics/img/.gitkeep b/content/lessons/flutter-file-uploads-cloud-storage/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/flutter-drag-and-drop-basics/img/.gitkeep
rename to content/lessons/flutter-file-uploads-cloud-storage/img/.gitkeep
diff --git a/hugo/content/lessons/flutter-file-uploads-cloud-storage/img/featured.jpg b/content/lessons/flutter-file-uploads-cloud-storage/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-file-uploads-cloud-storage/img/featured.jpg
rename to content/lessons/flutter-file-uploads-cloud-storage/img/featured.jpg
diff --git a/hugo/content/lessons/flutter-file-uploads-cloud-storage/img/featured.png b/content/lessons/flutter-file-uploads-cloud-storage/img/featured.png
similarity index 100%
rename from hugo/content/lessons/flutter-file-uploads-cloud-storage/img/featured.png
rename to content/lessons/flutter-file-uploads-cloud-storage/img/featured.png
diff --git a/hugo/content/lessons/flutter-file-uploads-cloud-storage/img/featured.webp b/content/lessons/flutter-file-uploads-cloud-storage/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/flutter-file-uploads-cloud-storage/img/featured.webp
rename to content/lessons/flutter-file-uploads-cloud-storage/img/featured.webp
diff --git a/hugo/content/lessons/flutter-file-uploads-cloud-storage/img/firebase-storage-file.png b/content/lessons/flutter-file-uploads-cloud-storage/img/firebase-storage-file.png
similarity index 100%
rename from hugo/content/lessons/flutter-file-uploads-cloud-storage/img/firebase-storage-file.png
rename to content/lessons/flutter-file-uploads-cloud-storage/img/firebase-storage-file.png
diff --git a/hugo/content/lessons/flutter-file-uploads-cloud-storage/img/flutter-image-cropper.jpg b/content/lessons/flutter-file-uploads-cloud-storage/img/flutter-image-cropper.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-file-uploads-cloud-storage/img/flutter-image-cropper.jpg
rename to content/lessons/flutter-file-uploads-cloud-storage/img/flutter-image-cropper.jpg
diff --git a/hugo/content/lessons/flutter-file-uploads-cloud-storage/img/flutter-image-cropper.png b/content/lessons/flutter-file-uploads-cloud-storage/img/flutter-image-cropper.png
similarity index 100%
rename from hugo/content/lessons/flutter-file-uploads-cloud-storage/img/flutter-image-cropper.png
rename to content/lessons/flutter-file-uploads-cloud-storage/img/flutter-image-cropper.png
diff --git a/hugo/content/lessons/flutter-file-uploads-cloud-storage/img/flutter-upload-demo.gif b/content/lessons/flutter-file-uploads-cloud-storage/img/flutter-upload-demo.gif
similarity index 100%
rename from hugo/content/lessons/flutter-file-uploads-cloud-storage/img/flutter-upload-demo.gif
rename to content/lessons/flutter-file-uploads-cloud-storage/img/flutter-upload-demo.gif
diff --git a/content/lessons/flutter-file-uploads-cloud-storage/index.md b/content/lessons/flutter-file-uploads-cloud-storage/index.md
new file mode 100644
index 000000000..d52bf6bad
--- /dev/null
+++ b/content/lessons/flutter-file-uploads-cloud-storage/index.md
@@ -0,0 +1,294 @@
+---
+title: Flutter File Uploads
+lastmod: 2019-07-26T12:14:09-07:00
+publishdate: 2019-07-26T12:14:09-07:00
+author: Jeff Delaney
+draft: false
+description: Capture an image in Flutter and upload the file to a Firebase Cloud Storage bucket.
+tags:
+ - flutter
+ - firebase
+ - ios
+ - android
+
+youtube: HCmAwk2fnZc
+github: https://github.com/fireship-io/199-flutter-firebase-storage-uploads
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+
+Camera apps are one of the most popular niches in the market, with the recent viral growth of [FaceApp](https://en.wikipedia.org/wiki/FaceApp) being a prime example. There are a variety of plugins for Flutter that make camera-based features easy to develop, and when combined with Firebase the results can be easily uploaded your backend cloud infrastructure. The following lesson demonstrates the following features:
+
+1. Capture images from the device camera or image gallery.
+1. Crop, rotate, and resize an image file.
+1. Upload files to a [Cloud Storage](https://firebase.google.com/docs/storage) bucket and show a visual progress indicator.
+
+
+{{< figure src="img/flutter-upload-demo.gif" caption="Demo of Flutter image cropper and Firebase Cloud Storage file uploads" >}}
+
+
+## Initial Setup
+
+Before starting this tutorial, you must have Firebase installed and configured in your app for iOS and Android.
+
+1. Install FlutterFire
+
+
+
+### Dependencies
+
+The Firebase packages required for file uploads include Core and [Storage](https://pub.dev/packages/firebase_storage). You may also want to include Firestore and Auth if you plan on associating uploaded files to a user.
+
+{{< file "flutter" "pubspec.yaml" >}}
+```yaml
+dependencies:
+ flutter:
+ sdk: flutter
+
+ firebase_core: 0.4.0+8
+ firebase_storage: 3.0.4
+
+ image_cropper: 1.0.2
+ image_picker: 0.6.0+17
+```
+
+In addition to Firebase Storage, this lesson depends on [image_cropper](https://pub.dev/packages/image_cropper) and [image_picker](https://pub.dev/packages/image_picker). Keep in mind, these packages are unrelated to file uploads, but are extremely useful when capturing user-generated images. Follow the install instructions on their official documentation for platform-specific iOS and Android requirements.
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+import 'dart:io';
+import 'package:flutter/material.dart';
+import 'package:firebase_storage/firebase_storage.dart';
+import 'package:flutter/widgets.dart';
+import 'package:image_cropper/image_cropper.dart';
+import 'package:image_picker/image_picker.dart';
+
+void main() async {
+ runApp(MyApp());
+}
+
+class MyApp extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ home: ImageCapture(),
+ );
+ }
+}
+```
+
+
+
+## Image Capture and Crop
+
+The widget below is responsible for capturing an image file from the device, either via the camera or the photo gallery. Once a file is selected, a preview will be shown in the UI and the user can crop, resize, or rotate the raw Dart *File*. The *image_cropper* plugin does all the heavy lifting for the image manipulation, so we gain a ton of functionality with minimal code.
+
+### Image Capture Widget
+
+Both `_pickImage` and `_cropImage` are async methods that update the state of the widget with an image file. If the image is defined, the app displays a visual preview with the *Image* widget and provides buttons to crop or clear it.
+
+Notice how the file is being passed down to *Uploader*. This is a custom widget defined in the next section to manage the file upload task.
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+/// Widget to capture and crop the image
+class ImageCapture extends StatefulWidget {
+ createState() => _ImageCaptureState();
+}
+
+class _ImageCaptureState extends State {
+ /// Active image file
+ File _imageFile;
+
+ /// Cropper plugin
+ Future _cropImage() async {
+ File cropped = await ImageCropper.cropImage(
+ sourcePath: _imageFile.path,
+ // ratioX: 1.0,
+ // ratioY: 1.0,
+ // maxWidth: 512,
+ // maxHeight: 512,
+ toolbarColor: Colors.purple,
+ toolbarWidgetColor: Colors.white,
+ toolbarTitle: 'Crop It'
+ );
+
+ setState(() {
+ _imageFile = cropped ?? _imageFile;
+ });
+ }
+
+ /// Select an image via gallery or camera
+ Future _pickImage(ImageSource source) async {
+ File selected = await ImagePicker.pickImage(source: source);
+
+ setState(() {
+ _imageFile = selected;
+ });
+ }
+
+ /// Remove image
+ void _clear() {
+ setState(() => _imageFile = null);
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Scaffold(
+
+ // Select an image from the camera or gallery
+ bottomNavigationBar: BottomAppBar(
+ child: Row(
+ children: [
+ IconButton(
+ icon: Icon(Icons.photo_camera),
+ onPressed: () => _pickImage(ImageSource.camera),
+ ),
+ IconButton(
+ icon: Icon(Icons.photo_library),
+ onPressed: () => _pickImage(ImageSource.gallery),
+ ),
+ ],
+ ),
+ ),
+
+ // Preview the image and crop it
+ body: ListView(
+ children: [
+ if (_imageFile != null) ...[
+
+ Image.file(_imageFile),
+
+ Row(
+ children: [
+ FlatButton(
+ child: Icon(Icons.crop),
+ onPressed: _cropImage,
+ ),
+ FlatButton(
+ child: Icon(Icons.refresh),
+ onPressed: _clear,
+ ),
+ ],
+ ),
+
+ Uploader(file: _imageFile)
+ ]
+ ],
+ ),
+ );
+ }
+}
+```
+
+
+{{< figure src="img/flutter-image-cropper.jpg" caption="You should now be able to capture, preview, and crop an image in your Flutter app" >}}
+
+
+## Upload to Firebase Storage
+
+In this section, the [File](https://api.dartlang.org/stable/2.4.0/dart-io/File-class.html) object will be uploaded to a Firebase Cloud Storage bucket. The user can pause or cancel the upload task at any point, which is a useful feature when handling large files and/or users on slow networks. In addition, the widget monitors the upload progress and displays the percentage of bytes transferred using the [LinearProgressIndicator](https://api.flutter.dev/flutter/material/LinearProgressIndicator-class.html).
+
+### Uploader Widget
+
+When you create a *StorageUploadTask* it will immediately start uploading the file to storage. The task exposes a stream that emits a *StorageTaskEvent* containing metadata about the upload, such as bytes-transferred, which can be used to calculate the value of a progress indicator.
+
+You can also obtain the current state of the upload with boolean `task.isComplete` or `task.isInProgress` and so on.
+
+{{< file "dart" "main.dart" >}}
+```dart
+class _UploaderState extends State {
+ final FirebaseStorage _storage =
+ FirebaseStorage(storageBucket: 'gs://fireship-lessons.appspot.com');
+
+ StorageUploadTask _uploadTask;
+
+ /// Starts an upload task
+ void _startUpload() {
+
+ /// Unique file name for the file
+ String filePath = 'images/${DateTime.now()}.png';
+
+ setState(() {
+ _uploadTask = _storage.ref().child(filePath).putFile(widget.file);
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ if (_uploadTask != null) {
+
+ /// Manage the task state and event subscription with a StreamBuilder
+ return StreamBuilder(
+ stream: _uploadTask.events,
+ builder: (_, snapshot) {
+ var event = snapshot?.data?.snapshot;
+
+ double progressPercent = event != null
+ ? event.bytesTransferred / event.totalByteCount
+ : 0;
+
+ return Column(
+
+ children: [
+ if (_uploadTask.isComplete)
+ Text('🎉🎉🎉'),
+
+
+ if (_uploadTask.isPaused)
+ FlatButton(
+ child: Icon(Icons.play_arrow),
+ onPressed: _uploadTask.resume,
+ ),
+
+ if (_uploadTask.isInProgress)
+ FlatButton(
+ child: Icon(Icons.pause),
+ onPressed: _uploadTask.pause,
+ ),
+
+ // Progress bar
+ LinearProgressIndicator(value: progressPercent),
+ Text(
+ '${(progressPercent * 100).toStringAsFixed(2)} % '
+ ),
+ ],
+ );
+ });
+
+
+ } else {
+
+ // Allows user to decide when to start the upload
+ return FlatButton.icon(
+ label: Text('Upload to Firebase'),
+ icon: Icon(Icons.cloud_upload),
+ onPressed: _startUpload,
+ );
+
+ }
+ }
+}
+```
+
+
+
+{{< figure src="img/firebase-storage-file.png" caption="You should be able to view the end result in Firebase Cloud Storage when the upload is complete" >}}
+
+
+### Bonus Video
+
+
+In certain cases, you may want to convert an image to multiple formats after uploading. Watch the video below for a fill demo of this feature with Firebase Cloud Functions.
+
+
+{{< youtube OKW8x8-qYs0 >}}
\ No newline at end of file
diff --git a/hugo/content/lessons/flutter-file-uploads-cloud-storage/img/.gitkeep b/content/lessons/flutter-firebase-chat-demo/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/flutter-file-uploads-cloud-storage/img/.gitkeep
rename to content/lessons/flutter-firebase-chat-demo/img/.gitkeep
diff --git a/hugo/content/lessons/flutter-firebase-chat-demo/img/data-model.png b/content/lessons/flutter-firebase-chat-demo/img/data-model.png
similarity index 100%
rename from hugo/content/lessons/flutter-firebase-chat-demo/img/data-model.png
rename to content/lessons/flutter-firebase-chat-demo/img/data-model.png
diff --git a/hugo/content/lessons/flutter-firebase-chat-demo/img/featured.jpg b/content/lessons/flutter-firebase-chat-demo/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-firebase-chat-demo/img/featured.jpg
rename to content/lessons/flutter-firebase-chat-demo/img/featured.jpg
diff --git a/hugo/content/lessons/flutter-firebase-chat-demo/img/featured.png b/content/lessons/flutter-firebase-chat-demo/img/featured.png
similarity index 100%
rename from hugo/content/lessons/flutter-firebase-chat-demo/img/featured.png
rename to content/lessons/flutter-firebase-chat-demo/img/featured.png
diff --git a/hugo/content/lessons/flutter-firebase-chat-demo/img/featured.webp b/content/lessons/flutter-firebase-chat-demo/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/flutter-firebase-chat-demo/img/featured.webp
rename to content/lessons/flutter-firebase-chat-demo/img/featured.webp
diff --git a/hugo/content/lessons/flutter-firebase-chat-demo/index.md b/content/lessons/flutter-firebase-chat-demo/index.md
similarity index 100%
rename from hugo/content/lessons/flutter-firebase-chat-demo/index.md
rename to content/lessons/flutter-firebase-chat-demo/index.md
diff --git a/hugo/content/lessons/flutter-firebase-chat-demo/img/.gitkeep b/content/lessons/flutter-firebase-google-oauth-firestore/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/flutter-firebase-chat-demo/img/.gitkeep
rename to content/lessons/flutter-firebase-google-oauth-firestore/img/.gitkeep
diff --git a/hugo/content/lessons/flutter-firebase-google-oauth-firestore/img/featured.jpg b/content/lessons/flutter-firebase-google-oauth-firestore/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-firebase-google-oauth-firestore/img/featured.jpg
rename to content/lessons/flutter-firebase-google-oauth-firestore/img/featured.jpg
diff --git a/hugo/content/lessons/flutter-firebase-google-oauth-firestore/img/featured.png b/content/lessons/flutter-firebase-google-oauth-firestore/img/featured.png
similarity index 100%
rename from hugo/content/lessons/flutter-firebase-google-oauth-firestore/img/featured.png
rename to content/lessons/flutter-firebase-google-oauth-firestore/img/featured.png
diff --git a/hugo/content/lessons/flutter-firebase-google-oauth-firestore/img/featured.webp b/content/lessons/flutter-firebase-google-oauth-firestore/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/flutter-firebase-google-oauth-firestore/img/featured.webp
rename to content/lessons/flutter-firebase-google-oauth-firestore/img/featured.webp
diff --git a/hugo/content/lessons/flutter-firebase-google-oauth-firestore/img/flutterfire-oauth-demo.gif b/content/lessons/flutter-firebase-google-oauth-firestore/img/flutterfire-oauth-demo.gif
similarity index 100%
rename from hugo/content/lessons/flutter-firebase-google-oauth-firestore/img/flutterfire-oauth-demo.gif
rename to content/lessons/flutter-firebase-google-oauth-firestore/img/flutterfire-oauth-demo.gif
diff --git a/content/lessons/flutter-firebase-google-oauth-firestore/index.md b/content/lessons/flutter-firebase-google-oauth-firestore/index.md
new file mode 100644
index 000000000..581c0f5b3
--- /dev/null
+++ b/content/lessons/flutter-firebase-google-oauth-firestore/index.md
@@ -0,0 +1,294 @@
+---
+title: Flutter Firebase Google SignIn + Firestore
+lastmod: 2019-01-14T07:43:54-07:00
+publishdate: 2019-01-14T07:43:54-07:00
+author: Jeff Delaney
+draft: false
+description: Learn how to Setup GoogleSign and Firestore with Flutter from Scratch
+tags:
+ - flutter
+ - firebase
+ - auth
+ - firestore
+
+youtube: cHFV6JPp-6A
+github: https://github.com/fireship-io/flutter-base
+
+versions:
+ flutter: 1.0.0+1
+ cloud_firestore: ^0.8.2+3
+ firebase_auth: ^0.6.6
+ google_sign_in: ^3.2.4
+ rxdart: ^0.20.0
+---
+
+The following lesson will show you how to implement [Google SignIn](https://pub.dartlang.org/packages/google_sign_in) with Flutter and Firebase, then update a custom user profile in Firestore. We will demonstrate several key concepts related to building reactive UIs with realtime streaming data, including
+
+- Global Streams and Observables with RxDart
+- StatefulWidget
+- StreamBuilder
+
+{{< figure src="img/flutterfire-oauth-demo.gif" alt="demo of Google auth on Flutter with Firestore" >}}
+
+
+## Step 0: Prerequisites
+
+1. Install FlutterFire
+
+## Step 1: Build Out the UI
+
+First, let's start with a basic UI. Notice we have placeholders for `LoginButton()` and `UserProfile()` - these will be created later in the lesson.
+
+{{< file "dart" "main.dart" >}}
+```dart
+import 'package:flutter/material.dart';
+import 'auth.dart';
+
+void main() => runApp(MyApp());
+
+class MyApp extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ title: 'FlutterBase',
+ home: Scaffold(
+ appBar: AppBar(
+ title: Text('Flutterbase'),
+ backgroundColor: Colors.amber,
+ ),
+ body: Center(
+ child: Column(
+ children: [
+ LoginButton(), // <-- Built with StreamBuilder
+ UserProfile() // <-- Built with StatefulWidget
+ ],
+ ),
+ )
+ )
+ );
+ }
+}
+
+```
+
+
+## Step 2: Isolate the Authentication Logic
+
+Flutter is not opinionated about how you architect your app when it comes to shared global state. The most popular approaches include redux and inherited widgets, but they require a bit of work upfront tend to be burdensome when prototyping the UX. A simple approach to state management is to simply provide a global variable class instance that contains Streams and/or Rx Observables. This keeps auth logic out of widgets, while allowing any widget to listen/react to changes in the auth state.
+
+Here are a couple rules we will follow:
+
+1. Only use Observables/Streams for stateful data.
+2. AuthService class will only be instantiated once (although it's not technically a singleton in this case).
+
+Sound good? Create a new file called `lib/auth.dart`.
+
+### Create the AuthService Class
+
+Let's start by adding our Firebase dependencies to the class and fleshing out it's API.
+
+
+The `_` prefix is used for property names to create private members in Dart. We will do this for the client libraries consumed by the class.
+
+
+The streams provided by Firebase are [broadcast](https://www.dartlang.org/articles/libraries/broadcast-streams) to multiple subscribers (this is called as a hot Observable in Rx). In this demo, the `user` is the authentication record, while the `profile` represents custom data that will be saved about this user in Firestore.
+
+Also, the `PublishSubject loading` is just like a hot observable, except values can be pushed to it manually. We will use it to toggle the loading state in our code.
+
+{{< file "dart" "auth.dart" >}}
+```dart
+import 'package:firebase_auth/firebase_auth.dart';
+import 'package:google_sign_in/google_sign_in.dart';
+import 'package:cloud_firestore/cloud_firestore.dart';
+import 'package:rxdart/rxdart.dart';
+
+class AuthService {
+ // Dependencies
+ final GoogleSignIn _googleSignIn = GoogleSignIn();
+ final FirebaseAuth _auth = FirebaseAuth.instance;
+ final Firestore _db = Firestore.instance;
+
+ // Shared State for Widgets
+ Observable user; // firebase user
+ Observable> profile; // custom user data in Firestore
+ PublishSubject loading = PublishSubject();
+
+ // constructor
+ AuthService() {
+
+ }
+
+ Future googleSignIn() async {
+
+ }
+
+ void updateUserData(FirebaseUser user) async {
+
+
+ }
+
+
+ void signOut() {
+
+ }
+}
+
+final AuthService authService = AuthService();
+```
+
+
+### Initialize Observables in the Constructor
+
+The state is initialized in the constructor of this class. The user is just an Observable wrapper over the Firebase `onAuthStateChanged` stream. This part is critical because we can then chain Rx operators for amazing control flow of the stream.
+
+In order to get the `profile` data from the database, we need to first retrieve logged-in user's uid - this is where RxDart starts to become awesome. The `switchMap` operator will take the user from the outer Observable, then use it to *switch* to another Observable of the Firestore database record. If the user is not logged in, we can just return an Observable of an empty Map.
+
+{{< file "dart" "auth.dart" >}}
+```dart
+ AuthService() {
+ user = Observable(_auth.onAuthStateChanged);
+
+ profile = user.switchMap((FirebaseUser u) {
+ if (u != null) {
+ return _db
+ .collection('users')
+ .document(u.uid)
+ .snapshots()
+ .map((snap) => snap.data);
+ } else {
+ return Observable.just({});
+ }
+ });
+ }
+```
+
+### Implement SignIn & SignOut
+
+`SignIn` can be broken down into three async steps:
+
+1. Login with Google. This shows Google's native login screen and provides the `idToken` and `accessToken`.
+2. Login to Firebase. At this point, the user is logged into Google, but not Firebase. We can simply pass the tokens to Firebase to login.
+3. Update Firestore. At this point, we can update the database with any custom data we want to use in the UI.
+
+```dart
+ Future googleSignIn() async {
+ // Start
+ loading.add(true);
+
+ // Step 1
+ GoogleSignInAccount googleUser = await _googleSignIn.signIn();
+
+ // Step 2
+ GoogleSignInAuthentication googleAuth = await googleUser.authentication;
+ FirebaseUser user = await _auth.signInWithGoogle(
+ accessToken: googleAuth.accessToken, idToken: googleAuth.idToken);
+
+ // Step 3
+ updateUserData(user);
+
+ // Done
+ loading.add(false);
+ print("signed in " + user.displayName);
+ return user;
+ }
+
+ void updateUserData(FirebaseUser user) async {
+ DocumentReference ref = _db.collection('users').document(user.uid);
+
+ return ref.setData({
+ 'uid': user.uid,
+ 'email': user.email,
+ 'photoURL': user.photoUrl,
+ 'displayName': user.displayName,
+ 'lastSeen': DateTime.now()
+ }, merge: true);
+ }
+
+ void signOut() {
+ _auth.signOut();
+ }
+
+
+```
+
+## Step 3: StatefulWidget User Profile
+
+Now that our auth logic is in place, we have two options for rendering UI elements based on our Observable state - [StatefulWidget](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html) and [StreamBuilder](https://docs.flutter.io/flutter/widgets/StreamBuilder-class.html).
+
+Let's start by building a `StatefulWidget` that listens to the the `Observable profile` and displays its data in the UI. In this example, we are listening to the stream, then using the emitted values to call `setState` on widget, thus triggering a repaint.
+
+
+Only use `setState` to change properties on the widget and do all the computation elsewhere. Also, your state must be initialized, which is why the subscriptions are created in the `initState` lifecycle hook.
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+class UserProfile extends StatefulWidget {
+ @override
+ UserProfileState createState() => UserProfileState();
+}
+
+class UserProfileState extends State {
+ Map _profile;
+ bool _loading = false;
+
+ @override
+ initState() {
+ super.initState();
+
+ // Subscriptions are created here
+ authService.profile.listen((state) => setState(() => _profile = state));
+
+ authService.loading.listen((state) => setState(() => _loading = state));
+ }
+
+ @override
+ Widget build(BuildContext context) {
+ return Column(children: [
+ Container(padding: EdgeInsets.all(20), child: Text(_profile.toString())),
+ Text(_loading.toString())
+ ]);
+ }
+}
+
+```
+
+## Step 4: StreamBuilder Login Button
+
+The `StatefulWidget` is fine, but it contains a decent amount of boilerplate and in most cases I find `StreamBuilder` to be more flexible and concise. It is just a widget that depends on the value of a stream, so when the value of the stream changes you can conditionally render different widgets.
+
+This is a perfect use-case the login button. For example, we don't want to show *SignIn with Google* in the UI if the user is already logged in.
+
+`StreamBuilder` takes our `Observable user` as the stream, then we implement a builder function that returns some UI widgets. The `snapshot` is the data emitted by the stream/observable. In our case, we know the user is logged in if `snapshot.hasData == true`
+
+
+```dart
+class LoginButton extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return StreamBuilder(
+ stream: authService.user,
+ builder: (context, snapshot) {
+ if (snapshot.hasData) {
+ return MaterialButton(
+ onPressed: () => authService.signOut(),
+ color: Colors.red,
+ textColor: Colors.white,
+ child: Text('Signout'),
+ );
+ } else {
+ return MaterialButton(
+ onPressed: () => authService.googleSignIn(),
+ color: Colors.white,
+ textColor: Colors.black,
+ child: Text('Login with Google'),
+ );
+ }
+ });
+ }
+}
+```
+
+## The End
+
+You now have a reliable way to share and observe user data in your Flutter app. You might improve this code by implementing the AuthService as an InheritedWidget so it can be scoped to specific places in the widget tree.
\ No newline at end of file
diff --git a/hugo/content/lessons/flutter-firebase-google-oauth-firestore/img/.gitkeep b/content/lessons/flutter-for-js-developers/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/flutter-firebase-google-oauth-firestore/img/.gitkeep
rename to content/lessons/flutter-for-js-developers/img/.gitkeep
diff --git a/hugo/content/lessons/flutter-for-js-developers/img/featured.jpg b/content/lessons/flutter-for-js-developers/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-for-js-developers/img/featured.jpg
rename to content/lessons/flutter-for-js-developers/img/featured.jpg
diff --git a/hugo/content/lessons/flutter-for-js-developers/img/featured.png b/content/lessons/flutter-for-js-developers/img/featured.png
similarity index 100%
rename from hugo/content/lessons/flutter-for-js-developers/img/featured.png
rename to content/lessons/flutter-for-js-developers/img/featured.png
diff --git a/hugo/content/lessons/flutter-for-js-developers/img/featured.webp b/content/lessons/flutter-for-js-developers/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/flutter-for-js-developers/img/featured.webp
rename to content/lessons/flutter-for-js-developers/img/featured.webp
diff --git a/hugo/content/lessons/flutter-for-js-developers/img/flutter-v-react-styles.png b/content/lessons/flutter-for-js-developers/img/flutter-v-react-styles.png
similarity index 100%
rename from hugo/content/lessons/flutter-for-js-developers/img/flutter-v-react-styles.png
rename to content/lessons/flutter-for-js-developers/img/flutter-v-react-styles.png
diff --git a/hugo/content/lessons/flutter-for-js-developers/img/js-dart-reddit.png b/content/lessons/flutter-for-js-developers/img/js-dart-reddit.png
similarity index 100%
rename from hugo/content/lessons/flutter-for-js-developers/img/js-dart-reddit.png
rename to content/lessons/flutter-for-js-developers/img/js-dart-reddit.png
diff --git a/hugo/content/lessons/flutter-for-js-developers/img/state-flutter-v-react.png b/content/lessons/flutter-for-js-developers/img/state-flutter-v-react.png
similarity index 100%
rename from hugo/content/lessons/flutter-for-js-developers/img/state-flutter-v-react.png
rename to content/lessons/flutter-for-js-developers/img/state-flutter-v-react.png
diff --git a/content/lessons/flutter-for-js-developers/index.md b/content/lessons/flutter-for-js-developers/index.md
new file mode 100644
index 000000000..3ba32e964
--- /dev/null
+++ b/content/lessons/flutter-for-js-developers/index.md
@@ -0,0 +1,419 @@
+---
+title: Flutter for JavaScript Developers
+lastmod: 2019-01-20T12:28:17-07:00
+publishdate: 2019-01-20T12:28:17-07:00
+author: Jeff Delaney
+draft: false
+description: A guide to Dart and Flutter for JavaScript Developers who have experience with React Native and Ionic
+tags:
+ - dart
+ - flutter
+ - javascript
+ - typescript
+
+youtube: 7sJZi0grFR4
+github: https://gist.github.com/codediodeio/8d59623a3ccac79e9168122b21c4a766
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+versions:
+ flutter: 1.0
+ dart: 2
+---
+
+So you're a web developer working with JavaScript and curious about [Flutter](https://flutter.io/docs/get-started/flutter-for/web-devs)? That was me about one-year ago, and at the time, learning an uncommon language like Dart seemed ridiculous because there are existing hybrid app frameworks in JS. Then I tried it... To my surprise, I was able to write productive code right out of the gate. The following lesson will compare Dart/Flutter to JS/ReactNative.
+
+{{< figure src="img/js-dart-reddit.png" alt="Post comparing Dart and JS from reddit" >}}
+Source: [FlutterDev subreddit](https://www.reddit.com/r/FlutterDev/comments/92d995/what_do_you_like_or_not_like_about_the_dart/)
+
+
+
+Throughout this lesson, you will see the 👉 emoji. Dart will always be on the left, and JS on the right. These are not always perfect 1-to-1 comparisons, but you get the idea.
+
+
+## The Tradeoffs
+
+> There are no solutions; there are only trade-offs. - Thomas Sowell
+
+### Flutter is awesome 🐦🤟 because it...
+
+- has amazing docs & tooling
+- performs faster because it has no JavaScript bridge
+- can integrate native code
+- hot reloads
+- small code footprint and no import/export/bundling headaches
+- it positions you for future development with [Fuchsia](https://en.wikipedia.org/wiki/Google_Fuchsia)
+
+### Flutter is meh 😒 because it...
+
+- has a steeper learning curve with Dart
+- cannot be debugged in the browser
+- has a small ecosystem of developers and plugins relative to JS
+
+## Dart vs JS - Syntax
+
+Dart is a strongly-typed compiled language, while JS is a weakly-typed scripting language. Despite being polar opposites in these ways, they share many of the same convetions, so most JS devs will be productive on day one.
+
+
+Want to write some Dart code right now? Head over to the [DartPad](https://dartpad.dartlang.org/) playground.
+
+
+### Variables
+
+- `SomeType foo;` 👉 `let foo`
+- `final` 👉 `const`
+- `const` 👉 `Object.freeze(obj)`
+
+
+
+{{< file "ts" "index.ts" >}} ```typescript
+// Reassignable variables
+let person: string;
+person = 'jeff';
+person = 'bob';
+
+// Single assignment variables
+const lucky: number = 23;
+
+// Implicit
+const implicit = { name: 'Jeff' };
+
+// Any
+const whoKnows: any = getSomethingDynamic();
+```
+
+{{< file "dart" "main.dart" >}} ```dart
+// Reassignable variables
+String person;
+person = 'Jeff';
+person = 'Bob';
+
+// Single Assignment
+final int lucky = 23;
+
+// Single Assignment & Immutable
+const Map person = 'Jeff';
+
+// Implicit
+var implicit = { 'name': 'Jeff' }; // Map
+
+// Any type
+dynamic whoKnows = getSomethingDynamic();
+```
+
+### Imports/Exports
+
+In JS, you have several ways to import/export values, so let's just look at the modern ES6 way.
+
+
+{{< file "ts" "globals.ts" >}} ```typescript
+export default const = 'JS';
+// or
+export const lang = 'JS';
+```
+
+{{< file "ts" "index.ts" >}} ```typescript
+import lang from 'globals';
+// or
+import { lang } from 'globals';
+```
+
+When you import a file in Dart, you will have access to everything declared that file. It looks trivial here, but it eliminates the **import hell 😠** that you find in basically every big JS project.
+
+{{< file "dart" "globals.dart" >}} ```dart
+final String lang = 'Dart!';
+```
+
+{{< file "dart" "main.dart" >}} ```dart
+import 'globals.dart';
+
+main() {
+ print(lang)
+}
+```
+
+### Logging
+
+{{< file "ts" "index.ts" >}} ```typescript
+console.log('howdy!');
+```
+
+{{< file "dart" "main.dart" >}} ```dart
+print('howdy!');
+```
+
+### Entry Point
+
+JS doesn't have a required entry point to start executing our code, but it's common to export a function.
+
+{{< file "ts" "index.ts" >}} ```typescript
+export const app = () => {
+ // init app
+};
+
+app();
+```
+
+In dart, a main function is required.
+
+{{< file "dart" "main.dart" >}} ```dart
+main() {
+
+}
+```
+
+### Maps and Objects
+
+- Map 👉 cross between Object and Map
+
+Dart has a [Map](https://www.dartlang.org/guides/language/language-tour#maps) class used to represent key-value pairs. It combines some of the features from in the JS `Object` & `Map`.
+
+{{< file "ts" "index.ts" >}} ```typescript
+const state = { lucky: 23 }
+state['unlucky'] = 11;
+
+const state = new Map([['lucky', 23]]);
+state.set('unlucky', 11);
+```
+
+{{< file "dart" "main.dart" >}} ```dart
+Map state = { 'lucky': 23 };
+state['unlucky'] = 11;
+```
+
+### Lists and Arrays
+
+- List 👉 Array
+
+A Dart [List](https://www.dartlang.org/guides/language/language-tour#lists) is similar to a JS Array, containing most of the same instance and class methods (and beyond).
+
+{{< file "ts" "index.ts" >}} ```typescript
+const things: number[] = [1, 2, 3]
+```
+
+{{< file "dart" "main.dart" >}} ```dart
+List things = [1, 2, 3];
+
+things.forEach()
+things.reduce()
+things.last;
+```
+
+
+### Functions
+
+Functions in Dart should feel very familiar to the JS dev - it supports named, anonymous, arrow, and higher-order functions. The main difference is that you don't need the `function` keyword.
+
+{{< file "ts" "index.ts" >}} ```typescript
+function addOne(val: number) {
+ return val + 1;
+}
+
+// Higher Order
+function callme(cb: Function) {
+ return cb('Hello?');
+}
+
+callme((v) => console.log(v));
+```
+
+{{< file "dart" "main.dart" >}} ```dart
+addOne(int val) {
+ return val + 1;
+}
+
+// Higher Order
+callme(Function cb) {
+ return cb('Hello?');
+}
+
+callme((v) => print(v));
+```
+
+### Classes
+
+You will be using [Classes](https://www.dartlang.org/guides/language/language-tour#classes) frequently in Dart and they are very powerful. The language supports **mixin-based inheritance**, which provides excellent code reuse with [composition](https://en.wikipedia.org/wiki/Composition_over_inheritance). In JS, classes are just syntatic sugar for functions and prototypal inheritance.
+
+
+{{< file "ts" "index.ts" >}} ```typescript
+export const main = () => {
+ const myComponent = new Component()
+}
+
+class Component { }
+```
+
+Defining and instantiating a class is nearly identical, but Dart does not require the `new` keyword.
+
+{{< file "dart" "main.dart" >}} ```dart
+main() {
+ var myWidget = Widget();
+}
+
+class Widget { }
+```
+
+### Class Constructors
+
+In Dart, you can construct a class by calling its name like a Function. In addition, you can use **named constructors** to instantiate the same with different logic.
+
+{{< file "ts" "index.ts" >}} ```typescript
+export const main = () => {
+ const bar = new Component(1,2);
+}
+
+class Component {
+ constructor(private a, public b) {
+ // non-ts version
+ // this.a = a
+ // this.b = b
+ }
+}
+```
+
+
+Starting any variable or property with `_` in Dart will make it private to its library or class.
+
+
+{{< file "dart" "main.dart" >}} ```dart
+main() {
+ Widget foo = Widget.withStrings('1', '2');
+}
+
+class Widget {
+
+ // Default Constructor
+ Widget(_a, b);
+
+ // Named Constructor
+ Widget.withStrings(_a, b);
+
+}
+```
+
+## Async Programming
+
+
+### Futures and Promises
+
+- Future 👉 Promise
+
+A Dart `Future` is almost identical to a JS `Promise`, which is really nice because this is one of the more complex concepts master.
+
+{{< file "ts" "index.ts" >}} ```typescript
+async function howdy() {
+ return 'partner 🤠';
+}
+
+async function greet() {
+ await howdy();
+}
+
+greet().then(console.log).catch()
+```
+
+{{< file "dart" "main.dart" >}} ```dart
+Future howdy() async {
+ return 'partner 🤠';
+}
+
+greet() async {
+ await howdy();
+}
+
+greet().then(print).catchError();
+```
+
+### Streams and Observables
+
+- Stream 👉 Observable
+
+JavaScript does not have a *native* stream-like data structure [yet](https://github.com/tc39/proposal-observable), but they are commonly provided via supporting packages like RxJS, Mobx, and others. A stream is similar to a Promise (Future), except that is
+
+A `Stream` is like a Future that emits multiple values over time and we can even use it with async/await 😍.
+
+{{< file "dart" "main.dart" >}} ```dart
+main() async {
+
+ var items = Stream.fromIterable([1,2,3]);
+
+ await for (int i in items) {
+ // do something
+ }
+
+ // Or setup a listener
+ items.listen(print);
+}
+```
+
+There is one big concept to keep in mind, single subscription streams (default) will throw an error if multiple subscribers try to listen.
+
+- Single-subscription streams 👉 Cold observable
+- Broadcast streams 👉 Hot Observable
+
+Even though streams are available in Dart, I often find myself using [RxDart](https://pub.dartlang.org/packages/rxdart) in Flutter. The beauty of RxDart is that it builds on top of streams, rather than try to reinvent the wheel, so anything that uses a stream in Flutter can also use an Rx observable. Also, if you're coming from the Angular world you can keep the operators you know and love like `switchMap`, `takeUntil`, `scan`, and so on.
+
+
+## Flutter vs Frameworks
+
+Flutter is inspired by JavaScript frameworks like React/Angular/Vue that enable components to reactively update the UI when data changes. In fact, Flutter provides a `setState` method that works exactly like it does in [ReactJS](https://reactjs.org/docs/react-component.html#setstate).
+
+Overall, it is not very opinionated about how architect the app. You can use composition to build a bunch of tiny widgets in their own files, or create a few big widgets in a single file.
+
+### Dependency Management
+
+- pubspec.yaml 👉 package.json
+- [Pub](https://pub.dartlang.org/) 👉 [NPM](https://www.npmjs.com/)
+
+Dependencies are registered in the **pubspec.yaml** and should auto-update on save.
+
+### Widgets and Components
+
+- Widget 👉 Component
+- `build` 👉 `render`
+
+As you may have guessed, Flutter has components similar to those in React, with a build method that can be called when state changes.
+
+{{< file "ts" "index.ts" >}} ```typescript
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+export default class MyApp extends React.Component {
+ render() {
+ return (
+
+ Hello world!
+
+ );
+ }
+}
+```
+
+
+{{< file "dart" "main.dart" >}} ```dart
+import 'package:flutter/material.dart';
+
+void main() => runApp(MyApp());
+
+class MyApp extends StatelessWidget {
+ @override
+ build(context) {
+ return Center(
+ child: Text('Hello World'),
+ );
+ }
+}
+```
+
+### Full React Native Comparison
+
+Let's go ahead and recreate this [styled component](https://facebook.github.io/react-native/docs/state) from the react native docs. You'll notice the Flutter version on the left has about 65% of the code footprint, with a guarantee of type-safety. Also see the [other examples in this gist](https://gist.github.com/codediodeio/8d59623a3ccac79e9168122b21c4a766).
+
+{{< figure src="img/flutter-v-react-styles.png" alt="comparison of code footprint between react native and flutter" >}}
+
+Flutter provides several ways to manage component state. You can use `setState` just like React does, but there are some additional built-in techniques. My personal favorite is to represent stateful data as a `Stream` or Rx `Observable`, then use the `StreamBuilder` widget to conditionally paint the UI. As you can see, this does not require any explicit calls to render the UI, rather it's based on the most recent value emitted from the stream. The code footprint is improved slightly, but this gains really add up if you find yourself setting the state frequently.
+
+{{< figure src="img/state-flutter-v-react.png" alt="comparison of code footprint between react native and flutter for managing component state" >}}
diff --git a/hugo/content/lessons/flutter-for-js-developers/img/.gitkeep b/content/lessons/flutter-inapp-purchases/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/flutter-for-js-developers/img/.gitkeep
rename to content/lessons/flutter-inapp-purchases/img/.gitkeep
diff --git a/hugo/content/lessons/flutter-inapp-purchases/img/app-store-connect-iap.png b/content/lessons/flutter-inapp-purchases/img/app-store-connect-iap.png
similarity index 100%
rename from hugo/content/lessons/flutter-inapp-purchases/img/app-store-connect-iap.png
rename to content/lessons/flutter-inapp-purchases/img/app-store-connect-iap.png
diff --git a/hugo/content/lessons/flutter-inapp-purchases/img/featured.jpg b/content/lessons/flutter-inapp-purchases/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-inapp-purchases/img/featured.jpg
rename to content/lessons/flutter-inapp-purchases/img/featured.jpg
diff --git a/hugo/content/lessons/flutter-inapp-purchases/img/featured.png b/content/lessons/flutter-inapp-purchases/img/featured.png
similarity index 100%
rename from hugo/content/lessons/flutter-inapp-purchases/img/featured.png
rename to content/lessons/flutter-inapp-purchases/img/featured.png
diff --git a/hugo/content/lessons/flutter-inapp-purchases/img/featured.webp b/content/lessons/flutter-inapp-purchases/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/flutter-inapp-purchases/img/featured.webp
rename to content/lessons/flutter-inapp-purchases/img/featured.webp
diff --git a/hugo/content/lessons/flutter-inapp-purchases/img/google-play-product.png b/content/lessons/flutter-inapp-purchases/img/google-play-product.png
similarity index 100%
rename from hugo/content/lessons/flutter-inapp-purchases/img/google-play-product.png
rename to content/lessons/flutter-inapp-purchases/img/google-play-product.png
diff --git a/hugo/content/lessons/flutter-inapp-purchases/img/in-app-purchases-demo.gif b/content/lessons/flutter-inapp-purchases/img/in-app-purchases-demo.gif
similarity index 100%
rename from hugo/content/lessons/flutter-inapp-purchases/img/in-app-purchases-demo.gif
rename to content/lessons/flutter-inapp-purchases/img/in-app-purchases-demo.gif
diff --git a/hugo/content/lessons/flutter-inapp-purchases/img/merchant-account.png b/content/lessons/flutter-inapp-purchases/img/merchant-account.png
similarity index 100%
rename from hugo/content/lessons/flutter-inapp-purchases/img/merchant-account.png
rename to content/lessons/flutter-inapp-purchases/img/merchant-account.png
diff --git a/hugo/content/lessons/flutter-inapp-purchases/img/payment-confirm.png b/content/lessons/flutter-inapp-purchases/img/payment-confirm.png
similarity index 100%
rename from hugo/content/lessons/flutter-inapp-purchases/img/payment-confirm.png
rename to content/lessons/flutter-inapp-purchases/img/payment-confirm.png
diff --git a/hugo/content/lessons/flutter-inapp-purchases/img/xcode-enable-in-app-purchases.png b/content/lessons/flutter-inapp-purchases/img/xcode-enable-in-app-purchases.png
similarity index 100%
rename from hugo/content/lessons/flutter-inapp-purchases/img/xcode-enable-in-app-purchases.png
rename to content/lessons/flutter-inapp-purchases/img/xcode-enable-in-app-purchases.png
diff --git a/content/lessons/flutter-inapp-purchases/index.md b/content/lessons/flutter-inapp-purchases/index.md
new file mode 100644
index 000000000..c9338d0eb
--- /dev/null
+++ b/content/lessons/flutter-inapp-purchases/index.md
@@ -0,0 +1,383 @@
+---
+title: In App Purchases in Flutter
+lastmod: 2019-06-25T06:14:51-07:00
+publishdate: 2019-06-25T06:14:51-07:00
+author: Jeff Delaney
+draft: false
+description: Accept In App Purchases and microtransactions in Flutter for digital products on the Apple App Store and Google Play Store.
+tags:
+ - flutter
+ - payments
+ - ios
+ - android
+
+youtube: NWbkKH-2xcQ
+# github:
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+versions:
+ in_app_purchase: 0.2.0+1
+---
+
+
+Flutter recently launched official support for In App Purchases (IAP) and provides a unified plugin for both iOS and Android. Native mobile apps that collect payments for digital goods on the Apple App Store and/or Google Play Store are typically required to use the [In App Purchases](https://developer.apple.com/in-app-purchase/) API, which means services like Stripe and Paypal are out of the question (with the exception of payments for physically shipped goods). In reality, In App Purchases are far more lucrative for digital products, with the game Candy Crush generating [$4MM in revenue per day in 2018](https://venturebeat.com/2019/01/09/sensor-tower-candy-crush-players-spent-an-average-of-4-2-million-a-day-in-2018/). The following lesson will show you how to get started with the [in_app_purchase](https://github.com/flutter/plugins/tree/master/packages/in_app_purchase) plugin to accept payments, microtransactions, and subscriptions from both stores.
+
+{{< figure src="img/in-app-purchases-demo.gif" caption="Demo of a consumable In App Purchase in Flutter on the Google Play Store" >}}
+
+### Product Types
+
+In App Purchases between Apple and Google are nearly identical, but you will find some minor differences in the code. This tutorial uses a managed *consumable* product, which represents an item that can be purchased multiple times, like the useless gems/coins/tokens 💎 you can buy in many mobile games.
+
+- *Managed (consumable)*. Multi-purchase consumable, can be depleted and repurchased.
+- *Managed (non-consumable)*. One-time permanently owned product or upgrade.
+- *Subscription*. Product with recurring payments at specific intervals.
+- *Reward (Android)*. Provide reward for the user for watching an advertisement via AdMob. Mostly used in games.
+
+## Android Setup
+
+The Play Store [Billing](https://developer.android.com/google/play/billing/billing_overview) API will not work until you have at least an Alpha release track. If you do not have an existing app, check off the items below before proceeding further.
+
+
+✔️ Register your app and package ID (i.e com.fireship.myapp) in the [Google Play Console](https://developer.android.com/distribute/console).
+
+✔️ Follow the steps to create a [signed release APK](https://flutter.dev/docs/deployment/android). Or watch the [Android Flutter Deployment video](/courses/flutter-firebase/release-android/) 🎥.
+
+✔️ Upload the signed APK to Google Play and release it under the Alpha channel. Add testers to the track.
+
+### Add a Managed Product
+
+{{< figure src="img/google-play-product.png" caption="Setup a merchant account and create a managed product" >}}
+
+
+## Apple App Store Setup
+
+The setup for iOS is similar and requires an existing Apple developer account.
+
+✔️ Release your app and package ID (i.e com.fireship.myapp) to [App Store Connect](https://appstoreconnect.apple.com/).
+
+✔️ Follow the steps to create an [iOS release](https://flutter.dev/docs/deployment/ios). Or watch the [iOS Flutter Deployment video](/courses/flutter-firebase/release-ios/) 🎥.
+
+### Enable IAP Capability in XCode
+
+You can enable In App Purchases in Xcode by selecting the build target and flipping the switch under the capabilities tab.
+
+{{< figure src="img/xcode-enable-in-app-purchases.png" caption="Enable In App Purchases in Xcode" >}}
+
+### App Store Connect Products
+
+Create a consumable product in Xcode. Make sure to keep the "product ID" consistent between the App Store and Play Store.
+
+{{< figure src="img/app-store-connect-iap.png" caption="Create a product on App Store Connect" >}}
+
+
+## Flutter In App Purchases Demo
+
+The code below demonstrates how to implement a single *consumable* product. First, add the plugin to your dependencies.
+
+{{< file "flutter" "pubspec.yaml" >}}
+```yaml
+dependencies:
+ flutter:
+ sdk: flutter
+
+ in_app_purchase: 0.2.0+1
+```
+
+
+
+### In App Purchases Widget Overview
+
+Let's start by creating a StatefulWidget with an abstract representation of the data we'll need to manage for In App Purchases. This widget handles the entire IAP flow, including the retrieval of products/purchases and the facilitation of new purchases.
+
+
+The code notes below marked `TODO` are recommendations that you should implement based on your backend setup. For example, you may want to save the the state of a consumable purchase in a database.
+
+
+
+{{< file "dart" "purchase.dart" >}}
+```dart
+import 'dart:async';
+import 'dart:io';
+import 'package:flutter/material.dart';
+import 'package:in_app_purchase/in_app_purchase.dart';
+
+final String testID = 'gems_test';
+
+class MarketScreen extends StatefulWidget {
+ createState() => MarketScreenState();
+}
+
+class MarketScreenState extends State {
+
+ /// Is the API available on the device
+ bool available = true;
+
+ /// The In App Purchase plugin
+ InAppPurchaseConnection _iap = InAppPurchaseConnection.instance;
+
+ /// Products for sale
+ List _products = [];
+
+ /// Past purchases
+ List _purchases = [];
+
+ /// Updates to purchases
+ StreamSubscription _subscription;
+
+ /// Consumable credits the user can buy
+ int credits = 0;
+
+ @override
+ void initState() {
+ _initialize();
+ super.initState();
+ }
+
+ @override
+ void dispose() {
+ _subscription.cancel();
+ super.dispose();
+ }
+
+ /// Initialize data
+ void _initialize() async {
+
+ }
+
+
+ @override
+ Widget build(BuildContext context) {
+
+ return Scaffold(
+ appBar: AppBar(
+ title: Text(available ? 'Open for Business' : 'Not Available'),
+ ),
+ body: Center(
+ child: Column(
+ children: [
+ for (var prod in _products)
+
+ // UI if already purchased
+ if (_hasPurchased(prod.id) != null)
+ ...[
+
+ ]
+
+ // UI if NOT purchased
+ else ...[
+
+ ]
+ ],
+ ),
+ ),
+ );
+ }
+
+
+ // Private methods go here
+
+}
+
+```
+
+
+### Step 1 - Get Products and Past Purchases
+
+When the app is first initialized you must complete the following tasks:
+
+1. Fetch products.
+1. Fetch past purchases.
+1. Determine if the user has already purchased certain items and deliver them in the app.
+
+In the case of consumable products, you will also likely need to query your own database for the current state of the product, such as the "user's remaining gems".
+
+{{< file "dart" "purchases.dart" >}}
+```dart
+
+ /// Initialize data
+ void _initialize() async {
+
+ // Check availability of In App Purchases
+ _available = await _iap.isAvailable();
+
+ if (_available) {
+
+ await _getProducts();
+ await _getPastPurchases();
+
+ // Verify and deliver a purchase with your own business logic
+ _verifyPurchase();
+
+ }
+ }
+
+
+
+ /// Get all products available for sale
+ Future _getProducts() async {
+ Set ids = Set.from([testID, 'test_a']);
+ ProductDetailsResponse response = await _iap.queryProductDetails(ids);
+
+ setState(() {
+ _products = response.productDetails;
+ });
+ }
+
+ /// Gets past purchases
+ Future _getPastPurchases() async {
+ QueryPurchaseDetailsResponse response =
+ await _iap.queryPastPurchases();
+
+ for (PurchaseDetails purchase in response.pastPurchases) {
+ final pending = Platform.isIOS
+ ? purchaseDetails.pendingCompletePurchase
+ : !purchaseDetails.billingClientPurchase.isAcknowledged;
+
+ if (pending) {
+ InAppPurchaseConnection.instance.completePurchase(purchase);
+ }
+ }
+
+ setState(() {
+ _purchases = response.pastPurchases;
+ });
+ }
+
+ /// Returns purchase of specific product ID
+ PurchaseDetails _hasPurchased(String productID) {
+ return _purchases.firstWhere( (purchase) => purchase.productID == productID, orElse: () => null);
+ }
+
+ /// Your own business logic to setup a consumable
+ void _verifyPurchase() {
+ PurchaseDetails purchase = _hasPurchased(testID);
+
+ // TODO serverside verification & record consumable in the database
+
+ if (purchase != null && purchase.status == PurchaseStatus.purchased) {
+ _credits = 10;
+ }
+ }
+
+
+
+```
+
+### Step 2 - Handle New Purchases
+
+1. Allow the user to make a new purchase.
+1. Listen to a Stream that emits new purchases.
+
+By default the plugin will automatically mark the product as consumed, but you can override this behavior with the `autoConsume` argument. If you set it to false, you must manually mark the product as consumed to enable another purchase (Android only).
+
+The stream only emits the latest purchase as a List, so make sure to merge the emitted value into `_purchases` and not overwrite the existing list.
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+
+ void _initialize() async {
+
+ // ... omitted
+
+
+ // Listen to new purchases
+ _subscription = _iap.purchaseUpdatedStream.listen((data) => setState(() {
+ print('NEW PURCHASE');
+ _purchases.addAll(data);
+ _verifyPurchase();
+ }));
+ }
+
+ /// Purchase a product
+ void _buyProduct(ProductDetails prod) {
+ final PurchaseParam purchaseParam = PurchaseParam(productDetails: prod);
+ // _iap.buyNonConsumable(purchaseParam: purchaseParam);
+ _iap.buyConsumable(purchaseParam: purchaseParam, autoConsume: false);
+ }
+
+
+```
+
+### Step 3 - Consume the Product
+
+If you are selling one-time upgrade purchase you're done at this point. However, we turned autoConsume off in the previous step, so the product can only be repurchased the purchase has been marked as consumed.
+
+Keep in mind, you should also save the state of the consumable product on your backend database. It cannot be retrieved after the widget is destroyed.
+
+{{< file "dart" "main.dart" >}}
+```dart
+ /// Spend credits and consume purchase when they run pit
+ void _spendCredits(PurchaseDetails purchase) async {
+
+ /// Decrement credits
+ setState(() { _credits--; });
+
+ /// TODO update the state of the consumable to a backend database
+
+ // Mark consumed when credits run out
+ if (_credits == 0) {
+ var res = await _iap.consumePurchase(purchase);
+ await _getPastPurchases();
+ }
+
+ }
+```
+
+### Step 4 - The UI
+
+The build method implements a bare minimum UI that loops over each product and provides buttons to buy and consume them.
+
+
+```dart
+ @override
+ Widget build(BuildContext context) {
+
+ return Scaffold(
+ appBar: AppBar(
+ title: Text(available ? 'Open for Business' : 'Not Available'),
+
+ ),
+ body: Center(
+ child: Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ children: [
+ for (var prod in _products)
+
+ // UI if already purchased
+ if (_hasPurchased(prod.id) != null)
+ ...[
+ Text('💎 $credits', style: TextStyle(fontSize: 60)),
+ FlatButton(
+ child: Text('Consume'),
+ color: Colors.green,
+ onPressed: () => _spendCredits(_hasPurchased(prod.id)),
+ )
+ ]
+
+ // UI if NOT purchased
+ else ...[
+ Text(prod.title, style: Theme.of(context).textTheme.headline),
+ Text(prod.description),
+ Text(prod.price,
+ style: TextStyle(color: Colors.greenAccent, fontSize: 60)),
+ FlatButton(
+ child: Text('Buy It'),
+ color: Colors.green,
+ onPressed: () => _buyProduct(prod),
+ ),
+ ]
+ ],
+ ),
+ ),
+ );
+ }
+```
+
+
+
+
diff --git a/hugo/content/lessons/flutter-inapp-purchases/img/.gitkeep b/content/lessons/flutter-ipod/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/flutter-inapp-purchases/img/.gitkeep
rename to content/lessons/flutter-ipod/img/.gitkeep
diff --git a/hugo/content/lessons/flutter-ipod/img/featured.jpg b/content/lessons/flutter-ipod/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-ipod/img/featured.jpg
rename to content/lessons/flutter-ipod/img/featured.jpg
diff --git a/hugo/content/lessons/flutter-ipod/img/featured.png b/content/lessons/flutter-ipod/img/featured.png
similarity index 100%
rename from hugo/content/lessons/flutter-ipod/img/featured.png
rename to content/lessons/flutter-ipod/img/featured.png
diff --git a/hugo/content/lessons/flutter-ipod/img/featured.webp b/content/lessons/flutter-ipod/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/flutter-ipod/img/featured.webp
rename to content/lessons/flutter-ipod/img/featured.webp
diff --git a/content/lessons/flutter-ipod/index.md b/content/lessons/flutter-ipod/index.md
new file mode 100644
index 000000000..c513a6e6f
--- /dev/null
+++ b/content/lessons/flutter-ipod/index.md
@@ -0,0 +1,277 @@
+---
+title: Build the Classic iPod UI in Flutter
+publishdate: 2019-12-01T09:12:43-07:00
+lastmod: 2019-12-02T09:12:43-07:00
+author: Jeff Delaney
+draft: false
+description: Build a throwback iPod UI with a click wheel scroller using Flutter.
+tags:
+ - flutter
+
+youtube: A8dvbFby-s0
+github: https://github.com/fireship-io/216-flutter-ipod
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+An awesome [tweet](https://t.co/zVk5YJj0rh) was making the rounds last week that recreates the [iPod Classic](https://en.wikipedia.org/wiki/IPod_Classic) UI with SwiftUI. It features a *click wheel* that scrolls through a list of items when rotated and makes a excellent Flutter UI challenge.
+
+
+
+
+
+Creating an animated scrolling list with Flutter is a piece of cake, but calculating scroll direction/velocity from the pan events on the wheel is a bigger challenge. The following lesson demonstrates how to build UI elements with Flutter inspired by the iPod Classic.
+
+
+Checkout this [rotational pan widget](/snippets/circular-drag-flutter) snippet if you're looking for a Flutter widget that is aware of clockwise rotation, like a knob or radial dial.
+
+
+
+## Demo
+
+Notice how the user has three different ways to change the scroll position.
+
+1. Drag the PageView.
+2. Tap the `>>` or `<<` icon buttons on the wheel.
+3. Pan the wheel clockwise or counterclockwise.
+
+{{< vimeo 376306674 >}}
+
+## Page View
+
+The album covers are scrolled in a [PageView](https://api.flutter.dev/flutter/widgets/PageView-class.html) widget. Watch the video below for a quick introduction.
+
+
+{{< youtube J1gE9xvph-A >}}
+
+
+### Controller
+
+The control provides information about the current scroll position, as well as methods to change its position. We use a listener to react to every position change that occurs in the PageView.
+
+{{< file "dart" "main.dart" >}}
+```dart
+class IPod extends StatefulWidget {
+ IPod({Key key}) : super(key: key);
+
+ @override
+ _IPodState createState() => _IPodState();
+}
+
+class _IPodState extends State {
+ final PageController _pageCtrl = PageController(viewportFraction: 0.6);
+
+ double currentPage = 0.0;
+
+ @override
+ void initState() {
+ _pageCtrl.addListener(() {
+ setState(() {
+ currentPage = _pageCtrl.page;
+ });
+ });
+ super.initState();
+ }
+}
+```
+
+### Horizonal Scrolling Album Covers
+
+The `PageView.builder` creates a view that only builds the children when they are visible, similar to virtual scrolling on the web.
+
+{{< file "dart" "main.dart" >}}
+```dart
+ @override
+ Widget build(BuildContext context) {
+ return SafeArea(
+ child: Column(
+ children: [
+ Container(
+ height: 300,
+ color: Colors.black,
+ child: PageView.builder(
+ controller: _pageCtrl,
+ scrollDirection: Axis.horizontal,
+ itemCount: 9, //Colors.accents.length,
+ itemBuilder: (context, int currentIdx) {
+ return AlbumCard(
+ color: Colors.accents[currentIdx],
+ idx: currentIdx,
+ currentPage: currentPage,
+ );
+ },
+ ),
+ ),
+ ]
+ )
+ )
+ }
+```
+
+### 3D Transform
+
+The builder for the PageView references a custom widget named `AlbumCard`. It represents the UI for a single page or item in the list.
+
+The albums off center should be scaled down slightly and tilted along the y-axis. We can make that happen with a Transform widget that sets perspective on a 4x4 matrix. Learn more about transforms by watching the video below:
+
+
+{{< youtube 9z_YNlRlWfA >}}
+
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+class AlbumCard extends StatelessWidget {
+ final Color color;
+ final int idx;
+ final double currentPage;
+ AlbumCard({this.color, this.idx, this.currentPage});
+
+ @override
+ Widget build(BuildContext context) {
+ double relativePosition = idx - currentPage;
+
+ return Container(
+ width: 250,
+ child: Transform(
+ transform: Matrix4.identity()
+ ..setEntry(3, 2, 0.003) // add perspective
+ ..scale((1 - relativePosition.abs()).clamp(0.2, 0.6) + 0.4)
+ ..rotateY(relativePosition),
+ // ..rotateZ(relativePosition),
+ alignment: relativePosition >= 0
+ ? Alignment.centerLeft
+ : Alignment.centerRight,
+ child: Container(
+ margin: EdgeInsets.only(top: 20, bottom: 20, left: 5, right: 5),
+ padding: EdgeInsets.all(10),
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.circular(12),
+ color: color,
+ image: DecorationImage(
+ fit: BoxFit.cover,
+ image: NetworkImage(images[idx]),
+ ),
+ ),
+ ),
+ ),
+ );
+ }
+}
+
+```
+
+
+## Click Wheel
+
+The most difficult aspect of this demo is building a circular shape that controls the PageView. While the user drags clockwise it should scroll the view to the right, or to the left when dragged counterclockwise. It must also have buttons that can animate between individual items.
+
+### Doughnut-shaped Gesture Detector
+
+The GestureDetector should only fire events when the outer ring or doughnut is panned across. Placing the widgets in a [Stack](/courses/flutter-firebase/widgets-stack/) allow a smaller circle to be placed on top, which blocks the detection of events in this areas.
+
+{{< file "dart" "main.dart" >}}
+```dart
+// Add this to the Column list
+Center(
+ child: Stack(
+ alignment: Alignment.center,
+ children: [
+ GestureDetector(
+ onPanUpdate: _panHandler, // Not implemented yet, see next steps
+ child: Container(
+ height: 300,
+ width: 300,
+ decoration: BoxDecoration(
+ shape: BoxShape.circle,
+ color: Colors.black,
+ ),
+ ),
+ ),
+ Container(
+ height: 100,
+ width: 100,
+ decoration: BoxDecoration(
+ shape: BoxShape.circle,
+ color: Colors.white38,
+ ),
+ ),
+ ]),
+),
+```
+
+### Add Buttons to the Wheel
+
+The code below represents a single click button in the wheel. Reference the full [source code](https://github.com/fireship-io/216-flutter-ipod/blob/master/lib/main.dart) to see them all.
+
+Notice how it uses the PageController to animate to a new position on a button press event.
+
+{{< file "dart" "main.dart" >}}
+```dart
+ Container(
+ child: IconButton(
+ icon: Icon(Icons.fast_forward),
+ iconSize: 40,
+ onPressed: () => _pageCtrl.animateToPage(
+ (_pageCtrl.page + 1).toInt(),
+ duration: Duration(milliseconds: 300),
+ curve: Curves.easeIn
+ ),
+ ),
+ alignment: Alignment.centerRight,
+ margin: EdgeInsets.only(right: 30),
+ ),
+```
+
+
+### Handle Rotational Pan Movement
+
+Building a rotation-aware widget requires some calculations. Checkout the [draggable rotating wheel in Flutter](/snippets/circular-drag-flutter) snippet for a more detailed explanation of these calculations. Basically, this gives us a way to detect clockwise or counter-clockwise movement.
+
+{{< vimeo 376862979 >}}
+
+{{< file "dart" "main.dart" >}}
+```dart
+ void _panHandler(DragUpdateDetails d) {
+
+ double radius = 150;
+
+ /// Pan location on the wheel
+ bool onTop = d.localPosition.dy <= radius;
+ bool onLeftSide = d.localPosition.dx <= radius;
+ bool onRightSide = !onLeftSide;
+ bool onBottom = !onTop;
+
+ /// Pan movements
+ bool panUp = d.delta.dy <= 0.0;
+ bool panLeft = d.delta.dx <= 0.0;
+ bool panRight = !panLeft;
+ bool panDown = !panUp;
+
+ /// Absoulte change on axis
+ double yChange = d.delta.dy.abs();
+ double xChange = d.delta.dx.abs();
+
+ /// Directional change on wheel
+ double verticalRotation = (onRightSide && panDown) || (onLeftSide && panUp)
+ ? yChange
+ : yChange * -1;
+
+ double horizontalRotation = (onTop && panRight) || (onBottom && panLeft)
+ ? xChange
+ : xChange * -1;
+
+ // Total computed change
+ double rotationalChange = (verticalRotation + horizontalRotation) * (d.delta.distance * 0.2);
+
+
+ // Move the page view scroller
+ _pageCtrl.jumpTo(_pageCtrl.offset + rotationalChange);
+ }
+```
\ No newline at end of file
diff --git a/hugo/content/lessons/flutter-ipod/img/.gitkeep b/content/lessons/flutter-push-notifications-fcm-guide/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/flutter-ipod/img/.gitkeep
rename to content/lessons/flutter-push-notifications-fcm-guide/img/.gitkeep
diff --git a/hugo/content/lessons/flutter-push-notifications-fcm-guide/img/fcm-test-token.png b/content/lessons/flutter-push-notifications-fcm-guide/img/fcm-test-token.png
similarity index 100%
rename from hugo/content/lessons/flutter-push-notifications-fcm-guide/img/fcm-test-token.png
rename to content/lessons/flutter-push-notifications-fcm-guide/img/fcm-test-token.png
diff --git a/hugo/content/lessons/flutter-push-notifications-fcm-guide/img/fcm-token-firestore.png b/content/lessons/flutter-push-notifications-fcm-guide/img/fcm-token-firestore.png
similarity index 100%
rename from hugo/content/lessons/flutter-push-notifications-fcm-guide/img/fcm-token-firestore.png
rename to content/lessons/flutter-push-notifications-fcm-guide/img/fcm-token-firestore.png
diff --git a/hugo/content/lessons/flutter-push-notifications-fcm-guide/img/featured.jpg b/content/lessons/flutter-push-notifications-fcm-guide/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-push-notifications-fcm-guide/img/featured.jpg
rename to content/lessons/flutter-push-notifications-fcm-guide/img/featured.jpg
diff --git a/hugo/content/lessons/flutter-push-notifications-fcm-guide/img/featured.png b/content/lessons/flutter-push-notifications-fcm-guide/img/featured.png
similarity index 100%
rename from hugo/content/lessons/flutter-push-notifications-fcm-guide/img/featured.png
rename to content/lessons/flutter-push-notifications-fcm-guide/img/featured.png
diff --git a/hugo/content/lessons/flutter-push-notifications-fcm-guide/img/featured.webp b/content/lessons/flutter-push-notifications-fcm-guide/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/flutter-push-notifications-fcm-guide/img/featured.webp
rename to content/lessons/flutter-push-notifications-fcm-guide/img/featured.webp
diff --git a/hugo/content/lessons/flutter-push-notifications-fcm-guide/img/flutter-notification.png b/content/lessons/flutter-push-notifications-fcm-guide/img/flutter-notification.png
similarity index 100%
rename from hugo/content/lessons/flutter-push-notifications-fcm-guide/img/flutter-notification.png
rename to content/lessons/flutter-push-notifications-fcm-guide/img/flutter-notification.png
diff --git a/hugo/content/lessons/flutter-push-notifications-fcm-guide/img/notification-background.png b/content/lessons/flutter-push-notifications-fcm-guide/img/notification-background.png
similarity index 100%
rename from hugo/content/lessons/flutter-push-notifications-fcm-guide/img/notification-background.png
rename to content/lessons/flutter-push-notifications-fcm-guide/img/notification-background.png
diff --git a/hugo/content/lessons/flutter-push-notifications-fcm-guide/img/notification-foreground.png b/content/lessons/flutter-push-notifications-fcm-guide/img/notification-foreground.png
similarity index 100%
rename from hugo/content/lessons/flutter-push-notifications-fcm-guide/img/notification-foreground.png
rename to content/lessons/flutter-push-notifications-fcm-guide/img/notification-foreground.png
diff --git a/hugo/content/lessons/flutter-push-notifications-fcm-guide/img/segmented-notification.png b/content/lessons/flutter-push-notifications-fcm-guide/img/segmented-notification.png
similarity index 100%
rename from hugo/content/lessons/flutter-push-notifications-fcm-guide/img/segmented-notification.png
rename to content/lessons/flutter-push-notifications-fcm-guide/img/segmented-notification.png
diff --git a/content/lessons/flutter-push-notifications-fcm-guide/index.md b/content/lessons/flutter-push-notifications-fcm-guide/index.md
new file mode 100644
index 000000000..3b244a149
--- /dev/null
+++ b/content/lessons/flutter-push-notifications-fcm-guide/index.md
@@ -0,0 +1,343 @@
+---
+title: FCM Push Notifications for Flutter
+lastmod: 2019-06-11T06:37:28-07:00
+publishdate: 2019-06-11T06:37:28-07:00
+author: Jeff Delaney
+draft: false
+description: Send push notifications in Flutter using Firebase Cloud Messaging (FCM) to specific devices, topics, and user segments.
+tags:
+ - flutter
+ - firebase
+ - push-notifications
+ - cloud-functions
+
+youtube: 2TSm2YGBT1s
+github: https://github.com/fireship-io/192-flutter-fcm-push-notifications
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+When used correctly, push notifications can be an excellent way to drive user engagement and keep your app in focus on a consistent basis. When used incorrectly, they can be annoying and motivate users to simply uninstall your app and never look back. Fortunately, [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging) (FCM) provides a sophisticated set of tools to send notifications only to users who actually want them. The following lesson will teach you how to configure [FCM in Flutter](https://github.com/flutter/plugins/tree/master/packages/firebase_messaging) to broadcast both Topic-based, Device-based, and Segment-based push notifications.
+
+Before getting started, it is important to understand that there are three types of [FCM push notifications](https://firebase.google.com/docs/cloud-messaging/concept-options) you can send to a device.
+
+1. **Device Token**. Sends a message to a single device.
+2. **Topic Subscription**. Sends a message to multiple devices that explicitly subscribed to a topic.
+3. **User Segment**. Sends a notification to a subset of users based on your analytics data.
+
+## Step 0: Initial Setup
+
+1. Install FlutterFire
+
+
+In addition to FCM, we will also install Cloud Firestore and Firebase Auth to build a full-stack push notification service.
+
+{{< file "flutter" "pubspec.yaml" >}}
+```yaml
+dependencies:
+ flutter:
+ sdk: flutter
+
+ firebase_core: ^0.4.0
+ firebase_auth: ^0.11.1+6
+ cloud_firestore: ^0.12.5
+
+ firebase_messaging: ^5.0.2
+```
+
+
+### Android
+
+Android does not require any specific configuration, unless you want to run code after a notification is clicked-on from the device tray (while the app was in the backgrond).
+
+{{< file "file" "android/app/src/main/AndroidManifest.xml" >}}
+```xml
+
+
+```
+
+### iOS
+
+iOS apps are required to generate a certificate for the Apple Push Notification service (APNs) and enable background services in Xcode. Rather than duplicate the content from the documentation, I recommend following the [official setup guide](https://firebase.google.com/docs/cloud-messaging/ios/certs) from Firebase.
+
+
+## Step 1: Receive Messages in Flutter (Frontend)
+
+1. Get permission (iOS only).
+2. Get the token for the device **OR** subscribe the user to a topic.
+3. Save it to a database (for single device notifications).
+4. Handle incoming messages both in the foreground & background.
+
+All logic can be handled within a StatefulWidget. This allows you to resuse the FCM logic across multiple screens if necessary.
+
+{{< file "dart" "main.dart" >}}
+```dart
+import 'dart:io';
+import 'package:flutter/material.dart';
+
+import 'package:firebase_messaging/firebase_messaging.dart';
+import 'package:cloud_firestore/cloud_firestore.dart';
+
+class MessageHandler extends StatefulWidget {
+ @override
+ _MessageHandlerState createState() => _MessageHandlerState();
+}
+
+class _MessageHandlerState extends State {
+ final Firestore _db = Firestore.instance;
+ final FirebaseMessaging _fcm = FirebaseMessaging();
+
+ // TODO...
+
+}
+```
+
+### Get Permission on iOS
+
+On iOS, you must explicitly get permission from the user to send notifications. This can handled when the widget is initialized, or better yet, you might strategically request permission when the user is most likely to say "yes".
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+ // ...
+
+ StreamSubscription iosSubscription;
+
+ @override
+ void initState() {
+ super.initState();
+ if (Platform.isIOS) {
+ iosSubscription = _fcm.onIosSettingsRegistered.listen((data) {
+ // save the token OR subscribe to a topic here
+ });
+
+ _fcm.requestNotificationPermissions(IosNotificationSettings());
+ }
+
+ }
+```
+
+### Show the Notification UI in the Foreground
+
+The [callback that fires](https://github.com/flutter/plugins/tree/master/packages/firebase_messaging#receiving-messages) when a message is received depends on the OS. Here is a general rule you can follow, but read the official docs to understand all the edge cases.
+
+- `onMessage` fires when the app is open and running in the foreground.
+- `onResume` fires if the app is closed, but still running in the background.
+- `onLaunch` fires if the app is fully terminated.
+
+
+When the notification is received in the foreground (the app is open), we can handle it with one of Flutter's built-in widgets.
+
+Simple notifications can be handled in the foreground with a [SnackBar](https://flutter.dev/docs/cookbook/design/snackbars). The snackbar has room for a short sentence and a single action. It will be auto-dismissed if the user does not engage with the alert.
+
+
+More complex notifications may benefit from a full [AlertDialog](https://api.flutter.dev/flutter/material/AlertDialog-class.html) screen. The `onMessage` callback is called when the app is running in the foreground.
+
+{{< figure src="img/notification-foreground.png" caption="The appearance of a notification when running in the foreground with an AlertDialog widget " >}}
+
+When the app is closed, the notification will appear in the device tray with your app name, icon, and notification details. When clicked, it will open the app and run the `onResume` or `onLaunch` callbacks.
+
+{{< figure src="img/notification-background.png" caption="The appearance of a notification in the device tray in the background" >}}
+
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+ @override
+ void initState() {
+
+ // ...
+
+ _fcm.configure(
+ onMessage: (Map message) async {
+ print("onMessage: $message");
+ showDialog(
+ context: context,
+ builder: (context) => AlertDialog(
+ content: ListTile(
+ title: Text(message['notification']['title']),
+ subtitle: Text(message['notification']['body']),
+ ),
+ actions: [
+ FlatButton(
+ child: Text('Ok'),
+ onPressed: () => Navigator.of(context).pop(),
+ ),
+ ],
+ ),
+ );
+ },
+ onLaunch: (Map message) async {
+ print("onLaunch: $message");
+ // TODO optional
+ },
+ onResume: (Map message) async {
+ print("onResume: $message");
+ // TODO optional
+ },
+ );
+ }
+```
+
+
+
+
+### Segmented Notifications
+
+At this point, you can send segmented notifications directly from the Firebase Notification Composer console based on the Analytics data you collect from users.
+
+
+{{< figure src="img/segmented-notification.png" alt="segmented push notification FCM" >}}
+
+
+### Topic Based Notifications
+
+Topic-based notifications can be subscribed to in the background, or the user can manually opt-in by clicking a button.
+
+{{< file "dart" "main.dart" >}}
+```dart
+ FlatButton(
+ child: Text('I like puppies'),
+ onPressed: () => _fcm.subscribeToTopic('puppies');,
+ ),
+
+ FlatButton(
+ child: Text('I hate puppies'),
+ onPressed: () => _fcm.unsubscribeFromTopic('puppies');,
+ ),
+```
+
+
+You may also want to save the user's manual topic subscriptions in the database because they cannot be retrieved directly through the SDK.
+
+
+### Individual Device Notifications
+
+In order to send personalized notifications, we need a way to keep track of the device tokens on a per-user basis - Firestore is an excellent choice for this task. After the user has logged-in, associate the device token in a subcollection located at `users/{userID}/tokens/{token}`. The token itself is just a string, which can be used to enforce uniqueness on the Firestore document by using it as the doc ID.
+
+
+{{< figure src="img/fcm-token-firestore.png" caption="Firestore data model for managing single device FCM tokens" >}}
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+ /// Get the token, save it to the database for current user
+ _saveDeviceToken() async {
+ // Get the current user
+ String uid = 'jeffd23';
+ // FirebaseUser user = await _auth.currentUser();
+
+ // Get the token for this device
+ String fcmToken = await _fcm.getToken();
+
+ // Save it to Firestore
+ if (fcmToken != null) {
+ var tokens = _db
+ .collection('users')
+ .document(uid)
+ .collection('tokens')
+ .document(fcmToken);
+
+ await tokens.setData({
+ 'token': fcmToken,
+ 'createdAt': FieldValue.serverTimestamp(), // optional
+ 'platform': Platform.operatingSystem // optional
+ });
+ }
+ }
+```
+
+
+
+## Step 2: Send Messages with NodeJS (Backend)
+
+You can send messages with any of the Firebase Admin SDKs, but NodeJS with TypeScript is a solid option for Flutter developers.
+
+
+{{< file "terminal" "command line" >}}
+```text
+firebase init functions
+
+cd functions
+```
+
+Next, initialize the Admin SDK in your Cloud Functions code.
+
+
+{{< file "ts" "functions/index.ts" >}}
+```typescript
+import * as functions from 'firebase-functions';
+import * as admin from 'firebase-admin';
+admin.initializeApp();
+
+const db = admin.firestore();
+const fcm = admin.messaging();
+```
+
+### Send to Topic
+
+When it comes to topic-based notifications, you will often send the message in response to an event in the database. For example, when a new document is created in *puppies* collection, we may want to notify all users subscribed to the *puppies* FCM topic.
+
+{{< file "ts" "functions/index.ts" >}}
+```typescript
+export const sendToTopic = functions.firestore
+ .document('puppies/{puppyId}')
+ .onCreate(async snapshot => {
+ const puppy = snapshot.data();
+
+ const payload: admin.messaging.MessagingPayload = {
+ notification: {
+ title: 'New Puppy!',
+ body: `${puppy.name} is ready for adoption`,
+ icon: 'your-icon-url',
+ click_action: 'FLUTTER_NOTIFICATION_CLICK' // required only for onResume or onLaunch callbacks
+ }
+ };
+
+ return fcm.sendToTopic('puppies', payload);
+ });
+```
+
+
+### Send to Device
+
+Device notifications may also be tied to a database event, but are more likely to be related to a specific user. For example, let's imagine we have an *orders* collection and want notify a seller when a new order has been finalized. In this case, we will query the tokens subcollection under the user, then send a notification to all of their device tokens.
+
+{{< file "ts" "functions/index.ts" >}}
+```typescript
+export const sendToDevice = functions.firestore
+ .document('orders/{orderId}')
+ .onCreate(async snapshot => {
+
+
+ const order = snapshot.data();
+
+ const querySnapshot = await db
+ .collection('users')
+ .doc(order.seller)
+ .collection('tokens')
+ .get();
+
+ const tokens = querySnapshot.docs.map(snap => snap.id);
+
+ const payload: admin.messaging.MessagingPayload = {
+ notification: {
+ title: 'New Order!',
+ body: `you sold a ${order.product} for ${order.total}`,
+ icon: 'your-icon-url',
+ click_action: 'FLUTTER_NOTIFICATION_CLICK'
+ }
+ };
+
+ return fcm.sendToDevice(tokens, payload);
+ });
+```
+
diff --git a/hugo/content/lessons/flutter-push-notifications-fcm-guide/img/.gitkeep b/content/lessons/flutter-radial-menu-staggered-animations/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/flutter-push-notifications-fcm-guide/img/.gitkeep
rename to content/lessons/flutter-radial-menu-staggered-animations/img/.gitkeep
diff --git a/hugo/content/lessons/flutter-radial-menu-staggered-animations/img/featured.jpg b/content/lessons/flutter-radial-menu-staggered-animations/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-radial-menu-staggered-animations/img/featured.jpg
rename to content/lessons/flutter-radial-menu-staggered-animations/img/featured.jpg
diff --git a/hugo/content/lessons/flutter-radial-menu-staggered-animations/img/featured.png b/content/lessons/flutter-radial-menu-staggered-animations/img/featured.png
similarity index 100%
rename from hugo/content/lessons/flutter-radial-menu-staggered-animations/img/featured.png
rename to content/lessons/flutter-radial-menu-staggered-animations/img/featured.png
diff --git a/hugo/content/lessons/flutter-radial-menu-staggered-animations/img/featured.webp b/content/lessons/flutter-radial-menu-staggered-animations/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/flutter-radial-menu-staggered-animations/img/featured.webp
rename to content/lessons/flutter-radial-menu-staggered-animations/img/featured.webp
diff --git a/hugo/content/lessons/flutter-radial-menu-staggered-animations/img/flutter-perf.png b/content/lessons/flutter-radial-menu-staggered-animations/img/flutter-perf.png
similarity index 100%
rename from hugo/content/lessons/flutter-radial-menu-staggered-animations/img/flutter-perf.png
rename to content/lessons/flutter-radial-menu-staggered-animations/img/flutter-perf.png
diff --git a/content/lessons/flutter-radial-menu-staggered-animations/index.md b/content/lessons/flutter-radial-menu-staggered-animations/index.md
new file mode 100644
index 000000000..e1c127b47
--- /dev/null
+++ b/content/lessons/flutter-radial-menu-staggered-animations/index.md
@@ -0,0 +1,316 @@
+---
+title: Flutter Animated Radial Menu
+lastmod: 2019-02-24T09:14:20-07:00
+publishdate: 2019-02-24T09:14:20-07:00
+author: Jeff Delaney
+draft: false
+description: Compose staggered transform animations in Flutter by building a radial menu from scratch.
+tags:
+ - flutter
+ - dart
+ - animation
+
+youtube: MhQI-ysRyrk
+github: https://github.com/fireship-io/170-flutter-animated-radial-menu
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+versions:
+ flutter: 1.0
+ vector_math: ^2.0.8
+---
+
+Building a flashy animated radial menu in Flutter can be done with ease thanks to the [Transform](https://docs.flutter.io/flutter/widgets/Transform-class.html) widget and [staggered animations](https://flutter.dev/docs/development/ui/animations/staggered-animations). The following lesson will teach you how to compose flutter animations into a cool rotating circular widget, which can easily maintain 60FPS on modern smartphones.
+
+ with SingleTickerProviderStateMixin {
+
+ AnimationController controller;
+
+ @override
+ Widget build(BuildContext context) {
+ return RadialAnimation(controller: controller);
+ }
+
+}
+
+
+// The Animation
+class RadialAnimation extends StatelessWidget {
+ final AnimationController controller;
+ RadialAnimation({ Key key, this.controller }) : super(key: key);
+
+
+ build(context) {
+ return null;
+ }
+}
+```
+
+### Profiling Animation Performance
+
+I highly recommend running your app on a real device to make use of Flutter's [Performance Profiling](https://flutter.dev/docs/testing/ui-performance) tools. As long as you maintain 60 frames-per-second (FPS), your app should be perceived as "butter smooth" 🥞. As you can see from the profile below the animation has plenty of room to spare on a Pixel 2. Smaller blue bars means faster rendering for each frame (they will become red when perf starts to degrade).
+
+{{< figure src="img/flutter-perf.png" alt="flutter animation performance at 60FPS" >}}
+
+## Step 2 - Animate the Open and Close Buttons
+
+The first animation will toggle the visibility of the open/close button in the middle of the menu.
+
+ with SingleTickerProviderStateMixin {
+
+ AnimationController controller;
+
+ @override
+ void initState() {
+ super.initState();
+ controller = AnimationController(duration: Duration(milliseconds: 900), vsync: this);
+ }
+}
+```
+
+### Open/Close Button Scale Animation
+
+All of the buttons in the radial menu will be stacked on top of each other, then animated around the center when the menu is opened.
+
+- The *Tween* defines the values that will change over the course of the animation. For example, we start at a size of 150%, then scale down to 0%.
+- The *CurvedAnimation* defines the [Bezier curve](https://www.jasondavies.com/animated-bezier/) - or timing function - of the animation over its lifecycle. Flutter has a bunch of built-in curves that that will make your animations more exciting, so experiment with these.
+- *Transform.scale()* wrapps the floating action buttons and will dynamically apply scale changes when the animation is running.
+
+
+
+
+```dart
+class RadialAnimation extends StatelessWidget {
+ RadialAnimation({ Key key, this.controller }) :
+
+ scale = Tween(
+ begin: 1.5,
+ end: 0.0,
+ ).animate(
+ CurvedAnimation(
+ parent: controller,
+ curve: Curves.fastOutSlowIn
+ ),
+ ),
+
+ super(key: key);
+
+ final AnimationController controller;
+ final Animation scale;
+
+
+ build(context) {
+ return AnimatedBuilder(
+ animation: controller,
+ builder: (context, builder) {
+ return Stack(
+ alignment: Alignment.center,
+ children: [
+ Transform.scale(
+ scale: scale.value - 1.5, // subtract the beginning value to run the opposite animation
+ child: FloatingActionButton(
+ child: Icon(FontAwesomeIcons.timesCircle),
+ onPressed: _close,
+ backgroundColor: Colors.red
+ ),
+ ),
+
+ Transform.scale(
+ scale: scale.value,
+ child: FloatingActionButton(
+ child:
+ Icon(FontAwesomeIcons.solidDotCircle),
+ onPressed: _open
+ ),
+ )
+ ]);
+ });
+ }
+
+ _open() {
+ controller.forward();
+ }
+
+ _close() {
+ controller.reverse();
+ }
+}
+
+```
+
+## Step 3 - Animate the Surrounding Buttons
+
+The next section is the most challenging because we need to determine the correct *x,y* position of each button from the center of a circle - this require some Trigonometry 📐.
+
+(
+ begin: 0.0,
+ end: 100.0,
+ ).animate(
+ CurvedAnimation(
+ parent: controller,
+ curve: Curves.linear
+ ),
+ ),
+
+ super(key: key);
+
+ final AnimationController controller;
+ final Animation scale;
+ final Animation translation;
+
+
+ build(context) {
+ return AnimatedBuilder(
+ animation: controller,
+ builder: (context, builder) {
+ return Stack(
+ alignment: Alignment.center,
+ children: [
+ _buildButton(0, color: Colors.red, icon: FontAwesomeIcons.thumbtack),
+ _buildButton(45, color: Colors.green, icon:FontAwesomeIcons.sprayCan),
+ _buildButton(90, color: Colors.orange, icon: FontAwesomeIcons.fire),
+ _buildButton(135, color: Colors.blue, icon:FontAwesomeIcons.kiwiBird),
+ _buildButton(180, color: Colors.black, icon:FontAwesomeIcons.cat),
+ _buildButton(225, color: Colors.indigo, icon:FontAwesomeIcons.paw),
+ _buildButton(270, color: Colors.pink, icon: FontAwesomeIcons.bong),
+ _buildButton(315, color: Colors.yellow, icon:FontAwesomeIcons.bolt),
+ // ...omitted
+ ]);
+ });
+ }
+
+ _buildButton(double angle, { Color color, IconData icon }) {
+ final double rad = radians(angle);
+ return Transform(
+ transform: Matrix4.identity()..translate(
+ (translation.value) * cos(rad),
+ (translation.value) * sin(rad)
+ ),
+
+ child: FloatingActionButton(
+ child: Icon(icon), backgroundColor: color, onPressed: _close, elevation: 0)
+ );
+ }
+```
+
+## Step 4 - Rotate the Entire Set of Buttons
+
+Lastly, let's rotate the entire stack of buttons. The main difference to note with this animation is that it uses an `Interval` to stagger the rotation with specific start/end times relative to the total animation timeline.
+
+
+```dart
+class RadialAnimation extends StatelessWidget {
+ RadialAnimation({ Key key, this.controller }) :
+
+ // ...
+
+ rotation = Tween(
+ begin: 0.0,
+ end: 360.0,
+ ).animate(
+ CurvedAnimation(
+ parent: controller,
+ curve: Interval(
+ 0.3, 0.9,
+ curve: Curves.decelerate,
+ ),
+ ),
+ ),
+
+ super(key: key);
+
+ final AnimationController controller;
+ final Animation scale;
+ final Animation translation;
+ final Animation rotation;
+
+ build(context) {
+ return AnimatedBuilder(
+ animation: controller,
+ builder: (context, builder) {
+ return Transform.rotate( // Add rotation
+ angle: radians(rotation.value),
+ child: Stack(
+ alignment: Alignment.center,
+ children: [...]
+ )
+ );
+ });
+ }
+
+
+}
+```
+
+## The End
+
+Animations in Flutter render beautifully, but can become verbose if you're not careful. Be liberal about extracting logic into helper functions and use AnimatedBuilders to avoid excessive boilerplate.
+
diff --git a/hugo/content/lessons/flutter-radial-menu-staggered-animations/img/.gitkeep b/content/lessons/flutter-realtime-geolocation-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/flutter-radial-menu-staggered-animations/img/.gitkeep
rename to content/lessons/flutter-realtime-geolocation-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/flutter-realtime-geolocation-firebase/img/featured.jpg b/content/lessons/flutter-realtime-geolocation-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-realtime-geolocation-firebase/img/featured.jpg
rename to content/lessons/flutter-realtime-geolocation-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/flutter-realtime-geolocation-firebase/img/featured.png b/content/lessons/flutter-realtime-geolocation-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/flutter-realtime-geolocation-firebase/img/featured.png
rename to content/lessons/flutter-realtime-geolocation-firebase/img/featured.png
diff --git a/hugo/content/lessons/flutter-realtime-geolocation-firebase/img/featured.webp b/content/lessons/flutter-realtime-geolocation-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/flutter-realtime-geolocation-firebase/img/featured.webp
rename to content/lessons/flutter-realtime-geolocation-firebase/img/featured.webp
diff --git a/hugo/content/lessons/flutter-realtime-geolocation-firebase/img/firestore-geolocation.png b/content/lessons/flutter-realtime-geolocation-firebase/img/firestore-geolocation.png
similarity index 100%
rename from hugo/content/lessons/flutter-realtime-geolocation-firebase/img/firestore-geolocation.png
rename to content/lessons/flutter-realtime-geolocation-firebase/img/firestore-geolocation.png
diff --git a/hugo/content/lessons/flutter-realtime-geolocation-firebase/img/firestore-radius-query.png b/content/lessons/flutter-realtime-geolocation-firebase/img/firestore-radius-query.png
similarity index 100%
rename from hugo/content/lessons/flutter-realtime-geolocation-firebase/img/firestore-radius-query.png
rename to content/lessons/flutter-realtime-geolocation-firebase/img/firestore-radius-query.png
diff --git a/hugo/content/lessons/flutter-realtime-geolocation-firebase/img/flutter-basic-googlemap.png b/content/lessons/flutter-realtime-geolocation-firebase/img/flutter-basic-googlemap.png
similarity index 100%
rename from hugo/content/lessons/flutter-realtime-geolocation-firebase/img/flutter-basic-googlemap.png
rename to content/lessons/flutter-realtime-geolocation-firebase/img/flutter-basic-googlemap.png
diff --git a/hugo/content/lessons/flutter-realtime-geolocation-firebase/img/flutter-marker-googlemap.png b/content/lessons/flutter-realtime-geolocation-firebase/img/flutter-marker-googlemap.png
similarity index 100%
rename from hugo/content/lessons/flutter-realtime-geolocation-firebase/img/flutter-marker-googlemap.png
rename to content/lessons/flutter-realtime-geolocation-firebase/img/flutter-marker-googlemap.png
diff --git a/content/lessons/flutter-realtime-geolocation-firebase/index.md b/content/lessons/flutter-realtime-geolocation-firebase/index.md
new file mode 100644
index 000000000..157b0130d
--- /dev/null
+++ b/content/lessons/flutter-realtime-geolocation-firebase/index.md
@@ -0,0 +1,334 @@
+---
+title: Flutter Realtime Geolocation Firebase
+lastmod: 2019-02-13T06:22:01-07:00
+publishdate: 2019-02-13T06:22:01-07:00
+author: Jeff Delaney
+draft: false
+description: Build a basic realtime geolocation app that can query data within a radius using Flutter, Firestore, and Google Maps.
+tags:
+ - google-maps
+ - firestore
+ - firebase
+ - flutter
+
+youtube: MYHVyl-juUk
+github: https://github.com/fireship-io/167-flutter-geolocation-firestore
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+versions:
+ flutter: 1
+ cloud_firestore: 0.9.0
+ geoflutterfire: 2.0.2
+ location: 1.4.1
+ google_maps_flutter: 0.2.0
+
+update_notes: Google Maps for Flutter is currently in developer preview. This increases the risk of breaking changes, so always refer to the official docs.
+---
+
+Looking to build a realtime geolocation app like Lyft, Postmates, or Waze? It is easier than you might think when you combine the power of Flutter, Google Maps, and Firebase. The following lesson will show you how use [Google Maps in Flutter](https://pub.dartlang.org/packages/google_maps_flutter), then listen to a realtime feed of geolocation data in Firestore queried by its distance from a centerpoint - made possible by the [GeoFlutterFire](https://pub.dartlang.org/packages/geoflutterfire) package.
+
+
+Special thanks to [Darshan Gowda](/contributors/darshan-gowda/) for creating the GeoFlutterFire library and providing the example code for this lesson.
+
+
+
+## Step 0: Prerequisites
+
+1. Install FlutterFire
+1. Install Flutter Google Maps
+
+
+### Initial App Setup
+
+Our Flutter app starts with a Material Scaffold and uses a single *StatefulWidget* as the body.
+
+{{< file "dart" "main.dart" >}}
+```dart
+import 'package:flutter/material.dart';
+import 'package:google_maps_flutter/google_maps_flutter.dart';
+
+void main() => runApp(MyApp());
+
+class MyApp extends StatelessWidget {
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ home: Scaffold(
+ body: FireMap()
+ )
+ );
+ }
+}
+
+class FireMap extends StatefulWidget {
+ @override
+ State createState() => FireMapState();
+}
+
+
+class FireMapState extends State {
+ @override
+ build(context) {
+ // widgets go here
+ }
+}
+```
+
+## Step 1: Create a Perfectly Centered Map
+
+First, let's create a full screen map and center it on the screen.
+
+{{< figure src="img/flutter-basic-googlemap.png" alt="A blank basic Flutter Google Map" >}}
+
+
+### Map Stack
+
+In my opinion, a good map UI sets the map canvas on the entire screen, then overlays additional controls as needed. This is a perfect use-case for a Flutter [Stack](https://docs.flutter.io/flutter/widgets/Stack-class.html) widget. Our map will sit on the bottom of stack and we'll overlay a *FlatButton* and *Slider* on top of it.
+
+When initializing a *GoogleMap* widget, we are required to set the `initialCameraPosition`, but I also included a handful of additional options you might want to use. You will very likely want to setup a `mapController` to change the camera position and add markers.
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+class FireMapState extends State {
+ GoogleMapController mapController;
+
+ build(context) {
+ return Stack(
+ children: [
+ GoogleMap(
+ initialCameraPosition: CameraPosition(target: LatLng(24.150, -110.32), zoom: 10),
+ onMapCreated: _onMapCreated,
+ myLocationEnabled: true, // Add little blue dot for device location, requires permission from user
+ mapType: MapType.hybrid,
+ trackCameraPosition: true
+ ),
+ ]
+ );
+ }
+
+ void _onMapCreated(GoogleMapController controller) {
+ setState(() {
+ mapController = controller;
+ });
+ }
+}
+```
+
+
+
+### Overlay Custom Controls
+
+Let's extend the map by overlaying a button that creates a marker when tapped.
+
+{{< file "dart" "main.dart" >}}
+```dart
+build(context) {
+ return Stack(
+ children: [
+ GoogleMap(...),
+ Positioned(
+ bottom: 50,
+ right: 10,
+ child:
+ FlatButton(
+ child: Icon(Icons.pin_drop),
+ color: Colors.green,
+ onPressed: () => _addMarker()
+ )
+ )
+}
+
+_addMarker() {
+ var marker = Marker(
+ position: mapController.cameraPosition.target,
+ icon: BitmapDescriptor.defaultMarker,
+ infoWindowText: InfoWindowText('Magic Marker', '🍄🍄🍄')
+ );
+
+ mapController.addMarker(marker);
+}
+```
+
+Now we have a map with a little bit of interactivity. Move the camera around, then click the buttom in the bottom right and it will place an marker on the map.
+
+{{< figure src="img/flutter-marker-googlemap.png" alt="Flutter google map with basic markers" >}}
+
+## Step 2: Obtain the User's Device Location
+
+At this point, we need a way track the user's position via the GPS system. Let's install the Flutter [Location](https://pub.dartlang.org/packages/location) package.
+
+
+The location service is used in serval parts of the app, but a cool demonstration is to animate the map to the current user's location, for example:
+
+{{< file "dart" "main.dart" >}}
+```dart
+ Location location = new Location();
+
+ _animateToUser() async {
+ var pos = await location.getLocation();
+
+ mapController.animateCamera(CameraUpdate.newCameraPosition(
+ CameraPosition(
+ target: LatLng(pos.latitude, pos.latitude),
+ zoom: 17.0,
+ )
+ )
+ );
+ }
+```
+
+## Step 3: Writing GeoPoints to Firestore
+
+At this point, we're able to place markers on the map, but they're not persisted in a database and will be lost when the app loses its current state. In this section, we save a `GeoFirePoint` - which consists of the latitude, longitude, and a [geohash](https://en.wikipedia.org/wiki/Geohash) - to Firestore so that it can be queried with GeoFlutterFire.
+
+{{< figure src="img/firestore-geolocation.png" alt="The database structure for geolocation queries" >}}
+
+Let's start by making a reference to Firestore and GeoFlutterFire.
+
+```dart
+class FireMapState extends State {
+ // omitted...
+
+ Firestore firestore = Firestore.instance;
+ Geoflutterfire geo = Geoflutterfire();
+
+ // ...
+}
+```
+
+
+Next, add a method that writes to the database. This correct data strucutre with a geohash is created for you automatically when you pass the `point.data` with the Firestore document data.
+
+```dart
+Future _addGeoPoint() async {
+ var pos = await location.getLocation();
+ GeoFirePoint point = geo.point(latitude: pos.latitude, longitude: pos.longitude);
+ return firestore.collection('locations').add({
+ 'position': point.data,
+ 'name': 'Yay I can be queried!'
+ });
+}
+```
+
+## Step 4: Querying Realtime Geolocation Data
+
+The final step is to listen to stream of data from Firestore and update the marker positions in realtime.
+
+### Add Stateful Data
+
+We have two pieces of streaming data in this demo (1) the radius of the query in kilometers and (2) the result of the query from Firestore. The radius is modeled as an RxDart [BehaviorSubject](http://reactivex.io/rxjs/manual/overview.html#behaviorsubject), which is just a stream that has a current value and can have new values pushed to it.
+
+
+You might also want to listen to the user's location in realtime and update your query reactively, which you can do with `location.onLocationChanged()`.
+
+
+```dart
+ BehaviorSubject radius = BehaviorSubject(seedValue: 100.0);
+ Stream query;
+ StreamSubscription subscription;
+```
+
+### Add a Slider to Control the Radius
+
+The [Slider](https://docs.flutter.io/flutter/material/Slider-class.html) widget will allow the user to manually change the radius of the query.
+
+{{< figure src="img/firestore-radius-query.png" alt="Query within a radius Flutter Firestore app" >}}
+
+
+```dart
+ build(context) {
+ return Stack(children: [
+ // ... other widgets
+ Positioned(
+ bottom: 50,
+ left: 10,
+ child: Slider(
+ min: 100.0,
+ max: 500.0,
+ divisions: 4,
+ value: radius.value,
+ label: 'Radius ${radius.value}km',
+ activeColor: Colors.green,
+ inactiveColor: Colors.green.withOpacity(0.2),
+ onChanged: _updateQuery,
+ )
+ )
+ ]);
+```
+
+### Update Markers with Firestore Data
+
+The method below takes a list of documents from Firestore and updates the position of the map markers. Firebase emits all the documents after each change, so we start by clearing all markers from the map, then looping over the latest data to create new markers.
+
+```dart
+ void _updateMarkers(List documentList) {
+ print(documentList);
+ mapController.clearMarkers();
+ documentList.forEach((DocumentSnapshot document) {
+ GeoPoint pos = document.data['position']['geopoint'];
+ double distance = document.data['distance'];
+ var marker = Marker(
+ position: LatLng(pos.latitude, pos.longitude),
+ icon: BitmapDescriptor.defaultMarker,
+ infoWindowText: InfoWindowText('Magic Marker', '$distance kilometers from query center')
+ );
+
+
+ mapController.addMarker(marker);
+ });
+ }
+```
+
+And now it's finally time to make the query to Firestore. The `_startQuery` method creates a subscription with the default radius, then uses `switchMap` to get the correct items from the database. The listen callback will repaint the markers whenever the radius changes or the underlying data changes.
+
+```dart
+ _startQuery() async {
+ // Get users location
+ var pos = await location.getLocation();
+ double lat = pos.latitude;
+ double lng = pos.longitude;
+
+
+ // Make a referece to firestore
+ var ref = firestore.collection('locations');
+ GeoFirePoint center = geo.point(latitude: lat, longitude: lng);
+
+ // subscribe to query
+ subscription = radius.switchMap((rad) {
+ return geo.collection(collectionRef: ref).within(
+ center: center,
+ radius: rad,
+ field: 'position',
+ strictMode: true
+ );
+ }).listen(_updateMarkers);
+ }
+
+ _updateQuery(value) {
+ setState(() {
+ radius.add(value);
+ });
+ }
+
+```
+
+### Cancel the Subscription
+
+A geoquery is the type of stream that can cause memory links. Under the hood, GeoFlutterFire is combining multiple queries together and listening to all of them concurrently. If you have highly active writes happening in the database this could cost you money and tank the performance of the app. Make sure to cancel the stream when the widget is destroyed.
+
+```dart
+ @override
+ dispose() {
+ subscription.cancel();
+ super.dispose();
+ }
+```
+
+## The End
+
+This entire demo is only take about 180 lines of code - pretty amazing considering we have basic realtime geolocation ready for both iOS and Android. It could be improved by extracting the data sources from the StatefulWidget into an InheritedWidget so other screens can share the same geoquery data.
diff --git a/hugo/content/lessons/flutter-realtime-geolocation-firebase/img/.gitkeep b/content/lessons/flutter-slider-like-reflectly/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/flutter-realtime-geolocation-firebase/img/.gitkeep
rename to content/lessons/flutter-slider-like-reflectly/img/.gitkeep
diff --git a/hugo/content/lessons/flutter-slider-like-reflectly/img/featured.jpg b/content/lessons/flutter-slider-like-reflectly/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-slider-like-reflectly/img/featured.jpg
rename to content/lessons/flutter-slider-like-reflectly/img/featured.jpg
diff --git a/hugo/content/lessons/flutter-slider-like-reflectly/img/featured.png b/content/lessons/flutter-slider-like-reflectly/img/featured.png
similarity index 100%
rename from hugo/content/lessons/flutter-slider-like-reflectly/img/featured.png
rename to content/lessons/flutter-slider-like-reflectly/img/featured.png
diff --git a/hugo/content/lessons/flutter-slider-like-reflectly/img/featured.webp b/content/lessons/flutter-slider-like-reflectly/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/flutter-slider-like-reflectly/img/featured.webp
rename to content/lessons/flutter-slider-like-reflectly/img/featured.webp
diff --git a/hugo/content/lessons/flutter-slider-like-reflectly/img/slideshow-data-model.png b/content/lessons/flutter-slider-like-reflectly/img/slideshow-data-model.png
similarity index 100%
rename from hugo/content/lessons/flutter-slider-like-reflectly/img/slideshow-data-model.png
rename to content/lessons/flutter-slider-like-reflectly/img/slideshow-data-model.png
diff --git a/content/lessons/flutter-slider-like-reflectly/index.md b/content/lessons/flutter-slider-like-reflectly/index.md
new file mode 100644
index 000000000..3f38be128
--- /dev/null
+++ b/content/lessons/flutter-slider-like-reflectly/index.md
@@ -0,0 +1,270 @@
+---
+title: Flutter Firestore Animated SlideShow
+lastmod: 2019-03-20T10:18:59-07:00
+publishdate: 2019-03-20T10:18:59-07:00
+author: Jeff Delaney
+draft: false
+description: Build an animated and filterable slideshow with FlutterFire - inspired by the Reflectly app.
+tags:
+ - flutter
+ - firestore
+ - firebase
+ - animation
+
+youtube: 8PfiY0U_PBI
+github: https://github.com/codediodeio/flutter-firestore-animated-slideshow
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+One of the best examples of a well-designed UI in Flutter is [Reflectly](https://reflectly.app/) - an AI-powered journal app for iOS and Android. The following lesson will show you how to build an animated slideshow carousel inspired by the work of Reflectly. In addition, we will wire it up to Firestore to make it filterable and able to scale to an infinite number of pages.
+
+{{< vimeo 325570527 >}}
+
+## PageView Widget Intro
+
+The most import widget in this lesson is the [PageView](https://docs.flutter.io/flutter/widgets/PageView-class.html), which makes it possible to easily build sliding pages. It is a great tool when you have a linear flow of content because it provides the gesture-detection and animation behavior out of the box.
+
+Optionally, you can control the state of the PageView slider with a `PageController` to navigate to a specific index in the children list.
+
+{{< vimeo 325572628 >}}
+
+### Basic Example
+
+Run the code below in your Flutter project to build a basic PageView slideshow.
+
+{{< file "dart" "main.dart" >}}
+```dart
+class MyApp extends StatelessWidget {
+
+ final PageController ctrl = PageController();
+
+ @override
+ Widget build(BuildContext context) {
+
+ return MaterialApp(
+ home: Scaffold(
+ body: PageView(
+ // scrollDirection: Axis.vertical,
+ controller: ctrl,
+ children: [
+ Container(color: Colors.green),
+ Container(color: Colors.blue),
+ Container(color: Colors.orange),
+ Container(color: Colors.red)
+ ]
+ )
+
+ ),
+ );
+ }
+}
+```
+
+## Firestore PageView Builder
+
+Now we're ready to take things to the next level. We will create a custom animation for the active page and use Firestore create and filter pages dynamically from the backend database.
+
+### Initial Setup
+
+Our feature will start with a *StatefulWidget*. There are two main events that should trigger a rebuild of the widgets. (1) The user swipes to a different page, and (2) the Firestore query changes. Both of these event sources will be setup during the *initState* lifecycle hook.
+
+{{< file "dart" "main.dart" >}}
+```dart
+class FirestoreSlideshow extends StatefulWidget {
+ createState() => FirestoreSlideshowState();
+}
+
+class FirestoreSlideshowState extends State {
+
+ final PageController ctrl = PageController(viewportFraction: 0.8);
+
+ final Firestore db = Firestore.instance;
+ Stream slides;
+
+
+ String activeTag = 'favorites';
+
+ // Keep track of current page to avoid unnecessary renders
+ int currentPage = 0;
+
+
+ @override
+ void initState() {
+ _queryDb();
+
+ // Set state when page changes
+ ctrl.addListener(() {
+ int next = ctrl.page.round();
+
+ if(currentPage != next) {
+ setState(() {
+ currentPage = next;
+ });
+ }
+ });
+
+ @override
+ Widget build(BuildContext context) {
+ // TODO
+ }
+
+
+ // Query Firestore
+ _queryDb({ String tag ='favorites' }) {
+ // TODO
+ }
+
+
+ // Builder Functions
+
+ _buildStoryPage(Map data, bool active) {
+ // TODO
+ }
+
+
+ _buildTagPage() {
+ // TODO
+ }
+
+ _buildButton(tag) {
+ // TODO
+ }
+
+}
+```
+
+## Firestore Query
+
+### Data Model
+
+{{< figure src="img/slideshow-data-model.png" caption="Firestore contains the title, background image, and tags array for each page" >}}
+
+### Query the Database by Tag
+
+We can query the database for all stories that contain a specific tag using Firestore's [array contains](https://firebase.google.com/docs/firestore/query-data/queries#array_membership) query type. In addition, it is useful to map the document snapshots to their raw data payload at this point to keep the main widget build method free of business logic. Lastly, we update the *activeTag* on the widget to style the corresponding button with a different color when that filter is applied.
+
+{{< file "dart" "main.dart" >}}
+```dart
+ Stream _queryDb({ String tag ='favorites' }) {
+
+ // Make a Query
+ Query query = db.collection('stories').where('tags', arrayContains: tag);
+
+ // Map the documents to the data payload
+ slides = query.snapshots().map((list) => list.documents.map((doc) => doc.data));
+
+ // Update the active tag
+ setState(() {
+ activeTag = tag;
+ });
+
+ }
+```
+
+
+## UI Design
+
+### PageView Builder
+
+In the widget's build method we first start by setting up a `StreamBuilder` so the widget reacts to data changes in Firestore. Next, we use the [PageView.builder](https://docs.flutter.io/flutter/widgets/PageView/PageView.builder.html) constructor, which allows us to build our UI on the fly and scale up to infinitely large collections. If the current index is zero, build the tag page, otherwise build the main story/card page.
+
+{{< file "dart" "main.dart" >}}
+```dart
+@override
+ Widget build(BuildContext context) {
+ return StreamBuilder(
+ stream: slides,
+ initialData: [],
+ builder: (context, AsyncSnapshot snap) {
+
+ List slideList = snap.data.toList();
+
+ return PageView.builder(
+
+ controller: ctrl,
+ itemCount: slideList.length + 1,
+ itemBuilder: (context, int currentIdx) {
+
+
+ if (currentIdx == 0) {
+ return _buildTagPage();
+ } else if (slideList.length >= currentIdx) {
+ // Active page
+ bool active = currentIdx == currentPage;
+ return _buildStoryPage(slideList[currentIdx - 1], active);
+ }
+ }
+ );
+ }
+ );
+ }
+```
+
+### Animating with an AnimatedContainer
+
+In this section, we use the [AnimatedContainer](https://docs.flutter.io/flutter/widgets/AnimatedContainer-class.html) Widget to give the active page more height and a stronger box shadow when it's active in the PageView. An AnimatedContainer is just like a regular Container, expect it requires a *duration* and *curve*. When its attributes change, Flutter will automatically perform a linear interpolation between the values with a transition animation.
+
+{{< file "dart" "main.dart" >}}
+```dart
+ _buildStoryPage(Map data, bool active) {
+ // Animated Properties
+ final double blur = active ? 30 : 0;
+ final double offset = active ? 20 : 0;
+ final double top = active ? 100 : 200;
+
+
+ return AnimatedContainer(
+ duration: Duration(milliseconds: 500),
+ curve: Curves.easeOutQuint,
+ margin: EdgeInsets.only(top: top, bottom: 50, right: 30),
+ decoration: BoxDecoration(
+ borderRadius: BorderRadius.circular(20),
+
+ image: DecorationImage(
+ fit: BoxFit.cover,
+ image: NetworkImage(data['img']),
+ ),
+
+ boxShadow: [BoxShadow(color: Colors.black87, blurRadius: blur, offset: Offset(offset, offset))]
+ ),
+
+ );
+ }
+```
+
+
+### Filterable Firestore List
+
+The final step is to create a page with the tag filter buttons. This section is simply lays out a *Column* with several buttons that call `_queryDb` when pressed to refine the database query on the backend.
+
+{{< file "dart" "main.dart" >}}
+```dart
+ _buildTagPage() {
+ return Container(child:
+ Column(
+ mainAxisAlignment: MainAxisAlignment.center,
+ crossAxisAlignment: CrossAxisAlignment.start,
+
+ children: [
+ Text('Your Stories', style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),),
+ Text('FILTER', style: TextStyle( color: Colors.black26 )),
+ _buildButton('favorites'),
+ _buildButton('happy'),
+ _buildButton('sad')
+ ],
+ )
+ );
+ }
+
+ _buildButton(tag) {
+ Color color = tag == activeTag ? Colors.purple : Colors.white;
+ return FlatButton(color: color, child: Text('#$tag'), onPressed: () => _queryDb(tag: tag));
+ }
+```
diff --git a/hugo/content/lessons/flutter-slider-like-reflectly/img/.gitkeep b/content/lessons/flutter-state-management-guide/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/flutter-slider-like-reflectly/img/.gitkeep
rename to content/lessons/flutter-state-management-guide/img/.gitkeep
diff --git a/hugo/content/lessons/flutter-state-management-guide/img/featured.jpg b/content/lessons/flutter-state-management-guide/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-state-management-guide/img/featured.jpg
rename to content/lessons/flutter-state-management-guide/img/featured.jpg
diff --git a/hugo/content/lessons/flutter-state-management-guide/img/featured.png b/content/lessons/flutter-state-management-guide/img/featured.png
similarity index 100%
rename from hugo/content/lessons/flutter-state-management-guide/img/featured.png
rename to content/lessons/flutter-state-management-guide/img/featured.png
diff --git a/hugo/content/lessons/flutter-state-management-guide/img/featured.webp b/content/lessons/flutter-state-management-guide/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/flutter-state-management-guide/img/featured.webp
rename to content/lessons/flutter-state-management-guide/img/featured.webp
diff --git a/hugo/content/lessons/flutter-state-management-guide/img/flutter-tree.jpg b/content/lessons/flutter-state-management-guide/img/flutter-tree.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-state-management-guide/img/flutter-tree.jpg
rename to content/lessons/flutter-state-management-guide/img/flutter-tree.jpg
diff --git a/hugo/content/lessons/flutter-state-management-guide/img/flutter-widget-tree.png b/content/lessons/flutter-state-management-guide/img/flutter-widget-tree.png
similarity index 100%
rename from hugo/content/lessons/flutter-state-management-guide/img/flutter-widget-tree.png
rename to content/lessons/flutter-state-management-guide/img/flutter-widget-tree.png
diff --git a/hugo/content/lessons/flutter-state-management-guide/img/state-management-demo.png b/content/lessons/flutter-state-management-guide/img/state-management-demo.png
similarity index 100%
rename from hugo/content/lessons/flutter-state-management-guide/img/state-management-demo.png
rename to content/lessons/flutter-state-management-guide/img/state-management-demo.png
diff --git a/content/lessons/flutter-state-management-guide/index.md b/content/lessons/flutter-state-management-guide/index.md
new file mode 100644
index 000000000..219d3dcc7
--- /dev/null
+++ b/content/lessons/flutter-state-management-guide/index.md
@@ -0,0 +1,373 @@
+---
+title: Flutter State Management Guide
+lastmod: 2019-03-08T15:19:53-07:00
+publishdate: 2019-03-08T15:19:53-07:00
+author: Jeff Delaney
+draft: false
+description: A guided tour of reactive state management strategies in Flutter
+tags:
+ - flutter
+ - dart
+ - rxdart
+
+youtube: 3tm-R7ymwhc
+github: https://github.com/fireship-io/172-flutter-state-management-strategies
+# disable_toc: true
+# disable_qna: trueng
+# courses
+# step: 0
+
+versions:
+ rxdart: 0.20
+---
+
+State management is a hot-button topic that brings out strong opinions in developers, and in extreme cases results in Twitter fights. In my experience, people tend to over-engineer features that would otherwise be straight-forward because they assume a full-blown state management library is necessary. In some cases, they just add complexity, but in others, they can be extremely valuable. My recommendation is to analyze these strategies closely and choose an approach that feels right for your app's requirements and your team's style.
+
+The following lesson is designed to teach you the fundamental tools in [Flutter](https://flutter.dev/docs/development/data-and-backend/state-mgmt) for managing local and shared app state.
+
+## What is State?
+
+**What is State?** State is just *data that changes* over the lifecycle of the app. When stateful data changes, the UI reacts by painting our widgets to reflect the new state. Your UI is just a visual representation of a given state. It's like calling a function with the state as the input and UI as the return value `function(state) => UI`, and Flutter calls this function when you rebuild your widgets.
+
+{{< figure src="img/state-management-demo.png" caption="In the counter app above, the number in the middle is the state. Tapping the button at the bottom is like calling a function with the next state, resulting in a different number in the UI. ">}}
+
+**Why does state need to be managed?** As your app grows in complexity, you are likely to encounter bugs directly related to the way data flows through your app via user input. Managing the state changes carefully helps you avoid soul-crushing bugs that only happen at runtime and can also help optimize performance.
+
+We will look at a variety of widgets packaged in Flutter used to manage state.
+
+- *StatefulWidget*
+- *StatefulBuilder*
+- *StreamBuilder*
+- *InheritedWidget*
+
+We will start with nothing but Flutter, then add additional tools like [RxDart](https://pub.dartlang.org/packages/rxdart) and [Flutter Bloc](https://pub.dartlang.org/packages/bloc) to extend our state management possibilities.
+
+## Local State
+
+In many cases, you can encapsulate all your data in a single widget. Ask yourself *do I need to access this data in other widgets?* If **no**, you can use the techniques described below. If **yes**, you will likely benefit from a shared state strategy in the next section.
+
+
+
+TIP: In Flutter, data moves from top to bottom. If you have data in a child widget that you want to send up to a parent, you should use one of the global state management methods described in the second half of this lesson.
+
+
+{{< figure src="img/flutter-widget-tree.png" caption="Flutter widget tree... Parent to child, good. Anything else, bad." >}}
+
+### StatefulWidget
+
+StatefulWidgets come with a built-in a `setState` method that you can call to repaint the widget. Calling it will run the build method you have implemented and repaint all the descendants of this widget.
+
+{{< file "dart" "main.dart" >}}
+```dart
+class MyHomePage extends StatefulWidget {
+ createState() => _MyHomePageState();
+}
+
+class _MyHomePageState extends State {
+ int _counter = 0; // <-- the stateful data
+
+ void _incrementCounter() {
+ setState(() { <-- the special method called to update state
+ _counter++;
+ });
+ }
+
+ @override
+ Widget build(BuildContext context) {
+
+ return Scaffold(
+ body: Text('$_counter'), // <-- the state used in a widget
+
+ floatingActionButton: FloatingActionButton(
+ onPressed: _incrementCounter, // <-- the state changed on button tap event
+ ),
+ );
+ }
+}
+```
+
+I tend to avoid *StatefulWidgets* in favor the *Builder* widgets described next. StatefulWidgets require two classes and a decent amount of boilerplate. Thankfully, there are easier ways to handle local state.
+
+### StatefulBuilder
+
+{{< file "dart" "main.dart" >}}
+```dart
+class MyHomePage2 extends StatelessWidget {
+
+ int _counter = 0;
+
+ @override
+ Widget build(BuildContext context) {
+ return StatefulBuilder(
+ builder: (ctx, StateSetter setState) =>
+ Scaffold(
+ body:Text('$_counter'),
+ floatingActionButton: FloatingActionButton(
+ onPressed: () => setState(() => _counter++),
+ ),
+ )
+ );
+ }
+}
+```
+
+## Global or Shared App State
+
+It's common to have widgets dispersed throughout the widget tree that depend on the same data. If the source of this data is at the top of the widget tree, you can pass it down, but that becomes very cumbersome when multiple levels are involved. If the data is at the bottom of the widget tree, you're SOL - unless of course you implement one of the solutions described next.
+
+
+### InheritedWidget
+
+Flutter provides an [InheritedWidget](https://docs.flutter.io/flutter/widgets/InheritedWidget-class.html) that can define provide context to every widget below it in the tree.
+
+While this is nice in theory, you can see that it takes quite a lot of code to get a basic example wired up. Fortunately, there are libraries like Bloc, Redux, and Scoped Model abstract this complexity away.
+
+{{< file "dart" "main.dart" >}}
+```dart
+class MyApp extends StatelessWidget {
+ // This widget is the root of your application.
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ home: InheritedCounter( child: MyHomePage3() ), // <-- make sure your InheritedWidget wraps the widgets that use its data
+ );
+ }
+}
+
+
+// The InheritedWidget
+class InheritedCounter extends InheritedWidget {
+ final Map _counter = { 'val': 0 }; // Data structure is a map because InheritedWidgets are immutable
+ final Widget child;
+
+ InheritedCounter({ this.child }) : super(child: child);
+
+ increment() {
+ _counter['val']++;
+ }
+
+ get counter => _counter['val'];
+
+ @override
+ bool updateShouldNotify(InheritedCounter oldWidget) => true;
+
+ static InheritedCounter of(BuildContext context) =>
+ context.inheritFromWidgetOfExactType(InheritedCounter);
+}
+
+
+
+class MyHomePage3 extends StatelessWidget {
+
+ @override
+ Widget build(BuildContext context) {
+
+ return StatefulBuilder(
+ builder: (BuildContext context, StateSetter setState) {
+
+ int counter = InheritedCounter.of(context).counter;
+ Function increment = InheritedCounter.of(context).increment;
+
+ return Scaffold(
+
+ body: Text('$counter'),
+ floatingActionButton: FloatingActionButton(
+ onPressed: () => setState(() => increment()),
+ ),
+
+ );
+ }
+ );
+ }
+}
+```
+
+### StreamBuilder + RxDart BehaviorSubject
+
+
+This is my preferred way to manage global state in Flutter. It's flexible, provides a good separation of concerns, and just feels intuitive to me.
+
+
+The *BehaviorSubject* has a variety of characteristics that make it ideal for state management.
+
+- Has a current value that can be accessed synchronously.
+- Exposes a shared/broadcast stream.
+- Can be controlled by adding new items the stream.
+- Can be transformed with RxDart operators.
+
+We use this magical tool start the count at zero, then increment by reading the current value and adding 1 to it. The `Counter` class provides business logic and state that can be used everywhere and tested in isolation.
+
+Back in the widget tree, we can pass the Observable `stream$` to a `StreamBuilder` to rebuild anytime a new value is emitted.
+
+{{< file "dart" "main.dart" >}}
+```dart
+import 'package:rxdart/rxdart.dart';
+
+// Global Variable
+Counter counterService = Counter();
+
+// Data Model
+class Counter {
+
+ BehaviorSubject _counter = BehaviorSubject.seeded(0);
+
+ Observable get stream$ => _counter.stream;
+ int get current => _counter.value;
+
+ increment() {
+ _counter.add(current + 1);
+ }
+
+}
+
+// StreamBuilder Widget
+class MyHomePage4 extends StatelessWidget {
+
+
+ @override
+ Widget build(BuildContext context) {
+
+ return Scaffold(
+ body: StreamBuilder(
+ stream: counterService.stream$,
+ builder: (BuildContext context, AsyncSnapshot snap) {
+ return Text('${snap.data}');
+ }
+ ),
+
+ floatingActionButton: FloatingActionButton(
+ onPressed: () => counterService.increment(),
+ ),
+ );
+ }
+}
+```
+
+The one issue that with this implementation is that it uses on a global variable to share the data model - this is generally frowned upon ☹️. We can easily overcome this issue with a little service locator library called [Get It](https://pub.dartlang.org/packages/get_it) that allows us to define and access a global singleton. It ensures we don't accidentily instantiate multiple state containers and provides additional benefits for integration testing within Flutter widgets.
+
+We can now safely use our global singleton in any widget that requires it.
+
+{{< file "dart" "main.dart" >}}
+```dart
+import 'package:get_it/get_it.dart';
+
+GetIt getIt = new GetIt();
+
+void main() {
+ getIt.registerSingleton(Counter());
+ runApp(MyApp());
+}
+
+class MyHomePage4 extends StatelessWidget {
+ final counterService = getIt.get();
+
+ // ...
+
+}
+```
+
+
+
+### BLoC
+
+The BLoC pattern is similar to an InheritedWidget, but more intuitive and scalable for state management. Although not necessary, I highly recommend using the [flutter_bloc](https://pub.dartlang.org/packages/flutter_bloc) package to help you apply this pattern consistently in your code. The general process is similar to [Redux](https://redux.js.org/) and involves the following steps.
+
+1. Define Events/Actions
+2. Define a custom Bloc class that implements `mapEventToState` to compute the state when an action is dispatched.
+3. Place the BlocProvider in the widget tree to give all children access to its data.
+4. Reference the provider from a widget with `BlocProvider.of(context)`
+5. Use the `BlockBuilder` to rebuild on state changes.
+6. Use `dispatch` to emit events that mutate the state.
+
+{{< file "dart" "main.dart" >}}
+```dart
+import 'package:bloc/bloc.dart';
+import 'package:flutter_bloc/flutter_bloc.dart';
+
+enum CounterEvent { increment } // 1
+
+class CounterBloc extends Bloc { // 2
+ @override
+ int get initialState => 0;
+
+ @override
+ Stream mapEventToState(int currentState, CounterEvent event) async* {
+ switch (event) {
+ case CounterEvent.increment:
+ yield currentState + 1;
+ break;
+ }
+ }
+}
+
+class MyApp extends StatelessWidget {
+ // This widget is the root of your application.
+ @override
+ Widget build(BuildContext context) {
+ return MaterialApp(
+ home: BlocProvider( // 3
+ bloc:CounterBloc(),
+ child: MyHomePage5()
+ ),
+ );
+ }
+}
+
+
+class MyHomePage5 extends StatelessWidget {
+
+
+ @override
+ Widget build(BuildContext context) {
+
+ final CounterBloc _counterBloc = BlocProvider.of(context); // 4
+
+ return Scaffold(
+ appBar: AppBar(
+ title: Text('BLoC'),
+ ),
+ body: BlocBuilder( // 5
+ bloc: _counterBloc,
+ builder: (BuildContext context, int count) {
+ return Text(
+ '${count}',
+ );
+ }
+ ),
+ floatingActionButton: FloatingActionButton(
+ onPressed: () => _counterBloc.dispatch(CounterEvent.increment), // 6
+ ),
+ );
+ }
+}
+```
+
+## Additional State Management Libraries in Flutter
+
+
+Below is an overview of the additional state management options that should be on your radar.
+
+### Scoped Model
+
+If you need shared state, but feel like Bloc is too heavy and explicit, you should check out Scoped Model. Flutter recently added a detailed intro of [scoped_model](https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple) to the official docs. It extends InheritedWidget to share context, but does not require actions, reducers, or any other low-level concepts.
+
+### Redux
+
+[Redux](https://pub.dartlang.org/packages/flutter_redux) is the de facto state management solution in ReactJS - if you already know it, it may be the best place to get started in Flutter
+
+### MobX
+
+[Mobx](https://pub.dartlang.org/packages/mobx) just hit the Flutter scene and that's great news for developers. It applies concepts similar to Redux and Bloc, but also supplies a codegen package and decorators to make the process more developer friendly.
+
+### Flutter Hooks
+
+[Flutter Hooks](https://pub.dartlang.org/packages/flutter_hooks) is an implementation of React Hooks that provides elegant abstractions for code reuse and state management. In my experience, hooks in ReactJS are very beneficial to productivity, so I hope to see this package continue progressing in Flutter.
+
+
+### Firebase - State with a Backend
+
+Yes, the [Firebase SDK](https://fireship.io/snippets/install-flutterfire/) provides you with a very powerful stream-based state management library out of the box, with the added benefit of persisting your data in the cloud. It is not perfect for every situation, but often solves the most complex requirements like user auth, database persistence, remote config, and so on.
+
+
+
+Hopefully that is more than enough ideas to get you started with state management in Flutter, but this is a highly active area of development, so expect this topic to evolve moving forward.
\ No newline at end of file
diff --git a/hugo/content/lessons/flutter-state-management-guide/img/.gitkeep b/content/lessons/flutter-widget-positioning-guide/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/flutter-state-management-guide/img/.gitkeep
rename to content/lessons/flutter-widget-positioning-guide/img/.gitkeep
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/1-square.png b/content/lessons/flutter-widget-positioning-guide/img/1-square.png
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/1-square.png
rename to content/lessons/flutter-widget-positioning-guide/img/1-square.png
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/align-col-center.png b/content/lessons/flutter-widget-positioning-guide/img/align-col-center.png
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/align-col-center.png
rename to content/lessons/flutter-widget-positioning-guide/img/align-col-center.png
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/aligned.png b/content/lessons/flutter-widget-positioning-guide/img/aligned.png
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/aligned.png
rename to content/lessons/flutter-widget-positioning-guide/img/aligned.png
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/basic.png b/content/lessons/flutter-widget-positioning-guide/img/basic.png
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/basic.png
rename to content/lessons/flutter-widget-positioning-guide/img/basic.png
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/card.png b/content/lessons/flutter-widget-positioning-guide/img/card.png
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/card.png
rename to content/lessons/flutter-widget-positioning-guide/img/card.png
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/col.png b/content/lessons/flutter-widget-positioning-guide/img/col.png
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/col.png
rename to content/lessons/flutter-widget-positioning-guide/img/col.png
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/cross-aligned.png b/content/lessons/flutter-widget-positioning-guide/img/cross-aligned.png
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/cross-aligned.png
rename to content/lessons/flutter-widget-positioning-guide/img/cross-aligned.png
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/expanded.png b/content/lessons/flutter-widget-positioning-guide/img/expanded.png
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/expanded.png
rename to content/lessons/flutter-widget-positioning-guide/img/expanded.png
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/featured.jpg b/content/lessons/flutter-widget-positioning-guide/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/featured.jpg
rename to content/lessons/flutter-widget-positioning-guide/img/featured.jpg
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/featured.png b/content/lessons/flutter-widget-positioning-guide/img/featured.png
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/featured.png
rename to content/lessons/flutter-widget-positioning-guide/img/featured.png
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/featured.webp b/content/lessons/flutter-widget-positioning-guide/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/featured.webp
rename to content/lessons/flutter-widget-positioning-guide/img/featured.webp
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/pad-single.png b/content/lessons/flutter-widget-positioning-guide/img/pad-single.png
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/pad-single.png
rename to content/lessons/flutter-widget-positioning-guide/img/pad-single.png
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/positioned.png b/content/lessons/flutter-widget-positioning-guide/img/positioned.png
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/positioned.png
rename to content/lessons/flutter-widget-positioning-guide/img/positioned.png
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/row.png b/content/lessons/flutter-widget-positioning-guide/img/row.png
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/row.png
rename to content/lessons/flutter-widget-positioning-guide/img/row.png
diff --git a/content/lessons/flutter-widget-positioning-guide/index.md b/content/lessons/flutter-widget-positioning-guide/index.md
new file mode 100644
index 000000000..ea2d31adf
--- /dev/null
+++ b/content/lessons/flutter-widget-positioning-guide/index.md
@@ -0,0 +1,281 @@
+---
+title: Flutter Widget Positioning - A Guide for the CSS Developer
+lastmod: 2019-01-29T07:10:30-07:00
+publishdate: 2019-01-29T07:10:30-07:00
+author: Jeff Delaney
+draft: false
+description: Learn how to position, align, and build layouts with Flutter widgets, including comparisons to CSS and flexbox.
+tags:
+ - dart
+ - flutter
+ - css
+youtube: u0e2L5yoxFI
+github:
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# flutter: 1
+---
+
+The addition of Flexbox to CSS revolutionized the way we position elements on the web. It makes the alignment of elements on a 2D plane automatic and well, flexible. Fortunately, Flutter uses the same principles for aligning widgets with [Flex](https://docs.flutter.io/flutter/widgets/Flex-class.html), Column, and Row. In addition, it supports absolute and fixed positioning with [Stack](https://docs.flutter.io/flutter/widgets/Stack-class.html).
+
+The following lesson will teach you how to position containers and build layouts in Flutter with direct comparisons to CSS [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
+
+
+Throughout this lesson, you will see the 👉 emoji. Flutter will always be on the left, and CSS on the right.
+
+
+Make sure to also watch [Flutter for the JavaScript Developer](/lessons/flutter-for-js-developers/).
+
+## Basic Positioning for Single Widgets
+
+Do you need to position **one widget or multiple widgets?** If you answered one, you likely want to wrap your widget with a [Container](https://docs.flutter.io/flutter/widgets/Container-class.html).
+
+### Container
+
+Containers serve as an all-purpose wrapper for positioning and styling widgets. They are similar to an HTML `div` in the sense that they serve as blank UI elements that can be positioned/styled. Below is a list of the most common positioning options.
+
+{{< file "dart" "main.dart" >}}
+```dart
+Container(
+ width: 100,
+ height: 100,
+ margin: EdgeInsets.all(24),
+ padding: EdgeInsets.only(top: 24),
+ alignment: Alignment.center,
+ transform: Transform.rotate(...),
+ child: MyCoolWidget()
+)
+```
+
+{{< figure src="img/basic.png" alt="basic margin and padding on flutter widget" >}}
+
+
+The equivalent HTML/CSS would look something like this:
+
+{{< file "css" "style.css" >}}
+```js
+.my-cool-widget {
+ width: 100px;
+ height: 100px;
+ margin: 24px;
+ padding-top: 24px;
+ text-align: center;
+}
+/*
*/
+```
+
+
+
+
+### Padding, Center, Align, and More
+
+In many cases, you will not need the full kitchen-sink of features in a container. For example, when you only need to provide padding to a widget, consider using the [Padding](https://docs.flutter.io/flutter/widgets/Padding-class.html) widget, or if you just want to center a widget wrap it in [Center](https://docs.flutter.io/flutter/widgets/Center-class.html). It will make your code more readable and succinct.
+
+{{< file "dart" "main.dart" >}}
+```dart
+Padding(
+ padding: EdgeInsets.all(24),
+ child: MyCoolWidget()
+)
+
+Center(
+ child: MyCoolWidget()
+)
+```
+
+
+## CSS Flexbox vs Flutter Rows and Columns
+
+
+### A Basic Row & Column
+
+Rows and Columns are identical in every way, just with their axis flipped.
+
+{{< figure src="img/row.png" alt="row of three boxes in Flutter" >}}
+
+{{< figure src="img/col.png" alt="column of three boxes in Flutter" >}}
+
+{{< file "dart" "main.dart" >}}
+```dart
+Column(
+ children: [
+ MyWidget(),
+ MyWidget(),
+ MyWidget()
+ ]
+);
+
+// or swap a Column for a Row to flip the axis
+
+Row(children: [ ]);
+
+// and this is all just sugar for the Flex widget
+Flex(
+ direction: Axis.vertical
+)
+```
+
+
+
+### MainAxis vs CrossAxis
+
+- `mainAxisAlignment` 👉 `align-items`;
+- `crossAxisAlignment` 👉 `justify-content`;
+
+
+In Flutter, you might find yourself asking should I set the `mainAxisAlignment` or `crossAxisAlignment`. The answer depends whether you're aligning a Row or Column.
+
+The **MainAxis** runs along the flow or direction of the widgets, so X-axis for Rows and Y-axis for Columns. The **CrossAxis** is the opposite.
+
+On the main-axis, you control the spacing between the widgets. On the cross-axis, you control the alignment within the parent container.
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+Column(
+ mainAxisAlignment: MainAxisAlignment.spaceAround,
+ crossAxisAlignment: CrossAxisAlignment.start,
+ children: [
+ MyWidget(),
+ MyWidget(height: 200.0, width: 200.0),
+ MyWidget(height: 50.0, width: 50.0)
+ ]
+);
+```
+
+
+{{< figure src="img/cross-aligned.png" alt="aligned boxes Flutter" >}}
+
+In CSS we can achieve the same effect with a flex row or column.
+
+{{< file "css" "style.css" >}}
+```js
+.row {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-around;
+ align-items: flex-start;
+}
+```
+
+### Expanded
+
+Sometimes you need to specify flex behavior from a child widget. The [Expanded](https://docs.flutter.io/flutter/widgets/Expanded-class.html) widget will take up the remaining space of a row or column. It takes an optional `flex` argument to control the ratio of space used when working with multiple expanded widgets.
+
+Notice how the middle widget has a flex of `3`, while the last widget has a flex of `1`. This means the middle widget will take up 3x more space. In other words, it will expand to 75% of the available space, while the last widget will take up the remaining 25%.
+
+{{< file "dart" "main.dart" >}}
+```dart
+Column(
+ children: [
+ MyWidget(),
+ Expanded(
+ flex: 3,
+ child: MyWidget(),
+ ),
+ Expanded(
+ flex: 1,
+ child: MyWidget()
+ )
+ ]
+);
+}
+```
+
+{{< figure src="img/expanded.png" alt="expanded flex widget in Flutter" >}}
+
+The CSS equivalent:
+
+
+{{< file "css" "style.css" >}}
+```js
+.column {
+ display: flex;
+ flex-direction: column;
+}
+
+.expanded1 {
+ flex-grow: 1;
+}
+
+.expanded3 {
+ flex-grow: 3;
+}
+```
+
+
+## Stacks vs Absolute/Fixed Positioning
+
+A Stack allows you to stack elements on top of each other, with the last element in the array taking the highest prority. You can use `Align`, `Positioned` or `Container` to position the children of a stack.
+
+### Align
+
+Widgets are moved by setting the alignment with `Alignment`, which has static properties like *topCenter*, *bottomRight*, and so on. Or you can take full control and set `Alignment(1.0, -1.0)`, which takes x,y values ranging from 1.0 to -1.0, with (0,0) being the center of the screen.
+
+{{< file "dart" "main.dart" >}}
+```dart
+Stack(
+ children: [
+ MyWidget(),
+ Align(
+ alignment: Alignment.topCenter,
+ child: MyWidget(),
+ ),
+ Container(
+ alignment: Alignment(-0.9, -0.9),
+ child: MyWidget(),
+ )
+ ]
+);
+```
+
+{{< figure src="img/aligned.png" alt="aligned boxes Flutter" >}}
+
+### Positioned
+
+As an alternative to align, you can position children relative to the parent widget.
+
+
+{{< file "dart" "main.dart" >}}
+```dart
+Stack(
+ children: [
+ MyWidget(),
+ Positioned(
+ bottom: 20,
+ left: 20,
+ child: MyWidget(color: Colors.blue),
+ ),
+ Positioned(
+ top: 50,
+ right: 50,
+ child: MyWidget(color: Colors.red)
+ )
+ ]
+)
+```
+
+{{< figure src="img/positioned.png" alt="positioned boxes Flutter" >}}
+
+And with CSS absolute positioning.
+
+{{< file "css" "style.css" >}}
+```js
+.positioned {
+ position: absolute;
+ bottom: 20,
+ left: 20,
+}
+```
+
+## The End
+
+As you can see, CSS shares many of the same positioning and alignment concepts with Flutter. In 99% of cases, you can solve your positioning requirements with Container, Column, Row, and Stack. The beauty of Flutter is that you have the power to paint every pixel on the device when needed in more advanced scenarios.
+
+
+
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/img/.gitkeep b/content/lessons/framer-motion-advanced-notifications/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/flutter-widget-positioning-guide/img/.gitkeep
rename to content/lessons/framer-motion-advanced-notifications/img/.gitkeep
diff --git a/hugo/content/lessons/framer-motion-advanced-notifications/img/featured.jpg b/content/lessons/framer-motion-advanced-notifications/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/framer-motion-advanced-notifications/img/featured.jpg
rename to content/lessons/framer-motion-advanced-notifications/img/featured.jpg
diff --git a/hugo/content/lessons/framer-motion-advanced-notifications/img/featured.png b/content/lessons/framer-motion-advanced-notifications/img/featured.png
similarity index 100%
rename from hugo/content/lessons/framer-motion-advanced-notifications/img/featured.png
rename to content/lessons/framer-motion-advanced-notifications/img/featured.png
diff --git a/hugo/content/lessons/framer-motion-advanced-notifications/img/featured.webp b/content/lessons/framer-motion-advanced-notifications/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/framer-motion-advanced-notifications/img/featured.webp
rename to content/lessons/framer-motion-advanced-notifications/img/featured.webp
diff --git a/hugo/content/lessons/framer-motion-advanced-notifications/index.md b/content/lessons/framer-motion-advanced-notifications/index.md
similarity index 100%
rename from hugo/content/lessons/framer-motion-advanced-notifications/index.md
rename to content/lessons/framer-motion-advanced-notifications/index.md
diff --git a/hugo/content/lessons/framer-motion-advanced-notifications/img/.gitkeep b/content/lessons/framer-motion-modal/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/framer-motion-advanced-notifications/img/.gitkeep
rename to content/lessons/framer-motion-modal/img/.gitkeep
diff --git a/hugo/content/lessons/framer-motion-modal/img/featured.jpg b/content/lessons/framer-motion-modal/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/framer-motion-modal/img/featured.jpg
rename to content/lessons/framer-motion-modal/img/featured.jpg
diff --git a/hugo/content/lessons/framer-motion-modal/img/featured.png b/content/lessons/framer-motion-modal/img/featured.png
similarity index 100%
rename from hugo/content/lessons/framer-motion-modal/img/featured.png
rename to content/lessons/framer-motion-modal/img/featured.png
diff --git a/hugo/content/lessons/framer-motion-modal/img/featured.webp b/content/lessons/framer-motion-modal/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/framer-motion-modal/img/featured.webp
rename to content/lessons/framer-motion-modal/img/featured.webp
diff --git a/hugo/content/lessons/framer-motion-modal/index.md b/content/lessons/framer-motion-modal/index.md
similarity index 100%
rename from hugo/content/lessons/framer-motion-modal/index.md
rename to content/lessons/framer-motion-modal/index.md
diff --git a/hugo/content/lessons/framer-motion-modal/img/.gitkeep b/content/lessons/game-lobby-with-firebase-reactfire/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/framer-motion-modal/img/.gitkeep
rename to content/lessons/game-lobby-with-firebase-reactfire/img/.gitkeep
diff --git a/hugo/content/lessons/game-lobby-with-firebase-reactfire/img/featured.jpg b/content/lessons/game-lobby-with-firebase-reactfire/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/game-lobby-with-firebase-reactfire/img/featured.jpg
rename to content/lessons/game-lobby-with-firebase-reactfire/img/featured.jpg
diff --git a/hugo/content/lessons/game-lobby-with-firebase-reactfire/img/featured.png b/content/lessons/game-lobby-with-firebase-reactfire/img/featured.png
similarity index 100%
rename from hugo/content/lessons/game-lobby-with-firebase-reactfire/img/featured.png
rename to content/lessons/game-lobby-with-firebase-reactfire/img/featured.png
diff --git a/hugo/content/lessons/game-lobby-with-firebase-reactfire/img/featured.webp b/content/lessons/game-lobby-with-firebase-reactfire/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/game-lobby-with-firebase-reactfire/img/featured.webp
rename to content/lessons/game-lobby-with-firebase-reactfire/img/featured.webp
diff --git a/hugo/content/lessons/game-lobby-with-firebase-reactfire/img/reactfire-lobby-demo.png b/content/lessons/game-lobby-with-firebase-reactfire/img/reactfire-lobby-demo.png
similarity index 100%
rename from hugo/content/lessons/game-lobby-with-firebase-reactfire/img/reactfire-lobby-demo.png
rename to content/lessons/game-lobby-with-firebase-reactfire/img/reactfire-lobby-demo.png
diff --git a/hugo/content/lessons/game-lobby-with-firebase-reactfire/index.md b/content/lessons/game-lobby-with-firebase-reactfire/index.md
similarity index 100%
rename from hugo/content/lessons/game-lobby-with-firebase-reactfire/index.md
rename to content/lessons/game-lobby-with-firebase-reactfire/index.md
diff --git a/hugo/content/lessons/game-lobby-with-firebase-reactfire/img/.gitkeep b/content/lessons/geolocation-query-in-firestore-realtime/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/game-lobby-with-firebase-reactfire/img/.gitkeep
rename to content/lessons/geolocation-query-in-firestore-realtime/img/.gitkeep
diff --git a/hugo/content/lessons/geolocation-query-in-firestore-realtime/img/featured.jpg b/content/lessons/geolocation-query-in-firestore-realtime/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/geolocation-query-in-firestore-realtime/img/featured.jpg
rename to content/lessons/geolocation-query-in-firestore-realtime/img/featured.jpg
diff --git a/hugo/content/lessons/geolocation-query-in-firestore-realtime/img/featured.png b/content/lessons/geolocation-query-in-firestore-realtime/img/featured.png
similarity index 100%
rename from hugo/content/lessons/geolocation-query-in-firestore-realtime/img/featured.png
rename to content/lessons/geolocation-query-in-firestore-realtime/img/featured.png
diff --git a/hugo/content/lessons/geolocation-query-in-firestore-realtime/img/featured.webp b/content/lessons/geolocation-query-in-firestore-realtime/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/geolocation-query-in-firestore-realtime/img/featured.webp
rename to content/lessons/geolocation-query-in-firestore-realtime/img/featured.webp
diff --git a/hugo/content/lessons/geolocation-query-in-firestore-realtime/img/geohash-problem.png b/content/lessons/geolocation-query-in-firestore-realtime/img/geohash-problem.png
similarity index 100%
rename from hugo/content/lessons/geolocation-query-in-firestore-realtime/img/geohash-problem.png
rename to content/lessons/geolocation-query-in-firestore-realtime/img/geohash-problem.png
diff --git a/hugo/content/lessons/geolocation-query-in-firestore-realtime/img/geoquery-firestore.gif b/content/lessons/geolocation-query-in-firestore-realtime/img/geoquery-firestore.gif
similarity index 100%
rename from hugo/content/lessons/geolocation-query-in-firestore-realtime/img/geoquery-firestore.gif
rename to content/lessons/geolocation-query-in-firestore-realtime/img/geoquery-firestore.gif
diff --git a/hugo/content/lessons/geolocation-query-in-firestore-realtime/index.md b/content/lessons/geolocation-query-in-firestore-realtime/index.md
similarity index 100%
rename from hugo/content/lessons/geolocation-query-in-firestore-realtime/index.md
rename to content/lessons/geolocation-query-in-firestore-realtime/index.md
diff --git a/hugo/content/lessons/geolocation-query-in-firestore-realtime/img/.gitkeep b/content/lessons/google-apis-node-tutorial/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/geolocation-query-in-firestore-realtime/img/.gitkeep
rename to content/lessons/google-apis-node-tutorial/img/.gitkeep
diff --git a/hugo/content/lessons/google-apis-node-tutorial/img/drive-api.png b/content/lessons/google-apis-node-tutorial/img/drive-api.png
similarity index 100%
rename from hugo/content/lessons/google-apis-node-tutorial/img/drive-api.png
rename to content/lessons/google-apis-node-tutorial/img/drive-api.png
diff --git a/hugo/content/lessons/google-apis-node-tutorial/img/featured.jpg b/content/lessons/google-apis-node-tutorial/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/google-apis-node-tutorial/img/featured.jpg
rename to content/lessons/google-apis-node-tutorial/img/featured.jpg
diff --git a/hugo/content/lessons/google-apis-node-tutorial/img/featured.png b/content/lessons/google-apis-node-tutorial/img/featured.png
similarity index 100%
rename from hugo/content/lessons/google-apis-node-tutorial/img/featured.png
rename to content/lessons/google-apis-node-tutorial/img/featured.png
diff --git a/hugo/content/lessons/google-apis-node-tutorial/img/featured.webp b/content/lessons/google-apis-node-tutorial/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/google-apis-node-tutorial/img/featured.webp
rename to content/lessons/google-apis-node-tutorial/img/featured.webp
diff --git a/hugo/content/lessons/google-apis-node-tutorial/img/oauth-consent.png b/content/lessons/google-apis-node-tutorial/img/oauth-consent.png
similarity index 100%
rename from hugo/content/lessons/google-apis-node-tutorial/img/oauth-consent.png
rename to content/lessons/google-apis-node-tutorial/img/oauth-consent.png
diff --git a/hugo/content/lessons/google-apis-node-tutorial/img/oauth-keys.png b/content/lessons/google-apis-node-tutorial/img/oauth-keys.png
similarity index 100%
rename from hugo/content/lessons/google-apis-node-tutorial/img/oauth-keys.png
rename to content/lessons/google-apis-node-tutorial/img/oauth-keys.png
diff --git a/hugo/content/lessons/google-apis-node-tutorial/index.md b/content/lessons/google-apis-node-tutorial/index.md
similarity index 100%
rename from hugo/content/lessons/google-apis-node-tutorial/index.md
rename to content/lessons/google-apis-node-tutorial/index.md
diff --git a/hugo/content/lessons/google-apis-node-tutorial/img/.gitkeep b/content/lessons/google-calendar-api-with-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/google-apis-node-tutorial/img/.gitkeep
rename to content/lessons/google-calendar-api-with-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/google-calendar-api-with-firebase/img/featured.jpg b/content/lessons/google-calendar-api-with-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/google-calendar-api-with-firebase/img/featured.jpg
rename to content/lessons/google-calendar-api-with-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/google-calendar-api-with-firebase/img/featured.png b/content/lessons/google-calendar-api-with-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/google-calendar-api-with-firebase/img/featured.png
rename to content/lessons/google-calendar-api-with-firebase/img/featured.png
diff --git a/hugo/content/lessons/google-calendar-api-with-firebase/img/featured.webp b/content/lessons/google-calendar-api-with-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/google-calendar-api-with-firebase/img/featured.webp
rename to content/lessons/google-calendar-api-with-firebase/img/featured.webp
diff --git a/hugo/content/lessons/google-calendar-api-with-firebase/img/firebase-auth-custom-scope.png b/content/lessons/google-calendar-api-with-firebase/img/firebase-auth-custom-scope.png
similarity index 100%
rename from hugo/content/lessons/google-calendar-api-with-firebase/img/firebase-auth-custom-scope.png
rename to content/lessons/google-calendar-api-with-firebase/img/firebase-auth-custom-scope.png
diff --git a/hugo/content/lessons/google-calendar-api-with-firebase/img/google-calendar-firebase-demo.gif b/content/lessons/google-calendar-api-with-firebase/img/google-calendar-firebase-demo.gif
similarity index 100%
rename from hugo/content/lessons/google-calendar-api-with-firebase/img/google-calendar-firebase-demo.gif
rename to content/lessons/google-calendar-api-with-firebase/img/google-calendar-firebase-demo.gif
diff --git a/hugo/content/lessons/google-calendar-api-with-firebase/index.md b/content/lessons/google-calendar-api-with-firebase/index.md
similarity index 100%
rename from hugo/content/lessons/google-calendar-api-with-firebase/index.md
rename to content/lessons/google-calendar-api-with-firebase/index.md
diff --git a/hugo/content/lessons/google-calendar-api-with-firebase/img/.gitkeep b/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/google-calendar-api-with-firebase/img/.gitkeep
rename to content/lessons/google-cloud-vision-with-ionic-and-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/featured.jpg b/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/featured.jpg
rename to content/lessons/google-cloud-vision-with-ionic-and-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/featured.png b/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/featured.png
rename to content/lessons/google-cloud-vision-with-ionic-and-firebase/img/featured.png
diff --git a/hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/featured.webp b/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/featured.webp
rename to content/lessons/google-cloud-vision-with-ionic-and-firebase/img/featured.webp
diff --git a/hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/firestore-vision-data.png b/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/firestore-vision-data.png
similarity index 100%
rename from hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/firestore-vision-data.png
rename to content/lessons/google-cloud-vision-with-ionic-and-firebase/img/firestore-vision-data.png
diff --git a/hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/hotdog-ionic-vision.gif b/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/hotdog-ionic-vision.gif
similarity index 100%
rename from hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/hotdog-ionic-vision.gif
rename to content/lessons/google-cloud-vision-with-ionic-and-firebase/img/hotdog-ionic-vision.gif
diff --git a/hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/vision-enable.png b/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/vision-enable.png
similarity index 100%
rename from hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/vision-enable.png
rename to content/lessons/google-cloud-vision-with-ionic-and-firebase/img/vision-enable.png
diff --git a/hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/index.md b/content/lessons/google-cloud-vision-with-ionic-and-firebase/index.md
similarity index 100%
rename from hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/index.md
rename to content/lessons/google-cloud-vision-with-ionic-and-firebase/index.md
diff --git a/hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/.gitkeep b/content/lessons/google-sheets-database-nextjs/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/google-cloud-vision-with-ionic-and-firebase/img/.gitkeep
rename to content/lessons/google-sheets-database-nextjs/img/.gitkeep
diff --git a/hugo/content/lessons/google-sheets-database-nextjs/img/enable-google-sheets.png b/content/lessons/google-sheets-database-nextjs/img/enable-google-sheets.png
similarity index 100%
rename from hugo/content/lessons/google-sheets-database-nextjs/img/enable-google-sheets.png
rename to content/lessons/google-sheets-database-nextjs/img/enable-google-sheets.png
diff --git a/hugo/content/lessons/google-sheets-database-nextjs/img/featured.jpg b/content/lessons/google-sheets-database-nextjs/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/google-sheets-database-nextjs/img/featured.jpg
rename to content/lessons/google-sheets-database-nextjs/img/featured.jpg
diff --git a/hugo/content/lessons/google-sheets-database-nextjs/img/featured.png b/content/lessons/google-sheets-database-nextjs/img/featured.png
similarity index 100%
rename from hugo/content/lessons/google-sheets-database-nextjs/img/featured.png
rename to content/lessons/google-sheets-database-nextjs/img/featured.png
diff --git a/hugo/content/lessons/google-sheets-database-nextjs/img/featured.webp b/content/lessons/google-sheets-database-nextjs/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/google-sheets-database-nextjs/img/featured.webp
rename to content/lessons/google-sheets-database-nextjs/img/featured.webp
diff --git a/hugo/content/lessons/google-sheets-database-nextjs/img/google-sheet-database.png b/content/lessons/google-sheets-database-nextjs/img/google-sheet-database.png
similarity index 100%
rename from hugo/content/lessons/google-sheets-database-nextjs/img/google-sheet-database.png
rename to content/lessons/google-sheets-database-nextjs/img/google-sheet-database.png
diff --git a/hugo/content/lessons/google-sheets-database-nextjs/img/service-account-key.png b/content/lessons/google-sheets-database-nextjs/img/service-account-key.png
similarity index 100%
rename from hugo/content/lessons/google-sheets-database-nextjs/img/service-account-key.png
rename to content/lessons/google-sheets-database-nextjs/img/service-account-key.png
diff --git a/hugo/content/lessons/google-sheets-database-nextjs/img/sheets-service-account.png b/content/lessons/google-sheets-database-nextjs/img/sheets-service-account.png
similarity index 100%
rename from hugo/content/lessons/google-sheets-database-nextjs/img/sheets-service-account.png
rename to content/lessons/google-sheets-database-nextjs/img/sheets-service-account.png
diff --git a/hugo/content/lessons/google-sheets-database-nextjs/index.md b/content/lessons/google-sheets-database-nextjs/index.md
similarity index 100%
rename from hugo/content/lessons/google-sheets-database-nextjs/index.md
rename to content/lessons/google-sheets-database-nextjs/index.md
diff --git a/hugo/content/lessons/google-sheets-database-nextjs/img/.gitkeep b/content/lessons/graphql-basics-tutorial/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/google-sheets-database-nextjs/img/.gitkeep
rename to content/lessons/graphql-basics-tutorial/img/.gitkeep
diff --git a/hugo/content/lessons/graphql-basics-tutorial/img/featured.jpg b/content/lessons/graphql-basics-tutorial/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/graphql-basics-tutorial/img/featured.jpg
rename to content/lessons/graphql-basics-tutorial/img/featured.jpg
diff --git a/hugo/content/lessons/graphql-basics-tutorial/img/featured.png b/content/lessons/graphql-basics-tutorial/img/featured.png
similarity index 100%
rename from hugo/content/lessons/graphql-basics-tutorial/img/featured.png
rename to content/lessons/graphql-basics-tutorial/img/featured.png
diff --git a/hugo/content/lessons/graphql-basics-tutorial/img/featured.webp b/content/lessons/graphql-basics-tutorial/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/graphql-basics-tutorial/img/featured.webp
rename to content/lessons/graphql-basics-tutorial/img/featured.webp
diff --git a/hugo/content/lessons/graphql-basics-tutorial/index.md b/content/lessons/graphql-basics-tutorial/index.md
similarity index 100%
rename from hugo/content/lessons/graphql-basics-tutorial/index.md
rename to content/lessons/graphql-basics-tutorial/index.md
diff --git a/hugo/content/lessons/graphql-basics-tutorial/img/.gitkeep b/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/graphql-basics-tutorial/img/.gitkeep
rename to content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/.gitkeep
diff --git a/hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/featured.jpg b/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/featured.jpg
rename to content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/featured.jpg
diff --git a/hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/featured.png b/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/featured.png
similarity index 100%
rename from hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/featured.png
rename to content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/featured.png
diff --git a/hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/featured.webp b/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/featured.webp
rename to content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/featured.webp
diff --git a/hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/hammer-demo.gif b/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/hammer-demo.gif
similarity index 100%
rename from hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/hammer-demo.gif
rename to content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/hammer-demo.gif
diff --git a/hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/hammer-home.png b/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/hammer-home.png
similarity index 100%
rename from hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/hammer-home.png
rename to content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/hammer-home.png
diff --git a/hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/index.md b/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/index.md
similarity index 100%
rename from hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/index.md
rename to content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/index.md
diff --git a/hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/.gitkeep b/content/lessons/host-website-raspberry-pi/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/hammerjs-angular-5-animations-for-mobile-gestures-tutorial/img/.gitkeep
rename to content/lessons/host-website-raspberry-pi/img/.gitkeep
diff --git a/hugo/content/lessons/host-website-raspberry-pi/img/featured.jpg b/content/lessons/host-website-raspberry-pi/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/host-website-raspberry-pi/img/featured.jpg
rename to content/lessons/host-website-raspberry-pi/img/featured.jpg
diff --git a/hugo/content/lessons/host-website-raspberry-pi/img/featured.png b/content/lessons/host-website-raspberry-pi/img/featured.png
similarity index 100%
rename from hugo/content/lessons/host-website-raspberry-pi/img/featured.png
rename to content/lessons/host-website-raspberry-pi/img/featured.png
diff --git a/hugo/content/lessons/host-website-raspberry-pi/img/featured.webp b/content/lessons/host-website-raspberry-pi/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/host-website-raspberry-pi/img/featured.webp
rename to content/lessons/host-website-raspberry-pi/img/featured.webp
diff --git a/hugo/content/lessons/host-website-raspberry-pi/img/nginx-welcome.png b/content/lessons/host-website-raspberry-pi/img/nginx-welcome.png
similarity index 100%
rename from hugo/content/lessons/host-website-raspberry-pi/img/nginx-welcome.png
rename to content/lessons/host-website-raspberry-pi/img/nginx-welcome.png
diff --git a/hugo/content/lessons/host-website-raspberry-pi/img/port-forward.png b/content/lessons/host-website-raspberry-pi/img/port-forward.png
similarity index 100%
rename from hugo/content/lessons/host-website-raspberry-pi/img/port-forward.png
rename to content/lessons/host-website-raspberry-pi/img/port-forward.png
diff --git a/hugo/content/lessons/host-website-raspberry-pi/img/rpi-hosting-comment.png b/content/lessons/host-website-raspberry-pi/img/rpi-hosting-comment.png
similarity index 100%
rename from hugo/content/lessons/host-website-raspberry-pi/img/rpi-hosting-comment.png
rename to content/lessons/host-website-raspberry-pi/img/rpi-hosting-comment.png
diff --git a/hugo/content/lessons/host-website-raspberry-pi/img/rpi-kit.jpg b/content/lessons/host-website-raspberry-pi/img/rpi-kit.jpg
similarity index 100%
rename from hugo/content/lessons/host-website-raspberry-pi/img/rpi-kit.jpg
rename to content/lessons/host-website-raspberry-pi/img/rpi-kit.jpg
diff --git a/hugo/content/lessons/host-website-raspberry-pi/index.md b/content/lessons/host-website-raspberry-pi/index.md
similarity index 100%
rename from hugo/content/lessons/host-website-raspberry-pi/index.md
rename to content/lessons/host-website-raspberry-pi/index.md
diff --git a/hugo/content/lessons/host-website-raspberry-pi/img/.gitkeep b/content/lessons/how-to-build-a-slack-bot/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/host-website-raspberry-pi/img/.gitkeep
rename to content/lessons/how-to-build-a-slack-bot/img/.gitkeep
diff --git a/hugo/content/lessons/how-to-build-a-slack-bot/img/cyberjeff.png b/content/lessons/how-to-build-a-slack-bot/img/cyberjeff.png
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-slack-bot/img/cyberjeff.png
rename to content/lessons/how-to-build-a-slack-bot/img/cyberjeff.png
diff --git a/hugo/content/lessons/how-to-build-a-slack-bot/img/featured.jpg b/content/lessons/how-to-build-a-slack-bot/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-slack-bot/img/featured.jpg
rename to content/lessons/how-to-build-a-slack-bot/img/featured.jpg
diff --git a/hugo/content/lessons/how-to-build-a-slack-bot/img/featured.png b/content/lessons/how-to-build-a-slack-bot/img/featured.png
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-slack-bot/img/featured.png
rename to content/lessons/how-to-build-a-slack-bot/img/featured.png
diff --git a/hugo/content/lessons/how-to-build-a-slack-bot/img/featured.webp b/content/lessons/how-to-build-a-slack-bot/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-slack-bot/img/featured.webp
rename to content/lessons/how-to-build-a-slack-bot/img/featured.webp
diff --git a/hugo/content/lessons/how-to-build-a-slack-bot/img/slack-app-create.png b/content/lessons/how-to-build-a-slack-bot/img/slack-app-create.png
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-slack-bot/img/slack-app-create.png
rename to content/lessons/how-to-build-a-slack-bot/img/slack-app-create.png
diff --git a/hugo/content/lessons/how-to-build-a-slack-bot/img/slack-app-event.png b/content/lessons/how-to-build-a-slack-bot/img/slack-app-event.png
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-slack-bot/img/slack-app-event.png
rename to content/lessons/how-to-build-a-slack-bot/img/slack-app-event.png
diff --git a/hugo/content/lessons/how-to-build-a-slack-bot/img/slack-app-install.png b/content/lessons/how-to-build-a-slack-bot/img/slack-app-install.png
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-slack-bot/img/slack-app-install.png
rename to content/lessons/how-to-build-a-slack-bot/img/slack-app-install.png
diff --git a/hugo/content/lessons/how-to-build-a-slack-bot/img/slack-app-slash.png b/content/lessons/how-to-build-a-slack-bot/img/slack-app-slash.png
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-slack-bot/img/slack-app-slash.png
rename to content/lessons/how-to-build-a-slack-bot/img/slack-app-slash.png
diff --git a/hugo/content/lessons/how-to-build-a-slack-bot/img/slack-bot-url.png b/content/lessons/how-to-build-a-slack-bot/img/slack-bot-url.png
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-slack-bot/img/slack-bot-url.png
rename to content/lessons/how-to-build-a-slack-bot/img/slack-bot-url.png
diff --git a/hugo/content/lessons/how-to-build-a-slack-bot/img/slack-events.png b/content/lessons/how-to-build-a-slack-bot/img/slack-events.png
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-slack-bot/img/slack-events.png
rename to content/lessons/how-to-build-a-slack-bot/img/slack-events.png
diff --git a/hugo/content/lessons/how-to-build-a-slack-bot/img/slack-oauth-token.png b/content/lessons/how-to-build-a-slack-bot/img/slack-oauth-token.png
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-slack-bot/img/slack-oauth-token.png
rename to content/lessons/how-to-build-a-slack-bot/img/slack-oauth-token.png
diff --git a/content/lessons/how-to-build-a-slack-bot/index.md b/content/lessons/how-to-build-a-slack-bot/index.md
new file mode 100644
index 000000000..a6da49a4e
--- /dev/null
+++ b/content/lessons/how-to-build-a-slack-bot/index.md
@@ -0,0 +1,282 @@
+---
+title: How to Build a Slack App
+lastmod: 2019-12-03T14:22:00-07:00
+publishdate: 2019-12-03T14:22:00-07:00
+author: Jeff Delaney
+draft: false
+description: A comprehensive guide to serverless Slack Apps with Firebase Cloud Functions & Firestore
+tags:
+ - slack
+ - cloud-functions
+ - node
+
+youtube: 25ArxpK48tU
+# github:
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+[Slack Apps](https://api.slack.com/start/overview), or Bots, allow you to extend slack with interactive features that can improve your teams productivity. The following lesson is a step-by-step guide to building a Slack App using Firebase [Cloud Functions](/tag/cloud-functions) as the backend server.
+
+
+This lesson builds Slack App for the actual [Fireship Slack](https://fireship.page.link/slack). Join to see the CyberJeff bot in action.
+
+
+Our Slack App will perform the following tasks.
+
+- Listen to events, such as a new user joining the #general channel.
+- Retrieve the user's slack profile.
+- Send a private personalized message.
+- Add a slash command for user-directed actions.
+
+## Create a Slack App
+
+At this point, it is assumed you have admin access to a Slack workspace. If not, feel free to [create one](https://slack.com/help/articles/206845317-create-a-slack-workspace) to follow this tutorial.
+
+Once you have a workspace, create a [new Slack App](https://api.slack.com/apps).
+
+{{< figure src="img/slack-app-create.png" caption="Create a Slack App" >}}
+
+
+## Verify Cloud Function Ownership
+
+Before Slack can send events to our Cloud Function, it needs to verify that we own the server. Slack performs a handshake by sending an HTTP request with a `challenge` parameter to the Cloud Function, then the function must respond back with the same value.
+
+### Initialize Cloud Functions
+
+Initialize Cloud Functions. This demo uses the TypeScript flavor.
+
+{{< file "terminal" "command line" >}}
+```text
+firebase init functions
+```
+
+
+### Build The Challenge Function
+
+The function only needs to respond with the challenge one time.
+
+{{< file "ts" "index.ts" >}}
+```typescript
+export const myBot = functions.https.onRequest( (req, res) => {
+
+ // Request from Slack
+ const { challenge } = req.body;
+
+ // Response from You
+ res.send({ challenge })
+
+});
+```
+
+Deploy it
+
+{{< file "terminal" "command line" >}}
+```text
+firebase deploy --only functions:myBot
+```
+
+{{< figure src="img/slack-bot-url.png" caption="Copy the Function URL from the terminal output" >}}
+
+### Enter The Deployed URL
+
+Subscribe to an event that you want to listen to, then paste in the Function URL from the last step. Slack should automatically verify the URL and give it a green checkmark ✅.
+
+{{< figure src="img/slack-app-event.png" caption="Subscribe to the member_joined_channel event. Notice how our URL is now verified." >}}
+
+## Build the Bot
+
+Now it's time to do some real work.
+
+### Install Dependencies
+
+The [Slack Node SDK](https://github.com/slackapi/node-slack-sdk) is a monorepo that contains several packages. The Web API can read and modify data in the workspace. Google PubSub will be used to handle long running background tasks in te following steps.
+
+{{< file "terminal" "command line" >}}
+```text
+npm install @slack/web-api
+npm install @google-cloud/pubsub
+```
+
+
+
+### OAuth Token
+
+The OAuth token is used to authenticate your bot/server into a *workspace* so it can interact with your channel (like post messages).
+
+{{< figure src="img/slack-app-install.png" caption="Install the app into your workspace." >}}
+
+Once installed, it will take you directly to the **OAuth token**. It usually starts with `xoxb` or `xoxp`.
+
+{{< figure src="img/slack-oauth-token.png" caption="Copy the OAuth Token" >}}
+
+Copy the OAuth Token and save it as a Firebase Functions [environment](https://firebase.google.com/docs/functions/config-env) variable.
+
+{{< file "terminal" "command line" >}}
+```text
+firebase functions:config:set slack.token=YOUR-TOKEN
+```
+
+
+### Signing Secrets
+
+When receiving events from Slack, you should validate the **signing secret**, which can be found in Basic Info panel. This ensures that only requests from Slack can interact with your function by decoding the [digital signature](https://en.wikipedia.org/wiki/Digital_signature) of the request.
+
+{{< file "terminal" "command line" >}}
+```text
+firebase functions:config:set slack.signing_secret=YOUR-TOKEN
+```
+
+
+Read this the [Slack Signing Secret Validation](/snippets/verify-slack-api-signing-signature-node) snippet for further details.
+
+
+### Add Scopes (Permissions)
+
+OAuth scopes define what your app is allowed to do. You can fine tune permissions under the *OAuth & Permissions* page. Follow the principle of least privilege and only allow your bot access to resources that it actually needs to do its job. In our case, we need to read a user profile and add them to a specific slack channel.
+
+## Listen to Events
+
+Our first goal is to listen to events that happen in the Slack workspace. Slack should notify our server anytime a user joins a channel with the `member_joined_channel` event.
+
+{{< figure src="img/slack-events.png" >}}
+
+⚡ Your server must respond be quickly, within 3000ms or less, otherwise Slack will timeout and attempt to retry.
+
+So then, how do we build an app that performs a long-running backend process? There are many right answers, but in Firebase, the best option is to enqueue a [PubSub Cloud Function](https://cloud.google.com/functions/docs/calling/pubsub). It allows the initial HTTP endpoint to simply hand off the message and respond quickly to Slack.
+
+
+Import the dependencies and initlizize them with the environment credentials.
+
+{{< file "ts" "index.ts" >}}
+```typescript
+import * as functions from 'firebase-functions';
+
+import { WebClient } from '@slack/web-api';
+const bot = new WebClient(functions.config().slack.token);
+
+const { PubSub } = require('@google-cloud/pubsub');
+const pubsubClient = new PubSub();
+```
+
+
+### HTTP Gateway
+
+The HTTP gateway validates the request, enqueues a PubSub message with the request, then responds with a 200 code to keep Slack happy.
+
+Extra Snippet: [verifySlackSignature](/snippets/verify-slack-api-signing-signature-node)
+
+
+```typescript
+
+export const myBot = functions.https.onRequest( async (req, res) => {
+
+ // Validate Signature
+ verifySlackSignature(req); // See snippet above for implementation
+
+ const data = JSON.stringify(req.body);
+ const dataBuffer = Buffer.from(data);
+
+ await pubsubClient
+ .topic('slack-channel-join')
+ .publisher()
+ .publish(dataBuffer);
+
+
+ res.sendStatus(200);
+
+});
+```
+
+### PubSub Function
+
+All the heavy-lifting happens in the PubSub function because we have no time-constraints here. The `message.json` contains the same data you would have handled in `req.body` in the HTTP function.
+
+{{< file "ts" "index.ts" >}}
+```typescript
+ export const slackChannelJoin = functions.pubsub.topic('slack-channel-join')
+ .onPublish(async (message, context) => {
+
+
+ const { event } = message.json;
+
+ const { user, channel } = event;
+
+ // TODO something cool...
+
+
+});
+```
+
+### Respond To the User as the Bot
+
+In this section, our app makes requests to the Slack API that (1) fetch the user's Slack profile (2) invite them to a channel, and (3) greet them with a direct message.
+
+Note: The Slack API does not provide typings for the response object, so you'll have to treat it as `any` in typescript.
+
+```typescript
+export const slackChannelJoin = functions.pubsub
+ .topic('slack-channel-join')
+ .onPublish(async (message, context) => {
+
+ const { event } = message.json;
+
+ const { user, channel } = event;
+
+ // IDs for the channels you plan on working with
+ const generalChannel = 'C12345';
+ const newChannel = '#froopy-land';
+
+ // Throw error if not on the general channel
+ if (channel !== generalChannel) {
+ throw Error()
+ }
+
+
+ // Get the full Slack profile
+
+ const userResult = await bot.users.profile.get({ user });
+ const { email, display_name } = userResult.profile as any;
+
+
+ // Invite the slack user to a new channel
+ const invite = await bot.channels.invite({
+ channel: newChannel,
+ user
+ });
+
+
+ // Send a Message
+ const chatMessage = await bot.chat.postMessage({
+ channel: newChannel,
+ text: `Hey ${display_name}! So glad to have you on my Slack!`
+ });
+
+
+});
+```
+
+## Additional Ideas to Try
+
+### Listen to Slash Commands
+
+Events are great, but somethings you want to give users tools to manually kick off interactivity - that's where [slash commands](https://api.slack.com/interactivity/slash-commands) come in. They work very similar to events, but are are triggered by the user entering `/some-command` into the workspace.
+
+{{< figure src="img/slack-app-slash.png" caption="Slash commands follow the same basic flow as events" >}}
+
+### /slap someone
+
+{{< figure src="https://cdn.sanity.io/images/hfh83o0w/production/9e279c7b45b755f818f551fbfd451f3456154dd8-1920x1080.png?w=800&fit=crop&fm=webp" caption="Deploying Firebase Cloud Function to use with Slack slash commands. Sending someone a /slap!" >}}
+
+Learn more about slack commands in the [full lesson by AJonP](https://ajonp.com/lessons/slap-someone-with-slack-commands/).
+
+
+### Add a Conversational Bot
+
+[DialogFlow](/lessons/build-a-chatbot-with-dialogflow/) can integrate into a Slack App with just a few button clicks. Turning your app into a full-blown chatbot allows users to have human-like conversations with the app, which is often more natural than slash commands.
diff --git a/hugo/content/lessons/how-to-build-a-slack-bot/img/.gitkeep b/content/lessons/how-to-build-a-website/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-slack-bot/img/.gitkeep
rename to content/lessons/how-to-build-a-website/img/.gitkeep
diff --git a/hugo/content/lessons/how-to-build-a-website/index.md b/content/lessons/how-to-build-a-website/index.md
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-website/index.md
rename to content/lessons/how-to-build-a-website/index.md
diff --git a/hugo/content/lessons/how-to-build-a-website/img/.gitkeep b/content/lessons/how-to-rate-limit-writes-firestore/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/how-to-build-a-website/img/.gitkeep
rename to content/lessons/how-to-rate-limit-writes-firestore/img/.gitkeep
diff --git a/hugo/content/lessons/how-to-rate-limit-writes-firestore/img/featured.jpg b/content/lessons/how-to-rate-limit-writes-firestore/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/how-to-rate-limit-writes-firestore/img/featured.jpg
rename to content/lessons/how-to-rate-limit-writes-firestore/img/featured.jpg
diff --git a/hugo/content/lessons/how-to-rate-limit-writes-firestore/img/featured.png b/content/lessons/how-to-rate-limit-writes-firestore/img/featured.png
similarity index 100%
rename from hugo/content/lessons/how-to-rate-limit-writes-firestore/img/featured.png
rename to content/lessons/how-to-rate-limit-writes-firestore/img/featured.png
diff --git a/hugo/content/lessons/how-to-rate-limit-writes-firestore/img/featured.webp b/content/lessons/how-to-rate-limit-writes-firestore/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/how-to-rate-limit-writes-firestore/img/featured.webp
rename to content/lessons/how-to-rate-limit-writes-firestore/img/featured.webp
diff --git a/hugo/content/lessons/how-to-rate-limit-writes-firestore/img/getafter.PNG b/content/lessons/how-to-rate-limit-writes-firestore/img/getafter.PNG
similarity index 100%
rename from hugo/content/lessons/how-to-rate-limit-writes-firestore/img/getafter.PNG
rename to content/lessons/how-to-rate-limit-writes-firestore/img/getafter.PNG
diff --git a/hugo/content/lessons/how-to-rate-limit-writes-firestore/img/rate-limit-post.png b/content/lessons/how-to-rate-limit-writes-firestore/img/rate-limit-post.png
similarity index 100%
rename from hugo/content/lessons/how-to-rate-limit-writes-firestore/img/rate-limit-post.png
rename to content/lessons/how-to-rate-limit-writes-firestore/img/rate-limit-post.png
diff --git a/hugo/content/lessons/how-to-rate-limit-writes-firestore/img/rate-limit-project.png b/content/lessons/how-to-rate-limit-writes-firestore/img/rate-limit-project.png
similarity index 100%
rename from hugo/content/lessons/how-to-rate-limit-writes-firestore/img/rate-limit-project.png
rename to content/lessons/how-to-rate-limit-writes-firestore/img/rate-limit-project.png
diff --git a/hugo/content/lessons/how-to-rate-limit-writes-firestore/img/rate-limit-user.png b/content/lessons/how-to-rate-limit-writes-firestore/img/rate-limit-user.png
similarity index 100%
rename from hugo/content/lessons/how-to-rate-limit-writes-firestore/img/rate-limit-user.png
rename to content/lessons/how-to-rate-limit-writes-firestore/img/rate-limit-user.png
diff --git a/hugo/content/lessons/how-to-rate-limit-writes-firestore/img/time-limit-user.png b/content/lessons/how-to-rate-limit-writes-firestore/img/time-limit-user.png
similarity index 100%
rename from hugo/content/lessons/how-to-rate-limit-writes-firestore/img/time-limit-user.png
rename to content/lessons/how-to-rate-limit-writes-firestore/img/time-limit-user.png
diff --git a/content/lessons/how-to-rate-limit-writes-firestore/index.md b/content/lessons/how-to-rate-limit-writes-firestore/index.md
new file mode 100644
index 000000000..c99db9e35
--- /dev/null
+++ b/content/lessons/how-to-rate-limit-writes-firestore/index.md
@@ -0,0 +1,217 @@
+---
+title: Firestore Rate Limiting
+lastmod: 2019-11-30T08:11:12-07:00
+publishdate: 2019-11-30T08:11:12-07:00
+author: Jeff Delaney
+draft: false
+pro: true
+description: Advanced security rules and techniques for rate-limiting Firestore writes.
+tags:
+ - firebase
+ - firestore
+ - security
+ - pro
+
+youtube:
+github:
+vimeo: 376656177
+
+versions:
+ firebase-rules: 2.0.0
+
+---
+
+[Rate limiting](https://github.com/firebase/firebase-js-sdk/issues/647) is the process of blocking access to cloud resources after a certain threshold has been reached. Firestore bills based on the quantity of reads and writes, but does not currently provide a way to block IPs or set explicit rate limits with [Security Rules](https://fireship.io/snippets/firestore-rules-recipes/). So how do you prevent a [DDoS](https://www.cloudflare.com/learning/ddos/what-is-a-ddos-attack/) attack or a disgruntled user from spamming the app with unnecessary records.
+
+The following examples are based on an app that needs to...
+
+- Limit users to 5 document create actions per account (absolute threshold).
+- Limit users to 1 new document per minute (time-based).
+
+Firestore rules can achieve these security requirements by combining a batch write with [getAfter](https://firebase.google.com/docs/reference/rules/rules.firestore.html#.getAfter) - a new feature available in Firestore security rules. The following examples use this technique to ensure a user cannot manipulate a count beyond a certain threshold or time constraint.
+
+
+Never use a rule like `allow write: true` in your database in production. Write operations should always include some form of authentication.
+
+
+
+## Rate Limit by Quantity
+
+### Scenario
+
+A user is limited to 5 projects per account. Imagine a SaaS project-management app that expects to increase limits through paid accounts.
+
+### Data Model
+
+This implementation requires two documents. . First, you need a document that stores the current project count that is connected to the current user, like `users/{uid}`. Second, you have the main UI data located in a subcollection like `users/{uid}/projects/{id}`
+
+The user document keeps a registry of the projects as a [Map](https://firebase.google.com/docs/reference/rules/rules.Map) of timestamps. This makes it possible to validate that multiple documents are part of the same batch write.
+
+
+**users/{userId}**
+```text
+projects: {
+ projectA: Timestamp
+ projectB: Timestamp
+}
+```
+
+{{< figure src="img/rate-limit-user.png" caption="" >}}
+
+**users/{userId}/projects/{projectId}**
+```text
+createdAt: Timestamp;
+```
+
+{{< figure src="img/rate-limit-project.png" caption="" >}}
+
+In order to perform a valid write, the user request a batch that updates the user document while creating a new project document. Notice how they share a timestamp.
+
+{{< file "js" "batch.js" >}}
+```js
+ const batch = db.batch();
+ const timestamp = firebase.firestore.FieldValue.serverTimestamp;
+
+
+ const userRef = db.collection('users').doc(uid);
+ const projectRef = userRef.collection('projects').doc();
+
+ batch.set(projectRef, { ...yourData, createdAt: timestamp(), });
+
+ batch.set(userRef, {
+ projects: {
+ [projectRef.id]: timestamp()
+ }
+ }, { merge: true });
+
+ batch.commit()
+```
+
+### Security Rules
+
+The rules below validate the rate limit in three steps.
+
+
+`getAfter` is a relatively new function that gets projected contents of a document after the batch write is finished, as if the current write had succeeded.
+
+1. Validate ownership of the document based on the auth UID.
+2. Validate the new projectId is registered on the parent user doc with a matching timestamp. Without this step, the user could potentially add new documents while bypassing the update the parent document.
+3. Validate the rate limit by measuring the length of keys in the map.
+
+Note: This rule requires 0 to 2 document reads to execute.
+
+{{< file "firebase" "firestore.rules" >}}
+```js
+
+ match /users/{uid}/projects/{docId} {
+
+ allow create: if
+
+ // 1. Validate ownership
+ request.auth.uid == uid
+
+ &&
+
+ // 2. Validate both docs have matching timestamps for the documentId
+ getAfter(
+ /databases/$(database)/documents/users/$(uid)
+ ).data.projects[docId] == request.resource.createdAt
+
+ &&
+
+ // 3. Validate Rate-limit
+ getAfter(
+ /databases/$(database)/documents/users/$(uid)
+ ).data.projects.keys().size() <= 5
+
+ }
+
+ match /users/{uid} {
+
+ allow update: if
+
+ // 1. Validate key cannot be changed
+ resource.data.projects.keys().hasAny( request.resource.data.projects.keys() ) == false;
+
+ }
+
+```
+
+## Rate Limit By Time
+
+### Scenario
+
+Imagine we have a commenting system. The user should be limited to creating one comment per minute.
+
+### Data Model
+
+**users/{userId}**
+```text
+lastComment: Timestamp;
+```
+
+{{< figure src="img/time-limit-user.png" caption="" >}}
+
+
+**posts/{postId}/comments/{commentId}**
+```text
+createdAt: Timestamp;
+```
+
+{{< figure src="img/rate-limit-post.png" caption="" >}}
+
+
+{{< file "js" "batch.js" >}}
+```js
+ const batch = db.batch();
+ const timestamp = firebase.firestore.FieldValue.serverTimestamp;
+
+
+ const userRef = db.collection('users').doc(uid);
+ const commentRef = db.collection('posts').doc(id).collection('comments').doc();
+
+ batch.update(userRef, { lastComment: timestamp() });
+ batch.set(commentRef, { createdAt: timestamp() });
+
+ batch.commit();
+```
+
+### Security Rules
+
+Firestore provides a global [duration function](https://firebase.google.com/docs/reference/rules/rules.duration_) that can calculate the distance between two timestamps. The rule below subtracts 1 minute from the request time, then compares it to the last comment timestamp. Notice how the first validation uses `get`, but the second uses `getAfter` - we need the data before the change is committed when checking duration.
+
+{{< file "firebase" "firestore.rules" >}}
+```js
+match posts/{postId}/comments/{commentId} {
+ allow create: if
+
+ // 1. Validate at least one minute has passed
+ get(
+ /databases/$(database)/documents/users/$(uid)
+ ).data.lastComment < (request.time - duration.value(1, 'm'))
+
+ &&
+
+ // 2. Validate matching timestamps after operation
+ getAfter(
+ /databases/$(database)/documents/users/$(uid)
+ ).data.lastComment == request.resource.createdAt
+}
+```
+
+
+## Additional Considerations
+
+### Email Notifications
+
+Consider setting transactional email (via Firebase Cloud Functions or Extensions) to notify yourself, your developers, or admins when a rate-limit threshold has been reached. It is likely something you want to investigate further and potentially disable the offending user's account.
+
+### IP Address Rate Limiting
+
+It is of course possible to enforce IP restrictions on the server. If this is a critical feature, you can bypass the Firebase SDK and implement your own custom [IP address security](https://firebase.google.com/docs/auth/admin/manage-sessions#advanced_security_enforce_ip_address_restrictions) logic in a Cloud Function. You will lose the ability to enforce regular Firestore security rules and not be able to perform realtime updates, but you will have full control over the security implementation.
+
+
+
+
+
+
diff --git a/hugo/content/lessons/how-to-rate-limit-writes-firestore/img/.gitkeep b/content/lessons/how-to-structure-a-large-web-app-project/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/how-to-rate-limit-writes-firestore/img/.gitkeep
rename to content/lessons/how-to-structure-a-large-web-app-project/img/.gitkeep
diff --git a/hugo/content/lessons/how-to-structure-a-large-web-app-project/img/featured.jpg b/content/lessons/how-to-structure-a-large-web-app-project/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/how-to-structure-a-large-web-app-project/img/featured.jpg
rename to content/lessons/how-to-structure-a-large-web-app-project/img/featured.jpg
diff --git a/hugo/content/lessons/how-to-structure-a-large-web-app-project/img/featured.png b/content/lessons/how-to-structure-a-large-web-app-project/img/featured.png
similarity index 100%
rename from hugo/content/lessons/how-to-structure-a-large-web-app-project/img/featured.png
rename to content/lessons/how-to-structure-a-large-web-app-project/img/featured.png
diff --git a/hugo/content/lessons/how-to-structure-a-large-web-app-project/img/featured.webp b/content/lessons/how-to-structure-a-large-web-app-project/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/how-to-structure-a-large-web-app-project/img/featured.webp
rename to content/lessons/how-to-structure-a-large-web-app-project/img/featured.webp
diff --git a/hugo/content/lessons/how-to-structure-a-large-web-app-project/img/local-npm-cloud-function.png b/content/lessons/how-to-structure-a-large-web-app-project/img/local-npm-cloud-function.png
similarity index 100%
rename from hugo/content/lessons/how-to-structure-a-large-web-app-project/img/local-npm-cloud-function.png
rename to content/lessons/how-to-structure-a-large-web-app-project/img/local-npm-cloud-function.png
diff --git a/hugo/content/lessons/how-to-structure-a-large-web-app-project/img/multirepo-project.png b/content/lessons/how-to-structure-a-large-web-app-project/img/multirepo-project.png
similarity index 100%
rename from hugo/content/lessons/how-to-structure-a-large-web-app-project/img/multirepo-project.png
rename to content/lessons/how-to-structure-a-large-web-app-project/img/multirepo-project.png
diff --git a/hugo/content/lessons/how-to-structure-a-large-web-app-project/img/vscode-intellisense.png b/content/lessons/how-to-structure-a-large-web-app-project/img/vscode-intellisense.png
similarity index 100%
rename from hugo/content/lessons/how-to-structure-a-large-web-app-project/img/vscode-intellisense.png
rename to content/lessons/how-to-structure-a-large-web-app-project/img/vscode-intellisense.png
diff --git a/hugo/content/lessons/how-to-structure-a-large-web-app-project/index.md b/content/lessons/how-to-structure-a-large-web-app-project/index.md
similarity index 100%
rename from hugo/content/lessons/how-to-structure-a-large-web-app-project/index.md
rename to content/lessons/how-to-structure-a-large-web-app-project/index.md
diff --git a/hugo/content/lessons/how-to-structure-a-large-web-app-project/img/.gitkeep b/content/lessons/http-with-angular-quick-start/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/how-to-structure-a-large-web-app-project/img/.gitkeep
rename to content/lessons/http-with-angular-quick-start/img/.gitkeep
diff --git a/hugo/content/lessons/http-with-angular-quick-start/img/featured.jpg b/content/lessons/http-with-angular-quick-start/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/http-with-angular-quick-start/img/featured.jpg
rename to content/lessons/http-with-angular-quick-start/img/featured.jpg
diff --git a/hugo/content/lessons/http-with-angular-quick-start/img/featured.png b/content/lessons/http-with-angular-quick-start/img/featured.png
similarity index 100%
rename from hugo/content/lessons/http-with-angular-quick-start/img/featured.png
rename to content/lessons/http-with-angular-quick-start/img/featured.png
diff --git a/hugo/content/lessons/http-with-angular-quick-start/img/featured.webp b/content/lessons/http-with-angular-quick-start/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/http-with-angular-quick-start/img/featured.webp
rename to content/lessons/http-with-angular-quick-start/img/featured.webp
diff --git a/hugo/content/lessons/http-with-angular-quick-start/img/http-get-angular.gif b/content/lessons/http-with-angular-quick-start/img/http-get-angular.gif
similarity index 100%
rename from hugo/content/lessons/http-with-angular-quick-start/img/http-get-angular.gif
rename to content/lessons/http-with-angular-quick-start/img/http-get-angular.gif
diff --git a/hugo/content/lessons/http-with-angular-quick-start/img/http-post-angular.gif b/content/lessons/http-with-angular-quick-start/img/http-post-angular.gif
similarity index 100%
rename from hugo/content/lessons/http-with-angular-quick-start/img/http-post-angular.gif
rename to content/lessons/http-with-angular-quick-start/img/http-post-angular.gif
diff --git a/hugo/content/lessons/http-with-angular-quick-start/img/swagger-angular-ts.png b/content/lessons/http-with-angular-quick-start/img/swagger-angular-ts.png
similarity index 100%
rename from hugo/content/lessons/http-with-angular-quick-start/img/swagger-angular-ts.png
rename to content/lessons/http-with-angular-quick-start/img/swagger-angular-ts.png
diff --git a/hugo/content/lessons/http-with-angular-quick-start/index.md b/content/lessons/http-with-angular-quick-start/index.md
similarity index 100%
rename from hugo/content/lessons/http-with-angular-quick-start/index.md
rename to content/lessons/http-with-angular-quick-start/index.md
diff --git a/hugo/content/lessons/http-with-angular-quick-start/img/.gitkeep b/content/lessons/image-thumbnail-resizer-cloud-function/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/http-with-angular-quick-start/img/.gitkeep
rename to content/lessons/image-thumbnail-resizer-cloud-function/img/.gitkeep
diff --git a/hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/after-resize-cloud-function (1).png b/content/lessons/image-thumbnail-resizer-cloud-function/img/after-resize-cloud-function (1).png
similarity index 100%
rename from hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/after-resize-cloud-function (1).png
rename to content/lessons/image-thumbnail-resizer-cloud-function/img/after-resize-cloud-function (1).png
diff --git a/hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/after-resize-cloud-function.png b/content/lessons/image-thumbnail-resizer-cloud-function/img/after-resize-cloud-function.png
similarity index 100%
rename from hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/after-resize-cloud-function.png
rename to content/lessons/image-thumbnail-resizer-cloud-function/img/after-resize-cloud-function.png
diff --git a/hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/before-resize.png b/content/lessons/image-thumbnail-resizer-cloud-function/img/before-resize.png
similarity index 100%
rename from hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/before-resize.png
rename to content/lessons/image-thumbnail-resizer-cloud-function/img/before-resize.png
diff --git a/hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/featured.jpg b/content/lessons/image-thumbnail-resizer-cloud-function/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/featured.jpg
rename to content/lessons/image-thumbnail-resizer-cloud-function/img/featured.jpg
diff --git a/hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/featured.png b/content/lessons/image-thumbnail-resizer-cloud-function/img/featured.png
similarity index 100%
rename from hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/featured.png
rename to content/lessons/image-thumbnail-resizer-cloud-function/img/featured.png
diff --git a/hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/featured.webp b/content/lessons/image-thumbnail-resizer-cloud-function/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/featured.webp
rename to content/lessons/image-thumbnail-resizer-cloud-function/img/featured.webp
diff --git a/hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/ionic-color-generator.png b/content/lessons/image-thumbnail-resizer-cloud-function/img/ionic-color-generator.png
similarity index 100%
rename from hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/ionic-color-generator.png
rename to content/lessons/image-thumbnail-resizer-cloud-function/img/ionic-color-generator.png
diff --git a/hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/ionic-css-variables-demo.gif b/content/lessons/image-thumbnail-resizer-cloud-function/img/ionic-css-variables-demo.gif
similarity index 100%
rename from hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/ionic-css-variables-demo.gif
rename to content/lessons/image-thumbnail-resizer-cloud-function/img/ionic-css-variables-demo.gif
diff --git a/hugo/content/lessons/image-thumbnail-resizer-cloud-function/index.md b/content/lessons/image-thumbnail-resizer-cloud-function/index.md
similarity index 100%
rename from hugo/content/lessons/image-thumbnail-resizer-cloud-function/index.md
rename to content/lessons/image-thumbnail-resizer-cloud-function/index.md
diff --git a/hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/.gitkeep b/content/lessons/import-csv-json-or-excel-to-firestore/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/image-thumbnail-resizer-cloud-function/img/.gitkeep
rename to content/lessons/import-csv-json-or-excel-to-firestore/img/.gitkeep
diff --git a/hugo/content/lessons/import-csv-json-or-excel-to-firestore/img/cli-help.png b/content/lessons/import-csv-json-or-excel-to-firestore/img/cli-help.png
similarity index 100%
rename from hugo/content/lessons/import-csv-json-or-excel-to-firestore/img/cli-help.png
rename to content/lessons/import-csv-json-or-excel-to-firestore/img/cli-help.png
diff --git a/hugo/content/lessons/import-csv-json-or-excel-to-firestore/img/featured.jpg b/content/lessons/import-csv-json-or-excel-to-firestore/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/import-csv-json-or-excel-to-firestore/img/featured.jpg
rename to content/lessons/import-csv-json-or-excel-to-firestore/img/featured.jpg
diff --git a/hugo/content/lessons/import-csv-json-or-excel-to-firestore/img/featured.png b/content/lessons/import-csv-json-or-excel-to-firestore/img/featured.png
similarity index 100%
rename from hugo/content/lessons/import-csv-json-or-excel-to-firestore/img/featured.png
rename to content/lessons/import-csv-json-or-excel-to-firestore/img/featured.png
diff --git a/hugo/content/lessons/import-csv-json-or-excel-to-firestore/img/featured.webp b/content/lessons/import-csv-json-or-excel-to-firestore/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/import-csv-json-or-excel-to-firestore/img/featured.webp
rename to content/lessons/import-csv-json-or-excel-to-firestore/img/featured.webp
diff --git a/hugo/content/lessons/import-csv-json-or-excel-to-firestore/img/firebase-service-account.png b/content/lessons/import-csv-json-or-excel-to-firestore/img/firebase-service-account.png
similarity index 100%
rename from hugo/content/lessons/import-csv-json-or-excel-to-firestore/img/firebase-service-account.png
rename to content/lessons/import-csv-json-or-excel-to-firestore/img/firebase-service-account.png
diff --git a/hugo/content/lessons/import-csv-json-or-excel-to-firestore/index.md b/content/lessons/import-csv-json-or-excel-to-firestore/index.md
similarity index 100%
rename from hugo/content/lessons/import-csv-json-or-excel-to-firestore/index.md
rename to content/lessons/import-csv-json-or-excel-to-firestore/index.md
diff --git a/hugo/content/lessons/import-csv-json-or-excel-to-firestore/img/.gitkeep b/content/lessons/infinite-scroll-firestore-angular/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/import-csv-json-or-excel-to-firestore/img/.gitkeep
rename to content/lessons/infinite-scroll-firestore-angular/img/.gitkeep
diff --git a/hugo/content/lessons/infinite-scroll-firestore-angular/img/featured.jpg b/content/lessons/infinite-scroll-firestore-angular/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/infinite-scroll-firestore-angular/img/featured.jpg
rename to content/lessons/infinite-scroll-firestore-angular/img/featured.jpg
diff --git a/hugo/content/lessons/infinite-scroll-firestore-angular/img/featured.png b/content/lessons/infinite-scroll-firestore-angular/img/featured.png
similarity index 100%
rename from hugo/content/lessons/infinite-scroll-firestore-angular/img/featured.png
rename to content/lessons/infinite-scroll-firestore-angular/img/featured.png
diff --git a/hugo/content/lessons/infinite-scroll-firestore-angular/img/infinite-scroll-firestore1.gif b/content/lessons/infinite-scroll-firestore-angular/img/infinite-scroll-firestore1.gif
similarity index 100%
rename from hugo/content/lessons/infinite-scroll-firestore-angular/img/infinite-scroll-firestore1.gif
rename to content/lessons/infinite-scroll-firestore-angular/img/infinite-scroll-firestore1.gif
diff --git a/hugo/content/lessons/infinite-scroll-firestore-angular/img/infinite-scroll-firestore2.gif b/content/lessons/infinite-scroll-firestore-angular/img/infinite-scroll-firestore2.gif
similarity index 100%
rename from hugo/content/lessons/infinite-scroll-firestore-angular/img/infinite-scroll-firestore2.gif
rename to content/lessons/infinite-scroll-firestore-angular/img/infinite-scroll-firestore2.gif
diff --git a/hugo/content/lessons/infinite-scroll-firestore-angular/index.md b/content/lessons/infinite-scroll-firestore-angular/index.md
similarity index 100%
rename from hugo/content/lessons/infinite-scroll-firestore-angular/index.md
rename to content/lessons/infinite-scroll-firestore-angular/index.md
diff --git a/hugo/content/lessons/infinite-scroll-firestore-angular/img/.gitkeep b/content/lessons/infinite-virtual-scroll-angular-cdk/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/infinite-scroll-firestore-angular/img/.gitkeep
rename to content/lessons/infinite-virtual-scroll-angular-cdk/img/.gitkeep
diff --git a/hugo/content/lessons/infinite-virtual-scroll-angular-cdk/img/featured.jpg b/content/lessons/infinite-virtual-scroll-angular-cdk/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/infinite-virtual-scroll-angular-cdk/img/featured.jpg
rename to content/lessons/infinite-virtual-scroll-angular-cdk/img/featured.jpg
diff --git a/hugo/content/lessons/infinite-virtual-scroll-angular-cdk/img/featured.png b/content/lessons/infinite-virtual-scroll-angular-cdk/img/featured.png
similarity index 100%
rename from hugo/content/lessons/infinite-virtual-scroll-angular-cdk/img/featured.png
rename to content/lessons/infinite-virtual-scroll-angular-cdk/img/featured.png
diff --git a/hugo/content/lessons/infinite-virtual-scroll-angular-cdk/img/featured.webp b/content/lessons/infinite-virtual-scroll-angular-cdk/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/infinite-virtual-scroll-angular-cdk/img/featured.webp
rename to content/lessons/infinite-virtual-scroll-angular-cdk/img/featured.webp
diff --git a/hugo/content/lessons/infinite-virtual-scroll-angular-cdk/img/virtual-scroll-cdk-demo.gif b/content/lessons/infinite-virtual-scroll-angular-cdk/img/virtual-scroll-cdk-demo.gif
similarity index 100%
rename from hugo/content/lessons/infinite-virtual-scroll-angular-cdk/img/virtual-scroll-cdk-demo.gif
rename to content/lessons/infinite-virtual-scroll-angular-cdk/img/virtual-scroll-cdk-demo.gif
diff --git a/hugo/content/lessons/infinite-virtual-scroll-angular-cdk/index.md b/content/lessons/infinite-virtual-scroll-angular-cdk/index.md
similarity index 100%
rename from hugo/content/lessons/infinite-virtual-scroll-angular-cdk/index.md
rename to content/lessons/infinite-virtual-scroll-angular-cdk/index.md
diff --git a/hugo/content/lessons/infinite-virtual-scroll-angular-cdk/img/.gitkeep b/content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/infinite-virtual-scroll-angular-cdk/img/.gitkeep
rename to content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/featured.jpg b/content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/featured.jpg
rename to content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/featured.png b/content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/featured.png
rename to content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/featured.png
diff --git a/hugo/content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/featured.webp b/content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/featured.webp
rename to content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/featured.webp
diff --git a/hugo/content/lessons/introduction-to-rxfire-rxjs-for-firebase/index.md b/content/lessons/introduction-to-rxfire-rxjs-for-firebase/index.md
similarity index 100%
rename from hugo/content/lessons/introduction-to-rxfire-rxjs-for-firebase/index.md
rename to content/lessons/introduction-to-rxfire-rxjs-for-firebase/index.md
diff --git a/hugo/content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/.gitkeep b/content/lessons/invite-only-firebase-phone-auth/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/introduction-to-rxfire-rxjs-for-firebase/img/.gitkeep
rename to content/lessons/invite-only-firebase-phone-auth/img/.gitkeep
diff --git a/hugo/content/lessons/invite-only-firebase-phone-auth/img/enable-phone-auth.png b/content/lessons/invite-only-firebase-phone-auth/img/enable-phone-auth.png
similarity index 100%
rename from hugo/content/lessons/invite-only-firebase-phone-auth/img/enable-phone-auth.png
rename to content/lessons/invite-only-firebase-phone-auth/img/enable-phone-auth.png
diff --git a/hugo/content/lessons/invite-only-firebase-phone-auth/img/featured.jpg b/content/lessons/invite-only-firebase-phone-auth/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/invite-only-firebase-phone-auth/img/featured.jpg
rename to content/lessons/invite-only-firebase-phone-auth/img/featured.jpg
diff --git a/hugo/content/lessons/invite-only-firebase-phone-auth/img/featured.png b/content/lessons/invite-only-firebase-phone-auth/img/featured.png
similarity index 100%
rename from hugo/content/lessons/invite-only-firebase-phone-auth/img/featured.png
rename to content/lessons/invite-only-firebase-phone-auth/img/featured.png
diff --git a/hugo/content/lessons/invite-only-firebase-phone-auth/img/featured.webp b/content/lessons/invite-only-firebase-phone-auth/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/invite-only-firebase-phone-auth/img/featured.webp
rename to content/lessons/invite-only-firebase-phone-auth/img/featured.webp
diff --git a/hugo/content/lessons/invite-only-firebase-phone-auth/img/invite-data-model.png b/content/lessons/invite-only-firebase-phone-auth/img/invite-data-model.png
similarity index 100%
rename from hugo/content/lessons/invite-only-firebase-phone-auth/img/invite-data-model.png
rename to content/lessons/invite-only-firebase-phone-auth/img/invite-data-model.png
diff --git a/hugo/content/lessons/invite-only-firebase-phone-auth/img/plivo-dashboard.png b/content/lessons/invite-only-firebase-phone-auth/img/plivo-dashboard.png
similarity index 100%
rename from hugo/content/lessons/invite-only-firebase-phone-auth/img/plivo-dashboard.png
rename to content/lessons/invite-only-firebase-phone-auth/img/plivo-dashboard.png
diff --git a/hugo/content/lessons/invite-only-firebase-phone-auth/img/text-firebase.png b/content/lessons/invite-only-firebase-phone-auth/img/text-firebase.png
similarity index 100%
rename from hugo/content/lessons/invite-only-firebase-phone-auth/img/text-firebase.png
rename to content/lessons/invite-only-firebase-phone-auth/img/text-firebase.png
diff --git a/hugo/content/lessons/invite-only-firebase-phone-auth/img/text-plivo.png b/content/lessons/invite-only-firebase-phone-auth/img/text-plivo.png
similarity index 100%
rename from hugo/content/lessons/invite-only-firebase-phone-auth/img/text-plivo.png
rename to content/lessons/invite-only-firebase-phone-auth/img/text-plivo.png
diff --git a/hugo/content/lessons/invite-only-firebase-phone-auth/index.md b/content/lessons/invite-only-firebase-phone-auth/index.md
similarity index 100%
rename from hugo/content/lessons/invite-only-firebase-phone-auth/index.md
rename to content/lessons/invite-only-firebase-phone-auth/index.md
diff --git a/hugo/content/lessons/invite-only-firebase-phone-auth/img/.gitkeep b/content/lessons/ionic-4-routing-and-navigation-guide/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/invite-only-firebase-phone-auth/img/.gitkeep
rename to content/lessons/ionic-4-routing-and-navigation-guide/img/.gitkeep
diff --git a/hugo/content/lessons/ionic-4-routing-and-navigation-guide/img/featured.jpg b/content/lessons/ionic-4-routing-and-navigation-guide/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/ionic-4-routing-and-navigation-guide/img/featured.jpg
rename to content/lessons/ionic-4-routing-and-navigation-guide/img/featured.jpg
diff --git a/hugo/content/lessons/ionic-4-routing-and-navigation-guide/img/featured.png b/content/lessons/ionic-4-routing-and-navigation-guide/img/featured.png
similarity index 100%
rename from hugo/content/lessons/ionic-4-routing-and-navigation-guide/img/featured.png
rename to content/lessons/ionic-4-routing-and-navigation-guide/img/featured.png
diff --git a/hugo/content/lessons/ionic-4-routing-and-navigation-guide/img/featured.webp b/content/lessons/ionic-4-routing-and-navigation-guide/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/ionic-4-routing-and-navigation-guide/img/featured.webp
rename to content/lessons/ionic-4-routing-and-navigation-guide/img/featured.webp
diff --git a/hugo/content/lessons/ionic-4-routing-and-navigation-guide/img/router-tree-ionic4.png b/content/lessons/ionic-4-routing-and-navigation-guide/img/router-tree-ionic4.png
similarity index 100%
rename from hugo/content/lessons/ionic-4-routing-and-navigation-guide/img/router-tree-ionic4.png
rename to content/lessons/ionic-4-routing-and-navigation-guide/img/router-tree-ionic4.png
diff --git a/hugo/content/lessons/ionic-4-routing-and-navigation-guide/index.md b/content/lessons/ionic-4-routing-and-navigation-guide/index.md
similarity index 100%
rename from hugo/content/lessons/ionic-4-routing-and-navigation-guide/index.md
rename to content/lessons/ionic-4-routing-and-navigation-guide/index.md
diff --git a/hugo/content/lessons/ionic-4-routing-and-navigation-guide/img/.gitkeep b/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/ionic-4-routing-and-navigation-guide/img/.gitkeep
rename to content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/.gitkeep
diff --git a/hugo/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/featured.jpg b/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/featured.jpg
rename to content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/featured.jpg
diff --git a/hugo/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/featured.png b/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/featured.png
similarity index 100%
rename from hugo/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/featured.png
rename to content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/featured.png
diff --git a/hugo/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/featured.webp b/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/featured.webp
rename to content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/featured.webp
diff --git a/hugo/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/ionic-slide-tutorial.gif b/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/ionic-slide-tutorial.gif
similarity index 100%
rename from hugo/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/ionic-slide-tutorial.gif
rename to content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/ionic-slide-tutorial.gif
diff --git a/hugo/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/index.md b/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/index.md
similarity index 100%
rename from hugo/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/index.md
rename to content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/index.md
diff --git a/hugo/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/.gitkeep b/content/lessons/javascript-2020-predictions/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/ionic4-intro-slides-tutorial-to-educate-app-users/img/.gitkeep
rename to content/lessons/javascript-2020-predictions/img/.gitkeep
diff --git a/hugo/content/lessons/javascript-2020-predictions/img/featured.jpg b/content/lessons/javascript-2020-predictions/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/javascript-2020-predictions/img/featured.jpg
rename to content/lessons/javascript-2020-predictions/img/featured.jpg
diff --git a/hugo/content/lessons/javascript-2020-predictions/img/featured.png b/content/lessons/javascript-2020-predictions/img/featured.png
similarity index 100%
rename from hugo/content/lessons/javascript-2020-predictions/img/featured.png
rename to content/lessons/javascript-2020-predictions/img/featured.png
diff --git a/hugo/content/lessons/javascript-2020-predictions/img/featured.webp b/content/lessons/javascript-2020-predictions/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/javascript-2020-predictions/img/featured.webp
rename to content/lessons/javascript-2020-predictions/img/featured.webp
diff --git a/hugo/content/lessons/javascript-2020-predictions/index.md b/content/lessons/javascript-2020-predictions/index.md
similarity index 100%
rename from hugo/content/lessons/javascript-2020-predictions/index.md
rename to content/lessons/javascript-2020-predictions/index.md
diff --git a/hugo/content/lessons/javascript-2020-predictions/img/.gitkeep b/content/lessons/learn-go-in-100-lines/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/javascript-2020-predictions/img/.gitkeep
rename to content/lessons/learn-go-in-100-lines/img/.gitkeep
diff --git a/hugo/content/lessons/learn-go-in-100-lines/img/featured.jpg b/content/lessons/learn-go-in-100-lines/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/learn-go-in-100-lines/img/featured.jpg
rename to content/lessons/learn-go-in-100-lines/img/featured.jpg
diff --git a/hugo/content/lessons/learn-go-in-100-lines/img/featured.png b/content/lessons/learn-go-in-100-lines/img/featured.png
similarity index 100%
rename from hugo/content/lessons/learn-go-in-100-lines/img/featured.png
rename to content/lessons/learn-go-in-100-lines/img/featured.png
diff --git a/hugo/content/lessons/learn-go-in-100-lines/img/featured.webp b/content/lessons/learn-go-in-100-lines/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/learn-go-in-100-lines/img/featured.webp
rename to content/lessons/learn-go-in-100-lines/img/featured.webp
diff --git a/content/lessons/learn-go-in-100-lines/index.md b/content/lessons/learn-go-in-100-lines/index.md
new file mode 100644
index 000000000..4dee28c3e
--- /dev/null
+++ b/content/lessons/learn-go-in-100-lines/index.md
@@ -0,0 +1,581 @@
+---
+title: Learn Go in 100 Lines
+lastmod: 2021-08-28T07:27:03-07:00
+publishdate: 2021-08-28T07:27:03-07:00
+author: Alex Guja
+draft: false
+description: An introduction to Go
+tags:
+ - go
+
+# youtube: f0DrPLKf6Ro
+# github:
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+
+## Introduction
+
+[Go](https://en.wikipedia.org/wiki/Go_(programming_language)) is an open-source programming language developed at Google by Robert Griesemer, Rob Pike, and Ken Thompson. It is often described as "C for the 21st century", however, it borrows important ideas from several other languages like ALGOL, Pascal, Modula-2, Oberon, CSP, and others. At its core, Go relies on simplicity, reliability, and efficiency to overcome the shortcomings of its ancestors. Go has garbage collection, a package system, first-class functions, lexical scope, immutable strings that rely on UTF-8, and an awesome concurrency model.
+
+As a compiled language, Go is generally faster than interpreted languages and is safer from crashes thanks to its built-in type system. That being said, there is a good balance between expressiveness and safety that gives programmers the benefits of a strong type system without the burden of complex workflows.
+
+The use cases of the language vary from network servers and distributed systems to CLI’s, web and mobile development, scalable databases, and cloud-native applications.
+
+## First Program
+Before we get started, check out this [guide](https://golang.org/doc/install) to download and install Go on your platform. We’ll start with the classic “hello world”. Despite being a simple example, it already illustrates many central ideas.
+
+{{< file "go" "hello_world.go" >}}
+```go
+package main // Required for a standalone executable.
+
+import "fmt" // fmt implements formatted I/O.
+
+/* When this program is executed the first function that runs is main.main() */
+func main() {
+ fmt.Println("Hello, world") // Call Println() from the fmt package.
+}
+```
+
+The first thing to note is that every Go program is organized in a *package*. A package is just a collection of source files in the same directory that allows variables, types, and functions to be visible among other source files within the same package. For standalone files, the package is called main, but the name of the file is decided by the programmer.
+
+Next, we import the "fmt" package that implements formatted I/O. We'll use the fmt.Println() function to write default formats to standard output and fmt.Printf() when we need more flexibility over the formats.
+
+Lastly, in the body of the main function, we make a call to fmt.Println() that displays the passed argument in the output.
+Note that the main function takes no arguments and doesn't return any values. Similar to the main package, the main function is a requirement for standalone files.
+
+To run the program, we need to compile the source code and its dependencies into an executable binary. We achieve this by opening a command line in the directory of our package and running
+the go command with the build subcommand, followed by the name of the source file.
+
+{{< file "terminal" "command line" >}}
+```text
+
+$ go build hello_world.go
+```
+
+To execute the binary, type ./ followed by the name of the binary file.
+{{< file "terminal" "command line" >}}
+```text
+$ ./hello_world
+
+# output
+Hello, world
+```
+
+Another option is to use the go command with the run subcommand, followed by the name of the source file. This will combine the two steps outlined above and produce the same result, however, no executable will be saved in the working directory. This method is mostly used for one-off snippets and experimental code that is unlikely to be needed in the future.
+
+{{< file "terminal" "command line" >}}
+```text
+
+$ go run helloworld.go
+
+# output
+Hello, world
+```
+
+## Basics in 100 Lines
+
+In the following 100 lines of code, we'll go through several examples illustrating Go's features. We'll cover how to declare variables, understand Go's built-in types, work with arrays and slices, cover maps, and touch on the flow of control. From there, we'll go beyond 100 lines and also look at pointers, structs, and Go's built-in support for concurrency.
+
+### Variables
+When writing Go programs, variables must be declared before they can be used. The example below shows how to declare single variables or a group of variables. In the interest of space, the output is displayed as an in-line comment.
+
+{{< file "go" "variables.go" >}}
+```go
+package main
+
+import "fmt"
+
+/* Declare a single variable */
+var a int
+
+/* Declare a group of variables */
+var (
+ b bool
+ c float32
+ d string
+)
+
+func main() {
+ a = 42 // Assign single value
+ b, c = true, 32.0 // Assign multiple values
+ d = "string" // Strings must contain double quotes
+ fmt.Println(a, b, c, d) // 42 true 32 string
+}
+
+
+```
+
+Notice how each variable declaration is followed by the type of that variable. Before we cover types in the next section, note that we can replace the var keyword with const when we need to introduce constants in our code.
+
+
+When declaring variables, another option is to use the := operator to initialize and assign to variables in one go. This is called a *short variable declaration*. Let's refactor the code above to illustrate this.
+
+
+{{< file "go" "variables_refactored.go" >}}
+```go
+package main
+
+import "fmt"
+
+func main() {
+ a := 42 // Initialize and assign to a single variable
+ b, c := true, 32.0 // Initialize and assign to multiple variables
+ d := "string"
+ fmt.Println(a, b, c, d) // 42 true 32 string
+}
+
+```
+The short variable declaration makes our code neater, so we'll see it again throughout this lesson.
+
+### Types
+Go offers a rich collection of types, including numericas, booleans, strings, error, and the ability to create custom types. Strings are are a sequence of UTF-8 characters enclosed in double-quotes. Numerical types are the most versatile, with 8, 16, 32, and 64-bit variants for both signed (int) and unsigned (uint) integers.
+
+A byte is an alias for uint8. A rune is an alias for int32. Floats (or floating-point numbers) are either float32 or float64. Complex numbers are also supported and can be represented as complex128 or complex64.
+
+When a variable is declared it is assigned to the natural "null" value of the corresponding type. For example, in var k int, k has the value 0.
+In var s string, s has the value "". The example below shows the difference between user-specified types and the default types assigned with a short variable declaration.
+
+
+{{< file "go" "types.go" >}}
+```go
+package main
+
+import "fmt"
+
+func main() {
+ /* User specified types */
+ const a int32 = 12 // 32-bit integer
+ const b float32 = 20.5 // 32-bit float
+ var c complex128 = 1 + 4i // 128-bit complex number
+ var d uint16 = 14 // 16-bit unsigned integer
+
+ /* Default types */
+ n := 42 // int
+ pi := 3.14 // float64
+ x, y := true, false // bool
+ z := "Go is awesome" // string
+
+ fmt.Printf("user-specified types:\n %T %T %T %T\n", a, b, c, d)
+ fmt.Printf("default types:\n %T %T %T %T %T\n", n, pi, x, y, z)
+}
+
+```
+
+Notice the %T conversion character in the first argument of fmt.Printf(). In Go, this is called a *verb*, and it stands for the *type* of the passed variable. \n introduces a new line at the end of the output. fmt.Printf() has many other verbs, including %d for decimal integers, %s for strings, %f for floats, %t for booleans, and %v for any natural value for a type.
+
+Another thing to note is that int is an alias for either int32 or int64, depending on the underlying system.
+Let's run the code example to see the types and the formatting verbs in action.
+
+{{< file "terminal" "command line" >}}
+```text
+$ go run types.go
+
+# output
+user-specified types:
+ int32 float32 complex128 uint16
+
+default types:
+ int float64 bool bool string
+```
+
+
+
+### Arrays
+
+Storing a number of elements in a list can be achieved using arrays, slices, and maps (Go's version of hash-maps). We'll consider all three in the examples below. Arrays are defined by their fixed size and a common data type for all elements. Interestingly, the size of the array is part of the type, meaning arrays cannot grow or shrink, otherwise, they would have a different type. Array elements are accessed using square brackets. The example below shows how to declare an array containing strings and how to loop through its elements.
+
+{{< file "go" "arrays.go" >}}
+```go
+package main
+
+import "fmt"
+
+func main() {
+ /* Define an array of size 4 that stores deployment options */
+ var DeploymentOptions = [4]string{"R-pi", "AWS", "GCP", "Azure"}
+
+ /* Loop through the deployment options array */
+ for i := 0; i < len(DeploymentOptions); i++ {
+ option := DeploymentOptions[i]
+ fmt.Println(i, option)
+ }
+}
+
+```
+
+Notice the lack of parentheses around the looping condition. In this example, we traverse the array outputting the current index and the value stored at that index. Running the code produces the following output.
+
+{{< file "terminal" "command line" >}}
+```text
+$ go run arrays.go
+
+# output
+0 R-pi
+1 AWS
+2 GCP
+3 Azure
+```
+
+Before we move on, let’s try a neater way to write the for loop in the example above.
+We can make use of the range keyword to achieve the same behavior with less code. Both versions of the code produce the same output.
+
+{{< file "go" "arrays_refactored.go" >}}
+```go
+package main
+
+import "fmt"
+
+func main() {
+ /* Define an array and let the compiler count its size */
+ DeploymentOptions := [...]string{"R-pi", "AWS", "GCP", "Azure"}
+
+ /* Loop through the deployment options array */
+ for index, option := range DeploymentOptions {
+ fmt.Println(index, option)
+ }
+}
+
+```
+
+### Slices
+
+Slices can be thought of as *dynamic* arrays. Slices always refer to an underlying array and can grow when new elements are added. The number of elements that are visible through a slice determines its length. If a slice has an underlying array that is larger, the slice may still have the *capacity* to grow. When it comes to slices, think of the length as the *current* number of elements, and think of the capacity as the *maximum* number of elements that can be stored. Let's see an example.
+
+{{< file "go" "slices.go" >}}
+```go
+package main
+
+import "fmt"
+
+func main() {
+ /* Define an array containing programming languages */
+ languages := [9]string{
+ "C", "Lisp", "C++", "Java", "Python",
+ "JavaScript", "Ruby", "Go", "Rust", // Must include the trailing comma
+ }
+
+ /* Define slices */
+ classics := languages[0:3] // alternatively languages[:3]
+ modern := make([]string, 4) // len(modern) = 4
+ modern = languages[3:7] // include 3 exclude 7
+ new := languages[7:9] // alternatively languages[7:]
+
+ fmt.Printf("classic languagues: %v\n", classics) // classic languagues: [C Lisp C++]
+ fmt.Printf("modern languages: %v\n", modern) // modern languages: [Java Python JavaScript Ruby]
+ fmt.Printf("new languages: %v\n", new) // new languages: [Go Rust]
+}
+
+```
+
+Note that when defining a slice, the last index is excluded. In other words, a slice s := a[i:j] will include all the elements from a[i] to a[j - 1] but not a[j]. In the next example, we continue exploring the behavior of slices. Let's pretend we're editing the same file and the above code is still available (instead of the --snip-- comment).
+
+{{< file "go" "slices.go" >}}
+```go
+package main
+
+import (
+ "fmt"
+ "reflect"
+)
+
+func main() {
+ // -- snip -- //
+ allLangs := languages[:] // copy of the array
+ fmt.Println(reflect.TypeOf(allLangs).Kind()) // slice
+
+ /* Create a slice containing web frameworks */
+ frameworks := []string{
+ "React", "Vue", "Angular", "Svelte",
+ "Laravel", "Django", "Flask", "Fiber",
+ }
+
+ jsFrameworks := frameworks[0:4:4] // length 4 capacity 4
+ frameworks = append(frameworks, "Meteor") // not possible with arrays
+
+ fmt.Printf("all frameworks: %v\n", frameworks)
+ fmt.Printf("js frameworks: %v\n", jsFrameworks)
+}
+
+
+```
+
+First, we make a copy of the languages array using the [:] operator. The resulting copy is a slice. We assert that's the case using the "reflect" package. Next, we create a slice called frameworks. Notice the blank entry in the square brackets responsible for the size. If we pass a parameter inside these brackets we are creating an array. Leaving it blank creates a slice. From there, we create another slice called jsFrameworks that selects JavaScript frameworks. Finally, we extend our frameworks slice by adding Meteor to the list of frameworks.
+
+The append function pushes new values to the end of a slice and returns a new slice with the same type as the original. In case the capacity of a slice is insufficient to store the new element, a new slice is created that can fit all the elements. In that case, the returned slice will refer to a different underlying array. Running the above code leads to the output below.
+
+{{< file "terminal" "command line" >}}
+```text
+$ go run slices.go
+
+# output
+...
+all frameworks: [React Vue Angular Svelte Laravel Django Flask Fiber Meteor]
+js frameworks: [React Vue Angular Svelte]
+```
+
+### Maps
+Most modern programming languages have a built-in implementation of a hash-map. For example, think of Python's dictionary or JavaScript's object. Fundamentally, a map is a data structure that stores key-value pairs with a constant look-up time. The efficiency of maps comes at the expense of randomizing the order of the keys and the associated values. In other words, we make no guarantees about the order of the elements in a map. The example below showcases this behavior.
+
+{{< file "go" "maps.go" >}}
+```go
+package main
+
+import "fmt"
+
+func main() {
+ /* Define a map containing the release year of several languages */
+ firstReleases := map[string]int{
+ "C": 1972, "C++": 1985, "Java": 1996,
+ "Python": 1991, "JavaScript": 1996, "Go": 2012,
+ }
+
+ /* Loop through each entry and output the name and release year */
+ for k, v := range firstReleases {
+ fmt.Printf("%s was first released in %d\n", k, v)
+ }
+}
+
+```
+
+
+We define a map called firstReleases containing several programming languages as the keys, and their release years as the corresponding values. We also write a loop to traverse the map and output each key-value pair. If we run the code, notice the random order of the elements displayed in the output.
+
+{{< file "terminal" "command line" >}}
+```text
+$ go run maps.go
+
+# output
+Go was first released in 2012
+C was first released in 1972
+C++ was first released in 1985
+Java was first released in 1996
+Python was first released in 1991
+JavaScript was first released in 1996
+```
+
+### Control Flow
+To wrap things up, we will consider the following scenario: Let's suppose we're given a slice containing floats, and we're interested in computing their average value. We'll proceed by creating a function called average that takes a slice as a parameter and returns a float called avg. The example below shows a possible implementation.
+
+{{< file "go" "control_flow.go" >}}
+```go
+
+package main
+
+import "fmt"
+
+/* Define a function to find the average of the floats contained in a slice */
+func average(x []float64) (avg float64) {
+ total := 0.0
+ if len(x) == 0 {
+ avg = 0
+ } else {
+ for _, v := range x {
+ total += v
+ }
+ avg = total / float64(len(x))
+ }
+ return
+}
+
+func main() {
+ x := []float64{2.15, 3.14, 42.0, 29.5}
+ fmt.Println(average(x)) // 19.197499999999998
+}
+
+```
+
+We define an input slice called x in the body of the main function and we make a call to average, passing in x as an argument. We wrap the call inside fmt.Println() to write the result to standard output.
+The interesting part is the implementation of the average function. Notice the return parameter avg is defined immediately at end of the function declaration. In the function body, we initialize a variable named total that will compute a running sum of the slice elements. From there, we check the size of the input slice. If the slice is empty, we return 0, otherwise, we loop through each element in the slice and add it to the total. Notice how we use the underscore (_) for the unused variable. We convert the length of the slice to a float using float64(len(x)). Finally, we compute the average and return the result to the caller.
+
+
+Now that we've seen the classic if-else statements, let's introduce Go's switch statements. We'll refactor our average function to make use of the switch syntax.
+
+{{< file "go" "switch_cases.go" >}}
+```go
+
+package main
+
+import "fmt"
+
+func average(x []float64) (avg float64) {
+ total := 0.0
+ switch len(x) {
+ case 0:
+ avg = 0
+ default:
+ for _, v := range x {
+ total += v
+ }
+ avg = total / float64(len(x))
+ }
+ return
+}
+
+func main() {
+ x := []float64{2.15, 3.14, 42.0, 29.5}
+ fmt.Println(average(x)) // 19.197499999999998
+}
+
+```
+
+ Traditionally, the built-in switch statements in modern languages were designed to work with constants. In Go, we are allowed to use variables. We use the switch keyword followed by the variable of interest - in this case len(x). From there, we define two cases inside curly braces, which are evaluated from top to bottom until a case succeeds. In contrast to other languages, Go runs the selected case only, thus removing the need to break. Another cool feature is that the variables in the switch statement are not restricted to integers.
+
+ The last thing we'll mention on this topic is Go's implementation of a while loop. In Go, there is no while keyword. Instead, we use the for keyword followed by a condition and a loop body. The only exception is the missing semicolon at the end of the condition. Let's see an example.
+
+{{< file "go" "while_loop.go" >}}
+```go
+package main
+
+import "fmt"
+
+func main() {
+ count := 1
+ for count < 5 {
+ count += count
+ }
+ fmt.Println(count) // 8
+}
+```
+
+Congratulations for making it this far! Now it's time to have a break
+⏱️ (or another cup of coffee
+☕) before we dive into the bonus section 🎁 .
+
+## Beyond 100 Lines
+In this section, we'll go beyond the basics and explore three more examples related to pointers, structs, and concurrency.
+
+### Structs and pointers
+Before we begin discussing structs and user-defined types, we have to cover pointers. The good news is that pointer arithmetic is not allowed in Go, which eliminates dangerous/unpredictable behavior. A *pointer* stores the memory address of a value. In Go, the type *T is a pointer to a T value. The default value for pointers is nil. Let's go through an example.
+
+{{< file "go" "pointers.go" >}}
+```go
+package main
+
+import "fmt"
+
+func main() {
+ var address *int // declare an int pointer
+ number := 42 // int
+ address = &number // address stores the memory address of number
+ value := *address // dereferencing the value
+
+ fmt.Printf("address: %v\n", address) // address: 0xc0000ae008
+ fmt.Printf("value: %v\n", value) // value: 42
+}
+
+
+```
+
+When working with pointers there are two important symbols to be aware of. The address operator (&) provides the *memory address* of a value. It is used to bind a pointer to a value. The asterisk operator (*) prefixing a type denotes a pointer type, whereas an asterisk prefixing a variable is used to *dereference* the value the variable points to. If you're new to pointers, they may take some getting used to, however, we don't need to dive too deep at this point. Once you feel confident with the example above, you're all set for the rest of this lesson.
+
+For the next part, we'll switch gears and cover how to use a struct to define a custom type.
+A struct is simply a collection of fields. In the next example, we'll use what we've learned about pointers, learn how to use a struct, and build a stack from scratch.
+
+{{< file "go" "structs.go" >}}
+```go
+package main
+
+import "fmt"
+
+/* Define a stack type using a struct */
+type stack struct {
+ index int
+ data [5]int
+}
+
+/* Define push and pop methods */
+func (s *stack) push(k int) {
+ s.data[s.index] = k
+ s.index++
+}
+
+/* Notice the stack pointer s passed as an argument */
+func (s *stack) pop() int {
+ s.index--
+ return s.data[s.index]
+}
+
+func main() {
+ /* Create a pointer to the new stack and push 2 values */
+ s := new(stack)
+ s.push(23)
+ s.push(14)
+ fmt.Printf("stack: %v\n", *s) // stack: {2 [23 14 0 0 0]}
+}
+
+
+```
+
+First, we define our custom type that represents a stack. To achieve the stack functionality, we need an array to store
+the stack elements, and an index to point to the last item in the stack. For the sake of the example, let's fix our stack size to 5 elements. Inside the body of the struct, we specify an index field which is of type int, and a field called data, which is an array of 5 int elements.
+
+Next we define the push and pop methods. A method is a special kind of function that takes a receiver argument between the func keyword and the method name. Notice the type of the parameter s. In this case, it is a stack pointer instead of a stack. By default, Go doesn't pass values by reference. Instead, if we were to omit the asterisk, Go would pass a copy of our stack, meaning the original stack would not be modified by our methods.
+
+In the body of our stack methods, we access the stack fields using the dot notation. In the push method, we write a given integer k to the first available index (recall the default value of a declared int is 0), and increment the index by 1. In the pop method we decrement the index by 1, and return the last item in the stack. In the body of the main function, we use new() to create a pointer to a newly allocated stack. We then push 2 items and write the result to standard output.
+
+### Concurrency
+We'll wrap things up by considering one more example related to concurrency. We'll introduce *goroutines* which are Go's version of threads.
+If you're new to threads, they are nothing but a sequential control flow in a program. Things get interesting when multiple threads are run in parallel so that a program can make use of multiple CPU cores. Goroutines are initiated using the go keyword. In addition to goroutines, Go has built-in *channels* which are used to share data between goroutines. In general, send and receive operations across a channel block the execution until the other side is ready.
+
+In the example below, we'll consider 5 goroutines that run in parallel. Let's suppose we organize a cooking contest between 5 gopher chefs. This is a timed contest and whoever finishes their dish first wins. Let's see how we can simulate this contest using Go's concurrency features.
+
+{{< file "go" "concurrency.go" >}}
+```go
+package main
+
+import (
+ "fmt"
+)
+
+func main() {
+ c := make(chan int) // Create a channel to pass ints
+ for i := 0; i < 5; i++ {
+ go cookingGopher(i, c) // Start a goroutine
+ }
+
+ for i := 0; i < 5; i++ {
+ gopherID := <-c // Receive a value from a channel
+ fmt.Println("gopher", gopherID, "finished the dish")
+ } // All goroutines are finished at this point
+}
+
+/* Notice the channel as an argument */
+func cookingGopher(id int, c chan int) {
+ fmt.Println("gopher", id, "started cooking")
+ c <- id // Send a value back to main
+}
+
+
+```
+
+First, we create a channel that will be common to all goroutines. Then we start 5 goroutines and pass the channel as an argument. Inside each goroutine, we write the gopher id to standard output as soon the gopher starts cooking the dish. We then send the gopher id from the goroutine back to the caller. From there, we're back to the body of the main function where we receive the gopher id and record their finishing time.
+
+
+Since we're dealing with concurrent code, we lose the ability to predict the order of the output, however, we can observe how the channel blocks the execution, as a goroutine has to wait until the channel is available before it can send an id. One possible output is included below. Keep in mind that we're probably using more goroutines than the number of cores on our machine, hence it's likely that a single core is time-multiplexed to simulate the concurrency.
+
+{{< file "terminal" "command line" >}}
+```text
+$ go run concurrency.go
+
+# output
+gopher 0 started cooking
+gopher 4 started cooking
+gopher 3 started cooking
+gopher 0 finished the dish
+gopher 2 started cooking
+gopher 1 started cooking
+gopher 4 finished the dish
+gopher 3 finished the dish
+gopher 2 finished the dish
+gopher 1 finished the dish
+```
+
+If you've made it to the end, congratulations! Hopefully, you had a lot of fun along the way. If you'd like to see more, check out Go's official [tour](https://tour.golang.org/list) which gives you a concise overview of the language. If you enjoyed this article, consider becoming a pro member at [fireship.io](https://fireship.io/pro/) and stay tuned for more content.
\ No newline at end of file
diff --git a/hugo/content/lessons/learn-go-in-100-lines/img/.gitkeep b/content/lessons/material-data-tables-with-firestore/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/learn-go-in-100-lines/img/.gitkeep
rename to content/lessons/material-data-tables-with-firestore/img/.gitkeep
diff --git a/hugo/content/lessons/material-data-tables-with-firestore/img/datatable-firestore.gif b/content/lessons/material-data-tables-with-firestore/img/datatable-firestore.gif
similarity index 100%
rename from hugo/content/lessons/material-data-tables-with-firestore/img/datatable-firestore.gif
rename to content/lessons/material-data-tables-with-firestore/img/datatable-firestore.gif
diff --git a/hugo/content/lessons/material-data-tables-with-firestore/img/featured.jpg b/content/lessons/material-data-tables-with-firestore/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/material-data-tables-with-firestore/img/featured.jpg
rename to content/lessons/material-data-tables-with-firestore/img/featured.jpg
diff --git a/hugo/content/lessons/material-data-tables-with-firestore/img/featured.png b/content/lessons/material-data-tables-with-firestore/img/featured.png
similarity index 100%
rename from hugo/content/lessons/material-data-tables-with-firestore/img/featured.png
rename to content/lessons/material-data-tables-with-firestore/img/featured.png
diff --git a/hugo/content/lessons/material-data-tables-with-firestore/img/featured.webp b/content/lessons/material-data-tables-with-firestore/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/material-data-tables-with-firestore/img/featured.webp
rename to content/lessons/material-data-tables-with-firestore/img/featured.webp
diff --git a/hugo/content/lessons/material-data-tables-with-firestore/index.md b/content/lessons/material-data-tables-with-firestore/index.md
similarity index 100%
rename from hugo/content/lessons/material-data-tables-with-firestore/index.md
rename to content/lessons/material-data-tables-with-firestore/index.md
diff --git a/hugo/content/lessons/material-data-tables-with-firestore/img/.gitkeep b/content/lessons/meilisearch-firebase-google-cloud/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/material-data-tables-with-firestore/img/.gitkeep
rename to content/lessons/meilisearch-firebase-google-cloud/img/.gitkeep
diff --git a/hugo/content/lessons/meilisearch-firebase-google-cloud/img/featured.jpg b/content/lessons/meilisearch-firebase-google-cloud/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/meilisearch-firebase-google-cloud/img/featured.jpg
rename to content/lessons/meilisearch-firebase-google-cloud/img/featured.jpg
diff --git a/hugo/content/lessons/meilisearch-firebase-google-cloud/img/featured.png b/content/lessons/meilisearch-firebase-google-cloud/img/featured.png
similarity index 100%
rename from hugo/content/lessons/meilisearch-firebase-google-cloud/img/featured.png
rename to content/lessons/meilisearch-firebase-google-cloud/img/featured.png
diff --git a/hugo/content/lessons/meilisearch-firebase-google-cloud/img/featured.webp b/content/lessons/meilisearch-firebase-google-cloud/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/meilisearch-firebase-google-cloud/img/featured.webp
rename to content/lessons/meilisearch-firebase-google-cloud/img/featured.webp
diff --git a/hugo/content/lessons/meilisearch-firebase-google-cloud/img/gcp-disk.png b/content/lessons/meilisearch-firebase-google-cloud/img/gcp-disk.png
similarity index 100%
rename from hugo/content/lessons/meilisearch-firebase-google-cloud/img/gcp-disk.png
rename to content/lessons/meilisearch-firebase-google-cloud/img/gcp-disk.png
diff --git a/hugo/content/lessons/meilisearch-firebase-google-cloud/img/meilisearch-create-index.png b/content/lessons/meilisearch-firebase-google-cloud/img/meilisearch-create-index.png
similarity index 100%
rename from hugo/content/lessons/meilisearch-firebase-google-cloud/img/meilisearch-create-index.png
rename to content/lessons/meilisearch-firebase-google-cloud/img/meilisearch-create-index.png
diff --git a/hugo/content/lessons/meilisearch-firebase-google-cloud/img/meilisearch-google-cloud-settings.png b/content/lessons/meilisearch-firebase-google-cloud/img/meilisearch-google-cloud-settings.png
similarity index 100%
rename from hugo/content/lessons/meilisearch-firebase-google-cloud/img/meilisearch-google-cloud-settings.png
rename to content/lessons/meilisearch-firebase-google-cloud/img/meilisearch-google-cloud-settings.png
diff --git a/hugo/content/lessons/meilisearch-firebase-google-cloud/img/meilisearch-keys.png b/content/lessons/meilisearch-firebase-google-cloud/img/meilisearch-keys.png
similarity index 100%
rename from hugo/content/lessons/meilisearch-firebase-google-cloud/img/meilisearch-keys.png
rename to content/lessons/meilisearch-firebase-google-cloud/img/meilisearch-keys.png
diff --git a/hugo/content/lessons/meilisearch-firebase-google-cloud/index.md b/content/lessons/meilisearch-firebase-google-cloud/index.md
similarity index 100%
rename from hugo/content/lessons/meilisearch-firebase-google-cloud/index.md
rename to content/lessons/meilisearch-firebase-google-cloud/index.md
diff --git a/hugo/content/lessons/meilisearch-firebase-google-cloud/img/.gitkeep b/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/meilisearch-firebase-google-cloud/img/.gitkeep
rename to content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/.gitkeep
diff --git a/hugo/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/featured.jpg b/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/featured.jpg
rename to content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/featured.jpg
diff --git a/hugo/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/featured.png b/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/featured.png
similarity index 100%
rename from hugo/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/featured.png
rename to content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/featured.png
diff --git a/hugo/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/featured.webp b/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/featured.webp
rename to content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/featured.webp
diff --git a/hugo/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/multistep-signup.gif b/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/multistep-signup.gif
similarity index 100%
rename from hugo/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/multistep-signup.gif
rename to content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/multistep-signup.gif
diff --git a/hugo/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/index.md b/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/index.md
similarity index 100%
rename from hugo/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/index.md
rename to content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/index.md
diff --git a/hugo/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/.gitkeep b/content/lessons/ngxs-quick-start-angular-state-management/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/multi-step-signup-firebase-email-password-auth-angular-reactive-forms/img/.gitkeep
rename to content/lessons/ngxs-quick-start-angular-state-management/img/.gitkeep
diff --git a/hugo/content/lessons/ngxs-quick-start-angular-state-management/img/featured.jpg b/content/lessons/ngxs-quick-start-angular-state-management/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/ngxs-quick-start-angular-state-management/img/featured.jpg
rename to content/lessons/ngxs-quick-start-angular-state-management/img/featured.jpg
diff --git a/hugo/content/lessons/ngxs-quick-start-angular-state-management/img/featured.png b/content/lessons/ngxs-quick-start-angular-state-management/img/featured.png
similarity index 100%
rename from hugo/content/lessons/ngxs-quick-start-angular-state-management/img/featured.png
rename to content/lessons/ngxs-quick-start-angular-state-management/img/featured.png
diff --git a/hugo/content/lessons/ngxs-quick-start-angular-state-management/img/featured.webp b/content/lessons/ngxs-quick-start-angular-state-management/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/ngxs-quick-start-angular-state-management/img/featured.webp
rename to content/lessons/ngxs-quick-start-angular-state-management/img/featured.webp
diff --git a/hugo/content/lessons/ngxs-quick-start-angular-state-management/img/ngxs-vs-ngrx.gif b/content/lessons/ngxs-quick-start-angular-state-management/img/ngxs-vs-ngrx.gif
similarity index 100%
rename from hugo/content/lessons/ngxs-quick-start-angular-state-management/img/ngxs-vs-ngrx.gif
rename to content/lessons/ngxs-quick-start-angular-state-management/img/ngxs-vs-ngrx.gif
diff --git a/hugo/content/lessons/ngxs-quick-start-angular-state-management/index.md b/content/lessons/ngxs-quick-start-angular-state-management/index.md
similarity index 100%
rename from hugo/content/lessons/ngxs-quick-start-angular-state-management/index.md
rename to content/lessons/ngxs-quick-start-angular-state-management/index.md
diff --git a/hugo/content/lessons/ngxs-quick-start-angular-state-management/img/.gitkeep b/content/lessons/node-crypto-examples/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/ngxs-quick-start-angular-state-management/img/.gitkeep
rename to content/lessons/node-crypto-examples/img/.gitkeep
diff --git a/hugo/content/lessons/node-crypto-examples/img/asymmetric-encryption.png b/content/lessons/node-crypto-examples/img/asymmetric-encryption.png
similarity index 100%
rename from hugo/content/lessons/node-crypto-examples/img/asymmetric-encryption.png
rename to content/lessons/node-crypto-examples/img/asymmetric-encryption.png
diff --git a/hugo/content/lessons/node-crypto-examples/img/featured.jpg b/content/lessons/node-crypto-examples/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/node-crypto-examples/img/featured.jpg
rename to content/lessons/node-crypto-examples/img/featured.jpg
diff --git a/hugo/content/lessons/node-crypto-examples/img/featured.png b/content/lessons/node-crypto-examples/img/featured.png
similarity index 100%
rename from hugo/content/lessons/node-crypto-examples/img/featured.png
rename to content/lessons/node-crypto-examples/img/featured.png
diff --git a/hugo/content/lessons/node-crypto-examples/img/featured.webp b/content/lessons/node-crypto-examples/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/node-crypto-examples/img/featured.webp
rename to content/lessons/node-crypto-examples/img/featured.webp
diff --git a/hugo/content/lessons/node-crypto-examples/img/hash.png b/content/lessons/node-crypto-examples/img/hash.png
similarity index 100%
rename from hugo/content/lessons/node-crypto-examples/img/hash.png
rename to content/lessons/node-crypto-examples/img/hash.png
diff --git a/hugo/content/lessons/node-crypto-examples/img/hmac.png b/content/lessons/node-crypto-examples/img/hmac.png
similarity index 100%
rename from hugo/content/lessons/node-crypto-examples/img/hmac.png
rename to content/lessons/node-crypto-examples/img/hmac.png
diff --git a/hugo/content/lessons/node-crypto-examples/img/keypairs.png b/content/lessons/node-crypto-examples/img/keypairs.png
similarity index 100%
rename from hugo/content/lessons/node-crypto-examples/img/keypairs.png
rename to content/lessons/node-crypto-examples/img/keypairs.png
diff --git a/hugo/content/lessons/node-crypto-examples/img/salt.png b/content/lessons/node-crypto-examples/img/salt.png
similarity index 100%
rename from hugo/content/lessons/node-crypto-examples/img/salt.png
rename to content/lessons/node-crypto-examples/img/salt.png
diff --git a/hugo/content/lessons/node-crypto-examples/img/signing.png b/content/lessons/node-crypto-examples/img/signing.png
similarity index 100%
rename from hugo/content/lessons/node-crypto-examples/img/signing.png
rename to content/lessons/node-crypto-examples/img/signing.png
diff --git a/hugo/content/lessons/node-crypto-examples/img/symmetric-encryption.png b/content/lessons/node-crypto-examples/img/symmetric-encryption.png
similarity index 100%
rename from hugo/content/lessons/node-crypto-examples/img/symmetric-encryption.png
rename to content/lessons/node-crypto-examples/img/symmetric-encryption.png
diff --git a/hugo/content/lessons/node-crypto-examples/index.md b/content/lessons/node-crypto-examples/index.md
similarity index 100%
rename from hugo/content/lessons/node-crypto-examples/index.md
rename to content/lessons/node-crypto-examples/index.md
diff --git a/hugo/content/lessons/node-crypto-examples/img/.gitkeep b/content/lessons/nuxt-3-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/node-crypto-examples/img/.gitkeep
rename to content/lessons/nuxt-3-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/nuxt-3-firebase/img/featured.jpg b/content/lessons/nuxt-3-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/nuxt-3-firebase/img/featured.jpg
rename to content/lessons/nuxt-3-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/nuxt-3-firebase/img/featured.png b/content/lessons/nuxt-3-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/nuxt-3-firebase/img/featured.png
rename to content/lessons/nuxt-3-firebase/img/featured.png
diff --git a/hugo/content/lessons/nuxt-3-firebase/img/featured.webp b/content/lessons/nuxt-3-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/nuxt-3-firebase/img/featured.webp
rename to content/lessons/nuxt-3-firebase/img/featured.webp
diff --git a/hugo/content/lessons/nuxt-3-firebase/img/service-account.png b/content/lessons/nuxt-3-firebase/img/service-account.png
similarity index 100%
rename from hugo/content/lessons/nuxt-3-firebase/img/service-account.png
rename to content/lessons/nuxt-3-firebase/img/service-account.png
diff --git a/content/lessons/nuxt-3-firebase/index.md b/content/lessons/nuxt-3-firebase/index.md
new file mode 100644
index 000000000..95d6fc9e4
--- /dev/null
+++ b/content/lessons/nuxt-3-firebase/index.md
@@ -0,0 +1,172 @@
+---
+title: Realtime SSR with Nuxt3 and Firebase
+lastmod: 2022-04-28T12:14:10-07:00
+publishdate: 2022-04-28T12:14:10-07:00
+author: Jeff Delaney
+draft: false
+description: How to setup Firebase v9 for SSR and realtime hydration in Nuxt3
+tags:
+ - vue
+ - nuxt
+ - firebase
+
+# youtube:
+github: https://github.com/fireship-io/nuxt3-firebase-starter
+vimeo: 704385496
+pro: true
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+Nuxt3 hit release candidate [recently](https://nuxtjs.org/announcements/nuxt3-rc/) with a variety of awesome new features. But you might be wondering... how do I use Nuxt3 with Firebase? There is no documented best practice as of today, so I put together a demo that is capable of server-side rendering (SSR) via Firestore, followed by hydration to secure realtime data on the client. This gives a website the benefits SEO-friendly HTML, without sacrificing the power the realtime data updates after the initial page load.
+
+## Initial Setup
+
+To get started, you will need a Firebase project then generate a new Nuxt app.
+
+{{< file "terminal" "command line" >}}
+```bash
+npx nuxi init nuxt-app
+cd nuxt-app
+
+npm install firebase firebase-admin
+```
+
+## Server-Side Rendering
+
+The [Firebase Admin SDK](https://firebase.google.com/docs/reference/admin) is the preferred way to run Firebase server-side. In your Nuxt project, create the following files:
+
+```bash
+/server/api/animal.js
+/server/utils/firebase.js
+```
+### Initialize Firebase Admin
+
+Firebase Admin requires us to authenticate the server. Download your service account from the Firebase console and save it as `service-account.json` in the root of the project. ⚠ Keep this file secret!
+
+{{< figure src="img/service-account.png" >}}
+
+Now install the Firebase Admin SDK and export Firestore.
+
+
+{{< file "ts" "server/utils/firebase.ts" >}}
+```typescript
+import { initializeApp, cert } from 'firebase-admin/app';
+import { getFirestore } from 'firebase-admin/firestore';
+
+export const app = initializeApp({
+ credential: cert('./service-account.json'),
+})
+
+export const firestore = getFirestore();
+```
+
+### Firestore API Route
+
+Create an API route to fetch data from Firestore and make it accessible over HTTP.
+
+{{< file "ts" "server/api/animal.ts" >}}
+```typescript
+import { firestore } from '../utils/firebase';
+
+export default defineEventHandler(async event => {
+ const ref = firestore.doc(`animals/dog`);
+ const snapshot = await ref.get();
+ const data = snapshot.data();
+ return data;
+})
+```
+
+### Fetch Data via Page
+
+Now create a Vue component or page to fetch the data and display it in the UI.
+
+{{< file "vue" "pages/animal.vue" >}}
+```html
+
+
+
+
+
Server
+
{{ serverData }}
+
+```
+
+## Client-Side Hydration
+
+At this point, we are able to fetch data from the server, but it will not respond to realtime updates. To add a realtime listener, we need to initialize the Firebase Web SDK and hydrate the data.
+
+Note: This process results in 2 document reads on the initial page load.
+
+### Initialize the Firebase Web SDK
+
+Grab the Firebase web config, then create a composable to access Firebase from a Vue component.
+
+{{< file "ts" "composables/useFirebase.ts" >}}
+```typescript
+import { initializeApp } from "firebase/app";
+import { getFirestore } from "firebase/firestore";
+
+export const useFirebase = () => {
+ const firebaseConfig = {
+ // your config
+ };
+
+ const firebaseApp = initializeApp(firebaseConfig);
+ const firestore = getFirestore(firebaseApp);
+
+ return {
+ firebaseApp,
+ firestore,
+ }
+}
+```
+
+### Hydrate Realtime Data
+
+When the client loads, the app needs to refetch the same data and listen to changes with `onSnapshot`. It's important to **only run Firebase Web code on the client** by placing it inside the `onMounted` lifecycle hook on inside a function.
+
+{{< file "js" "pages/animal.vue" >}}
+```html
+
+
+
+
+
Data
+
{{ data }}
+
Update dog
+
+```
\ No newline at end of file
diff --git a/hugo/content/lessons/nuxt-3-firebase/img/.gitkeep b/content/lessons/object-oriented-programming-with-typescript/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/nuxt-3-firebase/img/.gitkeep
rename to content/lessons/object-oriented-programming-with-typescript/img/.gitkeep
diff --git a/hugo/content/lessons/object-oriented-programming-with-typescript/img/featured.jpg b/content/lessons/object-oriented-programming-with-typescript/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/object-oriented-programming-with-typescript/img/featured.jpg
rename to content/lessons/object-oriented-programming-with-typescript/img/featured.jpg
diff --git a/hugo/content/lessons/object-oriented-programming-with-typescript/img/featured.png b/content/lessons/object-oriented-programming-with-typescript/img/featured.png
similarity index 100%
rename from hugo/content/lessons/object-oriented-programming-with-typescript/img/featured.png
rename to content/lessons/object-oriented-programming-with-typescript/img/featured.png
diff --git a/hugo/content/lessons/object-oriented-programming-with-typescript/img/featured.webp b/content/lessons/object-oriented-programming-with-typescript/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/object-oriented-programming-with-typescript/img/featured.webp
rename to content/lessons/object-oriented-programming-with-typescript/img/featured.webp
diff --git a/hugo/content/lessons/object-oriented-programming-with-typescript/index.md b/content/lessons/object-oriented-programming-with-typescript/index.md
similarity index 100%
rename from hugo/content/lessons/object-oriented-programming-with-typescript/index.md
rename to content/lessons/object-oriented-programming-with-typescript/index.md
diff --git a/hugo/content/lessons/object-oriented-programming-with-typescript/img/.gitkeep b/content/lessons/paypal-checkout-frontend/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/object-oriented-programming-with-typescript/img/.gitkeep
rename to content/lessons/paypal-checkout-frontend/img/.gitkeep
diff --git a/hugo/content/lessons/paypal-checkout-frontend/img/Frame 2.32.png b/content/lessons/paypal-checkout-frontend/img/Frame 2.32.png
similarity index 100%
rename from hugo/content/lessons/paypal-checkout-frontend/img/Frame 2.32.png
rename to content/lessons/paypal-checkout-frontend/img/Frame 2.32.png
diff --git a/hugo/content/lessons/paypal-checkout-frontend/img/featured.jpg b/content/lessons/paypal-checkout-frontend/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/paypal-checkout-frontend/img/featured.jpg
rename to content/lessons/paypal-checkout-frontend/img/featured.jpg
diff --git a/hugo/content/lessons/paypal-checkout-frontend/img/featured.png b/content/lessons/paypal-checkout-frontend/img/featured.png
similarity index 100%
rename from hugo/content/lessons/paypal-checkout-frontend/img/featured.png
rename to content/lessons/paypal-checkout-frontend/img/featured.png
diff --git a/hugo/content/lessons/paypal-checkout-frontend/img/featured.webp b/content/lessons/paypal-checkout-frontend/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/paypal-checkout-frontend/img/featured.webp
rename to content/lessons/paypal-checkout-frontend/img/featured.webp
diff --git a/hugo/content/lessons/paypal-checkout-frontend/img/paypal-api-credentials.png b/content/lessons/paypal-checkout-frontend/img/paypal-api-credentials.png
similarity index 100%
rename from hugo/content/lessons/paypal-checkout-frontend/img/paypal-api-credentials.png
rename to content/lessons/paypal-checkout-frontend/img/paypal-api-credentials.png
diff --git a/hugo/content/lessons/paypal-checkout-frontend/img/paypal-mock-account.png b/content/lessons/paypal-checkout-frontend/img/paypal-mock-account.png
similarity index 100%
rename from hugo/content/lessons/paypal-checkout-frontend/img/paypal-mock-account.png
rename to content/lessons/paypal-checkout-frontend/img/paypal-mock-account.png
diff --git a/hugo/content/lessons/paypal-checkout-frontend/img/paypal-mock-account2.PNG b/content/lessons/paypal-checkout-frontend/img/paypal-mock-account2.PNG
similarity index 100%
rename from hugo/content/lessons/paypal-checkout-frontend/img/paypal-mock-account2.PNG
rename to content/lessons/paypal-checkout-frontend/img/paypal-mock-account2.PNG
diff --git a/content/lessons/paypal-checkout-frontend/index.md b/content/lessons/paypal-checkout-frontend/index.md
new file mode 100644
index 000000000..752f1bc4a
--- /dev/null
+++ b/content/lessons/paypal-checkout-frontend/index.md
@@ -0,0 +1,341 @@
+---
+title: PayPal Checkout
+lastmod: 2019-06-23T06:44:00-07:00
+publishdate: 2019-06-23T06:44:00-07:00
+author: Jeff Delaney
+draft: false
+description: Accept PayPal Checkout payments with Angular, React, or Vue
+tags:
+ - angular
+ - react
+ - vue
+ - payments
+ - paypal
+
+youtube: AtZGoueL4Vs
+github: https://github.com/fireship-io/193-paypal-checkout-v2-demos
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+In February 2019, the PayPal Checkout API received a much needed [facelift](https://medium.com/paypal-engineering/launch-v2-paypal-checkout-apis-45435398b987) that brought massive improvements to the developer experience. The new [v2 API](https://developer.paypal.com/docs/api/overview/) has detailed documentation on par with [Stripe](/tags/stripe) and offers one of the smoothest paths to start accepting payments and/or subscriptions in a progressive web app. The following lesson will show you how to start accepting payments entirely from your frontend JavaScript code with PayPal Checkout with your choice of Angular, React, and Vue.
+
+
+If you're looking to implement a fullstack payment solution, check out the [Stripe Payments Master Course](/courses/stripe). Ironically, you can pay for it with PayPal if you prefer 🤷. Both PayPal and Stripe share similar APIs, so concepts from the course overlap both APIs.
+
+
+## Live Demo
+
+The button below is the actual *live* implementation used for Fireship (Angular Elements). Try it 👇
+
+
+
Buy this Couch - ${{ product.price }} OBO
+
+
+
+
Yay, you bought a sweet couch!
+
+
+
+
+```
+
+
+{{< file "ngts" "some.component.ts" >}}
+```typescript
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
+
+declare var paypal;
+
+@Component({
+ selector: 'app-payme',
+ templateUrl: './payme.component.html',
+ styleUrls: ['./payme.component.css']
+})
+export class PaymeComponent implements OnInit {
+ @ViewChild('paypal', { static: true }) paypalElement: ElementRef;
+
+ product = {
+ price: 777.77,
+ description: 'used couch, decent condition',
+ img: 'assets/couch.jpg'
+ };
+
+ paidFor = false;
+
+ ngOnInit() {
+ paypal
+ .Buttons({
+ createOrder: (data, actions) => {
+ return actions.order.create({
+ purchase_units: [
+ {
+ description: this.product.description,
+ amount: {
+ currency_code: 'USD',
+ value: this.product.price
+ }
+ }
+ ]
+ });
+ },
+ onApprove: async (data, actions) => {
+ const order = await actions.order.capture();
+ this.paidFor = true;
+ console.log(order);
+ },
+ onError: err => {
+ console.log(err);
+ }
+ })
+ .render(this.paypalElement.nativeElement);
+ }
+}
+
+```
+
+## React
+
+The react implementation takes advantage of Hooks to manage state and initialize the PayPal script tag.
+
+### Generate the App
+
+Create a new [React](https://reactjs.org/) project with create-react-app.
+{{< file "terminal" "command line" >}}
+```text
+npx create-react-app my-app
+```
+
+### Payment Component
+
+{{< file "js" "App.js" >}}
+```jsx
+import './App.css';
+import React, { useState, useRef, useEffect } from 'react';
+
+function Product({ product }) {
+ const [paidFor, setPaidFor] = useState(false);
+ const [error, setError] = useState(null);
+ const paypalRef = useRef();
+
+ useEffect(() => {
+ window.paypal
+ .Buttons({
+ createOrder: (data, actions) => {
+ return actions.order.create({
+ purchase_units: [
+ {
+ description: product.description,
+ amount: {
+ currency_code: 'USD',
+ value: product.price,
+ },
+ },
+ ],
+ });
+ },
+ onApprove: async (data, actions) => {
+ const order = await actions.order.capture();
+ setPaidFor(true);
+ console.log(order);
+ },
+ onError: err => {
+ setError(err);
+ console.error(err);
+ },
+ })
+ .render(paypalRef.current);
+ }, [product.description, product.price]);
+
+ if (paidFor) {
+ return (
+
+
Congrats, you just bought {product.name}!
+
+
+ {error &&
Uh oh, an error occurred! {error.message}
}
+
+ {product.description} for ${product.price}
+
+
+
+
+
+
Buy this Lamp - ${{ product.price }} OBO
+
+
{{ product.description }}
+
+
+
+
+
Noice, you bought a beautiful lamp!
+
+
+
+
+
+
+```
+
+
+
+
diff --git a/hugo/content/lessons/paypal-checkout-frontend/img/.gitkeep b/content/lessons/push-messages-with-firestore/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/paypal-checkout-frontend/img/.gitkeep
rename to content/lessons/push-messages-with-firestore/img/.gitkeep
diff --git a/hugo/content/lessons/push-messages-with-firestore/img/fcm-demo-angular.gif b/content/lessons/push-messages-with-firestore/img/fcm-demo-angular.gif
similarity index 100%
rename from hugo/content/lessons/push-messages-with-firestore/img/fcm-demo-angular.gif
rename to content/lessons/push-messages-with-firestore/img/fcm-demo-angular.gif
diff --git a/hugo/content/lessons/push-messages-with-firestore/img/fcm-demo-angular5.gif b/content/lessons/push-messages-with-firestore/img/fcm-demo-angular5.gif
similarity index 100%
rename from hugo/content/lessons/push-messages-with-firestore/img/fcm-demo-angular5.gif
rename to content/lessons/push-messages-with-firestore/img/fcm-demo-angular5.gif
diff --git a/hugo/content/lessons/push-messages-with-firestore/img/featured.jpg b/content/lessons/push-messages-with-firestore/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/push-messages-with-firestore/img/featured.jpg
rename to content/lessons/push-messages-with-firestore/img/featured.jpg
diff --git a/hugo/content/lessons/push-messages-with-firestore/img/featured.png b/content/lessons/push-messages-with-firestore/img/featured.png
similarity index 100%
rename from hugo/content/lessons/push-messages-with-firestore/img/featured.png
rename to content/lessons/push-messages-with-firestore/img/featured.png
diff --git a/hugo/content/lessons/push-messages-with-firestore/img/featured.webp b/content/lessons/push-messages-with-firestore/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/push-messages-with-firestore/img/featured.webp
rename to content/lessons/push-messages-with-firestore/img/featured.webp
diff --git a/hugo/content/lessons/push-messages-with-firestore/index.md b/content/lessons/push-messages-with-firestore/index.md
similarity index 100%
rename from hugo/content/lessons/push-messages-with-firestore/index.md
rename to content/lessons/push-messages-with-firestore/index.md
diff --git a/hugo/content/lessons/push-messages-with-firestore/img/.gitkeep b/content/lessons/pwa-performance-optimization-angular/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/push-messages-with-firestore/img/.gitkeep
rename to content/lessons/pwa-performance-optimization-angular/img/.gitkeep
diff --git a/hugo/content/lessons/pwa-performance-optimization-angular/img/bundle-analysis1.png b/content/lessons/pwa-performance-optimization-angular/img/bundle-analysis1.png
similarity index 100%
rename from hugo/content/lessons/pwa-performance-optimization-angular/img/bundle-analysis1.png
rename to content/lessons/pwa-performance-optimization-angular/img/bundle-analysis1.png
diff --git a/hugo/content/lessons/pwa-performance-optimization-angular/img/bundle-analysis2.png b/content/lessons/pwa-performance-optimization-angular/img/bundle-analysis2.png
similarity index 100%
rename from hugo/content/lessons/pwa-performance-optimization-angular/img/bundle-analysis2.png
rename to content/lessons/pwa-performance-optimization-angular/img/bundle-analysis2.png
diff --git a/hugo/content/lessons/pwa-performance-optimization-angular/img/featured.jpg b/content/lessons/pwa-performance-optimization-angular/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/pwa-performance-optimization-angular/img/featured.jpg
rename to content/lessons/pwa-performance-optimization-angular/img/featured.jpg
diff --git a/hugo/content/lessons/pwa-performance-optimization-angular/img/featured.png b/content/lessons/pwa-performance-optimization-angular/img/featured.png
similarity index 100%
rename from hugo/content/lessons/pwa-performance-optimization-angular/img/featured.png
rename to content/lessons/pwa-performance-optimization-angular/img/featured.png
diff --git a/hugo/content/lessons/pwa-performance-optimization-angular/img/featured.webp b/content/lessons/pwa-performance-optimization-angular/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/pwa-performance-optimization-angular/img/featured.webp
rename to content/lessons/pwa-performance-optimization-angular/img/featured.webp
diff --git a/hugo/content/lessons/pwa-performance-optimization-angular/img/prpl-angular-pwa-01.png b/content/lessons/pwa-performance-optimization-angular/img/prpl-angular-pwa-01.png
similarity index 100%
rename from hugo/content/lessons/pwa-performance-optimization-angular/img/prpl-angular-pwa-01.png
rename to content/lessons/pwa-performance-optimization-angular/img/prpl-angular-pwa-01.png
diff --git a/hugo/content/lessons/pwa-performance-optimization-angular/img/waterfall-pwa.png b/content/lessons/pwa-performance-optimization-angular/img/waterfall-pwa.png
similarity index 100%
rename from hugo/content/lessons/pwa-performance-optimization-angular/img/waterfall-pwa.png
rename to content/lessons/pwa-performance-optimization-angular/img/waterfall-pwa.png
diff --git a/hugo/content/lessons/pwa-performance-optimization-angular/img/website-grader.png b/content/lessons/pwa-performance-optimization-angular/img/website-grader.png
similarity index 100%
rename from hugo/content/lessons/pwa-performance-optimization-angular/img/website-grader.png
rename to content/lessons/pwa-performance-optimization-angular/img/website-grader.png
diff --git a/hugo/content/lessons/pwa-performance-optimization-angular/index.md b/content/lessons/pwa-performance-optimization-angular/index.md
similarity index 100%
rename from hugo/content/lessons/pwa-performance-optimization-angular/index.md
rename to content/lessons/pwa-performance-optimization-angular/index.md
diff --git a/hugo/content/lessons/pwa-performance-optimization-angular/img/.gitkeep b/content/lessons/pwa-to-play-store/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/pwa-performance-optimization-angular/img/.gitkeep
rename to content/lessons/pwa-to-play-store/img/.gitkeep
diff --git a/hugo/content/lessons/pwa-to-play-store/img/android-studio.png b/content/lessons/pwa-to-play-store/img/android-studio.png
similarity index 100%
rename from hugo/content/lessons/pwa-to-play-store/img/android-studio.png
rename to content/lessons/pwa-to-play-store/img/android-studio.png
diff --git a/hugo/content/lessons/pwa-to-play-store/img/android-test-track.png b/content/lessons/pwa-to-play-store/img/android-test-track.png
similarity index 100%
rename from hugo/content/lessons/pwa-to-play-store/img/android-test-track.png
rename to content/lessons/pwa-to-play-store/img/android-test-track.png
diff --git a/hugo/content/lessons/pwa-to-play-store/img/create-keystore.png b/content/lessons/pwa-to-play-store/img/create-keystore.png
similarity index 100%
rename from hugo/content/lessons/pwa-to-play-store/img/create-keystore.png
rename to content/lessons/pwa-to-play-store/img/create-keystore.png
diff --git a/hugo/content/lessons/pwa-to-play-store/img/featured.jpg b/content/lessons/pwa-to-play-store/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/pwa-to-play-store/img/featured.jpg
rename to content/lessons/pwa-to-play-store/img/featured.jpg
diff --git a/hugo/content/lessons/pwa-to-play-store/img/featured.png b/content/lessons/pwa-to-play-store/img/featured.png
similarity index 100%
rename from hugo/content/lessons/pwa-to-play-store/img/featured.png
rename to content/lessons/pwa-to-play-store/img/featured.png
diff --git a/hugo/content/lessons/pwa-to-play-store/img/featured.webp b/content/lessons/pwa-to-play-store/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/pwa-to-play-store/img/featured.webp
rename to content/lessons/pwa-to-play-store/img/featured.webp
diff --git a/hugo/content/lessons/pwa-to-play-store/img/google-play-store-listing.png b/content/lessons/pwa-to-play-store/img/google-play-store-listing.png
similarity index 100%
rename from hugo/content/lessons/pwa-to-play-store/img/google-play-store-listing.png
rename to content/lessons/pwa-to-play-store/img/google-play-store-listing.png
diff --git a/hugo/content/lessons/pwa-to-play-store/img/googleplay-badge.png b/content/lessons/pwa-to-play-store/img/googleplay-badge.png
similarity index 100%
rename from hugo/content/lessons/pwa-to-play-store/img/googleplay-badge.png
rename to content/lessons/pwa-to-play-store/img/googleplay-badge.png
diff --git a/hugo/content/lessons/pwa-to-play-store/img/lighthouse-twa.png b/content/lessons/pwa-to-play-store/img/lighthouse-twa.png
similarity index 100%
rename from hugo/content/lessons/pwa-to-play-store/img/lighthouse-twa.png
rename to content/lessons/pwa-to-play-store/img/lighthouse-twa.png
diff --git a/hugo/content/lessons/pwa-to-play-store/img/sha256-signing.png b/content/lessons/pwa-to-play-store/img/sha256-signing.png
similarity index 100%
rename from hugo/content/lessons/pwa-to-play-store/img/sha256-signing.png
rename to content/lessons/pwa-to-play-store/img/sha256-signing.png
diff --git a/hugo/content/lessons/pwa-to-play-store/img/signed-apk.png b/content/lessons/pwa-to-play-store/img/signed-apk.png
similarity index 100%
rename from hugo/content/lessons/pwa-to-play-store/img/signed-apk.png
rename to content/lessons/pwa-to-play-store/img/signed-apk.png
diff --git a/hugo/content/lessons/pwa-to-play-store/img/well-known-asset.png b/content/lessons/pwa-to-play-store/img/well-known-asset.png
similarity index 100%
rename from hugo/content/lessons/pwa-to-play-store/img/well-known-asset.png
rename to content/lessons/pwa-to-play-store/img/well-known-asset.png
diff --git a/content/lessons/pwa-to-play-store/index.md b/content/lessons/pwa-to-play-store/index.md
new file mode 100644
index 000000000..27e0dd935
--- /dev/null
+++ b/content/lessons/pwa-to-play-store/index.md
@@ -0,0 +1,207 @@
+---
+title: Trusted Web Activity - PWA to Play Store Guide
+lastmod: 2019-02-20T10:27:58-07:00
+publishdate: 2019-02-20T10:27:58-07:00
+author: Jeff Delaney
+draft: false
+description: A step-by-step guide for publishing your PWA as a native app in the Google Play Store via a trusted web activity (TWA).
+tags:
+ - pwa
+ - twa
+ - android
+ - javascript
+
+youtube: 7JDFjeMvxos
+github: https://github.com/fireship-io/169-pwa-trusted-web-activity
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+versions:
+ chrome: 72
+---
+
+Web developers already have a variety of interesting options for using JavaScript to write native mobile apps with tools like React Native, Cordova/Ionic, NativeScript, just to name a few. I've spent many hours brainstorming with clients on this topic and recently summed up my thoughts about [Hybrid App](https://itnext.io/should-you-use-ionic-4-fa04daebaffd) development, but there's a brand new strategy to add to the list... [Trusted Web Activities](https://developers.google.com/web/updates/2019/02/using-twa) (TWA). The following guide will show you how to covert any progressive web app to an Android App on the Google Play Store.
+
+{{< figure src="img/googleplay-badge.png" >}}
+
+Special thanks to Sven Budak for writing This TWA stuff rocks! Finally I got my PWA on Google Play Store .
+
+
+## Wait, what is a Trusted Web Activity?
+
+**TL;DR** A Trusted Web Activity allows Chrome (v72 or later) to run a website in fullscreen mode *without a browser toolbar* within an APK (Android Package).
+
+**How?** The underlying technology is based on the [Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) protocol, which is already used to embed web content within native apps. For example, you might click a link in the Twitter app, but never actually leave the app to view the content. A TWA allows a developer to verify ownership of first-party web content by uploading a special file called a trusted asset link to the hosting server. It can then be easily packaged for Android making it indistinguishable from a true native app and discoverable on the Play Store.
+
+**Why?** While this approach is very new on the scene, it offers a promising alternative to webview-based hybrid apps (Ionic/Cordova). Many hybrid apps are just PWAs wrapped up as a native package, but the webview environment is sandboxed, so TWAs offer the following benefits:
+
+- OAuth requests not blocked (this is awesome).
+- Always up-to-date content, no need to cut a new release when content changes.
+- Share cookies, local storage, saved settings and all PWA features with the preferred browser.
+
+But there are also some drawbacks that come to mind...
+
+- Unclear how to handle in-app purchases.
+- Cannot share Android Activities with TWAs on the same screen.
+
+I highly recommend watching the video below for a detailed overview of webviews versus TWAs:
+
+{{< youtube TCgT8dzSiU8 >}}
+
+## Step 0 - Prerequisites
+
+You're building a native mobile app so you need to think like an Android developer, but thankfully, you won't need to author any custom Java code.
+
+### Install Android Studio
+
+{{< figure src="img/android-studio.png" alt="install android studio on your system" >}}
+
+Install [Android Studio](https://developer.android.com/studio/) on your system.
+
+### Register a Google Play Developer Account
+
+Publishing an app on the Google Play Store means registering a [paid developer account](https://developer.android.com/distribute/). This will cost you $25.
+
+## Step 1 - Build a Progressive Web App
+
+You will need to build a web app that meets modern [PWA](https://developers.google.com/web/progressive-web-apps/checklist) standards. It's beyond the scope of this guide, but your web app must...
+
+- Be compliant with Google Play Policies
+- Be an installable PWA
+- Achieve a lighthouse performance of 80+
+- Recommended: Have a privacy policy
+
+If you have an existing app, it should produce results similar to those below when running in production.
+
+{{< figure src="img/lighthouse-twa.png" alt="lighthouse score of 80+ for TWA on Google Play store" >}}
+
+
+## Step 3 - Make it Native
+
+### Clone the TWA Starter Android App
+
+There are several modifcations that need to be made to the Android app to support a TWA, all of which are [well documented here](https://developers.google.com/web/updates/2019/02/using-twa#establish_an_association_from_the_website_to_the_app). However, an easier apporach is to just clone the repo for this lesson
+
+{{< file "terminal" "command line" >}}
+```text
+git clone https://github.com/fireship-io/169-pwa-trusted-web-activity.git twa
+cd twa
+```
+
+Go ahead and open this app in Android Studio and modify the values below based on your app config. The `applicationId` should follow a format of `..`.
+
+{{< file "gradle" "app/build.gradle" >}}
+```gradle
+android {
+ defaultConfig {
+ applicationId "io.fireship.app"
+ manifestPlaceholders = [
+ hostName: "fireship.io",
+ defaultUrl: "https://fireship.io",
+ launcherName: "Fireship",
+ assetStatements: '[{ "relation": ["delegate_permission/common.handle_all_urls"], ' +
+ '"target": {"namespace": "web", "site": "https://fireship.io"}}]'
+ ]
+ resValue "color", "colorPrimary", "#272838"
+ }
+ // omitted...
+}
+```
+
+
+### Obtain the SHA256 App Signing Certificate
+
+The next step is to [create a keystore](https://developer.android.com/studio/publish/app-signing#generate-key) and extract its SHA256 fingerprint. This is used to sign the APK release and verify ownership of your web content. Make note the alias and password - and do not forget the password!
+
+First, open Android Studio and create a keystore by navigating to *Build → Generate Signed Bundle/APK*.
+
+{{< figure src="img/create-keystore.png" alt="Create a keystore in Android Studio" >}}
+
+Then run the following command to extract the SHA256 fingerprint from the keystore you just created.
+
+{{< file "terminal" "command line" >}}
+```text
+keytool -list -v -keystore ~/my-keystore.ks -alias twa -storepass your-password -keypass your-password
+
+
+
+Entry type: PrivateKeyEntry
+...
+Certificate fingerprints:
+ SHA1: ...
+ SHA256: 2A:9B:A8:64:32:0A:69:99...: 👈 copy this line
+```
+
+## Step 3 - Setup the Digital Asset Link
+
+A digital asset link is how you verify ownership of your web content so it can be linked to the APK.
+
+### Generate the Digital Asset Statement File
+
+Take the SHA fingerprint from the previous step and generate a statement with the [digital asset links tool](https://developers.google.com/digital-asset-links/tools/generator).
+
+### Deploy to your Web Host
+
+Create a file that contains the contents from the digital asset tool that is publicly accessible from your PWA's web host at the following path: *.well-known/assetlinks.json*
+
+The correct location of this file is completely dependent on the build process of your web app, but the end result should be this file living in the deployed files, usually *public* or *dist*. Deploy your webapp when complete:
+
+{{< figure src="img/well-known-asset.png" alt="Well know asset deployed to firebase hosting" >}}
+
+{{< file "terminal" "command line" >}}
+```text
+firebase deploy --only hosting
+```
+
+
+
+## Step 4 - Build and Release on Google Play
+
+Go to the [Google Play Console](https://play.google.com/apps/) and click *All Applications → Create Application*
+
+### Create an Internal Release
+
+Now navigate to *App releases → Internal Test Track → Create release* and create the release track.
+
+{{< figure src="img/android-test-track.png" alt="Android test track streen" >}}
+
+### Build a Signed APK
+
+In Android Studio, go back to *Build → Generate Signed Bundle/APK* and use the same keystore we created earlier. Generate a signed release and make sure the checkboxes for both signature versions are selected.
+
+{{< figure src="img/signed-apk.png" alt="Signed APK" >}}
+
+### Upload the APK
+
+On the Google Play Store, upload your APK at *App Releases → Internal Test Track → Edit Release*, then review and roll-out. At this point you should see an error that *no testers are assigned yet*, this likely means you need to finish the store listing.
+
+### Complete the Store Listing
+
+{{< figure src="img/google-play-store-listing.png" alt="Update the store listing on google play" >}}
+
+You are must fill out ALL required information for the store listing, content rating, and pricing details. You should see four green checkmarks on the sidebar ✔️ when this process is complete. After you create the release, your app will be in *pending publication* status - just wait a few hours for it to be approved.
+
+And finally, you can install your app from the Play Store by using the opt-in URL under the *Manage testers* , then finish up the day a well-deserved refreshment 🍺.
+
+
+## The End
+
+That was a lot of small steps 😅 but this process will become more streamlined in the future. Let's recap the entire checklist
+
+1. Build a good PWA
+1. Install Android Studio
+1. Sign up for Google Play, pay $25
+1. Clone the Android TWA starter app
+1. Update app/build.gradle
+1. Create a keystore
+1. Create a digital asset link file and deploy it
+1. Generate a signed APK
+1. Create an Internal Track Release
+1. Upload the signed APK to Google play
+1. Finish the Google Play Store Listing
+1. Release and wait
+
+
diff --git a/hugo/content/lessons/pwa-to-play-store/img/.gitkeep b/content/lessons/pwa-top-features/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/pwa-to-play-store/img/.gitkeep
rename to content/lessons/pwa-top-features/img/.gitkeep
diff --git a/hugo/content/lessons/pwa-top-features/img/featured.jpg b/content/lessons/pwa-top-features/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/pwa-top-features/img/featured.jpg
rename to content/lessons/pwa-top-features/img/featured.jpg
diff --git a/hugo/content/lessons/pwa-top-features/img/featured.png b/content/lessons/pwa-top-features/img/featured.png
similarity index 100%
rename from hugo/content/lessons/pwa-top-features/img/featured.png
rename to content/lessons/pwa-top-features/img/featured.png
diff --git a/hugo/content/lessons/pwa-top-features/img/featured.webp b/content/lessons/pwa-top-features/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/pwa-top-features/img/featured.webp
rename to content/lessons/pwa-top-features/img/featured.webp
diff --git a/hugo/content/lessons/pwa-top-features/index.md b/content/lessons/pwa-top-features/index.md
similarity index 100%
rename from hugo/content/lessons/pwa-top-features/index.md
rename to content/lessons/pwa-top-features/index.md
diff --git a/hugo/content/lessons/pwa-top-features/img/.gitkeep b/content/lessons/react-firebase-chat-app-tutorial/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/pwa-top-features/img/.gitkeep
rename to content/lessons/react-firebase-chat-app-tutorial/img/.gitkeep
diff --git a/hugo/content/lessons/react-firebase-chat-app-tutorial/img/banned-firestore.png b/content/lessons/react-firebase-chat-app-tutorial/img/banned-firestore.png
similarity index 100%
rename from hugo/content/lessons/react-firebase-chat-app-tutorial/img/banned-firestore.png
rename to content/lessons/react-firebase-chat-app-tutorial/img/banned-firestore.png
diff --git a/hugo/content/lessons/react-firebase-chat-app-tutorial/img/featured.jpg b/content/lessons/react-firebase-chat-app-tutorial/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/react-firebase-chat-app-tutorial/img/featured.jpg
rename to content/lessons/react-firebase-chat-app-tutorial/img/featured.jpg
diff --git a/hugo/content/lessons/react-firebase-chat-app-tutorial/img/featured.png b/content/lessons/react-firebase-chat-app-tutorial/img/featured.png
similarity index 100%
rename from hugo/content/lessons/react-firebase-chat-app-tutorial/img/featured.png
rename to content/lessons/react-firebase-chat-app-tutorial/img/featured.png
diff --git a/hugo/content/lessons/react-firebase-chat-app-tutorial/img/featured.webp b/content/lessons/react-firebase-chat-app-tutorial/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/react-firebase-chat-app-tutorial/img/featured.webp
rename to content/lessons/react-firebase-chat-app-tutorial/img/featured.webp
diff --git a/hugo/content/lessons/react-firebase-chat-app-tutorial/img/react-firebase-chat.png b/content/lessons/react-firebase-chat-app-tutorial/img/react-firebase-chat.png
similarity index 100%
rename from hugo/content/lessons/react-firebase-chat-app-tutorial/img/react-firebase-chat.png
rename to content/lessons/react-firebase-chat-app-tutorial/img/react-firebase-chat.png
diff --git a/hugo/content/lessons/react-firebase-chat-app-tutorial/index.md b/content/lessons/react-firebase-chat-app-tutorial/index.md
similarity index 100%
rename from hugo/content/lessons/react-firebase-chat-app-tutorial/index.md
rename to content/lessons/react-firebase-chat-app-tutorial/index.md
diff --git a/hugo/content/lessons/react-firebase-chat-app-tutorial/img/.gitkeep b/content/lessons/react-native-firebase-chat-demo/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/react-firebase-chat-app-tutorial/img/.gitkeep
rename to content/lessons/react-native-firebase-chat-demo/img/.gitkeep
diff --git a/hugo/content/lessons/react-native-firebase-chat-demo/img/data-model.png b/content/lessons/react-native-firebase-chat-demo/img/data-model.png
similarity index 100%
rename from hugo/content/lessons/react-native-firebase-chat-demo/img/data-model.png
rename to content/lessons/react-native-firebase-chat-demo/img/data-model.png
diff --git a/hugo/content/lessons/react-native-firebase-chat-demo/img/featured.jpg b/content/lessons/react-native-firebase-chat-demo/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/react-native-firebase-chat-demo/img/featured.jpg
rename to content/lessons/react-native-firebase-chat-demo/img/featured.jpg
diff --git a/hugo/content/lessons/react-native-firebase-chat-demo/img/featured.png b/content/lessons/react-native-firebase-chat-demo/img/featured.png
similarity index 100%
rename from hugo/content/lessons/react-native-firebase-chat-demo/img/featured.png
rename to content/lessons/react-native-firebase-chat-demo/img/featured.png
diff --git a/hugo/content/lessons/react-native-firebase-chat-demo/img/featured.webp b/content/lessons/react-native-firebase-chat-demo/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/react-native-firebase-chat-demo/img/featured.webp
rename to content/lessons/react-native-firebase-chat-demo/img/featured.webp
diff --git a/hugo/content/lessons/react-native-firebase-chat-demo/index.md b/content/lessons/react-native-firebase-chat-demo/index.md
similarity index 100%
rename from hugo/content/lessons/react-native-firebase-chat-demo/index.md
rename to content/lessons/react-native-firebase-chat-demo/index.md
diff --git a/hugo/content/lessons/react-native-firebase-chat-demo/img/.gitkeep b/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/react-native-firebase-chat-demo/img/.gitkeep
rename to content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/.gitkeep
diff --git a/hugo/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/demo.png b/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/demo.png
similarity index 100%
rename from hugo/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/demo.png
rename to content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/demo.png
diff --git a/hugo/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/featured.jpg b/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/featured.jpg
rename to content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/featured.jpg
diff --git a/hugo/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/featured.png b/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/featured.png
similarity index 100%
rename from hugo/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/featured.png
rename to content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/featured.png
diff --git a/hugo/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/featured.webp b/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/featured.webp
rename to content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/featured.webp
diff --git a/hugo/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/index.md b/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/index.md
similarity index 100%
rename from hugo/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/index.md
rename to content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/index.md
diff --git a/hugo/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/.gitkeep b/content/lessons/realtime-charts-d3-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/reactive-crud-app-with-angular-and-firebase-tutorial/img/.gitkeep
rename to content/lessons/realtime-charts-d3-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/realtime-charts-d3-firebase/img/d3-firestore-chart.png b/content/lessons/realtime-charts-d3-firebase/img/d3-firestore-chart.png
similarity index 100%
rename from hugo/content/lessons/realtime-charts-d3-firebase/img/d3-firestore-chart.png
rename to content/lessons/realtime-charts-d3-firebase/img/d3-firestore-chart.png
diff --git a/hugo/content/lessons/realtime-charts-d3-firebase/img/featured.jpg b/content/lessons/realtime-charts-d3-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/realtime-charts-d3-firebase/img/featured.jpg
rename to content/lessons/realtime-charts-d3-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/realtime-charts-d3-firebase/img/featured.png b/content/lessons/realtime-charts-d3-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/realtime-charts-d3-firebase/img/featured.png
rename to content/lessons/realtime-charts-d3-firebase/img/featured.png
diff --git a/hugo/content/lessons/realtime-charts-d3-firebase/img/featured.webp b/content/lessons/realtime-charts-d3-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/realtime-charts-d3-firebase/img/featured.webp
rename to content/lessons/realtime-charts-d3-firebase/img/featured.webp
diff --git a/hugo/content/lessons/realtime-charts-d3-firebase/index.md b/content/lessons/realtime-charts-d3-firebase/index.md
similarity index 100%
rename from hugo/content/lessons/realtime-charts-d3-firebase/index.md
rename to content/lessons/realtime-charts-d3-firebase/index.md
diff --git a/hugo/content/lessons/realtime-charts-d3-firebase/img/.gitkeep b/content/lessons/realtime-presence-angular-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/realtime-charts-d3-firebase/img/.gitkeep
rename to content/lessons/realtime-presence-angular-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/realtime-presence-angular-firebase/img/featured.jpg b/content/lessons/realtime-presence-angular-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/realtime-presence-angular-firebase/img/featured.jpg
rename to content/lessons/realtime-presence-angular-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/realtime-presence-angular-firebase/img/featured.png b/content/lessons/realtime-presence-angular-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/realtime-presence-angular-firebase/img/featured.png
rename to content/lessons/realtime-presence-angular-firebase/img/featured.png
diff --git a/hugo/content/lessons/realtime-presence-angular-firebase/img/featured.webp b/content/lessons/realtime-presence-angular-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/realtime-presence-angular-firebase/img/featured.webp
rename to content/lessons/realtime-presence-angular-firebase/img/featured.webp
diff --git a/hugo/content/lessons/realtime-presence-angular-firebase/img/presence-demo.gif b/content/lessons/realtime-presence-angular-firebase/img/presence-demo.gif
similarity index 100%
rename from hugo/content/lessons/realtime-presence-angular-firebase/img/presence-demo.gif
rename to content/lessons/realtime-presence-angular-firebase/img/presence-demo.gif
diff --git a/hugo/content/lessons/realtime-presence-angular-firebase/img/rtdb-presence.png b/content/lessons/realtime-presence-angular-firebase/img/rtdb-presence.png
similarity index 100%
rename from hugo/content/lessons/realtime-presence-angular-firebase/img/rtdb-presence.png
rename to content/lessons/realtime-presence-angular-firebase/img/rtdb-presence.png
diff --git a/content/lessons/realtime-presence-angular-firebase/index.md b/content/lessons/realtime-presence-angular-firebase/index.md
new file mode 100644
index 000000000..333a72de8
--- /dev/null
+++ b/content/lessons/realtime-presence-angular-firebase/index.md
@@ -0,0 +1,267 @@
+---
+title: Realtime Presence with Angular + Firebase
+lastmod: 2019-01-27T14:04:38-07:00
+publishdate: 2019-01-27T14:04:38-07:00
+author: Jeff Delaney
+draft: false
+description: Build a realtime user presence system with AngularFire to detect when a user is online, offline, or away.
+tags:
+ - angular
+ - realtimedb
+ - firebase
+
+youtube: bL3I7Pls-1w
+github: https://github.com/fireship-io/41-realtime-presence-firebase-angular
+
+versions:
+ '@angular/core': 7.2
+ '@angular/fire': 5
+ rxjs: 6
+
+---
+
+Social media and chat apps (think Slack, Facebook Messenger, etc) often have presence detection systems that can indicate if your friends are **online, offline, or away**. Traditionally, features like this have been challenging because you need manage state between the client & server, but the Firebase [RealtimeDB](https://firebase.google.com/docs/database/) makes it easy. The following lesson will show you how to build a realtime user presence system with Angular and Firebase.
+
+{{< figure src="img/presence-demo.gif" alt="realtime presence with Angular and Firebase" caption="The browser on the left shows the actual user activity, while the browser on the right is just a neutral observer of the presence changes" >}}
+
+
+## Step 0: Prerequisites
+
+
+This post first appeared as [Episode 41 on AngularFirebase.com](https://angularfirebase.com/lessons/user-presenece-system-in-realtime/) and has been fully updated with the latest best practices.
+
+
+
+1. Install AngularFire `ng add @angular/fire`
+1. You should have a working user auth system in place. Most of the relevant code for the auth service is shown below, however I recommend following [Firebase Authentication System](https://fireship.io/lessons/angularfire-google-oauth/) lesson first.
+
+## Step 1: Listen to the Realtime DB Connection
+
+
+Realtime presence is not directly supported in Firestore, but it is possible to mirror the RealtimeDB data with a Cloud Function using this [official guide](https://firebase.google.com/docs/firestore/solutions/presence). Personally, I find the setup to be quite cumbersome and recommend using RealtimeDB directly - at least until Firestore supports an **onDisconnect** hook.
+
+
+There are at least five distinct states that need to be addressed. Keep in mind, you may find additional edge cases beyond these.
+
+1. Signed-in and using app (online 💚)
+2. Signed-in but app is closed (offline 🔴)
+3. Signed-in but on a different browser tab (away 💤)
+4. Signed-out but app is still opened (offline 🔴)
+5. Signed-out and app closed (offline 🔴)
+
+In the database, we keep track of a user's presence under a the **status/{uid}/** node.
+
+{{< figure src="img/rtdb-presence.png" alt="realtime database model for presence system" >}}
+
+In Angular, let's start by generating a service to handle the business logic for presence detection.
+
+{{< file "terminal" "command line" >}}
+```text
+ng g service presence
+```
+
+### Base Service
+
+Our service will start by implementing a series of helpers aimed at making our code composable and readable. Here's a breakdown of each method so far.
+
+- `getPresence` retrieves the presence data from DB as an Observable.
+- `getUser` returns the current user as a Promise.
+- `setPresence` updates the DB with a new presence value.
+- `timestamp` getter for the Firebase server timestamp.
+
+Also, notice how we are setting up a few subscriptions in the constructor - these will be implemented in the following sections and they are responsible for updating the user's status reactively.
+
+{{< file "ngts" "foo.component.ts" >}}
+```typescript
+import { Injectable } from '@angular/core';
+import { AngularFireAuth } from '@angular/fire/auth';
+import { AngularFireDatabase } from '@angular/fire/database';
+import * as firebase from 'firebase/app';
+import { tap, map, switchMap, first } from 'rxjs/operators';
+import { TouchSequence } from 'selenium-webdriver';
+import { of } from 'rxjs';
+
+@Injectable({
+ providedIn: 'root'
+})
+export class PresenceService {
+
+ constructor(private afAuth: AngularFireAuth, private db: AngularFireDatabase) {
+ console.log('let there be presence');
+ this.updateOnUser().subscribe();
+ this.updateOnDisconnect().subscribe();
+ this.updateOnAway();
+ }
+
+
+ getPresence(uid: string) {
+ return this.db.object(`status/${uid}`).valueChanges();
+ }
+
+ getUser() {
+ return this.afAuth.authState.pipe(first()).toPromise();
+ }
+
+
+ async setPresence(status: string) {
+ const user = await this.getUser();
+ if (user) {
+ return this.db.object(`status/${user.uid}`).update({ status, timestamp: this.timestamp });
+ }
+ }
+
+ get timestamp() {
+ return firebase.database.ServerValue.TIMESTAMP;
+ }
+
+ // Implement presence logic here
+
+}
+```
+
+### Online Status 💚
+
+
+The code below takes care of the *online* status. When the user logs in or opens the app, it will switchMap to an Observable of the database connection, then update the logged-in user's presence.
+
+{{< file "ngts" "presence.service.ts" >}}
+```typescript
+// Updates status when logged-in connection to Firebase starts
+ updateOnUser() {
+ const connection = this.db.object('.info/connected').valueChanges().pipe(
+ map(connected => connected ? 'online' : 'offline')
+ );
+
+ return this.afAuth.authState.pipe(
+ switchMap(user => user ? connection : of('offline')),
+ tap(status => this.setPresence(status))
+ );
+ }
+```
+
+### Offline Status 🔴
+
+The offline status is dependent on the `onDisconnect` hook, which will run an update when the database connection is lost. Also, the app's signOut handler should update the status because the database connection may still be active after the user logs out.
+
+{{< file "ngts" "presence.service.ts" >}}
+```typescript
+ updateOnDisconnect() {
+ return this.afAuth.authState.pipe(
+ tap(user => {
+ if (user) {
+ this.db.object(`status/${user.uid}`).query.ref.onDisconnect()
+ .update({
+ status: 'offline',
+ timestamp: this.timestamp
+ });
+ }
+ })
+ );
+ }
+
+async signOut() {
+ await this.setPresence('offline');
+ await this.afAuth.signOut();
+}
+```
+
+### Away or Idle Status 💤
+
+The away status is completely optional, but it does add a nice touch. We check if the app's browser tab is open using the [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API).
+
+Keep in mind, we are touching the DOM directly here, so this code will not work with server-side rendering or other non-web platforms.
+
+{{< file "ngts" "presence.service.ts" >}}
+```typescript
+ // User navigates to a new tab, case 3
+ updateOnAway() {
+ document.onvisibilitychange = (e) => {
+
+ if (document.visibilityState === 'hidden') {
+ this.setPresence('away');
+ } else {
+ this.setPresence('online');
+ }
+ };
+ }
+```
+
+
+## Step 2: Show the Status in the UI
+
+At this point, we have all the business logic in place for realtime presence. Let's create a component that will consume the data from the RealtimeDB.
+{{< file "terminal" "command line" >}}
+```text
+ng g component user-status
+```
+
+### Listen to Presence Updates Globally
+
+In most cases, you should start tracking user presence as soon as your app starts. In Angular, we can achieve this by injecting the service in the AppComponent constructor.
+
+{{< file "ngts" "app.component.ts" >}}
+```typescript
+export class AppComponent {
+ constructor(public presence: PresenceService) {}
+}
+```
+
+### User Status Component
+
+The component takes a UID as an input property, then uses it to read the database.
+
+
+{{< file "ngts" "user-status.component.ts" >}}
+```typescript
+import { Component, OnInit, Input } from '@angular/core';
+import { PresenceService } from '../services/presence.service';
+
+@Component({
+ selector: 'app-user-status',
+ templateUrl: './user.component.html',
+ styleUrls: ['./user.component.scss']
+})
+export class UserStatusComponent implements OnInit {
+
+ @Input() uid;
+
+ presence$;
+
+ constructor(private presence: PresenceService) { }
+
+ ngOnInit() {
+ this.presence$ = this.presence.getPresence(this.uid);
+ }
+
+}
+
+```
+
+
+The HTML can use [NgClass](https://angular.io/api/common/NgClass) to conditionally display a green, yellow, or red label based on the presence Observable. Note: the CSS classes below come from [Bulma](https://bulma.io/documentation/modifiers/syntax/), so make sure to replace them with your own styles.
+
+{{< file "html" "foo.component.html" >}}
+```html
+
+
+ {{ presence.status }}
+
+```
+
+
+Lastly, you need to put the component to use in the app. Generally, this would be done after querying a list/collection of users.
+
+{{< file "html" "some.component.html" >}}
+```html
+
+
+
+
+ {hits.map((hit) => (
+
+ {hit.make} {hit.model}
+
+ ))}
+
+
+
+ Buy for ${{ amount / 100 }}.00
+
+
+
+Loading....
+```
+
+
+## Stripe Elements - Highly Customizable
+
+Stripe Elements gives you more fine-grained control over payment form, but without need to code up all the complex validation logic from scratch.
+
+{{< vimeo 321487596 >}}
+
+### Add Elements to the HTML
+
+{{< file "html" "index.html" >}}
+```html
+
+```
+
+### Mount a Card Form to a Component
+
+The Elements Card follows a similar process to Checkout, but we can customize each field of the form itself with our own styles and error handling.
+
+{{< file "ngts" "elements.component.ts" >}}
+```typescript
+import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core';
+import { AuthService } from '../services/auth.service';
+import { AngularFireFunctions } from '@angular/fire/functions';
+
+declare var Stripe; // : stripe.StripeStatic;
+
+@Component({
+ selector: 'app-elements',
+ templateUrl: './elements.component.html',
+ styleUrls: ['./elements.component.scss']
+})
+export class ElementsComponent implements OnInit {
+
+
+ constructor(private auth: AuthService, private functions: AngularFireFunctions) {}
+
+ @Input() amount: number;
+ @Input() description: string;
+ @ViewChild('cardElement') cardElement: ElementRef;
+
+ stripe; // : stripe.Stripe;
+ card;
+ cardErrors;
+
+ loading = false;
+ confirmation;
+
+
+ ngOnInit() {
+ this.stripe = Stripe('pk_test_your_key');
+ const elements = this.stripe.elements();
+
+ this.card = elements.create('card');
+ this.card.mount(this.cardElement.nativeElement);
+
+ this.card.addEventListener('change', ({ error }) => {
+ this.cardErrors = error && error.message;
+ });
+ }
+
+ async handleForm(e) {
+ e.preventDefault();
+
+ const { source, error } = await this.stripe.createSource(this.card);
+
+ if (error) {
+ // Inform the customer that there was an error.
+ this.cardErrors = error.message;
+ } else {
+ // Send the token to your server.
+ this.loading = true;
+ const user = await this.auth.getUser();
+ const fun = this.functions.httpsCallable('stripeCreateCharge');
+ this.confirmation = await fun({ source: source.id, uid: user.uid, amount: this.amount }).toPromise();
+ this.loading = false;
+
+ }
+ }
+}
+```
+
+The HTML requires a form with a template variable that we can mount the card to, which is the *cardElement* in this example. When the form is submitted, the *handleForm* method will send the card details to Stripe and process a charge on our server.
+
+
+{{< file "html" "elements.component.html" >}}
+```html
+
+
+```
diff --git a/hugo/content/lessons/stripe-elements-angular/img/.gitkeep b/content/lessons/stripe-payment-intents-tutorial/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/stripe-elements-angular/img/.gitkeep
rename to content/lessons/stripe-payment-intents-tutorial/img/.gitkeep
diff --git a/hugo/content/lessons/stripe-payment-intents-tutorial/img/featured.jpg b/content/lessons/stripe-payment-intents-tutorial/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/stripe-payment-intents-tutorial/img/featured.jpg
rename to content/lessons/stripe-payment-intents-tutorial/img/featured.jpg
diff --git a/hugo/content/lessons/stripe-payment-intents-tutorial/img/featured.png b/content/lessons/stripe-payment-intents-tutorial/img/featured.png
similarity index 100%
rename from hugo/content/lessons/stripe-payment-intents-tutorial/img/featured.png
rename to content/lessons/stripe-payment-intents-tutorial/img/featured.png
diff --git a/hugo/content/lessons/stripe-payment-intents-tutorial/img/featured.webp b/content/lessons/stripe-payment-intents-tutorial/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/stripe-payment-intents-tutorial/img/featured.webp
rename to content/lessons/stripe-payment-intents-tutorial/img/featured.webp
diff --git a/hugo/content/lessons/stripe-payment-intents-tutorial/img/stripe-api-keys.png b/content/lessons/stripe-payment-intents-tutorial/img/stripe-api-keys.png
similarity index 100%
rename from hugo/content/lessons/stripe-payment-intents-tutorial/img/stripe-api-keys.png
rename to content/lessons/stripe-payment-intents-tutorial/img/stripe-api-keys.png
diff --git a/hugo/content/lessons/stripe-payment-intents-tutorial/img/stripe-new-product.png b/content/lessons/stripe-payment-intents-tutorial/img/stripe-new-product.png
similarity index 100%
rename from hugo/content/lessons/stripe-payment-intents-tutorial/img/stripe-new-product.png
rename to content/lessons/stripe-payment-intents-tutorial/img/stripe-new-product.png
diff --git a/hugo/content/lessons/stripe-payment-intents-tutorial/img/stripe-webhook-setup.png b/content/lessons/stripe-payment-intents-tutorial/img/stripe-webhook-setup.png
similarity index 100%
rename from hugo/content/lessons/stripe-payment-intents-tutorial/img/stripe-webhook-setup.png
rename to content/lessons/stripe-payment-intents-tutorial/img/stripe-webhook-setup.png
diff --git a/content/lessons/stripe-payment-intents-tutorial/index.md b/content/lessons/stripe-payment-intents-tutorial/index.md
new file mode 100644
index 000000000..ff7d4822c
--- /dev/null
+++ b/content/lessons/stripe-payment-intents-tutorial/index.md
@@ -0,0 +1,354 @@
+---
+title: Stripe Payment Intents Tutorial
+lastmod: 2019-10-22T18:05:34-07:00
+publishdate: 2019-10-22T18:05:34-07:00
+author: Jeff Delaney
+draft: false
+description: Learn how to work with the Stripe Payment Intents API and validate cards with 3D Secure.
+tags:
+ - stripe
+ - svelte
+ - node
+ - cloud-functions
+
+youtube: 1XKRxeo9414
+github: https://github.com/fireship-io/212-stripe-svelte
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+Stripe provides a huge API with everything you could ever want to build a complex payment system. Recent changes in the online payments landscape have resulted in significant changes to the API, most notably the [Payment Intents API](https://stripe.com/docs/payments/payment-intents). The following lesson demonstrates two modern strategies for accepting one-time payments - (1) Checkout and (2) Stripe Elements with Payment Intents.
+
+As of September 2019, many European banks now require their customers to validate payments using [3D secure standard](https://stripe.com/guides/3d-secure-2) or Strong Customer Authentication SCA. As a developer, this means some users may be required to authenticate on their bank's website to validate a purchase. Both strategies outlined below are compatible with 3D secure authentication.
+
+
+## Strategy 1 - Stripe Checkout
+
+Stripe Checkout is a service that makes it possible to accept payments without any backend code and just a few lines of frontend code. It works by linking your product SKUs to a hosted checkout page.
+
+- 🟢 Super easy to implement and works with 3D secure.
+- 🔻 Limited UI customization options.
+
+
+
+### Create a Product
+
+Head over the Stripe dashboard and create a product. Make a note of the SKU.
+
+{{< figure src="img/stripe-new-product.png" >}}
+
+### Add Stripe.js to Svelte
+
+Create a new [Svelte](https://svelte.dev/) app and add the Stripe.js script tag to the head of the main HTML file.
+
+{{< file "terminal" "command line" >}}
+```text
+npx degit sveltejs/my-svelte-store
+```
+
+{{< file "html" "public/index.html" >}}
+```html
+
+
+
+
+
+```
+
+### Product Component
+
+Stripe can handle payment for a product (or multiple products and subscriptions) with the `redirectToCheckout` method. This will redirect the user to a page hosted by Stripe with a credit card for to pay for your products. The user can be directed back to a URL you specify when the payment is finished or canceled.
+
+{{< figure src="img/stripe-api-keys.png" caption="Initialize Stripe in Svelte with the publishable key" >}}
+
+
+{{< file "svelte" "Product.svelte" >}}
+```html
+
+
+
+
+ Stripe Checkout
+
+ ⌚
+
+ Buy me ${amount / 100}
+
+
+```
+
+Now you can use this component in your Svelte app like so:
+
+{{< file "svelte" "App.svelte" >}}
+```html
+My Svelte Store
+
+
+
+ Payment Intents with Stripe Elements
+
+ ⌚
+
+
+
+
+ Submit Payment for ${amount / 100}
+
+
+
+```
+
+## Fulfill Purchases with a Webhook
+
+Now that the app can accept payments, we need to do our part an fulfill the actual product. The implementation details will vary widely based on the app's business logic, but a digital product can be delivered with a [webhook](https://en.wikipedia.org/wiki/Webhook). Stripe will send data about the payment to this endpoint immediately after the charge is processed, which can be used to update a database, send an email, push notification, and so on.
+
+
+{{< figure src="img/stripe-webhook-setup.png" caption="Create a webhook that points to your deploy Cloud Function endpoint" >}}
+
+
+{{< file "ts" "index.ts" >}}
+```typescript
+app.post('/webhook', async (req, res) => {
+ const sig = req.headers['stripe-signature'] as string;
+
+
+ const endpointSecret = 'whsec_...';
+
+ let event;
+
+ try {
+ event = stripe.webhooks.constructEvent(req.body.rawBody, sig, endpointSecret);
+ } catch (err) {
+ res.status(400).end();
+ return;
+ }
+
+ // Handle Type of webhook
+
+ const intent = event.data.object;
+
+ switch (event.type) {
+ case 'payment_intent.succeeded':
+
+ // Update database
+ // Send email
+ // Notify shipping department
+
+ console.log("Succeeded:", intent.id);
+ break;
+ case 'payment_intent.payment_failed':
+ const message = intent.last_payment_error && intent.last_payment_error.message;
+ console.log('Failed:', intent.id, message);
+ break;
+ }
+
+ res.sendStatus(200);
+});
+```
diff --git a/hugo/content/lessons/stripe-payment-intents-tutorial/img/.gitkeep b/content/lessons/svelte-v3-overview-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/stripe-payment-intents-tutorial/img/.gitkeep
rename to content/lessons/svelte-v3-overview-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/svelte-v3-overview-firebase/img/composite-index.png b/content/lessons/svelte-v3-overview-firebase/img/composite-index.png
similarity index 100%
rename from hugo/content/lessons/svelte-v3-overview-firebase/img/composite-index.png
rename to content/lessons/svelte-v3-overview-firebase/img/composite-index.png
diff --git a/hugo/content/lessons/svelte-v3-overview-firebase/img/featured.jpg b/content/lessons/svelte-v3-overview-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/svelte-v3-overview-firebase/img/featured.jpg
rename to content/lessons/svelte-v3-overview-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/svelte-v3-overview-firebase/img/featured.png b/content/lessons/svelte-v3-overview-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/svelte-v3-overview-firebase/img/featured.png
rename to content/lessons/svelte-v3-overview-firebase/img/featured.png
diff --git a/hugo/content/lessons/svelte-v3-overview-firebase/img/featured.webp b/content/lessons/svelte-v3-overview-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/svelte-v3-overview-firebase/img/featured.webp
rename to content/lessons/svelte-v3-overview-firebase/img/featured.webp
diff --git a/hugo/content/lessons/svelte-v3-overview-firebase/img/todo-document-model.png b/content/lessons/svelte-v3-overview-firebase/img/todo-document-model.png
similarity index 100%
rename from hugo/content/lessons/svelte-v3-overview-firebase/img/todo-document-model.png
rename to content/lessons/svelte-v3-overview-firebase/img/todo-document-model.png
diff --git a/content/lessons/svelte-v3-overview-firebase/index.md b/content/lessons/svelte-v3-overview-firebase/index.md
new file mode 100644
index 000000000..e56901e56
--- /dev/null
+++ b/content/lessons/svelte-v3-overview-firebase/index.md
@@ -0,0 +1,262 @@
+---
+title: Svelte Realtime Todo List with Firebase
+lastmod: 2019-04-24T07:01:58-07:00
+publishdate: 2019-04-24T07:01:58-07:00
+author: Jeff Delaney
+draft: false
+description: Build a realtime ToDo list with Svelte 3 and Firebase (RxFire)
+tags:
+ - svelte
+ - firebase
+ - rxjs
+
+youtube: 043h4ugAj4c
+github: https://github.com/fireship-io/182-svelte-firebase
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+
+[Svelte](https://svelte.dev/) 3 was [announced](https://twitter.com/Rich_Harris/status/1120342713843507201) recently and it delivers a refreshing alternative to the big three component frameworks/libraries of React, Angular, and Vue. In fact, calling it a framework/library would not be very accurate, because Svelte is actually a *compiler* that turns your code into Vanilla JS, meaning it does not need to ship the entire framework in the JS bundle. Its focus on simplicity really stands out and makes for a very developer-friendly JavaScript experience.
+
+I highly recommend watching the video from Svelte's creator, Rich Harris, to get a better of the low-level engineering decisions that make this tool special.
+
+
+{{< youtube AdNJ3fydeao >}}
+
+
+## Realtime Todo List
+
+Our goal is to build an authenticated realtime todo list with Svelte 3 and Firebase, similar to the demo below:
+
+{{< vimeo 332304365 >}}
+
+### Initial Setup
+
+Let's start with a blank Svelte project and install [RxFire](https://github.com/firebase/firebase-js-sdk/tree/master/packages/rxfire).
+
+{{< file "terminal" "command line" >}}
+```text
+npx degit sveltejs/template realtime-todos
+cd realtime-todos
+
+npm install
+npm i rxfire firebase rxjs
+
+npm run dev
+```
+
+Next, head over the the [Firebase Console](https://console.firebase.google.com/) and grab your web app credentials. Create a file to handle the initialization of Firebase.
+
+{{< file "js" "firebase.js" >}}
+```js
+import firebase from 'firebase/app';
+import 'firebase/auth';
+import 'firebase/firestore';
+var firebaseConfig = {
+ // ...your firebase credentials
+};
+
+firebase.initializeApp(firebaseConfig);
+
+export const auth = firebase.auth();
+export const googleProvider = new firebase.auth.GoogleAuthProvider();
+
+export const db = firebase.firestore();
+```
+
+## User Authentication
+
+Our first milestone is to create a component that allows the user to login and logout using their Google account.
+
+### Login
+
+We can handle the login process by binding the Firebase popup logic to a button click event with Svelte ``
+
+The `authState` function is provided by RxFire and contains an Observable of the user's authentication state. When logged-in, it provides basic Google account data like displayName, email, photoURL, etc. When logged-out, it is null.
+
+Keep in mind, we will be creating the `Todos` and `Profile` components in the upcoming steps.
+
+{{< file "svelte" "App.svelte" >}}
+```html
+
+
+
+
+{#if user}
+ auth.signOut() }>Logout
+
+ Signin with Google
+
+{/if}
+
+```
+
+### User Profile
+
+When a user is logged-in, we can pass the props down to a child (dumb) component used for data presentation only. The `export` keyword makes it possible to pass a value from the parent the the child.
+
+{{< file "svelte" "Profile.svelte" >}}
+```html
+
+
+
+Hi { displayName }!
+
+Your userID is { uid }
+```
+
+
+## Firestore Todo List
+
+The todo is just a document that tells us who created it, along with some text and a boolean status. We can toggle the status to mark a todo complete or incomplete.
+
+{{< figure src="img/todo-document-model.png" caption="Data model of todo item in Firestore" >}}
+
+### Todo Item
+
+The `TodoItem` is a dumb/presentational component that displays data and emits custom events back up to the parent. When the user clicks the remove 🗑️ button it will emit a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) that tells the parent which document ID to remove from the database. Similarly, we can toggle the *complete* status by clicking the ✔️ or ❌ buttons.
+
+
+{{< file "svelte" "TodoItem.svelte" >}}
+```html
+
+
+
+
+
+
+
+{#if complete}
+ { text }
+ ✔️
+{:else}
+ { text }
+ ❌
+{/if}
+
+ 🗑
+
+
+```
+
+### The Todo List
+
+The `TodoList` is a smart component that queries that data and interacts with the database. The `$` used in front the *todos* in the each loop will automatically subscribe and unsubscribe to the Observable - similar to the async pipe in Angular.
+
+{{< file "svelte" "Todos.svelte" >}}
+```html
+
+
+
+
+
+ {#each $todos as todo}
+
+
+
+
+Add Task
+```
+
+You need a composite index to run the database query in the code above.
+
+{{< figure src="img/composite-index.png" caption="Check the browser error logs for a link to create this index" >}}
+
+## The End
+
+That's it! I can confidently say that Svelte has been the easiest JS component library to learn and start putting to use in a productive way. This is partly due to my background with other JS frameworks, but also due the fact that Svelte focuses on simplicity, has amazing docs, and creates powerful abstractions that just fit well with native DOM apis.
diff --git a/hugo/content/lessons/svelte-v3-overview-firebase/img/.gitkeep b/content/lessons/tailwind-tutorial/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/svelte-v3-overview-firebase/img/.gitkeep
rename to content/lessons/tailwind-tutorial/img/.gitkeep
diff --git a/hugo/content/lessons/tailwind-tutorial/img/featured.jpg b/content/lessons/tailwind-tutorial/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/tailwind-tutorial/img/featured.jpg
rename to content/lessons/tailwind-tutorial/img/featured.jpg
diff --git a/hugo/content/lessons/tailwind-tutorial/img/featured.png b/content/lessons/tailwind-tutorial/img/featured.png
similarity index 100%
rename from hugo/content/lessons/tailwind-tutorial/img/featured.png
rename to content/lessons/tailwind-tutorial/img/featured.png
diff --git a/hugo/content/lessons/tailwind-tutorial/img/featured.webp b/content/lessons/tailwind-tutorial/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/tailwind-tutorial/img/featured.webp
rename to content/lessons/tailwind-tutorial/img/featured.webp
diff --git a/content/lessons/tailwind-tutorial/index.md b/content/lessons/tailwind-tutorial/index.md
new file mode 100644
index 000000000..ab664cd32
--- /dev/null
+++ b/content/lessons/tailwind-tutorial/index.md
@@ -0,0 +1,165 @@
+---
+title: Tailwind Tips & Tricks
+lastmod: 2021-10-19T08:11:26-07:00
+publishdate: 2021-10-19T08:11:26-07:00
+author: Jeff Delaney
+draft: false
+description: Tips & Tricks for learning Tailwind CSS
+tags:
+ - css
+ - tailwind
+ - react
+
+youtube: pfaSUYaSgRo
+github: https://github.com/fireship-io/tailwind-dashboard
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+The following tutorial will get you up and running with [Tailwind CSS](https://tailwindcss.com/), empowering you to build a beautiful, responsive, and animated websites quickly. We will build a side navigation menu inspired by Discord.
+
+## Setup
+
+### Install the Tailwind VS Code extension
+
+Install the [Tailwind VS Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension.
+
+### Use a JS Framework
+
+Feel free to use the JS framework of your choice. This tutorial uses [Create React App](https://tailwindcss.com/docs/guides/create-react-app).
+
+## Discord-Inspired Icon Navbar
+
+### Make the App a Flexible Container
+
+Create a [flexbox](https://youtu.be/K74l26pE4YA) row by simply adding the flex utility to the parent element.
+
+{{< file "js" "App.js" >}}
+```javascript
+function App() {
+ return (
+
+
+ );
+}
+```
+
+### Position the Sidebar
+
+Combine Tailwind utility classes to position the sidebar. When hovering over each class in VS Code, it will display its true CSS values.
+
+{{< file "js" "SideBar.js" >}}
+```javascript
+const SideBar = () => {
+ return (
+
+
+ );
+};
+```
+
+### Add Icon Buttons
+
+To quickly add an icon button to the navbar, install react-icons.
+
+{{< file "terminal" "command line" >}}
+```bash
+npm install react-icons
+```
+
+{{< file "js" "SideBar.js" >}}
+```javascript
+import { BsPlus, BsFillLightningFill } from 'react-icons/bs';
+import { FaFire, FaPoo } from 'react-icons/fa';
+
+const SideBar = () => {
+ return (
+
+
+ );
+};
+
+const SideBarIcon = ({ icon }) => (
+
+ {icon}
+
+);
+```
+
+### Use Apply to Create Custom Classes
+
+The `@apply` directive allows you to compose custom CSS classes by combining Tailwind classes. It can be useful in situations where extracting a JS component does not make sense.
+
+{{< file "css" "index.css" >}}
+```css
+@layer components {
+
+ .sidebar-icon {
+ @apply relative flex items-center justify-center
+ h-12 w-12 mt-2 mb-2 mx-auto shadow-lg
+ bg-gray-800 text-green-500
+ hover:bg-green-600 hover:text-white
+ rounded-3xl hover:rounded-xl
+ transition-all duration-300 ease-linear
+ cursor-pointer;
+ }
+}
+```
+
+## Animated Tooltips
+
+### Create Tooltip Container
+
+Each icon button has a tooltip as a child that is invisible by default.
+
+{{< file "js" "SideBar.js" >}}
+```javascript
+const SideBarIcon = ({ icon, text = 'tooltip 💡' }) => (
+
+ {icon}
+
+
+
+);
+```
+
+{{< file "css" "index.css" >}}
+```css
+ .sidebar-tooltip {
+ @apply absolute w-auto p-2 m-2 min-w-max left-14
+ rounded-md shadow-md
+ text-white bg-gray-900
+ text-xs font-bold
+ transition-all duration-100 scale-0 origin-left;
+ }
+```
+
+
+### Animated with Group
+
+Create groups to animate a child when the state of the parent changes.
+
+The tailwind `group` class does not work within `@apply`. It must be used inline.
+
+{{< file "js" "SideBar.js" >}}
+```javascript
+const SideBarIcon = ({ icon, text = 'tooltip 💡' }) => (
+
+ {icon}
+
+
+
+);
+```
\ No newline at end of file
diff --git a/hugo/content/lessons/tailwind-tutorial/img/.gitkeep b/content/lessons/tensorflow-js-quick-start/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/tailwind-tutorial/img/.gitkeep
rename to content/lessons/tensorflow-js-quick-start/img/.gitkeep
diff --git a/hugo/content/lessons/tensorflow-js-quick-start/img/angular-tensorflow-train.gif b/content/lessons/tensorflow-js-quick-start/img/angular-tensorflow-train.gif
similarity index 100%
rename from hugo/content/lessons/tensorflow-js-quick-start/img/angular-tensorflow-train.gif
rename to content/lessons/tensorflow-js-quick-start/img/angular-tensorflow-train.gif
diff --git a/hugo/content/lessons/tensorflow-js-quick-start/img/featured.jpg b/content/lessons/tensorflow-js-quick-start/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/tensorflow-js-quick-start/img/featured.jpg
rename to content/lessons/tensorflow-js-quick-start/img/featured.jpg
diff --git a/hugo/content/lessons/tensorflow-js-quick-start/img/featured.png b/content/lessons/tensorflow-js-quick-start/img/featured.png
similarity index 100%
rename from hugo/content/lessons/tensorflow-js-quick-start/img/featured.png
rename to content/lessons/tensorflow-js-quick-start/img/featured.png
diff --git a/hugo/content/lessons/tensorflow-js-quick-start/img/featured.webp b/content/lessons/tensorflow-js-quick-start/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/tensorflow-js-quick-start/img/featured.webp
rename to content/lessons/tensorflow-js-quick-start/img/featured.webp
diff --git a/hugo/content/lessons/tensorflow-js-quick-start/img/linear-regression.png b/content/lessons/tensorflow-js-quick-start/img/linear-regression.png
similarity index 100%
rename from hugo/content/lessons/tensorflow-js-quick-start/img/linear-regression.png
rename to content/lessons/tensorflow-js-quick-start/img/linear-regression.png
diff --git a/hugo/content/lessons/tensorflow-js-quick-start/img/tfjs-mnist-demo.gif b/content/lessons/tensorflow-js-quick-start/img/tfjs-mnist-demo.gif
similarity index 100%
rename from hugo/content/lessons/tensorflow-js-quick-start/img/tfjs-mnist-demo.gif
rename to content/lessons/tensorflow-js-quick-start/img/tfjs-mnist-demo.gif
diff --git a/hugo/content/lessons/tensorflow-js-quick-start/index.md b/content/lessons/tensorflow-js-quick-start/index.md
similarity index 100%
rename from hugo/content/lessons/tensorflow-js-quick-start/index.md
rename to content/lessons/tensorflow-js-quick-start/index.md
diff --git a/hugo/content/lessons/tensorflow-js-quick-start/img/.gitkeep b/content/lessons/testing-cloud-functions-in-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/tensorflow-js-quick-start/img/.gitkeep
rename to content/lessons/testing-cloud-functions-in-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/testing-cloud-functions-in-firebase/img/featured (1).jpg b/content/lessons/testing-cloud-functions-in-firebase/img/featured (1).jpg
similarity index 100%
rename from hugo/content/lessons/testing-cloud-functions-in-firebase/img/featured (1).jpg
rename to content/lessons/testing-cloud-functions-in-firebase/img/featured (1).jpg
diff --git a/hugo/content/lessons/testing-cloud-functions-in-firebase/img/featured (1).webp b/content/lessons/testing-cloud-functions-in-firebase/img/featured (1).webp
similarity index 100%
rename from hugo/content/lessons/testing-cloud-functions-in-firebase/img/featured (1).webp
rename to content/lessons/testing-cloud-functions-in-firebase/img/featured (1).webp
diff --git a/hugo/content/lessons/testing-cloud-functions-in-firebase/img/featured.jpg b/content/lessons/testing-cloud-functions-in-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/testing-cloud-functions-in-firebase/img/featured.jpg
rename to content/lessons/testing-cloud-functions-in-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/testing-cloud-functions-in-firebase/img/featured.png b/content/lessons/testing-cloud-functions-in-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/testing-cloud-functions-in-firebase/img/featured.png
rename to content/lessons/testing-cloud-functions-in-firebase/img/featured.png
diff --git a/hugo/content/lessons/testing-cloud-functions-in-firebase/img/featured.webp b/content/lessons/testing-cloud-functions-in-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/testing-cloud-functions-in-firebase/img/featured.webp
rename to content/lessons/testing-cloud-functions-in-firebase/img/featured.webp
diff --git a/hugo/content/lessons/testing-cloud-functions-in-firebase/index.md b/content/lessons/testing-cloud-functions-in-firebase/index.md
similarity index 100%
rename from hugo/content/lessons/testing-cloud-functions-in-firebase/index.md
rename to content/lessons/testing-cloud-functions-in-firebase/index.md
diff --git a/hugo/content/lessons/testing-cloud-functions-in-firebase/img/.gitkeep b/content/lessons/testing-firestore-security-rules-with-the-emulator/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/testing-cloud-functions-in-firebase/img/.gitkeep
rename to content/lessons/testing-firestore-security-rules-with-the-emulator/img/.gitkeep
diff --git a/hugo/content/lessons/testing-firestore-security-rules-with-the-emulator/img/featured.jpg b/content/lessons/testing-firestore-security-rules-with-the-emulator/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/testing-firestore-security-rules-with-the-emulator/img/featured.jpg
rename to content/lessons/testing-firestore-security-rules-with-the-emulator/img/featured.jpg
diff --git a/hugo/content/lessons/testing-firestore-security-rules-with-the-emulator/img/featured.png b/content/lessons/testing-firestore-security-rules-with-the-emulator/img/featured.png
similarity index 100%
rename from hugo/content/lessons/testing-firestore-security-rules-with-the-emulator/img/featured.png
rename to content/lessons/testing-firestore-security-rules-with-the-emulator/img/featured.png
diff --git a/hugo/content/lessons/testing-firestore-security-rules-with-the-emulator/img/featured.webp b/content/lessons/testing-firestore-security-rules-with-the-emulator/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/testing-firestore-security-rules-with-the-emulator/img/featured.webp
rename to content/lessons/testing-firestore-security-rules-with-the-emulator/img/featured.webp
diff --git a/hugo/content/lessons/testing-firestore-security-rules-with-the-emulator/index.md b/content/lessons/testing-firestore-security-rules-with-the-emulator/index.md
similarity index 100%
rename from hugo/content/lessons/testing-firestore-security-rules-with-the-emulator/index.md
rename to content/lessons/testing-firestore-security-rules-with-the-emulator/index.md
diff --git a/hugo/content/lessons/testing-firestore-security-rules-with-the-emulator/img/.gitkeep b/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/testing-firestore-security-rules-with-the-emulator/img/.gitkeep
rename to content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/.gitkeep
diff --git a/hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/featured.jpg b/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/featured.jpg
rename to content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/featured.jpg
diff --git a/hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/featured.png b/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/featured.png
similarity index 100%
rename from hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/featured.png
rename to content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/featured.png
diff --git a/hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/featured.webp b/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/featured.webp
rename to content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/featured.webp
diff --git a/hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/gcp-translate.png b/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/gcp-translate.png
similarity index 100%
rename from hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/gcp-translate.png
rename to content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/gcp-translate.png
diff --git a/hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/translate.gif b/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/translate.gif
similarity index 100%
rename from hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/translate.gif
rename to content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/translate.gif
diff --git a/hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/index.md b/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/index.md
similarity index 100%
rename from hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/index.md
rename to content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/index.md
diff --git a/hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/.gitkeep b/content/lessons/the-ultimate-beginners-guide-to-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/text-translator-with-firebase-cloud-functions-onwrite-and-angular/img/.gitkeep
rename to content/lessons/the-ultimate-beginners-guide-to-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-auth.png b/content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-auth.png
similarity index 100%
rename from hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-auth.png
rename to content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-auth.png
diff --git a/hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-firestore.png b/content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-firestore.png
similarity index 100%
rename from hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-firestore.png
rename to content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-firestore.png
diff --git a/hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-new-project.png b/content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-new-project.png
similarity index 100%
rename from hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-new-project.png
rename to content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-new-project.png
diff --git a/hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-storage.png b/content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-storage.png
similarity index 100%
rename from hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-storage.png
rename to content/lessons/the-ultimate-beginners-guide-to-firebase/img/basics-storage.png
diff --git a/hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/fcf-basics.png b/content/lessons/the-ultimate-beginners-guide-to-firebase/img/fcf-basics.png
similarity index 100%
rename from hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/fcf-basics.png
rename to content/lessons/the-ultimate-beginners-guide-to-firebase/img/fcf-basics.png
diff --git a/hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/featured.jpg b/content/lessons/the-ultimate-beginners-guide-to-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/featured.jpg
rename to content/lessons/the-ultimate-beginners-guide-to-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/featured.png b/content/lessons/the-ultimate-beginners-guide-to-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/featured.png
rename to content/lessons/the-ultimate-beginners-guide-to-firebase/img/featured.png
diff --git a/hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/featured.webp b/content/lessons/the-ultimate-beginners-guide-to-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/featured.webp
rename to content/lessons/the-ultimate-beginners-guide-to-firebase/img/featured.webp
diff --git a/hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/firebase-hosting.png b/content/lessons/the-ultimate-beginners-guide-to-firebase/img/firebase-hosting.png
similarity index 100%
rename from hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/firebase-hosting.png
rename to content/lessons/the-ultimate-beginners-guide-to-firebase/img/firebase-hosting.png
diff --git a/hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/vscode-blank.png b/content/lessons/the-ultimate-beginners-guide-to-firebase/img/vscode-blank.png
similarity index 100%
rename from hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/vscode-blank.png
rename to content/lessons/the-ultimate-beginners-guide-to-firebase/img/vscode-blank.png
diff --git a/hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/index.md b/content/lessons/the-ultimate-beginners-guide-to-firebase/index.md
similarity index 100%
rename from hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/index.md
rename to content/lessons/the-ultimate-beginners-guide-to-firebase/index.md
diff --git a/hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/.gitkeep b/content/lessons/theme-toggler/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/the-ultimate-beginners-guide-to-firebase/img/.gitkeep
rename to content/lessons/theme-toggler/img/.gitkeep
diff --git a/hugo/content/lessons/theme-toggler/img/featured.jpg b/content/lessons/theme-toggler/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/theme-toggler/img/featured.jpg
rename to content/lessons/theme-toggler/img/featured.jpg
diff --git a/hugo/content/lessons/theme-toggler/img/featured.png b/content/lessons/theme-toggler/img/featured.png
similarity index 100%
rename from hugo/content/lessons/theme-toggler/img/featured.png
rename to content/lessons/theme-toggler/img/featured.png
diff --git a/hugo/content/lessons/theme-toggler/img/featured.webp b/content/lessons/theme-toggler/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/theme-toggler/img/featured.webp
rename to content/lessons/theme-toggler/img/featured.webp
diff --git a/hugo/content/lessons/theme-toggler/index.md b/content/lessons/theme-toggler/index.md
similarity index 100%
rename from hugo/content/lessons/theme-toggler/index.md
rename to content/lessons/theme-toggler/index.md
diff --git a/hugo/content/lessons/theme-toggler/img/.gitkeep b/content/lessons/three-responsive-css-grid-layouts/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/theme-toggler/img/.gitkeep
rename to content/lessons/three-responsive-css-grid-layouts/img/.gitkeep
diff --git a/hugo/content/lessons/three-responsive-css-grid-layouts/img/featured.jpg b/content/lessons/three-responsive-css-grid-layouts/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/three-responsive-css-grid-layouts/img/featured.jpg
rename to content/lessons/three-responsive-css-grid-layouts/img/featured.jpg
diff --git a/hugo/content/lessons/three-responsive-css-grid-layouts/img/featured.png b/content/lessons/three-responsive-css-grid-layouts/img/featured.png
similarity index 100%
rename from hugo/content/lessons/three-responsive-css-grid-layouts/img/featured.png
rename to content/lessons/three-responsive-css-grid-layouts/img/featured.png
diff --git a/hugo/content/lessons/three-responsive-css-grid-layouts/img/featured.webp b/content/lessons/three-responsive-css-grid-layouts/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/three-responsive-css-grid-layouts/img/featured.webp
rename to content/lessons/three-responsive-css-grid-layouts/img/featured.webp
diff --git a/hugo/content/lessons/three-responsive-css-grid-layouts/index.md b/content/lessons/three-responsive-css-grid-layouts/index.md
similarity index 100%
rename from hugo/content/lessons/three-responsive-css-grid-layouts/index.md
rename to content/lessons/three-responsive-css-grid-layouts/index.md
diff --git a/hugo/content/lessons/three-responsive-css-grid-layouts/img/.gitkeep b/content/lessons/threejs-tutorial-portfolio/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/three-responsive-css-grid-layouts/img/.gitkeep
rename to content/lessons/threejs-tutorial-portfolio/img/.gitkeep
diff --git a/hugo/content/lessons/threejs-tutorial-portfolio/img/featured.jpg b/content/lessons/threejs-tutorial-portfolio/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/threejs-tutorial-portfolio/img/featured.jpg
rename to content/lessons/threejs-tutorial-portfolio/img/featured.jpg
diff --git a/hugo/content/lessons/threejs-tutorial-portfolio/img/featured.png b/content/lessons/threejs-tutorial-portfolio/img/featured.png
similarity index 100%
rename from hugo/content/lessons/threejs-tutorial-portfolio/img/featured.png
rename to content/lessons/threejs-tutorial-portfolio/img/featured.png
diff --git a/hugo/content/lessons/threejs-tutorial-portfolio/img/featured.webp b/content/lessons/threejs-tutorial-portfolio/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/threejs-tutorial-portfolio/img/featured.webp
rename to content/lessons/threejs-tutorial-portfolio/img/featured.webp
diff --git a/hugo/content/lessons/threejs-tutorial-portfolio/index.md b/content/lessons/threejs-tutorial-portfolio/index.md
similarity index 100%
rename from hugo/content/lessons/threejs-tutorial-portfolio/index.md
rename to content/lessons/threejs-tutorial-portfolio/index.md
diff --git a/hugo/content/lessons/threejs-tutorial-portfolio/img/.gitkeep b/content/lessons/top-seven-database-paradigms/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/threejs-tutorial-portfolio/img/.gitkeep
rename to content/lessons/top-seven-database-paradigms/img/.gitkeep
diff --git a/hugo/content/lessons/top-seven-database-paradigms/img/document.png b/content/lessons/top-seven-database-paradigms/img/document.png
similarity index 100%
rename from hugo/content/lessons/top-seven-database-paradigms/img/document.png
rename to content/lessons/top-seven-database-paradigms/img/document.png
diff --git a/hugo/content/lessons/top-seven-database-paradigms/img/featured.jpg b/content/lessons/top-seven-database-paradigms/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/top-seven-database-paradigms/img/featured.jpg
rename to content/lessons/top-seven-database-paradigms/img/featured.jpg
diff --git a/hugo/content/lessons/top-seven-database-paradigms/img/featured.png b/content/lessons/top-seven-database-paradigms/img/featured.png
similarity index 100%
rename from hugo/content/lessons/top-seven-database-paradigms/img/featured.png
rename to content/lessons/top-seven-database-paradigms/img/featured.png
diff --git a/hugo/content/lessons/top-seven-database-paradigms/img/featured.webp b/content/lessons/top-seven-database-paradigms/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/top-seven-database-paradigms/img/featured.webp
rename to content/lessons/top-seven-database-paradigms/img/featured.webp
diff --git a/hugo/content/lessons/top-seven-database-paradigms/img/graph.png b/content/lessons/top-seven-database-paradigms/img/graph.png
similarity index 100%
rename from hugo/content/lessons/top-seven-database-paradigms/img/graph.png
rename to content/lessons/top-seven-database-paradigms/img/graph.png
diff --git a/hugo/content/lessons/top-seven-database-paradigms/img/key-value.png b/content/lessons/top-seven-database-paradigms/img/key-value.png
similarity index 100%
rename from hugo/content/lessons/top-seven-database-paradigms/img/key-value.png
rename to content/lessons/top-seven-database-paradigms/img/key-value.png
diff --git a/hugo/content/lessons/top-seven-database-paradigms/img/multi-model.png b/content/lessons/top-seven-database-paradigms/img/multi-model.png
similarity index 100%
rename from hugo/content/lessons/top-seven-database-paradigms/img/multi-model.png
rename to content/lessons/top-seven-database-paradigms/img/multi-model.png
diff --git a/hugo/content/lessons/top-seven-database-paradigms/img/relational.png b/content/lessons/top-seven-database-paradigms/img/relational.png
similarity index 100%
rename from hugo/content/lessons/top-seven-database-paradigms/img/relational.png
rename to content/lessons/top-seven-database-paradigms/img/relational.png
diff --git a/hugo/content/lessons/top-seven-database-paradigms/img/search-engine.png b/content/lessons/top-seven-database-paradigms/img/search-engine.png
similarity index 100%
rename from hugo/content/lessons/top-seven-database-paradigms/img/search-engine.png
rename to content/lessons/top-seven-database-paradigms/img/search-engine.png
diff --git a/hugo/content/lessons/top-seven-database-paradigms/img/wide-column.png b/content/lessons/top-seven-database-paradigms/img/wide-column.png
similarity index 100%
rename from hugo/content/lessons/top-seven-database-paradigms/img/wide-column.png
rename to content/lessons/top-seven-database-paradigms/img/wide-column.png
diff --git a/content/lessons/top-seven-database-paradigms/index.md b/content/lessons/top-seven-database-paradigms/index.md
new file mode 100644
index 000000000..b06a68388
--- /dev/null
+++ b/content/lessons/top-seven-database-paradigms/index.md
@@ -0,0 +1,68 @@
+---
+title: Seven Database Paradigms
+lastmod: 2020-09-01T16:09:39-07:00
+publishdate: 2020-09-01T16:09:39-07:00
+author: Jeff Delaney
+draft: false
+description: Visual explanation of the top 7 database paradigms and what they do best.
+tags:
+ - sql
+ - firestore
+
+youtube: W2Z7fbCLSTw
+# github:
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+Choose the right database for the job 🔨
+
+## Database Paradigms Explained Visually
+
+### Key-Value
+
+**Popular Key-Value Databases**: Redis, Memcached, Etcd
+
+{{< figure src="img/key-value.png" caption="key value database diagram" >}}
+
+### Wide Column
+
+**Popular Wide-Column Databases**: Cassandra, Apache HBase
+
+{{< figure src="img/wide-column.png" caption="wide column database diagram" >}}
+
+### Document Oriented
+
+**Popular Document Databases**: MongoDB, Firestore, CouchDB
+
+{{< figure src="img/document.png" caption="document database diagram" >}}
+
+### Relational
+
+**Popular Relational Databases**: [MySQL](/lessons/sql-firebase-typeorm/), Postgres, SQL Server, CockroachDB
+
+{{< figure src="img/relational.png" caption="" >}}
+
+### Graph
+
+**Popular Graph Databases**: Neo4j, DGraph, Janus Graph
+
+{{< figure src="img/graph.png" caption="" >}}
+
+### Search Engine
+
+**Popular Search Databases**: ElasticSearch, Algolia, [MeiliSearch](/lessons/meilisearch-firebase-google-cloud/)
+
+{{< figure src="img/search-engine.png" caption="" >}}
+
+### Multi-Model
+
+**Popular Multi-model Databases**: FaunaDB, CosmosDB
+
+{{< figure src="img/multi-model.png" caption="" >}}
\ No newline at end of file
diff --git a/hugo/content/lessons/top-seven-database-paradigms/img/.gitkeep b/content/lessons/ts-decorators-by-example/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/top-seven-database-paradigms/img/.gitkeep
rename to content/lessons/ts-decorators-by-example/img/.gitkeep
diff --git a/hugo/content/lessons/ts-decorators-by-example/img/featured.jpg b/content/lessons/ts-decorators-by-example/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/ts-decorators-by-example/img/featured.jpg
rename to content/lessons/ts-decorators-by-example/img/featured.jpg
diff --git a/hugo/content/lessons/ts-decorators-by-example/img/featured.png b/content/lessons/ts-decorators-by-example/img/featured.png
similarity index 100%
rename from hugo/content/lessons/ts-decorators-by-example/img/featured.png
rename to content/lessons/ts-decorators-by-example/img/featured.png
diff --git a/hugo/content/lessons/ts-decorators-by-example/img/featured.webp b/content/lessons/ts-decorators-by-example/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/ts-decorators-by-example/img/featured.webp
rename to content/lessons/ts-decorators-by-example/img/featured.webp
diff --git a/hugo/content/lessons/ts-decorators-by-example/img/react-hooks-gamechanger.png b/content/lessons/ts-decorators-by-example/img/react-hooks-gamechanger.png
similarity index 100%
rename from hugo/content/lessons/ts-decorators-by-example/img/react-hooks-gamechanger.png
rename to content/lessons/ts-decorators-by-example/img/react-hooks-gamechanger.png
diff --git a/content/lessons/ts-decorators-by-example/index.md b/content/lessons/ts-decorators-by-example/index.md
new file mode 100644
index 000000000..dc2517a37
--- /dev/null
+++ b/content/lessons/ts-decorators-by-example/index.md
@@ -0,0 +1,253 @@
+---
+title: TypeScript Decorators by Example
+lastmod: 2019-02-03T09:39:23-07:00
+publishdate: 2019-02-03T09:39:23-07:00
+author: Jeff Delaney
+draft: false
+description: Learn how to use TypeScript decorators to create elegant abstractions with JavaScript code.
+tags:
+ - typescript
+ - react
+ - angular
+
+youtube: O6A-u_FoEX8
+github: https://github.com/fireship-io/163-typescript-decorators-examples
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+One of coolest, yet least approachable features in TypeScript is the [Decorator](https://www.typescriptlang.org/docs/handbook/decorators.html). We see Decorators implemented by the Angular Framework for classes like `@Component`, properties like `@ViewChild`, and methods like `@HostListener`, but have you ever considered building your own from scratch? They seem magical 🍄 in practice, but they are just JavaScript functions that allow us to annotate our code or hook into its behavior - this is known as [Metaprogramming](https://en.wikipedia.org/wiki/Metaprogramming).
+
+There are five ways to use decorators and we will look at examples of each one.
+
+- class declaration
+- property
+- method
+- parameter
+- accessor
+
+
+Decorators are very good at creating abstractions - almost too good. While it is tempting to create a decorator for all of the things, they are best suited for stable logic that needs to be duplicated in many places.
+
+
+
+## Class Decorator
+
+A class decorator makes it possible to intercept the `constructor` of class. They are called when the class is declared, not when a new instance is instantiated.
+
+Side note - one of the most powerful characteristics of a decoractor is its ability to *reflect metadata*, but the casual user will rarely need this feature. It is more suitable for use in frameworks, like the Angular Compiler for example, that need to to analyze the codebase to build the final app bundle.
+
+### Example
+
+**Real World Use Case:** When a class is decorated you have to be careful with inheritence because its decendents will not inherit the decorators. Let's freeze the class to prevent inheritence completely.
+
+{{< file "ngts" "hook.component.ts" >}}
+```typescript
+@Frozen
+class IceCream {}
+
+function Frozen(constructor: Function) {
+ Object.freeze(constructor);
+ Object.freeze(constructor.prototype);
+}
+
+console.log(Object.isFrozen(IceCream)); // true
+
+class FroYo extends IceCream {} // error, cannot be extended
+```
+
+
+## Property Decorator
+
+
+All of the examples in this guide use *Decorator Factories*. This just means the decorator itself is wrapped in a function so we can pass custom arguments to it, i.e `@Cool('stuff')` Feel free to omit the outer function if you want to apply a decorator without arguments `@Cool` .
+
+
+Property decorators can be extremly useful because they can listen to state changes on a class. To fully understand the next example, it helps to be familar with JavaScript [PropertyDescriptors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty).
+
+### Example
+
+Let's override the flavor property to surround it in emojis. This allows us to set a regular string value, but run additional code on get/set as *middleware*, if you will.
+
+{{< file "ngts" "ice-cream.component.ts" >}}
+```typescript
+export class IceCreamComponent {
+ @Emoji()
+ flavor = 'vanilla';
+}
+
+
+// Property Decorator
+function Emoji() {
+ return function(target: Object, key: string | symbol) {
+
+ let val = target[key];
+
+ const getter = () => {
+ return val;
+ };
+ const setter = (next) => {
+ console.log('updating flavor...');
+ val = `🍦 ${next} 🍦`;
+ };
+
+ Object.defineProperty(target, key, {
+ get: getter,
+ set: setter,
+ enumerable: true,
+ configurable: true,
+ });
+
+ };
+}
+
+```
+
+## Method Decorator
+
+Method decoractors allow us override a method's function, change its control flow, and execute additional code before/after it runs.
+
+### Example
+
+The following decoractor will show a confirm message in the browser before executing the method. If the user clicks cancel, it will be bypassed. Notice how we have two decoractors stacked below - they will be applied from top to bottom.
+
+
+{{< file "ngts" "ice-cream.component.ts" >}}
+```typescript
+export class IceCreamComponent {
+
+ toppings = [];
+
+ @Confirmable('Are you sure?')
+ @Confirmable('Are you super, super sure? There is no going back!')
+ addTopping(topping) {
+ this.toppings.push(topping);
+ }
+
+}
+
+
+// Method Decorator
+function Confirmable(message: string) {
+ return function (target: Object, key: string | symbol, descriptor: PropertyDescriptor) {
+ const original = descriptor.value;
+
+ descriptor.value = function( ... args: any[]) {
+ const allow = confirm(message);
+
+ if (allow) {
+ const result = original.apply(this, args);
+ return result;
+ } else {
+ return null;
+ }
+ };
+
+ return descriptor;
+ };
+}
+
+
+```
+
+## React Hooks for Angular 🤯
+
+You've probably heard that [React Hooks](https://reactjs.org/docs/hooks-intro.html) are a game-changer for the web. Is there any chance Angular can catch up to produce code that is equally beautiful, succinct, and game-changing? Well, yes actually, and it has been able to do this from day one.
+
+{{< figure src="img/react-hooks-gamechanger.png" alt="React hooks game changer results" >}}
+
+### UseState Property Decorator
+
+In react, the *useState* hook provides you with a reactive variable `count` and a setter `setCount`.
+
+
+{{< file "jsx" "hook.jsx" >}}
+```jsx
+import { useState } from 'react';
+
+function Example() {
+ // Declare a new state variable, which we'll call "count"
+ const [count, setCount] = useState(0);
+
+ return (
+
+
You clicked {count} times
+
setCount(count + 1)}>
+ Click me
+
+
You clicked {{count.value}} times
+ Click Me
+ `,
+})
+export class HookComponent {
+ @UseState(0) count; setCount;
+}
+```
+
+And the decoractor implementation is just five lines of code. We just set an initial value, then find the cooresponding
+
+```typescript
+function UseState(seed: any) {
+ return function (target, key) {
+ target[key] = seed;
+ target[`set${key.replace(/^\w/, c => c.toUpperCase())}`] = (val) => target[key] = val;
+ };
+}
+```
+
+
+### UseEffect Method Decorator
+
+The [effect hook](https://reactjs.org/docs/hooks-effect.html) hook simply consolidates the component lifecycle of `componentDidMount` and `componentDidUpdate` into a single callback.
+
+
+{{< file "jsx" "hook.jsx" >}}
+```jsx
+ useEffect(() => {
+ // Update the document title using the browser API
+ document.title = `You clicked ${count} times`;
+ });
+```
+
+This is very easy to emulate with a method decorator because we can apply the function descriptor to Angular's equivelent `ngOnInit` and `ngAfterViewChecked` lifecycle hooks.
+
+{{< file "ngts" "hook.component.ts" >}}
+```typescript
+@Component(...)
+export class AppComponent {
+ @UseEffect()
+ onEffect() {
+ document.title = `You clicked ${this.count.value} times`;
+ }
+}
+
+
+/// Implementation Details:
+
+function UseEffect() {
+ return function (target, key, descriptor) {
+ target.ngOnInit = descriptor.value;
+ target.ngAfterViewChecked = descriptor.value;
+ };
+}
+```
diff --git a/hugo/content/lessons/ts-decorators-by-example/img/.gitkeep b/content/lessons/twitter-bot-oauth2-tutorial/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/ts-decorators-by-example/img/.gitkeep
rename to content/lessons/twitter-bot-oauth2-tutorial/img/.gitkeep
diff --git a/hugo/content/lessons/twitter-bot-oauth2-tutorial/img/featured.jpg b/content/lessons/twitter-bot-oauth2-tutorial/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/twitter-bot-oauth2-tutorial/img/featured.jpg
rename to content/lessons/twitter-bot-oauth2-tutorial/img/featured.jpg
diff --git a/hugo/content/lessons/twitter-bot-oauth2-tutorial/img/featured.png b/content/lessons/twitter-bot-oauth2-tutorial/img/featured.png
similarity index 100%
rename from hugo/content/lessons/twitter-bot-oauth2-tutorial/img/featured.png
rename to content/lessons/twitter-bot-oauth2-tutorial/img/featured.png
diff --git a/hugo/content/lessons/twitter-bot-oauth2-tutorial/img/featured.webp b/content/lessons/twitter-bot-oauth2-tutorial/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/twitter-bot-oauth2-tutorial/img/featured.webp
rename to content/lessons/twitter-bot-oauth2-tutorial/img/featured.webp
diff --git a/hugo/content/lessons/twitter-bot-oauth2-tutorial/index.md b/content/lessons/twitter-bot-oauth2-tutorial/index.md
similarity index 100%
rename from hugo/content/lessons/twitter-bot-oauth2-tutorial/index.md
rename to content/lessons/twitter-bot-oauth2-tutorial/index.md
diff --git a/hugo/content/lessons/twitter-bot-oauth2-tutorial/img/.gitkeep b/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/twitter-bot-oauth2-tutorial/img/.gitkeep
rename to content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/.gitkeep
diff --git a/hugo/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/featured.jpg b/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/featured.jpg
rename to content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/featured.jpg
diff --git a/hugo/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/featured.png b/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/featured.png
similarity index 100%
rename from hugo/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/featured.png
rename to content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/featured.png
diff --git a/hugo/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/featured.webp b/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/featured.webp
rename to content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/featured.webp
diff --git a/hugo/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/follow.gif b/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/follow.gif
similarity index 100%
rename from hugo/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/follow.gif
rename to content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/follow.gif
diff --git a/hugo/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/index.md b/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/index.md
similarity index 100%
rename from hugo/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/index.md
rename to content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/index.md
diff --git a/hugo/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/.gitkeep b/content/lessons/two-factor-auth-firebase/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/twitter-inspired-follow-system-with-firebase-and-angular/img/.gitkeep
rename to content/lessons/two-factor-auth-firebase/img/.gitkeep
diff --git a/hugo/content/lessons/two-factor-auth-firebase/img/2fa-firebase.png b/content/lessons/two-factor-auth-firebase/img/2fa-firebase.png
similarity index 100%
rename from hugo/content/lessons/two-factor-auth-firebase/img/2fa-firebase.png
rename to content/lessons/two-factor-auth-firebase/img/2fa-firebase.png
diff --git a/hugo/content/lessons/two-factor-auth-firebase/img/enable-identity-platform.png b/content/lessons/two-factor-auth-firebase/img/enable-identity-platform.png
similarity index 100%
rename from hugo/content/lessons/two-factor-auth-firebase/img/enable-identity-platform.png
rename to content/lessons/two-factor-auth-firebase/img/enable-identity-platform.png
diff --git a/hugo/content/lessons/two-factor-auth-firebase/img/featured.jpg b/content/lessons/two-factor-auth-firebase/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/two-factor-auth-firebase/img/featured.jpg
rename to content/lessons/two-factor-auth-firebase/img/featured.jpg
diff --git a/hugo/content/lessons/two-factor-auth-firebase/img/featured.png b/content/lessons/two-factor-auth-firebase/img/featured.png
similarity index 100%
rename from hugo/content/lessons/two-factor-auth-firebase/img/featured.png
rename to content/lessons/two-factor-auth-firebase/img/featured.png
diff --git a/hugo/content/lessons/two-factor-auth-firebase/img/featured.webp b/content/lessons/two-factor-auth-firebase/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/two-factor-auth-firebase/img/featured.webp
rename to content/lessons/two-factor-auth-firebase/img/featured.webp
diff --git a/hugo/content/lessons/two-factor-auth-firebase/img/mfa-email.png b/content/lessons/two-factor-auth-firebase/img/mfa-email.png
similarity index 100%
rename from hugo/content/lessons/two-factor-auth-firebase/img/mfa-email.png
rename to content/lessons/two-factor-auth-firebase/img/mfa-email.png
diff --git a/hugo/content/lessons/two-factor-auth-firebase/img/mfa-text.png b/content/lessons/two-factor-auth-firebase/img/mfa-text.png
similarity index 100%
rename from hugo/content/lessons/two-factor-auth-firebase/img/mfa-text.png
rename to content/lessons/two-factor-auth-firebase/img/mfa-text.png
diff --git a/hugo/content/lessons/two-factor-auth-firebase/index.md b/content/lessons/two-factor-auth-firebase/index.md
similarity index 100%
rename from hugo/content/lessons/two-factor-auth-firebase/index.md
rename to content/lessons/two-factor-auth-firebase/index.md
diff --git a/hugo/content/lessons/two-factor-auth-firebase/img/.gitkeep b/content/lessons/typeahead-autocomplete-with-firestore/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/two-factor-auth-firebase/img/.gitkeep
rename to content/lessons/typeahead-autocomplete-with-firestore/img/.gitkeep
diff --git a/hugo/content/lessons/typeahead-autocomplete-with-firestore/img/featured.jpg b/content/lessons/typeahead-autocomplete-with-firestore/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/typeahead-autocomplete-with-firestore/img/featured.jpg
rename to content/lessons/typeahead-autocomplete-with-firestore/img/featured.jpg
diff --git a/hugo/content/lessons/typeahead-autocomplete-with-firestore/img/featured.png b/content/lessons/typeahead-autocomplete-with-firestore/img/featured.png
similarity index 100%
rename from hugo/content/lessons/typeahead-autocomplete-with-firestore/img/featured.png
rename to content/lessons/typeahead-autocomplete-with-firestore/img/featured.png
diff --git a/hugo/content/lessons/typeahead-autocomplete-with-firestore/img/featured.webp b/content/lessons/typeahead-autocomplete-with-firestore/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/typeahead-autocomplete-with-firestore/img/featured.webp
rename to content/lessons/typeahead-autocomplete-with-firestore/img/featured.webp
diff --git a/hugo/content/lessons/typeahead-autocomplete-with-firestore/img/searchable-index-firestore.gif b/content/lessons/typeahead-autocomplete-with-firestore/img/searchable-index-firestore.gif
similarity index 100%
rename from hugo/content/lessons/typeahead-autocomplete-with-firestore/img/searchable-index-firestore.gif
rename to content/lessons/typeahead-autocomplete-with-firestore/img/searchable-index-firestore.gif
diff --git a/hugo/content/lessons/typeahead-autocomplete-with-firestore/img/typeahead-firestore-demo.gif b/content/lessons/typeahead-autocomplete-with-firestore/img/typeahead-firestore-demo.gif
similarity index 100%
rename from hugo/content/lessons/typeahead-autocomplete-with-firestore/img/typeahead-firestore-demo.gif
rename to content/lessons/typeahead-autocomplete-with-firestore/img/typeahead-firestore-demo.gif
diff --git a/hugo/content/lessons/typeahead-autocomplete-with-firestore/index.md b/content/lessons/typeahead-autocomplete-with-firestore/index.md
similarity index 100%
rename from hugo/content/lessons/typeahead-autocomplete-with-firestore/index.md
rename to content/lessons/typeahead-autocomplete-with-firestore/index.md
diff --git a/hugo/content/lessons/typeahead-autocomplete-with-firestore/img/.gitkeep b/content/lessons/typescript-design-patterns/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/typeahead-autocomplete-with-firestore/img/.gitkeep
rename to content/lessons/typescript-design-patterns/img/.gitkeep
diff --git a/hugo/content/lessons/typescript-design-patterns/img/featured.jpg b/content/lessons/typescript-design-patterns/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/typescript-design-patterns/img/featured.jpg
rename to content/lessons/typescript-design-patterns/img/featured.jpg
diff --git a/hugo/content/lessons/typescript-design-patterns/img/featured.png b/content/lessons/typescript-design-patterns/img/featured.png
similarity index 100%
rename from hugo/content/lessons/typescript-design-patterns/img/featured.png
rename to content/lessons/typescript-design-patterns/img/featured.png
diff --git a/hugo/content/lessons/typescript-design-patterns/img/featured.webp b/content/lessons/typescript-design-patterns/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/typescript-design-patterns/img/featured.webp
rename to content/lessons/typescript-design-patterns/img/featured.webp
diff --git a/content/lessons/typescript-design-patterns/index.md b/content/lessons/typescript-design-patterns/index.md
new file mode 100644
index 000000000..498836968
--- /dev/null
+++ b/content/lessons/typescript-design-patterns/index.md
@@ -0,0 +1,334 @@
+---
+title: 10 Design Patterns in TypeScript
+lastmod: 2022-03-13T14:42:50-07:00
+publishdate: 2022-03-13T14:42:50-07:00
+author: Jeff Delaney
+draft: false
+description: A breakdown 10 software design patterns in TypeScript.
+tags:
+ - typescript
+
+youtube: tv-_1er1mWI
+# github:
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+[Design patterns](https://en.wikipedia.org/wiki/Design_Patterns) is a highly influential book published in 1994 by four computer scientists called the *Gang of Four*. It was originally aimed at C++ developers, but has since become a book for anyone interested in object-oriented software design.
+
+In the following lesson, we will look at 10 different patterns from this book with simplified modern examples in TypeScript. For additional patterns and examples, check out [Refactoring Guru](https://refactoring.guru).
+
+## Creational
+
+Creational patterns are related to the creation of new objects.
+
+### Singleton
+
+A singleton is an object that can only be instantiated once. It is useful fo implementing a global object that can be accessed from anywhere in the application.
+
+{{< file "ts" "software.ts" >}}
+```typescript
+class Settings {
+
+ static instance: Settings;
+ public readonly mode = 'dark';
+
+ // prevent new with private constructor
+ private constructor() {
+
+ }
+
+ static getInstance(): Settings {
+ if (!Settings.instance) {
+ Settings.instance = new Settings();
+ }
+
+ return Settings.instance;
+ }
+
+}
+
+const settings = new Settings() // throws error
+const settings = Settings.getInstance();
+```
+
+### Prototype
+
+Prototype allows objects to be clones of other objects, rather then extended via inheritance.
+
+{{< file "ts" "software.ts" >}}
+```typescript
+const zombie = {
+ eatBrains() {
+ return 'yum 🧠';
+ }
+}
+
+const chad = Object.create(zombie, { name: { value: 'chad'} });
+
+chad.__proto__;
+Object.getPrototypeOf(chad);
+
+const babyChad = Object.create(chad, { baby: { value: true } });
+
+```
+### Factory
+
+A factory is a method or function that creates an object, or a set of objects, without exposing the creation logic to the client.
+
+{{< file "ts" "software.ts" >}}
+```typescript
+class IOSButton { }
+
+class AndroidButton { }
+
+// Without Factory
+const button1 = os === 'ios' ? new IOSButton() : new AndroidButton()
+const button2 = os === 'ios' ? new IOSButton() : new AndroidButton()
+
+class ButtonFactory {
+ createButton(os: string): IOSButton | AndroidButton {
+ if (os === 'ios') {
+ return new IOSButton();
+ } else {
+ return new AndroidButton();
+ }
+ }
+}
+
+// With Factory
+const factory = new ButtonFactory();
+const btn1 = factory.createButton(os);
+const btn2 = factory.createButton(os);
+```
+### Builder
+
+The builder pattern is a creational design pattern that lets you construct complex objects step by step. It JavaScript, we can achieve this with method chaining.
+
+{{< file "ts" "software.ts" >}}
+```typescript
+class HotDog {
+ constructor(
+ public bread: string,
+ public ketchup?: boolean,
+ public mustard?: boolean,
+ public kraut?: boolean
+ ) {}
+
+ addKetchup() {
+ this.ketchup = true;
+ return this;
+ }
+ addMustard() {
+ this.mustard = true;
+ return this;
+ }
+ addKraut() {
+ this.kraut = true;
+ return this;
+ }
+}
+
+const myLunch = new HotDog('gluten free')
+ .addKetchup()
+ .addMustard()
+ .addKraut();
+```
+## Structural
+
+Structural patterns are primarily used to handle relationships between objects.
+
+### Facade
+
+A facade is a class that provides a simplified API for larger body of code. It is often to used to hide low-level details of a subsystem.
+
+{{< file "ts" "software.ts" >}}
+```typescript
+class PlumbingSystem {
+ // low evel access to plubming system
+ setPressure(v: number) {}
+ turnOn() {}
+ turnOff() {}
+}
+
+class ElectricalSystem {
+ // low evel access to electrical system
+ setVoltage(v: number) {}
+ turnOn() {}
+ turnOff() {}
+}
+
+class House {
+
+ private plumbing = new PlumbingSystem();
+ private electrical = new ElectricalSystem();
+
+ public turnOnSystems() {
+ this.electrical.setVoltage(120);
+ this.electrical.turnOn();
+ this.plumbing.setPressure(500);
+ this.plumbing.turnOn();
+ }
+
+ public shutDown() {
+ this.plumbing.turnOff();
+ this.electrical.turnOff();
+ }
+
+}
+
+const client = new House();
+client.turnOnSystems();
+client.shutDown();
+```
+### Proxy
+
+The proxy pattern lets you provide a substitute or placeholder for another object to control access to it. For example, [VueJS uses a Proxy](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vu) to intercept and modify data on objects.
+
+{{< file "ts" "software.ts" >}}
+```typescript
+const original = { name: 'jeff' };
+
+const reactive = new Proxy(original, {
+ get(target, key) {
+ console.log('Tracking: ', key);
+ return target[key];
+ },
+ set(target, key, value) {
+ console.log('updating UI...');
+ return Reflect.set(target, key, value);
+ },
+});
+
+reactive.name; // 'Tracking: name'
+
+reactive.name = 'bob'; // 'updating UI...'
+```
+
+## Behavioral
+
+Behavioral patterns are used to identify communication between objects.
+
+### Iterator
+
+The iterator pattern is used to traverse a collection of elements. Most programming languages provide abstrations for iteration like the `for` loop. However, you can create your own iterators in JavaScript by using the `Symbol.iterator` property. The code below creates a custom range function that can be used in a regular `for` loop.
+
+{{< file "ts" "software.ts" >}}
+```typescript
+function range(start: number, end: number, step=1) {
+ return {
+ [Symbol.iterator]() {
+ return this;
+ },
+ next() {
+ if (start < end) {
+ start = start+step;
+ return { value: start, done: false };
+ }
+ return { done: true, value: end };
+ }
+ }
+}
+
+for (const n of range(0, 100, 5)) {
+ console.log(n);
+}
+
+```
+### Observer
+
+The observer pattern is used to notify a set of interested parties when a state change occurs. The [rxjs]() library is a popular implementation of this pattern.
+
+{{< file "ts" "software.ts" >}}
+```typescript
+import { Subject } from 'rxjs';
+
+const news = new Subject();
+
+const tv1 = news.subscribe(v => console.log(v + 'via Den TV'));
+const tv2 = news.subscribe(v => console.log(v + 'via Batcave TV'));
+const tv3 = news.subscribe(v => console.log(v + 'via Airport TV'));
+
+news.next('Breaking news: ');
+news.next('The war is over ');
+
+tv1.unsubscribe();
+```
+### Mediator
+
+The mediator is provids a middle layer between objects that communicate with each other. This pattern implemented frequently in JavaScript libaries via plugin systems (like Webpack) and middleware (like Express).
+
+{{< file "ts" "software.ts" >}}
+```typescript
+import express from 'express';
+const app = express();
+
+// Middleware logic
+function mediator(req, res, next) {
+ console.log('Request Type:', req.method)
+ next()
+}
+
+app.use(mediator);
+
+// Mediator runs before each route handler
+app.get('/', (req, res) => {
+ res.send('Hello World');
+});
+
+app.get('/about', (req, res) => {
+ res.send('About');
+});
+
+```
+### State
+
+The state pattern is used to encapsulate the state of an object so that it can be changed and accessed independently of the object. In JavaScript, finite state machines are sometimes used to maintain a predictable flow of data in an application via libraries like [XState](https://xstate.js.org/).
+
+{{< file "ts" "software.ts" >}}
+```typescript
+interface State {
+ think(): string;
+}
+
+class HappyState implements State {
+ think() {
+ return 'I am happy 🙂';
+ }
+}
+
+class SadState implements State {
+ think() {
+ return 'I am sad 🙁';
+ }
+}
+
+
+class Human {
+ state: State;
+
+ constructor() {
+ this.state = new HappyState();
+ }
+
+ changeState(state) {
+ this.state = state;
+ }
+
+ think() {
+ return this.state.think();
+ }
+
+}
+
+const human = new Human();
+console.log(human.think());
+human.changeState(new SadState());
+console.log(human.think());
+```
diff --git a/hugo/content/lessons/typescript-design-patterns/img/.gitkeep b/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/typescript-design-patterns/img/.gitkeep
rename to content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/.gitkeep
diff --git a/hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/featured.jpg b/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/featured.jpg
rename to content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/featured.jpg
diff --git a/hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/featured.png b/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/featured.png
similarity index 100%
rename from hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/featured.png
rename to content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/featured.png
diff --git a/hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/featured.webp b/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/featured.webp
rename to content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/featured.webp
diff --git a/hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/firebase-email-link-auth.png b/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/firebase-email-link-auth.png
similarity index 100%
rename from hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/firebase-email-link-auth.png
rename to content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/firebase-email-link-auth.png
diff --git a/hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/firebase-passwordless.png b/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/firebase-passwordless.png
similarity index 100%
rename from hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/firebase-passwordless.png
rename to content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/firebase-passwordless.png
diff --git a/hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/index.md b/content/lessons/using-passwordless-signup-with-firebase-on-the-web/index.md
similarity index 100%
rename from hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/index.md
rename to content/lessons/using-passwordless-signup-with-firebase-on-the-web/index.md
diff --git a/hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/.gitkeep b/content/lessons/vscode-cloud-coder-tensorflow/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/using-passwordless-signup-with-firebase-on-the-web/img/.gitkeep
rename to content/lessons/vscode-cloud-coder-tensorflow/img/.gitkeep
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/img/coder-gcp-settings.png b/content/lessons/vscode-cloud-coder-tensorflow/img/coder-gcp-settings.png
similarity index 100%
rename from hugo/content/lessons/vscode-cloud-coder-tensorflow/img/coder-gcp-settings.png
rename to content/lessons/vscode-cloud-coder-tensorflow/img/coder-gcp-settings.png
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/img/coder-password.png b/content/lessons/vscode-cloud-coder-tensorflow/img/coder-password.png
similarity index 100%
rename from hugo/content/lessons/vscode-cloud-coder-tensorflow/img/coder-password.png
rename to content/lessons/vscode-cloud-coder-tensorflow/img/coder-password.png
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/img/featured.jpg b/content/lessons/vscode-cloud-coder-tensorflow/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/vscode-cloud-coder-tensorflow/img/featured.jpg
rename to content/lessons/vscode-cloud-coder-tensorflow/img/featured.jpg
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/img/featured.png b/content/lessons/vscode-cloud-coder-tensorflow/img/featured.png
similarity index 100%
rename from hugo/content/lessons/vscode-cloud-coder-tensorflow/img/featured.png
rename to content/lessons/vscode-cloud-coder-tensorflow/img/featured.png
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/img/featured.webp b/content/lessons/vscode-cloud-coder-tensorflow/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/vscode-cloud-coder-tensorflow/img/featured.webp
rename to content/lessons/vscode-cloud-coder-tensorflow/img/featured.webp
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/img/firewall-rule.png b/content/lessons/vscode-cloud-coder-tensorflow/img/firewall-rule.png
similarity index 100%
rename from hugo/content/lessons/vscode-cloud-coder-tensorflow/img/firewall-rule.png
rename to content/lessons/vscode-cloud-coder-tensorflow/img/firewall-rule.png
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/img/kaggle-api.png b/content/lessons/vscode-cloud-coder-tensorflow/img/kaggle-api.png
similarity index 100%
rename from hugo/content/lessons/vscode-cloud-coder-tensorflow/img/kaggle-api.png
rename to content/lessons/vscode-cloud-coder-tensorflow/img/kaggle-api.png
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/img/sine-wave.png b/content/lessons/vscode-cloud-coder-tensorflow/img/sine-wave.png
similarity index 100%
rename from hugo/content/lessons/vscode-cloud-coder-tensorflow/img/sine-wave.png
rename to content/lessons/vscode-cloud-coder-tensorflow/img/sine-wave.png
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/img/vm-ip-link.png b/content/lessons/vscode-cloud-coder-tensorflow/img/vm-ip-link.png
similarity index 100%
rename from hugo/content/lessons/vscode-cloud-coder-tensorflow/img/vm-ip-link.png
rename to content/lessons/vscode-cloud-coder-tensorflow/img/vm-ip-link.png
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/img/vm-open-ssh.png b/content/lessons/vscode-cloud-coder-tensorflow/img/vm-open-ssh.png
similarity index 100%
rename from hugo/content/lessons/vscode-cloud-coder-tensorflow/img/vm-open-ssh.png
rename to content/lessons/vscode-cloud-coder-tensorflow/img/vm-open-ssh.png
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/img/vscode-coder-demo.png b/content/lessons/vscode-cloud-coder-tensorflow/img/vscode-coder-demo.png
similarity index 100%
rename from hugo/content/lessons/vscode-cloud-coder-tensorflow/img/vscode-coder-demo.png
rename to content/lessons/vscode-cloud-coder-tensorflow/img/vscode-coder-demo.png
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/img/vscode-web-warning.png b/content/lessons/vscode-cloud-coder-tensorflow/img/vscode-web-warning.png
similarity index 100%
rename from hugo/content/lessons/vscode-cloud-coder-tensorflow/img/vscode-web-warning.png
rename to content/lessons/vscode-cloud-coder-tensorflow/img/vscode-web-warning.png
diff --git a/content/lessons/vscode-cloud-coder-tensorflow/index.md b/content/lessons/vscode-cloud-coder-tensorflow/index.md
new file mode 100644
index 000000000..7e906f955
--- /dev/null
+++ b/content/lessons/vscode-cloud-coder-tensorflow/index.md
@@ -0,0 +1,109 @@
+---
+title: Use Coder to Run VS Code on Google Cloud
+lastmod: 2019-03-31T05:49:52-07:00
+publishdate: 2019-03-31T05:49:52-07:00
+author: Jeff Delaney
+draft: false
+description: Run VS Code on Google Cloud and configure it for remote frontend development.
+tags:
+ - vscode
+ - gcp
+
+youtube: N5WojMutddQ
+# github:
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+Turning [VS Code](https://code.visualstudio.com/) into a full IDE requires you to carefully blend your favorite extensions and packages for the type of development work you perform. It can take hours or even days to get your development environment fine-tuned for optimal productivity. But what happens upgrade to a new computer? Or need to share your IDE with somebody on the other side of the world? Or maybe you just need more compute resources...
+
+The following lesson will teach you how to use [Coder](https://coder.com/) - a tool that allows you to run VS Code on any cloud and access it from the browser. We will take their open source project [code-server](https://github.com/codercom/code-server) and use it to run VS Code on Google Cloud Platform.
+
+## Run Coder VS Code On GCP
+
+### Create a VM
+
+First, we need to spin up a virtual machine instance on [Google Compute Engine](https://cloud.google.com/compute/). The recommended VM will cost about $0.067 per hour or $48.95 per month. Keep in mind, you can shut down the VM at anytime and billing will be calculated pro-rata to the second. The recommended OS is Ubuntu 16.04.
+
+{{< figure src="img/coder-gcp-settings.png" caption="The recommended VM settings for Coder on GCP" >}}
+
+### SSH into your VM
+
+Now we need to interact with the VM from the command line. Go to the instance details page and click on the SSH button.
+
+{{< figure src="img/vm-open-ssh.png" caption="Start an SSH session with your Google Cloud VM" >}}
+
+
+Find the [latest release of Code Server](https://github.com/codercom/code-server/releases/latest), then download and unzip the release into the VM's file system with the following commands:
+
+{{< file "terminal" "command line" >}}
+```text
+wget https://github.com/codercom/code-server/releases/download/{version}/code-server-{version}-linux-x64.tar.gz
+tar -xvzf code-server-{version}-linux-x64.tar.gz
+```
+
+Execute the binary to start serving VS Code on port 80.
+
+```text
+cd code-server-{version}-linux-x64
+sudo ./code-server -p 80
+```
+
+
+### Access the VS Code on the Web
+
+At this point we have a process for VS Code running and can access it from the web. Find the link to the external IP for the VM, then navigate to it on port 80, for example *https://your-ip-address:80*
+
+{{< figure src="img/vm-ip-link.png" caption="Click on the external IP link" >}}
+
+
+Initially, you will see this warning from the browser. Click *Advanced -> Proceed Anyway*
+
+{{< figure src="img/vscode-web-warning.png" caption="This is not actually unsafe because we own the VM" >}}
+
+You need a password to access the editor, which was automatically generated in the terminal output.
+
+{{< figure src="img/coder-password.png" caption="Copy the password in the middle of the terminal output" >}}
+
+After entering the password you should have access to VS code in the browser.
+
+{{< figure src="img/vscode-coder-demo.png" caption="Done! Access VS Code and your files from any device, anywhere!" >}}
+
+## Frontend Development Configuration
+
+After you have VSCode up and running in the cloud, you will likely want to configure it for frontend development with Angular, React, Vue, etc. Currently, we just have a bare bones VM without Node or NPM installed.
+
+### Install Node
+
+Follow these instructions to [install NodeJS](/snippets/install-nodejs/). This will give you access to the `nvm` command for version management and the `npm` command for package management.
+
+{{< file "terminal" "command line" >}}
+```text
+nvm install 10
+
+npm install @angular/cli -g
+```
+
+
+### Serving a Frontend Application on GCP Compute Engine
+
+By default, GCP only exposes port 80 to inbound TCP traffic. That means if you try to run `ng serve` for Angular, which serves the app on port 4200 for example, it will not be accessible. Generally, I like to serve traffic on port 8080, and we can allow this by setting up a firewall rule like so.
+
+{{< file "terminal" "command line" >}}
+```text
+
+ng new my-app
+cd my-app
+ng serve --port 8080
+```
+
+{{< figure src="img/firewall-rule.png" caption="After creating the rule, make sure to tag your VM with with it under its settings" >}}
+
+
+That's it for now! You now have a basic environment for frontend development in the cloud. You can take this a step further by extracting this code into a Dockerfile for an easy containerized setup on any cloud.
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/img/.gitkeep b/content/lessons/vue-autosaving-forms-with-firestore/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/vscode-cloud-coder-tensorflow/img/.gitkeep
rename to content/lessons/vue-autosaving-forms-with-firestore/img/.gitkeep
diff --git a/hugo/content/lessons/vue-autosaving-forms-with-firestore/img/featured.jpg b/content/lessons/vue-autosaving-forms-with-firestore/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/vue-autosaving-forms-with-firestore/img/featured.jpg
rename to content/lessons/vue-autosaving-forms-with-firestore/img/featured.jpg
diff --git a/hugo/content/lessons/vue-autosaving-forms-with-firestore/img/featured.png b/content/lessons/vue-autosaving-forms-with-firestore/img/featured.png
similarity index 100%
rename from hugo/content/lessons/vue-autosaving-forms-with-firestore/img/featured.png
rename to content/lessons/vue-autosaving-forms-with-firestore/img/featured.png
diff --git a/hugo/content/lessons/vue-autosaving-forms-with-firestore/img/featured.webp b/content/lessons/vue-autosaving-forms-with-firestore/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/vue-autosaving-forms-with-firestore/img/featured.webp
rename to content/lessons/vue-autosaving-forms-with-firestore/img/featured.webp
diff --git a/hugo/content/lessons/vue-autosaving-forms-with-firestore/img/office-autosave.png b/content/lessons/vue-autosaving-forms-with-firestore/img/office-autosave.png
similarity index 100%
rename from hugo/content/lessons/vue-autosaving-forms-with-firestore/img/office-autosave.png
rename to content/lessons/vue-autosaving-forms-with-firestore/img/office-autosave.png
diff --git a/hugo/content/lessons/vue-autosaving-forms-with-firestore/index.md b/content/lessons/vue-autosaving-forms-with-firestore/index.md
similarity index 100%
rename from hugo/content/lessons/vue-autosaving-forms-with-firestore/index.md
rename to content/lessons/vue-autosaving-forms-with-firestore/index.md
diff --git a/hugo/content/lessons/vue-autosaving-forms-with-firestore/img/.gitkeep b/content/lessons/wasm-video-to-gif/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/vue-autosaving-forms-with-firestore/img/.gitkeep
rename to content/lessons/wasm-video-to-gif/img/.gitkeep
diff --git a/hugo/content/lessons/wasm-video-to-gif/img/featured.jpg b/content/lessons/wasm-video-to-gif/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/wasm-video-to-gif/img/featured.jpg
rename to content/lessons/wasm-video-to-gif/img/featured.jpg
diff --git a/hugo/content/lessons/wasm-video-to-gif/img/featured.png b/content/lessons/wasm-video-to-gif/img/featured.png
similarity index 100%
rename from hugo/content/lessons/wasm-video-to-gif/img/featured.png
rename to content/lessons/wasm-video-to-gif/img/featured.png
diff --git a/hugo/content/lessons/wasm-video-to-gif/img/featured.webp b/content/lessons/wasm-video-to-gif/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/wasm-video-to-gif/img/featured.webp
rename to content/lessons/wasm-video-to-gif/img/featured.webp
diff --git a/hugo/content/lessons/wasm-video-to-gif/index.md b/content/lessons/wasm-video-to-gif/index.md
similarity index 100%
rename from hugo/content/lessons/wasm-video-to-gif/index.md
rename to content/lessons/wasm-video-to-gif/index.md
diff --git a/hugo/content/lessons/wasm-video-to-gif/img/.gitkeep b/content/lessons/wavy-backgrounds/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/wasm-video-to-gif/img/.gitkeep
rename to content/lessons/wavy-backgrounds/img/.gitkeep
diff --git a/hugo/content/lessons/wavy-backgrounds/img/css-bubble.png b/content/lessons/wavy-backgrounds/img/css-bubble.png
similarity index 100%
rename from hugo/content/lessons/wavy-backgrounds/img/css-bubble.png
rename to content/lessons/wavy-backgrounds/img/css-bubble.png
diff --git a/hugo/content/lessons/wavy-backgrounds/img/css-wave.png b/content/lessons/wavy-backgrounds/img/css-wave.png
similarity index 100%
rename from hugo/content/lessons/wavy-backgrounds/img/css-wave.png
rename to content/lessons/wavy-backgrounds/img/css-wave.png
diff --git a/hugo/content/lessons/wavy-backgrounds/img/featured.jpg b/content/lessons/wavy-backgrounds/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/wavy-backgrounds/img/featured.jpg
rename to content/lessons/wavy-backgrounds/img/featured.jpg
diff --git a/hugo/content/lessons/wavy-backgrounds/img/featured.png b/content/lessons/wavy-backgrounds/img/featured.png
similarity index 100%
rename from hugo/content/lessons/wavy-backgrounds/img/featured.png
rename to content/lessons/wavy-backgrounds/img/featured.png
diff --git a/hugo/content/lessons/wavy-backgrounds/img/featured.webp b/content/lessons/wavy-backgrounds/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/wavy-backgrounds/img/featured.webp
rename to content/lessons/wavy-backgrounds/img/featured.webp
diff --git a/hugo/content/lessons/wavy-backgrounds/img/svg-blob.png b/content/lessons/wavy-backgrounds/img/svg-blob.png
similarity index 100%
rename from hugo/content/lessons/wavy-backgrounds/img/svg-blob.png
rename to content/lessons/wavy-backgrounds/img/svg-blob.png
diff --git a/hugo/content/lessons/wavy-backgrounds/img/svg-wave.png b/content/lessons/wavy-backgrounds/img/svg-wave.png
similarity index 100%
rename from hugo/content/lessons/wavy-backgrounds/img/svg-wave.png
rename to content/lessons/wavy-backgrounds/img/svg-wave.png
diff --git a/hugo/content/lessons/wavy-backgrounds/index.md b/content/lessons/wavy-backgrounds/index.md
similarity index 100%
rename from hugo/content/lessons/wavy-backgrounds/index.md
rename to content/lessons/wavy-backgrounds/index.md
diff --git a/hugo/content/lessons/wavy-backgrounds/img/.gitkeep b/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/wavy-backgrounds/img/.gitkeep
rename to content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/.gitkeep
diff --git a/hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/angular-weather-app.gif b/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/angular-weather-app.gif
similarity index 100%
rename from hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/angular-weather-app.gif
rename to content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/angular-weather-app.gif
diff --git a/hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/darksky-api.png b/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/darksky-api.png
similarity index 100%
rename from hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/darksky-api.png
rename to content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/darksky-api.png
diff --git a/hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/featured.jpg b/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/featured.jpg
rename to content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/featured.jpg
diff --git a/hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/featured.png b/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/featured.png
similarity index 100%
rename from hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/featured.png
rename to content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/featured.png
diff --git a/hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/featured.webp b/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/featured.webp
rename to content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/featured.webp
diff --git a/hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/weather-icons.png b/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/weather-icons.png
similarity index 100%
rename from hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/weather-icons.png
rename to content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/weather-icons.png
diff --git a/hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/index.md b/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/index.md
similarity index 100%
rename from hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/index.md
rename to content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/index.md
diff --git a/hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/.gitkeep b/content/lessons/web-scraping-guide/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/weather-app-with-the-angular-http-client-and-dark-sky-api/img/.gitkeep
rename to content/lessons/web-scraping-guide/img/.gitkeep
diff --git a/hugo/content/lessons/web-scraping-guide/img/demo-link-preview.png b/content/lessons/web-scraping-guide/img/demo-link-preview.png
similarity index 100%
rename from hugo/content/lessons/web-scraping-guide/img/demo-link-preview.png
rename to content/lessons/web-scraping-guide/img/demo-link-preview.png
diff --git a/hugo/content/lessons/web-scraping-guide/img/featured.jpg b/content/lessons/web-scraping-guide/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/web-scraping-guide/img/featured.jpg
rename to content/lessons/web-scraping-guide/img/featured.jpg
diff --git a/hugo/content/lessons/web-scraping-guide/img/featured.png b/content/lessons/web-scraping-guide/img/featured.png
similarity index 100%
rename from hugo/content/lessons/web-scraping-guide/img/featured.png
rename to content/lessons/web-scraping-guide/img/featured.png
diff --git a/hugo/content/lessons/web-scraping-guide/img/featured.webp b/content/lessons/web-scraping-guide/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/web-scraping-guide/img/featured.webp
rename to content/lessons/web-scraping-guide/img/featured.webp
diff --git a/hugo/content/lessons/web-scraping-guide/img/photo-1481755927257-18d775d58e4d.jpg b/content/lessons/web-scraping-guide/img/photo-1481755927257-18d775d58e4d.jpg
similarity index 100%
rename from hugo/content/lessons/web-scraping-guide/img/photo-1481755927257-18d775d58e4d.jpg
rename to content/lessons/web-scraping-guide/img/photo-1481755927257-18d775d58e4d.jpg
diff --git a/hugo/content/lessons/web-scraping-guide/img/photo-1527631120902-378417754324.jpg b/content/lessons/web-scraping-guide/img/photo-1527631120902-378417754324.jpg
similarity index 100%
rename from hugo/content/lessons/web-scraping-guide/img/photo-1527631120902-378417754324.jpg
rename to content/lessons/web-scraping-guide/img/photo-1527631120902-378417754324.jpg
diff --git a/hugo/content/lessons/web-scraping-guide/img/puppeteer-instagram-login.png b/content/lessons/web-scraping-guide/img/puppeteer-instagram-login.png
similarity index 100%
rename from hugo/content/lessons/web-scraping-guide/img/puppeteer-instagram-login.png
rename to content/lessons/web-scraping-guide/img/puppeteer-instagram-login.png
diff --git a/content/lessons/web-scraping-guide/index.md b/content/lessons/web-scraping-guide/index.md
new file mode 100644
index 000000000..60528d68c
--- /dev/null
+++ b/content/lessons/web-scraping-guide/index.md
@@ -0,0 +1,217 @@
+---
+title: Modern Web Scraping Guide
+lastmod: 2019-07-17T13:01:44-07:00
+publishdate: 2019-07-17T13:01:44-07:00
+author: Jeff Delaney
+draft: false
+description: Build a web scraper from scratch with Firebase Cloud Functions, Puppeteer, and NodeJS
+tags:
+ - node
+ - firebase
+ - cloud-functions
+ - puppeteer
+
+youtube: dXjKh66BR2U
+github: https://github.com/fireship-io/198-web-scraper-link-preview
+# disable_toc: true
+# disable_qna: true
+
+# courses
+# step: 0
+
+# versions:
+# rxdart: 0.20
+---
+
+
+In a perfect world, every website provides free access to data with an easy-to-use API... but the world is far from perfect. However, it is possible to use web scraping techniques to manually extract data from websites by brute force. The following lesson examines two different types of [web scrapers](https://en.wikipedia.org/wiki/Web_scraping) and implements them with NodeJS and Firebase Cloud Functions.
+
+
+## Initial Setup
+
+Let's start by initializing Firebase Cloud Functions with JavaScript.
+
+{{< file "terminal" "command line" >}}
+```text
+firebase init functions
+cd functions
+
+npm run serve
+```
+
+
+
+## Strategy A - Basic HTTP Request
+
+
+The first strategy makes an HTTP request to a URL and expects an HTML document string as the response. Retrieving the HTML is easy, but there are no browser APIs in NodeJS, so we need a tool like [cheerio](https://cheerio.js.org/) to process DOM elements and find the necessary metatags.
+
+The advantage 👍 of this approach is that it is fast and simple, but the disadvantage 👎 is that it will not execute JavaScript and/or wait for dynamically rendered content on the client.
+
+
+### Link Preview Function
+
+💡 It is not possible to generate link previews entirely from the frontend due to [Cross-Site Scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerabilities.
+
+An excellent use-case for this strategy is a *link preview* service that shows the name, description, and image of a 3rd party website when a URL posted into an app. For example, when you post a link into an app like Twitter, Facebook, or Slack, it renders out a nice looking preview.
+
+{{< figure src="img/demo-link-preview.png" alt="Example of link previews from metatags in Slack" >}}
+
+
+Link previews are made possible by scraping the meta tags from `` of an HTML page. The code requests a URL, then looks for [Twitter](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html) and [OpenGraph](http://ogp.me/) metatags in the response body. Several supporting libraries are used to make the code more reliable and simple.
+
+- **cheerio** is a NodeJS implementation of jQuery.
+- **node-fetch** is a NodeJS implementation of the browser [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
+- **get-urls** is a utility for extracting URLs from text.
+
+{{< file "terminal" "command line" >}}
+```text
+cd functions
+npm i cheerio node-fetch get-urls cors
+```
+
+
+Let's start by building a
+
+{{< file "js" "functions/index.js" >}}
+```js
+const cheerio = require('cheerio');
+const getUrls = require('get-urls');
+const fetch = require('node-fetch');
+
+const scrapeMetatags = (text) => {
+
+
+
+ const urls = Array.from( getUrls(text) );
+
+ const requests = urls.map(async url => {
+
+ const res = await fetch(url);
+
+ const html = await res.text();
+ const $ = cheerio.load(html);
+
+ const getMetatag = (name) =>
+ $(`meta[name=${name}]`).attr('content') ||
+ $(`meta[name="og:${name}"]`).attr('content') ||
+ $(`meta[name="twitter:${name}"]`).attr('content');
+
+ return {
+ url,
+ title: $('title').first().text(),
+ favicon: $('link[rel="shortcut icon"]').attr('href'),
+ // description: $('meta[name=description]').attr('content'),
+ description: getMetatag('description'),
+ image: getMetatag('image'),
+ author: getMetatag('author'),
+ }
+ });
+
+
+ return Promise.all(requests);
+
+}
+```
+
+
+
+### HTTP Function
+
+You can use the scraper in an HTTP Cloud Function.
+
+{{< file "js" "functions/index.js" >}}
+```js
+
+const functions = require('firebase-functions');
+const cors = require('cors')({ origin: true});
+
+
+exports.scraper = functions.https.onRequest( async (request, response) => {
+ cors(request, response, async () => {
+
+
+ const body = JSON.parse(request.body);
+ const data = await scrapeMetatags(body.text);
+
+ response.send(data)
+
+ });
+});
+
+```
+
+
+At this point, you should receive a response by opening `http://localhost:5000/YOUR-PROJECT/REGION/scraper`
+
+## Strategy B - Puppeteer for Full Browser Rendering
+
+What if you want to scrape a single page JavaScript app, like Angular or React? Or maybe you want to click buttons and/or log into an account before scraping? These tasks require a fully emulated browser environment that can parse JS and handle events.
+
+
+[Puppeteer](https://github.com/GoogleChrome/puppeteer) is a tool built on top of headless chrome, which allows you to run the Chrome browser on the server. In other words, you can fully interact with a website before extracting the data you need.
+
+
+### Instagram Scraper
+
+Instagram on the web uses React, which means we won't see any dynamic content util the page is fully loaded. [Puppeteer](https://try-puppeteer.appspot.com/) is available in the Cloud Functions runtime, allowing you to spin up a chrome browser on your server. It will render JavaScript and handle events just like the browser you're using right now.
+
+First, the function logs into a real instagram account. The `page.type` method will find the corresponding DOM element and type characters into it. Once logged in, we navigate to a specific username and wait for the `img` tags to render on the screen, then scrape the *src* attribute from them.
+
+{{< figure src="img/puppeteer-instagram-login.png" alt="Sign into a real Instagram account with Puppeteer." >}}
+
+
+
+{{< file "js" "index.js" >}}
+```js
+const puppeteer = require('puppeteer');
+
+const scrapeImages = async (username) => {
+ const browser = await puppeteer.launch( { headless: true });
+ const page = await browser.newPage();
+
+ await page.goto('https://www.instagram.com/accounts/login/');
+
+
+ // Login form
+ await page.screenshot({path: '1.png'});
+
+ await page.type('[name=username]', 'fireship_dev');
+
+ await page.type('[name=password]', 'some-pa$$word');
+
+ await page.screenshot({path: '2.png'});
+
+ await page.click('[type=submit]');
+
+ // Social Page
+
+ await page.waitFor(5000);
+
+ await page.goto(`https://www.instagram.com/${username}`);
+
+ await page.waitForSelector('img ', {
+ visible: true,
+ });
+
+
+ await page.screenshot({path: '3.png'});
+
+
+ // Execute code in the DOM
+ const data = await page.evaluate( () => {
+
+ const images = document.querySelectorAll('img');
+
+ const urls = Array.from(images).map(v => v.src);
+
+ return urls
+ });
+
+ await browser.close();
+
+ console.log(data);
+
+ return data;
+}
+```
diff --git a/hugo/content/lessons/web-scraping-guide/img/.gitkeep b/content/lessons/web3-solidity-hardhat-react-tutorial/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/web-scraping-guide/img/.gitkeep
rename to content/lessons/web3-solidity-hardhat-react-tutorial/img/.gitkeep
diff --git a/hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/featured.jpg b/content/lessons/web3-solidity-hardhat-react-tutorial/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/featured.jpg
rename to content/lessons/web3-solidity-hardhat-react-tutorial/img/featured.jpg
diff --git a/hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/featured.png b/content/lessons/web3-solidity-hardhat-react-tutorial/img/featured.png
similarity index 100%
rename from hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/featured.png
rename to content/lessons/web3-solidity-hardhat-react-tutorial/img/featured.png
diff --git a/hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/featured.webp b/content/lessons/web3-solidity-hardhat-react-tutorial/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/featured.webp
rename to content/lessons/web3-solidity-hardhat-react-tutorial/img/featured.webp
diff --git a/hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/hardhart-deploy-contract.png b/content/lessons/web3-solidity-hardhat-react-tutorial/img/hardhart-deploy-contract.png
similarity index 100%
rename from hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/hardhart-deploy-contract.png
rename to content/lessons/web3-solidity-hardhat-react-tutorial/img/hardhart-deploy-contract.png
diff --git a/hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/ipfs-folder.png b/content/lessons/web3-solidity-hardhat-react-tutorial/img/ipfs-folder.png
similarity index 100%
rename from hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/ipfs-folder.png
rename to content/lessons/web3-solidity-hardhat-react-tutorial/img/ipfs-folder.png
diff --git a/hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/nft-demo.png b/content/lessons/web3-solidity-hardhat-react-tutorial/img/nft-demo.png
similarity index 100%
rename from hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/nft-demo.png
rename to content/lessons/web3-solidity-hardhat-react-tutorial/img/nft-demo.png
diff --git a/hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/open-zeppelin-wizard.png b/content/lessons/web3-solidity-hardhat-react-tutorial/img/open-zeppelin-wizard.png
similarity index 100%
rename from hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/open-zeppelin-wizard.png
rename to content/lessons/web3-solidity-hardhat-react-tutorial/img/open-zeppelin-wizard.png
diff --git a/hugo/content/lessons/web3-solidity-hardhat-react-tutorial/index.md b/content/lessons/web3-solidity-hardhat-react-tutorial/index.md
similarity index 100%
rename from hugo/content/lessons/web3-solidity-hardhat-react-tutorial/index.md
rename to content/lessons/web3-solidity-hardhat-react-tutorial/index.md
diff --git a/hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/.gitkeep b/content/lessons/webrtc-firebase-video-chat/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/web3-solidity-hardhat-react-tutorial/img/.gitkeep
rename to content/lessons/webrtc-firebase-video-chat/img/.gitkeep
diff --git a/hugo/content/lessons/webrtc-firebase-video-chat/img/featured.jpg b/content/lessons/webrtc-firebase-video-chat/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/webrtc-firebase-video-chat/img/featured.jpg
rename to content/lessons/webrtc-firebase-video-chat/img/featured.jpg
diff --git a/hugo/content/lessons/webrtc-firebase-video-chat/img/featured.png b/content/lessons/webrtc-firebase-video-chat/img/featured.png
similarity index 100%
rename from hugo/content/lessons/webrtc-firebase-video-chat/img/featured.png
rename to content/lessons/webrtc-firebase-video-chat/img/featured.png
diff --git a/hugo/content/lessons/webrtc-firebase-video-chat/img/featured.webp b/content/lessons/webrtc-firebase-video-chat/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/webrtc-firebase-video-chat/img/featured.webp
rename to content/lessons/webrtc-firebase-video-chat/img/featured.webp
diff --git a/hugo/content/lessons/webrtc-firebase-video-chat/img/webrtc-diagram.svg b/content/lessons/webrtc-firebase-video-chat/img/webrtc-diagram.svg
similarity index 100%
rename from hugo/content/lessons/webrtc-firebase-video-chat/img/webrtc-diagram.svg
rename to content/lessons/webrtc-firebase-video-chat/img/webrtc-diagram.svg
diff --git a/hugo/content/lessons/webrtc-firebase-video-chat/img/webrtc-firestore-calls.png b/content/lessons/webrtc-firebase-video-chat/img/webrtc-firestore-calls.png
similarity index 100%
rename from hugo/content/lessons/webrtc-firebase-video-chat/img/webrtc-firestore-calls.png
rename to content/lessons/webrtc-firebase-video-chat/img/webrtc-firestore-calls.png
diff --git a/hugo/content/lessons/webrtc-firebase-video-chat/img/webrtc-firestore-candidates.png b/content/lessons/webrtc-firebase-video-chat/img/webrtc-firestore-candidates.png
similarity index 100%
rename from hugo/content/lessons/webrtc-firebase-video-chat/img/webrtc-firestore-candidates.png
rename to content/lessons/webrtc-firebase-video-chat/img/webrtc-firestore-candidates.png
diff --git a/hugo/content/lessons/webrtc-firebase-video-chat/index.md b/content/lessons/webrtc-firebase-video-chat/index.md
similarity index 100%
rename from hugo/content/lessons/webrtc-firebase-video-chat/index.md
rename to content/lessons/webrtc-firebase-video-chat/index.md
diff --git a/hugo/content/lessons/webrtc-firebase-video-chat/img/.gitkeep b/content/lessons/windows-10-for-web-dev/img/.gitkeep
similarity index 100%
rename from hugo/content/lessons/webrtc-firebase-video-chat/img/.gitkeep
rename to content/lessons/windows-10-for-web-dev/img/.gitkeep
diff --git a/hugo/content/lessons/windows-10-for-web-dev/img/featured.jpg b/content/lessons/windows-10-for-web-dev/img/featured.jpg
similarity index 100%
rename from hugo/content/lessons/windows-10-for-web-dev/img/featured.jpg
rename to content/lessons/windows-10-for-web-dev/img/featured.jpg
diff --git a/hugo/content/lessons/windows-10-for-web-dev/img/featured.png b/content/lessons/windows-10-for-web-dev/img/featured.png
similarity index 100%
rename from hugo/content/lessons/windows-10-for-web-dev/img/featured.png
rename to content/lessons/windows-10-for-web-dev/img/featured.png
diff --git a/hugo/content/lessons/windows-10-for-web-dev/img/featured.webp b/content/lessons/windows-10-for-web-dev/img/featured.webp
similarity index 100%
rename from hugo/content/lessons/windows-10-for-web-dev/img/featured.webp
rename to content/lessons/windows-10-for-web-dev/img/featured.webp
diff --git a/hugo/content/lessons/windows-10-for-web-dev/img/win-docker-desktop.png b/content/lessons/windows-10-for-web-dev/img/win-docker-desktop.png
similarity index 100%
rename from hugo/content/lessons/windows-10-for-web-dev/img/win-docker-desktop.png
rename to content/lessons/windows-10-for-web-dev/img/win-docker-desktop.png
diff --git a/hugo/content/lessons/windows-10-for-web-dev/img/win-docker-wsl.png b/content/lessons/windows-10-for-web-dev/img/win-docker-wsl.png
similarity index 100%
rename from hugo/content/lessons/windows-10-for-web-dev/img/win-docker-wsl.png
rename to content/lessons/windows-10-for-web-dev/img/win-docker-wsl.png
diff --git a/hugo/content/lessons/windows-10-for-web-dev/img/win-linux-distros.png b/content/lessons/windows-10-for-web-dev/img/win-linux-distros.png
similarity index 100%
rename from hugo/content/lessons/windows-10-for-web-dev/img/win-linux-distros.png
rename to content/lessons/windows-10-for-web-dev/img/win-linux-distros.png
diff --git a/hugo/content/lessons/windows-10-for-web-dev/img/win-terminal-admin.png b/content/lessons/windows-10-for-web-dev/img/win-terminal-admin.png
similarity index 100%
rename from hugo/content/lessons/windows-10-for-web-dev/img/win-terminal-admin.png
rename to content/lessons/windows-10-for-web-dev/img/win-terminal-admin.png
diff --git a/hugo/content/lessons/windows-10-for-web-dev/img/win-terminal-app.png b/content/lessons/windows-10-for-web-dev/img/win-terminal-app.png
similarity index 100%
rename from hugo/content/lessons/windows-10-for-web-dev/img/win-terminal-app.png
rename to content/lessons/windows-10-for-web-dev/img/win-terminal-app.png
diff --git a/hugo/content/lessons/windows-10-for-web-dev/img/win-wsl-extension.png b/content/lessons/windows-10-for-web-dev/img/win-wsl-extension.png
similarity index 100%
rename from hugo/content/lessons/windows-10-for-web-dev/img/win-wsl-extension.png
rename to content/lessons/windows-10-for-web-dev/img/win-wsl-extension.png
diff --git a/hugo/content/lessons/windows-10-for-web-dev/index.md b/content/lessons/windows-10-for-web-dev/index.md
similarity index 100%
rename from hugo/content/lessons/windows-10-for-web-dev/index.md
rename to content/lessons/windows-10-for-web-dev/index.md
diff --git a/content/privacy.md b/content/privacy.md
new file mode 100644
index 000000000..bf8a4cc2f
--- /dev/null
+++ b/content/privacy.md
@@ -0,0 +1,37 @@
+---
+title: Privacy Policy
+lastmod: 2022-09-11T08:36:36-07:00
+draft: false
+---
+
+## Privacy Policy
+
+Fireship.io ("Fireship" "we" or "us") is committed to protecting your privacy. This Privacy Policy explains the methods and reasons we collect, use, disclose, transfer, and store your information. If you have any questions about the contents of this policy, don’t hesitate to contact us.
+
+If you do not consent to the collection and use of information from or about you in accordance with this Privacy Policy, then you are not permitted to use Fireship or any services provided on https://fireship.io.
+
+### Applicable Law
+Fireship is headquartered in the United States of America in the state of Nevada. By viewing any content or otherwise using the services offered by Fireship, you consent to the transfer of information to the United States of America to the extent applicable, and the collection, storage, and processing of information under Nevada, USA law.
+
+### Information We Collect
+Information you Submit: We store information you provide on this site via forms, surveys, or any other interactive content. This information commonly includes, but is not limited to, name, mailing address, email address, and uploaded files.\
+
+**Log Files**: We collect information when you use services provided on our site. This information may include your IP address, device and software characteristics (such as type and operating system), page views, referral URLs, device identifiers or other unique identifiers such as advertising identifiers (e.g., "ad-ID" or "IDFA"), and carrier information. Log files are primarily used for the purpose of enhancing the user experience.
+
+**Cookies**: We use cookies and related technologies to keep track of user preferences and activity. Cookies are small text files created by a web server, delivered through a web browser, and stored on your computer. Most Internet browsers automatically accept cookies. You can instruct your browser, by changing its settings, to stop accepting cookies or to prompt you before accepting a cookie from the websites you visit.
+
+### Third Party Services
+This site contains links to other websites not owned by Fireship. In general, the third-party services used by us will only collect, use and disclose your information to the extent necessary to allow them to perform their intended services. Please be aware that we are not responsible for the privacy policies of third-party services. Below is a list of third-party services used on this site.
+
+### Children and COPPA
+Fireship is committed to complying with the Children’s Online Privacy Protection Act (COPPA). We do not use our services to intentionally solicit data from or market to children under the age of 13. We encourage parents and guardians to report any suspicions that a child has provided us with information without their consent. We will take reasonable action to remove this information.
+
+### Your Choices
+**Opt-Out of Third Party Advertisement Cookies**: You may opt out of a third-party vendor's use of cookies for interest based advertising by visiting https://aboutads.info.
+
+**Do Not Track Browser settings**: If you enable Do Not Track settings in the browser you are using, Fireship will not use information about websites you visit, other than our site. Learn more about Do Not Track by visiting https://allaboutdnt.com.
+
+**Email Communication Opt-Out**: If you receive promotional emails from Fireship, you can unsubscribe by clicking the bottom Unsubscribe or Opt-Out link at the bottom of every email.
+
+### Contact Us
+At Fireship, we believe our talented customer service staff will be able to resolve any issues you may have using the our services. If you would like additional information about this privacy policy, please visit our homepage at https://fireship.io or contact us at https://fireship.io/about.
diff --git a/content/pro.html b/content/pro.html
new file mode 100644
index 000000000..910348b63
--- /dev/null
+++ b/content/pro.html
@@ -0,0 +1,93 @@
+---
+title: pro
+description: Upgrade to a pro membership
+---
+
+
+ Become an awesome developer
+ Learn the essential skills for modern fullstack app development while having
+ tons of fun in the process.
+
+
+
+
🦄 You are a pro member!
+
Only use this page if purchasing a gift or enterprise account
+
+
+
+
+
+
+
+
+
Plan
+
+
+ Unlimited access to PRO courses
+ Quizzes with hand-picked meme prizes
+ Invite to private Discord chat
+ Free Sticker mailed to your door
+
+
+
+
+
+
+
Lifetime
+
+ $
+ 399
+ once
+
+
+ All PRO-tier benefits
+ Single payment, lifetime access
+ 4,200 bonus xp points
+ Next Level T-shirt shipped worldwide
+
+
+
+
+
+ Yo! You just found a 20% discount using 👉 EASTEREGG
+
+
+
+ High-quality fitted cotton shirt produced by Next Level Apparel
+
+
+
+
+
Level up your Team
+
+
Looking to signup of 5 seats or more? Get a big discount with personalized video call setup
+
+
+
Enterprise
+
+ $
+ 299
+ /seat
+
+
+ Everything from the Lifetime Plan
+ Better bulk pricing
+ 5 seat minimum purchase
+ Zoom walkthrough with Jeff
+
+
+
+
+
-
-
-
-
-```
diff --git a/hugo/content/courses/vue/auth-signout.md b/hugo/content/courses/vue/auth-signout.md
deleted file mode 100644
index d2c36faa4..000000000
--- a/hugo/content/courses/vue/auth-signout.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: User Profile
-description: Create a user profile where the user can sign out
-weight: 22
-lastmod: 2020-04-01T10:23:30-09:00
-draft: false
-vimeo: 403345834
-emoji: 👋
-video_length: 1:51
----
-
-## User Profile Component
-
-{{< file "vue" "UserProfile.vue" >}}
-```html
-
-
- Logged in as {{ user.uid }}Sign Out
-
-
-
-
-```
diff --git a/hugo/content/courses/vue/auth-state.md b/hugo/content/courses/vue/auth-state.md
deleted file mode 100644
index aecb16b5c..000000000
--- a/hugo/content/courses/vue/auth-state.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Realtime Auth State
-description: React to changes to the Firebase User Auth State
-weight: 21
-lastmod: 2020-04-01T10:23:30-09:00
-draft: false
-vimeo: 403195954
-emoji: 👥
-free: true
-video_length: 4:02
----
-
-## Opt-in to the Composition API
-
-{{< file "terminal" "command line" >}}
-```text
-npm i @vue/composition-api
-```
-
-Register it as a plugin
-
-{{< file "js" "main.js" >}}
-```javascript
-import VueCompositionApi from '@vue/composition-api'
-Vue.use(VueCompositionApi)
-```
-
-## User Component
-
-{{< file "vue" "User.vue" >}}
-```html
-
-
-
-
-
-
-```
-
-## Conditional Rendering for the User
-
-Pseudo-example of the `User` component.
-
-```html
-
-
-
-```
-
-{{< transcript >}}
-
-At this point we can get a user logged in, but we need Vue to react to the changes in the app state or the user state to show a different UI for logged in users versus non logged in users. There's a few different ways we could handle this, but I'm going to implement a solution using the new Vue composition API.
-
-This API makes it a little bit easier, in my opinion, to manage real time streams like the user authentication state. What we'll do in this video is create a user component that gives us the current user state. This means we can declare the user component anywhere in the UI, and then we can do a conditional check if the user is defined and we'll know if the user's logged in or not.
-
-This is a very powerful pattern because we can do a simple conditional check in a template to reactively render a different UI based on the users off state. And that's way easier than trying to check the off state in the JavaScript of every single component that you build. First, create a new component called user dot view.
-
-And because this uses the composition API, we need to opt into it. We first installed the composition API using NPM, and then we go into our main JS file, import that module, and then tell Vue to use it as a plugin. In our user component, we'll go into the script and import ref from the composition. API rep is basically a way to create a reactive value whenever the value of ref changes Vue will react by re rendering the UI, and that's not to be confused with another thing in the composition API called reactive.
-
-Ref and reactive - both do a very similar thing about reactive is used more when you have individual object properties that need to change, but let's not overthink things here. We just need a reference to the user object and have it rendered. Anytime that user object changes, we can set up the state for this component by using the setup lifecycle hook.
-
-Inside this function, we can define our reactive user value, which will give a default of null when the user value is null. It means the user is not signed in. We can listen to changes on the user state by setting up a realtime stream using auth on state changed. And this actually returns as a function that we can call to unsubscribe from that stream when needed, which is generally a good idea.
-
-So you don't create memory leaks in your application. Now on all state changed takes a callback as an argument that will fire every time the state changes, like when the user logs in or logs out. And we can make our user state on this component reactive by simply defining the user value as the Firebase user.
-
-And now we simply return these values on an object from the setup function. From there, we'll set up the destroyed lifecycle hook, so we unsubscribed from the user state whenever this component is destroyed, that's technically an optional step, but it's a good idea to dispose of any realtime stream when it's no longer needed and a component.
-
-And now that we're listening to state changes on the user, we need a way to access the user in a template. To maximize the reasonability of this component. We'll do that with a slot and we'll make the actual user data available by binding it to the user property on this slot. This is what we call a slot crop, and it makes the user data available to any other component that consumes the user component.
-
-Let's jump over to our home component to see why this is so awesome. We import the user component. And then we declare it in the template and put our login component inside of it. We can reference the actual user data of the current user by using V slot and pointing it to that user slot prop. And now we can access the user data as if it were reactive data on this component.
-
-Now remember, if the user is logged in, then the user object will be defined. Otherwise it will be normal. Knowing that we can do some conditional rendering, we'll say Vue if user go ahead and print out logged in as user dot user ID. And there's all kinds of other properties on this user object, like the email address, the photo URL if they sign in with OAuth and a bunch of other stuff.
-
-But if the user object is null, then we'll just use v-else to show the login form. And now if we go preview the app, you can see it shows that we're logged in as this user ID and you'll notice that it no longer displays the login form. But one thing we're missing at this point is a way for the user to sign out, so that's what we'll look at in the next video.
diff --git a/hugo/content/courses/vue/firestore-create-chat.md b/hugo/content/courses/vue/firestore-create-chat.md
deleted file mode 100644
index c3192122e..000000000
--- a/hugo/content/courses/vue/firestore-create-chat.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Create Chat Rooms
-description: Create a chat room in Firestore linked to the current user
-weight: 30
-lastmod: 2020-04-01T10:23:30-09:00
-draft: false
-vimeo: 403344975
-emoji: 💬
-video_length: 2:50
-chapter_start: Firestore Chat
----
-
-## Chat List Component
-
-{{< file "vue" "ChatList.vue" >}}
-```html
-
-
- Create New Chat Room
-
-
-
-
-```
\ No newline at end of file
diff --git a/hugo/content/courses/vue/firestore-dynamic-routing.md b/hugo/content/courses/vue/firestore-dynamic-routing.md
deleted file mode 100644
index 46807d682..000000000
--- a/hugo/content/courses/vue/firestore-dynamic-routing.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: Dynamic Routing
-description: Load a chat room based on its document ID with the Vue Router
-weight: 32
-lastmod: 2020-04-01T10:23:30-09:00
-draft: false
-vimeo: 403344582
-emoji: 🚉
-video_length: 2:14
----
-
-## Router Config
-
-{{< file "js" "main.js" >}}
-```javascript
-import ChatRoom from './components/ChatRoom'
-
-const router = new VueRouter({
- routes: [
-
- { path: '/chats/:id', component: ChatRoom, name: 'chat' }
- ]
-})
-```
-
-## Router Link
-
-```html
-{{ chat.id }}
-```
-
-## ChatRoom Component
-
-{{< file "vue" "ChatRoom.vue" >}}
-```html
-
-
- Welcome to ChatRoom.vue {{ chatId }}
-
- Back
-
-
-
-
-
-```
\ No newline at end of file
diff --git a/hugo/content/courses/vue/firestore-message-ui.md b/hugo/content/courses/vue/firestore-message-ui.md
deleted file mode 100644
index ec0bdecd7..000000000
--- a/hugo/content/courses/vue/firestore-message-ui.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: Message UI
-description: Build a UI component for showing the message text
-weight: 34
-lastmod: 2020-04-01T10:23:30-09:00
-draft: false
-vimeo: 403343936
-emoji: 🎀
-video_length: 2:32
----
-
-## ChatRoom Component
-
-{{< file "vue" "ChatMessage.vue" >}}
-```html
-
-
- {{ message.text }}
-
-
-
-
-
-
from UID {{ message.sender }}
-
-
-
-
-```
\ No newline at end of file
diff --git a/hugo/content/courses/vue/firestore-messages-query.md b/hugo/content/courses/vue/firestore-messages-query.md
deleted file mode 100644
index 9764e20c1..000000000
--- a/hugo/content/courses/vue/firestore-messages-query.md
+++ /dev/null
@@ -1,94 +0,0 @@
----
-title: Query Messages
-description: Query most recent messages in a subcollection of the chat room
-weight: 33
-lastmod: 2020-04-01T10:23:30-09:00
-draft: false
-vimeo: 403344190
-emoji: 📩
-video_length: 3:48
----
-
-## ChatRoom Component
-
-{{< file "vue" "ChatRoom.vue" >}}
-```html
-
-
- Welcome to ChatRoom.vue {{ chatId }}
-
-
-
-
-
- {{ message.text }}
-
-
-
-
-
-
Send
-
-
-
-
-
-
-
-```
diff --git a/hugo/content/courses/vue/firestore-query-chat.md b/hugo/content/courses/vue/firestore-query-chat.md
deleted file mode 100644
index 2ea8ce499..000000000
--- a/hugo/content/courses/vue/firestore-query-chat.md
+++ /dev/null
@@ -1,60 +0,0 @@
----
-title: Query Chat Rooms
-description: Query all chat rooms owned by the current user
-weight: 31
-lastmod: 2020-04-01T10:23:30-09:00
-draft: false
-vimeo: 403344777
-emoji: 🔍
-video_length: 1:48
----
-
-## Chat List Component
-
-{{< file "vue" "ChatList.vue" >}}
-```html
-
-
-
-
-
Create New Chat Room
-
-
-
-```
\ No newline at end of file
diff --git a/hugo/content/courses/vue/img/featured.jpg b/hugo/content/courses/vue/img/featured.jpg
deleted file mode 100644
index e0d2a9c8f..000000000
Binary files a/hugo/content/courses/vue/img/featured.jpg and /dev/null differ
diff --git a/hugo/content/courses/vue/img/featured.png b/hugo/content/courses/vue/img/featured.png
deleted file mode 100644
index 8f83819fe..000000000
Binary files a/hugo/content/courses/vue/img/featured.png and /dev/null differ
diff --git a/hugo/content/courses/vue/img/featured.webp b/hugo/content/courses/vue/img/featured.webp
deleted file mode 100644
index e60ad451a..000000000
Binary files a/hugo/content/courses/vue/img/featured.webp and /dev/null differ
diff --git a/hugo/content/courses/vue/intro-resources.md b/hugo/content/courses/vue/intro-resources.md
deleted file mode 100644
index 9fe97ad03..000000000
--- a/hugo/content/courses/vue/intro-resources.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-title: Resources
-description: Project source code and Vue Firebase resources
-weight: 10
-lastmod: 2020-04-01T10:23:30-09:00
-draft: false
-vimeo: 403196519
-emoji: 📜
-chapter_start: Get Started
-video_length: 1:44
----
-
-## Course Resources
-
-- [VueFire Walkie-Talkie Source Code](https://github.com/fireship-io/vue-firebase-walkie-talkie)
-- [Vue Docs](https://vuejs.org/)
-- [VueFire Docs](https://github.com/vuejs/vuefire)
-- [Firebase Web Docs](https://firebase.google.com/docs/web/setup)
-
-
-## Social
-
-- [Slack Chat](https://fireship.page.link/slack)
-- [YouTube](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA)
-- [Twitter](https://twitter.com/fireship_dev)
-
-{{< transcript >}}
-
-To start things off, I first want to talk about how to be successful in this course. You can find the full source code for the project on GitHub. I recommend cloning this remote to your local system and you'll find instructions in the read me on how to run it. But to really get the most out of this course, I recommend starting a brand new Vue project from scratch and following along with the videos by writing every single line of code that I do or better yet modify and experiment with my code to make it do something unique for you now in the videos, you'll see me working through the code and Bs code and if you're doing the same Recommend installing the Vue extension for vs code.
-
-It'll give you syntax highlighting, formatting and so on and also when it comes to Vue there's a browser extension that you want to have installed as well as a reference at throughout the course because it allows us to visualize the entire component tree as we start building our friend Angie y aside from that you want to make sure that you have no JS installed on your local machine all the using no 10 throughout the course. Am I sleep you'll need to create a Firebase account and start a new project. This course can be done entirely on the So you shouldn't have to worry about any cloud computing cost or anything like that.
-
-And lastly, I just want to point out that I make an effort to keep the coat as simple as possible and that's so I can teach you the core concepts without adding unnecessary complexity to the application there many ways.
-
-You can improve this codebase to polish the UI and get a production-ready. Consider it a starting point and make an effort to implement your own features or improve some of the existing features in my opinion going off in building your own things. It's the best way to learn software development now if you run into any problems, Please reach out to me on slack. You can send me a direct message post something in the Pro Channel or something in the Vue specific Channel. And if you want to go beyond the topics in this course, make sure to check out the Vue and Firebase tags here on fire show.
diff --git a/hugo/content/courses/vue/intro-routing.md b/hugo/content/courses/vue/intro-routing.md
deleted file mode 100644
index 2bc6f425b..000000000
--- a/hugo/content/courses/vue/intro-routing.md
+++ /dev/null
@@ -1,52 +0,0 @@
----
-title: Your First Component
-description: Build a basic home page component with routing
-weight: 13
-lastmod: 2020-04-01T10:23:30-09:00
-draft: false
-vimeo: 403196386
-emoji: 🚆
-free: true
-video_length: 2:13
----
-
-## Install the Vue Router
-
-[Routing Docs](https://router.vuejs.org/)
-
-{{< file "terminal" "command line" >}}
-```text
-npm install vue-router
-```
-
-## Configure a Basic Route
-
-{{< file "js" "main.js" >}}
-```javascript
-import VueRouter from 'vue-router'
-Vue.use(VueRouter)
-
-import Home from './components/Home'
-
-const router = new VueRouter({
- routes: [
- { path: '/', component: Home },
- ]
-})
-
-new Vue({
- router,
- render: h => h(App),
-}).$mount('#app')
-```
-
-## Create the Home Page
-
-{{< file "vue" "App.vue" >}}
-```html
-
-
-
Home.vue
-
-
-```
\ No newline at end of file
diff --git a/hugo/content/courses/vue/intro-vue.md b/hugo/content/courses/vue/intro-vue.md
deleted file mode 100644
index 21c553533..000000000
--- a/hugo/content/courses/vue/intro-vue.md
+++ /dev/null
@@ -1,39 +0,0 @@
----
-title: Vue Setup
-description: Get started with the Vue CLI
-weight: 12
-lastmod: 2020-04-01T10:23:30-09:00
-draft: false
-vimeo: 403196601
-emoji: ⚡
-free: true
-video_length: 3:43
----
-
-## Install the Vue CLI Globally
-
-[CLI Docs](https://cli.vuejs.org/)
-
-{{< file "terminal" "command line" >}}
-```text
-npm install -g @vue/cli
-```
-
-## Run the Vue UI App
-
-{{< file "terminal" "command line" >}}
-```text
-vue ui
-```
-
-## Add Bulma for Better Styling
-
-{{< file "html" "public/index.html" >}}
-```html
-
-
-
-
-
-
-
-
- Record Audio
-
- Record Voice
-
- Stop
-
-
-
-
-
-
- 📜 If you purchased via PayPal, you can access your invoice from your PayPal account.
-
-
-👈 Back
-
diff --git a/hugo/content/dashboard/subscription.md b/hugo/content/dashboard/subscription.md
deleted file mode 100644
index a61e20518..000000000
--- a/hugo/content/dashboard/subscription.md
+++ /dev/null
@@ -1,18 +0,0 @@
----
-title: Membership
-date: 2019-02-27T09:32:30-07:00
-draft: false
-description: Manage your PRO Membership
-hide_qna: true
----
-
-Payment Sources
-👈 Back
-
- Invoices
-
\ No newline at end of file
diff --git a/hugo/content/lessons/7-security-concepts-hacks-web-developers/index.md b/hugo/content/lessons/7-security-concepts-hacks-web-developers/index.md
deleted file mode 100644
index e7c9fbce8..000000000
--- a/hugo/content/lessons/7-security-concepts-hacks-web-developers/index.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Top 7 Security Concepts for Web Developers
-lastmod: 2020-02-13T09:37:39-07:00
-publishdate: 2020-02-13T09:37:39-07:00
-author: Jeff Delaney
-draft: false
-description: Security concepts, risks, and exploits that every web developer should know about.
-tags:
- - javascript
- - security
-
-youtube: 4YOpILi9Oxs
-# github:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-Cloud providers and web application frameworks go to great lengths to protect you from writing insecure code. The Cloud provides secure defaults and monitoring for your infrastructure, while Angular and React automatically sanitize HTML to prevent the injection of malicious JavaScript. Despite these safeguards, no application is 100%, secure and clever new exploits will be discovered. The following lesson explains some of the most common hacking techniques and how to secure your app against them.
-
-## 1. Zero-day Vulnerability
-
-A **zero-day vulnerability** is a weakness that is unknown or unfixed as of today. When a hacker decides to attack this weakness, it's called **zero-day exploit**.
-
-After it becomes known, you can think of it as a one-day or 20-day exploit based on the time since the initial discovery.
-
-## 2. Packages with Known Vulnerabilities
-
-> In 2017, the [Equifax Data Breach](https://www.cnet.com/news/equifax-ceo-data-breach-heres-what-went-wrong/) exposed more than 140MM customer records and has cost the company over $1 billion. It was caused by a known exploit over two months old that could have been prevented with a simple update to Apache Struts.
-
-Using packages with [known vulnerabilities](https://owasp.org/www-project-top-ten/OWASP_Top_Ten_2017/Top_10-2017_A9-Using_Components_with_Known_Vulnerabilities) is the most common way hackers exploit web apps.
-
-Audit your current NPM project using the [audit](https://docs.npmjs.com/cli/audit) command. Then update your dependencies as needed.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm audit
-
-npm audit fix
-{{< /highlight >}}
-
-
-## 3. Cross-site Scripting (XSS)
-
-> The Samy worm was an XSS attack that spread to over 1 million MySpace pages in 24 hours. If affected, it would update your profile to say *but most of all, samy is my hero*
-
-
-
-
-
-
-Cross Site Scripting occurs when a hacker runs malicious JavaScript on a client's browser. It can happen in a variety of ways, but is commonly the result of rendering raw HTML from the server.
-
-{{< figure src="img/xss-diagram.png" caption="A diagram of a typical Cross Site Scripting attack" >}}
-
-1. Hacker saves some JS code to the database like `` by submitting a comment via the web app.
-2. The victim user visits the webpage with that comment, but the developer did not sanitize the hacker's comment, so the browser thinks it's a trusted script/html.
-3. At this point, the hacker's JS is running as if it were the end-user.
-
-## 4. SQL Injection
-
-> In 2008, Heartland Payment Systems exposed the data encoded on credit cards via a SQL injection attack. The hackers used this data to make physical counterfeit credit cards. The ringleader, Albert Gonzalez, was caught and sentenced to 20 years in prison.
-
-[SQL injection](https://owasp.org/www-project-top-ten/OWASP_Top_Ten_2017/Top_10-2017_A1-Injection) is similar conceptually to XSS, but instead, it runs malicious code on the database.
-
-Notice how the code below relies on an external parameter to construct the query. If not sanitized, an attacker can submit raw SQL code and the database will execute it.
-
-{{< highlight sql >}}
-"SELECT * FROM users WHERE uid='" + request.getParameter("uid") + "'";
-{{< /highlight >}}
-
-
-Most ORMs will prevent SQL injection attacks because you do not construct the queries on your own. However, there have been hacks on ORMs directly, so again, nothing is 100% secure.
-
-## 5. Credential Leaks
-
-Many APIs and Cloud Providers provide API keys that allow you to interact with paid services. If a hacker discovers a secret API key it can be used to take destructive action on your behalf. There are a few ways credentials are leaked.
-
-1. Using API keys directly in source code, then pushing the repo to Github.
-1. Using API keys directly in source code, then bundling them in your production app.
-
-You can prevent credential leaks by NOT putting them in your source code. Instead, use environment variables or a service like [Secret Manager](https://cloud.google.com/secret-manager/docs).
-
-
-## 6. Principle of Least Privilege
-
-In the event that your credentials are compromised, you can mitigate the damage by following the Principle of Least Privilege. Basically, this means **grant access only when it is absolutely required**.
-
-A good example is [Firestore Database Rules](/snippets/firestore-rules-recipes/), which allow you to customize the permissions of an API key. When defining rules, you should always start by locking down everything, then selectively allow access as needed.
-
-## 7. DDoS Attacks
-
-> In 2018, Github survived the largest DDoS attack in history after it was bombarded with 1.35 terabits of data per second. It only took the site down for about ten minutes thanks to a backup service, Akamai, which re-routed traffic and blocked the spoofed requests.
-
-A [DDoS](https://en.wikipedia.org/wiki/Denial-of-service_attack) attack attempts to flood the service with so much traffic that it simply shuts down. The attack is typically distributed via many spoofed sources, making it impossible to just block a single IP address.
-
-For most developers, the best mitigation strategy is to use a large Cloud provider that has the bandwidth and monitoring capabilities to deal with such attacks.
\ No newline at end of file
diff --git a/hugo/content/lessons/advanced-flutter-firebase/index.md b/hugo/content/lessons/advanced-flutter-firebase/index.md
deleted file mode 100644
index ed6f25fa1..000000000
--- a/hugo/content/lessons/advanced-flutter-firebase/index.md
+++ /dev/null
@@ -1,310 +0,0 @@
----
-title: Flutter Provider with Firebase
-lastmod: 2019-05-11T13:59:08-07:00
-publishdate: 2019-05-11T13:59:08-07:00
-author: Jeff Delaney
-draft: false
-description: Advanced state management techniques when working with Firebase Auth & Firestore in Flutter applications.
-tags:
- - flutter
- - firebase
- - firestore
- - advanced
-
-youtube: vFxk_KJCqgk
-github: https://github.com/fireship-io/185-advanced-flutter-firestore
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-The following article discusses patterns that I have found exceptionally useful when implementing Firebase User Authentication and Firestore in Flutter. In particular, the [Provider](https://pub.dev/packages/provider) provides an excellent solution for sharing and managing streams with minimal boilerplate. However, to take full advantage of this package you must deserialize your raw data to a Dart class.
-
-{{< box icon="scroll" class="box-green" >}}
-If you are building a major project with Flutter & Firebase, consider enrolling in the [Full Flutter Firebase Course](/courses/flutter-firebase/).
-{{< /box >}}
-
-## Basic Firestore Read
-
-## Sharing Global Data
-
-When it comes to static values that never change I would highly recommend that you *Keep it Simple*.
-
-### Static Global Data
-
- Dart supports global variables, so you can just instantiate objects outside of the widget tree as needed, but keep your code organized and avoid polluting the global namespace.
-
-A solution that provides organization and also code-readability is to use a dedicated class that defines static properties and methods. This ensures that you always know where the value originated and prevents the creation of duplicate instances.
-
-{{< file "dart" "globals.dart" >}}
-{{< highlight dart >}}
-class Global {
- // App Data
- static final String title = 'Fireship';
-
- // Services
- static final FirebaseAnalytics analytics = FirebaseAnalytics();
-
- // Helper Methods
- static doSomethingCool() => print('cool');
-}
-
-
-/// Elsewhere in flutter...
-FlatButton(child: Text(Global.title), onPressed: Global.doSomethingCool );
-{{< /highlight >}}
-
-As an alternative, you can break your data into multiple global singletons with the [get_it](https://pub.dev/packages/get_it) library.
-
-### Global Streams
-
-Streams are a bit more complex because we need to explicitly listen to them and dispose of them when done - this can lead to a lot of boilerplate when done manually in a StatefulWidget.
-
-A better option is to use Flutter's built in `StreamBuilder` widget, which automatically manages your stream and gives you a build context. However, it can still be a challenge to combine multiple streams and/or share their values in multiple places.
-
-An *even better option* is the [Provider](https://pub.dev/packages/provider) package. It is mostly syntatic sugar for *InheritedWidget*, but can also manage Stream subscriptions. In the snippet below, we wrap the entire MaterialApp in with a `MultiProvider`, then listen a Firebase user's global authentication state.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-import 'package:provider/provider.dart';
-
-class MyApp extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
-
- return MultiProvider(
- providers: [
- // Make user stream available
- StreamProvider.value(stream: FirebaseAuth.instance.onAuthStateChanged),
-
- // See implementation details in next sections
- StreamProvider.value(stream: firestoreStream),
- ],
-
- // All data will be available in this child and descendents
- child: MaterialApp(...)
- );
- }
-}
-{{< /highlight >}}
-
-
-The beauty of this approach is that `StreamProvider` will automatically listen to the subscription for us (and dispose if necessary, it is actually just a StreamBuilder under the hood), allowing us to treat the underlying data as a synchronous value available to the entire app. We can access it in a build method like so:
-
-{{< highlight dart >}}
-// Some widget deeply nested in the widget tree...
-class SomeWidget extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- var user = Provider.of(context);
-
- return Text(user.displayName)
-
- }
-}
-{{< /highlight >}}
-
-
-## Deserializing Firebase Data to a Dart Class
-
-Unlike TypeScript, you cannot just overlay an Interface over a Map in Dart and have it accept those types.
-
-Firebase returns data from Firestore in the form of a `Map`. It is perfectly fine to call properties on a map in your code:
-
-{{< highlight dart >}}
-Text(data['title']),
-Text(data['description'])
-{{< /highlight >}}
-
-But this becomes increasingly difficult as your app grows, both in terms of code-maintainability and unexpected runtime errors. In addition, it makes it difficult to use the Provider package, because it looks up the widget tree for a specific type signature. We need a way to convert a `Map` to a Class instance, allowing us to write code like:
-
-{{< highlight dart >}}
-Text(data.title),
-Text(data.description)
-{{< /highlight >}}
-
-### Data Model Class
-
-There are several JSON deserialization strategies in Flutter, but I've found hand-written classes to be the most reliable approach. Let's start by writing the classes that define the shape of our data
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-
-class SuperHero {
- final String name;
- final int strength;
- final int damage;
-
- SuperHero({ this.name, this.strength });
-}
-
-class Weapon {
- final String id;
- final String name;
- final int hitpoints;
-
- Weapon({ this.id, this.name, this.hitpoints });
-}
-{{< /highlight >}}
-
-These classes match the data types that we expect back from Firestore.
-
-{{< figure src="img/data-model-root.png" alt="The heroes root collection in Firestore" >}}
-
-{{< figure src="img/data-model-sub.png" alt="The weapons subcollection, i.e. the weapons owned by the hero" >}}
-
-
-
-### From a Map or JSON
-
-In most cases, it makes the most sense to deserialize from a Map because this makes your data model compatible with other sources, like Dart's HTTP client, or anything that fetches JSON. Below we expand our class with a factory constructor to convert a Map to an instance of `SuperHero`.
-
-
-{{< highlight dart >}}
-class SuperHero {
-
- final String name;
- final int strength;
-
- SuperHero({ this.name, this.strength });
-
- factory SuperHero.fromMap(Map data) {
- data = data ?? { };
- return SuperHero(
- name: data['name'] ?? '',
- strength: data['strength'] ?? 100,
- );
- }
-
-}
-{{< /highlight >}}
-
-
-### From a Firestore Document
-
-It is also possible to setup your constructor specifically for a Firestore `DocumentSnapshot`. This makes your code more specialized for Firebase, but has the added benefit of giving you the document ID on collection queries.
-
-{{< highlight dart >}}
-class Weapon {
- final String id;
- final String name;
- final int hitpoints;
- final String img;
-
- Weapon({ this.id, this.name, this.hitpoints, this.img, });
-
- factory Weapon.fromFirestore(DocumentSnapshot doc) {
- Map data = doc.data;
-
- return Weapon(
- id: doc.documentID,
- name: data['name'] ?? '',
- hitpoints: data['hitpoints'] ?? 0,
- img: data['img'] ?? ''
- );
- }
-
-}
-{{< /highlight >}}
-
-
-
-## Database Service
-
-Now that you know how to deserialize data, the next challenge is to write an efficient service for fetching and writing data. Every app has different needs, but the service below separates the business logic from your widgets. It should expose readable methods for data reads/writes that deserialize your data.
-
-
-### Example Database Service
-
-The service below converts a firestore document read, then maps it to a `SuperHero` and a collection query to a `List`, as streams.
-
-{{< file "dart" "db.dart" >}}
-{{< highlight dart >}}
-import 'package:cloud_firestore/cloud_firestore.dart';
-import 'package:firebase_auth/firebase_auth.dart';
-import 'dart:async';
-import 'models.dart';
-
-class DatabaseService {
- final Firestore _db = Firestore.instance;
-
- /// Get a stream of a single document
- Stream streamHero(String id) {
- return _db
- .collection('heroes')
- .document(id)
- .snapshots()
- .map((snap) => SuperHero.fromMap(snap.data));
- }
-
- /// Query a subcollection
- Stream> streamWeapons(FirebaseUser user) {
- var ref = _db.collection('heroes').document(user.uid).collection('weapons');
-
- return ref.snapshots().map((list) =>
- list.documents.map((doc) => Weapon.fromFirestore(doc)).toList());
-
- }
-
- /// Write data
- Future createHero(String heroId) {
- return _db.collection('heroes').document(heroId).setData({ /* some data */ });
- }
-
-}
-{{< /highlight >}}
-
-
-### Using the service with Provider
-
-Now that we have a `Stream` based on our data models, we can easily share and combine streaming data throughout the widget tree.
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class HeroScreen extends StatelessWidget {
- final auth = FirebaseAuth.instance;
- final db = DatabaseService();
-
- @override
- Widget build(BuildContext context) {
- var user = Provider.of(context);
- bool loggedIn = user != null;
-
- return Column(
- children: [
- if (loggedIn)
-
- StreamProvider.value( // All children will have access to SuperHero data
- stream: db.streamHero(user),
- child: HeroProfile(),
- ),
-
- StreamProvider>.value( // All children will have access to weapons data
- stream: db.streamWeapons(user),
- child: WeaponsList(),
- ),
-
- ],
- );
- }
-}
-
-
-
-class WeaponsList extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- var weapons = Provider.of>(context);
- var user = Provider.of(context);
-
- return Text('Hi ${user.displayName}, you have ${weapons.length} weapons equipped')
-
- }
-}
-{{< /highlight >}}
diff --git a/hugo/content/lessons/algolia-cloud-functions/index.md b/hugo/content/lessons/algolia-cloud-functions/index.md
deleted file mode 100644
index 399178225..000000000
--- a/hugo/content/lessons/algolia-cloud-functions/index.md
+++ /dev/null
@@ -1,200 +0,0 @@
----
-title: Algolia Fulltext Search Cloud Functions
-lastmod: 2019-08-25T10:43:13-07:00
-publishdate: 2019-08-25T10:43:13-07:00
-author: Jeff Delaney
-draft: false
-description: Build a pipeline for full-text search indexing with Firestore Cloud Functions
-tags:
- - node
- - algolia
- - firestore
- - cloud-functions
- - mvp
-
-youtube: dTXzxSlhTDM
-github: https://github.com/fireship-io/203-algolia-firestore-mvp
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-One of the most commonly encountered limitations of [Cloud Firestore](https://firebase.google.com/docs/firestore) (and GCP) is [full-text search](https://en.wikipedia.org/wiki/Full-text_search). This functionality is essential if you need to query complex text patterns in a database or filter results by multiple dynamic properties. My favorite solution to this limitation is [Algolia](https://www.algolia.com/), which provides a powerful, developer-friendly, search & discovery API. In the following lesson you will learn how to sync your Firestore data to an Algolia index via Cloud Functions.
-
-
-{{< figure src="img/algolia-firestore-demo.png" caption="Notice how the Algolia index (left) is synced-up with the Firestore document (right)" >}}
-
-## Frontend Integrations
-
-This lesson is integrated with multiple frontend frameworks. After deploying the backend code in this lesson, choose your favorite frontend flavor 🍧.
-
-
- {{< mvp-chapter name="angular" link="/snippets/algolia-instantsearch-angular" >}}
- {{< mvp-chapter name="react" link="/snippets/algolia-instantsearch-react" >}}
-
- {{< mvp-chapter name="svelte" link="/snippets/algolia-instantsearch-svelte" >}}
-
-
-
-## Initial Setup
-
-### Blaze plan required
-
-Make sure you are at least using the Firebase Blaze plan because this will enable you to make network requests to third-party APIs like Algolia.
-
-### Initialize Cloud Functions
-
-First, initialize Cloud Functions in your project with the Firebase Tools CLI. This lesson uses vanilla JS, but feel free to select TypeScript if you prefer.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm i -g firebase-tools
-firebase init functions
-{{< /highlight >}}
-
-### Install Algolia
-
-Indexing tasks can be handled in Node with the [Algolia JS SDK](https://www.algolia.com/doc/api-client/getting-started/install/javascript/?language=javascript) package.
-
-{{< highlight text >}}
-cd functions
-npm install algoliasearch
-{{< /highlight >}}
-
-### Create an Index
-
-Algolia provides a guided UI for building indexes that support full-text search.
-
-{{< figure src="img/create-index.png" caption="Create an index named customers on the Algolia dashboard" >}}
-
-### Add the Algolia API Key to Firebase
-
-You can find your credentials under the *API Keys* tab. Your backend code requires the **Application ID** and **Admin API Key**. Keep the admin key safe and do not expose it to the public.
-
-{{< figure src="img/api-keys.png" caption="You need the Algolia App ID and Admin API Key" >}}
-
-Now set the API key and template ID in the Firebase project with the following command.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase functions:config:set algolia.app=YOUR_APP_ID algolia.key=ADMIN_API_KEY
-{{< /highlight >}}
-
-## Algolia Cloud Functions
-
-Setup the Cloud Functions environment by initializing the Algolia client and index.
-
-{{< file "js" "functions/index.js" >}}
-{{< highlight javascript >}}
-const functions = require('firebase-functions');
-const algoliasearch = require('algoliasearch');
-
-const APP_ID = functions.config().algolia.app;
-const ADMIN_KEY = functions.config().algolia.key;
-
-const client = algoliasearch(APP_ID, ADMIN_KEY);
-const index = client.initIndex('customers');
-
-/// Cloud Functions
-
-exports.addToIndex; // TODO
-
-exports.updateIndex; // TODO
-
-exports.deleteFromIndex; // TODO
-{{< /highlight >}}
-
-### Add Record to Algolia
-
-Our goal is to duplicate a subset of data from the Firestore customer document to Algolia. The first step is to add a new record to the index with the `onCreate` Firestore event.
-
-💡 Tip. Only index data in Algolia that is actually useful for searching and/or displaying in search results. Do NOT index personally identifiable information (PII), like phone numbers and email addresses. You may not need to duplicate the entire document.
-
-{{< highlight javascript >}}
-exports.addToIndex = functions.firestore.document('customers/{customerId}')
-
- .onCreate(snapshot => {
-
- const data = snapshot.data();
- const objectID = snapshot.id;
-
- return index.saveObject({ ...data, objectID });
-
- });
-{{< /highlight >}}
-
-### Update a Record in Algolia
-
-If the Firestore document data changes, we want these changes reflected in the index and search results. We can easily handle this task with an `onUpdate` function.
-
-{{< highlight javascript >}}
-exports.updateIndex = functions.firestore.document('customers/{customerId}')
-
- .onUpdate((change) => {
- const newData = change.after.data();
- const objectID = change.after.id;
- return index.saveObject({ ...newData, objectID });
- });
-{{< /highlight >}}
-
-### Delete a Record
-
-When a Firestore document is deleted, we must also remove it from the search index. In this case, we simply pass the objectID to Algolia within an `onDelete` function.
-
-{{< highlight javascript >}}
-exports.deleteFromIndex = functions.firestore.document('customers/{customerId}')
-
- .onDelete(snapshot =>
- index.deleteObject(snapshot.id)
- );
-{{< /highlight >}}
-
-### Deploy
-
-Deploy your functions and test them from the Firebase console, or follow the seeding instructions in the next section.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase deploy --only functions
-{{< /highlight >}}
-
-## Optional: Seed the Database
-
-In the video you saw how I quickly seeded Firestore with dummy data, which was accomplished with [Faker](https://github.com/marak/Faker.js/) and the Firebase Admin SDK. Create a vanilla node script in the functions directory that sends writes to the database.
-
-{{< file "js" "functions/seed.js" >}}
-{{< highlight javascript >}}
-const admin = require('firebase-admin');
-admin.initializeApp();
-
-const faker = require('faker');
-
-const db = admin.firestore();
-
-const fakeIt = () => {
- return db.collection('customers').add({
- username: faker.internet.userName(),
- avatar: faker.internet.avatar(),
- bio: faker.hacker.phrase()
- });
-}
-
-Array(20).fill(0).forEach(fakeIt);
-{{< /highlight >}}
-
-Run the script from the command line like so:
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-cd functions
-node seed.js
-{{< /highlight >}}
-
-{{< box icon="scroll" class="box-blue" >}}
-This post first appeared as [Episode 109 Algolia Firestore on AngularFirebase.com](https://angularfirebase.com/lessons/algolia-firestore-quickstart-with-firebase-cloud-functions/) and has been fully updated with the latest best practices.
-{{< /box >}}
diff --git a/hugo/content/lessons/angular-firebase-storage-uploads-multi/index.md b/hugo/content/lessons/angular-firebase-storage-uploads-multi/index.md
deleted file mode 100644
index 5cd189434..000000000
--- a/hugo/content/lessons/angular-firebase-storage-uploads-multi/index.md
+++ /dev/null
@@ -1,315 +0,0 @@
----
-title: Upload Multiple Files to Firebase Storage with Angular
-lastmod: 2019-02-18T13:45:50-07:00
-publishdate: 2019-02-18T13:45:50-07:00
-author: Jeff Delaney
-draft: false
-description: Build a dropzone file uploader in Angular that can send multiple files to Firebase storage simultaneously.
-tags:
- - firebase
- - angular
- - cloud-storage
-
-youtube: ok7633BVa4Y
-github: https://github.com/fireship-io/168-multi-file-upload-angular-firebase
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-versions:
- '@angular/core': 7.3
- firebase: 5
----
-
-
-Firebase makes it easy to upload a huge payload of raw files a cloud storage bucket. The following lesson will teach you how to upload files to [Firebase Storage](https://firebase.google.com/docs/storage/) with Angular, including several advanced concepts about how to...
-
-- Handle multiple simultaneous concurrent file uploads.
-- Save the resulting download URL to Firestore.
-- Display a progress bar and provide UI controls to pause, cancel, and resume uploads.
-
-{{< figure src="img/dropzone-firebase-storage.png" alt="Firebase storage demo with multiple files" >}}
-
-{{< box icon="scroll" class="box-blue" >}}
-This post first appeared as [Episode 82 on AngularFirebase.com](https://angularfirebase.com/lessons/firebase-storage-with-angularfire-dropzone-file-uploader/) and has been updated to handle multiple files and save additional data to Firestore.
-{{< /box >}}
-
-
-The demo video below demonstrates how the complete feature should work after completing this lesson.
-
-();
- @Output() hovered = new EventEmitter();
-
- @HostListener('drop', ['$event'])
- onDrop($event) {
- $event.preventDefault();
- this.dropped.emit($event.dataTransfer.files);
- this.hovered.emit(false);
- }
-
- @HostListener('dragover', ['$event'])
- onDragOver($event) {
- $event.preventDefault();
- this.hovered.emit(true);
- }
-
- @HostListener('dragleave', ['$event'])
- onDragLeave($event) {
- $event.preventDefault();
- this.hovered.emit(false);
- }
-}
-{{< /highlight >}}
-
-## Step 2 - Uploader Component
-
-The next step is put our directive to use in a component that will receive the files and loop over them. This component does not use Firebase directly, but rather it manages the files dropped by the user and renders an `upload-task` (which we will build in step 3) component for each file.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-ng g component uploader
-{{< /highlight >}}
-
-### Listen to File Drop
-
-The HTML we add the `dropzone` directive to a div and listen the custom events that it emits. In addition, we loop over a list of files and render `upload-task` which will be created in the next step.
-
-{{< file "html" "uploader.component.html" >}}
-{{< highlight html >}}
-
-
-
-
AngularFire Drop Zone
-
Drag and Drop a File
-
Uploads
-
-
-
-{{< /highlight >}}
-
-The component typescript is very simple - it just takes the FileList dropped on the div and pushes it to an array.
-
-{{< file "ngts" "uploader.component.ts" >}}
-{{< highlight typescript >}}
-import { Component } from '@angular/core';
-
-@Component({
- selector: 'uploader',
- templateUrl: './uploader.component.html',
- styleUrls: ['./uploader.component.scss']
-})
-export class UploaderComponent {
-
- isHovering: boolean;
-
- files: File[] = [];
-
- toggleHover(event: boolean) {
- this.isHovering = event;
- }
-
- onDrop(files: FileList) {
- for (let i = 0; i < files.length; i++) {
- this.files.push(files.item(i));
- }
- }
-}
-{{< /highlight >}}
-
-
-## Step 3 - Upload Task Component
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-ng g component upload-task
-{{< /highlight >}}
-
-Each child component is a self contained [UploadTask](https://github.com/angular/angularfire2/blob/master/docs/storage/storage.md) that will start running as soon as the component is initialized. It will display the upload progress in realtime and save the download URL in firestore when it completes.
-
-{{< box icon="fire" class="box-orange" >}}
-There is no hard limit on the number of files you can send to Firebase simultaneously. The SDK will attempt to use the most efficient strategy available to transfer them to the cloud, which is mostly dependent on the user's network connection.
-{{< /box >}}
-
-
-### Show Progress and Provide User Controls
-
-The HTML provides a progress bar and several buttons that allow the user to pause, cancel, or resume an individual upload.
-
-
-{{< file "html" "upload-task.component.html" >}}
-{{< highlight html >}}
-
-
- {{ pct | number }}%
-
-
- {{ snap.bytesTransferred }} of {{ snap.totalBytes }}
-
-
-
-
Pause
-
Cancel
-
Resume
-
;
- snapshot: Observable;
- downloadURL: string;
-
- constructor(private storage: AngularFireStorage, private db: AngularFirestore) { }
-
- ngOnInit() {
- this.startUpload();
- }
-
- startUpload() {
-
- // The storage path
- const path = `test/${Date.now()}_${this.file.name}`;
-
- // Reference to storage bucket
- const ref = this.storage.ref(path);
-
- // The main task
- this.task = this.storage.upload(path, this.file);
-
- // Progress monitoring
- this.percentage = this.task.percentageChanges();
-
- this.snapshot = this.task.snapshotChanges().pipe(
- tap(console.log),
- // The file's download URL
- finalize( async() => {
- this.downloadURL = await ref.getDownloadURL().toPromise();
-
- this.db.collection('files').add( { downloadURL: this.downloadURL, path });
- }),
- );
- }
-
- isActive(snapshot) {
- return snapshot.state === 'running' && snapshot.bytesTransferred < snapshot.totalBytes;
- }
-
-}
-{{< /highlight >}}
-
-The final result should look something like this:
-
-
-
-{{< /highlight >}}
-
-The animations must be included in the app component. Uncomment the name of the animation you wish to use.
-
-{{< file "ngts" "foo.component.ts" >}}
-{{< highlight typescript >}}
-@Component({
- selector: 'app-root',
- animations: [ // <-- add your animations here
- // fader,
- // slider,
- // transformer,
- stepper
- ]
-})
-
-prepareRoute(outlet: RouterOutlet) {
- return outlet && outlet.activatedRouteData && outlet.activatedRouteData['animation'];
-}
-{{< /highlight >}}
-
-### Variable Animations with Router Data (Optional)
-
-We can pass data into the router to customize animations on a component-by-component basis. For example, we might want apply different animations for components based on their perceived position in the UI.
-
-{{< file "ngts" "app-routing.module.ts" >}}
-{{< highlight typescript >}}
-const routes: Routes = [
- { path: 'about', component: AboutPageComponent },
- { path: 'right', component: RightPageComponent, data: { animation: 'isRight' } },
- { path: 'left', component: LeftPageComponent, data: { animation: 'isLeft' } },
-];
-{{< /highlight >}}
-
-## Create the Animations
-
-Now it's time for the fun part - animating. Let's look at four animation examples that become increasingly more complex after each step.
-
-
-Create a file named *route-animations.ts* in the app dir.
-
-{{< file "ngts" "route-animations.ts" >}}
-{{< highlight typescript >}}
-import {
- trigger,
- transition,
- style,
- query,
- group,
- animateChild,
- animate,
- keyframes,
- } from '@angular/animations';
-{{< /highlight >}}
-
-
-### Basic Fade In
-
-Let's start with a basic animation that is applied the same for every route.
-
-;
-
- constructor(
- private afAuth: AngularFireAuth,
- private afs: AngularFirestore,
- private router: Router
- ) { }
-
-}
-{{< /highlight >}}
-
-### Observe the AuthState
-
-The most important element this feature is being able to react to changes to the user's authentiaction state. When logged-out, will have an Observable of `null`. When logged-in, we want to [switchMap](/snippets/rxjs-switchmap) to an Observable of the user's profile document in Firestore. This is equivalent *joining* custom data and we can set this up in the constructor.
-
-{{< figure src="img/firestore-custom-user-data.png" alt="custom user data in the Firestore database" caption="Notice how the UID on the document also matches user's assigned UID from firebase auth." >}}
-
-
-
-{{< file "ngts" "app/auth.service.ts" >}}
-{{< highlight typescript >}}
-export class AuthService {
-
- user$: Observable;
-
- constructor(...) {
- // Get the auth state, then fetch the Firestore user document or return null
- this.user$ = this.afAuth.authState.pipe(
- switchMap(user => {
- // Logged in
- if (user) {
- return this.afs.doc(`users/${user.uid}`).valueChanges();
- } else {
- // Logged out
- return of(null);
- }
- })
- )
- }
-}
-{{< /highlight >}}
-
-
-### Login and Logout
-
-- `googleSignin()`: Triggers the Google Signin popup window and authenticates the user. It returns a Promise that resolves with the auth credential.
-- `updateUserData()`: This is how we initialize custom data in Firestore. The `{ merge: true }` option is required to make this a non-destructive set for returning users.
-- `signOut()`: Does what it says, plus navigates the user to a safe route.
-
-{{< file "ngts" "app/auth.service.ts" >}}
-{{< highlight typescript >}}
-export class AuthService {
-
- // ...omitted
-
- async googleSignin() {
- const provider = new firebase.auth.GoogleAuthProvider();
- const credential = await this.afAuth.signInWithPopup(provider);
- return this.updateUserData(credential.user);
- }
-
- private updateUserData(user) {
- // Sets user data to firestore on login
- const userRef: AngularFirestoreDocument = this.afs.doc(`users/${user.uid}`);
-
- const data = {
- uid: user.uid,
- email: user.email,
- displayName: user.displayName,
- photoURL: user.photoURL
- }
-
- return userRef.set(data, { merge: true })
-
- }
-
- async signOut() {
- await this.afAuth.signOut();
- this.router.navigate(['/']);
- }
-
-}
-{{< /highlight >}}
-
-{{< box icon="trophy" class="box-blue" >}}
-#### Tip: Destructuring the Function
-
-You may prefer to modify the **updateUserData** function with [destructuring assignment](/snippets/javascript-destructuring/#function-arguments)
-{{< /box >}}
-
-
-
-## Step 4: Create a User Profile Component
-
-Now it's time to put our auth service to use inside of a component that will allow the user to login, logout, and view their profile info.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-ng generate component user-profile
-{{< /highlight >}}
-
-### Inject the Auth Service
-
-Inject the auth service in the component's constructor - easy.
-
-{{< file "ngts" "user-profile/user-profile.component.ts" >}}
-{{< highlight typescript >}}
-import { Component } from '@angular/core';
-import { AuthService } from '../../auth.service';
-
-@Component(...)
-export class UserProfileComponent {
- constructor(public auth: AuthService) { }
-}
-
-{{< /highlight >}}
-
-In the component HTML, we define two templates based on the `user$` Observable. If the value is `null`, we show the guest template, but if it is defined we show the authenticated template and corresponding user data. The `async` will automatically subscribe to the Observable and unsubscribe when the component is destroyed.
-
-{{< file "html" "user-profile/user-profile.component.html" >}}
-{{< highlight html >}}
-
-
-
-
-
-
- Howdy, GUEST
- Login to get started...
-
-
-
-
-
-
-
-
-
-
-
Howdy, {{ user.displayName }}
-
-
UID: {{ user.uid }}
-
Logout
-
-{{< /highlight >}}
-
-{{< figure src="img/login-google-popup.png" alt="Google signin popup via firebase" >}}
-
-
-## Step 5: Protect Routes with Angular Guards
-
-A useful UX feature is to protect routes based on the user's auth state. Now that we have an Observable `user$` from the previous step, we can implement `canActivate` guard.
-
-When the user navigates, all routes using this guard will subscribe to the `user$`. If it emits true, the route can be accessed. If false, the user is redirected to the login page.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-ng generate guard auth
-{{< /highlight >}}
-
-### Map the User to a Boolean
-
-The guard interface requires our observable to emit a boolean. We can
-
-{{< file "ngts" "app/auth.guard.ts" >}}
-{{< highlight typescript >}}
-import { Injectable } from '@angular/core';
-import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
-
-import { AuthService} from './auth.service'
-import { Observable } from 'rxjs';
-import { tap, map, take } from 'rxjs/operators';
-
-@Injectable()
-export class AuthGuard implements CanActivate {
- constructor(private auth: AuthService, private router: Router) {}
-
- canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable {
-
- return this.auth.user$.pipe(
- take(1),
- map(user => !!user), // <-- map to boolean
- tap(loggedIn => {
- if (!loggedIn) {
- console.log('access denied')
- this.router.navigate(['/login']);
- }
- })
- )
- }
-}
-{{< /highlight >}}
-
-You can then apply this guard to individual routes like so:
-
-{{< file "ngts" "app/routing.module.ts" >}}
-{{< highlight typescript >}}
-const routes: Routes = [
- //...
- { path: 'notes', component: NotesListComponent, canActivate: [AuthGuard] },
-];
-{{< /highlight >}}
-
-{{< box icon="flask" class="box-green" >}}
-PRO Tip - You may find it useful to simplify this guard code by defining a method in your auth service that can [retrieve the Firebase UID as a Promise](/snippets/get-angularfire-userid-as-promise).
-{{< /box >}}
-
-
-
-
-## Step 6: Backend Security Rules
-
-It is essential that only the *owner* of a user document can modify its data. We cannot just rely on our frontend code to provide this security, so let's setup [Firestore rules](/snippets/firestore-rules-recipes/). I prefer to create a reusable function to determine document ownership because you are likely to need this logic in multiple rules.
-
-
-{{< file "firebase" "firestore rules" >}}
-{{< highlight js >}}
-service cloud.firestore {
- match /databases/{database}/documents {
-
- match /users/{userId} {
- allow write, read: if isOwner(userId);
- }
-
- // Reusable function to determine document ownership
- function isOwner(userId) {
- return request.auth.uid == userId
- }
- }
-}
-{{< /highlight >}}
-
-It is generally easier to define your rules directly in the Firestore dashboard to where you can take advantage of the integrated testing and versioning.
-
-{{< figure src="img/firestore-rules-auth.png" alt="Google signin popup via firebase" >}}
-
-## The End
-
-That's it! You now have all the basic pieces in place for a reliable and flexible Angular/Firebase authentication system.
diff --git a/hugo/content/lessons/animated-navigation-flutter-flare/index.md b/hugo/content/lessons/animated-navigation-flutter-flare/index.md
deleted file mode 100644
index 4067a3c17..000000000
--- a/hugo/content/lessons/animated-navigation-flutter-flare/index.md
+++ /dev/null
@@ -1,280 +0,0 @@
----
-title: Flutter Flare 2D Animation Basics
-lastmod: 2019-04-02T11:00:35-07:00
-publishdate: 2019-04-02T11:00:35-07:00
-author: Jeff Delaney
-draft: false
-description: Build an animated navigation menu in Flutter with Flare2D
-tags:
- - flutter
- - flare2d
- - animation
-
-youtube: hwBUU9CP4qI
-github: https://github.com/fireship-io/177-flare-flutter-giphy-navbar
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-Whenever I see an awesome UI element in a native app my first question is *How do I make that in Flutter?*. That's exactly what I asked when I downloaded the [Giphy](https://giphy.com/apps) Android app recently, which has runs a colorful and fun animation for each icon in the bottom navbar.
-
-{{< vimeo 328094871 >}}
-
-These animations are complex. Hypothetically, they could be created in Flutter natively with a custom painter, but that would be very challenging and painful. Thankfully, we have [Flare 2D](https://www.2dimensions.com/about-flare) a design tool that makes it easy to create complex animations with vector graphics and run them in Flutter's rendering engine at 60+ FPS.
-
-## Part 1: Create Animated Icons with Flare 2D
-
-{{< box icon="scroll" class="box-green" >}}
-Access the files used in this lesson on my [Flare profile](https://www.2dimensions.com/a/delaneyphx/files/recent/all) or from the project github repo.
-{{< /box >}}
-
-First, we need to create some awesome animated graphics with Flare. Create a free account, then complete the tasks below. These tasks represent the skills you need to have in Flare to re-create Giphy's animated icons.
-
-I highly recommend memorizing the following hotkeys.
-
-- `T` translate or move shapes around.
-- `S` scale or resize shapes.
-- `R` rotate shapes.
-- Hold `space` to drag around the screen.
-- `ctrl+Z` to undo.
-
-
-### Draw a Shape
-
-Flare provides a basic set of design tools that we can use to draw vector graphics. You can also design your graphics in a different tool, like Figma or Sketch for example, then import them into Flare.
-
-
-**Tasks**
-
-1. Draw a basic star shape using the star tool.
-1. Center it on the artboard and have it take up as much space on the Y axis as possible.
-1. Remove the stroke and adjust the fill color.
-
-{{< figure src="img/flare-star.png" caption="Draw a star" >}}
-
-### Animate the Fill Color
-
-We can animate almost anything on the shape. Let's get familiar with the animation timeline by animating the color of the star from gray to yellow.
-
-**Tasks**
-
-1. Switch to animation mode.
-1. Change the untitled animation name to *go* (this will be important when we get the Flutter code).
-1. Create a keyframe by selecting the diamond next to the fill control.
-1. Scrub the timeline to the end and change the fill color. A new keyfame would be added automatically.
-1. Press play. You just created an animation.
-
-{{< figure src="img/flare-star-animated.png" caption="Animate the fill color of the star" >}}
-
-### Animate Transformations - Translate, Scale, Rotate
-
-An easy way to bring your shapes to life is by animating size, movement, and rotation angle.
-
-**Tasks**
-
-1. Create keyframes for rotation and scale.
-2. Adjust the key interpolation to make to ease the timing.
-
-{{< figure src="img/flare-star-rotate.png" caption="Animate the rotation of the star and change the key interpolation to cubic" >}}
-
-
-### Animate the Shape
-
-We can also animate the verticies of the star to to transform it into a completely different shape.
-
-
-**Tasks**
-
-1. Add a keyframe to edit verticies.
-1. Click "edit verticies", scrub to a different time, move the verticies to automatically add a keyframe.
-
-{{< figure src="img/flare-star-vert.png" caption="Use the verticies to change and animate the points of the shape" >}}
-
-### Animate the Stroke for a Hand-Drawn Effect
-
-Stroke animations make it easy to look like you are drawing a shape by hand.
-
-**Tasks**
-
-1. Give the shape a stroke.
-1. Set the end of the stroke to 0% until it is invisible.
-1. Animate the end value to give it a drawing effect.
-
-{{< figure src="img/flare-animated-stroke.png" caption="Animate the stroke end from 0% to 100%" >}}
-
-### Animate the Position in a Clipping Mask
-
-Clipping masks allow you to make shapes disappear behind another shape. A clipping mask is like installing a window on the house - you can only see the contents inside its boundaries.
-
-
-**Tasks**
-
-1. Create a new shape that covers the star.
-1. Select the star, then click *clipping box*, then select the new shape.
-1. Go into animation mode and animate the position of the star.
-
-{{< figure src="img/flare-star-clip.png" caption="Create another shape to serve as a clipping box for the star. " >}}
-
-
-## Part 2 - Flutter Flare Integration
-
-Flare provides package that makes it dead simple to use our animations into an iOS or Android app with Flutter. Run to `flutter create your_project` to get started. The end goal is to build a usable animated icon navigation menu like the demo below:
-
-{{< vimeo 328094871 >}}
-
-### Add flare_flutter to pubspec.yaml
-
-Add [flare_flutter](https://pub.dartlang.org/packages/flare_flutter) to the `pubspec.yaml`.
-
-{{< file "yaml" "build.yaml" >}}
-{{< highlight yaml >}}
-dependencies:
- flutter:
- sdk: flutter
-
- flare_flutter: any
-
-
-flutter:
- uses-material-design: true
- assets:
- - assets/
-
-{{< /highlight >}}
-
-
-### Export your Animations to Flutter
-
-Export the animations to a folder named `assets` in the root of your project.
-
-{{< figure src="img/flare-export-screen.png" caption="Export the binary file from Flare" >}}
-
-
-### Define a Class for the Menu Item
-
-There are many different ways to build a menu in flutter, but we're going to build our navigation menu from scratch. The data for each menu item can be abstracted into a class.
-
-- `name` is the filename of the *.flr* asset
-- `color` controls the line above the icon
-- `x` is the X-axis alignment of the item (-1 is far left, 1 is far right).
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class MenuItem {
- final String name;
- final Color color;
- final double x;
- MenuItem({this.name, this.color, this.x});
-}
-
-{{< /highlight >}}
-
-### Animating the Colored Top Bar
-
-Our navigation menu is wrapped in a StatefulWidget to keep track of the currently selected item. Here's a breakdown of each important line of code.
-
-1. Set a default menu item on `initState`.
-2. Define a [Stack](https://fireship.io/lessons/flutter-widget-positioning-guide/). The first element is an container for the colored , while the second item is the navigation menu row..
-3. Create an [AnimatedContainer](https://www.youtube.com/watch?v=yI-8QHpGIP4&vl=en) that takes up 20% of the screen width and is aligned to the active menu item.
-4. Define a *Row* to hold the Flare graphics that uses `spaceAround` alignment on the main axis.
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class NavBar extends StatefulWidget {
- createState() => NavBarState();
-}
-
-class NavBarState extends State {
- List items = [
- MenuItem(x: -1.0, name: 'house', color: Colors.lightBlue[100]),
- MenuItem(x: -0.5, name: 'planet', color: Colors.purple),
- MenuItem(x: 0.0, name: 'camera', color: Colors.greenAccent),
- MenuItem(x: 0.5, name: 'heart', color: Colors.pink),
- MenuItem(x: 1.0, name: 'head', color: Colors.yellow),
- ];
-
- MenuItem active;
-
- @override
- void initState() {
- super.initState();
-
- active = items[0]; // <-- 1. Activate a menu item
- }
-
- @override
- Widget build(BuildContext context) {
- double w = MediaQuery.of(context).size.width;
- return Container(
- height: 80,
- color: Colors.black,
- child: Stack( // <-- 2. Define a stack
- children: [
- AnimatedContainer( // <-- 3. Animated top bar
- duration: Duration(milliseconds: 200),
- alignment: Alignment(active.x, -1),
- child: AnimatedContainer(
- duration: Duration(milliseconds: 1000),
- height: 8,
- width: w * 0.2,
- color: active.color,
- ),
- ),
- Container( // <-- 4. Main menu row
- child: Row(
- mainAxisAlignment: MainAxisAlignment.spaceAround,
- crossAxisAlignment: CrossAxisAlignment.end,
- children: items.map((item) {
- return _flare(item); // <-- 5. Flare graphic will go here
- ),
- )
- ],
- ),
- );
- }
-
-}
-{{< /highlight >}}
-
-
-### Animating the Flare Graphics
-
-In this final section, we define a method that will turn the Flare animations into tap-able buttons that change the state of the widget. This can be achieved with a `setState` call from a *GestureDetector*, as we do not want Material ink splashes in this demo.
-
-The *FlareActor* is a widget from the flare_flutter package that that will run the specified animation when the state changes.
-
-{{< box icon="scroll" class="box-blue" >}}
-Remember, we defined the animation name as *go* in the Flare editor before exporting the file. By default, the animation name is *Untitled*.
-{{< /box >}}
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
- Widget _flare(MenuItem item) {
- return GestureDetector(
- child: AspectRatio(
- aspectRatio: 1,
- child: Padding(
- padding: EdgeInsets.only(top: 20),
- child: FlareActor(
- 'assets/${item.name}.flr',
- alignment: Alignment.center,
- fit: BoxFit.contain,
- animation: item.name == active.name ? 'go' : 'idle',
- ),
- ),
- ),
- onTap: () {
- setState(() {
- active = item;
- });
- },
- );
- }
-{{< /highlight >}}
\ No newline at end of file
diff --git a/hugo/content/lessons/apple-signin-with-firebase-tutorial/index.md b/hugo/content/lessons/apple-signin-with-firebase-tutorial/index.md
deleted file mode 100644
index 3379469d9..000000000
--- a/hugo/content/lessons/apple-signin-with-firebase-tutorial/index.md
+++ /dev/null
@@ -1,101 +0,0 @@
----
-title: Sign In with Apple on Firebase
-lastmod: 2020-04-20T08:41:24-07:00
-publishdate: 2020-02-09T08:41:24-07:00
-author: Jeff Delaney
-draft: false
-description: Authenticate users into your Firebase app using Sign In with Apple on the web
-tags:
- - auth
- - ios
- - javascript
-
-type: lessons
-youtube: UafqYgRoIC0
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
----
-
-[Sign in with Apple](https://developer.apple.com/videos/play/wwdc2019/706/) was announced in 2019 and allows users to authenticate into your Firebase app with an Apple ID. Users must have two-factor authentication (2FA) enabled on their Apple account AND be signed into iCloud.
-
-
-
-The following lesson demonstrates how to configure Apple SignIn with the Firebase JavaScript SDK (web).
-
-🚨 As of April 2020, all native iOS apps that offer social auth methods (Google, Facebook, etc.) MUST also include Apple Sign In as an option. See the detailed [guideline](https://developer.apple.com/app-store/review/guidelines/#sign-in-with-apple). If you're looking for Flutter, check out this [Sign In with Apple on Flutter](/courses/flutter-firebase/project-auth-apple-signin) section from the full course.
-
-
-## Sign in with Apple Setup (Web)
-
-Follow the steps outlined below to implement [Sign In with Apple](https://developer.apple.com/sign-in-with-apple/) in your web app.
-
-### Step 1 - Create or Update an App ID
-
-From the Apple Developer Portal go to [Certificates, Identifiers & Profiles >> Identifiers](https://help.apple.com/developer-account/#/devcdfbb56a3). Create a new **App ID** or update an existing app and give it the **Sign In with Apple** capability.
-
-{{< figure src="/img/snippets/apple-signin-app1.png" alt="Apple Developer Portal App IDs" >}}
-{{< figure src="/img/snippets/apple-signin-app2.png" caption="Make sure Sign In with Apple is Enabled" >}}
-
-### Step 2 - Create and Configure a Service ID
-
-
-From *Certificates, Identifiers & Profiles >> Identifiers*, create a new **Service ID** and make sure is linked to your primary App ID. Configure it point to your Firebase hosting URL.
-
-{{< figure src="/img/snippets/apple-signin-web-config.png" caption="Replace the project ID for your domain" >}}
-
-
-### Step 3 - Verify Domain Ownership
-
-Go to Service ID you created in the previous step and click *configure*, then click *download*. Save the file in your web app's public hosting directory under `./well-known/`.
-
-Deploy this file to your domain so Apple can verify it.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase deploy --only hosting
-{{< /highlight >}}
-
-{{< figure src="/img/snippets/apple-signin-verify.png" caption="You should see a green checkmark next to the domain" >}}
-
-### Step 4 - Register a Private Key
-
-From *Certificates, Identifiers & Profiles >> Identifiers*, create and download a new private key - keep it private. It is used to validate requests from Apple with your Firebase project.
-
-{{< figure src="/img/snippets/apple-signin-private-key.png" caption="Download the private key. Do not expose it publicly." >}}
-
-
-### Step 5 - Enable SignIn Method on Firebase
-
-Head over the to the [Firebase Console](https://console.firebase.google.com/) and go to the *Authentication >> Sign-in Method* tab. Enable Apple and enter the required details.
-
-{{< figure src="/img/snippets/apple-signin-firebase-console.png" caption="Copy the contents of the private key in the console" >}}
-
-
-## Frontend Code
-
-We now have all the pieces in place to implement SignIn with Apple into our web app. Because this is Firebase, it only requires a few lines of code. Assuming you have [Firebase installed](/snippets/install-angularfire/) in your project, simply make a reference the the provider and call `signInWithPopup()`.
-
-{{< figure src="/img/snippets/apple-signin-popup.png" caption="SignIn with Apple popup seen by the end-user" >}}
-
-### Basic JavaScript Implementation
-
-The frontend implementation is an async function that can bound to a button click to trigger the popup modal. Make sure to follow [Apple UI guidelines](https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/) when designing the button.
-
-{{< file "js" "app.js" >}}
-{{< highlight javascript >}}
-const auth = firebase.auth();
-
-async signInWithApple() {
- const provider = new firebase.auth.OAuthProvider('apple.com');
- const result = await auth.signInWithPopup(provider);
-
- console.log(result.user); // logged-in Apple user
-}
-{{< /highlight >}}
diff --git a/hugo/content/lessons/bigquery-ml-quickstart/index.md b/hugo/content/lessons/bigquery-ml-quickstart/index.md
deleted file mode 100644
index fc368d77e..000000000
--- a/hugo/content/lessons/bigquery-ml-quickstart/index.md
+++ /dev/null
@@ -1,198 +0,0 @@
----
-title: BigQuery ML Quickstart
-lastmod: 2019-03-13T18:23:18-07:00
-publishdate: 2019-03-13T18:23:18-07:00
-author: Jeff Delaney
-draft: false
-description: Use BigQuery to process massive amounts of data for analysis and machine learning.
-tags:
- - machine-learning
- - big-query
- - sql
- - python
-
-youtube: ajTp60neMlc
-# github:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-[BigQuery](https://cloud.google.com/bigquery/) is a serverless [Data Warehouse](https://en.wikipedia.org/wiki/Data_warehouse) that makes it easy to process and query massive amounts of data. It supports standard SQL queries in a web-based UI, via the command line, or with a variety of client libraries. In addition, it recently landed support for integrated machine learning, allowing you to build predictive models without data science skills.
-
-**What can you do with Big Query?**
-
-- Stream data to business intelligence tools like Data Studio, Tableau, etc.
-- Combine Web Analytics with iOS/Android on Firebase.
-- Organize and connect multiple data sources.
-- Build an horse racing machine learning model 🏇
-
-In the following lesson, we will harness the data-crunching power of 👾 BigQueryML, along with DataStudio and DataLab, to build a predictive model from historical Horse Racing Data. Our goal is to turn this dataset into an ML model
-
-
-## Import Data into Big Query
-
-The first step is to import your data into BigQuery. Create a new Google Cloud Platform or Firebase project, then navigate to the [BigQuery Web UI](https://console.cloud.google.com/bigquery).
-
-### Upload Data to Cloud Storage
-
-Download the [Horse Racing Dataset](https://www.kaggle.com/lukebyrne/horses-for-courses) from Kaggle, specifically the *horses.csv* file. Because this file is larger than 10Mb, we need to first upload it to a GCP storage bucket.
-
-{{< figure src="img/bigquery-upload-data.png" caption="Upload horses.csv to a cloud storage bucket" >}}
-
-### Create a Dataset & Table
-
-Click on the **+ Add Data** button and make sure your project is pinned, then click on **Create Dataset**. Provide a name and use the default options.
-
-{{< figure src="img/bigquery-console.png" caption="The big query web UI" >}}
-
-
-Now that you have a dataset, you can start adding tables to it. Tables represent data that you query using SQL. You can define your own schema manually, but BigQuery can autodetect the schema of CSV files based on the header row and a random sample of rows. Click **Create Table** and reference the data in the storage bucket with the following options.
-
-
-{{< figure src="img/bigquery-create-table.png" >}}
-{{< figure src="img/bigquery-create-table2.png" caption="Follow these configuration options closely. Set the schema to auto-detect and the 'Header rows to skip' to 1 under the advanced tab" >}}
-
-
-### Make your First Query
-
-The end result should be a table that looks just like the original spreadsheet. Enter a [Standard SQL Query](https://cloud.google.com/bigquery/docs/reference/standard-sql/query-syntax) in the console to try it out. In this dataset, the *position* value represents a horse's finishing position in a race, which is what we want to predict.
-
-
-{{< figure src="img/bigquery-schema.png" >}}
-
-{{< file "sql" >}}
-{{< highlight sql >}}
-SELECT age, position, sex
-
-FROM `fireship-lessons.horse_data.horses`
-
-WHERE age > 2
-
-LIMIT 1000
-{{< /highlight >}}
-
-{{< box icon="scroll" class="box-blue" >}}
-If the data looks malformatted at this point, you may need to open horses.csv in a MS excel and manually convert the number columns to numbers. BigQuery will error out if mismatched datatypes are present in the data.
-{{< /box >}}
-
-
-### Optional: Analyze in Data Studio
-
-Make a query, then click **Export -> Explore in Data Studio**. A solid ML algorithm typically starts off with a thorough exploratory analysis. DataStudio will help you visualize the dataset and create custom charts.
-
-{{< figure src="img/bigquery-datastudio.png" >}}
-
-
-## Create a Predictive ML Model
-
-Now we're ready for the fun part - converting our horse racing data into a predictive ML model. We will use another GCP service called [DataLab](https://cloud.google.com/datalab/), which connects a cloud VM to a Python notebook, along with a connection to your BigQuery dataset. In other words, it puts unlimited compute resources at your fingertips for training ML models on your data.
-
-{{< box icon="hazard" class="box-red" >}}
-The DataLab instance will accrue costs. Make sure to delete the VM from the compute tab and any other resources after you are finished with this tutorial.
-{{< /box >}}
-
-### Open a Cloud Shell
-
-Click on the **Activate Cloud Shell** button in the top right next your profile image. This opens a shell session that we can use to launch a DataLab instance.
-
-{{< figure src="img/bigquery-shell.png" >}}
-
-Enter the `datalab create horsemagic` command and follow the steps it gives you, which will result in an SSH tunnel on port 8081.
-
-{{< figure src="img/bigquery-shell2.png" caption="Open the web preview, but make sure to change the port to 8081" >}}
-
-### Access BigQuery from DataLab
-
-Your BigQuery data is automatically available in the DataLab notebook. Create a new notebook, then get familiar with the available commands by running `%% bq -h`.
-
-
-{{< figure src="img/bigquery-datalab.png" caption="Run '%%bq tables list' and you should see the table we created in BigQuery" >}}
-
-
-### Create a Model
-
-Create a new cell in the notebook and run the code below, but make sure to use your own table names. Our goal is to predict the *position* label. This is a [classification](https://math.stackexchange.com/questions/141381/regression-vs-classification) problem, so we use *logistic_reg* as the model type, then select the columns we think will result in the best predictions - feel free to change these and experiment. Reference the [CREATE MODEL](https://cloud.google.com/bigquery/docs/reference/standard-sql/bigqueryml-syntax-create) statement docs for additional BigQueryML options.
-
-{{< file "python" "notebook" >}}
-{{< highlight python >}}
-%%bq query
-CREATE OR REPLACE MODEL `fireship-lessons.horse_data.ml_model`
-OPTIONS
- (model_type='logistic_reg',
- input_label_cols=['position']) AS
-SELECT
- age,
- sex,
- overall_wins, overall_places, handicap_weight, penalty,
- favourite_odds_win, number, runner_id, bf_odds, barrier, market_id,
- position
-FROM
- `fireship-lessons.horse_data.horses`
-{{< /highlight >}}
-
-
-{{< figure src="img/bigquery-ml-model.png" caption="This will take a few minutes, then the ML model should appear in the BigQuery dataset" >}}
-
-### Evaluate Performance and Predict
-
-For this particular ML problem, we are interested in the *log_loss* metric - a smaller value is better.
-
-{{< file "python" "notebook" >}}
-{{< highlight python >}}
-%%bq query
-SELECT
- *
-FROM
- ML.EVALUATE(MODEL `fireship-lessons.horse_data.ml_model`,
- (
- SELECT
- age,
- sex,
- overall_wins, overall_places, handicap_weight, penalty,
- favourite_odds_win, number, runner_id, bf_odds, barrier, market_id,
- position
- FROM
- `fireship-lessons.horse_data.horses`
- )
- )
-
-{{< /highlight >}}
-
-
-
-{{< figure src="img/bigquery-ml-results.png" >}}
-
-At this point, we're happy with our model and it should pick the right winner for every horse race, therefore making us extremely wealthy 🤑. To make predictions, we can add new tables to our database with the same schema, then use the ML.PREDICT statement. In this example, I am just taking 10 random samples from the existing data.
-
-
-
-{{< file "python" "notebook" >}}
-{{< highlight python >}}
-%%bq query
-SELECT
- sex, runner_id, position
-FROM
- ML.PREDICT(MODEL `fireship-lessons.horse_data.ml_model`,
- (
- SELECT
- age,
- sex,
- overall_wins, overall_places, handicap_weight, penalty,
- favourite_odds_win, number, runner_id, bf_odds, barrier, market_id,
- position
- FROM
- `fireship-lessons.horse_data.horses`
- ORDER BY RAND()
- LIMIT 10
-
- )
- )
-{{< /highlight >}}
-
-{{< figure src="img/bigquery-ml-predict.png" caption="The final model predictions that we can take to the racetrack" >}}
\ No newline at end of file
diff --git a/hugo/content/lessons/build-a-binary-clock-flutter/index.md b/hugo/content/lessons/build-a-binary-clock-flutter/index.md
deleted file mode 100644
index f8f97efa4..000000000
--- a/hugo/content/lessons/build-a-binary-clock-flutter/index.md
+++ /dev/null
@@ -1,318 +0,0 @@
----
-title: Build a Binary Clock with Flutter
-lastmod: 2019-11-21T12:40:31-07:00
-publishdate: 2019-11-21T12:40:31-07:00
-author: Jeff Delaney
-draft: false
-description: "Learn how to build a binary clock with Flutter for the #FlutterClock competition"
-tags:
- - flutter
- - compsci
-
-youtube: VkTj1U_exwA
-github: https://github.com/fireship-io/214-flutter-binary-clock
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-
-The Flutter Clock [Contest](https://flutter.dev/clock) is currently running with a submission deadline of Jan 20th, 2020. The following lesson will teach you how to build a basic clock with Flutter.
-
-## Binary Clock Basics
-
-We are building the [binary clock](https://en.wikipedia.org/wiki/Binary_clock) shown in the demo video below. Notice how the clock ticks once-per-second and updates the highlighted boxes in the UI. The actual time is shown in big plain digits at the bottom, with the binary value for each number under it.
-
-Each **column** represents a digit of time in `hh:mm:ss` format. Each **row** represents a binary value of 1, 2, 4, or 8 (or 0 if no boxes are colored). You calculate each digit in regular time by adding all the values (or bits) in a column.
-
-
-
-{{< vimeo 374741877 >}}
-
-
-## Initial Setup
-
-
-### Create a Flutter App
-
-Get started by creating a new Flutter app by running `flutter create my_awesome_clock`. The initial app will import a few dependencies and wrap the `Clock` widget inside of Scaffold.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-import 'dart:async';
-import 'dart:math';
-
-import 'package:flutter/material.dart';
-import 'package:flutter/services.dart' show SystemChrome, DeviceOrientation;
-import 'package:intl/intl.dart' show DateFormat;
-
-void main() {
- runApp(MyApp());
-}
-
-class MyApp extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- home: Scaffold(
- body: Clock(),
- ),
- );
- }
-}
-
-{{< /highlight >}}
-
-
-### Force the App to Run in Landscape Mode
-
-The Flutter Clock contest requires the app to run in landscape mode. You can tell Flutter to whitelist specific device orientations with the SystemChrome class. In our case, we will allow `landscapeLeft` or `landscapeRight` by updating the main function.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-void main() {
- SystemChrome.setPreferredOrientations([
- DeviceOrientation.landscapeRight,
- DeviceOrientation.landscapeLeft,
- ]);
- runApp(MyApp());
-}
-{{< /highlight >}}
-
-## Working with Time
-
-### Make the Clock Tick
-
-The only state that ever changes on the clock is the time, which should update once-per-second. Simply create a [DateTime](https://api.dartlang.org/stable/2.6.1/dart-core/DateTime-class.html) property and update it every second with a periodic timer.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class Clock extends StatefulWidget {
- Clock({Key key}) : super(key: key);
-
- @override
- _ClockState createState() => _ClockState();
-}
-
-class _ClockState extends State {
-
- DateTime _now = DateTime.now(); // or BinaryTime see next step
-
- // Tick the clock
- @override
- void initState() {
- Timer.periodic(Duration(seconds: 1), (v) {
- setState(() {
- _now = DateTime.now(); // or BinaryTime see next step
- });
- });
-
- super.initState();
- }
-
-
-}
-
-{{< /highlight >}}
-
-### Converting Integers to Binary Strings
-
-A clock displays time on a format that looks like `14:23:55` or `hh:mm:ss`. In order to keep business logic out of the widget, a custom class called `BinaryTime` provides the values we need for the main UI.
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-/// Utility class to access values as binary integers
-class BinaryTime {
- List binaryIntegers;
-
- BinaryTime() {
- DateTime now = DateTime.now();
- String hhmmss = DateFormat("Hms").format(now).replaceAll(':', '');
-
- binaryIntegers = hhmmss
- .split('')
- .map((str) => int.parse(str).toRadixString(2).padLeft(4, '0'))
- .toList();
- }
-
- get hourTens => binaryIntegers[0];
- get hourOnes => binaryIntegers[1];
- get minuteTens => binaryIntegers[2];
- get minuteOnes => binaryIntegers[3];
- get secondTens => binaryIntegers[4];
- get secondOnes => binaryIntegers[5];
-}
-{{< /highlight >}}
-
-
-## Clock UI
-
-### Columns for Each Clock Digit
-
-Each column in the binary clock represents a digit in normal base-10 time. The Clock widget implements six fixed columns for each digit.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-
-class Clock extends StatefulWidget {
- Clock({Key key}) : super(key: key);
-
- @override
- _ClockState createState() => _ClockState();
-}
-
-class _ClockState extends State {
- BinaryTime _now = BinaryTime();
-
- // Tick the clock
- @override
- void initState() {
- Timer.periodic(Duration(seconds: 1), (v) {
- setState(() {
- _now = BinaryTime();
- });
- });
- super.initState();
- }
-
- @override
- Widget build(BuildContext context) {
- return Container(
- padding: EdgeInsets.all(50),
- child: Row(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
- // Columns for the clock
- ClockColumn(
- binaryInteger: _now.hourTens,
- title: 'H',
- color: Colors.blue,
- rows: 2,
- ),
- ClockColumn(
- binaryInteger: _now.hourOnes,
- title: 'h',
- color: Colors.lightBlue,
- ),
- ClockColumn(
- binaryInteger: _now.minuteTens,
- title: 'M',
- color: Colors.green,
- rows: 3,
- ),
- ClockColumn(
- binaryInteger: _now.minuteOnes,
- title: 'm',
- color: Colors.lightGreen,
- ),
- ClockColumn(
- binaryInteger: _now.secondTens,
- title: 'S',
- color: Colors.pink,
- rows: 3,
- ),
- ClockColumn(
- binaryInteger: _now.secondOnes,
- title: 's',
- color: Colors.pinkAccent,
- ),
- ],
- ),
- );
- }
-}
-{{< /highlight >}}
-
-
-
-### Individual Clock Column
-
-At this point, each column must be split into four cells, where a cell represents a single bit. The code below loops over the digits in a binary integer, then colors them if the cell is active (has a value of 1).
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-/// Column to represent a binary integer.
-class ClockColumn extends StatelessWidget {
- String binaryInteger;
- String title;
- Color color;
- int rows;
- List bits;
-
- ClockColumn({this.binaryInteger, this.title, this.color, this.rows = 4}) {
- bits = binaryInteger.split('');
- }
-
- @override
- Widget build(BuildContext context) {
- return Column(
- mainAxisAlignment: MainAxisAlignment.spaceBetween,
- children: [
- ...[
- Container(
- child: Text(
- title,
- style: Theme.of(context).textTheme.display1,
- ),
- )
- ],
- ...bits.asMap().entries.map((entry) {
- int idx = entry.key;
- String bit = entry.value;
-
- bool isActive = bit == '1';
- int binaryCellValue = pow(2, 3 - idx);
-
- return AnimatedContainer(
- duration: Duration(milliseconds: 475),
- curve: Curves.ease,
- height: 40,
- width: 30,
- decoration: BoxDecoration(
- borderRadius: BorderRadius.all(Radius.circular(5)),
- color: isActive
- ? color
- : idx < 4 - rows
- ? Colors.white.withOpacity(0)
- : Colors.black38,
- ),
- margin: EdgeInsets.all(4),
- child: Center(
- child: isActive
- ? Text(
- binaryCellValue.toString(),
- style: TextStyle(
- color: Colors.black.withOpacity(0.2),
- fontSize: 18,
- fontWeight: FontWeight.w700,
- ),
- )
- : Container(),
- ),
- );
- }),
- ...[
- Text(
- int.parse(binaryInteger, radix: 2).toString(),
- style: TextStyle(fontSize: 30, color: color),
- ),
- Container(
- child: Text(
- binaryInteger,
- style: TextStyle(fontSize: 15, color: color),
- ),
- )
- ]
- ],
- );
- }
-}
-
-
-{{< /highlight >}}
\ No newline at end of file
diff --git a/hugo/content/lessons/build-a-chatbot-with-dialogflow/index.md b/hugo/content/lessons/build-a-chatbot-with-dialogflow/index.md
deleted file mode 100644
index 76a9ff50f..000000000
--- a/hugo/content/lessons/build-a-chatbot-with-dialogflow/index.md
+++ /dev/null
@@ -1,332 +0,0 @@
----
-title: Build a Chatbot With Dialogflow
-lastmod: 2019-08-12T09:45:18-07:00
-publishdate: 2019-08-12T09:45:18-07:00
-author: Jeff Delaney
-draft: false
-description: Build a fullstack conversational experience with Dialogflow and Firebase Cloud Functions.
-tags:
- - cloud-functions
- - node
- - dialogflow
- - angular
-
-youtube: 0NXqwT3Y09E
-github: https://github.com/fireship-io/202-chatbot-dialogflow
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-[Chatbots](https://en.wikipedia.org/wiki/Chatbot) make it possible for the average developer to deliver excellent (and affordable) customer service at scale - Building conversational experiences has never been easier thanks to the [Dialogflow](https://dialogflow.com/) conversation platform.
-
-Dialogflow is a free tool on Google Cloud for creating voice and text conversational interfaces. It uses Natural Language Processing [NLP](https://www.kaggle.com/romanj86/introduction-to-nlp/data) technology, allowing you to create experiences similar to Google Assistant or Amazon Alexa. In following lesson creates a chatbot from scratch in the three main steps:
-
-
-1. Create a chatbot on the Dialogflow Console
-1. Connect it to Firebase Cloud Functions (NodeJS)
-1. Interact with it from frontend Angular app
-
-## Part 1: Create a Chatbot
-
-Before getting started, it is recommended that you have an existing Firebase or GCP project.
-
-### Create an Agent
-
-An agent is basically a entity that contains the knowledge and behaviors used to respond to phrases and fulfill user intentions.
-
-{{< figure src="img/agent.png" caption="Create the Dialogflow Agent " >}}
-
-### Create an Intent
-
-Think of a conversation as a **turn-based game**. An [Intent](https://cloud.google.com/dialogflow/docs/intents-overview) represents the end-user's goal or intention based on their last turn. When the bot is able to classify the intent, it can respond with useful information.
-
-Example:
-
-> USER: Can you change my username to bob23
-
-Bot recognizes question/intent and fulfills the request by updating Firestore from a Cloud Function.
-
-> BOT: Absolutely, it has been updated in the database!
-
-
-{{< figure src="img/intent-train.png" caption="" >}}
-
-
-### Actions and Parameters
-
-In this example, we want our bot to determine the user's preferred display name and favorite color. We can do that by providing prompts that extract that data. After all required params have been extracted, we will use them to permanently update the user's record in the Firestore database. Dialogflow will ask the questions specified as *prompts* until it receives a valid *entity* value for that param.
-
-{{< figure src="img/params.png" alt="Dialogflow action and params" >}}
-
-
-### Responses and Fulfillment
-
-When an intent is completed you can setup a simple response in the Dialogflow console OR you can handle the fulfillment with a webhook. Enable a webhook call for this function.
-
-{{< figure src="img/webhook-fulfill.png" alt="Dialogflow webhook fulfillment" >}}
-
-## Part 2: Backend Cloud Functions
-
-Communicating with Dialogflow must be done on the server. In this section, we create HTTP Cloud Functions that enable frontend applications to communication with our agent.
-
-### Add your Service Account
-
-Dialogflow requires your full [service account](https://firebase.google.com/docs/admin/setup#initialize_the_sdk). Download it from the Firebase Console to `functions/service-account.json`.
-
-⚠️ Make sure to add the service account path to your `.gitignore` because it contains sensitive API keys that should not be exposed publicly.
-
-{{< figure src="img/functions-service-account.png" caption="Download your service account" >}}
-
-### Handling Conversations
-
-This first function is a generic endpoint that allows a frontend app to connect to the [Dialogflow API](https://github.com/googleapis/nodejs-dialogflow). The function expects the client to pass a `sessionId`, which is just a string that allows the bot to understand the current context of a conversation. It also expects the users `queryInput` text, which is what the user is saying to the bot.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-cd functions
-npm i dialogflow cors
-{{< /highlight >}}
-
-{{< file "js" "index.js" >}}
-{{< highlight javascript >}}
-const functions = require('firebase-functions');
-const cors = require('cors')({ origin: true});
-const admin = require('firebase-admin');
-const serviceAccount = require('./service-account.json');
-
-admin.initializeApp({
- credential: admin.credential.cert(serviceAccount),
- databaseURL: "https://fireship-lessons.firebaseio.com"
-});
-
-const { SessionsClient } = require('dialogflow');
-
-
-exports.dialogflowGateway = functions.https.onRequest((request, response) => {
- cors(request, response, async () => {
- const { queryInput, sessionId } = request.body;
-
-
- const sessionClient = new SessionsClient({ credentials: serviceAccount });
- const session = sessionClient.sessionPath('your-project', sessionId);
-
-
- const responses = await sessionClient.detectIntent({ session, queryInput});
-
- const result = responses[0].queryResult;
-
- response.send(result);
- });
-});
-
-{{< /highlight >}}
-
-
-### Fulfilling Intents with a Webhook
-
-The benefit of a webhook is that you can perform additional backend logic, like updating a database or reaching out to a another API, then format the response to the user dynamically. In this example, we take the *name* and *color* parameters from the user's conversation and update their account in Firestore.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm i dialogflow-fulfillment actions-on-google
-{{< /highlight >}}
-
-{{< file "js" "index.js" >}}
-{{< highlight javascript >}}
-
-const { WebhookClient } = require('dialogflow-fulfillment');
-
-exports.dialogflowWebhook = functions.https.onRequest(async (request, response) => {
- const agent = new WebhookClient({ request, response });
-
- const result = request.body.queryResult;
-
-
- async function userOnboardingHandler(agent) {
-
- // Do backend stuff here
- const db = admin.firestore();
- const profile = db.collection('users').doc('jeffd23');
-
- const { name, color } = result.parameters;
-
- await profile.set({ name, color })
- agent.add(`Welcome aboard my friend!`);
- }
-
-
- let intentMap = new Map();
- intentMap.set('UserOnboarding', userOnboardingHandler);
- agent.handleRequest(intentMap);
-});
-{{< /highlight >}}
-
-## Part 3: Frontend Angular Integration
-
-In this section, we build a user-friendly chat UI to interact with the bot. We can quickly build this feature with the [Nebular theme](https://akveo.github.io/nebular/) and Angular's HTTP client.
-
-### Initial Setup
-
-
-Install [Nebular](https://akveo.github.io/nebular/docs/components/chat-ui/overview#nbchatcomponent) and import Angular's HTTP Client in your app.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-ng new my-app --routing
-cd my-app
-
-ng add @nebular/theme
-
-ng generate component chatbot
-{{< /highlight >}}
-
-The app module should look something like this:
-
-{{< file "ngts" "app.module.ts" >}}
-{{< highlight typescript >}}
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { HttpClientModule } from '@angular/common/http';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { NbThemeModule, NbLayoutModule, NbChatModule, NbSpinnerModule } from '@nebular/theme';
-import { NbEvaIconsModule } from '@nebular/eva-icons';
-import { ChatbotComponent } from './chatbot/chatbot.component';
-
-
-@NgModule({
- declarations: [
- AppComponent,
- ChatbotComponent
- ],
- imports: [
- BrowserModule,
- AppRoutingModule,
- HttpClientModule,
- BrowserAnimationsModule,
- NbThemeModule.forRoot({ name: 'default' }),
- NbLayoutModule,
- NbEvaIconsModule,
- NbChatModule,
- NbSpinnerModule,
- ],
- providers: [],
- bootstrap: [AppComponent]
-})
-export class AppModule { }
-
-{{< /highlight >}}
-
-### Chatbot Component
-
-{{< file "ngts" "chatbot.component.ts" >}}
-{{< highlight typescript >}}
-import { Component, OnInit } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-
-const dialogflowURL = 'https://YOUR-CLOUDFUNCTION/dialogflowGateway';
-
-@Component({
- selector: 'app-chatbot',
- templateUrl: './chatbot.component.html',
- styleUrls: ['./chatbot.component.scss']
-})
-export class ChatbotComponent implements OnInit {
-
- messages = [];
- loading = false;
-
- // Random ID to maintain session with server
- sessionId = Math.random().toString(36).slice(-5);
-
- constructor(private http: HttpClient) { }
-
- ngOnInit() {
- this.addBotMessage('Human presence detected 🤖. How can I help you? ');
- }
-
- handleUserMessage(event) {
- console.log(event);
- const text = event.message;
- this.addUserMessage(text);
-
- this.loading = true;
-
- // Make the request
- this.http.post(
- dialogflowURL,
- {
- sessionId: this.sessionId,
- queryInput: {
- text: {
- text,
- languageCode: 'en-US'
- }
- }
- }
- )
- .subscribe(res => {
- const { fulfillmentText } = res;
- this.addBotMessage(fulfillmentText);
- this.loading = false;
- });
- }
-
- addUserMessage(text) {
- this.messages.push({
- text,
- sender: 'You',
- reply: true,
- date: new Date()
- });
- }
-
- addBotMessage(text) {
- this.messages.push({
- text,
- sender: 'Bot',
- avatar: '/assets/bot.jpeg',
- date: new Date()
- });
- }
-
-}
-
-{{< /highlight >}}
-
-### Chatbot Template
-
-{{< file "html" "chatbot.component.html" >}}
-{{< highlight html >}}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-{{< /highlight >}}
diff --git a/hugo/content/lessons/ci-cd-with-google-cloud-build/index.md b/hugo/content/lessons/ci-cd-with-google-cloud-build/index.md
deleted file mode 100644
index cc9862b11..000000000
--- a/hugo/content/lessons/ci-cd-with-google-cloud-build/index.md
+++ /dev/null
@@ -1,317 +0,0 @@
----
-title: Continuous Integration and Deployment with Google Cloud Build
-lastmod: 2019-01-17T04:17:11-07:00
-publishdate: 2019-01-17T04:17:11-07:00
-author: Jeff Delaney
-draft: false
-description: Learn how to automate the testing and deployment of an app with Google Cloud Build
-tags:
- - cloud-build
- - devops
- - docker
-
-youtube: Zd014DjonqE
-github: https://github.com/fireship-io/147-cloud-build-firebase
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-versions:
- firebase-tools: 6.3
----
-
-Continuous Integration and Delivery, aka CI/CD, aka [DevOps](https://www.atlassian.com/devops) is the process of automating build, test, and deploy tasks between code changes to your software. The practice can yield a wide range of benefits, but most importantly it keeps your development code looking nearly identical to your production code. The adoption of devops has been a macrotrend in tech for the last few years and presents opportunites for both large teams and independent entrepreneurs.
-
-In the following lesson, you will learn how to use [Google Cloud Build](https://cloud.google.com/cloud-build) to automate the following tasks by simply committing your code to Github:
-
-- Run unit tests
-- Build the production code
-- Deploy to Firebase Hosting
-
-## Step 0: Prerequisites
-
-1. {{< prereq "git-how-to-participate-on-github" >}}
-2. Install [firebase-tools](https://github.com/firebase/firebase-tools) CLI.
-3. Install [gcloud](https://cloud.google.com/sdk/gcloud/) CLI.
-4. Be able to create a frontend of your choice like Angular, Vue, or React.
-5. Billing must be enabled on Google Cloud, but the service is free for 120 minutes of build time per day (that's a lot).
-
-
-## Step 1: Build an App
-
-You can follow along with this lesson using your existing Firebase project or by starting from scratch. The frontend code does not really matter - it just needs to be an NPM project that we can build and test. Below are some popular options to quikly create a frontend JS app from the command line.
-
-
-{{< file "terminal" "command line" >}}
-{{< highlight bash >}}
-# pick your poison ☠️
-ng new my-app
-vue create my-app
-npx create-react-app my-app
-
-cd my-app
-
-firebase init
-# select hosting
-{{< /highlight >}}
-
-
-All of these frameworks ship with basic automated specs and build commands. This is what we want to automate with Cloud Build.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm run test
-npm run build
-firebase deploy
-{{< /highlight >}}
-
-## Step 2: Create a Remote Git Repo
-
-At this point, we need to connect your code to a remote git repo. This lesson will be using Github, but Cloud Build also integrates with GCP Source Repositories and BitBucket.
-
-Create a [Github repo](https://help.github.com/articles/create-a-repo/) (can be public or private), then commit your initial code to it.
-
-{{< highlight text >}}
-git add .
-git commit -m "initial commit"
-
-git remote add origin git@github.com:.git
-git push -u origin master
-{{< /highlight >}}
-
-## Step 3: Grant Cloud Build IAM Permissions
-
-Activate the Cloud Build API on GCP.
-
-Next, give Cloud Build access to your Firebase project. Go to the IAM menu and find the service account for **@cloudbuild.gserviceaccount.com**. Go ahead to grant permission to **KMS Cryptokey Decrypter** and **Firebase Admin** and the **API Keys Admin**.
-
-{{< figure src="img/iam-cloud-build.png" alt="grant permission to cloud build via IAM on google cloud" >}}
-
-## Step 4: Build Steps
-
-Now it's time for the fun part, writing out the build steps in the *cloudbuild.yaml* file, but first we need a Docker container with `firebase-tools` installed.
-
-### Upload the Firebase Builder
-
-Firebase is not available in of the default NPM image on GCP, but we can use a [community builder](https://github.com/GoogleCloudPlatform/cloud-builders-community). You can add it to your GCP project with the following steps:
-
-{{< file "terminal" "command line" >}}
-{{< highlight bash >}}
-git clone https://github.com/GoogleCloudPlatform/cloud-builders-community
-cd cloud-builders-community/firebase
-
-gcloud builds submit --config cloudbuild.yaml .
-
-# wait for it to finish, then cleanup...
-
-cd ../..
-rm -rf cloud-builders-community
-{{< /highlight >}}
-
-Now we should see the image in the container registry.
-
-{{< figure src="img/container-firebase.png" alt="firebase container in the register GCP" >}}
-
-
-### Define the Build Steps
-
-Create a file named `cloudbuild.yaml` in the root of the project. It will tell Cloud Build the steps required to build and test your code.
-
-The build takes place in four steps. Notice how the `name` field points to a container with a cooresponding command, i.e *npm* or *firebase*. Keep in mind, there are many [additional options](https://cloud.google.com/cloud-build/docs/configuring-builds/create-basic-configuration) you can pass to these steps.
-
-- Install NPM dependencies
-- Run unit tests
-- Run production build
-- Deploy
-
-{{< file "yaml" "cloudbuild.yaml" >}}
-{{< highlight yaml >}}
-steps:
-# Install
-- name: 'gcr.io/cloud-builders/npm'
- args: ['install']
-# Test
-- name: 'gcr.io/cloud-builders/npm'
- args: ['run', 'test:unit']
-# Build
-- name: 'gcr.io/cloud-builders/npm'
- args: ['run', 'build']
-# Deploy
-- name: 'gcr.io/$PROJECT_ID/firebase'
- args: ['deploy']
-{{< /highlight >}}
-
-### Add the Build Trigger
-
-Almost done! We just need to connect our Github repo to Cloud Build by registering the build trigger. Make sure to point the trigger the cloudbuild.yaml.
-
-{{< figure src="img/cloudbuild-trigger.png" alt="github cloud build trigger" >}}
-
-### Trigger it
-
-Now for the moment of truth...
-
-{{< highlight text >}}
-git add .
-git commit -m "feat: added CI/CD pipeline"
-git push origin master
-{{< /highlight >}}
-
-
-{{< figure src="img/cloud-build-fail.png" alt="cloud build results" >}}
-
-
-Hopefully your build succeeds, but errors are very common when setting up CI/CD for the first time. All of the logs can be found be directly in build details page, so review the last entries to see what failed.
-
-## Advanced: Secure your Environment Secrets
-
-{{< box icon="scroll" class="box-blue" >}}
-The env encryption steps are optional for Firebase because you can grant access via IAM. However, this is still a good pattern to follow if you need to authorize other 3rd party APIs. For example, you might want to update your Algolia Search index before deployment, which would require a sensitive API key.
-{{< /box >}}
-
-There are several ways to manage environment variables for your CI builds, but I find the method outlined below to be the most flexible and it can easily scale to a large number of secret tokens.
-
-
-### Obtain the Firebase CI Auth Token
-
-The command below will create an auth token that can authenticate a server into Firebase.
-
-{{< highlight text >}}
-firebase login:ci
-{{< /highlight >}}
-
-Let's add a custom NPM script for deployment using this token as an environment variable.
-
-{{< file "npm" "package.json" >}}
-{{< highlight json >}}
-{
- "scripts": {
- // ...
- "deploy": "firebase deploy --debug --token \"$FIREBASE_TOKEN\"",
- }
-}
-{{< /highlight >}}
-
-
-### Create an .env file
-
-{{< box icon="hazard" class="box-red" >}}
-Do not share the contents of the `.env` file publicly and do not commit it to your public source code. It could be used to take destructive action on your project.
-{{< /box >}}
-
-Create a file named `.env` in the root of your project. It will used to manage the secret tokens (or API keys) required to build/deploy your code. Currently this is only Firebase, but it is likely you will use other APIs and will organize complexity down the road.
-
-Lastly, let's make sure to add this file to the `.gitignore`
-
-
-{{< file "git" ".gitignore" >}}
-{{< highlight text >}}
-.env
-{{< /highlight >}}
-
-Now copy and paste the token from the previous step to the environment.
-
-{{< file "file" ".env" >}}
-{{< highlight text >}}
-FIREBASE_TOKEN=
-{{< /highlight >}}
-
-### Create a Keyring
-
-We now have a secret token, so how do we transfer it to the server via a public git repo? We encrypt it.
-
-Go the GCP console and find **IAM >> Cryptographic Keys**. First, create a keyring for your app - it can be used to encrypt multiple keys via a single container.
-
-{{< figure src="img/kms-keyring.png" alt="create a keyring on GCP" >}}
-
-Next, create a key for your secrets - let's give it a name of **cloudbuild-env**.
-
-{{< figure src="img/kms-key.png" alt="create the crypto key" >}}
-
-
-### Encrypt
-
-Run the command below to encrypt the environment secrets into a single file named `env.enc` - this file is safe to commit to the repo and can only be read by services with access to the keyring.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-gcloud kms encrypt \
- --plaintext-file=.env \
- --ciphertext-file=.env.enc \
- --location=global \
- --keyring=YOUR_KEYRING_NAME \
- --key=cloudbuild-env
-{{< /highlight >}}
-
-### Decrypt Env Secrets
-
-The first step is important. It unwraps our environment variables and makes them available in the build container, allowing them to work with NPM scripts. Without this step, the server would not have authorization to interact with our 3rd party APIs. Also, make sure firebase-tools is installed in your dev dependencies `npm i -D firebase-tools`.
-
-{{< file "yaml" "cloudbuild.yaml" >}}
-{{< highlight yaml >}}
-steps:
-- name: gcr.io/cloud-builders/gcloud
- args:
- - kms
- - decrypt
- - --ciphertext-file=.env.enc
- - --plaintext-file=.env
- - --location=global
- - --keyring=myproject
- - --key=cloudbuild-env
-# Insert other build steps here
-# Deploy
-- name: 'gcr.io/cloud-builders/npm'
- args: ['run', 'deploy']
-{{< /highlight >}}
-
-
-## Additional Pro Tips
-
-### Run a Build without a Git Trigger
-
-Sometimes you just want to build without making a git commit. You can do this at any time from the command line:
-
-{{< highlight text >}}
-gcloud builds submit . --config=cloudbuild.yaml
-{{< /highlight >}}
-
-
-### Conditionally Filter Steps in Cloud Build
-
-It most cases, you only want to deploy your code when changes are merged into the master branch. However, you may still want to run the other CI steps to ensure all tests pass when a pull request is submitted. If you followed the advanced settings above, you can add a conditional bash statement that looks at the `$BRANCH_NAME` env variable.
-
-{{< file "npm" "package.json" >}}
-{{< highlight json >}}
-{
- "scripts": {
- "deploy": "...",
- "deploy:ci": "if test \"$BRANCH_NAME\" = \"master\"; then npm run deploy; fi"
- }
-}
-{{< /highlight >}}
-
-If we use the `deploy:ci` command in our *cloudbuild.yaml* it will only deploy when the master branch changes.
-
-### Using a Custom Docker Container Builder
-
-This very site, fireship.io, uses Google Cloud Build for CI/CD, but it cannot use the default Node or Go builders because they don't contain the right mix of dependencies. Fortunately, we can create our own custom builder that serves as the cloud environment for building and testing our code.
-
-{{< file "docker" "Dockerfile" >}}
-{{< highlight docker >}}
-FROM node:8
-
-RUN npm i -g firebase-tools
-
-ADD your-weird-dependencies-here
-
-{{< /highlight >}}
-
-You can then deploy this image to the GCP container registry and use it in your build steps.
-
-## The End
-
-There are many great CI/CD providers out there like Travis, CircleCI, etc, but Cloud Build is especially nice for Firebase apps because it's a GCP service with generous pricing. It comes with 120 free build minutes per day (that's a lot) then becomes pay-as-you-go if you manage to exceed that cap. By comparison, standalone services usually have a small free tier, then jump to $50+ per month. While it can be tedious and frustrating to configure initially, a solid CI/CD pipeline can be a huge productivity-booster in the long run.
-
diff --git a/hugo/content/lessons/cloud-functions-scheduled-time-trigger/index.md b/hugo/content/lessons/cloud-functions-scheduled-time-trigger/index.md
deleted file mode 100644
index 55a51aa9d..000000000
--- a/hugo/content/lessons/cloud-functions-scheduled-time-trigger/index.md
+++ /dev/null
@@ -1,181 +0,0 @@
----
-title: Dynamic Scheduled Background Jobs in Firebase
-lastmod: 2019-04-20T07:44:49-07:00
-publishdate: 2019-04-20T07:44:49-07:00
-author: Jeff Delaney
-draft: false
-description: Trigger Cloud Functions based on cron time intervals and create a task queue for dynamically scheduled jobs.
-tags:
- - cloud-functions
- - pubsub
- - firebase
-
-youtube: h79xrJZAQ6I
-github: https://github.com/fireship-io/181-cloud-functions-task-queue
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-versions:
- firebase-functions: 2.3.0
- firebase-tools: 6.7.0
----
-
-Last week, Firebase announced a new scheduled [cron trigger for Cloud Functions](https://firebase.googleblog.com/2019/04/schedule-cloud-functions-firebase-cron.html) that makes it easy to run serverless code on a set time interval. This function type is special because it combines the powers of [Cloud Scheduler](https://cloud.google.com/scheduler/) and [Pub/Sub](https://cloud.google.com/pubsub/docs/overview) to guarantee security that you don't have with a regular HTTP-triggered function.
-
-
-Scheduling a function on a static time interval is straight forward, but what if you want to build a dynamic task queue where users can schedule their own background jobs? For example, you might want to...
-
-- allow users to customize times for transactional email delivery
-- schedule push notifications or similar alerts dynamically
-- enqueue background jobs to run at specific times
-- build robocallers 🤣 - please don't
-
-## Basic Scheduled Function
-
-Let's start by looking at an example of a basic cron-scheduled Cloud Function.
-
-Make sure you have the latest version of [firebase-tools](https://firebase.google.com/docs/cli/) (or at least version 6.7) installed on your system, then initialize a new project.
-
-Learn more about [cron schedules](/snippets/crontab-crash-course).
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm i firebase-tools@latest -g
-
-firebase init functions
-{{< /highlight >}}
-
-A basic scheduled Cloud Function can be defined on the `pubsub` namespace.
-
-{{< file "typescript" "index.ts" >}}
-{{< highlight typescript >}}
-export const dailyJob = functions.pubsub
-
- .schedule('30 5 * * *').onRun(context => {
- console.log('This will be run every day at 5:30AM');
- });
-
-export const everyFiveMinuteJob = functions.pubsub
-
- .schedule('every 5 minutes').onRun(context => {
- console.log('This will be run every 5 minutes!');
- });
-{{< /highlight >}}
-
-## Dynamic Task Queue
-
-Our task queue or job queue is simply a Firestore collection that will be queried by a Pub/Sub Cloud Function every 60 seconds. If the current time is greater than the *performAt* time of a task, then we execute it.
-
-{{< figure src="img/task-queue-firebase.png" caption="The task queue query expired tasks on each tick, then execute the business logic associated with the task worker field" >}}
-
-
-### Step 1: Data Model for Background Jobs
-
-A *task* is a generic document that tells the Cloud Function how to run the backgorund code.
-
-- `performAt` when to execute the task as a Firestore timestamp.
-- `status` the state of the tasks, useful for debugging and/or querying.
-- `worker` the name of worker function, which contains the business logic to execute. See step 3.
-- `options` a map containing extra data for the worker function, like a userID argument for example.
-
-
-```
-tasks/{taskID}/
-
- performAt: TimeStamp
- status: 'scheduled' | 'complete' | 'error'
- worker: string
- options: Map
-```
-
-{{< figure src="img/task-queue-data-model.png" caption="Tasks represent a simple data model for calling JS functions and passing data to our backend code" >}}
-
-
-### Step 2: Task Runner Cloud Function
-
-{{< box icon="scroll" class="box-green" >}}
-#### Pro Tips
-
-This function will be invoked approx 45,000 times per month, but it can complete multiple tasks per run. Firebase provides 125K free invocations per month.
-
-Max out the memory and timeout settings for your function. This will ensure the task runner can handle large batches of jobs in a single run.
-{{< /box >}}
-
-Next, we need to define a Pub/Sub Cloud Function that queries the task collection every 60s (or whatever granularity you want) for tasks that are ready to perform.
-
-{{< file "typescript" "functions/src/index.ts" >}}
-{{< highlight typescript >}}
-import * as functions from 'firebase-functions';
-import * as admin from 'firebase-admin';
-admin.initializeApp();
-const db = admin.firestore();
-
-export const taskRunner = functions.runWith( { memory: '2GB' }).pubsub
-
- .schedule('* * * * *').onRun(async context => {
-
- // Consistent timestamp
- const now = admin.firestore.Timestamp.now();
-
- // Query all documents ready to perform
- const query = db.collection('tasks').where('performAt', '<=', now).where('status', '==', 'scheduled');
-
- const tasks = await query.get();
-
-
- // Jobs to execute concurrently.
- const jobs: Promise[] = [];
-
- // Loop over documents and push job.
- tasks.forEach(snapshot => {
- const { worker, options } = snapshot.data();
-
- const job = workers[worker](options)
-
- // Update doc with status on success or error
- .then(() => snapshot.ref.update({ status: 'complete' }))
- .catch((err) => snapshot.ref.update({ status: 'error' }));
-
- jobs.push(job);
- });
-
- // Execute all jobs concurrently
- return await Promise.all(jobs);
-
-});
-{{< /highlight >}}
-
-
-Keep in mind, this is a compound query that will require a Firestore index.
-
-{{< figure src="img/background-job-index.png" caption="The query requires an index with status Ascending and performAt Ascending" >}}
-
-
-
-### Step 3: Define Worker Functions to Run Jobs
-
-Now that we have a working function in place, we can define the business logic (worker functions) that execute a task.
-
-{{< file "typescript" "functions/src/index.ts" >}}
-{{< highlight typescript >}}
-// Optional interface, all worker functions should return Promise.
-interface Workers {
- [key: string]: (options: any) => Promise
-}
-
-// Business logic for named tasks. Function name should match worker field on task document.
-const workers: Workers = {
- helloWorld: () => db.collection('logs').add({ hello: 'world' }),
-}
-{{< /highlight >}}
-
-
-Run `firebase deploy --only functions`.
-
-After the function is deployed we just need to create a task document in Firestore that points the `helloWorld` worker. Within 1 minute you should see the task document update to *complete*
-
-
-
diff --git a/hugo/content/lessons/code-this-not-that-python-edition/index.md b/hugo/content/lessons/code-this-not-that-python-edition/index.md
deleted file mode 100644
index c5f88e43c..000000000
--- a/hugo/content/lessons/code-this-not-that-python-edition/index.md
+++ /dev/null
@@ -1,267 +0,0 @@
----
-title: "Code This, Not That - Python Edition"
-lastmod: 2022-02-20T15:31:36+01:00
-publishdate: 2022-02-20T15:31:36+01:00
-author: Alex Guja
-draft: false
-description: 10 Tips to make your code more Pythonic.
-tags:
- - python
-youtube: x7X9w_GIm1s
-github: https://github.com/fireship-io/code-this-not-that-python-edition/tree/main/src
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-## Introduction
-
-_Python_ is one of the most popular languages in the world. It has many practical applications including web development, desktop apps, IoT, data analysis, and machine learning. This lesson contains ten tips that will make your code more pythonic.
-
-To make life simpler, we’ll use the following key to denote a few categories
-
-- 💩 - code that you should avoid.
-- 🤔 - code that is generally ok, but ignores built-in language features.
-- 🐍 - code that is considered pythonic.
-- 💡 - bonus tips.
-
-## Null checks
-
-A common scenario is checking that a variable isn't empty (or null) before use. In Python, _null_ is denoted by the keyword None. The two code snippets below produce identical results. However, Python supports a simplified null check using the if keyword followed by the name of a variable.
-
-💡 _Bonus Tip_: Use f-strings for string formatting. Initiate an f-string by typing an _f_ immediately before a regular string (f"..."), and place variables inside curly braces. Python will format the result into a string containing the variables.
-
-{{< file "python" "null_checks.py" >}}
-{{< highlight "python" >}}
-# Null check: OK version 🤔 - Explicit "if x is not None" ❌
-n = 42
-if n is not None:
- print(f"n exists and is equal to {n}")
-
-# Pythonic version 🐍: Use simplified if ✅
-if n:
- print(f"n exists and is equal to {n}")
-{{< /highlight >}}
-
-
-## Included values
-In this section, we need to check if a list (L) contains the value of a particular variable (x).
-One way to do this is by using a for loop to iterate over all elements and check for equality. Python provides a nice shortcut, using the in keyword.
-
-{{< file "python" "contains.py" >}}
-{{< highlight "python" >}}
-# Check if a value is contained in a list
-L = ["JavaScript", "Python", "Ruby", "PHP", "Rust"]
-x = "Rust"
-
-# OK version 🤔 - For loop and a equality check ❌
-for i in range(len(L)):
- if x == L[i]:
- print(f"{x} is contained in the list")
-
-# Pythonic version 🐍: Use "if x in L" ✅
-if x in L:
- print(f"{x} is contained in the list")
-{{< /highlight >}}
-
-
-## List Comprehensions
-A common data processing pattern is to define an empty list and append values to it.
-For example, let's assume we want to generate a list of square numbers in a certain range.
-One way to do this is to define a list, and use a for loop to iterate over a range of values and append each value to the list.
-
-Python provides a neat one-liner for this purpose, called a "list comprehension". To write a list comprehension, start with the expression you would normally pass to the append method. From there, write the for loop condition immediately after the initial expression. Lastly, put everything inside a pair of square brackets. Comprehensions can be used with dictionaries, sets, and generators, however, try to avoid them with complex expressions. Readability is key.
-
-{{< file "python" "list_comprehension.py" >}}
-{{< highlight "python" >}}
-# OK version 🤔 - For loop and append ❌
-squares = []
-for num in range(12):
- squares.append(num ** 2)
-
-# Pythonic version 🐍: Use a list comprehension ✅
-squares = [num ** 2 for num in range(12)]
-
-# Bonus Tip 💡: You can also use dictionary, set, and generator comprehensions
-squares_dict = {num: num ** 2 for num in range(12)} # dictionary
-squares_set = {num ** 2 for num in range(12)} # set
-squares_gen = (num ** 2 for num in range(12)) # generator
-
-{{< /highlight >}}
-
-
-## Using Any/All
-
-Speaking of one-liners, Python provides some built-in functions that can check conditions that apply to at least _one_ element, or _all_ elements in an iterable. To illustrate this, let's consider a simple example. Imagine we're interested to know if a list contains negative numbers. A naive way to check this is to use a combination of a for loop and a flag. A better way is to use the any function.
-
-
-{{< file "python" "any.py" >}}
-{{< highlight "python" >}}
-# Checking for negative values in a list
-nums = [1, 2, 3, 4, 5, -42, 6, 7, 8]
-
-# Inefficinet way 🤔 - Using a for loop and a flag ❌
-contains_neg = False # flag
-for num in nums:
- if num < 0:
- contains_neg = True
-
-
-# Pythonic way 🐍 - Using the built-in "any" function ✅
-contains_neg = any(num < 0 for num in nums) # True
-
-# Bonus Tip 💡: Python also has a built-in "all" function ✅
-contains_neg = not all(num >= 0 for num in nums) # True
-
-{{< /highlight >}}
-
- - any - Returns True if a condition applies to any element of the iterable. If the iterable is empty, returns False.
- - all - Returns True if a condition applies to all elements of the iterable (or if the iterable is empty).
-
-## Iterations
-
-Python provides a nice syntax for iteration that many users tend to ignore. For example, when iterating over the values in a list, a common pattern is to use a for loop and an index. If we're only interested in the values, a neater way is to use a for loop and iterate _directly_ over the list elements. If we need to keep an index, a neater way is to use enumerate.
-
-{{< file "python" "iterations.py" >}}
-{{< highlight "python" >}}
-# Iterating over a single list
-L = ["a", "b", "c", "d"]
-
-# OK version 🤔 - Index in range ❌
-for i in range(len(L)):
- val = L[i]
- print(i, val)
-
-# Pythonic version 🐍: Access elements directly ✅
-for el in L:
- print(el)
-
-# Pythonic version 🐍: Use enumerate if you need the index, value pair ✅
-for i, val in enumerate(L):
- print(i, val)
-{{< /highlight >}}
-
-💡 _Bonus Tip_: These ideas also apply when iterating over multiple lists. We can iterate directly over values in two collections
-using zip. If an index is required, we can use a combination of enumerate and zip.
-
-{{< file "python" "iterations.py" >}}
-{{< highlight "python" >}}
-# Bonus Tip 💡: Iterating over multiple lists
-A = ["a", "b", "c", "d"]
-B = ["e", "f", "g", "h"]
-
-# OK version 🤔 - Index in range ❌
-for i in range(len(A)):
- va, vb = A[i], B[i]
- print(i, va, vb)
-
-# Pythonic version 🐍: Use zip to get the values ✅
-for va, vb in zip(A, B):
- print(va, vb)
-
-# Pythonic version 🐍: Use a combination of zip and enumerate to get the index and the values ✅
-for i, (va, vb) in enumerate(zip(A, B)):
- print(i, va, vb)
-{{< /highlight >}}
-
-## Tuple Unpacking
-Another useful thing to know is how to unpack values directly from a tuple. One way is to access each element using indices.
-A more efficient way is to unpack the elements directly.
-
-{{< file "python" "existence.py" >}}
-{{< highlight "python" >}}
-# Tuple unpacking
-some_tuple = (1, 2, 3)
-
-# OK version 🤔 - Unpack elements by index ❌
-x = some_tuple[0]
-y = some_tuple[1]
-z = some_tuple[2]
-
-
-# Pythonic way 🐍 - Unpack elements directly ✅
-x, y, z = some_tuple
-{{< /highlight >}}
-
-## Ternary Operators
-Python uses if/elif/else blocks for control flow. For example, consider the need to decide on the sign of a variable based on its value. The naive way is to use an if/else block to make the decision. A neater way to simplify this is by using a ternary operator.
-
-{{< file "python" "ternary_operator.py" >}}
-{{< highlight "python" >}}
-# Assign a value based on a condition
-a = 42
-
-# OK version 🤔 - if/else blocks ❌
-if a > 0:
- sign = "positive"
-else:
- sign = "negative"
-
-# Pythonic way 🐍 - Use a ternary operator ✅
-sign = "positive" if (a > 0) else "negative" # parentheses are optional
-{{< /highlight >}}
-
-## Generators
-[_Generators_](https://docs.python.org/3/howto/functional.html#generators) are a powerful tool to save memory and improve performance. In general, they _yield_ one value at a time and can be iterated over multiple times. Let's imagine we're interested in the sum of the first 42 000 natural numbers. We could use a list comprehension to compute the values and call the built-in sum function. Building a list requires 351064 bytes. Using a generator reduces this value to 112 bytes. That's pretty awesome 🔥.
-
-{{< file "python" "generators.py" >}}
-{{< highlight "python" >}}
-from sys import getsizeof
-
-# Inefficent way 💩: Using a list ❌
-L = [n for n in range(42_000)]
-sum(L) # 881979000
-getsizeof(L) # 351064 bytes
-
-# Efficient way 🔥: Use a generator ✅
-G = (n for n in range(42_000))
-sum(G) # 881979000 bytes
-getsizeof(G) # 112 bytes
-{{< /highlight >}}
-
-## Mutable Default Arguments
-Python supports default values for function parameters. If a value for a parameter isn't passed during a function call, the specified default value is used. There is a danger associated with this if the default value is of a mutable type. For example, consider specifying an empty list as a default value. If the list is modified, the default value is modified _as well_. In most cases, this is not intended. To avoid it, we can set the default value to None. If no value is passed during the function call, we can ensure an empty list is created.
-
-{{< file "python" "mutable_default_args.py" >}}
-{{< highlight "python" >}}
-# Mutable default arguments 💩: Wrong way ❌
-def append_element(elem, L=[]):
- L.append(elem)
- return L
-
-L1 = append_element(21) # [21]
-L2 = append_element(42) # [21, 42] - Oops..
-
-
-# Correct way 🔥: Use None ✅
-def better_append(elem, L=None):
- if L is None:
- L = []
- L.append(elem)
- return L
-
-L1 = better_append(21) # [21]
-L2 = better_append(42) # [42]
-
-{{< /highlight >}}
-
-## Context Managers
-The last tip is to use a context manager to ensure that a resource is properly closed. Let's consider a simple example of writing to a text file.
-In this case, the simple code will run just fine, however, if more complex logic is involved and an exception is raised during the write, the file won't be closed. Another common scenario is simply to forget to close the file. Using a context manager ensures the file will always be closed, regardless of any exception.
-
-{{< file "python" "context_managers.py" >}}
-{{< highlight "python" >}}
-# Managing files - using open and f.close() ❌
-f = open("file.txt", "w")
-f.write("Hi mom!")
-f.close()
-
-# Pythonic way 🐍 - Use a context manager ✅
-with open("file.txt", "w") as f:
- f.write("Hi mom!")
-{{< /highlight >}}
\ No newline at end of file
diff --git a/hugo/content/lessons/collection-group-query-firestore/index.md b/hugo/content/lessons/collection-group-query-firestore/index.md
deleted file mode 100644
index 7eec3f432..000000000
--- a/hugo/content/lessons/collection-group-query-firestore/index.md
+++ /dev/null
@@ -1,91 +0,0 @@
----
-title: Collection Group Query with Firestore
-lastmod: 2019-05-20T08:43:13-07:00
-publishdate: 2019-05-20T08:43:13-07:00
-author: Jeff Delaney
-draft: false
-description: Query across multiple Firestore subcollections for hierarchical data structures, like threaded comments.
-tags:
- - firebase
- - firestore
- - javascript
-
-youtube: fQ4u1J717ys
-github: https://github.com/fireship-io/186-collection-group-queries-demo
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-At Google I/O 2019, Firebase launched a new query type, [Collection Group Queries](https://firebase.google.com/docs/firestore/query-data/queries#collection-group-query), which can have a major impact on your data modeling decisions. It allows you to combine all subcollections that share the same name, then query them together. Prior to this feature release, it was common to model one-to-many relationships with root collections that contained a field (or foreign key if you will) pointing to the parent document. Root collections are still fine, but this new feature makes it far more practical to organize your data in a natural hierarchy.
-
-In the following lesson, we will look at the basic concepts of Collection Group Queries. Check out the full source code for a more complex [threaded comments](https://github.com/fireship-io/186-collection-group-queries-demo) feature in Angular.
-
-{{< box icon="scroll" class="box-green" >}}
-If you have complex data requirements for Firestore, consider enrolling in the full [Firestore Data Modeling](/courses/firestore-data-modeling/) course.
-{{< /box >}}
-
-
-## Collection Group Query
-
-Collection Group Queries are just like regular collection queries, with a few minor caveats to consider.Make sure your project is running Firebase JS version 6.0 or later.
-
-### Basic Query
-
-Let's imagine you have a database where users can comment on posts *and* reply to comments, leading to a nested structure that looks like this:
-
-`posts/{postID}/comments/{commentID}/comments/{commentID}/comments/{commentID}...`
-
-A *Collection Group Query* allows you to join all the collections that share a similar name, in this case `comments`, and query across them uniformly.
-
-{{< file "js" "app.js" >}}
-{{< highlight javascript >}}
-import * as firebase from 'firebase/app';
-const db = firebase.firestore();
-
-
-const query = db.collectionGroup('comments')
- .where('user', '==', 'jeffd23')
- .orderBy('createdAt');
-{{< /highlight >}}
-
-### Rules
-
-{{< figure src="img/firestore-permission-error.png" caption="Firebase Rules Error" >}}
-
-If you have rules enforced in your database, you will need to allow access to the grouped subcollection. You can do this using rules version 2, along with the `path=**` syntax.
-
-{{< file "firebase" "rules.json" >}}
-{{< highlight javascript >}}
-rules_version = '2';
-
-service cloud.firestore {
- match /databases/{database}/documents {
- match /{document=**} {
- allow read, write: if false;
- }
-
-
- // Allow access to all comments subcollections
-
- match /{path=**}/comments/{id} {
- allow read, write;
- }
-
- }
-}
-{{< /highlight >}}
-
-
-### Index
-
-Collection Group Queries require an index when ordering or filtering by a specific property. If you need an index, you should see an error that looks like this:
-
-{{< figure src="img/firestore-col-group-error.png" caption="If you see a Firestore index error, just click the link in the error to fix it" >}}
-
-{{< figure src="img/collection-group-index.png" caption="It should result in an exemption that looks similar to this" >}}
diff --git a/hugo/content/lessons/deckgl-google-maps-tutorial/index.md b/hugo/content/lessons/deckgl-google-maps-tutorial/index.md
deleted file mode 100644
index a2209082c..000000000
--- a/hugo/content/lessons/deckgl-google-maps-tutorial/index.md
+++ /dev/null
@@ -1,323 +0,0 @@
----
-title: Deck.gl Google Maps Tutorial
-lastmod: 2019-10-29T07:53:34-07:00
-publishdate: 2019-10-29T07:53:34-07:00
-author: Jeff Delaney
-draft: false
-description: Create high-performance WebGL-powered data visualizations on Google Maps with deck.gl
-tags:
- - javascript
- - deckgl
- - google-maps
-
-youtube: e_5W-JF_E2U
-github: https://github.com/fireship-io/213-deckgl-google-maps
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-Have you ever tried to load thousands of datapoints into Google Maps? It probably didn't go very well from a performance standpoint. [Deck.gl](https://deck.gl) is a library that solves this problem by running expensive computations on the GPU with WebGL. This means you can run realtime 3D visualizations on datasets with millions of geographic points.
-
-In the following lesson, you will learn how to add high-performance data overlays to Google Maps based on a dataset of 140,000+ incidents of gun violence in the United States.
-
-
-- [Live Demo](https://us-gun-violence.web.app/)
-- [Deck.gl Docs](https://deck.gl/#/documentation/overview/introduction)
-- [Google Maps Docs](https://developers.google.com/maps/documentation/javascript/tutorial)
-
-## Initial Setup
-
-You can use Deck.gl with any framework, but this demo uses vanilla JavaScript with Webpack.
-
-### Enable Google Maps
-
-First, create a Google Cloud (or Firebase) project and obtain a browser API key for [Google Maps JS](https://developers.google.com/maps/documentation/javascript/get-api-key).
-
-{{< figure src="/img/snippets/google-maps-enable.png" caption="Enable the Google Maps JavaScript API from a GCP project. Copy the browser API key from the credentials page." >}}
-
-### Create a Webpack project
-
-Start a new project from an empty directory.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm init -y
-npm i -D webpack-dev-server webpack webpack-cli
-{{< /highlight >}}
-
-Create files for `/public/index.html` and `/src/index.js`.
-
-{{< figure src="img/webpack-deckgl-structure.png" caption="Your project structure should look like this." >}}
-
-
-Now let's add a script to the package.json file to build and serve the app locally.
-
-{{< file "npm" "package.json" >}}
-{{< highlight json >}}
- "scripts": {
- "build": "webpack --output-path ./public",
- "start": "webpack-dev-server --content-base ./public --output-path ./public --hot"
- },
-{{< /highlight >}}
-
-
-### Install Deck.gl
-
-Deck.gl is a monorepo with layers separated into multiple packages. Install them with the following command:
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm i @deck.gl/{core,google-maps,layers,aggregation-layers}
-{{< /highlight >}}
-
-### Initialize the Map
-
-Create an HTML file that imports the webpack'd script and Google Maps. Add an empty div for the map.
-
-{{< file "html" "public/index.html" >}}
-{{< highlight html >}}
-
-
-
-
-
-
-
-
-
-
-
-
-{{< /highlight >}}
-
-When Google Maps is ready it will call the global `initMap` function.
-
-{{< file "js" "src/index.js" >}}
-{{< highlight javascript >}}
-window.initMap = () => {
-
- const map = new google.maps.Map(document.getElementById('map'), {
- center: {lat: 40.0, lng: -100.0},
- zoom: 5,
- });
-
-}
-{{< /highlight >}}
-
-Run the start command and you should be up and running with hot module replacement on localhost:8080.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm start
-{{< /highlight >}}
-
-{{< figure src="img/google-map-webpack.png" caption="Google Maps with Webpack HMR" >}}
-
-## Get Data
-
-### The Easy way
-
-Download the raw [gun violence JSON data](https://us-gun-violence.web.app/gundata.json) to `public/gundata.json`.
-
-### (Optional) The Developer Way... CSV to JSON
-
-Deck.gl expects and JSON array of objects. The format of the object does not matter, but should at least have properties that represent latitude (y) and longitude (x). Most datasets are in CSV format - here's a useful conversion script for Node.js if you're working with your own custom data.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm i -D convert-csv-to-json
-{{< /highlight >}}
-
-Create a file called `convert.js` in the root of the project.
-
-{{< file "js" "convert.js" >}}
-{{< highlight javascript >}}
-const csvToJson = require('convert-csv-to-json');
-
-const input = './your-custom-data.csv';
-const output = './public/gundata.json';
-
-csvToJson.fieldDelimiter(',')
- .formatValueByType()
- .generateJsonFileFromCsv(input, output);
-{{< /highlight >}}
-
-Run it:
-
-{{< highlight text >}}
-node convert.js
-{{< /highlight >}}
-
-## Add Deck.gl Data Layers
-
-When you create a Deck.gl layer it takes a unique `id` that allows the library to efficiently make updates. Each layer provides a set of accessor properties like `getPosition` or `getColor` that call a function for each point in the dataset. In other words, it's like looping over the entire dataset to determine each point's position and color.
-
-### Scatterplot Layer
-
-A scatterplot is one of the most basic data visualization layers. It adds a circle for every point in the dataset.
-
-
-{{< figure src="img/deckgl-scatter-layer.png" caption="ScatterPlot layer with tooltips" >}}
-
-
-{{< file "js" "index.js" >}}
-{{< highlight javascript >}}
-import { GoogleMapsOverlay } from '@deck.gl/google-maps';
-import { HexagonLayer } from '@deck.gl/aggregation-layers';
-import { ScatterplotLayer } from '@deck.gl/layers';
-import { HeatmapLayer } from '@deck.gl/aggregation-layers';
-
-
-const sourceData = './gundata.json';
-
-const scatterplot = () => new ScatterplotLayer({
- id: 'scatter',
- data: sourceData,
- opacity: 0.8,
- filled: true,
- radiusMinPixels: 2,
- radiusMaxPixels: 5,
- getPosition: d => [d.longitude, d.latitude],
- getFillColor: d => d.n_killed > 0 ? [200, 0, 40, 150] : [255, 140, 0, 100],
- });
-
-{{< /highlight >}}
-
-### Add Tooltips
-
-Listen to events like `onHover` or `onClick` to update the UI in response to events.
-
-{{< highlight javascript >}}
-const scatterplot = () => new ScatterplotLayer({
- // ... omitted
-
- pickable: true,
- onHover: ({object, x, y}) => {
- const el = document.getElementById('tooltip');
- if (object) {
- const { n_killed, incident_id } = object;
- el.innerHTML = `ID ${incident_id} `
- el.style.display = 'block';
- el.style.opacity = 0.9;
- el.style.left = x + 'px';
- el.style.top = y + 'px';
- } else {
- el.style.opacity = 0.0;
- }
- },
-
- onClick: ({object, x, y}) => {
- window.open(`https://www.gunviolencearchive.org/incident/${object.incident_id}`)
- },
-
- });
-
-{{< /highlight >}}
-
-Include a tooltip div and CSS in the HTML file.
-
-{{< file "html" "index.html" >}}
-{{< highlight html >}}
-
- #tooltip {
- position: absolute;
- background: white;
- margin: 10px; padding: 10px;
- }
-
-
-
-
-
-
-
-
-
-{{< /highlight >}}
-
-
-### Heatmap Layer
-
-The heatmap layer will cluster points based on the map's zoom level. As the user zooms out, it will aggregate the points into shapes/colors based on visible points in the view.
-
-{{< figure src="img/deckgl-heat-layer.png" caption="Heatmap Layer" >}}
-
-Notice how `getWeight` is used to give incidents with more deaths and injuries a higher weight.
-
-{{< highlight javascript >}}
-const heatmap = () => new HeatmapLayer({
- id: 'heat',
- data: sourceData,
- getPosition: d => [d.longitude, d.latitude],
- getWeight: d => d.n_killed + (d.n_injured * 0.5),
- radiusPixels: 60,
-});
-
-{{< /highlight >}}
-
-### Hexagon Layer
-
-A hexagon layer aggregates points into a fixed radius. The elevation is then extruded on the z-axis based on the weight.
-
-{{< figure src="img/deckgl-hex-layer.png" caption="Hexagon Layer" >}}
-
-A hexagon layer is similar to a heatmap, but the weight is extruded into a 3D shape.
-
-{{< highlight javascript >}}
-const hexagon = () => new HexagonLayer({
- id: 'hex',
- data: sourceData,
- getPosition: d => [d.longitude, d.latitude],
- getElevationWeight: d => (d.n_killed * 2) + d.n_injured,
- elevationScale: 100,
- extruded: true,
- radius: 1609,
- opacity: 0.6,
- coverage: 0.88,
- lowerPercentile: 50
- });
-
-{{< /highlight >}}
-
-
-
-### Add Layers to the Map
-
-The final step is add layers to the map. Deck.gl will composite the layers in a first-in-first-out patter, so the last element of the array sits on top. Update the `initMap` to create an overlay.
-
-{{< highlight javascript >}}
-window.initMap = () => {
-
- const map = new google.maps.Map(document.getElementById('map'), {
- center: {lat: 40.0, lng: -100.0},
- zoom: 5,
- });
-
- const overlay = new GoogleMapsOverlay({
- layers: [
- scatterplot(),
- heatmap(),
- hexagon()
- ],
- });
-
-
- overlay.setMap(map);
-
-}
-
-{{< /highlight >}}
\ No newline at end of file
diff --git a/hugo/content/lessons/desktop-apps-with-electron-and-angular/img/electron-angular-macos.gif b/hugo/content/lessons/desktop-apps-with-electron-and-angular/img/electron-angular-macos.gif
deleted file mode 100644
index 67e81a870..000000000
Binary files a/hugo/content/lessons/desktop-apps-with-electron-and-angular/img/electron-angular-macos.gif and /dev/null differ
diff --git a/hugo/content/lessons/desktop-apps-with-electron-and-angular/index.md b/hugo/content/lessons/desktop-apps-with-electron-and-angular/index.md
deleted file mode 100644
index 9d56cf6e1..000000000
--- a/hugo/content/lessons/desktop-apps-with-electron-and-angular/index.md
+++ /dev/null
@@ -1,339 +0,0 @@
----
-title: "Desktop Apps with Electron and Angular"
-lastmod: 2017-09-21T06:56:25-07:00
-publishdate: 2017-09-21T06:56:25-07:00
-author: Jeff Delaney
-draft: false
-description: Learn how to build native desktop apps for Windows, macOS, or Linux using Angular and Electron
-tags:
- - electron
- - angular
-
-youtube: u_vMChpZMCk
-github: https://github.com/AngularFirebase/angular-electron
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-In this lesson, you will learn how to build native desktop apps with Angular and [Electron](https://electron.atom.io/). You might be surprised how easy it is to start building high-quality desktop apps for any platform, or even port your existing Angular app to native desktop platforms.
-
-This lesson covers the following topics:
-
-1. Configure Electron 1.7 with Angular.
-2. Build a simple timer app in Angular.
-3. Package the app for install on Windows 10, macOS, and Linux Ubuntu.
-
-{{< figure src="img/electron-angular-macos.gif" caption="Angular Electron app running on MacOS" >}}
-
-## Initial Setup
-
-Let's kick things off by building a new angular app from scratch.
-
-### Generate the Angular App
-
-Generate a default app with the Angular CLI.
-
-```shell
-npm install -g @angular/cli
-ng new angular-electron
-cd angular-electron
-```
-
-### Update index.html
-
-The generated root page in Angular points the base href to `/` - this will cause problems with Electron later on, so let's update it now. Just add a period in front of the slash in `src/index.html`.
-
-```html
-This setup does not support hot code reloads. Whenever you change some Angular code, you need to rerun the electron-build command. It is possible to setup hot reloads by pointing the window to a remote URL (such as https://localhost:4200) and running `ng serve` in a separate terminal.
-
-## Building the Angular App
-
-Now we need to build an Angular App that's worthy of being installed. I am building a single page timer that will animate a progress circle, then make a chime sound when complete.
-
-{{< figure src="img/angular-electron-timer.gif" caption="Example app built with Angular and Electron" >}}
-
-
-To keep things super simple, I am writing all the code in the app.component
-
-### Install Round Progress Bar
-
-To get the progress timer looking good quickly, I installed the [angular-svg-round-progressbar](https://github.com/crisbeto/angular-svg-round-progressbar) package. It gives us a pre-built component that we can animate based on the current state of the timer.
-
-```shell
-npm install angular-svg-round-progressbar --save
-```
-
-Then add it to the `app.module.ts` (also add the FormsModule).
-
-```typescript
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppComponent } from './app.component';
-
-import { FormsModule } from '@angular/forms'; // <-- here
-import { RoundProgressModule } from 'angular-svg-round-progressbar'; // <-- here
-
-@NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- FormsModule, // <-- here
- RoundProgressModule // <-- and here
- ],
- providers: [],
- bootstrap: [AppComponent]
-})
-export class AppModule { }
-```
-
-### app.component.ts
-
-The app works by allowing the user to set the number of seconds the timer will run `max`. The timer progresses by running an RxJS Observable interval every 10th of a second and incrementing the `current` value.
-
-I also defined several getters help deal with NaN values that can cause errors in the progress circle. They also help keep the HTML logic clean and readable.
-
-```typescript
-import { Component, OnInit } from '@angular/core';
-import { Observable } from 'rxjs/Observable';
-import 'rxjs/add/observable/interval';
-import 'rxjs/add/operator/map';
-import 'rxjs/add/operator/takeWhile';
-import 'rxjs/add/operator/do';
-
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss']
-})
-export class AppComponent {
-
- max = 1;
- current = 0;
-
- /// Start the timer
- start() {
- const interval = Observable.interval(100);
-
- interval
- .takeWhile(_ => !this.isFinished )
- .do(i => this.current += 0.1)
- .subscribe();
- }
-
- /// finish timer
- finish() {
- this.current = this.max;
- }
-
- /// reset timer
- reset() {
- this.current = 0;
- }
-
- /// Getters to prevent NaN errors
-
- get maxVal() {
- return isNaN(this.max) || this.max < 0.1 ? 0.1 : this.max;
- }
-
- get currentVal() {
- return isNaN(this.current) || this.current < 0 ? 0 : this.current;
- }
-
- get isFinished() {
- return this.currentVal >= this.maxVal;
- }
-
-}
-```
-
-### app.component.html
-
-In the HTML, we can declare the progress component and display the user interface elements conditionally based on the state of the timer.
-
-```html
-
-
- Electron Timer
-
-
-
-
- {{ max - current | number: '1.1-1' }}
-
-
-
-
-
-
-
-
-
- Seconds
- Start
- Finish
-
-
-
-
-
-```
-
-## Packaging for Desktop Operating Systems
-
-Now that we have a decent app ready for desktops, we need to package and distribute it. The [electron packager](https://github.com/electron-userland/electron-packager) tool will allow to package our code into an executable for desktop platforms - including Windows (win32), MacOS (darwin), and Linux. Keep in mind, there are several other [electron packaging tools](https://electron.atom.io/docs/tutorial/application-distribution/#packaging-tools) that might better fit your needs.
-
-```shell
-npm install electron-packager -g
-npm install electron-packager --save-dev
-```
-
-Linux and MacOS developers will need to install [WineHQ](https://www.winehq.org/) if they plan on building desktop apps for Windows.
-
-In this example, I am going to build an executable for Windows.
-
-```shell
-electron-packager . --platform=win32
-```
-
-This will generate a directory `/angular-electron-win32-x64/` that contains the executable file.
-
-And why not build one for MacOS while we're at it.
-
-```shell
-electron-packager . --platform=darwin
-```
-
-This will generate a directory `/angular-electron-darwin-x64/` that contains the app. Zip it and extract it on a mac system and you should be able to run it natively. You will get warnings that it's from an *unknown developer*, but this is expected and it's perfectly safe to open - it's your own code after all.
diff --git a/hugo/content/lessons/firebase-analytics-web-guide/index.md b/hugo/content/lessons/firebase-analytics-web-guide/index.md
deleted file mode 100644
index f6d9c4f80..000000000
--- a/hugo/content/lessons/firebase-analytics-web-guide/index.md
+++ /dev/null
@@ -1,129 +0,0 @@
----
-title: Firebase Analytics for the Web
-lastmod: 2019-10-03T13:08:58-07:00
-publishdate: 2019-10-03T13:08:58-07:00
-author: Jeff Delaney
-draft: false
-description: Customize your app's UI/UX with Firebase Analytics and Remote Config in a Progressive Web App
-tags:
- - firebase
- - analytics
- - javascript
-
-youtube: iVHRy_uVtm0
-# github:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-Firebase recently announced support for [Analytics](https://firebase.google.com/docs/analytics) and [Remote Config](https://firebase.google.com/docs/remote-config) on the web. When combined, these services make it possible to customize the UI/UX of your app based on data collected from Google Analytics. The following lesson will show you how to collect Google Analytics events and user properties, then read aggregated data in your app to customize the experience for a specific audience.
-
-## Initial Setup
-
-Firebase Analytics was added to the JavaScript SDK in version 7.0.0. If you have an existing app, follow the [official setup guide](https://firebase.google.com/docs/analytics/get-started#before_you_begin). If working with a framework like Angular, React, etc, you will likely need to update your NPM package:
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm install firebase@latest
-{{< /highlight >}}
-
-And make sure the web config in your application contains the new *measurementId* field and calls `firebase.analytics()` on initialization, for example:
-
-{{< file "typescript" "app.ts" >}}
-{{< highlight typescript >}}
-const firebaseConfig = {
-// ... other fields
-measurementId: 'G-XXXXXXXXXX'
-};
-// Initialize Firebase
-import * as firebase from 'firebase/app';
-firebase.initializeApp(firebaseConfig);
-firebase.analytics();
-{{< /highlight >}}
-
-## Collect Data with Firebase Analytics
-
-Firebase will collect data automatically by simply including the analytics package in your app bundle. The default data is useful, but optimizing your analytics for a sales funnel or custom UI will likely require a custom integration.
-
-### Events
-
-[Events](https://firebase.google.com/docs/analytics/events) are critical to any good analytics dataset because they provide insight into how users interact with your app. Google provides a variety of [built-in events](https://developers.google.com/gtagjs/reference/event), but you can also create your own custom events as shown below.
-
-{{< highlight typescript >}}
-const analytics = firebase.analytics();
-
-function onNewGame() {
- // do something
- analytics.logEvent('start_game')
-
- analytics.logEvent('start_game', { level: '10', difficulty: 'expert' })
-}
-{{< /highlight >}}
-
-Optional: You can then find this event on the Firebase Console and click *parameter reporting*, then select the custom params you'd like to see reported:
-
-{{< figure src="img/analytics-param.png" caption="Reporting for Google Analytics params on custom events" >}}
-
-### User Properties
-
-User properties make it possible to segment or filter your users into smaller groups.
-
-In the example below, we look at the [custom claims](/lessons/firebase-custom-claims-role-based-auth/) on the user's auth record and set an user property accordingly.
-
-{{< highlight typescript >}}
-const analytics = firebase.analytics();
-
-firebase.auth().onIdTokenChanged(user => {
- if (user) {
- analytics.setUserId(user.uid);
- analytics.setUserProperties({ level: user.claims.level });
- }
-});
-{{< /highlight >}}
-
-
-## Remote Config
-
-[Remote config](https://firebase.google.com/docs/remote-config/use-config-web) is a service that can fetch key-value pairs from Firebase that contain values related Google Analytics and the current user session. This allows you to change the appearance of the UI based on they behavior of the user without making direct code changes your code.
-
-### Create Parameters
-
-Remote Config parameters are key-value pairs, but the value is assigned based on a condition you define based on the user's Google Analytics data. You might create parameters that activate based on geographic location, device, audience segment, and more. Create a parameter from the Firebase console.
-
-{{< figure src="img/analytics-remote-config.png" caption="Example of a Firebase Remote Config Parameter" >}}
-
-
-### Access Remote Config Properties
-
-Using the JavaScript SDK, make a reference to remote config, then use typesafe getters to access the parameters for the current user session.
-
-{{< highlight typescript >}}
-const remoteConfig = firebase.remoteConfig();
-
-remoteConfig.settings = {
-minimumFetchIntervalMillis: 3600000,
-};
-
-// Set a default value if it cannot be fetched
-
-remoteConfig.defaultConfig = ({
-'coolParam': '',
-});
-
-await remoteConfig.fetchAndActivate();
-
-// Use these values in your app to customize the UI
-
-const coolParam = remoteConfig.getString('something_cool');
-
-console.log(coolParam);
-
-{{< /highlight >}}
-
-
diff --git a/hugo/content/lessons/firebase-custom-claims-role-based-auth/index.md b/hugo/content/lessons/firebase-custom-claims-role-based-auth/index.md
deleted file mode 100644
index b02b78893..000000000
--- a/hugo/content/lessons/firebase-custom-claims-role-based-auth/index.md
+++ /dev/null
@@ -1,223 +0,0 @@
----
-title: Advanced Firebase Auth with Custom Claims
-lastmod: 2019-09-23T08:11:12-07:00
-publishdate: 2019-09-23T08:11:12-07:00
-author: Jeff Delaney
-draft: false
-description: Implement role-based user authorization and security rules by adding custom claims to the Firebase Auth ID token.
-tags:
- - firebase
- - auth
- - pro
-
-youtube:
-github:
-vimeo: 362111823
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
-pro: true
----
-
-Firebase allows developers to modify authentication [ID tokens](https://firebase.google.com/docs/auth/admin/verify-id-tokens) to provide fine-grained system access to authorized users. The follow lesson adds [custom claims](https://firebase.google.com/docs/auth/admin/custom-claims) to the Firebase user record to build a [role-based access control](https://en.wikipedia.org/wiki/Role-based_access_control) feature that is secured with Firestore rules.
-
-
-## Set Custom Claims from the Command Line
-
-It is not possible (currently) to add custom claims from the Firebase Console. This means we need to write some code with [Firebase Admin](https://firebase.google.com/docs/admin/setup).
-
-{{< box icon="scroll" >}}
-In the real world, you will most likely update custom claims from a [Cloud Function](https://fireship.io/courses/cloud-functions/). For example, the user makes a purchase and you update their claim as a *paid* user.
-{{< /box >}}
-
-
-### Initial Setup
-
-Th easiest way to update custom claims is to write a simple Node.js script. If starting from scratch, run the commands below in an empty directory.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm init -y
-npm i firebase-admin
-touch index.js
-{{< /highlight >}}
-
-
-### Service Account
-
-Download your [service account](https://firebase.google.com/docs/admin/setup#initialize_the_sdk) from the Firebase settings tab and save it as `service-account.json` in the project directory. ⚠️ The service account contains sensitive API keys that should not be exposed publicly.
-
-{{< figure src="img/functions-service-account.png" caption="Download your service account" >}}
-
-### Update Claims with Firebase Auth
-
-The script below calls the `auth.setCustomUserClaims` method to add a claims object to the user's ID token. You can save any data to the claims object as long as it can be serialized to JSON.
-
-{{< box icon="hazard" >}}
-The max size of the claims object is 1000 bytes. It is a good practice to only save the bare minimum amount of data required for authorization logic.
-{{< /box >}}
-
-{{< file "js" "index.js" >}}
-{{< highlight js >}}
-const admin = require('firebase-admin');
-admin.initializeApp();
-
-const auth = admin.auth();
-
-const uid = 'NUc3KyG2RAfNuOrE0pzMMZegFHS2';
-
-const customClaims = {
- roles: ['creator', 'auditor', 'admin']
-};
-
-(async() => {
- await auth.setCustomUserClaims(uid, customClaims);
- const user = await auth.getUser(uid);
- console.log('success', user)
- process.exit()
-})();
-{{< /highlight >}}
-
-Run the script from the command line making sure to set an environment variable that points to the service account.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-GOOGLE_APPLICATION_CREDENTIALS=service-account.json
-node index.js
-{{< /highlight >}}
-
-Now that we have a way to update claims, let's looks at a few common use cases.
-
-## Simple Admin Levels
-
-### Use Case
-
-The most basic type of access control is to distinguish between a boolean value, such as paid/unpaid users or admins/non-admins. You might also fine tune access levels by also setting an integer value.
-
-{{< highlight javascript >}}
-const customClaims = {
- admin: true,
- level: 7,
-};
-{{< /highlight >}}
-
-### Firestore Rules
-
-The Firestore rules grant read access to all admins, but limit write access to admins above level 5.
-
-{{< file "firebase" "firebase.rules" >}}
-{{< highlight js >}}
- match /{path=**}/secrets/{id} {
- allow read: if request.auth.token.admin;
- allow write: if request.auth.token.level > 5;
- }
-{{< /highlight >}}
-
-
-## Role-based Access Control
-
-### Use Case
-
-A very common requirement is role-based authorization. A user can be assigned a list of roles, which determine if that user can perform a certain action. This strategy is common is CMS platforms - Wordpress for example has roles like *super_admin*, *admin*, *editor*, *author*, and so on.
-
-{{< highlight javascript >}}
-const customClaims = {
- roles: ['creator', 'auditor', 'admin'],
-};
-{{< /highlight >}}
-
-### Firestore Rules
-
-We can assume a user with any role has read access, so checking by length is sufficient. For write access, we allow the `admin` to perform all actions, but limit the `creator` and `auditor` roles to specific types of writes.
-
-{{< file "firebase" "firebase.rules" >}}
-{{< highlight js >}}
-match /{path=**}/secrets/{id} {
- allow read: if request.auth.token.roles.size > 0;
- allow create: if request.auth.token.roles.hasAny(['creator', 'admin']);
- allow update: if request.auth.token.roles.hasAny(['auditor', 'admin']);
- allow delete: if request.auth.token.roles.hasAny(['admin']);
-}
-{{< /highlight >}}
-
-Tip: You could make the code above more concise my extracting the logic into a rules function.
-
-{{< highlight js >}}
-match /{path=**}/secrets/{id} {
- allow create: if userHasRole(['creator', 'admin']);
- allow update: if userHasRole(['auditor', 'admin']);
- allow delete: if userHasRole(['admin']);
-}
-
-
-function userHasRole(roles) {
- return request.auth.token.roles.hasAny(roles);
-}
-{{< /highlight >}}
-
-
-## Access Control List
-
-### Use Case
-
-Imagine an app where **users can belong to multiple organizations AND have customized access assigned for each organization**. For example, each company may want to limit access to a specific department.
-
-An access control list (ACL) is the opposite of role-based auth. Rather than give the user sweeping access to a path, the ID of the resource determines if access can be granted to that user.
-
-
-{{< highlight javascript >}}
-const customClaims = {
- orgs: {
- uber: ['accounting', 'finance'],
- tesla: ['manufacturing', 'ai'],
- mcdonalds: ['nuggets']
- },
-}
-{{< /highlight >}}
-
-### Firestore Rules
-
-The rule below matches the document ID to the user's custom claims. For example a read to `orgs/tesla/departments/manufacturing` would be allowed in this example.
-
-{{< file "firebase" "firebase.rules" >}}
-{{< highlight js >}}
- match /{path=**}/orgs/{orgId}/departments/{departmentId} {
- allow read: if request.auth.token.orgs[orgId].hasAny([departmentId])
- }
-{{< /highlight >}}
-
-## Validate Claims from the Frontend
-
-### Retrieve the ID Token
-
-Custom claims can also be used to build the frontend UI. Get the result of the ID token like so:
-
-{{< file "js" "app.js" >}}
-{{< highlight js >}}
-const token = await firebase.auth().currentUser.getIdTokenResult();
-
-if (token.claims.admin) {
- // show admin UI
-}
-{{< /highlight >}}
-
-### Force Refresh of the ID Token
-
-The ID token will refresh every 1 hour, or you can force it to refresh manually to propagate changes to the custom claims.
-
-{{< file "js" "app.js" >}}
-{{< highlight js >}}
-firebase.auth().currentUser.getIdTokenResult(true);
-{{< /highlight >}}
-
-## 👀 Alternative Approach
- Learn how to implement roles without custom claims with the [Firestore User Roles Tutorial](https://angularfirebase.com/lessons/role-based-authorization-with-firestore-nosql-and-angular-5/)
-
-
-
-
diff --git a/hugo/content/lessons/firebase-emulator-advanced/index.md b/hugo/content/lessons/firebase-emulator-advanced/index.md
deleted file mode 100644
index a9f01e0a4..000000000
--- a/hugo/content/lessons/firebase-emulator-advanced/index.md
+++ /dev/null
@@ -1,277 +0,0 @@
----
-title: Firebase Emulator Advanced Usage Guide
-lastmod: 2020-05-31T19:11:38-07:00
-publishdate: 2020-05-31T19:11:38-07:00
-author: Jeff Delaney
-draft: false
-description: Advanced techniques for generating mock data and testing with the Firebase emulator suite
-tags:
- - firebase
- - productivity
- - testing
- - pro
-
-pro: true
-vimeo: 424882834
-# youtube:
-# github:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-The [Firebase emulator suite](https://firebase.google.com/docs/emulator-suite) allows developers to run a mock Firebase environment locally. Last week, Firebase released a new feature called the [Emulator UI](https://firebase.googleblog.com/2020/05/local-firebase-emulator-ui.html) to visualize and manage Firestore (and Realtime DB) from the browser. The following lesson contains a variety of advanced techniques for setting up a Firebase development environment.
-
-
- {{< tweet 1267220417896255488 >}}
-
-
-
-## Initial Setup
-
-First, install/update the Firebase CLI, then initialize the emulators in your project.
-
-{{< file "terminal" "command line" >}}
-```text
-npm i -g firebase-tools
-
-firebase init
-
-firebase emulators:start
-```
-
-### Frontend Integration
-
-How do you use emulated Cloud Functions and Firestore in a frontend app? When developing on localhost, you can tell Firestore and Callable Functions to use the emulator with a simple conditional check on the URL.
-
-{{< file "js" "client-side.js" >}}
-```javascript
- firebase.initializeApp(yourFirebaseConfig);
-
-
- if (location.hostname === "localhost") {
-
- firebase.firestore().settings({
- host: "localhost:8080",
- ssl: false
- });
-
- firebase.functions().useFunctionsEmulator("http://localhost:5001");
- }
-```
-
-### Backend Firebase Admin
-
-If using Firebase Admin with Node.js, you can set an environment variable when not in production.
-
-{{< file "js" "server-side.js" >}}
-```javascript
-admin.initializeApp();
-
-
-if (process.env.NODE_ENV !== 'production') {
- process.env.FIRESTORE_EMULATOR_HOST = 'localhost:8080';
-}
-```
-
-
-### What cannot be Emulated?
-
-Auth, Storage, and FCM are not currently supported. If you need to create a large number of mock records for these services, consider creating a second "sandbox" Firebase project.
-
-
-## Mock Data
-
-The emulator makes the Firebase Admin SDK available on the browser `window`. This means you can just call `firestore.doc(...).set(...)` from a client-side script or the browser console.
-
-### Generate Fake Firestore Data Quickly
-
-We can quickly generate mock data by injecting [Faker.js](https://github.com/marak/Faker.js/) into a browser script. The script appends a button to the UI, then tells Firestore to create 100 user documents with fake data. Run it by simply pasting this code into the browser console.
-
-{{< file "js" "browser console" >}}
-```javascript
-(function () {
- const script = document.createElement('script');
- script.src =
- 'https://cdnjs.cloudflare.com/ajax/libs/Faker/3.1.0/faker.min.js';
- document.body.appendChild(script);
-
- setTimeout(() => {
- faker.seed(23);
-
- const container = document.querySelector('.Firestore-actions');
-
- const btn = document.createElement('button');
- btn.innerHTML = 'Add 100 Users';
- btn.className = 'mdc-button mdc-button--unelevated';
- btn.onclick = async () => {
- Array(100)
- .fill(0)
- .forEach((_) => {
- firestore.collection('users').add(faker.helpers.createCard());
- });
- };
-
- container.appendChild(btn);
-
- }, 2000);
-})();
-
-```
-
-### Run the Script Automatically
-
-You can run this script each time you visit the `localhost:4000/firestore/*` URL with a browser plugin called [TamperMonkey](https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo).
-
-{{< figure src="img/emulator-fake-data.png" caption="Use TamperMonkey to run the script automatically" >}}
-
-
-## PubSub
-
-[Pub/Sub](https://cloud.google.com/pubsub/) is a secure way to send messages between Google Cloud services. To create messages, install the Node.js client.
-
-{{< file "terminal" "command line" >}}
-```text
-npm i @google-cloud/pubsub
-```
-
-### Create and Send Messages
-
-Below we have an HTTP function used to publish test messages. First, it checks if a topic exists, and if not, creates it. Next, it sends the JSON payload to its subscribers. I would recommend calling this function from an HTTP client like Postman or Insomnia (see video).
-
-```javascript
-const { PubSub } = require('@google-cloud/pubsub');
-const pubsubClient = new PubSub();
-
-
-exports.sendTestMessage = functions.https.onRequest(async (req, res) => {
-
- const { topic, data } = req.body;
-
-
- const [exists] = await pubsubClient.topic(topic).exists();
-
- if (!exists) {
- await pubsubClient.createTopic(topic);
- }
-
-
- const id = await pubsubClient.topic(topic).publishJSON(data);
-
- res.send(id)
-});
-```
-
-### Receive Messages
-
-Handle messages to a topic with a Pub/Sub Cloud Function.
-
-```javascript
-exports.handleMessage = functions.pubsub.topic('test').onPublish( async (message, context) => {
-
- const data = message.json;
-
- // do something here
-
- return null;
-
-});
-
-```
-
-### Run Scheduled Jobs
-
-The emulator does not currently run cron jobs for your scheduled functions. However, you can test the logic in your function by triggering the associated Pub/Sub topic, such as `firebase-schedule-YOUR_FUNCTION_NAME`.
-
-```javascript
-exports.someBackgroundJob = functions.pubsub.schedule('* * * * *').onRun( ctx => { ... });
-```
-
-For example, this function can be triggered by sending a message to `firebase-schedule-someBackgroundJob`. If you really want to test a schedule, consider creating a script with [node-cron](https://www.npmjs.com/package/node-cron).
-
-## Testing
-
-### End-to-End with Cypress
-
-You can easily add end-to-end (E2E) testing to any frontend project with Cypress.
-
-{{< file "terminal" "command line" >}}
-```text
-cd frontend-app
-npm install cypress -D
-```
-
-Create a file for your spec.
-
-{{< file "js" "cypress/integration/example-spec.js" >}}
-```javascript
-///
-{{< /highlight >}}
-
-
-Next, upload the image to Google Cloud's [Container Registry](https://cloud.google.com/container-registry/).
-
-
-{{< highlight text >}}
-sudo docker tag 7e6fdc4b97db gcr.io/fireship-lessons/nuxt-server
-sudo docker push gcr.io/fireship-lessons/nuxt-server
-{{< /highlight >}}
-
-{{< figure src="img/container-registry.png" caption="You should now see your image in the Container Registry on GCP" >}}
-
-## Step 3: Create a Microservice on Cloud Run
-
-Create your service on Cloud Run and make sure to tick `YES` to allow unauthenticated requests.
-
-{{< figure src="img/cloud-run-nuxt.png" caption="Create a service for Nuxt on the Cloud Run dashboard" >}}
-
-And that's basically it, you now have a server-rendered JavaScript app microservice hosted in a serverless environment.
-
-{{< figure src="img/cloud-run-deployed.png" caption="Navigate to the URL to view the deployed Nuxt app." >}}
-
-## Step 4: Connect it to Firebase Hosting
-
-As a final touch, let's integrate our microserice with Firebase hosting.
-
-### Initialize Firebase Hosting
-
-Initialize Firebase Hosting, select NO for "single page app", then delete the public folder.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase init hosting
-rm public
-{{< /highlight >}}
-
-{{< file "firebase" "firebase.json" >}}
-{{< highlight javascript >}}
-{
- "hosting": {
- "public": "public",
- "ignore": [
- "firebase.json",
- "**/.*",
- "**/node_modules/**"
- ],
- "rewrites": [
- {
- "source": "**",
- "run": {
- "serviceId": "nuxt-server",
- "region": "us-central1"
- }
- }
- ]
- }
-}
-{{< /highlight >}}
-
-### Deploy Hosting
-
-Deploy your app to Firebase and you should now see Nuxt running with SSR on Firebase Hosting.
-
-{{< highlight text >}}
-firebase deploy --only hosting
-{{< /highlight >}}
-
-{{< figure src="img/nuxt-firebase-hosting.png" caption="Nuxt on Firebase Hosting" >}}
diff --git a/hugo/content/lessons/firebase-performance-quickstart/index.md b/hugo/content/lessons/firebase-performance-quickstart/index.md
deleted file mode 100644
index ad88d2218..000000000
--- a/hugo/content/lessons/firebase-performance-quickstart/index.md
+++ /dev/null
@@ -1,217 +0,0 @@
----
-title: Firebase Performance Quickstart
-lastmod: 2019-05-09T15:45:01-07:00
-publishdate: 2019-05-09T15:45:01-07:00
-author: Jeff Delaney
-draft: false
-description: Learn how to get up and running with Firebase Performance in an Angular app.
-tags:
- - firebase
- - performance
- - angular
-
-youtube: KYYjdWSrRjI
-github: https://github.com/fireship-io/184-firebase-performance-web
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-Firebase [announced Performance Monitoring](https://firebase.googleblog.com/2019/05/whats-new-Google-IO-2019.html) for the Web at Google I/O 2019 - a long-awaited feature for Progressive Web Apps. It provides a simple way to add robust performance analytics to your app with minimal effort, while also adding the ability to run custom traces in your code. In the following lesson, you will learn how to add this new tool to any web app and setup traces to find performance bottlenecks.
-
-## Initial Setup
-
-The following demo uses Angular, but the principles apply to any frontend JavaScript web app - checkout the [official guide](https://firebase.google.com/docs/perf-mon/get-started-web) for setup instructions in non-Angular projects. By simplying including the performance package in your app you will receive metrics related to page load and HTTP performance.
-
-{{< box icon="scroll" class="box-blue" >}}
-Keep in mind, you can use Firebase Performance as a standalone service without any other Firebase dependencies. In this case, you would want to load the lightweight script via the CDN as described in docs.
-{{< /box >}}
-
-At the time of this article, performance in [AngularFire](https://github.com/angular/angularfire2) is available under the *next* tag.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm i firebase
-npm i @angular/fire@next
-{{< /highlight >}}
-
-
-Grab your Firebase config from the console, then initialize AngularFire & Firebase in Angular.
-
-{{< figure src="img/config-fireperf.png" caption="Make sure you have the new Firebase config object with an appId property" >}}
-
-{{< file "ngts" "app.module.ts" >}}
-{{< highlight typescript >}}
-const firebaseConfig = {
- // ...firebase config
- appId: '1:xxxxxxxxxxxxxxxx' // <-- make sure you have this field
-};
-
-import { AngularFireModule } from '@angular/fire';
-import { AngularFirePerformanceModule } from '@angular/fire/performance';
-
-
-@NgModule({
- declarations: [
- AppComponent,
- ],
- imports: [
- BrowserModule,
- AngularFireModule.initializeApp(firebaseConfig),
- AngularFirePerformanceModule
- ],
- providers: [],
- bootstrap: [AppComponent]
-})
-export class AppModule { }
-{{< /highlight >}}
-
-
-
-
-### Track Page Load Metrics
-
-Just sit back and relax. Firebase will automatically collect the same page load stats you can find locally in a [Chrome Lighthouse](https://developers.google.com/web/tools/lighthouse/) audit, but will be segmented by region, device, browser, and can even tell you if a service worker is installed. In addition, you can view the latency and payload size of any HTTP request that flows through your app.
-
-{{< figure src="img/firebase-performance-time.png" caption="Firebase Performance will automatically track page loads stats" >}}
-
-## User Login
-
-A common use-case for a custom trace is your user authentication flow. Failing to get a user logged in or signed up quickly is a good recipe to bounce them forever.
-
-{{< box icon="scroll" class="box-blue" >}}
-#### What is the difference between an Attribute and a Metric?
-
-An attribute is a string value segments data on the Firebase console. A metric is a numeric value that can be charted and might change over the lifecycle of the trace - in other words, a metric is a value that you want to measure over time.
-{{< /box >}}
-
-
-
-### Trace Login Time
-
-For example, **How long does it take the average user to get logged in?**. But we don't have to stop there - we can also add custom attributes to segmenent reports based on custom data attributes and trace specific errors that happen during the login process.
-
-{{< file "ngts" "login.component.ts" >}}
-{{< highlight typescript >}}
-import { Component } from '@angular/core';
-import { AngularFireAuth } from '@angular/fire/auth';
-
-import * as firebase from 'firebase/app';
-const perf = firebase.performance();
-
-@Component(...)
-export class LoginComponent {
-
- constructor(private afAuth: AngularFireAuth) {}
-
- async login(email, pass) {
- const trace = perf.trace('userLogin');
- trace.start();
-
- try {
- const credential = await this.afAuth.signInWithEmailAndPassword(email, pass);
-
- trace.putAttribute('verified', `${credential.user.emailVerified}`);
- trace.stop();
-
- } catch (err) {
- trace.putAttribute('errorCode', err.code);
- trace.stop();
- }
-
- }
-
-}
-
-{{< /highlight >}}
-
-{{< figure src="img/login-perf.png" caption="Metrics related to the user login process" >}}
-
-### Trace Lifecycle Hooks
-
-On iOS and Android, Firebase runs a screen trace to measure the lifetime of a screen detect frozen screens. You can use lifecycle hooks in your preferred framework to get similar results on the web. Here's how we can archive this in Angular:
-
-{{< file "ngts" "login.component.ts" >}}
-{{< highlight typescript >}}
-export class LoginComponent implements OnInit, OnDestroy {
-
- screenTrace: firebase.performance.Trace;
-
-
- ngOnInit() {
- this.screenTrace = perf.trace('loginScreen');
- this.screenTrace.start();
- }
-
- ngOnDestroy() {
- this.screenTrace.stop();
- }
-{{< /highlight >}}
-
-## Firestore
-
-Firebase Perf can also be very useful when it comes understanding database performance.
-
-### Trace Read Latency and Quantity
-
-**How many documents did I read in a collection and how long did it take?** Normally, you should have a `limit` set on your queries to avoid excessive reads in large collections, but this is not always possible. The `incrementMetric` method is especially useful if you want to keep a running count of a value during the trace.
-
-
-{{< file "ngts" "some.component.ts" >}}
-{{< highlight typescript >}}
- async loadUserData() {
- const trace = perf.trace('itemsQuery');
-
- const items = await this.db.collection('items').get();
- trace.incrementMetric('collectionSize', items.size);
-
- const things = await this.db.collection('things').get();
- trace.incrementMetric('collectionSize', things.size);
-
- trace.stop();
- }
-{{< /highlight >}}
-
-### AngularFire Performance with RxJS
-
-In this section, we will take an early look at some of the custom RxJS pipes proposed for the [@angular/fire](https://github.com/angular/angularfire2) package. By simply adding the `trace` pipe we can start/stop a trace after an Observable emits data.
-
-{{< file "ngts" "items.component.ts" >}}
-{{< highlight typescript >}}
-export class ItemsComponent implements OnInit {
-
- constructor(private perf: AngularFirePerformance, private db: AngularFirestore) { }
-
- items;
-
-
- ngOnInit() {
-
- this.items = this.db.collection('items').snapshotChanges()
- .pipe(
-
- // Custom RxJS Operator
- this.perf.trace('itemsQuery')
-
- );
-
- }
-
-}
-{{< /highlight >}}
-
-## Other Ideas for Performance Monitoring
-
-Firebase Performance can be used for almost any feature you suspect might be a bottleneck that hurts the user experience. Here is a short list of additional areas you may want to consider for performance monitoring.
-
-- Complex API Calls (Beyond the automatic traces on HTTP calls)
-- Firebase Storage Uploads & Downloads
-- Component Routing and Rendering
-- Use `trace.record()` to monitor activity on specific time intervals.
-
-
diff --git a/hugo/content/lessons/firebase-riverpod-flutter/index.md b/hugo/content/lessons/firebase-riverpod-flutter/index.md
deleted file mode 100644
index 376530b0f..000000000
--- a/hugo/content/lessons/firebase-riverpod-flutter/index.md
+++ /dev/null
@@ -1,199 +0,0 @@
----
-title: Using Riverpod with Firebase in Flutter
-lastmod: 2021-11-27T13:45:48-07:00
-publishdate: 2021-11-27T13:45:48-07:00
-author: Jeff Delaney
-draft: false
-description: Use Riverpod to manage Firebase auth state and relational realtime data in Firestore
-tags:
- - pro
- - flutter
- - firebase
-
-# youtube:
-github: https://github.com/fireship-io/riverpod-firebase-demo
-vimeo: 650906808
-pro: true
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-[Riverpod](https://riverpod.dev/docs/getting_started/) is a reactive state-management library for Flutter that can simplify the way global data is shared throughout your application. It is especially useful with [Firebase](https://firebase.flutter.dev/) because it allows to you easily join Streams together, like a Firestore document with a Firebase Auth user.
-
-The following tutorial demonstrates how to use Riverpod to manage Firebase Auth state and relational realtime data in Firestore.
-
-**Learning Objectives**
-
-- Riverpod Basics w/ Firebase
-- Listen to the current user's auth state
-- Join realtime Firestore data based on current user's UID
-
-## Setup
-
-This tutorial assumes you have already installed [Firebase](https://firebase.flutter.dev/) into your app. Install Riverpod by adding it to the `pubspec.yaml` file.
-
-### Starter Code
-
-The application should initialize Firebase and look something like this:
-
-{{< file "yaml" "pubspec.yaml" >}}
-```yaml
-firebase_core: "^1.10.0"
-cloud_firestore: "^3.1.0"
-firebase_auth: "^3.2.0"
-flutter_riverpod: ^1.0.0
-```
-
-The main function should initialize Firebase and the root widget should be wrapped in a `ProviderScope`.
-
-{{< file "flutter" "main.dart" >}}
-```dart
-import 'dart:async';
-import 'package:flutter/material.dart';
-import 'package:hooks_riverpod/hooks_riverpod.dart';
-import 'package:firebase_core/firebase_core.dart';
-import 'package:firebase_auth/firebase_auth.dart';
-import 'package:cloud_firestore/cloud_firestore.dart';
-
-
-void main() async {
- WidgetsFlutterBinding.ensureInitialized();
- await Firebase.initializeApp();
- runApp(
- ProviderScope(
- child: MyApp(),
- ),
- );
-}
-```
-
-## Riverpod Basics
-
-### Provider
-
-A provider is a global state container that can be used to share data between widgets.
-
-{{< file "flutter" "main.dart" >}}
-```dart
-final helloWorldProvider = Provider((_) => 'Hello world');
-```
-
-### ConsumerWidget
-
-Riverpod provides a base class called `ConsumerWidget` to replace the `StatefulWidget` class. It has the ability to listen to changes in the state of a provider. It provides a widget reference that contains a `watch` method to access the current provider value.
-
-{{< file "flutter" "main.dart" >}}
-```dart
-class MyApp extends ConsumerWidget {
- @override
- Widget build(BuildContext context, WidgetRef ref) {
-
- final String helloWorld = ref.watch(helloWorldProvider);
-
- return MaterialApp(
- home: Scaffold(
- appBar: AppBar(
- title: Text(helloWorld),
- ),
- ),
- );
- }
-}
-```
-
-## Firebase Auth Provider
-
-FirebaseAuth provides the current user as a `Stream`. Riverpod has a `StreamProvider` class that can wrap the Firebase auth state, allowing you to access the current user from any widget easily.
-
-### Create a StreamProvider
-
-A `StreamProvider` is just a provider that returns a `Stream`.
-
-
-```dart
-final userProvider = StreamProvider(
- (ref) => FirebaseAuth.instance.authStateChanges(),
-);
-```
-
-### Consume a StreamProvider
-
-The provider contains a `when` method that will build a different UI depending on the `data`, `loading`, and `error` states.
-
-{{< file "flutter" "main.dart" >}}
-```dart
-class MyApp extends ConsumerWidget {
- @override
- Widget build(BuildContext context, WidgetRef ref) {
-
- final user = ref.watch(userProvider);
-
- return user.when(
- data: (user) {
- return MaterialApp(...);
- },
- error: (e, s) => Text('error'),
- loading: () => Text('loading'),
- );
- }
-}
-
-```
-
-## Firestore Provider
-
-In this section, we query a Firestore document with the UID and listen to changes in realtime. The beauty of Riverpod is that we can compose providers together to handle complex relationships that react to changes in other providers.
-
-### Query Firestore with UID
-
-This demo assumes every user has an account document in Firestore, like `accounts/{uid}`. The provider will query Firestore with the current user's UID. If the UID does not exist, just return an empty `Stream`.
-
-Note: This pattern is similar to the [relational switchMap](/courses/flutter-firebase/firestore-relational/) technique used in the Full Flutter Course with RxDart.
-
-{{< file "flutter" "main.dart" >}}
-```dart
-final dataProvider = StreamProvider(
- (ref) {
- final userStream = ref.watch(userProvider);
-
- var user = userStream.value;
-
- if (user != null) {
- var docRef =
- FirebaseFirestore.instance.collection('accounts').doc(user.uid);
- return docRef.snapshots().map((doc) => doc.data());
- } else {
- return Stream.empty();
- }
- },
-);
-```
-
-### Consume Realtime Data
-
-Now consume the provider just like the previous example.
-
-```dart
-class AccountDetails extends ConsumerWidget {
- @override
- Widget build(context, ref) {
- final data = ref.watch(dataProvider);
-
- return data.when(
- data: (data) {
- return Text(data?['hello'] ?? 'empty');
- },
- error: (e, s) => Text('error'),
- loading: () => Text('waiting for data...'),
- );
- }
-}
-```
-
-
diff --git a/hugo/content/lessons/firestore-data-modeling-and-queries/index.md b/hugo/content/lessons/firestore-data-modeling-and-queries/index.md
deleted file mode 100644
index 3c741e7fc..000000000
--- a/hugo/content/lessons/firestore-data-modeling-and-queries/index.md
+++ /dev/null
@@ -1,155 +0,0 @@
----
-title: Firestore Data Modeling and Queries
-lastmod: 2019-02-06T20:32:21-07:00
-publishdate: 2019-02-06T20:32:21-07:00
-author: Jeff Delaney
-draft: true
-description: Learn how to handle complex relationships and queries with Firebase Firestore
-tags:
- - javascript
- - firestore
- - nosql
- - firebase
-
-
-youtube:
-github:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-[Cloud Firestore](https://firebase.google.com/docs/firestore/query-data/queries) recently came out of beta and can now be used in production with full confidence. Still, the greatest challenge for any app using a NoSQL database almost always comes down to **data modeling**. Firestore gives you a ton of flexibility, but that means you have more decisions to consider.
-
-The following lesson will take you through a variety of practical examples of data modeling and querying on Firestore.
-
-
-
-{{< box icon="scroll" class="box-blue" >}}
-This post first appeared as [Episode 85 on AngularFirebase.com](https://angularfirebase.com/lessons/firestore-nosql-data-modeling-by-example/) and has been fully updated for Firestore v1.
-{{< /box >}}
-
-## Key Concepts
-
-Here are few key principles to follow when using Firestore.
-
-- Let your frontend design drive decisions about data modeling.
-- Collections can be infinitely large, while documents less than 1Mb
-- Data duplication is OK
-
-
-https://firebase.google.com/docs/firestore/manage-data/structure-data
-
-
-### Types of Queries
-
-Below are examples of the types of queries you can make in Firestore. They can be chained together to build complex compound queries.
-
-{{< file "js" "query.js" >}}
-{{< highlight javascript >}}
-// Single Document Read
-const doc = ref.doc(path);
-
-// Full Collection Read
-const col = ref.collection(path);
-
-// Ordered Collection
-col.orderBy(field, 'asc')
-
-// Limited Collection
-col.limit(10);
-
-// Paginated Collection, startAt endAt endAfter endBefore
-col.orderBy(field, 'asc').startAt(offset).limit(10);
-
-// Where, an expressive query
-col.where(field, '>=', value)
-{{< /highlight >}}
-
-**Pro Tip ⚡** You can build queries directly from the Firebase Console and it will generate the necessary code for you.
-
-{{< figure src="img/firestore-query-console.png" alt="Making a query in firestore directly from the console" >}}
-
-
-## Has-One or Belongs-To Relationship
-
-One of the most common data relationships you will encounter is when an entity **has one** item. Or in other words, an item **belongs-to** the entity. If you're using Firebase Auth, you can model ownership giving a document the same ID as the user.
-
-{{< box icon="abacus" class="" >}}
-Example: A user has one account. An account belongs to a user.
-{{< /box >}}
-
-### Database Structure
-
-Notice how both documents share the same unique ID. This allows you to associate and join multiple documents to a single user/entity.
-
-
-{{< figure src="img/firestore-has-one.png" alt="A has one relationship in Firestore" >}}
-{{< figure src="img/firestore-belongs-to.png" alt="A belongs-to relationship in Firestore" >}}
-
-### Query
-
-Now we can query the related data with a basic document read. First, make a reference to the document path, then decide how you want to consume the data.
-
-{{< file "js" "fire.js" >}}
-{{< highlight javascript >}}
-const db = firebase.firestore();
-
-const uid = 'userXYZ';
-
-// 1. Make a reference
-const userRef = db.collection('users').doc(uid);
-const acctRef = db.doc(`accounts/${uid}`);
-
-// 2a. single read
-userRef.get().then(snapshot => doStuff);
-
-// 2b. or setup a realtime listener
-acctRef.onSnapshot(snapshot => doStuff);
-{{< /highlight >}}
-
-
-## Has-Many Relationship - Embedded
-
-It is also possible for an entity to **have-many** of a certain item.
-
-{{< box icon="abacus" class="" >}}
-Example: A user has many tasks
-{{< /box >}}
-
-### Database Structure
-
-{{< figure src="img/firestore-has-one.png" alt="A has one relationship in Firestore" >}}
-
-### Query
-
-## Has-Many
-
-
-
-
-- Has one, belongs to
-- Has many
-- Many to many, via embedded array/map
-- Many to many, via connecting col
-
-
-
-## Recipes
-
-Jason baisden So man...thought I was getting the hang of Cloud Firestore. I have an object, LearningNote. Each LearningNote correlates to a goal. I've set this up in my code such that LearningNote has a property of type Goal. So now my LearningNote service is querying my Goal service for each object returned. In Firestore, LearningNote and Goals are their own collections. Any thoughts on how to tidy this up? Is this the "right" way to do it? I've thought about making LearningNotes a child collection of Goals, but am still wondering how I'd get the goal information for each learning note.
-
-alterNerDive hey pro-members, what is the better solution:
-I have 1 collection with articles, articles-doc has a field `type` and could have value A or B.
-On one site, i load this collection and build 2 lists, 1 for `type===A` and 1 for `type===B`.
-
-What is the better solution:
-Load whole collection and filter on template with `*ngIf="article.type===A"` or load data 2 times with filter in query?
-
-
-Anyone have a firestore solution for indexes and tagging when you're querying with tags (setup as based boolean maps) and ordering by something like updatedAt? I have a collection of documents that can have any number of topic based tags. I can query documents that match multiple tags until I try and order the documents and then Firebase wants to create a index for each tag (which is not viable). Any suggestions much appreciated.
\ No newline at end of file
diff --git a/hugo/content/lessons/firestore-pagination-guide/index.md b/hugo/content/lessons/firestore-pagination-guide/index.md
deleted file mode 100644
index f73dea2f5..000000000
--- a/hugo/content/lessons/firestore-pagination-guide/index.md
+++ /dev/null
@@ -1,140 +0,0 @@
----
-title: Firestore Pagination Guide
-lastmod: 2019-11-26T09:17:06-07:00
-publishdate: 2019-11-26T09:17:06-07:00
-author: Jeff Delaney
-draft: false
-description: Pagination queries with Firestore that move forward and backward.
-tags:
- - firebase
- - firestore
- - javascript
-
-type: lessons
-youtube: yFlhTvxcrQ8
-github: https://github.com/fireship-io/215-firestore-pagination
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-versions:
- firebase: 7.3.0
----
-
-[Pagination](https://en.wikipedia.org/wiki/Pagination) is the process of dividing data into discrete pages. In Firestore, it is achieved by ordering a collection by a field, limiting it to a consistent page size, then offsetting the query. The Firebase Web SDK v7.3.0 introduced a new `limitToLast(n)` method that makes the process much easier. The following lesson demonstrates how to paginate Firestore data in both a forward and backward direction and discusses advanced serverside techniques.
-
-{{< box icon="scroll" class="box-orange" >}}
-[Firestore Pagination](https://cloud.google.com/firestore/docs/query-data/query-cursors) is a tricky requirement when also listening to realtime updates. If the position of data changes midway through a query, you might see results jump around the screen, which may confuse users. Pagination is most well suited for collections where the expected query ordering does not change frequently.
-{{< /box >}}
-
-{{< figure src="img/firestore-pagination.gif" caption="Demo of Pagination feature in Firestore" >}}
-
-## Firestore Pagination Implementation
-
-The following guide will provide high-level JavaScript code designed to work with any frontend UI framework. Check out the source code for a [full demo with Svelte](https://github.com/fireship-io/215-firestore-pagination).
-
-### Step 1 - Make the Initial Query
-
-You have to start somewhere...
-
-{{< file "js" "pagination.js" >}}
-{{< highlight javascript >}}
-const field = 'username';
-const pageSize = 3;
-
-const query = ref.orderBy(field).limit(pageSize);
-{{< /highlight >}}
-
-### Step 2 - Move Forward
-
-The next page requires the the **last** document from current query results. Use the `startAfter` method to offset from that document.
-
-{{< highlight javascript >}}
- function nextPage(last) {
-
- return ref.orderBy(field)
- .startAfter(last[field])
- .limit(pageSize);
- }
-{{< /highlight >}}
-
-### Step 3 - Move Backward
-
-
-Going back to the previous page requires the the **first** document from current query results. Use the `endBefore` method followed by `limitToLast` to offset from that document.
-
-{{< highlight javascript >}}
- function prevPage(first) {
-
- return ref.orderBy(field)
- .endBefore(first[field])
- .limitToLast(pageSize);
- }
-{{< /highlight >}}
-
-### Step 4 - Show a list of pages
-
-{{< box icon="hazard" class="box-red" >}}
-Showing a list of pages requires us to know the total number of documents in the query. We cannot simply request the count from Firestore without reading the entire collection, which defeats the purpose of pagination. See the serverside pagination section for your options.
-{{< /box >}}
-
-## Serverside Pagination
-
-### Option 1 - Offest Query Operator
-
-The Firebase Admin SDK contains a special operator [offset](https://cloud.google.com/nodejs/docs/reference/firestore/0.11.x/Query#offset). A potential solution is to route all paginated requests through Cloud Function with a parameter for the offset.
-
-
-{{< file "js" "index.js" >}}
-{{< highlight javascript >}}
-const admin = require('firebase-admin');
-
-const pageThree = ref.orderBy(field).limit(10).offset(20);
-{{< /highlight >}}
-
-### Option 2 - Aggregate data in a Cloud Function.
-
-Another option is create a field specifically for pagination. It is easier to handle pagination when you have a sequential set of values that increase by 1. For example, the number of the first document is 1, next is 2, then 3, 4, and so on.
-
-The cloud function below keeps track of the global count in a metadata document, then assigns the latest number when a new document is created. The operation is performed in a [transaction](https://firebase.google.com/docs/firestore/manage-data/transactions) to eliminate the potential for conflicts or duplicates.
-
-{{< file "js" "index.js" >}}
-{{< highlight javascript >}}
-const functions = require('firebase-functions');
-const admin = require('firebase-admin');
-admin.initializeApp();
-
-const db = admin.firestore();
-
-exports.keepCount = functions.firestore
- .document('customers/{customerId}')
- .onCreate((snapshot, context) => {
-
- return db.runTransaction(async transaction => {
-
- // Get the metadata and incement the count.
- const metaRef = db.doc('metadata/customers');
- const metaData = ( await transaction.get( metaRef ) ).data();
-
- const number = metaData.count + 1;
-
- transaction.update(metaRef, {
- count: number
- });
-
- // Update Customer
- const customerRef = snapshot.ref;
-
- transaction.set(customerRef, {
- number,
- },
- { merge: true }
- );
-
-
- });
-
- });
-{{< /highlight >}}
\ No newline at end of file
diff --git a/hugo/content/lessons/flutter-drag-and-drop-basics/index.md b/hugo/content/lessons/flutter-drag-and-drop-basics/index.md
deleted file mode 100644
index 5a7725050..000000000
--- a/hugo/content/lessons/flutter-drag-and-drop-basics/index.md
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: Flutter Drag and Drop Basics
-lastmod: 2019-04-30T11:45:14-07:00
-publishdate: 2019-04-30T11:45:14-07:00
-author: Jeff Delaney
-draft: false
-description: Learn how to create an interactive drag-and-drop UI in Flutter.
-tags:
- - flutter
-
-youtube: KOh6CkX-d6U
-github: https://github.com/fireship-io/183-flutter-draggable-game
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-
-
-The following lesson will teach you how to build a simple drag-and-drop UI with the [Draggable](https://docs.flutter.io/flutter/widgets/Draggable-class.html) and [DragTarget](https://docs.flutter.io/flutter/widgets/DragTarget-class.html) widgets. The demo app is a kid's game (ages 2 to 4) that requires the user to drag a fruit emoji 🍋 from the left column to the matching color on the right. If successfully dropped it will mark that item complete ✅ and the score will increase by one. The user can also reset the game at any time by pressing on the floating action button.
-
-
-{{< vimeo 333404934 >}}
-
-## Initial Setup
-
-In most cases, you will need your widgets organized within a `StatefulWidget` to render changes to the UI when certain drag/drop events take place.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class DragScreen extends StatefulWidget {
- DragScreen({Key key}) : super(key: key);
- createState() => ColorGameState();
-}
-
-class DragScreenState extends State {
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- body: Row(
- children: [
- Column(
- // draggable widgets here
- ),
- Column(
- // droppable widgets here
- )
- ],
- ),
- );
- }
-}
-{{< /highlight >}}
-
-## How to Drag Widgets
-
-### Draggble
-There are three different visual states to consider when building a draggable widget.
-
-1. *child* - This is the child that is initially present.
-2. *childWhenDragging* - This is the widget that gets left behind after user starts dragging.
-3. *feedback* - This is the widget that moves or sticks to the user's finger. It may be identical to the child, or you may want to add some extra shadow to increase the realism of movement.
-
-{{< figure src="img/draggable-parts.png" caption="The different parts of a Draggable widget after the user starts dragging" >}}
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-Draggable(
- data: // optional data to send to the drag target in next step,
- child: // widget
- feedback: // widget
- childWhenDragging: // widget
-);
-{{< /highlight >}}
-
-
-
-
-## How to Drop Widgets
-
-### DragTarget
-
-Now that we have a Draggable widget, we need to give it a "drop zone" using the *DragTarget* widget. It provides a builder function that gives you access to both the incoming and rejected data.
-
-There are several functions that can be used to listen to the various drag/drop events:
-
-- *builder* constructs the UI for the DragTarget.
-- *onWillAccept* fires when the user starts hovering, it must return a boolean to decide whether or not the user can drop the widget here.
-- *onAccept* fires when the user drops and onWillAccept returns `true`.
-- *onLeave* fires if the user leaves without dropping or onWillAcccept returns `false`;
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-// Prop on StatefulWidget
-bool successfulDrop;
-
-// Used inside build method
-DragTarget(
- builder: (BuildContext context, List incoming, List rejected) {
- if (successfulDrop == true) {
- return Text('Dropped!')
- } else {
- return Text('Empty dropzone');
- }
- },
-
- onWillAccept: (data) => data == 'GOOD',
-
- onAccept: (data) {
- setState(() {
- successfulDrop = true;
- });
- },
-
- onLeave: (data) {
-
- },
- );
-{{< /highlight >}}
diff --git a/hugo/content/lessons/flutter-file-uploads-cloud-storage/index.md b/hugo/content/lessons/flutter-file-uploads-cloud-storage/index.md
deleted file mode 100644
index bd0cddcfd..000000000
--- a/hugo/content/lessons/flutter-file-uploads-cloud-storage/index.md
+++ /dev/null
@@ -1,294 +0,0 @@
----
-title: Flutter File Uploads
-lastmod: 2019-07-26T12:14:09-07:00
-publishdate: 2019-07-26T12:14:09-07:00
-author: Jeff Delaney
-draft: false
-description: Capture an image in Flutter and upload the file to a Firebase Cloud Storage bucket.
-tags:
- - flutter
- - firebase
- - ios
- - android
-
-youtube: HCmAwk2fnZc
-github: https://github.com/fireship-io/199-flutter-firebase-storage-uploads
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-
-Camera apps are one of the most popular niches in the market, with the recent viral growth of [FaceApp](https://en.wikipedia.org/wiki/FaceApp) being a prime example. There are a variety of plugins for Flutter that make camera-based features easy to develop, and when combined with Firebase the results can be easily uploaded your backend cloud infrastructure. The following lesson demonstrates the following features:
-
-1. Capture images from the device camera or image gallery.
-1. Crop, rotate, and resize an image file.
-1. Upload files to a [Cloud Storage](https://firebase.google.com/docs/storage) bucket and show a visual progress indicator.
-
-
-{{< figure src="img/flutter-upload-demo.gif" caption="Demo of Flutter image cropper and Firebase Cloud Storage file uploads" >}}
-
-
-## Initial Setup
-
-Before starting this tutorial, you must have Firebase installed and configured in your app for iOS and Android.
-
-1. {{< prereq "install-flutterfire" >}}
-
-
-
-### Dependencies
-
-The Firebase packages required for file uploads include Core and [Storage](https://pub.dev/packages/firebase_storage). You may also want to include Firestore and Auth if you plan on associating uploaded files to a user.
-
-{{< file "flutter" "pubspec.yaml" >}}
-{{< highlight yaml >}}
-dependencies:
- flutter:
- sdk: flutter
-
- firebase_core: 0.4.0+8
- firebase_storage: 3.0.4
-
- image_cropper: 1.0.2
- image_picker: 0.6.0+17
-{{< /highlight >}}
-
-In addition to Firebase Storage, this lesson depends on [image_cropper](https://pub.dev/packages/image_cropper) and [image_picker](https://pub.dev/packages/image_picker). Keep in mind, these packages are unrelated to file uploads, but are extremely useful when capturing user-generated images. Follow the install instructions on their official documentation for platform-specific iOS and Android requirements.
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-import 'dart:io';
-import 'package:flutter/material.dart';
-import 'package:firebase_storage/firebase_storage.dart';
-import 'package:flutter/widgets.dart';
-import 'package:image_cropper/image_cropper.dart';
-import 'package:image_picker/image_picker.dart';
-
-void main() async {
- runApp(MyApp());
-}
-
-class MyApp extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- home: ImageCapture(),
- );
- }
-}
-{{< /highlight >}}
-
-
-
-## Image Capture and Crop
-
-The widget below is responsible for capturing an image file from the device, either via the camera or the photo gallery. Once a file is selected, a preview will be shown in the UI and the user can crop, resize, or rotate the raw Dart *File*. The *image_cropper* plugin does all the heavy lifting for the image manipulation, so we gain a ton of functionality with minimal code.
-
-### Image Capture Widget
-
-Both `_pickImage` and `_cropImage` are async methods that update the state of the widget with an image file. If the image is defined, the app displays a visual preview with the *Image* widget and provides buttons to crop or clear it.
-
-Notice how the file is being passed down to *Uploader*. This is a custom widget defined in the next section to manage the file upload task.
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-/// Widget to capture and crop the image
-class ImageCapture extends StatefulWidget {
- createState() => _ImageCaptureState();
-}
-
-class _ImageCaptureState extends State {
- /// Active image file
- File _imageFile;
-
- /// Cropper plugin
- Future _cropImage() async {
- File cropped = await ImageCropper.cropImage(
- sourcePath: _imageFile.path,
- // ratioX: 1.0,
- // ratioY: 1.0,
- // maxWidth: 512,
- // maxHeight: 512,
- toolbarColor: Colors.purple,
- toolbarWidgetColor: Colors.white,
- toolbarTitle: 'Crop It'
- );
-
- setState(() {
- _imageFile = cropped ?? _imageFile;
- });
- }
-
- /// Select an image via gallery or camera
- Future _pickImage(ImageSource source) async {
- File selected = await ImagePicker.pickImage(source: source);
-
- setState(() {
- _imageFile = selected;
- });
- }
-
- /// Remove image
- void _clear() {
- setState(() => _imageFile = null);
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
-
- // Select an image from the camera or gallery
- bottomNavigationBar: BottomAppBar(
- child: Row(
- children: [
- IconButton(
- icon: Icon(Icons.photo_camera),
- onPressed: () => _pickImage(ImageSource.camera),
- ),
- IconButton(
- icon: Icon(Icons.photo_library),
- onPressed: () => _pickImage(ImageSource.gallery),
- ),
- ],
- ),
- ),
-
- // Preview the image and crop it
- body: ListView(
- children: [
- if (_imageFile != null) ...[
-
- Image.file(_imageFile),
-
- Row(
- children: [
- FlatButton(
- child: Icon(Icons.crop),
- onPressed: _cropImage,
- ),
- FlatButton(
- child: Icon(Icons.refresh),
- onPressed: _clear,
- ),
- ],
- ),
-
- Uploader(file: _imageFile)
- ]
- ],
- ),
- );
- }
-}
-{{< /highlight >}}
-
-
-{{< figure src="img/flutter-image-cropper.jpg" caption="You should now be able to capture, preview, and crop an image in your Flutter app" >}}
-
-
-## Upload to Firebase Storage
-
-In this section, the [File](https://api.dartlang.org/stable/2.4.0/dart-io/File-class.html) object will be uploaded to a Firebase Cloud Storage bucket. The user can pause or cancel the upload task at any point, which is a useful feature when handling large files and/or users on slow networks. In addition, the widget monitors the upload progress and displays the percentage of bytes transferred using the [LinearProgressIndicator](https://api.flutter.dev/flutter/material/LinearProgressIndicator-class.html).
-
-### Uploader Widget
-
-When you create a *StorageUploadTask* it will immediately start uploading the file to storage. The task exposes a stream that emits a *StorageTaskEvent* containing metadata about the upload, such as bytes-transferred, which can be used to calculate the value of a progress indicator.
-
-You can also obtain the current state of the upload with boolean `task.isComplete` or `task.isInProgress` and so on.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class _UploaderState extends State {
- final FirebaseStorage _storage =
- FirebaseStorage(storageBucket: 'gs://fireship-lessons.appspot.com');
-
- StorageUploadTask _uploadTask;
-
- /// Starts an upload task
- void _startUpload() {
-
- /// Unique file name for the file
- String filePath = 'images/${DateTime.now()}.png';
-
- setState(() {
- _uploadTask = _storage.ref().child(filePath).putFile(widget.file);
- });
- }
-
- @override
- Widget build(BuildContext context) {
- if (_uploadTask != null) {
-
- /// Manage the task state and event subscription with a StreamBuilder
- return StreamBuilder(
- stream: _uploadTask.events,
- builder: (_, snapshot) {
- var event = snapshot?.data?.snapshot;
-
- double progressPercent = event != null
- ? event.bytesTransferred / event.totalByteCount
- : 0;
-
- return Column(
-
- children: [
- if (_uploadTask.isComplete)
- Text('🎉🎉🎉'),
-
-
- if (_uploadTask.isPaused)
- FlatButton(
- child: Icon(Icons.play_arrow),
- onPressed: _uploadTask.resume,
- ),
-
- if (_uploadTask.isInProgress)
- FlatButton(
- child: Icon(Icons.pause),
- onPressed: _uploadTask.pause,
- ),
-
- // Progress bar
- LinearProgressIndicator(value: progressPercent),
- Text(
- '${(progressPercent * 100).toStringAsFixed(2)} % '
- ),
- ],
- );
- });
-
-
- } else {
-
- // Allows user to decide when to start the upload
- return FlatButton.icon(
- label: Text('Upload to Firebase'),
- icon: Icon(Icons.cloud_upload),
- onPressed: _startUpload,
- );
-
- }
- }
-}
-{{< /highlight >}}
-
-
-
-{{< figure src="img/firebase-storage-file.png" caption="You should be able to view the end result in Firebase Cloud Storage when the upload is complete" >}}
-
-
-### Bonus Video
-
-{{< box icon="scroll" >}}
-In certain cases, you may want to convert an image to multiple formats after uploading. Watch the video below for a fill demo of this feature with Firebase Cloud Functions.
-{{< /box >}}
-
-{{< youtube OKW8x8-qYs0 >}}
\ No newline at end of file
diff --git a/hugo/content/lessons/flutter-firebase-google-oauth-firestore/index.md b/hugo/content/lessons/flutter-firebase-google-oauth-firestore/index.md
deleted file mode 100644
index dd6299349..000000000
--- a/hugo/content/lessons/flutter-firebase-google-oauth-firestore/index.md
+++ /dev/null
@@ -1,294 +0,0 @@
----
-title: Flutter Firebase Google SignIn + Firestore
-lastmod: 2019-01-14T07:43:54-07:00
-publishdate: 2019-01-14T07:43:54-07:00
-author: Jeff Delaney
-draft: false
-description: Learn how to Setup GoogleSign and Firestore with Flutter from Scratch
-tags:
- - flutter
- - firebase
- - auth
- - firestore
-
-youtube: cHFV6JPp-6A
-github: https://github.com/fireship-io/flutter-base
-
-versions:
- flutter: 1.0.0+1
- cloud_firestore: ^0.8.2+3
- firebase_auth: ^0.6.6
- google_sign_in: ^3.2.4
- rxdart: ^0.20.0
----
-
-The following lesson will show you how to implement [Google SignIn](https://pub.dartlang.org/packages/google_sign_in) with Flutter and Firebase, then update a custom user profile in Firestore. We will demonstrate several key concepts related to building reactive UIs with realtime streaming data, including
-
-- Global Streams and Observables with RxDart
-- StatefulWidget
-- StreamBuilder
-
-{{< figure src="img/flutterfire-oauth-demo.gif" alt="demo of Google auth on Flutter with Firestore" >}}
-
-
-## Step 0: Prerequisites
-
-1. {{< prereq "install-flutterfire" >}}
-
-## Step 1: Build Out the UI
-
-First, let's start with a basic UI. Notice we have placeholders for `LoginButton()` and `UserProfile()` - these will be created later in the lesson.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-import 'package:flutter/material.dart';
-import 'auth.dart';
-
-void main() => runApp(MyApp());
-
-class MyApp extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- title: 'FlutterBase',
- home: Scaffold(
- appBar: AppBar(
- title: Text('Flutterbase'),
- backgroundColor: Colors.amber,
- ),
- body: Center(
- child: Column(
- children: [
- LoginButton(), // <-- Built with StreamBuilder
- UserProfile() // <-- Built with StatefulWidget
- ],
- ),
- )
- )
- );
- }
-}
-
-{{< /highlight >}}
-
-
-## Step 2: Isolate the Authentication Logic
-
-Flutter is not opinionated about how you architect your app when it comes to shared global state. The most popular approaches include redux and inherited widgets, but they require a bit of work upfront tend to be burdensome when prototyping the UX. A simple approach to state management is to simply provide a global variable class instance that contains Streams and/or Rx Observables. This keeps auth logic out of widgets, while allowing any widget to listen/react to changes in the auth state.
-
-Here are a couple rules we will follow:
-
-1. Only use Observables/Streams for stateful data.
-2. AuthService class will only be instantiated once (although it's not technically a singleton in this case).
-
-Sound good? Create a new file called `lib/auth.dart`.
-
-### Create the AuthService Class
-
-Let's start by adding our Firebase dependencies to the class and fleshing out it's API.
-
-{{< box icon="scroll" class="box-blue" >}}
-The `_` prefix is used for property names to create private members in Dart. We will do this for the client libraries consumed by the class.
-{{< /box >}}
-
-The streams provided by Firebase are [broadcast](https://www.dartlang.org/articles/libraries/broadcast-streams) to multiple subscribers (this is called as a hot Observable in Rx). In this demo, the `user` is the authentication record, while the `profile` represents custom data that will be saved about this user in Firestore.
-
-Also, the `PublishSubject loading` is just like a hot observable, except values can be pushed to it manually. We will use it to toggle the loading state in our code.
-
-{{< file "dart" "auth.dart" >}}
-{{< highlight dart >}}
-import 'package:firebase_auth/firebase_auth.dart';
-import 'package:google_sign_in/google_sign_in.dart';
-import 'package:cloud_firestore/cloud_firestore.dart';
-import 'package:rxdart/rxdart.dart';
-
-class AuthService {
- // Dependencies
- final GoogleSignIn _googleSignIn = GoogleSignIn();
- final FirebaseAuth _auth = FirebaseAuth.instance;
- final Firestore _db = Firestore.instance;
-
- // Shared State for Widgets
- Observable user; // firebase user
- Observable> profile; // custom user data in Firestore
- PublishSubject loading = PublishSubject();
-
- // constructor
- AuthService() {
-
- }
-
- Future googleSignIn() async {
-
- }
-
- void updateUserData(FirebaseUser user) async {
-
-
- }
-
-
- void signOut() {
-
- }
-}
-
-final AuthService authService = AuthService();
-{{< /highlight >}}
-
-
-### Initialize Observables in the Constructor
-
-The state is initialized in the constructor of this class. The user is just an Observable wrapper over the Firebase `onAuthStateChanged` stream. This part is critical because we can then chain Rx operators for amazing control flow of the stream.
-
-In order to get the `profile` data from the database, we need to first retrieve logged-in user's uid - this is where RxDart starts to become awesome. The `switchMap` operator will take the user from the outer Observable, then use it to *switch* to another Observable of the Firestore database record. If the user is not logged in, we can just return an Observable of an empty Map.
-
-{{< file "dart" "auth.dart" >}}
-{{< highlight dart >}}
- AuthService() {
- user = Observable(_auth.onAuthStateChanged);
-
- profile = user.switchMap((FirebaseUser u) {
- if (u != null) {
- return _db
- .collection('users')
- .document(u.uid)
- .snapshots()
- .map((snap) => snap.data);
- } else {
- return Observable.just({});
- }
- });
- }
-{{< /highlight >}}
-
-### Implement SignIn & SignOut
-
-`SignIn` can be broken down into three async steps:
-
-1. Login with Google. This shows Google's native login screen and provides the `idToken` and `accessToken`.
-2. Login to Firebase. At this point, the user is logged into Google, but not Firebase. We can simply pass the tokens to Firebase to login.
-3. Update Firestore. At this point, we can update the database with any custom data we want to use in the UI.
-
-{{< highlight dart >}}
- Future googleSignIn() async {
- // Start
- loading.add(true);
-
- // Step 1
- GoogleSignInAccount googleUser = await _googleSignIn.signIn();
-
- // Step 2
- GoogleSignInAuthentication googleAuth = await googleUser.authentication;
- FirebaseUser user = await _auth.signInWithGoogle(
- accessToken: googleAuth.accessToken, idToken: googleAuth.idToken);
-
- // Step 3
- updateUserData(user);
-
- // Done
- loading.add(false);
- print("signed in " + user.displayName);
- return user;
- }
-
- void updateUserData(FirebaseUser user) async {
- DocumentReference ref = _db.collection('users').document(user.uid);
-
- return ref.setData({
- 'uid': user.uid,
- 'email': user.email,
- 'photoURL': user.photoUrl,
- 'displayName': user.displayName,
- 'lastSeen': DateTime.now()
- }, merge: true);
- }
-
- void signOut() {
- _auth.signOut();
- }
-
-
-{{< /highlight >}}
-
-## Step 3: StatefulWidget User Profile
-
-Now that our auth logic is in place, we have two options for rendering UI elements based on our Observable state - [StatefulWidget](https://docs.flutter.io/flutter/widgets/StatefulWidget-class.html) and [StreamBuilder](https://docs.flutter.io/flutter/widgets/StreamBuilder-class.html).
-
-Let's start by building a `StatefulWidget` that listens to the the `Observable profile` and displays its data in the UI. In this example, we are listening to the stream, then using the emitted values to call `setState` on widget, thus triggering a repaint.
-
-{{< box icon="scroll" class="box-blue" >}}
-Only use `setState` to change properties on the widget and do all the computation elsewhere. Also, your state must be initialized, which is why the subscriptions are created in the `initState` lifecycle hook.
-{{< /box >}}
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class UserProfile extends StatefulWidget {
- @override
- UserProfileState createState() => UserProfileState();
-}
-
-class UserProfileState extends State {
- Map _profile;
- bool _loading = false;
-
- @override
- initState() {
- super.initState();
-
- // Subscriptions are created here
- authService.profile.listen((state) => setState(() => _profile = state));
-
- authService.loading.listen((state) => setState(() => _loading = state));
- }
-
- @override
- Widget build(BuildContext context) {
- return Column(children: [
- Container(padding: EdgeInsets.all(20), child: Text(_profile.toString())),
- Text(_loading.toString())
- ]);
- }
-}
-
-{{< /highlight >}}
-
-## Step 4: StreamBuilder Login Button
-
-The `StatefulWidget` is fine, but it contains a decent amount of boilerplate and in most cases I find `StreamBuilder` to be more flexible and concise. It is just a widget that depends on the value of a stream, so when the value of the stream changes you can conditionally render different widgets.
-
-This is a perfect use-case the login button. For example, we don't want to show *SignIn with Google* in the UI if the user is already logged in.
-
-`StreamBuilder` takes our `Observable user` as the stream, then we implement a builder function that returns some UI widgets. The `snapshot` is the data emitted by the stream/observable. In our case, we know the user is logged in if `snapshot.hasData == true`
-
-
-{{< highlight dart >}}
-class LoginButton extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return StreamBuilder(
- stream: authService.user,
- builder: (context, snapshot) {
- if (snapshot.hasData) {
- return MaterialButton(
- onPressed: () => authService.signOut(),
- color: Colors.red,
- textColor: Colors.white,
- child: Text('Signout'),
- );
- } else {
- return MaterialButton(
- onPressed: () => authService.googleSignIn(),
- color: Colors.white,
- textColor: Colors.black,
- child: Text('Login with Google'),
- );
- }
- });
- }
-}
-{{< /highlight >}}
-
-## The End
-
-You now have a reliable way to share and observe user data in your Flutter app. You might improve this code by implementing the AuthService as an InheritedWidget so it can be scoped to specific places in the widget tree.
\ No newline at end of file
diff --git a/hugo/content/lessons/flutter-for-js-developers/index.md b/hugo/content/lessons/flutter-for-js-developers/index.md
deleted file mode 100644
index b2ee6fbfb..000000000
--- a/hugo/content/lessons/flutter-for-js-developers/index.md
+++ /dev/null
@@ -1,419 +0,0 @@
----
-title: Flutter for JavaScript Developers
-lastmod: 2019-01-20T12:28:17-07:00
-publishdate: 2019-01-20T12:28:17-07:00
-author: Jeff Delaney
-draft: false
-description: A guide to Dart and Flutter for JavaScript Developers who have experience with React Native and Ionic
-tags:
- - dart
- - flutter
- - javascript
- - typescript
-
-youtube: 7sJZi0grFR4
-github: https://gist.github.com/codediodeio/8d59623a3ccac79e9168122b21c4a766
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-versions:
- flutter: 1.0
- dart: 2
----
-
-So you're a web developer working with JavaScript and curious about [Flutter](https://flutter.io/docs/get-started/flutter-for/web-devs)? That was me about one-year ago, and at the time, learning an uncommon language like Dart seemed ridiculous because there are existing hybrid app frameworks in JS. Then I tried it... To my surprise, I was able to write productive code right out of the gate. The following lesson will compare Dart/Flutter to JS/ReactNative.
-
-{{< figure src="img/js-dart-reddit.png" alt="Post comparing Dart and JS from reddit" >}}
-Source: [FlutterDev subreddit](https://www.reddit.com/r/FlutterDev/comments/92d995/what_do_you_like_or_not_like_about_the_dart/)
-
-
-{{< box icon="scroll" class="" >}}
-Throughout this lesson, you will see the 👉 emoji. Dart will always be on the left, and JS on the right. These are not always perfect 1-to-1 comparisons, but you get the idea.
-{{< /box >}}
-
-## The Tradeoffs
-
-> There are no solutions; there are only trade-offs. - Thomas Sowell
-
-### Flutter is awesome 🐦🤟 because it...
-
-- has amazing docs & tooling
-- performs faster because it has no JavaScript bridge
-- can integrate native code
-- hot reloads
-- small code footprint and no import/export/bundling headaches
-- it positions you for future development with [Fuchsia](https://en.wikipedia.org/wiki/Google_Fuchsia)
-
-### Flutter is meh 😒 because it...
-
-- has a steeper learning curve with Dart
-- cannot be debugged in the browser
-- has a small ecosystem of developers and plugins relative to JS
-
-## Dart vs JS - Syntax
-
-Dart is a strongly-typed compiled language, while JS is a weakly-typed scripting language. Despite being polar opposites in these ways, they share many of the same convetions, so most JS devs will be productive on day one.
-
-{{< box icon="dart" class="box-green" >}}
-Want to write some Dart code right now? Head over to the [DartPad](https://dartpad.dartlang.org/) playground.
-{{< /box >}}
-
-### Variables
-
-- `SomeType foo;` 👉 `let foo`
-- `final` 👉 `const`
-- `const` 👉 `Object.freeze(obj)`
-
-
-
-{{< file "typescript" "index.ts" >}} {{< highlight typescript >}}
-// Reassignable variables
-let person: string;
-person = 'jeff';
-person = 'bob';
-
-// Single assignment variables
-const lucky: number = 23;
-
-// Implicit
-const implicit = { name: 'Jeff' };
-
-// Any
-const whoKnows: any = getSomethingDynamic();
-{{< /highlight >}}
-
-{{< file "dart" "main.dart" >}} {{< highlight dart >}}
-// Reassignable variables
-String person;
-person = 'Jeff';
-person = 'Bob';
-
-// Single Assignment
-final int lucky = 23;
-
-// Single Assignment & Immutable
-const Map person = 'Jeff';
-
-// Implicit
-var implicit = { 'name': 'Jeff' }; // Map
-
-// Any type
-dynamic whoKnows = getSomethingDynamic();
-{{< /highlight >}}
-
-### Imports/Exports
-
-In JS, you have several ways to import/export values, so let's just look at the modern ES6 way.
-
-
-{{< file "typescript" "globals.ts" >}} {{< highlight typescript >}}
-export default const = 'JS';
-// or
-export const lang = 'JS';
-{{< /highlight >}}
-
-{{< file "typescript" "index.ts" >}} {{< highlight typescript >}}
-import lang from 'globals';
-// or
-import { lang } from 'globals';
-{{< /highlight >}}
-
-When you import a file in Dart, you will have access to everything declared that file. It looks trivial here, but it eliminates the **import hell 😠** that you find in basically every big JS project.
-
-{{< file "dart" "globals.dart" >}} {{< highlight dart >}}
-final String lang = 'Dart!';
-{{< /highlight >}}
-
-{{< file "dart" "main.dart" >}} {{< highlight dart >}}
-import 'globals.dart';
-
-main() {
- print(lang)
-}
-{{< /highlight >}}
-
-### Logging
-
-{{< file "typescript" "index.ts" >}} {{< highlight typescript >}}
-console.log('howdy!');
-{{< /highlight >}}
-
-{{< file "dart" "main.dart" >}} {{< highlight dart >}}
-print('howdy!');
-{{< /highlight >}}
-
-### Entry Point
-
-JS doesn't have a required entry point to start executing our code, but it's common to export a function.
-
-{{< file "typescript" "index.ts" >}} {{< highlight typescript >}}
-export const app = () => {
- // init app
-};
-
-app();
-{{< /highlight >}}
-
-In dart, a main function is required.
-
-{{< file "dart" "main.dart" >}} {{< highlight dart >}}
-main() {
-
-}
-{{< /highlight >}}
-
-### Maps and Objects
-
-- Map 👉 cross between Object and Map
-
-Dart has a [Map](https://www.dartlang.org/guides/language/language-tour#maps) class used to represent key-value pairs. It combines some of the features from in the JS `Object` & `Map`.
-
-{{< file "typescript" "index.ts" >}} {{< highlight typescript >}}
-const state = { lucky: 23 }
-state['unlucky'] = 11;
-
-const state = new Map([['lucky', 23]]);
-state.set('unlucky', 11);
-{{< /highlight >}}
-
-{{< file "dart" "main.dart" >}} {{< highlight dart >}}
-Map state = { 'lucky': 23 };
-state['unlucky'] = 11;
-{{< /highlight >}}
-
-### Lists and Arrays
-
-- List 👉 Array
-
-A Dart [List](https://www.dartlang.org/guides/language/language-tour#lists) is similar to a JS Array, containing most of the same instance and class methods (and beyond).
-
-{{< file "typescript" "index.ts" >}} {{< highlight typescript >}}
-const things: number[] = [1, 2, 3]
-{{< /highlight >}}
-
-{{< file "dart" "main.dart" >}} {{< highlight dart >}}
-List things = [1, 2, 3];
-
-things.forEach()
-things.reduce()
-things.last;
-{{< /highlight >}}
-
-
-### Functions
-
-Functions in Dart should feel very familiar to the JS dev - it supports named, anonymous, arrow, and higher-order functions. The main difference is that you don't need the `function` keyword.
-
-{{< file "typescript" "index.ts" >}} {{< highlight typescript >}}
-function addOne(val: number) {
- return val + 1;
-}
-
-// Higher Order
-function callme(cb: Function) {
- return cb('Hello?');
-}
-
-callme((v) => console.log(v));
-{{< /highlight >}}
-
-{{< file "dart" "main.dart" >}} {{< highlight dart >}}
-addOne(int val) {
- return val + 1;
-}
-
-// Higher Order
-callme(Function cb) {
- return cb('Hello?');
-}
-
-callme((v) => print(v));
-{{< /highlight >}}
-
-### Classes
-
-You will be using [Classes](https://www.dartlang.org/guides/language/language-tour#classes) frequently in Dart and they are very powerful. The language supports **mixin-based inheritance**, which provides excellent code reuse with [composition](https://en.wikipedia.org/wiki/Composition_over_inheritance). In JS, classes are just syntatic sugar for functions and prototypal inheritance.
-
-
-{{< file "typescript" "index.ts" >}} {{< highlight typescript >}}
-export const main = () => {
- const myComponent = new Component()
-}
-
-class Component { }
-{{< /highlight >}}
-
-Defining and instantiating a class is nearly identical, but Dart does not require the `new` keyword.
-
-{{< file "dart" "main.dart" >}} {{< highlight dart >}}
-main() {
- var myWidget = Widget();
-}
-
-class Widget { }
-{{< /highlight >}}
-
-### Class Constructors
-
-In Dart, you can construct a class by calling its name like a Function. In addition, you can use **named constructors** to instantiate the same with different logic.
-
-{{< file "typescript" "index.ts" >}} {{< highlight typescript >}}
-export const main = () => {
- const bar = new Component(1,2);
-}
-
-class Component {
- constructor(private a, public b) {
- // non-ts version
- // this.a = a
- // this.b = b
- }
-}
-{{< /highlight >}}
-
-{{< box icon="scroll" class="box-blue" >}}
-Starting any variable or property with `_` in Dart will make it private to its library or class.
-{{< /box >}}
-
-{{< file "dart" "main.dart" >}} {{< highlight dart >}}
-main() {
- Widget foo = Widget.withStrings('1', '2');
-}
-
-class Widget {
-
- // Default Constructor
- Widget(_a, b);
-
- // Named Constructor
- Widget.withStrings(_a, b);
-
-}
-{{< /highlight >}}
-
-## Async Programming
-
-
-### Futures and Promises
-
-- Future 👉 Promise
-
-A Dart `Future` is almost identical to a JS `Promise`, which is really nice because this is one of the more complex concepts master.
-
-{{< file "typescript" "index.ts" >}} {{< highlight typescript >}}
-async function howdy() {
- return 'partner 🤠';
-}
-
-async function greet() {
- await howdy();
-}
-
-greet().then(console.log).catch()
-{{< /highlight >}}
-
-{{< file "dart" "main.dart" >}} {{< highlight dart >}}
-Future howdy() async {
- return 'partner 🤠';
-}
-
-greet() async {
- await howdy();
-}
-
-greet().then(print).catchError();
-{{< /highlight >}}
-
-### Streams and Observables
-
-- Stream 👉 Observable
-
-JavaScript does not have a *native* stream-like data structure [yet](https://github.com/tc39/proposal-observable), but they are commonly provided via supporting packages like RxJS, Mobx, and others. A stream is similar to a Promise (Future), except that is
-
-A `Stream` is like a Future that emits multiple values over time and we can even use it with async/await 😍.
-
-{{< file "dart" "main.dart" >}} {{< highlight dart >}}
-main() async {
-
- var items = Stream.fromIterable([1,2,3]);
-
- await for (int i in items) {
- // do something
- }
-
- // Or setup a listener
- items.listen(print);
-}
-{{< /highlight >}}
-
-There is one big concept to keep in mind, single subscription streams (default) will throw an error if multiple subscribers try to listen.
-
-- Single-subscription streams 👉 Cold observable
-- Broadcast streams 👉 Hot Observable
-
-Even though streams are available in Dart, I often find myself using [RxDart](https://pub.dartlang.org/packages/rxdart) in Flutter. The beauty of RxDart is that it builds on top of streams, rather than try to reinvent the wheel, so anything that uses a stream in Flutter can also use an Rx observable. Also, if you're coming from the Angular world you can keep the operators you know and love like `switchMap`, `takeUntil`, `scan`, and so on.
-
-
-## Flutter vs Frameworks
-
-Flutter is inspired by JavaScript frameworks like React/Angular/Vue that enable components to reactively update the UI when data changes. In fact, Flutter provides a `setState` method that works exactly like it does in [ReactJS](https://reactjs.org/docs/react-component.html#setstate).
-
-Overall, it is not very opinionated about how architect the app. You can use composition to build a bunch of tiny widgets in their own files, or create a few big widgets in a single file.
-
-### Dependency Management
-
-- pubspec.yaml 👉 package.json
-- [Pub](https://pub.dartlang.org/) 👉 [NPM](https://www.npmjs.com/)
-
-Dependencies are registered in the **pubspec.yaml** and should auto-update on save.
-
-### Widgets and Components
-
-- Widget 👉 Component
-- `build` 👉 `render`
-
-As you may have guessed, Flutter has components similar to those in React, with a build method that can be called when state changes.
-
-{{< file "typescript" "index.ts" >}} {{< highlight typescript >}}
-import React from 'react';
-import { StyleSheet, Text, View } from 'react-native';
-
-export default class MyApp extends React.Component {
- render() {
- return (
-
- Hello world!
-
- );
- }
-}
-{{< /highlight >}}
-
-
-{{< file "dart" "main.dart" >}} {{< highlight dart >}}
-import 'package:flutter/material.dart';
-
-void main() => runApp(MyApp());
-
-class MyApp extends StatelessWidget {
- @override
- build(context) {
- return Center(
- child: Text('Hello World'),
- );
- }
-}
-{{< /highlight >}}
-
-### Full React Native Comparison
-
-Let's go ahead and recreate this [styled component](https://facebook.github.io/react-native/docs/state) from the react native docs. You'll notice the Flutter version on the left has about 65% of the code footprint, with a guarantee of type-safety. Also see the [other examples in this gist](https://gist.github.com/codediodeio/8d59623a3ccac79e9168122b21c4a766).
-
-{{< figure src="img/flutter-v-react-styles.png" alt="comparison of code footprint between react native and flutter" >}}
-
-Flutter provides several ways to manage component state. You can use `setState` just like React does, but there are some additional built-in techniques. My personal favorite is to represent stateful data as a `Stream` or Rx `Observable`, then use the `StreamBuilder` widget to conditionally paint the UI. As you can see, this does not require any explicit calls to render the UI, rather it's based on the most recent value emitted from the stream. The code footprint is improved slightly, but this gains really add up if you find yourself setting the state frequently.
-
-{{< figure src="img/state-flutter-v-react.png" alt="comparison of code footprint between react native and flutter for managing component state" >}}
diff --git a/hugo/content/lessons/flutter-inapp-purchases/index.md b/hugo/content/lessons/flutter-inapp-purchases/index.md
deleted file mode 100644
index 7450de44c..000000000
--- a/hugo/content/lessons/flutter-inapp-purchases/index.md
+++ /dev/null
@@ -1,383 +0,0 @@
----
-title: In App Purchases in Flutter
-lastmod: 2019-06-25T06:14:51-07:00
-publishdate: 2019-06-25T06:14:51-07:00
-author: Jeff Delaney
-draft: false
-description: Accept In App Purchases and microtransactions in Flutter for digital products on the Apple App Store and Google Play Store.
-tags:
- - flutter
- - payments
- - ios
- - android
-
-youtube: NWbkKH-2xcQ
-# github:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-versions:
- in_app_purchase: 0.2.0+1
----
-
-
-Flutter recently launched official support for In App Purchases (IAP) and provides a unified plugin for both iOS and Android. Native mobile apps that collect payments for digital goods on the Apple App Store and/or Google Play Store are typically required to use the [In App Purchases](https://developer.apple.com/in-app-purchase/) API, which means services like Stripe and Paypal are out of the question (with the exception of payments for physically shipped goods). In reality, In App Purchases are far more lucrative for digital products, with the game Candy Crush generating [$4MM in revenue per day in 2018](https://venturebeat.com/2019/01/09/sensor-tower-candy-crush-players-spent-an-average-of-4-2-million-a-day-in-2018/). The following lesson will show you how to get started with the [in_app_purchase](https://github.com/flutter/plugins/tree/master/packages/in_app_purchase) plugin to accept payments, microtransactions, and subscriptions from both stores.
-
-{{< figure src="img/in-app-purchases-demo.gif" caption="Demo of a consumable In App Purchase in Flutter on the Google Play Store" >}}
-
-### Product Types
-
-In App Purchases between Apple and Google are nearly identical, but you will find some minor differences in the code. This tutorial uses a managed *consumable* product, which represents an item that can be purchased multiple times, like the useless gems/coins/tokens 💎 you can buy in many mobile games.
-
-- *Managed (consumable)*. Multi-purchase consumable, can be depleted and repurchased.
-- *Managed (non-consumable)*. One-time permanently owned product or upgrade.
-- *Subscription*. Product with recurring payments at specific intervals.
-- *Reward (Android)*. Provide reward for the user for watching an advertisement via AdMob. Mostly used in games.
-
-## Android Setup
-
-The Play Store [Billing](https://developer.android.com/google/play/billing/billing_overview) API will not work until you have at least an Alpha release track. If you do not have an existing app, check off the items below before proceeding further.
-
-
-✔️ Register your app and package ID (i.e com.fireship.myapp) in the [Google Play Console](https://developer.android.com/distribute/console).
-
-✔️ Follow the steps to create a [signed release APK](https://flutter.dev/docs/deployment/android). Or watch the [Android Flutter Deployment video](/courses/flutter-firebase/release-android/) 🎥.
-
-✔️ Upload the signed APK to Google Play and release it under the Alpha channel. Add testers to the track.
-
-### Add a Managed Product
-
-{{< figure src="img/google-play-product.png" caption="Setup a merchant account and create a managed product" >}}
-
-
-## Apple App Store Setup
-
-The setup for iOS is similar and requires an existing Apple developer account.
-
-✔️ Release your app and package ID (i.e com.fireship.myapp) to [App Store Connect](https://appstoreconnect.apple.com/).
-
-✔️ Follow the steps to create an [iOS release](https://flutter.dev/docs/deployment/ios). Or watch the [iOS Flutter Deployment video](/courses/flutter-firebase/release-ios/) 🎥.
-
-### Enable IAP Capability in XCode
-
-You can enable In App Purchases in Xcode by selecting the build target and flipping the switch under the capabilities tab.
-
-{{< figure src="img/xcode-enable-in-app-purchases.png" caption="Enable In App Purchases in Xcode" >}}
-
-### App Store Connect Products
-
-Create a consumable product in Xcode. Make sure to keep the "product ID" consistent between the App Store and Play Store.
-
-{{< figure src="img/app-store-connect-iap.png" caption="Create a product on App Store Connect" >}}
-
-
-## Flutter In App Purchases Demo
-
-The code below demonstrates how to implement a single *consumable* product. First, add the plugin to your dependencies.
-
-{{< file "flutter" "pubspec.yaml" >}}
-{{< highlight yaml >}}
-dependencies:
- flutter:
- sdk: flutter
-
- in_app_purchase: 0.2.0+1
-{{< /highlight >}}
-
-
-
-### In App Purchases Widget Overview
-
-Let's start by creating a StatefulWidget with an abstract representation of the data we'll need to manage for In App Purchases. This widget handles the entire IAP flow, including the retrieval of products/purchases and the facilitation of new purchases.
-
-{{< box icon="scroll" >}}
-The code notes below marked `TODO` are recommendations that you should implement based on your backend setup. For example, you may want to save the the state of a consumable purchase in a database.
-{{< /box >}}
-
-
-{{< file "dart" "purchase.dart" >}}
-{{< highlight dart >}}
-import 'dart:async';
-import 'dart:io';
-import 'package:flutter/material.dart';
-import 'package:in_app_purchase/in_app_purchase.dart';
-
-final String testID = 'gems_test';
-
-class MarketScreen extends StatefulWidget {
- createState() => MarketScreenState();
-}
-
-class MarketScreenState extends State {
-
- /// Is the API available on the device
- bool available = true;
-
- /// The In App Purchase plugin
- InAppPurchaseConnection _iap = InAppPurchaseConnection.instance;
-
- /// Products for sale
- List _products = [];
-
- /// Past purchases
- List _purchases = [];
-
- /// Updates to purchases
- StreamSubscription _subscription;
-
- /// Consumable credits the user can buy
- int credits = 0;
-
- @override
- void initState() {
- _initialize();
- super.initState();
- }
-
- @override
- void dispose() {
- _subscription.cancel();
- super.dispose();
- }
-
- /// Initialize data
- void _initialize() async {
-
- }
-
-
- @override
- Widget build(BuildContext context) {
-
- return Scaffold(
- appBar: AppBar(
- title: Text(available ? 'Open for Business' : 'Not Available'),
- ),
- body: Center(
- child: Column(
- children: [
- for (var prod in _products)
-
- // UI if already purchased
- if (_hasPurchased(prod.id) != null)
- ...[
-
- ]
-
- // UI if NOT purchased
- else ...[
-
- ]
- ],
- ),
- ),
- );
- }
-
-
- // Private methods go here
-
-}
-
-{{< /highlight >}}
-
-
-### Step 1 - Get Products and Past Purchases
-
-When the app is first initialized you must complete the following tasks:
-
-1. Fetch products.
-1. Fetch past purchases.
-1. Determine if the user has already purchased certain items and deliver them in the app.
-
-In the case of consumable products, you will also likely need to query your own database for the current state of the product, such as the "user's remaining gems".
-
-{{< file "dart" "purchases.dart" >}}
-{{< highlight dart >}}
-
- /// Initialize data
- void _initialize() async {
-
- // Check availability of In App Purchases
- _available = await _iap.isAvailable();
-
- if (_available) {
-
- await _getProducts();
- await _getPastPurchases();
-
- // Verify and deliver a purchase with your own business logic
- _verifyPurchase();
-
- }
- }
-
-
-
- /// Get all products available for sale
- Future _getProducts() async {
- Set ids = Set.from([testID, 'test_a']);
- ProductDetailsResponse response = await _iap.queryProductDetails(ids);
-
- setState(() {
- _products = response.productDetails;
- });
- }
-
- /// Gets past purchases
- Future _getPastPurchases() async {
- QueryPurchaseDetailsResponse response =
- await _iap.queryPastPurchases();
-
- for (PurchaseDetails purchase in response.pastPurchases) {
- final pending = Platform.isIOS
- ? purchaseDetails.pendingCompletePurchase
- : !purchaseDetails.billingClientPurchase.isAcknowledged;
-
- if (pending) {
- InAppPurchaseConnection.instance.completePurchase(purchase);
- }
- }
-
- setState(() {
- _purchases = response.pastPurchases;
- });
- }
-
- /// Returns purchase of specific product ID
- PurchaseDetails _hasPurchased(String productID) {
- return _purchases.firstWhere( (purchase) => purchase.productID == productID, orElse: () => null);
- }
-
- /// Your own business logic to setup a consumable
- void _verifyPurchase() {
- PurchaseDetails purchase = _hasPurchased(testID);
-
- // TODO serverside verification & record consumable in the database
-
- if (purchase != null && purchase.status == PurchaseStatus.purchased) {
- _credits = 10;
- }
- }
-
-
-
-{{< /highlight >}}
-
-### Step 2 - Handle New Purchases
-
-1. Allow the user to make a new purchase.
-1. Listen to a Stream that emits new purchases.
-
-By default the plugin will automatically mark the product as consumed, but you can override this behavior with the `autoConsume` argument. If you set it to false, you must manually mark the product as consumed to enable another purchase (Android only).
-
-The stream only emits the latest purchase as a List, so make sure to merge the emitted value into `_purchases` and not overwrite the existing list.
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-
- void _initialize() async {
-
- // ... omitted
-
-
- // Listen to new purchases
- _subscription = _iap.purchaseUpdatedStream.listen((data) => setState(() {
- print('NEW PURCHASE');
- _purchases.addAll(data);
- _verifyPurchase();
- }));
- }
-
- /// Purchase a product
- void _buyProduct(ProductDetails prod) {
- final PurchaseParam purchaseParam = PurchaseParam(productDetails: prod);
- // _iap.buyNonConsumable(purchaseParam: purchaseParam);
- _iap.buyConsumable(purchaseParam: purchaseParam, autoConsume: false);
- }
-
-
-{{< /highlight >}}
-
-### Step 3 - Consume the Product
-
-If you are selling one-time upgrade purchase you're done at this point. However, we turned autoConsume off in the previous step, so the product can only be repurchased the purchase has been marked as consumed.
-
-Keep in mind, you should also save the state of the consumable product on your backend database. It cannot be retrieved after the widget is destroyed.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
- /// Spend credits and consume purchase when they run pit
- void _spendCredits(PurchaseDetails purchase) async {
-
- /// Decrement credits
- setState(() { _credits--; });
-
- /// TODO update the state of the consumable to a backend database
-
- // Mark consumed when credits run out
- if (_credits == 0) {
- var res = await _iap.consumePurchase(purchase);
- await _getPastPurchases();
- }
-
- }
-{{< /highlight >}}
-
-### Step 4 - The UI
-
-The build method implements a bare minimum UI that loops over each product and provides buttons to buy and consume them.
-
-
-{{< highlight dart >}}
- @override
- Widget build(BuildContext context) {
-
- return Scaffold(
- appBar: AppBar(
- title: Text(available ? 'Open for Business' : 'Not Available'),
-
- ),
- body: Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- for (var prod in _products)
-
- // UI if already purchased
- if (_hasPurchased(prod.id) != null)
- ...[
- Text('💎 $credits', style: TextStyle(fontSize: 60)),
- FlatButton(
- child: Text('Consume'),
- color: Colors.green,
- onPressed: () => _spendCredits(_hasPurchased(prod.id)),
- )
- ]
-
- // UI if NOT purchased
- else ...[
- Text(prod.title, style: Theme.of(context).textTheme.headline),
- Text(prod.description),
- Text(prod.price,
- style: TextStyle(color: Colors.greenAccent, fontSize: 60)),
- FlatButton(
- child: Text('Buy It'),
- color: Colors.green,
- onPressed: () => _buyProduct(prod),
- ),
- ]
- ],
- ),
- ),
- );
- }
-{{< /highlight >}}
-
-
-
-
diff --git a/hugo/content/lessons/flutter-ipod/index.md b/hugo/content/lessons/flutter-ipod/index.md
deleted file mode 100644
index e4143d324..000000000
--- a/hugo/content/lessons/flutter-ipod/index.md
+++ /dev/null
@@ -1,277 +0,0 @@
----
-title: Build the Classic iPod UI in Flutter
-publishdate: 2019-12-01T09:12:43-07:00
-lastmod: 2019-12-02T09:12:43-07:00
-author: Jeff Delaney
-draft: false
-description: Build a throwback iPod UI with a click wheel scroller using Flutter.
-tags:
- - flutter
-
-youtube: A8dvbFby-s0
-github: https://github.com/fireship-io/216-flutter-ipod
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-An awesome [tweet](https://t.co/zVk5YJj0rh) was making the rounds last week that recreates the [iPod Classic](https://en.wikipedia.org/wiki/IPod_Classic) UI with SwiftUI. It features a *click wheel* that scrolls through a list of items when rotated and makes a excellent Flutter UI challenge.
-
-
-
-
-
-Creating an animated scrolling list with Flutter is a piece of cake, but calculating scroll direction/velocity from the pan events on the wheel is a bigger challenge. The following lesson demonstrates how to build UI elements with Flutter inspired by the iPod Classic.
-
-{{< box icon="bird" class="box" >}}
-Checkout this [rotational pan widget](/snippets/circular-drag-flutter) snippet if you're looking for a Flutter widget that is aware of clockwise rotation, like a knob or radial dial.
-{{< /box >}}
-
-
-## Demo
-
-Notice how the user has three different ways to change the scroll position.
-
-1. Drag the PageView.
-2. Tap the `>>` or `<<` icon buttons on the wheel.
-3. Pan the wheel clockwise or counterclockwise.
-
-{{< vimeo 376306674 >}}
-
-## Page View
-
-The album covers are scrolled in a [PageView](https://api.flutter.dev/flutter/widgets/PageView-class.html) widget. Watch the video below for a quick introduction.
-
-
-{{< youtube J1gE9xvph-A >}}
-
-
-### Controller
-
-The control provides information about the current scroll position, as well as methods to change its position. We use a listener to react to every position change that occurs in the PageView.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class IPod extends StatefulWidget {
- IPod({Key key}) : super(key: key);
-
- @override
- _IPodState createState() => _IPodState();
-}
-
-class _IPodState extends State {
- final PageController _pageCtrl = PageController(viewportFraction: 0.6);
-
- double currentPage = 0.0;
-
- @override
- void initState() {
- _pageCtrl.addListener(() {
- setState(() {
- currentPage = _pageCtrl.page;
- });
- });
- super.initState();
- }
-}
-{{< /highlight >}}
-
-### Horizonal Scrolling Album Covers
-
-The `PageView.builder` creates a view that only builds the children when they are visible, similar to virtual scrolling on the web.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
- @override
- Widget build(BuildContext context) {
- return SafeArea(
- child: Column(
- children: [
- Container(
- height: 300,
- color: Colors.black,
- child: PageView.builder(
- controller: _pageCtrl,
- scrollDirection: Axis.horizontal,
- itemCount: 9, //Colors.accents.length,
- itemBuilder: (context, int currentIdx) {
- return AlbumCard(
- color: Colors.accents[currentIdx],
- idx: currentIdx,
- currentPage: currentPage,
- );
- },
- ),
- ),
- ]
- )
- )
- }
-{{< /highlight >}}
-
-### 3D Transform
-
-The builder for the PageView references a custom widget named `AlbumCard`. It represents the UI for a single page or item in the list.
-
-The albums off center should be scaled down slightly and tilted along the y-axis. We can make that happen with a Transform widget that sets perspective on a 4x4 matrix. Learn more about transforms by watching the video below:
-
-
-{{< youtube 9z_YNlRlWfA >}}
-
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class AlbumCard extends StatelessWidget {
- final Color color;
- final int idx;
- final double currentPage;
- AlbumCard({this.color, this.idx, this.currentPage});
-
- @override
- Widget build(BuildContext context) {
- double relativePosition = idx - currentPage;
-
- return Container(
- width: 250,
- child: Transform(
- transform: Matrix4.identity()
- ..setEntry(3, 2, 0.003) // add perspective
- ..scale((1 - relativePosition.abs()).clamp(0.2, 0.6) + 0.4)
- ..rotateY(relativePosition),
- // ..rotateZ(relativePosition),
- alignment: relativePosition >= 0
- ? Alignment.centerLeft
- : Alignment.centerRight,
- child: Container(
- margin: EdgeInsets.only(top: 20, bottom: 20, left: 5, right: 5),
- padding: EdgeInsets.all(10),
- decoration: BoxDecoration(
- borderRadius: BorderRadius.circular(12),
- color: color,
- image: DecorationImage(
- fit: BoxFit.cover,
- image: NetworkImage(images[idx]),
- ),
- ),
- ),
- ),
- );
- }
-}
-
-{{< /highlight >}}
-
-
-## Click Wheel
-
-The most difficult aspect of this demo is building a circular shape that controls the PageView. While the user drags clockwise it should scroll the view to the right, or to the left when dragged counterclockwise. It must also have buttons that can animate between individual items.
-
-### Doughnut-shaped Gesture Detector
-
-The GestureDetector should only fire events when the outer ring or doughnut is panned across. Placing the widgets in a [Stack](/courses/flutter-firebase/widgets-stack/) allow a smaller circle to be placed on top, which blocks the detection of events in this areas.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-// Add this to the Column list
-Center(
- child: Stack(
- alignment: Alignment.center,
- children: [
- GestureDetector(
- onPanUpdate: _panHandler, // Not implemented yet, see next steps
- child: Container(
- height: 300,
- width: 300,
- decoration: BoxDecoration(
- shape: BoxShape.circle,
- color: Colors.black,
- ),
- ),
- ),
- Container(
- height: 100,
- width: 100,
- decoration: BoxDecoration(
- shape: BoxShape.circle,
- color: Colors.white38,
- ),
- ),
- ]),
-),
-{{< /highlight >}}
-
-### Add Buttons to the Wheel
-
-The code below represents a single click button in the wheel. Reference the full [source code](https://github.com/fireship-io/216-flutter-ipod/blob/master/lib/main.dart) to see them all.
-
-Notice how it uses the PageController to animate to a new position on a button press event.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
- Container(
- child: IconButton(
- icon: Icon(Icons.fast_forward),
- iconSize: 40,
- onPressed: () => _pageCtrl.animateToPage(
- (_pageCtrl.page + 1).toInt(),
- duration: Duration(milliseconds: 300),
- curve: Curves.easeIn
- ),
- ),
- alignment: Alignment.centerRight,
- margin: EdgeInsets.only(right: 30),
- ),
-{{< /highlight >}}
-
-
-### Handle Rotational Pan Movement
-
-Building a rotation-aware widget requires some calculations. Checkout the [draggable rotating wheel in Flutter](/snippets/circular-drag-flutter) snippet for a more detailed explanation of these calculations. Basically, this gives us a way to detect clockwise or counter-clockwise movement.
-
-{{< vimeo 376862979 >}}
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
- void _panHandler(DragUpdateDetails d) {
-
- double radius = 150;
-
- /// Pan location on the wheel
- bool onTop = d.localPosition.dy <= radius;
- bool onLeftSide = d.localPosition.dx <= radius;
- bool onRightSide = !onLeftSide;
- bool onBottom = !onTop;
-
- /// Pan movements
- bool panUp = d.delta.dy <= 0.0;
- bool panLeft = d.delta.dx <= 0.0;
- bool panRight = !panLeft;
- bool panDown = !panUp;
-
- /// Absoulte change on axis
- double yChange = d.delta.dy.abs();
- double xChange = d.delta.dx.abs();
-
- /// Directional change on wheel
- double verticalRotation = (onRightSide && panDown) || (onLeftSide && panUp)
- ? yChange
- : yChange * -1;
-
- double horizontalRotation = (onTop && panRight) || (onBottom && panLeft)
- ? xChange
- : xChange * -1;
-
- // Total computed change
- double rotationalChange = (verticalRotation + horizontalRotation) * (d.delta.distance * 0.2);
-
-
- // Move the page view scroller
- _pageCtrl.jumpTo(_pageCtrl.offset + rotationalChange);
- }
-{{< /highlight >}}
\ No newline at end of file
diff --git a/hugo/content/lessons/flutter-push-notifications-fcm-guide/index.md b/hugo/content/lessons/flutter-push-notifications-fcm-guide/index.md
deleted file mode 100644
index cd0340a68..000000000
--- a/hugo/content/lessons/flutter-push-notifications-fcm-guide/index.md
+++ /dev/null
@@ -1,343 +0,0 @@
----
-title: FCM Push Notifications for Flutter
-lastmod: 2019-06-11T06:37:28-07:00
-publishdate: 2019-06-11T06:37:28-07:00
-author: Jeff Delaney
-draft: false
-description: Send push notifications in Flutter using Firebase Cloud Messaging (FCM) to specific devices, topics, and user segments.
-tags:
- - flutter
- - firebase
- - push-notifications
- - cloud-functions
-
-youtube: 2TSm2YGBT1s
-github: https://github.com/fireship-io/192-flutter-fcm-push-notifications
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-When used correctly, push notifications can be an excellent way to drive user engagement and keep your app in focus on a consistent basis. When used incorrectly, they can be annoying and motivate users to simply uninstall your app and never look back. Fortunately, [Firebase Cloud Messaging](https://firebase.google.com/docs/cloud-messaging) (FCM) provides a sophisticated set of tools to send notifications only to users who actually want them. The following lesson will teach you how to configure [FCM in Flutter](https://github.com/flutter/plugins/tree/master/packages/firebase_messaging) to broadcast both Topic-based, Device-based, and Segment-based push notifications.
-
-Before getting started, it is important to understand that there are three types of [FCM push notifications](https://firebase.google.com/docs/cloud-messaging/concept-options) you can send to a device.
-
-1. **Device Token**. Sends a message to a single device.
-2. **Topic Subscription**. Sends a message to multiple devices that explicitly subscribed to a topic.
-3. **User Segment**. Sends a notification to a subset of users based on your analytics data.
-
-## Step 0: Initial Setup
-
-1. {{< prereq "install-flutterfire" >}}
-
-
-In addition to FCM, we will also install Cloud Firestore and Firebase Auth to build a full-stack push notification service.
-
-{{< file "flutter" "pubspec.yaml" >}}
-{{< highlight yaml >}}
-dependencies:
- flutter:
- sdk: flutter
-
- firebase_core: ^0.4.0
- firebase_auth: ^0.11.1+6
- cloud_firestore: ^0.12.5
-
- firebase_messaging: ^5.0.2
-{{< /highlight >}}
-
-
-### Android
-
-Android does not require any specific configuration, unless you want to run code after a notification is clicked-on from the device tray (while the app was in the backgrond).
-
-{{< file "file" "android/app/src/main/AndroidManifest.xml" >}}
-{{< highlight xml >}}
-
-
-{{< /highlight >}}
-
-### iOS
-
-iOS apps are required to generate a certificate for the Apple Push Notification service (APNs) and enable background services in Xcode. Rather than duplicate the content from the documentation, I recommend following the [official setup guide](https://firebase.google.com/docs/cloud-messaging/ios/certs) from Firebase.
-
-
-## Step 1: Receive Messages in Flutter (Frontend)
-
-1. Get permission (iOS only).
-2. Get the token for the device **OR** subscribe the user to a topic.
-3. Save it to a database (for single device notifications).
-4. Handle incoming messages both in the foreground & background.
-
-All logic can be handled within a StatefulWidget. This allows you to resuse the FCM logic across multiple screens if necessary.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-import 'dart:io';
-import 'package:flutter/material.dart';
-
-import 'package:firebase_messaging/firebase_messaging.dart';
-import 'package:cloud_firestore/cloud_firestore.dart';
-
-class MessageHandler extends StatefulWidget {
- @override
- _MessageHandlerState createState() => _MessageHandlerState();
-}
-
-class _MessageHandlerState extends State {
- final Firestore _db = Firestore.instance;
- final FirebaseMessaging _fcm = FirebaseMessaging();
-
- // TODO...
-
-}
-{{< /highlight >}}
-
-### Get Permission on iOS
-
-On iOS, you must explicitly get permission from the user to send notifications. This can handled when the widget is initialized, or better yet, you might strategically request permission when the user is most likely to say "yes".
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
- // ...
-
- StreamSubscription iosSubscription;
-
- @override
- void initState() {
- super.initState();
- if (Platform.isIOS) {
- iosSubscription = _fcm.onIosSettingsRegistered.listen((data) {
- // save the token OR subscribe to a topic here
- });
-
- _fcm.requestNotificationPermissions(IosNotificationSettings());
- }
-
- }
-{{< /highlight >}}
-
-### Show the Notification UI in the Foreground
-
-The [callback that fires](https://github.com/flutter/plugins/tree/master/packages/firebase_messaging#receiving-messages) when a message is received depends on the OS. Here is a general rule you can follow, but read the official docs to understand all the edge cases.
-
-- `onMessage` fires when the app is open and running in the foreground.
-- `onResume` fires if the app is closed, but still running in the background.
-- `onLaunch` fires if the app is fully terminated.
-
-
-When the notification is received in the foreground (the app is open), we can handle it with one of Flutter's built-in widgets.
-
-Simple notifications can be handled in the foreground with a [SnackBar](https://flutter.dev/docs/cookbook/design/snackbars). The snackbar has room for a short sentence and a single action. It will be auto-dismissed if the user does not engage with the alert.
-
-
-More complex notifications may benefit from a full [AlertDialog](https://api.flutter.dev/flutter/material/AlertDialog-class.html) screen. The `onMessage` callback is called when the app is running in the foreground.
-
-{{< figure src="img/notification-foreground.png" caption="The appearance of a notification when running in the foreground with an AlertDialog widget " >}}
-
-When the app is closed, the notification will appear in the device tray with your app name, icon, and notification details. When clicked, it will open the app and run the `onResume` or `onLaunch` callbacks.
-
-{{< figure src="img/notification-background.png" caption="The appearance of a notification in the device tray in the background" >}}
-
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
- @override
- void initState() {
-
- // ...
-
- _fcm.configure(
- onMessage: (Map message) async {
- print("onMessage: $message");
- showDialog(
- context: context,
- builder: (context) => AlertDialog(
- content: ListTile(
- title: Text(message['notification']['title']),
- subtitle: Text(message['notification']['body']),
- ),
- actions: [
- FlatButton(
- child: Text('Ok'),
- onPressed: () => Navigator.of(context).pop(),
- ),
- ],
- ),
- );
- },
- onLaunch: (Map message) async {
- print("onLaunch: $message");
- // TODO optional
- },
- onResume: (Map message) async {
- print("onResume: $message");
- // TODO optional
- },
- );
- }
-{{< /highlight >}}
-
-
-
-
-### Segmented Notifications
-
-At this point, you can send segmented notifications directly from the Firebase Notification Composer console based on the Analytics data you collect from users.
-
-
-{{< figure src="img/segmented-notification.png" alt="segmented push notification FCM" >}}
-
-
-### Topic Based Notifications
-
-Topic-based notifications can be subscribed to in the background, or the user can manually opt-in by clicking a button.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
- FlatButton(
- child: Text('I like puppies'),
- onPressed: () => _fcm.subscribeToTopic('puppies');,
- ),
-
- FlatButton(
- child: Text('I hate puppies'),
- onPressed: () => _fcm.unsubscribeFromTopic('puppies');,
- ),
-{{< /highlight >}}
-
-{{< box icon="scroll" class="box-blue" >}}
-You may also want to save the user's manual topic subscriptions in the database because they cannot be retrieved directly through the SDK.
-{{< /box >}}
-
-### Individual Device Notifications
-
-In order to send personalized notifications, we need a way to keep track of the device tokens on a per-user basis - Firestore is an excellent choice for this task. After the user has logged-in, associate the device token in a subcollection located at `users/{userID}/tokens/{token}`. The token itself is just a string, which can be used to enforce uniqueness on the Firestore document by using it as the doc ID.
-
-
-{{< figure src="img/fcm-token-firestore.png" caption="Firestore data model for managing single device FCM tokens" >}}
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
- /// Get the token, save it to the database for current user
- _saveDeviceToken() async {
- // Get the current user
- String uid = 'jeffd23';
- // FirebaseUser user = await _auth.currentUser();
-
- // Get the token for this device
- String fcmToken = await _fcm.getToken();
-
- // Save it to Firestore
- if (fcmToken != null) {
- var tokens = _db
- .collection('users')
- .document(uid)
- .collection('tokens')
- .document(fcmToken);
-
- await tokens.setData({
- 'token': fcmToken,
- 'createdAt': FieldValue.serverTimestamp(), // optional
- 'platform': Platform.operatingSystem // optional
- });
- }
- }
-{{< /highlight >}}
-
-
-
-## Step 2: Send Messages with NodeJS (Backend)
-
-You can send messages with any of the Firebase Admin SDKs, but NodeJS with TypeScript is a solid option for Flutter developers.
-
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase init functions
-
-cd functions
-{{< /highlight >}}
-
-Next, initialize the Admin SDK in your Cloud Functions code.
-
-
-{{< file "typescript" "functions/index.ts" >}}
-{{< highlight typescript >}}
-import * as functions from 'firebase-functions';
-import * as admin from 'firebase-admin';
-admin.initializeApp();
-
-const db = admin.firestore();
-const fcm = admin.messaging();
-{{< /highlight >}}
-
-### Send to Topic
-
-When it comes to topic-based notifications, you will often send the message in response to an event in the database. For example, when a new document is created in *puppies* collection, we may want to notify all users subscribed to the *puppies* FCM topic.
-
-{{< file "typescript" "functions/index.ts" >}}
-{{< highlight typescript >}}
-export const sendToTopic = functions.firestore
- .document('puppies/{puppyId}')
- .onCreate(async snapshot => {
- const puppy = snapshot.data();
-
- const payload: admin.messaging.MessagingPayload = {
- notification: {
- title: 'New Puppy!',
- body: `${puppy.name} is ready for adoption`,
- icon: 'your-icon-url',
- click_action: 'FLUTTER_NOTIFICATION_CLICK' // required only for onResume or onLaunch callbacks
- }
- };
-
- return fcm.sendToTopic('puppies', payload);
- });
-{{< /highlight >}}
-
-
-### Send to Device
-
-Device notifications may also be tied to a database event, but are more likely to be related to a specific user. For example, let's imagine we have an *orders* collection and want notify a seller when a new order has been finalized. In this case, we will query the tokens subcollection under the user, then send a notification to all of their device tokens.
-
-{{< file "typescript" "functions/index.ts" >}}
-{{< highlight typescript >}}
-export const sendToDevice = functions.firestore
- .document('orders/{orderId}')
- .onCreate(async snapshot => {
-
-
- const order = snapshot.data();
-
- const querySnapshot = await db
- .collection('users')
- .doc(order.seller)
- .collection('tokens')
- .get();
-
- const tokens = querySnapshot.docs.map(snap => snap.id);
-
- const payload: admin.messaging.MessagingPayload = {
- notification: {
- title: 'New Order!',
- body: `you sold a ${order.product} for ${order.total}`,
- icon: 'your-icon-url',
- click_action: 'FLUTTER_NOTIFICATION_CLICK'
- }
- };
-
- return fcm.sendToDevice(tokens, payload);
- });
-{{< /highlight >}}
-
diff --git a/hugo/content/lessons/flutter-radial-menu-staggered-animations/index.md b/hugo/content/lessons/flutter-radial-menu-staggered-animations/index.md
deleted file mode 100644
index e3f9b2d2c..000000000
--- a/hugo/content/lessons/flutter-radial-menu-staggered-animations/index.md
+++ /dev/null
@@ -1,316 +0,0 @@
----
-title: Flutter Animated Radial Menu
-lastmod: 2019-02-24T09:14:20-07:00
-publishdate: 2019-02-24T09:14:20-07:00
-author: Jeff Delaney
-draft: false
-description: Compose staggered transform animations in Flutter by building a radial menu from scratch.
-tags:
- - flutter
- - dart
- - animation
-
-youtube: MhQI-ysRyrk
-github: https://github.com/fireship-io/170-flutter-animated-radial-menu
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-versions:
- flutter: 1.0
- vector_math: ^2.0.8
----
-
-Building a flashy animated radial menu in Flutter can be done with ease thanks to the [Transform](https://docs.flutter.io/flutter/widgets/Transform-class.html) widget and [staggered animations](https://flutter.dev/docs/development/ui/animations/staggered-animations). The following lesson will teach you how to compose flutter animations into a cool rotating circular widget, which can easily maintain 60FPS on modern smartphones.
-
- with SingleTickerProviderStateMixin {
-
- AnimationController controller;
-
- @override
- Widget build(BuildContext context) {
- return RadialAnimation(controller: controller);
- }
-
-}
-
-
-// The Animation
-class RadialAnimation extends StatelessWidget {
- final AnimationController controller;
- RadialAnimation({ Key key, this.controller }) : super(key: key);
-
-
- build(context) {
- return null;
- }
-}
-{{< /highlight >}}
-
-### Profiling Animation Performance
-
-I highly recommend running your app on a real device to make use of Flutter's [Performance Profiling](https://flutter.dev/docs/testing/ui-performance) tools. As long as you maintain 60 frames-per-second (FPS), your app should be perceived as "butter smooth" 🥞. As you can see from the profile below the animation has plenty of room to spare on a Pixel 2. Smaller blue bars means faster rendering for each frame (they will become red when perf starts to degrade).
-
-{{< figure src="img/flutter-perf.png" alt="flutter animation performance at 60FPS" >}}
-
-## Step 2 - Animate the Open and Close Buttons
-
-The first animation will toggle the visibility of the open/close button in the middle of the menu.
-
- with SingleTickerProviderStateMixin {
-
- AnimationController controller;
-
- @override
- void initState() {
- super.initState();
- controller = AnimationController(duration: Duration(milliseconds: 900), vsync: this);
- }
-}
-{{< /highlight >}}
-
-### Open/Close Button Scale Animation
-
-All of the buttons in the radial menu will be stacked on top of each other, then animated around the center when the menu is opened.
-
-- The *Tween* defines the values that will change over the course of the animation. For example, we start at a size of 150%, then scale down to 0%.
-- The *CurvedAnimation* defines the [Bezier curve](https://www.jasondavies.com/animated-bezier/) - or timing function - of the animation over its lifecycle. Flutter has a bunch of built-in curves that that will make your animations more exciting, so experiment with these.
-- *Transform.scale()* wrapps the floating action buttons and will dynamically apply scale changes when the animation is running.
-
-
-
-
-{{< highlight dart >}}
-class RadialAnimation extends StatelessWidget {
- RadialAnimation({ Key key, this.controller }) :
-
- scale = Tween(
- begin: 1.5,
- end: 0.0,
- ).animate(
- CurvedAnimation(
- parent: controller,
- curve: Curves.fastOutSlowIn
- ),
- ),
-
- super(key: key);
-
- final AnimationController controller;
- final Animation scale;
-
-
- build(context) {
- return AnimatedBuilder(
- animation: controller,
- builder: (context, builder) {
- return Stack(
- alignment: Alignment.center,
- children: [
- Transform.scale(
- scale: scale.value - 1.5, // subtract the beginning value to run the opposite animation
- child: FloatingActionButton(
- child: Icon(FontAwesomeIcons.timesCircle),
- onPressed: _close,
- backgroundColor: Colors.red
- ),
- ),
-
- Transform.scale(
- scale: scale.value,
- child: FloatingActionButton(
- child:
- Icon(FontAwesomeIcons.solidDotCircle),
- onPressed: _open
- ),
- )
- ]);
- });
- }
-
- _open() {
- controller.forward();
- }
-
- _close() {
- controller.reverse();
- }
-}
-
-{{< /highlight >}}
-
-## Step 3 - Animate the Surrounding Buttons
-
-The next section is the most challenging because we need to determine the correct *x,y* position of each button from the center of a circle - this require some Trigonometry 📐.
-
-(
- begin: 0.0,
- end: 100.0,
- ).animate(
- CurvedAnimation(
- parent: controller,
- curve: Curves.linear
- ),
- ),
-
- super(key: key);
-
- final AnimationController controller;
- final Animation scale;
- final Animation translation;
-
-
- build(context) {
- return AnimatedBuilder(
- animation: controller,
- builder: (context, builder) {
- return Stack(
- alignment: Alignment.center,
- children: [
- _buildButton(0, color: Colors.red, icon: FontAwesomeIcons.thumbtack),
- _buildButton(45, color: Colors.green, icon:FontAwesomeIcons.sprayCan),
- _buildButton(90, color: Colors.orange, icon: FontAwesomeIcons.fire),
- _buildButton(135, color: Colors.blue, icon:FontAwesomeIcons.kiwiBird),
- _buildButton(180, color: Colors.black, icon:FontAwesomeIcons.cat),
- _buildButton(225, color: Colors.indigo, icon:FontAwesomeIcons.paw),
- _buildButton(270, color: Colors.pink, icon: FontAwesomeIcons.bong),
- _buildButton(315, color: Colors.yellow, icon:FontAwesomeIcons.bolt),
- // ...omitted
- ]);
- });
- }
-
- _buildButton(double angle, { Color color, IconData icon }) {
- final double rad = radians(angle);
- return Transform(
- transform: Matrix4.identity()..translate(
- (translation.value) * cos(rad),
- (translation.value) * sin(rad)
- ),
-
- child: FloatingActionButton(
- child: Icon(icon), backgroundColor: color, onPressed: _close, elevation: 0)
- );
- }
-{{< /highlight >}}
-
-## Step 4 - Rotate the Entire Set of Buttons
-
-Lastly, let's rotate the entire stack of buttons. The main difference to note with this animation is that it uses an `Interval` to stagger the rotation with specific start/end times relative to the total animation timeline.
-
-
-{{< highlight dart >}}
-class RadialAnimation extends StatelessWidget {
- RadialAnimation({ Key key, this.controller }) :
-
- // ...
-
- rotation = Tween(
- begin: 0.0,
- end: 360.0,
- ).animate(
- CurvedAnimation(
- parent: controller,
- curve: Interval(
- 0.3, 0.9,
- curve: Curves.decelerate,
- ),
- ),
- ),
-
- super(key: key);
-
- final AnimationController controller;
- final Animation scale;
- final Animation translation;
- final Animation rotation;
-
- build(context) {
- return AnimatedBuilder(
- animation: controller,
- builder: (context, builder) {
- return Transform.rotate( // Add rotation
- angle: radians(rotation.value),
- child: Stack(
- alignment: Alignment.center,
- children: [...]
- )
- );
- });
- }
-
-
-}
-{{< /highlight >}}
-
-## The End
-
-Animations in Flutter render beautifully, but can become verbose if you're not careful. Be liberal about extracting logic into helper functions and use AnimatedBuilders to avoid excessive boilerplate.
-
diff --git a/hugo/content/lessons/flutter-realtime-geolocation-firebase/index.md b/hugo/content/lessons/flutter-realtime-geolocation-firebase/index.md
deleted file mode 100644
index 5f51bf6e1..000000000
--- a/hugo/content/lessons/flutter-realtime-geolocation-firebase/index.md
+++ /dev/null
@@ -1,334 +0,0 @@
----
-title: Flutter Realtime Geolocation Firebase
-lastmod: 2019-02-13T06:22:01-07:00
-publishdate: 2019-02-13T06:22:01-07:00
-author: Jeff Delaney
-draft: false
-description: Build a basic realtime geolocation app that can query data within a radius using Flutter, Firestore, and Google Maps.
-tags:
- - google-maps
- - firestore
- - firebase
- - flutter
-
-youtube: MYHVyl-juUk
-github: https://github.com/fireship-io/167-flutter-geolocation-firestore
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-versions:
- flutter: 1
- cloud_firestore: 0.9.0
- geoflutterfire: 2.0.2
- location: 1.4.1
- google_maps_flutter: 0.2.0
-
-update_notes: Google Maps for Flutter is currently in developer preview. This increases the risk of breaking changes, so always refer to the official docs.
----
-
-Looking to build a realtime geolocation app like Lyft, Postmates, or Waze? It is easier than you might think when you combine the power of Flutter, Google Maps, and Firebase. The following lesson will show you how use [Google Maps in Flutter](https://pub.dartlang.org/packages/google_maps_flutter), then listen to a realtime feed of geolocation data in Firestore queried by its distance from a centerpoint - made possible by the [GeoFlutterFire](https://pub.dartlang.org/packages/geoflutterfire) package.
-
-{{< box icon="unicorn" class="box-green" >}}
-Special thanks to [Darshan Gowda](/contributors/darshan-gowda/) for creating the GeoFlutterFire library and providing the example code for this lesson.
-{{< /box >}}
-
-
-## Step 0: Prerequisites
-
-1. {{< prereq "install-flutterfire" >}}
-1. {{< prereq "setup-google-maps-flutter" >}}
-
-
-### Initial App Setup
-
-Our Flutter app starts with a Material Scaffold and uses a single *StatefulWidget* as the body.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-import 'package:flutter/material.dart';
-import 'package:google_maps_flutter/google_maps_flutter.dart';
-
-void main() => runApp(MyApp());
-
-class MyApp extends StatelessWidget {
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- home: Scaffold(
- body: FireMap()
- )
- );
- }
-}
-
-class FireMap extends StatefulWidget {
- @override
- State createState() => FireMapState();
-}
-
-
-class FireMapState extends State {
- @override
- build(context) {
- // widgets go here
- }
-}
-{{< /highlight >}}
-
-## Step 1: Create a Perfectly Centered Map
-
-First, let's create a full screen map and center it on the screen.
-
-{{< figure src="img/flutter-basic-googlemap.png" alt="A blank basic Flutter Google Map" >}}
-
-
-### Map Stack
-
-In my opinion, a good map UI sets the map canvas on the entire screen, then overlays additional controls as needed. This is a perfect use-case for a Flutter [Stack](https://docs.flutter.io/flutter/widgets/Stack-class.html) widget. Our map will sit on the bottom of stack and we'll overlay a *FlatButton* and *Slider* on top of it.
-
-When initializing a *GoogleMap* widget, we are required to set the `initialCameraPosition`, but I also included a handful of additional options you might want to use. You will very likely want to setup a `mapController` to change the camera position and add markers.
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class FireMapState extends State {
- GoogleMapController mapController;
-
- build(context) {
- return Stack(
- children: [
- GoogleMap(
- initialCameraPosition: CameraPosition(target: LatLng(24.150, -110.32), zoom: 10),
- onMapCreated: _onMapCreated,
- myLocationEnabled: true, // Add little blue dot for device location, requires permission from user
- mapType: MapType.hybrid,
- trackCameraPosition: true
- ),
- ]
- );
- }
-
- void _onMapCreated(GoogleMapController controller) {
- setState(() {
- mapController = controller;
- });
- }
-}
-{{< /highlight >}}
-
-
-
-### Overlay Custom Controls
-
-Let's extend the map by overlaying a button that creates a marker when tapped.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-build(context) {
- return Stack(
- children: [
- GoogleMap(...),
- Positioned(
- bottom: 50,
- right: 10,
- child:
- FlatButton(
- child: Icon(Icons.pin_drop),
- color: Colors.green,
- onPressed: () => _addMarker()
- )
- )
-}
-
-_addMarker() {
- var marker = Marker(
- position: mapController.cameraPosition.target,
- icon: BitmapDescriptor.defaultMarker,
- infoWindowText: InfoWindowText('Magic Marker', '🍄🍄🍄')
- );
-
- mapController.addMarker(marker);
-}
-{{< /highlight >}}
-
-Now we have a map with a little bit of interactivity. Move the camera around, then click the buttom in the bottom right and it will place an marker on the map.
-
-{{< figure src="img/flutter-marker-googlemap.png" alt="Flutter google map with basic markers" >}}
-
-## Step 2: Obtain the User's Device Location
-
-At this point, we need a way track the user's position via the GPS system. Let's install the Flutter [Location](https://pub.dartlang.org/packages/location) package.
-
-
-The location service is used in serval parts of the app, but a cool demonstration is to animate the map to the current user's location, for example:
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
- Location location = new Location();
-
- _animateToUser() async {
- var pos = await location.getLocation();
-
- mapController.animateCamera(CameraUpdate.newCameraPosition(
- CameraPosition(
- target: LatLng(pos.latitude, pos.latitude),
- zoom: 17.0,
- )
- )
- );
- }
-{{< /highlight >}}
-
-## Step 3: Writing GeoPoints to Firestore
-
-At this point, we're able to place markers on the map, but they're not persisted in a database and will be lost when the app loses its current state. In this section, we save a `GeoFirePoint` - which consists of the latitude, longitude, and a [geohash](https://en.wikipedia.org/wiki/Geohash) - to Firestore so that it can be queried with GeoFlutterFire.
-
-{{< figure src="img/firestore-geolocation.png" alt="The database structure for geolocation queries" >}}
-
-Let's start by making a reference to Firestore and GeoFlutterFire.
-
-{{< highlight dart >}}
-class FireMapState extends State {
- // omitted...
-
- Firestore firestore = Firestore.instance;
- Geoflutterfire geo = Geoflutterfire();
-
- // ...
-}
-{{< /highlight >}}
-
-
-Next, add a method that writes to the database. This correct data strucutre with a geohash is created for you automatically when you pass the `point.data` with the Firestore document data.
-
-{{< highlight dart >}}
-Future _addGeoPoint() async {
- var pos = await location.getLocation();
- GeoFirePoint point = geo.point(latitude: pos.latitude, longitude: pos.longitude);
- return firestore.collection('locations').add({
- 'position': point.data,
- 'name': 'Yay I can be queried!'
- });
-}
-{{< /highlight >}}
-
-## Step 4: Querying Realtime Geolocation Data
-
-The final step is to listen to stream of data from Firestore and update the marker positions in realtime.
-
-### Add Stateful Data
-
-We have two pieces of streaming data in this demo (1) the radius of the query in kilometers and (2) the result of the query from Firestore. The radius is modeled as an RxDart [BehaviorSubject](http://reactivex.io/rxjs/manual/overview.html#behaviorsubject), which is just a stream that has a current value and can have new values pushed to it.
-
-{{< box icon="map" class="box-green" >}}
-You might also want to listen to the user's location in realtime and update your query reactively, which you can do with `location.onLocationChanged()`.
-{{< /box >}}
-
-{{< highlight dart >}}
- BehaviorSubject radius = BehaviorSubject(seedValue: 100.0);
- Stream query;
- StreamSubscription subscription;
-{{< /highlight >}}
-
-### Add a Slider to Control the Radius
-
-The [Slider](https://docs.flutter.io/flutter/material/Slider-class.html) widget will allow the user to manually change the radius of the query.
-
-{{< figure src="img/firestore-radius-query.png" alt="Query within a radius Flutter Firestore app" >}}
-
-
-{{< highlight dart >}}
- build(context) {
- return Stack(children: [
- // ... other widgets
- Positioned(
- bottom: 50,
- left: 10,
- child: Slider(
- min: 100.0,
- max: 500.0,
- divisions: 4,
- value: radius.value,
- label: 'Radius ${radius.value}km',
- activeColor: Colors.green,
- inactiveColor: Colors.green.withOpacity(0.2),
- onChanged: _updateQuery,
- )
- )
- ]);
-{{< /highlight >}}
-
-### Update Markers with Firestore Data
-
-The method below takes a list of documents from Firestore and updates the position of the map markers. Firebase emits all the documents after each change, so we start by clearing all markers from the map, then looping over the latest data to create new markers.
-
-{{< highlight dart >}}
- void _updateMarkers(List documentList) {
- print(documentList);
- mapController.clearMarkers();
- documentList.forEach((DocumentSnapshot document) {
- GeoPoint pos = document.data['position']['geopoint'];
- double distance = document.data['distance'];
- var marker = Marker(
- position: LatLng(pos.latitude, pos.longitude),
- icon: BitmapDescriptor.defaultMarker,
- infoWindowText: InfoWindowText('Magic Marker', '$distance kilometers from query center')
- );
-
-
- mapController.addMarker(marker);
- });
- }
-{{< /highlight >}}
-
-And now it's finally time to make the query to Firestore. The `_startQuery` method creates a subscription with the default radius, then uses `switchMap` to get the correct items from the database. The listen callback will repaint the markers whenever the radius changes or the underlying data changes.
-
-{{< highlight dart >}}
- _startQuery() async {
- // Get users location
- var pos = await location.getLocation();
- double lat = pos.latitude;
- double lng = pos.longitude;
-
-
- // Make a referece to firestore
- var ref = firestore.collection('locations');
- GeoFirePoint center = geo.point(latitude: lat, longitude: lng);
-
- // subscribe to query
- subscription = radius.switchMap((rad) {
- return geo.collection(collectionRef: ref).within(
- center: center,
- radius: rad,
- field: 'position',
- strictMode: true
- );
- }).listen(_updateMarkers);
- }
-
- _updateQuery(value) {
- setState(() {
- radius.add(value);
- });
- }
-
-{{< /highlight >}}
-
-### Cancel the Subscription
-
-A geoquery is the type of stream that can cause memory links. Under the hood, GeoFlutterFire is combining multiple queries together and listening to all of them concurrently. If you have highly active writes happening in the database this could cost you money and tank the performance of the app. Make sure to cancel the stream when the widget is destroyed.
-
-{{< highlight dart >}}
- @override
- dispose() {
- subscription.cancel();
- super.dispose();
- }
-{{< /highlight >}}
-
-## The End
-
-This entire demo is only take about 180 lines of code - pretty amazing considering we have basic realtime geolocation ready for both iOS and Android. It could be improved by extracting the data sources from the StatefulWidget into an InheritedWidget so other screens can share the same geoquery data.
diff --git a/hugo/content/lessons/flutter-slider-like-reflectly/index.md b/hugo/content/lessons/flutter-slider-like-reflectly/index.md
deleted file mode 100644
index ea3648392..000000000
--- a/hugo/content/lessons/flutter-slider-like-reflectly/index.md
+++ /dev/null
@@ -1,270 +0,0 @@
----
-title: Flutter Firestore Animated SlideShow
-lastmod: 2019-03-20T10:18:59-07:00
-publishdate: 2019-03-20T10:18:59-07:00
-author: Jeff Delaney
-draft: false
-description: Build an animated and filterable slideshow with FlutterFire - inspired by the Reflectly app.
-tags:
- - flutter
- - firestore
- - firebase
- - animation
-
-youtube: 8PfiY0U_PBI
-github: https://github.com/codediodeio/flutter-firestore-animated-slideshow
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-One of the best examples of a well-designed UI in Flutter is [Reflectly](https://reflectly.app/) - an AI-powered journal app for iOS and Android. The following lesson will show you how to build an animated slideshow carousel inspired by the work of Reflectly. In addition, we will wire it up to Firestore to make it filterable and able to scale to an infinite number of pages.
-
-{{< vimeo 325570527 >}}
-
-## PageView Widget Intro
-
-The most import widget in this lesson is the [PageView](https://docs.flutter.io/flutter/widgets/PageView-class.html), which makes it possible to easily build sliding pages. It is a great tool when you have a linear flow of content because it provides the gesture-detection and animation behavior out of the box.
-
-Optionally, you can control the state of the PageView slider with a `PageController` to navigate to a specific index in the children list.
-
-{{< vimeo 325572628 >}}
-
-### Basic Example
-
-Run the code below in your Flutter project to build a basic PageView slideshow.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class MyApp extends StatelessWidget {
-
- final PageController ctrl = PageController();
-
- @override
- Widget build(BuildContext context) {
-
- return MaterialApp(
- home: Scaffold(
- body: PageView(
- // scrollDirection: Axis.vertical,
- controller: ctrl,
- children: [
- Container(color: Colors.green),
- Container(color: Colors.blue),
- Container(color: Colors.orange),
- Container(color: Colors.red)
- ]
- )
-
- ),
- );
- }
-}
-{{< /highlight >}}
-
-## Firestore PageView Builder
-
-Now we're ready to take things to the next level. We will create a custom animation for the active page and use Firestore create and filter pages dynamically from the backend database.
-
-### Initial Setup
-
-Our feature will start with a *StatefulWidget*. There are two main events that should trigger a rebuild of the widgets. (1) The user swipes to a different page, and (2) the Firestore query changes. Both of these event sources will be setup during the *initState* lifecycle hook.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class FirestoreSlideshow extends StatefulWidget {
- createState() => FirestoreSlideshowState();
-}
-
-class FirestoreSlideshowState extends State {
-
- final PageController ctrl = PageController(viewportFraction: 0.8);
-
- final Firestore db = Firestore.instance;
- Stream slides;
-
-
- String activeTag = 'favorites';
-
- // Keep track of current page to avoid unnecessary renders
- int currentPage = 0;
-
-
- @override
- void initState() {
- _queryDb();
-
- // Set state when page changes
- ctrl.addListener(() {
- int next = ctrl.page.round();
-
- if(currentPage != next) {
- setState(() {
- currentPage = next;
- });
- }
- });
-
- @override
- Widget build(BuildContext context) {
- // TODO
- }
-
-
- // Query Firestore
- _queryDb({ String tag ='favorites' }) {
- // TODO
- }
-
-
- // Builder Functions
-
- _buildStoryPage(Map data, bool active) {
- // TODO
- }
-
-
- _buildTagPage() {
- // TODO
- }
-
- _buildButton(tag) {
- // TODO
- }
-
-}
-{{< /highlight >}}
-
-## Firestore Query
-
-### Data Model
-
-{{< figure src="img/slideshow-data-model.png" caption="Firestore contains the title, background image, and tags array for each page" >}}
-
-### Query the Database by Tag
-
-We can query the database for all stories that contain a specific tag using Firestore's [array contains](https://firebase.google.com/docs/firestore/query-data/queries#array_membership) query type. In addition, it is useful to map the document snapshots to their raw data payload at this point to keep the main widget build method free of business logic. Lastly, we update the *activeTag* on the widget to style the corresponding button with a different color when that filter is applied.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
- Stream _queryDb({ String tag ='favorites' }) {
-
- // Make a Query
- Query query = db.collection('stories').where('tags', arrayContains: tag);
-
- // Map the documents to the data payload
- slides = query.snapshots().map((list) => list.documents.map((doc) => doc.data));
-
- // Update the active tag
- setState(() {
- activeTag = tag;
- });
-
- }
-{{< /highlight >}}
-
-
-## UI Design
-
-### PageView Builder
-
-In the widget's build method we first start by setting up a `StreamBuilder` so the widget reacts to data changes in Firestore. Next, we use the [PageView.builder](https://docs.flutter.io/flutter/widgets/PageView/PageView.builder.html) constructor, which allows us to build our UI on the fly and scale up to infinitely large collections. If the current index is zero, build the tag page, otherwise build the main story/card page.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-@override
- Widget build(BuildContext context) {
- return StreamBuilder(
- stream: slides,
- initialData: [],
- builder: (context, AsyncSnapshot snap) {
-
- List slideList = snap.data.toList();
-
- return PageView.builder(
-
- controller: ctrl,
- itemCount: slideList.length + 1,
- itemBuilder: (context, int currentIdx) {
-
-
- if (currentIdx == 0) {
- return _buildTagPage();
- } else if (slideList.length >= currentIdx) {
- // Active page
- bool active = currentIdx == currentPage;
- return _buildStoryPage(slideList[currentIdx - 1], active);
- }
- }
- );
- }
- );
- }
-{{< /highlight >}}
-
-### Animating with an AnimatedContainer
-
-In this section, we use the [AnimatedContainer](https://docs.flutter.io/flutter/widgets/AnimatedContainer-class.html) Widget to give the active page more height and a stronger box shadow when it's active in the PageView. An AnimatedContainer is just like a regular Container, expect it requires a *duration* and *curve*. When its attributes change, Flutter will automatically perform a linear interpolation between the values with a transition animation.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
- _buildStoryPage(Map data, bool active) {
- // Animated Properties
- final double blur = active ? 30 : 0;
- final double offset = active ? 20 : 0;
- final double top = active ? 100 : 200;
-
-
- return AnimatedContainer(
- duration: Duration(milliseconds: 500),
- curve: Curves.easeOutQuint,
- margin: EdgeInsets.only(top: top, bottom: 50, right: 30),
- decoration: BoxDecoration(
- borderRadius: BorderRadius.circular(20),
-
- image: DecorationImage(
- fit: BoxFit.cover,
- image: NetworkImage(data['img']),
- ),
-
- boxShadow: [BoxShadow(color: Colors.black87, blurRadius: blur, offset: Offset(offset, offset))]
- ),
-
- );
- }
-{{< /highlight >}}
-
-
-### Filterable Firestore List
-
-The final step is to create a page with the tag filter buttons. This section is simply lays out a *Column* with several buttons that call `_queryDb` when pressed to refine the database query on the backend.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
- _buildTagPage() {
- return Container(child:
- Column(
- mainAxisAlignment: MainAxisAlignment.center,
- crossAxisAlignment: CrossAxisAlignment.start,
-
- children: [
- Text('Your Stories', style: TextStyle(fontSize: 40, fontWeight: FontWeight.bold),),
- Text('FILTER', style: TextStyle( color: Colors.black26 )),
- _buildButton('favorites'),
- _buildButton('happy'),
- _buildButton('sad')
- ],
- )
- );
- }
-
- _buildButton(tag) {
- Color color = tag == activeTag ? Colors.purple : Colors.white;
- return FlatButton(color: color, child: Text('#$tag'), onPressed: () => _queryDb(tag: tag));
- }
-{{< /highlight >}}
diff --git a/hugo/content/lessons/flutter-state-management-guide/index.md b/hugo/content/lessons/flutter-state-management-guide/index.md
deleted file mode 100644
index d05072d3a..000000000
--- a/hugo/content/lessons/flutter-state-management-guide/index.md
+++ /dev/null
@@ -1,373 +0,0 @@
----
-title: Flutter State Management Guide
-lastmod: 2019-03-08T15:19:53-07:00
-publishdate: 2019-03-08T15:19:53-07:00
-author: Jeff Delaney
-draft: false
-description: A guided tour of reactive state management strategies in Flutter
-tags:
- - flutter
- - dart
- - rxdart
-
-youtube: 3tm-R7ymwhc
-github: https://github.com/fireship-io/172-flutter-state-management-strategies
-# disable_toc: true
-# disable_qna: trueng
-# courses
-# step: 0
-
-versions:
- rxdart: 0.20
----
-
-State management is a hot-button topic that brings out strong opinions in developers, and in extreme cases results in Twitter fights. In my experience, people tend to over-engineer features that would otherwise be straight-forward because they assume a full-blown state management library is necessary. In some cases, they just add complexity, but in others, they can be extremely valuable. My recommendation is to analyze these strategies closely and choose an approach that feels right for your app's requirements and your team's style.
-
-The following lesson is designed to teach you the fundamental tools in [Flutter](https://flutter.dev/docs/development/data-and-backend/state-mgmt) for managing local and shared app state.
-
-## What is State?
-
-**What is State?** State is just *data that changes* over the lifecycle of the app. When stateful data changes, the UI reacts by painting our widgets to reflect the new state. Your UI is just a visual representation of a given state. It's like calling a function with the state as the input and UI as the return value `function(state) => UI`, and Flutter calls this function when you rebuild your widgets.
-
-{{< figure src="img/state-management-demo.png" caption="In the counter app above, the number in the middle is the state. Tapping the button at the bottom is like calling a function with the next state, resulting in a different number in the UI. ">}}
-
-**Why does state need to be managed?** As your app grows in complexity, you are likely to encounter bugs directly related to the way data flows through your app via user input. Managing the state changes carefully helps you avoid soul-crushing bugs that only happen at runtime and can also help optimize performance.
-
-We will look at a variety of widgets packaged in Flutter used to manage state.
-
-- *StatefulWidget*
-- *StatefulBuilder*
-- *StreamBuilder*
-- *InheritedWidget*
-
-We will start with nothing but Flutter, then add additional tools like [RxDart](https://pub.dartlang.org/packages/rxdart) and [Flutter Bloc](https://pub.dartlang.org/packages/bloc) to extend our state management possibilities.
-
-## Local State
-
-In many cases, you can encapsulate all your data in a single widget. Ask yourself *do I need to access this data in other widgets?* If **no**, you can use the techniques described below. If **yes**, you will likely benefit from a shared state strategy in the next section.
-
-
-{{< box icon="scroll" class="box-blue" >}}
-TIP: In Flutter, data moves from top to bottom. If you have data in a child widget that you want to send up to a parent, you should use one of the global state management methods described in the second half of this lesson.
-{{< /box >}}
-
-{{< figure src="img/flutter-widget-tree.png" caption="Flutter widget tree... Parent to child, good. Anything else, bad." >}}
-
-### StatefulWidget
-
-StatefulWidgets come with a built-in a `setState` method that you can call to repaint the widget. Calling it will run the build method you have implemented and repaint all the descendants of this widget.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class MyHomePage extends StatefulWidget {
- createState() => _MyHomePageState();
-}
-
-class _MyHomePageState extends State {
- int _counter = 0; // <-- the stateful data
-
- void _incrementCounter() {
- setState(() { <-- the special method called to update state
- _counter++;
- });
- }
-
- @override
- Widget build(BuildContext context) {
-
- return Scaffold(
- body: Text('$_counter'), // <-- the state used in a widget
-
- floatingActionButton: FloatingActionButton(
- onPressed: _incrementCounter, // <-- the state changed on button tap event
- ),
- );
- }
-}
-{{< /highlight >}}
-
-I tend to avoid *StatefulWidgets* in favor the *Builder* widgets described next. StatefulWidgets require two classes and a decent amount of boilerplate. Thankfully, there are easier ways to handle local state.
-
-### StatefulBuilder
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class MyHomePage2 extends StatelessWidget {
-
- int _counter = 0;
-
- @override
- Widget build(BuildContext context) {
- return StatefulBuilder(
- builder: (ctx, StateSetter setState) =>
- Scaffold(
- body:Text('$_counter'),
- floatingActionButton: FloatingActionButton(
- onPressed: () => setState(() => _counter++),
- ),
- )
- );
- }
-}
-{{< /highlight >}}
-
-## Global or Shared App State
-
-It's common to have widgets dispersed throughout the widget tree that depend on the same data. If the source of this data is at the top of the widget tree, you can pass it down, but that becomes very cumbersome when multiple levels are involved. If the data is at the bottom of the widget tree, you're SOL - unless of course you implement one of the solutions described next.
-
-
-### InheritedWidget
-
-Flutter provides an [InheritedWidget](https://docs.flutter.io/flutter/widgets/InheritedWidget-class.html) that can define provide context to every widget below it in the tree.
-
-While this is nice in theory, you can see that it takes quite a lot of code to get a basic example wired up. Fortunately, there are libraries like Bloc, Redux, and Scoped Model abstract this complexity away.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class MyApp extends StatelessWidget {
- // This widget is the root of your application.
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- home: InheritedCounter( child: MyHomePage3() ), // <-- make sure your InheritedWidget wraps the widgets that use its data
- );
- }
-}
-
-
-// The InheritedWidget
-class InheritedCounter extends InheritedWidget {
- final Map _counter = { 'val': 0 }; // Data structure is a map because InheritedWidgets are immutable
- final Widget child;
-
- InheritedCounter({ this.child }) : super(child: child);
-
- increment() {
- _counter['val']++;
- }
-
- get counter => _counter['val'];
-
- @override
- bool updateShouldNotify(InheritedCounter oldWidget) => true;
-
- static InheritedCounter of(BuildContext context) =>
- context.inheritFromWidgetOfExactType(InheritedCounter);
-}
-
-
-
-class MyHomePage3 extends StatelessWidget {
-
- @override
- Widget build(BuildContext context) {
-
- return StatefulBuilder(
- builder: (BuildContext context, StateSetter setState) {
-
- int counter = InheritedCounter.of(context).counter;
- Function increment = InheritedCounter.of(context).increment;
-
- return Scaffold(
-
- body: Text('$counter'),
- floatingActionButton: FloatingActionButton(
- onPressed: () => setState(() => increment()),
- ),
-
- );
- }
- );
- }
-}
-{{< /highlight >}}
-
-### StreamBuilder + RxDart BehaviorSubject
-
-{{< box icon="scroll" class="box-green" >}}
-This is my preferred way to manage global state in Flutter. It's flexible, provides a good separation of concerns, and just feels intuitive to me.
-{{< /box >}}
-
-The *BehaviorSubject* has a variety of characteristics that make it ideal for state management.
-
-- Has a current value that can be accessed synchronously.
-- Exposes a shared/broadcast stream.
-- Can be controlled by adding new items the stream.
-- Can be transformed with RxDart operators.
-
-We use this magical tool start the count at zero, then increment by reading the current value and adding 1 to it. The `Counter` class provides business logic and state that can be used everywhere and tested in isolation.
-
-Back in the widget tree, we can pass the Observable `stream$` to a `StreamBuilder` to rebuild anytime a new value is emitted.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-import 'package:rxdart/rxdart.dart';
-
-// Global Variable
-Counter counterService = Counter();
-
-// Data Model
-class Counter {
-
- BehaviorSubject _counter = BehaviorSubject.seeded(0);
-
- Observable get stream$ => _counter.stream;
- int get current => _counter.value;
-
- increment() {
- _counter.add(current + 1);
- }
-
-}
-
-// StreamBuilder Widget
-class MyHomePage4 extends StatelessWidget {
-
-
- @override
- Widget build(BuildContext context) {
-
- return Scaffold(
- body: StreamBuilder(
- stream: counterService.stream$,
- builder: (BuildContext context, AsyncSnapshot snap) {
- return Text('${snap.data}');
- }
- ),
-
- floatingActionButton: FloatingActionButton(
- onPressed: () => counterService.increment(),
- ),
- );
- }
-}
-{{< /highlight >}}
-
-The one issue that with this implementation is that it uses on a global variable to share the data model - this is generally frowned upon ☹️. We can easily overcome this issue with a little service locator library called [Get It](https://pub.dartlang.org/packages/get_it) that allows us to define and access a global singleton. It ensures we don't accidentily instantiate multiple state containers and provides additional benefits for integration testing within Flutter widgets.
-
-We can now safely use our global singleton in any widget that requires it.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-import 'package:get_it/get_it.dart';
-
-GetIt getIt = new GetIt();
-
-void main() {
- getIt.registerSingleton(Counter());
- runApp(MyApp());
-}
-
-class MyHomePage4 extends StatelessWidget {
- final counterService = getIt.get();
-
- // ...
-
-}
-{{< /highlight >}}
-
-
-
-### BLoC
-
-The BLoC pattern is similar to an InheritedWidget, but more intuitive and scalable for state management. Although not necessary, I highly recommend using the [flutter_bloc](https://pub.dartlang.org/packages/flutter_bloc) package to help you apply this pattern consistently in your code. The general process is similar to [Redux](https://redux.js.org/) and involves the following steps.
-
-1. Define Events/Actions
-2. Define a custom Bloc class that implements `mapEventToState` to compute the state when an action is dispatched.
-3. Place the BlocProvider in the widget tree to give all children access to its data.
-4. Reference the provider from a widget with `BlocProvider.of(context)`
-5. Use the `BlockBuilder` to rebuild on state changes.
-6. Use `dispatch` to emit events that mutate the state.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-import 'package:bloc/bloc.dart';
-import 'package:flutter_bloc/flutter_bloc.dart';
-
-enum CounterEvent { increment } // 1
-
-class CounterBloc extends Bloc { // 2
- @override
- int get initialState => 0;
-
- @override
- Stream mapEventToState(int currentState, CounterEvent event) async* {
- switch (event) {
- case CounterEvent.increment:
- yield currentState + 1;
- break;
- }
- }
-}
-
-class MyApp extends StatelessWidget {
- // This widget is the root of your application.
- @override
- Widget build(BuildContext context) {
- return MaterialApp(
- home: BlocProvider( // 3
- bloc:CounterBloc(),
- child: MyHomePage5()
- ),
- );
- }
-}
-
-
-class MyHomePage5 extends StatelessWidget {
-
-
- @override
- Widget build(BuildContext context) {
-
- final CounterBloc _counterBloc = BlocProvider.of(context); // 4
-
- return Scaffold(
- appBar: AppBar(
- title: Text('BLoC'),
- ),
- body: BlocBuilder( // 5
- bloc: _counterBloc,
- builder: (BuildContext context, int count) {
- return Text(
- '${count}',
- );
- }
- ),
- floatingActionButton: FloatingActionButton(
- onPressed: () => _counterBloc.dispatch(CounterEvent.increment), // 6
- ),
- );
- }
-}
-{{< /highlight >}}
-
-## Additional State Management Libraries in Flutter
-
-
-Below is an overview of the additional state management options that should be on your radar.
-
-### Scoped Model
-
-If you need shared state, but feel like Bloc is too heavy and explicit, you should check out Scoped Model. Flutter recently added a detailed intro of [scoped_model](https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple) to the official docs. It extends InheritedWidget to share context, but does not require actions, reducers, or any other low-level concepts.
-
-### Redux
-
-[Redux](https://pub.dartlang.org/packages/flutter_redux) is the de facto state management solution in ReactJS - if you already know it, it may be the best place to get started in Flutter
-
-### MobX
-
-[Mobx](https://pub.dartlang.org/packages/mobx) just hit the Flutter scene and that's great news for developers. It applies concepts similar to Redux and Bloc, but also supplies a codegen package and decorators to make the process more developer friendly.
-
-### Flutter Hooks
-
-[Flutter Hooks](https://pub.dartlang.org/packages/flutter_hooks) is an implementation of React Hooks that provides elegant abstractions for code reuse and state management. In my experience, hooks in ReactJS are very beneficial to productivity, so I hope to see this package continue progressing in Flutter.
-
-
-### Firebase - State with a Backend
-
-Yes, the [Firebase SDK](https://fireship.io/snippets/install-flutterfire/) provides you with a very powerful stream-based state management library out of the box, with the added benefit of persisting your data in the cloud. It is not perfect for every situation, but often solves the most complex requirements like user auth, database persistence, remote config, and so on.
-
-
-
-Hopefully that is more than enough ideas to get you started with state management in Flutter, but this is a highly active area of development, so expect this topic to evolve moving forward.
\ No newline at end of file
diff --git a/hugo/content/lessons/flutter-widget-positioning-guide/index.md b/hugo/content/lessons/flutter-widget-positioning-guide/index.md
deleted file mode 100644
index b217fc099..000000000
--- a/hugo/content/lessons/flutter-widget-positioning-guide/index.md
+++ /dev/null
@@ -1,281 +0,0 @@
----
-title: Flutter Widget Positioning - A Guide for the CSS Developer
-lastmod: 2019-01-29T07:10:30-07:00
-publishdate: 2019-01-29T07:10:30-07:00
-author: Jeff Delaney
-draft: false
-description: Learn how to position, align, and build layouts with Flutter widgets, including comparisons to CSS and flexbox.
-tags:
- - dart
- - flutter
- - css
-youtube: u0e2L5yoxFI
-github:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# flutter: 1
----
-
-The addition of Flexbox to CSS revolutionized the way we position elements on the web. It makes the alignment of elements on a 2D plane automatic and well, flexible. Fortunately, Flutter uses the same principles for aligning widgets with [Flex](https://docs.flutter.io/flutter/widgets/Flex-class.html), Column, and Row. In addition, it supports absolute and fixed positioning with [Stack](https://docs.flutter.io/flutter/widgets/Stack-class.html).
-
-The following lesson will teach you how to position containers and build layouts in Flutter with direct comparisons to CSS [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox).
-
-{{< box icon="bird" class="" >}}
-Throughout this lesson, you will see the 👉 emoji. Flutter will always be on the left, and CSS on the right.
-{{< /box >}}
-
-Make sure to also watch [Flutter for the JavaScript Developer](/lessons/flutter-for-js-developers/).
-
-## Basic Positioning for Single Widgets
-
-Do you need to position **one widget or multiple widgets?** If you answered one, you likely want to wrap your widget with a [Container](https://docs.flutter.io/flutter/widgets/Container-class.html).
-
-### Container
-
-Containers serve as an all-purpose wrapper for positioning and styling widgets. They are similar to an HTML `div` in the sense that they serve as blank UI elements that can be positioned/styled. Below is a list of the most common positioning options.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-Container(
- width: 100,
- height: 100,
- margin: EdgeInsets.all(24),
- padding: EdgeInsets.only(top: 24),
- alignment: Alignment.center,
- transform: Transform.rotate(...),
- child: MyCoolWidget()
-)
-{{< /highlight >}}
-
-{{< figure src="img/basic.png" alt="basic margin and padding on flutter widget" >}}
-
-
-The equivalent HTML/CSS would look something like this:
-
-{{< file "css" "style.css" >}}
-{{< highlight javascript >}}
-.my-cool-widget {
- width: 100px;
- height: 100px;
- margin: 24px;
- padding-top: 24px;
- text-align: center;
-}
-/*
*/
-{{< /highlight >}}
-
-
-
-
-### Padding, Center, Align, and More
-
-In many cases, you will not need the full kitchen-sink of features in a container. For example, when you only need to provide padding to a widget, consider using the [Padding](https://docs.flutter.io/flutter/widgets/Padding-class.html) widget, or if you just want to center a widget wrap it in [Center](https://docs.flutter.io/flutter/widgets/Center-class.html). It will make your code more readable and succinct.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-Padding(
- padding: EdgeInsets.all(24),
- child: MyCoolWidget()
-)
-
-Center(
- child: MyCoolWidget()
-)
-{{< /highlight >}}
-
-
-## CSS Flexbox vs Flutter Rows and Columns
-
-
-### A Basic Row & Column
-
-Rows and Columns are identical in every way, just with their axis flipped.
-
-{{< figure src="img/row.png" alt="row of three boxes in Flutter" >}}
-
-{{< figure src="img/col.png" alt="column of three boxes in Flutter" >}}
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-Column(
- children: [
- MyWidget(),
- MyWidget(),
- MyWidget()
- ]
-);
-
-// or swap a Column for a Row to flip the axis
-
-Row(children: [ ]);
-
-// and this is all just sugar for the Flex widget
-Flex(
- direction: Axis.vertical
-)
-{{< /highlight >}}
-
-
-
-### MainAxis vs CrossAxis
-
-- `mainAxisAlignment` 👉 `align-items`;
-- `crossAxisAlignment` 👉 `justify-content`;
-
-
-In Flutter, you might find yourself asking should I set the `mainAxisAlignment` or `crossAxisAlignment`. The answer depends whether you're aligning a Row or Column.
-
-The **MainAxis** runs along the flow or direction of the widgets, so X-axis for Rows and Y-axis for Columns. The **CrossAxis** is the opposite.
-
-On the main-axis, you control the spacing between the widgets. On the cross-axis, you control the alignment within the parent container.
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-Column(
- mainAxisAlignment: MainAxisAlignment.spaceAround,
- crossAxisAlignment: CrossAxisAlignment.start,
- children: [
- MyWidget(),
- MyWidget(height: 200.0, width: 200.0),
- MyWidget(height: 50.0, width: 50.0)
- ]
-);
-{{< /highlight >}}
-
-
-{{< figure src="img/cross-aligned.png" alt="aligned boxes Flutter" >}}
-
-In CSS we can achieve the same effect with a flex row or column.
-
-{{< file "css" "style.css" >}}
-{{< highlight javascript >}}
-.row {
- display: flex;
- flex-direction: row;
- justify-content: space-around;
- align-items: flex-start;
-}
-{{< /highlight >}}
-
-### Expanded
-
-Sometimes you need to specify flex behavior from a child widget. The [Expanded](https://docs.flutter.io/flutter/widgets/Expanded-class.html) widget will take up the remaining space of a row or column. It takes an optional `flex` argument to control the ratio of space used when working with multiple expanded widgets.
-
-Notice how the middle widget has a flex of `3`, while the last widget has a flex of `1`. This means the middle widget will take up 3x more space. In other words, it will expand to 75% of the available space, while the last widget will take up the remaining 25%.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-Column(
- children: [
- MyWidget(),
- Expanded(
- flex: 3,
- child: MyWidget(),
- ),
- Expanded(
- flex: 1,
- child: MyWidget()
- )
- ]
-);
-}
-{{< /highlight >}}
-
-{{< figure src="img/expanded.png" alt="expanded flex widget in Flutter" >}}
-
-The CSS equivalent:
-
-
-{{< file "css" "style.css" >}}
-{{< highlight javascript >}}
-.column {
- display: flex;
- flex-direction: column;
-}
-
-.expanded1 {
- flex-grow: 1;
-}
-
-.expanded3 {
- flex-grow: 3;
-}
-{{< /highlight >}}
-
-
-## Stacks vs Absolute/Fixed Positioning
-
-A Stack allows you to stack elements on top of each other, with the last element in the array taking the highest prority. You can use `Align`, `Positioned` or `Container` to position the children of a stack.
-
-### Align
-
-Widgets are moved by setting the alignment with `Alignment`, which has static properties like *topCenter*, *bottomRight*, and so on. Or you can take full control and set `Alignment(1.0, -1.0)`, which takes x,y values ranging from 1.0 to -1.0, with (0,0) being the center of the screen.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-Stack(
- children: [
- MyWidget(),
- Align(
- alignment: Alignment.topCenter,
- child: MyWidget(),
- ),
- Container(
- alignment: Alignment(-0.9, -0.9),
- child: MyWidget(),
- )
- ]
-);
-{{< /highlight >}}
-
-{{< figure src="img/aligned.png" alt="aligned boxes Flutter" >}}
-
-### Positioned
-
-As an alternative to align, you can position children relative to the parent widget.
-
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-Stack(
- children: [
- MyWidget(),
- Positioned(
- bottom: 20,
- left: 20,
- child: MyWidget(color: Colors.blue),
- ),
- Positioned(
- top: 50,
- right: 50,
- child: MyWidget(color: Colors.red)
- )
- ]
-)
-{{< /highlight >}}
-
-{{< figure src="img/positioned.png" alt="positioned boxes Flutter" >}}
-
-And with CSS absolute positioning.
-
-{{< file "css" "style.css" >}}
-{{< highlight javascript >}}
-.positioned {
- position: absolute;
- bottom: 20,
- left: 20,
-}
-{{< /highlight >}}
-
-## The End
-
-As you can see, CSS shares many of the same positioning and alignment concepts with Flutter. In 99% of cases, you can solve your positioning requirements with Container, Column, Row, and Stack. The beauty of Flutter is that you have the power to paint every pixel on the device when needed in more advanced scenarios.
-
-
-
diff --git a/hugo/content/lessons/how-to-build-a-slack-bot/index.md b/hugo/content/lessons/how-to-build-a-slack-bot/index.md
deleted file mode 100644
index 38b2416ba..000000000
--- a/hugo/content/lessons/how-to-build-a-slack-bot/index.md
+++ /dev/null
@@ -1,282 +0,0 @@
----
-title: How to Build a Slack App
-lastmod: 2019-12-03T14:22:00-07:00
-publishdate: 2019-12-03T14:22:00-07:00
-author: Jeff Delaney
-draft: false
-description: A comprehensive guide to serverless Slack Apps with Firebase Cloud Functions & Firestore
-tags:
- - slack
- - cloud-functions
- - node
-
-youtube: 25ArxpK48tU
-# github:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-[Slack Apps](https://api.slack.com/start/overview), or Bots, allow you to extend slack with interactive features that can improve your teams productivity. The following lesson is a step-by-step guide to building a Slack App using Firebase [Cloud Functions](/tag/cloud-functions) as the backend server.
-
-{{< box icon="slack" class="" >}}
-This lesson builds Slack App for the actual [Fireship Slack](https://fireship.page.link/slack). Join to see the CyberJeff bot in action.
-{{< /box >}}
-
-Our Slack App will perform the following tasks.
-
-- Listen to events, such as a new user joining the #general channel.
-- Retrieve the user's slack profile.
-- Send a private personalized message.
-- Add a slash command for user-directed actions.
-
-## Create a Slack App
-
-At this point, it is assumed you have admin access to a Slack workspace. If not, feel free to [create one](https://slack.com/help/articles/206845317-create-a-slack-workspace) to follow this tutorial.
-
-Once you have a workspace, create a [new Slack App](https://api.slack.com/apps).
-
-{{< figure src="img/slack-app-create.png" caption="Create a Slack App" >}}
-
-
-## Verify Cloud Function Ownership
-
-Before Slack can send events to our Cloud Function, it needs to verify that we own the server. Slack performs a handshake by sending an HTTP request with a `challenge` parameter to the Cloud Function, then the function must respond back with the same value.
-
-### Initialize Cloud Functions
-
-Initialize Cloud Functions. This demo uses the TypeScript flavor.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase init functions
-{{< /highlight >}}
-
-
-### Build The Challenge Function
-
-The function only needs to respond with the challenge one time.
-
-{{< file "typescript" "index.ts" >}}
-{{< highlight typescript >}}
-export const myBot = functions.https.onRequest( (req, res) => {
-
- // Request from Slack
- const { challenge } = req.body;
-
- // Response from You
- res.send({ challenge })
-
-});
-{{< /highlight >}}
-
-Deploy it
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase deploy --only functions:myBot
-{{< /highlight >}}
-
-{{< figure src="img/slack-bot-url.png" caption="Copy the Function URL from the terminal output" >}}
-
-### Enter The Deployed URL
-
-Subscribe to an event that you want to listen to, then paste in the Function URL from the last step. Slack should automatically verify the URL and give it a green checkmark ✅.
-
-{{< figure src="img/slack-app-event.png" caption="Subscribe to the member_joined_channel event. Notice how our URL is now verified." >}}
-
-## Build the Bot
-
-Now it's time to do some real work.
-
-### Install Dependencies
-
-The [Slack Node SDK](https://github.com/slackapi/node-slack-sdk) is a monorepo that contains several packages. The Web API can read and modify data in the workspace. Google PubSub will be used to handle long running background tasks in te following steps.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm install @slack/web-api
-npm install @google-cloud/pubsub
-{{< /highlight >}}
-
-
-
-### OAuth Token
-
-The OAuth token is used to authenticate your bot/server into a *workspace* so it can interact with your channel (like post messages).
-
-{{< figure src="img/slack-app-install.png" caption="Install the app into your workspace." >}}
-
-Once installed, it will take you directly to the **OAuth token**. It usually starts with `xoxb` or `xoxp`.
-
-{{< figure src="img/slack-oauth-token.png" caption="Copy the OAuth Token" >}}
-
-Copy the OAuth Token and save it as a Firebase Functions [environment](https://firebase.google.com/docs/functions/config-env) variable.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase functions:config:set slack.token=YOUR-TOKEN
-{{< /highlight >}}
-
-
-### Signing Secrets
-
-When receiving events from Slack, you should validate the **signing secret**, which can be found in Basic Info panel. This ensures that only requests from Slack can interact with your function by decoding the [digital signature](https://en.wikipedia.org/wiki/Digital_signature) of the request.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase functions:config:set slack.signing_secret=YOUR-TOKEN
-{{< /highlight >}}
-
-{{< box icon="lightbulb" class="" >}}
-Read this the [Slack Signing Secret Validation](/snippets/verify-slack-api-signing-signature-node) snippet for further details.
-{{< /box >}}
-
-### Add Scopes (Permissions)
-
-OAuth scopes define what your app is allowed to do. You can fine tune permissions under the *OAuth & Permissions* page. Follow the principle of least privilege and only allow your bot access to resources that it actually needs to do its job. In our case, we need to read a user profile and add them to a specific slack channel.
-
-## Listen to Events
-
-Our first goal is to listen to events that happen in the Slack workspace. Slack should notify our server anytime a user joins a channel with the `member_joined_channel` event.
-
-{{< figure src="img/slack-events.png" >}}
-
-⚡ Your server must respond be quickly, within 3000ms or less, otherwise Slack will timeout and attempt to retry.
-
-So then, how do we build an app that performs a long-running backend process? There are many right answers, but in Firebase, the best option is to enqueue a [PubSub Cloud Function](https://cloud.google.com/functions/docs/calling/pubsub). It allows the initial HTTP endpoint to simply hand off the message and respond quickly to Slack.
-
-
-Import the dependencies and initlizize them with the environment credentials.
-
-{{< file "typescript" "index.ts" >}}
-{{< highlight typescript >}}
-import * as functions from 'firebase-functions';
-
-import { WebClient } from '@slack/web-api';
-const bot = new WebClient(functions.config().slack.token);
-
-const { PubSub } = require('@google-cloud/pubsub');
-const pubsubClient = new PubSub();
-{{< /highlight >}}
-
-
-### HTTP Gateway
-
-The HTTP gateway validates the request, enqueues a PubSub message with the request, then responds with a 200 code to keep Slack happy.
-
-Extra Snippet: [verifySlackSignature](/snippets/verify-slack-api-signing-signature-node)
-
-
-{{< highlight typescript >}}
-
-export const myBot = functions.https.onRequest( async (req, res) => {
-
- // Validate Signature
- verifySlackSignature(req); // See snippet above for implementation
-
- const data = JSON.stringify(req.body);
- const dataBuffer = Buffer.from(data);
-
- await pubsubClient
- .topic('slack-channel-join')
- .publisher()
- .publish(dataBuffer);
-
-
- res.sendStatus(200);
-
-});
-{{< /highlight >}}
-
-### PubSub Function
-
-All the heavy-lifting happens in the PubSub function because we have no time-constraints here. The `message.json` contains the same data you would have handled in `req.body` in the HTTP function.
-
-{{< file "typescript" "index.ts" >}}
-{{< highlight typescript >}}
- export const slackChannelJoin = functions.pubsub.topic('slack-channel-join')
- .onPublish(async (message, context) => {
-
-
- const { event } = message.json;
-
- const { user, channel } = event;
-
- // TODO something cool...
-
-
-});
-{{< /highlight >}}
-
-### Respond To the User as the Bot
-
-In this section, our app makes requests to the Slack API that (1) fetch the user's Slack profile (2) invite them to a channel, and (3) greet them with a direct message.
-
-Note: The Slack API does not provide typings for the response object, so you'll have to treat it as `any` in typescript.
-
-{{< highlight typescript >}}
-export const slackChannelJoin = functions.pubsub
- .topic('slack-channel-join')
- .onPublish(async (message, context) => {
-
- const { event } = message.json;
-
- const { user, channel } = event;
-
- // IDs for the channels you plan on working with
- const generalChannel = 'C12345';
- const newChannel = '#froopy-land';
-
- // Throw error if not on the general channel
- if (channel !== generalChannel) {
- throw Error()
- }
-
-
- // Get the full Slack profile
-
- const userResult = await bot.users.profile.get({ user });
- const { email, display_name } = userResult.profile as any;
-
-
- // Invite the slack user to a new channel
- const invite = await bot.channels.invite({
- channel: newChannel,
- user
- });
-
-
- // Send a Message
- const chatMessage = await bot.chat.postMessage({
- channel: newChannel,
- text: `Hey ${display_name}! So glad to have you on my Slack!`
- });
-
-
-});
-{{< /highlight >}}
-
-## Additional Ideas to Try
-
-### Listen to Slash Commands
-
-Events are great, but somethings you want to give users tools to manually kick off interactivity - that's where [slash commands](https://api.slack.com/interactivity/slash-commands) come in. They work very similar to events, but are are triggered by the user entering `/some-command` into the workspace.
-
-{{< figure src="img/slack-app-slash.png" caption="Slash commands follow the same basic flow as events" >}}
-
-### /slap someone
-
-{{< figure src="https://cdn.sanity.io/images/hfh83o0w/production/9e279c7b45b755f818f551fbfd451f3456154dd8-1920x1080.png?w=800&fit=crop&fm=webp" caption="Deploying Firebase Cloud Function to use with Slack slash commands. Sending someone a /slap!" >}}
-
-Learn more about slack commands in the [full lesson by AJonP](https://ajonp.com/lessons/slap-someone-with-slack-commands/).
-
-
-### Add a Conversational Bot
-
-[DialogFlow](/lessons/build-a-chatbot-with-dialogflow/) can integrate into a Slack App with just a few button clicks. Turning your app into a full-blown chatbot allows users to have human-like conversations with the app, which is often more natural than slash commands.
diff --git a/hugo/content/lessons/how-to-rate-limit-writes-firestore/index.md b/hugo/content/lessons/how-to-rate-limit-writes-firestore/index.md
deleted file mode 100644
index b10176743..000000000
--- a/hugo/content/lessons/how-to-rate-limit-writes-firestore/index.md
+++ /dev/null
@@ -1,217 +0,0 @@
----
-title: Firestore Rate Limiting
-lastmod: 2019-11-30T08:11:12-07:00
-publishdate: 2019-11-30T08:11:12-07:00
-author: Jeff Delaney
-draft: false
-pro: true
-description: Advanced security rules and techniques for rate-limiting Firestore writes.
-tags:
- - firebase
- - firestore
- - security
- - pro
-
-youtube:
-github:
-vimeo: 376656177
-
-versions:
- firebase-rules: 2.0.0
-
----
-
-[Rate limiting](https://github.com/firebase/firebase-js-sdk/issues/647) is the process of blocking access to cloud resources after a certain threshold has been reached. Firestore bills based on the quantity of reads and writes, but does not currently provide a way to block IPs or set explicit rate limits with [Security Rules](https://fireship.io/snippets/firestore-rules-recipes/). So how do you prevent a [DDoS](https://www.cloudflare.com/learning/ddos/what-is-a-ddos-attack/) attack or a disgruntled user from spamming the app with unnecessary records.
-
-The following examples are based on an app that needs to...
-
-- Limit users to 5 document create actions per account (absolute threshold).
-- Limit users to 1 new document per minute (time-based).
-
-Firestore rules can achieve these security requirements by combining a batch write with [getAfter](https://firebase.google.com/docs/reference/rules/rules.firestore.html#.getAfter) - a new feature available in Firestore security rules. The following examples use this technique to ensure a user cannot manipulate a count beyond a certain threshold or time constraint.
-
-{{< box icon="hazard" class="box-red" >}}
-Never use a rule like `allow write: true` in your database in production. Write operations should always include some form of authentication.
-{{< /box >}}
-
-
-## Rate Limit by Quantity
-
-### Scenario
-
-A user is limited to 5 projects per account. Imagine a SaaS project-management app that expects to increase limits through paid accounts.
-
-### Data Model
-
-This implementation requires two documents. . First, you need a document that stores the current project count that is connected to the current user, like `users/{uid}`. Second, you have the main UI data located in a subcollection like `users/{uid}/projects/{id}`
-
-The user document keeps a registry of the projects as a [Map](https://firebase.google.com/docs/reference/rules/rules.Map) of timestamps. This makes it possible to validate that multiple documents are part of the same batch write.
-
-
-**users/{userId}**
-{{< highlight text >}}
-projects: {
- projectA: Timestamp
- projectB: Timestamp
-}
-{{< /highlight >}}
-
-{{< figure src="img/rate-limit-user.png" caption="" >}}
-
-**users/{userId}/projects/{projectId}**
-{{< highlight text >}}
-createdAt: Timestamp;
-{{< /highlight >}}
-
-{{< figure src="img/rate-limit-project.png" caption="" >}}
-
-In order to perform a valid write, the user request a batch that updates the user document while creating a new project document. Notice how they share a timestamp.
-
-{{< file "js" "batch.js" >}}
-{{< highlight javascript >}}
- const batch = db.batch();
- const timestamp = firebase.firestore.FieldValue.serverTimestamp;
-
-
- const userRef = db.collection('users').doc(uid);
- const projectRef = userRef.collection('projects').doc();
-
- batch.set(projectRef, { ...yourData, createdAt: timestamp(), });
-
- batch.set(userRef, {
- projects: {
- [projectRef.id]: timestamp()
- }
- }, { merge: true });
-
- batch.commit()
-{{< /highlight >}}
-
-### Security Rules
-
-The rules below validate the rate limit in three steps.
-
-
-`getAfter` is a relatively new function that gets projected contents of a document after the batch write is finished, as if the current write had succeeded.
-
-1. Validate ownership of the document based on the auth UID.
-2. Validate the new projectId is registered on the parent user doc with a matching timestamp. Without this step, the user could potentially add new documents while bypassing the update the parent document.
-3. Validate the rate limit by measuring the length of keys in the map.
-
-Note: This rule requires 0 to 2 document reads to execute.
-
-{{< file "firebase" "firestore.rules" >}}
-{{< highlight javascript >}}
-
- match /users/{uid}/projects/{docId} {
-
- allow create: if
-
- // 1. Validate ownership
- request.auth.uid == uid
-
- &&
-
- // 2. Validate both docs have matching timestamps for the documentId
- getAfter(
- /databases/$(database)/documents/users/$(uid)
- ).data.projects[docId] == request.resource.createdAt
-
- &&
-
- // 3. Validate Rate-limit
- getAfter(
- /databases/$(database)/documents/users/$(uid)
- ).data.projects.keys().size() <= 5
-
- }
-
- match /users/{uid} {
-
- allow update: if
-
- // 1. Validate key cannot be changed
- resource.data.projects.keys().hasAny( request.resource.data.projects.keys() ) == false;
-
- }
-
-{{< /highlight >}}
-
-## Rate Limit By Time
-
-### Scenario
-
-Imagine we have a commenting system. The user should be limited to creating one comment per minute.
-
-### Data Model
-
-**users/{userId}**
-{{< highlight text >}}
-lastComment: Timestamp;
-{{< /highlight >}}
-
-{{< figure src="img/time-limit-user.png" caption="" >}}
-
-
-**posts/{postId}/comments/{commentId}**
-{{< highlight text >}}
-createdAt: Timestamp;
-{{< /highlight >}}
-
-{{< figure src="img/rate-limit-post.png" caption="" >}}
-
-
-{{< file "js" "batch.js" >}}
-{{< highlight javascript >}}
- const batch = db.batch();
- const timestamp = firebase.firestore.FieldValue.serverTimestamp;
-
-
- const userRef = db.collection('users').doc(uid);
- const commentRef = db.collection('posts').doc(id).collection('comments').doc();
-
- batch.update(userRef, { lastComment: timestamp() });
- batch.set(commentRef, { createdAt: timestamp() });
-
- batch.commit();
-{{< /highlight >}}
-
-### Security Rules
-
-Firestore provides a global [duration function](https://firebase.google.com/docs/reference/rules/rules.duration_) that can calculate the distance between two timestamps. The rule below subtracts 1 minute from the request time, then compares it to the last comment timestamp. Notice how the first validation uses `get`, but the second uses `getAfter` - we need the data before the change is committed when checking duration.
-
-{{< file "firebase" "firestore.rules" >}}
-{{< highlight javascript >}}
-match posts/{postId}/comments/{commentId} {
- allow create: if
-
- // 1. Validate at least one minute has passed
- get(
- /databases/$(database)/documents/users/$(uid)
- ).data.lastComment < (request.time - duration.value(1, 'm'))
-
- &&
-
- // 2. Validate matching timestamps after operation
- getAfter(
- /databases/$(database)/documents/users/$(uid)
- ).data.lastComment == request.resource.createdAt
-}
-{{< /highlight >}}
-
-
-## Additional Considerations
-
-### Email Notifications
-
-Consider setting transactional email (via Firebase Cloud Functions or Extensions) to notify yourself, your developers, or admins when a rate-limit threshold has been reached. It is likely something you want to investigate further and potentially disable the offending user's account.
-
-### IP Address Rate Limiting
-
-It is of course possible to enforce IP restrictions on the server. If this is a critical feature, you can bypass the Firebase SDK and implement your own custom [IP address security](https://firebase.google.com/docs/auth/admin/manage-sessions#advanced_security_enforce_ip_address_restrictions) logic in a Cloud Function. You will lose the ability to enforce regular Firestore security rules and not be able to perform realtime updates, but you will have full control over the security implementation.
-
-
-
-
-
-
diff --git a/hugo/content/lessons/learn-go-in-100-lines/index.md b/hugo/content/lessons/learn-go-in-100-lines/index.md
deleted file mode 100644
index 92480ea03..000000000
--- a/hugo/content/lessons/learn-go-in-100-lines/index.md
+++ /dev/null
@@ -1,581 +0,0 @@
----
-title: Learn Go in 100 Lines
-lastmod: 2021-08-28T07:27:03-07:00
-publishdate: 2021-08-28T07:27:03-07:00
-author: Alex Guja
-draft: false
-description: An introduction to Go
-tags:
- - go
-
-# youtube: f0DrPLKf6Ro
-# github:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-
-## Introduction
-
-[Go](https://en.wikipedia.org/wiki/Go_(programming_language)) is an open-source programming language developed at Google by Robert Griesemer, Rob Pike, and Ken Thompson. It is often described as "C for the 21st century", however, it borrows important ideas from several other languages like ALGOL, Pascal, Modula-2, Oberon, CSP, and others. At its core, Go relies on simplicity, reliability, and efficiency to overcome the shortcomings of its ancestors. Go has garbage collection, a package system, first-class functions, lexical scope, immutable strings that rely on UTF-8, and an awesome concurrency model.
-
-As a compiled language, Go is generally faster than interpreted languages and is safer from crashes thanks to its built-in type system. That being said, there is a good balance between expressiveness and safety that gives programmers the benefits of a strong type system without the burden of complex workflows.
-
-The use cases of the language vary from network servers and distributed systems to CLI’s, web and mobile development, scalable databases, and cloud-native applications.
-
-## First Program
-Before we get started, check out this [guide](https://golang.org/doc/install) to download and install Go on your platform. We’ll start with the classic “hello world”. Despite being a simple example, it already illustrates many central ideas.
-
-{{< file "go" "hello_world.go" >}}
-{{< highlight "go" >}}
-package main // Required for a standalone executable.
-
-import "fmt" // fmt implements formatted I/O.
-
-/* When this program is executed the first function that runs is main.main() */
-func main() {
- fmt.Println("Hello, world") // Call Println() from the fmt package.
-}
-{{< /highlight >}}
-
-The first thing to note is that every Go program is organized in a *package*. A package is just a collection of source files in the same directory that allows variables, types, and functions to be visible among other source files within the same package. For standalone files, the package is called main, but the name of the file is decided by the programmer.
-
-Next, we import the "fmt" package that implements formatted I/O. We'll use the fmt.Println() function to write default formats to standard output and fmt.Printf() when we need more flexibility over the formats.
-
-Lastly, in the body of the main function, we make a call to fmt.Println() that displays the passed argument in the output.
-Note that the main function takes no arguments and doesn't return any values. Similar to the main package, the main function is a requirement for standalone files.
-
-To run the program, we need to compile the source code and its dependencies into an executable binary. We achieve this by opening a command line in the directory of our package and running
-the go command with the build subcommand, followed by the name of the source file.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-
-$ go build hello_world.go
-{{< /highlight >}}
-
-To execute the binary, type ./ followed by the name of the binary file.
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-$ ./hello_world
-
-# output
-Hello, world
-{{< /highlight >}}
-
-Another option is to use the go command with the run subcommand, followed by the name of the source file. This will combine the two steps outlined above and produce the same result, however, no executable will be saved in the working directory. This method is mostly used for one-off snippets and experimental code that is unlikely to be needed in the future.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-
-$ go run helloworld.go
-
-# output
-Hello, world
-{{< /highlight >}}
-
-## Basics in 100 Lines
-
-In the following 100 lines of code, we'll go through several examples illustrating Go's features. We'll cover how to declare variables, understand Go's built-in types, work with arrays and slices, cover maps, and touch on the flow of control. From there, we'll go beyond 100 lines and also look at pointers, structs, and Go's built-in support for concurrency.
-
-### Variables
-When writing Go programs, variables must be declared before they can be used. The example below shows how to declare single variables or a group of variables. In the interest of space, the output is displayed as an in-line comment.
-
-{{< file "go" "variables.go" >}}
-{{< highlight "go" >}}
-package main
-
-import "fmt"
-
-/* Declare a single variable */
-var a int
-
-/* Declare a group of variables */
-var (
- b bool
- c float32
- d string
-)
-
-func main() {
- a = 42 // Assign single value
- b, c = true, 32.0 // Assign multiple values
- d = "string" // Strings must contain double quotes
- fmt.Println(a, b, c, d) // 42 true 32 string
-}
-
-
-{{< /highlight >}}
-
-Notice how each variable declaration is followed by the type of that variable. Before we cover types in the next section, note that we can replace the var keyword with const when we need to introduce constants in our code.
-
-
-When declaring variables, another option is to use the := operator to initialize and assign to variables in one go. This is called a *short variable declaration*. Let's refactor the code above to illustrate this.
-
-
-{{< file "go" "variables_refactored.go" >}}
-{{< highlight "go" >}}
-package main
-
-import "fmt"
-
-func main() {
- a := 42 // Initialize and assign to a single variable
- b, c := true, 32.0 // Initialize and assign to multiple variables
- d := "string"
- fmt.Println(a, b, c, d) // 42 true 32 string
-}
-
-{{< /highlight >}}
-The short variable declaration makes our code neater, so we'll see it again throughout this lesson.
-
-### Types
-Go offers a rich collection of types, including numericas, booleans, strings, error, and the ability to create custom types. Strings are a sequence of UTF-8 characters enclosed in double-quotes. Numerical types are the most versatile, with 8, 16, 32, and 64-bit variants for both signed (int) and unsigned (uint) integers.
-
-A byte is an alias for uint8. A rune is an alias for int32. Floats (or floating-point numbers) are either float32 or float64. Complex numbers are also supported and can be represented as complex128 or complex64.
-
-When a variable is declared it is assigned to the natural "null" value of the corresponding type. For example, in var k int, k has the value 0.
-In var s string, s has the value "". The example below shows the difference between user-specified types and the default types assigned with a short variable declaration.
-
-
-{{< file "go" "types.go" >}}
-{{< highlight "go" >}}
-package main
-
-import "fmt"
-
-func main() {
- /* User specified types */
- const a int32 = 12 // 32-bit integer
- const b float32 = 20.5 // 32-bit float
- var c complex128 = 1 + 4i // 128-bit complex number
- var d uint16 = 14 // 16-bit unsigned integer
-
- /* Default types */
- n := 42 // int
- pi := 3.14 // float64
- x, y := true, false // bool
- z := "Go is awesome" // string
-
- fmt.Printf("user-specified types:\n %T %T %T %T\n", a, b, c, d)
- fmt.Printf("default types:\n %T %T %T %T %T\n", n, pi, x, y, z)
-}
-
-{{< /highlight >}}
-
-Notice the %T conversion character in the first argument of fmt.Printf(). In Go, this is called a *verb*, and it stands for the *type* of the passed variable. \n introduces a new line at the end of the output. fmt.Printf() has many other verbs, including %d for decimal integers, %s for strings, %f for floats, %t for booleans, and %v for any natural value for a type.
-
-Another thing to note is that int is an alias for either int32 or int64, depending on the underlying system.
-Let's run the code example to see the types and the formatting verbs in action.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-$ go run types.go
-
-# output
-user-specified types:
- int32 float32 complex128 uint16
-
-default types:
- int float64 bool bool string
-{{< /highlight >}}
-
-
-
-### Arrays
-
-Storing a number of elements in a list can be achieved using arrays, slices, and maps (Go's version of hash-maps). We'll consider all three in the examples below. Arrays are defined by their fixed size and a common data type for all elements. Interestingly, the size of the array is part of the type, meaning arrays cannot grow or shrink, otherwise, they would have a different type. Array elements are accessed using square brackets. The example below shows how to declare an array containing strings and how to loop through its elements.
-
-{{< file "go" "arrays.go" >}}
-{{< highlight "go" >}}
-package main
-
-import "fmt"
-
-func main() {
- /* Define an array of size 4 that stores deployment options */
- var DeploymentOptions = [4]string{"R-pi", "AWS", "GCP", "Azure"}
-
- /* Loop through the deployment options array */
- for i := 0; i < len(DeploymentOptions); i++ {
- option := DeploymentOptions[i]
- fmt.Println(i, option)
- }
-}
-
-{{< /highlight >}}
-
-Notice the lack of parentheses around the looping condition. In this example, we traverse the array outputting the current index and the value stored at that index. Running the code produces the following output.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-$ go run arrays.go
-
-# output
-0 R-pi
-1 AWS
-2 GCP
-3 Azure
-{{< /highlight >}}
-
-Before we move on, let’s try a neater way to write the for loop in the example above.
-We can make use of the range keyword to achieve the same behavior with less code. Both versions of the code produce the same output.
-
-{{< file "go" "arrays_refactored.go" >}}
-{{< highlight "go" >}}
-package main
-
-import "fmt"
-
-func main() {
- /* Define an array and let the compiler count its size */
- DeploymentOptions := [...]string{"R-pi", "AWS", "GCP", "Azure"}
-
- /* Loop through the deployment options array */
- for index, option := range DeploymentOptions {
- fmt.Println(index, option)
- }
-}
-
-{{< /highlight >}}
-
-### Slices
-
-Slices can be thought of as *dynamic* arrays. Slices always refer to an underlying array and can grow when new elements are added. The number of elements that are visible through a slice determines its length. If a slice has an underlying array that is larger, the slice may still have the *capacity* to grow. When it comes to slices, think of the length as the *current* number of elements, and think of the capacity as the *maximum* number of elements that can be stored. Let's see an example.
-
-{{< file "go" "slices.go" >}}
-{{< highlight "go" >}}
-package main
-
-import "fmt"
-
-func main() {
- /* Define an array containing programming languages */
- languages := [9]string{
- "C", "Lisp", "C++", "Java", "Python",
- "JavaScript", "Ruby", "Go", "Rust", // Must include the trailing comma
- }
-
- /* Define slices */
- classics := languages[0:3] // alternatively languages[:3]
- modern := make([]string, 4) // len(modern) = 4
- modern = languages[3:7] // include 3 exclude 7
- new := languages[7:9] // alternatively languages[7:]
-
- fmt.Printf("classic languagues: %v\n", classics) // classic languagues: [C Lisp C++]
- fmt.Printf("modern languages: %v\n", modern) // modern languages: [Java Python JavaScript Ruby]
- fmt.Printf("new languages: %v\n", new) // new languages: [Go Rust]
-}
-
-{{< /highlight >}}
-
-Note that when defining a slice, the last index is excluded. In other words, a slice s := a[i:j] will include all the elements from a[i] to a[j - 1] but not a[j]. In the next example, we continue exploring the behavior of slices. Let's pretend we're editing the same file and the above code is still available (instead of the --snip-- comment).
-
-{{< file "go" "slices.go" >}}
-{{< highlight "go" >}}
-package main
-
-import (
- "fmt"
- "reflect"
-)
-
-func main() {
- // -- snip -- //
- allLangs := languages[:] // copy of the array
- fmt.Println(reflect.TypeOf(allLangs).Kind()) // slice
-
- /* Create a slice containing web frameworks */
- frameworks := []string{
- "React", "Vue", "Angular", "Svelte",
- "Laravel", "Django", "Flask", "Fiber",
- }
-
- jsFrameworks := frameworks[0:4:4] // length 4 capacity 4
- frameworks = append(frameworks, "Meteor") // not possible with arrays
-
- fmt.Printf("all frameworks: %v\n", frameworks)
- fmt.Printf("js frameworks: %v\n", jsFrameworks)
-}
-
-
-{{< /highlight >}}
-
-First, we make a copy of the languages array using the [:] operator. The resulting copy is a slice. We assert that's the case using the "reflect" package. Next, we create a slice called frameworks. Notice the blank entry in the square brackets responsible for the size. If we pass a parameter inside these brackets we are creating an array. Leaving it blank creates a slice. From there, we create another slice called jsFrameworks that selects JavaScript frameworks. Finally, we extend our frameworks slice by adding Meteor to the list of frameworks.
-
-The append function pushes new values to the end of a slice and returns a new slice with the same type as the original. In case the capacity of a slice is insufficient to store the new element, a new slice is created that can fit all the elements. In that case, the returned slice will refer to a different underlying array. Running the above code leads to the output below.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-$ go run slices.go
-
-# output
-...
-all frameworks: [React Vue Angular Svelte Laravel Django Flask Fiber Meteor]
-js frameworks: [React Vue Angular Svelte]
-{{< /highlight >}}
-
-### Maps
-Most modern programming languages have a built-in implementation of a hash-map. For example, think of Python's dictionary or JavaScript's object. Fundamentally, a map is a data structure that stores key-value pairs with a constant look-up time. The efficiency of maps comes at the expense of randomizing the order of the keys and the associated values. In other words, we make no guarantees about the order of the elements in a map. The example below showcases this behavior.
-
-{{< file "go" "maps.go" >}}
-{{< highlight "go" >}}
-package main
-
-import "fmt"
-
-func main() {
- /* Define a map containing the release year of several languages */
- firstReleases := map[string]int{
- "C": 1972, "C++": 1985, "Java": 1996,
- "Python": 1991, "JavaScript": 1996, "Go": 2012,
- }
-
- /* Loop through each entry and output the name and release year */
- for k, v := range firstReleases {
- fmt.Printf("%s was first released in %d\n", k, v)
- }
-}
-
-{{< /highlight >}}
-
-
-We define a map called firstReleases containing several programming languages as the keys, and their release years as the corresponding values. We also write a loop to traverse the map and output each key-value pair. If we run the code, notice the random order of the elements displayed in the output.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-$ go run maps.go
-
-# output
-Go was first released in 2012
-C was first released in 1972
-C++ was first released in 1985
-Java was first released in 1996
-Python was first released in 1991
-JavaScript was first released in 1996
-{{< /highlight >}}
-
-### Control Flow
-To wrap things up, we will consider the following scenario: Let's suppose we're given a slice containing floats, and we're interested in computing their average value. We'll proceed by creating a function called average that takes a slice as a parameter and returns a float called avg. The example below shows a possible implementation.
-
-{{< file "go" "control_flow.go" >}}
-{{< highlight "go" >}}
-
-package main
-
-import "fmt"
-
-/* Define a function to find the average of the floats contained in a slice */
-func average(x []float64) (avg float64) {
- total := 0.0
- if len(x) == 0 {
- avg = 0
- } else {
- for _, v := range x {
- total += v
- }
- avg = total / float64(len(x))
- }
- return
-}
-
-func main() {
- x := []float64{2.15, 3.14, 42.0, 29.5}
- fmt.Println(average(x)) // 19.197499999999998
-}
-
-{{< /highlight >}}
-
-We define an input slice called x in the body of the main function and we make a call to average, passing in x as an argument. We wrap the call inside fmt.Println() to write the result to standard output.
-The interesting part is the implementation of the average function. Notice the return parameter avg is defined immediately at end of the function declaration. In the function body, we initialize a variable named total that will compute a running sum of the slice elements. From there, we check the size of the input slice. If the slice is empty, we return 0, otherwise, we loop through each element in the slice and add it to the total. Notice how we use the underscore (_) for the unused variable. We convert the length of the slice to a float using float64(len(x)). Finally, we compute the average and return the result to the caller.
-
-
-Now that we've seen the classic if-else statements, let's introduce Go's switch statements. We'll refactor our average function to make use of the switch syntax.
-
-{{< file "go" "switch_cases.go" >}}
-{{< highlight "go" >}}
-
-package main
-
-import "fmt"
-
-func average(x []float64) (avg float64) {
- total := 0.0
- switch len(x) {
- case 0:
- avg = 0
- default:
- for _, v := range x {
- total += v
- }
- avg = total / float64(len(x))
- }
- return
-}
-
-func main() {
- x := []float64{2.15, 3.14, 42.0, 29.5}
- fmt.Println(average(x)) // 19.197499999999998
-}
-
-{{< /highlight >}}
-
- Traditionally, the built-in switch statements in modern languages were designed to work with constants. In Go, we are allowed to use variables. We use the switch keyword followed by the variable of interest - in this case len(x). From there, we define two cases inside curly braces, which are evaluated from top to bottom until a case succeeds. In contrast to other languages, Go runs the selected case only, thus removing the need to break. Another cool feature is that the variables in the switch statement are not restricted to integers.
-
- The last thing we'll mention on this topic is Go's implementation of a while loop. In Go, there is no while keyword. Instead, we use the for keyword followed by a condition and a loop body. The only exception is the missing semicolon at the end of the condition. Let's see an example.
-
-{{< file "go" "while_loop.go" >}}
-{{< highlight "go" >}}
-package main
-
-import "fmt"
-
-func main() {
- count := 1
- for count < 5 {
- count += count
- }
- fmt.Println(count) // 8
-}
-{{< /highlight >}}
-
-Congratulations for making it this far! Now it's time to have a break
-⏱️ (or another cup of coffee
-☕) before we dive into the bonus section 🎁 .
-
-## Beyond 100 Lines
-In this section, we'll go beyond the basics and explore three more examples related to pointers, structs, and concurrency.
-
-### Structs and pointers
-Before we begin discussing structs and user-defined types, we have to cover pointers. The good news is that pointer arithmetic is not allowed in Go, which eliminates dangerous/unpredictable behavior. A *pointer* stores the memory address of a value. In Go, the type *T is a pointer to a T value. The default value for pointers is nil. Let's go through an example.
-
-{{< file "go" "pointers.go" >}}
-{{< highlight "go" >}}
-package main
-
-import "fmt"
-
-func main() {
- var address *int // declare an int pointer
- number := 42 // int
- address = &number // address stores the memory address of number
- value := *address // dereferencing the value
-
- fmt.Printf("address: %v\n", address) // address: 0xc0000ae008
- fmt.Printf("value: %v\n", value) // value: 42
-}
-
-
-{{< /highlight >}}
-
-When working with pointers there are two important symbols to be aware of. The address operator (&) provides the *memory address* of a value. It is used to bind a pointer to a value. The asterisk operator (*) prefixing a type denotes a pointer type, whereas an asterisk prefixing a variable is used to *dereference* the value the variable points to. If you're new to pointers, they may take some getting used to, however, we don't need to dive too deep at this point. Once you feel confident with the example above, you're all set for the rest of this lesson.
-
-For the next part, we'll switch gears and cover how to use a struct to define a custom type.
-A struct is simply a collection of fields. In the next example, we'll use what we've learned about pointers, learn how to use a struct, and build a stack from scratch.
-
-{{< file "go" "structs.go" >}}
-{{< highlight "go" >}}
-package main
-
-import "fmt"
-
-/* Define a stack type using a struct */
-type stack struct {
- index int
- data [5]int
-}
-
-/* Define push and pop methods */
-func (s *stack) push(k int) {
- s.data[s.index] = k
- s.index++
-}
-
-/* Notice the stack pointer s passed as an argument */
-func (s *stack) pop() int {
- s.index--
- return s.data[s.index]
-}
-
-func main() {
- /* Create a pointer to the new stack and push 2 values */
- s := new(stack)
- s.push(23)
- s.push(14)
- fmt.Printf("stack: %v\n", *s) // stack: {2 [23 14 0 0 0]}
-}
-
-
-{{< /highlight >}}
-
-First, we define our custom type that represents a stack. To achieve the stack functionality, we need an array to store
-the stack elements, and an index to point to the last item in the stack. For the sake of the example, let's fix our stack size to 5 elements. Inside the body of the struct, we specify an index field which is of type int, and a field called data, which is an array of 5 int elements.
-
-Next we define the push and pop methods. A method is a special kind of function that takes a receiver argument between the func keyword and the method name. Notice the type of the parameter s. In this case, it is a stack pointer instead of a stack. By default, Go doesn't pass values by reference. Instead, if we were to omit the asterisk, Go would pass a copy of our stack, meaning the original stack would not be modified by our methods.
-
-In the body of our stack methods, we access the stack fields using the dot notation. In the push method, we write a given integer k to the first available index (recall the default value of a declared int is 0), and increment the index by 1. In the pop method we decrement the index by 1, and return the last item in the stack. In the body of the main function, we use new() to create a pointer to a newly allocated stack. We then push 2 items and write the result to standard output.
-
-### Concurrency
-We'll wrap things up by considering one more example related to concurrency. We'll introduce *goroutines* which are Go's version of threads.
-If you're new to threads, they are nothing but a sequential control flow in a program. Things get interesting when multiple threads are run in parallel so that a program can make use of multiple CPU cores. Goroutines are initiated using the go keyword. In addition to goroutines, Go has built-in *channels* which are used to share data between goroutines. In general, send and receive operations across a channel block the execution until the other side is ready.
-
-In the example below, we'll consider 5 goroutines that run in parallel. Let's suppose we organize a cooking contest between 5 gopher chefs. This is a timed contest and whoever finishes their dish first wins. Let's see how we can simulate this contest using Go's concurrency features.
-
-{{< file "go" "concurrency.go" >}}
-{{< highlight "go" >}}
-package main
-
-import (
- "fmt"
-)
-
-func main() {
- c := make(chan int) // Create a channel to pass ints
- for i := 0; i < 5; i++ {
- go cookingGopher(i, c) // Start a goroutine
- }
-
- for i := 0; i < 5; i++ {
- gopherID := <-c // Receive a value from a channel
- fmt.Println("gopher", gopherID, "finished the dish")
- } // All goroutines are finished at this point
-}
-
-/* Notice the channel as an argument */
-func cookingGopher(id int, c chan int) {
- fmt.Println("gopher", id, "started cooking")
- c <- id // Send a value back to main
-}
-
-
-{{< /highlight >}}
-
-First, we create a channel that will be common to all goroutines. Then we start 5 goroutines and pass the channel as an argument. Inside each goroutine, we write the gopher id to standard output as soon the gopher starts cooking the dish. We then send the gopher id from the goroutine back to the caller. From there, we're back to the body of the main function where we receive the gopher id and record their finishing time.
-
-
-Since we're dealing with concurrent code, we lose the ability to predict the order of the output, however, we can observe how the channel blocks the execution, as a goroutine has to wait until the channel is available before it can send an id. One possible output is included below. Keep in mind that we're probably using more goroutines than the number of cores on our machine, hence it's likely that a single core is time-multiplexed to simulate the concurrency.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-$ go run concurrency.go
-
-# output
-gopher 0 started cooking
-gopher 4 started cooking
-gopher 3 started cooking
-gopher 0 finished the dish
-gopher 2 started cooking
-gopher 1 started cooking
-gopher 4 finished the dish
-gopher 3 finished the dish
-gopher 2 finished the dish
-gopher 1 finished the dish
-{{< /highlight >}}
-
-If you've made it to the end, congratulations! Hopefully, you had a lot of fun along the way. If you'd like to see more, check out Go's official [tour](https://tour.golang.org/list) which gives you a concise overview of the language. If you enjoyed this article, consider becoming a pro member at [fireship.io](https://fireship.io/pro/) and stay tuned for more content.
diff --git a/hugo/content/lessons/nuxt-3-firebase/index.md b/hugo/content/lessons/nuxt-3-firebase/index.md
deleted file mode 100644
index 896ccce62..000000000
--- a/hugo/content/lessons/nuxt-3-firebase/index.md
+++ /dev/null
@@ -1,178 +0,0 @@
----
-title: Realtime SSR with Nuxt3 and Firebase
-lastmod: 2022-04-28T12:14:10-07:00
-publishdate: 2022-04-28T12:14:10-07:00
-author: Jeff Delaney
-draft: false
-description: How to setup Firebase v9 for SSR and realtime hydration in Nuxt3
-tags:
- - vue
- - nuxt
- - firebase
-
-# youtube:
-github: https://github.com/fireship-io/nuxt3-firebase-starter
-vimeo: 704385496
-pro: true
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-Nuxt3 hit release candidate recently with a variety of awesome new features. But you might be wondering… how do I use Nuxt3 with Firebase? There is no documented best practice as of today, so I put together a demo that is capable of server-side rendering (SSR) via Firestore, followed by hydration to secure real-time data on the client. This gives a website the benefits of SEO-friendly HTML, without sacrificing the power of the real-time data updates after the initial page load.
-
-## Initial Setup
-
-To get started, you will need a Firebase project then generate a new Nuxt app.
-
-{{< file "terminal" "command line" >}}
-
-```bash
-npx nuxi init nuxt-app
-cd nuxt-app
-
-npm install firebase firebase-admin
-```
-
-## Server-Side Rendering
-
-The [Firebase Admin SDK](https://firebase.google.com/docs/reference/admin) is the preferred way to run Firebase server-side. In your Nuxt project, create the following files:
-
-```bash
-/server/api/animal.js
-/server/utils/firebase.js
-```
-
-### Initialize Firebase Admin
-
-Firebase Admin requires us to authenticate the server. Download your service account from the Firebase console and save it as `service-account.json` in the root of the project. ⚠ Keep this file secret!
-
-{{< figure src="img/service-account.png" >}}
-
-Now install the Firebase Admin SDK and export Firestore.
-
-{{< file "typescript" "server/utils/firebase.ts" >}}
-
-```typescript
-import { initializeApp, cert } from "firebase-admin/app";
-import { getFirestore } from "firebase-admin/firestore";
-
-export const app = initializeApp({
- credential: cert("./service-account.json"),
-});
-
-export const firestore = getFirestore();
-```
-
-### Firestore API Route
-
-Create an API route to fetch data from Firestore and make it accessible over HTTP.
-
-{{< file "typescript" "server/api/animal.ts" >}}
-
-```typescript
-import { firestore } from "../utils/firebase";
-
-export default defineEventHandler(async (event) => {
- const ref = firestore.doc(`animals/dog`);
- const snapshot = await ref.get();
- const data = snapshot.data();
- return data;
-});
-```
-
-### Fetch Data via Page
-
-Now create a Vue component or page to fetch the data and display it in the UI.
-
-{{< file "vue" "pages/animal.vue" >}}
-
-```html
-
-
-
-
-
Server
-
{{ serverData }}
-
-```
-
-## Client-Side Hydration
-
-At this point, we are able to fetch data from the server, but it will not respond to realtime updates. To add a realtime listener, we need to initialize the Firebase Web SDK and hydrate the data.
-
-Note: This process results in 2 document reads on the initial page load.
-
-### Initialize the Firebase Web SDK
-
-Grab the Firebase web config, then create a composable to access Firebase from a Vue component.
-
-{{< file "typescript" "composables/useFirebase.ts" >}}
-
-```typescript
-import { initializeApp } from "firebase/app";
-import { getFirestore } from "firebase/firestore";
-
-export const useFirebase = () => {
- const firebaseConfig = {
- // your config
- };
-
- const firebaseApp = initializeApp(firebaseConfig);
- const firestore = getFirestore(firebaseApp);
-
- return {
- firebaseApp,
- firestore,
- };
-};
-```
-
-### Hydrate Realtime Data
-
-When the client loads, the app needs to refetch the same data and listen to changes with `onSnapshot`. It's important to **only run Firebase Web code on the client** by placing it inside the `onMounted` lifecycle hook on inside a function.
-
-{{< file "js" "pages/animal.vue" >}}
-
-```html
-
-
-
-
-
Data
-
{{ data }}
-
Update dog
-
-```
diff --git a/hugo/content/lessons/paypal-checkout-frontend/index.md b/hugo/content/lessons/paypal-checkout-frontend/index.md
deleted file mode 100644
index 6bdc29a67..000000000
--- a/hugo/content/lessons/paypal-checkout-frontend/index.md
+++ /dev/null
@@ -1,341 +0,0 @@
----
-title: PayPal Checkout
-lastmod: 2019-06-23T06:44:00-07:00
-publishdate: 2019-06-23T06:44:00-07:00
-author: Jeff Delaney
-draft: false
-description: Accept PayPal Checkout payments with Angular, React, or Vue
-tags:
- - angular
- - react
- - vue
- - payments
- - paypal
-
-youtube: AtZGoueL4Vs
-github: https://github.com/fireship-io/193-paypal-checkout-v2-demos
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-In February 2019, the PayPal Checkout API received a much needed [facelift](https://medium.com/paypal-engineering/launch-v2-paypal-checkout-apis-45435398b987) that brought massive improvements to the developer experience. The new [v2 API](https://developer.paypal.com/docs/api/overview/) has detailed documentation on par with [Stripe](/tags/stripe) and offers one of the smoothest paths to start accepting payments and/or subscriptions in a progressive web app. The following lesson will show you how to start accepting payments entirely from your frontend JavaScript code with PayPal Checkout with your choice of Angular, React, and Vue.
-
-{{< box icon="money" class="box-green" >}}
-If you're looking to implement a fullstack payment solution, check out the [Stripe Payments Master Course](/courses/stripe). Ironically, you can pay for it with PayPal if you prefer 🤷. Both PayPal and Stripe share similar APIs, so concepts from the course overlap both APIs.
-{{< /box >}}
-
-## Live Demo
-
-The button below is the actual *live* implementation used for Fireship (Angular Elements). Try it 👇
-
-
-
Buy this Couch - ${{ product.price }} OBO
-
-
-
-
Yay, you bought a sweet couch!
-
-
-
-
-{{< /highlight >}}
-
-
-{{< file "ngts" "some.component.ts" >}}
-{{< highlight typescript >}}
-import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
-
-declare var paypal;
-
-@Component({
- selector: 'app-payme',
- templateUrl: './payme.component.html',
- styleUrls: ['./payme.component.css']
-})
-export class PaymeComponent implements OnInit {
- @ViewChild('paypal', { static: true }) paypalElement: ElementRef;
-
- product = {
- price: 777.77,
- description: 'used couch, decent condition',
- img: 'assets/couch.jpg'
- };
-
- paidFor = false;
-
- ngOnInit() {
- paypal
- .Buttons({
- createOrder: (data, actions) => {
- return actions.order.create({
- purchase_units: [
- {
- description: this.product.description,
- amount: {
- currency_code: 'USD',
- value: this.product.price
- }
- }
- ]
- });
- },
- onApprove: async (data, actions) => {
- const order = await actions.order.capture();
- this.paidFor = true;
- console.log(order);
- },
- onError: err => {
- console.log(err);
- }
- })
- .render(this.paypalElement.nativeElement);
- }
-}
-
-{{< /highlight >}}
-
-## React
-
-The react implementation takes advantage of Hooks to manage state and initialize the PayPal script tag.
-
-### Generate the App
-
-Create a new [React](https://reactjs.org/) project with create-react-app.
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npx create-react-app my-app
-{{< /highlight >}}
-
-### Payment Component
-
-{{< file "js" "App.js" >}}
-{{< highlight jsx >}}
-import './App.css';
-import React, { useState, useRef, useEffect } from 'react';
-
-function Product({ product }) {
- const [paidFor, setPaidFor] = useState(false);
- const [error, setError] = useState(null);
- const paypalRef = useRef();
-
- useEffect(() => {
- window.paypal
- .Buttons({
- createOrder: (data, actions) => {
- return actions.order.create({
- purchase_units: [
- {
- description: product.description,
- amount: {
- currency_code: 'USD',
- value: product.price,
- },
- },
- ],
- });
- },
- onApprove: async (data, actions) => {
- const order = await actions.order.capture();
- setPaidFor(true);
- console.log(order);
- },
- onError: err => {
- setError(err);
- console.error(err);
- },
- })
- .render(paypalRef.current);
- }, [product.description, product.price]);
-
- if (paidFor) {
- return (
-
-
Congrats, you just bought {product.name}!
-
-
- {error &&
Uh oh, an error occurred! {error.message}
}
-
- {product.description} for ${product.price}
-
-
-
-
-
-
Buy this Lamp - ${{ product.price }} OBO
-
-
{{ product.description }}
-
-
-
-
-
Noice, you bought a beautiful lamp!
-
-
-
-
-
-
-{{< /highlight >}}
-
-
-
-
diff --git a/hugo/content/lessons/pwa-to-play-store/index.md b/hugo/content/lessons/pwa-to-play-store/index.md
deleted file mode 100644
index 3f33024e4..000000000
--- a/hugo/content/lessons/pwa-to-play-store/index.md
+++ /dev/null
@@ -1,207 +0,0 @@
----
-title: Trusted Web Activity - PWA to Play Store Guide
-lastmod: 2019-02-20T10:27:58-07:00
-publishdate: 2019-02-20T10:27:58-07:00
-author: Jeff Delaney
-draft: false
-description: A step-by-step guide for publishing your PWA as a native app in the Google Play Store via a trusted web activity (TWA).
-tags:
- - pwa
- - twa
- - android
- - javascript
-
-youtube: 7JDFjeMvxos
-github: https://github.com/fireship-io/169-pwa-trusted-web-activity
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-versions:
- chrome: 72
----
-
-Web developers already have a variety of interesting options for using JavaScript to write native mobile apps with tools like React Native, Cordova/Ionic, NativeScript, just to name a few. I've spent many hours brainstorming with clients on this topic and recently summed up my thoughts about [Hybrid App](https://itnext.io/should-you-use-ionic-4-fa04daebaffd) development, but there's a brand new strategy to add to the list... [Trusted Web Activities](https://developers.google.com/web/updates/2019/02/using-twa) (TWA). The following guide will show you how to covert any progressive web app to an Android App on the Google Play Store.
-
-{{< figure src="img/googleplay-badge.png" >}}
-
-{{< box icon="fire" class="" >}}Special thanks to Sven Budak for writing This TWA stuff rocks! Finally I got my PWA on Google Play Store .
-{{< /box >}}
-
-## Wait, what is a Trusted Web Activity?
-
-**TL;DR** A Trusted Web Activity allows Chrome (v72 or later) to run a website in fullscreen mode *without a browser toolbar* within an APK (Android Package).
-
-**How?** The underlying technology is based on the [Custom Tabs](https://developer.chrome.com/multidevice/android/customtabs) protocol, which is already used to embed web content within native apps. For example, you might click a link in the Twitter app, but never actually leave the app to view the content. A TWA allows a developer to verify ownership of first-party web content by uploading a special file called a trusted asset link to the hosting server. It can then be easily packaged for Android making it indistinguishable from a true native app and discoverable on the Play Store.
-
-**Why?** While this approach is very new on the scene, it offers a promising alternative to webview-based hybrid apps (Ionic/Cordova). Many hybrid apps are just PWAs wrapped up as a native package, but the webview environment is sandboxed, so TWAs offer the following benefits:
-
-- OAuth requests not blocked (this is awesome).
-- Always up-to-date content, no need to cut a new release when content changes.
-- Share cookies, local storage, saved settings and all PWA features with the preferred browser.
-
-But there are also some drawbacks that come to mind...
-
-- Unclear how to handle in-app purchases.
-- Cannot share Android Activities with TWAs on the same screen.
-
-I highly recommend watching the video below for a detailed overview of webviews versus TWAs:
-
-{{< youtube TCgT8dzSiU8 >}}
-
-## Step 0 - Prerequisites
-
-You're building a native mobile app so you need to think like an Android developer {{< partial "svg/android.svg" >}} , but thankfully, you won't need to author any custom Java code.
-
-### Install Android Studio
-
-{{< figure src="img/android-studio.png" alt="install android studio on your system" >}}
-
-Install [Android Studio](https://developer.android.com/studio/) on your system.
-
-### Register a Google Play Developer Account
-
-Publishing an app on the Google Play Store means registering a [paid developer account](https://developer.android.com/distribute/). This will cost you $25.
-
-## Step 1 - Build a Progressive Web App
-
-You will need to build a web app that meets modern [PWA](https://developers.google.com/web/progressive-web-apps/checklist) standards. It's beyond the scope of this guide, but your web app must...
-
-- Be compliant with Google Play Policies
-- Be an installable PWA
-- Achieve a lighthouse performance of 80+
-- Recommended: Have a privacy policy
-
-If you have an existing app, it should produce results similar to those below when running in production.
-
-{{< figure src="img/lighthouse-twa.png" alt="lighthouse score of 80+ for TWA on Google Play store" >}}
-
-
-## Step 3 - Make it Native
-
-### Clone the TWA Starter Android App
-
-There are several modifcations that need to be made to the Android app to support a TWA, all of which are [well documented here](https://developers.google.com/web/updates/2019/02/using-twa#establish_an_association_from_the_website_to_the_app). However, an easier apporach is to just clone the repo for this lesson
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-git clone https://github.com/fireship-io/169-pwa-trusted-web-activity.git twa
-cd twa
-{{< /highlight >}}
-
-Go ahead and open this app in Android Studio and modify the values below based on your app config. The `applicationId` should follow a format of `..`.
-
-{{< file "gradle" "app/build.gradle" >}}
-{{< highlight gradle >}}
-android {
- defaultConfig {
- applicationId "io.fireship.app"
- manifestPlaceholders = [
- hostName: "fireship.io",
- defaultUrl: "https://fireship.io",
- launcherName: "Fireship",
- assetStatements: '[{ "relation": ["delegate_permission/common.handle_all_urls"], ' +
- '"target": {"namespace": "web", "site": "https://fireship.io"}}]'
- ]
- resValue "color", "colorPrimary", "#272838"
- }
- // omitted...
-}
-{{< /highlight >}}
-
-
-### Obtain the SHA256 App Signing Certificate
-
-The next step is to [create a keystore](https://developer.android.com/studio/publish/app-signing#generate-key) and extract its SHA256 fingerprint. This is used to sign the APK release and verify ownership of your web content. Make note the alias and password - and do not forget the password!
-
-First, open Android Studio and create a keystore by navigating to *Build → Generate Signed Bundle/APK*.
-
-{{< figure src="img/create-keystore.png" alt="Create a keystore in Android Studio" >}}
-
-Then run the following command to extract the SHA256 fingerprint from the keystore you just created.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-keytool -list -v -keystore ~/my-keystore.ks -alias twa -storepass your-password -keypass your-password
-
-
-
-Entry type: PrivateKeyEntry
-...
-Certificate fingerprints:
- SHA1: ...
- SHA256: 2A:9B:A8:64:32:0A:69:99...: 👈 copy this line
-{{< /highlight >}}
-
-## Step 3 - Setup the Digital Asset Link
-
-A digital asset link is how you verify ownership of your web content so it can be linked to the APK.
-
-### Generate the Digital Asset Statement File
-
-Take the SHA fingerprint from the previous step and generate a statement with the [digital asset links tool](https://developers.google.com/digital-asset-links/tools/generator).
-
-### Deploy to your Web Host
-
-Create a file that contains the contents from the digital asset tool that is publicly accessible from your PWA's web host at the following path: *.well-known/assetlinks.json*
-
-The correct location of this file is completely dependent on the build process of your web app, but the end result should be this file living in the deployed files, usually *public* or *dist*. Deploy your webapp when complete:
-
-{{< figure src="img/well-known-asset.png" alt="Well know asset deployed to firebase hosting" >}}
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase deploy --only hosting
-{{< /highlight >}}
-
-
-
-## Step 4 - Build and Release on Google Play
-
-Go to the [Google Play Console](https://play.google.com/apps/) and click *All Applications → Create Application*
-
-### Create an Internal Release
-
-Now navigate to *App releases → Internal Test Track → Create release* and create the release track.
-
-{{< figure src="img/android-test-track.png" alt="Android test track streen" >}}
-
-### Build a Signed APK
-
-In Android Studio, go back to *Build → Generate Signed Bundle/APK* and use the same keystore we created earlier. Generate a signed release and make sure the checkboxes for both signature versions are selected.
-
-{{< figure src="img/signed-apk.png" alt="Signed APK" >}}
-
-### Upload the APK
-
-On the Google Play Store, upload your APK at *App Releases → Internal Test Track → Edit Release*, then review and roll-out. At this point you should see an error that *no testers are assigned yet*, this likely means you need to finish the store listing.
-
-### Complete the Store Listing
-
-{{< figure src="img/google-play-store-listing.png" alt="Update the store listing on google play" >}}
-
-You are must fill out ALL required information for the store listing, content rating, and pricing details. You should see four green checkmarks on the sidebar ✔️ when this process is complete. After you create the release, your app will be in *pending publication* status - just wait a few hours for it to be approved.
-
-And finally, you can install your app from the Play Store by using the opt-in URL under the *Manage testers* , then finish up the day a well-deserved refreshment 🍺.
-
-
-## The End
-
-That was a lot of small steps 😅 but this process will become more streamlined in the future. Let's recap the entire checklist
-
-1. Build a good PWA
-1. Install Android Studio
-1. Sign up for Google Play, pay $25
-1. Clone the Android TWA starter app
-1. Update app/build.gradle
-1. Create a keystore
-1. Create a digital asset link file and deploy it
-1. Generate a signed APK
-1. Create an Internal Track Release
-1. Upload the signed APK to Google play
-1. Finish the Google Play Store Listing
-1. Release and wait
-
-
diff --git a/hugo/content/lessons/realtime-presence-angular-firebase/index.md b/hugo/content/lessons/realtime-presence-angular-firebase/index.md
deleted file mode 100644
index a0cddbd9c..000000000
--- a/hugo/content/lessons/realtime-presence-angular-firebase/index.md
+++ /dev/null
@@ -1,268 +0,0 @@
----
-title: Realtime Presence with Angular + Firebase
-lastmod: 2019-01-27T14:04:38-07:00
-publishdate: 2019-01-27T14:04:38-07:00
-author: Jeff Delaney
-draft: false
-description: Build a realtime user presence system with AngularFire to detect when a user is online, offline, or away.
-tags:
- - angular
- - realtimedb
- - firebase
-
-youtube: bL3I7Pls-1w
-github: https://github.com/fireship-io/41-realtime-presence-firebase-angular
-
-versions:
- '@angular/core': 7.2
- '@angular/fire': 5
- rxjs: 6
-
----
-
-Social media and chat apps (think Slack, Facebook Messenger, etc) often have presence detection systems that can indicate if your friends are **online, offline, or away**. Traditionally, features like this have been challenging because you need manage state between the client & server, but the Firebase [RealtimeDB](https://firebase.google.com/docs/database/) makes it easy. The following lesson will show you how to build a realtime user presence system with Angular and Firebase.
-
-{{< figure src="img/presence-demo.gif" alt="realtime presence with Angular and Firebase" caption="The browser on the left shows the actual user activity, while the browser on the right is just a neutral observer of the presence changes" >}}
-
-
-## Step 0: Prerequisites
-
-{{< box icon="scroll" class="box-blue" >}}
-This post first appeared as [Episode 41 on AngularFirebase.com](https://angularfirebase.com/lessons/user-presenece-system-in-realtime/) and has been fully updated with the latest best practices.
-{{< /box >}}
-
-
-1. {{< prereq "install-angular" >}}
-1. {{< prereq "install-angularfire" >}}
-1. You should have a working user auth system in place. Most of the relevant code for the auth service is shown below, however I recommend following [Firebase Authentication System](https://fireship.io/lessons/angularfire-google-oauth/) lesson first.
-
-## Step 1: Listen to the Realtime DB Connection
-
-{{< box icon="fire" class="box-orange" >}}
-Realtime presence is not directly supported in Firestore, but it is possible to mirror the RealtimeDB data with a Cloud Function using this [official guide](https://firebase.google.com/docs/firestore/solutions/presence). Personally, I find the setup to be quite cumbersome and recommend using RealtimeDB directly - at least until Firestore supports an **onDisconnect** hook.
-{{< /box >}}
-
-There are at least five distinct states that need to be addressed. Keep in mind, you may find additional edge cases beyond these.
-
-1. Signed-in and using app (online 💚)
-2. Signed-in but app is closed (offline 🔴)
-3. Signed-in but on a different browser tab (away 💤)
-4. Signed-out but app is still opened (offline 🔴)
-5. Signed-out and app closed (offline 🔴)
-
-In the database, we keep track of a user's presence under a the **status/{uid}/** node.
-
-{{< figure src="img/rtdb-presence.png" alt="realtime database model for presence system" >}}
-
-In Angular, let's start by generating a service to handle the business logic for presence detection.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-ng g service presence
-{{< /highlight >}}
-
-### Base Service
-
-Our service will start by implementing a series of helpers aimed at making our code composable and readable. Here's a breakdown of each method so far.
-
-- `getPresence` retrieves the presence data from DB as an Observable.
-- `getUser` returns the current user as a Promise.
-- `setPresence` updates the DB with a new presence value.
-- `timestamp` getter for the Firebase server timestamp.
-
-Also, notice how we are setting up a few subscriptions in the constructor - these will be implemented in the following sections and they are responsible for updating the user's status reactively.
-
-{{< file "ngts" "foo.component.ts" >}}
-{{< highlight typescript >}}
-import { Injectable } from '@angular/core';
-import { AngularFireAuth } from '@angular/fire/auth';
-import { AngularFireDatabase } from '@angular/fire/database';
-import * as firebase from 'firebase/app';
-import { tap, map, switchMap, first } from 'rxjs/operators';
-import { TouchSequence } from 'selenium-webdriver';
-import { of } from 'rxjs';
-
-@Injectable({
- providedIn: 'root'
-})
-export class PresenceService {
-
- constructor(private afAuth: AngularFireAuth, private db: AngularFireDatabase) {
- console.log('let there be presence');
- this.updateOnUser().subscribe();
- this.updateOnDisconnect().subscribe();
- this.updateOnAway();
- }
-
-
- getPresence(uid: string) {
- return this.db.object(`status/${uid}`).valueChanges();
- }
-
- getUser() {
- return this.afAuth.authState.pipe(first()).toPromise();
- }
-
-
- async setPresence(status: string) {
- const user = await this.getUser();
- if (user) {
- return this.db.object(`status/${user.uid}`).update({ status, timestamp: this.timestamp });
- }
- }
-
- get timestamp() {
- return firebase.database.ServerValue.TIMESTAMP;
- }
-
- // Implement presence logic here
-
-}
-{{< /highlight >}}
-
-### Online Status 💚
-
-
-The code below takes care of the *online* status. When the user logs in or opens the app, it will switchMap to an Observable of the database connection, then update the logged-in user's presence.
-
-{{< file "ngts" "presence.service.ts" >}}
-{{< highlight typescript >}}
-// Updates status when logged-in connection to Firebase starts
- updateOnUser() {
- const connection = this.db.object('.info/connected').valueChanges().pipe(
- map(connected => connected ? 'online' : 'offline')
- );
-
- return this.afAuth.authState.pipe(
- switchMap(user => user ? connection : of('offline')),
- tap(status => this.setPresence(status))
- );
- }
-{{< /highlight >}}
-
-### Offline Status 🔴
-
-The offline status is dependent on the `onDisconnect` hook, which will run an update when the database connection is lost. Also, the app's signOut handler should update the status because the database connection may still be active after the user logs out.
-
-{{< file "ngts" "presence.service.ts" >}}
-{{< highlight typescript >}}
- updateOnDisconnect() {
- return this.afAuth.authState.pipe(
- tap(user => {
- if (user) {
- this.db.object(`status/${user.uid}`).query.ref.onDisconnect()
- .update({
- status: 'offline',
- timestamp: this.timestamp
- });
- }
- })
- );
- }
-
-async signOut() {
- await this.setPresence('offline');
- await this.afAuth.signOut();
-}
-{{< /highlight >}}
-
-### Away or Idle Status 💤
-
-The away status is completely optional, but it does add a nice touch. We check if the app's browser tab is open using the [Page Visibility API](https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API).
-
-Keep in mind, we are touching the DOM directly here, so this code will not work with server-side rendering or other non-web platforms.
-
-{{< file "ngts" "presence.service.ts" >}}
-{{< highlight typescript >}}
- // User navigates to a new tab, case 3
- updateOnAway() {
- document.onvisibilitychange = (e) => {
-
- if (document.visibilityState === 'hidden') {
- this.setPresence('away');
- } else {
- this.setPresence('online');
- }
- };
- }
-{{< /highlight >}}
-
-
-## Step 2: Show the Status in the UI
-
-At this point, we have all the business logic in place for realtime presence. Let's create a component that will consume the data from the RealtimeDB.
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-ng g component user-status
-{{< /highlight >}}
-
-### Listen to Presence Updates Globally
-
-In most cases, you should start tracking user presence as soon as your app starts. In Angular, we can achieve this by injecting the service in the AppComponent constructor.
-
-{{< file "ngts" "app.component.ts" >}}
-{{< highlight typescript >}}
-export class AppComponent {
- constructor(public presence: PresenceService) {}
-}
-{{< /highlight >}}
-
-### User Status Component
-
-The component takes a UID as an input property, then uses it to read the database.
-
-
-{{< file "ngts" "user-status.component.ts" >}}
-{{< highlight typescript >}}
-import { Component, OnInit, Input } from '@angular/core';
-import { PresenceService } from '../services/presence.service';
-
-@Component({
- selector: 'app-user-status',
- templateUrl: './user.component.html',
- styleUrls: ['./user.component.scss']
-})
-export class UserStatusComponent implements OnInit {
-
- @Input() uid;
-
- presence$;
-
- constructor(private presence: PresenceService) { }
-
- ngOnInit() {
- this.presence$ = this.presence.getPresence(this.uid);
- }
-
-}
-
-{{< /highlight >}}
-
-
-The HTML can use [NgClass](https://angular.io/api/common/NgClass) to conditionally display a green, yellow, or red label based on the presence Observable. Note: the CSS classes below come from [Bulma](https://bulma.io/documentation/modifiers/syntax/), so make sure to replace them with your own styles.
-
-{{< file "html" "foo.component.html" >}}
-{{< highlight html >}}
-
-
- {{ presence.status }}
-
-{{< /highlight >}}
-
-
-Lastly, you need to put the component to use in the app. Generally, this would be done after querying a list/collection of users.
-
-{{< file "html" "some.component.html" >}}
-{{< highlight html >}}
-
-
-
-
- {hits.map((hit) => (
-
- {hit.make} {hit.model}
-
- ))}
-
-
- {{< mvp-chapter name="angular" link="/snippets/sendgrid-angular" >}}
- {{< mvp-chapter name="react" link="/snippets/sendgrid-react" >}}
- {{< mvp-chapter name="vue" link="/snippets/sendgrid-vue" >}}
- {{< mvp-chapter name="svelte" link="/snippets/sendgrid-svelte" >}}
- {{< mvp-chapter name="flutter" link="/snippets/sendgrid-flutter" >}}
-
-
-## Initial Setup
-
-### Initialize Cloud Functions
-
-First, initialize Cloud Functions in your project with the Firebase Tools CLI. I recommend using TypeScript, but it is optional for this lesson.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm i -g firebase-tools
-firebase init functions
-{{< /highlight >}}
-
-### Install SendGrid
-
-Email sending tasks can be handled with the [SendGrid Mail](https://github.com/sendgrid/sendgrid-nodejs/tree/master/packages/mail) package.
-
-{{< highlight text >}}
-cd functions
-npm install @sendgrid/mail
-{{< /highlight >}}
-
-
-### Create an Email Template
-
-SendGrid provides a GUI for emailing templating that supports dynamic data interpolation and versioning. I highly recommending using [transactional templates](https://github.com/sendgrid/sendgrid-nodejs/blob/master/use-cases/transactional-templates.md) to organize your email. Make note of the *template ID*.
-
-{{< figure src="img/sendgrid-template.png" caption="SendGrid transactional template with dynamic values" >}}
-
-### Add the SendGrid API Key to Firebase
-
-Create a new API Key on SendGrid by going to *Settings -> Account Details -> API Keys*. It just needs to provide full access to the Mail Send API.
-
-{{< figure src="img/sendgrid-restricted-apikey.png" caption="SendGrid API Key Settings" >}}
-
-
-Now set the API key and template ID in the Firebase project with the following command.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase functions:config:set sendgrid.key=YOUR_KEY sendgrid.template=TEMPLATE_ID
-{{< /highlight >}}
-
-
-
-## Email Cloud Functions
-
-The following Cloud Functions samples demonstrate how to send transactional email is response to common events, like user sign-up, HTTP, Firestore database writes, and a scheduled time.
-
-Start by setting up your functions code with Firebase Admin and the SendGrid Mail Node SDK.
-
-{{< file "typescript" "functions/src/index.ts" >}}
-{{< highlight typescript >}}
-// Firebase Config
-import * as functions from 'firebase-functions';
-import * as admin from 'firebase-admin';
-admin.initializeApp();
-const db = admin.firestore();
-
-// Sendgrid Config
-import * as sgMail from '@sendgrid/mail';
-
-const API_KEY = functions.config().sendgrid.key;
-const TEMPLATE_ID = functions.config().sendgrid.template;
-sgMail.setApiKey(API_KEY);
-{{< /highlight >}}
-
-
-You may also want to disable `strictNullChecks` mode for this lesson.
-
-{{< file "cog" "tsconfig.json" >}}
-{{< highlight json >}}
-{
- "compilerOptions": {
- // ...omitted
- "strict": true,
- "strictNullChecks": false, // <-- add this line
- "target": "es2017"
- },
-}
-
-{{< /highlight >}}
-
-### Auth - User Triggered Events
-
-The auth function will run when a new user is created. This will happen the first time they log in with OAuth or when a new user is created with email/password auth.
-
-{{< file "typescript" "functions/src/index.ts" >}}
-{{< highlight typescript >}}
-// Sends email to user after signup
-export const welcomeEmail = functions.auth.user().onCreate(user => {
-
- const msg = {
- to: user.email,
- from: 'hello@fireship.io',
- templateId: TEMPLATE_ID,
- dynamic_template_data: {
- subject: 'Welcome to my awesome app!',
- name: user.displayName,
- },
- };
-
- return sgMail.send(msg);
-
-});
-{{< /highlight >}}
-
-### HTTP - Call Functions Directly
-
-In many cases, you may want to call functions from your frontend app with a data payload. [Callable Functions](https://firebase.google.com/docs/functions/callable) make this task very simple because you can easily validate that the user is logged in with an email address before passing off a request to SendGrid.
-
-You must return a JS object from a callable function that can be converted to JSON, so do NOT simply return the SendGrid promise because it resolves to non-serializable data.
-
-{{< file "typescript" "functions/src/index.ts" >}}
-{{< highlight typescript >}}
-// Sends email via HTTP. Can be called from frontend code.
-export const genericEmail = functions.https.onCall(async (data, context) => {
-
- if (!context.auth && !context.auth.token.email) {
- throw new functions.https.HttpsError('failed-precondition', 'Must be logged with an email address');
- }
-
- const msg = {
- to: context.auth.token.email,
- from: 'hello@fireship.io',
- templateId: TEMPLATE_ID,
- dynamic_template_data: {
- subject: data.subject,
- name: data.text,
- },
- };
-
- await sgMail.send(msg);
-
- // Handle errors here
-
- // Response must be JSON serializable
- return { success: true };
-
-});
-{{< /highlight >}}
-
-
-
-### Firestore - Database Triggered Events
-
-Firestore provides an excellent mechanism for triggering events for transactional email. The data model below represents posts and comments. The function code will find the `authorEmail` when a comment is created under the post.
-
-{{< figure src="img/sendgrid-firestore.png" caption="Firestore data model for posts/comments. Email will send when a new comment is created." >}}
-
-{{< file "typescript" "functions/src/index.ts" >}}
-{{< highlight typescript >}}
-
-// Emails the author when a new comment is added to a post
-export const newComment = functions.firestore.document('posts/{postId}/comments/{commentId}').onCreate( async (change, context) => {
-
- // Read the post document
- const postSnap = await db.collection('posts').doc(context.params.postId).get();
-
- // Raw Data
- const post = postSnap.data();
- const comment = change.data();
-
- // Email
- const msg = {
- to: post.authorEmail,
- from: 'hello@fireship.io',
- templateId: TEMPLATE_ID,
- dynamic_template_data: {
- subject: `New Comment on ${post.title}`,
- name: post.displayName,
- text: `${comment.user} said... ${comment.text}`
- },
- };
-
- // Send it
- return sgMail.send(msg);
-
-});
-{{< /highlight >}}
-
-### Cron - Scheduled Events
-
-The final function we'll look at sends a batch of emails on a specific time schedule. If you want to dynamically schedule multiple emails, checkout the [Firebase Task Queue](/lessons/cloud-functions-scheduled-time-trigger/) lesson.
-
-{{< file "typescript" "functions/src/index.ts" >}}
-{{< highlight typescript >}}
-// Send a summary email to all users
-export const weeklySummary = functions.pubsub.schedule('every friday 05:00').onRun(async context => {
- const userSnapshots = await admin.firestore().collection('users').get();
-
- const emails = userSnapshots.docs.map(snap => snap.data().email);
-
- const msg = {
- to: emails,
- from: 'hello@fireship.io',
- templateId: TEMPLATE_ID,
- dynamic_template_data: {
- subject: `Your Weekly Summary`,
- text: 'Insert summary here...'
- },
- };
-
- return sgMail.send(msg);
-
-});
-{{< /highlight >}}
-
-
-### Deploy and Test
-
-Deploy your functions. You can test them from the Firebase console, or follow one of the frontend framework integrations below.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase deploy --only functions
-{{< /highlight >}}
-
-{{< figure src="img/result-email.png" caption="Result in Gmail" >}}
-
-
-## Next Steps
-
-You now have all the backend infrastructure in place for transactional email. The next step is to learn how to use these functions from your frontend app.
-
-
- {{< mvp-chapter name="angular" link="/snippets/sendgrid-angular" >}}
- {{< mvp-chapter name="react" link="/snippets/sendgrid-react" >}}
- {{< mvp-chapter name="vue" link="/snippets/sendgrid-vue" >}}
- {{< mvp-chapter name="svelte" link="/snippets/sendgrid-svelte" >}}
- {{< mvp-chapter name="flutter" link="/snippets/sendgrid-flutter" >}}
-
diff --git a/hugo/content/lessons/sql-firebase-typeorm/index.md b/hugo/content/lessons/sql-firebase-typeorm/index.md
deleted file mode 100644
index d88fc01b1..000000000
--- a/hugo/content/lessons/sql-firebase-typeorm/index.md
+++ /dev/null
@@ -1,367 +0,0 @@
----
-title: MySQL on Cloud Functions
-lastmod: 2019-08-06T12:31:06-07:00
-publishdate: 2019-08-06T12:31:06-07:00
-author: Jeff Delaney
-draft: false
-description: Learn how to use a relational MySQL database with Firebase Cloud Functions and TypeORM
-tags:
- - sql
- - typescript
- - firebase
- - cloud-functions
-
-youtube: sSDHdWrSqLY
-github: https://github.com/fireship-io/201-cloud-functions-sql-typeorm
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-versions:
- typeorm: 0.2.18
- firebase-functions: 3.1.0
- typescript: 3.5.3
----
-
-Firebase's NoSQL databases are excellent for flexibility and scale, but there are times when a traditional relational SQL database is a better tool for the job (or you may not have a choice with a legacy system). Does that mean you should ditch the Firebase platform altogether? Of course not! In fact, connecting a [Cloud SQL](https://cloud.google.com/sql/docs/) instance to Firebase Cloud Functions is one of the easiest ways to hook up a database to a web or mobile app.
-
-The following lesson will show you how to **connect a MySQL database to Firebase** and use [TypeORM](https://typeorm.io/) to write efficient, type-safe, readable backend code.
-
-## Initial Setup
-
-Start from an empty directory in your editor. Make sure you have the [Google Cloud SDK](https://cloud.google.com/sdk/) and NodeJS installed on your system.
-
-### Initialize Cloud Functions
-
-Initialize Cloud Functions and choose TypeScript as the language.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm i -g firebase-tools
-
-firebase init functions
-{{< /highlight >}}
-
-### Create a Cloud MySQL Instance
-
-Head over the to the Google Cloud Platform console and create a new [MySQL](https://www.mysql.com/) instance. You also have the option for Postgres, but the setup is slightly different. Make a note of the *instance connection name*.
-
-{{< figure src="img/cloud-sql-instance-create.png" caption="Choose MySQL for this lesson" >}}
-
-{{< figure src="img/gcp-cloud-sql.png" caption="Cloud SQL instance running on GCP. Copy the instance connection name." >}}
-
-### Install the Cloud SQL Proxy for Local Testing
-
-A proxy is required connect to a Cloud SQL database locally. [Download the binary](https://cloud.google.com/sql/docs/mysql/quickstart-proxy-test#install-proxy) for your OS and save it to the root of your project.
-
-{{< figure src="img/sql-proxy-gcp.png" caption="Download the Cloud SQL proxy binary" >}}
-
-Run the command below with your connection name. You should see the message: **Ready for new connections**.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-./cloud_sql_proxy -instances=YOUR_CONNECTION=tcp:3306
-{{< /highlight >}}
-
-
-### Install TypeORM with Cloud SQL
-
-The final setup step is to install TypeORM and its dependencies in the Cloud Functions environment.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-cd functions
-npm install reflect-metadata typeorm mysql
-{{< /highlight >}}
-
-Update the default TS config with the following changes for TypeORM.
-
-{{< file "cog" "functions/tsconfig.json" >}}
-{{< highlight json >}}
-{
- "compilerOptions": {
- // ...
- "strict": false,
- "experimentalDecorators": true,
- "emitDecoratorMetadata": true,
- },
-}
-{{< /highlight >}}
-
-
-
-## Connect to the MySQL Database
-
-The code in this section connects a *development* database for local testing and a *production* database for live data. Create the database instances from the GCP dashboard.
-
-{{< figure src="img/cloud-sql-databases.png" caption="Create two databases, one for development and production" >}}
-
-Connecting MySQL with TypeORM is slightly different in the Cloud Functions environment because they are ephemeral compute instances and the connection is not long-lived. In other words, the same database connection may or may not be available between requests.
-
-### Connection Options
-
-The connection below is setup specifically for Google Cloud SQL. Make sure to update the username/password and connection name for your instance.
-
-{{< file "typescript" "src/config.ts" >}}
-{{< highlight typescript >}}
-import { ConnectionOptions, Connection, createConnection, getConnection } from 'typeorm';
-import 'reflect-metadata';
-
-// Will be true on deployed functions
-export const prod = process.env.NODE_ENV === 'production';
-
-export const config: ConnectionOptions = {
- name: 'fun',
- type: 'mysql',
- host: '127.0.0.1',
- port: 3306,
- username: 'root', // review
- password: 'root', // review
- database: 'development',
- synchronize: true,
- logging: false,
- entities: [
- 'lib/entity/**/*.js'
- ],
-
- // Production Mode
- ...(prod && {
- database: 'production',
- logging: false,
- // synchronize: false,
- extra: {
- socketPath: '/cloudsql/YOUR_CONNECTION_NAME' // change
- },
- })
- }
-{{< /highlight >}}
-
-### Cloud Functions Connection
-
-The `connect` function looks for an existing database connection. If available we use it for a slight performance gain, otherwise a new connection is created.
-
-{{< highlight typescript >}}
-export const connect = async () => {
-
- let connection: Connection;
-
- try {
- connection = getConnection(config.name)
- console.log(connection)
- } catch(err) {
- connection = await createConnection(config);
- }
-
- return connection;
-}
-{{< /highlight >}}
-
-## Create an Entity
-
-A TypeORM [entity](https://typeorm.io/#/entities) is a class that maps TypeScript code to a database table.
-
-### Hippo Entity
-
-{{< file "typescript" "src/entity/Hippo.ts" >}}
-{{< highlight typescript >}}
-import { Entity, PrimaryGeneratedColumn, Column, BaseEntity } from "typeorm";
-
-@Entity()
-export class Hippo extends BaseEntity {
-
- @PrimaryGeneratedColumn()
- id: number;
-
- @Column()
- name: string;
-
- @Column()
- weight: number;
-
- @Column()
- createdAt: Date;
-
-}
-{{< /highlight >}}
-
-
-## Cloud Functions
-
-
-### Write to the Database
-
-The first function creates a new record in the database. When called the function will make a connection to the database, then reference the Hippo [repository](https://typeorm.io/#/working-with-repository). The repository is like a reference that exposes methods to read, write, and query a database table. In this example, we `save` a new record and send the response back to the client.
-
-{{< file "typescript" "src/index.ts" >}}
-{{< highlight typescript >}}
-import * as functions from 'firebase-functions';
-import { connect } from './config';
-
-import { Hippo } from './entity/Hippo';
-
-export const createHippo = functions.https.onRequest(async (request, response) => {
-
- const { name, weight } = request.body;
-
- try {
- const connection = await connect();
-
- const repo = connection.getRepository(Hippo);
-
- const newHippo = new Hippo();
- newHippo.name = name;
- newHippo.weight = weight;
-
-
- const savedHippo = await repo.save(newHippo);
-
- response.send(savedHippo);
-
- } catch (error) {
- response.send(error)
- }
-
-});
-{{< /highlight >}}
-
-
-
-
-
-
-### Query the Database
-
-TypeORM provides a large collection of methods to reading and querying data. The function below queries all Hippo entities or rows from the database.
-
-{{< file "typescript" "src/index.ts" >}}
-{{< highlight typescript >}}
-export const getHippos = functions.https.onRequest(async (request, response) => {
-
- const connection = await connect();
- const hippoRepo = connection.getRepository(Hippo);
-
- // Get all rows
- const allHippos = await hippoRepo.find();
-
- response.send(allHippos);
-
-});
-{{< /highlight >}}
-
-### Serve the Cloud Functions
-
-Run the command below to serve the Cloud Functions on localhost.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase serve --only functions
-{{< /highlight >}}
-
-I highly recommend using a REST client like [Insomnia](https://insomnia.rest/) to make requests to functions efficiently.
-
-{{< figure src="img/http-insomnia.png" >}}
-
-
-## Advanced
-
-### Relational Data
-
-TypeORM provides a variety of decorators for modeling relational data.
-
-In the code below, a second entity or database table `Hat` is created. Each hat record is owned by one `Hippo`, but a hippo can own multiple hats.
-
-{{< file "typescript" "src/entity/Hippo.ts" >}}
-{{< highlight typescript >}}
-import { Hat } from './Hat';
-
-@Entity()
-export class Hippo extends BaseEntity {
-
- //...
-
- @PrimaryGeneratedColumn()
- id: number;
-
- @OneToMany(type => Hat, hat => hat.owner)
- hats: Hat[];
-}
-{{< /highlight >}}
-
-The `owner` field references the primary key or ID of a Hippo entity.
-
-{{< file "typescript" "src/entity/Hat.ts" >}}
-{{< highlight typescript >}}
-import { Hippo } from './Hippo'
-
-@Entity()
-export class Hat extends BaseEntity {
-
- @PrimaryGeneratedColumn()
- id: number;
-
- @ManyToOne(type => Hippo, hippo => hippo.hats)
- owner: Hippo;
-}
-{{< /highlight >}}
-
-The entity relationship allows us to make a JOIN query to the database to query all Hippos, along with all the hats they own.
-
-{{< file "typescript" "src/index.ts" >}}
-{{< highlight typescript >}}
-export const getHippos = functions.https.onRequest(async (request, response) => {
-
- const connection = await connect();
- const hippoRepo = connection.getRepository(Hippo);
-
- // JOIN Query
- const hipposWearingHats = await hippoRepo
- .createQueryBuilder('hippo')
- .leftJoinAndSelect('hippo.hats', 'hat')
- .getMany();
-
- response.send(hipposWearingHats);
-
-});
-
-
-export const createHat = functions.https.onRequest(async (request, response) => {
-
- const { owner, color } = request.body;
-
- const connection = await connect();
- const repo = connection.getRepository(Hat);
-
- const newHat = new Hat();
- newHat.owner = owner;
- newHat.color = color;
-
- const savedHat = await repo.save(newHat);
- response.send(savedHat);
-});
-
-{{< /highlight >}}
-
-
-### Listeners
-
-A TypeORM [listener](https://typeorm.io/#/listeners-and-subscribers) allows you hook into the database lifecycle. For example, we may want to add a timestamp to a record before it is inserted in the database.
-
-{{< file "typescript" "entity/Hippo.ts" >}}
-{{< highlight typescript >}}
-@Entity()
-export class Hippo extends BaseEntity {
-
- //...
-
- @Column()
- createdAt: Date;
-
-
- @BeforeInsert()
- addTimestamp() {
- this.createdAt = new Date();
- }
-}
-{{< /highlight >}}
diff --git a/hugo/content/lessons/stripe-elements-angular/index.md b/hugo/content/lessons/stripe-elements-angular/index.md
deleted file mode 100644
index 5da100ef5..000000000
--- a/hugo/content/lessons/stripe-elements-angular/index.md
+++ /dev/null
@@ -1,286 +0,0 @@
----
-title: Stripe Elements and Checkout with Angular
-lastmod: 2019-03-04T08:48:04-07:00
-publishdate: 2019-03-04T08:48:04-07:00
-author: Jeff Delaney
-draft: false
-description: Create a form that collects and validates credit card details in Angular with Stripe Elements & Checkout.
-tags:
- - stripe
- - angular
- - firebase
- - payments
-
-youtube: zTj0FZHunNE
-github: https://github.com/fireship-io/171-stripe-elements-angular
-
-versions:
- angular: 7.3
- firebase: 5.5
- stripejs: 3
----
-
-💰 Are you building a payment solution with Stripe? Consider enrolling the [Stripe JavaScript Master Course](/courses/stripe).
-
-[Stripe](https://stripe.com/docs/stripe-js) provides several JavaScript libraries - Stripe Elements & Checkout - that makes it easy to collect and validate payment sources like credit cards, bank accounts, and more. The following lesson will show you how to integrate Stripe's clientside JS packages into an Angular application.
-
-## Step 0. Prerequisites
-
-{{< box icon="scroll" class="box-blue" >}}
-This lesson only covers the frontend code. Building a custom pament solution also requires backend code, which is covered in the [Stripe Payments Master Course](/courses/stripe-payments/) using callable Firebase Cloud Functions.
-{{< /box >}}
-
-
-1. {{< prereq "install-angularfire" >}}
-1. Signup for a [Stripe Account](https://stripe.com/)
-
-
-## Step 1. Initial Setup
-
-
-### User Authentication
-
-It's possible to accept payments without user authentication in place, but most payment systems are coupled to the app's user record. Below is a simplified authentiaction service, but make sure to watch the [Firebase OAuth](/lessons/angularfire-google-oauth/) with Angular lesson for in-depth coverage of this topic. Basically, we just sign-in with Google and provide a helper method to return the current user as a promise.
-
-{{< file "ngts" "auth.service.ts" >}}
-{{< highlight typescript >}}
-import { Injectable } from '@angular/core';
-
-import { auth } from 'firebase/app';
-import { AngularFireAuth } from '@angular/fire/auth';
-import { first } from 'rxjs/operators';
-
-@Injectable({ providedIn: 'root' })
-export class AuthService {
-
- constructor(private afAuth: AngularFireAuth) {}
-
- googleSignIn() {
- const provider = new auth.GoogleAuthProvider();
- return this.oAuthLogin(provider);
- }
-
- async getUser() {
- return this.afAuth.authState.pipe(first()).toPromise();
- }
-
-}
-{{< /highlight >}}
-
-
-### Optional: Install Stripe Types
-
-Although optional, I highly recommended installing the [typings for Stripe Checkout](https://www.npmjs.com/package/@types/stripe-checkout) and [Elements](https://www.npmjs.com/package/@types/stripe-v3) to get autocomplete in your IDE with TypeScript.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm install --D @types/stripe-checkout
-npm install --D @types/stripe-v3
-{{< /highlight >}}
-
-
-## Stripe Checkout - Quick and Easy
-
-[Stripe Checkout](https://stripe.com/docs/checkout) is the quickest and easiest way to accept credit card payments, but does not offer much flexibility when it comes to customizing the checkout experience.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-ng g component checkout
-{{< /highlight >}}
-
-{{< vimeo 321477809 >}}
-
-### Add Stripe Checkout to the App
-
-First, we need to include stripe's checkout script in the head of the HTML.
-
-{{< file "html" "index.html" >}}
-{{< highlight html >}}
-
-{{< /highlight >}}
-
-### Create a Checkout Handler
-
-Next, let's create a component that can handle the checkout. The `source` callback is called after stripe responds with a valid payment source. Your job is send this data to your backend server and process a charge or attach it to a customer record. The example below uses a callable Firebase Cloud Function - again, this process is covered in detail the Stripe Payments Master Course.
-
-{{< file "ngts" "checkout.component.ts" >}}
-{{< highlight typescript >}}
-import { Component, OnInit, Input, HostListener } from '@angular/core';
-import { AuthService } from '../services/auth.service';
-import { AngularFireFunctions } from '@angular/fire/functions';
-
-declare var StripeCheckout: StripeCheckoutStatic;
-
-@Component({
- selector: 'app-checkout',
- templateUrl: './checkout.component.html',
- styleUrls: ['./checkout.component.scss']
-})
-export class CheckoutComponent implements OnInit {
-
- constructor(private auth: AuthService, private functions: AngularFireFunctions) {}
-
- @Input() amount;
- @Input() description;
-
- handler: StripeCheckoutHandler;
-
- confirmation: any;
- loading = false;
-
- ngOnInit() {
- this.handler = StripeCheckout.configure({
- key: 'pk_test_your_key',
- image: '/your-avatar.png',
- locale: 'auto',
- source: async (source) => {
- this.loading = true;
- const user = await this.auth.getUser();
- const fun = this.functions.httpsCallable('stripeCreateCharge');
- this.confirmation = await fun({ source: source.id, uid: user.uid, amount: this.amount }).toPromise();
- this.loading = false;
-
- }
- });
- }
-
- // Open the checkout handler
- async checkout(e) {
- const user = await this.auth.getUser();
- this.handler.open({
- name: 'Fireship Store',
- description: this.description,
- amount: this.amount,
- email: user.email,
- });
- e.preventDefault();
- }
-
- // Close on navigate
- @HostListener('window:popstate')
- onPopstate() {
- this.handler.close();
- }
-
-}
-
-{{< /highlight >}}
-
-
-The HTML is dead simple. Just bind the `checkout` method to a button click.
-
-{{< file "html" "checkout.component.html" >}}
-{{< highlight html >}}
-
-
- Buy for ${{ amount / 100 }}.00
-
-
-
-Loading....
-{{< /highlight >}}
-
-
-## Stripe Elements - Highly Customizable
-
-Stripe Elements gives you more fine-grained control over payment form, but without need to code up all the complex validation logic from scratch.
-
-{{< vimeo 321487596 >}}
-
-### Add Elements to the HTML
-
-{{< file "html" "index.html" >}}
-{{< highlight html >}}
-
-{{< /highlight >}}
-
-### Mount a Card Form to a Component
-
-The Elements Card follows a similar process to Checkout, but we can customize each field of the form itself with our own styles and error handling.
-
-{{< file "ngts" "elements.component.ts" >}}
-{{< highlight typescript >}}
-import { Component, OnInit, ViewChild, ElementRef, Input } from '@angular/core';
-import { AuthService } from '../services/auth.service';
-import { AngularFireFunctions } from '@angular/fire/functions';
-
-declare var Stripe; // : stripe.StripeStatic;
-
-@Component({
- selector: 'app-elements',
- templateUrl: './elements.component.html',
- styleUrls: ['./elements.component.scss']
-})
-export class ElementsComponent implements OnInit {
-
-
- constructor(private auth: AuthService, private functions: AngularFireFunctions) {}
-
- @Input() amount: number;
- @Input() description: string;
- @ViewChild('cardElement') cardElement: ElementRef;
-
- stripe; // : stripe.Stripe;
- card;
- cardErrors;
-
- loading = false;
- confirmation;
-
-
- ngOnInit() {
- this.stripe = Stripe('pk_test_your_key');
- const elements = this.stripe.elements();
-
- this.card = elements.create('card');
- this.card.mount(this.cardElement.nativeElement);
-
- this.card.addEventListener('change', ({ error }) => {
- this.cardErrors = error && error.message;
- });
- }
-
- async handleForm(e) {
- e.preventDefault();
-
- const { source, error } = await this.stripe.createSource(this.card);
-
- if (error) {
- // Inform the customer that there was an error.
- this.cardErrors = error.message;
- } else {
- // Send the token to your server.
- this.loading = true;
- const user = await this.auth.getUser();
- const fun = this.functions.httpsCallable('stripeCreateCharge');
- this.confirmation = await fun({ source: source.id, uid: user.uid, amount: this.amount }).toPromise();
- this.loading = false;
-
- }
- }
-}
-{{< /highlight >}}
-
-The HTML requires a form with a template variable that we can mount the card to, which is the *cardElement* in this example. When the form is submitted, the *handleForm* method will send the card details to Stripe and process a charge on our server.
-
-
-{{< file "html" "elements.component.html" >}}
-{{< highlight html >}}
-
-
-{{< /highlight >}}
diff --git a/hugo/content/lessons/stripe-payment-intents-tutorial/index.md b/hugo/content/lessons/stripe-payment-intents-tutorial/index.md
deleted file mode 100644
index 30dd48a1e..000000000
--- a/hugo/content/lessons/stripe-payment-intents-tutorial/index.md
+++ /dev/null
@@ -1,354 +0,0 @@
----
-title: Stripe Payment Intents Tutorial
-lastmod: 2019-10-22T18:05:34-07:00
-publishdate: 2019-10-22T18:05:34-07:00
-author: Jeff Delaney
-draft: false
-description: Learn how to work with the Stripe Payment Intents API and validate cards with 3D Secure.
-tags:
- - stripe
- - svelte
- - node
- - cloud-functions
-
-youtube: 1XKRxeo9414
-github: https://github.com/fireship-io/212-stripe-svelte
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-Stripe provides a huge API with everything you could ever want to build a complex payment system. Recent changes in the online payments landscape have resulted in significant changes to the API, most notably the [Payment Intents API](https://stripe.com/docs/payments/payment-intents). The following lesson demonstrates two modern strategies for accepting one-time payments - (1) Checkout and (2) Stripe Elements with Payment Intents.
-
-As of September 2019, many European banks now require their customers to validate payments using [3D secure standard](https://stripe.com/guides/3d-secure-2) or Strong Customer Authentication SCA. As a developer, this means some users may be required to authenticate on their bank's website to validate a purchase. Both strategies outlined below are compatible with 3D secure authentication.
-
-
-## Strategy 1 - Stripe Checkout
-
-Stripe Checkout is a service that makes it possible to accept payments without any backend code and just a few lines of frontend code. It works by linking your product SKUs to a hosted checkout page.
-
-- 🟢 Super easy to implement and works with 3D secure.
-- 🔻 Limited UI customization options.
-
-
-
-### Create a Product
-
-Head over the Stripe dashboard and create a product. Make a note of the SKU.
-
-{{< figure src="img/stripe-new-product.png" >}}
-
-### Add Stripe.js to Svelte
-
-Create a new [Svelte](https://svelte.dev/) app and add the Stripe.js script tag to the head of the main HTML file.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npx degit sveltejs/my-svelte-store
-{{< /highlight >}}
-
-{{< file "html" "public/index.html" >}}
-{{< highlight html >}}
-
-
-
-
-
-{{< /highlight >}}
-
-### Product Component
-
-Stripe can handle payment for a product (or multiple products and subscriptions) with the `redirectToCheckout` method. This will redirect the user to a page hosted by Stripe with a credit card for to pay for your products. The user can be directed back to a URL you specify when the payment is finished or canceled.
-
-{{< figure src="img/stripe-api-keys.png" caption="Initialize Stripe in Svelte with the publishable key" >}}
-
-
-{{< file "svelte" "Product.svelte" >}}
-{{< highlight html >}}
-
-
-
-
- Stripe Checkout
-
- ⌚
-
- Buy me ${amount / 100}
-
-
-{{< /highlight >}}
-
-Now you can use this component in your Svelte app like so:
-
-{{< file "svelte" "App.svelte" >}}
-{{< highlight html >}}
-My Svelte Store
-
-
-
- Payment Intents with Stripe Elements
-
- ⌚
-
-
-
-
- Submit Payment for ${amount / 100}
-
-
-
-{{< /highlight >}}
-
-## Fulfill Purchases with a Webhook
-
-Now that the app can accept payments, we need to do our part an fulfill the actual product. The implementation details will vary widely based on the app's business logic, but a digital product can be delivered with a [webhook](https://en.wikipedia.org/wiki/Webhook). Stripe will send data about the payment to this endpoint immediately after the charge is processed, which can be used to update a database, send an email, push notification, and so on.
-
-
-{{< figure src="img/stripe-webhook-setup.png" caption="Create a webhook that points to your deploy Cloud Function endpoint" >}}
-
-
-{{< file "typescript" "index.ts" >}}
-{{< highlight typescript >}}
-app.post('/webhook', async (req, res) => {
- const sig = req.headers['stripe-signature'] as string;
-
-
- const endpointSecret = 'whsec_...';
-
- let event;
-
- try {
- event = stripe.webhooks.constructEvent(req.body.rawBody, sig, endpointSecret);
- } catch (err) {
- res.status(400).end();
- return;
- }
-
- // Handle Type of webhook
-
- const intent = event.data.object;
-
- switch (event.type) {
- case 'payment_intent.succeeded':
-
- // Update database
- // Send email
- // Notify shipping department
-
- console.log("Succeeded:", intent.id);
- break;
- case 'payment_intent.payment_failed':
- const message = intent.last_payment_error && intent.last_payment_error.message;
- console.log('Failed:', intent.id, message);
- break;
- }
-
- res.sendStatus(200);
-});
-{{< /highlight >}}
diff --git a/hugo/content/lessons/svelte-v3-overview-firebase/index.md b/hugo/content/lessons/svelte-v3-overview-firebase/index.md
deleted file mode 100644
index 1c13d6fcc..000000000
--- a/hugo/content/lessons/svelte-v3-overview-firebase/index.md
+++ /dev/null
@@ -1,262 +0,0 @@
----
-title: Svelte Realtime Todo List with Firebase
-lastmod: 2019-04-24T07:01:58-07:00
-publishdate: 2019-04-24T07:01:58-07:00
-author: Jeff Delaney
-draft: false
-description: Build a realtime ToDo list with Svelte 3 and Firebase (RxFire)
-tags:
- - svelte
- - firebase
- - rxjs
-
-youtube: 043h4ugAj4c
-github: https://github.com/fireship-io/182-svelte-firebase
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-
-[Svelte](https://svelte.dev/) 3 was [announced](https://twitter.com/Rich_Harris/status/1120342713843507201) recently and it delivers a refreshing alternative to the big three component frameworks/libraries of React, Angular, and Vue. In fact, calling it a framework/library would not be very accurate, because Svelte is actually a *compiler* that turns your code into Vanilla JS, meaning it does not need to ship the entire framework in the JS bundle. Its focus on simplicity really stands out and makes for a very developer-friendly JavaScript experience.
-
-I highly recommend watching the video from Svelte's creator, Rich Harris, to get a better of the low-level engineering decisions that make this tool special.
-
-
-{{< youtube AdNJ3fydeao >}}
-
-
-## Realtime Todo List
-
-Our goal is to build an authenticated realtime todo list with Svelte 3 and Firebase, similar to the demo below:
-
-{{< vimeo 332304365 >}}
-
-### Initial Setup
-
-Let's start with a blank Svelte project and install [RxFire](https://github.com/firebase/firebase-js-sdk/tree/master/packages/rxfire).
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npx degit sveltejs/template realtime-todos
-cd realtime-todos
-
-npm install
-npm i rxfire firebase rxjs
-
-npm run dev
-{{< /highlight >}}
-
-Next, head over the the [Firebase Console](https://console.firebase.google.com/) and grab your web app credentials. Create a file to handle the initialization of Firebase.
-
-{{< file "js" "firebase.js" >}}
-{{< highlight javascript >}}
-import firebase from 'firebase/app';
-import 'firebase/auth';
-import 'firebase/firestore';
-var firebaseConfig = {
- // ...your firebase credentials
-};
-
-firebase.initializeApp(firebaseConfig);
-
-export const auth = firebase.auth();
-export const googleProvider = new firebase.auth.GoogleAuthProvider();
-
-export const db = firebase.firestore();
-{{< /highlight >}}
-
-## User Authentication
-
-Our first milestone is to create a component that allows the user to login and logout using their Google account.
-
-### Login
-
-We can handle the login process by binding the Firebase popup logic to a button click event with Svelte ``
-
-The `authState` function is provided by RxFire and contains an Observable of the user's authentication state. When logged-in, it provides basic Google account data like displayName, email, photoURL, etc. When logged-out, it is null.
-
-Keep in mind, we will be creating the `Todos` and `Profile` components in the upcoming steps.
-
-{{< file "svelte" "App.svelte" >}}
-{{< highlight html >}}
-
-
-
-
-{#if user}
- auth.signOut() }>Logout
-
- Signin with Google
-
-{/if}
-
-{{< /highlight >}}
-
-### User Profile
-
-When a user is logged-in, we can pass the props down to a child (dumb) component used for data presentation only. The `export` keyword makes it possible to pass a value from the parent the the child.
-
-{{< file "svelte" "Profile.svelte" >}}
-{{< highlight html >}}
-
-
-
-Hi { displayName }!
-
-Your userID is { uid }
-{{< /highlight >}}
-
-
-## Firestore Todo List
-
-The todo is just a document that tells us who created it, along with some text and a boolean status. We can toggle the status to mark a todo complete or incomplete.
-
-{{< figure src="img/todo-document-model.png" caption="Data model of todo item in Firestore" >}}
-
-### Todo Item
-
-The `TodoItem` is a dumb/presentational component that displays data and emits custom events back up to the parent. When the user clicks the remove 🗑️ button it will emit a [CustomEvent](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) that tells the parent which document ID to remove from the database. Similarly, we can toggle the *complete* status by clicking the ✔️ or ❌ buttons.
-
-
-{{< file "svelte" "TodoItem.svelte" >}}
-{{< highlight html >}}
-
-
-
-
-
-
-
-{#if complete}
- { text }
- ✔️
-{:else}
- { text }
- ❌
-{/if}
-
- 🗑
-
-
-{{< /highlight >}}
-
-### The Todo List
-
-The `TodoList` is a smart component that queries that data and interacts with the database. The `$` used in front the *todos* in the each loop will automatically subscribe and unsubscribe to the Observable - similar to the async pipe in Angular.
-
-{{< file "svelte" "Todos.svelte" >}}
-{{< highlight html >}}
-
-
-
-
-
- {#each $todos as todo}
-
-
-
-
-Add Task
-{{< /highlight >}}
-
-You need a composite index to run the database query in the code above.
-
-{{< figure src="img/composite-index.png" caption="Check the browser error logs for a link to create this index" >}}
-
-## The End
-
-That's it! I can confidently say that Svelte has been the easiest JS component library to learn and start putting to use in a productive way. This is partly due to my background with other JS frameworks, but also due the fact that Svelte focuses on simplicity, has amazing docs, and creates powerful abstractions that just fit well with native DOM apis.
diff --git a/hugo/content/lessons/tailwind-tutorial/index.md b/hugo/content/lessons/tailwind-tutorial/index.md
deleted file mode 100644
index 308a4192a..000000000
--- a/hugo/content/lessons/tailwind-tutorial/index.md
+++ /dev/null
@@ -1,165 +0,0 @@
----
-title: Tailwind Tips & Tricks
-lastmod: 2021-10-19T08:11:26-07:00
-publishdate: 2021-10-19T08:11:26-07:00
-author: Jeff Delaney
-draft: false
-description: Tips & Tricks for learning Tailwind CSS
-tags:
- - css
- - tailwind
- - react
-
-youtube: pfaSUYaSgRo
-github: https://github.com/fireship-io/tailwind-dashboard
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-The following tutorial will get you up and running with [Tailwind CSS](https://tailwindcss.com/), empowering you to build a beautiful, responsive, and animated websites quickly. We will build a side navigation menu inspired by Discord.
-
-## Setup
-
-### Install the Tailwind VS Code extension
-
-Install the [Tailwind VS Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) extension.
-
-### Use a JS Framework
-
-Feel free to use the JS framework of your choice. This tutorial uses [Create React App](https://tailwindcss.com/docs/guides/create-react-app).
-
-## Discord-Inspired Icon Navbar
-
-### Make the App a Flexible Container
-
-Create a [flexbox](https://youtu.be/K74l26pE4YA) row by simply adding the flex utility to the parent element.
-
-{{< file "js" "App.js" >}}
-```javascript
-function App() {
- return (
-
-
- );
-}
-```
-
-### Position the Sidebar
-
-Combine Tailwind utility classes to position the sidebar. When hovering over each class in VS Code, it will display its true CSS values.
-
-{{< file "js" "SideBar.js" >}}
-```javascript
-const SideBar = () => {
- return (
-
-
- );
-};
-```
-
-### Add Icon Buttons
-
-To quickly add an icon button to the navbar, install react-icons.
-
-{{< file "terminal" "command line" >}}
-```bash
-npm install react-icons
-```
-
-{{< file "js" "SideBar.js" >}}
-```javascript
-import { BsPlus, BsFillLightningFill } from 'react-icons/bs';
-import { FaFire, FaPoo } from 'react-icons/fa';
-
-const SideBar = () => {
- return (
-
-
- );
-};
-
-const SideBarIcon = ({ icon }) => (
-
- {icon}
-
-);
-```
-
-### Use Apply to Create Custom Classes
-
-The `@apply` directive allows you to compose custom CSS classes by combining Tailwind classes. It can be useful in situations where extracting a JS component does not make sense.
-
-{{< file "css" "index.css" >}}
-```css
-@layer components {
-
- .sidebar-icon {
- @apply relative flex items-center justify-center
- h-12 w-12 mt-2 mb-2 mx-auto shadow-lg
- bg-gray-800 text-green-500
- hover:bg-green-600 hover:text-white
- rounded-3xl hover:rounded-xl
- transition-all duration-300 ease-linear
- cursor-pointer;
- }
-}
-```
-
-## Animated Tooltips
-
-### Create Tooltip Container
-
-Each icon button has a tooltip as a child that is invisible by default.
-
-{{< file "js" "SideBar.js" >}}
-```javascript
-const SideBarIcon = ({ icon, text = 'tooltip 💡' }) => (
-
- {icon}
-
-
-
-);
-```
-
-{{< file "css" "index.css" >}}
-```css
- .sidebar-tooltip {
- @apply absolute w-auto p-2 m-2 min-w-max left-14
- rounded-md shadow-md
- text-white bg-gray-900
- text-xs font-bold
- transition-all duration-100 scale-0 origin-left;
- }
-```
-
-
-### Animated with Group
-
-Create groups to animate a child when the state of the parent changes.
-
-The tailwind `group` class does not work within `@apply`. It must be used inline.
-
-{{< file "js" "SideBar.js" >}}
-```javascript
-const SideBarIcon = ({ icon, text = 'tooltip 💡' }) => (
-
- {icon}
-
-
-
-);
-```
\ No newline at end of file
diff --git a/hugo/content/lessons/top-seven-database-paradigms/index.md b/hugo/content/lessons/top-seven-database-paradigms/index.md
deleted file mode 100644
index f3a5c5d53..000000000
--- a/hugo/content/lessons/top-seven-database-paradigms/index.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: Seven Database Paradigms
-lastmod: 2020-09-01T16:09:39-07:00
-publishdate: 2020-09-01T16:09:39-07:00
-author: Jeff Delaney
-draft: false
-description: Visual explanation of the top 7 database paradigms and what they do best.
-tags:
- - sql
- - firestore
-
-youtube: W2Z7fbCLSTw
-# github:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-Choose the right database for the job 🔨
-
-## Database Paradigms Explained Visually
-
-### Key-Value
-
-**Popular Key-Value Databases**: Redis, Memcached, Etcd
-
-{{< figure src="img/key-value.png" caption="" >}}
-
-### Wide Column
-
-**Popular Wide-Column Databases**: Cassandra, Apache HBase
-
-{{< figure src="img/wide-column.png" caption="" >}}
-
-### Document Oriented
-
-**Popular Document Databases**: MongoDB, Firestore, CouchDB
-
-{{< figure src="img/document.png" caption="" >}}
-
-### Relational
-
-**Popular Relational Databases**: [MySQL](/lessons/sql-firebase-typeorm/), Postgres, SQL Server, CockroachDB
-
-{{< figure src="img/relational.png" caption="" >}}
-
-### Graph
-
-**Popular Graph Databases**: Neo4j, DGraph, Janus Graph
-
-{{< figure src="img/graph.png" caption="" >}}
-
-### Search Engine
-
-**Popular Search Databases**: ElasticSearch, Algolia, [MeiliSearch](/lessons/meilisearch-firebase-google-cloud/)
-
-{{< figure src="img/search-engine.png" caption="" >}}
-
-### Multi-Model
-
-**Popular Multi-model Databases**: FaunaDB, CosmosDB
-
-{{< figure src="img/multi-model.png" caption="" >}}
\ No newline at end of file
diff --git a/hugo/content/lessons/ts-decorators-by-example/index.md b/hugo/content/lessons/ts-decorators-by-example/index.md
deleted file mode 100644
index 4f6f765c3..000000000
--- a/hugo/content/lessons/ts-decorators-by-example/index.md
+++ /dev/null
@@ -1,253 +0,0 @@
----
-title: TypeScript Decorators by Example
-lastmod: 2019-02-03T09:39:23-07:00
-publishdate: 2019-02-03T09:39:23-07:00
-author: Jeff Delaney
-draft: false
-description: Learn how to use TypeScript decorators to create elegant abstractions with JavaScript code.
-tags:
- - typescript
- - react
- - angular
-
-youtube: O6A-u_FoEX8
-github: https://github.com/fireship-io/163-typescript-decorators-examples
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-One of coolest, yet least approachable features in TypeScript is the [Decorator](https://www.typescriptlang.org/docs/handbook/decorators.html). We see Decorators implemented by the Angular Framework for classes like `@Component`, properties like `@ViewChild`, and methods like `@HostListener`, but have you ever considered building your own from scratch? They seem magical 🍄 in practice, but they are just JavaScript functions that allow us to annotate our code or hook into its behavior - this is known as [Metaprogramming](https://en.wikipedia.org/wiki/Metaprogramming).
-
-There are five ways to use decorators and we will look at examples of each one.
-
-- class declaration
-- property
-- method
-- parameter
-- accessor
-
-{{< box icon="fire" class="box-orange" >}}
-Decorators are very good at creating abstractions - almost too good. While it is tempting to create a decorator for all of the things, they are best suited for stable logic that needs to be duplicated in many places.
-{{< /box >}}
-
-
-## Class Decorator
-
-A class decorator makes it possible to intercept the `constructor` of class. They are called when the class is declared, not when a new instance is instantiated.
-
-Side note - one of the most powerful characteristics of a decoractor is its ability to *reflect metadata*, but the casual user will rarely need this feature. It is more suitable for use in frameworks, like the Angular Compiler for example, that need to to analyze the codebase to build the final app bundle.
-
-### Example
-
-**Real World Use Case:** When a class is decorated you have to be careful with inheritence because its decendents will not inherit the decorators. Let's freeze the class to prevent inheritence completely.
-
-{{< file "ngts" "hook.component.ts" >}}
-{{< highlight typescript >}}
-@Frozen
-class IceCream {}
-
-function Frozen(constructor: Function) {
- Object.freeze(constructor);
- Object.freeze(constructor.prototype);
-}
-
-console.log(Object.isFrozen(IceCream)); // true
-
-class FroYo extends IceCream {} // error, cannot be extended
-{{< /highlight >}}
-
-
-## Property Decorator
-
-{{< box icon="scroll" class="box-blue" >}}
-All of the examples in this guide use *Decorator Factories*. This just means the decorator itself is wrapped in a function so we can pass custom arguments to it, i.e `@Cool('stuff')` Feel free to omit the outer function if you want to apply a decorator without arguments `@Cool` .
-{{< /box >}}
-
-Property decorators can be extremly useful because they can listen to state changes on a class. To fully understand the next example, it helps to be familar with JavaScript [PropertyDescriptors](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty).
-
-### Example
-
-Let's override the flavor property to surround it in emojis. This allows us to set a regular string value, but run additional code on get/set as *middleware*, if you will.
-
-{{< file "ngts" "ice-cream.component.ts" >}}
-{{< highlight typescript >}}
-export class IceCreamComponent {
- @Emoji()
- flavor = 'vanilla';
-}
-
-
-// Property Decorator
-function Emoji() {
- return function(target: Object, key: string | symbol) {
-
- let val = target[key];
-
- const getter = () => {
- return val;
- };
- const setter = (next) => {
- console.log('updating flavor...');
- val = `🍦 ${next} 🍦`;
- };
-
- Object.defineProperty(target, key, {
- get: getter,
- set: setter,
- enumerable: true,
- configurable: true,
- });
-
- };
-}
-
-{{< /highlight >}}
-
-## Method Decorator
-
-Method decoractors allow us override a method's function, change its control flow, and execute additional code before/after it runs.
-
-### Example
-
-The following decoractor will show a confirm message in the browser before executing the method. If the user clicks cancel, it will be bypassed. Notice how we have two decoractors stacked below - they will be applied from top to bottom.
-
-
-{{< file "ngts" "ice-cream.component.ts" >}}
-{{< highlight typescript >}}
-export class IceCreamComponent {
-
- toppings = [];
-
- @Confirmable('Are you sure?')
- @Confirmable('Are you super, super sure? There is no going back!')
- addTopping(topping) {
- this.toppings.push(topping);
- }
-
-}
-
-
-// Method Decorator
-function Confirmable(message: string) {
- return function (target: Object, key: string | symbol, descriptor: PropertyDescriptor) {
- const original = descriptor.value;
-
- descriptor.value = function( ... args: any[]) {
- const allow = confirm(message);
-
- if (allow) {
- const result = original.apply(this, args);
- return result;
- } else {
- return null;
- }
- };
-
- return descriptor;
- };
-}
-
-
-{{< /highlight >}}
-
-## React Hooks for Angular 🤯
-
-You've probably heard that [React Hooks](https://reactjs.org/docs/hooks-intro.html) are a game-changer for the web. Is there any chance Angular can catch up to produce code that is equally beautiful, succinct, and game-changing? Well, yes actually, and it has been able to do this from day one.
-
-{{< figure src="img/react-hooks-gamechanger.png" alt="React hooks game changer results" >}}
-
-### UseState Property Decorator
-
-In react, the *useState* hook provides you with a reactive variable `count` and a setter `setCount`.
-
-
-{{< file "jsx" "hook.jsx" >}}
-{{< highlight jsx >}}
-import { useState } from 'react';
-
-function Example() {
- // Declare a new state variable, which we'll call "count"
- const [count, setCount] = useState(0);
-
- return (
-
-
You clicked {count} times
-
setCount(count + 1)}>
- Click me
-
-
You clicked {{count.value}} times
- Click Me
- `,
-})
-export class HookComponent {
- @UseState(0) count; setCount;
-}
-{{< /highlight >}}
-
-And the decoractor implementation is just five lines of code. We just set an initial value, then find the cooresponding
-
-{{< highlight typescript >}}
-function UseState(seed: any) {
- return function (target, key) {
- target[key] = seed;
- target[`set${key.replace(/^\w/, c => c.toUpperCase())}`] = (val) => target[key] = val;
- };
-}
-{{< /highlight >}}
-
-
-### UseEffect Method Decorator
-
-The [effect hook](https://reactjs.org/docs/hooks-effect.html) hook simply consolidates the component lifecycle of `componentDidMount` and `componentDidUpdate` into a single callback.
-
-
-{{< file "jsx" "hook.jsx" >}}
-{{< highlight jsx >}}
- useEffect(() => {
- // Update the document title using the browser API
- document.title = `You clicked ${count} times`;
- });
-{{< /highlight >}}
-
-This is very easy to emulate with a method decorator because we can apply the function descriptor to Angular's equivelent `ngOnInit` and `ngAfterViewChecked` lifecycle hooks.
-
-{{< file "ngts" "hook.component.ts" >}}
-{{< highlight typescript >}}
-@Component(...)
-export class AppComponent {
- @UseEffect()
- onEffect() {
- document.title = `You clicked ${this.count.value} times`;
- }
-}
-
-
-/// Implementation Details:
-
-function UseEffect() {
- return function (target, key, descriptor) {
- target.ngOnInit = descriptor.value;
- target.ngAfterViewChecked = descriptor.value;
- };
-}
-{{< /highlight >}}
diff --git a/hugo/content/lessons/typescript-design-patterns/index.md b/hugo/content/lessons/typescript-design-patterns/index.md
deleted file mode 100644
index 51099c816..000000000
--- a/hugo/content/lessons/typescript-design-patterns/index.md
+++ /dev/null
@@ -1,334 +0,0 @@
----
-title: 10 Design Patterns in TypeScript
-lastmod: 2022-03-13T14:42:50-07:00
-publishdate: 2022-03-13T14:42:50-07:00
-author: Jeff Delaney
-draft: false
-description: A breakdown 10 software design patterns in TypeScript.
-tags:
- - typescript
-
-youtube: tv-_1er1mWI
-# github:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-[Design patterns](https://en.wikipedia.org/wiki/Design_Patterns) is a highly influential book published in 1994 by four computer scientists called the *Gang of Four*. It was originally aimed at C++ developers, but has since become a book for anyone interested in object-oriented software design.
-
-In the following lesson, we will look at 10 different patterns from this book with simplified modern examples in TypeScript. For additional patterns and examples, check out [Refactoring Guru](https://refactoring.guru).
-
-## Creational
-
-Creational patterns are related to the creation of new objects.
-
-### Singleton
-
-A singleton is an object that can only be instantiated once. It is useful fo implementing a global object that can be accessed from anywhere in the application.
-
-{{< file "typescript" "software.ts" >}}
-```typescript
-class Settings {
-
- static instance: Settings;
- public readonly mode = 'dark';
-
- // prevent new with private constructor
- private constructor() {
-
- }
-
- static getInstance(): Settings {
- if (!Settings.instance) {
- Settings.instance = new Settings();
- }
-
- return Settings.instance;
- }
-
-}
-
-const settings = new Settings() // throws error
-const settings = Settings.getInstance();
-```
-
-### Prototype
-
-Prototype allows objects to be clones of other objects, rather then extended via inheritance.
-
-{{< file "typescript" "software.ts" >}}
-```typescript
-const zombie = {
- eatBrains() {
- return 'yum 🧠';
- }
-}
-
-const chad = Object.create(zombie, { name: { value: 'chad'} });
-
-chad.__proto__;
-Object.getPrototypeOf(chad);
-
-const babyChad = Object.create(chad, { baby: { value: true } });
-
-```
-### Factory
-
-A factory is a method or function that creates an object, or a set of objects, without exposing the creation logic to the client.
-
-{{< file "typescript" "software.ts" >}}
-```typescript
-class IOSButton { }
-
-class AndroidButton { }
-
-// Without Factory
-const button1 = os === 'ios' ? new IOSButton() : new AndroidButton()
-const button2 = os === 'ios' ? new IOSButton() : new AndroidButton()
-
-class ButtonFactory {
- createButton(os: string): IOSButton | AndroidButton {
- if (os === 'ios') {
- return new IOSButton();
- } else {
- return new AndroidButton();
- }
- }
-}
-
-// With Factory
-const factory = new ButtonFactory();
-const btn1 = factory.createButton(os);
-const btn2 = factory.createButton(os);
-```
-### Builder
-
-The builder pattern is a creational design pattern that lets you construct complex objects step by step. It JavaScript, we can achieve this with method chaining.
-
-{{< file "typescript" "software.ts" >}}
-```typescript
-class HotDog {
- constructor(
- public bread: string,
- public ketchup?: boolean,
- public mustard?: boolean,
- public kraut?: boolean
- ) {}
-
- addKetchup() {
- this.ketchup = true;
- return this;
- }
- addMustard() {
- this.mustard = true;
- return this;
- }
- addKraut() {
- this.kraut = true;
- return this;
- }
-}
-
-const myLunch = new HotDog('gluten free')
- .addKetchup()
- .addMustard()
- .addKraut();
-```
-## Structural
-
-Structural patterns are primarily used to handle relationships between objects.
-
-### Facade
-
-A facade is a class that provides a simplified API for larger body of code. It is often to used to hide low-level details of a subsystem.
-
-{{< file "typescript" "software.ts" >}}
-```typescript
-class PlumbingSystem {
- // low evel access to plubming system
- setPressure(v: number) {}
- turnOn() {}
- turnOff() {}
-}
-
-class ElectricalSystem {
- // low evel access to electrical system
- setVoltage(v: number) {}
- turnOn() {}
- turnOff() {}
-}
-
-class House {
-
- private plumbing = new PlumbingSystem();
- private electrical = new ElectricalSystem();
-
- public turnOnSystems() {
- this.electrical.setVoltage(120);
- this.electrical.turnOn();
- this.plumbing.setPressure(500);
- this.plumbing.turnOn();
- }
-
- public shutDown() {
- this.plumbing.turnOff();
- this.electrical.turnOff();
- }
-
-}
-
-const client = new House();
-client.turnOnSystems();
-client.shutDown();
-```
-### Proxy
-
-The proxy pattern lets you provide a substitute or placeholder for another object to control access to it. For example, [VueJS uses a Proxy](https://vuejs.org/guide/extras/reactivity-in-depth.html#how-reactivity-works-in-vu) to intercept and modify data on objects.
-
-{{< file "typescript" "software.ts" >}}
-```typescript
-const original = { name: 'jeff' };
-
-const reactive = new Proxy(original, {
- get(target, key) {
- console.log('Tracking: ', key);
- return target[key];
- },
- set(target, key, value) {
- console.log('updating UI...');
- return Reflect.set(target, key, value);
- },
-});
-
-reactive.name; // 'Tracking: name'
-
-reactive.name = 'bob'; // 'updating UI...'
-```
-
-## Behavioral
-
-Behavioral patterns are used to identify communication between objects.
-
-### Iterator
-
-The iterator pattern is used to traverse a collection of elements. Most programming languages provide abstrations for iteration like the `for` loop. However, you can create your own iterators in JavaScript by using the `Symbol.iterator` property. The code below creates a custom range function that can be used in a regular `for` loop.
-
-{{< file "typescript" "software.ts" >}}
-```typescript
-function range(start: number, end: number, step=1) {
- return {
- [Symbol.iterator]() {
- return this;
- },
- next() {
- if (start < end) {
- start = start+step;
- return { value: start, done: false };
- }
- return { done: true, value: end };
- }
- }
-}
-
-for (const n of range(0, 100, 5)) {
- console.log(n);
-}
-
-```
-### Observer
-
-The observer pattern is used to notify a set of interested parties when a state change occurs. The [rxjs]() library is a popular implementation of this pattern.
-
-{{< file "typescript" "software.ts" >}}
-```typescript
-import { Subject } from 'rxjs';
-
-const news = new Subject();
-
-const tv1 = news.subscribe(v => console.log(v + 'via Den TV'));
-const tv2 = news.subscribe(v => console.log(v + 'via Batcave TV'));
-const tv3 = news.subscribe(v => console.log(v + 'via Airport TV'));
-
-news.next('Breaking news: ');
-news.next('The war is over ');
-
-tv1.unsubscribe();
-```
-### Mediator
-
-The mediator is provids a middle layer between objects that communicate with each other. This pattern implemented frequently in JavaScript libaries via plugin systems (like Webpack) and middleware (like Express).
-
-{{< file "typescript" "software.ts" >}}
-```typescript
-import express from 'express';
-const app = express();
-
-// Middleware logic
-function mediator(req, res, next) {
- console.log('Request Type:', req.method)
- next()
-}
-
-app.use(mediator);
-
-// Mediator runs before each route handler
-app.get('/', (req, res) => {
- res.send('Hello World');
-});
-
-app.get('/about', (req, res) => {
- res.send('About');
-});
-
-```
-### State
-
-The state pattern is used to encapsulate the state of an object so that it can be changed and accessed independently of the object. In JavaScript, finite state machines are sometimes used to maintain a predictable flow of data in an application via libraries like [XState](https://xstate.js.org/).
-
-{{< file "typescript" "software.ts" >}}
-```typescript
-interface State {
- think(): string;
-}
-
-class HappyState implements State {
- think() {
- return 'I am happy 🙂';
- }
-}
-
-class SadState implements State {
- think() {
- return 'I am sad 🙁';
- }
-}
-
-
-class Human {
- state: State;
-
- constructor() {
- this.state = new HappyState();
- }
-
- changeState(state) {
- this.state = state;
- }
-
- think() {
- return this.state.think();
- }
-
-}
-
-const human = new Human();
-console.log(human.think());
-human.changeState(new SadState());
-console.log(human.think());
-```
diff --git a/hugo/content/lessons/vscode-cloud-coder-tensorflow/index.md b/hugo/content/lessons/vscode-cloud-coder-tensorflow/index.md
deleted file mode 100644
index c890d0797..000000000
--- a/hugo/content/lessons/vscode-cloud-coder-tensorflow/index.md
+++ /dev/null
@@ -1,109 +0,0 @@
----
-title: Use Coder to Run VS Code on Google Cloud
-lastmod: 2019-03-31T05:49:52-07:00
-publishdate: 2019-03-31T05:49:52-07:00
-author: Jeff Delaney
-draft: false
-description: Run VS Code on Google Cloud and configure it for remote frontend development.
-tags:
- - vscode
- - gcp
-
-youtube: N5WojMutddQ
-# github:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-Turning [VS Code](https://code.visualstudio.com/) into a full IDE requires you to carefully blend your favorite extensions and packages for the type of development work you perform. It can take hours or even days to get your development environment fine-tuned for optimal productivity. But what happens upgrade to a new computer? Or need to share your IDE with somebody on the other side of the world? Or maybe you just need more compute resources...
-
-The following lesson will teach you how to use [Coder](https://coder.com/) - a tool that allows you to run VS Code on any cloud and access it from the browser. We will take their open source project [code-server](https://github.com/codercom/code-server) and use it to run VS Code on Google Cloud Platform.
-
-## Run Coder VS Code On GCP
-
-### Create a VM
-
-First, we need to spin up a virtual machine instance on [Google Compute Engine](https://cloud.google.com/compute/). The recommended VM will cost about $0.067 per hour or $48.95 per month. Keep in mind, you can shut down the VM at anytime and billing will be calculated pro-rata to the second. The recommended OS is Ubuntu 16.04.
-
-{{< figure src="img/coder-gcp-settings.png" caption="The recommended VM settings for Coder on GCP" >}}
-
-### SSH into your VM
-
-Now we need to interact with the VM from the command line. Go to the instance details page and click on the SSH button.
-
-{{< figure src="img/vm-open-ssh.png" caption="Start an SSH session with your Google Cloud VM" >}}
-
-
-Find the [latest release of Code Server](https://github.com/codercom/code-server/releases/latest), then download and unzip the release into the VM's file system with the following commands:
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-wget https://github.com/codercom/code-server/releases/download/{version}/code-server-{version}-linux-x64.tar.gz
-tar -xvzf code-server-{version}-linux-x64.tar.gz
-{{< /highlight >}}
-
-Execute the binary to start serving VS Code on port 80.
-
-{{< highlight text >}}
-cd code-server-{version}-linux-x64
-sudo ./code-server -p 80
-{{< /highlight >}}
-
-
-### Access the VS Code on the Web
-
-At this point we have a process for VS Code running and can access it from the web. Find the link to the external IP for the VM, then navigate to it on port 80, for example *https://your-ip-address:80*
-
-{{< figure src="img/vm-ip-link.png" caption="Click on the external IP link" >}}
-
-
-Initially, you will see this warning from the browser. Click *Advanced -> Proceed Anyway*
-
-{{< figure src="img/vscode-web-warning.png" caption="This is not actually unsafe because we own the VM" >}}
-
-You need a password to access the editor, which was automatically generated in the terminal output.
-
-{{< figure src="img/coder-password.png" caption="Copy the password in the middle of the terminal output" >}}
-
-After entering the password you should have access to VS code in the browser.
-
-{{< figure src="img/vscode-coder-demo.png" caption="Done! Access VS Code and your files from any device, anywhere!" >}}
-
-## Frontend Development Configuration
-
-After you have VSCode up and running in the cloud, you will likely want to configure it for frontend development with Angular, React, Vue, etc. Currently, we just have a bare bones VM without Node or NPM installed.
-
-### Install Node
-
-Follow these instructions to [install NodeJS](/snippets/install-nodejs/). This will give you access to the `nvm` command for version management and the `npm` command for package management.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-nvm install 10
-
-npm install @angular/cli -g
-{{< /highlight >}}
-
-
-### Serving a Frontend Application on GCP Compute Engine
-
-By default, GCP only exposes port 80 to inbound TCP traffic. That means if you try to run `ng serve` for Angular, which serves the app on port 4200 for example, it will not be accessible. Generally, I like to serve traffic on port 8080, and we can allow this by setting up a firewall rule like so.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-
-ng new my-app
-cd my-app
-ng serve --port 8080
-{{< /highlight >}}
-
-{{< figure src="img/firewall-rule.png" caption="After creating the rule, make sure to tag your VM with with it under its settings" >}}
-
-
-That's it for now! You now have a basic environment for frontend development in the cloud. You can take this a step further by extracting this code into a Dockerfile for an easy containerized setup on any cloud.
diff --git a/hugo/content/lessons/web-scraping-guide/index.md b/hugo/content/lessons/web-scraping-guide/index.md
deleted file mode 100644
index f4c9e2cad..000000000
--- a/hugo/content/lessons/web-scraping-guide/index.md
+++ /dev/null
@@ -1,228 +0,0 @@
----
-title: Modern Web Scraping Guide
-lastmod: 2019-07-17T13:01:44-07:00
-publishdate: 2019-07-17T13:01:44-07:00
-author: Jeff Delaney
-draft: false
-description: Build a web scraper from scratch with Firebase Cloud Functions, Puppeteer, and NodeJS
-tags:
- - node
- - firebase
- - cloud-functions
- - puppeteer
- - mvp
-
-youtube: dXjKh66BR2U
-github: https://github.com/fireship-io/198-web-scraper-link-preview
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# rxdart: 0.20
----
-
-
-In a perfect world, every website provides free access to data with an easy-to-use API... but the world is far from perfect. However, it is possible to use web scraping techniques to manually extract data from websites by brute force. The following lesson examines two different types of [web scrapers](https://en.wikipedia.org/wiki/Web_scraping) and implements them with NodeJS and Firebase Cloud Functions.
-
-
-## Frontend Integrations
-
-This lesson is integrated with multiple frontend frameworks. Choose your favorite flavor 🍧.
-
-
- {{< mvp-chapter name="angular" link="/snippets/link-preview-angular" >}}
- {{< mvp-chapter name="react" link="/snippets/link-preview-react" >}}
-
-
-
-## Initial Setup
-
-Let's start by initializing Firebase Cloud Functions with JavaScript.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-firebase init functions
-cd functions
-
-npm run serve
-{{< /highlight >}}
-
-
-
-## Strategy A - Basic HTTP Request
-
-
-The first strategy makes an HTTP request to a URL and expects an HTML document string as the response. Retrieving the HTML is easy, but there are no browser APIs in NodeJS, so we need a tool like [cheerio](https://cheerio.js.org/) to process DOM elements and find the necessary metatags.
-
-The advantage 👍 of this approach is that it is fast and simple, but the disadvantage 👎 is that it will not execute JavaScript and/or wait for dynamically rendered content on the client.
-
-
-### Link Preview Function
-
-💡 It is not possible to generate link previews entirely from the frontend due to [Cross-Site Scripting](https://en.wikipedia.org/wiki/Cross-site_scripting) vulnerabilities.
-
-An excellent use-case for this strategy is a *link preview* service that shows the name, description, and image of a 3rd party website when a URL posted into an app. For example, when you post a link into an app like Twitter, Facebook, or Slack, it renders out a nice looking preview.
-
-{{< figure src="img/demo-link-preview.png" alt="Example of link previews from metatags in Slack" >}}
-
-
-Link previews are made possible by scraping the meta tags from `` of an HTML page. The code requests a URL, then looks for [Twitter](https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started.html) and [OpenGraph](http://ogp.me/) metatags in the response body. Several supporting libraries are used to make the code more reliable and simple.
-
-- **cheerio** is a NodeJS implementation of jQuery.
-- **node-fetch** is a NodeJS implementation of the browser [Fetch API](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API).
-- **get-urls** is a utility for extracting URLs from text.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-cd functions
-npm i cheerio node-fetch get-urls cors
-{{< /highlight >}}
-
-
-Let's start by building a
-
-{{< file "js" "functions/index.js" >}}
-{{< highlight javascript >}}
-const cheerio = require('cheerio');
-const getUrls = require('get-urls');
-const fetch = require('node-fetch');
-
-const scrapeMetatags = (text) => {
-
-
-
- const urls = Array.from( getUrls(text) );
-
- const requests = urls.map(async url => {
-
- const res = await fetch(url);
-
- const html = await res.text();
- const $ = cheerio.load(html);
-
- const getMetatag = (name) =>
- $(`meta[name=${name}]`).attr('content') ||
- $(`meta[name="og:${name}"]`).attr('content') ||
- $(`meta[name="twitter:${name}"]`).attr('content');
-
- return {
- url,
- title: $('title').first().text(),
- favicon: $('link[rel="shortcut icon"]').attr('href'),
- // description: $('meta[name=description]').attr('content'),
- description: getMetatag('description'),
- image: getMetatag('image'),
- author: getMetatag('author'),
- }
- });
-
-
- return Promise.all(requests);
-
-}
-{{< /highlight >}}
-
-
-
-### HTTP Function
-
-You can use the scraper in an HTTP Cloud Function.
-
-{{< file "js" "functions/index.js" >}}
-{{< highlight javascript >}}
-
-const functions = require('firebase-functions');
-const cors = require('cors')({ origin: true});
-
-
-exports.scraper = functions.https.onRequest( async (request, response) => {
- cors(request, response, async () => {
-
-
- const body = JSON.parse(request.body);
- const data = await scrapeMetatags(body.text);
-
- response.send(data)
-
- });
-});
-
-{{< /highlight >}}
-
-
-At this point, you should receive a response by opening `http://localhost:5000/YOUR-PROJECT/REGION/scraper`
-
-## Strategy B - Puppeteer for Full Browser Rendering
-
-What if you want to scrape a single page JavaScript app, like Angular or React? Or maybe you want to click buttons and/or log into an account before scraping? These tasks require a fully emulated browser environment that can parse JS and handle events.
-
-
-[Puppeteer](https://github.com/GoogleChrome/puppeteer) is a tool built on top of headless chrome, which allows you to run the Chrome browser on the server. In other words, you can fully interact with a website before extracting the data you need.
-
-
-### Instagram Scraper
-
-Instagram on the web uses React, which means we won't see any dynamic content util the page is fully loaded. [Puppeteer](https://try-puppeteer.appspot.com/) is available in the Cloud Functions runtime, allowing you to spin up a chrome browser on your server. It will render JavaScript and handle events just like the browser you're using right now.
-
-First, the function logs into a real instagram account. The `page.type` method will find the corresponding DOM element and type characters into it. Once logged in, we navigate to a specific username and wait for the `img` tags to render on the screen, then scrape the *src* attribute from them.
-
-{{< figure src="img/puppeteer-instagram-login.png" alt="Sign into a real Instagram account with Puppeteer." >}}
-
-
-
-{{< file "js" "index.js" >}}
-{{< highlight javascript >}}
-const puppeteer = require('puppeteer');
-
-const scrapeImages = async (username) => {
- const browser = await puppeteer.launch( { headless: true });
- const page = await browser.newPage();
-
- await page.goto('https://www.instagram.com/accounts/login/');
-
-
- // Login form
- await page.screenshot({path: '1.png'});
-
- await page.type('[name=username]', 'fireship_dev');
-
- await page.type('[name=password]', 'some-pa$$word');
-
- await page.screenshot({path: '2.png'});
-
- await page.click('[type=submit]');
-
- // Social Page
-
- await page.waitFor(5000);
-
- await page.goto(`https://www.instagram.com/${username}`);
-
- await page.waitForSelector('img ', {
- visible: true,
- });
-
-
- await page.screenshot({path: '3.png'});
-
-
- // Execute code in the DOM
- const data = await page.evaluate( () => {
-
- const images = document.querySelectorAll('img');
-
- const urls = Array.from(images).map(v => v.src);
-
- return urls
- });
-
- await browser.close();
-
- console.log(data);
-
- return data;
-}
-{{< /highlight >}}
diff --git a/hugo/content/lessons/windows-10-for-web-dev/img/.gitkeep b/hugo/content/lessons/windows-10-for-web-dev/img/.gitkeep
deleted file mode 100644
index e69de29bb..000000000
diff --git a/hugo/content/login.md b/hugo/content/login.md
deleted file mode 100644
index e453a983e..000000000
--- a/hugo/content/login.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Login or Signup
-date: 2019-02-27T09:32:30-07:00
-draft: false
-description: Login or Signup for a Fireship Account
----
-
-{{< partial "login" >}}
\ No newline at end of file
diff --git a/hugo/content/mission.md b/hugo/content/mission.md
deleted file mode 100644
index ecb1fbf48..000000000
--- a/hugo/content/mission.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-title: 'Mission'
-lastmod: 2019-02-27T09:32:30-07:00
-draft: false
----
-
-The mission of Fireship.io is simple...
-
-> Create practical content and resources that **increase developer happiness 😁 and productivity 🚀**.
-
-Welcome Aboard!
-What other professional devs say about Fireship content
-
-
-
-For Enterprise Too
-Just a few big names we have worked with
-
-
-
-
-
-The Video Tour
-Unlimited access to content for serious developers
-
-
-{{< vimeo 599890291 >}}
-
-
-Taught by Experts
-Content so good that Google knighted us
-
-
-
-
-
-
-
-
- No results found matching {{results.query}} .
-
-
-
-
-
-
- {{hit.username}} {{hit.objectID}}
-
-
-
-
-
-
-{{< /highlight >}}
\ No newline at end of file
diff --git a/hugo/content/snippets/algolia-instantsearch-react.md b/hugo/content/snippets/algolia-instantsearch-react.md
deleted file mode 100644
index c10d83298..000000000
--- a/hugo/content/snippets/algolia-instantsearch-react.md
+++ /dev/null
@@ -1,82 +0,0 @@
----
-title: Algolia Instantsearch with React
-lastmod: 2019-08-25T13:07:30-07:00
-publishdate: 2019-08-25T13:07:30-07:00
-author: Jeff Delaney
-draft: false
-description: Algolia InstantSearch with React
-tags:
- - react
- - algolia
-
-youtube:
-github: https://github.com/fireship-io/203-algolia-firestore-mvp
-type: lessons
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
----
-
-{{< box emoji="👀" >}}
-This tutorial is an extension of the [Algolia Cloud Functions Guide](/lessons/algolia-cloud-functions/). You must have the Cloud Functions deployed to start making instant search queries from your frontend app.
-{{< /box >}}
-
-## Install InstantSearch
-
-Algolia provides official [React support](https://www.algolia.com/doc/guides/building-search-ui/installation/react/). Follow the installation steps to make the prebuilt components available in your app.
-
-## React InstantSearch Component
-
-{{< file "react" "App.js" >}}
-{{< highlight jsx >}}
-import React from 'react';
-import './App.css';
-
-import algoliasearch from 'algoliasearch/lite';
-import { InstantSearch, SearchBox, Hits, connectHighlight } from 'react-instantsearch-dom';
-
-const searchClient = algoliasearch('YOUR-APP-ID', 'YOUR-SEARCH-KEY');
-
-
-function App() {
-
- return (
-
-
- )
-}
-
-const CustomHighlight = connectHighlight(({ highlight, attribute, hit }) => {
- const parsedHit = highlight({
- highlightProperty: '_highlightResult',
- attribute,
- hit
- });
-
- return (
-
-
{hit.username}
-
- {parsedHit.map(
- part => part.isHighlighted ?
{part.value} : part.value
- )}
-
-
-);
-
-
-export default App;
-{{< /highlight >}}
diff --git a/hugo/content/snippets/algolia-instantsearch-svelte.md b/hugo/content/snippets/algolia-instantsearch-svelte.md
deleted file mode 100644
index cd54b0d07..000000000
--- a/hugo/content/snippets/algolia-instantsearch-svelte.md
+++ /dev/null
@@ -1,119 +0,0 @@
----
-title: Algolia Search with Svelte
-lastmod: 2019-08-25T13:07:30-07:00
-publishdate: 2019-08-25T13:07:30-07:00
-author: Jeff Delaney
-draft: false
-description: Algolia InstantSearch with Svelte 3
-tags:
- - svelte
- - algolia
-
-youtube:
-github: https://github.com/fireship-io/203-algolia-firestore-mvp
-type: lessons
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
----
-
-{{< box emoji="👀" >}}
-This tutorial is an extension of the [Algolia Cloud Functions Guide](/lessons/algolia-cloud-functions/). You must have the Cloud Functions deployed to start making instant search queries from your frontend app.
-{{< /box >}}
-
-## Install Algolia
-
-Algolia does not provide official support for [Svelte](https://svelte.dev), but we can easily implement our own custom UI with [AlgoliaSearch](https://github.com/algolia/algoliasearch-client-javascript).
-
-Note. You can also use InstantSearch.js if you want pre-built components.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm install algoliasearch
-{{< /highlight >}}
-
-## Update the index.html
-
-The Algolia client makes a reference to `process`, which does not exist in the browser. Add the code below to prevent errors.
-
-{{< file "html" "public/index.html" >}}
-{{< highlight html >}}
- Svelte app
-
-
-
-{{< /highlight >}}
-
-## Svelte Algolia Search Component
-
-The component below initializes the AlgoliaSearch *lite*, then binds a request to each *keyup* event on a form input. Algolia returns an object with the resulting hits, which are updated on the component's `hit` property.
-
-{{< file "svelte" "Search.svelte" >}}
-{{< highlight html >}}
-
-
-
-
-
-Svelte InstantSearch
-
-
-
-
-
-{#each hits as hit}
-
- {hit.username} {hit.objectID}
-
-
-
-
-{/each}
-{{< /highlight >}}
-
-{{< figure src="/img/snippets/svelte-algolia.png" caption="Demo of Algolia Search in Svelte 3" >}}
\ No newline at end of file
diff --git a/hugo/content/snippets/angular-universal-ssr-cookbook.md b/hugo/content/snippets/angular-universal-ssr-cookbook.md
deleted file mode 100644
index 9856d1395..000000000
--- a/hugo/content/snippets/angular-universal-ssr-cookbook.md
+++ /dev/null
@@ -1,56 +0,0 @@
----
-title: Angular Universal SSR Cookbook
-lastmod: 2019-01-24T07:14:41-07:00
-publishdate: 2019-01-24T07:14:41-07:00
-author: Jeff Delaney
-draft: false
-description: Common recipes and solutions for serverside rendering (SSR) with Angular Universal
-tags:
- - angular
-
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
----
-
-Angular Universal is a powerful tool that allows us to render our applications on the server, but it contains many pitfalls because NodeJS does not have the same APIs as the DOM. The snippet contains a collection of recipes to for common SSR use cases.
-
-{{< box icon="angular" class="box-orange" >}}
-### Work in Progress
-
-This snippet is a work in progress. If you have a useful addition feel free to add it below by making a [pull request on Github](/snippets/git-how-to-participate-on-github).
-{{< /box >}}
-
-## Platform Checking
-
-In some cases, you may have code that should only run in the browser. You can do this by checking the platform and using conditional logic in your components.
-
-{{< file "ngts" "some.component.ts" >}}
-{{< highlight typescript >}}
-import { Component, Inject } from '@angular/core';
-import { PLATFORM_ID } from '@angular/core';
-import { isPlatformBrowser } from '@angular/common';
-
-@Component(...)
-export class SomeComponent {
- isBrowser: boolean;
-
- constructor( @Inject(PLATFORM_ID) platformId) {
- this.isBrowser = isPlatformBrowser(platformId);
- }
-}
-{{< /highlight >}}
-
-{{< file "html" "foo.component.html" >}}
-{{< highlight html >}}
-
-
-
-{{< /highlight >}}
\ No newline at end of file
diff --git a/hugo/content/snippets/angular-upgrade-with-ivy.md b/hugo/content/snippets/angular-upgrade-with-ivy.md
deleted file mode 100644
index 7528272b2..000000000
--- a/hugo/content/snippets/angular-upgrade-with-ivy.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: How to Upgrade Angular Packages
-lastmod: 2019-03-13T08:01:59-07:00
-publishdate: 2019-03-13T08:01:59-07:00
-author: Jeff Delaney
-draft: false
-description: How to upgrade to the latest packages in Angular
-tags:
- - angular
-
-# type: lesson
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-versions:
- - "@angular/core": 8.0
----
-
-The following guide will show you how to update packages in an Angular project and enable the Ivy compiler.
-
-
-## Auto Upgrade
-
-You may be able to update your project using the `ng update` command.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm i -g @angular/cli@latest
-ng update
-{{< /highlight >}}
-
-If you would like to install bleeding-edge Angular packages, use the manual upgrade commands below.
-
-
-## Manual Upgrade
-
-You can manually upgrade Angular's most common packages using the commands below. Keep in mind, you many need to add additional packages based on what exists in your *package.json*. The commands below use the `@next` tag, which will upgrade to the latest beta or rc versions of Angular. Change this tag to `@latest` for the latest stable version.
-
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-npm i -g @angular/cli@next
-
-# depencencies
-npm i @angular/{common,compiler,forms,platform-browser,platform-browser-dynamic,platform-server,router}@next
-npm i rxjs core-js zone.js
-
-
-# devDependencies
-npm i @angular-devkit/build-angular@next @angular/{compiler-cli,cli,language-service}@next -D
-{{< /highlight >}}
-
-
-## Enabling Ivy
-
-Refer to the [official Angular Ivy](https://next.angular.io/guide/ivy) guide if you run into issues.
-
-Update your root tsconfig.
-
-{{< file "typescript" "tsconfig.json" >}}
-{{< highlight json >}}
-{
- "compilerOptions": {
- "module": "esnext",
- // ...
- },
- "angularCompilerOptions": {
- "enableIvy": true,
- "allowEmptyCodegenFiles": true
- }
-}
-{{< /highlight >}}
-
-Update the angular CLI config.
-
-{{< file "angular" "angular.json" >}}
-{{< highlight json >}}
-{
- "projects": {
- "your-project": {
- "architect": {
- "build": {
- "options": {
- ...
- "aot": true,
- }
- }
- }
- }
- }
-}
-{{< /highlight >}}
-
-Add this script to your package.json.
-
-{{< file "npm" "package.json" >}}
-{{< highlight json >}}
-{
- "scripts": {
- ...
- "postinstall": "ivy-ngcc"
- }
-}
-{{< /highlight >}}
-
-Lastly, run `npm install` to run this script. When you serve or build your app it should now be in ivy mode. You should see a noticeable decrease in the total bundle size.
\ No newline at end of file
diff --git a/hugo/content/snippets/check-if-current-user-exists-with-angularfire.md b/hugo/content/snippets/check-if-current-user-exists-with-angularfire.md
deleted file mode 100644
index 3949e368b..000000000
--- a/hugo/content/snippets/check-if-current-user-exists-with-angularfire.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Check for Signed-in User in AngularFire
-lastmod: 2018-03-31T18:47:13-07:00
-publishdate: 2018-03-31T18:47:13-07:00
-author: Jeff Delaney
-draft: false
-description: Check if Current User is Signed-In or for data existence in AngularFire
-tags:
- - angular
- - firebase
-
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
----
-
-A common requirement in any app is to determine if the current user is logged-in. Or you might want to check if a database record exists before performing some logic. Doing this in an elegant want throughout your [AngularFire2](https://github.com/angular/angularfire2) app is not always obvious.
-
-While we could use RxJS, I find it much easier to handle these situations with Promises because they are NOT streams, but rather simple one-off operations.
-
-## Get the Current User
-
-Converting an Observable to a Promise requires a completed signal from the stream. The AngularFire auth state will not complete automatically, so we pipe in the `first` operator to kill it after the first emitted value.
-
-### Promise-Based Solution
-
-If prefer this approach for the elegant async/await syntax.
-
-```typescript
-import { first } from 'rxjs/operators';
-
-
-isLoggedIn() {
- return this.afAuth.authState.pipe(first()).toPromise();
-}
-
-async doSomething() {
- const user = await isLoggedIn()
- if (user) {
- // do something
- } else {
- // do something else
- }
-}
-```
-
-### Observable-Based Solution
-
-Here's the equivalent with an Observable. Not quite as elegant, especially when you need to perform this logic frequently,
-
-```typescript
-import { first, tap } from 'rxjs/operators';
-
-isLoggedIn() {
- return this.afAuth.authState.pipe(first())
-}
-
-doSomething() {
- isLoggedIn().pipe(
- tap(user => {
- if (user) {
- // do something
- } else {
- // do something else
- }
- })
- )
- .subscribe()
-}
-```
-
-## Check if a Firestore Document Exists
-
-We can use a similar helper to determine if a certain Firestore document exists.
-
-```typescript
-docExists(path: string) {
- return this.afs.doc(path).valueChanges().pipe(first()).toPromise()
-}
-```
-
-Let's say we want to *find or create a document*.
-
-```typescript
-async findOrCreate(path: string, data: any) {
- const doc = await docExists(path);
-
- if (doc) {
- return 'doc exists'
- } else {
- await this.afs.doc(path).set(data)
- return 'created new doc'
- }
-}
-```
\ No newline at end of file
diff --git a/hugo/content/snippets/combine-firestore-collections-into-a-single-array-observable.md b/hugo/content/snippets/combine-firestore-collections-into-a-single-array-observable.md
deleted file mode 100644
index 7cb248f28..000000000
--- a/hugo/content/snippets/combine-firestore-collections-into-a-single-array-observable.md
+++ /dev/null
@@ -1,68 +0,0 @@
----
-title: Combine Firestore Collections into a Single Array Observable
-lastmod: 2018-02-20T18:50:43-07:00
-publishdate: 2018-02-20T18:50:43-07:00
-author: Jeff Delaney
-draft: false
-description: Combine Firestore collections via AngularFire, while maintaining realtime listeners
-tags:
- - angular
- - firebase
- - firestore
-
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
----
-
-In this quick snippet I will show you how to combine two or more Firestore collections from [AngularFire](https://github.com/angular/angularfire2/blob/master/docs/firestore/collections.md) into a single realtime Observable.
-
-## The Problem
-
-Let's imagine you have queried multiple Firestore collections, but want combine them and iterate over them using `ngFor`- this is a common requirement when dealing with subcollections. In addition, you want to maintain a realtime listener to update the data if a new object is added to either query.
-
-Your collections might look something like this
-
-```typescript
-const usersRef = this.afs.collection('users');
-
-const fooPosts = usersRef.doc('userFoo').collection('posts').valueChanges();
-const barPosts = usersRef.doc('userBar').collection('posts').valueChanges();
-```
-
-We want a `fooPosts + barPosts` as a single Observable array.
-
-## Solution
-
-We can accomplish our goal of a single unified collection with RxJS and plain JS array reduce mapping. This example will not keep maintain a specific ordering between the arrays, but you can add your own client-side logic control the ordering of the result array.
-
-The magic RxJS operator here is [combineLatest](http://rxmarbles.com/#combineLatest), which listens for updates on either individual Observable, but emits the both results together each time.
-
-We can then use the plain JS [reduce](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/Reduce) and [concat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/concat) methods to flatten the two arrays.
-
-
-```typescript
-import { combineLatest } from 'rxjs/observable/combineLatest';
-
-
-const combinedList = combineLatest(fooPosts, barPosts).pipe(
- map(arr => arr.reduce((acc, cur) => acc.concat(cur) ) ),
- )
-```
-
-Now you can loop over the results in the HTML.
-
-```html
-
-
- {{ post | json }}
-
-
-```
\ No newline at end of file
diff --git a/hugo/content/snippets/currency-formatting.md b/hugo/content/snippets/currency-formatting.md
deleted file mode 100644
index 24322d20a..000000000
--- a/hugo/content/snippets/currency-formatting.md
+++ /dev/null
@@ -1,151 +0,0 @@
----
-title: Format currency with Intl
-lastmod: 2021-07-08T20:00:49-04:00
-publishdate: 2021-06-27T20:47:49-04:00
-author: Kyle Leary
-draft: false
-description: Use Intl.NumberFormat() to convert currency, units, notation, and other numeric values
-tags:
- - javascript
- - intl
-
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
-
-type: lessons
----
-The [Intl.NumberFormat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat) object enables language-sensitive number formatting. We can use this to convert currency, numbers, percentages, units, and other notation into formatted strings. This is particularly useful in eCommerce applications, with examples like displaying an item price or recipt printing. Another example are social platforms like [YouTube](https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA), which use compact notation to display high counts of views and followers.
-
-## Currency formatting
-
-📚 You can reference currency codes [here](https://www.currency-iso.org/en/home/tables/table-a1.html) and locale values [here](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#locale_identification_and_negotiation)
-
-### Number to $USD
-
-{{< file "js" "showMeTheMoney.js" >}}
-{{< highlight javascript >}}
-
-const convertToUSD = (someNumber) => {
- return new Intl.NumberFormat("en-US", {
- style: "currency",
- currency: "USD",
- }).format(someNumber);
-};
-
-// Get dollas in english 🇺🇸
-convertToUSD(12.99); // "$12.99"
-{{< /highlight >}}
-
-### Number to EURO €
-
-{{< file "js" "zeigMirDasGeld.js" >}}
-{{< highlight javascript >}}
-
-const inEuroUmrechnen = (eineZahl) => {
- return new Intl.NumberFormat("de-DE", {
- style: "currency",
- currency: "EUR",
- }).format(eineZahl);
-};
-
-// Holen sie sich Euro in deutsche 🇩🇪
-inEuroUmrechnen(39.99); // "39,99 €"
-{{< /highlight >}}
-
-## Compact notation
-
-{{< file "js" "oneMillionSubs.js" >}}
-{{< highlight javascript >}}
-
-const subscriberCount = (subscribers) => {
- return new Intl.NumberFormat("en-US", {
- notation: "compact",
- compactDisplay: "short"
- }).format(subscribers);
-};
-
-// 📼 Current Fireship subscribers
-subscriberCount(711000); // "711K"
-
-// 🔥 Fireship subscriber goal for 2021
-subscriberCount(1000000); // "1M"
-{{< /highlight >}}
-
-### Unit conversion
-
-{{< file "js" "unitConversion.js" >}}
-{{< highlight javascript >}}
-
-const convertToGigabytes = (megabytes) => {
- return new Intl.NumberFormat("en-US", {
- style: "unit",
- unit: "gigabyte",
- maximumSignificantDigits: 4,
- unitDisplay: "narrow"
- }).format(megabytes / 1000);
-};
-
-// 💾 Convert MB value to GB:
-convertToGigabytes(77778); // "77.78GB"
-{{< /highlight >}}
-
-### 🔥 BONUS EXAMPLE 🔥
-
-{{< file "js" "getStorageBill.js" >}}
-{{< highlight javascript >}}
-
-// Example monthly Firebase storage used:
-const stored = convertToGigabytes(77778); // "77.78GB"
-
-// 5GB Free tier monthly allowance:
-const free = 5;
-
-// Calculate total Firebase storage bill:
-const billable = (parseFloat(stored) - free); // 72.78
-
-// Format total using currency conversion
-const totalBill = convertToUSD(billable * 0.026); // "$1.89"
-{{< /highlight >}}
-
-### Temperature conversion
-
-{{< file "js" "tempConversion.js" >}}
-{{< highlight javascript >}}
-
-// 🌡 Convert tempertaure to °C or °F:
-const convertTemp = (unit, degrees) => {
-
- // Handle output based on unit input:
- switch (unit) {
- case "celsius":
- degrees = ((degrees - 32) / 1.8000);
- break;
- case "fahrenheit":
- degrees = ((degrees * 1.8000) + 32);
- break;
- }
-
- return new Intl.NumberFormat("en-US", {
- style: "unit",
- unit: unit,
- minimumFractionDigits: 2,
- maximumFractionDigits: 2,
- }).format(degrees);
-};
-
-// °C → 🥶 → °F
-convertTemp("fahrenheit", 21); // "69.80°F"
-
-// °F → 🔥 → °C
-convertTemp("celsius", 97); // "36.11° C"
-{{< /highlight >}}
-
-You can learn more about [Intl.NumberFormat()](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat), the [Internationalization](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl) API, and the [ECMAScript](https://402.ecma-international.org/1.0/#sec-11.1) specification for all the properties, values, and methods available on [MDN](https://developer.mozilla.org/)
diff --git a/hugo/content/snippets/dart-throttle-debounce.md b/hugo/content/snippets/dart-throttle-debounce.md
deleted file mode 100644
index 7d4505bba..000000000
--- a/hugo/content/snippets/dart-throttle-debounce.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Throttle and Debounce with Dart
-lastmod: 2019-11-28T19:10:14-07:00
-publishdate: 2019-11-28T19:10:14-07:00
-author: Jeff Delaney
-draft: true
-description: How to Throttle and Debounce Events in Dart and Flutter
-tags:
- - dart
- - flutter
-
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-versions:
- - dart: 2.6
----
-
-In many cases, you Flutter may send you more events that actually want to handle. The following snippet contains Dart examples for `Throttle` and `Debounce` to control frequency or "backpressure" of events in your app. Learn more about Throttle and Debounce in this excellent [breakdown](https://css-tricks.com/debouncing-throttling-explained-examples/) for JavaScript.
-
-
-## Throttle
-
-The [Throttle](https://lodash.com/docs/4.17.15#throttle) class ensures that the callback function provided will only be called at most once per duration. It calls the first attempt, then waits for the timer to expire before calling calling the next attempt, *first in first out*.
-
-### Dart Throttle Example
-
-{{< file "dart" "throttle.dart" >}}
-{{< highlight dart >}}
-class Throttle {
- final Duration duration;
- bool _canRun = true;
-
- Throttle({this.duration});
-
- run(Function callback, [List positionalArgs, Map namedArgs]) {
- if (_canRun) {
- Function.apply(callback, positionalArgs, namedArgs);
-
- _canRun = false;
- Timer(duration, () => _canRun = true);
- }
- }
-
-}
-{{< /highlight >}}
-
-### Usage in Flutter
-
-Usage in a Flutter `StatefulWidget` (notice how the arguments are passed as arguments):
-
-{{< file "dart" "widget.dart" >}}
-{{< highlight dart >}}
-
-var panThrottle = Throttle(duration: Duration(milliseconds: 500));
-
-Widget build(BuildContext context) {
-
- GestureDetector(
- onPanStart: (DragStartDetails event) => panThrottle.run(print, [event]),
- )
-}
-{{< /highlight >}}
-
-
-Keep in mind, this implementation does not handle leading or trailing edges, so only events after the throttle duration will fire.
-
-## Debounce
-
-[Debounce](https://lodash.com/docs/4.17.15#debounce) waits for a certain duration after an event starts before invoking the last observed callback. Think of it as grouping multiple events together where only the last event fires, *last in first out*.
-
-### Dart Debounce Example
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class Debounce {
- final Duration duration;
- Timer _timer;
- Function _functionToCall;
-
- Debounce({this.duration});
-
- run(Function callback, [List positionalArgs, Map namedArgs]) {
-
- _functionToCall = () => Function.apply(callback, positionalArgs, namedArgs);
- if (_timer == null || !_timer.isActive) {
- _timer = Timer(duration, _functionToCall);
- }
- }
-
-}
-{{< /highlight >}}
-
diff --git a/hugo/content/snippets/deploying-ionic4-to-android-and-google-play.md b/hugo/content/snippets/deploying-ionic4-to-android-and-google-play.md
deleted file mode 100644
index 3c587fe01..000000000
--- a/hugo/content/snippets/deploying-ionic4-to-android-and-google-play.md
+++ /dev/null
@@ -1,95 +0,0 @@
----
-title: Deploy Ionic Android to Google Play
-lastmod: 2018-09-12T18:29:56-07:00
-publishdate: 2018-09-12T18:29:56-07:00
-author: Jeff Delaney
-draft: false
-description: Build, sign, and deploy an Ionic Android app step-by-step
-tags:
- - ionic
- - android
-
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
----
-
-The final steps of building, packaging, and deploying an Ionic Android app can often be the most painful. The following guide explains how to build and sign the Android package (APK) suitable for upload to the Google Play Store.
-
-## Step-by-Step Ionic 4 Android Build Process
-
-All Android apps must be [digitally signed](https://developer.android.com/studio/publish/app-signing) before they can be installed on a real device or uploaded to Google Play. This can be a major source of confusion in hybrid development, so let's walk through it step-by-step.
-
-This guide was created using MacOS. The steps on Windows and Linux will be similar, but please report any issues in the comments.
-
-### Step 1 - Run a Production Build
-
-First, we need to bundle our web code and prepare the assets as a native package.
-
-```shell
-ionic cordova build android --prod --release
-```
-
-### Step 2 - Generate a Keystore
-
-A keystore is just a binary file that holds the private keys needed to sign the app. Make sure to keep it safe because you need it to update your future releases of your app. Its purpose is to keep your app safe from malicious updates.
-
-```shell
-keytool -genkey -v -keystore my-release-key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias my-alias
-```
-
-You should see `my-release-key.keystore` in the root of your project
-
-### Step 3 - Sign the APK
-
-You should have a an unsigned APK located in `platforms/android/app/build/outputs/apk/release/` in your Ionic project. Let's use the keystore from step 2 to sign the APK.
-
-```shell
-jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore platforms/android/app/build/outputs/apk/release/app-release-unsigned.apk my-alias
-```
-
-### Step 4 - Figure out your build tools path
-
-We need to use the Android CLI [build tools](https://developer.android.com/studio/command-line/#tools-build) to finish packaging the app. What is the value of the `ANDROID_HOME` env variable?
-
-```shell
-printenv ANDROID_HOME
-```
-
-That should give you something like *~/Library/Android/sdk/*. Now we need to find out the version of [build tools](https://developer.android.com/studio/command-line/#tools-build) on our system.
-
-```shell
-ls ~/Library/Android/sdk/build-tools
-```
-
-That should give you a version number like *28.0.3*.
-
-So replace `{build-tools-path}` with the path to build tools on your machine for the following commands, i.e. *~/Library/Android/sdk/build-tools/28.0.3*
-
-### Step 5 - Run zipalign
-
-Next we need to run [zipalign](https://developer.android.com/studio/command-line/zipalign) on the APK.
-
-```shell
-{build-tools-path}/zipalign -v 4 android-release-unsigned.apk YourAppName-Release.apk
-```
-
-### Step 6 - Verify the Signature
-
-The final step is to verify the signature on the APK with [apksigner](https://developer.android.com/studio/command-line/apksigner).
-
-```shell
-{build-tools-path}/apksigner verify YourAppName-Release.apk
-```
-
-The final result should look like the image below (focus on the green files), giving you an APK ready for release on Google Play
-
-
-{{< figure src="/img/snippets/android-ionic-apk-build.png" caption="Signed APK in Ionic with keystore" >}}
\ No newline at end of file
diff --git a/hugo/content/snippets/firestore-emulator-flutter.md b/hugo/content/snippets/firestore-emulator-flutter.md
deleted file mode 100644
index b689184da..000000000
--- a/hugo/content/snippets/firestore-emulator-flutter.md
+++ /dev/null
@@ -1,73 +0,0 @@
----
-title: Use the Firestore Emulator with Flutter
-lastmod: 2020-08-10T15:05:09-07:00
-publishdate: 2020-08-10T15:05:09-07:00
-author: Jeff Delaney
-draft: false
-description: How to use the Firestore Emulator in a Flutter App
-tags:
- - flutter
- - firestore
-
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
----
-
-The following snippet demonstrates how to use the [Firestore emulator](https://firebase.google.com/docs/rules/emulator-setup) in [Flutter](https://flutter.dev/). Setting up the emulator allows you to create mock data on your local system during development. In some cases, this can eliminate the need for switching between dev/prod firebase projects when building your app.
-
-🔥 Watch the [advanced emulator tutorial](/lessons/firebase-emulator-advanced/) for additional tips and tricks on this subject.
-
-## Setup the Emulator Suite
-
-Initialize the emulator suite. Select the options for emulators & firestore when prompted, then stick with the defaults for everything else.
-
-{{< file "terminal" "command line" >}}
-```bash
-firebase init
-# Choose emulators, then firestore when prompted
-
-firebase emulators:start
-```
-
-Starting the emulator should give you access to the UI on `localhost:4000`.
-
-
-{{< figure src="/img/snippets/emulator-firestore.png" caption="Example of Firestore emulator running locally" >}}
-
-## Connect Flutter to the Firestore Emulator
-
-The Firestore emulator instance is running on `localhost:8080`. We can tell Flutter to use the emulator by modifying the settings after our widgets have been initialized. On an Android emulator, you must point to the IP `10.0.2.2` to connect to the 'localhost'.
-
-{{< file "flutter" "main.dart" >}}
-```dart
-import 'package:cloud_firestore/cloud_firestore.dart';
-import 'dart:io' show Platform;
-
-class _MyHomePageState extends State {
-
- @override
- void initState() {
- String host = Platform.isAndroid ? '10.0.2.2:8080' : 'localhost:8080';
-
- Firestore.instance.settings(
- host: host,
- sslEnabled: false,
- persistenceEnabled: false,
- );
-
-
- super.initState();
- }
-
-}
-```
-
-That's it! Your app will now use the local emulated database values instead of your real production data in the cloud. You might improve this code by using environment variables or [flavors](https://flutter.dev/docs/deployment/flavors) to only use the emulator when running a development build.
\ No newline at end of file
diff --git a/hugo/content/snippets/firestore-tag-filtering-with-in-queries.md b/hugo/content/snippets/firestore-tag-filtering-with-in-queries.md
deleted file mode 100644
index 3f81e8556..000000000
--- a/hugo/content/snippets/firestore-tag-filtering-with-in-queries.md
+++ /dev/null
@@ -1,55 +0,0 @@
----
-title: Firestore Tag Filtering With in Queries
-lastmod: 2019-11-13T07:51:38-07:00
-publishdate: 2019-11-13T07:51:38-07:00
-author: Jeff Delaney
-draft: false
-description: Query by tag or category labels in Firestore using IN and array-contains-any.
-tags:
- - firebase
- - firestore
-
-youtube:
-github:
-type: lessons
-versions:
- firebase: 7.3.0
----
-
-With the release of the Firebase JS SDK version 7.3.0, we now have the ability to perform [IN queries](https://firebase.googleblog.com/2019/11/cloud-firestore-now-supports-in-queries.html). It provides two new options to use with the *where* method, including `in` and `array-contains-any`.
-
-A common use-case is tag or category filtering. For example, you may want to display a set of checkboxes, then run an inclusive query for any results that contain at least 1 checkbox.
-
-## Firestore IN Query
-
-### Option 1 - Document has ONE Tag
-
-If the document can only have one tag or category at a time, you are likely looking for an `in` query. It takes an array of values (limited to a max of 10), then returns all matching documents. It is not perfectly analogous to SQL and you can also think of it as a logical OR query, i.e. **all documents where color == red OR white OR blue**
-
-
-{{< figure src="/img/snippets/firestore-in-query.png" caption="Data format for IN query" >}}
-
-{{< file "js" "in.js" >}}
-{{< highlight javascript >}}
-const db = firebase.firestore();
-
-const ref = db.collection('products');
-
-const query = ref.where('color', 'in', ['red', 'white', 'blue']);
-{{< /highlight >}}
-
-
-
-### Option 2 - Document has MANY Tags
-
-In other cases, your documents may be tagged with many values in an array. You fetch all documents that have a at least one value in the array with `array-contains-any`.
-
-{{< figure src="/img/snippets/firestore-array-contains-any.png" caption="Data format for array-contains-any query" >}}
-
-{{< file "js" "firestore.js" >}}
-{{< highlight javascript >}}
-const query = ref.where('colors', 'array-contains-any', ['red', 'white', 'blue']);
-{{< /highlight >}}
-
-
-Simple, yet powerful!
\ No newline at end of file
diff --git a/hugo/content/snippets/get-angularfire-userid-as-promise.md b/hugo/content/snippets/get-angularfire-userid-as-promise.md
deleted file mode 100644
index 2eb4da36e..000000000
--- a/hugo/content/snippets/get-angularfire-userid-as-promise.md
+++ /dev/null
@@ -1,70 +0,0 @@
----
-title: Return an @angular/fire User as a Promise
-lastmod: 2018-12-29T10:40:01-07:00
-publishdate: 2018-12-29T10:40:01-07:00
-author: Jeff Delaney
-draft: false
-description: How to return an AngularFire user as a promise
-tags:
- - angular
- - rxjs
- - firebase
-
-# versions:
-# - "rxjs": 6.3
----
-
-
-@angular/fire provides an `authState` Observable which is great for reacting to realtime changes to the user's login state. However, it can be useful to also return this value as a Promise for one-off operations and for use with async/await.
-
-Let's say we have an auth service using Firebase. We can take the `first()` emitted value from the stream, then convert it using `toPromise()`;
-
-{{< file "ngts" "app/auth.service.ts" >}}
-{{< highlight typescript >}}
-import { Injectable } from '@angular/core';
-import { AngularFireAuth } from '@angular/fire/auth';
-
-import { first } from 'rxjs/operators';
-
-@Injectable({ providedIn: 'root' })
-export class AuthService {
-
- constructor(private afAuth: AngularFireAuth) { }
-
- getUser(): Promise {
- return this.afAuth.authState.pipe(first()).toPromise();
- }
-
-}
-{{< /highlight >}}
-
-
-
-
-## Usage with Async/Await in a Guard
-
-Now we can use this method throughout the app for tasks that do not require a stream, like database writes or in router guards as shown below:
-
-{{< file "ngts" "app/auth.guard.ts" >}}
-{{< highlight typescript >}}
-import { Injectable } from '@angular/core';
-import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router';
-import { AuthService} from './auth.service'
-
-@Injectable()
-export class AuthGuard implements CanActivate {
- constructor(private auth: AuthService) {}
-
- async canActivate(...): Promise {
-
- const user = await this.auth.getUser();
- const loggedIn = !!user;
-
- if (!loggedIn) {
- // do something
- }
-
- return loggedIn;
- }
-}
-{{< /highlight >}}
diff --git a/hugo/content/snippets/github-graphql-merge-pull-request.md b/hugo/content/snippets/github-graphql-merge-pull-request.md
deleted file mode 100644
index 984f363db..000000000
--- a/hugo/content/snippets/github-graphql-merge-pull-request.md
+++ /dev/null
@@ -1,132 +0,0 @@
----
-title: Merge a Pull Request with the GitHub GraphQL API
-lastmod: 2020-03-21T12:36:06-07:00
-publishdate: 2020-03-21T12:36:06-07:00
-author: Jeff Delaney
-draft: false
-description: How to retrieve and merge Pull Requests programmatically with the GitHub GraphQL API.
-tags:
- - github
- - graphql
- - node
-
-type: lessons
-youtube:
-github: https://github.com/fireship-io/git-sticker
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
----
-
-I recently gave away a sticker to every person who submitted a pull request to this [repo](https://github.com/fireship-io/git-sticker). Problem is... over 600 people submitted PRs and it would take days to review and merge them manually. Luckily, GitHub has an awesome [GraphQL API](https://developer.github.com/v4/) that allows us to handle the process in a matter of minutes with a simple node script.
-
-The following snippet demonstrates how to retrieve and merge Pull Requests programmatically with the GitHub GraphQL API.
-
-Note: You must [create a Personal Access Token](https://help.github.com/en/github/authenticating-to-github/creating-a-personal-access-token-for-the-command-line) on GitHub to use the API.
-
-Before getting started in the code, it's often a good idea to explore the API in a client like Insomnia or PostMan.
-
-{{< figure src="/img/snippets/graphql-insomnia.png" caption="Using Insomnia client to explore the Github GraphQL API" >}}
-
-## Pull Requests Query
-
-Our first goal is to retrieve information about a batch pull requests using a GraphQL query. The [graphql-request](https://github.com/prisma-labs/graphql-request) library will help simplify the process.
-
-{{< file "terminal" "command line" >}}
-```text
-npm install graphql-request
-```
-
-### Query Pull Requests
-
-First, we set a token in the authorization header to authenticate our requests with Github. We can then point to a username & repo to request information about it, like all the open pull requests.
-
-{{< file "js" "index.js" >}}
-```javascript
-const { GraphQLClient } = require('graphql-request');
-
-const token = process.env.GITHUB_GQL_TOKEN;
-
-async function main() {
- console.log(token);
- const endpoint = 'https://api.github.com/graphql';
-
- const graphQLClient = new GraphQLClient(endpoint, {
- headers: {
- authorization: `Bearer ${token}`
- }
- });
-
- const query = /* GraphQL */ `
- {
- repository(owner: "fireship-io", name: "git-sticker") {
- pullRequests(first: 1, states: [OPEN]) {
- nodes {
- id
- number
- changedFiles
- deletions
- mergeable
- author {
- url
- }
- }
- }
- }
- }
- `;
-
- const data = await graphQLClient.request(query);
-
- console.log(JSON.stringify(data, undefined, 2));
-
-}
-
-main();
-```
-
-## Pull Request Mutation
-
-Now that we have some info about the PRs, let's go ahead and merge one with a GraphQL mutation. The mutation requires Pull Request ID variable, which you should have from the retrieved from previous step.
-
-{{< file "js" "index.js" >}}
-```javascript
-async function main() {
-
- // ...omitted
-
- const id = 'some-pull-request-id';
-
- const mutation = /* GraphQL */ `
- mutation mergePullRequest($input: MergePullRequestInput!) {
- mergePullRequest(input: $input) {
- pullRequest {
- merged
- mergedAt
- state
- url
- }
- }
- }
- `;
-
- const variables = {
- input: {
- pullRequestId: id
- }
- };
-
- const { mergePullRequest } = await graphQLClient.request(mutation, variables);
-
- console.log(`merged ${mergePullRequest.pullRequest.url}`);
-}
-
-main();
-```
-
-Merged! Part of code in this snippet was used to merge 600+ pull requests in just a few seconds.
\ No newline at end of file
diff --git a/hugo/content/snippets/hot-reload-node-typescript-server.md b/hugo/content/snippets/hot-reload-node-typescript-server.md
deleted file mode 100644
index 8bacf0e10..000000000
--- a/hugo/content/snippets/hot-reload-node-typescript-server.md
+++ /dev/null
@@ -1,96 +0,0 @@
----
-title: Hot Reload Node Typescript Server
-lastmod: 2020-05-22T05:36:37-07:00
-publishdate: 2020-05-22T05:36:37-07:00
-author: Jeff Delaney
-draft: false
-description: Setup a Node.js server with TypeScript that automatically restarts when the source code changes
-tags:
- - typescript
- - node
-
-# youtube:
-# code:
-type: lessons
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
----
-
-The following snippet demonstrates how to setup a Node.js project with TypeScript, then automatically reload or restart the node app on every code change. Basically, the goal is to run the TypeScript compiler and a node app concurrently. It is useful when you have something like an Express server and want to avoid manually restarting it.
-
-## Configure a Node Project with TypeScript
-
-Start with a Node project.
-
-{{< file "terminal" "command line" >}}
-```text
-npm init -y
-
-npm install --save-dev concurrently nodemon typescript
-```
-
-### Dependencies
-
-Add the following dependencies and scripts. [Nodemon](https://www.npmjs.com/package/nodemon) will automatically restart the node app when the dist code changes. [Concurrently](https://www.npmjs.com/package/concurrently) runs multiple commands at the same time.
-
-{{< file "npm" "package.json" >}}
-```json
-{
- "name": "ts-hot-reload-node",
- "version": "1.0.0",
- "description": "Reload your server when typescript compiles",
- "main": "index.js",
- "devDependencies": {
- "concurrently": "^5.2.0",
- "nodemon": "^2.0.3",
- "typescript": "^3.2.2"
- }
-}
-```
-
-### TS Config
-
-Add a `tsconfig.json` to configure the TypeScript compiler. Feel free to customize it. The following config looks for code in the `src` directory and compiles it to `dist`.
-
-{{< file "typescript" "tsconfig.json" >}}
-```json
-{
- "compilerOptions": {
- "module": "commonjs",
- "outDir": "dist",
- "sourceMap": true,
- "strict": true,
- "target": "es2017",
- },
- "compileOnSave": true,
- "include": [
- "src"
- ]
-}
-```
-
-## Build & Serve Scripts
-
-The `dev` command runs the TypeScript compiler in watch mode, while at the same time using nodemon to monitor changes in the dist folder.
-
-{{< file "npm" "package.json" >}}
-```json
-{
- "scripts": {
- "build": "tsc",
- "start": "node dist/index.js",
- "dev": "concurrently \"tsc -w\" \"nodemon dist/index.js\""
- },
-}
-```
-
-{{< file "terminal" "command line" >}}
-```text
-npm run dev
-```
\ No newline at end of file
diff --git a/hugo/content/snippets/how-to-use-google-apis-or-gapi-with-firebase-auth.md b/hugo/content/snippets/how-to-use-google-apis-or-gapi-with-firebase-auth.md
deleted file mode 100644
index 392c63005..000000000
--- a/hugo/content/snippets/how-to-use-google-apis-or-gapi-with-firebase-auth.md
+++ /dev/null
@@ -1,131 +0,0 @@
----
-title: How to Use Google APIs on the Web
-publishdate: 2018-09-22T23:12:09-07:00
-lastmod: 2018-09-22T14:25:09-07:00
-draft: false
-author: Jeff Delaney
-description: Access Google APIs from Firebase with the gapi client library.
-tags:
- - firebase
- - auth
- - javascript
----
-
-For a full Angular example, make sure to watch the [Google Calendar Lesson](/lessons/google-calendar-api-with-firebase).
-
-
-Firebase auth is great because we can signup and login users with a single line of code, but it is limited to readonly access on the user's Google profile. It does NOT provide OAuth2 scopes to other Google services like Calendar, Adwords, Drive, GCP, GSuite, and dozens more.
-
-We can overcome this limitation by using [Google's JavaScript API client](https://developers.google.com/api-client-library/javascript/features/authentication) to authenticate the user with additional scopes, then sign in manually with Firebase.
-
-The snippet below will show you how to wrap Google Web Auth with Firebase to customize the Google APIs you can access on behalf of the user.
-
-This snippet assumes that you already have Firebase initialized in your project with Google OAuth enabled.
-
-## Optional - How to use Type Definitions with Google APIs
-
-The google API client library is a big complex collection of tools, so you definitely want them strong typed. There are different type definitions to install for different APIs (some of which don't work well), but here's the most basic example.
-
-```shell
-npm install --save @types/gapi
-```
-
-Add the types to your `tsconfig.json`
-
-```json
-{
- "compilerOptions": {
- "types": [
- "gapi",
- ]
- }
-}
-```
-
-Now you can use the types explicitly in one of your app files.
-
-```typescript
-/// You will need to whitelist your localhost port for development on the clientId. This can be done by clicking on the client ID in the GCP console.
-
-',
- authDomain: '',
- databaseURL: '',
- projectId: '',
- storageBucket: '',
- messagingSenderId: ''
-};
-
-@NgModule({
- imports: [
- BrowserModule,
- // 3. Initialize
- AngularFireModule.initializeApp(config),
- AngularFirestoreModule, // firestore
- AngularFireAuthModule, // auth
- AngularFireStorageModule // storage
- ],
- declarations: [ AppComponent ],
- bootstrap: [ AppComponent ]
-})
-export class AppModule {}
-{{< /highlight >}}
-
-## 4. Usage in a Component
-
-Done! Now you can use any of these modules in your components or services. For example, let's listen to a Firestore database collection in realtime.
-
-{{< file "ngts" "src/app/app.component.ts" >}}
-{{< highlight typescript >}}
-import { AngularFirestore } from '@angular/fire/firestore';
-
-@Component(...)
-export class SomeComponent {
-
- constructor(private db: AngularFirestore) {
- const things = db.collection('things').valueChanges();
- things.subscribe(console.log);
- }
-}
-{{< /highlight >}}
-
-## Pro Tip: Dev and Prod Firebase Projects
-
-It can be beneficial to setup two Firebase projects - one for development and another for your live production app. In Angular, we can manage these projects easily with the built-in environment config.
-
-{{< file "ngts" "environment.ts" >}}
-{{< highlight typescript >}}
-export const environment = {
- production: false,
- firebase: {
- // your web config from step 1
- }
-};
-
-// In other files, import the environment like so:
-import { environment } from '../environments/environment';
-{{< /highlight >}}
-
diff --git a/hugo/content/snippets/install-flutterfire.md b/hugo/content/snippets/install-flutterfire.md
deleted file mode 100644
index 478be23f6..000000000
--- a/hugo/content/snippets/install-flutterfire.md
+++ /dev/null
@@ -1,259 +0,0 @@
----
-title: Flutter Firebase App Setup for Power Users
-lastmod: 2020-07-31T10:13:59-07:00
-publishdate: 2020-07-31T10:13:59-07:00
-author: Jeff Delaney
-draft: false
-description: How to setup a new Flutter project with Firebase, Firestore, Crashlytics, Analytics, and more.
-tags:
- - dart
- - flutter
- - firebase
-
-youtube: Mx24wiPilHg
-type: lessons
-featured_img: /img/snippets/featured-flutterfire.png
----
-
-The following guide is designed to get you up and running with Flutter and Firebase on both iOS and Android. In addition to the core setup, we will also configure optional services like [Crashlytics](https://firebase.google.com/docs/crashlytics), [Performance](https://firebase.google.com/docs/perf-mon), and [App Distribution](https://firebase.google.com/docs/app-distribution).
-
-💡 If you run into issues, refer to [official FlutterFire setup instructions](https://firebase.google.com/docs/flutter/setup).
-
-
-## Create your Flutter App
-
-First, make sure you have [Flutter installed](https://flutter.dev/docs/get-started/install/). Create an app and open it an IDE (VS Code or Android Studio).
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-flutter create my_app
-code my_app
-{{< /highlight >}}
-
-### Install Dependencies
-
-Below are the dependencies used in most FlutterFire apps, however the only required package is `firebase_core`, so feel free to remove any packages you don't plan on using.
-
-{{< file "yaml" "pubspec.yaml" >}}
-```yaml
-dependencies:
- flutter:
- sdk: flutter
-
- firebase_core:
-
- # Database
- cloud_firestore:
-
- # User Auth
- firebase_auth:
- google_sign_in:
-
- # Analytics
- firebase_analytics:
-
- # Crashlytics
- firebase_crashlytics:
-
- # Performance
- firebase_performance:
-```
-
-
-Note: You can find the [latest FlutterFire package versions](https://github.com/flutter/plugins/blob/master/FlutterFire.md).
-
-
-## Android Setup
-
-First, you need to decide on a project ID for your app using the following pattern `..`. For example, the app for Fireship would be `io.fireship.lessonapp`. Create your app from the Firebase console.
-
-{{< figure src="/img/snippets/flutterfire-android-add.png" alt="add an Android app to your Firebase project" >}}
-
-
-### SHA1 Certificate (Optional)
-
-An SHA1 certificate identifies your local machine allowing you use certain Firebase features, like Google Sign-In and Phone Auth.
-
-{{< file "terminal" "command line" >}}
-```bash
-cd android
-./gradlew signingReport
-```
-{{< figure src="/img/snippets/flutter-sha1.png" alt="Copy the SHA1 value from the debugAndroidTest variant" >}}
-
-Use the `debugAndroidTest` SHA1 value when creating your project from the Firebase console.
-
-### Download and save the google-services.json
-
-Next, go to the Firebase Console and register your app by clicking *Add Firebase to your app Android*. Enter your project ID and SHA1 certificate from the previous step.
-
- Download the *google-services.json* file to the `android/app` directory. At this point, you can skip all remaining steps in the Firebase console (Flutter does this stuff automatically).
-
-{{< figure src="/img/snippets/android-flutter-file-dir.png" alt="google services location in flutter project" >}}
-
-### Update the build.gradle files
-
-Now we need to register our Google services in the Gradle build files.
-
-{{< file "gradle" "android/build.gradle" >}}
-```gradle
-buildscript {
- dependencies {
- // ...
- classpath 'com.google.gms:google-services:4.3.3' // <-- here
- }
-}
-```
-
-Next, update your project ID and register the Google services plugin at the bottom of gradle build file in the app directory.
-
-{{< file "gradle" "android/app/build.gradle" >}}
-```gradle
-
-apply plugin: 'com.android.application'
-apply plugin: 'com.google.gms.google-services' // <-- add this line
-
-// ...
-
- defaultConfig {
- applicationId "io.fireship.lessonapp" // <-- update this line
- minSdkVersion 21 // <-- you might also need to change this to 21
- multiDexEnabled true // <-- optional, but recommended
- }
-
- // ...
-
- dependencies {
- implementation 'com.android.support:multidex:1.0.3'
- }
-
-
-```
-
-That's it. Try executing `flutter run` with an Android device emulated or plugged-in to verify the setup worked.
-
-## iOS Setup
-
-The iOS setup is less tedious and can be completed in one step.
-
-### Register and Download the GoogleService-Info.plist
-
-Click *add your app to iOS* then download the `GoogleService-Info.plist`. Open the `ios/runner.xcworkspace` directory with Xcode, then drag the plist file into the `Runner/Runner` directory.
-
-{{< figure src="/img/snippets/flutterfire-ios-add.png" alt="add ios to your flutterfire project" >}}
-
-### Signing Certificate
-
-You must have a valid iOS Signing Certificate from your [Apple Developer Account](https://developer.apple.com/). If not, you will receive an error of *No valid code signing certificates were found*. Follow the steps below:
-
- - Log in with your Apple ID in Xcode first
- - Ensure you have a valid unique Bundle ID
- - Register your device with your Apple Developer Account
- - Let Xcode automatically provision a profile for your app
- - Rebuild your Project
-
-
-## Emulator Setup
-
-### Firestore Emulator
-
-Checkout the following snippet to use the [Firestore Emulator in Flutter](/snippets/firestore-emulator-flutter).
-
-
-🔥 Also checkout the [advanced emulator tutorial](/lessons/firebase-emulator-advanced/) for additional tips and tricks.
-
-## Optional Superpowers
-
-There are several additional Firebase superpowers you will likely want in your app bundle from day-one. Let's go ahead and install them now.
-
-### Analytics
-
-[Firebase Analytics](https://pub.dev/packages/firebase_analytics) can automatically collect data about your users and the screens they view in the app. Analytic data is a precursor to many other Firebase features like Predictions, Remote Config, and more.
-
-{{< file "flutter" "main.dart" >}}
-```dart
-import 'package:firebase_analytics/firebase_analytics.dart';
-import 'package:firebase_analytics/observer.dart';
-
-FirebaseAnalytics analytics;
-
-void main() {
- analytics = FirebaseAnalytics();
- runApp(MyApp());
-}
-```
-
-### Performance Monitoring
-
-[Performance Monitoring](https://pub.dev/packages/firebase_performance) is another automatic tool that will help you find performance bottlenecks and improve the user experience. Think of it as a ⏲️ *timer* that can aggregated across your entire user base.
-
-Include the package in your source code for automatic traces, or setup a custom trace.
-
-{{< file "flutter" "main.dart" >}}
-```dart
-import 'package:firebase_performance/firebase_performance.dart';
-
-// Custom trace example
-
-class _MyHomePageState extends State {
-
- _perfTrace() async {
- Trace trace = FirebasePerformance.instance.newTrace('cool_trace');
- trace.start();
- await Future.delayed(Duration(seconds: 5));
- trace.stop();
- }
-
-}
-```
-
-### Crashlytics
-
-[Crashlytics](https://pub.dev/packages/firebase_crashlytics) detects errors and aggregates them into issues. It is a highly valuable feature for detecting problems that affect specific devices and user groups (before they turn into bad reviews on the app store).
-
-
-{{< file "gradle" "android/build.gradle" >}}
-```gradle
-buildscript {
- ]
- dependencies {
- // ...
- classpath 'com.google.gms:google-services:4.3.3'
- classpath 'com.google.firebase:firebase-crashlytics-gradle:2.2.0'
- }
-}
-```
-
-Next, update your project ID and register the Google services plugin at the bottom of gradle build file in the app directory.
-
-{{< file "gradle" "android/app/build.gradle" >}}
-```gradle
-apply plugin: 'com.google.firebase.crashlytics'
-apply plugin: 'com.google.gms.google-services'
-
-// ...
-
-
- dependencies {
- implementation 'com.google.firebase:firebase-crashlytics:17.1.1'
- }
-```
-
-And finally, use the crashlytics plugin to catch all Flutter errors in at runtime.
-
-{{< file "flutter" "main.dart" >}}
-```dart
-import 'package:firebase_crashlytics/firebase_crashlytics.dart';
-
-void main() {
- Crashlytics.instance.enableInDevMode = true; // turn this off after seeing reports in in the console.
- FlutterError.onError = Crashlytics.instance.recordFlutterError;
- runApp(MyApp());
-}
-```
-
-
-
-## Next Steps
-
-At this point, you should be able to serve the app by running `flutter run` without breaking. If you want to learn more about Flutter Firebase stack, consider enrolling in the [Flutter Firebase Full Course](/courses/flutter-firebase/).
diff --git a/hugo/content/snippets/install-nodejs.md b/hugo/content/snippets/install-nodejs.md
deleted file mode 100644
index 528485e20..000000000
--- a/hugo/content/snippets/install-nodejs.md
+++ /dev/null
@@ -1,43 +0,0 @@
----
-title: Install NodeJS
-publishdate: 2018-12-11T09:35:09-07:00
-lastmod: 2018-12-11T09:35:09-07:00
-draft: false
-author: Jeff Delaney
-description: How to Install NodeJS
-tags:
- - node
----
-
-It is likely that you already have [NodeJS](https://nodejs.org/en/) installed on your machine. Try running `node -v` from the command line. If that does not work or the version is older than `8.15`, follow the install instructions below.
-
-
-## Node Version Manager NVM
-
-[Node Version Manager](https://github.com/nvm-sh/nvm) NVM makes it easy to switch between Node versions in your local environment. I highly recommend using it over the native install on your system.
-
-### Mac and Linux
-
-Simply run the install script from the command line.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash
-{{< /highlight >}}
-
-
-Restart your terminal. You should now be able to easily install and manage Node versions.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-nvm install 10
-
-nvm use 10
-{{< /highlight >}}
-
-
-### Windows
-
-NVM is not available on Windows, but there is a solid alternative with [nvm-windows](https://github.com/coreybutler/nvm-windows). It provides an installer than you can download from the repo. Once installed you will have access commands similar to those above.
-
-
diff --git a/hugo/content/snippets/javascript-destructuring.md b/hugo/content/snippets/javascript-destructuring.md
deleted file mode 100644
index 134c9195c..000000000
--- a/hugo/content/snippets/javascript-destructuring.md
+++ /dev/null
@@ -1,157 +0,0 @@
----
-title: JavaScript Destructuring Pro Tips
-publishdate: 2019-01-07T09:35:09-07:00
-lastmod: 2019-01-07T09:35:09-07:00
-draft: false
-type: lessons
-author: Jeff Delaney
-description: Use destructuring assignment in JavaScript to make your code concise and readable
-tags:
- - javascript
- - typescript
----
-
-
-[Destructuring](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment) assignment is technique available in modern JavaScript and TypeScript that allows you to extract the values from an Object or Array, then assign them as variables. It can significantly improve the readability of your code in the right situation, so let's take a look at scenarios where destructuring can save us a few lines of code.
-
-## Objects
-
-Let's imagine we have a big giant JSON response from an API, but only need a handful of its properties. Notice how we repeatedly call `res.` - this can get ugly.
-
-
-{{< file "js" "object.js" >}}
-{{< highlight javascript >}}
-const res = fetchBlogPost();
-
-// 😒 Meh Code
-const user = res.user;
-const title = res.title;
-const body = res.text;
-
-// 🤯 Destructured Code
-const { user, title, text } = res;
-{{< /highlight >}}
-
-You can also use it with async/await.
-
-{{< highlight javascript >}}
-async () => {
- const { user, text, title, date } = await fetchBlogPost();
-}
-{{< /highlight >}}
-
-And it comes in handy when using *console.log* because you can clearly name what you are logging.
-
-{{< highlight javascript >}}
-// 😒 Meh Code
-console.log(widget, component)
-
-// 🤯 Destructured Code
-console.log({ widget, component })
-{{< /highlight >}}
-
-{{< figure src="/img/snippets/destructuring-log1.png" alt="console log with destructuring" >}}
-
-
-## Function Arguments
-
-Function arguments can also be destructured, which is especially useful when you have a large number of optional named arguments.
-
-{{< file "js" "function.js" >}}
-{{< highlight javascript >}}
-// 😒 Meh Code
-function bmi(person) {
- const height = person.height;
- const weight = person.weight;
-
- return weight / height;
-}
-// 🤯 Destructured Code
-function bmi({ height, weight }) {
- return weight / height;
-}
-
-// Both are called the same way
-bmi(person);
-{{< /highlight >}}
-
-
-## Arrays and Loops
-
-Array destructuring is especially useful when you have an array where each position represents something meaningful. This data structure is similar to a [tuple](https://www.w3schools.com/python/python_tuples.asp) as in other languages like Python.
-
-
-{{< file "js" "array.js" >}}
-{{< highlight javascript >}}
-const arr = ['jeff', 'delaney', 'js'];
-
-// 😒 Meh Code
-const first = arr[0];
-const last = arr[1];
-const lang = arr[2];
-
-// 🤯 Destructured Code
-const [first, middle, lang] = arr;
-{{< /highlight >}}
-
-It is most powerful when you have a 2D array, or array-of-arrays. You can destructure the array positions while looping over the elements to write clean and readable code.
-
-{{< file "js" "loop.js" >}}
-{{< highlight javascript >}}
-const peeps = [
- ['guido', 'van rossum', 'python'],
- ['brendan', 'eich', 'rust'],
-];
-
-for (const [first, middle, lang] of peeps) {
- console.log('hello ' + first);
-}
-{{< /highlight >}}
-
-More common than a 2D array is an array of objects. You can also loop over the key-value pairs in the object and destructure them along the way.
-
-{{< highlight javascript >}}
-const animals = [
- { type: 'dog', name: '🐺 fido' },
- { type: 'cat', name: '🐱 snowball' }
-];
-
-
-for (const { name, type } of animals) {
- console.log(name, type);
-}
-{{< /highlight >}}
-
-
-You can even destructure nested properties on complex objects. In this case, each object has a `friends` Array and nested `profile` object. How do we assign values on the nested properties to variable names?
-
-{{< highlight javascript >}}
-const animals = [
- {
- type: '🐺 dog',
- name: 'fido',
- friends: ['rex', 'todd', 'bob'],
- profile: {
- color: 'brown',
- weight: 23
- }
- },
- {
- type: '🐱 cat',
- name: 'snowball',
- friends: [ 'fido' ],
- profile: {
- color: 'white',
- weight: 7
- }
- }
-];
-
-
-for (const { name, type, friends: [best], profile: { color } } of animals) {
- const bio = `${name} is a ${color} ${type} and his best friend is ${best}`
- console.log(bio);
-}
-{{< /highlight >}}
-
-{{< figure src="/img/snippets/destructuring-console-log.png" alt="complex loop destructuring assignment" >}}
diff --git a/hugo/content/snippets/javascript-loops-pro-tips.md b/hugo/content/snippets/javascript-loops-pro-tips.md
deleted file mode 100644
index f4cf22c03..000000000
--- a/hugo/content/snippets/javascript-loops-pro-tips.md
+++ /dev/null
@@ -1,180 +0,0 @@
----
-title: Javascript Iteration and Loops
-lastmod: 2019-01-15T15:29:44-07:00
-publishdate: 2019-01-15T15:29:44-07:00
-author: Jeff Delaney
-draft: false
-description: Learn how Iteration and Loops Work in JavaScript
-tags:
- - javascript
-
-type: lessons
-youtube: x7Xzvm0iLCI
-github: https://github.com/codediodeio/code-this-not-that-js
-featured_img: /img/snippets/js-loops-cover.jpg
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
----
-
-Modern JavaScript gives you a ton of different ways to iterate or loop over values. The following snippet will look at techniques that you can use to write faster and/or more concise loops with vanilla JS.
-
-## The Basics
-
-### For vs For-Of vs forEach
-
-You have three main options when looping or iterating over values in JS.
-
-- `for` - fastest, but ugly on the eyes
-- `for-of` - slowest, but most sugary
-- `forEach` - fast and designed for functional code
-- `for` (but backwards) - absolute fastest - but terrible to look at and work with
-
-Here is a rough performance breakdown of the code when looping over 1 million items. This was run on an average desktop PC in Node 10. Notice how the `for-of` loop is 6x slower than a regular for loop - that syntatic sugar has a price.
-
-{{< file "js" "perf.js" >}}
-{{< highlight javascript >}}
-const mil = 1000000;
-const arr = Array(mil);
-
-console.time('⏲️')
-
-
-for (let i = 0; i < mil; i++) { } // 1.6ms
-
-for (const v of arr) {} // 11.7ms
-
-arr.forEach(v => v) // 2.1ms
-
-for (let i = mil; i > 0; i--) {} // 1.5ms
-
-console.timeEnd('⏲️');
-{{< /highlight >}}
-
-
-### Which One Should You Use?
-
-The traditional `for` loop is the fastest, so you should always use that right? Not so fast - performance is not the only thing that matters. It is rare that you will ever need to loop over 1 million items in a frontend JS app. *Code Readability* is usually more important, so default to the style that fits your application. If you prefer to write functional code, then `forEach` is ideal, while `for-of` is great otherwise. Fewer lines of code means shorter development times and less maintenance overhead - optimize for developer-happiness first, then performance later.
-
-
-## For-Of Tricks
-
-The for-of loop has several other tricks up its sleeve.
-
-### Loop over Objects
-
-Loops are not just for arrays. You can also loop over Strings, Maps, Sets, or anything that has implemented a symbol iterator - but not plain Objects. However, looping over an Object is a very common need, so let's look at our options
-
-{{< file "js" "loop.js" >}}
-{{< highlight javascript >}}
-// Use a For-In Loop
-const equine = { horse: '🐴', zebra: '🦓', unicorn: '🦄'}
-
-for (const key in equine) {
- // Filters out properties inherited from prototype, see https://palantir.github.io/tslint/rules/forin/
- if (equine.hasOwnProperty(key)) {
- console.log(equine[key]);
- }
-}
-
-// Unwrap the the Values
-
-for (const val of Object.values(equine)) {
- console.log(val);
-}
-
-// Create a Map
-const equine = new Map(Object.entries(equine));
-
-for (const v of equine.values()) {
- console.log(v)
-}
-{{< /highlight >}}
-
-### Destructuring in a Loop
-
-When looping over an array of arrays, it can be be useful to desctructure the values directly in the loop. This allows us to write more expressive code without any extra lines.
-
-{{< highlight javascript >}}
-const equine = [
- ['horse', '🐴'],
- ['zebra', '🦓'],
- ['unicorn', '🦄']
-];
-
-// 😒 Meh Code
-for (const arr of equine) {
- const type = arr[0];
- const face = arr[1];
- console.log(`${type} looks like ${face}`);
-}
-
-// 🤯 Destructured Code
-for (const [type, face] of equine) {
- console.log(`${type} looks like ${face}`);
-}
-{{< /highlight >}}
-
-### Implementing your Own Iterator
-
-{{< box icon="scroll" class="box-blue" >}}
-An *iterator* is a Function that defines how a loop works. An *iterable* is something you can loop over (or call the iterator function on), like an Array.
-{{< /box >}}
-
-So how does the `for-of` loop really work? Well it's actually just an [iterator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Iterators_and_Generators) function. In fact, we can override the behavior of the loop by implementing our own from scratch. In this case, we append an emoji 🙈 to each element in the loop just because we can.
-
-{{< highlight javascript >}}
-arr[Symbol.iterator] = function() {
- let i = 0;
- let arr = this;
- return {
- next: function() {
- if (i >= arr.length) {
- return { done: true };
- } else {
- const value = arr[i] + '🙈';
- i++;
- return { value, done: false };
- }
- }
- };
-};
-{{< /highlight >}}
-
-## Functional Composition
-
-Modern JavaScript provides a smorgasbord of precooked methods for working with Arrays. Let's leverage functional composition to reduce the lines of code needed in our apps. Below is a showcase of some of my favorite Array methods.
-
-{{< file "js" "fun.js" >}}
-{{< highlight javascript >}}
-const faces = ['😀', '😍', '🤤', '🤯', '💩', '🤠', '🥳'];
-
-// Transform values
-const withIndex = faces.map((v, i) => `face ${i} is ${v}`);
-
-// Test at least one value meets a condition
-const isPoopy = faces.some(v => v === '💩')
-// false
-
-// Test all values meet a condition
-const isEmoji = faces.every(v => v > 'ÿ');
-// true
-
-
-// Filter out values
-const withoutPoo = faces.filter(v => v !== '💩')
-
-// Reduce values to a single value
-const pooCount = faces.reduce((acc, cur) => {
- return acc + (cur === '💩' ? 1 : 0)
-}, 0);
-console.log(pooCount)
-
-// Sort the values
-const sorted = faces.sort((a, b) => a < b);
-{{< /highlight >}}
diff --git a/hugo/content/snippets/lazy-loaded-routes-angular-v8-ivy.md b/hugo/content/snippets/lazy-loaded-routes-angular-v8-ivy.md
deleted file mode 100644
index 734e0a6f3..000000000
--- a/hugo/content/snippets/lazy-loaded-routes-angular-v8-ivy.md
+++ /dev/null
@@ -1,102 +0,0 @@
----
-title: Lazy Loaded Routes Angular V8 with Ivy
-lastmod: 2019-08-27T08:01:59-07:00
-publishdate: 2019-03-13T08:01:59-07:00
-author: Jeff Delaney
-draft: false
-description: Setup Lazy Loaded Routes in Angular 8 with Ivy and Dynamic Imports
-tags:
- - angular
-
-type: lessons
-youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "@angular/core": 8.0
----
-
-The following snippet will show you how to setup lazy-loaded routes in Angular v8.0 (and previous versions).
-
-Note. This is now the default way to generate lazy routes in Angular, Ivy does not need to be enabled.
-
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-ng new myLazyApp --routing
-{{< /highlight >}}
-
-Now add a link that you can click.
-
-{{< file "html" "app.component.html" >}}
-{{< highlight html >}}
-
- {{< vimeo 394685976 >}}
-
-
-### Multiple CSS Themes
-
-First, define a set of theme values and use them throughout your CSS code.
-
-{{< file "css" "style.css" >}}
-```css
-.dark {
- --text-color: #b6b6b6;
- --background: #ececec;
-}
-
-.light {
- --text-color: #1f1f1f;
- --background: #000000;
-}
-
-.solar {
- --text-color: #576e75;
- --background: #fdf6e3;
-}
-
-body {
- color: var(--text-color);
- background: var(--background);
-}
-```
-
-In this example, the theme is attached to the ``, but feel free to use it on any element that is theme-able.
-
-{{< file "html" "index.html" >}}
-```html
-
-```
-
-### JavaScript Theme Toggle
-
-The code below provides map that creates a circular list, so the user can toggle themes in an infinite loop by clicking one button. The user's preferred theme is stored in the browser's [local storage](https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API) - this allows it to remain active between browser refreshes or visits from other windows.
-
-{{< file "js" "app.js" >}}
-```javascript
-// Define which theme should load next
-const themeMap = {
- dark: 'light',
- light: 'solar',
- solar: 'dark'
-};
-
-// Load the existing theme in local storage
-const theme = localStorage.getItem('theme');
-const bodyClass = document.body.classList;
-theme && bodyClass.add(theme);
-
-// Change the theme on a button click
-function toggleTheme() {
- const current = localStorage.getItem('theme');
- const next = themeMap[current];
-
- bodyClass.replace(current, next);
- localStorage.setItem('theme', next);
-}
-
-document.getElementById('themeButton').onclick = toggleTheme;
-```
\ No newline at end of file
diff --git a/hugo/content/snippets/link-preview-angular.md b/hugo/content/snippets/link-preview-angular.md
deleted file mode 100644
index ae3fdd92c..000000000
--- a/hugo/content/snippets/link-preview-angular.md
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: Link Preview Angular
-lastmod: 2019-07-23T10:43:06-07:00
-publishdate: 2019-07-23T10:43:06-07:00
-author: Jeff Delaney
-draft: false
-description: Build a Link Preview Component with Ionic Angular
-type: lessons
-# pro: true
-tags:
- - angular
- - ionic
- - cloud-functions
-
-vimeo:
-github: https://github.com/fireship-io/198-web-scraper-link-preview
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
-
-# chapters:
-
----
-
-👀 This tutorial is an extension of the [Web Scraping Guide](/lessons/web-scraping-guide/). You must have the HTTP Cloud Function running locally or deployed to production to fetch link data from third-party websites.
-
-
-## Link Preview Component
-
-The component below demonstrates a basic **link preview** implementation in Angular (Ionic 4). Submitting the form with URLs included in the text will be rendered in page with a title, image, and description based on the site's metatags.
-
-{{< figure src="/img/snippets/ionic-link-preview.png" alt="Link preview result in Ionic Angular" >}}
-
-The component TypeScript uses [Angular's HTTP Client](https://angular.io/guide/http) to subscribe to the function endpoint, passing it the text from the form.
-
-{{< file "ngts" "home.component.ts" >}}
-{{< highlight typescript >}}
-import { Component } from '@angular/core';
-import { HttpClient } from '@angular/common/http';
-
-@Component({
- selector: 'app-home',
- templateUrl: 'home.page.html',
- styleUrls: ['home.page.scss'],
-})
-export class HomePage {
-
- links;
- loading = false;
- text = '';
-
- constructor(private http: HttpClient) {}
-
- handleSubmit(evt) {
- evt.preventDefault();
-
- this.loading = true;
-
- this.http.post(
- 'http://localhost:5000/fireship-lessons/us-central1/scraper',
- JSON.stringify({ text: this.text })
- )
- .subscribe(res => {
- this.links = res;
- this.loading = false;
- });
-
-
- }
-
- handleChange(evt) {
- this.text = evt.target.value;
- }
-
-}
-
-{{< /highlight >}}
-
-The template loops have the links after they are returned from the HTTP function. We use Ionic components to provide a nice UI out of the box.
-
-
-{{< file "html" "home.component.html" >}}
-{{< highlight html >}}
-
- Form
-
-
-
- {{ text }}
- {{ loading ? 'Loading... 🤔🤔🤔' : '' }}
-
-
-
-
{{linkData.title}}
-
{{linkData.description}}
-
-
-{{< /highlight >}}
\ No newline at end of file
diff --git a/hugo/content/snippets/link-preview-react.md b/hugo/content/snippets/link-preview-react.md
deleted file mode 100644
index 462ea6ba5..000000000
--- a/hugo/content/snippets/link-preview-react.md
+++ /dev/null
@@ -1,124 +0,0 @@
----
-title: Link Preview React
-lastmod: 2019-07-23T10:43:06-07:00
-publishdate: 2019-07-23T10:43:06-07:00
-author: Jeff Delaney
-draft: false
-description: Build a Link Preview Component in React
-type: lessons
-# pro: true
-tags:
- - react
- - cloud-functions
-
-vimeo:
-github: https://github.com/fireship-io/198-web-scraper-link-preview
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
-
-# chapters:
-
----
-
-{{< box emoji="👀" >}}
-This tutorial is an extension of the [Web Scraping Guide](/lessons/web-scraping-guide/). You must have the HTTP Cloud Function running locally or deployed to production to fetch link data from third-party websites.
-{{< /box >}}
-
-
-## Link Preview Component
-
-The component below demonstrates a basic **link preview** implementation in react. Submitting the form with URLs included in the text will be rendered in page with a title, image, and description based on the sites metatag's.
-
-The component starts with an empty array for the link data state, then makes an HTTP fetch to Cloud Function endpoint. The expected response is the link data scrapped securely from the third-party URLs submitted via the HTML form.
-
-{{< figure src="/img/snippets/react-link-preview.png" alt="Link preview result in React" >}}
-
-
-{{< file "js" "App.js" >}}
-{{< highlight jsx >}}
-import React, { useState } from 'react';
-import './App.css';
-
-function App() {
-
- return (
-
-
- );
-}
-
-function LinkPreview() {
-
- const [text, setText] = useState('');
- const [loading, setLoading] = useState(false);
- const [links, setLinks] = useState([]);
-
- const handleSubmit = async(evt) => {
- setLoading(true)
- evt.preventDefault();
- console.log(`Submitting ${text}`);
-
- const res = await fetch('http://localhost:5000/fireship-lessons/us-central1/scraper', {
- method: 'POST',
- body: JSON.stringify({ text })
- });
-
- const data = await res.json();
-
- setLinks(data);
- setLoading(false)
- }
-
- return (
-
-
Form
- Try this:
some example text https://fireship.io and https://fireship.io/courses/javascript/
-
-
-
-
Preview
-
{text}
-
- {loading &&
Fetching link previews... 🤔🤔🤔 }
-
-
- { links.map(obj =>
) }
-
-
-
-
-
{linkData.title}
-
{linkData.description}
-
- )
-}
-
-export default App;
-
-{{< /highlight >}}
diff --git a/hugo/content/snippets/nextjs-ssr-data-fetching-with-firebase.md b/hugo/content/snippets/nextjs-ssr-data-fetching-with-firebase.md
deleted file mode 100644
index 1f177d557..000000000
--- a/hugo/content/snippets/nextjs-ssr-data-fetching-with-firebase.md
+++ /dev/null
@@ -1,113 +0,0 @@
----
-title: Hydrate Next.js Props to Realtime Firestore Data
-lastmod: 2021-01-02T08:58:11-07:00
-publishdate: 2021-01-02T08:58:11-07:00
-author: Jeff Delaney
-draft: false
-description: Fetch and transitioning server-rendered data with Next.js to realtime Firestore data.
-tags:
- - react
- - ssr
- - nextjs
- - firestore
-
-type: lessons
-
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-versions:
- "next": 10
- "firebase": 8
- "react-firebase-hooks": 2.2
----
-
-[Next.js](https://nextjs.org/docs/basic-features/data-fetching) application data can be prerendered on the server with `getStaticProps` or at each request with `getServerSideProps`. That's great for search engine optimization, but what if you also need Firestore data to react to realtime updates after the initial render?
-
-The following snippet outlines techniques for fetching and hydrating server-rendered data with Next.js, while maintaining a realtime connection to Firebase. It assumes usage of [react-firebase-hooks](https://github.com/CSFrequency/react-firebase-hooks) and [Cloud Firestore](/tags/firestore).
-
-
-## Transition to Realtime
-
-### Fetch on the Server
-
-Data is fetched on the server with `getStaticProps`, then it's sent to the default component export as props.
-
-{{< file "react" "some-page.js" >}}
-```jsx
-// initialize Firebase JS SDK...
-
-export async function getStaticProps(context) {
-
- const ref = firestore.doc('items/foo');
- const item = (await ref.get()).data();
-
- return {
- props: { item }
- }
-}
-```
-
-### Realtime Connection on the Client
-
-The client will receive the predendered data first, then "transition" to a realtime stream from Firestore. It other words, try to show the latest data - but if null - fallback to the `props` value.
-
-{{< file "react" "some-page.js" >}}
-```jsx
-import { useDocumentData } from 'react-firebase-hooks/firestore'
-
-export default function SomePage(props) {
-
- const ref = firestore.doc('items/foo')
- const [item] = useDocumentData(ref)
-
- return (
-
- { (item ?? props.item).title }
-
- )
-}
-```
-
-## Custom Firestore SSR Hook
-
-The code above uses the nullish coalescing operator `??` to fallback to props, but that can be cumbersome code to maintain when dealing with many document fields. An alternative approach is to write a custom hook (by extending react-firebase-hooks) that starts with a default value. When Firestore is loading show props, otherwise show the latest realtime value.
-
-
-{{< file "react" "custom-hook.js" >}}
-```jsx
-import { useDocumentData } from 'react-firebase-hooks/firestore'
-
-function useDocumentDataSSR(ref, options) {
- const [value, loading, error] = useDocumentData(ref, options)
-
- if (options?.startWith && loading) {
- return [options.startWith, loading, error]
- } else {
- return [value, loading, error]
- }
-
-}
-```
-
-Now access fields on the Firestore document without worrying about whether it came from props or a realtime update.
-
-{{< file "react" "some-page.js" >}}
-```jsx
-export default function SomePage(props) {
-
- const ref = firestore.doc('items/foo')
- const [item] = useDocumentDataSSR(ref, { startWith: props.item })
-
- return (
-
- { item?.title }
-
- )
-}
-```
diff --git a/hugo/content/snippets/read-a-single-firestore-document.md b/hugo/content/snippets/read-a-single-firestore-document.md
deleted file mode 100644
index 04781b76f..000000000
--- a/hugo/content/snippets/read-a-single-firestore-document.md
+++ /dev/null
@@ -1,78 +0,0 @@
----
-title: Read a Single Firestore Document
-lastmod: 2019-12-04T19:57:21-07:00
-publishdate: 2019-12-04T19:57:21-07:00
-author: Jeff Delaney
-draft: false
-description: Strategies for querying a single Firestore document.
-tags:
- - firebase
- - firestore
-
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
-
-type: lessons
----
-
-The best way to [read](https://firebase.google.com/docs/firestore/query-data/get-data) a single Firestore document depends on the data you have access to. Each of the following strategies will execute a single document read, but uses different methods based on the underlying data model.
-
-
-## Strategies
-
-### With the ID
-
-Reading a document by its ID, path, or reference is simple.
-
-{{< file "js" "firestore.js" >}}
-{{< highlight javascript >}}
-async function getDoc(id) {
- const snapshot = await db.collection('users').doc(id).get();
- const data = snapshot.data();
-}
-
-{{< /highlight >}}
-
-### With a Unique Field
-
-A common use case is to *fetch a user by their unique email address or username*. In this scenario, you may have access to the field value, but not the ID. Make a query, then check it for emptiness.
-
-{{< highlight javascript >}}
-async function getUserByEmail(email) {
- // Make the initial query
- const query = await db.collection('users').where('email', '==', email).get();
-
- if (!query.empty) {
- const snapshot = query.docs[0];
- const data = snapshot.data();
- } else {
- // not found
- }
-
-}
-{{< /highlight >}}
-
-### With a Non-Unique Field
-
-Another common use-case is to *fetch the most recent post* In this case, we order by the desired field, then limit the result set.
-
-{{< highlight javascript >}}
-async function getMostRecent() {
- // Make the initial query
- const query = await db.collection('posts').orderBy('createdAt').limit(1).get();
-
- const snapshot = query.docs[0];
- const data = snapshot.data();
-
-}
-{{< /highlight >}}
-
-Learn more about [Firestore Data Modeling](/courses/firestore-data-modeling/) in the full course.
diff --git a/hugo/content/snippets/rxjs-switchmap.md b/hugo/content/snippets/rxjs-switchmap.md
deleted file mode 100644
index 3ca65c9d0..000000000
--- a/hugo/content/snippets/rxjs-switchmap.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-title: switchMap
-lastmod: 2018-12-29T08:28:56-07:00
-publishdate: 2018-12-29T08:28:56-07:00
-author: Jeff Delaney
-draft: false
-description: RxJS switchMap operator practical examples
-tags:
- - rxjs
-versions:
- - "rxjs": 6.3
----
-
-`switchMap` is one of the most useful RxJS operators because it can compose Observables from an initial value that is unknown or that change. Conceptually, it is similar to chaining `then` functions with Promises, but operates on streams (Promises resolve once).
-
-{{< box icon="abacus" >}}
-Example: You have an Observable of a userID, then use it to *switch* to an HTTP request of all posts owned by that user.
-{{< /box >}}
-
-
-{{< file "js" "foo.js" >}}
-{{< highlight javascript >}}
-import { of } from 'rxjs'; // creates an Observable with a raw value
-import { switchMap } from 'rxjs/operators';
-
-
-const user$ = of({ userID: 'jeffd23' });
-
-const boats$ = user$.pipe(
- switchMap(user => {
- // return an Observable or Promise here
- return fetch(`http://.../boats/${user.userID}`)
- })
-)
-
-boats$.subscribe(console.log);
-// Logs response from the API
-{{< /highlight >}}
-
-Notice how we only need to subscribe to the `boats$` Observable. It will automatically subscribe to the `$user`, then use the emitted userID to create the final observable of boats.
-
-
-{{< box icon="abacus" >}}
-Example 2: You have 2 Observables named `nums$` and `string$`. You want to get the value of the `string$` Observable when `nums$` emits even numbers.
-{{< /box >}}
-
-
-{{< file "js" "bar.js" >}}
-{{< highlight javascript >}}
-
-import { of, from } from 'rxjs';
-import { switchMap, filter } from 'rxjs/operators';
-
-const nums$ = from([1, 2, 3, 4, 5]);
-const string$ = of('It\'s an even number');
-
-// when values depend on each other we often ended up nesting subscriptions
-nums$.subscribe(firstValue => {
- if(firstValue % 2 === 0) {
- strings$.subscribe(secondValue => console.log(secondValue))
- }
-});
-
-
-// let's refactor with switchMap
-// switchMap will abandon the following values emitted from nums$, and only take values from string$
-
-nums$.pipe(
- filter(value => value % 2 === 0),
- switchMap(value => string$)
-).subscribe(value => console.log(value));
-// It's an even number
-// It's an even number
-{{< /highlight >}}
-
-Nested subscriptions are not ideal and can always be refactored with operators.
-
diff --git a/hugo/content/snippets/sendgrid-angular.md b/hugo/content/snippets/sendgrid-angular.md
deleted file mode 100644
index 1b44add33..000000000
--- a/hugo/content/snippets/sendgrid-angular.md
+++ /dev/null
@@ -1,126 +0,0 @@
----
-title: SendGrid Angular
-lastmod: 2019-07-05T10:43:06-07:00
-publishdate: 2019-07-05T10:43:06-07:00
-author: Jeff Delaney
-draft: false
-description: Send transactional email with SendGrid from Angular
-type: lessons
-# pro: true
-tags:
- - angular
- - sendgrid
-
-vimeo: 346868823
-github: https://github.com/fireship-io/196-sendgrid-email-cloud-functions
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
-
-# chapters:
-
----
-
-{{< box emoji="👀" >}}
-This tutorial is an extension of the [SendGrid Transactional Email Guide](/lessons/sendgrid-transactional-email-guide/). You must have the Cloud Functions deployed to start sending email from your frontend app.
-{{< /box >}}
-
-
-## Initial Setup
-
-Make sure you have [AngularFire installed](/snippets/install-angularfire/) in your project. Then include functions and auth in the main app module.
-
-{{< file "ngts" "app.module.ts" >}}
-{{< highlight typescript >}}
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-
-import { AppRoutingModule } from './app-routing.module';
-import { AppComponent } from './app.component';
-
-import { AngularFireModule } from '@angular/fire';
-import { AngularFireAuthModule } from '@angular/fire/auth';
-import { AngularFireFunctionsModule } from '@angular/fire/functions';
-
-import { environment } from '../environments/environment';
-
-@NgModule({
- declarations: [
- AppComponent
- ],
- imports: [
- BrowserModule,
- AppRoutingModule,
- AngularFireModule.initializeApp(environment.firebase),
- AngularFireAuthModule,
- AngularFireFunctionsModule
- ],
- providers: [],
- bootstrap: [AppComponent]
-})
-export class AppModule { }
-
-{{< /highlight >}}
-
-
-## Transactional Email Component
-
-{{< file "ngts" "app.component.ts" >}}
-{{< highlight typescript >}}
-import { Component } from '@angular/core';
-import { AngularFireFunctions } from '@angular/fire/functions';
-import { AngularFireAuth } from '@angular/fire/auth';
-import * as firebase from 'firebase/app';
-
-@Component({
- selector: 'app-root',
- templateUrl: './app.component.html',
- styleUrls: ['./app.component.scss']
-})
-export class AppComponent {
- constructor(public afAuth: AngularFireAuth, private fun: AngularFireFunctions) {}
-
-
-
- loginWithGoogle() {
- this.afAuth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
- }
-
- sendEmail() {
- const callable = this.fun.httpsCallable('genericEmail');
- callable({ text: 'Sending email with Angular and SendGrid is fun!', subject: 'Email from Angular'}).subscribe();
- }
-}
-{{< /highlight >}}
-
-
-The HTML provides simple conditional logic to display separate templates for logged-in and logged-out users.
-
-{{< file "html" "app.component.html" >}}
-{{< highlight html >}}
-SendGrid Transactional Email with Angular
-
-
-
-
- {{ user | json }}
-
-
Send Email with Callable Function
- SignOut
-
-
-
-
-
- SignIn with Google
-
-{{< /highlight >}}
diff --git a/hugo/content/snippets/sendgrid-flutter.md b/hugo/content/snippets/sendgrid-flutter.md
deleted file mode 100644
index 11278c719..000000000
--- a/hugo/content/snippets/sendgrid-flutter.md
+++ /dev/null
@@ -1,114 +0,0 @@
----
-title: SendGrid Flutter
-lastmod: 2019-07-05T10:43:06-07:00
-publishdate: 2019-07-05T10:43:06-07:00
-author: Jeff Delaney
-draft: false
-description: Send transactional email from Flutter with SendGrid
-type: lessons
-# pro: true
-tags:
- - flutter
- - ios
- - android
- - sendgrid
-
-vimeo: 346869096
-github: https://github.com/fireship-io/196-sendgrid-email-cloud-functions
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
-
-# chapters:
-
----
-
-{{< box emoji="👀" >}}
-This tutorial is an extension of the [SendGrid Transactional Email Guide](/lessons/sendgrid-transactional-email-guide/). You must have the Cloud Functions deployed to start sending email from your frontend app.
-{{< /box >}}
-
-
-## Initial Setup
-
-To support both iOS and Android, you will need to follow the [Firebase installation guide](/snippets/install-flutterfire/) and have the *cloud_functions* and *auth* plugins from [FlutterFire](https://github.com/flutter/plugins/blob/master/FlutterFire.md) installed.
-
-{{< file "flutter" "pubspec.yaml" >}}
-{{< highlight yaml >}}
-dependencies:
- flutter:
- sdk: flutter
-
- firebase_core: 0.4.0
- firebase_auth: 0.11.1+7
- cloud_functions: 0.4.0+2
-{{< /highlight >}}
-
-## Transactional Email Widget
-
-The widget below creates a new user with email/pass auth and provides a button to send a transactional email (via callable functions) from the app.
-
-{{< file "dart" "main.dart" >}}
-{{< highlight dart >}}
-class TransactionalEmail extends StatefulWidget {
- @override
- createState() => _TransactionalEmailState();
-}
-
-class _TransactionalEmailState extends State {
-
- final HttpsCallable callable = CloudFunctions.instance.getHttpsCallable(
- functionName: 'genericEmail',
- );
-
- final FirebaseAuth auth = FirebaseAuth.instance;
-
- FirebaseUser user;
-
- String emailAddress = 'CHANGE_ME@example.com';
-
- @override
- initState() {
- super.initState();
- auth.onAuthStateChanged.listen((u) {
- setState(() => user = u);
- });
- }
-
- sendEmail() {
- return callable.call({
- 'text': 'Sending email with Flutter and SendGrid is fun!',
- 'subject': 'Email from Flutter'
- }).then((res) => print(res.data));
- }
-
- @override
- Widget build(BuildContext context) {
- return Scaffold(
- appBar: AppBar(title: Text('Send Email with SendGrid and Flutter'),),
- body: Center(
- child: Column(
- mainAxisAlignment: MainAxisAlignment.center,
- children: [
- if (user != null) ...[
- Text('$user'),
- FlatButton(child: Text('SignOut'), onPressed: auth.signOut),
- FlatButton(child: Text('Send Email with Callable Function'), onPressed: sendEmail)
- ]
-
- else ...[
- FlatButton(child: Text('Login'), onPressed: () => auth.createUserWithEmailAndPassword(email: emailAddress, password: 'demoPass23'))
- ]
- ],
- ),
- ),
- );
- }
-}
-{{< /highlight >}}
\ No newline at end of file
diff --git a/hugo/content/snippets/sendgrid-react.md b/hugo/content/snippets/sendgrid-react.md
deleted file mode 100644
index 99d20cb7f..000000000
--- a/hugo/content/snippets/sendgrid-react.md
+++ /dev/null
@@ -1,112 +0,0 @@
----
-title: SendGrid React
-lastmod: 2019-07-05T10:43:06-07:00
-publishdate: 2019-07-05T10:43:06-07:00
-author: Jeff Delaney
-draft: false
-description: Send transactional email with SendGrid from ReactJS
-type: lessons
-# pro: true
-tags:
- - react
- - sendgrid
-
-vimeo: 346869300
-github: https://github.com/fireship-io/196-sendgrid-email-cloud-functions
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
-
-# chapters:
-
----
-
-{{< box emoji="👀" >}}
-This tutorial is an extension of the [SendGrid Transactional Email Guide](/lessons/sendgrid-transactional-email-guide/). You must have the Cloud Functions deployed to start sending email from your frontend app.
-{{< /box >}}
-
-
-## Initial Setup
-
-Start by installing the [Firebase Web SDK](https://firebase.google.com/docs/web/setup), then initialize the packages in the root of the project.
-
-{{< file "js" "firebase.js" >}}
-{{< highlight javascript >}}
-import firebase from 'firebase/app';
-import 'firebase/auth';
-import 'firebase/functions';
-
-const config = {
- // your firebase config
-}
-
-firebase.initializeApp(config);
-
-export const app = firebase.app();
-export const auth = firebase.auth();
-export const functions = firebase.functions();
-{{< /highlight >}}
-
-
-## Transactional Email Component
-
-The React component uses the `setState` hook to monintor to the user's auth state, while `sendEmail` references the callable function deployed to Firebase.
-
-{{< file "js" "App.js" >}}
-{{< highlight jsx >}}
-import React, { useState } from 'react';
-import './App.css';
-
-import * as firebase from 'firebase/app';
-import { auth, functions } from './firebase';
-
-function App() {
-
- const [user, setUser] = useState(null);
-
- auth.onAuthStateChanged(setUser);
-
- return (
-
-
SendGrid Transactional Email with React
- {user ? signOutUI(user) : signInUI() }
-
- );
-}
-
-function signInUI() {
- return (
-
- auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())}>SignIn with Google
-
- )
-}
-
-function signOutUI(user) {
- return (
-
-
-
{ JSON.stringify(user) }
-
-
-
-
sendEmail()}>Send Email with Callable Function
-
auth.signOut()}>SignOut
-
SendGrid Transactional Email with Svelte
-
-{#if user}
- { JSON.stringify(user) }
- sendEmail()}>Send Email with Callable Function
- auth.signOut()}>SignOut
-
-{:else}
- auth.signInWithPopup(new firebase.auth.GoogleAuthProvider())}>SignIn with Google
-{/if}
-
-{{< /highlight >}}
diff --git a/hugo/content/snippets/sendgrid-vue.md b/hugo/content/snippets/sendgrid-vue.md
deleted file mode 100644
index 2ce776789..000000000
--- a/hugo/content/snippets/sendgrid-vue.md
+++ /dev/null
@@ -1,111 +0,0 @@
----
-title: SendGrid Vue
-lastmod: 2019-07-05T10:43:06-07:00
-publishdate: 2019-07-05T10:43:06-07:00
-author: Jeff Delaney
-draft: false
-description: Send transactional email from Vue with SendGrid
-type: lessons
-# pro: true
-tags:
- - vue
- - sendgrid
-
-vimeo: 346869657
-github: https://github.com/fireship-io/196-sendgrid-email-cloud-functions
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
-
-# chapters:
-
----
-
-{{< box emoji="👀" >}}
-This tutorial is an extension of the [SendGrid Transactional Email Guide](/lessons/sendgrid-transactional-email-guide/). You must have the Cloud Functions deployed to start sending email from your frontend app.
-{{< /box >}}
-
-
-## Initial Setup
-
-Start by installing the [Firebase Web SDK](https://firebase.google.com/docs/web/setup), then initialize the packages in the root of the project. Vuefire can be installed as well, but is not required for this feature.
-
-{{< file "js" "firebase.js" >}}
-{{< highlight javascript >}}
-import firebase from 'firebase/app';
-import 'firebase/auth';
-import 'firebase/functions';
-
-const config = {
- // your firebase config
-}
-
-firebase.initializeApp(config);
-
-export const app = firebase.app();
-export const auth = firebase.auth();
-export const functions = firebase.functions();
-{{< /highlight >}}
-
-
-## Transactional Email Component
-
-The [Vue](https://vuejs.org/) component uses the `beforeCreate` lifecycle hook to monintor to the user's auth state, while `sendEmail` references the callable function deployed to Firebase.
-
-{{< file "vue" "HelloWorld.vue" >}}
-{{< highlight html >}}
-
-
-
-
- {{ JSON.stringify(user) }}
- Send Email with Callable Function
- Sign Out
-
-
-
- Login with Google
-
-
-
-
-
-{{< /highlight >}}
\ No newline at end of file
diff --git a/hugo/content/snippets/svelte-electron-setup.md b/hugo/content/snippets/svelte-electron-setup.md
deleted file mode 100644
index af2f268db..000000000
--- a/hugo/content/snippets/svelte-electron-setup.md
+++ /dev/null
@@ -1,138 +0,0 @@
----
-title: How to Use Svelte with Electron
-lastmod: 2020-02-29T06:59:27-07:00
-publishdate: 2020-02-29T06:59:27-07:00
-author: Jeff Delaney
-draft: false
-description: Setup Svelte with Electron Forge for Desktop App Development
-tags:
- - svelte
- - electron
-
-type: lessons
-youtube: m3OjWNFREJo
-code: electron-svelte-boilerplate
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
----
-
-The following guide demonstrates how to setup Svelte with Electron Forge. The end result is an Electron app capable of hot reloading the render process.
-
-💡 You can skip these steps by manually cloning the [electron-forge-svelte template](https://github.com/codediodeio/electron-forge-svelte) from GitHub.
-
-{{< figure src="/img/snippets/electron-svelte-hello.png" caption="Svelte running with Electron Forge" >}}
-
-
-## Step 1 - Generate an Electron Forge App
-
-First, generate an Electron Forge app.
-
-{{< file "terminal" "command line" >}}
-```text
-npx create-electron-app my-app
-cd my-app
-```
-
-## Step 2 - Manually Integrate Svelte & Rollup
-
-At this point, we need to manually add svelte to the project. This guide uses the official [Svelte template](https://github.com/sveltejs/template) for the source code. Get ready for some surgical copy and pasting...
-
-1. Delete `index.html` and `index.css` from the `src` directory.
-1. Create a `public` folder, then copy the `index.html`, `global.css`, and `favicon.png` from the Svelte template.
-1. Copy the `src/main.js` and `src/App.svelte` files from the Svelte template. To avoid confusion with Electron's main process, change the name of `main` to `svelte`.
-1. Copy the `rollup.config.js` file from the Svelte template.
-
-### Package.json Setup
-
-Copy the dependencies and devDependencies from the Svelte Template to your project's package.json.
-
-{{< file "terminal" "command line" >}}
-```text
-npm install
-npm install concurrently
-```
-
-Copy the scripts from Svelte Template, then append `svelte-` to each script name. Next, modify the `start` script to concurrently run Svelte and Electron.
-
-{{< file "npm" "package.json" >}}
-```json
- "scripts": {
- "start": "concurrently \"npm:svelte-dev\" \"electron-forge start\"",
- "package": "electron-forge package",
- "make": "electron-forge make",
- "publish": "electron-forge publish",
- "lint": "echo \"No linting configured\"",
- "svelte-build": "rollup -c",
- "svelte-dev": "rollup -c -w",
- "svelte-start": "sirv public"
- },
-```
-
-### Rollup Modification
-
-Make the following changes to the Rollup config file. Update the serve function to call `svelte-start` instead of `start`.
-
-{{< file "rollup" "rollup.config.json" >}}
-```js
-export default {
- input: 'src/main.js', // <-- here
- // ...omitted
-}
-
-//
-function serve() {
-
- // ...omitted
- require('child_process').spawn('npm', ['run', 'svelte-start', '--', '--dev'], // <-- and here
-```
-
-### HTML Modification
-
-Electron resolves paths in your `index.html` relative to the `index.js` main process. Update your HTML to use paths relative to the current working directory, i.e. `./`.
-
-{{< file "html" "public/index.html" >}}
-```html
-
-
-
-
-
-
-```
-
-Put this component to use anywhere in the app to access the current user's data, like a user profile for example:
-
-```html
-
- Logged in as {{ user.uid }}
-
-```
-
-## Reactive Realtime Document
-
-The following code creates a `reactive` value, then subscribes
-
-### Making Firestore Reactive in Vue
-
-The code below provides a function that listens to a Firestore document in realtime. Each change to the underlying document data causes Firebase to emit a new object, which we can reactively update with `ref` from the Vue Composition API.
-
-{{< file "js" "firebase.js" >}}
-```javascript
-import { ref } from '@vue/composition-api';
-
-export function reactiveDoc(path) {
-
- const data = ref(null);
-
- const docReference = db.doc(path);
-
- const unsubscribe = docReference.onSnapshot(snap => {
-
- data.value = snap.data();
-
- });
-
-
- return {
- docReference,
- data,
- unsubscribe
- };
-}
-```
-
-### Make Data Available in a Slot
-
-In a component, you can connect your realtime data by simply exporting the data value. It is also a good practice to unsubscribe when the component is destroyed to prevent memory leaks.
-
-{{< file "vue" "Doc.vue" >}}
-```html
-
-
-
-
-
-
-```
-
-At this point, we can access the reactive data directly in a template using the slot props from the component.
-
-```html
-
-
-
- {{ product.title }}
-
-
-
-```
-
-
-## Comparison to VueFire
-
-[VueFire](https://github.com/vuejs/vuefire) is an excellent option for building Firebase apps with Vue.
-
-{{< file "terminal" "command line" >}}
-```text
-npm i vuefire
-```
-
-{{< file "js" "main.js" >}}
-```javascript
-import { firestorePlugin } from 'vuefire'
-
-Vue.use(firestorePlugin)
-```
-
-### VueFire Document Component
-
-{{< file "vue" "Doc.vue" >}}
-```html
-
-
-
-
-
-
-```
\ No newline at end of file
diff --git a/hugo/content/snippets/using-viewchild-in-ionic-4-to-call-component-methods.md b/hugo/content/snippets/using-viewchild-in-ionic-4-to-call-component-methods.md
deleted file mode 100644
index 280e2a08c..000000000
--- a/hugo/content/snippets/using-viewchild-in-ionic-4-to-call-component-methods.md
+++ /dev/null
@@ -1,98 +0,0 @@
----
-title: Using ViewChild in Ionic to Call Component Methods
-lastmod: 2018-08-18T18:39:19-07:00
-publishdate: 2018-08-18T18:39:19-07:00
-author: Jeff Delaney
-draft: false
-description: ViewChild is an important tool in Ionic that can be used to call API methods on components.
-tags:
- - ionic
- - angular
-
-# youtube:
-# code:
-# disable_toc: true
-# disable_qna: true
-
-# courses
-# step: 0
-
-# versions:
-# - "rxjs": 6.3
----
-
-Many of Ionic's components expose API methods for building custom behaviors. But how do you access these API methods on a component that lives in the HTML?
-
-The [ViewChild](https://angular.io/api/core/ViewChild) decorator is extremely useful in Ionic for grabbing elements from the DOM to call the components API methods in your TS code. Let's use the [menu](https://beta.ionicframework.com/docs/api/menu/) component as an example. Out of the box, the only way to close it is by tapping outside of it, but you might more programmatic control over it.
-
-## Grab Ionic Components with ViewChild
-
-Let's imagine we have a `HomePage` component that looks like this and we want to close the menu when an item is clicked.
-
-```html
-
-
-
-```
-
-Our goal is to access the `ion-menu` from the TypeScript code so we can call its API methods, like `open()` and `close()`.
-
-```typescript
-import { Component, ViewChild } from '@angular/core';
-import { Menu } from '@ionic/angular';
-
-@Component(...)
-export class HomePage {
-
- @ViewChild(Menu) menu: Menu;
-
-
- onDrag() {
- this.menu.close();
- }
-}
-```
-
-## Shortcut: Use Template Variables
-
-There's actually a very convenient shortcut to using ViewChild in a component. We never have to leave the HTML by setting a template variable in Angular. In this example we reference the menu component with a hashtag and variable name `#mymenu`.
-
-```html
-
-
-
-
-```
-
-And we're done. Much easier then using ViewChild in the TypeScript.
-
-## Grabbing Multiple Components with ViewChildren
-
-You might also run into a situation where there are multiple components of the same type on the page, such as multiple FABs:
-
-```html
-
-npm install
-npm run dev
-
-git checkout -b my-fix
-{{< /highlight >}}
-
-After making your fix or adding new content, submit a pull request on GitHub.
-
-{{< file "terminal" "command line" >}}
-{{< highlight text >}}
-git commit -m "fix: corrected a typo"
-git push origin my-fix
-{{< /highlight >}}
-
-
-## Writing in Markdown
-
-Content is written in [markdown](https://gohugo.io/content-management/formats/#learn-markdown). Posts should only use h2 and h3 tags.
-
-{{< file "md" "some-cool-post.md" >}}
-```markdown
-
-## Step 1: Do Something
-
-some overview text
-
-### Specific Details
-
-[link](/style-guide/) to somewhere useful
-```
-
-Images for lessons are saved in the relative image dir, `lessons//img/` and use the Hugo figure shortcode.
-
-{{< file "md" "some-cool-post.md" >}}
-```markdown
-{{}}
-```
-
-## Add Contributor Bio
-
-Thank you for contributing 🙏. Make sure you add details to the contributors section and save your avatar image to the `static/img/contributors` dir.
-
-{{< file "md" "michael-jordan.md" >}}
-```markdown
----
-title: Michael Jordan
-draft: false
-
-featured_img: /img/contributors/your-avatar.png
-
-youtube:
-linkedin:
-medium:
-twitter:
-github:
-portfolio:
----
-
-I used to play baseball...
-
-```
-
-
-
diff --git a/hugo/data/courses.yaml b/hugo/data/courses.yaml
deleted file mode 100644
index 045c72228..000000000
--- a/hugo/data/courses.yaml
+++ /dev/null
@@ -1,38 +0,0 @@
-# URL to sku for course single template
-# SKU to ID for buy-course partial
-
-flutter-firebase: sku_FJCsh7mvjI83Kz
-sku_FJCsh7mvjI83Kz: flutterFirebase
-
-stripe-payments: sku_FJEdgiT5ZF8bCQ
-sku_FJEdgiT5ZF8bCQ: stripePayments
-
-sku_FJEdx5Tz9dPrvm: firestoreDataModeling
-firestore-data-modeling: sku_FJEdx5Tz9dPrvm
-
-sku_FSAhASTSPQb1oh: ionic
-ionic: sku_FSAhASTSPQb1oh
-
-sku_Fn7Ojng8TLwnC4: angular
-angular: sku_Fn7Ojng8TLwnC4
-
-vue: sku_H1XsUY6LLGAgVx
-sku_H1XsUY6LLGAgVx: vue
-
-stripe-js: sku_HG8dqucZV4x6F2
-sku_HG8dqucZV4x6F2: stripeJs
-
-firebase-security: sku_IVIjaiCRlivYD3
-sku_IVIjaiCRlivYD3: firebaseSecurity
-
-react-next-firebase: sku_ItHZfVSApb3xkT
-sku_ItHZfVSApb3xkT: reactNextFirebase
-
-git: sku_KBHTYbTWv1Hmb7
-sku_KBHTYbTWv1Hmb7: git
-
-dart: sku_KOyOvlrmLikRz8
-sku_KOyOvlrmLikRz8: dart
-
-sku_Kf57qdqUerVTUS: vscodeTricks
-vscode-tricks: sku_Kf57qdqUerVTUS
\ No newline at end of file
diff --git a/hugo/data/defaults.yaml b/hugo/data/defaults.yaml
deleted file mode 100644
index 4c2a1518e..000000000
--- a/hugo/data/defaults.yaml
+++ /dev/null
@@ -1,2 +0,0 @@
-version: 0.23.7
-featured_img: /img/covers/default.png
\ No newline at end of file
diff --git a/hugo/data/links.yaml b/hugo/data/links.yaml
deleted file mode 100644
index 46543d76e..000000000
--- a/hugo/data/links.yaml
+++ /dev/null
@@ -1,6 +0,0 @@
-slack: https://fireship.page.link/slack
-github: https://github.com/fireship-io
-github_content: https://github.com/fireship-io/fireship.io/tree/master/hugo/content
-twitter: https://twitter.com/fireship_dev
-youtube: https://www.youtube.com/channel/UCsBjURrPoezykLs9EqgamOA
-gde: https://developers.google.com/community/experts/directory/profile/profile-jeff-delaney
diff --git a/hugo/layouts/404.html b/hugo/layouts/404.html
deleted file mode 100644
index 2901f7f8a..000000000
--- a/hugo/layouts/404.html
+++ /dev/null
@@ -1,9 +0,0 @@
-{{ define "main"}}
-
-
-
404 Error
-
That page does not exist
- {{ partial "svg/bug.svg" . }}
-
- {{ block "main" . }}{{ end }}
- {{ block "feed" . }}{{ end }}
-
-
-
-
-
-
-
-
-
- {{ .Content }}
-
-{{ end }}
-
-{{ define "feed" }}
-
- {{ if not .Params.hide_feed }}
-
-
- {{ range .Pages }}
-
- {{ partial "lesson-card" . }}
-
- {{ end }}
-
-
- {{ end }}
-
- {{ partial "footer" . }}
-
-{{ end }}
-
-
diff --git a/hugo/layouts/_default/single.html b/hugo/layouts/_default/single.html
deleted file mode 100644
index af161a23d..000000000
--- a/hugo/layouts/_default/single.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{{ define "main" }}
-
-{{ end }}
diff --git a/hugo/layouts/contributors/single.html b/hugo/layouts/contributors/single.html
deleted file mode 100644
index 4fe67685f..000000000
--- a/hugo/layouts/contributors/single.html
+++ /dev/null
@@ -1,29 +0,0 @@
-{{ define "main" }}
-
-
-
-
-
-
-
-
- {{ .Title }} Contributor Bio
-
-
-
- {{ partial "contributor-links.html" . }}
-
-
-
- {{ .Content }}
-
-
-
-
-{{ end }}
diff --git a/hugo/layouts/courses/list.html b/hugo/layouts/courses/list.html
deleted file mode 100644
index 74b431c0b..000000000
--- a/hugo/layouts/courses/list.html
+++ /dev/null
@@ -1,70 +0,0 @@
-{{ define "main" }}
-{{ $free := .Params.free }}
-
-{{ $courses := .Site.Data.courses }}
-
-{{ $sku := index $courses ( (index (split .RelPermalink "/") 2)) }}
-{{ $course := index $courses (string $sku) }}
-
-
-
-
- {{ .Title }}
-
-
- {{ with .Params.video }}
-
-
-
-
-
-
- {{ if not $free }}
-
-
-
-
-
-
-
-
-
- Get Unlimited PRO Access
-
- {{ if $course }}
- OR
- *Enrollment provides full access to this course (and updates) for life.
-
- {{ end }}
-
-
-
-
-
-
-
-
-
-
Chapters
-
- {{ partial "chapters.html" (dict "chapters" .Pages "active" .RelPermalink) }}
-
- {{ end }}
-{{ end }}
diff --git a/hugo/layouts/courses/single.html b/hugo/layouts/courses/single.html
deleted file mode 100644
index 82bc5fa68..000000000
--- a/hugo/layouts/courses/single.html
+++ /dev/null
@@ -1,127 +0,0 @@
-{{ define "main" }}
-{{ $free := .Params.free }}
-
-{{ $courses := .Site.Data.courses }}
-
-{{ $sku := index $courses ( (index (split .RelPermalink "/") 2)) }}
-{{ $course := index $courses (string $sku) }}
-
-
-
-
-
- {{ .Title }}
- {{ with .Params.description }}
- {{ . }}
- {{ end }}
-
-
-
-
- {{ with .Params.vimeo }}
-
- {{ if $free }}
-
-
-
-
-
-
- {{ partial "video-login.html" }}
-
-
- {{ else }}
-
-
-
-
-
-
-
-
-
-
-
-
-
{{ partial "svg/hazard.svg" }}
-
- This lesson is available for PRO members or as a single course purchase. Sign-in and choose a plan below.
-
-
-
-
-
-
-
Get Unlimited PRO Access
- {{ if $course }}
-
OR
-
*Enrollment provides full access to this course (and updates) for life.
-
- {{ end }}
-
-
-
-
-
-
-
-
-
-
- {{ partial "video-login.html" }}
-
-
-
-
-
-
-
- {{ end }}
-
- {{ end }}
-
-
-
-
-
-
-
-
-
- 
+
+ {#if isComplete}
+
+ {/if}
+ 
-