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 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

> [email protected] 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

> [email protected] 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

KPCKevin Powell - Community

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

why aspect-ratio needs a display to work?

Hi I want to use aspect-ratio to make a rectangle and then make it a circle; but the <a> is not responding to aspect-ratio in my code here until I put a

display:grid / inline-block

display:grid / inline-block

. https://codepen.io/codedkk/pen/RwYxbKL Why? it is from Kevin's tutorial: https://scrimba.com/learn/spacetravel/the-explore-button-part-1-cof6e4b00a7a0928954d4bda3

2 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 2/27/2023 in #front-end

HSL and class number system

why that number system; the hue, saturation and lightness become larger in the colors, but clr number in the class gets smaller; feel like doing it the opposite just curious

:root {
  --clr-accent-500: hsl(12, 60%, 45%);
  --clr-accent-400: hsl(12, 88%, 59%);
  --clr-accent-300: hsl(12, 88%, 75%);
  --clr-accent-100: hsl(13, 100%, 96%);

:root {
  --clr-accent-500: hsl(12, 60%, 45%);
  --clr-accent-400: hsl(12, 88%, 59%);
  --clr-accent-300: hsl(12, 88%, 75%);
  --clr-accent-100: hsl(13, 100%, 96%);

5 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 2/22/2023 in #front-end

isolation in css: can't the gradient shadow be achieved just by z-index: -1?

3 replies

KPCKevin Powell - Community

•Created by redtypoOooOo on 2/21/2023 in #front-end

Shouldn’t the border radius which is set as “border-radius: 100vmax;”change when viewport changes?

7 replies

KPCKevin Powell - Community

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

how to make flip cards self sized

Hi guys! How to make both height and width of the flip cards self sized? Right now the width is self sized. I want it to have no excessive white part like the one in the middle. https://codepen.io/codedkk/pen/wvxVVrz Original code is from the article in the js pen. I tried .card-front : background-color: transparent; but card back has bg color different from container bg color, so when flipped, the height shows. I tweaked the grid rows but nothing changed... don rly understand how it works.. Thb, i don rly understand how this code come into being after reading the article. 😂 I understand the usual way to make flip cards with absolute position after seeing a video tutorial which shows the order and effects of the code in steps. Any help would be appreciated!

2 replies

Gaming

Programming