In this jam, we'll learn how to use one of HTML's responsive image features -  resolution switching to make images responsive across a range of device screens. We will be using Cloudinary to host, transform and generate different file formats and sizes of our image.

Responsive Images with Resolution Switching 

In this post, we'll learn how to embed an HTML5 video player on an HTML document and define custom controls that are independent of the browser defaults.

Build a Custom HTML5 Video Player with JavaScript

This article will walk you through the process of wrapping text around an image using the HTML and CSS methods.

Handle Text Wrap Around Images Using HTML and CSS

Add Movement to Your Landing Page with Videos

In this article, we'll look at how to optimize images for various screen sizes using the srcSet and sizes HTML attributes by building a simple photo album application with React. We will also take advantage of Cloudinary's URL transformation feature to automatically generate images of different sizes without duplicating or modifying the images for each screen size.

Image Optimization with Cloudinary

In this post, we will go through how to build customized video players using Cloudinary's JavaScript-based HTML5 video player.

Build Customized Video Players with React

The Media Sessions API provides a way to customize media notifications. Let’s imagine this scenario. You have multiple tabs opened with audio and videos playing on each of them and let’s say you want to pause the tab playing “N.Y State of Mind by Nas”, and you don’t want to go to that specific tab to pause the audio. You wished you had a way to control media playback right? That’s where Media Sessions API come in.

Modify Media Notifications with Media Sessions API

Understand how to use Cloudinary to handle adaptive bitrate streaming in your Next.js application. Adaptive bitratee Streaming is a video delivery technique that dynamically adjusts the quality of a video stream in real-time according to the available bandwidth.

Handle adaptive bitrate streaming

JavaScript frameworks can be used to move a number of DOM elements, or any other HTML element) around the page according to some sort of pattern determined by a logical equation or function. In this article, we demonstrate how to implement such a function

Animate an Object Movement with HTML/CSS/JS

Understand to use the Cloudinary video player to track and report video events and analytics to Google analytics.

Adding google analytics to a video in NuxtJS

Image lazy loading is a method of identifying resources (images) as non-critical until they’re needed. For example, a page wouldn’t load an image if it is not in the user’s viewport. The image will get loaded only when a user scrolls to it. Lazy loading does not reduce the image quality but improves the page load time by rendering resources only when needed.

How to Lazy Load Images in Plain HTML

This article demonstrates how to implement static maps image embedding with Google maps in Next.js. Google Maps is a web platform that offers satellite imagery, aerial photography, street maps, real-time traffic conditions, and route planning.

Static Maps Image Embedding with Google Maps

This article shows how to create a pie chart in Next.js

Create a Pie Chart in Next.js

Embed a video player in your project, handle player events like play, end, etc., with Cloudinary and finally add Netflix-Esque transitions with framer motion.

Adding Netflix-style video overlays Transitions with NuxtJS

This article is a walkthrough of how to make images on your webpage responsive using only HTML. This can be done using the SRCSET and <picture> methods.

Create Responsive Images in Plain HTML

Embed video players in your project with the Cloudinary API and learn how to handle player events to create Netflix-esque transitions with Vue2-animate library.


How to implement YouTube Post Video Transitions

This article will show how to create a bar chart in NuxtJS

Create a Bar Chart in NuxtJS

Live events are a great way to pass information in real time. This article discusses how to simulate live events in Nuxt.

Simulate a Streaming Event in NuxtJS

If you already know JavaScript, building a VR world doesn't mean you need to learn a different language. In this tutorial, we'll build a simple. interactive VR world that users can do things in with A-frame.

Build a Virtual World with User Input

How to set a favicon in your website in just 5 steps

In this article, we’ll discuss syntax, FormData API methods, usage, and some examples.

How the FormData Browser API works

When you're about to watch a YouTube video on a mobile device, at first, the video is on mute. Then you'd see a button at the top left corner for unmuting the video.

This article will walk you through implementing that feature using video events in Next.js.