DEV Community: Rebeccca Peltz

daily javascript challenge

Rebeccca Peltz — Wed, 01 Jan 2025 00:41:39 +0000

Stop Phishing by Analyzing the Bait

Rebeccca Peltz — Fri, 12 Jul 2024 21:10:44 +0000

CyberSecurityNews.com published a gif on X showing Top 8 Cyber Attacks 2024 last spring that shows the top 8 cybersecurity threats for 2024. This chart has popped up in many places. I like the way it's paired with Beethoven's Moonlight Sonata here:

Top 8 Cyber Attacks - 2024 [4K] - YouTube

Top 8 Cyber Attacks (2024):1. Phishing2. Ransomware3. Denial-of-Service (DoS)4. Man in the Middle (MitM)5. SQL Injection6. Cross-site Scripting (XSS)7. Zero-...

youtube.com

I've worked on product releases where we just scoured the front end to try to eliminate any HTML that might lead to a security issue

If you look closely at the list 3 out 8 of these attacks rely on front end software, that is, a vulnerability in the browser. Fullstack application developers can use this awareness to help prevent these problems. The list of attacks is shown below. Attacks 1, 5, and 6 are attacks that occur in the browser.

Phishing
Ransomware
Denial of Service (DoS)
Man-in-the-middle (MiTM)
SQL Injection
Cross Site Scripting (XSS)
Zero-Day Exploits
DNS Spoofing

Both Phishing and Cross Site Scripting rely on links that a user clicks on to carry out the attack. In the case of Phishing the link is in often in an email.

In this post, I'm going to focus on Phishing. Both Phishing and Cross Site Scripting are forms of Social Engineering that rely on the user's trust and possibly lack of knowledge. I'm going to focus on Phishing in this post because it is one of the most prevalent types of attack.

Companies are aware of the losses that result from cyber crimes, and instruct employees in what to look for to prevent attacks that involve links. However, the nature and attributes of the HTML anchor element that is used to create links might make it difficult for users to spot a problem with the link.

I've worked on product releases where the goal is rework any HTML that could create a vulnerability. But in the end, if you tell a user to 'hover over each link on the email and make sure that the underlying URL looks OK', you're asking a lot.

Let's look at the anchor tag attribute variations that might make it difficult for a user to just hover over the link to determine if the link is OK.

1. Expected Anchor Element.
The HTML anchor tag was created to make navigation between web
pages easier. The structure of a basic anchor element does
this includes a URL assigned to an href attribute and text
content that describes where the URL will navigate to.

```html
<a href="https://www.example.com" target="_blank">Example</a>
```

The design of the anchor element strongly suggests that the 
user shouldn't have to know what the URL is.  If the URL is to 
be known, it could be copied in the text content.  If all the 
URLs were spelled out, it would make for an unattractive and 
probably messy looking web page.  This variation is the most 
commonly used.  If the user hovers over `Example` they will see 
`https://www.example.com`.

2. Using onclick in an Anchor Element.
We can introduce more complex instructions into the anchor tag
by adding an onclick event handler and JavaScript. Here are
three examples of what we can do when we want to run some
JavaScript when the link is clicked. In all cases, hovering
over the link won't show you the onclick event.

**a. `onclick` returns false.**

When you the JavaScript in the onclick handler returns false, 
the navigation to the URL in href is not executed.  But if 
there is a problem from the JavaScript itself, it's too late 
once you've clicked on a link in which hovering over it showed 
a URL that was OK

```html
<a href="https://www.example.com" target="_blank" 
onclick="alert('hello'); return false;">Say Hello</a>
```

**b. `onclick` doesn't return false.**

If the `onclick` handler JavaScript code doesn't return false, 
then the link will navigate as intended.  Hovering over the 
link will return an OK URL and the code will navigate to the 
URL.  In this case, all will seem well, but if the JavaScript 
contained a problem, it's too late to fix it.

```html
<a href="https://www.example.com" onClick="alert('found me')" 
target="_blank">onClick me</a>
```

**c. anchor tag doesn't contain an href attribute.**  

If the `href` is not included in the anchor tag element will 
render without text decoration, but will still be clickable if 
an `onclick` is included.  For users that are used to clickable 
items showing some sign of click-ability like `text-decoration` 
or a CSS that style to clickable text to look like a button, 
there may be some confusion here.  A user instructed to hover 
over links would likely ignore clicking on this entirely.

```html
<a onClick="alert('found me')" target="_blank">onclick me</a>
```

3. No encryption in URL.

If the URL references a site that doesn't use encryption, like 
`http://www.example.com` vs. `https://www.example.com`, this 
could a raise a question.  These days browser will often 
encrypt the web page even if the scheme is `http`.  There are 
extensions and settings to make browsers automatically encrypt, 
but if the user hovers, and finds that HTTP instead of HTTPS is
used, this could be the sign of a problem.

```html
<a href="http://info.cern.ch/" target="_blank"
onclick="alert('my href is unencrypted but chrome will 
make it secure')"; 
return true;>info.cern.ch is unencrypted</a>
```

4. href refers to a URI with a javascript: pseudo scheme.

Although it's most common to see a scheme in a URI like 
`https:`, other schemes are in use.  For example `mailto:` and 
`tel:` are used to send message via email and SMS.  These 
schemes are followed by email addresses and telephone numbers. 
These are refereed to as URI's instead of URL's.  The scheme is 
provided an **identifier** instead of a **location**.  Both 
`mailto:` and `tel:` are visible when hovering on a link.  

It's also possible to use `javascript:` as a scheme.  It is 
then followed by a call to a function in the context of the 
HTML.  In the example below it is calling the function 
`doSomething`.  This will be visible upon hovering, but because 
the contents of the JavaScript code is not known, it may raise 
a question.

```html
<a href="javascript:doSomething()">Javascript me</a>  
```

I hope the examples above show how difficult it could be for a user to determine if a link in their email should be clicked on or reported as a possible threat. What's the solution?

Create a Browser Extension

What is needed is a full analysis and report on what is going on within the links on a webpage. There needs to be a way to quickly generate some information that shows the links without hovering and provides alerts as to which links may have some unexpected attribute settings. We need a Phish Bait analyzer report. It would be nice if browsers had this feature, but until they do we can create a Chrome extension to do it.

I created an extension named Link Reveal and published it in the Chrome Web Store. I'm not the only one that thought of this. If you search the Store for terms like "link" or "phish", you'll find many extensions that relate to the anchor tag. If you're interested, you can also look at the code. There are a couple of test pages you can use:

Page with a lot of different anchor tags.

Page with no anchor tags.

Learn More About Cybersecurity

The chart below shows that phishing is on the rise.

credit: phishing-statistics

Cybersecurity awareness is important for developers. I joined ICS2 and learned a lot.

See this guide for creating and publishing the browser extension described in this post.

Earth Day Frontend Challenge

Rebeccca Peltz — Wed, 24 Apr 2024 18:19:02 +0000

code
demo

Dynamically Inserting Video/Image

I used JavaScript to dynamically insert a Video on larger viewports and an image for smaller view ports. I organized the HTML with flexbox.

There were some challenges organizing the HTML for styling. Thinking about container layouts is helpful when writing HTML.

The video is from Pexels and there is a credit in the code README.

Earth Day Frontend Challenge

Rebeccca Peltz — Wed, 24 Apr 2024 18:19:02 +0000

code
demo

Dynamically Inserting Video/Image

I used JavaScript to dynamically insert a Video or larger viewports and an image for smaller view ports. I organized the HTML with flexbox.

There were some challenges organizing the HTML for styling. Thinking about container layouts is helpful when writing HTML.

The video is from Pexels and there is a credit in the code README.

Recipe Generator

Rebeccca Peltz — Fri, 12 Apr 2024 01:52:03 +0000

This is a submission for the Cloudflare AI Challenge.

What I Built

Looking up a recipe on the web can take a lot longer than you would link. The ingredients and the instructions are often buried in a blog with a lot of ads popping up throughout.

In this application, using Cloudflare models for text and image generation, you can ask for a recipe based on a food category and a description. The food category is used to enhance the prompt, instead of just allowing an open ended text input for the user to describe the recipe they are looking for.

Demo

https://recipe-generator.rebeccapeltz.workers.dev/

My Code

https://github.com/rebeccapeltz/recipe-generator

Journey

I've been frustrated with Recipe websites, so I'm using Cloudflare AI Web Workers to generate recipes. You no longer need to read a blog and close obstructing ads to get to the recipe. The recipe can be printed without having to make a lot of decisions about what to print.

I was inspired by an early submission: Story and Image Generator

I set my code up a little differently, but I'm using the same AI models as the story generator.

I wanted to make the prompt a little more structured so I'm having the user choose a category and then add a description. I could enhance this by adding more categories. I wanted to get away from a open ended prompt.

Multiple Models and/or Triple Task Types

Im using "@hf/thebloke/llama-2-13b-chat-awq" for the recipe and "@cf/bytedance/stable-diffusion-xl-lightning" to generate the image of the what the recipe will prepare.

Form Processing

Rebeccca Peltz — Mon, 01 Apr 2024 03:04:31 +0000

This is a submission for DEV Challenge v24.03.20, Glam Up My Markup: Camp Activities

What I Built

I created a form that process data about a camp goer's interest, allergies and general info.

Demo

The code is in replit.com:

Front end form processing

Journey

I didn't notice at first that the works was "Which camp activities" was plural. After I saw that, I changed my select to allow for multiple selections. If this was full stack, I would have set up a way to search google for items entered in the form.
Since it's Easter, you get a bunny when you submit.

