Generate Images Programmatically on the Edge

  Рет қаралды 144,536

Beyond Fireship

Beyond Fireship

Күн бұрын

Пікірлер: 146
@Exilum
@Exilum 2 жыл бұрын
One day someone needs to create a wizard tool to figure out what framework and libraries to use depending on what you need to do. How awesome would it be to get from thousands of possibilities to a few and picking the one you're the most familiar with.
@themisir
@themisir 2 жыл бұрын
The tool would become deprecated a minute after being published by not being able to catch up to the speed of js ecosystem evolution.
@faceboy1392
@faceboy1392 2 жыл бұрын
@@themisir a new javascript framework every hour
@keent
@keent Жыл бұрын
i will make a JS framework that does exactly this, determines what framework to use. Honestly that's genius...
@Exilum
@Exilum Жыл бұрын
@@keent I wish I could put a Jeremy Clarkson clip there.
@tnvmadhav2442
@tnvmadhav2442 2 жыл бұрын
I built this for myself and now happy that there’s now a faster implementation 😅
@louiscassany
@louiscassany 2 жыл бұрын
Another piece of gold, nice work man!
@0x5DA
@0x5DA 2 жыл бұрын
a video on fleet please!
@jordanmckoy1935
@jordanmckoy1935 2 жыл бұрын
I second this tried it out and I LOVE the UI
@bigboyballer4204
@bigboyballer4204 2 жыл бұрын
@@jordanmckoy1935 love the git integration
@0x5DA
@0x5DA 2 жыл бұрын
@@jordanmckoy1935 ikr! quick to boot also, and the language integration feels really awesome
@MH_VOID
@MH_VOID 2 жыл бұрын
Please no. It currently is unethical and they do not plan to change that. Don't draw any attention to the abomination
@phucnguyen0110
@phucnguyen0110 2 жыл бұрын
@@MH_VOID wdym?
@husseinkizz
@husseinkizz 2 жыл бұрын
I sometimes think this guy is a sorcerer, how does he digest new tech that quick and sell it to us in an undeniable fashion???
@husseinkizz
@husseinkizz 2 жыл бұрын
yep we got em!
@StephenGillie
@StephenGillie 2 жыл бұрын
The real magic here is the JSX to SVG library. The rest is just routing.
@sharbelokzan9673
@sharbelokzan9673 2 жыл бұрын
"Fleet, VSCode killer?" Really like to see that as a video title ;)
@JaimitoAleman
@JaimitoAleman 2 жыл бұрын
Fleet does not intend to be a VS Code Killer. They are just expanding their software line-up. VS Code will always be free, but Fleet will NOT!
@JaimitoAleman
@JaimitoAleman 2 жыл бұрын
BTW: GREAT software will always have a value - thus JetBrains will not release Fleet as free, because that is not its "market niche".
@JorgetePanete
@JorgetePanete 2 жыл бұрын
​@@JaimitoAleman "great __ will always have a value" is a flawed vision of a good future
@heroe1486
@heroe1486 2 жыл бұрын
@@JorgetePanete Not like vim and Emacs and derivatives has been free for 30-40 years
@blueguy5588
@blueguy5588 2 жыл бұрын
This is awesome, thanks. Vercel does an amazing job with Next.
@XceptionalBro
@XceptionalBro 2 жыл бұрын
Great video man Lately I've been developing a serverless function to modify the open graph meta attributes of a url for a SPA. I think that'd make a nice video!
@StephenGillie
@StephenGillie 2 жыл бұрын
Open graph servers don't usually parse Javascript, let alone evaluate it. How do you modify the flat HTML? If I knew, I'd add it to my serverless framework.
@ste-fa-no
@ste-fa-no 2 жыл бұрын
Already 100k, congrats for another success, and thank you for keeping up with great content!
@zacharystudio
@zacharystudio Жыл бұрын
this is incredible and exactly what i was looking for. really appreciate you 🙏🏻
@whitetoggled5546
@whitetoggled5546 2 жыл бұрын
I was just trying to figure this out for my site. Thanks
@other_perfection
@other_perfection Жыл бұрын
Vercel is on fire🔥🔥🔥
@ByteBound
@ByteBound 2 жыл бұрын
Great video! Perfect timing 👏
@idan5930
@idan5930 2 жыл бұрын
This is GOLD. Thank you!
@JohnnyMayHymn
@JohnnyMayHymn 2 жыл бұрын
it seems like someone could take this to make something similar to flash games, back in the day
@4.0.4
@4.0.4 2 жыл бұрын
You know you can run not just games but the entire Godot IDE in the browser right?
@caenir
@caenir 2 жыл бұрын
@@chelbez Try googling next time. Seems like you can.
@juzokau.u7700
@juzokau.u7700 4 күн бұрын
Omg you're the master!!!! 😮😮 I learned a lot with your video omgomg!!
@alexanderhorner
@alexanderhorner 2 жыл бұрын
Just learned about Nuxt Image like a few days ago
@KevinArellano
@KevinArellano 2 жыл бұрын
I manually made this in Vue like a boss xd
@catholic_zoomer_bro
@catholic_zoomer_bro 2 жыл бұрын
Wow this is almost exactly what I was looking for (was thinking of using image magick before). I wanted to do simple overlays and it should be easy with this
@Mitsunee_
@Mitsunee_ 2 жыл бұрын
I was this close to refreshing my PHP knowledge to make this happen myself... now I don't even need to bother with that because there's a way better solution now lol
@lord_yzal
@lord_yzal 2 жыл бұрын
You the OG Dawg 🔥
@xylvnking
@xylvnking 2 жыл бұрын
I literally googled this topic today. thank u fireship
@Thoscellen
@Thoscellen 2 жыл бұрын
Nice egg about cyberpunk edge runner :p
@triminhtruong251
@triminhtruong251 2 жыл бұрын
Such cool thing worths trying. Thanks
@rayhankessal6976
@rayhankessal6976 2 жыл бұрын
Hi im glad to be here
@saxa1
@saxa1 2 жыл бұрын
OMG! Thank you so much bro!
@narrei666
@narrei666 2 жыл бұрын
original gangster jeff
@heroe1486
@heroe1486 2 жыл бұрын
So it's just a library to get an SVG on the fly given some html/css ? I'm surprised nobody has done that before but thanks for the discovery, might be useful !
@skylerockspecial
@skylerockspecial 2 жыл бұрын
It uses jsx and the react native layout engine (yoga) to generate svg’s and then rasterises the svg into a png. The standard before this was to spin up a headless chrome browser and take a “screenshot” with puppeteer. The part that renders jsx as svg is called satori The part that renders svg to png is called resvg
@Nodsaibot
@Nodsaibot 2 жыл бұрын
imagemagick has done this since forever
@heroe1486
@heroe1486 2 жыл бұрын
From html/css ? I guess that's the appeal here
@Nodsaibot
@Nodsaibot 2 жыл бұрын
@@heroe1486 yes, takes a "screenshot"
@DogeMultiverse
@DogeMultiverse 2 жыл бұрын
Couldn't you do this with vanilla js+html?
@omfg1tsm1chaeln
@omfg1tsm1chaeln 2 жыл бұрын
Can you use Tailwind for styling the dynamic image?
@andrisoone
@andrisoone 2 жыл бұрын
Really cool!
@andrillaf
@andrillaf Жыл бұрын
This is great, but it doesn't translate well to the app directory. Can you make one for the app directory?
@shateq
@shateq 2 жыл бұрын
Pre 10k sub club
@ItClonesComment
@ItClonesComment Жыл бұрын
whats wrong with me, i only hear background noises
@trickeddev
@trickeddev 2 жыл бұрын
vercel great as always
@yan2410
@yan2410 2 жыл бұрын
Thank's man
@deefdragon
@deefdragon 2 жыл бұрын
I still hate that SSR is required for doing basically any embedding or meta tag stuff nowadays. Would love if I could just say and have that URL handle things.
@hugo-garcia
@hugo-garcia 2 жыл бұрын
Now we know how to do on the Edge we want to know how to Generate Images Programmatically on the Chrome
@pascalg2339
@pascalg2339 2 жыл бұрын
Please do a video on jetpack compose
@Tony-dp1rl
@Tony-dp1rl 2 жыл бұрын
Kinda feels like Software Engineering has jumped the shark, using a 50MB instance of Chrome browser in a serverless function to create ... wait for it ... a simple SVG image. LOL
@razorjhon2622
@razorjhon2622 2 жыл бұрын
THANK U SO MUCH FOR THIS !!!!!!
@frittex
@frittex 2 жыл бұрын
amazing
@Paul-sk3cd
@Paul-sk3cd 2 жыл бұрын
Will you create a Nuxt 3 course when it will be a stable release?
@DerTim
@DerTim Жыл бұрын
Would like to use it in an internal project, does it need to connect to vercel in order to generate the Image? Or can I do this offline?
@vaisakh_km
@vaisakh_km 2 жыл бұрын
first you sounded like a text-to-speech coverter.. but anyway, 😆 now we can use this to automate making of video thumbnail...
@ulrich-tonmoy
@ulrich-tonmoy 2 жыл бұрын
I think beyond fireship video should be more details and more lengthy whereas the fire video should be like 100 secs
@toastrecon
@toastrecon 2 жыл бұрын
Awesome!
@dstinnettmusic
@dstinnettmusic 2 жыл бұрын
Dynamic Mages
@alex222kyselov
@alex222kyselov 2 жыл бұрын
Does it need to be hosted in Vercel environment?
@AByteofCode
@AByteofCode 2 жыл бұрын
Figma supremacy
@thet0ast3r
@thet0ast3r 2 жыл бұрын
well couldnt you do that with a cloudflare worker for years?
@rynexakil7443
@rynexakil7443 2 жыл бұрын
is it the same way with angular and Ts?
@MistaSmith
@MistaSmith 2 жыл бұрын
Why not just write the SVG?
@developerpranav
@developerpranav Жыл бұрын
So now Jeff can create videos as code with Remotion, thumbnails as code with OG. Now if only there was a trained model for Jeff's voice, which can read out video scripts with memes created by (INSERT NEXT HOT JS LIBRARY HERE).
@killiandatabase
@killiandatabase 4 ай бұрын
Can I save de generated image on an database or something?
@bithmar2
@bithmar2 2 жыл бұрын
Canb this generate any sort of images or only open graph?
@tranquillityEnthusiast
@tranquillityEnthusiast 2 жыл бұрын
Your courses needs to get updated in fireship.
@klutch4198
@klutch4198 2 жыл бұрын
Let's gooooo
@E-Codz
@E-Codz 2 жыл бұрын
Does it work without Next.js too?
@saissevictor
@saissevictor 2 жыл бұрын
Awesome
@theBidon
@theBidon 2 жыл бұрын
Who is fireship?
@masterkhoa
@masterkhoa 2 жыл бұрын
this looks sick, too bad I'm stuck with Netlify now
@jacobwhitehead
@jacobwhitehead 2 жыл бұрын
For some reason when implementing this I just get a blank image shown at the api route
@aronep6
@aronep6 2 жыл бұрын
Og og og, je protège mon gang et mon lobby !
@GamBar64
@GamBar64 2 жыл бұрын
What about canvas?
@rydonahue1
@rydonahue1 Жыл бұрын
Could this also be used to serve dynamic images with a Discord bot?
@aw1lt
@aw1lt 2 жыл бұрын
Nice firedaddy
@tcoa04dineshkumar8
@tcoa04dineshkumar8 2 жыл бұрын
It's not new I am using this feature from 2021, but there no package from next until now
@codesymphony
@codesymphony 2 жыл бұрын
game changer
@tacklemcclean
@tacklemcclean 2 жыл бұрын
Can you run this on your own server as well or only on Vercel?
@ivanjermakov
@ivanjermakov 2 жыл бұрын
You can see the api running on localhost at 0:51
@heroe1486
@heroe1486 2 жыл бұрын
He's running it on his local machine so yes, and you can probably run this even outside of NextJS
@TypedefDev
@TypedefDev 2 жыл бұрын
Wow! no need to create dynamic svgs
@daleryanaldover6545
@daleryanaldover6545 2 жыл бұрын
It is a package to create dynamic svgs tho
@achalxyz
@achalxyz 2 жыл бұрын
OG, which stands for Original Gangster. 😂😂
@saadaws1772
@saadaws1772 2 жыл бұрын
Fleet review
@dlandsvolka4046
@dlandsvolka4046 2 жыл бұрын
shesshh
@DavidMulderOne
@DavidMulderOne 2 жыл бұрын
Why o why would you define an image in HTML rather than SVG? 🥺🥺 I mean, I get that if you're in a rush and unfamiliar with SVG it might take longer to learn... so I guess there might be valid use cases for it... but it definitely isn't something that sounds sensible for a 'mature' product?
@ThomasValadez-tv
@ThomasValadez-tv 2 жыл бұрын
Does anyone know of tools to help with this without using next?
@MASTERISHABH
@MASTERISHABH 2 жыл бұрын
As far as I know, OG images doesn't support SVG format. Not sure, how they're doing though.
@theindieprogrammer
@theindieprogrammer 2 жыл бұрын
They convert it to png
@MASTERISHABH
@MASTERISHABH 2 жыл бұрын
@@theindieprogrammer Ok,so do they first convert HTML to SVG then to PNG?
@theindieprogrammer
@theindieprogrammer 2 жыл бұрын
@@MASTERISHABH Yes, they made this Satori library to convert HTML and CSS to SVG, then they use puppeteer to make a screenshot of the result
@mmaaz403
@mmaaz403 2 жыл бұрын
@@theindieprogrammer Nopes, after getting svg they use resvg lib to convert it to a png
@theindieprogrammer
@theindieprogrammer 2 жыл бұрын
@@mmaaz403 That's correct, I got confused with their old og-image implementation, which uses a chromium instance.
@cikougo
@cikougo 2 жыл бұрын
Wtf today I was just wondering how this can be done! I guess now I know.
@ricardocnn
@ricardocnn 2 жыл бұрын
Waiting for Vue3 and Nuxt3 videos
@NithinJune
@NithinJune 2 жыл бұрын
A video on discords full stack plzzz
@lucascito_037
@lucascito_037 2 жыл бұрын
The W
@GbpsGbps-vn3jy
@GbpsGbps-vn3jy 2 жыл бұрын
So this is the JSON way to spawn CSS shit, yes?
@gedalyahreback2133
@gedalyahreback2133 2 жыл бұрын
Sounds good, but the pattern of the image will eventually and quickly become recognizable and generic.
@YuriG03042
@YuriG03042 2 жыл бұрын
did you not see that you can customize the image with html and css? anyway it's literally just a thumbnail for embeds, not a big deal
@yogenp
@yogenp 2 жыл бұрын
Noice.
@mimashator
@mimashator 2 жыл бұрын
SVG mark-up isn't that complicated
@ste-fa-no
@ste-fa-no 2 жыл бұрын
Jeff, you have bots impersonating every channel you own 😅 I hope you'll see this comment, and I hope none of your users would reply to those phishing scams
@avastorneretal
@avastorneretal 2 жыл бұрын
Npm package. For generating a f*king preview. I don't know what is better describing everything what's wrong with a WebDevs.
@ThePotatoChronicler
@ThePotatoChronicler 2 жыл бұрын
You said the first rule of SEO is to make good content, and now you say SEO is important, so are you saying it's important to make really good content?
@ScriptureFirst
@ScriptureFirst 2 жыл бұрын
Trade compute f bandw... Hmm
@Divino_1
@Divino_1 2 жыл бұрын
Please help: I don't still understand the use. Like can't we load images normally? why go through the hassle? Why not create an image and just use an svg converter to render the image as svg? Why create an image using css and hmtl when you can just create the same image using your favorite image editor and insert it into your code? Please someone should help me out with a clear explanation of this tool while contrasting it with other ways on manipulating images. Please
@chris-pee
@chris-pee 2 жыл бұрын
The idea is that this automates and *parametrizes* the thumbnail creation.
@merotuts9819
@merotuts9819 2 жыл бұрын
Please re-watch the video and listen carefully to what he says :)
@frankfu1122
@frankfu1122 2 жыл бұрын
Doing it the traditional way is fine. The use case for this would be for a content creator (or others) who churns out multiple blog posts (or similar) per day which would mean doing it the "traditional way" would be time consuming where as this "programatic" approach would save you lots of time at the but you get less customizability compared to a tool like Figma/Photohop i.e. the "Traditional" way
@KevinSheppard
@KevinSheppard 2 жыл бұрын
I feel like things are getting more complicated just for the fun of it :-/
@iamdanfleser
@iamdanfleser 2 жыл бұрын
Fart on space
@rishabhgupta2085
@rishabhgupta2085 2 жыл бұрын
First comment 🎉
@MrBrax
@MrBrax 2 жыл бұрын
Wow awesome, you want an award?
@rishabhgupta2085
@rishabhgupta2085 2 жыл бұрын
Sure man 👍
@veryabhi
@veryabhi 2 жыл бұрын
9 views 💀
@arunkumarTdr
@arunkumarTdr 2 жыл бұрын
Can anyone share some good php library for generating og image
@dan6erbond
@dan6erbond 2 жыл бұрын
Probably not lol.
@katadermaro
@katadermaro 2 жыл бұрын
which stands for "original gangster" bruh 😂
@gleweistam6663
@gleweistam6663 2 жыл бұрын
a video on fleet please!
Is "edge" computing really faster?
8:14
Fireship
Рет қаралды 593 М.
Yay, My Dad Is a Vending Machine! 🛍️😆 #funny #prank #comedy
00:17
Perfect Pitch Challenge? Easy! 🎤😎| Free Fire Official
00:13
Garena Free Fire Global
Рет қаралды 14 МЛН
Não sabe esconder Comida
00:20
DUDU e CAROL
Рет қаралды 58 МЛН
Industrial-scale Web Scraping with AI & Proxy Networks
6:17
Beyond Fireship
Рет қаралды 763 М.
Please stop using px for font-size.
15:18
Coder Coder
Рет қаралды 220 М.
I tried 8 different Postgres ORMs
9:46
Beyond Fireship
Рет қаралды 432 М.
PROOF JavaScript is a Multi-Threaded language
8:21
Beyond Fireship
Рет қаралды 286 М.
Most overpowered way to build mobile apps?
8:33
Beyond Fireship
Рет қаралды 835 М.
Does Deno 2 really uncomplicate JavaScript?
8:55
Beyond Fireship
Рет қаралды 444 М.
Getting Started with NextJS Dynamic OpenGraph Images
17:24
Jolly Coding
Рет қаралды 9 М.
The ultimate guide to web performance
6:43
Beyond Fireship
Рет қаралды 447 М.
Next.js 13 - The Basics
9:00
Beyond Fireship
Рет қаралды 700 М.
How I deploy serverless containers for free
6:33
Beyond Fireship
Рет қаралды 546 М.