
I inspected the mastodon.social website - redmaniack
https://catalin.red/inspected-mastodon-social-website/
======
languagehacker
I expected a bit more from this article. This was really just an opinionated
UI/UX audit. Nothing they're doing is all that bad, and the frontend looks
just fine, honestly. Seems like a good way to plug yourself, sure, but maybe
not terribly informative.

~~~
redmaniack
Well, I also somehow expected this kind of feedback too.

I agree my findings are far far away from a specialized audit, but nor did I
intended to do one.

I just wanted to check out some of the best practices & stuff, based on my
daily experience as a web user and developer.

------
newsbinator
> Not a big fan of the FontAwesome icon font as a solution for icons, not
> anymore. But I guess an SVG icon system will replace those very soon. SVG
> icon fonts are so much easier to work with.

FontAwesome 5 is based on SVG. I love that I can import only the handful of
tiny SVG icons I need in my projects.

~~~
k_
Yeah, the thumbs down on FontAwesome is a little harsh imo. Maybe there should
be a thumbs down on FontAwesome using the CSS classes flavor, but I don't see
the new version as being a bad thing at all.

~~~
redmaniack
The thumbs down was meant to be for the use of an icon font nowadays, in this
case, FontAwesome. Don't get me wrong, I'm still using FontAwesome for many
projects.

The thing is there are so many good reasons to use an SVG icon font system
nowadays: pure vector, control over the individual shape symbols, positioning
is easier thanks to knowing its exact size etc.

~~~
mrisoli
I just tried out Mastodon quickly after reading this, and what a disaster.

Icons are overused, there's no onboarding of the UI and it just throws you in
with a bunch of icons, I wasn't sure what most of them did.

I started at mastodon.technology and it immediately follows the instance
creator which confused me, when I checked his profile there was an icon with
which I could unfollow(an X on top of a person icon), which I didn't know if
it meant blocking or unfollowing.

No icon has helper text on hover or anything, you're just thrown in and
there's already messages popping in your timeline and I didn't really know
that I already followed these people, and I could click Local/Federated
timeline and there wasn't much info on what those were.

~~~
r3bl
Those UX issues would be far more useful being reported on GitHub than they
are on HN.

~~~
newsbinator
That assumes GP's primary motivation is to support/improve the particular
project, rather than discuss UX and kvetch with fellow hackers and designers.

------
tmy03
_This is what Sass files do to your CSS files if you abuse nesting_

Aren't they just using BEM, which is a quite popular css methodology? I don't
see how this is a bad thing.

~~~
redmaniack
I'm not saying using BEM is a bad thing. Not at all, I'm using it too and like
how it plays with Sass/scss.

e.g. I do like how Sass makes it easier to write BEM-like code similar to the
below:

// style.scss .btn { ... &\--success { ... . } }

// style.css .btn {...} .btn-success {...}

But when abusing Sass nesting and choosing a weak naming convention, the
resulted CSS selectors can go wild. Here's an example:
[https://github.com/tootsuite/mastodon/blob/995f8b389a66ab76e...](https://github.com/tootsuite/mastodon/blob/995f8b389a66ab76ec92d9a240de376f1fc13a38/app/javascript/styles/contrast/diff.scss)

~~~
JeremyBanks
Is output verbosity a problem? Narrower selectors are easier to reason about
and faster to process, and compression should take care of most of the size
difference, since it's so repetitive.

------
superdeeda
Your articles are very pleasant to read! Great balance of screenshots, code,
and dialogue with just the right amount of information. :)

~~~
redmaniack
Thank you very much ;)

------
exikyut
This is cool. I wish this sort of analysis existed for many major websites!
The reason I think this would be useful is the accessibility of the results -
we'd be able to consider the various analytics within the context of something
highly familiar (the mention of Slack still using "text/..." is one such
example).

Although... hmm, maybe I don't want _all_ websites scored. Arc (ie, HN) would
probably rank 0.5/10 in terms of technical design (I begrudgingly admit the
Spartan UI could be worse). Upvoting is done by creating an empty image then
loading it - but the "hide" link uses XHR, so that's a bit inconsistent; the
layout is based on tables... and still uses the old 1x1px spacer image trick
for padding!!1; there's absolutely no ARIA to be found anywhere, so I wonder
what screen-readers think of it (a valid consideration, I've read comments by
blind users here); and the Firebase API is read-only and doesn't permit
posting/interaction, so if I want to make a 3rd-party app, I'd have to ask
users for their passwords. That works for app storage but localStorage is
neither encrypted or "reasonably resilient", so that won't work in a Web
framework demo context. I have a lot of reluctance to give out my HN password
in a world of OAuth2, all the more when I consider that HN is regarded more
highly than other communities such as reddit, twitter, etc. I think this could
explain why most 3rd-party HN demo apps don't allow posting, and it's sad.

 _Incentive to make own, better website intensifies_

And I'll make a note of this person, and ask them what they think of it when
it's live.

~~~
redmaniack
Glad you found it interesting. I enjoy to dig into this kind of analysis stuff
from time to time:

