redtypoOooOo Posts - Answer Overflow

redtypoOooOo

Explore posts from servers

RReactiflux KPCKevin Powell - Community

Posts Comments

KPCKevin Powell - Community

•Created by redtypoOooOo on 8/9/2023 in #ui-ux

pick a project card layout for me

33 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 7/31/2023 in #front-end

how to make gsap scroll stop for a sec then scroll next? w pin?

hi there. there are 5 cards. when one is scrolled and finishing its animation, i want it to stay so ppl can read it. what parameter to use? thx!

import { useEffect, useRef, useState } from 'react';
import React, { useLayoutEffect } from 'react';

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);


const ProjectsCard = ({ projectTitle, thumbnail, brief, stacks, stacksInfo, isLast }) => {

    let card_content = useRef();

    useLayoutEffect(() => {
        const ctx = gsap.context((self) => {
            const card_sections = self.selector('div');
            card_sections.forEach((card_section) => {
                gsap.from(card_section, {
                    delay: 0.5,
                    duration: 1,
                    x: -50,
                    scrollTrigger: {
                        trigger: card_section,
                        scrub: true,
                        start: 'bottom bottom',
                        end: 'top 0%',
                        ease: "elastic.out(3, 0.5)"
                    },
                });

            });
        }, card_content); // <- Scope!
        return () => ctx.revert(); // <- Cleanup!
    }, []);

import { useEffect, useRef, useState } from 'react';
import React, { useLayoutEffect } from 'react';

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);