https://dev.to/@rebeccapeltz

Using Web APIs to Create a Camera Application

Rebeccca Peltz — Wed, 25 Oct 2023 04:04:14 +0000

code
demo

I enjoy working on applications that connect the physical and digital worlds. I'll show you how to build a camera application in this post.

Web APIs

If you were working as a web developer in 2010, you might remember the blog post in A List Apart that introduced the idea of Responsive layouts to a community that was wondering how to work with so many devices and screen sizes. Media queries, fluid layouts, and flexible images allowed developers to create "m-dot" websites like https://m.mydomain.com which were served to mobile browsers. CSS has continued to evolve to address the needs of mobile web development.

Native frameworks and languages that could take advantage of the technology available only on mobile devices like cameras and GPS sensors and the ability to provide access without network service led to applications with features not available in web applications. The mobile user could use cameras to take pictures, GPS to navigate the roads, and access the application even when no network was available.

Over that last decade, the W3C's Web Applications Working Group has created specs that, when implemented in a browser, enable web developers to create many of the features found on mobile devices. In this blog, I will describe how to create a web application that makes it easy for a user to take a picture on a desktop or mobile device and then download or share it using Web APIs.

Web APIs vary with the implementation per browser. It is wise to check caniuse.com to verify that the browsers we expect our application to run in are supported. Often, additional research or experimentation is needed to see differences in implementation.

A Camera Application for Desktop and Mobile

The images below demonstrate the operation of the camera. Buttons are enabled based on the state of the camera. Access the camera demo here, and try it out before digging into the code.

Press Start to Open the Video CameraPress Snapshot to Take a PicturePress Flip Location to Swap the Location of the Video and Canvas ContainersFlip Camera Location is Helpful on a Mobile DeviceBack and Front-Facing Devices on a Mobile Phone

Let's see how to create this web application using Web APIs.

Web APIs

Documentation of Web APIs and interfaces is located on the MDN (Mozilla Developer Network) website. The term "Web API" can refer to browser or server APIs. In this article, it refers to Browser APIs.

The Web API Camera Application is built using these Web APIs:

DOM
HTML DOM
Media Capture and Streams
Canvas
Web Share
Permissions

We'll also see how browser permissions require a response from the user because they must allow the application to access hardware.

DOM and DOM HTML

The DOM (Document Object Model) is the first Web API. The interfaces in the DOM are accessible using JavaScript. Styling is provided by Cascading Stylesheets (CSS).

The DOM is a data structure the browser constructs when it parses HTML. This structure represents a Document. The Document object is loaded into the Window object. The Document and Window provide the interfaces for querying and maintaining the application in the browser.

The camera application uses JavaScript to interact with the DOM. This interaction includes adding and removing elements, adding and removing styles, and firing events when the user interacts with the Document.

The application comprises a set of buttons turned on and off according to what the user can do at any given time. The image created from the video stream is drawn onto a canvas HTML element.

The application consists of five buttons enabled based on the user's interaction with the Document. The Start button reveals a container loaded with a video stream, representing the camera view. The first time the user opens the video stream, there will be a prompt for permission because of a request to access media devices. A select element is loaded and displayed. A single option will open a back-facing camera if the application is run on a desktop computer. On a mobile device, there will also be an option to use a front-facing camera. Some mobile devices have multiple back and front cameras, and all these options will be available.

When the user clicks the Snapshot button, a container with a canvas element is revealed, and the current video frame is loaded into the canvas element. This also enables the Download button and displays a Share button. If the browser is allowed to Share, clicking this button will open up sharing options using different network applications like email and messaging. The Download button downloads the image to the local hard drive. Finally, a Stop button turns off all the other buttons and hides the containers while enabling the Start button.

DOM Click Event Listeners

The code below shows how to initialize the buttons when the Document is loaded. The DOMContentLoaded event is fired after the HTML tags have been parsed and the elements rendered. We use the querySelector interface to get references to DOM HTML elements identified by their id or class name.

document.addEventListener("DOMContentLoaded", (e) => {  
 ...  

  // set video  
  data.videoEl = document.querySelector("#video");  
  data.canvasEl = document.querySelector("#canvas");  

  // attach click event listeners  
  document.querySelector("#camera").addEventListener("click", (e) => {  
    start();  
  });  
  document.querySelector("#snapshot").addEventListener("click", (e) => {  
    snapShot();  
  });  
  document.querySelector("#stop").addEventListener("click", (e) => {  
    stop();  
  });  
  document.querySelector("#download").addEventListener("click", (e) => {  
    download();  
  });  
  document.querySelector("#share").addEventListener("click", (e) => {  
    share();  
  });  
  document.querySelector("#flip").addEventListener("click", (e) => {  
    flip();  
  });  

 ...  
});

DOM Adding and Removing Elements

The video device selector that allows users to select front or back-facing cameras on mobile devices is dynamically loaded based on the available devices. Once we have found available devices, we can add them to the DOM using document.createElement and appendChild to load the Select element options.

 let option = {};  
  option.text = device.label;  
  option.value = device.deviceId;  
  data.options.push(option);  
  var selection = document.createElement("option");  
  selection.value = option.value;  
  selection.text = option.text;  
  document.querySelector("#device-option").appendChild(selection);

The Download functionality is implemented using hidden anchor tags, which are added and removed as needed.

// add a link  
 let a = document.createElement("a");  
 document.querySelector("body").append(a);  

// remove  
 document.querySelector("body").remove(hiddenLink);

DOM Adding and Removing Styles

As the user moves through the steps needed to access the camera, take a Snapshot, and then download or share, elements are displayed and hidden using two different classes.

The hidden class is display:none which means that when this class is added to an element, it is removed from the DOM. This is used to hide and show the video and canvas containers. The canvas container holds the Snapshot.

