Other
Take a look at the future of JavaScript in the year 2020. Expect awesome new language features and disruptive trends that could change everything!
TC39 Proposals https://github.com/tc39/proposals
Stack Overflow Survey https://insights.stackoverflow.com/survey/2019
State of the Octoverse https://octoverse.github.com/
Fireship Lesson https://fireship.io/lessons/ja....vascript-2020-predic
#JavaScript #future #2020
Want to learn more? Upgrade to PRO status
https://fireship.io/pro
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font
Build an animated slideshow in Flutter using the PageView widget, then make it filterable with Cloud Firestore https://fireship.io/lessons/fl....utter-slider-like-re
Reflectly https://reflectly.app/
PageView Widget https://docs.flutter.io/flutte....r/widgets/PageView-c
Firestore https://firebase.google.com/docs/firestore/
Animate a complex radial menu 🥞 in Flutter at can translate, scale, and rotate at 60 FPS from scratch https://fireship.io/lessons/fl....utter-radial-menu-st
- Flutter Animation https://flutter.dev/docs/development/ui/animations
- Flutter Performance https://flutter.dev/docs/testing/ui-performance
#flutter #animation #butter
Create beautiful 🎨 page transitions with the Angular Router by building four different animation sequences from scratch https://fireship.io/lessons/an....gular-router-animati
- Deal Crunch App https://play.google.com/store/....apps/details?id=com.
- Angular Router https://angular.io/guide/router
- Angular Animations https://angular.io/guide/animations
Implement Firebase Google login in Ionic for native mobile devices. This video is for developers targeting the iOS or Android and has been tested on both platforms. Grab the source code https://angularfirebase.com/le....ssons/ionic-google-l
- Slack Invite (message @wincey) - https://goo.gl/6eYoxF
- Wasup - https://play.google.com/store/apps/details?id=com.tailorweb.wazup&hl=en
- Ionic - https://ionicframework.com/
- Gplus Cordova - https://github.com/EddyVerbrug....gen/cordova-plugin-g
Build a full-text search feature using Algolia and Cloud Firestore to return fast, sophisticated search results to your Angular app https://angularfirebase.com/le....ssons/algolia-firest
- Algolia https://www.algolia.com/press#resources
- Firestore https://firebase.google.com/docs/firestore/
- InstantSearch https://community.algolia.com/instantsearch.js/
Learn how Google is cracking down on Ad Blockers on YouTube. How do adblockers work and should they be allowed on the Internet?
#youtube #tech #thecodereport #adblocker
🔥 Black Friday Deal - Upgrade to Fireship PRO
Upgrade at https://fireship.io/pro
Use code BF2023 for 40% off PRO access
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Firefox Delay Controversy https://www.reddit.com/r/youtu....be/comments/17z8hsz/
uBlock Origin Source Code https://github.com/gorhill/uBlock
YouTube Ad Blocking News https://www.engadget.com/googl....e-admits-youtubes-wa
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- Is adblock theft?
- Is YouTube banning Adblockers?
- Chrome Extensions manifest v3
- YouTube Partner revenue split on ads
- Privacy issues on the Internet
Use Angular and Firestore to add infinite scroll pagination to your app from scratch - both downward and upward. https://angularfirebase.com/le....ssons/infinite-scrol
Firestore: https://cloud.google.com/firestore/docs/
Angular Directives: https://angular.io/guide/attribute-directives
Learn how to build a Redux-style authentication system with Ngrx and Firebase Google OAuth. New to ngrx? Start here: https://youtu.be/f97ICOaekNU
Full Lesson: https://angularfirebase.com/le....ssons/ngrx-with-fire
Demo App: https://github.com/codediodeio/ngrx-fire
Ngrx: https://github.com/ngrx/platform
AngularFire2: https://github.com/angular/angularfire2
Learn how to build a Firebase Cloud Function that can resize images to multiple thumbnail sizes from a storage bucket.
Functions Master Course with 40% Discount: https://goo.gl/jimk75
Or enroll for free by upgrading to PRO https://angularfirebase.com/pro/
Full lesson https://angularfirebase.com/le....ssons/image-thumbnai
UPDATE Oct 10th, 2017: Fully updated tutorial for AngularFire v5 and Firestore https://youtu.be/e8GA1UOj8mE
Angular OAuth with Firebase
Tutorial https://angularfirebase.com/le....ssons/angular-fireba
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'll you next time.
Learn how to connect realtime data to Plot.ly with the Firebase database and Angular 4 on the frontend. In this episode, I build three different graphs and charts designed to handle realtime data streams.
Full Lesson: https://angularfirebase.com/le....ssons/realtime-chart
Plot.ly JS: https://plot.ly/javascript/
Send topic-based web push notifications using FCM and Ionic 4. Broadcast messages to millions of users with just a few simple cloud functions https://angularfirebase.com/le....ssons/fcm-topic-noti
- FCM https://firebase.google.com/docs/cloud-messaging/
- Ionic 4 https://blog.ionicframework.co....m/announcing-ionic-4
Build a fullstack chatbot that can intelligently interact with your users, featuring Dialogflow, Cloud Functions, and Angular. https://fireship.io/lessons/bu....ild-a-chatbot-with-d
#dialogflow #nodejs #ai
Download the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
Learn how to make your import statements more manageable in Angular by using TypeScript path mapping. https://angularfirebase.com/le....ssons/shorten-typesc
TS Path Mapping: https://www.typescriptlang.org..../docs/handbook/modul
https://angularfirebase.com/le....ssons/simple-firebas
Learn how to navigate between collections using a simple technique for Firebase pagination with AngularFire2.
Build a drag & drop 🖖 UI in the form of a simple color-matching kid's game. Master the basics of Flutter's Draggable and DragTarget widgets https://fireship.io/lessons/fl....utter-drag-and-drop-
- Draggable https://docs.flutter.io/flutte....r/widgets/Draggable-
- DragTarget https://docs.flutter.io/flutte....r/widgets/DragTarget
#flutter
#FOMO fear of missing out, is the social anxiety you feel when you're not invited to the cool new social media Clubhouse. Turn your fomo into jomo by coding up invite-only phone authentication with React & Firebase https://fireship.io/lessons/in....vite-only-firebase-p
Source code: https://github.com/fireship-io..../invite-only-phone-a
Firebase Phone Auth: https://firebase.google.com/do....cs/auth/web/phone-au
Clubhouse App: https://apps.apple.com/us/app/....clubhouse-drop-in-au
#tech #dev
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Learn how to use the Angular Router in Ionic 4 to handle navigation in your mobile app https://angularfirebase.com/le....ssons/ionic-4-routin
- Ionic 4 Migration https://beta.ionicframework.co....m/docs/building/migr
- Angular Router https://angular.io/api/router
What would a massive global cyber attack look like? With war starting up in Europe, many news outlets are warning about the potential of hackers launching large-scale cyber attacks.
#hacking #cyberattack #TheCodeReport
🔗 Resources
Cyber Polygon https://www.weforum.org/projects/cyber-polygon
Russia vs US Cyber Attacks https://www.bbc.com/news/technology-48675203
Firebase App Check https://firebase.google.com/docs/app-check
🔖 Topics Covered
- Is a Cyber War possible?
- What is Cyber Polygon?
- How to defend against cyber attack
- Is Firebase secure?
- How to protect an app from hacking
Learn how to combine Google APIs with Firebase Auth by building an app that can manage a user's calendar https://angularfirebase.com/le....ssons/google-calenda
Google APIs JS - https://developers.google.com/....api-client-library/j
Firebase Auth - https://firebase.google.com/docs/auth/
NYC Broadway Tours https://www.broadway.life/
Glimpse into the future with all the latest trends and hype for software developers in the year 2022. Learn all about Web 3.0, the Metaverse, GPT-3, new JavaScript frameworks, databases, and more. https://fireship.io/pro
#2022 #dev #trends
🔗 Resources
Web3 Overview https://ethereum.org/en/develo....pers/docs/web2-vs-we
Metaverse Market Map https://medium.com/building-th....e-metaverse/market-m
GPT-3 https://openai.com/blog/openai-api/
Last year's predictions https://youtu.be/oHtR5YSPLjo
📚 Chapters
00:00 The Year 2022
00:38 Web3
03:06 Fake Sponsorship
03:28 Metaverse
05:05 AI
06:22 Databases
07:31 JavaScript
09:58 Other Trends to Know
🔥 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 web3?
- Web 3.0 decentralized internet
- Web 3.0 vs Web 2.0
- What is the metaverse?
- Databases in 2022
- New JavaScript features
- Best JS frameworks in 2022
- Future of software engineering
Build a dynamic theme generator with Ionic 4 using nothing but CSS variables. https://angularfirebase.com/le....ssons/css-variables-
- CSS Variables https://developer.mozilla.org/....en-US/docs/Web/CSS/U
- Coolors.co https://coolors.co/
- Ionic 4 Docs https://ionicframework.com/docs/
Learn how build an animated login form with HTML and CSS. Then take it to the next level with a dynamic password meter using JavaScript (Svelte). https://github.com/fireship-io..../230-animated-form-p
#tutorial #css #js
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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://angularfirebase.com/le....ssons/angular4-trans
In this episode, I am going to show you how send transactional email in Angular as a background task in cloud. To facilitate this, the emails will be send with Google Cloud Functions for Firebase and the email service Sendgrid. You can use any email provider you want such as mailgun or postmark or even Gmail, but I will chose Sendgrid for this tutorial because they have a solid helper library and a detailed NodeJS example in their documentation. They also offer a free trail with no credit card requirements, so get your API key to follow along with this lesson.
What is a Cloud Function?
Google Cloud Functions is a serverless architecture that allows you to run isolated code in a NodeJS runtime - as opposed to deploying your own server. It is Google's answer to AWS Lambda and has only been available to the public since 2017. It's an awesome tool for Firebase developers because it allows you to run code in the background that would otherwise slow down an Angular app, and email is definitely a task that should be delegated to its own background task or micro service.
We can trigger cloud functions in many different ways, but this lesson will demonstrate the use of cloud functions via HTTP. When the function is deployed, Google Cloud Platform will give us a URL endpoint that we can hit with query params that tell SendGrid how to deliver the email. The process is no different than working with any other RESTful API.
It's also useful to know that you can trigger cloud functions on database writes, storage uploads, authentication events, and even analytic events, all of which are common use cases for transactional email. Some examples include sending a welcome email after a new user signs up or when they've reached the max capacity on file uploads. I plan on covering these scenarios in future videos.
First, I am assuming you have an Angular app started with the firebase-tools installed.
Start by run the firebase init command and select functions.
This will create a functions directory and give us an index.js file, which is were the functions are defined. The functions directory is its own isolated Node environment, completely separate from your angular app - its logic has no direct connection to angular. That's great because it keeps your frontend app lightweight and delegates CPU or Memory intensive operations to the cloud.
First we need to install the sendgrid package, so we cd into the functions directory then run NPM install.
cd functions
npm install sendgrid
First, I import the send grid package and pass it my API key.
Next, I define a parseBody helper to convert the email params into JSON with SendGrid's mail helper. This is a pretty powerful feature of SendGrid when it comes to formatting emails, so check out all the options in the documentation.
To create a function, you use the exports keyword followed by the function name, in this case, Im calling the function httpEmail. Our function will return a promise when triggered via HTTP, and if its successful, it will tell the send grid API to send an email.The request must be of type POST and should have query params that define the email addresses, subject, and content the email. Send grid will then return its own response letting us know if the email was successful or an exception occurred.
Before we can wire up the cloud function with Angular, we need to deploy it.
Run the firebase deploy command, flagging --only functions.
When deployment is complete, the console will print the URL used trigger the function via HTTP. Make a note of this url because you will need it in the next step.
In angular, we can call this function for anywhere in the app. Here I have a brand new send-email component that will trigger the function.
Import the HTTP module and create a function that sends a POST request to the URL of the deployed function. I am also going to hard code some query parameters just to show how to send data to the function over http. In this example, I am just console logging the response or error for debugging.
Now we can trigger the cloud function with a button click or any other event for that matter.
If all went according to plan, you should see an email in your inbox. If not, make sure to check the console or the Firebase cloud functions logs for any exceptions.
That's it for transactional email. Thanks for watching.
https://angularfirebase.com/le....ssons/autocomplete-s
Learn how to grab async data from firebase and update the UI after each keypress.
A beginner's tutorial for building an 🃏 animated stacked card list with CSS & HTML. Inspired by css-tricks homepage. https://fireship.io/lessons/css-cards-animated/
Inspired by https://CSS-tricks.com homepage
Source https://github.com/fireship-io/stacked-card-list
00:00 Intro
00:36 Layout
02:55 Shadows
03:20 Scrollbar
03:55 Animation
05:30 SVG Semicircle
07:48 Gradient Text
#css #tutorial
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Learn how to perform serverside rendering (SSR) with Angular Universal, then deploy to Firebase Cloud Functions or GCP AppEngine https://fireship.io/lessons/an....gular-universal-fire for better perf and SEO
Universal - https://angular.io/guide/universal
Functions - https://firebase.google.com/docs/functions
GCP https://cloud.google.com/sdk
Learn how to send notifications to iOS and Android devices using Firebase FCM and Ionic Native. https://angularfirebase.com/le....ssons/ionic-native-w
- Join Slack https://goo.gl/6eYoxF
- Ionic Native https://ionicframework.com/docs/native/
- FCM https://firebase.google.com/docs/cloud-messaging/
In this episode, I will show you how to query Firebase data based on its proximity to a set of GPS coordinates. We use Angular Google Maps (AGM) to handle the map building process, then throw in GeoFire to make realtime location-driven queries. Check out the full tutorial code here: https://angularfirebase.com/le....ssons/geofire-locati
Angular Google Maps: https://angular-maps.com/
Firebase GeoFire: https://github.com/firebase/geofire
Send push notifications 💌 in Flutter with Firebase Cloud Messaging (FCM) to a single device, topic, or user segment. https://fireship.io/lessons/fl....utter-push-notificat
FCM https://firebase.google.com/docs/cloud-messaging/
FlutterFire Docs https://pub.dev/packages/firebase_messaging
#flutter #fcm #firebase
Don't forget to take the quiz 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
In this episode, we use the Firebase SDK to authenticate users with their phone number. Full Lesson: https://angularfirebase.com/le....ssons/firebase-phone
Second half of Algolia Full Text Search with Angular 4 and Firebase Cloud Functions. In this video we create a cloud function to keep a searchable index updated with the realtime database. Full lesson: https://angularfirebase.com/le....ssons/angular-full-t
Check out the first half of this lesson: https://youtu.be/4u_Vd-c9uLI
Learn how to align, position, and build layouts in Flutter with comparisons to CSS flexbox 💪📦 - they have more in common than you might think https://fireship.io/lessons/fl....utter-widget-positio
- Get the T-Shirt, use promo FLTTR https://teespring.com/stores/fireshipio-swag
- Flutter Layouts https://flutter.io/docs/development/ui/layout
- Flexbox https://developer.mozilla.org/....en-US/docs/Learn/CSS
This is a multipart series about building a payment system with Angular4 and Firebase. You can check out the Part 1 Full Lesson at https://angularfirebase.com/le....ssons/collect-paymen
I start by talking about the payment process with Stripe. Then show you how to code it step-by-step with Stripe Checkout.
Also, make sure to get an API key at https://stripe.com
Learn how to build a group chat app with Firestore. It's alive... let's chat on the live demo 🎪👉 https://firestore-megachat.firebaseapp.com/
Full Lesson https://angularfirebase.com/le....ssons/build-group-ch
Role-based user authorization or access control, will give you fine-grained control over user permissions for Firebase users. In this lesson we are going to give Firebase users 3 different roles - reader, author, and admin.
Full Lesson: https://angularfirebase.com/le....ssons/role-based-per
We will cover all four of these strategies in this lesson.
- Hide HTML elements
- Prevent actions
- Restrict routes with router guards
- Create backend Firebase database rules.
Learn how to customize your app icon and splash page in Ionic, then add an animation to it. Grab the source code here https://angularfirebase.com/le....ssons/generate-a-cus
Ionic 3 - https://ionicframework.com/
SpinKit - http://tobiasahlin.com/spinkit/
https://angularfirebase.com/le....ssons/angular-fireba 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.
Give your users specific roles and abilities. In this episode, I use Angular 5 with Firestore to build an role-based access control feature. https://angularfirebase.com/le....ssons/role-based-aut
- Firestore rules: https://firebase.google.com/do....cs/firestore/securit
- Guards: https://angular.io/guide/router
- Role-based access control: https://en.wikipedia.org/wiki/....Role-based_access_co
Build a dynamic task queue with the new cron scheduled Pub/Sub Cloud Functions from Firebase. https://fireship.io/lessons/cl....oud-functions-schedu
- Cloud Functions Cron Trigger https://firebase.googleblog.co....m/2019/04/schedule-c
Note. This video was recut from an upload yesterday that I decided to take down - some of the editing might seem a little strange.
Implement metered billing in Stripe in record time with callable Firebase cloud functions https://angularfirebase.com/le....ssons/saas-metered-s
Stripe Billing https://stripe.com/us/billing
Callable Functions https://firebase.google.com/do....cs/functions/callabl
2020 was an awesome year for tech, but next year might be even better! Let’s check out some trends & predictions for developers going into 2021. Sponsor me on Github for $1.00 https://github.com/codediodeio
References:
Remote Work Predictions https://twitter.com/chris_herd..../status/133484255356
GPT-3 https://arxiv.org/abs/2005.14165
College Degree not Required https://www.cnbc.com/2018/08/1....6/15-companies-that-
JS Framework Fatigue https://medium.com/@reverentge....ek/choose-your-own-f
00:00 2020 Highlights
00:46 Remote Work
01:51 Web & JavaScript
03:44 WASM + PWAs
04:52 AI
05:41 Nocode
06:39 Serverless
07:56 Black Swan
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
OpenAI just announced a new AI Text-to-Image model based on GPT-3 called DALL-E 2. It is capable of turning a text description into a unique image or work of art that has never been seen before.
#ai #tech #TheCodeReport
🔗 Resources
DALL-E https://openai.com/dall-e-2/
Announcement Tweet https://twitter.com/sama/statu....s/151172426462967808
Sam Altman Blog https://blog.samaltman.com/dall-star-e-2
🔥 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 does AI generate Art?
- What is DALL-E?
- How does DALL-E Work?
- How does GPT-3 Work?
- What is the future of AI?
Learn React & CSS by reverse-engineering Facebook's new multi-level dropdown UI in this beginner-friendly tutorial https://github.com/fireship-io..../229-multi-level-dro
React https://reactjs.org/
CSS Transitions https://developer.mozilla.org/....en-US/docs/Web/CSS/C
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
A quick setup guide 🍳 for NestJS and Firebase Cloud Functions. Two strategies for making your Nest app serverless in the first episode of *The More you Code*. https://fireship.io/snippets/s....etup-nestjs-on-cloud
#nest #js #serverless
Don't forget to take the quiz 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
Learn the basics of GitHub Copilot - an AI-powered tool for writing code faster. It is built on top of OpenAI’s GPT-3 model and uses training data from public places like StackOverflow to suggest and write code automatically.
#ai #code #firstlook
🔗 Resources
Copilot https://copilot.github.com/
OpenAI https://openai.com/blog/gpt-3-apps/
GPT3 Graphics https://jalammar.github.io/how....-gpt3-works-visualiz
📚 Chapters
00:00 GitHub Copilot
01:14 First Look in VS Code
04:38 The Truth about AI Programming
07:20 Replace Developers with AI
🤓 Install the quiz app
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
🔥 Watch more with Fireship 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
Part 2 of the Angular-Firebase-Stripe series. We setup a backend Firebase Cloud Function to make the actual charge on the user's credit card. Grab the full lesson here https://angularfirebase.com/le....ssons/angular-stripe
Lost? Checkout Part 1: https://youtu.be/_lZc2O2oUJk
Join our slack team if you want to discuss Angular/Stripe/Firebase with fellow developers. Invite link at angularfirebase.com
You may also want to reference the Firebase Cloud Functions and the Stripe Charge docs.
https://firebase.google.com/docs/functions/
https://stripe.com/docs/charges
A beginner's tutorial for building a Responsive Navigation Bar with CSS that includes animation, duotone icons, flexbox, and other cool tricks! Source Code: https://github.com/fireship-io..../222-responsive-icon
#css #html #tutorial
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Get up and running with Firestore and AngularFire5. Learn how to use the Firebase Firestore database to query, update, and manage offline data. https://angularfirebase.com/le....ssons/firestore-with
Demo: https://firestarter-96e46.firebaseapp.com/
Firestore: https://firebase.googleblog.co....m/2017/10/introducin
AngularFire: https://github.com/angular/angularfire2
More Lessons: https://angularfirebase.com
Learn how to use the new PayPal Checkout 💰 2.0 APIs to accept and capture payments entirely from your frontend code, including demos for React, Angular, and Vue https://fireship.io
- PayPal 2.0 https://developer.paypal.com/docs/api/overview/
- Code https://github.com/fireship-io..../193-paypal-checkout
#paypal #webdev #money
Take the Fireship quizzes 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
Get started with Firebase Analytics on the web. Gain insight into the behavior of your users and put the data to use with a customized UX via Remote Config https://fireship.io
Firebase Analytics https://firebase.google.com/docs/analytics
#firebase #analytics #ux
Take the quiz 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
Learn how to use the new multisite hosting feature from Firebase to deploy multiple web apps to a single project https://angularfirebase.com/le....ssons/deploy-multipl
- Multisite Announcement https://firebase.googleblog.co....m/2018/08/one-projec
Build a realtime user presence system with AngularFire that can set the public status of a user to online 💚, offline 🔴, or away 💤. https://fireship.io/lessons/re....altime-presence-angu
NgClass https://angular.io/api/common/NgClass
Firebase Presence https://firebase.google.com/do....cs/firestore/solutio
Build a secure feature-complete chat app with React & Firebase in 7 minutes. Try it out 👉 https://fireship-demos.web.app/
Source Code: https://github.com/fireship-io/react-firebase-chat
ReactFire Game Lobby by Jarrett Helton: https://fireship.io/lessons/ga....me-lobby-with-fireba
#react #js #firebase
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Upload files with Flutter and Firebase Cloud Storage 🔥🗃️. Learn how to pick, crop, and upload images to a cloud storage bucket. https://fireship.io/lessons/fl....utter-file-uploads-c
- Cloud Storage https://firebase.google.com/docs/storage
- Image Picker https://pub.dev/packages/image_picker
- Image Cropper https://pub.dev/packages/image_cropper
#flutter #firebase #tutorial
Don't forget to take the Flutter quizzes 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
https://angularfirebase.com/le....ssons/show-loading-s
In this episode, I will show you how to display and hide a loading spinner when retrieving asynchronous Firebase data from an Angular application. Loading indicators are an important UI feature because they show the end user when more data is incoming.
Step 1 - Create the Spinner component
We're going to create a SpinnerComponent that can be reused throughout the application. To make it look cool, I am using Spinkit CSS library, which we can just be copied directly into the component's CSS and HTML files. You do not need to change anything in the component's TypeScript.
Step 2 - Retrieve Aschronous Data
We need to load some data from Firebase to make use of the spinner.
In this example, I am loading a `FirebaseListObservable` via the AngularFire2 package. The actual data is just and array of items from a to-do list. This code was originally created for the RealTime Database video, so check that out if you want to learn more about asynchronous data streams.
Step 3 - Show and Hide the Spinner
We want to show the spinner in the items-list component while data is being retried.
First, we define a variable called `showSpinner` in the component and set it to true by default. During `ngOnInit`, the data is requested from the service as a `FirebaseListObservable`. We can determine if the data has been loaded by subscribing to it. The function inside the subscribe call will be executed after the observable emits data, so we can simply set `showSpinner` variable to false when this happens.
In the template, we can use the `*ngIf` directive with the `showSpinner` variable to control the visibility spinner.
Going back to the app, we can see that spinner is visible for a split second before the data is loaded. The longer it takes for your data the load, the more useful this spinner will be your end users.
That's it for loading spinners, see you next time.
Google made a ton of exciting announcements at I/O yesterday related to AI, web development, Android, Flutter, and more. Let's break down the 10 biggest updates for developers.
#tech #programming #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Google IO Keynote https://io.google/2023/
Palm 2 https://blog.google/technology..../ai/google-palm-2-ai
We have no moat https://www.semianalysis.com/p..../google-we-have-no-m
Bard vs ChatGPT Video https://youtu.be/xW9DJTvB3NI
🔥 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
- Google AI strategy
- Google Palm 2 model overview
- Pixel foldable phone
- Latest updates to Firebase
- Android development news
- JavaScript WebAssembly updates
Learn how to design a website with curved or wavy backgrounds using HTML and CSS. Then take things to the next level by adding a morphing SVG animation with JavaScript https://fireship.io/lessons/wavy-backgrounds/
#webdev #css #tutorial
🔗 Resources
Code https://github.com/fireship-io..../wavy-curvey-blobby-
Shape Driver https://www.shapedivider.app/
Haikei App https://haikei.app/
📚 Chapters
00:00 Wavy Web Design
00:49 Flat HTML Website
03:26 CSS Wave
05:51 CSS Bubble
06:21 SVG Wave
07:15 SVG Layered Wave
08:58 Animated Blob
🤓 Install the quiz app
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
🔥 Watch more with Fireship 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
Learn the basics of Three.js - a tool for building amazing 3D graphics with JavaScript. In this tutorial, we create an animated 3D scrolling animation for a portfolio website https://github.com/fireship-io..../threejs-scroll-anim
#3D #webdev #js
🔗 Resources
Three.js Docs https://threejs.org/
WebGL Overview https://youtu.be/f-9LEoYYvE4
Inspiration https://atelier.net/virtual-economy/
Scrolling Animation with Three.js
📚 Chapters
00:00 Mindblowing 3D Websites
00:42 What we’re building
01:19 What is Three.js
02:12 Project Setup
03:35 Scene
03:52 Camera
04:28 Renderer
05:07 Geometry
05:28 Material
06:02 Mesh
06:16 Animation Loop
07:13 Lighting
08:45 Three.js Helpers
09:17 Orbit Controls
09:56 Random Generation
11:05 Scene Background
11:37 Texture Mapping
12:57 Scroll Animation
14:36 CSS Grid
🤓 Install the quiz app
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
🔥 Watch more with Fireship 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
Google just released Bard, an generative LLM similar to ChatGPT. Let's take a first look at Bard and compare it to OpenAI's GPT-4.
#ai #tech #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Google Bard https://bard.google.com
GPT-4 Breakdown https://youtu.be/EunbKbPV2C0
Tensorflow in 100 Seconds https://youtu.be/i8NETqtGHms
🔥 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
- Is Bard better than GPT-4?
- What is an LLM?
- Bard vs ChatGPT
- Bard review
- Latest news about advancements in AI
Connect Firebase to a MySQL 💾🔥 database via Cloud Functions, then learn how to supercharge your productivity with TypeORM https://fireship.io/lessons/sql-firebase-typeorm/
- Cloud SQL https://cloud.google.com/sql
- Type ORM https://typeorm.io
#Firebase #SQL #NodeJS
Install the Quiz App 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
Create amazing animations in React with Framer Motion. In this tutorial, we build an interactive modal window from scratch and customize its spring animations. Full tutorial https://fireship.io/lessons/framer-motion-modal/
#react #animation #learntocode
Try it out https://react-framer-demo.netlify.app/
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🔗 Resources
Framer Motion https://www.framer.com/motion/
Spring Animations https://blog.maximeheckel.com/....posts/the-physics-be
Advanced Framer Motion https://fireship.io/framer-mot....ion-advanced-notific
📚 Chapters
00:00 Intro
00:45 Modal Demo
01:29 Setup Framer
02:26 Animated Button
03:06 CSS vs Framer Motion
03:28 Backdrop
05:37 Modal
07:05 Animation Settings
07:58 Spring Damping and Stiffness
08:41 Trigger It
09:41 Animate Presence
10:36 Drag It
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- Framer Tutorial
- How to build Animated Modals in React
- Spring Animation Physics
- CSS Modal Styling
- Animated Buttons in React
- JavaScript Animation Techniques
🎬 Credits
Producer: Jeff Delaney https://twitter.com/fireship_dev
Engineer: Klutch https://twitter.com/KlutchDev
Learn how to use the new Collection Group Query feature to join subcollections. Great for hierarchical or deeply-nested data structures like threaded reddit-style comments https://fireship.io/lessons/co....llection-group-query
#firebase
Take the firebase quizzes 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
UPDATE: Get the latest version here https://angularfirebase.com/le....ssons/google-user-au
Router Guards are used in Angular to prevent unauthorized users from navigating anywhere they want in your app. At this point our app has a working Firebase authentication system, but any visitor can access routes intended for only logged in users.
Guards handle this problem by implementing the CanActivate interface, which tells Angular whether or not to activate a route. In this example, we will protect pages for unauthenticated users and redirect them to a signin page.
Step 1 - Generate the Guard
We use the CLI in Angular 4 to generate a default guard.
Guards use the injectable decorator, so they need to be registered as a provider just like any other service in the app module.
Step 2 - Update the Auth Service
Our users are authenticating via Firebase and the AngularFire2 package. In the service we are subscribing the FirebaseAuthState, then using a getter to see if the auth object is null. Checkout the OAuth tutorial for more details on this code.
Step 3 - Implement the Guard Logic
Router guards always return a boolean type or boolean observable. The logic here is simple, if the FirebaseAuthState is defined, we activate the route. Otherwise, we return false and navigate to to the login page.
Now that the guard is complete, we just need to apply it to specific routes in the routing module.
That's it for router guards, I'll see you next time.
Learn how Logan Paul's alleged scam, CryptoZoo, works under the hood on the Ethereum blockchain. Let's break down the Solidity smart contracts, fungible tokens, NFTs, IPFS, and other import web3 technology related to this project.
#tech #web3 #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
CoffeeZillia Investigation https://youtu.be/386p68_lDHA
CryptoZoo dApp https://market.cryptozoo.co
Solidity in 100 Seconds https://youtu.be/kdvVwGrV7ec
Full Web3 Tutorial https://youtu.be/meTpMP0J5E8
🔥 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 do smart contracts on Ethereum work?
- What is the cryptozoo scam?
- How does cryptozoo work?
- How to build blockchain apps
- How to create your own NFT from scratch
- Basics of blockchain development
Learn how to use the new ngrx entity package to build CRUD with less code. In this video, I show you how to create a feature module with ngrx, then use entity adapter methods in the reducer. https://angularfirebase.com/le....ssons/ngrx-entity-fe
Medium: https://medium.com/ngrx/introd....ucing-ngrx-entity-59
Docs: https://github.com/ngrx/platfo....rm/tree/master/docs/
Learn how to accept cryptocurrency payments, like $BTC or $ETH, in your webapp with Coinbase Commerce. https://fireship.io/lessons/cr....ypto-payments-web-fi
💰 Free money! Get $10 when you use this link https://fireship.page.link/coinbase
*This video is not sponsored and I had no contact with Coinbase
Resources:
Coinbase Commerce https://commerce.coinbase.com
Cloud Functions Docs https://firebase.google.com/docs/functions
Source code: https://github.com/fireship-io..../coinbase-cloud-func
00:00 Why accept crypto?
00:32 How crypto payments work
01:55 Coinbase commerce setup
03:17 Create Charges
05:49 React with Webhooks
#crypto #bitcoin #tutorial
My VS Code Theme
- Atom One Dark
- vscode-icons
- Fira Code Font
Learn how to setup In App Purchases in Flutter to sell 💎 consumable digital products for real money 🤑 on iOS and Android https://fireship.io/lessons/fl....utter-inapp-purchase
- Flutter IAP plugin https://github.com/flutter/plu....gins/tree/master/pac
- Apple App Store Release https://flutter.dev/docs/deployment/ios
- Google Play Release https://flutter.dev/docs/deployment/android
#flutter #ios #android
Don't forget to take the quizzes 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
Code this 💪, not that 💩. Learn how to use IntersectionObserver to lazy-load images efficiently in the browser without listening to the scroll event https://fireship.io/snippets/i....ntersection-observer
API https://developer.mozilla.org/....en-US/docs/Web/API/I
Start making restful API requests from Angular 4.3+ with the new HTTP client. In this lesson, I show you how to make GET and POST requests, set URL params, headers, handle errors, and more. https://angularfirebase.com/le....ssons/http-with-angu
StackBlitz Demo: https://stackblitz.com/edit/http-basics
Angular HTTP: https://angular.io/guide/http
JSON Placeholder: https://jsonplaceholder.typicode.com/
Swagger Codegen: https://swagger.io/
A quickstart guide for using 🤝🤯 Trusted Web Activities (TWA) to deploy a progressive web app (PWA) to the Google Play Store as a native Android app. https://fireship.io/lessons/pwa-to-play-store/
- Sven Budak's TWA stuff rocks https://medium.com/@svenbudak/....this-twa-stuff-rocks
- TWA Video from Google https://youtu.be/TCgT8dzSiU8
- TWA Guide from Google https://developers.google.com/....web/updates/2019/02/
#pwa #twa #android
The Apple Vision Pro VR headset was announced at WWDC yesterday. Let's take a first look its core features and how developers can take advantage of this new spatial computing paradigm.
#applevisionpro #tech #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Apple Vision Pro https://www.apple.com/apple-vision-pro/
WWDC Event https://developer.apple.com/wwdc23/
2023 Tech Trends https://youtu.be/1v_TEnpqHXE
🔥 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 Apple Vision PRO?
- Main components of visionOS
- WWDC recap
- Will Apple Vision Pro fail?
- Unity with Apply visionOS
- Top announcements at WWDC
- What is spatial computing?
- What is foveated rendering?
Google announced it's selling its domain registration platform to Squarespace. In this video, we look at the 5 biggest tech stories for developers to know this week, including cyberattacks, ChatGPT updates, Vercel's AI SDK, and Reddit's continued decline.
#tech #news #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Google Domains Sale https://support.google.com/dom....ains/answer/13689670
Reddit Downfall https://youtu.be/Ch6zNEq9fwM
Full Tutorials on Beyond Fireship https://www.youtube.com/@beyondfireship
🔥 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
- Why did Google Domains shut down?
- Cyberattacks from Killnet and Anonymous
- How do ChatGPT functions work?
Results from the 2021 State of JavaScript survey are in and the results may shock you. Compare trends in frontend web frameworks like React, Angular, Vue, and Svelte. Find out how backend frameworks stack up like Next.js, Gatsby, and SvelteKit
#javascript #webdev #TheCodeReport #stateofjs
🔗 Resources
State of JS Results https://2021.stateofjs.com/en-US/resources
Reddit discussion https://www.reddit.com/r/javas....cript/comments/stqjp
Tauri https://github.com/tauri-apps/tauri
Temporal API https://tc39.es/proposal-temporal/docs/
I'm just jealous of @bawad
🔥 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
- State of JS survey Results 2021
- React vs Vue vs Angular
- Is Gulp dead?
- Is Gatsby dead?
- New features in the JS language
Learn 7 useful SVG animation techniques to make beautiful graphics for your website. In this tutorial, we'll build two different SVGs from scratch and animate them CSS. Source code: https://github.com/fireship-io/animated-svg-demo
00:00 What we're building
00:42 What is an SVG?
02:22 1. Chrome Animation Inspector
03:11 2. Drawing Groups
05:10 3. Duotone CSS Variables
06:30 4. Transition Animations
07:41 5. JS events
08:36 6. Keyframe Animations
10:11 7. Animation Staggering
#css #animation #tutorial
Also see...
SVG in 100 Seconds https://youtu.be/emFMHH2Bfvo
CSS Keyframe Animation https://developer.mozilla.org/....en-US/docs/Web/CSS/@
SVG Docs https://developer.mozilla.org/en-US/docs/Web/SVG
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Build, test, deploy, repeat 🤖 Create a CI/CD pipeline with Google Cloud Build for that can continuously deploy your app to Firebase Hosting on every git commit https://fireship.io/lessons/ci....-cd-with-google-clou
- Cloud Build https://cloud.google.com/cloud-build/
- Hosting https://firebase.google.com/docs/hosting/
Build a throwback UI inspired by the iPod Classic, featuring a click wheel scroller that can detect circular motion with an animated PageView. https://fireship.io/lessons/flutter-ipod/
Original Inspiration Tweet https://twitter.com/elvin_not_....11/status/1199717678
iPod Classic https://en.wikipedia.org/wiki/IPod_Classic
Flutter https://flutter.dev/
#flutter #ios #ipod
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Discover seven amazing 🤯 tools for app developers that you have not heard of yet, but should probably be using. None of the selections are sponsored and are tools that I use in my daily work. https://fireship.io
- BundlePhobia https://bundlephobia.com/
- CloudCraft https://cloudcraft.co/
- Figma https://www.figma.com
- Fontflipper https://fontflipper.com/
- Visbug https://github.com/GoogleChromeLabs/ProjectVisBug
- Insomnia https://insomnia.rest/
- Flare https://www.2dimensions.com/about-flare
Full lesson https://angularfirebase.com/le....ssons/a-simple-expla
In this episode, I show you how to refactor an Angular app into different modules for better organization and maintainability.
Full NgModule FAQ https://angular.io/guide/ngmodule-faq
https://angularfirebase.com/le....ssons/deploying-an-a
In this episode, we're going to deploy an Angular 4 app to Firebase hosting. After some initial configuration, you can deploy your app to firebase in a matter of seconds. The best part is that its free for low volume usage and you'll be prepared to scale up as your app grows.
Step 1 - Compile your App
Running the ng build command will compile and minify your code in a single package in the dist/ folder. You could drop the contents of this directory into virtually any static website hosting platform or even an S3 bucket and you’re site would be ready to serve traffic.
Step 2 - Install Firebase Tools
Firebase has a nice command line package for deployment. Install it with NPM, then log into your firebase account.
Step 3 - Initialize your Project
Make sure you are in the top level directory of your angular app, then run firebase init. This will take you through a one-time configuration for your app.
For the most part, you can stick with the default settings, except in the follow cases:
Choose hosting on the first question.
Change public folder to dist when asked (it defaults to public).
Configure as single page app? Yes
If firebase asks to overwrite your index.html file, respond with NO.
Step 4 - Deploy
Now your app should be ready to deploy. Run the firebase deploy command, then check your project URL to make sure everything looks good.
That's all for firebase deployment, see you next time.
The Parallax Effect is an optical illusion that can give a website the appearance of 3D depth. Learn how to design a parallax website with React Spring in this 5 minute tutorial. https://fireship.io/pro
#webdev #js #learntocode
🔗 Resources
Source code https://github.com/fireship-io..../skydiving-cat-paral
React Spring Parallax https://react-spring.io/
Demo by isladjan https://codepen.io/isladjan/pen/abdyPBw
The boat Demo https://www.sbs.com.au/theboat/
🔥 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 parallax works
- Examples of parallax websites
- Scroll parallax implementation
- Webdev tips and tricks
Learn the basics of Angular 8 🚀 by building a tic-tac-toe game 🕹️ from scratch...Then deploy it as an installable progressive web app (PWA). Go beyond the basics 👉https://fireship.io/courses/angular/
Full Source Code: https://github.com/fireship-io/angular-tic-tac-toe
Angular Docs: https://angular.io/
#angular #pwa #tutorial
Take Angular quizzes 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
Build 3 responsive CSS grid examples to master the basics of this powerful layout system. https://github.com/fireship-io..../224-animated-css-gr
Full Tutorial: https://fireship.io/lessons/th....ree-responsive-css-g
1. Responsive 12-column bootstrap replacement.
2. Mosaic photo gallery.
3. Staggered animation grid.
Featuring special guest Bob Ross.
#css #grid #tutorial
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Learn everything you need to know to use the Angular v6 router effectively. We start with the absolute basics, then move on to advanced concepts related to guards and resolvers https://angularfirebase.com/le....ssons/basics-angular
- Router Docs https://angular.io/guide/router
- Lazy Loading Video https://youtu.be/8tBQI5grhbE
OpenAI just released a new ChatGPT plugin marketplace allowing businesses to integrate their own custom apps. In addition, it has a new "browser plugin" for Internet searching and "code interpreter" for python execution.
#ai #tech #TheCodeReport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
ChatGPT Plugins https://openai.com/blog/chatgpt-plugins
Examples of ChatGPT code execution https://andrewmayneblog.wordpr....ess.com/2023/03/23/c
Copilot X first look https://youtu.be/q1HZj40ZQrM
🔥 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 are ChatGPT plugins?
- Can ChatGPT search internet?
- Executing code with ChatGPT
- What is a vector database?
- Running Python in ChatGPT
The web browser is one of the most sophisticated tools on the planet. Today we look at 21 tricks, tips, and lesser-known features in Chrome Dev Tools that will make your life easier as a web developer. https://fireship.io
#webdev #chrome #tips
🔗 Resources
Chrome Dev Tools Docs https://developer.chrome.com/docs/devtools/
Cool PWA Features Video https://youtu.be/ppwagkhrZJs
Brave https://brave.com/
Visbug Extension https://chrome.google.com/webs....tore/detail/visbug/c
📚 Chapters
00:00 1. Design Mode
01:04 2. Command Palette
01:20 3. Screenshots
01:29 4. Visual Coverage
02:10 5. Dollar Sign Shortcut
02:37 6. Live Expression
02:53 7. Snippets
03:07 8. Redeclare variables
03:22 9. Copy Elements
03:50 10. Force State
04:12 11. Animation Timeline
04:30 12. Rendering FPS
04:51 13. Grid & Flexbox Editor
05:20 14. VisBug
05:32 15. Responsive Devices
05:49 16. Sensors
06:00 17. Lighthouse
06:21 18. Network Waterfall
06:51 19. Server Timing API
07:13 20. Performance
08:14 21. Memory Profile
08:51 Be Brave
🤓 Install the quiz app
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
🔥 Watch more with Fireship 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
OpenAI announced GPT-4 yesterday and it's a beast. It can now handle 25K words of context, allowing it to provide more relevant code solutions for programmers.
#tech #chatgpt #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
GPT-4 Overview https://openai.com/product/gpt-4
GPT-4 Paper https://paperswithcode.com/pap....er/gpt-4-technical-r
ChatGPT API Tutorial https://youtu.be/e2uvhJ7r1UQ
5 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
- What does GPT-4 mean for the tech world?
- GPT3.5 vs GPT4
- Can AI replace lawyers?
- Will AI replace programmers?
- What's new in GPT4?
- How do I use ChatGPT version 4
- Using images with GPT4
In this episode, we build a five-star review system with Angular and the Firestore NoSQL document database. Learn how to model data relationships and manage them from an Angular service. https://angularfirebase.com/le....ssons/star-ratings-s
CodePen CSS Stars: https://codepen.io/jamesbarnett/pen/vlpkh
Firestore Data Model: https://firebase.google.com/do....cs/firestore/data-mo
What will the future of AI programming look like with tools like ChatGPT and GitHub Copilot? Let's take a look at how machine learning could change the daily lives of developers in the near future.
#ai #tech #TheCodeReport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
ChatGPT Demo https://openai.com/blog/chatgpt
Codex CLI https://github.com/microsoft/Codex-CLI
Tech Trends to Watch in 2023 https://youtu.be/1v_TEnpqHXE
🔥 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 will ChatGPT affect programmers?
- Is AI going to replace software engineers?
- The future of AI programming tools?
- Universal AI programming language
- Using AI from the command line
Elon Musk and many other prominent AI researchers signed a petition to stop training on all models beyond GPT-4 to assess the risk to humanity. Let's look at 5 reasons why AIs like ChatGPT should not be feared.
#ai #tech #TheCodeReport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Pause Giant AI Experiments https://futureoflife.org/open-....letter/pause-giant-a
GPTs impact on labor market https://arxiv.org/abs/2303.10130
Github Copilot First Look https://youtu.be/q1HZj40ZQrM
🔥 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
- Petition to stop training LLMs
- Elon Musk beef with OpenAI
- The impact of ChatGPT on Computer Science degrees
- Is AGI possible?
- Why AGI will never happen
- Moral and ethical problems with Artificial Intelligence
The story of I grew my channel to 1 million subscribers over the course of 5 years. Get into the right mindset as a content creator and learn some practical tips & tricks to grow a YouTube channel faster.
Sending a huge THANK YOU to everybody who has supported my work over the years!
#youtube #growthhacking #100SecondsOfCode
🔗 Resources
How I make Videos https://youtu.be/N6-Q2dgodLs
Personal channel https://www.youtube.com/c/jeffdelaney23
Follow me on Twitter https://twitter.com/fireship_d....ev/status/1472650218
🔥 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 to grow on YouTube?
- How to get more YouTube views?
- Growth hacking strategies
- How to make content for developers
- Optimize watch time tips
- Optimize clicks CTR tips
UPDATE. See the latest basics video here: https://youtu.be/q5J5ho7YUhA
Master the basics of Firebase in 20 minutes. In this episode, we run through hosting, auth, firestore, storage, and cloud functions using nothing but plain JavaScript. https://angularfirebase.com/le....ssons/the-ultimate-b
- Firebase https://firebase.google.com/
- CLI Tools https://github.com/firebase/firebase-tools
JOIN me for a full beginner’s tutorial on MySQL. Learn the basics of relational databases by recreating AirBnb’s database with raw SQL https://fireship.io/tags/sql/
Buy the MySQL Pillow https://fireshipio-swag.creato....r-spring.com/listing
References
Diagram https://drawsql.app/fireship/d....iagrams/airbnb-mysql
Installer https://dev.mysql.com/downloads/installer/
MySQL Docs https://dev.mysql.com/doc/
#mysql #database #tutorial
00:00 0. SQL is King
00:49 1. The Legend of Ted Codd
01:24 2. ORM Magic
02:00 3. What is a RDBMS?
02:37 4. Draw SQL Diagrams
02:56 5. Schemas, Datatypes, & Constraints
04:12 6. Be Normalized
05:00 7. Install MySQL on Windows/Mac
05:50 8. Create a New Database
06:13 9. SQLTools VS Code Extension
06:46 10. --comments
07:02 11. Basic SQL Syntax
08:04 12. Primary Key
08:31 13. Varchar vs Text
09:31 14. INSERT New Data
10:28 15. Read or SELECT Data
10:57 16. LIMIT & ORDER
11:23 17. Filtering with WHERE
11:50 18. LIKE pattern matching
12:19 19. INDEX for read speed
12:56 20. JOIN a relationship
15:41 21. Alias AS
16:08 22. JOIN through a middle man
16:58 23. DROP a video
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Send email to your app users via SendGrid with a Firestore Cloud Function trigger. Learn how to create transactional templates and send them to your users with ease. https://angularfirebase.com/le....ssons/sendgrid-v3-no
SendGrid: https://sendgrid.com/
CloudFunction: https://firebase.google.com/docs/functions/
Tech companies have seen huge declines in value over the past six months... What does this mean for programmers and entrepreneurs? Let's look at bad news affecting tech workers and how it relates to coding jobs, venture capital, crypto, and startups.
#tech #finance #TheCodeReport
🔗 References
Fed Outlook https://www.reuters.com/busine....ss/finance/feds-kash
Tech Market Crash https://www.nbcnews.com/tech/t....ech-news/tech-stocks
VC outlook https://twitter.com/nbashaw/st....atus/152266601427766
NFT and crypto sales https://www.wsj.com/articles/n....ft-sales-are-flatlin
Fireship 2021 Predictions https://youtu.be/oHtR5YSPLjo
🔥 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
- Tech Stocks crash of 2022
- Will there be layoffs in tech?
- Cryptocurrency declines 2022
- Web3 is dead?
- NFTs sales decline
- How does stock market crash affect developers?
- Tech industry outlook for 2022
Google recently demonstrated how MusicLM can compose high-fidelity audio from a text prompt with generative AI technology. Let's make some predictions about how AI tech will affect the music industry in the future.
#ai #tech #TheCodeReport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
MusicLM https://google-research.github.....io/seanet/musiclm/e
MusicCaps Dataset https://www.kaggle.com/datasets/googleai/musiccaps
Riffusion https://www.riffusion.com
🔥 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
- Can AI generate music?
- Voice cloning
- ChatGPT for writing songs
- How Artificial Music works
- Google AudioLM
- Google MusicLM
- Machine learning with audio
My GitHub copilot trial expired... Will I pay Microsoft the $10 fee to upgrade? In other bad news, Heroku is killing off its free tier soon. But luckily, we did get a new JavaScript framework this week.
#technews #programming #TheCodeReport
🔗 Resources
GitHub Copilot https://github.com/features/copilot
Heroku Free Tier Announcement https://blog.heroku.com/next-chapter
Enhance GitHub https://github.com/enhance-dev..../enhance-starter-pro
The John McAfee Pledge https://twitter.com/officialmc....afee/status/88702468
📚 Chapters
🔥 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
- GitHub Copilot now paid
- Heroku free-tier alternatives
- Will firebase free tier be removed?
Learn the meaning of 7 fancy, yet important, programming terms before your next technical interview https://fireship.io
00:00 Intro
00:58 Idempotent
02:08 Ephemeral
03:16 Anonymous
04:13 Predicate
05:10 Memoization
05:59 Abstraction
07:06 Serialization
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Building an app for iOS and Android? This guide will get you up and running with Flutter & Firebase, plus a few optional superpowers for serious app developers. https://fireship.io/snippets/install-flutterfire/
00:00 Initial Setup
01:46 Android Setup
03:41 iOS Setup
05:01 Analytics
07:02 Performance
08:08 Crashlytics
10:10 Distribution
11:08 Firestore Emulator
Full Flutter Course https://fireship.io/courses/flutter-firebase/
FlutterFire Docs https://firebase.google.com/docs/flutter/setup
#firebase #flutter
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Learn the meaning of 7 fancy, yet important, programming terms before your next technical interview https://fireship.io
00:00 Intro
00:58 Idempotent
02:08 Ephemeral
03:16 Anonymous
04:13 Predicate
05:10 Memoization
05:59 Abstraction
07:06 Serialization
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
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
Channel update Feb 19th, 2019. #ThankYou
Building an app for iOS and Android? This guide will get you up and running with Flutter & Firebase, plus a few optional superpowers for serious app developers. https://fireship.io/snippets/install-flutterfire/
00:00 Initial Setup
01:46 Android Setup
03:41 iOS Setup
05:01 Analytics
07:02 Performance
08:08 Crashlytics
10:10 Distribution
11:08 Firestore Emulator
Full Flutter Course https://fireship.io/courses/flutter-firebase/
FlutterFire Docs https://firebase.google.com/docs/flutter/setup
#firebase #flutter
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Huge thank you to everybody who supports this content! Get a idea of my future plans with this cryptic Easter egg filled channel update :)
Learn how to build a Slack App 💬 with Node.js & Firebase Cloud Functions. CyberJeff is a simple slack bot that helps automate tasks and improve productivity https://fireship.io/lessons/ho....w-to-build-a-slack-b
Let's chat on Fireship Slack https://fireship.page.link/slack
Slack API https://api.slack.com/
PubSub https://cloud.google.com/pubsub/
#slack #nodejs #firebase
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Learn how to produce video content programmatically with HTML, CSS, and JavaScript thanks to Remotion - a React library that can create real MP4 videos https://github.com/remotion-dev/remotion
#javascript #tech #tutorial
🔗 Resources
Subscribe to @wcandillon and @JonnyBurger for more awesome content.
Source Code https://github.com/wcandillon/remotion-fireship
Remotion Docs https://www.remotion.dev/
SVG in 100 Seconds https://youtu.be/emFMHH2Bfvo
📚 Chapters
00:00 This Intro is 100% Code
00:58 Introducing Remotion
01:49 Code your First Video
04:06 Make it Rain with Animated SVGs
07:50 Render as MP4
🔥 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 to make MP4 videos with code
- Remotion basics tutorial
- Video animation basic concepts
- Make videos with React.js
- Ways to create video programmatically
I built a twitter bot that automatically tweets content generated by artificial intelligence using GPT-3. Learn how to build your own twitter bot from scratch with Node.js and the OAuth 2.0 protocol. https://fireship.io/lessons/tw....itter-bot-oauth2-tut
#ai #js #tutorial
Follow Bob https://twitter.com/boblikescode
Follow Fireship https://twitter.com/fireship_dev
🔗 Resources
Source Code https://github.com/fireship-io/gpt3-twitter-bot
Twitter API https://developer.twitter.com/
OpenAI https://openai.com/
📚 Chapters
00:00 AI Twitter Bot
00:42 OAuth 2.0 Crash Course
02:36 Project Setup
04:38 Step 1. OAuth URL
05:44 Step 2. OAuth Callback
06:41 Step 3. Use the Twitter API
09:00 AI-generated Faces
🔥 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
- API Authentication Basics
- How to use the Twitter API?
- How to build a twitter bot?
- What is OAuth 2.0?
- Twitter API 2.0 tutorial
- OpenAI Tutorial
I built a web3 dapp that can mint an unlimited quantity of NFTs. Learn how to build decentralized web apps with JavaScript using tools like Hardhat, Solidity, OpenZeppelin, React, Alchemy, and more https://fireship.io/lessons/we....b3-solidity-hardhat-
🤪 Invest in my NFT Collection https://opensea.io/collection/fireguys
#web3 #nft #tutorial
🔗 Resources
- Source Code https://fireship.io/lessons/we....b3-solidity-hardhat-
- Pinata https://pinata.cloud/
- Hardhat https://hardhat.org/
- OpenZeppelin Wizard https://docs.openzeppelin.com/contracts/4.x/wizard
- Alchemy https://www.alchemy.com/
- Web3 Criticism https://moxie.org/2022/01/07/w....eb3-first-impression
- No-Code NFT tutorial by @codeSTACKr https://youtu.be/AaCgydeMu64
📚 Chapters
00:00 Web3 Introduction
01:11 What is an NFT?
02:27 Why Web3 is Dumb
03:00 1. How to Generate Random Art
06:14 2. Upload to IPFS with Pinata
07:33 3. Hardhat Toolchain Setup
08:51 4. Code an ERC-721 Smart Contract
13:30 5. Testing Smart Contracts with Waffle
15:22 6. Web3 Frontend with Ethers.js and React
21:20 7. Deploy to a Testnet with Alchemy
🔥 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
- step-by-step web3 project
- full web3 tutorial
- NFTs explained
- How to use Hardhat and Solidity
- How to use ethers.js with react
- What is ERC-721
- How to deploy a web3 app
- Web3 with Ethereum and Polygon
The latest Firebase JavaScript SDK (version 9.0) has been rewritten as a functional library resulting far smaller bundle sizes for better web performance. Learn how to upgrade your Firebase web app https://fireship.io/courses/
#firebase #javascript #firstlook
🔗 Resources
Get Started with Firebase https://youtu.be/q5J5ho7YUhA
Firebase Blog https://firebase.googleblog.co....m/2021/07/introducin
🔥 Watch more with Fireship 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
Get started with TensorFlow.js by building a digit recognizer from scratch in this quick start tutorial https://angularfirebase.com/le....ssons/tensorflow-js-
TF.js docs - https://js.tensorflow.org
Machine Learning Crash Course - https://developers.google.com/....machine-learning/cra
Kaggle - https://www.kaggle.com/jeffd23
MNIST - https://ml4a.github.io/demos/confusion_mnist/
Use Web Assembly to build an app that converts video files to GIF (using FFmpeg), entirely from a frontend React JavaScript application. https://fireship.io/lessons/wasm-video-to-gif/
Source Code: https://github.com/fireship-io..../react-wasm-gif-make
FFmpeg.wasm https://ffmpegwasm.github.io/
#wasm #webdev #tutorial
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Take an early look at RxFire - an official library combining RxJS & Firebase for better control over realtime streams https://angularfirebase.com/le....ssons/introduction-t
- RxFire https://www.npmjs.com/package/rxfire
- Stencil https://stenciljs.com/
- RxJS https://github.com/ReactiveX/rxjs
Find out if you're one of the lucky T-shirt winners and get an idea of my content plans for 2020.
#ChannelUpdate
Learn how to run pagination queries in Firestore 🔥📃📃 forward and backward. Then build an full working app with Svelte https://fireship.io/lessons/fi....restore-pagination-g
💸 Black Friday Discount Code: KaLg2d04
👉 Use it here: https://fireship.io/pro
🙏 Thank you for making this channel possible!
- SvelteFire https://github.com/codediodeio/sveltefire
- Limit To Last: https://firebase.google.com/do....cs/reference/node/fi
#firebase #firestore
Don't forget to take the quiz 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Can you use Google Sheets as a database? Learn how to build a Next.js app using a spreadsheet as the data layer https://fireship.io/lessons/go....ogle-sheets-database
#googlesheets #js #webdev
🔗 Resources
Source Code https://github.com/fireship-io..../google-sheets-datab
Google APIs PRO Lesson https://fireship.io/lessons/go....ogle-apis-node-tutor
Next.js Full Course https://fireship.io/courses/react-next-firebase/
Google Sheets https://www.google.com/sheets/about/
📚 Chapters
00:00 Google Sheets Database?
00:35 Pros & Cons
01:15 Create a Spreadsheet
01:49 Create Next.js App
02:40 Ways to Authenticate Google APIs
03:34 GCP Service Account
04:36 Next Env Variables
05:07 Google API Auth
06:07 Query the Speadsheet
🤓 Install the quiz app
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
🔥 Watch more with Fireship 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
Learn how to use BigQuery ML on Google Cloud Platform to predict the outcome of horse races 🏇 - Machine learning skill not required. https://fireship.io/lessons/bi....gquery-ml-quickstart
- Big Query https://cloud.google.com/bigquery/
- DataLab https://cloud.google.com/datalab/
- Horse Racing Dataset https://www.kaggle.com/lukebyr....ne/horses-for-course
Thank you for 200K 🙏 subscribers! Here's a quick look at my content plans for the next few months, including a full Angular Firebase project course. https://fireship.io
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
Learn 25 VS Code tips and tricks that will help you write code faster. Try out awesome new features and extensions that turn your editor into a full-blown IDE. https://fireship.io/pro
#vscode #learntocode #programming
Support me for $1 on github https://github.com/sponsors/codediodeio
🔗 Resources
VS Code https://code.visualstudio.com/
Remote Repositories https://code.visualstudio.com/blogs/2021/06/10/remote-repositories
vim Tutorial https://youtu.be/-txKSRn0qeA
📚 Chapters
00:00 Intro
00:35 1. VS Code CLI
01:03 2. Release the Mouse
01:45 3. Command Palette Ctrl+P
02:10 4. Run Commands
02:25 5. Quokka
02:43 6. Find Symbols with @
03:14 7. Find symbols with #
03:36 8. Move Around Quickly
04:07 9. Multiline Editing
04:23 10. Auto Rename Tag
04:47 11. Delete or move a line
05:16 12. Highlight & Comment Lines
05:39 13. JS Doc Extension
06:07 14. Better Comments
06:20 15. Integrated Terminal
07:14 16. Tasks
07:38 17. Git Source Control
08:26 18. Git Lens Extension
08:40 19. Remote Repositories
09:14 20. Remote SSH & Containers
09:31 21. Custom Snippets
10:01 22. Community Snippets
10:13 23. Auto-create directories
10:29 24. Paste as JSON
10:50 25. Rename Symbol
🤓 Install the quiz app
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
🔥 Watch more with Fireship 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
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/fi....rebase-microservices
Cloud Run https://cloud.google.com/run/
Nuxt https://nuxtjs.org/
Firebase Microservices https://firebase.google.com/docs/hosting/cloud-run
#cloudrun #docker #serverless
With the releases of Angular 8 and Firebase 6 comes a bunch of new features in AngularFire that can extend and simplify your code https://fireship.io
Official Docs: https://github.com/angular/angularfire2
1. Schematics
2. Perf https://youtu.be/KYYjdWSrRjI
3. ID Field
4. Collection Group Query https://youtu.be/fQ4u1J717ys
5. Router Guards
#angular #firebase
Download the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
AI influencers are making real money selling content on websites like OnlyFans. Learn about the latest generative AI tech, like Stable Diffusion XL, and how to run it locally on your PC for free.
#ai #tech #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Fooocus on GitHub https://github.com/lllyasviel/Fooocus
Aitana Influencer Article https://www.entrepreneur.com/b....usiness-news/this-ai
OpenAI Drama https://youtu.be/4Ff2ZrhVkp0?si=gyRHZl_LJw_NU6Co
📚 Chapters
🔥 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
- Who is behind Aitana Lopez AI
- StableDiffusionXL tutorial
- Fooocus tutorial
- How to make money with AI
- How to generate AI images for free
- AI business ideas
Build a decentralized chat app using the GUN JavaScript library. Learn how to use web3 technology to create a peer-to-peer graph database without traditional cloud computing providers. https://gun-chat-dapp.web.app/
#js #web3 #tutorial
🔗 Resources
Live Demo: https://gun-chat-dapp.web.app/
View on Product Hunt: https://www.producthunt.com/posts/gun-2
Docs: https://gun.eco/
Source Code: https://github.com/fireship-io/gun-chat
📚 Chapters
00:00 Intro
00:56 How it Works
03:11 Setup
03:30 User Authentication
07:43 Chat Messages
🤓 Install the quiz app
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
🔥 Watch more with Fireship 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
- Pros and Cons of Web3 development
- How to develop decentralized apps
- WebRTC
- End-to-End e2e encryption for chat
- Using Svelte to build a chat UI
Build a file upload dropzone in Angular using the brand new storage module in AngularFire2. Learn how to easily send files from an Angular PWA to Firebase Storage. https://angularfirebase.com/le....ssons/firebase-stora
- AngularFire2 Storage: https://github.com/angular/ang....ularfire2/tree/maste
- Firebase Storage: https://firebase.google.com/docs/storage/
- Angular: https://angular.io/
Ten predictions about 2019 from the mind of a JavaScript developer. Learn about trends in web development, native apps, social media, and more. https://medium.com/@jeffdelane....y/predictions-for-20
How to submit your first pull request on GitHub in 100 seconds. Fork the repo below, then contribute a PR to receive a free hologram sticker in the mail https://github.com/fireship-io/git-sticker
How to Participate on Github https://fireship.io/snippets/g....it-how-to-participat
GitHub PR Docs Official https://help.github.com/en/git....hub/collaborating-wi
#git #freestuff #100SecondsOfCode
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Building your own Command Line Interface (CLI) is easier than you might think with Node.js. There are a bunch of open-source packages that can handle colors, animation, and user input with ease. Use them to build a CLI game from scratch using only JavaScript.
To play my CLI game, run "npx firequiz" from your terminal.
#javascript #programming #game
🔗 Resources
Chalk https://github.com/chalk/chalk
Inquirer https://github.com/SBoudrias/Inquirer.js/
Colors.js Controversy https://www.theverge.com/2022/....1/9/22874949/develop
Source Code https://github.com/fireship-io..../javascript-milliona
🔥 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
- Build a Command Line Interface Node.js
- Top 5 packages for Node.js command line
- Building a terminal game
- Bash vs Node.js
- How to deploy an NPX script
- How to use ESM modules
What is Cloud Computing 🌩️? Get a glimpse of cloud services in 2020 🔮 and learn must-know concepts for software developers. https://fireship.io
#cloud #future
Data Sources:
- Gartner Forecasts https://www.gartner.com/en/new....sroom/press-releases
- Forbes Enterprise Computing https://www.forbes.com/sites/l....ouiscolumbus/2018/08
- Flexera Report 2019 https://resources.flexera.com/....web/media/documents/
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
I'm back with an updated Firebase Basics tutorial 🔥 Follow along with the full Firebase quickstart article https://fireship.io/lessons/firebase-quickstart
Source code: https://github.com/fireship-io/3.1-firebase-basics
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
A complete beginner's tutorial for Electron JS ⚡ along with an overview of its pros and cons. In about 10 minutes, we build a desktop screen recorder from scratch with JavaScript that is installable on Mac, Windows, or Linux.
Full Electron Tutorial: https://fireship.io/lessons/el....ectron-screen-record
Source Code: https://github.com/fireship-io..../223-electron-screen
Electron Forge: https://www.electronforge.io/
#tutorial #javascript #electron
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Is Ionic 4 right for your mobile app compared to Flutter, React Native, or Native Script? Get my opinion in this video and explore the changes the latest version of the framework. https://itnext.io/should-you-u....se-ionic-4-fa04daeba
- Ionic 4 Beta https://blog.ionicframework.co....m/announcing-ionic-4
- Flutter https://flutter.io/
- React Native https://facebook.github.io/react-native/
Do you know how binary works? Learn the basics by building a binary Clock in Flutter. Build your own clock before the competition deadline on Jan 22nd, 2020. https://fireship.io/lessons/bu....ild-a-binary-clock-f
Flutter Clock Competition https://flutter.dev/clock
What is a Binary Clock? https://en.wikipedia.org/wiki/Binary_clock
Snippet for Dart List.map https://fireship.io/snippets/d....art-how-to-get-the-i
#flutter #FlutterClock #compsci
Don't forget to take the quiz 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
My Gear:
VS Code with Atom One Dark + vscode-icons. Fira Code font.
Another episode of "code this 💪, not that 💩" looking at ten important concepts in RxJS and how to avoid common anti-patterns. https://fireship.io
- Source Code https://github.com/fireship-io..../175-code-this-not-t
- ReactiveX http://reactivex.io/
- print method code https://gist.github.com/codedi....odeio/ed900f4cf5752b
#RxJS #JavaScript
Learn all about JavaScript loops 🤹 and how to write code that maximizes performance and readability, while avoiding the bad stuff 💩. https://fireship.io/snippets/j....avascript-loops-pro-
I built a simple app with 10 different JavaScript frameworks... Learn the pros and cons of each JS framework before building your next app https://github.com/fireship-io..../10-javascript-frame
#javascript #webdev #top10
🔗 Resources
Full Courses https://fireship.io/courses/
Performance Benchmarks https://github.com/krausest/js-framework-benchmark
Source code https://github.com/fireship-io..../10-javascript-frame
📚 Chapters
00:00 JavaScript Frameworks
00:53 1. Vanilla
04:21 2. React
07:48 3. Angular
10:15 4. Vue
12:18 5. Svelte
14:16 6. Lit
16:11 7. Stencil
17:18 8. Solid
18:35 9. Alpine
20:17 10. Mithril
🤓 Install the quiz app
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
🔥 Watch more with Fireship 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
Vote Here -- https://goo.gl/qF8Q5r
Go PRO Here -- https://angularfirebase.com/pro/
Enroll Here -- https://projects.angularfireba....se.com/p/ionic-4-fir
YouTube Discount code 50% off: ION4-YOUTUBE
Use Ionic v4 and Firebase to build cross-platform mobile apps on the web, iOS, and Android in my new full-length course.
Codux is a visual IDE for React.js. Let's review this tool by building a simple app and find out how it can increase web development productivity.
#webdevelopment #programming #vscode
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Codux https://codux.hopp.to/fireship
I tried 10 code editors https://youtu.be/8PhdfcX9tG0
VS Code Tips https://youtu.be/ifTF3ags0XI
🔥 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
- Using Codux with VS Code
- No-code tools for React
- Low-code web development tools
- How do I build a web app without code?
- Code Editor review
How APIs work. Learn how to use the YouTube API like @Tom Scott and @MrBeast to automatically update a video in the background. https://github.com/fireship-io..../this-video-has-n-vi
Tom Scott video https://youtu.be/BxV14h0kFs0
Mr Beast Video https://youtu.be/YSoJPA8-oHc
Note: The background job is on a 5 minute interval, so it won't be very accurate.
Fireship OAuth 2.0 Video https://fireship.io/lessons/go....ogle-apis-node-tutor
Should you learn to code in 2020? If the economic situation continues to deteriorate, the short-term outlook for aspiring software developers could be negatively affected... Learn why in this video.
- Sequoia Memo https://medium.com/sequoia-cap....ital/coronavirus-the
- Recent Layoffs https://techcrunch.com/tag/layoffs/
- Today's Market Selloff https://www.foxbusiness.com/ma....rkets/us-markets-mar
- Corona COVID-19 status https://www.cdc.gov/coronaviru....s/2019-ncov/summary.
#code #crisis
Learn how use an exciting new state management library for Angular. In this episode, we get started with NGXS and compare it to NgRx. https://angularfirebase.com/le....ssons/ngxs-quick-sta
- NGXS https://ngxs.gitbook.io/ngxs
I present you with Fireship.io 🚀 The new home of all future content on this channel. https://fireship.io
Source Code https://github.com/fireship-io/fireship.io
Learn how to use CSS pseudo-classes to style an element based on changes to its state. like :hover, :focus, and :nth-child. https://fireship.io/tags/css/
#css #100SecondsOfCode #tutorial
MDN Docs https://developer.mozilla.org/....en-US/docs/Web/CSS/P
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Learn the fundamentals of GraphQL by interacting with the SpaceX API 👨🚀🚀, then use it to build a frontend Apollo application from scratch. Source code: https://github.com/arjunyel/an....gular-spacex-graphql
Hire the expert Arjun Yelamanchili 👨🔬
- https://github.com/arjunyel
- https://www.linkedin.com/in/ar....jun-yelamanchili-423
GraphQL Docs https://graphql.org/
Apollo Client https://www.apollographql.com/
Lesson page https://fireship.io/lessons/gr....aphql-basics-tutoria
#graphql #tutorial #learntocode
Take Fireship Quizzes 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
Learn how to model and structure data relationships with the Firestore NoSQL Database. We build simple one-to-many and many-to-many relationships by modeling a twitter-inspired app. https://angularfirebase.com/le....ssons/firestore-nosq
- Firestore Structuring: https://firebase.google.com/do....cs/firestore/manage-
- NoSQL Document DB - https://en.wikipedia.org/wiki/....Document-oriented_da
Learn the basics of CSS transitions and keyframe animations in 100 seconds. #css #animation #100SecondsOfCode
Easing Functions https://easings.net/
Keframes docs https://developer.mozilla.org/....en-US/docs/Web/CSS/@
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
UPDATE Watch the latest store video here: https://youtu.be/wRWZQwiNFnM
Full Lesson: https://angularfirebase.com/le....ssons/angular-file-u
In this episode we are going to implement file uploads with Angular and Firebase Storage. File storage is currently unsupported in the AngularFire2 package, but it's still possible to use Firebase storage by interacting directly with the Firebase Web API. We're still going use AngularFire2 for saving information about file uploads to the realtime database, such as the file name and its URL location.
Step 1 - Generate the Files
The structure of this feature is very similar to the Angular Firebase CRUD lesson, so make sure to check that out. It is just form that accepts files, uploads them to the storage bucket, then renders the details to a list.
ng g service uploads/shared/upload
ng g class uploads/shared/upload
ng g component uploads/uploads-list
ng g component uploads/upload-detail
ng g component uploads/upload-form
Step 2 - Define the Upload Class
The upload class will be used by the service. Notice it has a constructor for the `file` attribute, which has a type of `File`. This class is built into JavaScript and it defines files that are passed via HTML from inputs.
Step 3 - Build the Upload Service
The service needs to upload the file to Firebase Storage then save details about the file to the realtime database. First let's add the necessary imports import, including the Firebase API, and declare the variables.
Here's the push upload function works step-by-step.
1. First, Establish a reference to the firebase storage bucket.
2. Second, define the `uploadTask` as a promise to put the file in storage.
3. Third, monitor the uploadTask event using the `.on` function.
4. Last, handle the events of in progress, success, and error.
When the upload is in progress we will take a snapshot to get the number of bytes transferred. Using some simple math, we convert it to a percentage to display a progress bar for the user.
When the upload is complete, we update the database.
Before moving to the components, we need a way to delete files. Deleting a file only requires a reference to its location. Because we saved the name of the file to the database, we can use it to locate the file in storage and delete it. Here's the code to delete files from both firebase storage and the realtime database.
Step 4 - Build the Upload Form Component
Now we need to give users a way to choose files and upload or delete them. Let’s start with the UploadFormComponent because that is where most of the action is happening.
When a user selects files in an HTML file input, it fires the change event. Our template will listen the change event, then pass the event to our component, which contains the list of files the user is trying to upload.
Now we can create methods to trigger the upload function from the service. I created separate functions for handling single files and multiple files that will be connected to buttons in the template.
For the end user, we have a progress bar that changes its width based on the snapshot from the upload service.
To trigger the upload, we use a regular HTML input that fires the `detectFiles` whenever a new file is entered. This will define the "selectedFiles" variable. Then the user can click Upload files to push the file to storage.
That's it firebase file uploads, see you next time.
Step 1 - Compile your App
Running the ng build command will compile and minify your code in a single package in the dist/ folder. You could drop the contents of this directory into virtually any static website hosting platform or even an S3 bucket and you’re site would be ready to serve traffic.
Step 2 - Install Firebase Tools
Firebase has a nice command line package for deployment. Install it with NPM, then log into your firebase account.
Step 3 - Initialize your Project
Make sure you are in the top level directory of your angular app, then run firebase init. This will take you through a one-time configuration for your app.
For the most part, you can stick with the default settings, except in the follow cases:
Choose hosting on the first question.
Change public folder to dist when asked (it defaults to public).
Configure as single page app? Yes
If firebase asks to overwrite your index.html file, respond with NO.
Step 4 - Deploy
Now your app should be ready to deploy. Run the firebase deploy command, then check your project URL to make sure everything looks good.
That's all for firebase deployment, see you next time.
How does 🔥 Firebase compare to ⚡Amplify? Review Google Cloud Platform and Amazon Web Services in terms of pricing, features, and the developer experience 🤔. https://fireship.io
- Firebase https://firebase.google.com/
- Amplify https://aws-amplify.github.io/
- Source Code https://github.com/fireship-io..../188-firebase-vs-amp
#firebase #aws #amplify
Get the Fireship Quiz App 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
Tools I use...
Editor: VS Code with Atom One Dark + VS Code Icons
Video: Adobe Premiere + AfterEffects
Design: Figma
Learn the basics of Tailwind CSS by building a Discord-inspired navbar from scratch. Learn how to leverage utility classes to build responsive animated UI elements faster https://fireship.io/lessons/tailwind-tutorial/
#webdev #css #tutorial
🔗 Resources
Tailwind Docs https://tailwindcss.com/
Tailwind React Setup https://tailwindcss.com/docs/guides/create-react-app
Source Code https://github.com/fireship-io/tailwind-dashboard
📚 Chapters
00:00 Intro
00:54 Should you use Tailwind?
01:42 Setup
02:48 JIT Mode
03:20 Functional CSS Basics
04:06 Flexible Container
04:41 Organize UI Components
05:07 Position a Sidebar
06:58 Customize Colors
07:50 Icon Buttons
08:23 Custom Classes with Apply
09:32 Pseudo-class Variants
09:56 Animation
10:34 Groups
11:54 Dark Mode
🔥 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
Beginner Tailwind Tutorial
Using Tailwind in React
Tailwind Animation
Tailwind Dark Mode
CSS vs Tailwind vs Bootstrap
What does it take to become a Google Developer Expert? Learn about my own experience becoming a GDE with practical advice for working towards this goal. https://medium.com/@jeffdelane....y/how-to-become-a-go
#gde #google #dev
- Experts Program https://developers.google.com/programs/experts/
Learn how to use CSS pseudo-classes to style an element based on changes to its state. like :hover, :focus, and :nth-child. https://fireship.io/tags/css/
#css #100SecondsOfCode #tutorial
MDN Docs https://developer.mozilla.org/....en-US/docs/Web/CSS/P
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Retrieve data from Firestore in a way that is faster and more cost effective with data aggregation. In this episode, we use Firebase Cloud Functions to read data from a sub-collection and write it to its parent document. https://angularfirebase.com/le....ssons/firestore-clou
Firestore: https://firebase.google.com/docs/firestore/
NoSQL Aggregation: https://www.thoughtworks.com/i....nsights/blog/nosql-d
Learn the basics of CSS transitions and keyframe animations in 100 seconds. #css #animation #100SecondsOfCode
Easing Functions https://easings.net/
Keframes docs https://developer.mozilla.org/....en-US/docs/Web/CSS/@
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Create high-performance 3D data visualizations with Deck.gl and Google Maps. Analyze over 140K gun violence ☠️🤕 incidents by geographic location. https://us-gun-violence.web.app/
- Tutorial https://fireship.io/lessons/de....ckgl-google-maps-tut
- Deck.gl https://deck.gl/#/showcases/overview
- Google Maps https://developers.google.com/....maps/documentation/j
#datavis #gunviolence #googlemaps
Take the quiz 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
OpenAI recently announced a new model called GPT-4o, just days before Google I/O. Let's recap the announcements at Google I/O and determine who is currently winning the artificial intelligence race.
🔥 Get More Content - Upgrade to PRO
Upgrade at https://fireship.io/pro
Use code YT25 for 25% off PRO access
#tech #ai #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Google I/O https://io.google/2024/
OpenAI GPT-4o https://openai.com/index/hello-gpt-4o/
Google I/O recap 2023 https://youtu.be/nmfRDRNjCnM
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- Recap of Google I/O 2024
- GPT-4o features
- Gemini 1.5 Pro features
- What is project Astra?
- What are the best AI models in 2024?
- Latest features in Firebase
- Firebase data connect
- Firebase GenKit
The top 10 code editors for programmers in 2022. We start by exploring simple text editors like vim, then show the evolution to IDEs like Visual Studio.
#programming #code #top10
🔗 Resources
VS Code course https://fireship.io/courses/vscode-tricks
Editor war https://en.wikipedia.org/wiki/Editor_war
VS Code in 100 Seconds https://youtu.be/KMxo3T_MTvY
vim in 100 Seconds https://youtu.be/-txKSRn0qeA
🔥 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 do you choose a code editor?
- What is the best code editor?
- vim vs emacs
- VS Code vs vim
- the editor wars
- tools required to learn to code
A collection of 12 #tips and #tricks for building efficient and maintainable #Flutter apps 🧙. Learn how to use your IDE effectively, animate easily, and handle app complexity https://fireship.io/courses/flutter-firebase/
Robert Brunhage - https://www.youtube.com/channe....l/UCSLIg5O0JiYO1i2nD
FilledStacks - https://www.youtube.com/channe....l/UC2d0BYlqQCdF9lJfy
Snippets: https://marketplace.visualstud....io.com/items?itemNam
Launcher Icons: https://pub.dev/packages/flutter_launcher_icons
Flutter Docs - https://flutter.dev
Take the Flutter quizzes 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro Use code lORhwXd2 for 25% off your first payment.
Take a look inside the Twitter algorithm now that it has been released as open-source code. Why would Elon Musk would make a decision like this from a strategic business perspective?
#programming #tech #TheCodeReport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
The Algorithm https://github.com/twitter/the-algorithm
Twitter Eng Blog https://blog.twitter.com/engin....eering/en_us/topics/
Elon want's GPT-5 stopped https://youtu.be/TpZcGhYp4rw
🔥 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
- Is Twitter open-source?
- Controversial code inside twitter algorithm
- Elon Musk strategy to dominate the news media
- Twitter written with Scala and Java
Let's take a look at the most hyped up new technologies at CES 2024. Learn about the latest advancements in artificial intelligence and how they are being used used in modern consumer hardware.
#tech #ai #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
- CES conference https://www.ces.tech
- Rabbit R1 https://www.theverge.com/2024/....1/9/24030667/rabbit-
- AI Coding assistants https://youtu.be/7h732qLxtAk
🔥 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
- Top new tech at CES 2024
- CES announcements
- AI products at CES
- New automotive tech at CES
- What is the Rabbit R1?
- What is Ballie robot?
Learn how to collect payments from an API or SaaS product. In this tutorial, we build an Express.js API from scratch, then make money by integrating Stripe Metered Billing. https://fireship.io/lessons/ap....i-monetization-strip
#js #makemoney #code
🔗 Resources
Full Stripe JavaScript Course https://fireship.io/courses/stripe-js/
Stripe Billing https://stripe.com/docs/billin....g/subscriptions/mete
Source Code https://github.com/fireship-io..../api-monetization-de
RapidAPI approach: @aniakubow https://youtu.be/GK4Pl-GmPHk
📚 Chapters
00:00 Intro
00:37 How API Monetization Works
01:59 Build an API with Express
04:17 Metered Billing Products
05:17 Stripe Checkout
06:41 Listen to Webhooks
08:33 Generate API Keys
11:05 Record Usage
🔥 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
- Create custom API keys in node
- Node hashing crypto
- Stripe webhooks
- Metered billing for API
Learn how to use CSS pseudo-elements to style content that does not actually exist in your HTML, like ::before and ::after https://fireship.io/tags/css/
Also watch CSS pseudo-classes: https://youtu.be/kpXKwDGtjGE
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Figure AI recently demonstrated a new humanoid robot that is powered by OpenAI's GPT models. Take a first look at Figure 01 - an AI-powered robot that will eventually be deployed into the labor force.
#tech #ai #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Figure 01 Announcement https://www.figure.ai
Technical explanation https://twitter.com/coreylynch..../status/176792750633
Devin AI software engineer https://youtu.be/AgyJv2Qelwk
Open AI Sora https://youtu.be/tWP6z0hvw1M
🔥 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 does Figure 01 work?
- Latest advancements in robotics
- Can GPT-4 be combined with robots?
- When will robots destroy humanity
- World's most advanced robots
Sanity.io https://bit.ly/39lJ553 is the platform for structured content. The Content Lake, a real-time document store, gives you complete access and control over your content at any time and anywhere: from text and block content to files and images. Sanity Studio is an open-source application that you can configure and customize with JavaScript and React. You can use it to quickly and simply build your own CMS.
I collaborated with the team behind Sanity and you'll see Kapehe (https://twitter.com/kapehe_ok) from Sanity give a full breakdown for building your own project. By the end of this video, you'll have your own Sanity Studio and a Content Lake up and running to structure, interact, and query all of your content.
00:00 Content Platforms Explained in 100 seconds
02:00 Introducing Kapehe
05:49 Get started with Sanity
07:56 Understanding the code behind the Sanity Studio
09:45 Exploring the Sanity Studio
15:14 Query Content with GROQ
18:02 Schema Types
21:27 Deploy Sanity Studio
22:30 Previewing Realtime Changes
23:49 Congratulations you built your first Sanity project!
Your first look at Next.js version 12. It's packed with awesome new features, like a rust compiler, middleware, concurrent mode, server components, and more. Full course https://fireship.io/courses/react-next-firebase/
#js #react #firstlook
🔗 Resources
Announcement https://nextjs.org/blog/next-12
Full Course https://fireship.io/courses/react-next-firebase/
📚 Chapters
00:00 Next.js 12
46:00 Middleware
02:42 Suspense Support
03:16 Server Components
04:41 URL Imports
🔥 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
- Next.js 12 new features
- Rust compiler in Next.js
- Using suspense with Next.js
- React Server Components SSR
Learn the fundamentals of Computer Science with a quick breakdown of jargon that every software engineer should know. Over 100 technical concepts from the CS curriculum are explained to provide a foundation for programmers.
#compsci #programming #tech
🔗 Resources
- Computer Science https://undergrad.cs.umd.edu/what-computer-science
- CS101 Stanford https://online.stanford.edu/co....urses/soe-ycscs101-s
- Controversial Developer Opinions https://youtu.be/goy4lZfDtCE
- Design Patterns https://youtu.be/tv-_1er1mWI
🔥 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
Turning Machine
CPU
Transistor
Bit
Byte
Character Encoding ASCII
Binary
Hexadecimal
Nibble
Machine Code
RAM
Memory Address
I/O
Kernel (Drivers)
Shell
Command Line Interface
SSH
Mainframe
Programming Language
Abstraction
Interpreted
Compiled
Executable
Data Types
Variable
Dynamic Typing
Static Typing
Pointer
Garbage Collector
int
signed / unsigned
float
Double
Char
string
Big endian
Little endian
Array
Linked List
Set
Stack
Queue
Hash
Tree
Graph
Nodes and Edges
Algorithms
Functions
Return
Arguments
Operators
Boolean
Expression
Statement
Conditional Logic
While Loop
For Loop
Iterable
Void
Recursion
Call Stack
Stack Overflow
Base Condition
Big-O
Time Complexity
Space Complexity
Brute Force
Divide and conquer
Dynamic Programming
Memoization
Greedy
Dijkstra's Shortest Path
Backtracking
Declarative
Functional Language
Imperative
Procedural Language
Multiparadigm
OOP
Class
Properties
Methods
Inheritance
Design Patterns
Instantiate
Heap Memory
Reference
Threads
Parallelism
Concurrency
Bare Metal
Virtual Machine
IP Address
URL
DNS
TCP
Packets.
SSL
HTTP
API
Printers
Full Lesson https://angularfirebase.com/le....ssons/how-to-lazy-lo
Learn how to load components asynchronously with Angular Lazy Loading.
Get the source code on github https://github.com/codediodeio..../lazy-loading-angula
Make your code more concise and readable by learning destructuring assignment in JavaScript in 100 seconds https://fireship.io/courses/javascript/
#webdev #js #100SecondsOfCode
MDN Docs https://developer.mozilla.org/....en-US/docs/Web/JavaS
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
How will the Silicon Valley Bank failure affect software engineers and tech startups? Find out why SVB got into trouble and what it means for the average programmer.
#tech #svb #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Silicon Valley Bank News https://www.cnbc.com/2023/03/1....2/heres-what-could-h
USDC Depeg News https://www.forbes.com/sites/d....igital-assets/2023/0
Is coding really dead? https://youtu.be/Zs9Tifup1Bc
Tech Trends 2023 https://youtu.be/1v_TEnpqHXE
🔥 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 did SVB collapse?
- Simple explanation of Silicon Valley Bank failure?
- Will SVB customers get their money back?
- Why did USDC Depeg?
- Outlook of the tech Job Market
AI leaders met with U.S congress yesterday to discuss the risks that artificial intelligence pose to society and recommended that the government create a regulatory body for oversight. What does regulation mean for the future of GPT-4, Bard, and other popular AI products.
#ai #tech #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Full AI Regulation Meeting https://www.youtube.com/live/xS6rGBpytVY
Watch the full Raiden video by @ULTRATERM https://youtu.be/-gGLvg0n-uY
Follow Cybergem on Twitter https://twitter.com/UltraTerm
Petition to Stop AI Training https://youtu.be/TpZcGhYp4rw
🔥 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
- Sam Altman hearing with Senate
- Problems with AI
- Will the government control AI in the future
- Is AGI possible?
You probably know Redis as an ultrafast in-memory database, but can it also be used as your primary app database? This tutorial will teach you how to build a fullstack app from scratch with Redis and Next.js capable of performing fulltext instant search.
🤯 Get $200 and a chance to win a Tesla https://redis.info/fireship200
#database #tutorial #programming
🔗 Resources
Redis OM (NodeJS) - https://redis.info/3F9yqI5
Redis Insight - https://redis.info/3teM5LD
Redis Launchpad - https://redis.info/3HS9g2B
Redis Developer Hub - https://redis.info/3qg14mY
Full Tutorial - https://fireship.io/lessons/redis-nextjs/
📚 Chapters
00:00 What is Redis?
00:49 App tour
01:33 How to Install Redis Cloud
02:49 Redis Crash Course
04:10 Next.js Setup
05:32 Schema & Entity
06:41 CRUD Operations
09:14 Fulltext Search
🔥 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
- Redis as a Primary Database
- Use Redis with React or Next.js
- How Redis Modules work
- RedisSearch with RedisJSON
- Next.js API routes
- Handling Forms with React
Serverless Computing can dramatically simplify your backend infrastructure by eliminating the need to configure, maintain, and scale servers. Go beyond 100 seconds with @FilledStacks to build a production-ready backend with Firebase Cloud Functions.
Subscribe to FilledStacks 🔥👉 https://www.youtube.com/channe....l/UC2d0BYlqQCdF9lJfy
00:00 Serverless Explained
01:50 Build a Complex Cloud Functions Backend
Popular Serverless Solutions:
AWS Lambda https://aws.amazon.com/lambda/
Google Cloud Functions https://cloud.google.com/functions
Azure Functions https://azure.microsoft.com/en....-us/services/functio
#cloud #firebase #100SecondsOfCode
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Here's your first look at Solid Start, a meta-framework for Solid.js that supports server-side rendering and advanced data fetching. Learn how to build a full stack web application with a hot new tool that's similar to Next.js, SvelteKit, and Nuxt.
#programming #javascript #TheCodeReport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
SolidStart Announcement https://www.solidjs.com/blog/i....ntroducing-solidstar
Solid in 100 Seconds https://youtu.be/hw3Bx5vxKl0
Next.js 13 First Look https://youtu.be/_w0Ikk4JY7U
🔥 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 Solid.js?
- SSR with Solid.js
- Solid Start vs Next.js
- Solid Start vs SvelteKit
- Solid Start vs Nuxt
- What is the best JS framework?
Learn about the new Firestore "increment" field-value that can update a counter on the server atomically, with dramatically simplified code https://fireship.io/snippets/f....irestore-increment-t
- Increment blog post https://firebase.googleblog.co....m/2019/03/increment-
- Database Transactions https://firebase.google.com/do....cs/firestore/manage-
Learn 10 essential math concepts for software engineering and technical interviews. Understand how programmers use mathematics in fields like AI, game dev, crypto, machine learning, and more.
#math #programming #top10
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Computer Science 101 https://youtu.be/-uleG_Vecis
Cryptography for Developers https://youtu.be/NuyzuNBFWxQ
Technical Interview Prep https://youtu.be/1t1_a1BZ04o
📚 Chapters
🔥 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
- Do programmers need math?
- Math tutorial for programming
- Machine learning math
- Do computer hackers use math?
- Linear algebra for programmers
- Boolean Algebra explained
- Combinatorics explained
- How does Big-O notation work
Today over 7,000 subreddits have gone private in protest of the new controversial pricing of Reddit's API. Learn how big tech companies leverage their platforms in ways that can ruin 3rd party apps.
#tech #reddit #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Apollo Reddit API Controversy https://www.reddit.com/r/apoll....oapp/comments/13ws4w
The Art of the Side Hustle https://youtu.be/A4_TFHzqAAg
What is an API https://youtu.be/-MTSQjw5DrM
🔥 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
- Reddit API controversy explained quickly
- Why are people protesting reddit?
- Big tech platform risk to software developers
- Why did Reddit go dark?
- Which VCs and investors are behind reddit?
Google's new LLM and ChatGPT competitor Gemini has faced some backlash after it's demo video was revealed to be highly edited. Learn about the latest Gemini drama and take a closer look at its benchmarks.
#ai #google #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Gemini Prompting https://developers.googleblog.....com/2023/12/how-its-
Hands on Demo https://youtu.be/UIZAiXYceBI
Gemini First Look https://youtu.be/q5qAVmXSecQ
🔥 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
- Gemini AI controversy
- Was Google Gemini video fake?
- When will Google Gemini Ultra come out
- ChatGPT vs Google Gemini
- GPT-4 vs Gemini benchmarks
- Google Deep Mind advancements
Mark Zuckerberg delivered a brutal review of the Apple Vision Pro from his couch, claiming Meta's Quest 3 is a superior mixed reality product. Let's look at everything the haters are saying is wrong with Apple Vision Pro.
#tech #applevisionpro #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Zuck's Apple Vision Pro Review https://twitter.com/pitdesi/st....atus/175755201704274
Tech Trends 2024 https://youtu.be/vyQv563Y-fk
Apple Vision Pro First Look https://youtu.be/Uc6lM1Aig9c
🔥 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
- Apple Vision Pro Review
- Mark Zuckerberg thoughts on VR/AR
- Why do people hate Apple Vision Pro
- Is Apple vision pro worth it?
- Apple vision pro memes
GitHub Copilot X was announced yesterday and it has an impressive set of new AI coding features. Learn how Microsoft is bringing ChatGPT features directly into your code editor.
#ai #programming #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Copilot X Announcement https://github.blog/2023-03-22....-github-copilot-x-th
GPT-4 first look https://youtu.be/EunbKbPV2C0
Is coding really dead? https://youtu.be/Zs9Tifup1Bc
🔥 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
- Top 5 features in Copilot X
- Using your voice to write code
- Microsoft's AI business strategy
- What's new in GitHub CopilotX?
- Does Copliot use GPT-4?
- When will Copilot X come out?
Vercel just introduced 4 new storage products, including a serverless Postgres database, a durable Redis store, and file uploads with CloudFlare R2. They also leaked some details about a new server actions feature for Next.js
#webdevelopment #database #thecodereport
🔥 Get the new Next.js 13 Full Course
Upgrade at https://fireship.io/courses/nextjs
Use code NEXT30 for 30% off PRO access
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Vercel Storage Announcement https://vercel.com/blog/vercel-storage
Next13 Report https://youtu.be/_w0Ikk4JY7U
Next13 Course https://fireship.io/courses/nextjs
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- Does Vercel offer a database?
- Vercel Postgres basics
- Vercel KV basics
- Alternatives to AWS S3 file storage
- New Next.js Features
- Next.js server actions
2022 was a crazy year. Let’s take a look at 10 tech trends and how they will affect software engineers going into the year 2023.
#tech #programming #top10
🔗 Resources
Take the state of JS survey https://stateofjs.com/en-us/
2022 Trends from Last year https://youtu.be/LOpFYMPXqE4
Design trends from @DesignCourse https://youtu.be/4BEEoYYDmUg
💬 Chat with Me on Discord
https://discord.gg/fireship
🔥 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
- Tech Job Market in 2023
- Will crypto recover in 2023?
- Trends in technology for developers
- Web design trends
- Best JS frameworks
- Trends in AI and machine learning
- Will ChatGPT replace programmers?
Meta just released the world's most powerful open-source LLM...Llama2. Let's see how it stacks open to OpenAI's GPT-4 and Google's PaLM models.
#ai #tech #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
Llama 2 https://ai.meta.com/llama
Llama on GitHub https://github.com/facebookresearch/llama
ChatGPT paper https://arxiv.org/abs/2307.09009
ChatGPT code interpreter https://youtu.be/p6Yw0Bx5dbw
🔥 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 Meta's Llama 2
- Llama2 compared to ChatGPT
- Best open source LLMs
- Latest news in artificial intelligence
- Safety features of AI chatbots
Learn how the billion dollar startup IRL faked millions of users to raise money from venture capitalists. This scam is not is an isolated incident and other high-profile startups have been caught faking engagement.
#tech #business #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
IRL Shutdown https://www.irl.com
Chirper AI Social Media site https://chirper.ai/
How to start a profitable side hustle https://youtu.be/A4_TFHzqAAg
🔥 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 programmers and app developers can grow a user base quickly
- Growth hacking tips
- Why did IRL shut down?
- Is it illegal to create fake users?
- What is click farming?
- How venture capitalists get scammed
- Softbank Vision Fund failures
The JavaScript Survival Guide 🧟 provides protection from the so-called "weird" features that you will encounter as a JS developer. This primer will introduce you to variables, functions, objects, closures, hoisting, this-binding, and more. https://fireship.io/courses/javascript/
#javascript #tutorial
Primary source: https://developer.mozilla.org
Take the quiz 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
Learn how build a fullstack realtime chat app with Svelte and Pocketbase, then deploy it to a Linux server for just $5. Let's find out if the Spock stack can scale...
💵 Get started with Linode at https://www.linode.com/fireship ($100 Credit good for 60 days as a new user)
#webdevelopment #project #linux
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
- Chat App Live Demo https://pocketchat.fireship.app
- Fireship Pocketbase Tutorial https://fireship.io/lessons/pocketbase-chat-app
- Full Source Code https://github.com/fireship-io/pocketchat-tutorial
- Pocketbase Docs https://pocketbase.io/
- Pocketbase First look https://youtu.be/Wqy3PBEglXQ
🔥 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
- Build an app with Svelte
- What is Pocketbase?
- Can Pocketbase scale?
- Deploying Pocketbase to Linode
Meta announced layoffs of 11,000 employees today, just one week after Twitter implemented a massive layoff. How will this news affect FAANG hiring and tech jobs for programmers in the future?
#tech #meta #TheCodeReport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
How to get a Tech Job https://youtu.be/Xg9ihH15Uto
Meta Layoffs https://www.nytimes.com/2022/1....1/09/technology/meta
Hiring freezes https://www.foxbusiness.com/ec....onomy/big-tech-brace
🔥 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
- Meta layoffs
- Tech hiring trends in 2023
- How to get hired by FAANG
- Which companies have hiring freezes?
- Which tech companies have layoffs?
- How to get a programming job in 2023?
Learn how to build a web scraper ⛏️ with NodeJS using two distinct strategies, including (1) a metatag link preview generator and (2) a fully-interactive bot for Instagram. https://fireship.io/lessons/web-scraping-guide/
1. Build a simple link preview scraper with Cheerio.
https://github.com/cheeriojs/cheerio
2. Build an interactive Instagram scraper with puppeteer.
https://github.com/GoogleChrome/puppeteer
#javascript #nodejs #webdev
Take the quizzes 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
Let's take a look at the Coalition for Content Provenance and Authenticity or C2PA and its mission to curb disinformation. Learn how future platforms may use cryptography to validate the origin of media and detect AI generated images.
#tech #ai #thecodereport
💬 Chat with Me on Discord
https://discord.gg/fireship
🔗 Resources
C2PA spec https://c2pa.org
C2PA discussion https://twitter.com/UltraTerm/....status/1679294173793
Greta's Oil Company https://youtu.be/iTkhB4VTm1E
Honeypot Documentary https://youtu.be/XRoSBWYMefY
🔥 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
- Adobe Senate hearing
- How to detect AI generated content
- What is C2PA?
- How does C2PA work?
- Efforts to stops deep fakes
- Generative AI problems
Five easy ways to automate 🤖 your software development process with Github Actions. Lean how to build CI/CD pipelines and other awesome DevOps workflows.
- Special Thanks to Marc Stammerjohann for the Firebase Github Action Guide https://fireship.io/snippets/g....ithub-actions-deploy
- Demo Code https://github.com/fireship-io..../225-github-actions-
- Github Actions https://github.com/features/actions
#devops #github #tutorial
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
TypeScript has forever altered the lives of JavaScript developers. Learn why TS is so awesome and the basic concepts required to be successful using it https://angularfirebase.com/typescript-the-basics/
Deep Dive https://github.com/basarat/typescript-book
TypeScript Docs https://www.typescriptlang.org/
First look at Bun - a fast new JavaScript runtime like Node.js or Deno. Explore the core features of Bun.js and how they might affect fullstack web developers in the future.
#javascript #firstlook #TheCodeReport
🔗 Resources
Bun.js Announcement https://bun.sh
Bun on Github https://github.com/Jarred-Sumner/bun
How JavaScript Works https://youtu.be/FSs_JYwnAdI
📚 Chapters
🔥 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 a JavaScript runtime?
- How do JavaScript engines work?
- Why is Bun so fast?
- What is the Zig Programming language?
- Bun.js vs Node
- Bun.js vs Deno
- Native Typescript with Bun
Setup the ultimate Web Development environment with Windows and Linux 🐧 using WSL. Make the command line look cool, then add node, git, docker, and more. https://fireship.io/lessons/wi....ndows-10-for-web-dev
#webdev #windows #linux
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
The programming iceberg is complete roadmap to the loved, hated, historical, and weird programming languages that you should now about. It starts with easy-to-learn coding tools, then descends into the most difficult low-level and esoteric languages.
Featuring C, C++, C#, F#, HolyC, C--, Java, JavaScript, Python, Rust, Fortran, Lisp, V, Nim, Zig, APL, Ada, COBOL, Haskell, Scala, Clojure, Kotlin, Swift, Lua, PHP, Elixir, Erlang, Chef, Malbolge, lolcode, emojicode, ASM and many more!
#programming #iceberg #learntocode
🔗 Resources
Programming Iceberg Meme https://twitter.com/programwit....habhi/status/1562476
History of Computer Languages https://en.wikipedia.org/wiki/....History_of_programmi
BrainF**K in 100 Seconds https://youtu.be/hdHjjBS4cs8
C in 100 Seconds https://youtu.be/U3aXWizDbQ4
🔥 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
- History of Programming Languages
- Programming Humor Memes
- Developer Roadmap for 2022
- What are programming languages used for?
- Most popular programming languages
- Which language is best to learn to code?
- How many programming languages are there?
Which serverside web framework is the best? To find out, I built the same app 10 times with 10 different programming languages.. Learn the fundamentals of fullstack web development by comparing MVC frameworks.
#webdev #programming #top10
🔗 Resources
Ruby on Rails https://rubyonrails.org/
Python Django https://djangoproject.com
PHP Laravel https://laravel.com/
Java Spring https://spring.io/
C# .NET https://dotnet.microsoft.com/en-us/apps/aspnet
Next.js https://nextjs.org/
Elixir Phoenix https://phoenixframework.org/
Rust Rocket https://rocket.rs/
Go Gin https://gin-gonic.com/
Swift Vapor https://vapor.codes/
Kotlin Ktor https://ktor.io/
📚 Chapters
00:00 I Built 10 Fullstack Apps
01:04 MVC Architecture Explained
01:39 Rails
03:58 Django
05:14 Laravel
06:32 Next
08:23 Spring
09:25 .NET
10:36 Phoenix
11:27 Gin
12:25 Rocket
13:13 Vapor
13:52 Ktor
14:01 The GOAT
🔥 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
- Comparison of server-side frameworks
- How to build a fullstack web app
- Best way to build a web application
- Comparison of web development tools
Learn how to use Git and Github 🐙🐱 in this interactive tutorial by sending a pull request to this repo in exchange for a free AngularFirebase sticker 🔥https://github.com/codediodeio/gimmie-sticker
- PRO https://angularfirebase.com/pro
- Atlassian https://www.atlassian.com/git/tutorials
Learn how the central processing unit (CPU) works in your computer. Compare performance and processor architecture between the Intel and Apple Silicon M1 chips with @AZisk
#compsci #tech #100SecondsOfCode
🔥 Subscribe to Alex's Channel 🔥
https://www.youtube.com/channe....l/UCajiMK_CY9icRhLep
🔗 Resources
Apple Silicon Breakdown https://www.macrumors.com/guide/apple-silicon/
Visual CPU http://visual6502.org/
Clock Speed https://www.intel.com/content/....www/us/en/gaming/res
📚 Chapters
00:00 How a CPU Works
01:06 Instruction Cycle
02:25 Apple M1 vs Intel i9
06:10 Performance Benchmarking
9:06 Best Dev Stacks for M1
10:12 Worst Stacks for M1
11:55 Final Summary
🔥 Watch more with Fireship 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
In this episode we take a look at the basic concepts behind components, pipes, and directives in Angular 6. https://angularfirebase.com/le....ssons/angular-compon
- Router Basics https://angularfirebase.com/le....ssons/basics-angular
- CLI Basics https://angularfirebase.com/le....ssons/basics-angular
- Angular Components https://angular.io/guide/architecture-components
Part five of the full #JavaScript course 🐇🕳️. Learn everything you need to know about the JS Object https://fireship.io/courses/javascript/
Topics covered include:
- Object creation
- Bracket vs Dot Notation
- Property descriptors
- How object references work
- Prototype chain
- Modern syntax like spread and destructuring
- Loop over objects
- Custom object constructors
MDN Object Docs https://developer.mozilla.org/....en-US/docs/Web/JavaS
Take the #JS quiz 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
Upgrade to Fireship PRO at https://fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
What is an API? What is REST? Learn how an Application Programming Interface (API) can adhere to Representational State Transfer (REST) to enable reliable communication between apps https://fireship.io/tags/node/
👕 Best comment wins a free T-shirt (read fine print at end of video)
Open API Spec https://swagger.io/specification/
Request Methods https://developer.mozilla.org/....en-US/docs/Web/HTTP/
#api #js #100SecondsOfCode
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
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
React hooks provide a highly-efficient was to tap into framework features and organize reactive logic. Learn how use every built-in React hook https://fireship.io/courses/react-next-firebase/
00:00 Why React Hooks?
02:20 useState
03:50 useEffect
05:55 useContext
06:58 useRef
07:58 useReducer
09:27 useMemo
10:12 useCallback
10:40 useImperativeHandle
11:18 useLayoutEffect
11:43 useDebugValue & Custom Hooks
#webdev #js #react
Install the quiz app 🤓
iOS https://itunes.apple.com/us/ap....p/fireship/id1462592
Android https://play.google.com/store/....apps/details?id=io.f
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
Could JavaScript have its own native type system like TypeScript in the future? The team behind TS has submitted an ECMAScript TC39 proposal that seeks to add "Types as Comments" to JS.
#js #webdev #TheCodeReport
🔗 Resources
JS Types Blog Post https://devblogs.microsoft.com..../typescript/a-propos
TC39 Proposal https://github.com/giltayar/pr....oposal-types-as-comm
History of JavaScript https://youtu.be/Sh6lK57Cuk4
React 18 https://reactjs.org/blog/2022/....03/08/react-18-upgra
M1 Mac Studio https://www.apple.com/mac-studio/
🔥 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
- News about new JS features
- Native JS type system
- How TC39 works
- React 18 release candidate
- Apple Mac Studio M1 Ultra
