Cannot read Server Sent Events with TextDecoder on a POST request

I’m running into the issue that, when I make a request to an endpoint, which has ‘Content-Type’: ‘text/event-stream’, it works if that endpoint is GET, but not if it is POST.

Here is a reproduction of the POST case: https://stackblitz.com/edit/stackblitz-starters-xdifdohl

Here is a reproduction of the GET case: https://stackblitz.com/edit/stackblitz-starters-myyztr66

Here is how I am making the request:

const response = await fetch('/event', {
    method: 'POST',
    credentials: 'include',
    headers: {
        'Content-Type': 'application/json',
    },
});

Here is how I am reading the server sent events:

const reader = response.body ? .getReader();
const decoder = new TextDecoder();

if (!reader) {
    throw new Error('Failed to get response reader');
}

// Process the stream
const processStream = async() = >{
    try {
        while (true) {
            const {
                value,
                done
            } = await reader.read();

            if (done) {
                log('Stream complete');
                break;
            }

            const text = decoder.decode(value, {
                stream: true
            });
            const lines = text.split('n');

            for (const line of lines) {
                if (line.startsWith('data: ')) {
                    const data = line.slice(6); // Remove 'data: ' prefix
                    try {
                        if (data.trim()) {
                            const parsedData = JSON.parse(data);
                            log(`Parsed SSE data: $ {
                                JSON.stringify(parsedData)
                            }`);
                        }
                    } catch(error) {
                        log(`Error parsing SSE data: $ {
                            error
                        }`);
                    }
                }
            }
        }
    } catch(error) {
        log(`Stream processing error: $ {
            error
        }`);
    } finally {
        reader.releaseLock();
    }
};

In the POST case, it’s as though processStream is not invoked at all.

save images to a favourites list clicking heart with html and javascript

Hey guys I have tried to implement this function where the user clicks the heart icon to add to a list like a favourites but this won’t work I have attached the code if you have any ideas, I basically want the images to be added to a list when the user clicks on the heart icon to save for later, so it basically filters out the images, link this link but with images

https://codepen.io/sizhik/pen/YzJpvZa#

const heartBtn = document.querySelector('.heart-btn');
const tableRows = document.querySelectorAll('tbody tr');
const hearts = document.querySelectorAll('.heart');
const table = document.querySelector('table');
let showOnlyFavorites = false;

const saveToLocalStorage = (key, value) => {
  const now = new Date();
  const expirationDate = now.setMonth(now.getMonth() + 1);
  const data = {
    value: value,
    expiration: expirationDate
  };
  localStorage.setItem(key, JSON.stringify(data));
}

const getFromLocalStorage = (key) => {
  const data = localStorage.getItem(key);
  if (!data) return null;
  const { value, expiration } = JSON.parse(data);
  const now = new Date();
  if (now.getTime() > expiration) {
    localStorage.removeItem(key);
    return null;
  }
  return value;
}

table.addEventListener('click', (event) => {
  const heart = event.target.closest('.heart');
  if (heart) {
    heart.classList.toggle('active');
    const index = Array.from(hearts).indexOf(heart);
    const favorites = Array.from(hearts).map(heart => heart.classList.contains('active'));
    saveToLocalStorage('favorites', favorites);
  }
});

heartBtn.addEventListener('click', () => {
  // Check if at least one heart is active
  const atLeastOneActive = Array.from(hearts).some(heart => heart.classList.contains('active'));
  
  // Only proceed if at least one heart is active
  if (atLeastOneActive) {
    showOnlyFavorites = !showOnlyFavorites;
    
    tableRows.forEach(row => {
      const heart = row.querySelector('.heart');
      if (showOnlyFavorites && !heart.classList.contains('active')) {
        row.classList.add('hidden');
      } else {
        row.classList.remove('hidden');
      }
    });
    
    const heartButton = heartBtn.querySelector('.heart');
    if (heartButton.classList.contains('active')) {
      heartButton.classList.remove('active');
    } else {
      heartButton.classList.add('active');
    }
  }
});

