Is there a way to bypass cloudflare within dart?

I’ve been coding my web-scraping app for 2 weeks now and after designing and everything I found out that the site i want to scrape started using cloudflare, in my previous app i used python so I simply used cloudscrapper library to bypass it but i couldn’t find a dart equivalent.

I tried some solutions:

  1. I tried building an api with flask and python and let the app communicate with the api and it worked but i cant provide a 24/7 hosting for my api.
  2. I also tried bypassing cloudflare using the cookies in the header of the http request but it didn’t work 🙁
  3. I learned that cloudflare checks if the browser has javascript enabled or not, then i thought “if i have a js enging in dart i could theoretically bypass cloudflare” but i couldn’t find a JS engine in dart.
    I’m kinda stuck here and i dont know what to do anymore, i think i wasted 2 weeks of UI development but I hold my hopes high for this post, pls help :'(

How to make “holes” on an overlay to show what’s under the overlay?

I’m trying to create a simple block in HTML, CSS, and eventually JS.

The overlay cover the whole screen, the texts are white, basically, i need to cut the overlay where there are the video-gap divs to show the video under the overlay. I have no idea how to do it, someone can give me some advice or tell how to achieve this result?

Is it possible to achieve it only with CSS or CSS+JS?

.video-container {
  height: 100vh;
  width: 100%;
}

.video-container video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-overlay {
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  place-items: center;
  place-content: center;
  background-color: rgb(4, 4, 4);
  z-index: 1;
}

.text-container {
  width: 100%;
  height: 100%;
  z-index: 2;
}

.text-line {
  width: 100%;
  max-height: 120px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  color: white;
  font-size: 100px;
}

.video-gap {
  position: relative;
  width: max-content;
  background-color: transparent;
  flex-grow: 1;
  border: 1px solid red;
}
<div class="video-container">
  <video autoplay muted playsinline loop >
            <source src="./video/video.mp4" />
        </video>

  <div class="video-overlay">
    <div class="text-container">
      <h1 class="text-line">We're here <div class="video-gap"></div> to make</h1>
      <h1 class="text-line">healthy <div class="video-gap"></div> living effortless,</h1>
      <h1 class="text-line">so you can <div class="video-gap"></div> live longer</h1>
      <h1 class="text-line">and happier <div class="video-gap"></div>
      </h1>
    </div>
  </div>

</div>

splunk xml – Submit node not allowed inside form

Splunk gives validation warnings that unknown node submit not allowed here. Is there’s any fixes for this

<form version="1.1">
<fieldset submitButton="true">
<input type="dropdown" token="A_or_B" searchWhenChanged="false">
<label>Select A or B</label>
<default>A</default>
<choice value="A">A</choice>
<choice value="B">B</choice>
</input>
</fieldset>

<submit>
<condition match="$A_or_B$ == &quot;A&quot;">
<set token="tokenX">1</set>
<set token="tokenY">2</set>
</condition>
<condition match="$A_or_B$ == &quot;B&quot;">
<set token="tokenX">3</set>
<set token="tokenY">4</set>
</condition>
</submit>

How to display 3 elements by 3 of an array in HTML using array.sclice() method in javascript

I have found a way to display a portion of an array using arrayName.slice(start, end), i made a funtion to feed the start and end to the slice method so i can use it with onClick button to click next 3 element to show in HTML.

my problem is the increment funcion doesn’t start with zero(0), it start with 3- 6, and when i press next it start from 6 – 9.
it is working proberly but not starting from zero

    const array = ["a1","a2","a3","a4","a5","a6","a7","a8","a9","a10","a11","a12","a13","a14","a15"]

let next = {
        start: 0,
        end: 0,
        incrementby: 3,
        inc() {
          this.start = this.start = 0 ? 0 : this.start + this.incrementby;
          this.end = this.start + this.incrementby;
          console.log(this.start, this.end);
          displayHadith(this.start,this.end)
        },
      };
      
 function displayHadith(start,end) {
        var container = document.querySelector(".container");
        container.innerHTML = ""
        let some = array.slice(start, end);
         for (let element of some) {
          container.innerHTML +=`
          <div class="sharh" >${element}</div>
          `
         }
        }
