Blancer.com Tutorials and projects

I want to create a masonry style layout

Here is how i did it but it didn’t work as expected:

.grid-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  grid-auto-flow: row;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item:nth-child(2n) {
  grid-row-start: 0;
  grid-row-end: span 2;
}

<div class="grid-container">
  <div class="item item1">1</div>
  <div class="item item2">2</div>
  <div class="item item3">3</div>
  <div class="item item4">4</div>
  <div class="item item5">5</div>
  <div class="item item6">6</div>
  <div class="item item7">7</div>
  <div class="item item8">8</div>
  <div class="item item9">9</div>
  <div class="item item10">10</div>
  <div class="item item11">11</div>
  <div class="item item12">12</div>
</div>

Here are my results:

Answers are appreciated to me, thanks for the help

I’m trying to export a data using XLSX with a specific user, the problem I’m currently facing, is I also want to include the list of publications.

result.json

{
    "id": "aKbteocWBNME8OgWlRpXz0EtBE3i3M7g",
    "email": "email.com",
    "orcid": "123123",
    "first_name": "John",
    "middle_name": "Doe",
    "last_name": "Smith",
    "publications": [
        {
            "id": "0a2828e5-73f1-42a3-8a08-30d19562e346",
            "title": "asdsa",
         
        },
        {
            "id": "d152c617-f049-4042-b498-119e8d70bbca",
            "title": "asdsd",
           
        },
        {
            "id": "e042e830-53f0-45cb-b820-fb6887ee2e81",
            "title": "2024",
            
        }
    ],
    "_count": {
        "publications": 3
    },
    "_sum": {
        "citations": 2
    }
}

This is my export function in client side.

const exportFaculty = () => {
        const rows = [{
          id: exportData.id,
          email: exportData.email,
          name: `${exportData.first_name || ''} ${exportData.middle_name || ''}  ${exportData.last_name || ''}`.trim(),
          department: exportData.department,
          college: exportData.college,
        }];

        const worksheet = XLSX.utils.json_to_sheet(rows);
        const workbook = XLSX.utils.book_new();
        XLSX.utils.book_append_sheet(workbook, worksheet, "Faculty");

        XLSX.writeFile(workbook, `${exportData.first_name} ${exportData.middle_name}         ${exportData.last_name}.xlsx`, { compression: true });
      };

This the export data im trying to approach.

trying to download a sample pdf in playwright, the pdf web page is opened but not triggering the download event, ultimately causing the timeout event.

error:

page.waitForEvent: Timeout 30000ms exceeded while waiting for event "download" =========================== logs =========================== waiting for event "download"

Even tried to click the download button still doesn’t work either.

  await pdfPage.click("[id='download']");  // might get stuck here with timeout 

error:

