2020 JavaScript edits #1737

rviscomi · 2020-12-10T20:25:34Z

rviscomi · 2020-12-10T20:27:19Z

Also adding @ibnesayeed and @denar90 as I'm not sure if they've gotten a chance to formally review the draft before publication. Please suggest any changes to this PR, or feel free to open a new PR.

github-actions · 2020-12-10T20:28:14Z

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 46.2%, saving 54.24 KB.

Filename	Before	After	Improvement	Visual comparison
`src/static/images/2020/javascript/correlations.png`	117.52 KB	63.28 KB	-46.2%	View diff

692 images did not require optimisation.

Update required: Update image-actions configuration to the latest version before 1/1/21. See README for instructions.

…nto js

github-actions · 2020-12-10T21:00:24Z

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 46%, saving 61.38 KB.

Filename	Before	After	Improvement	Visual comparison
`src/static/images/2020/javascript/prefetch-distribution.png`	70.46 KB	38.47 KB	-45.4%	View diff
`src/static/images/2020/javascript/preload-distribution.png`	62.99 KB	33.60 KB	-46.7%	View diff

693 images did not require optimisation.

Update required: Update image-actions configuration to the latest version before 1/1/21. See README for instructions.

…nto js

src/content/en/2020/javascript.md

github-actions · 2020-12-10T22:05:50Z

Images automagically compressed by Calibre's image-actions ✨

Compression reduced images by 43.9%, saving 251.06 KB.

Filename	Before	After	Improvement	Visual comparison
`src/static/images/2020/javascript/frameworks-bytes.png`	206.27 KB	110.94 KB	-46.2%	View diff
`src/static/images/2020/javascript/frameworks-main-thread-no-ember-diff.png`	129.05 KB	73.46 KB	-43.1%	View diff
`src/static/images/2020/javascript/frameworks-main-thread-no-ember.png`	118.95 KB	67.83 KB	-43.0%	View diff
`src/static/images/2020/javascript/frameworks-main-thread.png`	117.19 KB	68.17 KB	-41.8%	View diff

695 images did not require optimisation.

Update required: Update image-actions configuration to the latest version before 1/1/21. See README for instructions.

src/content/en/2020/javascript.md

…nto js

rviscomi · 2020-12-10T22:57:21Z

src/content/en/2020/javascript.md

@@ -208,33 +216,53 @@ Of those external scripts, only 12.2% of them are loaded with the `async` attrib
  sql_file="breakdown_of_scripts_using_async_defer_module_nomodule.sql"
 ) }}

