Beyond Fireship
Beyond Fireship
  • 39
  • 12 516 749
Build better payment forms using new “embedded” Stripe Checkout
Learn how to use the new embedded Stripe Checkout feature to easily accept payments without ever leaving your own website. Learn everything about payments for software developers in my new Stripe for SaaS featuring Next.js and Supabase:
Stripe for SaaS: fireship.io/courses/stripe-saas/
And use code BEYOND30 to save some money!
Full Tutorial and Code: fireship.io/courses/stripe-saas/bonus-embedded-checkout/
Переглядів: 142 222

Відео

GitHub Copilot now controls your command line...
Переглядів 293 тис.Місяць тому
Learn how to become a Bash or PowerShell guru by using GitHub Copilot in the CLI. This new feature is a great way to learn Linux and Git commands without ever leaving your IDE. Check out the Fireship VS Code course fireship.io/courses/vscode-tricks/ GitHub copilot in the CLI github.blog/changelog/2024-03-21-github-copilot-general-availability-in-the-cli FFmpeg in 100 Seconds ua-cam.com/video/26...
How I deploy serverless containers for free
Переглядів 377 тис.2 місяці тому
Build a Python Flask app for removing the background from images, containerize it with Docker, then deploy it with serverless cloud tools. Watch Docker 101 ua-cam.com/video/rIrNIzy6U_g/v-deo.html Source Code github.com/codediodeio/rembg-webapp-tutorial
This UI component library is mind-blowing
Переглядів 538 тис.2 місяці тому
Let's explore a free open-source UI library that replicates advanced animations found on the landing pages of top-tier startups. Learn how to code advanced components in React and other JavaScript frameworks. Aceternity Components ui.aceternity.com/components ShadCN ui.shadcn.com/ Parallax Tutorial ua-cam.com/video/UgIwjLg4ONk/v-deo.html Fireship Next.js Course fireship.io/courses/nextjs/
I built an Apple Vision Pro app... visionOS tutorial
Переглядів 523 тис.2 місяці тому
Learn the basics of VisionOS development for the Apple Vision Pro. I build a simple app from scratch using SwiftUI and RealityKit to build an app for Apple's new VR/AR platform. Upgrade to PRO fireship.io/pro VisionOS Docs developer.apple.com/documentation/visionos Apple Vision Code Report ua-cam.com/video/DuqLkG75BE8/v-deo.html
Mind-blowing page animations are easy now... View Transitions API first look
Переглядів 235 тис.9 місяців тому
Learn about the new View Transitions API in Astro and how it can add awesome route animations to your website. #webdevelopment #javascript #code Upgrade to Fireship PRO fireship.io/pro View Transitions API docs.astro.build/en/guides/view-transitions/ SvelteFire Docs sveltefire.fireship.io I built a JS framework ua-cam.com/video/SJeBRW1QQMA/v-deo.html
PROOF JavaScript is a Multi-Threaded language
Переглядів 258 тис.9 місяців тому
Learn the basics of parallelism and concurrency in JavaScript by experimenting with Node.js Worker Threads and browser Web Workers. #javascript #programming #computerscience Upgrade to Fireship PRO fireship.io/pro Node.js Worker Threads nodejs.org/api/worker_threads.html Check out @codewithryan ua-cam.com/video/_Im4_3Z1NxQ/v-deo.html
How GitHub Actions 10x my productivity
Переглядів 380 тис.9 місяців тому
Learn how to use GitHub actions continuous integration and delivery in a software development project. In this quick tutorial, we look at 7 powerful ways to automate code with CI/CD. #programming #automation - My GitHub Actions in SvelteFire github.com/codediodeio/sveltefire - GitHub Actions Docs github.com/features/actions - act cli github.com/nektos/act
React VS Svelte...10 Examples
Переглядів 508 тис.10 місяців тому
The ultimate guide to Svelte for React.js Developers with 10 code examples for both JavaScript frameworks. Find out if SvelteKit is better than Next.js... SvelteKit Course fireship.io/courses/sveltekit Next.js 13 Course fireship.io/courses/nextjs Full Svelte vs React Article fireship.io/lessons/svelte-for-react-developers/ #javascript #webdevelopment #programming
I built a *streaming* AI chat app
Переглядів 120 тис.11 місяців тому
Learn how to use the new Vercel AI SDK to quickly build streaming AI chat apps with APIs like OpenAI, Anthropic, HuggingFace, LangChain, and more. Upgrade to get the full SvelteKit Course at fireship.io/pro Use promo code FKIT to save 35% Vercel AI Announcement vercel.com/blog/introducing-the-vercel-ai-sdk
I tried 8 different Postgres ORMs
Переглядів 378 тис.11 місяців тому
Let's compare 8 ways to work with SQL databases in a JavaScript project like Node.js or Next.js. Analyze the pros and cons of libraries and ORMs that can run Postgres queries in a fullstack framework. #sql #javascript #webdevelopment Learn more in full Next 13 Course fireship.io/courses/nextjs/ - pg github.com/brianc/node-postgres - postgres.js github.com/porsager/postgres - knex github.com/kne...
Most overpowered way to build mobile apps?
Переглядів 687 тис.Рік тому
Learn how to use FlutterFlow to build iOS and Android apps quickly. It is a low-code Flutter tool with integrations for Firebase that rapidly speed up mobile development. #android #flutter #firebase Use FlutterFlow for free bit.ly/3Ia8UXv Flutter Docs docs.flutter.dev Fireship Flutter Course fireship.io/courses/flutter-firebase/
I built a fullstack PaLM AI app in just 2 minutes
Переглядів 175 тис.Рік тому
Learn how to use Google's new PaLM 2 AI model with Firebase and SvelteKit. In this tutorial, we build and deploy a fullstack LLM-powered application in just 2 minutes. Firebase Updates firebase.blog/posts/2023/05/whats-new-at-google-io Google I/O breakdown ua-cam.com/video/nmfRDRNjCnM/v-deo.html Terraform in 100 Seconds ua-cam.com/video/tomUWcQ0P3k/v-deo.html #webdevelopment #ai #tutorial
The ultimate guide to web performance
Переглядів 393 тис.Рік тому
Learn how to analyze and optimize the performance of any website. In this tutorial, we explore tips and tricks to build faster UIs that are ideal for search engine optimization. #webdevelopment #javascript #css 🔥 Become a PRO member fireship.io/pro 💵 Use code BEYOND25 to save 25% Unlighthouse github.com/harlan-zw/unlighthouse Web Vitals Plugin web.dev/debug-cwvs-with-web-vitals-extension/
Next.js Server Actions... 5 awesome things you can do
Переглядів 246 тис.Рік тому
A full tutorial and breakdown of the new Next.js Server Actions feature. Learn how to handle form submissions and implement optimistic updates without the need to API routes. #reactjs #javascript #webdevelopment Get the Full Next.js Course fireship.io/courses/nextjs Server Actions Announcement nextjs.org/blog/next-13-4
Industrial-scale Web Scraping with AI & Proxy Networks
Переглядів 687 тис.Рік тому
Industrial-scale Web Scraping with AI & Proxy Networks
I built an image search engine
Переглядів 282 тис.Рік тому
I built an image search engine
ChatGPT Official API First Look
Переглядів 419 тис.Рік тому
ChatGPT Official API First Look
Sorting Algorithms Explained Visually
Переглядів 502 тис.Рік тому
Sorting Algorithms Explained Visually
You don't need Node to use NPM packages
Переглядів 149 тис.Рік тому
You don't need Node to use NPM packages
10 Rendering Patterns for Web Apps
Переглядів 319 тис.Рік тому
10 Rendering Patterns for Web Apps
The easiest realtime app I’ve ever built
Переглядів 181 тис.Рік тому
The easiest realtime app I’ve ever built
Dramatically improve website speed with Partytown
Переглядів 168 тис.Рік тому
Dramatically improve website speed with Partytown
How to Setup Node.js with TypeScript in 2023
Переглядів 359 тис.Рік тому
How to Setup Node.js with TypeScript in 2023
Make Crazy Art with the NEW OpenAI Dall-e API
Переглядів 164 тис.Рік тому
Make Crazy Art with the NEW OpenAI Dall-e API
Next.js 13 - The Basics
Переглядів 601 тис.Рік тому
Next.js 13 - The Basics
NEW Firebase Features Just Dropped
Переглядів 119 тис.Рік тому
NEW Firebase Features Just Dropped
WTF are all these config files for?
Переглядів 173 тис.Рік тому
WTF are all these config files for?
Generate Images Programmatically on the Edge
Переглядів 142 тис.Рік тому
Generate Images Programmatically on the Edge
Reverse Engineer Google’s NASA Dart Easter Egg with CSS
Переглядів 89 тис.Рік тому
Reverse Engineer Google’s NASA Dart Easter Egg with CSS

