lko Posts - Answer Overflow

lko

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

Why does the word wrap on firefox but not in chrome?

If you open this link in firefox, the text wraps, why? It doesnt happen on chrome https://play.tailwindcss.com/KBSFCQXRbi

4 replies

KPCKevin Powell - Community

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

What is your favorite static site generator?

I've been on a journey to find the best static site generator because there are so many like hugo, astro, 11ty and more and I cant choose, so I wanted to ask you some opinions about SSGs

4 replies

KPCKevin Powell - Community

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

Why isn't mask-image working

https://codepen.io/Lko3001/pen/QWPJOxa Why isnt this working?

25 replies

KPCKevin Powell - Community

•Created by lko on 4/13/2024 in #front-end

Why background-size doesnt work with only a button?

I simply have this

button {
  border: none;
  padding: 0.5rem 1rem;
  scale: 2;
  border-radius: 900px;
  color: white;
  text-transform: uppercase;
  font-weight: 900;
  background: red;
  background-image: linear-gradient(red, blue, green, pink);
  background-size: 900%;
}

button {
  border: none;
  padding: 0.5rem 1rem;
  scale: 2;
  border-radius: 900px;
  color: white;
  text-transform: uppercase;
  font-weight: 900;
  background: red;
  background-image: linear-gradient(red, blue, green, pink);
  background-size: 900%;
}

But the background-size doesnt wrok and I dont see what's wrong, the browser doesnt complain about anything. I only have this code, I tried it in a code pen and it didnt work

11 replies

KPCKevin Powell - Community

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

Is there a smarter way to do this?

Is there a smarter way to do this? https://codepen.io/Lko3001/pen/zYXRqjo I want the items inside of .item to wrap when there's not enough space, and I want the button to grow when it's wrapped. And also, is there a way to make them all wrap if one does? I think subgrid might help but i'm not sure how to make them wrap I'm trying to achieve everything without media queries if possible

3 replies

KPCKevin Powell - Community

•Created by lko on 3/23/2024 in #front-end

Problem with toast animation (how to make old one slide back?)

2 replies

KPCKevin Powell - Community

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

How do I make the inside of clip-path rounded?

I have this https://codepen.io/Lko3001/pen/ExJNEKw And as you can see the outside is rounded but the inside of the clip-path is not, how do I fix it?

1 replies

KPCKevin Powell - Community

•Created by lko on 3/15/2024 in #front-end

filter: blur() and contrast() together doesnt work

22 replies

KPCKevin Powell - Community

•Created by lko on 3/6/2024 in #front-end

how to prevent last item of flex to grow

section {display:flex; flex-wrap:wrap; gap:1rem}
div {background-color:red; width:0; min-width: 100px; height: 100px; flex-grow: 1}
``

section {display:flex; flex-wrap:wrap; gap:1rem}
div {background-color:red; width:0; min-width: 100px; height: 100px; flex-grow: 1}
``

