14 ms·
I inspected the mastodon.social website
- exikyut 8y agoThis 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 8y agoGlad 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-million-websites/ https://css-tricks.com/average-web-page-data-analyzing-8-mil... 2. https://css-tricks.com/random-interesting-facts-htmlsvg-usage/ 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/ https://catalin.red/thoughts-on-accessibility/ Sorry for all these plugs.
- exikyut 8y agoThe 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 8y agoI hope this person never reviews one of my MVPs...
- redmaniack 8y agoHehe, just let me know!
- newsbinator 8y ago> 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_ 8y agoYeah, 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 8y agoThe 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.
- k_ 8y agoI understand and agree with you. It's just that this is exactly what is possible with newer versions of FontAwesome. So it has in a way replaced itself by the tools you were looking for :) It's just nitpicking; with the example it's pretty clear that it's the icon font that is bugging you.
- mrisoli 8y agoI 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.
- superdeeda 8y agoYour articles are very pleasant to read! Great balance of screenshots, code, and dialogue with just the right amount of information. :)
- redmaniack 8y agoThank you very much ;)
- deleted 8y ago[deleted]
- jimtoo 8y agoI 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 8y agoTo 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 8y agoCame here to tell you this :) A blog post is nice and educational, but pull requests would move things forward way better!
- deleted 8y ago[deleted]
- tmy03 8y agoThis 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.
- nailer 8y agoI agree this is BEM, not SASS nesting. 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.
- redmaniack 8y agoPlease read my comment above, also here's how the above "nesting" compiles to: .compose-form .compose-form__modifiers .compose-form__upload-description input::placeholder { opacity: 1; }
- Raphmedia 8y agoWho need easy to read post-build selectors in the age of source maps? Much better to have a file that is easier to read before the build.
- nailer 8y agoI did. .compose-form .compose-form__modifiers .compose-form__upload-description input::placeholder { opacity: 1; } That looks like BEM, with all the underscores and modifiers. Proper nested SASS would look like: .compose-form .upload-description input::placeholder { opacity: 1; } Scoped CSS would look like: .compose-form-abc123 .however-deep-or-shallow-you-want { opacity: 1; }
- redmaniack 8y agoI'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/995f8b389a66ab76ec92d9a240de376f1fc13a38/app/javascript/styles/contrast/diff.scss https://github.com/tootsuite/mastodon/blob/995f8b389a66ab76e...
- mikekchar 8y agoKind 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 8y ago
- mothsonasloth 8y agoNice 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 8y agoThis 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-and-do/speakers-corner https://www.royalparks.org.uk/parks/hyde-park/things-to-see-...
- languagehacker 8y agoI 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 8y agoWell, 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.
- majewsky 8y agoCannot open the submission. HN hug of death?
- velcrovan 8y agoI 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 8y agoI think they recommend using normalize.css instead of resetting styles.
- redmaniack 8y agoThank you :)
- redmaniack 8y agoWell, english is my second language. 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.
- deleted 8y ago[deleted]