Hi. Im passing your challenges. When I try the demo "1 at a time" I can still scroll through the middle item without stopping. This reproducible on all browsers - Chrome/FF/Safari. I have a trackpad and swipe from left to right side allows me to do this trick.

Any ideas why it's happening?

the smiley emoji is.. fine, but can do better here

thanks Roland!

In both, dark and dim themes, the lightness of card 4 is higher than the lightness of card 3, the lightness of card 3 is higher than the lightness of card 2, the lightness of card 2 is higher than the lightness of card 1.

But in light theme for some reason the lightness of card 2 is higher than the lightness of card 3, the lightness of card 3 is higher than the lightness of card 1, the lightness of card 1 is higher than the lightness of card 4.

Why?

We can also add something like

.menu-3d .button-set-3d > li:is(:hover, :focus-visible):not(:active) {
  --menu-3d-distance: 3vmax;
}

.menu-3d .button-set-3d > li button:not(:active) {
  transition-timing-function: var(--menu-3d-bounce-ease);
  transition-duration: 0.4s;
}

to reduce glitch when button popus up and automatically loses focus)
When we move the mouse relatively slowly.

Mostly relates to top most and bottom most buttons)

Hey,

I wondered if the inconsistent use of logical properties is a bug or intentional? If it's intentional I would love to see an added comment about the why.

F.e.:

The two links in README for theme-switch are broken.

The first broken link is currently pointing to: https://preset-env.cssdb.org/

You might want to point that to this page: https://preset-env.netlify.app/

The second link is currently pointing to: https://github.com/vitejs/vite/tree/main/packages/create-app/template-vanilla

It appears broken even in the vitejs repo ¯\_(ツ)_/¯

You might want to point that to this page: https://github.com/vitejs/vite/tree/main/packages/create-vite

After watching this great video

I was curious to understand how we can introduce HTML5 microdata into the Demo HTML.

@argyleink Have you thought about that? Do you accept PRs?

easy one to fix, but def needs done.

https://twitter.com/overflowhidden/status/1450379581542830083?t=G_4PqQS85StkvCkCcZXxVg&s=03

I like a lot the use of new CSS future features, but i think (personal opinion) that in some example they are use too heavy, for example in the split button css https://github.com/argyleink/gui-challenges/blob/main/split-buttons/split-button.css i'm experience a big fatigue to read the code ..... for example the use of long & chain remember me the pyramid of doom, or custom var of a custom var chain can be daunting to explore .... I'm thinking are aspects to thinking of with the new CSS stardars down the road !

• social for this repo
• social img for each post
• social template (and/or is use in each post)

:where(table thead th:first-child) {
border-top-left-radius: var(--nice-inner-radius);
}
Last child also

It should be set only on first row in header (someone can have more then one row)

Hi,

I wanted to ask, why did you include an /favicon.ico fallback in your svg-favicon challenge. Is it because Safari does not support SVG or is there another reason?

If my browserlist excludes Safari, Desktop App, would it be OK to drop the favicon.ico? What do you think?

thank you

Hi Adam!
Very much enjoying the YouTube videos, they're so well done. I was wondering if I could integrate some of your CSS in an Open-Source project of mine, but I didn't find a license for the code, which AFAIK means you have the full copyright to the code and no one else can use it. If that's the case you want this code to be, that's fine by me, but I was curious anyway.

root homepage should iterate and list out projects for easy linking

Maybe I am overseeing something but the line referenced above is referencing dragging which is declared below this line. Since it is not hoisted it must be undefined and should be fixed somehow.

Mohammed Ali Agha commented the change is understood but not needed as they've already adjusted

Im looking at the color-scheme setup i noticed some classes seem to be missing. Forking the this project and check the css i noticed some class are missing.

see below

When i checked the css from the example and compare this. Look how much is different,

I see the part for the base of the divs is added, but its incorrect, this only works in scss if im correct

regarding: https://web.dev/building-a-dialog-component/

it's mentioned that the footer, header and article elements are semantic containers - but there's little explanation as to why they're there, or the impact they'll have for people using screen readers.

In reality, these don't serve much purpose in the context of the dialog - header/footer should generally be treated as generic in these cases - though not consistently. So these may also be exposed as banner/contentinfo landmarks, which adds verbosity with little gain. Similar to the article element which will be exposed as an unnamed article container, which at worse requires someone have to perform additional navigational steps to reach the inner content (for instance, if using VO navigation keys). At best, similar to the header/footer elements, just adds extra verbosity to this dialog.

