Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

What is JavaScript: use JS module instead of async/defer/DOMContentLoaded #34937

Merged
merged 6 commits into from
Jul 20, 2024
Merged

What is JavaScript: use JS module instead of async/defer/DOMContentLoaded #34937

merged 6 commits into from
Jul 20, 2024

Conversation

mb21
Copy link
Contributor

@mb21 mb21 commented Jul 20, 2024 •
edited
Loading

Description

On the What is JavaScript page of the introductory guide:

  • for internal script: place at the bottom of the </body>
  • for external script: place in the <head> but use JavaScript modules instead of async/defer/DOMContentLoaded

Motivation

  • we can remove the whole defer/async/DOMContentLoaded stuff which must be very confusing to beginners
  • all modern browsers (even Safari >= 11) support JS modules
  • when you're writing JavaScript without a transpiler (like you'll likely be when you're a beginner reading that page), you won't get very far without writing some JS that will break on IE and Safari < 11 anyway. Even the optional chaining operator requires Safari > 13.

Additional details

closes #33881

TODO:

@mb21 mb21 requested a review from a team as a code owner July 20, 2024 09:22
@mb21 mb21 requested review from Josh-Cena and removed request for a team July 20, 2024 09:22
@github-actions github-actions bot added Content:Learn:JavaScript Learning area JavaScript docs size/m [PR only] 51-500 LoC changed labels Jul 20, 2024
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Jul 20, 2024 •
edited
Loading

Preview URLs

Flaws (1)

Note! 2 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Web/HTML/Element/script
Title: <script>: The Script element
Flaw count: 1

  • macros:
    • /en-US/docs/Web/API/Fetch redirects to /en-US/docs/Web/API/Window/fetch
External URLs (2)

URL: /en-US/docs/Web/HTML/Element/script
Title: <script>: The Script element

(comment last updated: 2024-07-20 19:23:05)

@mb21 mb21 mentioned this pull request Jul 20, 2024
Closed
@Josh-Cena Josh-Cena requested a review from a team as a code owner July 20, 2024 15:05
@Josh-Cena Josh-Cena requested review from hamishwillee and removed request for a team July 20, 2024 15:05
@github-actions github-actions bot added the Content:PWA Progressive Web Apps content label Jul 20, 2024
mb21 and others added 2 commits July 20, 2024 20:57
@Josh-Cena Josh-Cena requested a review from a team as a code owner July 20, 2024 19:14
@Josh-Cena Josh-Cena requested review from estelle and removed request for a team July 20, 2024 19:14
@github-actions github-actions bot added the Content:HTML Hypertext Markup Language docs label Jul 20, 2024
Josh-Cena and others added 2 commits July 20, 2024 15:19
@Josh-Cena
Change
1311cbc
@Josh-Cena @mb21
Update files/en-us/learn/javascript/first_steps/what_is_javascript/in…
9d3f131 
…dex.md

Co-authored-by: Mauro Bieg <mb21@users.noreply.github.com>
Josh-Cena
Josh-Cena approved these changes Jul 20, 2024
View reviewed changes
Copy link
Member

@Josh-Cena Josh-Cena left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mb21 I like this new structure. What do you think? Is this ready for merge?

@Josh-Cena Josh-Cena merged commit e979646 into mdn:main Jul 20, 2024
8 checks passed
@mb21 mb21 deleted the patch-2 branch July 21, 2024 06:22
@mb21
Copy link
Contributor Author

mb21 commented Jul 21, 2024 •
edited
Loading

Oh, that was fast! Cool. Only one gotcha: I've updated the two example scripts mentioned above, and due to CORS, of course the external script works only if you spin up a local server and not by just opening the file in your browser with file:///. There was a lengthy discussion on whether this was a good idea, but here we are.

It's a bit of a bummer for the intro, but considering that actually lots of things only will work on the same origin, perhaps it's good to introduce that concept early? On mac and many Linux distros, python is already pre-installed and you can do python3 -m http.server. But on Windows, you need to either install python or mongoose.ws. Or if we wanna stick closer to the JavaScript ecosystem there is Deno's deno install --allow-net --allow-read https://deno.land/std/http/file_server.ts (no Node.js equivalent without an npm package I fear).

@Josh-Cena
Copy link
Member

Josh-Cena commented Jul 21, 2024 •
edited
Loading

Oh! Bummers. I totally forgot about CORS. I think we need to mention that here, and link to https://developer.mozilla.org/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server. Would you like to do it?

@mb21 mb21 mentioned this pull request Jul 21, 2024
Merged
@mb21
Copy link
Contributor Author

mb21 commented Jul 21, 2024

done:

@mb21 mb21 mentioned this pull request Jul 21, 2024
Merged
pepelsbey pushed a commit to mdn/learning-area that referenced this pull request Aug 22, 2024
@mb21
Update what-is-js examples according to guide (#752)
71e884b 
change examples according to update in
mdn/content#34937
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@Josh-Cena Josh-Cena Josh-Cena approved these changes

@github-actions github-actions[bot] github-actions[bot] left review comments

@hamishwillee hamishwillee Awaiting requested review from hamishwillee hamishwillee is a code owner automatically assigned from mdn/yari-content-mdn

@estelle estelle Awaiting requested review from estelle estelle is a code owner automatically assigned from mdn/yari-content-html

Assignees
No one assigned
Labels
Content:HTML Hypertext Markup Language docs Content:Learn:JavaScript Learning area JavaScript docs Content:PWA Progressive Web Apps content size/m [PR only] 51-500 LoC changed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Placement of script elements for inline scripts
2 participants
@mb21 @Josh-Cena