Category: javascript

I have a vector image that is a png and I want to put it on my website for the body, although when I try to put it there it becomes super blurry. I’ve been using ImgBB which doesn’t allow SVGS so that’s bad (if you have a host for svgs that is private let me know please) and its high on pixels there too I usually put the vectors at 9999-15000 pixels but on my website its so bad I can’t use it. When I put the image in the css it’s automatically small. I think it’s blurry because it’s originally small and I have to increase the size a bunch for the vector to fit the page. So my question is how can I unblur it or not have to increase the size? (by the way, i have been using background-size: px, px; or contain; or auto;)

I tried using the code from another page and that made it slightly better, no idea why. I wasn’t expecting much really, I just tried it because the other image wasn’t so small when I put the link in css for the body.

By the way, none of this is in an or something like that. It’s all in the body {} css.

I am using SAML2 for authentication purposes with Azure AD.
When a user goes to my landing page, I need to check in the background if he is already logged in to the IDP (Azure AD).
Some users are employees, which have accounts in AD, some are guests, which require a different auth flow.

How do I check in the background, without redirecting the landing page to the Azure AD sign in page?

I can’t use iframe to silently check this, as MS AD has X-Frame-Options = 'DENY'.

Well, I’ve made an node express API, and now I’m trying to deploy it on fly.io.
The API deploy is well working, but in same folder of API i got another one with HTML/CSS/js files and I’m trying to deploy it… but that is the problem, I don’t know how can I do it.

If I have to use the fly.toml (using volumes) or If I have no make another deploy only for my frontEnd.
And there are Dockerfile, another thing that I don’t know much.

(I’m Brazilian, If you speak Portuguese would help me a lot and sorry for poor English :P)

I just got passing a html file to mt ‘ / ‘ GET method in API deploy… but I think that’s is not correct.

 app.get('/', (req,res) => {
 const pokedexhtml = path.join(__dirname, 'src','pokedex_jnx')
 const htmlPath = path.join(pokedexhtml, 'index.html');
 res.sendFile(path.join(htmlPath))
 })

(yes, it is the classic pokedex project {and yes, I’ve made it without any course tutor})

I was able to make it so that my splash screen would only play once on page load, and would not play again, but after I close the tab, it does not play anymore, is there a way that I can fix it, or set a time limit where this JS function would reset? Can someone write the code in, it’d be very helpful 🙂

HTML:

<div class="splash">
    <h1 class="splash-content" id="content1">Sub/h1>
    <h1 class="splash-content" id="content2">Sub</h1>
    <h1 class="splash-content" id="content3">Sub</h1>
</div>

CSS:

.splash {
    background: black;
    z-index: 2;
    text-align: center;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100vh;
    transition: 4s;
}

.splash-content {
    color: white;
    transform: translateY(11em);
}

.splash.display-none{
    opacity: 0;
    z-index: 0;
    transform: translateY(-100%);
    transition: 1.5s;
}

.splash.post_animated {
    display: none;
}

#content1 {
    animation: come-in-first 2s ease-in;
}

#content2 {
    animation: come-in-second 3s ease-in;
}

#content3 {
    transform: translate(4px, 11em);
    animation: come-in-third 4s ease-in;
}

@keyframes come-in-first {
    0% {
        transform: translateY(13em);
        opacity: 0;
    }
}

@keyframes come-in-second {
    0%, 50% {
        transform: translateY(11.5em);
        opacity: 0;
    }
}

@keyframes come-in-third {
    0%, 60% {
        transform: translate(4px, 11.5em);
        opacity: 0;
    }
}

JS:

const splash = document.querySelector('.splash');

document.addEventListener('DOMContentLoaded', (e) => {
  setTimeout(() => {
    splash.classList.add('display-none');
  }, 6000);
})


var firstContainer = document.querySelector(".splash");

var result = localStorage.getItem('hasRan');

if (!result) {
        localStorage.setItem('hasRan', true);
} else {
    firstContainer.classList.remove("animated");
    firstContainer.classList.add("post_animated");
}

If you are confused, I am trying to make it so that the result function resets when the page is closed, that way the splash screen if you open the page again after closing the tab.

I’m using useRef to track the render count in a React functional component. However, I noticed that when the component re-renders for the first time, the render count increases from 1 to 3 instead of 2. I’m wondering why this is happening and how I can fix it.

