loading...

Changelog: Site-wide design changes and a few other goodies

ben profile image Ben Halpern ・2 min read

Whenever a website changes its design, there's bound to be mixed feelings. But we hope that these changes have improved some aspects of the site's usability.

Besides what is clearly visible, some other things of note:

You now get a color generated on your profile if you don't pick a scheme. Plain gray was boring but if you like plain gray, go for it πŸ˜„. This change hasn't fully rolled out to everyone but it should shortly.

Also if you press the key / when you are not focused on an input, you'll jump right to the search bar. As the knowledge base grows, the search will become more and more useful and this shortcut should make it easier. At some point we'll also roll out settings so you can customize your bindings if you don't like the default. We anticipate that as we add more shortcuts like this some folks might like that option.

You'll see that the home page now includes #explainlikeimfive under #discuss on the right sidebar. We'll continue to experiment with where content goes to be raised at the most appropriate time for consumption and discussion.

We have some kinks to work out now that the design is live, and everything is subject to change if you have any suggestions. This is day one of a design direction that brings some more personality and usability to the site, but it may not be fully baked yet.

Thanks so much to Ara Ko for freelancing with our team to create this redesign with us. She's looking for more work, so if you like what we did here, email yo@dev.to and we can put you in touch.

Anyway, thanks for being a great community.

Posted on by:

ben profile

Ben Halpern

@ben

A Canadian software developer who thinks he’s funny. He/Him.

Discussion

markdown guide
 

This was also an opportunity to refactor the CSS and eliminate some duplication. Since we inline the critical path CSS for performance, every bite counts.

The logged in DEV home now delivers in 13.1kb with no render-blocking resources. For internal nav, the page fetches only 5.3kb because we don't need to refetch the layout and some resources.

Also experimenting with some H2 server push. πŸ™‚

 

My data plan would like to thank you

 

We also pre-fetch some resources under the hood which adds a few more KB as you browse the site, but it's all way less than most other sites, and in the future we'll even allow some customization in your settings for how we go about fetching assets/content.

 

I am always SO impressed by the responsiveness of the site--and the people working on it :D--and seriously appreciate how much content there is while not choking the connection or swarming in a million video ads that pop up randomly or hover.

 

It's almost as if the founder of this site thinks the web doesn't have to suck. πŸ˜„

Pfffffffffft, what a ridiculous idea! That's as whacky as implying that actual human build this stuff and not magic tube-forging robot pipelines.

 

TPD is hosted on Heroku, right? How does H2 fare on it?

 

That's all handled via our CDN Fastly

 

I really like the subsections on the side for #discuss and #explainlikeimfive, and especially the tailored buttons for them :)

eta: Is ctrl-f supposed to hop you up to the search bar? I was just trying to find something on the page itself..... :D

 

Yeah, ran we just into the issue too. ctrl-f was supposed to be ignored. But upon further research it seems pretty hard to do that in a bug-free way. So switched to just the / key and modified the above post. I was looking for an excuse to only use one of the keys anyway and this provided it.

 

Thanks for fixing this! Someone was complaining to me today that the site was key-jacking the ctrl+f.

 
 
 

The changes are really awesome! I do have a suggestion. The "Welcome" box on the top-right could be a link to a short text presenting the purpose dev.to for newcomers.

 

Good call. Right now it's just kind of sitting there.

 

a shortcut for jumping right into the search bar, pretty cool 😎

 
 

Nice work Ben! It's great to see a network like this putting so much focus on performance in this day and age. We appreciate it. Has there been any work towards making dev.to accessible? Noticing the outline has been removed which can be problematic for keyboard users.

Keep up the great work!

 

So personally, my vision isn't the absolute best and I find the new background to have very poor contrast with the main elements on a page--making it harder to navigate than most sites. I just pulled open the inspector and changed the background to something darker (a lime green color) and found I preferred it. You mentioned giving people the ability to create custom shortcuts via a setting, it'd be nice to be able to change the background color via a setting. On sites that support it, I choose a dark theme as I find it easier to read.

 

Thanks a lot for the feedback.

 

PLEASE remap the search hot key to something universal across keyboard layouts. We don’t have the slash key on Hungarian keyboards.

 

Great job Ben, web site looks sleek and nice..

 

I was just writing a post about the dev.to new design lol