Recently, a Vercel customer was surprised to get a $96K serverless bill after their app went viral. Learn how cloud pricing works and explore strategies for self-hosting on your own Linux server.
#tech #programming #thecodereport
? Chat with Me on Discord
https://discord.gg/fireship
? Resources
Original Tweet https://x.com/zemotion/status/1798558292681343039
Coolify on GitHub https://github.com/coollabsio/coolify
AWS says serverless was a mistake https://youtu.be/qQk94CjRvIs?si=r8N3DfC0xBkLaNuw
Subscribe to @MelkeyDev for more on Coolify
? 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 serverless pricing works
- How to reduce cloud computing bill
- Alternative to AWS
- How to self host backend
- Cloud computing tips and tricks
...
https://www.youtube.com/watch?v=SCIfWhAheVw
Use the brand new Cloud Run service to turn any Docker ? image into a serverless microservice on Google Cloud Platform. In this demo, we dockerize and deploy a server-rendered Nuxt/Vue app to Firebase Hosting https://fireship.io/lessons/firebase-microservices-with-cloud-run/
Cloud Run https://cloud.google.com/run/
Nuxt https://nuxtjs.org/
Firebase Microservices https://firebase.google.com/docs/hosting/cloud-run
#cloudrun #docker #serverless
...
https://www.youtube.com/watch?v=3OP-q55hOUI
Web5 is a new decentralized web framework based on the Bitcoin Lightning Network designed to replace Web3.
#webdevelopment #crypto #TheCodeReport #web3
? Resources
Web 5 Overview https://cryptoslate.com/web5-announced-by-jack-dorseys-block-to-replace-web3-as-future-of-internet/
Web5 Tweets https://twitter.com/brockm/status/1535999323732815872
Web5 Slide Deck https://bestpitchdeck.com/tbd
? Topics Covered
- What is Web5?
- Web3 vs Web5
- Decentralized Apps
- Crypto news
- Will Web5 replace Web3?
- How does Web5 work?
...
https://www.youtube.com/watch?v=HDZWWFSZUF0
Learn 3 awesome CSS tips and tricks submitted by viewers like you. Watch the original Top Ten CSS Pro Tips ? https://youtu.be/Qhaz36TZG5Y
#css #tips
00:00 Responsive relative units
00:58 The ch clamp trick
01:28 HSL color magic
02:25 Scroll padding quick fix
Character Clamp Trick https://web.dev/min-max-clamp/
Yay, my comment was featured as a tip!
Send an email to "helloATfireship.io" from the same account used to comment. I will respond with a form to redeem the shirt.
Or DM me on slack https://fireship.page.link/slack
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font
...
https://www.youtube.com/watch?v=JSURzPQnkl0
jQuery is the world's most popular JavaScript library (by far) in terms of sites using it in production today. Learn the basics of jQuery in 100 seconds.
Docs https://api.jquery.com/
#js #webdev #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=UU-GebNqdbg
What is a Bézier curve? Programmers use them everyday for graphic design, animation timing, SVG, and more.
#shorts #animation #programming
Animated Bézier https://www.jasondavies.com/animated-bezier/
...
https://www.youtube.com/watch?v=BThr1pb77Fo
Java is a programming language famous for its ability to compile to platform-independent bytecode. It powers enterprise web apps, big data pipelines, and android mobile apps.
#java #programming #100SecondsOfCode
? Resources
Java Website https://java.com
Star7 Demo https://youtu.be/1CsTH9S79qI
? 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
- How Java works
- Java basics
- History of Java
- Java vs C
- How to compile Java
- Overview of JVM, JRE, & JDK
...
https://www.youtube.com/watch?v=l9AzO1FMgM8
Ready to go beyond console.log? The JavaScript console can do much more than just log...
#JavaScript #100SecondsOfCode
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=L8CDt1J3DAw
UPDATE Oct 10th, 2017: Fully updated tutorial for AngularFire v5 and Firestore https://youtu.be/e8GA1UOj8mE
Angular OAuth with Firebase
Tutorial https://angularfirebase.com/lessons/angular-firebase-authentication-tutorial-oauth/
In this episode, were going to build a user authentication system with Angular 4 and Firebase. Authentication is required in almost every Angular application, including this basic todo list app. The app currently has no authentication at all, but we want user to be able to log in with their Google, Facebook, Twitter, or Github account.
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 Files
We are going to keep this feature super simple.
The Auth Service will handle interaction with the Firebase API.
The User Login Component will handle the login and logout buttons.
The User Profile Component will show details about the User.
STEP 2 - Activate Providers in Firebase
Head over to your firebase project and enable the providers you want. For non-google providers, you will need to get your own developer account and API keys.
STEP 3 - Build the Service
The way you handle authentication with Firebase is by subscribing to the AngularFire-Auth observable which returns a Firebase-Auth-State object.
Now that we have the AuthState object, we can take advantage of TypeScript accessors to get attributes. In this case, I'm interested in the User ID.
Here's the beauty of firebase - you can implement 4 social auth providers with very little code. I start by creating a reusable private function that takes the provider as an argument named `Social-Sign-In`.
When a user attempts to sign in two things can happen - success or failure. If it's a success, the `then` code will execute, if its's an error the `catch` code will execute.
You may be wondering what the `updateUserData` function is about. It's optional, but you may want to save user records to the Firebase realtime database. It can be useful if you plan on iterating over users in your app or if you collect additional data during signup.
We finish off the service by creating an action for each of the four providers. This is as simple as returning the result of the `socialSignIn` function.
STEP 4 - Frontend Components
With the auth service complete, we can inject it into components. Here's how you might create a Login Component with functions to login with each provider handleError
In the template we can then bind these functions to the click event.
The accessors we created in the service come in handy in for adding conditional logic to the template.
That wraps it up. Check out the full Firebase OAuth article more detail on code and I'
...
https://www.youtube.com/watch?v=-3rkY8X2EWc