13eck
13eck
Explore posts from servers
CC#KPCKevin Powell - Community
PostsComments
KPCKevin Powell - Community
Created by Faker on 11/12/2024 in #front-end
When to use rem and em
-# of course the reality is more complex than that, but for beginners who want hard-and-fast rules it's a good starting point. The ultimate answer is, as always, it depends
15 replies
KPCKevin Powell - Community
Created by Faker on 11/12/2024 in #front-end
When to use rem and em
To answer your question, my rule of thumb for new people is this: * rem is for font size. Use it so you don't run into problems with compounding ems * em should be used for margin, padding, and other things that should change based on the current font size (bigger text needs more room to breathe) * ch should be used for text width (ch is the width of the 0 character in the current font size so it's as close as we have to "one character width") * px should only be used for visual flourishes and not for anything textual or visually necessary. Like image sizes, boarders, boarder radius, outline, etc
15 replies
KPCKevin Powell - Community
Created by Faker on 11/12/2024 in #front-end
When to use rem and em
This little snippet will get you "responsive" font sizes so that the font size will start at 1rem (whatever the user's base font size is, default to 16px) and grow to 2rem based on the smaller of the viewport's width or height. 
html {
  font-size: clamp(1rem, 0.875em + 0.5vmin, 2rem);
}
html {
  font-size: clamp(1rem, 0.875em + 0.5vmin, 2rem);
}
Of course you'll want to do a bit more than just that so it'll work with more than just the base font size.
15 replies
KPCKevin Powell - Community
Created by Faker on 11/12/2024 in #front-end
When to use rem and em
If you use px for font size it overrides even the user's preference, which is super-duper bad for accessibility.
15 replies
KPCKevin Powell - Community
Created by Faker on 11/12/2024 in #front-end
When to use rem and em
rem/em are responsive insofar that they change with the user's preference, as snxxwyy said. But there's nothing inherently "responsive" about them in the sense that they don't automatically change. You need to code that yourself.
15 replies
KPCKevin Powell - Community
Created by ShenZo on 11/9/2024 in #front-end
How to make a fixed position element responsive
It keeps the element where it "should be" regardless of the scrolling offset of the page. Another option would be to use flex/grid with search bar being in the top-most flex/grid cell and the main content of the page being in the bottom flex/grid cell with scroll enabled (and the parent flex/grid container being height: 100%; or similar to get it to stretch the entire height of the viewport).
9 replies
KPCKevin Powell - Community
Created by ShenZo on 11/9/2024 in #front-end
How to make a fixed position element responsive
Per the MDN docs:
The element is positioned according to the normal flow of the document, and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor), including table-related elements, based on the values of top, right, bottom, and left. The offset does not affect the position of any other elements.
9 replies
KPCKevin Powell - Community
Created by ShenZo on 11/9/2024 in #front-end
How to make a fixed position element responsive
In the "Try it" box select the last option and scroll the right side a bit to see how it works
9 replies
KPCKevin Powell - Community
Created by ShenZo on 11/9/2024 in #front-end
How to make a fixed position element responsive
https://developer.mozilla.org/en-US/docs/Web/CSS/position
9 replies
KPCKevin Powell - Community
Created by ShenZo on 11/9/2024 in #front-end
How to make a fixed position element responsive
Have you tried position sticky?
9 replies
KPCKevin Powell - Community
Created by ShenZo on 11/9/2024 in #front-end
How to make a fixed position element responsive
You can't. A fixed position can't be responsive, as it's fixed. Why do you think you need a fixed position on this anyway? Shouldn't you just let it be where the browser puts it?
9 replies
KPCKevin Powell - Community
Created by Faker on 11/7/2024 in #back-end
Learning back-end development with: MongoDB, Express, Node, postman and AJAX
You can check in #resources or start a thread in #discussions. This channel is for code-specific questions, not general advice.
4 replies
KPCKevin Powell - Community
Created by peterpumkineaterr on 10/25/2024 in #front-end
NEED FEEDBACK !! on FONT & Sentence.
This channel is for code-specific questions, what you're asking for is feedback. Feedback questions belong in #showcase with the feedback tag
7 replies
KPCKevin Powell - Community
Created by Lofty! on 10/1/2024 in #front-end
How do you makes "emoji as a letter" accessible?
You have a beautiful, beautiful brain
25 replies
KPCKevin Powell - Community
Created by Lofty! on 10/1/2024 in #front-end
How do you makes "emoji as a letter" accessible?
Made a codepen but on my phone so codepen isn’t logged in so I can’t share the pen
25 replies
KPCKevin Powell - Community
Created by Lofty! on 10/1/2024 in #front-end
How do you makes "emoji as a letter" accessible?
Something like this: 
<p>
  <span class="bulb">I</span><span>dea</span>.
</p>
<p>
  <span class="bulb">I</span><span>dea</span>.
</p>
.bulb {
  visibility: hidden;
}

.bulb + span::before {
  content: "💡";
}
.bulb {
  visibility: hidden;
}

.bulb + span::before {
  content: "💡";
}
25 replies
KPCKevin Powell - Community
Created by Lofty! on 10/1/2024 in #front-end
How do you makes "emoji as a letter" accessible?
-# (Note the lack of space between I and dea)
25 replies
KPCKevin Powell - Community
Created by Lofty! on 10/1/2024 in #front-end
How do you makes "emoji as a letter" accessible?
My initial thought is to have the emoji in a ::before pseudo element so it’s not read by screen readers. Then have a hidden span with the I so it’s not seen by the eyes but a screen reader can read it 
<p><span class=“hidden”>I</span>dea</p>
<p><span class=“hidden”>I</span>dea</p>
25 replies
KPCKevin Powell - Community
Created by NIMA on 9/29/2024 in #back-end
how make sending POST safe !
You can start with the OWASP Top 10 critical issues facing developers. Then move on to their cheatsheets series for more in-depth info about specific topics.
28 replies
KPCKevin Powell - Community
Created by NIMA on 9/29/2024 in #back-end
how make sending POST safe !
But really, this ☝️ If you have specific code you have questions about we can help more then generalities
28 replies