DEV Community

Andy Zhao (he/him) for The DEV Team

Posted on with Mac Siri

Notable dev.to Issues Up for Grabs

Hello again! πŸ‘‹ We're back with some more issues that we're looking for some help with. You can find the first post by clicking here. This week, we're highlighting these three issues:

Improve Docker's speed #923

Is your feature request related to a problem? Please describe. Nope

Describe the solution you'd like Currently, it takes about ~3 minutes to load up a homepage from a docker instance on macOS, that's a lot of time 😱. Docker-sync could to be the tool to resolve this issue.

Describe alternatives you've considered Perhaps the culprit of our speed is our poor configuration.

Additional context n/a

Any Docker help would be greatly appreciated. We've had some comments saying that the speed doesn't seem to be an issue on Linux, so it might only be an issue with macOS. Maybe it's a problem you've run into? Feel free to leave a comment on the issue. Even a comment about how our Docker setup runs on your machine would help a bunch!

Feature Request: Night Mode #134

ghost avatar
ghost posted on

Feature Request

It would be awesome if there was a "night mode" which would switch the site's colors to a darker version which would look better under some conditions.

Night mode!!! Halloween is definitely coming up, and a dark theme for dev.to would be awesome. Regardless, I know my night time eyes would appreciate it. Check out the issue and the comments for more info on getting started.

Better UX for screenreader users when tabbing to sign in links (a11y) #969

Is your feature request related to a problem? Please describe. In the call out to sign in using Twitter or Github, a screenreader user just hears "Twitter" or "Github" when tabbing through the document. This could be confusing, thinking the link will take the user to Twitter or Github.

Below is a GIF that shows what a screenreader user hears when tabbing to those links:

A recording of using VoiceOver to tab to sign in links, where a user hears Twitter or Github with no context

Describe the solution you'd like A better experience would be for a screenreader user to hear "Sign in using Twitter" or "Sign in using GitHub".

Describe alternatives you've considered A simple way to accomplish this while keeping that additional text visually hidden would be to wrap it in a span element use a special visually-hidden class:

<a href="/users/auth/twitter?callback_url=https://dev.to/users/auth/twitter/callback" class="cta cta-button" data-no-instant="">
  <span class="visually-hidden">Sign in using</span> TWITTER
</a>
Enter fullscreen mode Exit fullscreen mode
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}
Enter fullscreen mode Exit fullscreen mode

Doing the above, the experience for a screenreader user is better and more accurate:

A recording of using VoiceOver to tab to sign in links, where a user hears 'Sign in using Twitter' or 'Sign in using Github'

This is an awesome issue that came in this week. The issue well written, and the author also suggests a great solution. It's a great low-hanging fruit for accessibility and Hacktoberfest.

That's all for now; we'll have more next week!

Discussion (1)

Collapse
ben profile image
Ben Halpern

Night mode ++ πŸ™‚

I wrote about the implementation here. It may not be super easy to get going with for community folks, so feel free to ping me with questions.

@CanNuhlar super in favor of the color scheme. I think it needs to be refined, but we can do that.

What I care more about is how this will technically work.

We'll have a setting on the user's profile, but we don't render the page from origin based on the user. Basically we load straight from the CDN and then load user data.

So I think this should be inserted at either:

  • The CDN layer on Fastly via custom VCL
  • Service worker layer.

I'd prefer service worker I think because it would be modestly more scalable. It's slightly less clear to me exactly how we'd do it but I'd love to go down that road and figure it out.

This is sort of separate from the concerns at the CSS layer. So we could start with just making this work some how with the CSS and go from there.

I may take a first cut at the basic alpha if I can squeeze it in at some point.