TL;DR You may have started noticing more updates in the UI recently. And we have just updated the header!
We've been working pretty hard on building new awesome features and improvements. Some of them are meant to be invisible yet super helpful: feed improvements or upgrading some of our infra. But we've also made some changes that affected visuals.
Frontend Codebase
Like in many projects, the front-end part of a codebase is... well... not ideal. We have tons of CSS files, lots of spaghetti code, duplicated styles, and much, much, more...
It's a classic scenario: the feature or view needs to be built. The Dev or Designer decides to write super short and simple front-end code to ship a feature fast. And 2000 lines of code later you just can't go back :)
Taking a more holistic approach is actually what we've been trying to do. We've started building our own Design System. It includes not only design guidelines, but also front-end documentation of how to use the styles and components.
Overall, this is our approach (I will write more about our Design System in the future):
- We now have real components and views built in SCSS (well, just a few of them, but that's a good start!).
- We also have utility-first classes (TailwindCSS - does that ring a bell?) ready to be used anywhere in the markup.
- At the same time 95% of our code is legacy code, not following any rules or guidelines. We will be slowly updating that alongside releasing new style.
Which is a good segue to...
New header
One of the very first elements that we've decided to update is our header. You may notice it looks slightly different than couple days ago (if not, hit the hard refresh... If still nothing, I could have broken something and we had to roll it back :D). It's just a refresh, not complete redesign or anything. But we hope you'll like it! There's much more coming and this header update is just a teaser.
Latest comments (29)
I don't see the changes yet, but I think it is visually appealing to the sight! Well done...
The contact area for opening the header is reallly small. You've got a few pixels to scroll through, and it collapses if you hover over the bell icon. Is there any way to make the contact area bigger so you have more space for the cursor to reach it? I'm finding myself having to try multiple times to open it 😞
Yea, I'll take a look if we can improve it a little. In the meantime you can also click on the avatar which should make the dropdown visible too until you click somewhere else. It's not a fix of course but maybe it will help you a lttle.
Thanks for the quick response Pawel! Ahhhh! I literally didn't even think to click it.
That's useful — just thought I'd give you a heads up and some feedback from a user perspective. Really good job though, it looks slick and good luck with the refactoring!
Another option would be to debounce the scroll off event to give you a second's grace.
Clean design!
I like it! Small change, but much better
Overall I really like the new toolbar design, feels clean and the icons are really neat.
The only things which I'm not yet a big fan yet, but of course that's personal, is the color "red" for the notifications. The first times I received some I was like "what? there is an emergency?". To me "red = error, problem, emergency". But the good point is that I notice the notifications all the time now and also not everybody see the colors the same way, so I gonna become used to it of course 😉.
Again great job!
Yea, to be honest I'm not 100% sold on red for notifications :) We're still evaluating whether or not it makes sense...
As you said - it does its job pretty well since it supposed to steal user's attention :) But on the other hand it's not emergency, which red color usually indicates. We'll see how it performs and come back to this a bit later to evaluate the decision.
Yes, that also came in my mind very first. Commented in another thread. Blue was better for me :/
I knew this button looked different! :)
I saw that design system coming😁
Yeah, the UI has been looking more polished! But also the UX has been improved too, things just feel snappy.
My favorite part about the website is that it's fast to scroll through people's replies (have you ever tried clicking on nested replies on medium? that's my biggest frustration on that website...every nested reply is a new page redirect, it's near impossible to follow conversations there)
Looks great, nice work team. 👍
Great work team! For some reason I am unable to visit the site in Safari, it just infinitely hangs. Cookie issue, perhaps, new with Apple’s updates?
Uh oh, can you file an issue?
Done. Thanks.