Author: Blancer

What things to remember while making a portfolio website?

I am a full-stack web developer aspirant, and I want to create a portfolio website. I want some beginner tips to start the process.

I didn’t tried making the website just wanted some tips and tricks to start with. I have experience of making websites, as far I’ve made book recommendation and review website and tours & travels website. Can I include projects and past experience in it? what else do I need to have in it? Just need some guidance so that I can go further.

How to save Updated and New information to another sheet, based on multiple criteria?

I’m trying to create a Bank Reconciliation tool in Google Sheets.
I have a list, Rec_FormWS, that is pulls data from Data_EntryWS. Rec_FormWS filters rows with status considered outstanding. From Rec_FormWS, I put “x” next to each items that I have received. How do I write a code that can save the “x” for those items from Rec_FromWS back to Data_EntryWS? The criteria that can help match the transactions back to Data_EntrytWS are GL codes and certian bank accounts.
Rec_FormWS
Data_EntryWS
Here is what I have currently coded. Sometimes the execution times out without completing the task.I am open to approaching to a solution through other approaches. I just want the “x” saved back to the Data_EntryWS.

Webpack Compilation Error after running the test and querying the table in the database

I need to run an automated test (Cypress) that connects to my database (mysql) and does a select (lib mysql2).
I am unable to run my test successfully.

I’m getting the following error:

