lko
lko
PostsComments
KPCKevin Powell - Community
Created by lko on 11/11/2024 in #front-end
How do you transition a height based on the height of its children?
I have this: https://codepen.io/Lko3001/pen/RwXEBea I don't want any transition on the children, I just want to transition the height of the parent when the content inside of it changes. Is it possible to do it with only CSS? Maybe with some modern CSS stuff? I tried with view transitions but it didn't work, but maybe I wrote something wrong
1 replies
KPCKevin Powell - Community
Created by lko on 11/2/2024 in #front-end
Is it normal for view transitions to still be buggy?
I wanted to understand better how this website was built https://mdn.github.io/dom-examples/view-transitions/mpa/page2.html, so I copied the sourcecode and run it locally, for some reason, somtimes the animation works, other times it doesnt and it just loads the other page as usual. Is it because I'm on linux? On that website I don't get any sort of issues but when I run it locally I do. If you want to try it for youself you can just copy the source code from the website, it's just the 2 html pages and the CSS
3 replies
KPCKevin Powell - Community
Created by lko on 10/12/2024 in #front-end
How to get information when doing promises?
I'm not very familiar with promises, but I have something like this: 
  const plugins = [
    {
      name: "Swiper",
      slug: "swiper",
      urls: [
        "https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js",
        "https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css",
      ],
    },
    {
      name: "Gsap",
      slug: "gsap",
      urls: ["https://cdn.jsdelivr.net/npm/gsap/dist/gsap.min.js"],
    },
    {
      name: "Lenis",
      slug: "lenis",
      urls: ["https://unpkg.com/lenis/dist/lenis.min.js"],
    },
  ];
  const urls = plugins.flatMap((e) => e.urls);
  const promises = urls.map((url) => fetch(url));
  const responses = await Promise.all(promises);
  const results = await Promise.all(
    responses.map((res) => {
      if (res.status === 200) return res.text();
      return "ERROR";
    }),
  );
  console.log(results);
  const plugins = [
    {
      name: "Swiper",
      slug: "swiper",
      urls: [
        "https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.js",
        "https://cdn.jsdelivr.net/npm/swiper/swiper-bundle.min.css",
      ],
    },
    {
      name: "Gsap",
      slug: "gsap",
      urls: ["https://cdn.jsdelivr.net/npm/gsap/dist/gsap.min.js"],
    },
    {
      name: "Lenis",
      slug: "lenis",
      urls: ["https://unpkg.com/lenis/dist/lenis.min.js"],
    },
  ];
  const urls = plugins.flatMap((e) => e.urls);
  const promises = urls.map((url) => fetch(url));
  const responses = await Promise.all(promises);
  const results = await Promise.all(
    responses.map((res) => {
      if (res.status === 200) return res.text();
      return "ERROR";
    }),
  );
  console.log(results);
This works fine and gets all the plugins, the problem is that I don't know which res.text() belongs to who, Ideally I'd get something like: 
const results = [
  {
  text: "...",
  name: "...",
  ...
  }
]
const results = [
  {
  text: "...",
  name: "...",
  ...
  }
]
11 replies
KPCKevin Powell - Community
Created by lko on 10/9/2024 in #front-end
Why do grid gaps get bigger during transition
As you can see here: https://codepen.io/Lko3001/pen/gOVLwVz, when you hover over the card, there's a weird space between the title and the description, it's caused from the grid-template-row but I dont understand why and how to fix it
36 replies
KPCKevin Powell - Community
Created by lko on 7/23/2024 in #front-end
:focus is the same as :focus-visible
How can I make this work? 
<input type="text">
<input type="text">
input:focus {
  background-color: red;
}

input:focus-visible {
  background-color: blue;
}
input:focus {
  background-color: red;
}

input:focus-visible {
  background-color: blue;
}
Basically I want the input to have a blue bg when it's focused by tab, and when it's focused normally, it should be red. Right now, it's always blue due to the order or the styles, how can i fix it?
2 replies
KPCKevin Powell - Community
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?)
No description
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
No description
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?
No description
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
No description
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