// Load the favorites from local storage if available
const favorites = getFromLocalStorage('favorites');
if (favorites) {
  favorites.forEach((isFavorite, index) => {
    if (isFavorite) {
      hearts[index].classList.add('active');
    }
  });
}
            <li class="scrollbar-item" id = "product0">
                <div class="latest-game-card">
                  <figure style="--width: 400; --height: 500;">
                    <img class="img-cover" src="covers/image1.png" value="PLAY"  onclick="play('sound100')" alt="chuckydoll">
                   
    <button class="heart-btn filter-btn"><span class="heart">&hearts;</span></button>
                    </p>
                  </div>
                </div>
              </li>
              
             <li class="scrollbar-item" id = "product0">
                <div class="latest-game-card">
                  <figure style="--width: 400; --height: 500;">
                    <img class="img-cover" src="covers/image2.png" value="PLAY"  onclick="play('sound100')" alt="chuckydoll">
                   
    <button class="heart-btn filter-btn"><span class="heart">&hearts;</span></button>
                    </p>
                  </div>
                </div>
              </li>
              
<table>
    <thead>
      <tr>
        <th>Column 0</th>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
        <th>Column 4</th>
        <th>Column 5</th>
      </tr>
    </thead>
      <tr>
        <td><span class="heart">&hearts;</span></td>
        <td>Cell 1</td>
        <td>Cell 2</td>
        <td>Cell 3</td>
        <td>Cell 4</td>
        <td>Cell 5</td>
      </tr>
    </tbody>
  </table>

How to work around a TypeError due to an undefined variable in SurveyJS export to PDF?

I am trying to use the SurveyJS “Export to PDF” feature, described here on a form with several pages. I follow the steps for a JavaScript application (importing Javascript libraries in HEAD, adding the rest of their code after I define the JSON of the survey) and nothing happens. When I open the Javascript console, I see two errors:

Uncaught TypeError: Cannot read properties of undefined (reading 'Serializer')
    at survey.pdf.min.js:2:33043
    at survey.pdf.min.js:2:179807
    at survey.pdf.min.js:2:179813
    at survey.pdf.min.js:2:306
    at survey.pdf.min.js:2:326

survey_rct_wrapper.js:33 Uncaught ReferenceError: SurveyPDF is not defined
    at savePdf (survey_rct_wrapper.js:33:23)
    at t.action (survey_rct_wrapper.js:41:19)
    at HTMLInputElement.<anonymous> (survey.jquery.min.js:11:47630)
    at HTMLInputElement.dispatch (jquery.min.js:2:40035)
    at v.handle (jquery.min.js:2:38006)

Apparently, this is due to the variable c not being defined in line 2, column 33041 of the SurveyPDF library:

c.Serializer.addProperty("question", {...});

How can I fix this issue, or find another way to export from a SurveyJS JSON form to a PDF file?

Owl carousel – leftmost item width needs to grow to the right, without overlapping or being hidden

I’m building an owl carousel but I’m running into an issue. I’ve forked a Codepen that has almost exactly what I’m looking for and made my own modifications to it, but it’s not quite right.

The leftmost item in the carousel should expand its width, so that you can see the full expanded card and not overlap any other cards.

My code:
https://codepen.io/miltil/pen/yyyBbqg

So far, it almost works right…I can move the carousel, and the item on the far left does expand to the width I specify. However, it expands towards the left, so that half of the card is hidden once it’s expanded. I need it to expand to the right instead, shifting over all of the other cards to the right.

I feel like I’m close, because when I comment out the line in the javascript that removes the “active” class:
$(".custom-carousel .item").removeClass("active");
it does expand to the right and move the other cards over, like I want to happen! The only issue is that then, since the active class is not removed from the other cards, all the cards eventually get expanded to the larger size as you scroll through the carousel.