A while ago I made an HTML study on around 8 million web pages:
[https://www.advancedwebranking.com/html/](https://www.advancedwebranking.com/html/)

Also, I wrote about this journey on CSS-Tricks: 1\. [https://css-
tricks.com/average-web-page-data-analyzing-8-mil...](https://css-
tricks.com/average-web-page-data-analyzing-8-million-websites/) 2\.
[https://css-tricks.com/random-interesting-facts-htmlsvg-usag...](https://css-
tricks.com/random-interesting-facts-htmlsvg-usage/)

On accessibility, I'd have loved to try out some screen readers but at the
moment I write this article, I thought this accessibility analysis would
deserve its own separate topic/article. A11Y is always hard.

[https://catalin.red/thoughts-on-accessibility/](https://catalin.red/thoughts-
on-accessibility/)

Sorry for all these plugs.

~~~
exikyut
The plugs are cool, thanks! :)

The 8 million webpage one was really interesting. I don't know why yet though.
(I'm serious - I know this info will come in hand for figuring something out
one day. Thanks.)

TIL about [aria-hidden] from "HTML/SVG usage"/"Hiding DOM elements"! I wonder
what the raw stats on display:none vs visibility:hidden are (especially
considering that they have different effects). I wouldn't have expected 117000
webpages (is this a discrete page count or a website count?!) to use the
highly specific ".visuallyhidden"... oh it's part of the HTML5Boilerplate
framework, that explains it.

The main issue with screen readers is that, AFAIK, JAWS doesn't offer a
developer-access program! Or if it does, I've never heard of it. A LOT of
people still use JAWS, AFAIK, in spite of the newer offerings out there. The
main difficulty here is the differing-client-behavior problem, although NVDA
and ChromeVox's free-ness are surely shifting the usage share (something I've
wondered about for a while).

------
iDemonix
I hope this person never reviews one of my MVPs...

~~~
redmaniack
Hehe, just let me know!

------
mikekchar
Kind of off topic, but like the author I was looking at Mastodon yesterday
(reading the ruby code, ha ha!). One thing struck me, though. The
documentation seems to imply that it doesn't matter what instance you're on
and to simply look for an instance that has people you get along with. However
that doesn't seem to be a good idea in some cases and I'm wondering if I'm
wrong.