import React, { useEffect, useRef, useState } from 'react';
const UseRef = () => {
    const [name, setName] = useState('');
    const renderCount = useRef(1);

    useEffect(() => {
        renderCount.current = renderCount.current + 1;
    });

    return (
        <>
            <input value={name} onChange={e => setName(e.target.value)} />
            <div>My name is {name}</div>
            <div>I rendered {renderCount.current} times</div>
        </>
    );
};

export default UseRef;

I have a shiny app with a button, where when it is clicked it should redirect to a new URL, I have implemented the redirect, but it opens in the same window, how can I modify it such that the new URL is opened in either a new tab or new window?

library(shiny)

myjs <- "Shiny.addCustomMessageHandler('mymessage', function(message) {window.location= message ;});"

ui <- fluidPage(
  tags$head(tags$script(myjs)),     
  actionButton("button", "Click me")
)

server <- function(input, output, session) {
  
  observeEvent(input$button,{
    url <- "https://stackoverflow.com/"
    session$sendCustomMessage("mymessage", url)

    
  })
}

---

I tried it with

window.open 

unfortunately, this does not work.

So i have a local image stream ( through an eps32cam that streams images to a specific ip) that i then want to transfer to a canvis to display the rgb values. My problem is that other images work without problems only the images of the stream do not. It seems like nothing is drawn by the function “drawImage()” in that case.

Here is my code html code with js (i apologize for my bad coding..im quiet new with html and co):

<!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">
    <title>Document</title>
</head>
<style>
    #canvas{
        background-color: blue;
    }
</style>

<body>
    <img src="http://192.168.137.10/" id="Image">
    <canvas id="canvas"></canvas>
    <p id="text">DATA</p>
    <p id="text1">DATA</p>

</body>
<script>

    function loop () {
        document.getElementById("Image").crossOrigin = "Anonymous";
        var rgbValuesNow = getRGBValues(document.getElementById("Image"));
        document.getElementById("text").innerHTML = "RGB Values: " + rgbValuesNow;
    }

    setInterval(loop,300);

    function getRGBValues(img) {
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext && canvas.getContext('2d'),
            rgbValues = [100,100,100], // Set a base colour as a fallback for non-compliant browsers
            pixelInterval = 5, // Rather than inspect every single pixel in the image inspect every 5th pixel
            data;

        // return the base colour for non-compliant browsers
        if (!context) { alert('Your browser does not support CANVAS'); return rgbValues; }

        // set the height and width of the canvas element to that of the image
        var height = canvas.height = img.naturalHeight || img.offsetHeight || img.height,
            width = canvas.width = img.naturalWidth || img.offsetWidth || img.width;

        context.drawImage(img, 0, 0,);
        try {
            data = context.getImageData(0, 0, width, height);
        } catch (e) {
            // catch errors - usually due to cross domain security issues
            alert(e);
            return rgbValues;
        }

        data = data.data;
        length = data.length;
        rgbValues[0] = countColorValue("red", data);
        rgbValues[1] = countColorValue("green", data);
        rgbValues[2] = countColorValue("blue", data);
        return rgbValues;
    }

    function countColorValue(color, imageData) {
        let colorValue = 0;
        if (color == "red") {
            for (let i = 0; i < imageData.length; i = i + 4) {
                colorValue = colorValue + imageData[i];
            }
        }
        else if (color == "green") {
            for (let i = 1; i < imageData.length; i = i + 4) {
                colorValue = colorValue + imageData[i];
            }
        }
        else if (color == "blue") {
            for (let i = 2; i < imageData.length; i = i + 4) {
                colorValue = colorValue + imageData[i];
            }
        }
        return colorValue;
    }
</script>

</html>

Im not sure it migt be some issue with “crossOrigin”. However im prettymuch clueless.Thanks in advance 🙂

First time using mongodb and i get “mongodb.connect is not a function” when trying to run, what am i doing wrong?

Code:

let express = require('express')
let mongodb = require('mongodb')

let app = express()
let db

let connectionString = '...' 
mongodb.connect(connectionString, {useNewUrlParser: true}, function(err, client) {
  db = client.db()
  app.listen(3000)
})

When I click on submit all the field information goes to browser’s url, and the values didn’t go to backend and the errors messages from yup didn’t work too.

I try use the event.preventDefault in handleSubmit to stop the refresh in useForm but still the same.

import React from 'react';
import { useForm, type SubmitHandler } from 'react-hook-form';
import { type IFormData } from 'interfaces/ISession';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { useAppDispatch } from 'redux/hooks';
import { saveEmail } from 'redux/reducers/usersSlice';
import { useSessionMutation } from 'shared/httpService';