I really appreciate any help, thank you!

Stripe amount not shown

I am encountering the following error when attempting to create a Payment Intent in Stripe Test Mode:

The amount must be greater than or equal to the minimum charge amount allowed for your account and the currency set (https://docs.stripe.com/currencies#minimum-and-maximum-charge-amounts).
If you want to save a Payment Method for future use without an immediate payment, use a Setup Intent instead: https://docs.stripe.com/payments/setup-intents.

In my creeaza_Sesiune.php file, I am attempting to create a Stripe Payment Intent for an order, where the total amount is dynamically calculated by summing up the prices of the products in the cart. However, I am receiving this error message when the Payment Intent is created, even though the amount seems correct according to my var_dump.
I am correctly calculating the total amount in my PHP code before creating the Payment Intent.

The var_dump of the amount variable shows the correct value that I expect to charge. but Stripe takes the amount value as 0 and my payment is invalid.
Here is the code i’ve hidden the api key for security purposes :

<?php
ini_set('display_errors', 1);
error_reporting(E_ALL);
session_start();
include("connection.php");
require 'vendor/autoload.php';
use StripeStripe;
use StripeWebhookEndpoint;
global $pdo;

class StripeService
{
    private $apiKey = 'sk_test_your_key_here';
    
    public function __construct()
    {
        StripeStripe::setApiKey($this->apiKey);
    }

    public function createPaymentIntent($orderReferenceId, $amount, $currency, $email, $customerDetailsArray, $notes, $metadata, $products)
    {
        try {
            $paymentIntent = StripePaymentIntent::create([
                'currency' => $currency,
                'amount' => intval($amount * 100), 
                'payment_method_types' => ['card'],
            ]);

            $output = array(
                "status" => "success",
                "response" => array('orderHash' => $orderReferenceId, 'clientSecret' => $paymentIntent->client_secret)
            );

        } catch (Exception $e) {
            $output = array(
                'status' => 'error',
                'response' => $e->getMessage()
            );
        }

        header('Content-Type: application/json');
        echo json_encode($output);
    }

    public function getToken()
    {
        $token = "";
        $alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
        $alphabet .= "abcdefghijklmnopqrstuvwxyz";
        $alphabet .= "0123456789";
        $max = strlen($alphabet) - 1;
        for ($i = 0; $i < 17; $i++) {
            $token .= $alphabet[mt_rand(0, $max)];
        }
        return $token;
    }
}

$stripeService = new StripeService();

$orderReferenceId = $stripeService->getToken();

$amount = 0;

$id_partner = $_SESSION['id_partner'];
$status_order = "in_cart"; 
$sql = "SELECT p.name, p.price AS price, c.quantity AS quantity 
        FROM cart_orders c 
        JOIN products p ON c.product_code = p.product_code 
        WHERE c.id_partner = ? AND c.status_order = ?";
$stmt = $pdo->prepare($sql);
$stmt->execute([$id_partner, $status_order]);
$products = $stmt->fetchAll(PDO::FETCH_OBJ);

foreach ($products as $product) {
    $amount += $product->price * $product->quantity;
}

$currency = 'RON'; 
$email = isset($_POST['email']) && !empty($_POST['email']) ? $_POST['email'] : '';
$customer_name = isset($_POST['name']) && !empty($_POST['name']) ? $_POST['name'] : '';
$address = isset($_POST['address']) && !empty($_POST['address']) ? $_POST['address'] : '';
$country = isset($_POST['country']) && !empty($_POST['country']) ? $_POST['country'] : 'RO';
$postal_code = isset($_POST['postalCode']) && !empty($_POST['postalCode']) ? $_POST['postalCode'] : '';
$description = isset($_POST['description']) && !empty($_POST['description']) ? $_POST['description'] : '';

$customerDetails = [
    "name" => $customer_name,
    "address" => $address,
    "postalCode" => $postal_code,
    "country" => $country,
];

$metadata = [
    "id_partner" => $id_partner,
    "client_name" => $customer_name,
    "client_email" => $email
];

$stripeService->createPaymentIntent($orderReferenceId, $amount, $currency, $email, $customerDetails, $description, $metadata, $products);
?>

Despite the fact that I confirmed the correct value for amount (via var_dump() and echo), I received an error message from Stripe:

The amount must be greater than or equal to the minimum charge amount allowed for your account and the currency set (https://docs.stripe.com/currencies#minimum-and-maximum-charge-amounts).
If you want to save a Payment Method for future use without an immediate payment, use a Setup Intent instead: https://docs.stripe.com/payments/setup-intents.

Additionally, I ensured that the database was correctly populated, and there were no null values in any relevant fields (product prices, quantities, etc.). Everything in the database looked fine, with proper values for the products in the cart.

Uncaught (in promise) Error: Could not establish connection. Receiving end does not exist. Can’t sendMessage from background.js to offscreen.js

I’m trying to send a message to offscreen.js from background.js to use service workers to process DOM content. The offscreen document is apparently created, but when I send a message to it, it says it doesn’t exist. background.js is reached by contentScript.js; the problem is with the offscreen setup.

I tried checking if the offscreen document is created, but it says it exists even when I manually typed console.log(await chrome.offscreen.hasDocument()); in the console window of the background.js service worker (printed true), so it doesn’t just close itself after being created. It also exists at the time of sendMessage because it’s triggered only when it’s created (or am I missing something?). So my guess is it’s somehow inaccessible to background.js though it ‘exists’. Here’s the Sources window of background.js:

enter image description here

Should offscreen.js and offscreen.html be displayed here? Does it mean it’s not accessible to background.js?

background.js:

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.type === 'another mt (from contentscript)') {
    await ensureOffscreen();

    console.log("CAME BACK");

    const result = await chrome.runtime.sendMessage({
      type: 'mt',
      param: message.param
    });

    console.log("DONE NOW SENDING");

    sendResponse({ text: result.t });
    return true;
  }
});

