clevermissfox Posts - Answer Overflow

Topics

clevermissfox

Explore posts from servers

KPCKevin Powell - Community CDCloudflare Developers

KPCKevin Powell - Community

•Created by clevermissfox on 11/9/2024 in #front-end

Testing workflow

I'm trying to figure out the best workflow for testing devices and browsers- I know it differs from site to site, and project to project but I just wondered if anyone had any tips on how they make it a smoothish process. And I'm not at the scope where I want to pay $20/month for a service like BrowserStack. I have a couple older iphones, a couple older galaxies, MacBook and two windows pcs, an iPad and a Samsung tablet. Different versions of their respective oS's. But i dont have all the browsers on all of them. Since any browser on an iPhone or iPad uses safari engine that cuts down on a few, but testing Safari, Samsung internet, Opera, Chrome, Firefox and Edge (6 browsers) as the bare minimum on say 6-7 devices is lots to do. Then if you catch a bug on one browser and one device then make changes to try to fix it, that bugs out on a browser I've already tested so have to retest, make decisions or find a workaround. Just curious if anyone's found a good rhythm that works for them- like do you test all browsers on all devices, note all the changes, make one change at a time and retest each browser on every device after each change? What about browsers- do you count all chromium as one (like test on Chrome and if it works , you don't feel you need to test on Edge?) The growth gets exponential 😵‍💫

15 replies

KPCKevin Powell - Community

•Created by clevermissfox on 10/12/2024 in #front-end

.visually-hidden creating overflow /horizontal scrollbars on html element?

I have been debugging this for days and couldnt figure out wtf was going on; finally narrowed it down to the position: absolute on my .visually-hidden class? Why on earth is this happening? i use this class all the time! and the same copy and paste class so its not like i just wrote it and ordered it differently or something , (did move position absolute to the top for easy discord access but usually its between overflow: hidden and whitespace: nowrap) https://codepen.io/Miss-Fox/pen/VwoKNOM?editors=0100 EDIT: Also if i hardcode the products, it takes more than three of these before i start getting overflow ~ 800px screen width; curiouser and curiouser

<li class="color-item" style="--_item-color: #F17E9D">
    <button class="selected">
        <span class="visually-hidden">Rose Lipstick: #F17E9D</span>
    </button>
</li>

<li class="color-item" style="--_item-color: #F17E9D">
    <button class="selected">
        <span class="visually-hidden">Rose Lipstick: #F17E9D</span>
    </button>
</li>

36 replies

KPCKevin Powell - Community

•Created by clevermissfox on 10/6/2024 in #os-and-tools

VS Code path auto completion

Hi everyone,
On my old laptop in VS Code I would get autocomplete suggestions when typing in path names like for img src or in css url() for bg img or font etc. However on my new machine I'm not getting that and I have no clue what setting or extension I had setup to enable that. It worked in html, css, js for imports , and for react e.g. img src and imports in tsx, ts, js and jsx file extensions. If anyone knows how to configure to enable this behaviour, I would be very grateful as it was so helpful

25 replies

KPCKevin Powell - Community

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

Gradient Border Animation

I am trying to make a smoothish animation around this border, but cant really use an svg in the markup. Its almost right except at the 0deg and 180deg mark it gets very very small. is there any values i can adjust so that its about the same length all the way around, doenst have to be perfect . Also im putting the pseudo elements on the parent because i had them on the anchor tag which was working until the 'hang" and hang-sink" animations ran on hover, then the z-index stopped keeping the pseudos behind the button and they were instead on top. <- this link shows the behaviour im getting with the pseudo elements on the <a> instead of the wrapper. i would like to be able to put the pseudo elements on the <a> itself and not the parent wrapper so it inherits the animation and the border radius but am not sure how to combat the z-index issue.

40 replies

KPCKevin Powell - Community

•Created by clevermissfox on 9/22/2024 in #back-end

resources for server side auth

I’m struggling to find tutorials or courses that hold your hand and walk you through basics on how to make a request and authenticate/authorize a user- even platform and language specific courses are difficult to find. Preferably using google cloud console with oauth2.0 or service worker in a perfect world Getting more comfortable with the concepts but examples on the actual syntax and steps to do so is what I’m looking for then how to work with the token/refresh token would be a nice follow up. I’m so dense when it comes to backend as a whole , any suggestions or ideas for resources are greatly appreciated ✨

16 replies

KPCKevin Powell - Community

•Created by clevermissfox on 9/16/2024 in #back-end

Google drive API + OAuth 2.0 + Wordpress + Elementor Site w/ ACF

Does anyone have experience setting up a project on cloud console with Google Drive API? I need some clarifications on some of the fields for the oauth 2.0 registration.

39 replies

KPCKevin Powell - Community

•Created by clevermissfox on 8/24/2024 in #resources

hear me out- local library + Udemy

I just found that my local library has a portal of all sorts of online resources including udemy access to all sorts of paid courses just with your library card! Saw a comment from a gentleman across the country who mentioned his local library had udemy course access which prompted me to look into mine and lo and behold ! So worth a few minutes to check it out- the only caveat is it’s under a whole separate service Udemy Business which means a separate account and a separate app but in my case that’s no problem , just made a different account. PS I also just came across Khan access

18 replies

KPCKevin Powell - Community

•Created by clevermissfox on 8/21/2024 in #front-end

grid breaking my brain

No description

18 replies

CDCloudflare Developers

•Created by clevermissfox on 8/20/2024 in #workers-help

Workers not getting access to the env object

No description

4 replies

KPCKevin Powell - Community

•Created by clevermissfox on 8/4/2024 in #ui-ux

is there anything more frustrating 🤬

Then when you have pixel perfect alignment but the glyphs or the shapes of the elements make it look misaligned ?!

