Another way is to use the checkbox-and-CSS trick. You add a hidden checkbox next to the element you want to hide, add a label to trigger the checkbox, and then use a + selector to toggle the visibility based on the state of the checkbox. Like this:
IIRC that will mess up screenreaders though. The detail tag is specifically made for this sort of thing and is therefore almost certainly more accessible.
It be more correct to say what grishka said above: "that will mess up screenreaders though"
But if it's more accessible depends on the target user. If you're target are IE users or users with very old browser versions, for one reason or another, more accessible would be to use the CSS toggle trick. But if indeed your target user are users using screenreaders and using recent browsers, then details and summary elements would be more accessible.
A bit anal, but important to consider when talking about accessibility, it's very context sensitive.
Accessibility is specifically about making things accessible to those with disabilities. Unless you are making a joke about the intelligence IE users or those using old browsers, accessibility isn't about maximizing potential reach.
Accessibility is often thought of as just making things accessible to people with disabilities, but it's not just that. Accessibility is mainly about maximizing the reach, not just for people with disabilities but people in any situation.
For example, people who live in South America usually have a lot worse internet connection, and more likely to be on mobile networks, than people in the west. If you're audience is mainly in South America, working on making your application accessible, means making sure your application has low bandwidth usage, can deal with high latency and jitter, and works well for phones.
One only has to look at the definition of the word "Accessibility" to see why you're wrong: "accessibility - the quality of being able to be reached or entered - the quality of being easy to obtain or use - the quality of being easily understood or appreciated".
Not sure where the focus on people with disabilities came from, it's important, but accessibility is much bigger than just that.
> Not sure where the focus on people with disabilities came from
You are right, accessibility _can_ take into account degraded environments, but if you don't know why disabilities are focused on, that suggests to me you are philosophizing on the word, and not addressing actual technical standards that have been put in place. Just google it
"Just Google it" doesn't scream curious conversation exactly.
Your argument was "Accessibility is specifically about making things accessible to those with disabilities" which by no definition of the word, is true. Look it up.
Not sure why I'd have to read the various specifications again when I've already done that. I'm still of the same impression (like most others) that accessibility is much bigger than just making things work for those with disabilities.
"Nodes That Need Layout 3841 of 3987 Layout root#document" seems relevant. So it sounds like the details card is somehow causing a full-page layout for almost every element on the page. Which should be fast, except that every element seems to cause another layout. Or ... something.
Not sure if there's any other details I could give, but let me know if anyone has ideas.
fwiw, it's instantaneous for me on a 2016 laptop running Firefox on Linux w/ Xorg and nVidia. No fans even spin up (and this is an HP, and we all know how much HP fans like to spin.)
So far I haven't come up with any solution. The nested .comment styles seemed not be the problem. Although something in the CSS triggers the slow rendering on Chromium based browsers – not sure yet what.
If any of you have an idea, leave a comment here or in Teddit, appreciated!
EDIT: Oh, forgot to say: Works fine in Firefox, no rendering issues.
Hmm. Not related to the issue you mention, but also on that page, when I click a "Load more comments" link, it takes me to https://teddit.net/r/Bossfight/comments/k6vh5v/bearers_of_th... , a webpage that just says "Cannot GET /r/Bossfight/comments/k6vh5v/bearers_of_the_eternal_duel/genbcos/genr9x6".
On Linux instantaneous in Firefox (78.5.0), takes forever in Chrome (87.0.4280.66) while using 100% of one CPU core/thread (I killed the tab after ~1 minute).
It feels to me like Reddit is only good for hobby or niche interests you might have. The main subreddits and politics are what make Reddit the shittiest. But if you stay away from these it’s ok.
I agree, your experience on Reddit will depend heavily on the subreddits you read.
I'm somewhat active on niche programming topics, and people are usually helpful and respectful.
I like that on Reddit I can stay in my bubble and not worry about the world's every single problem when I just want to relax.
On Twitter, that's impossible. No matter how strictly you curate your feed, at least 1 in every 10 tweets will be something that ruins your mood (politics, drama, bullying).
However, I noticed the tone changed everywhere somewhat. I think I witness the pandemic's toll on people's capacity for empathy by the impulsive rudeness creeping into every niche subreddit I frequent.
Reddit became a shit show with Trump vs Clinton, but now people attack their own for every little sign of life.
We really need a better social network. Twitter, Reddit, HN, Facebook, ... They add little, but break a lot.
FWIW, I've also been noticing this in IRL/person situations:
> I think I witness the pandemic's toll on people's capacity for empathy
There's so many widely varying ways that effects of the pandemic can hit someone pretty bad (financially, mentally, of course physically, etc), and I think that part of the problem is that it's hard to see how real those problems are if you happened to not have suffered those particular hardships.
Personally I found this with isolation through lockdown. People who live with family, a partner or even just housemates seem to not quite understand what happens when the isolation creeps up on you (it creeps). Between the waves, when I could see people again, I could easily tell ones that did know, you could see it in their eyes if they talked about the lockdown period.
It is still quite common on Reddit for users to inject politics into absolutely everything, regardless of the subject. It really is difficult to get away from sometimes.
You are exactly right about the hobby and niche interests. On the other hand, the larger subreddits that represent groups of people (such as a city, sports team, university, etc.) will have that echo chamber effect.
Same here as well. Just a different echo. Like, try to challenge the boys club here and get the elders' disaproval...
The problem is the voting. It's not inherently linked to the content's value to the discourse or even welfare of the collective. Wrong reward metric meets a brain evolved for social regulation in small groups of humans dependant on each other's survival. Like with all problems of modern humanity, we struggle with a novel abundance we created...
Tried this Teddit out, and was suitably impressed. Good job.
It's a shame I no longer visit Reddit, as most popular subs just fall into the echo chambers. I find IRC still pretty good for the technical conversations, and there are the odd old skool forums that are active.
This is why I hang around on HN. Only place I know where I can find other people who agree that today's use of Javascript, 9 times out of 10, amounts to a nusiance.
The show/hide design pattern is annoying, IMO. Should be an accessibility violation; cannot tab through it.
I guess thats why I use a text-only browser. Avoids all the Javscript nonsense, not to mention the next CSS trick du jour.
The irony of complaining about one echo chamber and enjoying living in the 'no javascript' bubble is astounding. Can you use text-only websites for most use cases? Sure. Are people more likely to pay for your product if your website has client-sided interactivity and doesn't look awful? Absolutely.
I really don't get this complain and I've only seen it from developers. Certainly not company owners for pay for server/hosting costs (because they have seen how the insane costs of rendering everything server-side with large user bases). Even common people prefer it the way it is currently. The market has decided.
>So you're asking how to do it without a tool that was specifically designed for that purpose?
Yes, you are correct. This is a hobby project of mine, and one of the goal was to make old.reddit.com like UI without no JS at all. That's what I will do.
>I really don't get the hate for JS these days.
Unnecessary Javascript bloats websites, hogs system resources, enables surveillance, hinders accessibility that’s native to devices and clients, and introduces vulnerabilities.https://nojs.club/
Of course in this case using JS to hide/show comment tree wouldn't really be that bad, but works fairly well without it. Not many have complained.
You can conditionally style elements based on an input checkbox's `checked` state. A label element can also toggle an input checkbox's `checked state`, but contain whatever HTML you want.
Put the two together and you can do interactive elements without JS:
Off the top of my head, so YMMV but principal is all there.
You start getting headaches if you want animate that though (keyframes that animate a max-height from 0 to 9999999px goes some of the way but feels a bit hacky/doesn't give you much control over consistent timing.)
Hehe, I know CSS used to be a lot more basic than it is now, my point was simply that I've been working with CSS for a long time but had somehow missed this nugget.
Which also means that under heavy load, the server just crashes generating templates for that many users instead of just serving JS and rendering on the client-side. There's a reason we do things like this nowadays.
In my experience, this is not much of a problem. Server-side rendering is not that expensive, and can easily serve high volumes of users. After all, it has been used for decades, and is in continued use by most major sites. There's no significant performance difference between rendering HTML and rendering JSON.
Furthermore, there are easy ways to mitigate the cost of rendering on the server side. For example, on a site like reddit, most of the traffic is probably non-logged-in readers hitting the front page, so... cache the front page. Even for logged-in users, the front page listing only could be cached as rendered, since none of it really needs to be live. If liveness was desirable for only certain elements (e.g. voting buttons), it is possible to sprinkle on client-rendered elements.
I remember implementing the comment collapsing thing without JS, you have the "[-]" be a label for a checkbox button, and then you just use CSS to hide the sections for which the checkbox is checked.
I gave up on reddit a couple years back, but this might make me rethink.
With so many things turning to mud, this is a good thing.
What I cannot figure out is how they do the [-] show/hide stuff without javascript?
Even hacker news - which is relatively lightweight - uses javascript for that.
EDIT: ...and I'm back. It's like eating a box of candy for dinner - sugar rush and no nutrition.