const ProjectsCard = ({ projectTitle, thumbnail, brief, stacks, stacksInfo, isLast }) => {

    let card_content = useRef();

    useLayoutEffect(() => {
        const ctx = gsap.context((self) => {
            const card_sections = self.selector('div');
            card_sections.forEach((card_section) => {
                gsap.from(card_section, {
                    delay: 0.5,
                    duration: 1,
                    x: -50,
                    scrollTrigger: {
                        trigger: card_section,
                        scrub: true,
                        start: 'bottom bottom',
                        end: 'top 0%',
                        ease: "elastic.out(3, 0.5)"
                    },
                });

            });
        }, card_content); // <- Scope!
        return () => ctx.revert(); // <- Cleanup!
    }, []);

1 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 7/25/2023 in #front-end

are these breakpoint good practice for this website?

I am trying to make this website n wonder if the breakpoints below are ideal for this web design? https://olhanorenko.contra.com/ are there any methods to decide breakpoints n setting up container for each sections?

$XXS: 390px;
$XS: 576px;
$S: 768px;
$M: 992px;
$L: 1200px;
$XL: 1440px;

@mixin XS {
    @media (max-width: $XS) {
        @content;
    }
}

@mixin S {
    @media (min-width: $XS) and (max-width:$S) {
        @content;
    }
}

@mixin M {
    @media (min-width: $S) and (max-width:$M) {
        @content;
    }
}

@mixin L {
    @media (min-width: $M) and (max-width:$L) {
        @content;
    }
}

@mixin XL {
    @media (min-width: $L) and (max-width:$XL) {
        @content;
    }
}

$XXS: 390px;
$XS: 576px;
$S: 768px;
$M: 992px;
$L: 1200px;
$XL: 1440px;

@mixin XS {
    @media (max-width: $XS) {
        @content;
    }
}

@mixin S {
    @media (min-width: $XS) and (max-width:$S) {
        @content;
    }
}

@mixin M {
    @media (min-width: $S) and (max-width:$M) {
        @content;
    }
}

@mixin L {
    @media (min-width: $M) and (max-width:$L) {
        @content;
    }
}

@mixin XL {
    @media (min-width: $L) and (max-width:$XL) {
        @content;
    }
}

8 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 7/17/2023 in #front-end

how to make react website responsive?

I have made the main functionality n design of this ecommerce website writing in react and scss. What methods could I use to make it responsive as a beginner? without or with a css library (tailwind or MUI preferred). I have some knowledge abt making it responsive in css n some js. Any methods recommedation? Any tutorials or articals? Thanks! https://github.com/safak/youtube2022/tree/ecommerce/client

3 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 7/13/2023 in #front-end

how to read this object?

async function fetchData() {
        const response = await fetch('http://localhost:1337/api/products/1?populate=*');
        const data = await response.json();
        console.log(data); }

    fetchData();
    const data = fetchData()

async function fetchData() {
        const response = await fetch('http://localhost:1337/api/products/1?populate=*');
        const data = await response.json();
        console.log(data); }

    fetchData();
    const data = fetchData()

I will put the return into img:

<div>
   {/* <img style={{ width: 300 }} src={`http://localhost:1337/uploads/IMG_b34359.PNG`} alt="" /> */ //this works}
     <img style={{ width: 300 }} src={`http://localhost:1337${data.data.attributes.img.data.attributes.url}`} alt="" /> //this has error:Cannot read properties of undefined (reading 'attributes')
        </div>

<div>
   {/* <img style={{ width: 300 }} src={`http://localhost:1337/uploads/IMG_b34359.PNG`} alt="" /> */ //this works}
     <img style={{ width: 300 }} src={`http://localhost:1337${data.data.attributes.img.data.attributes.url}`} alt="" /> //this has error:Cannot read properties of undefined (reading 'attributes')
        </div>

the other way of reading the returned object:

 <img style={{ width: 300 }} src={`http://localhost:1337${data.attributes.img.data.attributes.url}`} alt="" /> 
            {/* error: TypeError: Cannot read properties of undefined (reading 'img') */}

 <img style={{ width: 300 }} src={`http://localhost:1337${data.attributes.img.data.attributes.url}`} alt="" /> 
            {/* error: TypeError: Cannot read properties of undefined (reading 'img') */}

the attached is the returned object or check it in codepen: https://codepen.io/Kiki-Overhere/pen/bGQLwvN

327 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 6/30/2023 in #front-end

how to make this text changing effect

19 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 6/17/2023 in #back-end

strapi get request 404, what's the problem?

complete code is here : https://github.com/safak/youtube2022/tree/ecommerce filtering using type property both have this problem.

GET http://localhost:3000/products?populate=*&[filters][type][$eq]=featured 404 (Not Found)
    dispatchXhrRequest    @    xhr.js:251
xhr    @    xhr.js:49
dispatchRequest    @    dispatchRequest.js:51
request    @    Axios.js:148
Axios.<computed>    @    Axios.js:174
wrap    @    bind.js:5
fetchData    @    useFetch.js:13
(anonymous)    @    useFetch.js:20
commitHookEffectListMount    @    react-dom.development.js:22969
commitPassiveMountOnFiber    @    react-dom.development.js:24702
commitPassiveMountEffects_complete    @    react-dom.development.js:24666
commitPassiveMountEffects_begin    @    react-dom.development.js:24653
commitPassiveMountEffects    @    react-dom.development.js:24641
flushPassiveEffectsImpl    @    react-dom.development.js:26848
flushPassiveEffects    @    react-dom.development.js:26801
commitRootImpl    @    react-dom.development.js:26752
commitRoot    @    react-dom.development.js:26517
performSyncWorkOnRoot    @    react-dom.development.js:25956
flushSyncCallbacks    @    react-dom.development.js:11982
commitRootImpl    @    react-dom.development.js:26776
commitRoot    @    react-dom.development.js:26517
finishConcurrentRender    @    react-dom.development.js:25820
performConcurrentWorkOnRoot    @    react-dom.development.js:25648
workLoop    @    scheduler.development.js:266
flushWork    @    scheduler.development.js:239
performWorkUntilDeadline    @    scheduler.development.js:533

GET http://localhost:3000/products?populate=*&[filters][type][$eq]=featured 404 (Not Found)
    dispatchXhrRequest    @    xhr.js:251
xhr    @    xhr.js:49
dispatchRequest    @    dispatchRequest.js:51
request    @    Axios.js:148
Axios.<computed>    @    Axios.js:174
wrap    @    bind.js:5
fetchData    @    useFetch.js:13
(anonymous)    @    useFetch.js:20
commitHookEffectListMount    @    react-dom.development.js:22969
commitPassiveMountOnFiber    @    react-dom.development.js:24702
commitPassiveMountEffects_complete    @    react-dom.development.js:24666
commitPassiveMountEffects_begin    @    react-dom.development.js:24653
commitPassiveMountEffects    @    react-dom.development.js:24641
flushPassiveEffectsImpl    @    react-dom.development.js:26848
flushPassiveEffects    @    react-dom.development.js:26801
commitRootImpl    @    react-dom.development.js:26752
commitRoot    @    react-dom.development.js:26517
performSyncWorkOnRoot    @    react-dom.development.js:25956
flushSyncCallbacks    @    react-dom.development.js:11982
commitRootImpl    @    react-dom.development.js:26776
commitRoot    @    react-dom.development.js:26517
finishConcurrentRender    @    react-dom.development.js:25820
performConcurrentWorkOnRoot    @    react-dom.development.js:25648
workLoop    @    scheduler.development.js:266
flushWork    @    scheduler.development.js:239
performWorkUntilDeadline    @    scheduler.development.js:533

2 replies

KPCKevin Powell - Community

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

how to read n rewrite package.json re: react-scripts

here is the package.json. I need to upgrade it to react-scripts 5.0.0 but I don see react-scripts, where is it? how I can add this. I am doing this bc failed to fetch data from strapi using axios due to err process not defined according to solutions here :https://stackoverflow.com/questions/70368760/react-uncaught-referenceerror-process-is-not-defined

{
  "name": "vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "overrides": {
    "react-error-overlay": "6.0.9"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "preinstall": "npx npm-force-resolutions"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.2",
    "sort-by": "^1.2.0",
    "react-error-overlay": "6.0.9"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.2"
  }
}

{
  "name": "vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "overrides": {
    "react-error-overlay": "6.0.9"
  },
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "preinstall": "npx npm-force-resolutions"
  },
  "dependencies": {
    "axios": "^1.4.0",
    "localforage": "^1.10.0",
    "match-sorter": "^6.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.11.2",
    "sort-by": "^1.2.0",
    "react-error-overlay": "6.0.9"
  },
  "devDependencies": {
    "@types/react": "^18.0.28",
    "@types/react-dom": "^18.0.11",
    "@vitejs/plugin-react": "^4.0.0",
    "eslint": "^8.38.0",
    "eslint-plugin-react": "^7.32.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.3.4",
    "vite": "^4.3.2"
  }
}