<button onclick="next.inc()">clickNext</button>
<div class="container"></div>

Add small space between lines and their points

I have been tasked with implementing the following design using Chart.js:

A line chart with a small, transparent border around every data point, wi

Almost everything’s been implemented (via the Chart.js documentation):

const chart = new Chart(document.getElementById('chart'), {
    type: 'line',
    data: {
        datasets: [{
            label: 'Line 1',
            data: line1Values, // Set earlier in the code
            borderColor: '#E66FD2',
            backgroundColor: '#E66FD2',
            pointStyle: 'circle',
            pointRadius: 4,
            borderWidth: 2,
            lineTension: 0.4
        }, {
            label: 'Line 2',
            data: line2Values, // Set earlier in the code
            borderColor: '#8C6FE6',
            backgroundColor: '#8C6FE6',
            pointStyle: 'circle',
            pointRadius: 4,
            borderWidth: 2,
            lineTension: 0.4
        }]
    },
    // More configuration
});

The one thing not implemented is the little gaps that are between the dots and the lines on the chart. Is there a way to add them in Chart.js? Do I need a custom plugin?

How can I resolve the following error with Google Appscript

Is anyone familiar with Google Appscript?

I’m using an api to fetch replies sent via Telnyx sms and populate those replies into my sheet one row at a time.

I ran the script successfully several times today getting as much as 10 replies.

Now I’m getting this error and I don’t know how to fix it.

I can clear the sheet and run the script. It fails after the 4th reply is fetched with the following pictured error:enter image description here

 var API_KEY1 = "";  // Replace with your real Telnyx API key


function fetchInboundMessages() {
  var sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
    sheet.clearContents();
  sheet.appendRow(["From", "To", "Message", "Received At"]);


  // Step 1: Get message detail records (only inbound messages for today)
  var url = "https://api.telnyx.com/v2/detail_records?filter[record_type]=messaging&filter[date_range]=today&filter[direction]=inbound";


  var response = UrlFetchApp.fetch(url, {
    "method": "get",
    "headers": {
      "Authorization": "Bearer " + API_KEY1,
      "Accept": "application/json"
    }
  });


  var records = JSON.parse(response.getContentText()).data;


  // Step 2: For each message, get the full message content using the message ID
  records.forEach(function(record) {
    var messageId = record.id;


    var messageResponse = UrlFetchApp.fetch("https://api.telnyx.com/v2/messages/" + messageId, {
      "method": "get",
      "headers": {
        "Authorization": "Bearer " + API_KEY1,
        "Accept": "application/json"
      }
    });


    var messageData = JSON.parse(messageResponse.getContentText()).data;


    var from = messageData.from.phone_number;
    var to = messageData.to[0].phone_number;
    var text = messageData.text || "[No Text]";
    var receivedAt = messageData.received_at;


    // Step 3: Write each row to the sheet
    sheet.appendRow([from, to, text, receivedAt]);
  });
}
    

How to make a carousel to be infinite in a smooth manner

I’m working on this React x Motion carousel that brings a card to the center of the screen when it has been clicked, depending on its index. However, I also want an added function to make the cards to carousel to be infinite.

import { motion } from "motion/react";
import { useState } from "react";

const carouselImages = [
  "../img-11.jpg",
  "../img-2.jpg",
  "../img-13.jpg",
  "../img-4.jpg",
  "../img-15.jpg",
  "../img-1.jpg",
  "../img-19.jpg",
  "../img-3.jpg",
  "../img-14.jpg",
  "../img-5.jpg",
];

