Blog - Page: 110

Introduction Whether it is for building a third-party service or a personal portfolio, we often find the need to present screenshots of websites in a presentable manner. In this tutorial, we learn how we can dynamically generate and frame website screenshots. Codesandbox The final project can be viewed on…

Introduction In an increasingly video-dependent world, the need for ensuring video format compatibility is increasing. In this video, we explore how we can programmatically change the video format. Codesandbox The final project can be viewed on Codesandbox. You can find the full source code on my Github repository.

Introduction With virtual and physical events happening every weekend, the need to have interactive features such as dynamic tag generators has increased. In this tutorial, we learn how we can generate virtual tags dynamically. This tutorial is fully inspired by Jamstack Conf’s badge maker. The resources and the designs…

Introduction Video subtitles provide a better viewing experience and also improve accessibility for persons with disabilities. Manually adding subtitles to videos, however, proves to be repetitive, boring, and a lot of work. Luckily, there’s a way we can automate this. In this tutorial, we’ll take a look at how to…

Introduction Video trimming is a common task nowadays as it is now the preferred media for content sharing. Short videos have taken the world by storm. Let us learn how to trim short videos from long videos programmatically as this is a requirement for interactive platforms. Codesandbox The final project…

Introduction Getting profile images seems like a simple task until we realize that most users just have normal solo photos of themselves. This means that they are not just headshots and the user’s face can be anywhere in the image. We thus need a smart way to obtain the headshots…

Introduction Extracting the audio track from existing videos can be very useful. This is for example when we want to make our video playlists accessible on the go in audio format. Without any server-side code, let’s explore how we can easily get audio tracks from videos. Codesandbox The final project…

Introduction When testing webpages, you may need to take a screenshot of that particular site programmatically. You can then use these screenshots to detect layout shifts, test different viewports, and more. In this brief tutorial, let’s take a look at how we can achieve this using Puppeteer, Cloudinary…

Customers of modern E-commerce systems, expect custom-made products and the option to see how their products will look before purchasing them. In this tutorial, we will use Next.js to create a product image zoom lens that allows us to zoom in on a product image while maintaining the anticipated image…