3 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 6/8/2023 in #front-end

how to run this project live locally

https://github.com/safak/youtube2022/tree/ecommerce I have downloaded the files and below are the command I tried. I want it live so I can inspect the website.

@r youtube2022-ecommerce % npm start
npm ERR! Missing script: "start"
npm ERR! 
npm ERR! Did you mean one of these?
npm ERR!     npm star # Mark your favorite packages
npm ERR!     npm stars # View packages marked as favorites
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     
@k youtube2022-ecommerce % yarn start
zsh: command not found: yarn
@k youtube2022-ecommerce % cd client
@k client % npm start

> booking@0.1.0 start
> react-scripts start

sh: react-scripts: command not found
@k client % yarn start
zsh: command not found: yarn

@r youtube2022-ecommerce % npm start
npm ERR! Missing script: "start"
npm ERR! 
npm ERR! Did you mean one of these?
npm ERR!     npm star # Mark your favorite packages
npm ERR!     npm stars # View packages marked as favorites
npm ERR! 
npm ERR! To see a list of scripts, run:
npm ERR!   npm run

npm ERR! A complete log of this run can be found in:
npm ERR!     
@k youtube2022-ecommerce % yarn start
zsh: command not found: yarn
@k youtube2022-ecommerce % cd client
@k client % npm start

> booking@0.1.0 start
> react-scripts start

sh: react-scripts: command not found
@k client % yarn start
zsh: command not found: yarn

6 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 6/5/2023 in #front-end

vite `npm run dev` error: Missing script: "dev"

% npm run dev
npm ERR! Missing script: "dev"

% npm run dev
npm ERR! Missing script: "dev"

in package.json

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },

"scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint src --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },

7 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 5/27/2023 in #ui-ux

where to find good portfolio website templates

2 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 5/24/2023 in #front-end

interactive mirror

2 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 5/10/2023 in #front-end

nav dot indicator query selector seems wrong

To put a dot indicator on the according nav menu when scrolling, how should the

querySelector

querySelector

be? ( i think this is where the problem is? bc the code below is not working and console showed error is included in the link below) plz help thank you in advance https://codepen.io/codedkk/pen/Baqxzjg

17 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 5/3/2023 in #front-end

what is and why use block-scope const in js?

Hi, there. Below is the code example I encountered. It is my first time seeing const declared after a const. What are block-scoped const in js and why use them there? What would be the difference if the const declare globally? Thank you for your attention and help!

/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
      navToggle = document.getElementById('nav-toggle'),
      navClose = document.getElementById('nav-close')

/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
    navToggle.addEventListener('click', () =>{
        navMenu.classList.add('show-menu')
    })
}

/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
    navClose.addEventListener('click', () =>{
        navMenu.classList.remove('show-menu')
    })
}

/*=============== SHOW MENU ===============*/
const navMenu = document.getElementById('nav-menu'),
      navToggle = document.getElementById('nav-toggle'),
      navClose = document.getElementById('nav-close')

/*===== MENU SHOW =====*/
/* Validate if constant exists */
if(navToggle){
    navToggle.addEventListener('click', () =>{
        navMenu.classList.add('show-menu')
    })
}

/*===== MENU HIDDEN =====*/
/* Validate if constant exists */
if(navClose){
    navClose.addEventListener('click', () =>{
        navMenu.classList.remove('show-menu')
    })
}

8 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 3/23/2023 in #front-end

header height

Good day everyone. Some confusion abt this project: https://github.com/bedimcode/responsive-halloween-website/blob/main/index.html

media screen and (min-width: 767px)
.nav {
    height: calc(var(--header-height) + 1.5rem);
}

media screen and (min-width: 767px)
.nav {
    height: calc(var(--header-height) + 1.5rem);
}

why header height is 100px?

var(--header-height)

var(--header-height)

is 3 rem; shouldn't the header be 5rem (80px)? I didn't see top bottom padding or margin. What am I missing? Thanks!

5 replies

Gaming

Programming