redtypoOooOo
redtypoOooOo
Explore posts from servers
KPCKevin Powell - Community
Created by redtypoOooOo on 8/9/2023 in #ui-ux
pick a project card layout for me
No description
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

> 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

> 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