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.
Oldest comments (29)
Woo!! One hard refresh away to a cleaner design ✨
Much cleaner, love it!
It's much cleaner, great work!!
Very nice! Utility-first classes sound very interesting and I am curious how it will work in markup, I am a fan of Tailwind.
Very nice ! Good job!
Edit : OOoh alerts so cool!
It looks much cleaner! Idk, if that's just me, the messages icon looks more like an emoji.
Looks nice & sleek :)
Love the simplicity.
I was working on an article when I saw the notification for a new post, then I clicked it and it seemed to be that the header just disappeared until I took a second look and realized it was still there. Then I taught for another second that maybe the CSS files did not download completely
I realized this was not an error after I read the section in the article that the header has indeed been redesigned then I took a second look and it was only then it did occur to me that the header was fine after all.
When I realized this I said to myself that the interface is becoming whitish and certain elements are almost indistinguishable from each other unlike before when I could easily tell stuff apart. When it comes to the new header redesign, the only thing that stops it from blending with the rest of the page is the border at the bottom.
At this point, there was only one thing I was thinking of — contrast. I launched aXe Firefox accessibility extension and analyzed the page, the result showed
98known issues of which52were contrast related issues.I taught the tool was exaggerating the figures and I launched the Accessibility panel in Firefox and checked for all issues the results are almost the same.
Just to confirm the result I took the interface for a spin in WAVE using the Firefox extension, it reported the results in the image below,
52were Contrast Errors.You mentioned in the article:
and also:
I believe this will change but for the main time, I will be switching to the Pink UI theme because I can easily differentiate between page elements particularly the header and I WAVE'd the page it shows just 2 contrast error. I think am going to be fine with this.
Keep up the good work. Cheers.
Hey, thanks for this thorough analysis!
You’re 100% right about contrast - it’s fair to say that we have issues...
But most of them are actually legacy and the header itself didn’t really change much in these numbers. In fact, part of this update was about improving contrast in many places - so I’m actually glad you didn’t do this analysis couple weeks ago... :)
We can’t fix everything right away so it will take some time. But we do have plans for improvements and updates to other elements and parts of the DEV as well... But you know - one step at a time.
Contrast is definitely on top of our priority list!
Once again, I really appreciate you doing this contrast analysis - it’s awesome!
Rome was not built in a day.
Thank you and you are welcome.
Love the new design. The new colorscheme has certainly improved things a lot.
Any plan to update the dark theme colorscheme to better match the light theme?
Absolutely yes, its on our todo list👍
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.