Satya Posts - Answer Overflow

Satya

•Created by Satya on 7/14/2023 in #front-end

Intersection Observer in React

Hi! I'm trying to write a custom hook to get an intersection observer in react. I've been getting this error :

Type 'boolean | MutableRefObject<HTMLElement | null>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
  Type 'false' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.

Type 'boolean | MutableRefObject<HTMLElement | null>' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.
  Type 'false' is not assignable to type 'LegacyRef<HTMLDivElement> | undefined'.

I can't seem to understand what's causing this. Code:

import { useRef, useState, useEffect } from "react";
type Props = {
    options?: {
        root: null;
        rootMargin: string;
        threshold: number;
    };
};
export function useIntersectionObserver({
    options = {
        root: null,
        rootMargin: "-100px",
        threshold: 0,
    },
}: Props) {
    const ref = useRef<HTMLElement | null>(null);
    const [visible, setVisible] = useState<boolean>(false);
    useEffect(() => {
        const observer = new IntersectionObserver((entries, observer) => {
            const [entry] = entries;
            setVisible(entry.isIntersecting);
        }, options);
        if (ref.current) observer.observe(ref?.current);
        const current = ref?.current;
        return () => {
            if (current) observer.unobserve(current);
        };
    }, [ref, options]);
    return [ref, visible];
}

import { useRef, useState, useEffect } from "react";
type Props = {
    options?: {
        root: null;
        rootMargin: string;
        threshold: number;
    };
};
export function useIntersectionObserver({
    options = {
        root: null,
        rootMargin: "-100px",
        threshold: 0,
    },
}: Props) {
    const ref = useRef<HTMLElement | null>(null);
    const [visible, setVisible] = useState<boolean>(false);
    useEffect(() => {
        const observer = new IntersectionObserver((entries, observer) => {
            const [entry] = entries;
            setVisible(entry.isIntersecting);
        }, options);
        if (ref.current) observer.observe(ref?.current);
        const current = ref?.current;
        return () => {
            if (current) observer.unobserve(current);
        };
    }, [ref, options]);
    return [ref, visible];
}

Appreciate any suggestions. Thanks!

8 replies

KPCKevin Powell - Community

•Created by Satya on 7/14/2023 in #front-end

Button Touchscreen Interaction

Hi, when I'm tapping on a button on touchscreen devices I see a square background for a short while. How do I remove that? I've tried adding

outline:none

outline:none

:active :focus

:active :focus

states but that doesnt work. I'm sorry if I didnt explain the issue that well.

11 replies

KPCKevin Powell - Community

•Created by Satya on 7/10/2023 in #back-end

Spotify API get currently playing track

18 replies

KPCKevin Powell - Community

•Created by Satya on 7/10/2023 in #back-end

Spotify API

Hey all! Need a little help fetching the track that I'm currently playing. I was going through the documentation and from what I've understood it says that the access token is valid only for one hour. I was planning to have a little section on a website I'm developing to show a "Now Playing - Spotify" section. How do I go about doing that? Thanks

11 replies

KPCKevin Powell - Community

•Created by Satya on 6/20/2023 in #front-end

Styling sibling elements on hover

Hey all! I've a navbar where I want the sibling nav-items to have a particular css when I hover over a nav-item. For example, if I've 5 nav-items and I hover on the 1st one, the next 4 nav-items should have another css. I'm not able to figure out how to do that. Please help! Here's the code:

<nav id="navbar">
            <div className="nav-item">
                <a href="/">// Home</a>
            </div>
            <div className="nav-item">
                <a href="/#expertise">// Expertise</a>
            </div>
            <div className="nav-item">
                <a href="/#work">// Work</a>
            </div>
            <div className="nav-item">
                <a href="/#experience">// Experience</a>
            </div>
            <div className="nav-item">
                <a href="/#contact">// Contact</a>
            </div>
        </nav>

<nav id="navbar">
            <div className="nav-item">
                <a href="/">// Home</a>
            </div>
            <div className="nav-item">
                <a href="/#expertise">// Expertise</a>
            </div>
            <div className="nav-item">
                <a href="/#work">// Work</a>
            </div>
            <div className="nav-item">
                <a href="/#experience">// Experience</a>
            </div>
            <div className="nav-item">
                <a href="/#contact">// Contact</a>
            </div>
        </nav>

#navbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.75em;
    height: 50px;
    .nav-item {
        a {
            text-decoration: none;
            color: #fff;
            font-weight: 500;
        }
    }
}

#navbar {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1.75em;
    height: 50px;
    .nav-item {
        a {
            text-decoration: none;
            color: #fff;
            font-weight: 500;
        }
    }
}

29 replies

KPCKevin Powell - Community

•Created by Satya on 6/16/2023 in #front-end

Linear Gradients

6 replies

KPCKevin Powell - Community

•Created by Satya on 6/14/2023 in #front-end

CSS Battle Leafy Trail

Hey all! I was trying to solve the Leafy Trail challenge in CSS Battle. I was wondering if we could solve it using only one div and a linear gradient. I'm having a little trouble figuring out how to set the angles in the linear gradient (or if it is even possible). Here's my code:

<div></div>
<style>
  body{
    margin: 0;
    background: #0B2429;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div{
    border: 1px solid white;
    height: 150px;
    width: 250px;
    border-radius: 100px 0;
    background-image: linear-gradient(135deg, #1A4341, #1A4341 40%, #998235, #998235 40%, #F3AC3C)
  }
</style>

<div></div>
<style>
  body{
    margin: 0;
    background: #0B2429;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  div{
    border: 1px solid white;
    height: 150px;
    width: 250px;
    border-radius: 100px 0;
    background-image: linear-gradient(135deg, #1A4341, #1A4341 40%, #998235, #998235 40%, #F3AC3C)
  }
</style>

12 replies

KPCKevin Powell - Community

•Created by Satya on 12/27/2022 in #front-end

Chakra UI import error

2 replies

KPCKevin Powell - Community

•Created by Satya on 12/1/2022 in #front-end

Eval in JS

Why does

eval("076")

eval("076")

return 62?

8 replies

KPCKevin Powell - Community

•Created by Satya on 11/23/2022 in #front-end

Geolocation in React

Hi everyone, I'm trying to get the user's location and then display some weather data but I'm running into some trouble along the way. Code:

const [location, setLocation] = useState("");
    useEffect(() => {
        navigator.geolocation.getCurrentPosition((position) => {
            setLocation(
                "" + position.coords.latitude + "," + position.coords.longitude
            );
            axios.post("/api/hello", { location }).then((response) => console.log(response.data));
        });
    });

const [location, setLocation] = useState("");
    useEffect(() => {
        navigator.geolocation.getCurrentPosition((position) => {
            setLocation(
                "" + position.coords.latitude + "," + position.coords.longitude
            );
            axios.post("/api/hello", { location }).then((response) => console.log(response.data));
        });
    });

The problem is the location is not being set in the early stage and is taking some time, leading to axios posting the data as

location: ''

location: ''

which ends up breaking the code. How do I do this properly?

3 replies

KPCKevin Powell - Community

•Created by Satya on 11/10/2022 in #front-end

React + Redux Course Suggestion

Hi, could someone please suggest some good courses (preferably free) on React covering all fundamentals as well as advanced concepts. Also State management through Context API and Redux. Thanks

2 replies

KPCKevin Powell - Community

•Created by Satya on 11/5/2022 in #back-end

error Microsoft Visual C++ 14.0 or greater is required

I was trying to install Jupyter using pip and it's giving me this error. I've already installed Visual Studio Build Tools 2022 to try fixing this but it didn't work.

building 'psutil._psutil_windows' extension
      error: Microsoft Visual C++ 14.0 or greater is required. Get it with "Microsoft C++ Build Tools": https://visualstudio.microsoft.com/visual-cpp-build-tools/

building 'psutil._psutil_windows' extension
      error: Microsoft Visual C++ 14.0 or greater is required. Get it with "Microsoft C++ Build Tools": https://visualstudio.microsoft.com/visual-cpp-build-tools/

Any suggestions?

6 replies

Gaming

Programming