Similarly, the use of the menu element invalid here. The menu element is another type of list element - specifically referenced in the spec as being similar to ul. As such, it expects li elements as its direct children, but you've just put buttons in there. This is "fine" for the most part, in that some browsers/AT mitigate against this error by not exposing the list semantics and thus treating this no differently than div > button. But not NVDA, as one example, where when used with Chrome/Edge it informs me that i've entered a list, but as there are no list items i can't navigate by them. Since it doesn't appear that you want to visually expose this as a list - particularly since the rendered demo even uses two separate instances of menu > buttons, it probably makes more sense to just turn these into divs as well.

Snippet of the rendered markup I grabbed using dev tools:

<footer>
  <menu>
    <button type="reset" value="clear">Clear</button>
  </menu>
  <menu>
    <button autofocus="" type="button" onclick="this.closest('dialog').close('cancel')">Cancel</button>
    <button type="submit" value="confirm">Confirm</button>
  </menu>
</footer>

If you did want this to be exposed as a list, seems reasonable to have a single menu, and then li's containing the 3 buttons. That too may be a bit more chatty than someone actually needs, but it'd be valid markup then and not have inconsistent exposure to AT.

currently just a github banner. could be a new footer or just a couple floating action buttons.

https://twitter.com/KonstantinRouda/status/1552675389063008257?t=UKG87WDXij45ev1aqfoNdA&s=03

see #84

needs some branding and content

https://twitter.com/KonstantinRouda/status/1473668440670060545?t=7lKwyJASF8ZuOf2bFPu8rw&s=19

focus on the nav of links and if the arrows are used, shift between the tabs.
could also add roving-ux so state is saved?

shoutout to Rob Levin for the idea

https://twitter.com/KonstantinRouda/status/1448360842051915780?s=20

Would love to get your take on how we could implement this with TailwindCSS!

does not close since the back history work was put in place.

should build and deploy each project directory with predictable nice urls

hey psst, it's me again, I did a thing. https://unifyned.com/colors.html

When using keyboard navigation to tab to the <a> elements in the demo (the first eight instances), the content of the tooltip is not conveyed to VoiceOver.

Tested on MacOS 12.6.1 using Safari 16.1 with VoiceOver enabled.

I really like your Settings example and the article that goes with it. Is there any chance you could update it and also try and make it touch-friendly?

I tested it on my iPhone, and the handles are very difficult to tap - one has to be very precise when trying to grab them as the touch area is the size of a handle. The same goes for checkboxes - you can tap on the text next to them but not within the area around them. Also, when you tap (either on the handle or the checkbox), the hover shadow doesn't go away.

Thank you!

Hi !

For content on the side of the screen there is the possibility that the tooltip is partially outside of the window.

What about making sure the tooltip is always fully visible?