КОМЕНТАРІ

  • @DerTechNick
    @DerTechNick 22 години тому

    well, all of this stuff is not available for angular so i do not even bother

  • @GojoSatoru-us5ui
    @GojoSatoru-us5ui 2 дні тому

    have you heard about HextaStudio's HextaUI? People are using it wondering what would be your opinion 🤔

  • @yvonneyiu5485
    @yvonneyiu5485 2 дні тому

    im the average lazy af programmer so just gimme a copy and paste in description

  • @Tarun-et3mx
    @Tarun-et3mx 2 дні тому

    Waiting for firebase videos😊

  • @muhammadfahad3483
    @muhammadfahad3483 3 дні тому

    Will this run in parallel or concurrent?

  • @deathrace-bx5ne
    @deathrace-bx5ne 3 дні тому

    In what category does Blazor Hybrid comes here?

  • @grasomedia
    @grasomedia 3 дні тому

    i really cant get ride of the show class where should i place the show class on my html

  • @amandin.
    @amandin. 4 дні тому

    vim mentioned

  • @MattWyskiel
    @MattWyskiel 4 дні тому

    The scream I just screampt in my (parked!!) car when the source of the MacBook was revealed

  • @WantedDead
    @WantedDead 4 дні тому

    wheres the typescript 5 course you said was coming ?

  • @REDULE26
    @REDULE26 4 дні тому

    You are fantastic, I learned more about sveltekit + openai in 4mins than I did in 1month x)

  • @User-vx2jd
    @User-vx2jd 4 дні тому

    I would also recommend you to explain merge heap in your video.

  • @User-vx2jd
    @User-vx2jd 4 дні тому

    The explanation was on point. you did miss out talking about run time of all sorting methods after selection sort.

  • @simonss13
    @simonss13 5 днів тому

    Thanks man, I've been trying to conceptually sort out the redirect_url property when creating the session object server-side for a hot minute. If anyone else is looking for it, it's at 2:49

  • @laughingvampire7555
    @laughingvampire7555 7 днів тому

    react had nothing to do with smartphones dude, we spend quiet a few years on rails and jquery making great mobile compatible websites, no one ever complained about the rerendering time. react appeared because of update loops in double binding variables in some of the state frameworks for jquery. and react was a library that could be added for a single component in a jquery soup. SPAs came as a reaction against the jquery soup, the idea of one framework to rule them all tags. was a reaction from the first react and angular.js community against the horrible experience of working with jquery soups, however jquery is still the great majority of the web. React became popular when the Wix team, famously known for not using a framework started to use react. However, the corporate world was already using SPAs with Sencha formerly known as Ext.js and Dojo Toolkit which had components, a little too clunky but it was an already full framework designed like GUI libraries of desktop applications.

  • @ombhandari6148
    @ombhandari6148 7 днів тому

    Now if I want to host backend then I will only host that dist folder , am I right..?

  • @draco_2727
    @draco_2727 7 днів тому

    Basically when this update came out was that they discovered Layouts (I've been using that since years ago in Vue) 😹 jokes aside, One of the key development principles is to avoid "magic" and this has too much magic underneath.

  • @usernameusernameusername12
    @usernameusernameusername12 7 днів тому

    Can i use all this in a proyect with no framework?

  • @CardinalHijack
    @CardinalHijack 7 днів тому

    Is it an issue that almost all of their components, even text ones, are "use client"?

  • @jairoquilumbaquin5014
    @jairoquilumbaquin5014 8 днів тому

    Its something like NetBeans with swing forms for java??

  • @monterraythehomeless
    @monterraythehomeless 8 днів тому

    Insertion sort: *pewpew*

  • @user-ml1wj9qf9f
    @user-ml1wj9qf9f 8 днів тому

    “dozens of dollars” 😆

  • @laurensholthof
    @laurensholthof 8 днів тому

    The content field is always empty for some reason?

  • @mvargasmoran
    @mvargasmoran 9 днів тому

    Well, Svelte 5, the latest, is basically React. I feel betrayed

  • @poorusher
    @poorusher 9 днів тому

    Just wait til Svelte/Wasabi drops

  • @dustsucker4704
    @dustsucker4704 10 днів тому

    In svelte you can us components as props with <svelte:component> but I would not recomend it it's just not Designed that way

  • @Hobnockers
    @Hobnockers 10 днів тому

    Does Apple Vision Pro come with a default app to load or import 3d models and PBR-materials? A default 3d viewer?

  • @igor9silva
    @igor9silva 10 днів тому

    Spent 5 minutes exploring, found a bug on a component, thought of a solution through the in-doc code, just to find out it's not even open-source lol

  • @googleyoutubechannel8554
    @googleyoutubechannel8554 10 днів тому

    You have to use the arrow keys in the terminal to run any of the suggested commands?! You have to f-ing kidding me, who designed the UI for this garbage and why don't they understand the most basic fundamentals about the CLI??

  • @edigunawan2991
    @edigunawan2991 11 днів тому

    does svelte close to laravel livewire? because i see similarity here

  • @dev-suresh
    @dev-suresh 11 днів тому

    The video could be better if you've explained it visually rather than coding.

  • @rj3654
    @rj3654 11 днів тому

    2:26 (͠≖ ͜ʖ͠≖)

  • @backstromforsberg
    @backstromforsberg 11 днів тому

    pg or prisma for me. I've used pg a ton and love it, but something tells me prisma would save me a lot of time. For an ORM to be worth it, it really should be something like prisma. Think I'm gonna try it out.

  • @spacepacehut3265
    @spacepacehut3265 12 днів тому

    anyways what's the file icon pack Jeff is using ?

  • @younes-47
    @younes-47 13 днів тому

    Then you have to deal with the villain : Responsiveness 😂

  • @bogdanpustai7547
    @bogdanpustai7547 13 днів тому

    note: i had to tag like so: docker push [REPO_FULL_URL]/imageName and then push like so docker push [REPO_FULL_URL]/imageName. after installing gcloud and setting the path to the bin folder in env variables

  • @guijoa123
    @guijoa123 13 днів тому

    Hey, I've followed everything accordingly and the form doesn't create no record on the DB, I've configured insomnia just the same as the await fetch and I'm able to do it through there, but on the code it doesn't work

  • @Cloudland117
    @Cloudland117 13 днів тому

    Anyone else feel dumb?

  • @rezarst5734
    @rezarst5734 14 днів тому

    thanks, it was useful

  • @amirt825
    @amirt825 14 днів тому

    This is how I did it a few weeks ago on a project, funny this comes on my feed now. Mine doesn't just rotate the pupils, it moves them relative to the distance of the cursor so the pupil is in the center when you hover on the eye and the movement is much more natural. A little more trig, but that's what chatGPT is for: <!-- The face and its tracking eyes --> <div id="face" class="w-[60vw] md:w-[40vw] relative"> <img src="/tpe/face-eyes.svg" class="h-full w-full object-contain object-top" /> <img src="/tpe/pupil.svg" class="pupil absolute w-[10%] top-[2.5%] right-[23.5%]" /> <img src="/tpe/pupil.svg" class="pupil absolute w-[10%] top-[15%] right-[63%]" /> <img src="/tpe/pupil.svg" class="pupil absolute w-[10%] top-[33%] right-[7.3%]" /> <img src="/tpe/pupil.svg" class="pupil absolute w-[10%] top-[45.5%] right-[47%]" /> <img src="/tpe/pupil.svg" class="pupil absolute w-[10%] top-[64%] right-[24%]" /> </div> <!-- Follow the cursor with the Eyes --> <script type="module" is:inline> const face = document.querySelector('#face'); const pupils = document.querySelectorAll('.pupil'); const rect = face.getBoundingClientRect(); document.addEventListener('mousemove', function(e) { pupils.forEach(pupil => { const pupilRect = pupil.getBoundingClientRect(); const centerX = pupilRect.left + pupilRect.width / 2 - rect.left; const centerY = pupilRect.top + pupilRect.height / 2 - rect.top; const x = e.clientX - rect.left - centerX; const y = e.clientY - rect.top - centerY; const angle = Math.atan2(y, x); const maxDistance = rect.width * 0.018; const actualDistance = Math.sqrt(x * x + y * y); const distance = Math.min(maxDistance, maxDistance * (actualDistance / rect.width)); const pupilX = distance * Math.cos(angle); const pupilY = distance * Math.sin(angle); pupil.style.transform = `translate(${pupilX}px, ${pupilY}px)`; }); }); </script>

  • @MoussaBabadi
    @MoussaBabadi 14 днів тому

    You are a fool.. how do you think some one Can easily learn something with this shit type of vidéo..

  • @TheFumesPlatform-ko1il
    @TheFumesPlatform-ko1il 14 днів тому

    They should just put this video in the docs and save everyone some time.

  • @horrorcoder
    @horrorcoder 15 днів тому

    still overly complicated

  • @JesseSlomowitz
    @JesseSlomowitz 15 днів тому

    There is a dedicated SurrealDB GUI now too: ua-cam.com/video/l0_lj-ILVhE/v-deo.html

  • @nerik85
    @nerik85 16 днів тому

    that was a packed 5mins :)

  • @londelidess
    @londelidess 17 днів тому

    Life is more fun when it’s unreasonable loooooool

  • @NirBarZvi
    @NirBarZvi 17 днів тому

    CHILDREN

  • @ChristianeLamper
    @ChristianeLamper 18 днів тому

    It is not free all because google cloud will charge other something when you use cloud run

  • @adrielmwofoh9111
    @adrielmwofoh9111 18 днів тому

    Hey jeff, cool video, Straight and concise. Thanks man.

  • @HudraLoLhorizons
    @HudraLoLhorizons 18 днів тому

    oh... my... god...