const schema = yup
  .object({
    email: yup.string().email().required(),
    password: yup.string().min(8).max(16).required(),
  })
  .required();

const Session = (): JSX.Element => {
  const dispatch = useAppDispatch();
  const [session] = useSessionMutation();

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<IFormData>({
    resolver: yupResolver(schema),
  });

  const onSubmit: SubmitHandler<IFormData> = async ({ email, password }, event) => {
    if (event !== undefined) {
      event.preventDefault();
    }
    try {
      await session({ email, password }).unwrap();
      dispatch(saveEmail(email));
    } catch (error) {
      console.error(error);
    }
  };

  return (
    <form onSubmit={() => handleSubmit(onSubmit)}>
      <input type="email" defaultValue="" {...register('email')} placeholder="email" />
      <span>{errors.email?.message}</span>

      <input type="password" defaultValue="" {...register('password')} placeholder="senha" />
      <span>{errors.password?.message}</span>

      <input type="submit" />
    </form>
  );
};

export default Session;

I tryed use event.preventDefault but still the same.

I have this code:

App.jsx

import { Providers } from '@microsoft/mgt-element';
import { Msal2Provider } from '@microsoft/mgt-msal2-provider';

Providers.globalProvider = new Msal2Provider({
  clientId: 'somecode',
  scopes: ['calendars.read', 'user.read', 'openid', 'profile', 'people.read', 'user.readbasic.all']
});

A component called Login.jsx:

import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import { Providers, ProviderState } from '@microsoft/mgt-element';
import {Login as Login2} from '@microsoft/mgt-react';

function useIsSignedIn(){
    const [isSignedIn, setIsSignedIn] = useState(false);
  
    useEffect(() => {
      const updateState = () => {
        const provider = Providers.globalProvider;
        setIsSignedIn(provider && provider.state === ProviderState.SignedIn);
      };
  
      Providers.onProviderUpdated(updateState);
      updateState();
  
      return () => {
        Providers.removeProviderUpdatedListener(updateState);
      }
    }, []);  
    return [isSignedIn];
}

const Login = () => {

    const [isSignedIn] = useIsSignedIn();
    const history = useNavigate();
   
    if(isSignedIn){
        history('/acoes')
    }

    return (
      <Login2 />
    );
}
 
export default Login;

Login2 is working well and I can know if i’m signed in or not. But how can I see my groups, my user name and my email?

I’ve tried the person component, but i don’t know the attributes for showing or get the name.

<Person
   personQuery='me'
   view="threeLines"
   showPresence 
/>

Can anyone help me?