async function ensureOffscreen() {

  console.log("REACHED HERE");

  const existing = await chrome.offscreen.hasDocument();
  if (existing) {
  console.log("EXISTS");

  await new Promise(resolve => setTimeout(resolve, 5000));

  return;}

  else{

  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: [chrome.offscreen.Reason.DOM_SCRAPING],
    justification: 'Need DOM for processing'
  });

await new Promise((resolve) => {
    const listener = (msg) => {
      if (msg.type === "offscreen-ready") {
        chrome.runtime.onMessage.removeListener(listener);
        setTimeout(resolve, 5000);
      }
    };
    chrome.runtime.onMessage.addListener(listener);
  });


console.log("HERE TOO");

  }

}

offscreen.js:

chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {

  console.log("offscreen triggered");

  sendResponse({t: "from offscreen"});

  if (msg.type === "mt") {

    console.log("reached here");
    sendResponse({t: "offscreen has spoken"});

    //return true;

    return;

  }
});

chrome.runtime.sendMessage({ type: "offscreen-ready" });

offscreen.html:

<!DOCTYPE html>
<html>
<head>
  <script src="libs/alibthatusesserviceworkers.js"></script>
</head>
<body>
  <canvas id="somecanvas" style="display:none;"></canvas>
  <img id="someimg" crossorigin="anonymous" style="display:none;" />
  <script src="offscreen.js" defer></script>
</body>
</html>

I’ve tried with and without the timeouts/delays, but they don’t work.

REACHED HERE, EXISTS, HERE TOO and CAME BACK are printed, but DONE NOW SENDING isn’t printed because it doesn’t send the message and instead throws the error.

How to toggle a light and dark theme with a dropdown box using HTML, CSS, and JavaScript? [closed]

