Generate Images Programmatically on the Edge
Вставка
- Опубліковано 11 жов 2022
- A new tool from Vercel called OG can generate images on the edge for Open Graph with some basic JavaScript. This can be a great way to improve SEO and the clickability of links shared on social media.
Try out my Next.js Course fireship.io/courses/react-nex...
Vercel OG vercel.com/blog/introducing-v...
![ПОЛНАЯ ИСТОРИЯ ЭКЗОРЦИЗМА [Топ Сикрет]](http://i.ytimg.com/vi/qBySr6Bt0B8/mqdefault.jpg)
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.
The tool would become deprecated a minute after being published by not being able to catch up to the speed of js ecosystem evolution.
@@themisir a new javascript framework every hour
i will make a JS framework that does exactly this, determines what framework to use.
Honestly that's genius...
@@keent I wish I could put a Jeremy Clarkson clip there.
Another piece of gold, nice work man!
I built this for myself and now happy that there’s now a faster implementation 😅
The real magic here is the JSX to SVG library. The rest is just routing.
Already 100k, congrats for another success, and thank you for keeping up with great content!
a video on fleet please!
I second this tried it out and I LOVE the UI
@@jordanmckoy1935 love the git integration
@@jordanmckoy1935 ikr! quick to boot also, and the language integration feels really awesome
Please no. It currently is unethical and they do not plan to change that. Don't draw any attention to the abomination
@@MH_VOID wdym?
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???
yep we got em!
Great video! Perfect timing 👏
This is awesome, thanks. Vercel does an amazing job with Next.
this is incredible and exactly what i was looking for. really appreciate you 🙏🏻
This is GOLD. Thank you!
I literally googled this topic today. thank u fireship
I was just trying to figure this out for my site. Thanks
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!
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.
"Fleet, VSCode killer?"
Really like to see that as a video title ;)
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!
BTW: GREAT software will always have a value - thus JetBrains will not release Fleet as free, because that is not its "market niche".
@@JaimitoAleman "great __ will always have a value" is a flawed vision of a good future
@@JorgetePanete Not like vim and Emacs and derivatives has been free for 30-40 years
You the OG Dawg 🔥
Such cool thing worths trying. Thanks
Vercel is on fire🔥🔥🔥
OMG! Thank you so much bro!
vercel great as always
THANK U SO MUCH FOR THIS !!!!!!
I manually made this in Vue like a boss xd
Really cool!
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
Thank's man
Hi im glad to be here
amazing
Awesome!
it seems like someone could take this to make something similar to flash games, back in the day
You know you can run not just games but the entire Godot IDE in the browser right?
@@chelbez Try googling next time. Seems like you can.
Just learned about Nuxt Image like a few days ago
Awesome
Can you use Tailwind for styling the dynamic image?
original gangster jeff
Nice egg about cyberpunk edge runner :p
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 !
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
Couldn't you do this with vanilla js+html?
Let's gooooo
game changer
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?
Pre 10k sub club
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
Will you create a Nuxt 3 course when it will be a stable release?
Nice firedaddy
The W
imagemagick has done this since forever
From html/css ? I guess that's the appeal here
@@heroe1486 yes, takes a "screenshot"
shesshh
Please do a video on jetpack compose
For some reason when implementing this I just get a blank image shown at the api route
This is great, but it doesn't translate well to the app directory. Can you make one for the app directory?
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
Dynamic Mages
Does it work without Next.js too?
is it the same way with angular and Ts?
Does it need to be hosted in Vercel environment?
Now we know how to do on the Edge we want to know how to Generate Images Programmatically on the Chrome
Canb this generate any sort of images or only open graph?
Og og og, je protège mon gang et mon lobby !
What about canvas?
Noice.
Can I save de generated image on an database or something?
Figma supremacy
first you sounded like a text-to-speech coverter..
but anyway, 😆 now we can use this to automate making of video thumbnail...
Can you run this on your own server as well or only on Vercel?
You can see the api running on localhost at 0:51
He's running it on his local machine so yes, and you can probably run this even outside of NextJS
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.
Does anyone know of tools to help with this without using next?
Could this also be used to serve dynamic images with a Discord bot?
Fleet review
It's not new I am using this feature from 2021, but there no package from next until now
I think beyond fireship video should be more details and more lengthy whereas the fire video should be like 100 secs
well couldnt you do that with a cloudflare worker for years?
this looks sick, too bad I'm stuck with Netlify now
Why not just write the SVG?
whats wrong with me, i only hear background noises
Wtf today I was just wondering how this can be done! I guess now I know.
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).
Your courses needs to get updated in fireship.
Who is fireship?
As far as I know, OG images doesn't support SVG format.
Not sure, how they're doing though.
They convert it to png
@@theindieprogrammer Ok,so do they first convert HTML to SVG then to PNG?
@@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
@@theindieprogrammer Nopes, after getting svg they use resvg lib to convert it to a png
@@mmaaz403 That's correct, I got confused with their old og-image implementation, which uses a chromium instance.
Wow! no need to create dynamic svgs
It is a package to create dynamic svgs tho
OG, which stands for Original Gangster.
😂😂
A video on discords full stack plzzz
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?
Waiting for Vue3 and Nuxt3 videos
So this is the JSON way to spawn CSS shit, yes?
Trade compute f bandw... Hmm
Can anyone share some good php library for generating og image
Probably not lol.
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
The idea is that this automates and *parametrizes* the thumbnail creation.
Please re-watch the video and listen carefully to what he says :)
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
SVG mark-up isn't that complicated
Sounds good, but the pattern of the image will eventually and quickly become recognizable and generic.
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
First comment 🎉
Wow awesome, you want an award?
Sure man 👍
Fart on space
Npm package.
For generating a f*king preview.
I don't know what is better describing everything what's wrong with a WebDevs.
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?
9 views 💀
I feel like things are getting more complicated just for the fun of it :-/
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
which stands for "original gangster" bruh 😂
a video on fleet please!