Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -139,15 +139,10 @@ var shaderMaterial = new THREE.ShaderMaterial( {

This shader material takes the code from the scripts and applies it to the object the material is assigned to.

Then, in the line that defines the cube we need to replace the `basicMaterial`:

```js
var cube = new THREE.Mesh(boxGeometry, basicMaterial);
```

...with the newly created `shaderMaterial`:
Then, in the line that defines the cube we need to replace the `basicMaterial` with the newly created `shaderMaterial`:

```js
// var cube = new THREE.Mesh(boxGeometry, basicMaterial);
var cube = new THREE.Mesh(boxGeometry, shaderMaterial);
```

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/glossary/network_throttling/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ tags:

It's important not to overlook network conditions users experience on mobile. The internet speeds for developers creating web applications in a corporate office building on a powerful computer are generally very fast. As a developer, tech writer, or designer, this is likely your experience. The network speeds of a mobile user accessing that web application, possibly while traveling or in a remote area with poor data plan coverage, will likely be very slow, if they are able to get online at all. Network throttling enables a developer to emulate an experience of a user. Most browser developer tools, such as the browser inspector, provide a function to emulate different network conditions. By emulating your user's experience via network throttling, you can more readily identify and fix load time issues.

Browser developer tools generally have network throttling options, to allow you to test your app under slow network conditions. Firefox's developer tools for example have a drop-down menu available in both the [Network Monitor](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html) and [Responsive Design Mode](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html) containing network speed options (e.g. Wi-Fi, good 3G, 2G...)
Browser developer tools generally have network throttling options, to allow you to test your app under slow network conditions. Firefox's developer tools for example have a drop-down menu available in both the [Network Monitor](https://firefox-source-docs.mozilla.org/devtools-user/network_monitor/index.html) and [Responsive Design Mode](https://firefox-source-docs.mozilla.org/devtools-user/responsive_design_mode/index.html) containing network speed options (e.g. Wi-Fi, good 3G, 2G)

## See also

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -94,11 +94,11 @@ In this example, look at the image (B1) right underneath the header. It's relate

### It's a trap

**[MICA](https://www.mica.edu/about-mica/)**. This is a bit trickier. It looks like a three-column layout...
**[MICA](https://www.mica.edu/about-mica/)**. This is a bit trickier. It looks like a three-column layout:

![Example of a false 3 columns layout](screenshot-education.jpg) ![It looks like a 3 columns layout but actually, the aside content is floating around.](screenshot-education-overlay.jpg)

...but it's not. B1 and B2 float around the main content. Remember that word "float"--it will ring a bell when you start learning about {{Glossary("CSS")}}.
But it's not! B1 and B2 float around the main content. Remember that word "float"--it will ring a bell when you start learning about {{Glossary("CSS")}}.

Why would you think it's a three-column layout? Because the image on the top-right is L-shaped, because B1 looks like a column supporting the shifted main content, and because the "M" and "I" of the MICA logo create a vertical line of force.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -140,10 +140,10 @@ Here, costs depend on multiple factors, such as:
- Is this a simple website with a few pages of text? Or a more complex, thousand-pages-long website?
- Will you want to update it regularly? Or will it be a static website?
- Must the website connect to your company's IT structure to gather content (say, internal data)?
- Do you want some shiny new feature that is the rage of the moment? At the time of writing, clients are seeking single pages with complex parallax
- Will you need the agency to think up user stories or solve complex {{Glossary("UX")}} problems? For example, creating a strategy to engage users, or A/B testing to choose a solution among several ideas
- Do you want some shiny new feature that is popular at the moment? At the time of writing, clients are seeking single pages with complex parallax.
- Will you need the agency to think up user stories or solve complex {{Glossary("UX")}} problems? For example, creating a strategy to engage users, or A/B testing to choose a solution among several ideas.

...and for hosting:
And for hosting you need ot consider following choices:

- Do you want redundant servers, in case your server goes down?
- Is 95% reliability adequate, or do you need professional, around-the-clock service?
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ This article explains how to set up a simple local testing server on your machin

## Local files vs. remote files

Throughout most of the learning area, we tell you to just open your examples directly in a browser — this can be done by double clicking the HTML file, dragging and dropping it into the browser window, or choosing _File_ > _Open..._ and navigating to the HTML file. There are many ways to achieve this.
Throughout most of the learning area, we tell you to just open your examples directly in a browser — this can be done by double clicking the HTML file, dragging and dropping it into the browser window, or choosing _File_ > _Open_ and navigating to the HTML file. There are many ways to achieve this.

If the web address path starts with `file://` followed by the path to the file on your local hard drive, a local file is being used. In contrast, if you view one of our examples hosted on GitHub (or an example on some other remote server), the web address will start with `http://` or `https://`, to show that the file has been received via HTTP.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ Let's first look at `http://demozilla.examplehostingprovider.net/` — as you ca

To connect your SFTP client to the distant server, follow these steps:

1. Choose _File > Site Manager..._ from the main menu.
1. Choose _File > Site Manager_ from the main menu.
2. In the _Site Manager_ window, press the _New Site_ button, then fill in the site name as **demozilla** in the provided space.
3. Fill in the SFTP server your host provided in the _Host:_ field.
4. In the _Logon Type:_ drop down, choose _Normal_, then fill in your provided username and password in the relevant fields.
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ To solve all those problems we use human-readable addresses called domain names.

### Structure of domain names

A domain name has a simple structure made of several parts (it might be one part only, two, three...), separated by dots and **read from right to left**:
A domain name has a simple structure made of several parts (it might be one part only, two, three), separated by dots and **read from right to left**:

![Anatomy of the MDN domain name](structure.png)

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/learn/css/css_layout/positioning/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -192,7 +192,7 @@ First of all, note that the gap where the positioned element should be in the do

Second, notice that the position of the element has changed. This is because {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} behave in a different way with absolute positioning. Rather than positioning the element based on its relative position within the normal document flow, they specify the distance the element should be from each of the containing element's sides. So in this case, we are saying that the absolutely positioned element should sit 30px from the top of the "containing element" and 30px from the left. (In this case, the "containing element" is the **initial containing block**. See the section below for more information)

> **Note:** You can use {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} to resize elements if you need to. Try setting `top: 0; bottom: 0; left: 0; right: 0;` and `margin: 0;` on your positioned elements and see what happens! Put it back again afterwards...
> **Note:** You can use {{cssxref("top")}}, {{cssxref("bottom")}}, {{cssxref("left")}}, and {{cssxref("right")}} to resize elements if you need to. Try setting `top: 0; bottom: 0; left: 0; right: 0;` and `margin: 0;` on your positioned elements and see what happens! Put it back again afterwards

> **Note:** Yes, margins still affect positioned elements. Margin collapsing doesn't, however.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -394,7 +394,7 @@ There's a lot going on here — let's discuss it bit by bit:
- Next, we set a fixed {{cssxref("width")}} on the panel, and make its {{cssxref("height")}} the entire height of the browser viewport.
- We also include some horizontal {{cssxref("padding")}} to space it out a bit.
- Next we set {{cssxref("position")}}`: fixed;` on the panel so it will always appear in the same place, even if the page has content to scroll. We glue it to the {{cssxref("top")}} of the viewport, and set it so that by default it is offscreen to the {{cssxref("right")}}.
- Finally, we set a {{cssxref("transition")}} on the element. Transitions are an interesting feature that allow you to make changes between states happen smoothly, rather than just going "on", "off" abruptly. In this case we are intending to make the panel slide smoothly onscreen when the checkbox is checked. (Or to put it another way, when the question mark icon is clicked — remember, clicking the `<label>` will check the associated checkbox! We told you it was a hack.) You will learn a lot more about...
- Finally, we set a {{cssxref("transition")}} on the element. Transitions are an interesting feature that allow you to make changes between states happen smoothly, rather than just going "on", "off" abruptly. In this case we are intending to make the panel slide smoothly onscreen when the checkbox is checked. (Or to put it another way, when the question mark icon is clicked — remember, clicking the `<label>` will check the associated checkbox! We told you it was a hack.) You will learn a lot more about

### Setting the checked state

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/learn/forms/styling_web_forms/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,7 @@ Some elements can be styled with few if any problems across platforms. These inc

1. {{HTMLElement("form")}}
2. {{HTMLElement("fieldset")}} and {{HTMLElement("legend")}}
3. Single-line text {{HTMLElement("input")}}s (e.g. type text, url, email...), except for [`<input type="search">`](/en-US/docs/Web/HTML/Element/input/search).
3. Single-line text {{HTMLElement("input")}}s (e.g. type text, url, email), except for [`<input type="search">`](/en-US/docs/Web/HTML/Element/input/search).
4. Multi-line {{HTMLElement("textarea")}}
5. Buttons (both {{HTMLElement("input")}} and {{HTMLElement("button")}})
6. {{HTMLElement("label")}}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ Next, let's look at what structure our test site should have. The most common th
3. **`styles` folder**: This folder will contain the CSS code used to style your content (for example, setting text and background colors). Create a folder called `styles`, inside your `test-site` folder.
4. **`scripts` folder**: This folder will contain all the JavaScript code used to add interactive functionality to your site (e.g. buttons that load data when clicked). Create a folder called `scripts`, inside your `test-site` folder.

> **Note:** On Windows computers, you might have trouble seeing the file names, because Windows has an option called **Hide extensions for known file types** turned on by default. Generally, you can turn this off by going to Windows Explorer, selecting the **Folder options...** option, unchecking the **Hide extensions for known file types** check box, then clicking **OK**. For more specific information covering your version of Windows, you can search on the web.
> **Note:** On Windows computers, you might have trouble seeing the file names, because Windows has an option called **Hide extensions for known file types** turned on by default. Generally, you can turn this off by going to Windows Explorer, selecting the **Folder options** option, unchecking the **Hide extensions for known file types** check box, then clicking **OK**. For more specific information covering your version of Windows, you can search on the web.

## File paths

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ To choose a color, go to [the Color Picker](/en-US/docs/Web/CSS/CSS_Colors/Color
To choose an image, go to [Google Images](https://www.google.com/imghp?gws_rd=ssl) and search for something suitable.

1. When you find the image you want, click on the image to get an enlarged view of it.
2. Right-click the image (Ctrl + click on a Mac), choose _Save Image As..._, and choose a safe place to save your image. Alternatively, copy the image's web address from your browser's address bar for later use.
2. Right-click the image (Ctrl + click on a Mac), choose _Save Image As_, and choose a safe place to save your image. Alternatively, copy the image's web address from your browser's address bar for later use.

![](updated-google-images.png)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -165,11 +165,11 @@ Note: Even though these attributes do help a lot the first time a page is loaded

- `{{htmlelement('head')}}`

- `{{htmlelement('link')}}` ...
- `{{htmlelement('link')}}`

CSS files required for page appearance. Minimize the number of files for performance while keeping unrelated CSS in separate files for maintenance.

- `{{htmlelement('script')}}` ...
- `{{htmlelement('script')}}`

JavaScript files for functions **required** during the loading of the page, but not any interaction related JavaScript that can only run after page loads.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -938,17 +938,17 @@ textarea.onkeyup = function(){

{{ EmbedLiveSample('Active_learning_Lets_be_important', 700, 520, "", "") }}

### Italic, bold, underline...
### Italic, bold, underline

The elements we've discussed so far have clearcut associated semantics. The situation with {{htmlelement("b")}}, {{htmlelement("i")}}, and {{htmlelement("u")}} is somewhat more complicated. They came about so people could write bold, italics, or underlined text in an era when CSS was still supported poorly or not at all. Elements like this, which only affect presentation and not semantics, are known as **presentational elements** and should no longer be used because, as we've seen before, semantics is so important to accessibility, SEO, etc.

HTML5 redefined `<b>`, `<i>`, and `<u>` with new, somewhat confusing, semantic roles.

Here's the best rule you can remember: It's likely appropriate to use `<b>`, `<i>`, or `<u>` to convey a meaning traditionally conveyed with bold, italics, or underline, provided there is no more suitable element. However, it always remains critical to keep an accessibility mindset. The concept of italics isn't very helpful to people using screen readers, or to people using a writing system other than the Latin alphabet.

- {{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: foreign words, taxonomic designation, technical terms, a thought...
- {{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: keywords, product names, lead sentence...
- {{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: proper name, misspelling...
- {{HTMLElement('i')}} is used to convey a meaning traditionally conveyed by italic: foreign words, taxonomic designation, technical terms, a thought
- {{HTMLElement('b')}} is used to convey a meaning traditionally conveyed by bold: keywords, product names, lead sentence
- {{HTMLElement('u')}} is used to convey a meaning traditionally conveyed by underline: proper name, misspelling

> **Note:** People strongly associate underlining with hyperlinks. Therefore, on the web, it's best to underline only links. Use the `<u>` element when it's semantically appropriate, but consider using CSS to change the default underline to something more appropriate on the web. The example below illustrates how it can be done.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ We've already seen the {{htmlelement("title")}} element in action — this can b
1. To start off this active learning, we'd like you to go to our GitHub repo and download a copy of our [title-example.html page](https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/the-html-head/title-example.html). To do this, either

1. Copy and paste the code out of the page and into a new text file in your code editor, then save it in a sensible place.
2. Press the "Raw" button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser's *Save Page As...* menu and choose a sensible place to save the file.
2. Press the "Raw" button on the GitHub page, which causes the raw code to appear (possibly in a new browser tab). Next, choose your browser's *Save Page As* menu and choose a sensible place to save the file.

2. Now open the file in your browser. You should see something like this:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -241,7 +241,7 @@ This example includes the basic essentials needed to use an `<iframe>`:

### Security concerns

Above we mentioned security concerns — let's go into this in a bit more detail now. We are not expecting you to understand all of this content perfectly the first time; we just want to make you aware of this concern, and provide a reference to come back to as you get more experienced and start considering using `<iframe>`s in your experiments and work. Also, there is no need to be scared and not use `<iframe>`s — you just need to be careful. Read on...
Above we mentioned security concerns — let's go into this in a bit more detail now. We are not expecting you to understand all of this content perfectly the first time; we just want to make you aware of this concern, and provide a reference to come back to as you get more experienced and start considering using `<iframe>`s in your experiments and work. Also, there is no need to be scared and not use `<iframe>`s — you just need to be careful. Read on

Browser makers and Web developers have learned the hard way that iframes are a common target (official term: **attack vector**) for bad people on the Web (often termed **hackers**, or more accurately, **crackers**) to attack if they are trying to maliciously modify your webpage, or trick people into doing something they don't want to do, such as reveal sensitive information like usernames and passwords. Because of this, spec engineers and browser developers have developed various security mechanisms for making `<iframe>`s more secure, and there are also best practices to consider — we'll cover some of these below.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -237,7 +237,7 @@ Promise.all([fetchPromise1, fetchPromise2, fetchPromise3])
});
```

...then we can expect the `catch()` handler to run, and we should see something like:
Then we can expect the `catch()` handler to run, and we should see something like:

```
Failed to fetch: TypeError: Failed to fetch
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,9 @@ Pretty much anytime you make use of a JavaScript structure that features a pair

## Built-in browser functions

We've made use of functions built in to the browser a lot in this course. Every time we manipulated a text string, for example:
We've used functions built in to the browser a lot in this course.

Every time we manipulated a text string, for example:

```js
const myText = 'I am a string';
Expand All @@ -72,15 +74,15 @@ console.log(madeAString);
// string, and returns this new string
```

Or every time we generated a random number:
Or every time we generate a random number:

```js
const myNumber = Math.random();
// the random() function generates a random number between
// 0 and up to but not including 1, and returns that number
```

...we were using a function!
We were using a _function_!

> **Note:** Feel free to enter these lines into your browser's JavaScript console to re-familiarize yourself with their functionality, if needed.

Expand Down
Loading