+{# TODO(authors): Why is it misleading? #}


Misleading was the wrong word choice. Over-inflated. I clarified in an edit, but basically, this means that not all of those 6% of requests get the full benefits of defer, because of that async/defer anti-pattern.

rviscomi · 2020-12-10T22:57:28Z

src/content/en/2020/javascript.md

 Considering that `defer` provides us with the best loading performance (by ensuring downloading the script happens in parallel to other work, and execution waits until after the page can be displayed), we would hope to see that percentage a bit higher. In fact, as it is that 6.0% is a bit misleading.

 Back when supporting IE8 and IE9 was more common, it was relatively common to use _both_ the `async` and `defer` attributes. With both attributes in place, any browser supporting both will use `async`. IE8 and IE9, which don't support `async` will fall back to defer.

+{# TODO(authors): In the Twitter thread that discussed this, it actually spurred the Jetpack folks to push a fix! Might be worth mentioning :) #}


@tkadlec totally optional

Great little story! Added. :)

Thanks! Could you open a new PR with your changes?

rviscomi · 2020-12-10T22:58:25Z

src/content/en/2020/javascript.md


 The popular libraries in use are largely unchanged from last year, with jQuery continuing to dominate usage and only one of the top 21 libraries falling out (lazy.js, replaced by DataTables). In fact, even the percentages of the top libraries has barely changed from last year.

-{# table? showing rank, library, percentage and last years rank #}
+{# TODO(analysts): table? showing rank, library, percentage and last years rank #}


This requires pulling 2019 data so a bit more involved. I wonder if the figure below gets the job done. @tkadlec LMK.

Sorry...what figure is that?

https://almanac.httparchive.org/en/2020/javascript?#fig-21

(The changes in this PR were just deployed to production)

Gotcha. I think that's fine. A comparison is kinda boring anyway with the lack of change.

rviscomi · 2020-12-10T22:58:41Z

src/content/en/2020/javascript.md


-It's worth noting that the detection issue that was noted last year still applies, and still impacts th results here. It's possible that there _has_ been a significant change in popularity for a few more of these tools, but we just don't see it with the way the data is currently collected.
+{# TODO(authors): Elaborate on what the detection issue was. #}


ibnesayeed

I think we should add spaces before and after every occurrence of — character.

ibnesayeed · 2020-12-10T23:00:01Z

src/content/en/2020/javascript.md

@@ -12,19 +11,20 @@ tkadlec_bio: Tim is a web performance consultant and trainer focused on building
 discuss: 2038
 results: https://docs.google.com/spreadsheets/d/1cgXJrFH02SHPKDGD0AelaXAdB3UI7PIb5dlS0dxVtfY/
 queries: 02_JavaScript
-#featured_quote: TODO
+featured_quote: JavaScript has come a long way from its humble origins as the last of the three web cornerstones—alongside CSS and HTML. Today, JavaScript has started to infiltrate a broad spectrum of the technical stack. JavaScript is no longer confined to the client-side—it's an increasingly popular choice for build tools and server-side scripting, and is creeping its way into the CDN layer as well thanks to edge computing solutions.


Adding space around — in ... client-side — it's an .... Alternative, this can be split into two sentences.

Should the thanks to edge computing solutions phrase be put in brackets separated by a comma or something?

Suggested change

featured_quote: JavaScript has come a long way from its humble origins as the last of the three web cornerstones—alongside CSS and HTML. Today, JavaScript has started to infiltrate a broad spectrum of the technical stack. JavaScript is no longer confined to the client-side—it's an increasingly popular choice for build tools and server-side scripting, and is creeping its way into the CDN layer as well thanks to edge computing solutions.

featured_quote: JavaScript has come a long way from its humble origins as the last of the three web cornerstones—alongside CSS and HTML. Today, JavaScript has started to infiltrate a broad spectrum of the technical stack. JavaScript is no longer confined to the client-side — it's an increasingly popular choice for build tools and server-side scripting, and is creeping its way into the CDN layer as well thanks to edge computing solutions.

We haven't been doing that in other chapters so would prefer to keep consistent.

The style guide we are using says no spaces around em-dash.

However I do agree it looks weird here so close to a hyphenated word.

Also I think this sentence is rather long with a first part, the em-dash, and then the third part. And the two "ands" don't help (though I agree technically correct).

I think we should rephrase. What about something like this?

Suggested change

featured_quote: JavaScript has come a long way from its humble origins as the last of the three web cornerstones—alongside CSS and HTML. Today, JavaScript has started to infiltrate a broad spectrum of the technical stack. JavaScript is no longer confined to the client-side—it's an increasingly popular choice for build tools and server-side scripting, and is creeping its way into the CDN layer as well thanks to edge computing solutions.

featured_quote: JavaScript has come a long way from its humble origins as the last of the three web cornerstones—alongside CSS and HTML. Today, JavaScript has started to infiltrate a broad spectrum of the technical stack–it is no longer confined to the client-side and it's an increasingly popular choice for build tools and server-side scripting. JavaScript is also creeping its way into the CDN layer as well thanks to edge computing solutions.

Though not made about three sentences basically all starting with the same word (JavaScript), but that's probably just getting picky.

Look good to me, but I think we should even split it at stack–it. That is literally a hyphenated word now, which doesn't make sense.

Works for me, and also means we have a 4th sentence that doesn't begin with JavaScript 🙂

Suggested change

featured_quote: JavaScript has come a long way from its humble origins as the last of the three web cornerstones—alongside CSS and HTML. Today, JavaScript has started to infiltrate a broad spectrum of the technical stack. JavaScript is no longer confined to the client-side—it's an increasingly popular choice for build tools and server-side scripting, and is creeping its way into the CDN layer as well thanks to edge computing solutions.

featured_quote: featured_quote: JavaScript has come a long way from its humble origins as the last of the three web cornerstones—alongside CSS and HTML. Today, JavaScript has started to infiltrate a broad spectrum of the technical stack. It is no longer confined to the client-side and it's an increasingly popular choice for build tools and server-side scripting. JavaScript is also creeping its way into the CDN layer as well thanks to edge computing solutions.

Thoughts/suggestions @tkadlec?

ibnesayeed · 2020-12-10T23:01:06Z

src/content/en/2020/javascript.md


-Developers love us some JavaScript. The [`script` element is the 6th most popular HTML element in use](./markup) (ahead of elements like `p`'s and `i`'s, among countless others). We spend around 14x as many bytes on it as we do on HTML, the building block of the web, and 6x as many bytes as CSS.
+JavaScript has come a long way from its humble origins as the last of the three web cornerstones, alongside CSS and HTML. Today, JavaScript has started to infiltrate a broad spectrum of the technical stack. JavaScript is no longer confined to the client-side—it's an increasingly popular choice for build tools and server-side scripting, and is creeping its way into the CDN layer as well thanks to edge computing solutions.


Same changes as above in the featured_quote.

ibnesayeed · 2020-12-10T23:07:54Z

src/content/en/2020/javascript.md

-JavaScript, by default, is parser blocking. In other words, when the browser discovers a script element, it must pause parsing of the HTML until the script has been downloaded, parsed and executed. It's a significant bottleneck and a common contributor to pages that are slow to render.
+By default, JavaScript is _parser-blocking_. In other words, when the browser discovers a `script` element, it must pause parsing of the HTML until the script has been downloaded, parsed, and executed. It's a significant bottleneck and a common contributor to pages that are slow to render.
+
+We can start to offset some of the cost of loading JavaScript by loading scripts either asynchronously, which only halts the HTML parser during the parse and execution phases and not during the download phase, or deferred, which doesn't halt the HTML parser at all. Both attributes are only available on external scripts—inline scripts cannot have them applied.


Suggested change

We can start to offset some of the cost of loading JavaScript by loading scripts either asynchronously, which only halts the HTML parser during the parse and execution phases and not during the download phase, or deferred, which doesn't halt the HTML parser at all. Both attributes are only available on external scripts—inline scripts cannot have them applied.

We can start to offset some of the cost of loading JavaScript by loading scripts either asynchronously (with the `async` attribute`), which only halts the HTML parser during the parse and execution phases and not during the download phase, or deferred (with the `defer` attribute`), which doesn't halt the HTML parser at all. Both attributes are only available on external scripts — inline scripts cannot have them applied.

ibnesayeed · 2020-12-10T23:10:21Z

src/content/en/2020/javascript.md


-On mobile, external scripts comprise 59.0% of all script elements found. _As an aside, when we talk about how much JavaScript is loaded on a page earlier, that total doesn't account for the size of these inline scripts—because they're part of the HTML document, they're counted against the markup size. This means we load even more script that the numbers show._
+<p class="note">
+  As an aside, when we talk about how much JavaScript is loaded on a page earlier, that total doesn't account for the size of these inline scripts—because they're part of the HTML document, they're counted against the markup size. This means we load even more script that the numbers show.


Suggested change

As an aside, when we talk about how much JavaScript is loaded on a page earlier, that total doesn't account for the size of these inline scripts—because they're part of the HTML document, they're counted against the markup size. This means we load even more script that the numbers show.

As an aside, when we talked about how much JavaScript is loaded on a page earlier, that total didn't account for the size of these inline scripts — because they're part of the HTML document, they're counted against the markup size. This means we load even more script that the numbers show.

tunetheweb · 2020-12-15T16:16:36Z

Anything comments @tkadlec ? Have a few things queue up so planning a release soon and can include this if you get a chance to review?

rviscomi · 2020-12-15T18:09:11Z

I'm going to merge this with the changes as-is so that we can deploy the editorial suggestions sooner than later. I've left the unedited flag set until we can resolve the remaining TODOs.

rviscomi added 5 commits December 9, 2020 20:07

fix 404

93f5da7

init

47a8eea

Merge branch 'main' into js

b0d208a

merge for real

1df2722

how much and where

c65d884

rviscomi added the editing Content excellence label Dec 10, 2020

rviscomi added this to the 2020 Content Writing milestone Dec 10, 2020

rviscomi requested a review from tkadlec December 10, 2020 20:25

rviscomi requested review from denar90 and ibnesayeed December 10, 2020 20:26

Optimised images with calibre/image-actions

8b32db1

rviscomi and others added 3 commits December 10, 2020 15:57

how do we load

b1a7370

Merge branch 'js' of github.com:HTTPArchive/almanac.httparchive.org i…

1126c39

…nto js

Optimised images with calibre/image-actions

16aaa82

rviscomi added 2 commits December 10, 2020 16:12

how do we serve

52f8f18

Merge branch 'js' of github.com:HTTPArchive/almanac.httparchive.org i…

c4472c4

…nto js

lex111 reviewed Dec 10, 2020

View reviewed changes

src/content/en/2020/javascript.md Outdated Show resolved Hide resolved

rviscomi and others added 2 commits December 10, 2020 17:03

what do we use

60b1e29

Optimised images with calibre/image-actions

9247d9e

ibnesayeed reviewed Dec 10, 2020

View reviewed changes

src/content/en/2020/javascript.md Outdated Show resolved Hide resolved

rviscomi added 3 commits December 10, 2020 17:08

impact

57c8684

Merge branch 'js' of github.com:HTTPArchive/almanac.httparchive.org i…

7bcc98f

…nto js

end

8729740

rviscomi marked this pull request as ready for review December 10, 2020 22:26

capitalize Gzip

852dea2

rviscomi assigned ibnesayeed, tkadlec and denar90 Dec 10, 2020

rviscomi requested a review from ibnesayeed December 10, 2020 22:28

fixing incomplete sentence

a268d04

rviscomi mentioned this pull request Dec 10, 2020

Edit 2020 Chapters #1432

Closed

22 tasks

rviscomi commented Dec 10, 2020

View reviewed changes

tunetheweb mentioned this pull request Dec 10, 2020

Replace gzip with Gzip and brotli with Brotli #1745

Merged

ibnesayeed reviewed Dec 10, 2020

View reviewed changes

tunetheweb mentioned this pull request Dec 12, 2020

Update javascript.md #1751

Closed

rviscomi mentioned this pull request Dec 15, 2020

Fix typo in "the" #1770

Closed

rviscomi added 2 commits December 15, 2020 13:06

add back the unedited label

4df5899

use the right unedited property

26bed44

rviscomi merged commit 2feceaf into main Dec 15, 2020

rviscomi deleted the js branch December 15, 2020 18:09

rviscomi mentioned this pull request Dec 16, 2020

Issue with the 2020 JavaScript chapter #1771

Closed

tkadlec mentioned this pull request Dec 16, 2020

Further edits to the JS chapter #1777

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

2020 JavaScript edits #1737

2020 JavaScript edits #1737

rviscomi commented Dec 10, 2020

rviscomi commented Dec 10, 2020

github-actions bot commented Dec 10, 2020

github-actions bot commented Dec 10, 2020

github-actions bot commented Dec 10, 2020

rviscomi Dec 10, 2020

tkadlec Dec 16, 2020 •

edited

Loading

rviscomi Dec 10, 2020

tkadlec Dec 16, 2020

rviscomi Dec 16, 2020

rviscomi Dec 10, 2020

tkadlec Dec 16, 2020

rviscomi Dec 16, 2020

tkadlec Dec 16, 2020

rviscomi Dec 10, 2020

ibnesayeed left a comment

ibnesayeed Dec 10, 2020

rviscomi Dec 10, 2020

tunetheweb Dec 10, 2020

ibnesayeed Dec 10, 2020

tunetheweb Dec 10, 2020

rviscomi Dec 11, 2020

ibnesayeed Dec 10, 2020

ibnesayeed Dec 10, 2020

ibnesayeed Dec 10, 2020

tunetheweb commented Dec 15, 2020 •

edited

Loading

rviscomi commented Dec 15, 2020


		It's worth noting that the detection issue that was noted last year still applies, and still impacts th results here. It's possible that there _has_ been a significant change in popularity for a few more of these tools, but we just don't see it with the way the data is currently collected.
		{# TODO(authors): Elaborate on what the detection issue was. #}


		Developers love us some JavaScript. The [`script` element is the 6th most popular HTML element in use](./markup) (ahead of elements like `p`'s and `i`'s, among countless others). We spend around 14x as many bytes on it as we do on HTML, the building block of the web, and 6x as many bytes as CSS.
		JavaScript has come a long way from its humble origins as the last of the three web cornerstones, alongside CSS and HTML. Today, JavaScript has started to infiltrate a broad spectrum of the technical stack. JavaScript is no longer confined to the client-side—it's an increasingly popular choice for build tools and server-side scripting, and is creeping its way into the CDN layer as well thanks to edge computing solutions.

	As an aside, when we talk about how much JavaScript is loaded on a page earlier, that total doesn't account for the size of these inline scripts—because they're part of the HTML document, they're counted against the markup size. This means we load even more script that the numbers show.
	As an aside, when we talked about how much JavaScript is loaded on a page earlier, that total didn't account for the size of these inline scripts — because they're part of the HTML document, they're counted against the markup size. This means we load even more script that the numbers show.

2020 JavaScript edits #1737

2020 JavaScript edits #1737

Conversation

rviscomi commented Dec 10, 2020

rviscomi commented Dec 10, 2020

github-actions bot commented Dec 10, 2020

github-actions bot commented Dec 10, 2020

github-actions bot commented Dec 10, 2020

Choose a reason for hiding this comment

tkadlec Dec 16, 2020 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ibnesayeed left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

tunetheweb commented Dec 15, 2020 • edited Loading

rviscomi commented Dec 15, 2020

tkadlec Dec 16, 2020 •

edited

Loading

tunetheweb commented Dec 15, 2020 •

edited

Loading