Renterii

renterii

TL;DR (Too Long Didn't Read) Function const render = async (x, ...values) => {
  var rendered = "";
  for (let u = 0; u < x.length; u++) {
    rendered = rendered.concat(x[u]);
    if (u < x.length - 1) {
      if (typeof values[u] == "function") {
        var res = await values[u]()
        if(res) rendered += res;
      } else {
        rendered +=values[u]
            }
    }
  }
  return rendered;
}; Usage const result = render`My string is = ${()=> {return (1 + 1)}}`

console.log(result)
// output -> My string is 2 What Is This? By render, I meant being able to run async and sync functions inside of a string. Which may be called templating. This is a basic function which uses template literals, it can run the functions inside of a string which lets us to do many things like, retrieve data from database, fetch data from an API, calculate stuff which is  provided earlier and so on. How it works You may understand what it does from the code above if you have prerequisite knowledge about tagged templates, it just runs the functions and put the output of function in the place where function executed. Warning In many times using async functions inside async functions inside async functions are required and without using proper async await functionality, this stuff is getting too error prone. It may return [Object Promise][Object Promise][Object Promise]. With a simple Promise.all(), we can fix all of that. Promise.all() Examples below. Rendering list Just like react, we will use .map() function. await render`
    Here is my headings:
    ${() => {
      return "".concat(
          ...[1,2,3,4,5].map((t) => {
            return `<h1>My number is: ${t}</h1>`
          }),
      );
    }}
// output: Here is my headings:
// <h1>My number is: 1</h1><h1>My number is: 2</h1><h1>My number is: 3</h1><h1>My number is: 4</h1><h1>My number is: 5</h1> Examples Retrieve data from DB Promise.all() here is not necessary because there is no asynchronous function inside them await render`
Here is my data
${async () => {
  const text = `SELECT * FROM table`;
  const values = [];
  var record = await pool.query(text, values);
  return "".concat(
    ...(await Promise.all(
      record.rows.map((t) => {
        return `<h1>${t.data}</h1>`
      }),
    )),
  );
}}
` Fetch data from api await render`
Here is my data
${async () => {
  const res = fetch("https://example.com", {method:"GET"})
  const data = await res.json()
  return "".concat(
    ...(await Promise.all(
      data.first.map((t) => {
        return `<h1>${t.data}</h1>`
      }),
    )),
  );
}}
` TL;DR (Too Long Didn't Read) Function const render = async (x, ...values) => {
  var rendered = "";
  for (let u = 0; u < x.length; u++) {
    rendered = rendered.concat(x[u]);
    if (u < x.length - 1) {
      if (typeof values[u] == "function") {
        var res = await values[u]()
        if(res) rendered += res;
      } else {
        rendered +=values[u]
            }
    }
  }
  return rendered;
}; const render = async (x, ...values) => {
  var rendered = "";
  for (let u = 0; u < x.length; u++) {
    rendered = rendered.concat(x[u]);
    if (u < x.length - 1) {
      if (typeof values[u] == "function") {
        var res = await values[u]()
        if(res) rendered += res;
      } else {
        rendered +=values[u]
            }
    }
  }
  return rendered;
}; Usage const result = render`My string is = ${()=> {return (1 + 1)}}`

console.log(result)
// output -> My string is 2 const result = render`My string is = ${()=> {return (1 + 1)}}`

console.log(result)
// output -> My string is 2 What Is This? By render, I meant being able to run async and sync functions inside of a string. Which may be called templating. This is a basic function which uses template literals, it can run the functions inside of a string which lets us to do many things like, retrieve data from database, fetch data from an API, calculate stuff which is  provided earlier and so on. How it works You may understand what it does from the code above if you have prerequisite knowledge about tagged templates, it just runs the functions and put the output of function in the place where function executed. Warning In many times using async functions inside async functions inside async functions are required and without using proper async await functionality, this stuff is getting too error prone. It may return [Object Promise][Object Promise][Object Promise]. With a simple Promise.all(), we can fix all of that. Promise.all() Promise.all() Examples below. Rendering list Just like react, we will use .map() function. await render`
    Here is my headings:
    ${() => {
      return "".concat(
          ...[1,2,3,4,5].map((t) => {
            return `<h1>My number is: ${t}</h1>`
          }),
      );
    }}
// output: Here is my headings:
// <h1>My number is: 1</h1><h1>My number is: 2</h1><h1>My number is: 3</h1><h1>My number is: 4</h1><h1>My number is: 5</h1> await render`
    Here is my headings:
    ${() => {
      return "".concat(
          ...[1,2,3,4,5].map((t) => {
            return `<h1>My number is: ${t}</h1>`
          }),
      );
    }}
