Joao Posts - Answer Overflow

Joao

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

Make element sticky relative to parent?

Hi there, I have a <code> element displaying some content with a floating label to copy the text next to it. Sometimes, the content inside gets too long and have set a width limit and allow for horizontal scrolling. The problem is when this happens the floating label does not stick to the right corner of the element in in the way that I hoped. It should be fairly obvious what I mean with an example: https://codepen.io/D10f/pen/RwmpRjN What I'd like to do is make the label stick to the corner even after scrolling horizontally. But I've been at it for a while and I'm not sure how to get it done. Any help is welcome 🙂 Thanks!

3 replies

KPCKevin Powell - Community

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

CSS pattern matching

Hey everyone, I'm curious if there's a way to apply pattern matching when selecting elements using CSS. In particular, I want to target anchor elements that contain a particular word in their href attribute, for example:

a[href="*keyword*"] {}

a[href="*keyword*"] {}

This doesn't work, but the idea is that if the word "keyword" appears in the attribute "href" it would select this element. Is this possible, or is there something equivalent to this?

3 replies

KPCKevin Powell - Community

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

How to detect if device is touchscreen?

Hi, I'm trying to make a component a little more user friendly by applying certain CSS rules based on the user's device. If it's a touch screen I'd like to permanently show some buttons, whereas on a regular computer those buttons would appear only when hovered over with the mouse. Since there are touch screens even for desktop computers these days, I will probably use additional media queries to restrict this based on the window dimensions. But I will worry about that later. For now, I was wondering what's the most effective way of doing this using CSS only. With JavaScript I've used something like this before:

navigator.userAgent.match(
  /(Android|iPhone|iPad|iPod|webOS|Windows Phone|BlackBerry)/i
);

navigator.userAgent.match(
  /(Android|iPhone|iPad|iPod|webOS|Windows Phone|BlackBerry)/i
);

This works fine for the most part but, since I'm only interested in applying some styles, I'd prefer not to mix things if possible. According to MDN there are two media queries that might work for me but I've never used them: any-hover and hover, has anyone used them before and which one would you recommend? Thank you! https://developer.mozilla.org/en-US/docs/Web/CSS/@media

10 replies

KPCKevin Powell - Community

•Created by Joao on 10/31/2023 in #front-end

Animation causing high CPU

Hi, I wanted to include some funky looking blobs on the background of a page using blur filter, similar to how a lot of websites are doing it these days. The problem is that after a short while I notice that CPU usage is climbing for some reason. Here's a pen showing something like what I'm doing at the moment, just a couple of divs with some classes applied to blur it and make it spin: https://codepen.io/D10f/pen/vYbGqbp. I'm using Tailwind for this one, if that makes any difference but I've looked at the output CSS and looks quite straight forward as expected. I'm really confused as to what's causing this, I suspect the issue may be due to the long animation, or maybe a combination of all opacity and blur, even though I specifically used long animation times to make this spinning effect subtle. Any thoughts? Thanks!

16 replies

KPCKevin Powell - Community

•Created by Joao on 10/17/2023 in #front-end

Prevent tab navigation on child elements from a "collapsed" element

Hi, I'm making a container element that holds a list of items. This container can be collapsed or expanded, like an accordion, and I'm achieving this effect by adjusting the max-height property, which hides the elements inside of it visually but are still present in the DOM. Because of this, they are still reachable through tab navigation, but I'd like to avoid those items from being interacted with when the accordion is collapsed. I thought that using tabindex="-1" on the accordion or the list parent would be enough but it seems this attribute does not cascade to the children. Is there an easy way to do this using only HTML/CSS? https://codepen.io/D10f/pen/MWZMOvx Thanks!

2 replies

KPCKevin Powell - Community

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

Create data attribute selector on a SASS loop

Hey, I'm trying to create a selector that relies on a data-theme attribute, and in order to create a bunch of these selectors based on a list of colors I was trying to do something like this:

.wrapper {
    @each $key, $value in $colors {
        &[data-theme="#{$key}"] {
            background-color: $value;
            color: map.get($colors, "text");
        }
    }
}

.wrapper {
    @each $key, $value in $colors {
        &[data-theme="#{$key}"] {
            background-color: $value;
            color: map.get($colors, "text");
        }
    }
}

Unfortunately, the compiled CSS does not have the quotes around the value on that selector:

.wrapper[data-theme=yellow] {
    background-color: #eed49f;
    color: #cad3f5;
}

.wrapper[data-theme=yellow] {
    background-color: #eed49f;
    color: #cad3f5;
}

I tried to use SASS's string module but I still get the same result, even after trying several variations to interpolate the command or store the string in a separate variable. Then, even after hard-coding the value directly to see if it'd works, I still get the same result.

// Test 1:
.wrapper {
    @each $key, $value in $colors {
        &[data-theme=string.quote("#{$key}")] {
            background-color: $value;
            color: map.get($colors, "text");
        }
    }
}

// Test 2:
.wrapper {
    @each $key, $value in $colors {
        &[data-theme="yellow"] {
            background-color: $value;
            color: map.get($colors, "text");
        }
    }
}

// Test 1:
.wrapper {
    @each $key, $value in $colors {
        &[data-theme=string.quote("#{$key}")] {
            background-color: $value;
            color: map.get($colors, "text");
        }
    }
}

// Test 2:
.wrapper {
    @each $key, $value in $colors {
        &[data-theme="yellow"] {
            background-color: $value;
            color: map.get($colors, "text");
        }
    }
}

