I inspected the mastodon.social website
catalin.red
catalin.red
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.
FontAwesome 5 is based on SVG. I love that I can import only the handful of tiny SVG icons I need in my 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.
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.
It's just nitpicking; with the example it's pretty clear that it's the icon font that is bugging you.
Aren't they just using BEM, which is a quite popular css methodology? I don't see how this is a bad thing.
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...
I dislike BEM because it requires modification of CSS classes to change how something looks - you add and remove classes to your `.login-box` to make it bigger or bluer or wider.
I prefer CSS auto-nesting (using Svelte) or SASS nesting (for older projects) so I can just modify my `.login-box` to add whatever styles it needs and not touch my HTML.
.compose-form .compose-form__modifiers .compose-form__upload-description input::placeholder { opacity: 1; }
.compose-form .compose-form__modifiers .compose-form__upload-description input::placeholder { opacity: 1; }
Proper nested SASS would look like:
.compose-form .upload-description input::placeholder { opacity: 1; }
.compose-form-abc123 .however-deep-or-shallow-you-want { opacity: 1; }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.
A while ago I made an HTML study on around 8 million web pages: 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... 2. https://css-tricks.com/random-interesting-facts-htmlsvg-usag...
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/
Sorry for all these plugs.
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).
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.
If you are on a "silenced" instances you can still be directly followed by users on the instance doing the silencing and they will see all of your posts on their Home timelines. From what I've seen, any boosts/replies by those users following you to your statuses still make those individual statuses eligible for them to show up on Federated feed on that instance, even if your every post is not eligible.
Arguably the game is the same whether or not you are on a majority "silenced" instance: the more people that directly follow you the more likely you show up in people's Home timelines and thus the more likely you show up in Federated feeds. You don't necessarily need to know if a remote instance is silencing your instance if you make enough friends on that instance that are directly following you.
I'd also argue that worrying about which Federated feeds you show up on is counter-productive in Mastodon. As with Twitter, it's better to reach users in their Home timelines, with direct relationships, or in some cases on Local Timelines for interesting interests, than to ever count on Federated feeds. Many instances the Federated feed isn't that useful (too busy, for instance) and people don't bother checking it anyway. (My main account is currently the only user on a small instance and the Federated feed is mostly repetitive with stuff on the Home feed and so I check it very irregularly.)
Instance "suspensions" obviously are a different matter entirely, but I don't feel like it is worth worrying about "silences".
> 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...
It's easy enough to just open multiple tabs in your browser and tab between them, if that is what you want to do. There are also some native clients with good multi-account support.
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.
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.
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.
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.
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
Making up stuff like that doesn’t help your argument here.
Some may choose to have very strict rules about what is allowed, others may be wide open.
I don't see a problem here.
It blocks hate speech, as clearly mentioned in that link.
> it's okay to promote e.g. National Socialism
Not, it's not OK. If you promote Nazism I'll point out you're an idiot and so will most right minded adults. Something being not banned in not the same thing as it being 'OK'.
How common are neo nazis in 2018? There's a fringe element on the left who believes anyone on the right of, say, Bernie Sanders, is a Nazi. Tootcafe seems to subscribe to this convenient way of dismissing people that disagree with one's current viewpoint.
> 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!
Besides that, what I was really trying to say was that a tool like Normalize.css or Bootstrap's Reboot may be more helpful than the classic CSS reset.
I'd love to contribute and try to improve things but this task might become gigantic on long-term, as the Mastodon project itself :)
A blog post is nice and educational, but pull requests would move things forward way better!
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 ,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.
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-...