Learn the difference between session and token-based authentication on the web. Master Web Security in 12 weeks ? https://websecurity-academy.com/?aff=487495_h0fjhwrd Enroll before the deadline on 31st Oct (Saturday).
#web #security #100SecondsOfCode
...
https://www.youtube.com/watch?v=UBUNrFtufWo
Practical examples of TypeScript Decorators ?. Learn how to use decorators to build an API similar to React Hooks in Angular https://fireship.io/lessons/ts-decorators-by-example/
Docs https://www.typescriptlang.org/docs/handbook/decorators.html
...
https://www.youtube.com/watch?v=O6A-u_FoEX8
https://angularfirebase.com/lessons/angular-firebase-authentication-tutorial-anonymous-auth/ In this episode were going to build an Anonymous Authorization service with Angular 4 and Firebase. This feature will allow a user to start using your app with going through the typical OAuth signin or Email Password registration process. This approach is also called lazy registration or gradual engagement.
It works by creating a session using only a user ID (UID). If the user signs out without updating more account details, they will be unable to log back in.
At this point, it is assumed you have the AngularFire2 package installed and bootstrapped into your app. If not, go to the docs or checkout this video.
STEP 1 - Generate the Auth Service
If starting from scratch, generate the Auth Service. I'm going to be building upon the auth service from my previous OAuth tutorial and I recommend checking that video out first.
STEP 2 - Activate Providers in Firebase
Head over to your firebase project and enable the anonymous provider.
STEP 3 - Building the Service
First, make sure to subscribe to the FirebaseAuthState in the constructor.
Then, write a function to login the user with the Anonymous provider.
Let's also add a TypeScript getter to see if a logged in user is anonymous. This will be useful when displaying content specifically for anonymous users.
STEP 4 - Create a Component
Now we can inject the service into our components to login users anonymously. In this case, we just bind the function to the click event of a button.
STEP 5 - Upgrading the Account
When an anonymous user decides to upgrade, you will need to transfer the account data. The Firebase web API can do this, but you would need to bypass the AngularFire2 package. As an alternative,you can create a new account, then transfer the User's data to it. Assuming your data is nested under a User ID, here's how you could map it to a new account.
This function works by taking a snapshot of the data nested under anonymous ID, then copies it to the new account after the User logs in with google.
That's it for Anonymous Auth. Check out the full article for more details and I'll see you next time.
...
https://www.youtube.com/watch?v=dyQDAaDq2ag
RedwoodJS is a fullstack JavaScript framework that combines the power of React, GraphQL, and Prisma into a single package. It is used to build serverless web applications with a relational SQL database for the storage layer.
#programming #js #100SecondsOfCode
? Resources
Redwood Docs https://redwoodjs.com/
Redwood Github https://github.com/redwoodjs/redwood
Prisma in 100 Seconds https://youtu.be/rLRIB6AF2Dg
GraphQL in 100 Seconds https://youtu.be/eIQh02xuVw4
? Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
? My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
? Topics Covered
- What is RedwoodJS?
- RedwoodJS quickstart tutorial
- Redwood vs Next.js
- JS framework like Ruby on Rails
- Full Stack JavaScript Framwork Comparisons
- Using GraphQL on Web
...
https://www.youtube.com/watch?v=o5Mwa_TJ3HM
What is the Bend programming language for parallel computing? Let's take a first look at Bend and how it uses a Python-like syntax to write high performance code that can run on the GPU.
#programming #tech #thecodereport
? Chat with Me on Discord
https://discord.gg/fireship
? Resources
Bend Language GitHub https://github.com/HigherOrderCO/Bend
CUDA in 100 Seconds https://youtu.be/pPStdjuYzSI
Recursion in 100 Seconds https://youtu.be/rf60MejMz3E
? Get More Content - Upgrade to PRO
Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access
? My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
? Topics Covered
- What is Bend language?
- Parallelism vs Concurrency
- Rust programming language projects
- CUDA alternatives
- How to run code on a GPU
...
https://www.youtube.com/watch?v=HCOQmKTFzYY
OpenAI is launching a ChatGPT store next week where developers can sell custom agents. Learn how the how to build your own GPT agents, actions, and plugins to capitalize on this new platform.
#ai #programming #thecodereport
? Chat with Me on Discord
https://discord.gg/fireship
? Resources
ChatGPT Actions Docs https://platform.openai.com/docs/actions
Nitro.js https://nitro.unjs.io/
Uncensored AI models https://youtu.be/GyllRd2E6fg
AI Business Ideas https://youtu.be/Aa83vRghue4
? Get More Content - Upgrade to PRO
Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access
? My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
? Topics Covered
- How can I make money with AI?
- When does ChatGPT store open?
- How to build a GPT-4 plugin
- ChatGPT actions documentation
- Custom ChatGPT agent basics
- How to get verified on ChatGPT store
...
https://www.youtube.com/watch?v=9T_wv6D8PYo
Data-Driven Documents or D3 is a JavaScript library for drawing SVGs with data. It's the magic behind many of the graphs, charts, and other data visualizations you see on the web today. https://fireship.io/lessons/realtime-charts-d3-firebase/
#javascript #datavis #100SecondsOfCode
? Resources
D3 https://d3js.org/
Realtime Animated Charts https://fireship.io/lessons/realtime-charts-d3-firebase/
? Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
? My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
? Topics Covered
- D3.js Basics
- Data Vis with JavaScript
- Draw SVG Graphics with Data
...
https://www.youtube.com/watch?v=bp2GF8XcJdY
Learn how the question mark "?" in JavaScript provides syntactic sugar in three powerful ways. https://fireship.io/courses/javascript/
00:00 Ternary Operator
01:15 Optional Chaining
01:45 Nullish Coalescing
Ternary https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
Optional Chaining https://github.com/tc39/proposal-optional-chaining
Nullish Coalescing https://github.com/tc39/proposal-nullish-coalescing
#js #100SecondsOfCode
Install the quiz app ?
iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font
...
https://www.youtube.com/watch?v=O0gmXbN7lVE
Seven lesser-known web features that you can implement into a progressive web app (PWA) ?. https://fireship.io/lessons/pwa-top-features/
? Special thanks to François Beaufort, check out his awesome work here https://web.dev/authors/beaufortfrancois/
PWA Features https://web.dev
Source Code https://github.com/fireship-io/7-pwa-features-demo
#webdev #pwa #javascript
00:00 Intro
00:34 App Shortcuts
01:16 Contact Picker
02:32 Geolocation & Device Motion
03:39 External Devices
05:06 Idle Detection
06:14 File System
07:46 Web Share
09:10 PWA Limitations
Install the quiz app ?
iOS https://itunes.apple.com/us/app/fireship/id1462592372?mt=8
Android https://play.google.com/store/apps/details?id=io.fireship.quizapp
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font
...
https://www.youtube.com/watch?v=ppwagkhrZJs