Twitter is testing a major redesign of its desktop website

[lunamoth]

https://twitter.com/Twitter/status/1037742693575733248

"Love to use Bookmarks and want it on web? Into scrolling through Explore to see what's happening? We are testing out a new Twitter for web, which a small number of people will see today. Love it? Missing something? Reply and tell us. Don't have the new experience? Stay tuned."

I would like to be able to use the extension feature on the new design twitter

[jorgegonzalez]

We should probably keep an eye on the redesign as it is being rolled out. If it was built with CSS modules, as mobile.twitter.com is, this extension is probably bust.

[tuhlsolucoes]

So, earlier this week i got the option to enable the new design, from what i can see it's using React and there are now a 💩ton of css classes.

You can still target them with giant selectors like the one below, but i'm not sure if they'll remain the same with each bundle refresh (also yikes).

.rn-1oszu61.rn-aqfbo4.rn-1efd50x.rn-14skgim.rn-rull8r.rn-mm0ijv.rn-13yce4e.rn-fnigne.rn-ndvcnb.rn-gxnn5r.rn-deolkf.rn-6koalj.rn-1qe8dj5.rn-1mlwlqe.rn-eqz5dr.rn-1mnahxq.rn-1mf7evn.rn-p1pxzi.rn-1joea0r.rn-ifefl9.rn-bcqeeo.rn-wk8lta.rn-9aemit.rn-1mdbw0j.rn-gy4na3.rn-bnwqim.rn-1ovo9ad.rn-1lgpqti { display: none; }

There's also data-attributes and aria-attributes on some elements, i think they can be targeted with javascript, not 100% sure though 🤔

[jorgegonzalez]

I haven't tested this out, but I think Dom Testing Library can help us overcome this coming change.

Queries such as getByText can allow us to find DOM elements without depending on class names (e.g. something like const whoToFollowHeader = getByText(container, /whotofollow/i)). This may be a better long-term solution than giant class selectors or other attributes likely to change.

[muuvmuuv]

A new design rolled out for me... This is major and does not even look good. Hope to see some good changes coming in refined-twitter.

Things that IMO are not looking good:

• the margin/padding is not consistent enough or follow any good-looking-guide (look at "Trends for you", the text is so close to the not really visible background border)
• it's toooo tight. On my retina it's like looking at mobile
• the border around the content makes it look even tighter
• search not in the center anymore
• Sidenav too big
• Sidenav button bigger than the content ?!
• Give the twitter logo more space below
• give everything more space
• bring back to old design...

[jorgegonzalez]

@muuvmuuv I agree with everything you've said. If you can figure out a good solution I'd be more than happy to guide you in the implementation.

[muuvmuuv]

@jorgegonzalez I don't have much time ATM but I think it's good to wait a little more, maybe Twitter will update its UI step by step to fix some of these things or until really everyone got the new design.

[fregante]

https://github.com/thomaswangio/minimal-twitter

[vinkla]

https://github.com/giuseppeg/refined-twitter-lite

[fregante]

@vinkla that's unrelated. Minimal Twitter works on the new version of Twitter

[vinkla]

@fregante Refined Twitter Lite works with the new Twitter design.

[biscuitsan]

Can we just change the user-agent like this extension did to restore the old one? I seriously hate everything about this redesign, and already switched back.

[jorgegonzalez]

https://chrome.google.com/webstore/detail/productive-twitter/elgfikcdihncknnnedljbbignlmnppii

https://github.com/sdras/productive-twitter

[joshmanders]

https://github.com/thomaswangio/minimal-twitter

Just switched to this. Great extension. I love the way it changes the UI.

[marnovo]

Just FYI, under the new UI the right sidebar is hidden initially, but comes back (and stays) once you check the notifications page, for instance.

[giuseppeg]

@fregante Refined Twitter Lite can do the single column thing, force latest tweets and other things.

Happy to collaborate with you folks if you want to merge!

[sindresorhus]

Closing in favor of #195