Error: Webpack Compilation Error
./node_modules/lru-cache/dist/mjs/index.js 48:8
Module parse failed: Unexpected token (48:8)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
| }
| class Stack {
>     heap;
|     length;
|     // private constructor
 @ ./node_modules/mysql2/lib/parsers/parser_cache.js 3:12-32
 @ ./node_modules/mysql2/promise.js

I imagined it would be something related to node_modules. I deleted and installed everything again.
However, the error remains.

Could anyone help me?

> My file db.js below:

var mysql = require('mysql2/promise');

var pool = mysql.createPool({
    host: "for-qa-dblibsmetricsinformation.clmii4vy3haa.us-east-1.rds.amazonaws.com",
    user: "usr_test",
    password: "usr-test",
    database: "db_test",
    connectionLimit: 10 // maximum number of connections in the pool
});

module.exports = pool;

> My file .spec.js below

const pool = require('../../../../../../../../db.js');

describe('Test DB', () => {
  it('should consult a new user', () => {
    const result = pool.execute('select user_name from table_test');
    cy.log(result);
  });
});

Thanks in advance!!

multiple circular progress bar getting same options using jquery

I am trying to create progress bar which require multiple progress bar to overlap i am doing this using HTML , CSS and jquery. the problem is that both getting same parameters although i have assigned different parameters to both.

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./style.css">
    <link rel="stylesheet" href="./grasp_mobile_progress_circle-1.0.0.css">
</head>
<body>
    <div class="main-container">
        <div id="outer-progress-bar">
            <div class="dashed">

            </div>
        </div>
        <div id="my-progress-bar">

        </div>

    </div>
    
</body>
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>

    <script src="./grasp_mobile_progress_circle-1.0.0.js"></script>
    <script src="./index1.js"></script>
    <script src="./index2.js"></script>
</html>

CSS:

body {
  }
  .main-container{
    width: 200px;
    height: 200px;
    background-color: blue;
    position: relative;
  }
    .outer-progress-bar{
    border-radius: 50%;
    display: flex;
    align-items: center;
    position: absolute;
    left: -20px;
    top: -20px;

    

  }
  .dashed{
    width: 170px;
    height: 170px;
    border: 2px dashed red;
    position: absolute;
    left: 37px;
    
    border-radius: 50%;
  }
  .my-progress-bar {
    position: absolute;
    left: 0%;
    z-index: 1;
    /* transform: translate(-50%, -50%); */
  }

index1.js:

$(document).ready(function () {
    var options1 = {
        line_width: 5,
        color: "green",
        starting_position: 0,
        width: "120px",
        height: "120px",
        text: "",
        percent: 0,
    };

    var progress_circle1 = $("#my-progress-bar").gmpc(options1);
progress_circle1.gmpc('animate', 80, 500);
});

index2.js:

 var a=$(document).ready(function () {
    var options2 = {
        line_width: 12,
        color: "red",
        starting_position: 0,
        percent: 0,
        width: "300px",
        height: "300px",
        text: "",
        percentage: true,
    };
    
    var progress_circle2 = $("#outer-progress-bar").gmpc(options2);
    progress_circle2.gmpc('animate', 70, 500); 
});

This is the result of this code:

enter image description here

I want to achieve this result:

enter image description here

Uncaught (in promise) TypeError: document.getElementById(..) is null

I am relatively new to JS and HTML however I cannot understand how to fix the issue I am having, I assumed the issue is the script running before the page has loaded so have tried however I’m unsure what else I can do to fix it. I am trying to use a link found using the JS script and use it for an image in HTML. Using the console on the browser I keep getting the error “Uncaught (in promise) TypeError: document.getElementById(…) is null”

Any help would be appreciated.

MY JS



let accName = "aimxoo";
let accTag = "5600";
let region;
let puuid;
let playercard;
let character;
let mapname;

async function getInfo(accName, accTag){
    let link = "https://api.henrikdev.xyz/valorant/v1/account/" + accName + "/" + accTag + "?force=false";
    try {
        const response = await fetch(link)
        const info = await response.json();
        region = info.data.region;
        puuid = info.data.puuid;
    } catch(err) {
        console.error("ERROR1");
    }
}

async function getMatchr(region, puuid) {
    var mymatchid;
    let link = 'https://api.henrikdev.xyz/valorant/v1/by-puuid/lifetime/mmr-history/' + region + '/' + puuid;
    try {
        const response = await fetch(link)
        const info = await response.json();
        mymatchid = info.data['0'].match_id;
        mapname = info.data['0'].map.name;

    } catch(err) {
        console.error("ERROR2");
    }
    link = 'https://api.henrikdev.xyz/valorant/v2/match/' + mymatchid;
    try {
        const response = await fetch(link)
        const info = await response.json();
        var player = info.data.players.all_players;
        var y;
        for (let x = 0; x <20; x++){
            if(player[x].puuid == puuid) {
                y = x;
                x=20;
            };
        }
        var myplayer = player[y];
       character = myplayer.character;
    } catch(err) {
        console.error("ERROR3");
    }
}

async function getPlayerCard(puuid){
    let link = "https://api.henrikdev.xyz/valorant/v1/by-puuid/account/" + puuid;
    try {
        const response = await fetch (link)
        const info = await response.json();
        playercard = info.data.card.small;
    } catch(err) {
        console.error("ERROR4");
    }
};

async function placePlayerCard(){
    await getPlayerCard (puuid);
    document.getElementById("player-card").src = playercard;
}

async function runInfo() {
   await getInfo(accName, accTag);
   await getMatchr(region, puuid);
   await placePlayerCard();
   console.log(playercard);

}



window.addEventListener("DOMContentLoaded", runInfo);
runInfo();

and this is
MY HTML

<body>
    <div class="overview">
        <img src="" id="player-icon" width="100px">

    </div>

    <script src="player-data.js" defer></script> 
</body>

</html>

Function to remove spacing

I have boolean field like below:

enter image description here

which actually remove spacing from whatever comes at bottom and following is my code:

export default function CallToAction({ removeSpace, ...props }) {
  let defaultMargin = getDefaultComponentMargin(removeSpace);

  return (
    <div
      className={classNames(
        "cta text-center mx-6 md:mx-auto",
        {
          [`${defaultMargin}`]: true,
        },

and remove space function which actually called is below:

export function getDefaultComponentMargin(removeSpace = false) {
  if (removeSpace === true) {
    return "mb-0";
  }

  return "mb-24 xs:mb-40";
}

but unable to remove space from bottom.
Any help would be highlighly appreciated!

How can I do a tag filter using js?

I am trying to filter my projects by using spans as tag. There are tags “segundo”, “evento”, etc… I want the user to type “projeto” in the search bar and then only projects with the tag “projeto” show up.

//search bar
const searchInput = document.getElementById("searchInput");
const projectsShow = document.querySelectorAll(".card");
searchInput.addEventListener("input", function() {
  const searchTerm = searchInput.value.toLowerCase();
  projectsShow.forEach(projectCard => {
    const name = projectCard.querySelector(".card .astro-NYR2HY6C span").textContent.toLowerCase();
    if (name.startsWith(searchTerm)) {
      projectsShow.style.display = "block";
    } else {
      projectsShow.style.display = "none";
    }
  });
});
<input type="text" id="searchInput" aria-label="Pesquise por meus projetos." placeholder="Pesquise por meus projetos..." autocapitalize="off" autocomplete="off" class="astro-S3GEF3U7">

<article class="card astro-WSY3ECDU">
  <a class="cardlink astro-WSY3ECDU" href="./segundo/indicacoesback">
    <div class="content astro-WSY3ECDU">
      <div class="text astro-WSY3ECDU">
        <div class="header astro-WSY3ECDU">
          <h2 class="title astro-WSY3ECDU">Indicações de Backend</h2>
          <span class="date astro-WSY3ECDU">2023</span>
        </div>
        <p class="astro-WSY3ECDU">Este site foi desenvolvido com o objetivo de apresentar indicações de conteúdo relacionado ao desenvolvimento backend.</p>
      </div>
      <div class="astro-NYR2HY6C tags">
        <span class="astro-HL5A4E72" id="segundo">segundo</span>
        <span class="astro-HL5A4E72">tec</span>
      </div>
    </div>
  </a>
</article>

StreamingTextResponse doesn’t working correctly in production

Code which I shared – is api route in Next.js
In dev mode, all working as I expected, but in production, the response seems like static response, so data is sending not dynamically, just like one part

I’m not sure why that happens

On the client side it handled by TextDecoder class, I get chunks with text from api route and add them to state

So as I said, in the dev mode all working like readable stream response, but in production not

used libraries langchain and ai

import { ChatOpenAI, ChatOpenAICallOptions } from "langchain/chat_models/openai"
import { PromptTemplate } from "langchain/prompts"
import { BytesOutputParser } from "langchain/schema/output_parser"
import { StreamingTextResponse } from "ai"
import { cookies } from "next/headers"
import { NextRequest, NextResponse } from "next/server"

export async function POST(req: NextRequest): Promise<StreamingTextResponse> {

    if (!cookies().has(/*property_name*/)) {
        return NextResponse.json(null, { status: 401, statusText: "Unauthorized" })
    }
    // Request body
    const body: AssistantPayload = await req.json()
    // Messages variable
    let messages: Message[] = body.messages
    // Initialize chat model instance
    const model: ChatOpenAI<ChatOpenAICallOptions> = new ChatOpenAI({
    // ... config properties
    })
    // Parser instance
    const outputParser = new BytesOutputParser()

    const prompt = PromptTemplate
        .fromTemplate(/* I can't share it. It's just system prompt */)

    const history = JSON.stringify( // Create history JSON
        messages.map(m => /* creating required history structure as string */)
    const content = body.prompt // New user message
    const chain = prompt.pipe(model).pipe(outputParser)

    const stream = await chain.stream({ history, content }) // Create readable stream

    return new StreamingTextResponse(stream) // Readable stream response
}

Web: Progressbar with multiple steps/segments using Bootstrap

I want to create a similar progressbar like this on my WebApp. I am using PHP (Laravel) as a Framework with Bootstrap 5.3.
Wanted Progressbar

It results from this JSON which is periodically written to the DB from another Application. So “Actual” is increasing continously.

    "Actual": 121,
    "Steps": [
        0,
        3600,
        7200,
        18000,
        36000,
        72000
    ]

The best I was able to create is this:
My Progressbar

<div class="progress-stacked">
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="121" aria-valuemin="0" aria-valuemax="3600" style="width: 3.075%">
    <div class="text-dark progress-bar bg-info  "></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="0" aria-valuemin="3600" aria-valuemax="7200" style="width: 6.125">
    <div class="text-dark progress-bar bg-light  "></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="0" aria-valuemin="7200" aria-valuemax="18000" style="width: 12.5%">
    <div class="text-dark progress-bar bg-light  "></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="0" aria-valuemin="18000" aria-valuemax="36000" style="width: 25%">
    <div class="text-dark progress-bar bg-light  "></div>
  </div>
  <div class="progress" role="progressbar" aria-label="Segment one" aria-valuenow="0" aria-valuemin="36000" aria-valuemax="72000" style="width: 50%">
    <div class="text-dark progress-bar bg-light  "></div>
  </div>
</div>

.progress {
    border-right: .5px solid black;
    border-radius: unset;
}
.progress-stacked {
    margin: 0 15px;
    width: unset;
}

I also didn’t find any suitable css/js framework or anything like that for it

bus tickets reservation system with javascript alogorithms

This is my use case
The bus goes from point A to point D via B and C. The Bus goes only one way and there is no return.
This means the bus goes as follows A-B, B-C, C-D.

Passengers can get onboard from A,B and C.
All the possible bus ticket options are as follows
A-B, A-C,A-D,B-C,B-D,C-D

bus has 40 seats. 4 seats in a row named as 1A,1B,1C,1D,2A,2B…

I need to write a function to check availability and reserve bus tickets with the given reservation ID. All the code should be in JS. This assignment is for a coding challenge.

I have approached the problem this way

  1. Create a class called Bus

  2. Map all the possible bus ticket scenarios to a object like this

    this.reservations = {
    “A-B”: [],
    “A-C”: [],
    “A-D”: [],
    “B-C”: [],
    “B-D”: [],
    “C-D”: [],
    };

  3. Define another object called complexPaths. complexPath is where you can not go point x to y without passing another points. Eg:- A-C is a complex path, Because B is in middle. Where A-B is not a complex path.

    this.complexPaths = {
    “A-C”: [“A-B”, “B-C”],
    “A-D”: [“A-B”, “B-C”, “C-D”],
    “B-D”: [“B-C”, “C-D”],
    };

  4. If the reservation is for simple path I just fill reservations object’s relevant array with n number of elements. Where n being the number of seats. Eg:- A-B:['reser1','reser1','reser1','reser1','reser1']

  5. If it is a complex path I fill not only that array also I fill related arrays as well. Eg:- A-C 5 tickets
    A-C:['reser2','reser2','reser2','reser2','reser2'] A-B:['reser2','reser2','reser2','reser2','reser2'] B-C:['reser2','reser2','reser2','reser2','reser2'] The reason why I am doing that is if I leave B-C, A-B empty other call mark reservations for those. Since the route is occupied form A-C this shouldn’t happen.

class Bus {
  constructor() {
    this.seats = Array(40).fill(false); // Initializing all seats as available
    this.reservations = {
      "A-B": [],
      "A-C": [],
      "A-D": [],
      "B-C": [],
      "B-D": [],
      "C-D": [],
    };
    this.complexPaths = {
      "A-C": ["A-B", "B-C"],
      "A-D": ["A-B", "B-C", "C-D"],
      "B-D": ["B-C", "C-D"],
    };
  }

  checkAvailability(route, numOfSeats) {
    let totalReservedSeats = 0;

    if (this.complexPaths.hasOwnProperty(route)) {
      this.complexPaths[route].forEach((simplePath) => {
        totalReservedSeats += this.reservations[simplePath].length;
      });
    } else {
      totalReservedSeats = this.reservations[route].length;
    }

    const remainingSeats = 40 - totalReservedSeats;
    return remainingSeats >= numOfSeats;
  }

  updateComplexPaths(reservationId, complexPath, numOfSeats) {
    this.complexPaths[complexPath].forEach((simplePath) => {
      this.reservations[simplePath] = this.reservations[simplePath].concat(
        Array(numOfSeats).fill(reservationId)
      );
    });
  }

  reserveSeat(route, numOfSeats, reservationId) {
    if (!this.checkAvailability(route, numOfSeats)) {
      return "Seats not available for this route";
    }

    const availableSeats = this.seats
      .map((seat, index) =>
        !this.reservations[route].includes(index) ? index : -1
      ) // Find available seats for this route
      .filter((index) => index !== -1);

    if (availableSeats.length < numOfSeats) {
      return "Seats not available for this route";
    }

    const selectedSeats = availableSeats.slice(0, numOfSeats);

    selectedSeats.forEach((seatIndex) => {
      this.seats[seatIndex] = reservationId;
      this.reservations[route].push(reservationId);
    });

    // Update all related simple paths with the same reservation
    if (this.complexPaths.hasOwnProperty(route)) {
      this.updateComplexPaths(reservationId, route, numOfSeats);
    }

    return `Successfully booked ${numOfSeats} seats for ${route}`;
  }
  printReservations() {
    console.log(this.reservations);
  }
}

// Unit tests
let bus = new Bus();

console.log(bus.reserveSeat("C-D", 20, "Reservation2"));
bus.printReservations();
console.log(bus.reserveSeat("B-D", 20, "Reservation1"));
bus.printReservations();
console.log(bus.checkAvailability("C-D", 1) ? "Available" : "Not available");

The above code seems working. I tested with some unit tests as well. but has one issue.
Right now if the user make a reservation for 5 tickets, It will come as common reservationid. But want I want is to return booked seats numbers along with the reservationid like this

{
id:"reser3",
seats:["1A,1B,1C"]

}

How can I do this with JavaScript? Also, this is a workaround solution. Should be a better way to address this issue here. How can I improve the current code as well?