thethingisback Posts - Answer Overflow

thethingisback

Posts Comments

KPCKevin Powell - Community

•Created by thethingisback on 6/30/2024 in #front-end

Converting .png to .svg 'trace-bitmap', coming out bubbled/soft edges, advice

20 replies

KPCKevin Powell - Community

•Created by thethingisback on 6/28/2024 in #front-end

grid-template-columns, Chrome v. Firefox, Firefox stretching col width, Chrome keeping to content

24 replies

KPCKevin Powell - Community

•Created by thethingisback on 5/23/2024 in #front-end

Rec'd React libraries for fullscreen preview window component?

Looking for recommendations for any react libraries for a preview window component so I don't have to build it myself. I need something that can take an array of car images and return a fullscreen preview with left-right buttons of those images Thanks!

1 replies

KPCKevin Powell - Community

•Created by thethingisback on 5/10/2024 in #front-end

Invoking a route in Link but as a component & with an argument obj to pass to the component

1 replies

KPCKevin Powell - Community

•Created by thethingisback on 5/8/2024 in #front-end

Make form label text wrap around embedded 'checkbox' input, or simulate that somehow?

1 replies

KPCKevin Powell - Community

•Created by thethingisback on 5/6/2024 in #front-end

A more coherent scheme to make my parallax responsive

GH:https://github.com/nnall/hm-frontend-Nick.git I have a 2 - page site in react where, in each of 'page''s directory, 'Home' & 'AboutUs', each has a similarly laid out/schemed 'parallax.css', solely for adjusting my parallax groups inside of the parallax wrapper parent, root element of the component. I'm only using CSS and 'perspective' currently and my components' structure for parallax look like this:

<div className = "parallax_wrapper home_container">
  <div className = "parallax_group">
      <div className = "parallax_layer">centered content box</div>
  </div>
</div>

<div className = "parallax_wrapper home_container">
  <div className = "parallax_group">
      <div className = "parallax_layer">centered content box</div>
  </div>
</div>

The "wrapper" component gets the perspective setting, and then all "group" and "layer" elements get "transform-style: preserve-3d". My question here has to do with my parallax.css code, which is working mobile first on these parallax wrapper containers, and is setting and resetting the heights of the first-child "group" elements, in vh, starting tallest for mobile, and gradually with media-query breakpoints, tapering the heights down to less and less 'vh'. Not all "groups" are the same height, so that also has to be accounted for. Is there a better strategy for this with respect to handling responsiveness so that my "group" elements - scrolling slightly slower than their "top_layer" children- can be more reliably resized when the screen changes, so as to not constantly risk overflow/too much height, etc? I continue to spot breaks in the layout, although I've somewhat got everything scrolling with enough space at this point. I'm just looking for a more reliable approach.

1 replies

KPCKevin Powell - Community

•Created by thethingisback on 4/26/2024 in #front-end

Handling inner text when element is transform: scale()'d, how to make not blurrier when scaled up?

GH:https://github.com/nnall/hm-frontend-Nick.git I have an element in my react return, several really with this scenario, but for now this one in particular:

  <div
      className={`chatbox-container ${showChatbox ? "show" : "hide"} ${
        isFocused ? "focused_container" : ""
      }`}
    >

  <div
      className={`chatbox-container ${showChatbox ? "show" : "hide"} ${
        isFocused ? "focused_container" : ""
      }`}
    >

As you can see I am conditionally assigning classes. focused_container , in my CSS, transform: scale()'s this element slightly larger.

.chatbox {
          border-radius: 10px 10px 0px 0px;
          /* border: 1px solid grey; */
          padding: 1rem;
          height: 300px;
          overflow-y: auto;
          background-color: var(--bodyBG);
          display: flex;
          flex-direction: column;
          gap: 1rem;
}

.chatbox-container.focused_container {
          transform: /* perspective(0px)  */scale(1.029) /* translateZ(0) */;
          backface-visibility: hidden;
          -webkit-font-smoothing: subpixel-antialiased;
          /* perspective: 1px; */
}

.chatbox {
          border-radius: 10px 10px 0px 0px;
          /* border: 1px solid grey; */
          padding: 1rem;
          height: 300px;
          overflow-y: auto;
          background-color: var(--bodyBG);
          display: flex;
          flex-direction: column;
          gap: 1rem;
}

.chatbox-container.focused_container {
          transform: /* perspective(0px)  */scale(1.029) /* translateZ(0) */;
          backface-visibility: hidden;
          -webkit-font-smoothing: subpixel-antialiased;
          /* perspective: 1px; */
}

It's working, but when it scales up, the elements inside of it become blurry, at least on Chrome. Everything looks fine in Firefox. Slightly burry on Safari too. Is there a known way to fix this? You can see I've been messing around with perspective and transform:translateZ(), in addition to filter: contrast(), but none have worked so far.

4 replies

KPCKevin Powell - Community

•Created by thethingisback on 4/26/2024 in #front-end

<a/> in component return being auto-assigned "button" class somehow, overwriting my classNames

9 replies

KPCKevin Powell - Community

•Created by thethingisback on 4/22/2024 in #front-end

Git repo 'rebasing' message in terminal: "Please enter the commit message for your changes"

6 replies

KPCKevin Powell - Community

•Created by thethingisback on 4/16/2024 in #front-end

Menu overlay 'onClick()' & retain scrolling for content underneath (pointer-events?)

2 replies

KPCKevin Powell - Community

•Created by thethingisback on 3/4/2024 in #front-end

<dialog/> CSS ::backdrop settings not being applied to cond'ly rendered dialog

