clevermissfox Comments - Answer Overflow

clevermissfox

Explore posts from servers

KPCKevin Powell - Community CDCloudflare Developers

•Created by JonathanH on 4/28/2025 in #help

Creating Database Plugins in Wordpress

The wordpress install comes with a db , typically MySQL but sometimes MariaDB, and built in way to query REST API. Might think about creating custom post types with Advanced Custom Fields or Jet Engine (or if you know PHP , create your own). If you have an existing spreadsheet with all this info you could connect to it instead.

3 replies

KPCKevin Powell - Community

•Created by lllama on 4/14/2025 in #help

Creating View Transitions that are non-blocking

Yes I remember in the video you posted Bramus had mentioned something about this as well, click events during the transition

5 replies

KPCKevin Powell - Community

•Created by Rägnar O'ock on 4/23/2025 in #help

Time tracker app

Not sure what you mean by "worrying that it sends the Data elsewhere "? Toggl Track is what I use.

18 replies

KPCKevin Powell - Community

•Created by Zach on 4/27/2025 in #help

Can anyone recommend a good free form submission service that emails you from a website contact form

Zapier

5 replies

KPCKevin Powell - Community

•Created by GamersPlane on 4/25/2025 in #help

Swapping in inline form vs disabled/styled input

I too cannot find enough accessibility knowledge esp all compiled into one place. There's a course by Sara Soueidan For free, [Chrome for Developers Leaen Accessibility Course] (https://developers.google.com/profile/badges/playlists/webdev/learn-accessibility) Also just reading through ARIA Authoring Practices Guide (APG)

10 replies

KPCKevin Powell - Community

•Created by clevermissfox on 4/19/2025 in #help

Who has worked on mobile apps ?

I’m really curious how mobile apps and Native styling even works under the hood if it’s not css .

4 replies

KPCKevin Powell - Community

•Created by vince on 4/19/2025 in #help

Am I doing too much on my portfolio?

My project mostly uses an oS as a “skin” so the theme toggle is to toggle bw apple and windows 11 , but haven’t gone too deep in making everything match ; just trying to make everything work 😆

54 replies

KPCKevin Powell - Community

•Created by vince on 4/19/2025 in #help

Am I doing too much on my portfolio?

That’s pretty neat

54 replies

KPCKevin Powell - Community

•Created by vince on 4/19/2025 in #help

Am I doing too much on my portfolio?

i ask because ive spent weeks implementing exactly this.... its still a work in progress but i had never seen it anywhere and thought it was a unique idea.

54 replies

KPCKevin Powell - Community

•Created by vince on 4/19/2025 in #help

Am I doing too much on my portfolio?

Is this a common thing ? Do you have some examples you could link?

54 replies

KPCKevin Powell - Community

•Created by depthark on 4/14/2025 in #help

How to elegantly identify whether a text-truncate has occurred in React?

I don’t think I could be helpful but I’m curious if you can clarify /expand- what’s the next step ? Say you can identify all the components that have or have not experienced truncation ? Then what do you do w that information ?

3 replies

KPCKevin Powell - Community

•Created by clevermissfox on 4/10/2025 in #help

post-css adding spaces after colons?

i dont know anything about CRA - this was a one off project i started apparently using CRA and built on top of instead of starting anew. But it certianly uses a lot of PostCSS packages , or at least has them in the dependancies. i screenshot them further up in the thread .

39 replies

KPCKevin Powell - Community

•Created by clevermissfox on 4/10/2025 in #help

post-css adding spaces after colons?

also it is appearing that cssnano is the problem, not my version of postcss-*

39 replies

KPCKevin Powell - Community

•Created by clevermissfox on 4/10/2025 in #help

post-css adding spaces after colons?

yep:

[data-theme=microsoft]{
 & .utility-bar {

            & :is(.btn-min,.btn-max):is(:hover,:focus-visible) {
                background-color: oklch(22% 0 0);
                background-color: var(--clr-mic-neutral-650)
            }

            & .btn-close:is(:hover,:focus-visible) {
                background-color: #c42c1d;
                background-color: var(--clr-mic-dialog-btn-close)
            }
        }
}

[data-theme=microsoft]{
 & .utility-bar {

            & :is(.btn-min,.btn-max):is(:hover,:focus-visible) {
                background-color: oklch(22% 0 0);
                background-color: var(--clr-mic-neutral-650)
            }

            & .btn-close:is(:hover,:focus-visible) {
                background-color: #c42c1d;
                background-color: var(--clr-mic-dialog-btn-close)
            }
        }
}

so anyone in the future, try changing any element selectors or attribute selectors to classes

39 replies

KPCKevin Powell - Community

•Created by clevermissfox on 4/10/2025 in #help

post-css adding spaces after colons?

next im testing if this:

