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.
@themisir2 жыл бұрын
The tool would become deprecated a minute after being published by not being able to catch up to the speed of js ecosystem evolution.
@faceboy13922 жыл бұрын
@@themisir a new javascript framework every hour
@keent Жыл бұрын
i will make a JS framework that does exactly this, determines what framework to use. Honestly that's genius...
@Exilum Жыл бұрын
@@keent I wish I could put a Jeremy Clarkson clip there.
@tnvmadhav24422 жыл бұрын
I built this for myself and now happy that there’s now a faster implementation 😅
@louiscassany2 жыл бұрын
Another piece of gold, nice work man!
@0x5DA2 жыл бұрын
a video on fleet please!
@jordanmckoy19352 жыл бұрын
I second this tried it out and I LOVE the UI
@bigboyballer42042 жыл бұрын
@@jordanmckoy1935 love the git integration
@0x5DA2 жыл бұрын
@@jordanmckoy1935 ikr! quick to boot also, and the language integration feels really awesome
@MH_VOID2 жыл бұрын
Please no. It currently is unethical and they do not plan to change that. Don't draw any attention to the abomination
@phucnguyen01102 жыл бұрын
@@MH_VOID wdym?
@husseinkizz2 жыл бұрын
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???
@husseinkizz2 жыл бұрын
yep we got em!
@StephenGillie2 жыл бұрын
The real magic here is the JSX to SVG library. The rest is just routing.
@sharbelokzan96732 жыл бұрын
"Fleet, VSCode killer?" Really like to see that as a video title ;)
@JaimitoAleman2 жыл бұрын
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!
@JaimitoAleman2 жыл бұрын
BTW: GREAT software will always have a value - thus JetBrains will not release Fleet as free, because that is not its "market niche".
@JorgetePanete2 жыл бұрын
@@JaimitoAleman "great __ will always have a value" is a flawed vision of a good future
@heroe14862 жыл бұрын
@@JorgetePanete Not like vim and Emacs and derivatives has been free for 30-40 years
@blueguy55882 жыл бұрын
This is awesome, thanks. Vercel does an amazing job with Next.
@XceptionalBro2 жыл бұрын
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!
@StephenGillie2 жыл бұрын
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-no2 жыл бұрын
Already 100k, congrats for another success, and thank you for keeping up with great content!
@zacharystudio Жыл бұрын
this is incredible and exactly what i was looking for. really appreciate you 🙏🏻
@whitetoggled55462 жыл бұрын
I was just trying to figure this out for my site. Thanks
@other_perfection Жыл бұрын
Vercel is on fire🔥🔥🔥
@ByteBound2 жыл бұрын
Great video! Perfect timing 👏
@idan59302 жыл бұрын
This is GOLD. Thank you!
@JohnnyMayHymn2 жыл бұрын
it seems like someone could take this to make something similar to flash games, back in the day
@4.0.42 жыл бұрын
You know you can run not just games but the entire Godot IDE in the browser right?
@caenir2 жыл бұрын
@@chelbez Try googling next time. Seems like you can.
@juzokau.u77004 күн бұрын
Omg you're the master!!!! 😮😮 I learned a lot with your video omgomg!!
@alexanderhorner2 жыл бұрын
Just learned about Nuxt Image like a few days ago
@KevinArellano2 жыл бұрын
I manually made this in Vue like a boss xd
@catholic_zoomer_bro2 жыл бұрын
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_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_yzal2 жыл бұрын
You the OG Dawg 🔥
@xylvnking2 жыл бұрын
I literally googled this topic today. thank u fireship
@Thoscellen2 жыл бұрын
Nice egg about cyberpunk edge runner :p
@triminhtruong2512 жыл бұрын
Such cool thing worths trying. Thanks
@rayhankessal69762 жыл бұрын
Hi im glad to be here
@saxa12 жыл бұрын
OMG! Thank you so much bro!
@narrei6662 жыл бұрын
original gangster jeff
@heroe14862 жыл бұрын
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 !
@skylerockspecial2 жыл бұрын
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
@Nodsaibot2 жыл бұрын
imagemagick has done this since forever
@heroe14862 жыл бұрын
From html/css ? I guess that's the appeal here
@Nodsaibot2 жыл бұрын
@@heroe1486 yes, takes a "screenshot"
@DogeMultiverse2 жыл бұрын
Couldn't you do this with vanilla js+html?
@omfg1tsm1chaeln2 жыл бұрын
Can you use Tailwind for styling the dynamic image?
@andrisoone2 жыл бұрын
Really cool!
@andrillaf Жыл бұрын
This is great, but it doesn't translate well to the app directory. Can you make one for the app directory?
@shateq2 жыл бұрын
Pre 10k sub club
@ItClonesComment Жыл бұрын
whats wrong with me, i only hear background noises
@trickeddev2 жыл бұрын
vercel great as always
@yan24102 жыл бұрын
Thank's man
@deefdragon2 жыл бұрын
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-garcia2 жыл бұрын
Now we know how to do on the Edge we want to know how to Generate Images Programmatically on the Chrome
@pascalg23392 жыл бұрын
Please do a video on jetpack compose
@Tony-dp1rl2 жыл бұрын
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
@razorjhon26222 жыл бұрын
THANK U SO MUCH FOR THIS !!!!!!
@frittex2 жыл бұрын
amazing
@Paul-sk3cd2 жыл бұрын
Will you create a Nuxt 3 course when it will be a stable release?
@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_km2 жыл бұрын
first you sounded like a text-to-speech coverter.. but anyway, 😆 now we can use this to automate making of video thumbnail...
@ulrich-tonmoy2 жыл бұрын
I think beyond fireship video should be more details and more lengthy whereas the fire video should be like 100 secs
@toastrecon2 жыл бұрын
Awesome!
@dstinnettmusic2 жыл бұрын
Dynamic Mages
@alex222kyselov2 жыл бұрын
Does it need to be hosted in Vercel environment?
@AByteofCode2 жыл бұрын
Figma supremacy
@thet0ast3r2 жыл бұрын
well couldnt you do that with a cloudflare worker for years?
@rynexakil74432 жыл бұрын
is it the same way with angular and Ts?
@MistaSmith2 жыл бұрын
Why not just write the SVG?
@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).
@killiandatabase4 ай бұрын
Can I save de generated image on an database or something?
@bithmar22 жыл бұрын
Canb this generate any sort of images or only open graph?
@tranquillityEnthusiast2 жыл бұрын
Your courses needs to get updated in fireship.
@klutch41982 жыл бұрын
Let's gooooo
@E-Codz2 жыл бұрын
Does it work without Next.js too?
@saissevictor2 жыл бұрын
Awesome
@theBidon2 жыл бұрын
Who is fireship?
@masterkhoa2 жыл бұрын
this looks sick, too bad I'm stuck with Netlify now
@jacobwhitehead2 жыл бұрын
For some reason when implementing this I just get a blank image shown at the api route
@aronep62 жыл бұрын
Og og og, je protège mon gang et mon lobby !
@GamBar642 жыл бұрын
What about canvas?
@rydonahue1 Жыл бұрын
Could this also be used to serve dynamic images with a Discord bot?
@aw1lt2 жыл бұрын
Nice firedaddy
@tcoa04dineshkumar82 жыл бұрын
It's not new I am using this feature from 2021, but there no package from next until now
@codesymphony2 жыл бұрын
game changer
@tacklemcclean2 жыл бұрын
Can you run this on your own server as well or only on Vercel?
@ivanjermakov2 жыл бұрын
You can see the api running on localhost at 0:51
@heroe14862 жыл бұрын
He's running it on his local machine so yes, and you can probably run this even outside of NextJS
@TypedefDev2 жыл бұрын
Wow! no need to create dynamic svgs
@daleryanaldover65452 жыл бұрын
It is a package to create dynamic svgs tho
@achalxyz2 жыл бұрын
OG, which stands for Original Gangster. 😂😂
@saadaws17722 жыл бұрын
Fleet review
@dlandsvolka40462 жыл бұрын
shesshh
@DavidMulderOne2 жыл бұрын
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-tv2 жыл бұрын
Does anyone know of tools to help with this without using next?
@MASTERISHABH2 жыл бұрын
As far as I know, OG images doesn't support SVG format. Not sure, how they're doing though.
@theindieprogrammer2 жыл бұрын
They convert it to png
@MASTERISHABH2 жыл бұрын
@@theindieprogrammer Ok,so do they first convert HTML to SVG then to PNG?
@theindieprogrammer2 жыл бұрын
@@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
@mmaaz4032 жыл бұрын
@@theindieprogrammer Nopes, after getting svg they use resvg lib to convert it to a png
@theindieprogrammer2 жыл бұрын
@@mmaaz403 That's correct, I got confused with their old og-image implementation, which uses a chromium instance.
@cikougo2 жыл бұрын
Wtf today I was just wondering how this can be done! I guess now I know.
@ricardocnn2 жыл бұрын
Waiting for Vue3 and Nuxt3 videos
@NithinJune2 жыл бұрын
A video on discords full stack plzzz
@lucascito_0372 жыл бұрын
The W
@GbpsGbps-vn3jy2 жыл бұрын
So this is the JSON way to spawn CSS shit, yes?
@gedalyahreback21332 жыл бұрын
Sounds good, but the pattern of the image will eventually and quickly become recognizable and generic.
@YuriG030422 жыл бұрын
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
@yogenp2 жыл бұрын
Noice.
@mimashator2 жыл бұрын
SVG mark-up isn't that complicated
@ste-fa-no2 жыл бұрын
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
@avastorneretal2 жыл бұрын
Npm package. For generating a f*king preview. I don't know what is better describing everything what's wrong with a WebDevs.
@ThePotatoChronicler2 жыл бұрын
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?
@ScriptureFirst2 жыл бұрын
Trade compute f bandw... Hmm
@Divino_12 жыл бұрын
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-pee2 жыл бұрын
The idea is that this automates and *parametrizes* the thumbnail creation.
@merotuts98192 жыл бұрын
Please re-watch the video and listen carefully to what he says :)
@frankfu11222 жыл бұрын
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
@KevinSheppard2 жыл бұрын
I feel like things are getting more complicated just for the fun of it :-/
@iamdanfleser2 жыл бұрын
Fart on space
@rishabhgupta20852 жыл бұрын
First comment 🎉
@MrBrax2 жыл бұрын
Wow awesome, you want an award?
@rishabhgupta20852 жыл бұрын
Sure man 👍
@veryabhi2 жыл бұрын
9 views 💀
@arunkumarTdr2 жыл бұрын
Can anyone share some good php library for generating og image