https://developer.mozilla.org/en-US/docs/Web/Accessibility/A...

In my mouth, Twitter is probably the best, most responsive web app I've ever used. It is not trivial to make a responsive infinite scroll that remembers your place on back, live updates gracefully, has useful shareable URLs, keeps memory usage low, loads quickly, etc. To me it's the real proof point for RN web and web workers.

To the eyes of someone familiar with the framework it is still full of bad practices.

Boy, that frontend ecosystem is really cursed.

The thing is, you view it Chrome, the list displays normally, a handful of students. But you view it in Firefox and it's an empty list. On Firefox it would look like

> (MM/DD/YY) Here's the list of students who must take the finals:

>

> (MM/DD/YY) [Next reminder...]

Sucks to be a Firefox user and be on that list.

A few years later, maybe 2015/2016, with a few years in the industry under my belt, I remember this curiosity and rechecked. Firefox is still not showing the list. I open developer tools to inspect and I'm greeted by an eldritch, decadent, and blasphemous nesting of divs. I did not try to understand it but it seems the stylesheet in use indents divs a certain amount and they abused this rule to get the list to the indentation they want. Probably it hit some limit in Firefox.

I've never used Google Sites so I can't guess whose fault is this. But it's unlikely my prof hand-wrote that HTML.

With this article, it seems to me that Twitter devs, for all their fancy dev toolchains, could only produce slightly better HTML than my professor. Perhaps the industry in general is really not much better than Google Sites, seeing our reliance on such bloated frameworks. What a sobering thought.

P.S. I did look her up just to check if this bug is still present. Her Google Sites is still up, she still teaches, but she seems to have taken down her earlier course pages.

I bet the need for cross-platform stack might continue to rise in the future. It's just impossible for small team/solo founder to target 3 different platforms, while handling three different codebases.

Gone are the days when you could disable custom CSS and still kinda-sorta navigate the web. These days, it is en vogue to tightly couple what we're seeing on an HTML page (a product listing, a social media post) with instructions about how to render it (250px wide, black background, blinking marquee text). This is great for the tech companies that are producing these HTML blobs, because they have a lot of control over what they're showing to their users. It's only good for the users if they're 100% happy with how the data is being presented. I don't know about you, but I'm rarely happy these days. To say nothing for users with more stringent accessibility requirements.

I wonder if there's a future where we all use a different kind of web browser -- one that doesn't accept any styling instructions from the websites it's visiting. It would probably need to be built on top of accepted data types for various things, like product listings or social media posts. That way, it wouldn't matter whether I was looking at a product on Amazon, Ebay or Etsy. I could tell my browser that I want all product listings to be rendered in dark mode, with a thumbnail preview image instead of a full-sized one, regardless of what site I'm currently on.

Google is already in the process of trying to become this kind of "browser". It has the advantage of being the "front door" of the internet in doing so. It aggregates, and homogenizes, similar documents from various companies and presents them in a uniform way on the results page (eg, hotels, flights, word definitions).

I don't want to rely on Google to do this for me. I want the documents of the web to be semantically meaningful to the point where my browser can make opinionated decisions about how to style the information I'm downloading.

You can't link to a specific tweet. 'Nuff said

This page is just an animation, and has nothing to do with "Twitter.com's HTML, which is produced by React Native for Web, explained"

which was hella annoying and a classic "tell" that you are dealing with a web app trying to masquerade as a native app.

refactoring to use rnweb's <ScrollView/> and <Button/> made all that go away. Now I'd (boldly) challenge you to find a "tell" that this app is not native. (shelf.fm if you're curious).

I actually wanted to check the precise loading times before posting this, but would you look at this: https://i.imgur.com/VWOlNHu.png

I rest my case.

Does Twitter really benefit a native app? Perhaps, but it’s certainly not necessary.

Ideally iOS and Android would simply expose native apis via browser and allow one to toggle access to said apis per site.

My conspiracy theory is that the only reason this isn’t already possible is due to vendors wanting more control.

Then there are layers that decide how to render. Regular React has a renderer that accepts HTML tags spits out HTML for the browser. React Native has a renderer that accepts more abstract tags (<View>, <Text>) and spits out native views for apps. There are other projects that make renderers for making PDFs, animations, etc.

React Native for Web is basically a renderer that accepts the abstract tags React Native uses (<View>, <Text>) and spits out HTML. React Native does not really help you directly port a web app to native, but React Native for Web is designed to directly port a native app to the web.

So if you want a fully cross platform React experience, you need React Native from the get-go and to compile it for web when you want web.

From personal experience, I've had great success targeting the 3 platforms you mention in a single RN codebase, with a very high degree of code re-use.

Desktop support is approaching “okay” (judging by the almost kinda somewhat native feeling flagship app Facebook Messenger on macOS), which puts it many kilometers ahead of any alternative.

The main alternatives for native feeling apps seem to be Xamarin Forms and Qt Quick, the former seems hard to do special things with and the latter has a pretty confusing and convoluted setup process. Neither has real web support.

You can create a project by running: "npx ult ProjectName"

You could use Expo, but I didn't want to be locked into the Expo environment, I wanted native extensions, and I wanted desktop platforms.

For web it uses a lite forked CRA project tailored for React Native Web. For native it runs the proper commands and sets up all the platforms for you.

Currently ReactXP is the default as it's more stable and feature complete, but RNW is supported.

In the future RNW will be default as ReactXP is abandoned and RNW is the clear winner.

Granted, it leverages NativeScript, but it's really not that hard once you have that.

It's not like they have 1000 of concurrent events like facebook, and their frontend should have nowhere the complexity of their backend. I don't understand how it's even happening.

The most absurd aspect of it is that how slow loading a single tweet is. The timeline could have the excuse of a slow and complicated backend call (but it doesn't, the backend is actually doing ok), but several seconds for one single tweet?

This is particularly frustrating, because my normal use case for this is that a bunch of new stuff loaded, which throws everything that's on the page already out of order, so then I can't see something that I know was there, that I was just looking at, and now searching for it doesn't work, either.

The biggest irony is they have the best designers in the world (i.e. the guys who created bootstrap) but god I hate the tech they have used to make twitter.com because of that "something went wrong" retry button error message .

It's insane how bad it works on a page that would have been perfectly fine to be simple and static.

That said, I fully agree - the website is literal garbage despite its insane simplicity, and there would be 0 reason to trust that their web tech works well because they have never demonstrated such a thing.