export default function StaggerCarousel() {
  const [images, setImages] = useState(carouselImages);
  const [selectedIndex, setSelectedIndex] = useState(0);

  let itemWidth;

  if (window.innerWidth > 768) {
    itemWidth = 200 + 20;
  } else {
    itemWidth = 100 + 20;
  }

  const handleOnClick = (index) => {
    const clicked = images[index];
    const updated = [...images, clicked];
    setImages(updated);
    setSelectedIndex(index);
  };
  return (
    <div className="carousel-container w-screen h-screen flex items-center justify-center bg-gray-900">
      <motion.ul className="carousel-list relative overflow-hidden h-[500px] min-w-[300px] md:min-w-[700px]">
        {images.map((img, index) => {
          return (
            <motion.li
              key={index}
              className="carousel-item w-[100px] md:w-[200px] h-48 rounded-lg absolute left-1/2 top-1/2 cursor-pointer transform -translate-x-1/2 -translate-y-1/2"
              animate={{
                translateX: (index - selectedIndex) * itemWidth,
                y: -50 + (selectedIndex === index ? -20 : 10),
                rotate: selectedIndex === index ? 0 : 5,
                opacity: selectedIndex === index ? 1 : 0.5,
                transition: {
                  duration: 0.3,
                  type: "spring",
                  stiffness: 100,
                },
              }}
              style={{
                backgroundImage: `url(${img})`,
                backgroundSize: "cover",
                backgroundPosition: "center",
           
              }}
              onClick={() => handleOnClick(index)}
            ></motion.li>
          );
        })}
      </motion.ul>
    </div>
  );
}

The function above seems to work. But it has two flaws.
The first is I can actually see the cards flying across the screen to the end of the carousel. Second is that clicking the same image also appends the card to the end of the carousel.

I don’t understand the syntax of this type declaration in TypeScript [closed]

Can someone explain what is happening here? I think it is mandating SnackbarContentCallback must be of type React.ReactNode or a function that accepts two arguments of SnackbarKey and (optionally) of SnackbarMessage type,and it must return a React.ReactNode.

  1. Please someone tell me if I am correct or, if I am wrong, what it’s actually doing.
  2. Please tell me why there is a leading pipe after the =.
export type SnackbarContentCallback =
    | React.ReactNode
    | ((key: SnackbarKey, message?: SnackbarMessage) => React.ReactNode);

onKeyDown event doesn’t triggers on Enter

In my React Typescript app I have an input and I want this input to update search on Enter key down. My code:

<SearchInput
                    placeholder={formatMessage('SV_UNIT_LIST_SEARCH_PLACEHOLDER')}
                    value={searchState.searchText}
                    onChange={(event) => {
                      const inputValue = (event.target as unknown as HTMLInputElement).value;
                      searchText = inputValue;
                      if (inputValue === '') {
                        dispatchSearch(updateSearch({ newSearch: searchText }));
                      }
                    }}
                    onKeyDown={(event) => {
                      console.log(event.key);
                      if (event.key === 'Enter') {
                        dispatchSearch(updateSearch({ newSearch: searchText }));
                      }
                    }}
                  />

In the console I’m getting all pressed keys but when I hit Enter just nothing happens.
What is the problem with this code? Thank you!

enter image description here

How to modify Widget iframe background to transparent?

I’ve embedded the Freshdesk help widget into my app, which supports both light and dark themes. In dark mode, the widget appears with a white boxed background (see the image). In light mode, the background appears transparent and looks great. I think is some kind of error.

Freshdesk widget

<script>
  window.fwSettings = {
    widget_id: 1234567890 // Replace with your actual widget ID
  };

  (function() {
    if (typeof window.FreshworksWidget !== "function") {
      var n = function() { n.q.push(arguments); };
      n.q = [];
      window.FreshworksWidget = n;
    }
  })();
</script>

<script type="text/javascript" src="https://euc-widget.freshworks.com/widgets/1234567890.js" async defer></script>

Do you have any idea how can i modifiy the background in an iframe? because everyithing ive tried doendt work

How to bypass or auto-accept Chrome’s file editing permission dialog triggered by window.showDirectoryPicker() in Playwright?

I trying to download a file into a folder that is not in the list of managed permissions of Playwright.

The app that I am testing opens the windows file choose with the window.showDirectoryPicker() JS method, then with (Autoit) I select the folder in the file explorer window and click on “Select Folder” button, after that in the browser a permission dialog is triggered asking the user for file editing permission. I am not able to click on the “Edit files” button with Playwright. This is what the dialog looks like:

enter image description here

