Rägnar O'ock
Rägnar O'ock
PostsComments
KPCKevin Powell - Community
Created by roelof on 3/14/2025 in #front-end
Overlapping css grid problem
(that only does the red, green and content areas, the light grey one is left as an exercise to the reader)
17 replies
KPCKevin Powell - Community
Created by roelof on 3/14/2025 in #front-end
Overlapping css grid problem
When trying to overlap stuff in a grid it's important to remember that when you define a set of rows and columns named <area>-start and <area>-end they will define a virtual area that you can use with grid: area just like any other. With that in mind you also have to remember that you can define both areas and track names with the grid-template or grid shorthands. So you can do something like this : 
grid: 
 [green-start] '[green-start] red [green-ene] red . ' 50px
 [green-end]  'red red .' 20px
  'red red content' 1fr
/ 50px 100px 1fr
grid: 
 [green-start] '[green-start] red [green-ene] red . ' 50px
 [green-end]  'red red .' 20px
  'red red content' 1fr
/ 50px 100px 1fr
17 replies
KPCKevin Powell - Community
Created by Tim Rinkel on 3/2/2025 in #front-end
Is an anchor with changing text in-accessible?
You must simply ask yourself "If I couldn't see my screen could I navigate this interface?", if the answer is "no" then it's not accessible, if yes then you don't know because maybe your color contrast ratio is bad or you override the user's font size, or the pictures are too big and prevent the page from loading on a slow connection. All those are a11y concerns.
7 replies
KPCKevin Powell - Community
Created by Tim Rinkel on 3/2/2025 in #front-end
Is an anchor with changing text in-accessible?
Your button/link doesn't sound like it breaks a11y by changing it's label but rather by having a label that isn't useful without any context (you did say if there was a "click here to access the party" before the link) if all the textual info you have is the button's / label's face text then I would argue it's not accessible regardless of the fact the text changes
7 replies
KPCKevin Powell - Community
Created by Tim Rinkel on 3/2/2025 in #front-end
Is an anchor with changing text in-accessible?
Having the button change label isn't inherently inaccessible, especially if you don't have an aria-live=assertive on the element (I would say try it with aria-live=polite and see (or rather hear) if it sounds too much to you or not, if it is just set it to off so changes in visible text isn't played out by the narrator. There's only one silver bullet in a11y, it is to try to use the thing like someone with assistive technology would. If that means installing NVDA and trying for yourself then so be it (NVDA is a free (and I think open source) narrator software, you can also try with your OS' default narrator.
7 replies
KPCKevin Powell - Community
Created by CDL on 1/24/2025 in #resources
git corruption when trying to add/commit/push - this works for me
rm -rf repo/ git clone repo-url Works wonders too
2 replies
KPCKevin Powell - Community
Created by Jelle on 1/6/2025 in #front-end
Fixed background-gradient on menu items
Can't you also use background-position: inherit to achieve that result ? I have vague memories of having done it that way before. (Can't try it myself right now, I'm not at the computer)
15 replies
KPCKevin Powell - Community
Created by BlueBeka on 1/2/2025 in #front-end
Is there anyway to make overflow in x visible while y is scrollable?
You've posted the answer to your own question. (No) Which leads me to believe that's not exactly what you want to do. What is it you are trying to achieve exactly and what did you try so far? There's a lot of information missing for us to help you correctly, you can check https://discord.com/channels/436251713830125568/1022288836715356180 for help on how to improve your question.
4 replies
KPCKevin Powell - Community
Created by CDL on 8/14/2024 in #front-end
Trying to wrap my head around this example of list rendering in VueJS
There's already a submit button. Buttons are submit by default when in a form
10 replies
KPCKevin Powell - Community
Created by jcayzac on 8/14/2024 in #front-end
What `rel` value for miscellaneous feeds?
Please take a look at https://discord.com/channels/436251713830125568/1022288836715356180
6 replies
KPCKevin Powell - Community
Created by jcayzac on 8/14/2024 in #front-end
What `rel` value for miscellaneous feeds?
You should provide more context. As is it's impossible to help you because it's unclear what you have and what you want to achieve.
6 replies
KPCKevin Powell - Community
Created by CDL on 8/14/2024 in #front-end
Trying to wrap my head around this example of list rendering in VueJS
A v-model is a 2 way binding of the value to the input (change the value the input is updated, change the input the value is ipdated)
10 replies
KPCKevin Powell - Community
Created by CDL on 8/14/2024 in #front-end
Trying to wrap my head around this example of list rendering in VueJS
No. v-model allows you to synchronize an input's value (or a component prop) with a reactive value (ref or computed).
10 replies
KPCKevin Powell - Community
Created by SoulSkrix on 8/14/2024 in #front-end
Trying to use grid over flex-box in my own work, how would you do this?
You should not use grid or flex for this kind of layout because there is : - no structural constraints of size for the elements outside of the length of the text - no constraint from one element to its siblings regarding in-axis sizing (so no need for flex) - no visually apparent grid in the disposition of the elements (so no need for grid)
6 replies
KPCKevin Powell - Community
Created by SoulSkrix on 8/14/2024 in #front-end
Trying to use grid over flex-box in my own work, how would you do this?
The card itself is just a stack of elements, and by default block elements (like headings, paragraphs, and lists) stack vertically. You just need a max with on the card, and maybe some margin on the internal elements but that's it
6 replies
KPCKevin Powell - Community
Created by SoulSkrix on 8/14/2024 in #front-end
Trying to use grid over flex-box in my own work, how would you do this?
Everything else can be done without touching any display prop
6 replies
KPCKevin Powell - Community
Created by SoulSkrix on 8/14/2024 in #front-end
Trying to use grid over flex-box in my own work, how would you do this?
I fail to see where you would need to use either grid of flex for such a layout. The only grid/flex I would use there is to center the main container on both axis
6 replies
KPCKevin Powell - Community
Created by Marie-ChristineD on 8/14/2024 in #front-end
border-radius percentage of what?
And if you want to mimic the "not circle" aspect of percentage based border-radius you can provide 2 values for each corner. One for the width of the radius and one for the height
10 replies
KPCKevin Powell - Community
Created by Nick on 8/10/2024 in #front-end
Accessing multiple HTML ID selectors and changing innerHTML of them.
If you are explicit sure...
14 replies
KPCKevin Powell - Community
Created by Orz on 8/10/2024 in #front-end
Does a TextArea component affect its siblings? Why does this happen (video)
The button in the last one is at the bottom because buttons are inline elements by default so the line up with the bottom of the line of text (e.i. the bottom of the container). If you set them to display: block they should jump to the top (and have their margins change a bit... But that's a detail)
5 replies