[data-theme=microsoft] {
  dialog[open] {
    .utility-bar {
       & :is([data-btn-minimize-dialog]: is(:hover,:focus-visible),[data-btn-maximize-dialog]:is(:hover,:focus-visible)) {
                background-color:oklch(22% 0 0);
                background-color: var(--clr-mic-neutral-650)
            }

            & :is([data-btn-close-dialog]: is(:hover,:focus-visible)) {
                background-color:#c42c1d;
                background-color: var(--clr-mic-dialog-btn-close)
            }
    }
  }
}

[data-theme=microsoft] {
  dialog[open] {
    .utility-bar {
       & :is([data-btn-minimize-dialog]: is(:hover,:focus-visible),[data-btn-maximize-dialog]:is(:hover,:focus-visible)) {
                background-color:oklch(22% 0 0);
                background-color: var(--clr-mic-neutral-650)
            }

            & :is([data-btn-close-dialog]: is(:hover,:focus-visible)) {
                background-color:#c42c1d;
                background-color: var(--clr-mic-dialog-btn-close)
            }
    }
  }
}

improves with classes instead of using the data-attr

39 replies

KPCKevin Powell - Community

•Created by clevermissfox on 4/10/2025 in #help

post-css adding spaces after colons?

weirdly i am finding that if i give the elements a class , so far, the two ive tested- the spacing is resolved.