This is an example of what my app do, I want to download into a folder in my machine during my playwrite tests.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Create and Save File in Directory</title>
</head>
<body>
  <h1>Create and Save File in Directory</h1>
  <p>Click the button below to select a directory and save a file directly to it.</p>
  <button id="saveFileButton">Save File</button>

  <script>
    document.getElementById("saveFileButton").addEventListener("click", async () => {
      try {
        // Open the directory picker
        const directoryHandle = await window.showDirectoryPicker({mode: "readwrite"});

        // Create a new file in the selected directory
        const fileHandle = await directoryHandle.getFileHandle("test-file.txt", {
          create: true, // Create the file if it doesn't exist
        });

        // Create a writable stream to write to the file
        const writable = await fileHandle.createWritable();

        // Write some content to the file
        await writable.write("This is a test file created and saved in the selected directory.");

        // Close the writable stream
        await writable.close();

        alert("File saved successfully in the selected directory!");
      } catch (error) {
        console.error("Error saving file:", error);
        alert("An error occurred while saving the file.");
      }
    });
  </script>
</body>
</html>

This is the code that will test the above page

package com.example.demo;

import com.microsoft.playwright.*;

import org.junit.jupiter.api.*;


public class TestExample {
    static Playwright playwright;
    static Browser browser;
    BrowserContext context;
    Page page;

    @BeforeAll
    static void setupClass() {
        playwright = Playwright.create();
        browser = playwright.chromium().launch(new BrowserType.LaunchOptions().setHeadless(false));
    }

    @AfterAll
    static void tearDownClass() {
        browser.close();
        playwright.close();
    }

    @BeforeEach
    void setup() {
        context = browser.newContext();
        page = context.newPage();
    }

    @AfterEach
    void tearDown() {
        context.close();
    }

    @Test
    void testSaveFileWithAutoIt() throws Exception {
        // Navigate to your HTML file
        page.navigate("file:///C:/path/test-save-with-picker.html");


        // Listen for the alert dialog of file saved sucessfully
        page.onceDialog(dialog -> {
            System.out.println("Dialog message: " + dialog.message());
            dialog.accept();
        });



        // Run the AutoIt script to set the file download path
        Process process = Runtime.getRuntime().exec("C:\autoit\set-file-download-path.exe");
        page.waitForTimeout(3000);

        // Click the button to open the directory picker
        page.click("#saveFileButton");
        page.waitForTimeout(20000);

        int exitCode = process.waitFor(); // Wait for the AutoIt script to complete
        if (exitCode == 0) {
            System.out.println("AutoIt script executed successfully.");
        } else {
            System.out.println("AutoIt script failed with exit code: " + exitCode);
        }

        // I need to auto accept the permission dialog here <========


        //Check if the file was created in C:TestDirectory
        java.nio.file.Path filePath = java.nio.file.Paths.get("C:\TestDirectory");
        Assertions.assertTrue(java.nio.file.Files.exists(filePath), "File was not created!");

    }
}

And the Autoit script

WinWaitActive("Select where this site can save changes")
ControlSetText("Select where this site can save changes", "","Edit1",  "C:TestDirectory")
Sleep(1000)
ControlClick("Select where this site can save changes", "Select Folder", "Button1")

confusion between import in NestJS with global module implementation

I have a confusion regarding the implementation of a global module in NestJS, and the import of a shared service

I’m following this guide: NestJS- Global Modules

and this is what I have so far:
shared.service:

import { Injectable } from '@nestjs/common';

@Injectable()
export class SharedService {
  async catchError<T>(promise: Promise<T>): Promise<[undefined, T] | [Error]> {
    return promise
      .then((data): [undefined, T] => {
        return [undefined, data]}
      )
      .catch((error): [Error] => {
        console.error('Error:', error);
        return [error];
      });
    }
}

shared.module:

import { Module, Global } from '@nestjs/common';
import { SharedService } from './shared.service';

@Global()
@Module({
  providers: [SharedService],
  exports: [SharedService],
})
export class SharedModule {}

the app.module:

import { Module } from '@nestjs/common';
import { ConfigModule, ConfigService } from '@nestjs/config';
import { AppController } from './app.controller';
import { MongooseModule } from '@nestjs/mongoose';
import { AppService } from './app.service';
import { PersonsModule } from './persons/persons.module';
import { SharedModule } from './shared/shared.module';


