MagicEmperor Posts - Answer Overflow

MagicEmperor

•Created by MagicEmperor on 4/20/2024 in #front-end

How can I go about implementing this flex layout

I found this amazing portfolio - https://yasio.dev/#work On the first impression i thought it was a grid layout , but by inspecting it(quite literally) I found it was using flex box with different margin values , After a lot of brain storming I still cant figure out how can I dynamically generate this layout. I am assuming this is not hard coded TLDR; The same thing as in the link as it generates the same layout on refresh , i.e the placement of each projects remain the same ------------------------ each time their placement remains the same , i.e if the list of projects is - [...proj1 , ...proj2] the generated layout would place proj1 on x and proj2 on y if the list of projects is - [...proj1 , ...proj2 , ...proj3] the generated layout would place proj1 on x and proj2 on y and proj3 on z so on and so forth ------------------------ your help is much appreciated

1 replies

KPCKevin Powell - Community

•Created by MagicEmperor on 4/12/2024 in #front-end

Framer motion component lags for me

i was creating a custom cursor element and i found this implementation - https://codesandbox.io/p/sandbox/framer-motion-mouse-position-2b4sd?file=%2Fsrc%2FApp.js%3A78%2C11 i copy pasted the same code and when i run it , its not smooth at all and its laggy i am using bun and latest next js , my project is this links's component copy pasted and nothing else and it lags like this

8 replies

KPCKevin Powell - Community

•Created by MagicEmperor on 3/17/2024 in #front-end

Astro : How to import local images in framework components that will work in the build

For normal astro components, I can use import(...) in my <Image/> component ; however, in my use case, I am dynamically rendering content through JSON, and my file paths start from /src/assets/.... I am passing them as they are to my React components. They work just fine in development, but show an "image not found" error in the production build.

export interface Props {
  title: string;
  description: string;
  resource?: string; (this is the file path i.e : /src/assets/default.webp)
  href: string;
  category: string;
}


using them like this 

  <img
              className="w-full h-auto"
              width="1209"
              height="890"
              loading="lazy"
              decoding="async"
              alt=""
              aria-hidden="true"
              src={resource}
            />

export interface Props {
  title: string;
  description: string;
  resource?: string; (this is the file path i.e : /src/assets/default.webp)
  href: string;
  category: string;
}


using them like this 

  <img
              className="w-full h-auto"
              width="1209"
              height="890"
              loading="lazy"
              decoding="async"
              alt=""
              aria-hidden="true"
              src={resource}
            />

Any help is much appreciated , thank you

5 replies

KPCKevin Powell - Community

•Created by MagicEmperor on 2/27/2024 in #front-end

'Jotai' Best practices

I've been exploring Jotai to grasp its capabilities and use cases. I created a basic application for filtering a list and adding and removing items from it. Seeking opinions on whether my implementation aligns with best practices and effectively leverages Jotai's functionalities. Store

export const trainingPhraseAtom = atom("");

export const filterAtom = atom("");

export const trainingPhrasesAtom = atom<trainingPhraseType[]>([]);

export const addTraningPhraseAtom = atom(null, (get, set) => {
  set(
    trainingPhrasesAtom,
    addTrainingPhrase(get(trainingPhrasesAtom), get(trainingPhraseAtom))
  );
  set(trainingPhraseAtom, "");
});

export const filteredTrainingPhaseAtom = atom<trainingPhraseType[]>((get) => {
  return filterTrainingPhase(get(trainingPhrasesAtom), get(filterAtom));
});

export const removeTrainingPhraseAtom = atom(null, (get, set, id: number) => {
  set(trainingPhrasesAtom, deleteTrainingPhrase(get(trainingPhrasesAtom), id));
});

export const trainingPhraseAtom = atom("");

export const filterAtom = atom("");

export const trainingPhrasesAtom = atom<trainingPhraseType[]>([]);

export const addTraningPhraseAtom = atom(null, (get, set) => {
  set(
    trainingPhrasesAtom,
    addTrainingPhrase(get(trainingPhrasesAtom), get(trainingPhraseAtom))
  );
  set(trainingPhraseAtom, "");
});

export const filteredTrainingPhaseAtom = atom<trainingPhraseType[]>((get) => {
  return filterTrainingPhase(get(trainingPhrasesAtom), get(filterAtom));
});

export const removeTrainingPhraseAtom = atom(null, (get, set, id: number) => {
  set(trainingPhrasesAtom, deleteTrainingPhrase(get(trainingPhrasesAtom), id));
});

display stuff

import { removeTrainingPhraseAtom, filteredTrainingPhaseAtom } from "./store";
import { useAtomValue, useSetAtom } from "jotai";

function DisplayTrainingPhase() {
  const trainingPhraseList = useAtomValue(filteredTrainingPhaseAtom);
  const removeTrainingPhrase = useSetAtom(removeTrainingPhraseAtom);
  return (
    <>
      {trainingPhraseList.map((e) => {
        return (
          <div key={e.id}>
            {e.trainingPhrase}
            <button onClick={() => removeTrainingPhrase(e.id)}>delete</button>
          </div>
        );
      })}
    </>
  );
}

import { removeTrainingPhraseAtom, filteredTrainingPhaseAtom } from "./store";
import { useAtomValue, useSetAtom } from "jotai";

function DisplayTrainingPhase() {
  const trainingPhraseList = useAtomValue(filteredTrainingPhaseAtom);
  const removeTrainingPhrase = useSetAtom(removeTrainingPhraseAtom);
  return (
    <>
      {trainingPhraseList.map((e) => {
        return (
          <div key={e.id}>
            {e.trainingPhrase}
            <button onClick={() => removeTrainingPhrase(e.id)}>delete</button>
          </div>
        );
      })}
    </>
  );
}

adding stuff

function AddTrainingPhase() {
  const [trainingPhraseVal, setTrainingPhrase] = useAtom(trainingPhraseAtom);
  const setFilterAtom = useSetAtom(filterAtom);

  const addTrainingPhrase = useSetAtom(addTraningPhraseAtom);
  return ...
}

function AddTrainingPhase() {
  const [trainingPhraseVal, setTrainingPhrase] = useAtom(trainingPhraseAtom);
  const setFilterAtom = useSetAtom(filterAtom);

  const addTrainingPhrase = useSetAtom(addTraningPhraseAtom);
  return ...
}

2 replies

KPCKevin Powell - Community

•Created by MagicEmperor on 11/21/2023 in #front-end

Self Positioning modal

I wanted advice on how should I go about this , should just simply calculate the space anytime an item is hovered with JS and add classes or is there any better CSS only way or any simpler approach

5 replies

KPCKevin Powell - Community

•Created by MagicEmperor on 11/7/2023 in #front-end

Slide-in animation snapping when opening the navigation drawer in mobile view

I am trying to clone the sidebar navigation from this website https://m3.material.io/ , How it is supposed to : In the mobile view , when clicking on a menu item the menu slides off and the navigation drawer is revealed What it does in my solution : In my clone while opening the navigation drawer , it just snaps or disappears and after a little delay the navigation drawer is revealed code pen : https://codepen.io/jn3ck-/pen/bGzqGEV

3 replies

Gaming

Programming