Currently I'm getting it to work by using a class instead of an attribute so I know the issue is here. Any thoughts? Thanks!

3 replies

KPCKevin Powell - Community

•Created by Joao on 6/22/2023 in #ui-ux

Which icon fits better?

10 replies

KPCKevin Powell - Community

•Created by Joao on 4/25/2023 in #front-end

Adding pseudo-class to elements with JavaScript

Hi, does anyone know of an easy way to add pseudo-class styles to an element created with JavaScript? For example:

const button = document.createElement('button');
button.style.backgroundColor = 'lightblue';
button.style.color = '#333';

// add hover state?

const button = document.createElement('button');
button.style.backgroundColor = 'lightblue';
button.style.color = '#333';

// add hover state?

How can I add a hover state following this same approach? I ran into this situation and I didn't know how to make it work, although I will ultimately use React later on. Still just for prototyping quickly I like using vanilla JS. There seem to be a lot of weird workarounds that I rather not get into.... so if someone knows of an easy way, please share? Thanks! 😄

8 replies

KPCKevin Powell - Community

•Created by Joao on 4/19/2023 in #os-and-tools

Update email address of a series of commits

Hi there, hope you can guys help me with something... I completely reinstalled everything on my machine and got a new fresh setup. This includes git configuration, so when I resumed work on an old project I had to enter my user and email address for all my commits, as expected. Unfortunately I got the email address wrong and now my commits won't appear on the GitHub counter which is a bit of a bummer. Is there a way to overwrite all commits to use a different email address? Git is still one of those things that I only know at the surface level, and I'm still green when it comes to this type of stuff. If it makes a difference, I'm the only one working on this as it's a personal side project so I'm okay with any "drastic" solutions... so long they don't involve erasing the whole commit history 😄 Thanks!

9 replies

KPCKevin Powell - Community

•Created by Joao on 2/2/2023 in #front-end

Prevent click from bubbling to parent

Hi, I have the following structure:

<div>
  Categories
  <a href="/">x</a>
</div>

<div>
  Categories
  <a href="/">x</a>
</div>

Where the ~~button~~ div has an event listener so that it will display a drop-down menu. The anchor tag in this case will redirect to the main page which effectively will remove the category filter that is selected. The problem is clicking on the link triggers the click event on the parent and for a split second the drop-down menu is visible. Is there a way to prevent the click event from bubbling to the parent without using JavaScript? I'm looking for something that is pretty much the opposite of pointer-events: none, causing clicks to never go through this element. Thanks!

16 replies

KPCKevin Powell - Community

•Created by Joao on 1/26/2023 in #front-end

:first-of-type selector behavior question

Hi, I'm trying to make a simple typing game, similar to hangman, where the user types in a word to be guessed. I want to add a visual hint to the user by using :first-of-type so that the next empty slot is highlighted. However this only works with the very first element when all slots are empty, but as the user starts typing the highlighting disappears. Probably easier to understand with a demo: https://codepen.io/D10f/pen/rNrvrzK This demo is already doing what I want, however I had to combine a second selector to make it work beyond the first slot.

.box:empty:first-of-type,
.box:not(:empty) + .box:empty {
  border-color: red;
}

.box:empty:first-of-type,
.box:not(:empty) + .box:empty {
  border-color: red;
}

Ideally and what I originally thought would work, only the first selector is needed. So, is :first-of-type working properly here or ... ? Thanks!

11 replies

KPCKevin Powell - Community

•Created by Joao on 1/19/2023 in #front-end

Find closest match for a given color?

Hi, I just had this idea pop into my mind but I'm not sure how I could approach this problem, and before I go spend a few hours, days... or weeks researching this I wanted to ask around for some pointers. Probably some tool already exists as well but I don't know how to even search for it, although I'm still interested in learning how to build it myself as practice. So, the goal is: provided a valid CSS color, determine the closest it gets to other two color values. For example, say I have this value #eebebe, and I want to find out which of these other two values it approaches the most; #e5c890 or #ef9f76?

14 replies

KPCKevin Powell - Community

•Created by Joao on 11/13/2022 in #front-end

SVG vs Canvas performance

5 replies

KPCKevin Powell - Community

•Created by Joao on 10/19/2022 in #front-end

File size string to number parser?

Hi everyone, I'm looking for a library that can parse a string such as "12.3Mb" or any other unit of measurement of information (b, kb, mb, gb, etc), and returns me the integer amount in bytes for that string. Does anyone know of something like that?

8 replies

KPCKevin Powell - Community

•Created by Joao on 9/23/2022 in #back-end

API layered architecture

Hi, I'm trying to apply the concepts of a layered architecture on a file upload API. Currently I have a folder structure that resembles this:

src
├── api
│   └── files
│       ├── file.controller.ts
│       ├── file.repository.ts
│       ├── file.router.ts
│       └── file.service.ts
└── index.ts

src
├── api
│   └── files
│       ├── file.controller.ts
│       ├── file.repository.ts
│       ├── file.router.ts
│       └── file.service.ts
└── index.ts

Inside file.repository.ts will be all functionality related to talking to the database. However, I intend to save the uploaded files on the server instead of using a 3rd party service for this, mainly for practice purposes. The question then is, where would this functionality (reading from and writing to disk) live? Inside services? Repository? Or should I create a whole new domain (maybe called io or something) just for this? Cheers!

4 replies

Gaming

Programming