/* originally... */
[popover]:is([id=start-menu-context]):popover-open ul {
border-radius: .25em;
border-radius: var(--br-default);
  &>li: before {
  background-image:linear-gradient(90deg,#cca6d4,#a588ca);
  background-image: linear-gradient(to right,var(--clr-brand-accent),var(--clr-brand-accent-2));
  
  }

  &>li: has(:focus-within,:hover) {
  outline:1px solid -webkit-tap-highlight-color;
    &:before {
    width: 100%
    }
  }

  &>li>* {
  line-height: 1;
  outline: none
  }
}
/* after giving the li's a class of 'start-menu-context-item ' */
popover]:is([id=start-menu-context]):popover-open ul {
border-radius: .25em;
border-radius: var(--br-default);
& .start-menu-context-item:before {
background-image: linear-gradient(90deg,#cca6d4,#a588ca);
background-image: linear-gradient(to right,var(--clr-brand-accent),var(--clr-brand-accent-2));

}
& .start-menu-context-item:has(:focus-within,:hover) {
outline: 1px solid -webkit-tap-highlight-color;
&:before {
width: 100%
}
}

& .start-menu-context-item>* {
line-height: 1;
line-height: var(--lh-1);
outline: none
}
}

/* originally... */
[popover]:is([id=start-menu-context]):popover-open ul {
border-radius: .25em;
border-radius: var(--br-default);
  &>li: before {
  background-image:linear-gradient(90deg,#cca6d4,#a588ca);
  background-image: linear-gradient(to right,var(--clr-brand-accent),var(--clr-brand-accent-2));
  
  }

  &>li: has(:focus-within,:hover) {
  outline:1px solid -webkit-tap-highlight-color;
    &:before {
    width: 100%
    }
  }

  &>li>* {
  line-height: 1;
  outline: none
  }
}
/* after giving the li's a class of 'start-menu-context-item ' */
popover]:is([id=start-menu-context]):popover-open ul {
border-radius: .25em;
border-radius: var(--br-default);
& .start-menu-context-item:before {
background-image: linear-gradient(90deg,#cca6d4,#a588ca);
background-image: linear-gradient(to right,var(--clr-brand-accent),var(--clr-brand-accent-2));

}
& .start-menu-context-item:has(:focus-within,:hover) {
outline: 1px solid -webkit-tap-highlight-color;
&:before {
width: 100%
}
}

& .start-menu-context-item>* {
line-height: 1;
line-height: var(--lh-1);
outline: none
}
}

or this:

/* originally these were the rendered results */
[data-theme=apple] {
  footer: has(.taskbar) {
  bottom:1rem;
 
  }

  footer: has(.taskbar)::-webkit-scrollbar {
  display:none
  }
}

/* added a class.. */
[data-theme=apple] {
& .footer:has(.taskbar) {
        bottom: 1rem;
        
    }

    & .footer:has(.taskbar)::-webkit-scrollbar {
        display: none
    }
}

/* originally these were the rendered results */
[data-theme=apple] {
  footer: has(.taskbar) {
  bottom:1rem;
 
  }

  footer: has(.taskbar)::-webkit-scrollbar {
  display:none
  }
}

/* added a class.. */
[data-theme=apple] {
& .footer:has(.taskbar) {
        bottom: 1rem;
        
    }

    & .footer:has(.taskbar)::-webkit-scrollbar {
        display: none
    }
}

i'm seeing it more with attribute selectors and pseudo elements :popover-open [data-btn], etc. Tried experimenting with :where() and :is() etc. curiouser and curiouser

39 replies

KPCKevin Powell - Community

•Created by clevermissfox on 4/10/2025 in #help

post-css adding spaces after colons?

(cont'd)

/* original style.css- using :has() that renders with a space */ 
[data-theme=apple] {
footer:has(.taskbar) {
    bottom: 1rem;
  }

  footer:has(.taskbar)::-webkit-scrollbar {
    display: none;
  }
}

/* rendered/built main.css- :has() with space */
[data-theme=apple] {
footer: has(.taskbar) {
        bottom:1rem;
    }

    footer: has(.taskbar)::-webkit-scrollbar {
        display:none
    }
}

/* original style.css- using :has() that renders with a space */ 
[data-theme=apple] {
footer:has(.taskbar) {
    bottom: 1rem;
  }

  footer:has(.taskbar)::-webkit-scrollbar {
    display: none;
  }
}

/* rendered/built main.css- :has() with space */
[data-theme=apple] {
footer: has(.taskbar) {
        bottom:1rem;
    }

    footer: has(.taskbar)::-webkit-scrollbar {
        display:none
    }
}

39 replies

KPCKevin Powell - Community

•Created by clevermissfox on 4/10/2025 in #help

post-css adding spaces after colons?

Okay so it looks likek postcss-nested was already being used as part of the default tailwind module so i instaled it seperately and created a postcss-config file. unfortuantely no changes. I've tried rewriting as well as flattening selectors (so they arent nested). Im just not finding a pattern.

/* original style.css example */
[popover]:is([id="start-menu-context"]):popover-open ul {
border-radius: var(--br-default);
 & > li::before {
    content: "";
    position: absolute;
}

/* stylesheet main.css after build */
[popover]:is([id=start-menu-context]):popover-open ul {
    border-radius: .25em;
    border-radius: var(--br-default);
/* space created */
 &>li: before {
    content: "";
    position: absolute;
  }

}

/* original style.css; example with nested pseudo el and no issue in build stylesheet */
  .start-btn {
    background-image: url("/public/assets/icons/apple/icon-apple_logo-white.svg");

    &::before {
      bottom: 0;
      transform: translateY(130%);
    }
  }

/* built/rendered main.css; nested pseudo element with no issue */
.start-btn {
        background-image: url(/static/media/icon-apple_logo-white.017a1517d1c139ab74d4.svg);
        &:before {
            bottom: 0;
            transform: translateY(130%)
        }
    }

/* style.css original using :has() */
dialog[open] {
&:has(.resume-wrapper) {
    background-color: var(--clr-bg-body);
  }

  &:has(iframe[title*="Portfolio Item"]):not(.minimized) {
    height: 100%;
  }
}

/* built/rendered main.css- using :has() with no weird space */
dialog[open] {
&:has(.resume-wrapper) {
        background-color: oklch(0 0 0);
        background-color: var(--clr-bg-body);
        
    }
 &:has(iframe[title*="Portfolio Item"]): not(.minimized) {
        height:100%
    }
}

/* original style.css example */
[popover]:is([id="start-menu-context"]):popover-open ul {
border-radius: var(--br-default);
 & > li::before {
    content: "";
    position: absolute;
}

/* stylesheet main.css after build */
[popover]:is([id=start-menu-context]):popover-open ul {
    border-radius: .25em;
    border-radius: var(--br-default);
/* space created */
 &>li: before {
    content: "";
    position: absolute;
  }

}

/* original style.css; example with nested pseudo el and no issue in build stylesheet */
  .start-btn {
    background-image: url("/public/assets/icons/apple/icon-apple_logo-white.svg");

    &::before {
      bottom: 0;
      transform: translateY(130%);
    }
  }

/* built/rendered main.css; nested pseudo element with no issue */
.start-btn {
        background-image: url(/static/media/icon-apple_logo-white.017a1517d1c139ab74d4.svg);
        &:before {
            bottom: 0;
            transform: translateY(130%)
        }
    }

/* style.css original using :has() */
dialog[open] {
&:has(.resume-wrapper) {
    background-color: var(--clr-bg-body);
  }

  &:has(iframe[title*="Portfolio Item"]):not(.minimized) {
    height: 100%;
  }
}

/* built/rendered main.css- using :has() with no weird space */
dialog[open] {
&:has(.resume-wrapper) {
        background-color: oklch(0 0 0);
        background-color: var(--clr-bg-body);
        
    }
 &:has(iframe[title*="Portfolio Item"]): not(.minimized) {
        height:100%
    }
}

(cont'd)

39 replies

KPCKevin Powell - Community

•Created by MightyNugget on 4/10/2025 in #help

JS Course

Think about what ?

28 replies

KPCKevin Powell - Community

•Created by MightyNugget on 4/10/2025 in #help

JS Course

And idk if you already have a promo code but open the course in an incognito wondow and there should be a banner across the top with a "redeem now" link that will knock the price down to 19.99(at least for my location, price may change dependaning on your country and currency). I think that the course creator still gets paid the same , udemy just doesn't have the huge profit margin.

28 replies

Gaming

Programming