page.click: Timeout 30000ms exceeded. Call log: [2m - waiting for locator('#download')[22m
Call log: [2m - waiting for locator('#download')[22m at

Here is the code example

  const browser = await chromium.launch({
    headless: false, // Set to true for headless mode
    executablePath: "/Applications/Google Chrome.app/Contents/MacOS/Google Chrome",
    args: ["--no-sandbox", "--disable-setuid-sandbox"],
  });

  const context = await browser.newContext({
    acceptDownloads: true
  });

  let pdfUrl = 'https://ontheline.trincoll.edu/images/bookdown/sample-local-pdf.pdf';

  await downloadFileAndCheck(context,pdfUrl);

  const downloadFileAndCheck = async (
      context: any,
      pdfUrl:string,
    ) => {

  console.log(`open `);

  const pdfPage = await context.newPage();
  await pdfPage.goto(pdfUrl);
  console.log(`trying to click `);         // working 

  await pdfPage.click("[id='download']");  // might get stuck here with timeout 

  console.log(`click... `);                // not working

  const downloadPromise = pdfPage.waitForEvent('download'); // might get stuck here with timeout

  const download = await downloadPromise;

  console.log(`download as `);

  const savePath = path.resolve(__dirname,  `test.pdf`);
  await download.saveAs(savePath);

  const downloadPath = await download.path();

};

so I tried to have playwright click the download ‘button’, but still get stuck

I’ve trying to integrate react into an existing project. I’m starting by setting up a simple button component to get started. The project is an express app that uses handlebarsjs to handle the views.

I have created the jsx file with correct syntax and successfully compiled to an output file. I am then importing that output file into my main.js script which is requested by the main layout view.

I can see the successful compilation by babel in the dist directory. I don’t have any errors in the browser console. however, for some reason the component is not rendered on the page.

What could I be overlooking?

main-layout.hbs

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- express will automatically assume an requested file with .css or .js
        file extension is under /public, which can be excluded from href for that reason -->
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="/css/main.css">
    <script src="js/bootstrap.min.js"></script>
    
    <title>{{ pageTitle }}</title>
</head>
<body class="{{ firstname }}">
{{> header }}
    <div class="container-xl">
        {{{ body }}}
        <div id="react-app"></div>
    </div>
{{> footer }}
<script  type="text/javascript" src="/js/lottie.js"></script>
<script type="text/javascript" src="/js/main.js"></script>
</body>
</html>

main.js

import submitHandler from './form.js';
import button from './components/button.js';
import lottieInit from './animations/lottie-handler.js';
import ReactButton from '../../dist/bca-react-component-library/button.js';
import { createRoot } from 'react-dom/client';

function loadButton() {
    const root = createRoot(document.getElementById('react-app'));
    root.render(
        <ReactButton />
    );
    console.log('rendered ReactButton');
}

window.addEventListener("load", runAllFunctions);

function runAllFunctions() {
    submitHandler();
    lottieInit();
    button();
    loadButton();
}

button.js (compiled)

export default function ReactButton() {
  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", null, "click here"));
}

button.js (pre-compile)

export default function ReactButton() {
  return (
    <>
      <button>click here</button>
    </>
  );
}

babel.config.json

// .babelrc or babel.config.json
{
  "presets": ["@babel/preset-react"]
}

I’m currently working on a programming challenge and got stuck on the following step:

Step 1: The Cryptographic Riddle

Your first task is to decipher a riddle to obtain critical configuration information. You have access to two strings:

File 1 (Base64 message):
VGhlIGtleSB3aWxsIGJlIG9uZSBiZWZvcmUgaXRzIHRpbWUgYW5kIHdpbGwgc3RhbmQgZm9yIGFuZXRuaXR5IGFuZCBzZXJ2ZSBhcyBhIHNvdXJjZSBvZiBpbnRlZ3JhdGlvbi4gQ29udmVuYWRlcyB3aWxsIGJlIGJyb2tlbi4gT3VyIHJldHVybiBpcyB0aGUgZ2lmdCBvZiBjaGFvcy4=

File 2 (Encrypted message):
f867490acb2f567b57e7f7b31b81609162e24536717a6a7c4f1c9c4c1a51a1969a53

Instructions:

Decode File 1 to find the key needed to decrypt File 2. The result of the decryption will be the DATABASE_URL and SUPER_SECRET_TOKEN needed for the next step.

I was able to decode File 1 using a Buffer approach, and it returned the following phrase:

The key will be one before its time and will stand for anetnity and serve as a source of integration. Convenades will be broken. Our return is the gift of chaos.

Now, this is where I got stuck.

I suspect the words “anetnity” and “convenades” are intentionally misspelled and might be clues, but I haven’t figured out how to move forward. I tried using AI tools but ended up wasting time without real progress.

Does anyone have any insights or experience with solving cryptography puzzles like this?

I tried to add two numbers with the jQuery basic arithmetic plugin in Node.js, but it was giving me strange and erratic answers. Here’s my code:

require("make-jquery-global")()
require("jquery-basic-arithmetic-plugin")

process.stdout.write(jQuery.add(2, 2))

But it outputs 5. I tried several other additions, but it did not work. Please help me! I know you think I’m dumb and just can add normally, but my friend told me you need to use jQuery or addition is slow and takes forever. And he’s always right. This question is not a troll and joke so stackoverflow don’t get mad at me. Thanks for the help

Debugging details:

On Windows 10 on a MacBook Pro, running the latest version of Node.js. The exact code in this is needed to reproduce, and also NPM installing the packages mentioned: “make-jquery-global” and “jquery-basic-arithmetic-plugin”

Error: UNABLE_TO_VERIFY_LEAF_SIGNATURE

I have started suddenly getting the signature error. I have changed nothing in my code, and nothing in my network or VPS network. I am completely aware there are many forum posts on here with the same issue. I have gone through them and attempted some of the solutions, including ssl-root-cas.

I also have not been able to find something relating to axios. I have tried the same request with fetch. I can complete the request with Postman.

Code:

const options = {
  method: 'POST',
  url: 'example.com',
  headers: {
    'content-type': 'application/json',
  },
  rejectUnauthorized: false,
  data: {
    grant_type: 'client_credentials',
    email: '[email protected]',
    password: 'sdfsdjkfhsdfks',
  },
};
axios
  .request(options)
  .then(function (response) {
    console.log(response.data.access_token);
    APIKey = `Bearer ${response.data.access_token}`;
  })
  .catch(function (error) {
    console.log(error);
  });

This is a system-breaking error, so any help is appreciated.

I have installed the Webnative plugin in Visual Studio Code and created a Capacitor project. But when I click to run in Visual Studio Code, it doesn’t show the Android option. On the Webnative website, it says there is an “integrate capacitor” option, but it doesn’t have one. How to enable the Android option?

I tried react vision camera and qr scanner library but not working properly with RN 0.68.5 .If anyone has ever built it on this RN version Please help

I tried upgrading degrading the versions but not getting working functionality . I want someone share me code or particular set of packages

For example, on this site
I want to highlight the paragraph that starts with the words

“Open Arms of Minnesota is a growing…”

So just for test case, I saved that paragraph as a global variable in the Dev-tools (chrome version 133.0.6343.99 using Mac)

(I know this picture is from windows, but this is where I post this thread from)

And pasted this code to highlight it:

const rect = temp1.getBoundingClientRect()
const top1 = rect.top
const left1 = rect.left
const width1 = rect.width
const height1 = rect.height


const overlay = document.createElement("div");
overlay.style.position = "absolute";
overlay.style.top = ${top1 + window.scrollY}px;
overlay.style.left = ${left1 + window.scrollX}px;
overlay.style.width = ${width1}px;
overlay.style.height = ${height1}px;
overlay.style.backgroundColor = "transparent";
overlay.style.border = "3px solid purple";
overlay.style.pointerEvents = "none";
overlay.style.zIndex = "2147483647";

document.body.appendChild(overlay);

(The reason I renamed it to left1 and top1 is because top is a saved keyword and I thought I was interfering with window.top…)
I don’t want it to be fixed positioned because I need it to stay even if the user scrolls.
But for some apparent reason, it just gets an offset above it and looks like this:

I have no idea where I am going wrong, because in other scenarios it works perfectly, the same code. I must also say that it sometimes works for that same paragraph I am talking about.. but I did not change any code or anything! (I tried to refresh multiple times, clear cookies and site data in the ‘Application’ section in the dev tools but to no avail)

Any ideas?

Selector for that paragraph: #post-3398 > div > div > section.elementor-section.elementor-top-section.elementor-element.elementor-element-785b238.elementor-section-boxed.elementor-section-height-default.elementor-section-height-default > div > div > div > div.elementor-element.elementor-element-1fa89a9.elementor-widget.elementor-widget-text-editor > div > p:nth-child(1)

(Even though it happens to the paragraph below it as well, this is just an example that boggles my mind)

Site: https://openarmsmn.org/about-us/careers

I have a rails project and only in production (works fine locally in development), imported JS modules apparently do not load, and I get console errors referencing 404 errors for the files:

**Error: 404 Not Found** https://example.com/assets/controllers/meeting/modules/shared_helpers **imported from** https://example.com/assets/controllers/meeting/parent-file-xxxxxxxxxxxxxxxxx.js

The fingerprinted version of the files do exist in the public folder. However the console errors are not referencing them:
‘GET
https://example.com/assets/controllers/meeting/modules/shared_helpers’

The parent JS file that is importing the JS modules seems to work. In the console it’s referred to by its finger printed name: ‘https://example.com/assets/controllers/meeting/parent-file-xxxxxxxxxxxxxxxxx.js’

In that main parent JS file, the imports look like this:

import sharedHelpers from './modules/shared_helpers';

where shared_helpers.js is located in exampleappjavascriptcontrollersmeetingmodules and the file that is importing it is in exampleappjavascriptcontrollersmeeting

Things I’ve tried:

I’ve already updated production.rb:
config.public_file_server.enabled = true

Then ran
‘rake assets:precompile’

I’ve clobbered the public folder and recompiled and replaced

I added this to nginx conf

location ~ ^/assets/ {
        root /home/ec2-user/example/public;
        gzip_static on;
        expires max;
        add_header Cache-Control public;
    }

Importmap.rb looks like:

pin "application", to: "application.js", preload: true

# Hotwired libraries
pin "@hotwired/turbo-rails", to: "turbo.min.js", preload: true
pin "@hotwired/stimulus", to: "stimulus.min.js", preload: true
pin "@hotwired/stimulus-loading", to: "stimulus-loading.js", preload: true

# Stimulus controllers
pin_all_from "app/javascript/controllers", under: "controllers"

# Meeting modules
pin_all_from "app/javascript/controllers/meeting/modules", under: "controllers/meeting/modules"

# External libraries
pin "meeting-client", to: "https://xxx.esm.mjs"m"

I’ve tried:
Why does Rails give 404 error for all assets?

Rails 7 and Import-map and loading custom JS file

EDIT
Should also mention I’m using secure-headers gem (csp), which has been .

SecureHeaders::Configuration.override(:disable_csp) do |config|
  config.csp = SecureHeaders::OPT_OUT
end

I’m running the code below. The output I was expecting was:
Start -> End -> While expires -> joke -> setTimeout
However, the output I’m actually getting is:
Start -> End -> While expires -> setTimeout -> joke
Why is this happening?
Shouldn’t “joke” be printed before “setTimeout”, since fetch callbacks are stored in the microtask queue, which has higher priority than the task queue where setTimeout callbacks are stored?

console.log("Start");

setTimeout(function cb() {
    console.log("setTimeout");
}, 5000);

const apiUrl = "https://api.chucknorris.io/jokes/random";

fetch(apiUrl)
    .then((response) => response.json())
    .then((data) => {
        const joke = data.value;
        console.log(joke);
    })
    .catch((error) => {
        console.error("Error:", error);
    });

console.log("End");

let startDate = new Date().getTime();
let endDate = startDate;
while (endDate < startDate + 10000) {
    endDate = new Date().getTime();
}

console.log("While expires");

Jag ska snart flytta från min lägenhet i Göteborg och behöver boka professionell städning. Jag har sett olika tjänster som hemstädning (regelbunden städning av hemmet) och flyttstädning (grundlig städning vid flytt). Jag är osäker på vad skillnaden är mellan dessa tjänster och vad som ingår i flyttstädningen jämfört med hemstädning, särskilt vad som krävs för att hyresvärden ska bli nöjd.

Jag har tittat på städfirmors beskrivningar på nätet, men det finns många olika erbjudanden och prisnivåer. Jag trodde först att hemstädning och flyttstädning är ganska lika, men jag inser att flyttstädning verkar innebära mer omfattande rengöring, som fönsterputs och rengöring bakom spis och kyl. Jag vill veta exakt vad flyttstädning innefattar och om det är värt att boka till extra tjänster som storstädning.

I have a somewhat theoretical and opinion-based question. I’m building a small particle generator with the goal of creating animated images (developed using JS Web2D canvas to easily download the resulting file later). The issue is that the current movement from one point to another (like the particle generator to the final destruction point) is very basic, and I’d like to achieve something more natural. I’ve tried a few things, but I’d like to hear other people’s opinions on mathematical formulas or simply interesting and natural patterns to follow. Below is an example of how it currently works and the base code I’m using for the paths.

(spawners in green, targets in white)

Particles gif

[class code]

class Particle {
    /** @type {Vec2} */
    pos = { x: 0, y: 0 };

    /** @type {string} */
    color;

    /** @type {number} */
    lifespan = PARTICLE_LIFESPAN;

    /** @type {Vec2[]} */
    trail = [];

    /** @type {number} */
    trailLength = Math.floor(Math.random() * PARTICLE_MAX_LENGTH);

    /** @type {number} */
    targetIndex = Math.floor(Math.random() * targets.length);

    /** @type {Vec2} */
    target =
        targets.length > 0
            ? targets[this.targetIndex]
            : { x: Math.random() * -CANVAS_SIZE_X, y: Math.random() * CANVAS_SIZE_Y * 2 };

    /** @type {number} */
    spawnIndex = Math.floor(Math.random() * spawners.length);

    constructor() {
        // particle spawn position
        this.pos.x =
            spawners.length > 0
                ? spawners[this.spawnIndex].x
                : Math.floor(Math.random() * CANVAS_SIZE_X) + 50;
        this.pos.y =
            spawners.length > 0
                ? spawners[this.spawnIndex].y
                : Math.floor(Math.random() * CANVAS_SIZE_Y) - 50;

        // particle color
        this.color = PARTICLE_COLOR
            ? PARTICLE_COLOR
            : `#${Math.max(0x100, Math.round(Math.random() * 0xfff))}`;

        // creating trail
        for (let i = 0; i < this.trailLength; ++i) {
            this.trail.push({ x: this.pos.x, y: this.pos.y });
        }
    }

    spread() {
        switch (Math.round(Math.random() * 4)) {
            case 0:
                this.pos.x += PARTICLE_SPREAD;
                break;
            case 1:
                this.pos.x -= PARTICLE_SPREAD;
                break;
            case 2:
                this.pos.y += PARTICLE_SPREAD;
                break;
            case 3:
                this.pos.y -= PARTICLE_SPREAD;
                break;
        }
    }

    /** @param {Vec2} target */
    follow(target) {
        this.trail.push({ x: this.pos.x, y: this.pos.y });
        if (this.trail.length > this.trailLength) {
            this.trail.shift();
        }

        if (this.pos.x <= target.x + 10) {
            this.pos.x += PARTICLE_VELOCITY;
        } else if (this.pos.x > target.x + 10) {
            this.pos.x -= PARTICLE_VELOCITY;
        }

        if (this.pos.y <= target.y) {
            this.pos.y += PARTICLE_VELOCITY;
        } else if (this.pos.y > target.y) {
            this.pos.y -= PARTICLE_VELOCITY;
        }

        if (this.pos.x === target.x && this.pos.y === target.y) {
            if (targets.length > 0) {
                this.target = targets[this.targetIndex - 1];
            }
        }
    }
}

[render code]

/** @param {CanvasRenderingContext2D} ctx */
function render(ctx) {
    /** @type {Particle[]} */
    const ps = [];

    // reusable variables
    let i = 0,
        y = 0;

    const loop = () => {
        ctx.fillStyle = CANVAS_BACKGROUND_COLOR;
        ctx.fillRect(0, 0, CANVAS_SIZE_X, CANVAS_SIZE_Y);

        if (ps.length < PARTICLE_NUMBER) {
            for (; i < PARTICLE_NUMBER - ps.length; ++i) ps.push(new Particle());
            i = 0;
        }

        // rendering particles
        for (; i < ps.length; ++i) {
            ps[i].lifespan -= 1;

            for (; y < ps[i].trail.length - 1; ++y) {
                ctx.strokeStyle = ps[i].color;
                ctx.beginPath();
                ctx.moveTo(ps[i].trail[y].x, ps[i].trail[y].y);
                ctx.lineTo(ps[i].trail[y + 1].x, ps[i].trail[y + 1].y);
                ctx.stroke();
            }
            y = 0;

            ps[i].spread();
            ps[i].follow(ps[i].target);

            if (
                ps[i].lifespan <= 0 ||
                ps[i].pos.x < -PARTICLE_MAX_LENGTH * 2 ||
                ps[i].pos.x > CANVAS_SIZE_X + PARTICLE_MAX_LENGTH * 2 ||
                ps[i].pos.y < -PARTICLE_MAX_LENGTH * 2 ||
                ps[i].pos.y > CANVAS_SIZE_Y + (CANVAS_THRESHOLD + PARTICLE_MAX_LENGTH)
            ) {
                ps.splice(i, 1);
            }
        }
        i = 0;

        // rendering targets
        for (; i < targets.length; ++i) {
            ctx.fillStyle = "#ffffff95";
            ctx.fillRect(targets[i].x, targets[i].y, 4, 4);
            ctx.fillStyle = "#fff";
            ctx.fillText(`${i}`, targets[i].x + 2, targets[i].y - 6, 12);
        }
        i = 0;

        // rendering spawnpoints
        for (; i < spawners.length; ++i) {
            ctx.fillStyle = "#4800c695";
            ctx.fillRect(spawners[i].x, spawners[i].y, 4, 4);
            ctx.fillStyle = "#0fde00ff";
            ctx.fillText(`${i}`, spawners[i].x + 2, spawners[i].y - 6, 12);
        }
        i = 0;

        window.requestAnimationFrame(loop);
    };

    loop();
}