Posts by Emma Alder

In modern web pages and platforms, a less than stellar user experience could lead to a significant drop in conversion. This can be said for media content, including videos and images. So how do you improve the user experience of video content on your application? This article outlines how to…

Modern web pages rely heavily on interactivity. These tasks include gathering data on user engagement, processing form submissions, and controlling media asset interactivity. In this tutorial, we’ll discuss how to utilize video event triggers to handle user interface changes in a Gatsby.js project. Sandbox This project was completed in a…

Transitions are vital ingredients that make a website stand out. They make for a great user experience and have been explored a great deal these last few years. This tutorial will walk you through handling video transitions in our web applications by building a Netflix-style video player using React Player…

Adding upload support, especially videos to websites and apps, comes with considerable research for new and experienced developers. “How to deal with file size and storage space for videos?”, “What standard video format should the upload support?“are some of the questions that might arise. This article shows you how to…

According to one of the leading companies specialized in market and consumer data, statista; the global film industry is more than a 42 billion U.S. dollar business. This projection has brought about the invention of new software, jobs, and specialized personnel to help improve the quality of videos and…

In modern e-commerce applications, customers demand tailor-made products and the ability to customize their shopping experience for products. With product variant customizations, customers can personalize the products themselves in online stores, exactly how they want them before purchase. This post outlines how to create a customizable product component on a…

When you watch a YouTube video, at the end, some cards appear on the screen suggesting other videos to watch. This article is going to walk through managing video events to create a similar experience for videos in React.js. Sandbox We completed this project in a Codesandbox and it’s…

A user’s avatar represents their identity and is one of the most frequently used UI elements. Despite it being a small-sized object, it has enormous power when used in websites and other web applications. Web applications like this that allow personalization enhance the user’s experience and establish a bond between…

Identification on the world wide web is a critical component that we connect with through various social media platforms. Gravatar, a service meaning Globally Recognized Avatar built by WordPress, provides a universal image that identifies you across the web. This image is proper, especially when you comment on blog sites…

Live streaming events have become more of the norm these last years. They give a sense of urgency to your content, boost online interaction between you and your users, and help reach a wider audience. This tutorial will walk through handling video player events by building a live event simulator…

Greeting cards are pieces of stiff paper or thin cardboard with text, illustrations, or photos, given on special occasions such as birthdays, anniversaries, holidays, e.t.c. This post will discuss building a holiday card generator for the Harvest Month, Thanksgiving, and Diwali holidays using Cloudinary and Nuxt.js. At the…

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…

Part 1 of this article describes how Nextvatar, a Gravatar service, works to enable users upload images and apply transformations to them. We covered the following: Installation of the Cloudinary React library Implementation of the Cloudinary Upload Widget Managing a connection to Cloudinary to retrieve an uploaded image’s image link…

Greeting cards are pieces of stiff paper or thin cardboard with text, illustrations, or photos, given on special occasions such as birthdays, anniversaries, holidays, e.t.c. This post will discuss building a holiday card generator for the Harvest Month, Thanksgiving, and Diwali holidays using Cloudinary and Next.js. At the…

A skit is popularly known as a short video about anything, having different video and sound effects. In this post, we will build a basic skit maker in Next.js that allows us to upload a video, add an audio clip, then add basic transformations to the resulting video. This part…

In the first part of this post, we discussed how to upload a video with an audio clip to make a skit (short video clip). In this tutorial, we will learn how to add further transformations to the video. The transformations will add text, a progress bar, blur, and crop…

A video blog (also referred to as a vlog) is a type of blog whose primary content is in video form. Video blogs provide a fun and interactive way to share tutorials, ideas, events, etc. In this article, you will learn how to create a video blog using NextJS and…

YouTube, Twitch, and TikTok are some of the most used platforms to promote and advertise products. According to Blog Hubspot, consumers prefer videos to images because videos give a better overview of the product. Shoppable Video is an e-commerce feature by Cloudinary that allows users to add “shoppable” items…

Gatsby.js is a front-end web technology that helps streamline making fast, search-engine friendly and secure websites. It does that using modern technologies like React and GraphQL. This post explores using product videos on an e-commerce store to engage and convert users. Care should be taken as videos not…