4 replies

KPCKevin Powell - Community

•Created by clevermissfox on 8/3/2024 in #front-end

how would you approach this animation?

Specifically the big bubbles with the app icons pushing the smaller bubbles out of the way and then resetting themselves

35 replies

KPCKevin Powell - Community

•Created by clevermissfox on 7/25/2024 in #front-end

em scope in @media and @container

Am I remembering correctly that in an @media query, using ems or rems e.g. @media (min-width: 50rem) or @media (min-width: 50em) is referring the browsers font-size, even if you've changed your html font-size to something like 62.5% , its still using 1rem = 16px and 1em=16px?

:root {font-size: 62.5%; /*dont do this*/}
.parent { font-size: 32px; /*never use px for font-sizes!*/}
@media (min-width: 50rem) { 
  .child {background-color: purple;}
}
@media (min-width: 50em) { 
  .child {border-style: dotted;}
}
/* 1rem = 10px but browsers font-size is still 16px so in this media query 1rem=16px and at 800px and larger, childs bg is purple AND has a dotted border*/

:root {font-size: 62.5%; /*dont do this*/}
.parent { font-size: 32px; /*never use px for font-sizes!*/}
@media (min-width: 50rem) { 
  .child {background-color: purple;}
}
@media (min-width: 50em) { 
  .child {border-style: dotted;}
}
/* 1rem = 10px but browsers font-size is still 16px so in this media query 1rem=16px and at 800px and larger, childs bg is purple AND has a dotted border*/

but within a container query @container(min-width: 50rem) or @container(min-width: 50em) rem is referring to what youve defined as your root font-size (so if you've changed your :root {font-size: 62.5%;} then a container query in rem would be calculating/resolving 1rem=10px. if youve changed the containers font-size .container {font-size: 32px" the container query would be calculating/resolving 1em=32px ?

:root {font-size: 62.5%;}
.parent { container-type: inline-size; font-size: 32px;}
@container (min-width: 50rem) { 
  .child {background-color: purple;}
}
@container (min-width: 50em) { 
  .child {background-color: green;}
}
/* 1rem = 10px ; childs bg is purple at 500px and larger*/
/* 1em = 32px ; childs bg is green at 1600px and larger*/

:root {font-size: 62.5%;}
.parent { container-type: inline-size; font-size: 32px;}
@container (min-width: 50rem) { 
  .child {background-color: purple;}
}
@container (min-width: 50em) { 
  .child {background-color: green;}
}
/* 1rem = 10px ; childs bg is purple at 500px and larger*/
/* 1em = 32px ; childs bg is green at 1600px and larger*/

I do remember a post about the @container spec that 1em looks at the containers font-size but want to confirm: - the @media is not looking at your :root {font-size: ...}, its looking at the browsers root (which can either be 16px or what the user sets as their preferred font size) ✅
- in @container 1rem is looking at what youve defined in your :root {font-size: ...} ✅

18 replies

KPCKevin Powell - Community

•Created by clevermissfox on 7/13/2024 in #front-end

max()

No description

12 replies

KPCKevin Powell - Community

•Created by clevermissfox on 7/11/2024 in #front-end

SOLVED: select element not respecting grid cell- heights gonna height

No description

14 replies

KPCKevin Powell - Community

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

outline on focus-visible is not even?

No description

5 replies

KPCKevin Powell - Community

•Created by clevermissfox on 6/15/2024 in #front-end

Grid help

https://codepen.io/Miss-Fox/pen/wvbpdRd relevant styles in ' @layer help' So i run into this issue fairly often but not always.... I am declaring my columns as the size i want them to be 30ch 3em 55ch respectively. but the min function isdoing its thing saying which is smaller 100% or 30ch. which leads me to wonder, why is my grid exactly the size of the childrens implicit content as a default? i thought it was the flex on the body but even if i take that off , its still the implicit size. How to i make my columns the size i want them to be until they start running out of room? if i give my parent grid .wrap a width of 100%, then the children use the max 1fr and grow to fill the screen.

33 replies

KPCKevin Powell - Community

•Created by clevermissfox on 6/7/2024 in #front-end

not -solved: ClipPath

Problem One: ~~Why doesnt my clip-path on the pseudo element in the top right corner look the same as the hotpink svg with the same path ? the circle cutout isnt in the middle and its squished.~~ https://codepen.io/Miss-Fox/pen/abrwMjq?editors=1100 Problem One Solution had to convert the clip-path to a relative path with this site https://yoksel.github.io/relative-clip-path/ Problem Two: If I declare overflow hidden or clip on the label element , everything breaks?? The clip-path on the pseudo element no longer is applied

9 replies

KPCKevin Powell - Community

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

Theme-Toggle: Filter? BG Blend? Mix-Blend?

Hi everyone. I'm trying to use this theme toggle so that i have the little circle that shows which option is toggled on. Im wondering if there is a way to use blend modes or filters (or masks maybe?) so that only the item that the circle is over has saturation. Doesnt have to be a pseudo element, and the internal icons (the logos) dont have to be bg images. https://codepen.io/Ceecee-Hart/pen/VwObNQe?editors=1100

20 replies

KPCKevin Powell - Community

•Created by clevermissfox on 6/1/2024 in #front-end

component scoped private props

No description

18 replies

KPCKevin Powell - Community

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

html input behaviour

i've been wondering about this for awhile. when your text input starts running out of room the right side of it starts to disappear (as shown in this screen recording; gave the input a bg of hotpink to further illustrate) and its value starts getting cut off. is there a way to stop this behaviour or always make sure its the width of its value? (well besides min-width: npx or something) like does it recognize its input.value as content ? doesnt seem like it or it wouldnt hide itself, it would overflow which would be better.

12 replies