html <section> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </section> ``` Sorry for the formatting but I'm on my phone. As you can probably see the last element of the flex is stretched out but I want it to be the same size as the other siblings, how can I do that? I cannot set a max width otherwise Flex grow won't work properly and I can't even disable Flex grow on it because I want it to be the same size as other children, not the min-width size. And also, in this case it could happen that there is not 1 but 2 extra children

9 replies

KPCKevin Powell - Community

•Created by lko on 10/29/2023 in #front-end

How to make scrollable columns in flex-grow

How do I make the left column scrollable? Right now it's scrollable but it's overflowing the screen https://play.tailwindcss.com/Hb3zQfdBZZ

5 replies

KPCKevin Powell - Community

•Created by lko on 9/17/2023 in #front-end

How do I recreate this parallax?

5 replies

KPCKevin Powell - Community

•Created by lko on 9/16/2023 in #front-end

How to conditionally import css files in react/next

What's the best way to dynamically import CSS files, such as darktheme.css and lighttheme.css, based on the selected theme, when using next-themes, which allows the theme to be specified as either a CSS variable or a JavaScript variable? I know I could do this:

[data-theme="dark"] body {
  color: white;
  background: black;
}

[data-theme="dark"] body {
  color: white;
  background: black;
}

But I should add [data-theme="dark"] to each line of the file and it's around 500 lines long. Additionally, I might want to switch themes, and replacing files manually is not a good idea. Is there a more efficient and scalable way to handle this?

1 replies

KPCKevin Powell - Community

•Created by lko on 9/10/2023 in #front-end

How do you know if the user is using a Mac?

So I found this code online:

window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey

window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey

The problem is that platform is deprecated, what can I use instead? This is the entire code, basically i'm trying to run a function if the user presses CTRL + S or CMD + S ofc

    if (
      (window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) &&
      e.keyCode == 83
    ) {
      e.preventDefault();
      validate();
    }

    if (
      (window.navigator.platform.match("Mac") ? e.metaKey : e.ctrlKey) &&
      e.keyCode == 83
    ) {
      e.preventDefault();
      validate();
    }

11 replies

KPCKevin Powell - Community

•Created by lko on 9/9/2023 in #front-end

z-index doesn't work

3 replies

KPCKevin Powell - Community

•Created by lko on 9/9/2023 in #front-end

How do I use this library?

I want to try material 3 (https://github.com/material-components/material-web), which is not released yet, so there's not a guide that I can follow to use it (or I just can't find one). Can someone teach me how can I set it up?

4 replies

KPCKevin Powell - Community

•Created by lko on 8/18/2023 in #back-end

What's the best way to get the userId in prisma/AuthJs?

Is there a better way to do this? Because I should make a request everytime just to get the userId. How do you do it? I'd create a state to store it when the user logs in and then use POST and body to then get it in the server. Is that the best way to do it?

export async function POST(request: Request) {
  const session = await getServerSession(authOptions);

  const getUserId = await prisma.user.findUnique({
    where: { email: session!.user!.email! },
  });

  const newCategory = await prisma.todo.create({
    data: {
      pinned: false,
      text: "Hi",
      userId: getUserId!.id!,
    },
  });
  return NextResponse.json({ getUserId, newCategory });
}

export async function POST(request: Request) {
  const session = await getServerSession(authOptions);

  const getUserId = await prisma.user.findUnique({
    where: { email: session!.user!.email! },
  });

  const newCategory = await prisma.todo.create({
    data: {
      pinned: false,
      text: "Hi",
      userId: getUserId!.id!,
    },
  });
  return NextResponse.json({ getUserId, newCategory });
}

1 replies

KPCKevin Powell - Community

•Created by lko on 7/24/2023 in #front-end

How to create this layout

3 replies

KPCKevin Powell - Community

•Created by lko on 7/20/2023 in #front-end

FramerMotion staggerChildren doesnt work

1 replies

KPCKevin Powell - Community

•Created by lko on 3/12/2023 in #front-end

Is it possible to not overflow image in div with flex-grow?

As you can see from the codepen https://codepen.io/Lko3001/pen/bGxLRMX?editors=0100, I created a simple card with no specified height but with a max with and an aspect ratio, I inserted an image (with weird proportions i know) and I want it to take all the available space, but still keeping the card's aspect ratio the same, how can I do that? in the codepen, if you remove the image in the html, you can see the parent div and the image should not be bigger than that. I tried using overflow: hidden but didnt work, any suggestion?

2 replies

KPCKevin Powell - Community

•Created by lko on 3/11/2023 in #front-end

How to mask card glow to image?

I created this hover effect for the card, and now I want to apply the glow to just the image, so that the image has glow and the card and title dont, how can I do that? I tried using mask-image but my browser says it's an unknown property https://codepen.io/Lko3001/pen/VwGyEJr

9 replies

Gaming

Programming