Supaship
ZLS 031 | Alex Okrushko
updated
Checkout supabase: supabase.com
Full Course on @Fireship: fireship.io/courses/supabase (use code "SUPASHIP" for 50% off)
muh twitter: twitter.com/zackderose
TkDodo's Twitter: twitter.com/TkDodo
Project Repo: github.com/fireship-io/supaship.io
Course: fireship.io/courses/supabase
(^ use code "SUPASHIP" to get this course for $10)
please like && subscribe if these help.
Checkout my twitter for more: twitter.com/zackderose
=== Chapters ===
0:00 1. Using Tuples To Specific Array Size
1:00 2. Tuples Don't actually exist
2:06 3. the `Omit` Utility type
3:16 4. Using a string Union TYpe to define properties on an object
Be sure to subscribe for more tech tips!
Be sure to subscribe for more tech tips!
=== Chapters ===
0:00 1. Type Predicates
1:27 2. Use zod for Complex Object Type Predicates
2:49 3. The Asserts Keyword
3:47 4. Using "as const"
4:46 5. "as const" for read-only Arrays and Union Types
6:24 Just me begging for likes - can skip!
Using the Nx starter repo: github.com/nrwl/advent-of-code-starter
My solutions: github.com/ZackDeRose/advent-of-code-starter
=== time codes ===
0:00 setting up
4:13 day 1 part 2
8:26 day 2 part 1
21:34 day 2 part 2
47:10 day 3 part 1
59:54 day 3 part 2
1:11:38 day 4 part 1
1:26:47 day 4 part 2
1:32:32 day 5 part 1
1:57:33 day 5 part 2
2:03:48 break
2:09:35 day 6 part 1
2:19:12 day 6 part 2
2:25:47 reading day 7
2:31:10 day 7 part 1
2:59:35 day 7 part 2
3:13:21 day 8 part 1
3:34:25 day 8 part 2
Angular Supaship Repo: github.com/ZackDeRose/angular-supaship-io
Live Supaship site: supaship.io
Vox Populi, Vox Dei
+ navigate to page after making post
+ scroll to comment after creating it
Our full course is now available at fireship.io/courses/supabase - just $10 with 50% promo code: SUPASHIP
Come and chill use us, should be a good time.
Just a quick rant on why someone might want to roll their own authentication system, and how Supabase Auth checks off all those boxes.
Use all the functionality of Supabase RLS and edge functions to create an honest email list for your site.
Source code: github.com/ZackDeRose/supaship-video
Upgrade to Fireship PRO at fireship.io/pro and keep an eye for our upcoming Supabase course
=== Timestamps ===
0:00 Just Monkeying around
0:54 Basic Architecture
1:32 Creating our email list table
3:55 Letting users sign up
7:50 Letting users cancel their subscription
8:40 Letting Admins send emails
12:13 Showing it all working
Use built-in Supabase Auth, but without forcing users to provide an email address or phone number.
DISCLAIMER: I wouldn't really, but you could!
Source code: github.com/ZackDeRose/supaship-video/tree/username-login
Upgrade to Fireship PRO at fireship.io/pro and keep an eye for our upcoming Supabase course
=== Timestamps ===
0:00 What all started with a comment
0:46 Setting up in Supabase
1:32 Signup on Frontend
2:49 The Great Supabase Username Login Hack
3:51 Creating and deploying our Edge Function
6:04 Signin on Frontend
6:44 Congratulations and Disgust
Source code: github.com/ZackDeRose/supaship-video
That command to start the server w/ file watching:
npx nodemon -e "js,html" -x "npx http-server --port 3000"
=== Timestamps ===
0:00 Plagraized intro
1:46 Project Setup
4:13 Shilling for Subscriptions
4:44 Setting up Supabase project
5:50 Enabling Google Sign-in
8:12 User Login
13:40 Creating Supabase Table
14:43 Showing Data On Our App in Realtime
20:31 Enabling Supabase RLS
21:27 Letting Users Delete Their Things
25:30 Deploying Your App W/ Netlify
26:19 Even More SupaFeatures
We had a great chat on success, emotional intelligence, communication, hope, truth, and corrupted systems, and I'm very grateful for his generosity - sharing his time and his knowledge with us.
=== Links ===
Frank E. Brady:
Website: frankebrady.com
Instagram: instagram.com/frankebrady
Twitter: twitter.com/FrankEBrady
Black Enterprise:
Website: blackenterprise.com
Instagram: instagram.com/BlackEnterprise
Twitter: twitter.com/blackenterprise
Vision Fuel Entertainment (Creator's of Frank's New Site):
Website: visionfuelent.com
Instagram: instagram.com/visionfuel
Twitter: mobile.twitter.com/visionfuelent
Zack DeRose:
Website: https://zackderose.dev
Twitter: twitter.com/zackderose
Instagram: instagram.com/zackderose
[^ new! Frank was my first follower :)]
Atomic Habits: amazon.com/Atomic-Habits-Proven-Build-Break-ebook/dp/B07D23CFGR
=== Chapters ===
0:00 Introductions
7:10 Success and Tools to Achieve it
22:30 The Power of Internal Identity && Proactive Health
32:45 Finding your Why & Emotional Intelligence
55:00 Being a Hope Dealer
1:09:20 Human Biology, Tribes, and George Floyd
1:30:30 The Role of Human Connection and Faith; And Optimizing For Truth Over Systems
1:42:50 Leadership and Blindspots
1:46:50 Importance of Language and Communication
1:54:20 Communication, Politics, And Fixing Broken Systems
2:05:40 Lessons on Changing the World from Game Of Thrones and Ned Stark
Mentioned in this episode:
Nx: https://nx.dev/
Nx Cloud: https://nx.app/
Nrwl: nrwl.io
[full disclosure: Zack works as an Engineering Manger and Senior Software Engineer for Nrwl: creator of Nx && Nx Cloud]
Peak Mind: amazon.com/Peak-Mind-Attention-Invest-Minutes-ebook/dp/B08THNJ978
Peak Mind Audible link: audible.com/pd/Peak-Mind-Audiobook/0062992171
Huberman Lab: youtube.com/c/AndrewHubermanLab
Youssef: twitter.com/YoussefTaghlabi | linkedin.com/in/ytaghlabi
Hicham: twitter.com/helhammo | linkedin.com/in/hichamelhammouchi
Always excited to get a chance to chat with Ben - the sheer impact he's had on THE WEB with RxJS (28,031,199 weekly npm downloads as of this upload) is crazy.
Check out our chat about axolotls, observables, and RxJS.
The DeRose Hypothesis: youtube.com/watch?v=H9EZZDREMEk&t=780s
NgRx in 1 File: youtube.com/watch?v=KPvjZbEsX5M
WTF is a Cold Observable: youtube.com/watch?v=4btjdWHM6lI
=== Chapters ===
00:00 Introductions
03:52 New Operators Worth Noting
08:15 Subscribe vs. Async Pipe
12:33 RxJS vs. NgRx for State Management - Pros and Cons
19:55 Favorite Way to Test Observables
22:45 Lifecycle Hooks and Observables
25:40 How to Best Unsubscribe From Observables
28:35 Steep Learning Curves and Moving from Imperative to Declarative
32:55 HttpClient, Async Pipe, and Network Calls
36:55 Promises in Angular
40:45 Sharing Data between Microfrontends
43:20 Unwrapping NgRx Observables - An Antipattern?
52:50 Hot Observables
55:25 Common Patterns for Combining Multiple Observables
59:40 Exported vs. "Service"d Functions
1:06:05 RxJS - Going From Hard to Easy
1:06:54 State Management Solution or RxJS - Rule of Thumb?
1:11:00 ReactiveX Libraries for Other Languages
1:12:07 More patterns around NgRx-less RxJS
1:15:20 Debugging Observables
1:16:48 Most Common Error to Avoid in RxJS
1:17:50 Learn Angular First? Or RxJS?
1:19:12 What Not to Teach RxJS Beginners
1:20:25 Do I Need to Unsubscribe from HttpClient Observables?
1:22:40 Eliminating Shared State
1:24:50 RxJS in React
1:27:25 Resources on Declarative vs. Imperative Code
1:29:28 Love For Marble Diagrams
1:30:55 Fate For Marble Tests
1:32:40 fromEvent() in Angular
1:34:25 Closing Remarks
NgWorkers Github: github.com/ngworker
NgWorkers Monorepo: github.com/ngworker/ngworker
Lumberjack Repo: github.com/ngworker/lumberjack
Table Spreadsheet Branch: github.com/ngworker/ngworker/tree/table-spreadsheet
Pregular repo: github.com/pregular
Santosh's YouTube Channel: youtube.com/channel/UChvYTafHRgXKb0VbYGeG0nw
Lar's Youtube Channel (Deep Dive and Angular After Dark broadcasts): youtube.com/channel/UCsZWzmsdKz2VA49XXBK5TQA/videos
This is Angular Publication: dev.to/this-is-angular
This is Learning Publication: dev.to/this-is-learning
Stryker Mutator: stryker-mutator.io
=== Chapters ===
00:00 Introductions
08:45 Open source groups coming together
10:45 NgWorkers Github action to test against matrix of Angular versions
24:30 Lumberjack
47:00 Spectacular
1:45:00 Table Spreadsheet
1:59:00 Finding and working in open source team
2:03:15 Pregular
=== Links ===
+ Ben's Twitter: twitter.com/BenLesh
+ Official RxJS site: rxjs-dev.firebaseapp.com
+ Automated RxJS Code Analysis, RxJS Live!: youtube.com/watch?v=vC1KXMo97XI
=== Chapters ===
00:00 Introductions
08:33 Dealing with Complexity of RxJS
15:37 Possibilities with Angular Ivy Renderer and Preact
18:10 Angular and React and DSL
21:50 What constitutes "Reactive Code"
29:46 The Different Kinds of Reactivity
32:00 Are Promises Still Relevant In an Observables World?
46:23 Eagerness and Laziness in Promises and the different direction of Observables
50:44 The Power of Typescript and Functional Programming
53:33 Observables as Alternative to Imperative Code
55:32 Where Modern Web Frameworks have Failed Us
=== Links ===
Outsmartly Developer Signup Form: outsmartly.com/signup
Jay's Talk on ESR: youtube.com/watch?v=ylRpAG4OzxY&ab_channel=Vercel
Outsmartly Website: outsmartly.com
Gatsby Conf (where Jay will be speaking next): gatsbyconf.com
emscripten (WebAssembly compiler toolchain): emscripten.org
Wasmer: wasmer.io
Wasi | The WebAssembly System Interface: https://wasi.dev/
Asim Hussain's Angular Course (I forget Asim's first name in our conversation!): codecraft.tv/courses/angular/quickstart/overview
Green Power Ranger's Dragon Dagger: amazon.com/Replica-Rangers-Lightning-Collection-Dragon/dp/B084XTC8XH
=== Chapters ===
00:00 Shameless Groveling for Likes
00:23 Introductions
01:24 Edge Slice Rerendering and Outsmartly
13:35 The Web as App Store, and the Web as Documents
19:50 Native code Adapted for the web, and other Web Assembly coolness
42:36 The Power and Cost of RxJS
51:00 Velocity and Quality
58:01 The Progression of Web Building that leads to ESR
1:12:54 Web Apps, and Web Sites, and their different set of Priorities
=== Links ===
Adam's Twitter: twitter.com/adamlbarrett
How it Should Have Ended: youtube.com/channel/UCHCph-_jLba_9atyCZJPLQQ
Zack's Habit Tracker App: https://feb-cal-habits.web.app/
Adam's Talk: "React Hooks: The Weird Ones": youtube.com/watch?v=HxY7SzIN44o
Adam's Talk: "RxJS with React": youtube.com/watch?v=xUFxB23s9R4
Positive and Negative Zero in JS: medium.com/coding-at-dawn/is-negative-zero-0-a-number-in-javascript-c62739f80114
90's Sega Tower of Power: youtube.com/watch?v=Y55ZBT_UcmU
Contemporary Mini Tower of Power: youtube.com/watch?v=MgoXEsgpzzw
Rich Hickey's Talk "Simple Made Easy": youtube.com/watch?v=oytL881p-nQ
Interesting Talk From Adam Thornhill on Measuring Velocity/Tech Debt (I forget the name of this talk/presenter during the conversation): youtube.com/watch?v=fl4aZ2KXBsQ
What is Zalgo: knowyourmeme.com/memes/zalgo
=== Chapters ===
00:00 Shameless Groveling for Likes
00:29 Friend of the Show: Adam L Barrett
00:51 Tools and Being a Proper Dad
03:50 RxJS for Changing Properties in Angular && How Hooks fill that niche in React
10:30 React as Synchronous Renders Based on Discrete State
16:27 RxJS with `useEffect()` as a Way to Enhance React Goodness
31:02 Context as React's Dependency Injection && Advantages to React Components Over Angular Components
39:01 Side Conversation on Default Contexts for a React Context
48:45 Exploring RxJS for Push Architectures in React
54:38 Lack of Domain Specific Knowledge in React
1:02:18 React Hooks vs. Classes and Learning the History of a Framework
1:05:00 The Optimal Order To Learn Fundamentals
1:07:07 How to Measure/Improve Velocity
1:14:50 Cold and Hot Observables as Opposed to Cold and Hot Promise
1:23:50 Asynchronicity in React and Summoning Zalgo
1:30:03 Aside: New Methods to convert Observables to Promises
1:32:30 React as a Framework, Isolation and Separation of Concerns
1:36:10 The Robustness of Observables, and the Cost of RxJS
1:40:42 NgRx as a Valuable Tool To Flatten the RxJS learning curve
1:48:22 Facade and Adapter Patterns
=== Links ===
Epic React: https://epicreact.dev
Kent's Personal Site: kentcdodds.com
Kent's Discord: https://kcd.im/discord
KCD Learning Clubs: kentcdodds.com/clubs
Kent's devMode.fm episode: https://devmode.fm/episodes/epic-react-with-kent-c-dodds
3-Minutes with Kent: https://www.briefs.fm/3-minutes-with-kent
Remix: https://remix.run
Kent's blog, Build vs Buy: Component Libraries edition: kentcdodds.com/blog/build-vs-buy-component-libraries-edition
Kent's blog, Why I Love React: https://epicreact.dev/why-i-love-react/
Rich Hickey's talk, Simple made Easy: youtube.com/watch?v=oytL881p-nQ
Zack's talk, Declarative vs. Imperative; The DeRose Hypothesis on Code Complexity: youtube.com/watch?v=H9EZZDREMEk&t=784s
Kent's blog, When to useMemo and useCallback: kentcdodds.com/blog/usememo-and-usecallback
Kent's blog, Business and Engineering alignment: kentcdodds.com/blog/business-and-engineering-alignment
Kent's blog, 2010s Decade in Review: kentcdodds.com/blog/2010s-decade-in-review
=== Chapters ===
00:00 Shameless Groveling For Likes
0:23 Epic React
7:50 Dunking on Udemy
9:45 Kent's podcasting past and present
15:20 Thin and THICCC Clients
31:20 Systemizing Accessibility
36:10 React and Angular
1:02:00 Nx for modular-ability
1:12:05 Thanks and Outro
Tips and thoughts to help create a solid, systemized state management solution!
GTFO with your "BOILERPLATE" - we're doing this in 1 file!!
=== Links ===
Follow along with this repo: github.com/ZackDeRose/ngrx-pizza-example-app
Solution found in the `final` branch, which you can checkout via the command: git checkout final
Stackblitz for the starting point (fork if you want to follow along!): stackblitz.com/edit/ngrx-pizza-example-app-starter
Stackblitz for the final: stackblitz.com/edit/ngrx-pizza-example-app-finished
Advanced article on selectors: dev.to/zackderose/ngrx-fun-with-createselectorfactory-hng
NgRx Official Docs: ngrx.io
=== Chapters ===
00:00 Introduction
00:16 Cloning repo, installing dependencies, and starting serve
01:48 Laying out app structure
02:48 Creating actions
05:16 Shameless Groveling for likes
05:40 Writing our reducer code
12:14 Creating selectors
27:50 Importing StoreModule to our AppModule
30:00 Hooking up our Component class
34:11 Adjusting our Component Template
=== Links ===
Preston's Getting Started With Deno Course Mailing list: landing.mailerlite.com/webforms/landing/c4e6f9
Tailwind Kit: tailwind-kit.com
Camtasia: techsmith.com/video-editor.html
=== Chapters ===
00:00 Introductions
01:36 Angular + Tailwind
06:56 Using Nx To Share Code
18:27 Circling Back to Tailwind
28:00 NgChampions Program And Blogging
35:36 Our Community in Covid Time
40:45 The Stigma of touching your mouse
49:31 Recording Development Video Content
59:43 Deno
=== Chapters ===
00:00 Introductions
04:30 NgConf CFP's and Asgaurdians of the Galaxy
11:38 Typescript ASTs and Schematics and Regex
25:15 Pervasiveness of Tree Data Structures
37:16 Choosing the Right Tool for the Job
46:40 The Carousel of Progress
49:48 Programming in Systems
54:30 Is What We Do Engineering? And Proper Perspectives
=== Links ===
Craig's tsquery project: github.com/phenomnomnominal/tsquery
Craig's tstemplate project: github.com/phenomnomnominal/tstemplate
The Typescript AST playground: ts-ast-viewer.com/#
===Links===
Rares' Twitter: twitter.com/__rares
Rares' Rxjs Course: egghead.io/courses/thinking-reactively-with-rxjs
Isaac Mann's Course on Advanced Angular Component Patterns: egghead.io/courses/advanced-angular-component-patterns
Isaac Mann's Articles on Ng-Templates (7 part series): medium.com/angular-in-depth/modify-user-provided-ui-with-content-directives-a3fc0c88058e
Corbin Crutchley's Article on Angular Templates: unicorn-utterances.com/posts/angular-templates-start-to-source/6
Ben Lesh's talk: youtube.com/watch?v=m40cF91F8_A
===Chapters===
00:00 Introductions And "Catios"
08:25 Talking About and Teaching Reactivity
18:40 Reactivity and Composability in React (with Hooks)
22:40 Advantages of Angular over React
26:30 ngrxLet and View Model Observable Patterns in Angular
29:48 Hash Tag Syntax, Life-Cycle Hooks, and other Advanced Angular Templating
37:30 Reactivity w/ Angular Life Cycle Hooks
40:25 Teaching about Subjects and "Hotness" in RxJS
44:00 The Many Unfolding Dimensions of RxJS
51:30 NgRx to Flatten the Many Dimensions of RxJS (And Other NgRx Topics!)
1:04:30 Learning About New Topics
14:15 Interests outside of development/coding
23:00 Reading / Audiobooks
34:45 Consumption and Creation
43:20 Angular Developers Learning React
55:15 Focus
1:00:15 What scares you? What gives you hope?
00:00 Introductions
00:55 Tailwind
09:10 NgRx ComponentStore
50:24 Mastery, Iteration, and What's Old is New
59:22 Predictions and Resolutions for 2021
=== Links ===
Tailwind Course: youtube.com/watch?v=Mp0f2I-OmpQ&feature=emb_title
@ngneat/tailwind package: github.com/ngneat/tailwind
My earlier conversation with Alex Okrushko: youtube.com/watch?v=FFVgm2MTZyI
SeattleJS with me and Alex Okrushko (Alex introduces NgRx/Component-Store): youtube.com/watch?v=H9EZZDREMEk
Bram && Chau's Component Store Playground: https://component-store-playground.web.app/home
Github for component-store-playground: github.com/beeman/component-store-playground
Bram and Zack comparing firebase CRUD for a classic list/detail app with ngrx/store and ngrx/component-store: youtube.com/watch?v=GseGNPgsg70
Hotwire: https://hotwire.dev/
Beesoft Labs: https://beesoftlabs.dev/