Blurred Placeholders Using BlurHash in Node.js with Cloudinary Custom Functions & Netlify
Learn how to add custom processing to a Cloudinary request by generating a BlurHash blurred placeholder image in a Netlify function. We'll walk through creating a new Netlify serverless function, testing it in Postman, and adding it to the Cloudinary build pipeline for a signed image request.
🧐 What's Inside
00:00 - Intro
00:18 - Tool we'll use including Cloudinary, Netlify Functions, & BlurHash
01:26 - Starting a new node project from scratch with npm and git
02:20 - Creating a new Netlify function API locally with the Netlify CLI
04:50 - Testing an API with Postman and simulating a Cloudinary Function request
07:25 - Reading a multi-part form request using lambda-multipart-parser
08:46 - Processing image data and converting to a BlurHash representation with BlurHash and Sharp
13:59 - Configuring function to return image data and headers for Cloudinary
16:17 - Deploying a serverless function to Netlify from GitHub
17:43 - Generating a signed image URL with Cloudinary that uses a custom remote function for processing
24:06 - Outro
💾 Code
https://github.com/colbyfayock/my-net...
🗒️ Read More
https://spacejelly.dev/posts/how-to-g...
🔔 Subscribe for more tech and developer videos
https://www.youtube.com/colbyfayock?s...
🐦 Get updates straight to your Twitter @colbyfayock
/ colbyfayock
📸 Catch the next stream live on Twitch @colbyfayock
/ colbyfayock
✉️ Or a newsletter right to your inbox!
https://www.colbyfayock.com/newsletter/
💝 Sponsor me for more free content like this!
GitHub: https://github.com/sponsors/colbyfayock
Other: [email protected]
👨🚀 Brought to by colbyfayock.com
https://www.colbyfayock.com
🎥 Want to know what A/V equipment I use?
https://www.colbyfayock.com/uses
🧰 More Resources
lambda-multipart-parser
https://www.npmjs.com/package/lambda-...
BlurHash Typescript
https://github.com/woltapp/blurhash/t...
sharp
https://www.npmjs.com/package/sharp
Cloudinary Custom Remote Functions
https://cloudinary.com/documentation/...
Cloudinary Node SDK
https://cloudinary.com/documentation/...
Helpful BlurHash Node-related GitHub Issues
https://github.com/woltapp/blurhash/i...
https://github.com/woltapp/blurhash/i...
🎼 Music
Music from Uppbeat (free for Creators!):
https://uppbeat.io/t/dope-cat/chilled...
License code: 5ZKSYHQZB3EDYVEX
#colbyfayock #cloudinary #netlify #serverless #imageprocessing #images #webdevelopment