i tried using barba.Dispatcher.on('transitionCompleted', function(currentStatus, oldStatus, container) to no avail. the divs should cycle when clicking on the dialogue box. here is the full code:

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>1</title>
        <link rel="shortcut icon" href="https://files.catbox.moe/h33w19.png">
        <link rel="stylesheet" href="/style.css">
        <script src="https://kit.fontawesome.com/37b69e3f02.js" crossorigin="anonymous"></script>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
        </script>
        <script src="https://unpkg.com/@barba/core"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.0/gsap.min.js"></script>
    </head>
    <body>
        
    <div data-barba="wrapper">
        <main data-barba="container" class="container">
            
            <div class="icon"><img src="https://files.catbox.moe/v1ccbr.png" width="400"></div>

            <div class="dialoguewrap">
                <div class="arrowleft" style="visibility:hidden;"><a href="/index.html" data-direction="prev"><img src="https://files.catbox.moe/mosfgm.png"></a></div>
                
                <div class="box">
                    <div class="inner">
                        <div class="header">1/6</div>
                        Gabriel jolts awake. "That dream again..."<br><br>
                        He's been having these strange nightmares. 
                        <div class="footer"><i class="fa-solid fa-caret-down"></i></div>
                    </div>
                </div>

                <div class="box hidden">
                    <div class="inner">
                        <div class="header">2/6</div>
                        Each and every nightmare starts and ends the same way. He would be going about his daily life when suddenly abnormal occurrences would happen. 
                        <div class="footer"><i class="fa-solid fa-caret-down"></i></div>
                    </div>
                </div>

                <div class="box hidden">
                    <div class="inner">
                        <div class="header">3/6</div>
                        Once it was the beginning of World War 3. Another time it was a world-ending meteor from space. The strangest had to be the one where aliens attacked.
                        <div class="footer"><i class="fa-solid fa-caret-down"></i></div>
                    </div>
                </div>

                <div class="box hidden">
                    <div class="inner">
                        <div class="header">4/6</div>
                        And every time, without fail, he would die at the end.
                        <div class="footer"><i class="fa-solid fa-caret-down"></i></div>
                    </div>
                </div>

                <div class="box hidden">
                    <div class="inner">
                        <div class="header">5/6</div>
                        He was tired of these nightmares.  
                        <div class="footer"><i class="fa-solid fa-caret-down"></i></div>
                    </div>
                </div>

                <div class="box hidden">
                    <div class="inner">
                        <div class="header">6/6</div>
                        Gabriel decides to put it all past him for the time being. He gets up from bed and gets ready for school. It's his last year of high school. Only a few more weeks before he graduates.
                        <div class="footer"><i class="fa-solid fa-caret-down"></i></div>
                    </div>
                </div>
            
                <div class="arrowright"><a href="/pages/page2.html" data-direction="next"><img src="https://files.catbox.moe/mosfgm.png"></a></div>
            </div>
            
            <script src="/scripts/main.js"></script>  
            <script>barba.Pjax.start();</script>
            <script>
                barba.Dispatcher.on('transitionCompleted', function(currentStatus, oldStatus, container) {

                var hints = $('.box');
                var i = 0;

                $('.inner').on('click', function(){
                    i = (i + 1) % hints.length;
                    hints.hide().eq(i).show();
                });


                }(barba, jQuery));
            </script>
        </main>
    </div>
   
        
    </body>
</html>

and here is a codepen. https://codepen.io/adilene/pen/ZEmEybM

I was working on something, and I was thinking about if I could use await() to wait until a condition returns true. Possibly something like this:
await(x===true);

I don’t know if you can do this, but it would be very helpful if you could!
Is this possible, or no?
Thank you!

I am developing a project and I would like to hide the recaptcha badge from google. According to what they say in the documentation they mention “You are allowed to hide the badge as long as you include the reCAPTCHA branding visibly in the user flow. Please include the following text”:

This site is protected by reCAPTCHA and the Google
    <a href="https://policies.google.com/privacy">Privacy Policy</a> and
    <a href="https://policies.google.com/terms">Terms of Service</a> apply.

My question is if that falls within that range.

I want to hide the recaptcha badge without breaking their rules.

In the controller of the PATCH route, there may be a redirection needed via:

res.redirect("/path")

However, “/path” is meant to be a POST route.

As it is, it is not working. Is the above possible? If so how?

I am trying to make a Calendar component that allows users to optionally pass in a react component as props, so that the users can decide the styling and behavior of the calendar’s date items.

interface IProps {
    DateItem?: React.ComponentType<{ children: React.ReactNode }>
}

const Calendar = ({
    DateItem
}: IProps) => {

    // ... some code
    const renderCalendarDays = () => {
        const daysInMonth = getDaysInMonth(currentMonth, currentYear);
        const firstDay = getFirstDayOfMonth(currentMonth, currentYear);
        let lastMonth = currentMonth === 0 ? 11 : currentMonth - 1;

        const daysInLastMonth = getDaysInLastMonth(lastMonth);
        const renderedDays = [];

        for (let i = 1; i <= daysInMonth; i++) {
            renderedDays.push(
                <CalendarItem key={`day-${i}`}>
                    {DateItem ? <DateItem children={i} /> : i}
                </CalendarItem>
            );
        }

        return renderedDays;
    }

    // rest of the code...
}

As shown in the for loop, I want to pass the value of i as props to the DateItem component that is passed in. However, when I try to pass a component as props to Calendar, it would throw the following error:

// Type 'Element' is not assignable to type 'ComponentType<{ children: ReactNode; }> | undefined'.ts(2322)
// index.tsx(8, 5): The expected type comes from property 'DateItem' which is declared here on type 'IntrinsicAttributes & IProps

<Calendar DateItem={<SomeComponent />} />
or
<Calendar DateItem={<SomeComponent children={<div>1</div>} />}/>

Technically, I can make it work by passing the component in without the fragment shorthand <></>, but I also need to pass other props to the component that I pass in, so this doesn’t satisfy my needs either.

<Calendar DateItem={SomeComponent}/>

// changing the interface doesnt' help either
interface IProps {
    DateItem?: React.FC<any>
}