Get best of the week

Maybe we should calm down a bit with JavaScript?

I have a very strange browser problem. The scripts on some pages simply do not work until about 20 seconds pass.

Whatever you were going to offer - yes, I already thought about it, and no, it did not help. I talk about this not in the hope that someone will tell you with debugging, but because this incident made me acutely aware of some, how to say ... quirks ... developments at the front.

(In fact, don’t even try to diagnose the problem by one sentence, don’t , I heard and tried almost everything that you can imagine).

The article was written in March 2016, some examples are out of date - approx. trans.

Useless pages


Look, here is a screenshot of the tweet. In it, those parts that do not work without JavaScript are highlighted in red . I know this because, as before, I’ve been looking at the page for which 20 seconds most of the code hasn’t worked yet.



Something I can understand. For example, the “Reply” button expands the text field at the bottom and puts focus on it. This can not be done without some scripts. The button ...opens a pop-up menu, which is doubtful , since you can also reproduce it using CSS. Similarly, a button with a heart performs an action in the background, which is also doubtfulas it can be played back with full page loading. But these are non-trivial changes that will work in completely different ways with and without scripts.

On the other hand ...

Is this button × in the upper right corner and all the empty surrounding space? Their only function is to send you to my profile, which is visible behind the tweet. They might as well be regular links, like left and right arrows for navigation. But this is done differently, so it does not work without JavaScript.

Or a small button with graphs, for analytics? Its only function is to load another page in an artificial pop-up window with a built-in frame. There could be a regular link that turns into a popup using a script. But this is done differently, so it does not work without JavaScript.

Text field? Of course, this is just a text box. But if you click on it before running JavaScript, a clumsy caption will remain in the field Reply to @eevee. And when the script is still launched, it erases everything that you typed and inserts it again Reply to @eevee, only now @eeveeit is written in blue letters, not gray ones.

The same thing happens on the Twitter search page, which is very strange because there is no text in the search field! If you start typing before the scripts finish, they will simply erase everything you typed. Not even to insert your placeholder text or apply a custom style. For no apparent reason, just like that.

Since NoScript works for me, I often notice strange design decisions on sites I visit for the first time. Of course, blank white pages are commonplace. For quite some time, articles on the Time website loaded fine without a script, but just didn't scroll - a property was used for the page overflow: hidden;for reasons that I can’t understand. Vox articles also load normally, except that in front of each image, blank space is displayed at the full height of the screen. Some particularly bad corporate sites are messy overlapping blocks of text. I think they abandoned CSS and wrote the layout in JavaScript.

There are no good reasons for this. These are not advanced interactive applications; they are just text pages. We used to print them on paper, but as soon as we switched to information technology, it became impossible to put words on the screen without running a few megabytes of garbage for execution?

I directly hear how they call me a luddite, because I do not agree to surround five paragraphs of static text with thousands of lines of scripts. Well, let me answer in advance: go to the bathhouse. I think that web and interactive pages are great, I see great progress in the last decade. It’s just super that the web initially supported user settings, and I can pre-configure permissions for each site that it can run on my computer and what can’t.

But what’s not very cool is a group of highly paid and highly qualified specialists, each of whom has Chrome installed on the latest Mac Pro model, who work in the office at a distance of no more than a kilometer from each server they visit. And now these guys are working, and then they turn and giggle at everyone else who does not have such a configuration. Please note that any of the following conditions will interfere with your JavaScript:

  • Someone on a slow computer.
  • Someone on a slow connection.
  • Someone on the phone, that is, on a slow computer with a slow connection.
  • Someone is stuck with an old browser on a computer that he does not control - at work, at school, in the library, etc.
  • Someone is trying to write a small program that interacts with your site that does not have an API.
  • - , .
  • - — Google .
  • - Linux , , Elinks.
  • - , .
  • - NoScript . , , .
  • - NoScript , , . , .
  • , , .
  • CDN .
  • CDN IPv6, (, , ). - IPv6, , JS .
  • , JavaScript .
  • , . , .
  • , , .

I'm not saying that interactive web applications such as Google Maps should be wiped off the face of the Earth, although even for Google Maps there was a backup without scripts for many years, up to the current version of WebGL! I say that we turned off somewhere else when the basic functions of regular HTML suddenly stopped working without JavaScript. Namely, without 40 megabytes of JavaScript, according to about:memory - this is data in memory, not the size of the download. This may not seem like much (for a page that displays 140 characters?), But my browser often accumulates a dozen open Twitter tabs, that is, half a gigabyte of memory , allocated a maximum of 6 KB of text.

