Скачать или смотреть Generating Image Galleries, Open Graph Content with Vercel and Cloudinary - DevJams Episode #22

In this Cloudinary DevJams episode, we are joined by ⁠Ben Seymour⁠ - Director of Sales Engineering at Vercel (‪@VercelHQ‬)!

Ben has developed several interesting open-source projects using ⁠Vercel⁠, ⁠Cloudinary⁠, and ⁠Next.js. With these technologies, it is possible to create fast-loading, animated image galleries.

Combined with Vercel’s ⁠Open Graph Image Generator⁠, he also can easily create and update the images used by social media sites and microbrowsers when sharing projects!

Ben provides how-to details on some of the steps taken, such as markup with ⁠Tailwind⁠ and extensive use of ⁠Cloudinary transformations for background removal⁠ and ⁠other effects⁠.

This episode is jam-packed with practical tips and tricks to take your development skills to the next level! So, do not miss out on this exciting opportunity to learn from a seasoned pro like Ben Seymour.
---
Episode Sections
00:00 Introduction and Overview of DevJams
00:45 Guest Introduction: Ben Seymour
02:01 Exploring Previous DevJams Episodes
03:06 Introduction to Vercel
03:31 Guest Interaction and Personal Background
04:06 Vercel's Mission and Team
04:44 Vercel's Open Source Contributions
05:15 Discussion on Vercel's Conference
06:26 Creating Image Galleries with Vercel and Cloudinary
07:31 Deploying Projects with Vercel
09:07 Benefits of Open Graph
11:53 Using Open Graph with Vercel and Cloudinary
16:08 Sharing Projects with Vercel
20:03 Open Graph and Social Media
25:47 Vercel's Open Graph Image Generation
28:52 Exploring Open Source Repositories
29:13 Discussing Open Graph and its Advantages
30:03 Comparing Old and New Systems
30:41 Exploring Sartori and its Implementation
31:20 Showcasing Examples of Dynamic Image Generation
34:22 Customizing Images with Typography and Color
35:12 Exploring Image Optimization and Manipulation
35:46 Experimenting with Color Palettes and Image Inversion
36:17 Discussing the Power of SVG and Image Sanitization
38:24 Exploring Image Transformation and Accessibility Features
39:25 Discussing the Power of Cloudinary in Image Transformation
41:02 Exploring the Use of Photoshop Files in Web Development
43:22 Discussing the Importance of Open Graph in Project Deployment
46:08 Discussing the Potential of Open Graph and Future Plans
48:41 Exploring the Latest Features of Next JS
---
Mentioned Technology and Helpful Links
⁠- Ben's Photo Gallery Project - dynamic.photos⁠⁠: https://dynamic.photos/
Cloudinary AI Background Removal: https://cloudinary.com/documentation/...
Cloudinary Image Effects and Enhancements: https://cloudinary.com/documentation/...
Cloudinary Image Transformations⁠⁠: https://cloudinary.com/documentation/...
Cloudinary Search API Method⁠⁠: https://cloudinary.com/documentation/...
Next.js App Router⁠⁠
Tailwind: https://tailwindcss.com/
Vercel Blog: Building a fast, animated image gallery with Next.js⁠⁠: https://vercel.com/blog/building-a-fa...
Vercel Blog: Introducing OG Image Generation: Fast, dynamic social card images at the Edge: https://vercel.com/blog/introducing-v...
⁠⁠Vercel Templates⁠: https://vercel.com/templates
---
Follow Ben Seymour on LinkedIn: https://www.linkedin.com/in/benseymou...
Follow Sam Brace on LinkedIn:   / sambrace  
---
⁠Not a Cloudinary user yet? Sign up for your FREE account today! https://cloudinary.com/users/register...