Zakum Comments - Answer Overflow

Topics

Zakum

Explore posts from servers

KPCKevin Powell - Community CDCloudflare Developers

CDCloudflare Developers

•Created by lennartzellmer on 10/11/2024 in #pages-help

Build pipeline times out since using sass-embedded

made a minimal repro in svelte configuring cloudflare pages based on adapter (in svelte.config.js): - if using adapter-static output folder should be /build - if using adapter-cloudflare output folder should be /.svelte-kit/cloudflare (default when selecting the sveltekit preset) neither of these work https://github.com/whotookzakum/cf-pages-sass-embedded-bug had to deploy on netlify for now

4 replies

CDCloudflare Developers

•Created by lennartzellmer on 10/11/2024 in #pages-help

Build pipeline times out since using sass-embedded

also running into this issue using SvelteKit

4 replies

KPCKevin Powell - Community

•Created by vanshika on 9/29/2023 in #front-end

Instead of the background color "light blue" , I want to turn it light green for right and red

just adding to what epic said, definitely use the correct HTML elements wherever you can. there are a lot, but it's not only more logical and semantic but also more accessible for people using assistive technology. there are a lot of elements but just memorizing the most commonly used ones is good enough, and remembering that you can find them all on mdn if you need a more niche element. <div> is technically supposed to be a "i got nothing better to put here" fallback-y element so keep that in mind

24 replies

KPCKevin Powell - Community

•Created by Harun on 9/30/2023 in #front-end

What is the most "Semantic" way of adding svg's inside button elements?

that being said this article might be an interesting read on SVG accessibility https://www.smashingmagazine.com/2021/05/accessible-svg-patterns-comparison/

19 replies

KPCKevin Powell - Community

•Created by Harun on 9/30/2023 in #front-end

What is the most "Semantic" way of adding svg's inside button elements?

Definitely the 2nd option, the first one is harder to read through and may be an XSS vulnerability, and I'm not sure if you can even do that?

19 replies

KPCKevin Powell - Community

•Created by Harun on 9/25/2023 in #front-end

How does the input checkbox work if it's hidden?

@Harun

22 replies

KPCKevin Powell - Community

•Created by Harun on 9/25/2023 in #front-end

How does the input checkbox work if it's hidden?

Another issue in the video is using display: none on the input. This is an accessibility concern and may cause problems for users who rely on screen readers. The proper way to "hide" things with CSS while maintaining accessibility features is with the following class.

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.visually-hidden {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

This will ensure that the element is not visible, but still present and usable for people using assistive technologies. Keep in mind you have to add styling for focus and hover states to another element as a result (i.e. the corresponding <label>).

22 replies

KPCKevin Powell - Community

•Created by Harun on 9/25/2023 in #front-end

How does the input checkbox work if it's hidden?

The two ways to use <label>.

<label>
  <input type="checkbox">
  This label toggles the checkbox
</label>

<label>
  <input type="checkbox">
  This label toggles the checkbox
</label>

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">This label toggles the checkbox</label>

<input type="checkbox" id="myCheckbox">
<label for="myCheckbox">This label toggles the checkbox</label>

Label is an inline element so only put other inline elements (not block level elements) inside. Do not put a label inside a label. The video incorrectly puts a <div> (a block-level element) inside the label--this is not semantic HTML according to the spec. Note that depending on the one you choose, your styling options may differ, as firefox still does not support :has().

22 replies

KPCKevin Powell - Community

•Created by Moni on 8/27/2023 in #front-end

White space after image

it will not affect other elements' placement

24 replies

KPCKevin Powell - Community

•Created by Moni on 8/27/2023 in #front-end

White space after image

in other words it is "removed from the flow of the document"

24 replies

KPCKevin Powell - Community

•Created by Moni on 8/27/2023 in #front-end

White space after image

you need more height on the body, the image is position: absolute so it will not affect the body even if you increase its height

24 replies

KPCKevin Powell - Community

•Created by Moni on 8/27/2023 in #front-end

White space after image

ah yeah I mean sometimes that's a useful effect, otherwise position: absolute

24 replies

KPCKevin Powell - Community

•Created by Moni on 8/27/2023 in #front-end

White space after image

I personally use <img> with position: fixed because of some limitations with background-image

24 replies

KPCKevin Powell - Community

•Created by Moni on 8/27/2023 in #front-end

White space after image

I think you're trying to set a background-image that takes up the entire viewport?

24 replies

KPCKevin Powell - Community

•Created by grcode0 on 8/23/2023 in #ui-ux

Design review

16 replies

KPCKevin Powell - Community

•Created by grcode0 on 8/23/2023 in #ui-ux

Design review

i really love the current version with the starfield background, colors, and projects section. nice job!

16 replies

KPCKevin Powell - Community

•Created by DoContra on 8/22/2023 in #ui-ux

Redesign a website tips

No description

57 replies

KPCKevin Powell - Community

•Created by DoContra on 8/22/2023 in #ui-ux

Redesign a website tips

No description

57 replies

KPCKevin Powell - Community

•Created by DoContra on 8/22/2023 in #ui-ux

Redesign a website tips

I know what you mean and from what I can tell you can't (easily) replicate the smooth horizontal scroll that browsers do when you shift + scroll; the simple horizontal scroll solution (without shift) in JS causes an instant snap effect (example scrolling on the maps list on the bottom)[https://bapharia.com/map].

57 replies

KPCKevin Powell - Community

•Created by Brightie on 8/27/2023 in #front-end

Grid issues

i would just follow this guys advice, decide if getting a job is more important or building things you like is more important https://www.youtube.com/watch?v=oC483DTjRXU

58 replies