The invention of the square wheel


You really need to try to achieve such a deplorable result. I mean, if you need a link, you just write <a href="somewhere">label</a>, and you're done. But if you start inventing this with JavaScript, you need a click handler, and it should work at the right time so that you know that the link really exists, and you may have to do some work to add the click handlers to the fake links, which adds Ajax. Right?

No! You will get only a pale, crappy imitation of a link. Consider all the functions of native links:

  • I can follow the link.
  • I can open the link in a new tab or window using the combination of the ctrl, shift keys and the mouse wheel (middle button).
  • I can copy the link address and paste it somewhere or open in another browser, or something else.
  • ' Firefox .
  •  — Opera, Konqueror, uzbl, Firefox vimperator? — , , «» , .
  • , .
  • .
  • , , .

The common thread here is that the tag <a href=...> means something . He says: "This is the path that you can go." Tons of tools rely on this information. If you replace it with <div onclick>, then yes, clicking on the div will do something, but the whole point is completely lost. Conversely, if used <a href="javascript:void(0);">, then you are actually lying to these tools; you cause meaning, but give meaningless information.

That's what people mean when they talk about "semantics" - that there is useful information that needs to be collected. If you start inventing the similarity of links, then the analysis of this synthetic construct will require either speculative execution of a large amount of arbitrary code, or writing extremelya smart static analyzer, or just training a human programmer. Declaring intentions is a much more powerful and flexible method than just doing the work, because in the first case, universal tools do useful things almost trivially.

Another good example is drop-down forms <select>. Some developers sometimes completely from scratch create their replacement from non-native widgets. Probably to make them more beautiful? Noble goal. But did you know that in native drop-down forms, when you start typing, the first suitable position is automatically selected? Obviously, in most alternative implementations this is not supported. Visually, they look better (or just different), but functionally much worse for long lists.

A homemade Twitter text box is not a text box at all, but contenteditable <div>. This contenteditablemeans that most of the native controls work pretty well, but still, this object from time to time exhibits some strange behavior, for example, moves the cursor to the beginning of the text when I switch between tabs. Or sometimes the script has some problems with my typing speed and it starts to notice. The only reason why even put it instead of the usual <textarea>, it seems, is to tint @handlesand links in blue? A homemade text box does not shorten links or replace Twitter emojis, so this is not really a preview of how your tweet will look.

Do you know that some sites have hotkeys? Nice, right? But actually /it’s a built-in hotkey in Firefox that opens the quick search bar. Obviously, no one on Twitter or GitHub, or BitBucket, or Tumblr, or in a dozen other places knows about this, because they all assigned this key focus to their own search bar on the site. Which is completely different from the search on the current page (to the honor of GitHub, they fixed it when I complained on Twitter). For a long time, Google+ turned off the spacebar to scroll down. Why didn’t anyone in these huge companies stop and say: “Hey, wait, this is a working function in the browser, and we are breaking it”? Do web developers use browsers themselves?

It was recalled that every Twitter page silently absorbs any keyboard events and mouse clicks until all scripts work out. This means that I can’t even change the tab until I wait these 20 seconds for the page to load: ctrl-t, ctrl-w, ctrl-tab, ctrl-pgup and ctrl-pgdn - all keyboard events are completely absorbed. This is how a mechanism called “swift action queue” works. It sounds like this queue should play events at the end of the page loading, but (a) you cannot use the hot keys in the browser; (b) it looks like it still doesn't work. To fix this, I had to write a custom script to block the script tag with a specific identifier.

I don't think I'm very picky. These are the basic functions of the browser, and you violate them, often without a good reason. I do not expect you to make Google Docs work without JavaScript. I just hope you don't break my damn keyboard.

Let me give you some advice.


Accept the fact that sometimes for some people your JavaScript will not work. Think what that means. When you have a choice, always choose existing HTML mechanisms. Maybe once a year your development team will turn off JavaScript and try to use the site. Start crying.

If you are going to redefine or rethink what already exists, study this first. You cannot create a good replacement without understanding the original. Ask around. Hell, just try clicking /on the browser before doing this with the hotkey on your website.

Remember that with all the power that the Internet gives you, ultimately the control is still in the hands of the user. The Internet is not a game console; act accordingly. Create modules. Consider possible or common settings in advance. Maybe something to reduce a little when you reach 40 megabytes of scripts on the page.

Thank.

More articles:


All Articles