I am working with others to develop a light and dark theme for a fake-website. We wanted to potentially add multiple color themes to switch between so we went with a dropdown box. However, making a selection doesn’t appear to be doing anything. Anyone got any ideas? I am working in a css file that is called in ever other pages css, a settings html file, and darkmode js file.

CSS:

:root{
    --base-color: white;
    --secondary-color: black;
    --third-color: #808080;
}

.darkmode{
    --base-color: black;
    --secondary-color: white;
    --third-color: gray;
}

.general-text{
    color: var(--secondary-color);
}

.special-text{
    color: var(--base-color);
}

html:

<!DOCTYPE html>
<html>
    <head>
        <title>Settings</title>
        <link rel="stylesheet" href="/html/css/settings.css">
        <script type="html/js" src="/html/js/darkmode.js" defer></script>
    </head>
    <body class="darkmode">
        <%include file="navbar.html"/>
        <div class="settings-container">
            <h1>Settings</h1>
    
            <div class="setting">
                <div class="special-text">
                    <label for="dark-mode-select">Dark Mode:</label>
                    </div>
                    <select id="dark-mode-select" onchange="changeColor()">
                        <option value="light" id="light">Light</option>
                        <option value="dark" id="dark">Dark</option>
                    </select>
            </div>
    
            <div class="setting">
                <label for="font-size-slider">Font Size:</label>
                <input type="range" id="font-size-slider" min="1" max="100" value="50">
                <span id="font-size-value">50</span>
            </div>
    
            <div class="setting">
                <div class="special-text">
                <label for="profanity-filter">Profanity Filter:</label>
                <input type="checkbox" id="profanity-filter">
            </div>
            </div>
    
            <div class="button-container">
                <button id="apply-settings">Apply</button>
            </div>
        </div>

        <!----Delete Account---->
        <!----confirmation dialogue for deletion---->
        <button id="delete-account-btn">Delete Account</button>
        <div id="delete-account-modal" class="delete-modal">
            <div class="delete-modal-content">
                <p>Are you sure you want to delete your account?</p>
                <button id="confirm-delete">Yes, Delete</button>
                <button id="cancel-delete">Cancel</button>
            </div>
        </div>
        <!----End of Delete Account---->

        <script src="/html/js/settings.js" defer></script>
    </body>
</html>

js:

function changeColor(){
    //alert("colorchange")
    let darkmode = localStorage.getItem('darkmode')
    //const themeChange = document.getElementById('dark-mode-select')
    const themeChangeDark = document.getElementById('dark').selected
    const themeChangeLight = document.getElementById('light').selected


    const enableDarkmode = () => {
        document.body.classList.add('darkmode')
        localStorage.setItem('darkmode', 'active')
    }

    const disableDarkmode = () => {
        document.body.classList.remove('darkmode')
        localStorage.setItem('darkmode', null)
    }

    if(darkmode === "active") enableDarkmode()



    if(themeChangeDark == true){
        //alert("Dark")
        darkmode = localStorage.getItem('darkmode')
        enableDarkmode()
    } else if(themeChangeLight == true){
        //alert("Light")
        darkmode = localStorage.getItem('darkmode')
        disableDarkmode()
    }
}

I have tried what is featured above, (the settings file is only paritally done by me), but it seems like the changeColor() function is never called. I want it so when the user selects one of the color options, the .darkmode class is put in place and changes the current color scheme of the website.

Javascript array object, return indexes that match criteria [duplicate]

I have an array object containing the grades of students.

I want to map over the item and return the indexes that match when a student has a grade over 40%;

I have scaled down the array in this sample.

students = [{
    name: "Amber",
    age: 18,
    grade: 58
}, {
    name: "Andrew",
    age: 19,
    grade: 72
}, {
    name: "Lisa",
    age: 22,
    grade: 80
}, {
    name: "James",
    age: 19,
    grade: 41
}];
    
