DevJams: Recent Episodes
Cloudinary
Interviews with software developers about their websites, apps and other projects that use Cloudinary in innovative ways.
In this episode of Cloudinary DevJams, we host Seb Meunier - Customer Success Manager at Intuiface! He will share how their interactive signage platform uses Cloudinary to deliver images and videos across various projects, thanks to a .NET plugin he developed.
Further demonstrating how the platforms interlink, Seb will walk through how their system can use many other well-known platforms. This includes Airtable and OpenAI's DALL-E for AI image generation, in conjunction with Cloudinary. Seb plans to show these integrations through various operations, such as dictating prompts, uploading images to Cloudinary, and displaying the images on large screens.
This episode shows how you can use Cloudinary as a single source of truth for all your digital projects, including signage for shared spaces such as museums and galleries. So, check it out and see how it is possible, thanks to the great work Seb has done for Intuiface!
Not a Cloudinary user yet? Sign up for your FREE account today!
Cloudinary regularly hosts internal hackathons! These allow employees to stretch the boundaries of what's possible with our products. Hadar Bejerano, the head of the Solutions Engineering team, created one of the winning projects. With CloudyDesktop, users can sync a local folder to Cloudinary for automated uploads!
Find out how he developed this desktop application in this DevJams episode. You'll learn more about ways to use Cloudinary's CLI in your projects. Hadar also shows how to use some of the project's tools and packages - Electron, Keytar and Chokidar.
If you're trying to find a way to automate your team's uploading processes, this is an episode you won't want to miss!
Not a Cloudinary user yet? Sign up for your FREE account today!
Tableau is one of the widely used data visualization and business intelligence tools! And adding dynamic images to charts and graphs is even easier, thanks to Cloudinary's transformations.Timothy Ngwena, lead consultant for Aimpoint Digital, created an eloquent solution with the two tools. In this DevJams episode, he walks through the steps he took for adding images in Tableau. You'll see how he breaks apart the Cloudinary image URLs to create a consistent output. On top of this, you'll learn how to dynamically resize and shape images with Cloudinary's transformations.So, join Cloudinary's Customer Education team and Tableau Tim for this deep dive! You'll be using your Cloudinary images for business intelligence purposes in no time.
---Helpful Resources
- Edit images with calculations in Tableau using Cloudinary and Tableau Image Roles
- Tableau Image Role + Cloudinary = data driven images
- Cloudinary Documentation - Image Resizing and Cropping
Not a Cloudinary user yet? Sign up for your FREE account today!
Matt Kane, principal software engineer at Netlify, has developed the Unpic project. With it, you can automatically detect the content delivery network (CDN) for an image. On top of that, it uses the CDN’s URL API to resize and format images. It then generates the correct srcset and sizes attributes for the image.Join Matt for this Cloudinary DevJams episode to walk through Unpic. He will show how to use this component with popular frameworks like Astro, React and Svelte, using simple img tags. Matt also will demonstrate how Unpic can handle responsive resizing of images, while preserving aspect ratio and avoiding layout shift. If you're looking for a simple way to work with CDN-delivered images in your favorite framework, don't miss this episode!---Mentioned Technology:- Astro- GitHub Repository for Unpic- Unpic's Homepage---Not a Cloudinary user yet? Sign up for your FREE account today!
Are you looking for a simple and scalable way to launch a website? Does it need optimized image and video delivery? How about a flexible content management system? Look no further! Martin Jagodic, who is a senior web developer for PM, has created an excellent solution. It includes static site generator Hugo, as well as Decap CMS for content authoring. And the project uses Cloudinary's rich transformations for optimization and aesthetics too.Martin walks through his project in this Cloudinary DevJams live stream and episode. In it, he shows developers how to use it for their next website launch. He also showcases Maistra, one of the largest hospitality groups in Europe, and how they use this solution to power their web properties.
Mentioned Technology:
- Cloudinary
- Decap CMS
- GitHub Repository - hugo-cloudinary-decap-demo
- Hugo
- Netlify
Mentioned Cloudinary Transformations and Features:
- Image resizing and cropping
- Image and video optimization
Not a Cloudinary user yet? Sign up for your FREE account today!
Don't miss out on this insightful DevJams episode that explores the intersection of cutting-edge web development and user experience, alongside one of Google's leading experts.We are thrilled to have Adam Argyle (Chrome CSS Developer Advocate at Google) join us for an in-depth discussion about his personal website, Nerdy.dev. Adam shares his expertise in leveraging Cloudinary's versatile capabilities to optimize and customize his image and video content.Discover how he utilizes Cloudinary's prebuilt strings with standard optimizations to ensure fast-loading visuals and integrates Cloudinary features, such as maximum size restrictions, customized URLs, lazy loading, and asynchronous image decoding.We explore his innovative Markdown parsing techniques that transform authored paths into fully optimized Cloudinary URLs, seamlessly integrating with Preact components and the Deno Fresh framework for optimal server-side rendering benefits.Prepare to be inspired as Adam takes us on his journey using Cloudinary to further optimize and tailor the user experience on Nerdy.dev.
Mentioned Technology and Helpful Links:
- Adam's Website - Nerdy.dev
- Cloudinary Documentation - Image resizing and cropping
- Cloudinary Documentation - Optimize Images
- Cloudinary Documentation - Responsive images
- Deno Fresh
Not a Cloudinary user yet? Sign up for your FREE account today!
Blender is one of the most widely used software tools for modeling, animating, and rendering 3D computer graphics. And thanks to Anthony Datu and his new Blender add-on, it is now possible to easily export these files into Cloudinary! Anthony’s work extends the 3D creation pipeline for all artists and associated organizations, allowing for Cloudinary-optimized images to be rendered from the files for placement on websites, mobile applications, and more. And thanks to Cloudinary’s Product Gallery, it is easy to display the 3D model, letting users view and interact with it online from multiple angles.Come join this conversation with Anthony and Cloudinary’s Customer Education team to see how he built the add-on, and learn how you can start using it in your upcoming 3D projects!
Mentioned Technology and Helpful Links:
- Anthony's Cloudinary Exporter on Blender Market
- Cloudinary Blog Post: The 3 Ds of 3D with Cloudinary
- Code Sandbox from Anthony, using 3D objects in Cloudinary's Product Gallery from Blender
- Documentation on Cloudinary's Product Gallery
- Documentation on Cloudinary's Upload Presets
Not a Cloudinary user yet? Sign up for your FREE account today!
In this Cloudinary DevJams episode, we are joined by Ben Seymour - Director of Sales Engineering at Vercel!
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.
Mentioned Technology and Helpful Links
- Ben's Photo Gallery Project - dynamic.photos
- Cloudinary Documentation: Image transformations
- Cloudinary Search API Method
- Next.js App Router
- Vercel Blog: Building a fast, animated image gallery with Next.js
- Vercel Blog: Introducing OG Image Generation: Fast, dynamic social card images at the Edge
- Vercel.com/Templates
Not a Cloudinary user yet? Sign up for your FREE account today!
In this Cloudinary DevJams episode, open-source software engineer John Reilly shares his plugin for the React-based optimized site generator Docusaurus. It uses Cloudinary for serving optimized images! Using Rehype and Markdown, the plugin fetches images from their original source on his blog’s server. Then it optimizes them by updating the URL structure to be served via Cloudinary and its associated content delivery networks. Cloudinary’s Customer Education team takes a closer look at how John is using Markdown and his plugin to improve the way images are served via Docusaurus. Whether you’re new or experienced with the associated software and frameworks, join us to learn more about ways to streamline your website optimization efforts, so you can focus more on your content.
Check out John's plugin in his GitHub repository.
Read John's blog post about the project.
Learn even more on Cloudinary's blog about using Cloudinary and Docusaurus together.
Dive into Cloudinary's documentation on delivering remote media files with the fetch feature.
Not a Cloudinary user yet? Sign up for your FREE account today!
Join Grant Sander, Vice President of Engineering at Formidable, in this Cloudinary DevJams episode! You'll learn how Grant migrated images to Cloudinary and experienced significant enhancements for their website, such as next-generation image format delivery and support.
Grant demonstrates the process and code that Formidable used to migrate images, resulting in an 86% reduction in image bandwidth for the site. Follow along with Cloudinary’s Customer Education team to gain a better understanding of the motivation and work involved in the process, from identifying the problem to measuring success.
If you've been storing your assets in a code repository and creating your own optimization processing pipeline, but finding the process to be challenging, this is a conversation you won’t want to miss.
Learn more about Formidable.
Read Grant's blog post about the project.
Mentioned Cloudinary Products and Features:
- Automatic format selection transformation
- Automatic quality selection transformation
- Cloudinary Nexus
- Node.js SDK
- Upload Method
Mentioned Technology:
- Amazon S3
- Broken Link Checker
- Git
- Glob
- Markdown
- Puppeteer
- WebP Image Format
Also, read Formidable's case study for PUMA.
Not a Cloudinary user yet? Sign up for your FREE account today!
With Canva being one of the hottest tools for creative and design projects, Cloudinary’s Igor Vorobeychik decided to build out a Canva-Cloudinary connector to help streamline work for those who use both platforms! This allows people to create their design in Canva, then publish it to Cloudinary for delivery onto websites, mobile apps and more.
Cloudinary’s Customer Education team will be walking through Igor’s Canva Publish Extension to show how he built it, and better understand how to create deep connections between mutually beneficial systems via code. Together, we will dive into his scripts that use Cloudinary’s Node.js SDK, Express, and more.
Read more about Igor's process in building his Canva-Cloudinary connector on the Cloudinary blog.
Mentioned Cloudinary Transformations and Features:
- Environment Variable
- Admin API Get Subfolders
- Upload API
- URL Helper Method
Not a Cloudinary user yet? Sign up for your FREE account today!
Kent Dodds is one of the foremost experts on JavaScript, authoring helpful blog posts and courses on the widely used programming language. He recently shared some techniques to improve his own blog’s image loading experience, which happens to use Cloudinary for several aspects of it.
Becky and Sam from Cloudinary’s Customer Education team talked with Kent, walking through the processes he took to get a 100/100 on the "Cumulative Layout Shift" Core Web Vitals score for his blog. This conversation includes reviewing code scripts to understand his use of Tailwind’s aspect-ratio plugin, Cloudinary’s ability to load perfectly sized images and to handle Base64 encoding, and other important topics.
Learn more about the project on Kent's blog.
Covered Cloudinary Transformations and Features
- Resizing and Cropping
- Automatic quality selection (q_auto)
- Automatic format selection (f_auto)
- Blur effects
Mentioned Technology and Associated Topics
- Cumulative Layout Shift (CLS)
- Aspect Ratio Plugin for Tailwind
- BlurHash
- Tailwind CSS
Not a Cloudinary user yet? Sign up for your FREE account today!
Daniel Duan, who is the head of engineering at Legitimate, has helped build out a truly innovative Web3 marketplace. The Drops by Legitimate project allows artists to create non-fungible tokens (NFTs) for their physical products, such as paintings, photography and even wearable items.
As the artists’ product images are delivered via Cloudinary, Becky and Sam from Cloudinary’s Customer Education team sat down with Daniel for this DevJams episode. They discuss all things related to the Drops project, including a walkthrough of how Cloudinary works with IPFS for optimized, accelerated image delivery through various caching mechanisms.
If you are looking for a great developer-focused introduction to Web3, NFTs, cryptocurrency and the blockchain, you won’t want to miss this DevJams episode!
Learn More about Daniel and his Projects:
- Twitter Account
- Personal Website
Not a Cloudinary user yet? Sign up for your free account!
Tapas Adhikary, who is a frequent contributor on FreeCodeCamp.com and other developer resources, recently created an excellent image gallery with Gatsby and Cloudinary!
Becky and Sam from Cloudinary's Customer Education team sat down with Tapas to walk through his "Imaginary" project and better understand some of its components, such as its use of GraphQL and deployment via Netlify.
If you are looking on building your next project with any of the mentioned technologies, this is an episode you won't want to miss.
Learn More About Tapas and His Projects:
- Personal Website
- YouTube
- FreeCodeCamp
- ReactPlay
- Imaginary
- Imaginary GitHub Repository
Not a Cloudinary user yet? Sign up for your free account!
In classical music, knowing the people you have trained with has a lot of value! This is why Cori Lint, software engineer at Ovia Health, developed Cello Tree - a directory of cellists to show their relationships to each other.
Becky and Jen on Cloudinary's Customer Education team sit down with Cori to learn more about the project and its underlying technologies, which include Python, D3.js and Cloudinary. If you are looking to develop a side project about your passions, this is definitely a DevJams episode you won't want to miss!
Learn More About the Cello Tree Project
- GitHub Repository
- Technical Demonstration
Learn More About Cori Lint
- GitHub
- Ovia Health
Mentioned Technologies and Resources:
- Artists Who Code
- Python
- PHP
- D3.js
- Cloudinary
- Hackbright Academy
Check out all of Cloudinary's podcast episodes!
Sign up for your free Cloudinary account!
Many developers make tons of open-source contributions, but keeping track of all of the various commits, pull requests and other actions can be challenging. Harshil Agrawal, who is a Developer Advocate for Contentful and formerly with n8n, created a project that solves this issue - GitHub Wrap. Using technology like n8n, Cloudflare and Cloudinary, he developed this excellent product that makes it easy to get a yearlong recap of the parts developers have taken to benefit the open-source community. Sam and Becky from Cloudinary sit down with Harshil to walk through his project and show how he built it in episode #10 of DevJams.
Netlify Build Plugins can add powerful capabilities to every build, thanks to an ever-growing community directory! Find out how Colby Fayock - Senior Developer Experience Engineer at Cloudinary - created a Build Plugin that automatically optimizes and converts images on a Netlify-deployed site into modern formats with Cloudinary. Our hosts Becky and Sam explore many topics with Colby in this DevJams episode, diving into all of the code that makes this plugin possible.
Learn More about Colby's Netlify Build Plugin
- GitHub Repository
- Blog Post on SpaceJelly.dev
- Blog Post on Cloudinary.com
Follow Colby
- ColbyFayock.com
- YouTube
- Twitch
Mentioned Cloudinary Features
- Automatic format selection (f_auto)
- Automatic quality selection (q_auto)
- Remote image fetch URL
Mentioned Technology
- Netlify and their Build Plugins
- jsdom
- Algolia
- Next.js
- Vercel
- Astro
- Core Web Vitals
- New Relic
Learn how Sean Morgan - full stack web developer and illustrator - created his work portfolio with technologies like Cloudinary, Heroku and CSS flexbox layouts. Sam and Becky dive into his techniques, showing how he updates the pages via JSON listings of assets in his Cloudinary account and applies contextual metadata in the process for search engine optimization purposes. If you are building out your first portfolio to showcase your work, or just giving it a needed update, this is a DevJams episode you won't want to miss.
Learn More About Sean Morgan
- Portfolio Site
- GitHub
- 100 Days of Code
Mentioned Technologies
- React
- JavaScript
- Flexbox
- Heroku
- Cloudinary
- CSS Floats
- Simple React Lightbox
- Express
- Axios
- reportWebVitals
- Netlify
- Rubber Duck Debugging
Mentioned Cloudinary Features:
- Tags
- Metadata management
- Client-side asset lists
- f_auto
- q_auto
Find out in this DevJams episode how Jen Brissman - recent graduate from Hackbright Academy (and the newest member of Cloudinary's Customer Education team!) - built a fullstack web application for storing information and media from entertainment industry auditions as her capstone project. We cover how she incorporated frontend languages such as JavaScript, Flask and Python in the backend, APIs from Cloudinary and Twilio, and all tied together with a PostgreSQL database.
Learn More About the FollowSpot Project
- GitHub Repo
- Demonstration Video
- Hackbright Academy
Mentioned Technologies
- JavaScript
- jQuery
- HTML5
- CSS
- Bootstrap
- Python
- Flask
- SQLAlchemy
- Jinja
- Cloudinary
- Twilio
- Google Maps Platform
- Chart.js
- PostgreSQL
- Coverage.py
- CockroachDB
Mentioned Cloudinary Features:
- Upload API
- Auto Format (f_auto)
- Auto Quality (q_auto)
- Auto Resource Type
Follow Jen on LinkedIn
Adding SVGs and other vector graphics to your website can be somewhat tricky! But Oliver Nassar, co-founder of Iconduck and Stencil, was able to overcome the challenges associated with these files for his projects. Find out how he did it in this in-depth DevJams episode, using Cloudinary's transformations and other development tools.
Sign up for ImageCon 2021
Learn More About Iconduck
- IconDuck.com
- Feature on ProductHunt.com
- Post on Hacker News
- Twitter Account
Learn More About Mentioned Cloudinary Transformations
- Delivering in a different format
- Colorize
- Sanitize
Programs and Tools Mentioned
- Stencil
- Typesense
- ImageMagick
- Unsplash
- Noun Project
- Algolia
- Google Sheets
- Adobe Illustrator
- Zenlogin
- Material Design
- Font Awesome
- Figma
- Sketch
- Amazon EC2
- Amazon ElastiCache
- Cloudflare
- Postmark
Learn More About Vector Files
- Adobe "What is a vector file and how to use them"
- Cloudinary "Programmatically Convert Raster Images to Vector Graphics"
Follow Oliver Nassar, Our Episode Guest
- GitHub
Creating automation and streamlining tasks can be such a powerful way for developers to make a business impact. Kyle Calica-St, who is a Product Support Engineer at Postman, was able to combine Cloudinary, Dropbox and Postman's toolset to create a unified screenshot repository for all of his company's teams - Documentation, Support, Marketing and more. Find out how he developed this process through his conversation with Sam and Becky at Cloudinary for this DevJams episode.
Helpful Project Links
- Postman Collection-Cloudinary Dropbox Sync
- Project Blog Post
- Cloudinary Admin API's GET Resources
- Dropbox API's Save URL
Learn More About Cloudinary
- Cloudinary Programmable Media
- Cloudinary's Admin API
- Cloudinary's CLI Reference Guide
Learn More About Postman
- Postman Bootcamp
- Postman Monitors
- Postman Integrations
Follow Sam, Becky and Kyle
- Kyle on LinkedIn
- Sam on LinkedIn
- Becky on LinkedIn
Show music provided by Otis McDonald.
Not a Cloudinary user yet? Sign up for free!
With AWS Amplify, you can easily and quickly build your next full stack application. And by combining Cloudinary’s uploading and delivery capabilities for rich media assets, such as images and videos, you can launch something highly optimized and scalable in a few clicks. Find out how to start your next project in this DevJams episode, where we learn from Alex Patterson - AWS Community Builder and Cloudinary Media Developer Expert (MDE).
Demonstrated Project
- Blog Post
- GitHub Repo
Project Technologies
- AWS Amplify
- AWS AppSync
- AWS CloudFormation
- AWS Command Line Interface
- Amazon DynamoDB
- AWS Lambda
- Cloudinary React SDK
- Cloudinary Node.js SDK
- Cloudinary Upload Presets
- Cloudinary Upload Widget
- GraphQL
- JavaScript Functions
- Node.js
- NPM
- React.js
- WebSocket
Mentioned Technologies and Resources
- Amazon Cognito
- Amplify DataStore
- Amplify Framework Documentation
- AWS Amplify on Discord
- Angular
- Call functions via HTTP requests (HTTPS Triggers)
- CI/CD Pipelines
- Firebase
- Firebase Cloud Firestore
- Flutter
- Google Cloud Functions
- Jamstack
- Markdown
- MDX
- Next.js Image
Learn More about Alex’s Projects
- CodingCatDev
- CodingCatDev on Twitch
- CodingCatDev on Twitter
- CodingCatDev on YouTube
- AWS Community Builder
- Cloudinary Media Developer Expert
- Google Developer Expert
Show music provided by Otis McDonald.
Want to know how to dynamically develop Open Graph images and Twitter Cards for your JAMstack website? Check out this discussion between Ryan Filler and Cloudinary’s Customer Education team to see how it is possible, using Svelte, Sapper, Puppeteer and Netlify Functions.
Open Graph-related References
- Open Graph
- Usage by Discord
- Usage by Slack
- Usage by Apple in iMessages
- Unfurling Links in Slack
- Twitter Cards
- Alt Text in Open Graph
- Alt Text Support for Twitter Cards
- Twitter Card Validator
- Facebook Sharing Debugger
- IFramely
Mentioned Technologies
- JAMstack
- Jekyll
- Gatsby
- React
- Markdown
- Playwright
- Jest
- Bitbucket
- GitLab
- Netlify.toml
- Front Matter
- Base64
- HTMLImageElement - srcset
- Netlify Functions
- Glimmer
- Ember
Project Stack and Repo
- GitHub Repo
- Svelte
- Sapper
- Puppeteer
- Cypress
- Netlify
- AWS Lambda
- Cloudinary
- URLSearchParams
- Node-fetch on NPM
- Chrome-AWS-Lambda on NPM
Referenced Blog Posts and Documentation
- How to use Puppeteer in a Netlify (AWS Lambda) function by Ire Aderinokun
- Code examples on using local Chrome from Wes Bos
- Cloudinary Documentation on Public IDs
- Cloudinary Documentation on Asset Versions
- Cloudinary Documentation on resizing and cropping images
- Chris Biscardi’s course on building an Open Graph image generation API with Cloudinary, Netlify Functions, and React.
- A Greener Web
- Advantages of a JAMstack Architecture - Gatsby Documentation
- A Deep Dive into Sapper by Ryan Filler
Connect with Ryan
- Blog
Show music provided by Otis McDonald.
Not a Cloudinary user yet? Sign up for free!
Watch our hosts Sam Brace and Becky Peltz, as well as our special guest host Eric Portis, interview Chris Coyier about his recent development project. With Eleventy, Netlify, Puppeteer and Cloudinary's fetch capabilities, he was able to create a microsite for his famous CSS-Tricks.com site that showcases various coding fonts you can use. Find how he did it by watching this episode!
Show Notes and Links
Coding Fonts - Project Tech Stack and Links
- Project
- Project's GitHub Repository
- Blog Post on Project
- Documentation - Cloudinary's Fetch feature
- Documentation - Cloudinary's Auto Quality transformation
- Documentation - Cloudinary's Auto Format transformation
- Eleventy
- Puppeteer
- Nunjucks
- Netlify
cld-screenshot-create-upload - Project Links
- Project
- Project's GitHub Repository
Mentioned Sites and Projects
- CSS-Tricks
- CodePen
- Serverless.CSS-Tricks
- Conferences.CSS-Tricks
- Shop Talk Show
- Puppetry
- Introduction to Static Site Generators
- Try Puppeteer
- Netlify CMS
- WTF is JAMstack?
- GitHub Actions
- Git Large File Storage
- Cloudinary's Auto Upload feature
- Eric Portis' Eleventy Project
- Phil Hawksworth's Tweets
- Lighthouse
- Cloudinary's AVIF Support
Guests' Contact Information
- Chris Coyier's Personal Website
- Eric Portis' Personal Website
Show music provided by Otis McDonald.
After you're done watching, share this episode on your favorite social media channels and then send an email to support@cloudinary.com with a link to the post you shared. By doing so, you can earn one additional credit for your Cloudinary plan!
Not a Cloudinary user yet? Sign up for free!
In our first-ever DevJams episode, our hosts Sam Brace and Becky Peltz interview Hannah Kofkin about her recent development project. With React, Rails, Cloudinary and a PostgreSQL database, she was able to develop a recipe app that allows the user to control videos through voice control. Find how she did it by watching!
Show Notes and Links
Project Tech Stack
- React SDK documentation from Cloudinary
- Ruby on Rails SDK documentation from Cloudinary
- Official site for PostgreSQL
- Official site for Semantic UI
- Web Speech API documentation from MDN
- React Speech Recognition package from NPM
Mentioned Sites and Projects
- Tasty - Food videos and recipes
- Flatiron School
- freeCodeCamp
Guest's Projects and Contact Information
- Hannah's GitHub account
- Hannah's LinkedIn profile
- Medium.com post on project
Show music provided by Otis McDonald.
After you're done listening, share this episode on your favorite social media channels and then send an email to support@cloudinary.com with a link to the post you shared. By doing so, you can earn one additional credit for your Cloudinary plan!
Not a Cloudinary user yet? Sign up for free!