andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move HTML content under appropriate directory

Browse Source
This commit is contained in:
Angelos Chalaris
2023-05-20 14:20:22 +03:00
parent 1bf8ce8c23
commit acd5ca0edf
16 changed files with 9 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

43
snippets/js/s/async-defer.md
View File

@ -1,43 +0,0 @@
---
title: What is the difference between async and defer in script loading?
shortTitle: Async and defer
type: question
language: javascript
tags: [html]
author: chalarangelo
cover: coworking-space
excerpt: Understanding how to correctly load your JavaScript files can significantly improve your web application's performance.
dateModified: 2022-09-04T05:00:00-04:00
---
When it comes to loading JavaScript files, there are a few different options available. Understanding exactly how scripts are loaded and executed is crucial for website performance, as well as for the overall quality of the user experience. Let's take a look at how the `<script>` tag works and how certain attributes affect its behavior.
![Script loading visualization](./illustrations/async-defer.png)
### No attributes
More often than not, a plain `<script>` tag without attributes is what most people tend to start with. This implements the default browser behavior. The HTML will be parsed until the script tag is encountered. At this point, HTML parsing will be paused and the script will be loaded. The script will then be executed before HTML parsing can resume.
```html
<script src="script.js"></script>
```
As you can see, this method can cause a long pause in HTML parsing, resulting in a degraded user experience.
### The async attribute
To avoid a long pause in HTML parsing, the `async` attribute can be leveraged. This ensures that, when the script is encountered, parsing doesn't pause right away. Instead, the script is loaded in the background and only the HTML parsing is paused to execute it. HTML parsing resumes as usual after script execution is completed.
```html
<script src="script.js" async></script>
```
While the `async` attribute takes steps to mitigate the issue mentioned previously, it comes with an important caveat. Scripts loaded this way are not guaranteed to execute in the order specified, but rather as they become available when they are loaded.
### The defer attribute
Finally, the `defer` attribute builds on top of the previous behavior to guarantee order of execution for scripts. As previously, scripts are loaded in the background as they are encountered. When the HTML parsing finishes, they are then executed in order.
```html
<script src="script.js" defer></script>
```

33
snippets/js/s/target-blank.md
View File

@ -1,33 +0,0 @@
---
title: 'Tip: Protect your users from malicious websites when using target="_blank"'
shortTitle: 'Safeguarding target="_blank"'
type: tip
language: javascript
tags: [browser,security]
author: chalarangelo
cover: laptop-with-code
excerpt: Opening a link in a new tab comes with a security vulnerability that you may not be aware of. Protect your users with this simple trick.
dateModified: 2021-06-12T19:30:41+03:00
---
Oftentimes, when linking to an external resource from our websites, we use `target="_blank"` to open the linked page in a new tab or window. But there is a security risk we should be aware of. The new tab gains limited access to the linking page (i.e. our website) via `Window.opener`, which it can then use to alter the linking page's URL via `Window.opener.location` (this is known as tabnabbing).
This might be a problem if the external resource is not trustworthy, might have been hacked, the domain has changed owners over the years etc. There is no guarantee that a third-party resource, no matter how trustworthy, can be actually trusted with our users' security and we, as developers, should always be aware of this risk.
```html
<!-- Bad: susceptible to tabnabbing -->
<a href="https://externalresource.com/some-page" target="_blank">
External resource
</a>
<!-- Good: new tab cannot cause problems -->
<a
href="https://externalresource.com/some-page"
target="_blank"
rel="noopener noreferrer"
>
External resource
</a>
```
In order to prevent a link that is opened in a new tab from causing any trouble, we should always add the `rel="noopener noreferrer"` attribute to all of our `target="_blank"` links.