oxidecomputer / design-site

We are looking for designers who code to help build a new user experience for computing!

design.oxide.computer

We are looking for designers who code to help build a new user experience for computing!

Interested? Send a PR with any improvement to this repo on GitHub or apply through our careers page.

Contributing

Running locally

Install hugo.

Run hugo serve to automatically update as you make changes. This will output the url to the browser.

Or you can use make serve.

Deploying

The site is deployed on Vercel and we get previews of changes in PRs.

Prior Art

This idea was based off something a team at Microsoft did as well :)

design-site's Issues

White flash when reloading with dark theme on

When the dark theme loads, the background is white so you just see the 'x' in the logo

To fix, the background of the dark theme should be dark and the light should be light so that the respective logo is fully visible as the rest of the elements animate in

Blog post summaries have truncated urls

I know this isn't technically the correct project but didn't quickly see anywhere else to report this kinda thing. The URLs in the blog post summaries look like they're getting truncated if they're at the very end.

https://oxide.computer/blog/

Really enjoy the podcasts btw!

A11y

This site is a prime example of why relying on Lighthouse or even Axe is insufficient when it comes to a11y.

Try navigating the page via tab. The only focusable element is the div containing the SVG overlay. Even though the links should be added to the tab order, they're not. This means keyboard only users wouldn't be able to select them. It also makes me concerned that some screen readers wouldn't "see" anything on the page other than that SVG. It is always, always, always a good idea to check tab order and, at least, the built in screen readers for Android and iOS manually after finishing a template because the tooling is unreliable.

One potential solution would be to inline the CSS animation inside the SVG itself and set the image as a background. Background-blend-mode could be used to continue to support the theming.

While one could querySelectorAll("a") and set the tabindex to 0 manually, I would be concerned that issues for screen readers would persist. I think it's worth the slight additional effort to eliminate the SVG overlay entirely. Note that this might actually fail to resolve the issue. The other thing that I saw was that the root html tag was getting about 2 dozen classes applied to it, and the problem could be stemming from that somehow.

It's too close to year end/my holiday travels right now, but I offer this in the hopes that someone takes it up and makes this recruitment site accessible to the designers who would be best suited to providing and enhancing a11y support to Oxide in the long run. Cheers and good luck to all.

Time machine is broken

Time travel

The Microsoft site like this had a really cool feature called, Time Travel, where you can go back in time to an earlier change and see how the site evolved. It would be awesome to do this here as well! https://microsoft.github.io/join-dev-design/

Missing Base URL

It seems that hugo doesn't use a base URL when building, which prevents the twitter:image and Time Travel exit button from working, following my changes introduced in e928f0e.

We could rollback that change and hardcode the twitter image, or, we could use VERCEL_URL env var at build!

I do not know what it is the build command used on Vercel right now, but a simple hugo -b $VERCEL_URL should do it.

  -b, --baseURL string         hostname (and path) to the root, e.g. http://spf13.com/

SVG Logo

Hey Jessie!

Do you guys have a SVG logo of Oxide Computer on hand? If not, would you like one? It would be super useful for animating it, or collapsing the light/dark logo into one file and triggering the color change via CSS.

Thanks,

Mike

Animate components

If we are going to keep the loading animations, we should animate all of the components.

Currently, the theme switcher is not animated so it loads with the logo.

Time Travel/Next.js and Pentagram Migration

Hello, Oxide team! I'm Josh, a graduate student at Northwestern studying web development and researching programming languages. Before doing that, I worked as a UI engineer; you can check out my personal website here and a few technical blog posts here. After looking at the source code for this project, I thought of some exciting but significant changes, so I thought I should check to see whether they're welcome before moving too far ahead.

If the goal of this challenge is to submit one small, tasteful patch, then I'd probably focus on cleaning up the time travel feature a bit. Some of the links generated by the existing code seem to point to non-existent places right now, so I'd probably address the comments in timetravel.js and add a few unit tests. In the context of maintaining an existing codebase, these types of adjustments seem like the most appropriate starting point.

However, given complete freedom to let my imagination run wild, I'd love to try refactoring the styles on the site to reflect Pentagram's redesign and switching from Hugo to nextjs. Since Oxide uses React elsewhere, such a change could help unify the frontend toolset if the company continues to maintain this project. We could even potentially use next's build-time hooks to query GitHub's API for pull requests and contributors instead of relying on the flat JSON files committed directly into the project. Implementing some suggestions from Lighthouse along the way for performance, accessibility, and SEO seems like a wise idea, too.

These changes would involve writing a fair amount of code, and I don't want to create a maintenance burden when none needs to exist. I'm happy to scrap these ideas entirely if this challenge is closed.

Thank you for your time and consideration. I hope to hear from you soon.

Loading animations are out of sync now that we've added more elements

Making it a progressive webapp

I ran a google lighthouse audit on this app and it showed a bunch of recommendations for a PWA. Is this something we want to go forward with for this?