const topStudents = students.map((student) => {
    if (student.grade > 60) {
        // Return the indexs of the students array if their grade is above 60,
        // In this case Andrew, Lisa - thus retun the result of the indexes - [1,2];
        return student;
    }
});
    
console.log(topStudents);

Is it possible get the line of code where a console.log is executed inside eval() inside an iframe?

I pass javascript code to an iframe and run it inside a eval function. With the eval I avoid the limit for large amount of code when the code contains libraries like React and ReactDOM. I got to redefine predefined console.log to send to the parent the message, but I am missing the line of code where the console is executed.

Script inside the iframe

<script>
      const _log = console.log;

      console.log = function (...args) {
        // Send to parent
        window.parent.postMessage(
          {
            id: '${id}',
            source: 'code-preview',
            message: args,
          },
          '*',
        );

        _log.apply(console, args);
      };

      window.addEventListener('message', (event) => {
        const handleError = (error) => {
          const root = document.getElementById('root');
          root.innerHTML = '<div style="color: red;">' + error + '</div>';
          console.error(error);
        };

        window.addEventListener('error', (event) => {
          event.preventDefault();
          handleError(event.error)
        });

        try {
          eval(event.data)
        } catch(error){
          if(error instanceof Error){
            return {
              code: '',
              error: error.message
            }
          } else {
            throw error;
          }
        }
      }, false);
    </script>

I tried with new Error().stack but because is executed inside eval, I only got the line of eval. Any idea if sent the correct line to the parent is executed? The ideal solution is something like this.

import React from 'react';

console.log('Hello word'); // line 3

CSS not displaying within the Koder App on Iphone [closed]

Picture when you select view source in live browser

Picture of code within the index html file

I tried to erase the end tags in the index file but they don’t even show up when you select it.

I need a way to remove the tags that are shown in the view source image so that the css will show up and be displayed for the page.

I already tried clearing the cache and that wasn’t the issue.

react-admin not showing preselected values ReferenceArrayInput

I have and enpoint that returns Locality objects and every Locality object have a river_basins property that is an array of River Basins objects like this:

// Locality record
{
  "id": 290,
  "name": "asas",
  "description": "agsdg",
  "status": true,
  "district": {
    "id": 10108,
    "name": "Huancas",
    "ubigeo": null,
    "status": true
  },
  "river_basins": [
    {
      "id": 5,
      "name": "Inambari",
      "status": true
    },
    {
      "id": 10,
      "name": "Río Apurimac",
      "status": true
    },
    {
      "id": 12,
      "name": "Río Aushiri",
      "status": true
    }
  ]
}

In the react-admin Locality List page, the RiverBasin objects are rendered like this using the <ReferenceArrayField />:
react-admin Locality list page showing RiverBasin objects here

using the following code:

export const LocalityList = (props) => (
  <List {...props}>
    <Datagrid>
      <TextField source="id" />
      <TextField source="name" />
      <TextField source="description" />

      <ReferenceField
        reference="districts"
        source="district.id"
        label="District"
      >
        <TextField source="name" />
      </ReferenceField>

      <ReferenceArrayField
        reference="river-basins"
        source="river_basins"
        label="River basin"
      >
        <ArrayField source="river_basins" label="River basins">
          <SingleFieldList>
            <ChipField source="name" />
          </SingleFieldList>
        </ArrayField>
      </ReferenceArrayField>

      <BooleanField source="status" />
    </Datagrid>
  </List>
);

But when trying to show the RiverBasins object with a select component in the react-admin Edit page it does not show any preselected items:
react-admin Locality Show page before enter the edit page, show page, still showing related RiverBasin objects

react-admin Locality Edit page with the select component but not showing related RiverBasins objects

here’s the code i use for the react-admin Edit page:

export const LocalityEdit = (props) => (
  <Edit {...props}>
    <SimpleForm>


      <ReferenceArrayInput
        source="river_basins"
        reference="river-basins"
        label="River basin"
      ></ReferenceArrayInput>

    </SimpleForm>
  </Edit>
);

