ramtam92 Posts - Answer Overflow

ramtam92

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

:placeholder-shown stopped working on all browsers expect Firefox after vite.js bundles css

As the title states, I have a working solution in Firefox, which isn't working anymore in chromium and webkit browsers. I target textareas pretty simple with textarea:placeholder-shown, which is working great in Firefox. In all other browsers, nothing is rendering. Is that a known issue?

18 replies

KPCKevin Powell - Community

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

Video with source webm not looping in safari

I'm having a video tag used as background video, which is working great in all browsers – except safari. In Safari, it is also playing but not looping. It just stops and stays on the last frame of the video. Strangely, when I remove the webm source tag and therefore show the .mp4, the video is looping. But with the webm included – which I really want regarding file sizes – its not.

<video autoplay muted loop playsinline class="h-full w-full object-cover object-center">
  <source src="/video1.webm" type="video/webm">
  <source src="/video1.mp4" type="video/mp4">
</video>

<video autoplay muted loop playsinline class="h-full w-full object-cover object-center">
  <source src="/video1.webm" type="video/webm">
  <source src="/video1.mp4" type="video/mp4">
</video>

1 replies

KPCKevin Powell - Community

•Created by ramtam92 on 12/27/2023 in #front-end

Question regarding Alpine.js

I need to implement a third party newsletter subscriber form and those docs tell me, that when I want a custom success callback, I would need to implement this:

<script type="text/javascript">
function mySubscribeSuccess( form )
{
    alert( "You are subscribed!" );
    return false;
}
</script>

<script type="text/javascript">
function mySubscribeSuccess( form )
{
    alert( "You are subscribed!" );
    return false;
}
</script>

Know I would like to set my alpine.js object to true: x-data="{ customSubscribed: false }" Is that possible with alpine?

1 replies

KPCKevin Powell - Community

•Created by ramtam92 on 10/16/2023 in #front-end

responsive videos, loaded based on view port width

I'm trying to find the best possible way to add responsive videos to the background of my site. I would have loved to use something like srcsets for the picture element but as far as I see, thats not a thing yet. Are there any css native options to do responsive videos – loading different videos for different view port sizes? or would I need to go down the javascript road for something like that?

5 replies

KPCKevin Powell - Community

•Created by ramtam92 on 1/31/2023 in #front-end

Which is the best slider/gallery library?

Hi y'all! I'm looking for some advice regarding the best slider framework available. Whenever I need to implement a slider like a image gallery or even a content slider, I search the web regarding available options (like swiperjs.com, glidejs.com, splidejs.com, kenwheeler.github.io/slick/, keen-slider.io) and there are so many available that I'm kinda lost deciding and choosing. So I was wondering, which one is your favorite and why? Or do you even build your own?

11 replies

KPCKevin Powell - Community

•Created by ramtam92 on 12/26/2022 in #os-and-tools

Is it possible to ignore html tags in prettier

I really like prettier to format my html files but one thing I don't like is prettier formatting specific tags. For example, I have the following code line:

<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">

<link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png">

where I really don't want prettier to format it to:

<link
    rel="icon"
    type="image/png"
    sizes="16x16"
    href="/favicon/favicon-16x16.png" />

<link
    rel="icon"
    type="image/png"
    sizes="16x16"
    href="/favicon/favicon-16x16.png" />

I know I could do  but then again, I have quite a lot of meta and input tags in my header which I don't want prettier to format so I would copy past the comment many times, which kinda sound stupid. So I was asking myself, is it possible to define a setting in the prettier configuration file to ignore specific html tags like meta or input?

1 replies

KPCKevin Powell - Community

•Created by ramtam92 on 12/9/2022 in #front-end

Seeking help regarding tricky image gallery layout

9 replies

Gaming

Programming