@Module({
  imports: [
    ConfigModule.forRoot({ isGlobal: true }),
    MongooseModule.forRootAsync({
      imports: [ConfigModule],
      useFactory: async (configService: ConfigService) => ({
        uri: configService.get<string>('MONGODB_URI'),
      }),
      inject: [ConfigService],
    }),
    PersonsModule,
    SharedModule,
  ],
  controllers: [AppController],
  providers: [AppService],
})
export class AppModule {}

and this is my implementation on the persons.service:

import { Inject, Injectable, InternalServerErrorException } from '@nestjs/common';
import { CreatePersonDto } from './dto/create-person.dto';
import { UpdatePersonDto } from './dto/update-person.dto';
import { InjectModel } from '@nestjs/mongoose';
import { Model } from 'mongoose';
import { Person } from './persons.schema';
import { SharedService } from 'src/shared/shared.service';

@Injectable()
export class PersonsService {
  constructor(
     private readonly sharedService: SharedService,
    @InjectModel('Person') private readonly personModel: Model<Person>,
  ) {}

  create(createPersonDto: CreatePersonDto) {
    return 'This action adds a new person';
  }

  async findAll(): Promise<Person[]> {
    const [error, data] = await this.sharedService.catchError(
      this.personModel.find().exec()
    );

    if (error || !data) {
      throw new InternalServerErrorException('Error fetching persons');
    }

    return data;
  }

  async findOne(guid: string) {
    const [error, data] = await this.sharedService.catchError(
      this.personModel.findOne({guid}).exec()
    );

    if (error || !data) {
      throw new InternalServerErrorException('Error fetching person');
    }

    return data;
  }

  update(id: number, updatePersonDto: UpdatePersonDto) {
    return `This action updates a #${id} person`;
  }

  remove(id: number) {
    return `This action removes a #${id} person`;
  }
}

And this is where the confusion comes in, if I’m making a global module…
why do I need to make this import on the persons.service above ?

import { SharedService } from 'src/shared/shared.service';

and… if I have to make that import, what’s the point of a global module ?, I mean… if I have to make that import anyways, what’s the point of the global module ?

When using ctx.moveTo() with Html Canvas Tag ctx.arc(), moveTo() draws a line

For the purpose of improving myself and because I was bored, I was learning the canvas tags in html by following the doc of mozilla and we were drawing a face there. I tried to make the face as given by mozilla, but lines appeared on my face due to the values and I don’t know why.

<body>
    <canvas class="canvas" width="150" height="150"></canvas>
</body>
<script>
        const canvas = document.querySelector(".canvas");
        const ctx = canvas.getContext("2d")

        ctx.beginPath()
        ctx.arc(75, 75, 60, 0, Math.PI * 2, true)
        ctx.moveTo(40, 40)
        ctx.arc(50, 50, 10, 0, Math.PI * 2, true)
        ctx.moveTo(60, 50)
        ctx.arc(100, 50, 10, 0, Math.PI * 2, true)
        ctx.moveTo(110, 110)
        ctx.arc(80, 110, 30, 0, Math.PI, true)
        ctx.stroke()
</script>

Expected face:

expected face screenshot

Result face:

result face

As you can see, I’m talking about unwanted lines on the face.

All I know and discovered is that for some reason the x value of the moveTo should be as much as the radius of the circle and the y values should be the same – but I don’t know why. I wanted to ask you why this is the case.

In summary, I haven’t figured out why, but for some reason, when I play with the values or when I make the values incompatible, a line appears.

Code

Why isn’t my JavaScript form validation working properly or hiding the form after submit?

I’m trying to validate a shipping form using JavaScript. If both the name and postal code fields are filled, it should hide the form and display a thank you message with the user’s name and postal code.

However, when I click the submit button:

  • The validation doesn’t seem to trigger correctly.

  • Sometimes I get errors in the browser console.

  • The form doesn’t hide after submission.

    I’m trying to validate a shipping form using JavaScript. If both the name and postal code fields are filled, it should hide the form and display a thank you message with the user’s name and postal code.

However, when I click the submit button:

The validation doesn’t seem to trigger correctly.

Sometimes I get errors in the browser console.

The form doesn’t hide after submission.

window.onload = function () { var postalCode = document.getElementById(“thanksPC”); var thanksMessage = document.getElementById(“thanks_msg”); var customerName = document.getElementById(“thanksCustomer”); var form = document.getElementById(“shippingForm”);