and when i change the source property to any other word than river_basins, i get no getMany function call.
ReferenceArrayInput with river_basins as source
ReferenceArrayInput with any other word instead river_basins as source

What am i doing wrong? do i need to change the api response? because when i activate the loadRelationIds: true in my endpoint the select component works as expected:
react-admin Locality edit page working as expected after activate the loadRelationIds in the api endpoint response

but in my team we all decided we need the complete object relation in the response instead of jus the id, so acivating the loadRelationIds is not an alternative.

Getting error while deploying into AWS Amplify – Error: Cannot find module ‘../lightningcss.linux-x64-gnu.node’

I’m trying to deploy Next.js application in AWS Amplify – But I’m getting this error

I tried solutions mentioned on gitub, which was having the solution for similar error, but it didn’ resolve.

Solution 1

npm list lightningcss
npm dedupe
npm rebuild lightningcss

Solution 2

  1. Deleted package-lock
  2. Reinstalled packages
  3. Also tried adding lightningcss.linux-x64-gnu.node package manually into dependency – but still didnt work.

Below error received in AWS amplify for Next.js application

Error: Cannot find module '../lightningcss.linux-x64-gnu.node'
.
.
.
2025-04-14T18:08:53.428Z [WARNING]: > Build failed because of webpack errors

Test Case Failing After Modifying Average Line Rendering Logic in Chart Library

I’m currently working on a charting library and have encountered an issue with a test case failing after I modified the rendering logic for an average line drawing tool. The requirement was to remove “anchor feet” from the average line tools once the drawing is set, while keeping them visible when the drawing is being drawn or hovered over.

Here’s the relevant code from average.js where I made modifications:

render(context) {
    // Existing rendering logic...

    // Draw the average line regardless of the highlighted state
    stx.plotLine(x0, x1, y, y, color, "segment", context, panel, params);

    // Conditional rendering for anchor feet
    if (this.highlighted) {
        stx.plotLine(x0, x0, y - 20, y + 20, color, "segment", context, panel, params);
        stx.plotLine(x1, x1, y - 20, y + 20, color, "segment", context, panel, params);
    }

    // Existing rendering logic...
}

Test Case
The test case that is failing is defined in drawings-adv.spec.js:

it("[Drawings] should draw an average line for a study.", async () => {
    // Test logic...
    await compare(() =>
        assert.isTrue(result.color1, "Average Line is not yellow")
    );
});

Error Message
After making the changes, the test fails with the following error:

AssertionError: Average Line is not yellow: expected false to be true

What could be the reason for this test case failure?
How can I ensure that the average line is rendered correctly as yellow while still fulfilling the requirement to remove the anchor feet when the drawing is set?

Meaningless response while scraping?

I have been collecting data from a website for a few months. Previously, the data was coming as html code, now it is coming as follows

‘x06Gg>Ux>&.+,$.)/0>R>&>Zusnyrhur}<1<RW<_ypvy>0>Y[R>&>>0>TH>&>Zusnyrhur}>0>YTH>&ripp0>]H>&>RW<_ypvy>0>Y]H>&ripp0>YR>&.+,$.)/0>L>&,0>_L>&,0>YLHUx>&,0>LR>&ripp0>YLR>&ripp0>OUx>&-0>OR>&>Zih~sp>0>YOR>&ripp0>X>&>.,.)1,(1-+H-*&()&,,F>0>TO>&ripp0>]O>&ripp0>LH>&,0>LO>&,0>YO>&ripp0>YU>&ripp0>O>&ripp0>OO>&ripp0>O]O>&ripp0>[O>&ripp0>UoSry>&z}poy0>Onj>&,0>_Ux>&/.,),0>_R>&>IYZ]<Wsrzyn}ro<Pu{u>0>Y_R>&ripp0