function hide(id) {  
  let el = document.querySelector(\`#${id}\`);  
  if (!el.classList.contains("hidden")) {  
    el.classList.add("hidden");  
  }  
}  
function show(id) {  
  let el = document.querySelector(\`#${id}\`);  
  if (el.classList.contains("hidden")) {  
    el.classList.remove("hidden");  
  }  
}

The hidden-link class uses visibility:hidden which leaves the element in the DOM, but it is not visible. This hidden anchor tag will enable the download of the Snapshot.

 a.classList.add("hidden-link")

The Flip button, made visible when the user clicks on Snapshot, causes the video and canvas containers to change location. This is especially helpful on a mobile screen if you want to look at the image after you've created a Snapshot. The canvas container is initially rendered to the right or below the video container on a smaller viewport.

The video and canvas containers are rendered using the display: flex command. We add toggle logic to flip the containers by adding and removing the CSS command.

if (videoCanvasContainer.classList.contains("flex-row")){  
    videoCanvasContainer.classList.remove("flex-row");  
    videoCanvasContainer.classList.remove("flex-wrap");  
    videoCanvasContainer.classList.add("flex-row-reverse");  
    videoCanvasContainer.classList.add("flex-wrap-reverse");  
  } else{  
    videoCanvasContainer.classList.remove("flex-row-reverse");  
    videoCanvasContainer.classList.remove("flex-wrap-reverse");  
    videoCanvasContainer.classList.add("flex-row");  
    videoCanvasContainer.classList.add("flex-wrap");  
  }

Managing State for the Application

The JavaScript for this application can be found in a single file: script.js. The application is both data and user-driven. User actions result in system changes maintained in a JavaScript object.

const data = {  
  videoEl: null,  
  canvasEl: null,  
  fileData: null,  
  currentStream: null,  
  constraints: {},  
  selectedDevice: null,  
  options: \[\],  
};

Navigator

The Navigator interface is accessible from the Windows object. The Navigator gets information about the user request in the User Agent (UA) header. The UA represents the person making the request. The UA header is a string that provides information like this :

Mozilla/5.0 (Macintosh; Intel Mac OS X 10\_15\_7)   
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36

We'll use the Navigator to access the user's media stream. We can discover our users' video and audio devices from the media stream. For this camera application, we'll be interested in the video devices.

Permissions

The Media Capture and Streams API, which opens up the video stream in the video container, can query the Permissions API to determine if the user allows the application access to the video.

The rule for prompting for permission when the navigator.getUserMedia function is called varies among browsers. The image below shows the user permission request on Safari. The choice to allow access to the camera will remain in effect on Safari until there is a page refresh. On Chrome, the permission remains in effect between page loads.

Media Capture and Streams

The Media Capture and Streams API is part of the Web Real Time Communication API (WebRTC). WebRTC is used for user video and audio communication. We'll use just the video capture to provide a stream of video frames from which we can create a Snapshot.

In the Start function, we call a getDevices() function. This function aims to discover the devices available and load them in the Video Device Select element.

async function getDevices() {  
  // does the browser support media devices and enumerateDevices?  
  if (!navigator.mediaDevices || !navigator.mediaDevices.enumerateDevices) {  
    console.log("enumerated devices not supported");  
    return false;  
  }  

  // call getUserMedia to trigger check and prompt for permissions  
  await navigator.mediaDevices.getUserMedia({ video: true });  

  // get the list of video devices  
  let allDevices = await navigator.mediaDevices.enumerateDevices();  
...

Initial Selected Device

Once the devices are loaded, we set them selectedDevice to the first, and sometimes only, device in the list. Recall that the desktop video is not back-facing.

Next, we place constraints for the video stream we will render. The setConstraints function will be called when the user first clicks Start and later when they select different devices if multiple devices are available.

function setConstraints() {  
  const videoConstraints = {};  
  videoConstraints.deviceId = {  
    exact: data.selectedDevice,  
  };  

  data.constraints = {  
    video: videoConstraints,  
    audio: false,  
  };  
}

Once the constraints are set, the getMedia function is called to start streaming media from the device's camera. The stream window.stream is bound to the video element.

async function getMedia() {  
  try {  
    data.stream = await navigator.mediaDevices.getUserMedia(data.constraints);  
    window.stream = data.stream;  
    data.currentStream = window.stream;  
    data.videoEl.srcObject = window.stream;  
    return true;  
  } catch (err) {  
    throw err;  
  }  
}

With the video streaming, the Start button is disabled, and the Snapshot and Stop buttons are enabled.

if (resultMedia) {  
    disableBtn("camera");  
    enableBtn("stop");  
    enableBtn("snapshot");  
  }

Device Change

If the user has the option to change the selected device, the deviceOptionChange function calls deviceChange to stop the camera, close the canvas container, and then call getMedia to reopen the camera using the newly established device.

async function deviceChange() {  
  stopVideoAndCanvas();  
  setConstraints();  
  const result = await getMedia();  
  console.log("device change:", result);  
}

Calling GetMedia Twice

You may have noticed that the GetMedia function is called twice when the user presses Start. To access devices from the Navigator, the user must get permission. The function call to getUserMedia triggers the permission prompt*:*

 await navigator.mediaDevices.getUserMedia({ video: true });

We want to get the list of devices before loading the video, so the first call to getUserMedia takes care of access to the devices. We use the selected device to set the constraints that provide the video stream. The second call opens the video stream and assigns it to our data state.

data.stream = await navigator.mediaDevices.getUserMedia(data.constraints);

Snapshot

We'll use the Canvas API and element to create a snapshot. The Snapshot is made from the video stream frame visible when the Snapshot button is pressed.

When the user clicks Snapshot, we show the canvas container and the Flip button. Clicking on the Flip button when using a mobile device makes it easier to see what was captured from the video stream.

The canvas HTML element is assigned a width and height equal to the dimensions of the video element. We then use the Canvas API to draw a 2-dimensional image from the video element onto the canvas element. The signature we use passes the video element (image), dx (horizontal distance of the image from the left side of the canvas container), dy (vertical) distance of the image from the top of the canvas container, the width of the container, and the height of the container.

drawImage(image, dx, dy, dWidth, dHeight)

Finally, we use the toDataURL to capture the data that makes up the frame from the video. Looking at the string created, we can see the type and then base64 values that represent the image.

data:image/jpeg;base64,/9j/4AAQSk...

function snapShot() {  
  show("canvas-container");  
  show("flip-button");  
  data.canvasEl.width = data.videoEl.videoWidth;  
  data.canvasEl.height = data.videoEl.videoHeight;  
  data.canvasEl  
    .getContext("2d")  
    .drawImage(data.videoEl, 0, 0, data.canvasEl.width, data.canvasEl.height);  
  data.fileData = data.canvasEl.toDataURL("image/jpeg");  
  let hiddenLinks = document.querySelectorAll(".hidden\_links");  
  for (let hiddenLink of hiddenLinks) {  
    document.querySelector("body").remove(hiddenLink);  
  }  
  enableBtn("download");  
  enableBtn("share");  
}

Download

We're using a hidden link to download the image. This technique involves creating a hidden anchor tag with a download attribute and programmatically clicking it. We start by removing any previously hidden links.

Then, we use the DOM API to add a new anchor element to the Document. We set the hypertext reference hrefto the data from the image and the textContent to none . We set thetarget to _blank , an unnamed window, because we are not navigating anywhere. We sent the download element to a filename. The download attribute tells the browser to respond to a click event by downloading the data in the href . By calling the anchor tag's click event, we trigger the download of the image.

function download() {  
  // cleanup any existing hidden links  
  let hiddenLinks = document.querySelectorAll(".hidden\_links");  
  for (let hiddenLink of hiddenLinks) {  
    document.querySelector("body").remove(hiddenLink);  
  }  

  if (data.fileData) {  
    let a = document.createElement("a");  
    a.classList.add("hidden-link");  
    a.href = data.fileData;  
    a.textContent = "";  
    a.target = "\_blank";  
    a.download = "photo.jpeg";  
    document.querySelector("body").append(a);  
    a.click();  
  }  
}

Web Share

The Share API allows web applications to share images and text. This API doesn't work in Chrome Desktop but does work in Safari, Edge, and Android Chrome. You can see in the image below, taken from an instance of Safari on a Mac, that it will allow you to share the Snapshot to Mail, Message, AirDrop, Notes, Photos, Reminders, and Simulator. This is an instance where caniuse.com can help plan the feature set for an application.

What's Next?

New features, JavaScript frameworks, and enhanced styling will help to build a better camera application. While the processing of composing an application using Web APIs can be an end in itself, it's also worth noting that this application is waiting for a step up.

Modifying the Image

Offer options to modify the image drawn into the canvas element. This example shows you how to convert the image to grayscale.

Modifying Exif Data

Use the Geolocation API to get the latitude and longitude of the data. Then, a library like exif-js adds this data to the image before downloading or sharing it.

Port the Code

Port the code from this camera application to React, Angular, or Vue. This is always a good exercise and will result in a better understanding of the state and logic.

Style

Look for ways to improve the layout and usability of this application.

Take Some Pictures

Use the camera you create. Find out if there are any features you would like to add and add them!

React 18 + React Router v6 + Sidebar Navigation and a Sandpack Component

Rebeccca Peltz — Sun, 29 Jan 2023 21:12:24 +0000

code

demo

I take advantage of the ease of not having to set up a router for React by using Next.js. Sometimes, Next.js is not the appropriate framework because mixing SSR with components that contain frames or otherwise interact with the window object causes a lot of extra steps. That’s when I turned in a different direction and installed React with the React Router.

I needed to set up a React application with routing and a component that accesses a frame. My project uses Sandpack, which creates a frame element connected to codesandbox.io. I dove into the current documentation on React 18 and how to integrate the v6 React Router with it. It was confusing, so I want to share what I ultimately came up with. I’m also using tailwind because I like this sidebar for Next.js, and it uses tailwind.

Create React App

You’ll start by running npx create-react-app test-app. Look at your

src/index.js.

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
 <React.StrictMode>
   <App />
 </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Replace the code above with the code below

index.js.


import React from 'react';

// import ReactDOM from 'react-dom';
import './index.css';
import App from './App';

// );
import { createRoot } from 'react-dom/client';
const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(
   <App />
);

Your App.js should look like this:

import logo from './logo.svg';
import './App.css';


function App() {
 return (
   <div className="App">
     <header className="App-header">
       <img src={logo} className="App-logo" alt="logo" />
       <p>
         Edit <code>src/App.js</code> and save to reload.
       </p>
       <a
         className="App-link"
         href="https://reactjs.org"
         target="_blank"
         rel="noopener noreferrer"
       >
         Learn React
       </a>
     </header>
   </div>
 );
}
export default App;

We’ll also be replacing the code in App.js, but first, let’s decide on some routes and install the React Router: react-router-dom.

Install and Configure Router

For simplicity, we’ll create the three routes we are familiar with: Home, About, and Contact. These represent three pages in our single-page app.

These pages can be created by just adding src/Home.js, src/About.js, and src/Contact.js. They all have the same code other than self-identifying text. Repeat what you see for About.js and Contact.js and change the H1 element text to identify as “About” or “Contact”

.js

function Home() {
   return (
     <div>
       <h1>This is the home page</h1>
     </div>
   );
 }
  export default Home;

Now we have three routes. The Home page will be accessed as “/”, the About page will be accessed as “/about”, and the Contact page will be accessed as “/contact”. With this mapping understood, we can create our Route configuration and Sidebar navigation.

33 Install react-router-dom

Start by adding the router to your project:

npm install react-router-dom

Now replace the code in your App.js with this:

import { Routes, Route, BrowserRouter } from "react-router-dom"
import Home from "./Home"
import About from "./About"
import Contact from "./Contact"
import Layout from "./components/Layout";

function App() {
 return (
   <div className="App">
     <BrowserRouter>
       <Routes>
         <Route element={<Layout />} >
           <Route path="/" element={<Home />} />
           <Route path="about" element={<About />} />
           <Route path="contact" element={<Contact />} />
         </Route>
       </Routes>
     </BrowserRouter>
   </div>
 )
}

export default App

Notice that we wrap the individual Routes in a singular Route component. Then we wrap the Route component in a BrowserRouter component. For the Home page route, we use “/” to indicate the path. For the non-root paths, we just use the path's name without a “/”.
This seems simple now, but it took me a lot of trial and error until I came across this blog which helped a lot.

To build on what the blogger helped me with, let me show you how to add sidebar navigation and Sandpack, which is helpful if you want to manage code sandboxes on your website.
Create Sidebar Navigation
As mentioned above, this Sidebar component is adapted from a blogger’s Next.js sidebar. It uses React Router, which means you will need to use the <Outlet /> component to provide a place for your page to render as you navigate through the sidebar. Read more about the Outlet component here.

The Layout component that container sidebar navigation relies on tailwind. Here are the steps to getting tailwind installed.

Tailwind Install

npm install -D tailwindcss

Create the config files which include tailwind.config.js and postcss.config.js.

npx tailwindcss init -p

These file should look like this:

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
 content: [
   "./src/**/*.{js,jsx,ts,tsx}",
   "./public/index.html",
 ],
 theme: {
   extend: {},
 },
 plugins: [],
}

postcss.config.js
module.exports = {
 plugins: {
   tailwindcss: {},
   autoprefixer: {},
 },
}

Then add

@tailwind base;
@tailwind components;
@tailwind utilities;

to your src/index.css file.

If you’re using Visual Studio Code and it flags the entries above, you can get the PostCSS Language Support extension to clear that up.

Now we’re ready to write the code for the Layout component.

Layout with Sidebar Navigation and Outlet “Placeholder”

Here’s the code I used to create the Layout component that includes NavLinks and Outlet from the React router.

It’s helpful to create an array of data about your routes and use the JavaScript map command to create the navigation code.

import { NavLink, Outlet } from "react-router-dom";
export default function Layout() {
   const testMenuItems = [
       {
           href: '/',
           title: 'Introduction',
       },
       {
           href: 'about',
           title: 'About',
       },
       {
           href: 'contact',
           title: 'Contact',
       }
   ];

   <li><NavLink to="/">Home</NavLink></li>
   return (
       <div className='min-h-screen flex flex-col'>
           <header className='bg-gray-200 text-black sticky top-0 h-14 flex justify-center items-center font-semibold uppercase'>
               Cloudinary Actions
           </header>
           <div className='flex flex-col md:flex-row flex-1'>
               <aside className='bg-gray-100 w-full md:w-60'>
                   <nav>
                       <ul>
                           {testMenuItems.map(({ href, title }) => (
                               <li className='m-2' key={title}>
                                   <NavLink to={href} >
                                       <p className={'text-black'}>{title}</p>
                                   </NavLink>
                               </li>
                           ))}
                       </ul>
                   </nav>
               </aside>
               <main className={'flex-1'}>
                   <Outlet />
               </main>
           </div>
       </div>
   );
}

Add a Sandpack Component

Now, the whole reason I got into adding a router is to use React with routing on pages that contain the Sandbag component provided by codesandbox.io. I want to host my own code sandboxes. I’m so pleased that codesandbox.io is making this possible.

Here’s a sample Sandpack component. It produces two code sandboxes on a web page. These sandboxes can be modified, and the code can be run by the user. I’m a curriculum developer at Cloudinary, so they are used to create image elements. Notice that you don’t need to install the Cloudinary library to have Sandbag run Cloudinary code because the codesandbox.io frame will take care of that. There’s a lot of code in the component below because I’ve set up two sandboxes for this page, and I’m trying out Sandbag options.

npm install @cloudinary/url-gen

CldSample Component

import '../App.css';
import { Sandpack } from "@codesandbox/sandpack-react";

const cloudinaryAdvancedImage = `
import {AdvancedImage} from '@cloudinary/react';
import {Cloudinary} from "@cloudinary/url-gen";
import {Transformation} from "@cloudinary/url-gen";
export default function App() {
 const cld = new Cloudinary({
   cloud: {
     cloudName: 'demo'
   }
 });
 const myImage = cld.image('front_face');
 // return <h1>Hello Sandpack</h1>
 return (
   <div>
     <AdvancedImage cldImg={myImage} />
   </div>
 )
}`

const cloudinaryAdvancedImageWithTransformations = `
import {AdvancedImage} from '@cloudinary/react';
import {Cloudinary} from "@cloudinary/url-gen";
import {Transformation} from "@cloudinary/url-gen";

// Import required actions.
import {thumbnail, scale} from "@cloudinary/url-gen/actions/resize";
import {byRadius} from "@cloudinary/url-gen/actions/roundCorners";
import {sepia} from "@cloudinary/url-gen/actions/effect";
import {source} from "@cloudinary/url-gen/actions/overlay";
import {opacity,brightness} from "@cloudinary/url-gen/actions/adjust";
import {byAngle} from "@cloudinary/url-gen/actions/rotate"

// Import required qualifiers.
import {image} from "@cloudinary/url-gen/qualifiers/source";
import {Position} from "@cloudinary/url-gen/qualifiers/position";
import {compass} from "@cloudinary/url-gen/qualifiers/gravity";
import {focusOn} from "@cloudinary/url-gen/qualifiers/gravity";
import {FocusOn} from "@cloudinary/url-gen/qualifiers/focusOn";
export default function App() {
 const cld = new Cloudinary({
   cloud: {
     cloudName: 'demo'
   }
 });
 const myImage = cld.image('front_face');
 // Apply the transformation.
 myImage
 .resize(thumbnail().width(150).height(150).gravity(focusOn(FocusOn.face())))  // Crop the image.
 .roundCorners(byRadius(20))    // Round the corners.
 .effect(sepia())  // Apply a sepia effect.
 .overlay(   // Overlay the Cloudinary logo.
   source(
     image('cloudinary_icon_blue')
       .transformation(new Transformation()
       .resize(scale(50)) // Resize the logo.
         .adjust(opacity(60))  // Adjust the opacity of the logo.
       .adjust(brightness(200)))  // Adjust the brightness of the logo.      
   )
   .position(new Position().gravity(compass('south_east')).offsetX(5).offsetY(5))   // Position the logo.
 )
 .rotate(byAngle(10))  // Rotate the result.
 .format('png');   // Deliver as PNG.
 return (
   <div>
     <AdvancedImage cldImg={myImage} />
   </div>
 )
};`
export default function CldSample() {
   return (
       <div className="code-container">
           <h1>Cloudinary Transformations</h1>
           <h2>Render an Image with Advanced Image</h2>
           <Sandpack
               // You can change these examples!
               // Try uncommenting any of these lines
               theme="dark"
               // theme="light"
               // theme="auto"
               template="react"
               files={{
                   "/App.js": cloudinaryAdvancedImage,
               }}
               customSetup={{
                   dependencies: {
                       "@cloudinary/react": "^1.9.0",
                       "@cloudinary/url-gen": "^1.8.7",
                   },
               }}
               options={{
                   showNavigator: true,
                   showTabs: true,
                   showLineNumbers: false, // default - true
                   showInlineErrors: true, // default - false
                   wrapContent: true, // default - false
                   editorHeight: 350, // default - 300
                   editorWidthPercentage: 60, // default - 50
                   autorun: false,
                   recompileMode: "delayed", //default is immediate
                   recompileDelay: 300,
                   resizablePanels: true, //default
               }}
           />
           <h2>Create Transformations</h2>
           <Sandpack
               // You can change these examples!
               // Try uncommenting any of these lines
               theme="dark"
               // theme="light"
               // theme="auto"
               template="react"
               files={{
                   "/App.js": cloudinaryAdvancedImageWithTransformations,
               }}
               customSetup={{
                   dependencies: {
                       "@cloudinary/react": "^1.9.0",
                       "@cloudinary/url-gen": "^1.8.7",
                   },
               }}
               options={{
                   showNavigator: true,
                   showTabs: true,
                   showLineNumbers: false, // default - true
                   showInlineErrors: true, // default - false
                   wrapContent: true, // default - false
                   editorHeight: 350, // default - 300
                   editorWidthPercentage: 60, // default - 50
                   autorun: false,
                   recompileMode: "delayed", //default is immediate
                   recompileDelay: 300,
                   resizablePanels: true, //default
               }}
           />
       </div>
   )
}

This is what your page will look like if you get this running.

I hope this helps anyone working with React 18 and the React Router

Project Structure

Webhook-Driven Email Notifications for Media Management

Rebeccca Peltz — Sat, 12 Mar 2022 18:08:50 +0000

Building low-code flows with APIs is steadily gaining popularity, and related application platforms abound. Developers would find it a plus to gain the expertise of using low-code to implement webhooks, that is, APIs that effectively “hook” features together in different systems.

This article shows you how to build a webhook API and deploy it in a Netlify Function. The webhook API is called by the Cloudinary Upload API when a long-running process completes. The webhook API forwards the response via email to designated parties. Specifically, you run a script—an asynchronous process—to apply the transformations in preparation for the deployment of the video with adaptive bitrate (ABR) streaming. To enable you and other parties concerned to know when the process completes, the webhook API notifies you by email of the status—along with the URLs of the derived video files.

The Problem: We Need to Get Notified When a Process Completes
Design a Webhook API for Media Processing With the SendGrid API
Code and Deploy a Webhook API With Node.js and Netlify Functions
Test the Upload Script
Secure the Media-Processing Webhook

The Problem: We Need to Get Notified When a Process Completes

Video processing can take time to complete. We run a script to create the transformations for serving up a video with Adaptive Bitrate Streaming (ABR)—a process that runs asynchronously. After executing the script, we get a response from Cloudinary that the transformations are proceeding. Ideally, add a notification URL to the script so that we can tackle other tasks during the process, assured that we'll be notified when the process is complete and the video is deployment ready.

Let’s code a webhook API and deploy it in a Netlify function. That API receives the upload response and emails it to the parties in a recipient list.

Design a Webhook API With the SendGrid API

We can find out if a long-running asynchronous process has completed by means of webhooks. This flowchart illustrates the automated steps:

Here’s a more detailed rundown:

We execute a script that calls the Cloudinary Upload API and that applies eager transformations, which generate derived video files. The script also specifies the eager_async option. Since the upload process runs asynchronously, we need not wait for it to complete. Finally, we specify in the script a notification URL, i.e., a webhook that forwards the response in an email. Thus, when eager processing is complete, the response posts to the URL.

Asynchronous processing creates the manifest files and the HLS video-fragment files required for ABR streaming. Below is the code built with Cloudinary’s Node.js SDK for asynchronous processing. If you want to run this script, you would replace the <WEBHOOK> with a URL.

cloudinary.uploader.upload(
'https://res.cloudinary.com/cloudinary-training/video/upload/v1626130641/mountain.mov',
   {
       resource_type: 'video',
       type: 'upload',
       eager: [
         { streaming_profile: 'full_hd', format: 'm3u8' },
         {
           format: 'mp4',
           transformation: [{ quality: 'auto' }],
         },
       ],
       eager_async: true,
       eager_notification_url: '<WEBHOOK>',
   }
 )

When processing is complete, Cloudinary posts the response to the webhook API. The response contains the URLs of the derived files. A sample response that we would see in the email is shown below

{
  "notification_type": "eager",
  "timestamp": "2022-03-12T17:41:22+00:00",
  "request_id": "c8450346e4d31ff9b3b7b4e169aecb26",
  "eager": [
    {
      "transformation": "sp_full_hd/m3u8",
      "bytes": 1007,
      "format": "m3u8",
      "url": "http://res.cloudinary.com/ac-self-service/video/upload/sp_full_hd/v1647106802/e7osszr9rn0zx43vuysm.m3u8",
      "secure_url": "https://res.cloudinary.com/ac-self-service/video/upload/sp_full_hd/v1647106802/e7osszr9rn0zx43vuysm.m3u8"
    },
    {
      "transformation": "q_auto/mp4",
      "width": 1280,
      "height": 720,
      "bytes": 8807563,
      "format": "mp4",
      "url": "http://res.cloudinary.com/ac-self-service/video/upload/q_auto/v1647106802/e7osszr9rn0zx43vuysm.mp4",
      "secure_url": "https://res.cloudinary.com/ac-self-service/video/upload/q_auto/v1647106802/e7osszr9rn0zx43vuysm.mp4"
    }
  ],
  "batch_id": "6f006cbe147ac3ff22bf610e4e3f7482b5f3201625c5c87ccb1fdf2bb105e4a3",
  "asset_id": "69745e7be77ffdc2c9ad14491074d58d",
  "public_id": "e7osszr9rn0zx43vuysm"
}

The notification webhook API emails the information in the response to the designated parties through an API of SendGrid, a cloud service for email. See below for the code of the webhook API, which is structured as an asynchronous handler, a common pattern for low-code server functions. Note that clickTracking is disabled so that the parties notified can browse those URLs in the email.

exports.handler = async function (event, context) {
  const data = JSON.parse(event.body);
  sgMail.setApiKey(process.env.SENDGRID_API_KEY);

    const response = await sgMail.sendMultiple({
      to: process.env.TO_RECIPIENTS.split(' '),
      from: process.env.FROM_VERIFIED_SENDER,
      subject: 'Webhook Notification',
      text: JSON.stringify(data, null, 2),
      trackingSettings: {
        clickTracking: {
          enable: false
        }
      }});
    return {
      statusCode: response[0].statusCode,
      body: JSON.stringify({ message: response[0] }),
    };
};

The email recipients proof and deploy the video.

Code and Deploy the Webhook API With Node.js and Netlify Functions

Code repository

Now that the design of the automated flow is in place, code and deploy it. Perform the two steps below to build a webhook API that notifies designated parties of the Cloudinary Upload API’s eager response by email:

Create two accounts, one for SendGrid and the other for Netlify, and then deploy this code as a Netlify Function. Detailed setup instructions will help you with deployment.
Upload a video by running the Node.js script upload-video-eager-abr, which creates manifests and video “chunks” that enable ABR streaming with Cloudinary transformations bundled in a profile, in which—

The eager_async option causes Cloudinary to process the video asynchronously.
The URL assigned to eager_async_notification_url is the webhook API that we created in Netlify.

Afterward, Cloudinary posts the eager response, which reports the success or failure of the transformation process and lists the URLs of the derived assets, to the webhook API. The API then sends all that information to the designated parties by email.

Test the Upload Script

To test the upload-video-eager-abr script, go to https://webhook.site to obtain a free URL on which to view the eager response.

Tip: Start by experimenting with webhook.site’s tracking page. Once we’ve verified that the upload process is posting correctly there, proceed with the steps of having our webhook API send email notifications with the details in the eager response.

Secure the Media Processing Webhook

Be sure to guard the webhook API against unauthorized access. An ideal way to do that is by leveraging Cloudinary features like signatures and timestamps, as well as a Cloudinary utility that ensures that the API is called by Cloudinary only for legitimate purposes.

For details, see the Cloudinary documentation on verifying notification signatures.

Automate Low-Code Flows With Webhooks.

The above example shows you how to write low-code and package it in a simple and modular webhook API that receives a response from Cloudinary. To facilitate tracking, that API notifies you and other interested parties of the status of the process through SendGrid (for dispatching email) and Netlify (for serving APIs).
Webhooks are a handy starting point for automated low-code flows, which are hosted by many popular services. For more details on building similar flows for media, check out MediaFlows, a product of Cloudinary Labs.

Transforming Media With Java Code

Rebeccca Peltz — Fri, 07 May 2021 16:45:38 +0000

Transforming Media With Java

Transforming media on Cloudinary in Java is fun because of the fluent interface. Cloudinary transformations are used to produce optimized media as well as aesthetic effects.

Fluent Interface

In 2005, Martin Fowler created an API design pattern called the fluent interface, which makes use of method chaining and a domain-specific language and which has been adopted in many popular APIs, such as .NET’s SQL API Linq. With Linq, .NET programmers can write code that generates SQL.

Since then, Fowler has introduced many design patterns for object-oriented programming that have been embraced by OO developers for building APIs.

Method Chaining

Method chaining refers to a method that returns an instance of the object that encapsulates it, as in this example:

class Hello {
    private string name;
    Hello()
    {
        System.out.println("Calling The Constructor");
    }
    public Hello setName(String name)
    {
        this.name = name;
        return this;
    }
    void say()
    {
        System.out.println("Hello " + name);
    }
}

public class Hello {
    public static void main(String[] args)
    {
        // "method chaining".
        new Hello().setName("Martin").say();
    }
}

Fun fact: The popular jQuery library, which leverages method chaining, was developed around the time Martin Fowler launched the fluent interface.

Domain-Specific Language

Since the fluent interface comprises both object chaining and a domain-specific language, the code flows and is easy to read.

Fluent Interface for Transformations

We're going to see here how to use the Cloudinary Java SDK's fluent interface to code fun and useful transformations.

Cropping of Media

Scale

Cloudinary performs simple cropping transformations with a fluent interface. An example is to apply a single dimension to an image or video and then scale the media item to maintain the aspect ratio, like this:

new Transformation().width(300).crop("scale")

Here’s an example of single-dimension scaling:

https://res.cloudinary.com/cloudinary-training/image/upload/w_300,c_scale/dog.jpg

Original: 2519 x 2501	Scaled: 300 x 298

The transformed image adjusts the unspecified dimension (in this case, the height) so that the aspect ratio stays the same.

Fit

To create a media item, say, an image, with a certain width and height, specify them and maintain the aspect ratio with the crop type fit. Cloudinary then changes the dimensions and maintains aspect ration, but the image remains within the bounding box based on the two specified dimensions. See the example below.
dim

new Transformation().width(300).height(200).crop("fit")

Fit: 201 x 200

The transformed image might not have the exact dimensions as specified but will not exceed them.

Pad

You can set exact dimensions with the crop type pad. To maintain the aspect ratio, pad scales the image to fit within the specified dimensions and creates a padding for any dimension that must be made smaller than the value specified. The color of the pad will default to white. For example:

new Transformation().width(300).height(200).crop("pad")

Pad: 300 x 300

To change the color of the padding, just chain the background parameter to the code:

new Transformation().width(300).height(200).crop("pad").background("red")

Red Padding: 300 x 200

To have Cloudinary determine the most used color in the media item and then apply that color to the padding, set background to auto:

new Transformation().width(300).height(200).crop("pad").background("auto")

Auto Padding: 300 x 200

There are many more cropping transformations and you can learn about them online.

Fun With Transformations

Once you have uploaded your media to Cloudinary, you can write Java code to create URLs, image tags, and video tags that contain transformation parameters. Below are a few fun video examples in which we create URLs with transformations.

Boomerang Effect With Video

Consider a time-lapse video of an hourglass. How would the hourglass run if time moves backwards? To find out, apply the boomerang effect on the video as a transformation, like this:

cloudinary.url().transformation(new Transformation().effect("boomerang"))
.resourceType("video").generate("purple-hourglass.mp4")

Click this link to play the video in your browser:

https://res.cloudinary.com/cloudinary-training/video/upload/e_boomerang/purple-hourglass.mp4

Concatenation of Videos

To play two videos in sequence, try this concatenation technique:

cloudinary.url().resourceType("video")
.transformation(new Transformation().width(300).height(200).crop("filt").chain()
.overlay(
new Layer().publicId("video:purple-hourglass"))
.flags("splice").width(300).height(200).crop("fit"))
.generate("3-o-clock.mp4")

Click this link to play the concatenated video in your browser:

https://res.cloudinary.com/cloudinary-training/video/upload/c_fit,h_200,w_300/c_fit,fl_splice,h_200,l_video:purple-hourglass,w_300/3-o-clock.mp4

Progress Indicator

How about creating a visual indicator that shows how much time is left in your video? Simply add a progress bar, like this:

cloudinary.url().transformation(new Transformation().effect("progressbar:frame:FF0000:12"))                     .resourceType("video").generate("purple-hourglass.mp4")

Click this link to play the video with a progress bar:

https://res.cloudinary.com/cloudinary-training/video/upload/e_progressbar:frame:FF0000:12/purple-hourglass.mp4

Summary

The design of the Cloudinary Java SDK makes it easy to code in Java. As you learn more about the many ways in which you can transform media with Cloudinary, you’ll become more creative and fluent with the process. Have fun!

Credits

Hourglass-timer video by Samer Daboul from Pexels
Clock video by Jason H. Austin from Pexels
Cloudinary Media Inspector Extension for insight on images

Creating an API With Python Flask to Upload Files to Cloudinary

Rebeccca Peltz — Tue, 20 Apr 2021 14:20:40 +0000

Creating an API With Python Flask to Upload Files to Cloudinary

Meta Title: Creating an API With Python Flask to Upload Files to Cloudinary
Meta Description: Learn how to build an API with Python Flask and Cloudinary's Python SDk to upload files of any format to Cloudinary.

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.

This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Understanding the Difference Between Back End and Front End

Generally, code that runs on the server is back end, and code that runs on the browser is front end. However, since server code can render HTML, CSS, and JavaScript, which all run on the browser, confusion sometimes results.
In the context of the Cloudinary SDKs, the back-end ones can read secret credentials, which should not be shared in the front end. In other words, you must never expose the back-end environment variables in the front end because front-end SDKs cannot hide credentials that are meant to be kept secret. As a solution, you can upload browser code with Cloudinary’s unsigned presets without revealing secret credentials. A better way would be to build a back-end API for secure uploads, keeping your API_SECRET credential hidden. Read on to see how to do that with Cloudinary’s Python SDK and Python Flask or Python Django.

Coding a Flask API to Upload to Cloudinary

The Flask framework makes it easy to define routes and their functionalities. To get started, first create a route named /upload, which accepts a POST that contains multipart/form-data. You then package up the image file input into a FormData object in a submit handler and POST it to your own Flask API to call Cloudinary’s Upload API, which is configured with your full set of Cloudinary credentials.

Flask's request option enables you to get data from the client. When submitting files, such as uploading images, you can call upon request to access them.

from flask import Flask,render_template, request
if request.method == 'POST':
    file_to_upload = request.files['file']

The data retrieved from request.files['file'] is an instance of werkzeug.FileStorage. The object can be handed off to the Python SDK’s Upload function. Flask then wraps Werkzeug, which handles the details of the Web Server Gateway Interface (WSGI).

if file_to_upload:
    upload_result = cloudinary.uploader.upload(file_to_upload)
    app.logger.info(upload_result)

For uploads to Cloudinary, the default resource_type is image. To expand or create a new Flask API, add resource_type: 'video' or resource_type: 'raw' for video or raw files, respectively. Raw refers to nonmedia file formats, including text and JSON.
Finally, upload_result is an object that contains the upload response. To complete the actions of your upload API, return that response to the client, like this:

from flask import jsonify
return jsonify(upload_result)

Below is the complete code of your upload API.

@app.route("/upload", methods=['POST'])
def upload_file():
  app.logger.info('in upload route')

  cloudinary.config(cloud_name = os.getenv('CLOUD_NAME'), api_key=os.getenv('API_KEY'), 
    api_secret=os.getenv('API_SECRET'))
  upload_result = None
  if request.method == 'POST':
    file_to_upload = request.files['file']
    app.logger.info('%s file_to_upload', file_to_upload)
    if file_to_upload:
      upload_result = cloudinary.uploader.upload(file_to_upload)
      app.logger.info(upload_result)
      return jsonify(upload_result)

Setting Up the Flask App

Next, follow the steps below to build the app.

Set Up the Virtual Environment

The command below establishes your virtual environment. This is an important step for encapsulating the libraries you'll be using in this app.

python3 -m venv env
source env/bin/activate

To deactivate the environment, type:

deactivate
source env/bin/activate

Install Flask

Install Flask with this command:

python3 -m pip install Flask==1.1.1

Add a `requirements.txt` File

Create a requirements.txt file to keep track of all the versioned libraries you need for the app and to facilitate future deployment.

python3 -m pip freeze > requirements.txt

Upgrade the Python Package Installer

If necessary, upgrade the Python package installer, called PIP, with the command below. The command might vary, depending on your local Python installation. As shown below, the freeze command writes the library and version to the requirements.txt file.

usr/local/opt/python@3.9/bin/python3.9 -m pip install --upgrade pip
python3 -m pip freeze > requirements.txt

Install Cloudinary

Next, install Cloudinary to gain access to its Upload API for the Python SDK.

 python3 -m pip install cloudinary
 python3 -m pip freeze > requirements.txt

Add CORS support

If you want to access your upload API from a client served from a different host, add Cross Origin Resource Sharing (CORS) support:

python3 -m pip install flask-cors
python3 -m pip freeze > requirements.txt

Now you can add code to configure CORS for all the APIs and, specifically, the upload API. The code below demonstrates both options.

from flask_cors import CORS, cross_origin
app = Flask(__name__)
# After creating the Flask app, you can make all APIs allow cross-origin access.
CORS(app)
# or a specific API
@app.route("/upload", methods=['POST'])
@cross_origin()

Work With Environment Variables

You can easily load environment variables with Python. Conveniently, the python-dotenv library is modeled on the Node.js dotenv package. You need three Cloudinary environment variables, i.e., CLOUD_NAME, API_KEY, and API_SECRET, for your code, but don't share API_SECRET. You can export those variables to the local environment. When you deploy to Heroku, you can add them to make them available to the app when it runs in a Heroku container.

from dotenv import load_dotenv
load_dotenv()

In your upload API, you read in the environment variables with the cloudinary.config() function. You then access those variables with the os.getenv() function in the dotenv library.

cloudinary.config(cloud_name = os.getenv('CLOUD_NAME'), api_key=os.getenv('API_KEY'), 
    api_secret=os.getenv('API_SECRET'))

When working locally, you can create a gitignore'd .env file that contains your Cloudinary credentials for local testing. The values for those credentials are displayed in your Cloudinary console.

CLOUD_NAME=CLOUD_NAME
API_KEY=API_KEY
API_SECRET=API_SECRET

Next, install the python-dotenv library:

python3 -m pip install python-dotenv
python3 -m pip freeze > requirements.txt

Testing the API Locally

You're now ready to test the app locally. You can do end-to-end testing with Postman and a local form that points at a server running on localhost.
Create your app with an upload function by downloading, cloning, or copying from this GitHub repository. Add your credentials to a .env file and then start your server on localhost.

python3 app.py

The above command opens a server at http://127.0.0.1:5000/. Note that the default port is 5000.

Test With Postman

In Postman, do the following:

Set the method to POST.
Set the body type to form-data.
Establish Key/Value pairs for input. Set the value for the Key to file. Mouse over the Key field and choose Text or File from the drop-down menu. Under File is a Select Files button; click it to select a file from your local drive.
Click Send to process the request.

The Cloudinary Upload API response is displayed at the bottom of the page

Test With a Local Form

Follow these steps:

Open the index.html file with a local HTTP server. Choose a local file and click Upload.
Run the JavaScript code below. The fetch command calls the server that runs on localhost.
```
fetch("http://127.0.0.1:5000/upload", options)
.then((response) => {
return response.json();
})
.then((data) => {
console.log(data);
})
.catch((error) => {
console.log(error);
});
```
If the process is successful, the Cloudinary Upload API response is displayed in the console. Don't forget to set event.preventDefault(); for the submit handler. Otherwise, you'll get a page refresh and won't see your log.

Post a file in a submit handler by creating a FormData object and appending the file, as shown in the code below.

const formData = new FormData();
formData.append("file", fileInput.files[0]);
const options = {
method: "POST",
body: formData,
};

The above code packages up the file you select in your form input as if you had submitted a multipart form. A multipart form is important for submitting files because each input is sent as a block of data, separated by boundaries.
The result is then displayed in your console, like this:

Deploying the Flask App to Heroku

Heroku is a platform as a service (PaaS) for serving prototypes or production-ready apps. Host the API you just built on Heroku by doing the following:

Create a free account on Heroku.

Install Gunicorn, short for Green Unicorn, a Python WSGI HTTP server for hosting apps.

python3 -m pip install gunicorn==20.0.4
python3 -m pip freeze > requirements.txt

Create a file called Prodfile with instructions for Heroku to start your app with Gunicorn:
```
web: gunicorn app:app
```
Create a file called runtime.txt that contains the Python version you want to use:
```
python-3.9.1
```

Deploy with Git:

git init
git add .
git commit -m"my first commit"
# Create a new Heroku app
heroku create
# You will get a URL where the app will be hosted
git remote -v
# will confirm that you have set up a remote to push to Heroku

If you have an existing Heroku app that you created in the Heroku GUI

you can add it with this command instead of creating a new one

heroku git:remote -a thawing-inlet-61413

To deploy, you can now just push to Heroku

git push heroku master

Open your server (it's nice to have a GET method so you can verify like this)

heroku open

To log in to Heroku from the command line, type:

heroku login

You’ll then be prompted to open the webpage to log in




You can build the new Heroku app with the CLI. However, as noted above, if you built it on the heroku.com dashboard, you can just add the link Heroku created for you to a `git:remote` command.

### Loading Environment Variables on Heroku

To load environment variables on Heroku, open the dashboard and navigate to your new server instance. Click the **Settings** tab and scroll down to the **Config Vars** section. Click **Reveal Config Vars**, where you can enter Key/Value pairs. This is where you load your Cloudinary environment variables: `CLOUD_NAME`, `API_KEY`, and `API_SECRET`.

![Heroku Config Vars](https://res.cloudinary.com/cloudinary-marketing/image/upload/w_700,c_fill,f_auto,q_auto,dpr_2.0/Web_Assets/blog/environmentvars.jpg)

For more options for setting up `prod` and `dev` instances, see the [Heroku documentation](https://devcenter.heroku.com/articles/git).

## Testing the API Deployed on Heroku
If you have a `GET` method API like the "Hello World!" in the `app.py` example, you can open the Heroku app in the browser.

For end-to-end testing, you can `POST` to the Heroku server link from Postman. The result is similar to that for local testing.

![Remote Post](https://res.cloudinary.com/cloudinary-marketing/image/upload/w_700,c_fill,f_auto,q_auto,dpr_2.0/Web_Assets/blog/remotepost.jpg)

Alternatively, modify the `index.html` file to post to your Heroku server. Just add your Heroku server link to the `fetch` command, like this:



```JavaScript
fetch("https://xxxx.herokuapp.com", options)

Securing the App

You might have noticed that the Heroku deployment link has been erased from the images above. That’s for security. Deploying this app to Heroku enables you to upload data to Cloudinary. If the link is not secured for use on an authenticated webpage only, anyone can upload to your Cloudinary cloud. Even though you are hiding your environment variables, you’d have created a public method to change data on your cloud.

This tutorial does not cover how to set up authentication. Many options are available for authentication of API routes. You might want to look into Auth0, Google, or GitHub. Alternatively, build your own process based on your user database for this type of authentication.

Moving On

Once you get this API running, you can build other media APIs with the Cloudinary Python SDK by following the same pattern. Have fun!

Five Ways for Integrating the Cloudinary Video Player Into React Applications

Rebeccca Peltz — Mon, 15 Mar 2021 18:50:06 +0000

Code

Demo

CodeSandbox

As of this writing npm trends reports over 10,000,000 weekly downloads of the React library—and no wonder. The disruption created by Covid in 2020 is expected to persist, significantly upping the consumer demand for video as a means of enhancing experiences in online work, shopping, education, healthcare, social interactions, and entertainment. Hence the many questions on how to add a video player to a React application. This post shows you five ways in which to do that with the Cloudinary Video Player in a React component.

Cloudinary Video Player

The Cloudinary Video Player is a feature-enhanced library that builds upon the popular, open-source Video JS player. Like that player, the Cloudinary one is implemented on a webpage by rendering a <video> tag and then binding JavaScript and CSS functionality to the video DOM element. Also, Cloudinary has added the following features to the video-playing experience:

Transformations at the player or video level
Multiple players per page, including playlists created by metadata tagging and recommendations
Auto-formatting transformations, which ensure delivery in the best format for the viewing device or browser
Suggestion of adaptive bitrate streaming for videos that are longer than one minute to provide HTTP streaming and optimize resolution in unstable networks
Customization
Monetization through interstitial ads
Shoppable video
Analytics ## Libraries in the Cloudinary Video Player There are 2 Video Player libraries available: Standard and Light. The Light library is smaller as it does not include the following features: Adaptive Bitrate Streaming, Video Ads and Shoppable videos. In this exercise, we'll be using the Light version.

We'll use the Video Player library.

React Components

With React, you can wrap functionality into a reusable component that renders HTML, CSS, and JavaScript. Timing is important in many cases, however. In the case of the Video Player, you can’t initialize it until a <video> tag has been rendered.

This exercise leverages the following React hooks:

useState This function returns an immutable data value and a setter that can update it.
useEffect This function is called when the component that holds it is rendered and then when stateful data within the function changes. useEffect helps determine that a component has been rendered and, in some respects, replaces the componentDidMount and componentDidUpdate life cycles in a Class function.
useContext This function, which serves as a container for stateful values, can be passed to a component function to specify the state. useContext defines a provider function made up of useState functions. Sharing context between components is one way to implement inter-component communications.

Also, custom hooks can refactor stateful code for reuse in many components. You’ll learn how to create a custom hook later in this post.

The Code

Here are the five components that manage state, logic, and event handling and with which you can host the Cloudinary Video Player:

A function-based component for an embedded, cloud-hosted video player
A class-based component
A function-based component with useHooks
A function-based component with Context
A function-based component with a custom hook called useCloudinaryVideoPlayer for use in any component that hosts video

The external data for all the components in this exercise is defined in App.js. An object called video options contains the Cloudinary cloudName and publicId. You can pass other video options to the Video Player’s components. For simplicity, however, those two are the only ones that are required to identify the video you want to host.

const videoOptions = { cloudName: "demo", publicId: "race_road_car" };

For details on the options available for the Cloudinary Video Player, see Video Player API Reference.

Function-Based, Cloud-Hosted Video Player

On the Cloudinary site is a demo page on which you can experiment with Video Player options. Once you are satisfied with the features you have selected, the demo generates the JavaScript code or an embeddable <iframe> tag with the options set for hosting in the cloud. You’ll also get a URL with all of the settings, including cloudName and publicId.

In the Apps.js file is the component JSX for rendering a card that contains the name of the component and the video player hosting the video specified in the video options. In this case, the component is named VideoPlayerCloudHosted.

{
  <div>
    <h2>Video Player Cloud Hosted</h2>
    <div>
      <VideoPlayerCloudHosted options={videoOptions} />
    </div>
  </div>
}

In the code below, the URL in the src attribute contains the cloud name, the public ID, and the options specified in the Video Player demo page. Also, the cloud name and the public ID here are passed to the component through props, which is passed from the parent.

import React from "react";

function VideoPlayerCloudHosted(props) {
  const url = `https://player.cloudinary.com/embed/?public_id=${props.options.publicId}&cloud_name=${props.options.cloudName}&player%5Bfluid%5D=true&player%5Bcontrols%5D=true&source%5Bsource_types%5D%5B0%5D=mp4`;

  return (
    <>
    <div className="iframe-container">
      <iframe className="responsive-iframe"
        title="Cloud Hosted Video Player"
        src={url}
        width="640"
        height="480"
        allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
        allowFullScreen
        frameBorder="0"
      ></iframe>
      </div>
    </>
  );
}
export default VideoPlayerCloudHosted;

All you’re doing in this functional component is rendering the <iframe> tag by passing along the videoOptions data.

 {
<div className="video-card">
  <h2>Video Player Cloud Hosted</h2>
  <div className="vp">
    <VideoPlayerCloudHosted options={videoOptions} />
  </div>
</div>
}

Add CSS code for a responsive <iframe> tag:

.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

An embedded video player has a few downsides, especially in production: you might not have as much control as you would like and, depending on network conditions, loading might be slower.

Class-Based Component

In App.js, you import your class-based video player and render a card that uses the VideoPlayerClass component.

{
  import VideoPlayerClass from "./VideoPlayerClass";

  <div className="video-card">
    <h2>Video Player in Class</h2>
    <div className="vp">
      <VideoPlayerClass />
    </div>
  </div>
}

The Class component requires importing just one library, cloudinary-video-player, to create a Cloudinary Video Player within Class. Also, import the CSS code to support the video player. You’ll see those imports in another example, which will ultimately justify the creation of a custom hook.

import React, { Component } from "react";
import "cloudinary-video-player/dist/cld-video-player.light.min";
import "cloudinary-video-player/dist/cld-video-player.light.min.css";

class VideoPlayerClass extends Component {
  videoPlayerInit = () => {
    window.cloudinary.videoPlayer("some-video", {
      cloud_name: this.props.options.cloudName,
      publicId: this.props.options.publicId,
      fluid: true,
      controls: true,
      preload: "auto",
      mute: true,
      autoplay: false
    });
  };
  componentDidMount() {
    this.videoPlayerInit();
  }
  render() {
    return (
      <>
          <video id="some-video" />
      </>
    );
  }
}
export default VideoPlayerClass;

The Video Player is then initialized with the specified options. This component implements the code required for initializing the video player and then binds the player to the DOM element, which is the first <video> tag with the class some-video in the videoPlayerInit function. The component then renders a <video> tag, after which the lifecycle function componentDidMount calls the videoPlayerInit function.

class VideoPlayerClass extends Component {
  cld = () => {
    return new Cloudinary({ cloud_name: this.props.options.cloudName, secure: true });
  };
  videoPlayerInit = () => {
    const cld = this.cld();
    cld.videoPlayer("some-video", {
      publicId: this.props.options.publicId,
      fluid: true,
      controls: true,
      preload: "auto",
      mute: true,
      autoplay: false
    });
  };
  componentDidMount() {
    this.videoPlayerInit();
  }
  render() {
    return (
      <>
        <video id="some-video" />
      </>
    );
  }
}
export default VideoPlayerClass;

Function Based Component

Now load the libraries and wait for the <video> tag to render in a function-based approach.
First, render the component in App.js:

{
  <div className="video-card">
    <h2>Video Player in Function</h2>
    <div className="vp">
      <VideoPlayerFunction options={videoOptions} />
    </div>
  </div>
}

Next, import the libraries. Below is the same code in the class-based example:

import React, { useEffect } from "react";
import "cloudinary-video-player/dist/cld-video-player.light.min";
import "cloudinary-video-player/dist/cld-video-player.light.min.css";

Finally, set up a functional component. The videoPlayerInit function looks the same as it did in the class-based approach. Note that props is passed to the function rather than being implicitly added to the class context, as in the class-based function.
Instead of relying on the componentDidMount function to notify you that the <video> tag has been rendered, you can determine that with the useEffect functional React hook and call the Video Player’s init function.
Keep in mind that the instructions of useEffect, which is called any time the component re-renders, are executed as if the function was called in componentDidMound and componentDidUpdate in a class-based component. Since you don’t want to call initVideoPlayer except after the <video> tag is first rendered, be sure to guard against that scenario.

function VideoPlayerFunction(props) {
  const videoPlayerInit = () => {
    window.cloudinary.videoPlayer(document.querySelector(".fn-video"), {
      cloud_name: props.options.cloudName,
      publicId: props.options.publicId,
      fluid: true,
      controls: true,
      preload: "auto",
      mute: true,
      autoplay: false,
    });
  };

  useEffect(() => {
    return (videoPlayerInit(),[]);
  });
  return (
    <>
      <video className="fn-video" />
    </>
  );
}

export default VideoPlayerFunction;

Function-Based Component With Context

The React hook useContext includes both useState and Provider functions. The convention for naming the provider is to give it the same name as the context object. In this case, you’ll have VideoOptionsContext and VideoOptionsProvider, which can share logic and state between components.
Start with creating VideoOptionsContext for holding and granting access to state. useState is a function that returns the current value of the state and a setter function that will set a new state value. You’ll capture the options cloudName and publicId in that context.

The data is an object that contains those two video options. Create the context and name it VideoOptionsContext:

const video = { options: { cloudName: "demo", publicId: "race_road_car" } };  
export const VideoOptionsContext = createContext();

Next, implement and export VideoOptionsProvider, which sets up the state for the options. Specify the default values for videoOptions, which are cloudName and publicId.

import React, { createContext, useState } from "react";

const video = { options: { cloudName: "demo", publicId: "race_road_car" } };
export const VideoOptionsContext = createContext();

// This context provider is passed to any component requiring the context
export const VideoOptionsProvider = ({ children }) => {
  const [videoOptions, setVideoOptions] = useState(video.options);

  return (
    <VideoOptionsContext.Provider
      value={{
        videoOptions,
        setVideoOptions,
      }}
    >
      {children}
    </VideoOptionsContext.Provider>
  );
};

To use this context in a functional component, import VideoOptionsContext into App.js and wrap the rendering of the VideoPlayerContext in this Context component:

import VideoPlayerContext from "./VideoPlayerContext";
import { VideoOptionsProvider } from "./VideoOptionsContext";

{
<div className="video-card">
  <h2>Video Player in Function with Context Provider</h2>
  <div className="vp">
    <VideoOptionsProvider>
      <VideoPlayerContext />
    </VideoOptionsProvider>
  </div>
</div>
}

VideoPlayerContext resembles VideoPlayerFunction, except that the former gets the options from context rather than from props.

Note in the code that you import VideoOptionsContext and then pull options with the useContext hook. You can then reference the options as options.videoOptions.cloudName and options.videoOptions.publicId.

import React, { useEffect, useContext } from "react";
import { VideoOptionsContext } from "./VideoOptionsContext";
import "cloudinary-video-player/dist/cld-video-player.light.min";
import "cloudinary-video-player/dist/cld-video-player.light.min.css";

function VideoPlayerContext() {
  const options = useContext(VideoOptionsContext);

  const videoPlayerInit = () => {
    console.log("add video player JS");
    const player = window.cloudinary.videoPlayer(
      document.querySelector(".context-video"),
      {
        cloud_name:options.videoOptions.cloudName,
        publicId: options.videoOptions.publicId,
        fluid: true,
        controls: true,
        preload: "auto",
        mute: true,
        autoplay: false,
      }
    );

    player.on("loadedmetadata", (e) => {
      console.log("app detected", e);
    });
  };

  useEffect(() => {
    videoPlayerInit();  
  });
  console.log("calling fn render");
  return (
    <>
      <video className="context-video" />
    </>
  );
}

export default VideoPlayerContext;

When you return useEffect, pass the second parameter as an empty array to avoid re-rendering

Function-Based Component With Custom Hook

You’ve now seen code duplicated across several component examples: library imports, the init video-player function, Cloudinary instantiation. And you might wonder, “How can I create a reactor?’ The answer is with a custom hook.
Since the convention for naming hooks is to prefix the functionality you’re capturing with use, create a useCloudinaryVideoPlayer hook. Also, since you’ve specified different classes for each of the samples, the hook must work with arguments and maintain the state for the following:

The cloud name
The public ID
The class name of the <video> tag, which serves as an element selector

Other than pulling the values of those three variables, the code looks like the functional components you created earlier.

import { useState, useEffect } from 'react';
import "cloudinary-video-player/dist/cld-video-player.light.min";
import "cloudinary-video-player/dist/cld-video-player.light.min.css";

export const useCloudinaryVideoPlayer  = (props) =>{
  const [cloudName] = useState(props.cloudName);
  const [publicId] = useState(props.publicId);
  const [className] = useState(props.videoClass);
  const videoPlayerInit = () => {
    return window.cloudinary.videoPlayer(document.querySelector(`.${className}`), {
      cloud_name: cloudName,
      publicId: publicId,
      fluid: true,
      controls: true,
      preload: "auto",
      mute: true,
      autoplay: false    
    });
  };

  useEffect(() => {
    return(videoPlayerInit(),[]);
  });

  return "OK";
}```



You need not capture the setters because they won’t serve any purpose. App.js will continue to pass an object with only the cloud name and public ID.



```jsx
<div className="video-card">
    <h2>Video Player Custom Hook</h2>
    <div className="vp">
      <VideoPlayerCustomHook options={videoOptions} />
    </div>
</div>

In the new VideoPlayerCustomHooks component, add the class name to the object that is passed to the useCloudinaryVideoPlayer hook.

import React from "react";
import { useCloudinaryVideoPlayer } from "./useCloudinaryVideoPlayer";

function VideoPlayerCustomHook(props) {
  const videoClass = "custom-video";
  useCloudinaryVideoPlayer({ ...props.options, videoClass: videoClass });

  return (
    <>
      <video className={videoClass} />
    </>
  );
}

export default VideoPlayerCustomHook;

Now that it can import the reusable code from the hook, the actual code for the Video Player is much simpler. Just add the video class to a new object that includes props and that serves as a parameter for the custom hook.

Recommendations

There are many ways for creating a component with React and, therefore, one for hosting the Cloudinary Video player.
What’s the best way, you ask? For class-based components, you might want to use the example in this exercise, but you can also introduce function-based components into an app with class-based components. If you’ll be creating components that vary by certain data, consider leveraging a custom hook. Though probably not the best use case, custom hooks enable the use of context with a functional component. In general, the direction forward with React is through function-based components with hooks.

Note:

May 2022. The cloudinary-video-player was updated to v1.9 and this removed the need to import cloudinary-core. It changed the instantiation of the video player. The current code in GitHub contains the updated Cloudinary Video Player code and instantiation. The markup code on this page uses the most recent libraries as well.

DEV Community: Rebeccca Peltz

daily javascript challenge

Stop Phishing by Analyzing the Bait

Top 8 Cyber Attacks - 2024 [4K] - YouTube

Create a Browser Extension

Other Solutions that Preventing Phishing

Learn More About Cybersecurity

Earth Day Frontend Challenge

Dynamically Inserting Video/Image

Earth Day Frontend Challenge

Dynamically Inserting Video/Image

Recipe Generator

What I Built

Demo

My Code

Journey

Form Processing

What I Built

Demo

Journey

Using Web APIs to Create a Camera Application

Web APIs

A Camera Application for Desktop and Mobile

Web APIs

DOM and DOM HTML

DOM Click Event Listeners

DOM Adding and Removing Elements

DOM Adding and Removing Styles

Managing State for the Application

Navigator

Permissions

Media Capture and Streams

Initial Selected Device

Device Change

Calling GetMedia Twice

Snapshot

Download

Web Share

What's Next?

Modifying the Image

Modifying Exif Data

Port the Code

Style

Take Some Pictures

React 18 + React Router v6 + Sidebar Navigation and a Sandpack Component

Create React App

Install and Configure Router

Tailwind Install

Add a Sandpack Component

Webhook-Driven Email Notifications for Media Management

The Problem: We Need to Get Notified When a Process Completes

Design a Webhook API With the SendGrid API

Code and Deploy the Webhook API With Node.js and Netlify Functions

Test the Upload Script

Secure the Media Processing Webhook

Automate Low-Code Flows With Webhooks.

Transforming Media With Java Code

Transforming Media With Java

Fluent Interface

Method Chaining

Domain-Specific Language

Fluent Interface for Transformations

Cropping of Media

Scale

Fit

Pad

Fun With Transformations

Boomerang Effect With Video

Concatenation of Videos

Progress Indicator

Summary

Credits

Creating an API With Python Flask to Upload Files to Cloudinary

Understanding the Difference Between Back End and Front End

Coding a Flask API to Upload to Cloudinary

Setting Up the Flask App

Set Up the Virtual Environment

Install Flask

Add a requirements.txt File

Upgrade the Python Package Installer

Add a `requirements.txt` File