(Thanks for this series it's really great!)

In your tabs example I've tried to make it suitable for an element in a larger body, not something absolutely position in a body without overflow. So I had to disable scrolling to the anchor and I would like to know if this is a "good idea"?

tabnav.addEventListener('click', e => {
    if (e.target.nodeName !== "A") return
    e.preventDefault()

    history.pushState({}, '', e.target.href)
    setActiveTab(e.target)
    tabsection.scrollLeft = document
            .querySelector(e.target.attributes.href.value)
            .offsetLeft 
})

Also had to remove the scrollToView() line and I had to round this number:

const i = Math.round( tabsection.scrollLeft / tabsection.clientWidth )

Dialog height in safari defaults to 'fit-content'. Fixed it with an hardcode

dialog {
  height: min-content;
}

Any known complications by doing this?

PS: really nice dialog tutorial btw

Transitions don't work, need to create keyframes

Hi. I tried to implement the stories code from you challenge.
The initial stories implementation has a bug when we mix up the scroll and tap movement through the stories.

Example - tap till the end of the stories, than scroll back with mouse scroll then try to tap forward - nothing works.

i've implemented the solution to improve the gesture mix in react.
If you are accepting PRs I will adapt it to vanilla js code

/* eslint-disable react/style-prop-object */
import { useCallback, useEffect, useRef, useState } from "react";
import "./stories.css";

const storiesBreakpoints = {};

function Stories() {
  const storiesRef = useRef(null);

  const storiesMedian = useCallback(
    () => storiesRef.current.offsetLeft + storiesRef.current.clientWidth / 2,
    [storiesRef]
  );

  const [currentStory, setCurrentStory] = useState(null);

  useEffect(() => {
    for (let i = 0; i < storiesRef.current.children.length; i++) {
      storiesBreakpoints[
        storiesRef.current.children[i].offsetLeft -
          storiesRef.current.offsetLeft
      ] = i;
    }
  }, []);

  useEffect(() => {
    setCurrentStory(storiesRef.current.firstElementChild.lastElementChild);
  }, []);

  const navigateStories = useCallback(
    (direction) => {
      if (currentStory === null) {
        return;
      }

      let lastItemInUserStory;
      let nextUserStory;

      if (direction === "next") {
        lastItemInUserStory = currentStory.parentNode.firstElementChild;
        nextUserStory =
          currentStory.previousElementSibling ||
          currentStory.parentElement.nextElementSibling?.lastElementChild;
      } else if (direction === "prev") {
        lastItemInUserStory = currentStory.parentNode.lastElementChild;

        nextUserStory =
          currentStory.nextElementSibling ||
          currentStory.parentElement.previousElementSibling?.firstElementChild;
      }

      if (lastItemInUserStory === currentStory && nextUserStory) {
        nextUserStory.scrollIntoView({
          behavior: "smooth",
        });
      } else if (nextUserStory) {
        (direction === "prev" ? nextUserStory : currentStory).classList.toggle(
          "seen"
        );
      }

      if (nextUserStory) {
        setCurrentStory(nextUserStory);
      }
    },
    [currentStory]
  );

  const storiesClick = useCallback(
    (e) => {
      if (e.target.nodeName !== "ARTICLE") {
        return;
      }

      navigateStories(e.clientX > storiesMedian() ? "next" : "prev");
    },
    [navigateStories, storiesMedian]
  );

  return (
    <>
      <div
        ref={storiesRef}
        className="stories"
        onClick={storiesClick}
        onScroll={(e) => {
          const currentUserIndex =
            storiesBreakpoints[e.target.scrollLeft] ?? null;

          let currentStory = null;

          if (currentUserIndex != null) {
            const userStories = Array.from(
              storiesRef.current.children[currentUserIndex]?.children
            );

            currentStory =
              userStories.findLast((e) => !e.classList.contains("seen")) ??
              null;
          }

          setCurrentStory(currentStory);
        }}
      >
        <section className="user">
          <article
            className="story story1"
            style={{ "--bg": "url(https://picsum.photos/480/840)" }}
          ></article>
          <article
            className="story story2"
            style={{ "--bg": "url(https://picsum.photos/480/841)" }}
          ></article>
        </section>
        <section className="user">
          <article
            className="story story3"
            style={{ "--bg": "url(https://picsum.photos/481/840)" }}
          ></article>
        </section>
        <section className="user">
          <article
            className="story story4"
            style={{ "--bg": "url(https://picsum.photos/481/841)" }}
          ></article>
        </section>
        <section className="user">
          <article
            className="story story5"
            style={{ "--bg": "url(https://picsum.photos/482/840)" }}
          ></article>
          <article
            className="story story6"
            style={{ "--bg": "url(https://picsum.photos/482/843)" }}
          ></article>
          <article
            className="story story7"
            style={{ "--bg": "url(https://picsum.photos/482/844)" }}
          ></article>
        </section>
      </div>
    </>
  );
}

export default Stories;

just making this issue per what i mentioned on twitter, where i noticed that when using VO+Safari (latest release) i could escape the modal dialog and access one of the buttons in the primary doc.

this may have something to do with the modification of the display property of the dialog, or something to do with the JS, as taking the same exact markup without the extra scripting/styling, I cannot recreate the issue at all.

Might be worth adding a note about how modifying the default behaviors of dialog - modal or not - would require testing to ensure things don't break - particularly for a11y.

https://twitter.com/KonstantinRouda/status/1552669030510649345?s=20&t=sYY7KNCVkhUm3ZKppKY8Lw

The dragEnd() function, triggered by pointerup, needs to make sure the switch is in an allowed position. Currently it is possible to drag the switch, then without releasing the finger drag outside of the switch so that the switch is in an "in-between" visual state, and then release the finger.

I had watched the youtube video about the color-scheme setup and really dig it.

I wanted to look at it locally and get a CORS warning? not sure why that is though?

Access to script at 'file:///C:/Users/XXXXXX/Downloads/GUI%20challenges/gui-challenges-main/color-schemes/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.
index.html:13 GET file:///C:/Users/XXXXXX/Downloads/GUI%20challenges/gui-challenges-main/color-schemes/index.js net::ERR_FAILED