// output: Here is my headings:
// <h1>My number is: 1</h1><h1>My number is: 2</h1><h1>My number is: 3</h1><h1>My number is: 4</h1><h1>My number is: 5</h1> Examples Retrieve data from DB Promise.all() here is not necessary because there is no asynchronous function inside them await render`
Here is my data
${async () => {
  const text = `SELECT * FROM table`;
  const values = [];
  var record = await pool.query(text, values);
  return "".concat(
    ...(await Promise.all(
      record.rows.map((t) => {
        return `<h1>${t.data}</h1>`
      }),
    )),
  );
}}
` await render`
Here is my data
${async () => {
  const text = `SELECT * FROM table`;
  const values = [];
  var record = await pool.query(text, values);
  return "".concat(
    ...(await Promise.all(
      record.rows.map((t) => {
        return `<h1>${t.data}</h1>`
      }),
    )),
  );
}}
` Fetch data from api await render`
Here is my data
${async () => {
  const res = fetch("https://example.com", {method:"GET"})
  const data = await res.json()
  return "".concat(
    ...(await Promise.all(
      data.first.map((t) => {
        return `<h1>${t.data}</h1>`
      }),
    )),
  );
}}
` await render`
Here is my data
${async () => {
  const res = fetch("https://example.com", {method:"GET"})
  const data = await res.json()
  return "".concat(
    ...(await Promise.all(
      data.first.map((t) => {
        return `<h1>${t.data}</h1>`
      }),
    )),
  );
}}
`

Vanilla JS Server Side Rendering

Build a Web3 Movie Streaming dApp using NextJs, Tailwind, and Sia Renterd

NextJs, Tailwind, এবং Sia Renterd ব্যবহার করে একটি Web3 মুভি স্ট্রিমিং dApp তৈরি করুন

Erstellen Sie eine Web3-Film-Streaming-dApp mit NextJs, Tailwind und Sia Renterd

Cree una aplicación de transmisión de películas Web3 con NextJs, Tailwind y Sia Renterd

Créez une dApp de streaming de films Web3 à l'aide de NextJs, Tailwind et Sia Renterd

NextJs, Tailwind और Sia Renterd का उपयोग करके Web3 मूवी स्ट्रीमिंग dApp बनाएं

NextJs、Tailwind、Sia Renterd を使用して Web3 映画ストリーミング dApp を構築する

NextJs, Tailwind 및 Sia Renterd를 사용하여 Web3 영화 스트리밍 dApp 구축

Crie um dApp de streaming de filmes Web3 usando NextJs, Tailwind e Sia Renterd

Создание dApp для потоковой передачи фильмов Web3 с использованием NextJs, Tailwind и Sia Renterd

NextJs, Tailwind ve Sia Renterd kullanarak bir Web3 Film Akışı dApp'i oluşturun

Xây dựng ứng dụng phát trực tuyến phim Web3 bằng NextJs, Tailwind và Sia Renterd

使用 NextJs、Tailwind 和 Sia Renterd 构建 Web3 电影流媒体 dApp

How Does Server Side Rendering Work?

Server Side Rendering Web components Generating static HTML from JavaScript on the server called Server Side Rendering is a technique used to improve the perceived performance, SEO, and support for non-scripting environments. Shadow DOM: Shadow DOM is a web standard enabling the encapsulation of DOM subtrees in web components, shielding them from external styling and manipulation. It allows developers to create isolated scopes for CSS and JavaScript within a document, preventing conflicts with other parts of the page. Shadow DOM's key feature is its "shadow root," serving as a boundary between the component's internal structure and the rest of the document. This enables building modular, reusable components with their own encapsulated styles and behavior, enhancing code maintainability and reducing the risk of unintended side effects in complex web applications. Here is the sample code of the web component with Shadow DOM <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadow DOM Example</title>
</head>
<body>
  <div id="parent"></div>

  <script>
    // Create a shadow DOM for the container element
    const container = document.getElementById('parent');
    const shadowRoot = container.attachShadow({ mode: 'open' });

    // Create an element inside the shadow DOM
    const paragraph = document.createElement('p');
    paragraph.textContent = 'This paragraph text is inside the Shadow DOM.';
    
    // Apply some styling to the paragraph
    const style = document.createElement('style');
    style.textContent = `
      p {
        color: blue;
      }
    `;
    
    // Append the elements to the shadow DOM
    shadowRoot.appendChild(style);
    shadowRoot.appendChild(paragraph);
  </script>
</body>
</html> The text in the above code "This paragraph text is inside the Shadow DOM." will be displayed on the page, but its styling will be isolated from the rest of the document due to the use of Shadow DOM. Imperative-only API for Shadow DOM: As we observe closely in JavaScript, create Shadow DOM imperatively by selecting an element, attaching a shadow root (attachShadow({mode: 'open'})), and appending child elements. const container = document.getElementById('parent');
const shadowRoot = container.attachShadow({ mode: 'open' });
const paragraph = document.createElement('p');
paragraph.textContent = 'This text is inside the Shadow DOM.';
const style = document.createElement('style');
style.textContent = 'p { color: blue; }';
shadowRoot.appendChild(style);
shadowRoot.appendChild(paragraph);This creates encapsulated DOM and styling within container, isolating the paragraph's appearance and behavior from the rest of the document. We need a way to be able to serve shadow roots, of native and custom elements, in a static HTML document and let them upgrade progressively. Declarative API for Shadow DOM: In HTML, we can use the slot element to create a declarative API for Shadow DOM. This allows you to define placeholders for content insertion within custom elements. Here's an example: <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Declarative Shadow DOM</title>
</head>
<body>
  <div id="parent">
    <p>This content is outside the Shadow DOM.</p>
    <my-custom-element>
      <p slot="content">This text is inside the Shadow DOM.</p>
    </my-custom-element>
  </div>

  <script>
    customElements.define('my-custom-element', class extends HTMLElement {
      constructor() {
        super();
        const shadowRoot = this.attachShadow({ mode: 'open' });
        const template = document.querySelector('#my-custom-element-template');
        shadowRoot.appendChild(template.content.cloneNode(true));
      }
    });
  </script>

  <template id="my-custom-element-template">
    <style>
      p { color: blue; }
    </style>
    <slot name="content"></slot>
  </template>
</body>
</html> In the declarative example, we use HTML to define a template for the Shadow DOM structure. We then use JavaScript to clone and append this template to the Shadow DOM, along with any additional content we wish to add. Declarative Shadow DOM removes this limitation, bringing Shadow DOM to the server. Conclusion Declarative Shadow DOM is a groundbreaking feature that enhances web components by allowing developers to define shadow DOM content directly within HTML. This approach simplifies the creation and maintenance of encapsulated components, improving code readability and reusability. For server-side rendering (SSR), Declarative Shadow DOM offers significant benefits by enabling better performance and SEO. By rendering shadow DOM content server-side, developers can ensure faster initial page loads and improved indexing by search engines. This innovation effectively bridges the gap between client-side encapsulation and server-side efficiency, making Declarative Shadow DOM a powerful tool for modern web development. Server Side Rendering Web components Generating static HTML from JavaScript on the server called Server Side Rendering is a technique used to improve the perceived performance, SEO, and support for non-scripting environments. HTML JavaScript Shadow DOM: Shadow DOM: Shadow DOM is a web standard enabling the encapsulation of DOM subtrees in web components, shielding them from external styling and manipulation. It allows developers to create isolated scopes for CSS and JavaScript within a document, preventing conflicts with other parts of the page. Shadow DOM's key feature is its "shadow root," serving as a boundary between the component's internal structure and the rest of the document. This enables building modular, reusable components with their own encapsulated styles and behavior, enhancing code maintainability and reducing the risk of unintended side effects in complex web applications. Here is the sample code of the web component with Shadow DOM <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadow DOM Example</title>
</head>
<body>
  <div id="parent"></div>

  <script>
    // Create a shadow DOM for the container element
    const container = document.getElementById('parent');
    const shadowRoot = container.attachShadow({ mode: 'open' });

    // Create an element inside the shadow DOM
    const paragraph = document.createElement('p');
    paragraph.textContent = 'This paragraph text is inside the Shadow DOM.';
    
    // Apply some styling to the paragraph
    const style = document.createElement('style');
    style.textContent = `
      p {
        color: blue;
      }
    `;
    
    // Append the elements to the shadow DOM
    shadowRoot.appendChild(style);
    shadowRoot.appendChild(paragraph);
  </script>
</body>
</html> <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Shadow DOM Example</title>
</head>
<body>
  <div id="parent"></div>

  <script>
    // Create a shadow DOM for the container element
    const container = document.getElementById('parent');
    const shadowRoot = container.attachShadow({ mode: 'open' });

    // Create an element inside the shadow DOM
    const paragraph = document.createElement('p');
    paragraph.textContent = 'This paragraph text is inside the Shadow DOM.';
    
    // Apply some styling to the paragraph
    const style = document.createElement('style');
    style.textContent = `
      p {
        color: blue;
      }
    `;
    
    // Append the elements to the shadow DOM
    shadowRoot.appendChild(style);
    shadowRoot.appendChild(paragraph);
  </script>
</body>
</html> The text in the above code "This paragraph text is inside the Shadow DOM." will be displayed on the page, but its styling will be isolated from the rest of the document due to the use of Shadow DOM. "This paragraph text is inside the Shadow DOM." Imperative-only API for Shadow DOM: Imperative-only API for Shadow DOM: As we observe closely in JavaScript, create Shadow DOM imperatively by selecting an element, attaching a shadow root (attachShadow({mode: 'open'})), and appending child elements. const container = document.getElementById('parent');
const shadowRoot = container.attachShadow({ mode: 'open' });
const paragraph = document.createElement('p');
paragraph.textContent = 'This text is inside the Shadow DOM.';
const style = document.createElement('style');
style.textContent = 'p { color: blue; }';
shadowRoot.appendChild(style);
shadowRoot.appendChild(paragraph);This creates encapsulated DOM and styling within container, isolating the paragraph's appearance and behavior from the rest of the document. const container = document.getElementById('parent');
const shadowRoot = container.attachShadow({ mode: 'open' });
const paragraph = document.createElement('p');
paragraph.textContent = 'This text is inside the Shadow DOM.';
const style = document.createElement('style');
style.textContent = 'p { color: blue; }';
shadowRoot.appendChild(style);
shadowRoot.appendChild(paragraph);This creates encapsulated DOM and styling within container, isolating the paragraph's appearance and behavior from the rest of the document. We need a way to be able to serve shadow roots, of native and custom elements, in a static HTML document and let them upgrade progressively. Declarative API for Shadow DOM: In HTML, we can use the slot element to create a declarative API for Shadow DOM. This allows you to define placeholders for content insertion within custom elements. Here's an example: Here's an example: <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Declarative Shadow DOM</title>
</head>
<body>
  <div id="parent">
    <p>This content is outside the Shadow DOM.</p>
    <my-custom-element>
      <p slot="content">This text is inside the Shadow DOM.</p>
    </my-custom-element>
  </div>

  <script>
    customElements.define('my-custom-element', class extends HTMLElement {
      constructor() {
        super();
        const shadowRoot = this.attachShadow({ mode: 'open' });
        const template = document.querySelector('#my-custom-element-template');
        shadowRoot.appendChild(template.content.cloneNode(true));
      }
    });
  </script>

  <template id="my-custom-element-template">
    <style>
      p { color: blue; }
    </style>
    <slot name="content"></slot>
  </template>
</body>
</html> <html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Declarative Shadow DOM</title>
</head>
<body>
  <div id="parent">
    <p>This content is outside the Shadow DOM.</p>
    <my-custom-element>
      <p slot="content">This text is inside the Shadow DOM.</p>
    </my-custom-element>
  </div>

  <script>
    customElements.define('my-custom-element', class extends HTMLElement {
      constructor() {
        super();
        const shadowRoot = this.attachShadow({ mode: 'open' });
        const template = document.querySelector('#my-custom-element-template');
        shadowRoot.appendChild(template.content.cloneNode(true));
      }
    });
  </script>

  <template id="my-custom-element-template">
    <style>
      p { color: blue; }
    </style>
    <slot name="content"></slot>
  </template>
</body>
</html> In the declarative example, we use HTML to define a template for the Shadow DOM structure. We then use JavaScript to clone and append this template to the Shadow DOM, along with any additional content we wish to add. Declarative Shadow DOM removes this limitation, bringing Shadow DOM to the server. Conclusion Declarative Shadow DOM is a groundbreaking feature that enhances web components by allowing developers to define shadow DOM content directly within HTML. This approach simplifies the creation and maintenance of encapsulated components, improving code readability and reusability. For server-side rendering (SSR), Declarative Shadow DOM offers significant benefits by enabling better performance and SEO. By rendering shadow DOM content server-side, developers can ensure faster initial page loads and improved indexing by search engines. This innovation effectively bridges the gap between client-side encapsulation and server-side efficiency, making Declarative Shadow DOM a powerful tool for modern web development.

Declarative Shadow DOM: The Magic Pill for Server-Side Rendering and Web Components

Authors:
(1) Kun Lan, University of Science and Technology of China;
(2) Haoran Li, University of Science and Technology of China;
(3) Haolin Shi, University of Science and Technology of China;
(4) Wenjun Wu, University of Science and Technology of China;
(5) Yong Liao, University of Science and Technology of China;
(6) Lin Wang, AI Thrust, HKUST(GZ);
(7) Pengyuan Zhou, University of Science and Technology of China. Table of Links Abstract and 1. Introduction 2. Related Work 3. Method and 3.1. Point-Based rendering and Semantic Information Learning 3.2. Gaussian Clustering and 3.3. Gaussian Filtering 4. Experiment 4.1. Setups, 4.2. Result and 4.3. Ablations 5. Conclusion and References 3. METHOD Given a well-trained scene using 3D Gaussian representation, scene rendering images, and corresponding camera parameters, we initially employed an interactive 2D segmentation model [23] to segment the rendered images. Then, the obtained 2D segmentation maps are used as guidance to facilitate the learning of semantic information (object code) added to the 3D Gaussians. Finally, we use KNN clustering to address issues of semantic ambiguity in certain 3D Gaussians, while optional statistical filtering can help eliminate those 3D Gaussians that have been erroneously segmented. The pipeline is depicted in Fig. 1. 3.1. Point-Based rendering and Semantic Information Learning Gaussian Splatting [1] employs a point-based rendering technique (α-blending) to render a 3D scene onto a plane, and the color of a pixel on the plane can be calculated as: To achieve segmentation of a 3D scene, semantic information needs to be incorporated into the representation of the scene. Inspired by 2D segmentation, we assign an object code To use 2D segmentation maps as supervision for learning the added 3D semantic information, it is necessary to project the added semantic information from 3D onto a 2D plane. Inspired by α-blending, we consider the pixel categories in the rendered 2D segmentation map as a weighted sum of the categories of multiple 3D Gaussians along the current ray during rendering. We assume that the first 3D Gaussian contributes the most, with each subsequent 3D Gaussian’s contribution diminishing in accordance with its distance from the rendering plane, and this contribution is also proportional to the size of the 3D Gaussian itself. The category of each pixel on the rendered image can be represented by the object code of o the 3D Gaussians as: which simply replaces the color c of each 3D Gaussian in Eq. (1) with the object code of each 3D Gaussian. This paper is available on arxiv under CC 4.0 license. Authors: (1) Kun Lan, University of Science and Technology of China; (2) Haoran Li, University of Science and Technology of China; (3) Haolin Shi, University of Science and Technology of China; (4) Wenjun Wu, University of Science and Technology of China; (5) Yong Liao, University of Science and Technology of China; (6) Lin Wang, AI Thrust, HKUST(GZ); (7) Pengyuan Zhou, University of Science and Technology of China. Authors: Authors: (1) Kun Lan, University of Science and Technology of China; (2) Haoran Li, University of Science and Technology of China; (3) Haolin Shi, University of Science and Technology of China; (4) Wenjun Wu, University of Science and Technology of China; (5) Yong Liao, University of Science and Technology of China; (6) Lin Wang, AI Thrust, HKUST(GZ); (7) Pengyuan Zhou, University of Science and Technology of China. Table of Links Abstract and 1. Introduction Abstract and 1. Introduction 2. Related Work 2. Related Work 3. Method and 3.1. Point-Based rendering and Semantic Information Learning 3. Method and 3.1. Point-Based rendering and Semantic Information Learning 3.2. Gaussian Clustering and 3.3. Gaussian Filtering 3.2. Gaussian Clustering and 3.3. Gaussian Filtering 4. Experiment 4.1. Setups, 4.2. Result and 4.3. Ablations 4.1. Setups, 4.2. Result and 4.3. Ablations 5. Conclusion and References 5. Conclusion and References 3. METHOD Given a well-trained scene using 3D Gaussian representation, scene rendering images, and corresponding camera parameters, we initially employed an interactive 2D segmentation model [23] to segment the rendered images. Then, the obtained 2D segmentation maps are used as guidance to facilitate the learning of semantic information (object code) added to the 3D Gaussians. Finally, we use KNN clustering to address issues of semantic ambiguity in certain 3D Gaussians, while optional statistical filtering can help eliminate those 3D Gaussians that have been erroneously segmented. The pipeline is depicted in Fig. 1. 3.1. Point-Based rendering and Semantic Information Learning Gaussian Splatting [1] employs a point-based rendering technique (α-blending) to render a 3D scene onto a plane, and the color of a pixel on the plane can be calculated as: To achieve segmentation of a 3D scene, semantic information needs to be incorporated into the representation of the scene. Inspired by 2D segmentation, we assign an object code To use 2D segmentation maps as supervision for learning the added 3D semantic information, it is necessary to project the added semantic information from 3D onto a 2D plane. Inspired by α-blending, we consider the pixel categories in the rendered 2D segmentation map as a weighted sum of the categories of multiple 3D Gaussians along the current ray during rendering. We assume that the first 3D Gaussian contributes the most, with each subsequent 3D Gaussian’s contribution diminishing in accordance with its distance from the rendering plane, and this contribution is also proportional to the size of the 3D Gaussian itself. The category of each pixel on the rendered image can be represented by the object code of o the 3D Gaussians as: which simply replaces the color c of each 3D Gaussian in Eq. (1) with the object code of each 3D Gaussian. This paper is available on arxiv under CC 4.0 license. This paper is available on arxiv under CC 4.0 license. available on arxiv

Effortless 2D-Guided, 3D Gaussian Segmentation: Rendering and Semantic Information

How We Enhanced Remotion Performance through GPU-Accelerated Server-Side Rendering Running with hardware acceleration in headless mode can be more challenging than it appears. We embarked on this journey with , which is an excellent framework that enables developers to "Make Videos Programmatically.” On our way, explore various Nvidia driver versions, including those from Nvidia's website and Ubuntu's official repositories. Google Chrome Remotion We collaborated with the vibrant Open-source community to find the answer for using . After encountering some setbacks on our way, we were able to make it work for Remotion eventually. We consolidated our findings in the Remotion Docs at and simplified the instructions for Remotion developers to make the most out of it. Although the whole research was done for , the same process will work for any headless application that requires GPU power, especially in headless mode. Remotion GPU with Remotion for server-side rendering Using the GPU in the Cloud Remotion Hardware Acceleration in Browser Rendering Hardware Acceleration is to your browser what " " is for a gasoline car. It uses the power of specialized hardware like GPUs to make your web pages load faster, and videos play smoothly. Hardware acceleration improves the part where the web page is displayed and shown to you, known as rendering. This results in a smoother and snappier browsing experience. Nitrogen Fuel DLAMI from Marketplace? One may wonder why we didn't opt for the AWS Deep Learning AMI or DLAMI. But we needed fine-grained control over the GPU drivers and utilities and the outdated DLAMIs despite all the bloatware was not the answer. Such tasks are often challenging to achieve with pre-packaged AMIs, as discussed in " .” Tailoring the environment to our exact requirements also helped us troubleshoot issues effectively. Why Deep Learning AMI is Holding You Back We experimented with multiple packages to identify the key ones needed for Google Chrome to recognize the GPU. Despite these efforts, GPU recognition remained elusive, and in some instances, GPU drivers were crashing even at initialization. The long and arduous journey has brought us to the end of the tunnel, yet the darkness persists, and the solution remains as elusive as ever. As we decided to call it a day, We stumbled upon on 's Github issues, which did not give us any hope but did give us a new perspective and drive to achieve our goal. this thread Puppeteer The Fresh Start It was time to return to the drawing board and start afresh. We started with a clean base Ubuntu AMI on AWS EC2 Instance. After that, we downloaded and installed the Nvidia Tesla T4G drivers from Nvidia's official website. Once it was confirmed that the GPU was working properly using , we installed Google Chrome and tested it for hardware acceleration. To our relief, Google Chrome finally gave a nod to work with Hardware Acceleration. nvidia-smi Launching an EC2 Instance Launching an EC2 instance can be achieved in various ways, with the AWS Web Console and AWS CLI being two notable options. Regardless of the method, the important parameters are instance type and AMI selection. At the time of writing, the AMI ID for our chosen instance is . For launching the EC2 instance via , the following command can be used after replacing the placeholders with actual values. g4dn.xlarge ami-053b0d53c279acc90 aws-cli aws ec2 run-instances \
  --instance-initiated-shutdown-behavior "terminate" \
  --image-id "ami-053b0d53c279acc90" \
  --instance-type "g4dn.xlarge" \
  --key-name "<KEY_NAME>" \
  --subnet-id "<SUBNET_ID>" \
  --security-group-ids "<SECURITY_GROUP_ID>" \
  --iam-instance-profile Arn="<ARN>" \
  --block-device-mappings '[
  {
    "DeviceName": "/dev/sda1",
    "Ebs": {
      "VolumeSize": 8,
      "VolumeType": "gp3"
    }
  }
]' Ubuntu and Kernel Upgrade Ubuntu 22.04 AMI on AWS comes with Linux Kernel (specifically ). At this point, we have two options either we stick with Kernel or Upgrade to ( ), we decided to upgrade the Kernel. This decision is crucial as the Nvidia driver compiled for one version will not work for the other. ami-053b0d53c279acc90 v5 5.19.0-1025-aws v5 v6 v6.2.0-1013-aws After launching the instance, SSH into the instance and initiate the Ubuntu packages upgrade process. To update all the installed packages, including Linux Kernel, execute the following one-liner. sudo bash -c "apt update && export DEBIAN_FRONTEND=noninteractive && export NEEDRESTART_MODE=a && apt upgrade -y && reboot" We can also split , and . But the reason behind doing it like this is to install these updates in non-interactive mode. apt update apt upgrade -y reboot After the execution, the system will reboot with Linux Kernel Version 6. We can confirm the kernel update with . Rebooting is essential when upgrading the Ubuntu system because it loads the new Kernel on the next boot, and Nvidia drivers will subsequently be built for the updated version. uname -r Nvidia GPU Driver Installation The process of installing GPU drivers is straightforward when we have the correct driver for the GPU and the corresponding compatible version. Before starting the installation, we need to install a couple of packages: and . The former is a bundle with a variety of compilation tools required to compile the Nvidia driver. The latter, while not mandatory, is required by Google Chrome. Therefore, it's a good idea to install it beforehand to enable support for Vulkan ICD loader for Nvidia, should we require it in the future. build-essential libvulkan1 sudo apt install -y build-essential libvulkan1 After build tools are installed, we can proceed to download and install the GPU drivers using the following commands: DRIVER_URL="https://us.download.nvidia.com/tesla/535.104.12/NVIDIA-Linux-x86_64-535.104.12.run"
DRIVER_NAME="NVIDIA-Linux-driver.run"
wget -O "$DRIVER_NAME" "$DRIVER_URL"
sudo sh "$DRIVER_NAME" --disable-nouveau --silent
rm "$DRIVER_NAME" Now we can run to confirm the GPU driver installation. The output will look similar to this: nvidia-smi Configuring the Startup Service We learned this the hard way: running once is needed for the proper initialization of and . Google Chrome and Chromium fail to initialize without this preliminary setup. To automate this process, we will create a service that runs at boot time using the following commands: nvidia-smi EGL ANGLE EGL nvidia-smi echo '[Unit]
Description=Run nvidia-smi at system startup

[Service]
ExecStart=/usr/bin/nvidia-smi
Type=oneshot
RemainAfterExit=yes

[Install]
WantedBy=multi-user.target' | sudo tee /etc/systemd/system/nvidia-smi.service
sudo systemctl enable nvidia-smi.service
sudo systemctl start nvidia-smi.service Testing the Installation To test hardware acceleration with Google Chrome or Chromium, we can follow these steps. It's worth noting that Google Chrome has more dependencies, making it an easier choice if we plan to use the Node.js library, Puppeteer. On the other hand, Chromium is a lightweight option with a smaller footprint of dependencies, but we can still use Puppeteer with Chromium by installing a few extra dependencies. Installing Chromium Installation Installing Chromium is straightforward, as it is readily available with Ubuntu's official software repositories. We can install it using with the following command. apt sudo apt install -y chromium-browser Testing Chromium is fully prepared to handle Hardware Acceleration tasks. We can verify its readiness by launching Chromium with the specified parameters. chromium-browser --headless --use-gl=angle \
   --use-angle=gl-egl --use-cmd-decoder=passthrough \
   --print-to-pdf=output.pdf 'chrome://gpu' Installing Puppeteer Dependencies To use Puppeteer with Chromium instead of Google Chrome, there are a few extra dependencies that should be installed. sudo apt install ca-certificates fonts-liberation \
    libasound2 libatk-bridge2.0-0 libatk1.0-0 libc6 \
    libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 \
    libgbm1 libgcc1 libglib2.0-0 libgtk-3-0 libnspr4 libnss3 \
    libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 \
    libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 \
    libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 \
    libxtst6 lsb-release wget xdg-utils Installing Google Chrome Installation Google Chrome can be installed from multiple options, but we will use the Google Chrome official repository for Debian. We need to add it to Ubuntu's repo list along with the public signing key. curl -fsSL https://dl.google.com/linux/linux_signing_key.pub | sudo gpg --dearmor -o /usr/share/keyrings/googlechrom-keyring.gpg
echo "deb [arch=amd64 signed-by=/usr/share/keyrings/googlechrom-keyring.gpg] http://dl.google.com/linux/chrome/deb/ stable main" | sudo tee /etc/apt/sources.list.d/google-chrome.list
sudo apt update
sudo apt install -y google-chrome-stable Testing Google Chrome is ready for our Hardware Acceleration tasks. We can test it by launching Google Chrome with the following parameters. google-chrome-stable --headless --use-gl=angle \
    --use-angle=gl-egl --use-cmd-decoder=passthrough \
    --print-to-pdf=output.pdf 'chrome://gpu' The above commands will generate , and transfer it to your local machine to check the status of Hardware Acceleration in Google Chrome or Chromium. If the process goes smoothly, the resultant will look like this. output.pdf PDF Working with Puppeteer To verify GPU acceleration using the Node.js library Puppeteer, follow these steps: Installation Install Node.js, as this clean Ubuntu AMI does not include any unnecessary packages. Use the following commands: curl -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key | sudo gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg
NODE_MAJOR=18
echo "deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_$NODE_MAJOR.x nodistro main" | sudo tee /etc/apt/sources.list.d/nodesource.list
sudo apt update
sudo apt install nodejs Testing After installing Node.js, we can install Puppeteer by running in our code directory. Here's a sample file for checking hardware acceleration: npm i puppeteer index.js const puppeteer = require('puppeteer');
(async () => {
  const browser = await puppeteer.launch({
    headless: true, 
    args: ['--use-gl=angle', '--use-angle=gl-egl'], 
  });
  const page = await browser.newPage();
  await page.goto('chrome://gpu');
  await page.waitForTimeout(2000);
  await page.screenshot({ path: 'output.png' });
  await browser.close();
})(); Run the script using . This will generate an file containing hardware acceleration information. node index.js output.png Note from the Creator has been immensely helpful in helping the “ ” community adopt GPU-accelerated rendering.He's researched and written about how to obtain, configure and run EC2 containers and headless Chrome correctly in order to take advantage of graphics acceleration.This area has been especially hard to crack, and without we would not have been able to unlock huge speed boosts. Mirza Remotion Mirza We are super grateful for that! -- Jonny Burger Creator / Remotion.dev Conclusion With hardware acceleration now readily available in headless mode, we can harness the power of GPUs for faster and more complex rendering tasks. Our next steps involve creating a custom AMI from this instance and streamlining the process using AWS Image Builder Pipelines for efficiency. Additionally, we plan to extend hardware capabilities to Docker containers, further extending our options. Resources Remotion - Make videos programmatically: https://remotion.dev Remotion - Using the GPU in the cloud: https://www.remotion.dev/docs/miscellaneous/cloud-gpu Cannot enable GPU acceleration: github.com/puppeteer/puppeteer/issues/3637 : Recommend a workflow for using the GPU on a AWS instance https://github.com/remotion-dev/remotion/issues/2889 Getting Started with Headless Chrome: developer.chrome.com/blog/headless-chrome Why Your AWS Deep Learning AMI is Holding You Back and How to Fix: mirzabilal.com/why-your-aws-deep-learning-a.. Deep Learning with “AWS Graviton2 + NVIDIA Tensor T4G” for as low as free* with CUDA 12.2: mirzabilal.com/deep-learning-with-aws-gravi.. How to install FFmpeg with Harware Accelaration on AWS: mirzabilal.com/how-to-install-ffmpeg-with-h.. CPU vs GPU for Video Transcoding - Challenging the Cost-Speed Myth: https://mirzabilal.com/cpu-vs-gpu-for-video-transcoding-challenging-the-cost-speed-myth Also published . here

Unlocking GPU-Accelerated Server-Side Rendering in Remotion With Chrome, Chromium & Puppeteer

Creating photorealistic designs of products related to the real estate sector has always been the holy grail for many home developers. This is key to marketing and creating a next-gen experience for potential home buyers. Many technologies are utilized for this task but they encounter problems with getting the proper I.T. infrastructure that can process large amounts of design data to create the required visualizations at the required time and with minimal cost. Unreal engine, one of these technologies that has been used by both game and film studios to render high-quality 3D animations for decades, is now used by developers in the real estate industry. Unfortunately, running unreal engines also requires powerful and expensive I.T. infrastructures which many startups in the construction sector cannot afford. This is why cloud rendering of unreal engine projects has the potential to contribute immense value in the construction and real estate industries. This cloud rendering is mainly achieved through render farms. What excites me the most about unreal engine cloud rendering The ability of home builders to create building models utilizing , render them in the cloud, and provide breathtaking visualization to potential buyers without the need for sophisticated I.T. infrastructures. unreal engines Traditionally, when it came to selling houses, builders and real estate agents used pictures and animated tours. But now, there's a new and improved way to get people interested in buying homes. For big housing projects, it's super important to sell houses before they are even built. To do that, developers need to show potential buyers something really exciting about the homes they are planning to build. But with real-time technology like unreal engine and cloud rendering, companies can deliver high-quality visualizations, no matter where the customer is located or what hardware they are viewing the digital homes on. Companies Utilizing unreal engine and cloud rendering to provide service to home developers There are a couple of companies that are providing services to home developers utilizing unreal engine and some of them include: is a company in Australia that has been in the real estate sector for decades. It is a software platform that enables home buyers to walk around a photorealistic 3D model of their future home. Their platform utilizes and enables customers to select elevations, floor plan options, materials, and products, as they go while keeping track of the updates. This ensures that home buyers end up with their dream homes. Digital Home Away pixel streaming technology Another company is , which also offers photorealistic visualization in the real estate sector. Powered by Unreal Engine, the company helps real estate developers to sell homes that are not built yet. 3D Estate’s platform creates interactive rotating 3D models and virtual tours of apartments for buyers to view and inspect. With the power of cloud rendering, it takes just five to seven minutes to complete the entire rendering process on a small flat and up to 15 minutes to render a larger property. Home developers can choose from a range of six set apartment styles, then a simple interface enables them to add the 3D models to their website. 3D estate It also provides an interactive web tool that enables buyers to search for apartments using criteria, such as square footage or number of bedrooms, and then wander around the virtual developments before they are built. The app works on any device, from smartphones and laptops to 8K showroom screens and VR headsets. https://youtu.be/VNJrZ0NYBko?si=-AqX3tqr6_nYXsqr&embedable=true As GPU and CPU Get better, cloud rendering will also get better Products like I-render cloud GPU and CPU will continue to get better thanks to Moore's law, which, in this context, implies that the speed and capability of our computer processors will increase every two years because the number of transistors on a microchip doubles every two years, making our computers smaller and faster. The economic impact of this law is that as these computing devices continue to show exponential growth in complexity and computing power, there will be a proportional reduction in the cost of manufacturing these devices. These boosts in computing power will reduce the time and cost relating to cloud rendering of unreal engine projects. Why cloud rendering of unreal engine projects  is needed in the real estate sector Often, potential home buyers will have to make a wide variety of decisions on their home-buying journey. Each decision can take time, and without the ability to visualize options, can create confusion. Then once made, a selection might be outside of the buyer’s budget, causing them to start that process over. Potential benefits of render farms Real estate customers will benefit from this because they will have the power of making early-stage decisions; as they get to see proposed projects on a realistically rendered scale before they’re actually built, helping them decide on whether to make a purchase. Not only will this technology enhance customer journeys by facilitating real-time interaction with digital homes, leading to increased sales, but it will also shorten the delivery process for the home builder and enable them to test new designs before building or bringing them to market. Potential negative impacts of render farms Data theft can be the biggest problem when using render farms. Malicious hackers can easily exploit weaknesses in the render farm's security to steal important data like project files and information that might be classified to the company. The consequences of this can be severe and will affect businesses and people’s lives. Predictions on how cloud rendering in real estate will evolve With the emergence of technology like the , more real estate companies will utilize this opportunity to render projects in the cloud and present the results wherever a prospective client is located around the world. Apple Vision Pro How society will want this technology to be used I believe that more people will join the conversation about transparency in the construction sector, especially in Africa. People will demand a BIM approach to every public and private construction project. This way, they can be assured that every amount spent at the initial stage is worth it and can be easily tracked. And for this to occur people must be able to visualize projects realistically at the early stage. Unreal engine cloud rendering can be a key technology for government agencies and companies to use for faster rendering of proposed projects without the need for much I.T. infrastructure.

Unreal Engine and Cloud Rendering in the Real Estate Industry

Let's learn about via these 59 free stories. They are ordered by most time reading created on HackerNoon. Visit the to find the most read stories about any technology. Customer Rentention /Learn Repo 1. The Retail Evolution: Customers Demand Enhancements to the Shopping Experience Andreas Hassellof, Founder and CEO of Ombori, explores how changing customer behaviors impact retail, and drive retail technology innovation. 2. How to Keep Your Customers Focused and Engaged Know how to keep your SaaS customer engaged and focused in 2021. 3. 5 Ways to Use AI to Improve Customer Success Artificial Intelligence is a powerful set of tools that can be used throughout a business' operations allowing them to achieve better customer success. 4. Make it Sticky, then Acquire: 4 Pricing Lessons From My First 0-100 Users In an ideal world, the goal of any business starting up is to make money. In most cases, the profitability of a product is closely tied to how you as a product manager choose to price your product. Apart from building a product that provides real value to its customers, profitable monetization is the second most important aspect of running a successful business. 5. How Can Companies Use AI for Better Customer Experience? Explore how AI can help businesses to upgrade the experience of new and existing customers. 6. The Top 12 Inbound Marketing Strategies to Adopt Right Away This article will discuss the various Inbound Marketing Strategies required to help your business grow. 7. Retaining SaaS Customers in a Global Economic Downturn In a global economic downturn, retaining current customers is crucial for businesses, especially for SaaS companies facing the growing risk of customer churn. 8. How to Improve Customer Care Today customer care is one of the most popular and widely discussed topics in the IT industry. 9. The Importance Of Data in Sales in 2022 10. Social Features: The Secret to Bridging the Gap Between Apps and Users With a competitive app market and struggle to keep customers engaged, how can app developers ensure that they keep their users for a longer time? 11. How To Honour Your Early Adopters With Promotional Products Hi! My name is Vasily, and I am the co-founder of the Merch38 platform. We created this business to help people and companies create their own merchandise for retail, marketing, gifting or any number of reasons to need branded products. I would like to share how we helped the creators of the MagicKids mobile application to thank their first users, their early adopters. 12. 7 B2B Marketing Tips and Tricks that Work A 2015 press release from Bain & Company stated an interesting piece of truth. Almost 90 percent of sales and marketing executives don’t feel adequately prepared to sell to today’s digital-savvy buyers. Fortunately, this post offers a few B2B marketing tips and tricks so you can skyrocket your revenue. 13. You Need A Tech Loyalty Program: Here Are 5 Efficient Use Cases To Spark New Ideas An efficient retention strategy increases the company's profit up to 95%. Here are the best loyalty programs in the tech sector you can look to for inspiration. 14. Want to Drive Retention? Gamify Your SaaS Product Games are designed to keep us playing as long as possible. By presenting players with challenges and rewards for completing them, apps can generate dopamine hits in their users that can keep them coming back for more. Most people love a challenge, and consciously or not, we love rewards even more, even if they’re largely arbitrary. 15. Without Digital Adoption, Your Enterprise will Struggle It’s clear to everyone that we’re living in a digital age. In a time when people expect to run their lives through their smartphones, competitive enterprises have no choice but to adopt digital tools. 16. How We Increased User Retention in the LoopMessage App Using Free Messaging The LoopMessage app helped increase user retention several times. This was reached by sending free personalized messages via popular instant messengers. 17. How To Improve Customer Retention and Increase LTV Retaining customers is the number one growth strategy for business. Learn how to retain your customer and improve lifetime value (LTV). 18. How to Boost Customer Engagement in Digital Marketing customer engagement is key to keeping customers
happy and loyal. 19. Why Custom-Built Automation Can Be Ideal for Business Growth? Automation is a powerful driving force for business growth. It allows mundane, repeatable tasks, to be dealt with by binary code. That means we can just get on our all-important daily tasks. 20. What Is Average Handle Time (AHT) and How To Reduce It: 20 Tips & Tactics Average handle time is a key metric to focus on when trying to improve your customer support strategy. Read more about its major contributing factors, and what 21. Avoid a Loss in MRR and Make Your Dunning Campaign Really Powerful: Know How If you’re running a subscription or SaaS business, you know that at the end of the day your chief metric is monthly recurring revenue (MRR). 22. How to Drive Early 'Time-To-Value’ through Customer Success Time-To-Value is a Customer Success metric that is undervalued in SaaS but could be an advantage for a business. This article explains TTV and the types of TTV. 23. Your Customers Are Everything In The SaaS Industry Today, I’ll share some of the best lessons I got to learn from that experience. You can use these tips to beautify your SaaS or any other business. 24. What Three Features Should Houseparty Launch Next? “We see our customers as invited guests to a party, and we are the hosts. It’s our job every day to make every important aspect of the customer experience a little bit better.” — Jeff Bezos 25. Customer Education: How to Educate Customers Profitable for Business Customer education is a powerful growth marketing tool for online businesses. I discuss how to create a customer education strategy for your company in 2023. 26. 5 Steps to Master Customer Intelligence in 2021 Customer intelligence is the process of gathering and analyzing customer data. 27. 10 Tips to Develop a Strong B2B Relationship The growth of B2B eCommerce has spiked in the last two years. From $12.2 trillion in 2019, it is predicted to reach $20.9 trillion by 2027. 28. 7 Reasons Why Customer Success Function Fails Ever wondered why most of the SaaS companies have got Customer Success wrong? Check out some pitfalls that caused  the Customer Success effort to fail. 29. Predicting if the Customer is Satisfied by the Resolution Case study to predict if customer is satisfied by the resolution. 30. Welcome to The Zero Friction Future Hello, It’s time to learn something new again. This time, I would like to start a new series as zero friction future and talk about the details and categories in which we see high consumer friction and the areas of improvement. 31. Dealing With Negative Email Replies: To Give It Up or To Work It Out When you consider all outcomes of your email campaigns, don’t be afraid to ask the right questions. Even if they scare you. For example, don’t say “What should I do if I get negative replies?”. Say “What should I do when I get negative replies?”. 32. How to Generate Sales from Inactive Customers and Boost E-commerce What does marketing automation mean? Are activities planned triggered on user-generated events. Simple and clear. 33. 5 Auto-Message Sequences You Can Run Right Now In Dashly, we adore auto messages. It saves us lots of time, as they automatically generate and warm up leads. In this article, we share an easy way for you to create a message chain right now if you have never done this before. Here’s a list of five auto messages sequence which will be beneficial to both you and your clients. 34. What is Data Collection and What are The Most Important Events to Track When your company is client-oriented, one of your priority tasks is understanding your clients’ problems and gathering insights on how people use your product and when exactly they benefit from it. 35. No Brown M&Ms: The Van Halen Growth Hack For Getting Better Customers The Pareto Principle—known also as the 80/20 rule (and the law of the vital few) —states that for many events, roughly 80% of the effects come from 20% of the causes. 36. 9 SaaS Retention Strategies to Reduce Customer Churn Customer retention is the key for any business and for SaaS, it's way too hard without a perfect strategy. Do check our blog to find the best tips! 37. Correlation Between Customer Satisfaction and Retention Is Real So is there a correlation between customer satisfaction and customer retention? Of course, there is! Satisfied customers stay, what’s there to research and analyze? 38. How to Implement a Customer Success Strategy: A Case Study Customer-Centricity is bang on trend; 73% of business leaders recognised customer experience as one of the most important purchase-driving factors. The truth is, there are no conniving, cheeky tricks you can use. Instead, it takes consistency, persistence, and a shared team ethos. 39. Voice of Customer: How to Use VOC Data to Drive Business Growth We all know Customer feedback is always useful for increasing product quality or service. But do you know that by using Customer feedback, you can also increase your company's revenue? 40. Ok Google, Improve My Retention Rate: A Customer-Centric Approach to the Crisis COVID-19 shifted the earth from beneath the business world’s feet. Small, medium, and large businesses alike closed their doors and weren’t sure when they would open them again. As the pandemic dug in, most businesses (I hope!) put the health and safety of their employees first. Only once they could ensure their team’s safety, were they able to start putting a plan in place for recovery. 41. 5 Amazing Ways to Boost Your Customer Retention Rate Improving your customer retention rate matters, and it’s something worth investing in. So here are 5 ways to know how to retain your existing customers easily. 42. 6 Customer Retention Strategies Every Small Business Owner Should Know Generating leads and attracting new customers are keys to ensure initial business success. 43. How To Segment Shopify Customer Base with Google Sheets and Google Data Studio After defining what the RFM analysis is standing for, and how you can apply it to your Customer Base, I want to show you how to apply it on Shopify orders data. 44. The Beginner's Guide to The Google HEART Framework In this post, we will dig into the Google HEART framework: a simple way to ensure you take into consideration every aspect of the user journey. 45. 5 Quick Tips on How to Improve Customer Satisfaction In this article, you'll learn what to do to satisfy your customers and how to build a stable and lucrative relationship. 46. Employee Experience and Customer Experience: Beyond Retention and Loyalty An #IBM research revealed that 70% of brand perception is settled by employees and 41% of customer loyalty comes from positive employee attitude Customers can generally be divided into two, Internal and external customers. Who are your internal customers? Your employees. Forrester defines customer experience as 47. How To Prevent Your Customers From Leaving And Win Back The Ones Who Left We bet you have your own “gone customers’ cemetery” of those who once were with you, but have gone and are not planning to return. It’s sad, but you can’t give up: almost half of them are sure to be returned. 48. How a Customer 360 and Dgraph Cloud Can Help Improve User Retention Successful corporations leverage a customer 360. Check out how Dgraph can provide top-notch analyses quickly and effectively. 49. WOW Your Clients: 5 Golden Rules to Make Your Client Happy How do you imagine a happy client? We believe that happy clients scream “WOW!”. Here are the top 5 rules of delivering WOW service for you. 50. What Happens When You Make Product Decisions to WOW your Customers [A Case Study] Which of you, when you have to buy an airplane ticket, is not looking for the cheapest and more convenient solution from SkyScanner or similar? And which one of you, once aware of the prices of the big airlines, doesn’t try to take a look at EasyJet or Ryanair? Honestly, for flights of less than 3 hours, the price paid plays a decisive role in my personal decision. 51. Why Chatbots Are The Future Of Customer Retention? Customer retention has become a genuinely challenging task for entrepreneurs. In the midst of all this, AI-assisted Chatbots are the real game changers. 52. How Obsessing on Outreach and Marketing Helped Truepush Grow 53. Hunting for Customers With PostgreSQL Now more than ever, you have to hold onto every customer you can. Customers don’t love your product one minute, then fall out of love with it the next. Normally there’s a declining trend in usage of your product over time. 54. How To Create Customer Segmentation using Google Analytics and A Spreadsheet Using Google Analytics, we can analyze our customer behaviors based on their interests, commonly features through clicks, time on page, bounce rate, custom events, etc. and their behaviors as shoppers, such as add to basket, average product quantity basket, LTV, AOV, etc. 55. How To Keep Your Customers Coming Back: 5 Proven Strategies Most businesses focus mainly on how to attract new leads to their website. But they tend to overlook the importance of retaining their existing customers. 56. 30 Powerful Strategies to Optimize Conversion for SaaS Businesses Learn 30 of the most effective strategies and practical tips to Optimize your B2B SaaS Conversion Rate as we get closer to 2023 57. Which Is Better For Your Business: Relationship or Transactional NPS® Surveys? What will be more profitable to the business, a Transactional NPS® Survey or a Relation NPS® Survey? 58. 24 Customer Retention Strategies One is better than two and is equal to six. At least, that’s how we (Dashly.io) think when it comes to comparing your regular customers with your potential customers. 59. Skyrocket your SaaS Retention by Applying Addictive Game UX [A How To Guide] Even if you’re not a gamer, you’ve probably heard of games like Flappy Bird, Fortnite, PUBG and Candy Crush. With user counts in the tens and hundreds of millions and some grossing over a $100 million in monthly revenue, there’s a lot for companies to learn from the gaming world. Gamers spend an average of an hour and 13 minutes day on video games – imagine if your customers spent that amount of time on your SaaS product every day. Thank you for checking out the 59 most read stories about Customer Rentention on HackerNoon. to find the most read stories about any technology. Visit the /Learn Repo

59 Stories To Learn About Customer Rentention

Last week, I decided to see the capabilities of OpenAI's image generation. However, I noticed that one has to pay to use the , while the was free, even though rate-limited. Dall.E offers samples, but I wanted to keep learning Rust. So far, I've created a . In this post, I want to describe how you can create a webapp with server-side rendering. web interface API Node.js and Python REST API The context is a runtime for asynchronous programming for Rust; is a web framework that leverages the former. I already used Axum for the previous REST API, so I decided to continue. Tokio Axum A server-side rendering webapp is similar to a REST API. The only difference is that the former returns HTML pages, and the latter JSON payloads. From an architectural point of view, there's no difference; from a development one, however, it plays a huge role. There's no visual requirement in JSON, so ordering is not an issue. You get a struct; you serialize it, and you are done. You can even do it manually; it's no big deal - though a bit boring. On the other hand, HTML requires a precise ordering of the tags: if you create it manually, maintenance is going to be a nightmare. We invented to generate order-sensitive code with code. templating While templating is probably age-old, PHP was the language to popularize it. One writes regular HTML and, when necessary, adds the snippets that need to be dynamically interpreted. In the JVM world, I used <abbr title="Java Server Pages">JSP</abbr>s and Apache Velocity, the latter, to generate RTF documents. Templating in Axum As I mentioned above, I want to continue using Axum. Axum doesn't offer any templating solution out-of-the-box, but it allows integrating any solution through its API. Here is a small sample of templating libraries that I found for Rust: , based on Handlebars handlebars-rust , based on Liquid liquid , based on Jinja, as the next two Tera askama MiniJinja etc. As a developer, however, I'm lazy by essence, and I wanted something integrated with Axum out of the box. A quick Google search lead me to , which seems pretty new but very dynamic. The library is an abstraction over handlebars, askama, and minijinja. You can use the API and change implementation whenever you want. axum-template axum-template in short Setting up axum-template is relatively straightforward. First, we add the dependency to Cargo: cargo add axum-template Then, we create an engine depending on the underlying implementation and configure Axum to use it. Here, I'm using Jinja: type AppEngine = Engine<Environment<'static>>;                 //1

#[derive(Clone, FromRef)]
struct AppState {                                              //2
    engine: AppEngine,
}

#[tokio::main]
async fn main() {
    let mut jinja = Environment::new();                        //3
    jinja.set_source(Source::from_path("templates"));          //4
    let app = Router::new()
        .route("/", get(home))
        .with_state(AppState {                                 //5
            engine: Engine::from(jinja),
        });
} Create a type alias Create a dedicated structure to hold the engine state Create a Jinja-specific environment Configure the folder to read templates from. The path is relative to the location where you start the binary; it shouldn't be part of the folder. I spent a nontrivial amount of time to realize it. src Configure Axum to use the engine Here are the base items: is a facade over the templating library Engine Templates are stored in a hashtable-like structure. With the MiniJinja implementation, according to the configuration above, is simply the filename, , Key e.g. home.html The final parameter has no requirement. The library will read its attributes and use them to fill the template. S I won't go into the details of the template itself, as the is quite good. documentation The impl return It has nothing to do with templating, but this mini-project allowed me to ponder the return type. In my previous REST project, I noticed that Axum handler functions return , but I didn't think about it. It's indeed pretty simple: impl impl If your function returns a type that implements , you can write its return type as . This can help simplify your type signatures quite a lot! MyTrait -> impl MyTrait -- Rust by example However, it has interesting consequences. If you return a single type, it works like a charm. However, if you return more than one, you either need a common trait across all returned types or to be explicit about it. Here's the original sample: async fn call(engine: AppEngine, Form(state): Form<InitialPageState>) -> impl IntoResponse {
    RenderHtml(Key("home.html".to_owned()), engine, state)
} If the page state needs to differentiate between success and error, we must create two dedicated structures. async fn call(engine: AppEngine, Form(state): Form<InitialPageState>) -> Response {                     //1
  let page_state = PageState::from(state);
  if page_state.either.is_left() {
    RenderHtml(Key("home.html".to_owned()), engine, page_state.either.left().unwrap()).into_response()  //2
  } else {
    RenderHtml(Key("home.html".to_owned()), engine, page_state.either.right().unwrap()).into_response() //2
  }
} Cannot use ; need to use the explicit type impl IntoResponse Response Explicit transform the return value to Response Using the application You can build from the source or run the Docker image, available at . The only requirement is to provide an OpenAI authentication token via an environment variable: DockerHub docker run -it --rm -p 3000:3000 -e OPENAI_TOKEN=... nfrankel/rust-dalle:0.1.0 Enjoy! Conclusion This small project allowed me to discover another side of Rust: HTML templating with Axum. It's not the usual use case for Rust, but it's part of it anyway. On the Dall.E side, I was not particularly impressed with the capabilities. Perhaps I didn't manage to describe the results in the right way. I'll need to up my prompt engineering skills. In any case, I'm happy that I developed the interface, if only for fun. The complete source code for this post can be found on . GitHub To go further: Axum axum-template MiniJinja Dall.E webapp Image generation API Originally at on April 30, 2023. published A Java Geek

Showcasing Server-side Rendering in Rust — A Dall.E Use-case

If you’re tired of slow-loading websites and frustrated users It's time to give your online presence a . And one of the most underutilized techniques for doing so is server-side rendering. performance boost You can unlock the full potential of your website by harnessing the power of server-side rendering. Not only will it supercharge your website's speed, but it will also take the user experience to new heights. Join me on a fascinating journey to uncover the secrets of server-side rendering and learn how it can revolutionize the performance of your website. Say farewell to slow load times and embrace the future of seamless, lightning-fast web experiences. Understanding the Concept of Server-Side Rendering Have you ever clicked on a website and found yourself waiting for what seems like an eternity for the content to load? This could be due to the technique used to render the content of the website. Enter - a method that has the server generate the HTML code for a web page, rather than leaving it up to JavaScript on the client-side rendering (CSR). This technique not only speeds up the loading process but also makes it easier for search engines to index your site, providing a smoother user experience. server-side-rendering In contrast, client-side rendering uses JavaScript to create the content within the browser, leading to slower load times and potential difficulty for search engines to access your content. But how do you get started with server-side rendering? It all begins with setting up the server environment and integrating it into your web application with a library or framework like React or Angular. And don't forget to follow best practices like caching to keep your site fast and efficient. In summary, server-side rendering is a game-changer in the world of web development. With its quick load times, improved SEO, and user-friendly design, it's the way to go for a top-performing website in today's digital age. Implementing Server-Side Rendering in Web Development In the world of web development, performance is everything. With the demand for fast and smooth user experiences at an all-time high, it's essential to find ways to optimize your website's performance. This is where server-side rendering comes in. Here are the steps for implementing server-side rendering in web development : To implement server-side rendering, you need to set up a server environment that can handle the rendering process. You can use popular server-side technologies like Node.js and PHP to set up your server environment. Setting up the Server-Side Environment The next step is to integrate server-side rendering into your web application. You can use popular JavaScript frameworks like React, Angular, and Vue.js to integrate server-side rendering into your web application. Integrating Server-Side Rendering into Your Web Application: It's important to follow best practices while implementing server-side rendering in your web application. Some of the best practices include using caching, minimizing the amount of JavaScript code, and using a server-side rendering library to handle the rendering process. Best Practices for Server-Side Rendering Implementation: The Impact of Server-Side Rendering on User Experience When building a website, there are several benefits to rendering the content on the server as opposed to on the client side. The most noticeable of these benefits is the faster load times. By delivering the HTML and CSS to the user's browser first, the page can start rendering right away, leading to quicker first-load times. This is especially important for those with slow internet connections. Despite Google's ability to delve into synchronous JavaScript, the enigma surrounding remains intricate and rife with potential hindrances, such as . This is why relying solely on client-side rendering remains a precarious proposition from a search engine optimization standpoint. Server-side rendering has advantages for search engines. JavaScript SEO delays in indexing They use HTML content to index and rank websites, so by rendering the page on the server, the search engines can see all of the content, even before the user interacts with it. Not only is it faster, but server-side rendering also offers a better user experience. Navigation is smoother and more seamless, without any delays as the browser waits for JavaScript to load. Furthermore, server-side rendering is crucial for accessibility; By delivering a fully-formed HTML document to the user's browser, assistive technologies such as screen readers can easily access and understand the content. All in all, server-side rendering is an essential aspect of modern web development that greatly enhances the user experience. From faster load times, improved search engine optimization, and smoother navigation, to better accessibility, server-side rendering is a must-have for delivering the best possible user experience. Whether you are creating a simple website or a complex web application, incorporating server-side rendering is a non-negotiable step in your development process. The Future of Server-Side Rendering The future of server-side rendering (SSR) is overflowing with possibilities. Recently, the advent of more efficient and scalable SSR frameworks such as Next.js and Nest.Js has caused quite a stir in the web development industry. These frameworks have been designed with a specific goal in mind- to overcome the limitations posed by traditional SSR frameworks and make it easier for developers to create fast and dynamic web applications. One of the most exciting trends in web development today is the rise of . These web applications mimic native mobile apps in terms of look and feel, but they run directly in a user's browser. SSR can take PWAs to the next level by making them fast and responsive, providing users with a seamless experience that rivals that of native mobile apps. progressive web apps (PWAs) Another trend in the world of web development is the growing importance of headless content management systems (CMS). With headless CMS, the front-end and back-end of a website are disconnected, making it easier to manage content and create dynamic user experiences. SSR makes it possible to reap the benefits of headless CMS while delivering fast and dynamic web applications. The web is on a journey to become more focused on the end-user, and the demand for snappy and engaging websites is only increasing. Server-Side Rendering (SSR) can be a game-changer, with its fast page load times, improved SEO, buttery-smooth navigation, and inclusive accessibility features. This makes it a vital aspect of contemporary web development. The future of SSR is bright, with possibilities for advancements in technology and the continued pursuit of lightning-fast websites. As a developer, business owner, or average user, you wouldn't want to miss out on the exciting future of SSR. Stay tuned, as the next chapter of SSR is about to unfold. Final Thoughts Server-side rendering is a game-changer when it comes to boosting website performance. With its ability to deliver faster load times, improved search engine optimization, smoother navigation, and better accessibility, it has become a cornerstone of modern web development.

Stories, News & Mentions about RENTERII

Renterii’s Stories on HackerNoon