dialog {
    position: fixed;
    border: none;
    border-radius: 5px;
    box-shadow: var(--niceShadow2);
    height: 95%;
    max-height: unset;
    width: 95%;
    max-width: 1200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible !important;
}
dialog[open] {
    animation: myFadeIn .55s ease;
}

/* dialog background color*/
dialog[open]::backdrop {
    background: rgba(0, 137, 57, 0.183);
    backdrop-filter: blur(3px);
}

dialog {
    position: fixed;
    border: none;
    border-radius: 5px;
    box-shadow: var(--niceShadow2);
    height: 95%;
    max-height: unset;
    width: 95%;
    max-width: 1200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: visible !important;
}
dialog[open] {
    animation: myFadeIn .55s ease;
}

/* dialog background color*/
dialog[open]::backdrop {
    background: rgba(0, 137, 57, 0.183);
    backdrop-filter: blur(3px);
}

Attached is my react component which is conditionally rendering the <dialog className = "pick_up_dialog"/> element based on whether a user has a reservation for the current day, according to data being received in an API call , "fetchReservations". Unlike ReserveModal and ProfileModal, which are also <dialog/> elements, but being returned in an imported component, the .pick_up_dialog <dialog/> is getting conditionally rendered directly inside of the PortalHome component I've attached. The transition animation from the dialog{} declaration and other normal CSS settings are being applied to all three dialogs. But the dialog[open]::backdrop{} settings are not being applied to the conditionally rendered .pick_up_dialog. Is there something about conditional rendering that changed the CSS access to an element in React? My CSS is being imported in my App.js: import style from "./components/reserve.css"; When the dialog is open and I inspect it, there is no ::backdrop element rendered in the DOM. What am I not understanding?

16 replies

KPCKevin Powell - Community

•Created by thethingisback on 2/12/2024 in #front-end

Stupid question: how do I view github repo files in Github desktop app?

2 replies

KPCKevin Powell - Community

•Created by thethingisback on 2/9/2024 in #front-end

Base Web /baseui StatefulRangeDatePicker

1 replies

KPCKevin Powell - Community

•Created by thethingisback on 2/6/2024 in #front-end

Base Web baseui/TimePicker tool not working, implemented exactly as docs say?

6 replies

KPCKevin Powell - Community

•Created by thethingisback on 2/3/2024 in #front-end

Vite integration on pre-existing react project.. 404 but dev server running

17 replies

KPCKevin Powell - Community

•Created by thethingisback on 2/1/2024 in #front-end

Outline appearing around svg react-component when transform scaled?

6 replies

KPCKevin Powell - Community

•Created by thethingisback on 1/30/2024 in #front-end

THREE.js BG 'cloud' animation directional lights setting

3 replies

KPCKevin Powell - Community

•Created by thethingisback on 1/25/2024 in #front-end

background-video: using the <video/> tag, how to save performance for large video size?

I currently have a 471.9 MB .mp4 video in my local directory that I want to ultimate use for a background video for a portal landing page. I"m bringing the video into my component like so:

import videoBG from "./video/bgVideo.mp4";
 
return(
<video src={videoBG} autoPlay muted loop></video>
)

import videoBG from "./video/bgVideo.mp4";
 
return(
<video src={videoBG} autoPlay muted loop></video>
)

Does anyone know of any tools I can use to allow me to use the video, but without the browser having to download 471.9MB in order for the page to load? I was thinking maybe a way to remote host a video or something? Any input is appreciated.

37 replies

KPCKevin Powell - Community

•Created by thethingisback on 1/23/2024 in #front-end

React 'state' issue, looking for explanation

8 replies

KPCKevin Powell - Community

•Created by thethingisback on 12/24/2023 in #front-end

Greensock (GSAP) ScrollTrigger - 2 consecutive ScrollTrigger animations?

GH: https://github.com/nnall/GSAP/tree/main/experiments/react-playground/src I have a para that I've applied a 'SplitType' to in order to get the paragraph lines, apply .to() methods to them, and translate them X in my GSAP scrollTrigger animation:

let tl = gsap.timeline();

const my_para = document.querySelector(".reveal-type"); // SELECT PARA
    const text = new SplitType(my_para, { types: "chars, words, lines" });

    const lines = [...text.lines];
    const linesRev = [...lines].reverse();

    // console.log(lines);

    lines.forEach((line, index) => {
      tl.to(
        line,
        {
          x: "-100vw",
          duration: 3,
          // opacity: 1,
        },
        "-=2.5"
      );
    });
    scrollTrigger.create({
      trigger: ".spacer_2",
      start: "45% 100%",
      end: "30% 30%",
      scrub: true,
      markers: true, // for debugging
      animation: tl, // Assign the timeline to ScrollTrigger
    });

let tl = gsap.timeline();

const my_para = document.querySelector(".reveal-type"); // SELECT PARA
    const text = new SplitType(my_para, { types: "chars, words, lines" });

    const lines = [...text.lines];
    const linesRev = [...lines].reverse();

    // console.log(lines);

    lines.forEach((line, index) => {
      tl.to(
        line,
        {
          x: "-100vw",
          duration: 3,
          // opacity: 1,
        },
        "-=2.5"
      );
    });
    scrollTrigger.create({
      trigger: ".spacer_2",
      start: "45% 100%",
      end: "30% 30%",
      scrub: true,
      markers: true, // for debugging
      animation: tl, // Assign the timeline to ScrollTrigger
    });

Each of the paragraph lines come into screen from the right side (translate x) when the user scrolls downward, starting at the top line moving to the bottom, and with a slight stagger thanks to the"-=2.5". I want to have a second scrollTrigger animation to move the lines back out - see my comment..

4 replies

Gaming

Programming