Some instances are blocked by other instances. And even though some are only
"silenced", if you happen to join an instance that is blocked by a lot of
other instances, then nobody will see what you are writing. For example, I
joined mstdn.jp because it's in Japan (which I am as well), and it's popular.
I thought it would be convenient to join that instance because then I can
follow more Japanese people and improve my Japanese. But then I found out that
mstdn.jp is blocked by some other instances due to fears over lolicon material
(it hasn't shown up in my brief troll of the federated feed, so I wonder how
prevalent it actually is -- also, I wonder if my information is old news and
it isn't actually blocked by people now...).

So potentially anything I write will never show up in the federated feed in
those other instances (and may be completely blocked by other instances). So I
should pick a different instance. Sounds easy, but which one?

The problem is that (as I mentioned earlier), I _want_ to follow content on
the main Japanese servers. So I need to find a server that doesn't block those
servers entirely. Except there doesn't seem to be any way to find out exactly
what servers people are blocking (except for a handful who helpfully tell you
that they are following the tootcafe blocklist[1]). That kind of solves my
particular problem because the main Japanese servers are not blocked on that
list.

But, for me it illustrates a pretty serious problem. How do I know that the
instance I'm on isn't blocked by the majority of the fediverse? If I'm writing
and I'm interested in a wide variety of people reading what I'm writing, how
do I ensure that I position myself in the right place? And if I like an
instance (regardless of a lack of moderation that is causing it to be blocked
by the world), how do I remain connected with the people on that instance
without maintaining a presence there?

It almost seems to me that I really need multiple accounts on multiple
instances to ensure that I can get what I want -- but since the client is tied
to the instance (as a web sever), that's a difficult trick...

Sorry for the length (for people who got this far). My ideas are still a
little unformed.

[1] - [https://github.com/tootcafe/blocked-
instances](https://github.com/tootcafe/blocked-instances)

~~~
nailer
> [https://github.com/tootcafe/blocked-
> instances](https://github.com/tootcafe/blocked-instances)

Wow. tootcafe, according to their own page, blocks any instances where free-
speech is tolerated. Not threats, or harassment, just social views they deem
unlikable.

~~~
nl
I’m 100% behind the idea that instances should be able to refuse to carry
(literal) nazi propaganda (read the footnote; this is what we are talking
about here. I agree that isn’t great wording though).

Isn’t that the whole idea of federation? Instances can do what they want?

Also Nazism is a threat. I have Jewish and gay friends and Nazis want them
executed.

~~~
nailer
> I have Jewish and gay friends and Nazis want them executed.

Same here. Wanting someone executed is already covered by banning threats, as
mentioned in the comment you're replying to.

Removing unwanted speech which isn't threatening isn't necessary. The most
likely outcome of blocking free-speech nodes is control of conversation, eg,
deeming supporting national borders as 'hate speech'. Which is fine if you
want that, but makes tootcafe seem like a play pen for people who don't like
to be around others who disagree with them if you don't.

~~~
yorwba
> The most likely outcome of blocking free-speech nodes is control of
> conversation, eg, deeming supporting national borders as 'hate speech'.

Why would that be the most likely outcome? I'm pretty sure that "deeming
supporting national borders as 'hate speech'" is a fringe position, which
would be unlikely to take over a popular instance. Even if it did, people
whose posts about national borders are deleted could easily move to another
instance with a different policy.

Filtering what you see and share with others isn't inherently wrong. Sure, if
I'm on an instance that considers national borders equivalent to hate speech,
I might lose out on interesting discussions about that topic. But if I'm not
(and that's much more likely), then I won't be bothered by strangers reacting
angrily to my posts they see as hate speech, because they'd be blocking me
instead.

I think the upsides of not seeing what I don't want to see outweigh the
downsides of not seeing everything, given that there's too much content to see
everything anyway.

~~~
nailer
> I'm pretty sure that "deeming supporting national borders as 'hate speech'"
> is a fringe position

I'm not sure if you use Twitter or live in the bay area but it's relatively
common in both these places. Even TechCrunch UK recently described supporting
Brexit as a racist position.

> Filtering what you see and share with others isn't inherently wrong.

Totally agreed, but the mischaracterisation of networks supporting free speech
as a place where "It's OK to be a Nazi" is. It's also not particularly
original, with similar arguments being commonly used by most totalitarian
regimes.

That said, the 'nazism is OK on those instances' may have been accidental (or
perhaps just unthinkingly partisan) - I've sent a PR with a fix:
[https://github.com/tootcafe/blocked-
instances/pull/22](https://github.com/tootcafe/blocked-instances/pull/22)

------
velcrovan
I didn’t understand the paragraph about CSS reset. As in, it was poorly
written:

> Personally, I like to preserve useful defaults instead of clearing
> everything with a CSS Reset. A tool like normalize.css, comparing to the
> classic CSS Reset helps to learn how elements are meant to display actually.

OK, the thumbs-down and the first sentence give me the clue that you don’t
like CSS reset (although I still have no idea what is meant by “useful
defaults”, or how you might selectively preserve them from the presumably non-
useful ones without a normalizing technique).

The second sentence breaks my english parser. It seems to be saying
normalize.css is good, but this seems to contradict the thumbs-down and the
first sentence.

Help!

~~~
berns
I think they recommend using normalize.css instead of resetting styles.

~~~
redmaniack
Thank you :)

------
majewsky
Cannot open the submission. HN hug of death?

------
jimtoo
I love Mastadon. Apart from the points OP mentioned, I would love to see the
UI & UX being upgraded to something that feels cleaner and less cluttered.

~~~
redmaniack
To be honest, I blame myself for not opening some pull requests yet,
considering the project is open-source.

I'd love to contribute and try to improve things but this task might become
gigantic on long-term, as the Mastodon project itself :)

~~~
tasuki
Came here to tell you this :)

A blog post is nice and educational, but pull requests would move things
forward way better!

------
mothsonasloth
Nice review, I will consider some of those things when building sites now.

After reading your post and then reading more stuff, it appears that Mastodon
is going to become the Gab.ai for Leftists.

Which seems to be ironic in a way.

The internet cannot be controlled if it is to remain free and open. Creating
censor lists like this here [https://github.com/tootcafe/blocked-
instances](https://github.com/tootcafe/blocked-instances) ,is no different to
traffic shaping that ISPs do and what the FCC in America has done.

Effectively they have created BBS boards with a bit more tech and have
isolated them.

If this sort of mentality continues we are going to have a segmented internet
as a whole, where mega corps rule.

Imagine a hellhole like this:

\-- Connecting to Monsanto ISP \-- Connected <<you have 1 hour of usage left>>
\-- Type "www.reddit.com" \-- Coca-Cola DNS, im sorry I cannot resolve that
domain for you, please buy another Coca-cola. \-- Buys Coca-cola \--
Connection to www.reddit.com blocked, it is now under the federated space of
GlaxoSmithKlein, who are in competition with the Monsanto Liandri Corporation.
\-- Goes to connect to www.guardian.com \-- Hit with adds for Monsanto
weedkiller, and GMO sweetcorn.

~~~
pmlnr
This is as old of a question as the internet, or as the humanity itself.

Not every place or discussion forum is a place to discuss anything or
everything; some are thematic and that has to be respected.

It's not a problem if someone creates a BBS-like thing for themselves.

It's as much of a right as speaking publicly at Hyde Park -though even that
has rules: "as long as the police consider their speeches lawful."[1]

It is a different issue if people refuse to research other opinions, but there
is a significant difference in educating this to be the default approach and
between forcefully presenting it out of the blue.

[1]: [https://www.royalparks.org.uk/parks/hyde-park/things-to-
see-...](https://www.royalparks.org.uk/parks/hyde-park/things-to-see-and-
do/speakers-corner)

