HackerTrans
TopNewTrendsCommentsPastAskShowJobs

enyo

no profile record

Submissions

[untitled]

1 points·by enyo·2 ปีที่แล้ว·0 comments

Show HN: Easy Color Palettes Generator for UI Design

pausly.app
3 points·by enyo·2 ปีที่แล้ว·0 comments

[untitled]

1 points·by enyo·3 ปีที่แล้ว·0 comments

[untitled]

1 points·by enyo·3 ปีที่แล้ว·0 comments

Accessible hamburger buttons without JavaScript

pausly.app
208 points·by enyo·3 ปีที่แล้ว·151 comments

Show HN: Melodle – Guess the melody in 6 tries (Wordle offshoot)

melodle.yesmeno.com
2 points·by enyo·4 ปีที่แล้ว·1 comments

comments

enyo
·2 ปีที่แล้ว·discuss
A short introduction to Swift for web developers. It's not meant to be a learning resource, but highlights some of Swift's features and language decisions that are interesting coming from web development.
enyo
·3 ปีที่แล้ว·discuss
Learn how you can reap the benefits of TypeScript and still write plain JavaScript.
enyo
·3 ปีที่แล้ว·discuss
A short introduction on how to use JSDoc to type your JavaScript, and when it’s useful to use it instead of TypeScript.
enyo
·3 ปีที่แล้ว·discuss
Thanks! Could you please tell me if this is still happening (make sure to reload first) and if so, would you mind sending me the email address you used for signup to [email protected]?
enyo
·3 ปีที่แล้ว·discuss
You didn't actually say anything other than that it's bad and not to use on production. Care to elaborate?
enyo
·3 ปีที่แล้ว·discuss
The use of this symbol in the article is a placeholder. Obviously nobody would actually use this on their website...
enyo
·3 ปีที่แล้ว·discuss
Unfortunately there are still plenty of issues with the details element, especially around accessibility. Read more here: https://cloudfour.com/thinks/a-details-element-as-a-burger-m...

Hopefully this will change soon. I’ll amend the article when this will be the case.
enyo
·3 ปีที่แล้ว·discuss
This would be way too frustrating to me :)
enyo
·3 ปีที่แล้ว·discuss
Mh.. yes I agree. "Expand menu" and “Collapse menu" is probably a better wording.
enyo
·3 ปีที่แล้ว·discuss
Oh you’re right, I forgot to add this in the article + codepen. (It’s how the button on the site itself is implemented and I forgot to integrate it)
enyo
·3 ปีที่แล้ว·discuss
> "but it did not become 'de facto' on small screens decades ago”

To me saying that something becomes something over a few decades doesn’t imply that it has been that way from the beginning. It has become a de facto standard over two decades doesn’t mean that it was a de facto standard two decades ago.

I feel like this is really not important, and I’ll change it to the last decade because it doesn’t matter. It’s definitely true that the adoption was most relevant in the last decade. I remember building hamburger menus over 20 years ago though.

What is more important is your second point that I sort of endorse hamburger buttons as a good UI element choice with this introduction. To me, this introduction was not meant to be controversial in any way. I believe that hamburger buttons are one of the most recognisable UI elements, and I don’t think that companies like Apple would use them without doing their homework.

That being said, it was not my intent to promote them as such. I didn’t do any profound research on the topic, and this article is not meant for user interface designers, but for developers that want or need to implement such a button because it either fits their use case or because the designers made the decision.

I’ll amend the intro to be more careful in the wording.

You came in a bit hot with your initial comment, but thanks for your feedback :)
enyo
·3 ปีที่แล้ว·discuss
I never said that it did.
enyo
·3 ปีที่แล้ว·discuss
> Screen reader users do not need to open or close menus.

Agreed, but you don’t want keyboard accessible menu items available for users that aren’t visually impaired. Offering a “show menu” button to screen readers is not less accessible to them than skipping the navigation section.

If you’re building a page that is only meant to be used by screen readers, then you are absolutely right.

> Meanwhile, non screen reader users are forced to guess what will be behind the ≡ button this time.

The main menu? Which is behind the same ≡ button on most pages on the internet?
enyo
·3 ปีที่แล้ว·discuss
That’s why the anchor gets the role=“button”. Unfortunately you can’t set the target of the page with a button (without JavaScript), that’s why an anchor link is used.
enyo
·3 ปีที่แล้ว·discuss
The icon was designed and introduced in 1981. The popularity dramatically increased in the last decade due to smartphones that’s for sure.

It’s used by Microsoft, Apple, Youtube... the list goes on. I think it’s not too much of a stretch to say that it is ubiquitous and familiar to users.

That being said, it's not the point of the article. There are definitely reasons not to use a hamburger button. But this article helps you build one if you want it.
enyo
·3 ปีที่แล้ว·discuss
Thanks for letting me know! Seems to happen because it’s not a high dpi screen. I’ll get on it.
enyo
·3 ปีที่แล้ว·discuss
That is a terrible user experience for SSR though and will lead to a layout shift every time the page is loaded.

I wouldn’t really call this a CSS “hack” either. There is a checkbox that defines whether the menu is open, and CSS that styles the menu accordingly. I think that this is rather elegant really.

As soon as the :has pseudo class has widespread support, the checkbox can also just live inside the nav element, which removes the awkward general sibling combinator.
enyo
·3 ปีที่แล้ว·discuss
Which image (and which browser)?
enyo
·3 ปีที่แล้ว·discuss
Learn how to create an accessible hamburger button with pure HTML and CSS and why that is important.
enyo
·4 ปีที่แล้ว·discuss
Yup. Built with Svelte & Supabase.