diff --git a/.github/workflows/spelling-check-bot.yml b/.github/workflows/spelling-check-bot.yml index a81250fc2f262cb..cc04cb4776acc40 100644 --- a/.github/workflows/spelling-check-bot.yml +++ b/.github/workflows/spelling-check-bot.yml @@ -9,6 +9,8 @@ jobs: sync: if: github.repository == 'mdn/content' runs-on: ubuntu-latest + permissions: + issues: write steps: - uses: actions/checkout@v4 @@ -21,36 +23,32 @@ jobs: - name: Run scripts run: | - npm install echo Running spelling check... output=$(npx cspell --no-progress --gitignore --config .vscode/cspell.json "**/*.md" || exit 0) - output=$(node scripts/linkify-logs.js "${output}") - output=$(echo "$output" | sed 's/^/- /') - echo "$output" - echo "OUTPUT<> $GITHUB_ENV - echo "$output" >> $GITHUB_ENV - echo "EOF" >> $GITHUB_ENV + if [ -n "${output}" ]; then + output=$(node scripts/linkify-logs.js "${output}") + output=$(echo "$output" | sed 's/^/- /') + echo "$output" + echo "OUTPUT<> $GITHUB_ENV + echo "$output" >> $GITHUB_ENV + echo "EOF" >> $GITHUB_ENV + else + echo "No typos found! 🎉" + fi - name: Report spellcheck errors if: env.OUTPUT != '' run: | - comment_body=$(cat< [!TIP] - > To exclude words from the spellchecker, you can add valid words (web technology terms or abbreviations) to the [terms-abbreviations.txt](https://github.com/mdn/content/blob/main/.vscode/terms-abbreviations.txt) dictionary for IDE autocompletion. To ignore strings that are not words (\`AABBCC\` in code, for instance), you can add them to [ignore-list.txt](https://github.com/mdn/content/blob/main/.vscode/ignore-list.txt). - EOM - ) - comment_body+=$'\n\n'$(echo "_(comment last updated: $(date +'%Y-%m-%d %H:%M:%S'))_") - gh api \ - --method PATCH \ - -H "Accept: application/vnd.github+json" \ - -H "X-GitHub-Api-Version: 2022-11-28" \ - /repos/mdn/content/issues/35634 \ - -f "state=open" \ - -f "body=${comment_body}" + issue=$(gh issue create --title "$TITLE" --label "$LABELS" --body "$BODY") + echo Issue URL ${issue} env: - OUTPUT: ${{ env.OUTPUT }} - GH_TOKEN: ${{ github.token }} + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + TITLE: Weekly spelling check + LABELS: reported by automation,good first issue + BODY: | + Typos and unknown words: + + ${{ env.OUTPUT }} + + > [!TIP] + > To exclude words from the spellchecker, you can add valid words (web technology terms or abbreviations) to the [terms-abbreviations.txt](https://github.com/mdn/content/blob/main/.vscode/terms-abbreviations.txt) dictionary for IDE autocompletion. To ignore strings that are not words (\`AABBCC\` in code, for instance), you can add them to [ignore-list.txt](https://github.com/mdn/content/blob/main/.vscode/ignore-list.txt). diff --git a/.vscode/cspell.json b/.vscode/cspell.json index 6d39a7623bd6a12..0710edc9c1e1465 100644 --- a/.vscode/cspell.json +++ b/.vscode/cspell.json @@ -64,7 +64,6 @@ "favourite-colour", "ucaf:.*\"" ], - "allowCompoundWords": true, "dictionaryDefinitions": [ { "name": "terms-abbreviations", diff --git a/.vscode/ignore-list.txt b/.vscode/ignore-list.txt index 5393e3158c605ba..8910def71fe49c5 100644 --- a/.vscode/ignore-list.txt +++ b/.vscode/ignore-list.txt @@ -1,3 +1,238 @@ +aaabcc +aabaac +aacbbbcac +ACCEPTEDTOS +accname +adduser +adjtimescapheight +adjtimesexheight +adrianroselli +advertisementreceived +aggregatable +alastairc +alistapart +ALLOWFROM +alphanumerals +Animometer +Annonay +antialiasing +apacheconf +apachectl +ASCIIID +assetlinks +audiocontext +beforeinstallpromptevent +beforetoggle +belgin +blockable +brians +Browsersync +browsingtopics +bytestring +CACHEDIR +catchable +Caterina +characterboundsupdate +Cheatsheet +checkboard +checkmarks +clipboardchange +Codelab +collectability +collinearity +concatenator +contenido +contentlost +contentscripts +contentvisibilityautostatechange +controlbar +cookieless +cooluser +crashextensions +credentialled +crookedtimber +cssgridgarden +csstricks +Cubehelix +cubemaps +currentscreenchange +customstateset +cycletracker +davidwalsh +demuxing +Descripton +dropshow +enablei +Engish +Ethere +everytime +evilsite +examplestyles +Fairchild +fencedframe +fencedframeconfig +fencedframes +filetext +filterfunctions +Flagfox +forwidth +gattserverdisconnected +generatable +GETMATCHEDRULES +givenname +greenblue +greenzero +growshrink +harpercollins +highspeed +imagebad +imagegrid +infobox +infoboxes +infobox's +innertext +interarrival +ipados +jamiedoe +Jinping +Kobabe +lazyloaded +letmein +lightpurple +Lindenberg +linecaps +longwinded +loopstarted +lowdelay +macaron +Malala +mathit +maxplaybackrate +megastore +metastring +miplevel +Miroslav +Misparsed +modulepreloaded +montecarlo +mouseentry +multifactor +multimemory +mygroupmarker +mysampler +mystatename +navigables +nextslide +Nodepad +noteblocks +notrendered +Nowrapping +offsetted +ontextformatupdate +ontextupdate +pagereveal +pageswap +paintable +paintsize +papermakers +permissionspolicy +pipline +Platformer +playbackrate +popovertarget +popovertargetaction +precache +precached +precaches +precaching +preconnects +preloaders +premultiplication +prerenderingchange +prerenders +previousslide +pricelist +properities +pythonanywhere +pythonaware +rawupdate +readonlyinline +realpython +redblue +redyellow +redzero +requireinteraction +reselecting +Resizeable +resnapped +Ronaldo +rtctransform +samplepay +scanability +screenreaders +screenschange +seecompattable +selectchange +selectedness +Serpentina +shadowrootdelegatesfocus +shadowrootmode +shadowrootserializable +sharedmem +sharpyuv +shortlinks +shrinkwap +shrinkwrapping +sinkchange +smashingmagazine +Snapshotting +somestate +srihash +stackexchange +Stormys +Stratford +styleable +subformula +subformulas +subheaders +subpattern +subpopover +subproject +Subsentence +subsetting +subteam +subteams +sunsetting +supersets +swashoff +targettable +textformatupdate +textupdate +timeframe +truthyness +tunetheweb +tutsplus +underliner +underlyingly +usecase +useinbandfec +valuechange +viewbox +virtualkeyboardpolicy +webappmanifest +webbundle +webcodecs +webdav +webdesignerdepot +webidentity +webtransport +whitepoint +wisedog +workgroups +writingsuggestions +zeroblue +zeroyellow +zerozero Amit Scrimba rvfc @@ -1123,6 +1358,7 @@ Digi Digianswer dignissim Dijit +dimoulis dinocons dinodescr Dinos @@ -1663,6 +1899,7 @@ Freecodecamp Freemium Freetype Freitag +Frida fringilla fringille fromcharcode @@ -2368,6 +2605,7 @@ JXON Kadir Kadlec kaios +Kahlo Kakao Kaku Kaply @@ -3778,7 +4016,6 @@ quaxxor queryphrase queryset querysets -querystring quibusdam QUIC quickbrownfox diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 8191cf8689d3daa..f3417c8bdcd3588 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -11660,6 +11660,7 @@ /en-US/docs/Web/CSS/linear-gradient() /en-US/docs/Web/CSS/gradient/linear-gradient /en-US/docs/Web/CSS/margin-new /en-US/docs/Web/CSS/margin /en-US/docs/Web/CSS/margin_collapsing /en-US/docs/Web/CSS/CSS_box_model/Mastering_margin_collapsing +/en-US/docs/Web/CSS/masonry-auto-flow /en-US/docs/Web/CSS/grid-auto-flow /en-US/docs/Web/CSS/max() /en-US/docs/Web/CSS/max /en-US/docs/Web/CSS/media /en-US/docs/Web/CSS/@media /en-US/docs/Web/CSS/media/Bitmap /en-US/docs/Web/CSS/@media diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 456ff226877a4a4..72b85829ee65537 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -86802,10 +86802,6 @@ "Heycam" ] }, - "Web/CSS/masonry-auto-flow": { - "modified": "2020-11-12T04:50:46.255Z", - "contributors": ["rachelandrew", "chrisdavidmills"] - }, "Web/CSS/math-style": { "modified": "2020-12-12T22:36:34.292Z", "contributors": ["sideshowbarker", "chrisdavidmills", "rachelandrew"] diff --git a/files/en-us/games/publishing_games/game_distribution/index.md b/files/en-us/games/publishing_games/game_distribution/index.md index 77d6d4d998e9a9d..b723c79fbf92300 100644 --- a/files/en-us/games/publishing_games/game_distribution/index.md +++ b/files/en-us/games/publishing_games/game_distribution/index.md @@ -56,7 +56,7 @@ If you're working on a side project just for fun, then leaving the source open w As the name may suggest, publishers can handle the publishing of your game for you. Whether you should go that way or not depends on what your plan is for having your game distributed: Do you want to send it wherever possible, or do you want to restrict its presence to those who've bought an [exclusive license](/en-US/docs/Games/Publishing_games/Game_monetization)? It's up to you. Consider various options, experiment and conclude. Publishers will be explained in more detail in the [monetization](/en-US/docs/Games/Publishing_games/Game_monetization) article. -There are also independent portals collecting interesting games like [HTML5Games.com](https://html5games.com/), [GameArter.com](https://www.gamearter.com/), [MarketJS.com](https://www.marketjs.com/), [GameFlare](https://distribution.gameflare.com/), [GameDistribution.com](https://gamedistribution.com/), [Poki](https://developers.poki.com/), or [CrazyGames](https://developer.crazygames.com/) where you can send your game in and it will get some natural promotion because of the big traffic those sites attract. Some of these take your files and host them on their server, whereas others only link to your website or embed your game on their site. Such exposure may just provide [promotion](/en-US/docs/Games/Publishing_games/Game_promotion) for your game, or if you have adverts shown beside your game (or other money making options) it may also provide monetization. +There are also independent portals collecting interesting games like [HTML5Games.com](https://html5games.com/), [GameArter.com](https://www.gamearter.com/), [MarketJS.com](https://www.marketjs.com/), [GameFlare](https://distribution.gameflare.com/), [GameDistribution.com](https://gamedistribution.com/), [GameSaturn.com](https://gamesaturn.com/), [Poki](https://developers.poki.com/), or [CrazyGames](https://developer.crazygames.com/) where you can send your game in and it will get some natural promotion because of the big traffic those sites attract. Some of these take your files and host them on their server, whereas others only link to your website or embed your game on their site. Such exposure may just provide [promotion](/en-US/docs/Games/Publishing_games/Game_promotion) for your game, or if you have adverts shown beside your game (or other money making options) it may also provide monetization. ### Web and native stores diff --git a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md index f47088ba36062b0..b9d8454c21a9398 100644 --- a/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md +++ b/files/en-us/games/techniques/3d_on_the_web/building_up_a_basic_demo_with_three.js/index.md @@ -15,7 +15,7 @@ A typical 3D scene in a game — even the simplest one — contains standard ite To start developing with Three.js, you should make sure you are using a modern browser with good [WebGL](/en-US/docs/Web/API/WebGL_API) support, such as the latest Firefox or Chrome. -You can download the [latest Three.js library](https://github.com/mrdoob/three.js/archive/master.zip) and copy the minified version of Three.js from the uncompressed archive at `build/three.module.min.js` into your project. +You can download the [latest Three.js library](https://codeload.github.com/mrdoob/three.js/zip/refs/heads/master) and copy the minified version of Three.js from the uncompressed archive at `build/three.module.min.js` into your project. Bear in mind that the archives include source files, which makes the download size approximately 350MB. Alternatively, you can import Three.js [using a CDN or use Node.js](https://threejs.org/docs/#manual/en/introduction/Installation). diff --git a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md index 0c090e4d3732821..ff75aae02ffde30 100644 --- a/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md +++ b/files/en-us/games/tutorials/2d_breakout_game_pure_javascript/create_the_canvas_and_draw_on_it/index.md @@ -132,7 +132,7 @@ ctx.closePath(); ctx.beginPath(); ctx.rect(160, 10, 100, 40); -ctx.strokeStyle = "rgba(0, 0, 255, 0.5)"; +ctx.strokeStyle = "rgb(0 0 255 / 0.5)"; ctx.stroke(); ctx.closePath(); ``` diff --git a/files/en-us/glossary/bfcache/index.md b/files/en-us/glossary/bfcache/index.md index f53172c9775ef77..8138a420184025b 100644 --- a/files/en-us/glossary/bfcache/index.md +++ b/files/en-us/glossary/bfcache/index.md @@ -8,7 +8,7 @@ page-type: glossary-definition The **back/forward** cache, or **bfcache**, is a performance-enhancing feature available in modern browsers that enables instant back and forward navigation between previously-visited pages. It does this by storing a complete snapshot of a page as the user navigates away from it; the browser can then quickly restore the snapshot if the user decides to return to it, rather than needing to repeat the network requests required to load the page. -The snapshot contains the entire page in memory, including the JavaScript heap; in-progess code is paused when the user navigates away and resumed when they return to the page. A regular HTTP cache entry on the other hand contains only responses to previous requests. The bfcache therefore provides faster results than the HTTP cache. +The snapshot contains the entire page in memory, including the JavaScript heap; in-progress code is paused when the user navigates away and resumed when they return to the page. A regular HTTP cache entry on the other hand contains only responses to previous requests. The bfcache therefore provides faster results than the HTTP cache. The downside is that bfcache entries require more resources, and create complexity in terms of how to represent in-progress code. Some code features (for example the [`unload`](/en-US/docs/Web/API/Window/unload_event) handler) are not compatible, so their presence on a page blocks it from using the bfcache. diff --git a/files/en-us/glossary/blink_element/index.md b/files/en-us/glossary/blink_element/index.md new file mode 100644 index 000000000000000..3683430bffab63c --- /dev/null +++ b/files/en-us/glossary/blink_element/index.md @@ -0,0 +1,39 @@ +--- +title: blink element ( tag) +slug: Glossary/blink_element +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +The **`` element** (blink tag) is an obsolete HTML feature no longer supported by web browsers, and no longer documented on MDN. It was used make text content blink on and off (flash) continually. + +## Brief history + +In the early days of the web (the early- to mid-90s), there were not many features available for styling web pages. The [CSS](/en-US/docs/Web/CSS) specification (version 1) was first released in 1996, and not adopted consistently by browsers until much later. Before CSS, browsers experimented with several features to make particular text sections stand out and grab the user's attention if desired. The `` element was one of these, introduced in early versions of [Netscape Navigator](/en-US/docs/Glossary/Netscape_Navigator); [Internet Explorer's](/en-US/docs/Glossary/Microsoft_Internet_Explorer) {{htmlelement("marquee")}} element was another one. + +The `` element was apparently created after a conversation in a bar in Mountain View between Netscape engineer [Lou Montulli](https://en.wikipedia.org/wiki/Lou_Montulli) and colleagues. When he went into the office the next morning, he found that one of his fellow engineers have stayed up all night and implemented it ([read the story here](https://web.archive.org/web/20220331020029/http://www.montulli.org/theoriginofthe%3Cblink%3Etag)). + +While initially popular, `` became much maligned because of overuse; many people found it annoying. More importantly, it degrades readability, and can be particularly problematic for users with visual impairments or [cognitive disorders](/en-US/docs/Web/Accessibility/Cognitive_accessibility) such as epilepsy or ADHD. It can be disorienting or, in the worst cases, even [trigger seizures](/en-US/docs/Web/Accessibility/Seizure_disorders). + +`` was never properly specified, and never achieved significant cross-browser support. It can be considered a piece of web history. + +## Syntax + +The `` element was used like this: + +```html example-bad +In ancient browsers, I may have blinked +``` + +### Alternatives + +- The CSS {{cssxref("text-decoration-line")}} property has a `blink` value that should have the same effect, but most modern browsers ignore it. +- The JavaScript {{jsxref("String.blink()")}} method wraps a text string in `` tags but, as discussed earlier, this element is no longer supported anywhere. +- [CSS animations](/en-US/docs/Web/CSS/CSS_animations) could still be used to create blinking text. However, you should avoid blinking text on web pages for the reasons discussed above. + +## See also + +- [Blink element](https://en.wikipedia.org/wiki/Blink_element) on Wikipedia +- [WCAG 2.2.2: Pause, Stop, Hide](https://www.w3.org/WAI/WCAG21/Understanding/pause-stop-hide) +- [WCAG 2.3.1: Three Flashes or Below Threshold](https://www.w3.org/WAI/WCAG21/Understanding/three-flashes-or-below-threshold) diff --git a/files/en-us/glossary/boolean/html/index.md b/files/en-us/glossary/boolean/html/index.md index e296811a3dc4506..14de1fd571c1184 100644 --- a/files/en-us/glossary/boolean/html/index.md +++ b/files/en-us/glossary/boolean/html/index.md @@ -2,7 +2,6 @@ title: Boolean attribute (HTML) slug: Glossary/Boolean/HTML page-type: glossary-definition -spec-urls: https://html.spec.whatwg.org/#boolean-attributes --- {{GlossarySidebar}} diff --git a/files/en-us/glossary/css_preprocessor/index.md b/files/en-us/glossary/css_preprocessor/index.md index ae5642b82ec3709..28e6e0ba8c5a555 100644 --- a/files/en-us/glossary/css_preprocessor/index.md +++ b/files/en-us/glossary/css_preprocessor/index.md @@ -19,7 +19,6 @@ To use a CSS preprocessor, you must install a CSS compiler on your web {{Glossar - [Sass](https://sass-lang.com/) - [LESS](https://lesscss.org/) - [Stylus](https://stylus-lang.com/) - - [PostCSS](https://postcss.org/) - Related glossary terms: - {{Glossary("CSS")}} diff --git a/files/en-us/glossary/effective_connection_type/index.md b/files/en-us/glossary/effective_connection_type/index.md index 7a2011090111b84..8750bf1f4240527 100644 --- a/files/en-us/glossary/effective_connection_type/index.md +++ b/files/en-us/glossary/effective_connection_type/index.md @@ -8,7 +8,7 @@ page-type: glossary-definition **Effective connection type** (ECT) refers to the measured network performance, returning a cellular connection type, like 3G, even if the actual connection is tethered broadband or Wi-Fi, based on the time between the browser requesting a page and effective type of the connection. -The values of '`slow-2g`', '`2g`', '`3g`', and '`4g`' are determined using observed round-trip times and downlink values. +The values of `slow-2g`, `2g`, `3g`, and `4g` are determined using observed round-trip times and downlink values. | ECT | Minimum {{Glossary("Round Trip Time", "RTT")}} | Maximum downlink | Explanation | | --------- | ---------------------------------------------- | ---------------- | -------------------------------------------------------------------------------------------------------- | diff --git a/files/en-us/glossary/html_color_codes/index.md b/files/en-us/glossary/html_color_codes/index.md new file mode 100644 index 000000000000000..db07c5dc42546f9 --- /dev/null +++ b/files/en-us/glossary/html_color_codes/index.md @@ -0,0 +1,28 @@ +--- +title: HTML color codes +slug: Glossary/html_color_codes +page-type: glossary-definition +--- + +{{GlossarySidebar}} + +**HTML color codes** is a _defacto_ general term used to describe the earliest-available methods for specifying colors on web pages. This includes HTML color names such as `black`, `purple`, and `aqua`, and hexadecimal notations such as `#000000`, `#800080`, and `#00ffff`. These were originally defined in HTML specifications — see for example the [HTML 3.2 color definitions](https://www.w3.org/TR/2018/SPSD-html32-20180315/#colors) of the original 16 HTML colors. + +It is no longer accurate to refer to colors on the web as "HTML color codes" or "HTML color names". Colors are now specified in the [CSS color module](/en-US/docs/Web/CSS/CSS_colors), and generally known as CSS colors or web colors. + +## See also + +### General knowledge + +[Web colors](https://en.wikipedia.org/wiki/Web_colors) on Wikipedia + +### Technical reference + +To look up web colors on MDN, see our CSS {{cssxref("<color>")}} values reference documentation, or more specifically: + +- Color names: {{cssxref("<named-color>")}}. +- Hexadecimal notations: {{cssxref("<hex-color>")}}. +- Color functions: + - [sRGB](/en-US/docs/Glossary/Color_space#rgb_color_spaces) color space: {{CSSXref("color_value/hsl", "hsl()")}}, {{CSSXref("color_value/hwb", "hwb()")}}, and {{CSSXref("color_value/rgb", "rgb()")}}. + - [CIELAB](/en-US/docs/Glossary/Color_space#cielab_color_spaces) color space: {{CSSXref("color_value/lab", "lab()")}} and {{CSSXref("color_value/lch", "lch()")}}, {{CSSXref("color_value/oklab", "oklab()")}}, and {{CSSXref("color_value/oklch", "oklch()")}}. + - Other color spaces: {{CSSXref("color_value/color", "color()")}}. diff --git a/files/en-us/glossary/literal/index.md b/files/en-us/glossary/literal/index.md index 6036bd56bd64b67..6e53b526ff8777c 100644 --- a/files/en-us/glossary/literal/index.md +++ b/files/en-us/glossary/literal/index.md @@ -36,7 +36,7 @@ The following are examples of string literals: An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces (`{}`). -The following is an example of an object literal. The first element of the `car` object defines a property, `myCar`, and assigns to it a new string, "`Toyota`"; the second element, the `getCar` property, is immediately assigned the result of invoking the function `carTypes('Honda')`; the third element, the `special` property, uses an existing variable (`sales`). +The following is an example of an object literal. The first element of the `car` object defines a property, `myCar`, and assigns to it a new string, `"Toyota"`; the second element, the `getCar` property, is immediately assigned the result of invoking the function `carTypes('Honda')`; the third element, the `special` property, uses an existing variable (`sales`). ```js const sales = "BMW"; diff --git a/files/en-us/glossary/statement/index.md b/files/en-us/glossary/statement/index.md index 240242b297efafc..837c26851883522 100644 --- a/files/en-us/glossary/statement/index.md +++ b/files/en-us/glossary/statement/index.md @@ -10,5 +10,5 @@ In a computer programming language, a **statement** is a line of code commanding ## See also -- [Statement (computer science)]() on Wikipedia - [JavaScript statements and declarations](/en-US/docs/Web/JavaScript/Reference/Statements) +- [Statement (computer science)]() on Wikipedia diff --git a/files/en-us/glossary/throttle/index.md b/files/en-us/glossary/throttle/index.md index a864b4e0520c9fa..28d5d1388998db1 100644 --- a/files/en-us/glossary/throttle/index.md +++ b/files/en-us/glossary/throttle/index.md @@ -10,7 +10,7 @@ page-type: glossary-definition Throttling is very similar to {{glossary("debounce", "debouncing")}}. The key difference is that when invocations happen continuously, throttling ensures that the operation is still performed at a certain maximum rate, while debouncing waits indefinitely until the invocations stop for a certain amount of time. -A typical use case of debouncing is when synchronizing with another constantly-updating state. Consider a function `onScrolled`, which listens for the [`scroll`](/en-US/docs/Web/API/Document/scroll_event) event. The `scroll` event may fire as often as every pixel scrolled, so the function will be called in very short intervals. If `onScrolled` is computationally expensive, earlier invocations might block later invocations from happening on time, or block other things from executing in the meantime, leading to a noticeable {{glossary("jank")}}. In this case, we can throttle `onScrolled`, such that it can only be called at most once every 10 milliseconds: +A typical use case of throttling is when synchronizing with another constantly-updating state. Consider a function `onScrolled`, which listens for the [`scroll`](/en-US/docs/Web/API/Document/scroll_event) event. The `scroll` event may fire as often as every pixel scrolled, so the function will be called in very short intervals. If `onScrolled` is computationally expensive, earlier invocations might block later invocations from happening on time, or block other things from executing in the meantime, leading to a noticeable {{glossary("jank")}}. In this case, we can throttle `onScrolled`, such that it can only be called at most once every 10 milliseconds: 1. The first call to `onScrolled` is known as the _leading edge_. 2. For every next call to `onScrolled`, if it is within 10 milliseconds from the first call, it is in the same "batch" as the first call. diff --git a/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md b/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md index 338a63349d160a4..e126e9834669516 100644 --- a/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md +++ b/files/en-us/learn/common_questions/tools_and_setup/available_text_editors/index.md @@ -192,23 +192,6 @@ Here are some popular editors: Yes - - - Komodo Edit - - MPL - Free - Windows, Mac, Linux - Forum - - Online Manual - - Yes - $50 Mac - Twitter, + Twitter, IRC, Mailing listhow the Internet works - and be familiar with the difference between a webpage, a website, a web server, and a diff --git a/files/en-us/learn/common_questions/web_mechanics/what_is_a_url/index.md b/files/en-us/learn/common_questions/web_mechanics/what_is_a_url/index.md index 7808d9674e49ab9..a48a12e176f75ae 100644 --- a/files/en-us/learn/common_questions/web_mechanics/what_is_a_url/index.md +++ b/files/en-us/learn/common_questions/web_mechanics/what_is_a_url/index.md @@ -123,7 +123,7 @@ Let's examine what the distinction between _absolute_ and _relative_ means in th The required parts of a URL depend to a great extent on the context in which the URL is used. In your browser's address bar, a URL doesn't have any context, so you must provide a full (or _absolute_) URL, like the ones we saw above. You don't need to include the protocol (the browser uses HTTP by default) or the port (which is only required when the targeted Web server is using some unusual port), but all the other parts of the URL are necessary. -When a URL is used within a document, such as in an HTML page, things are a bit different. Because the browser already has the document's own URL, it can use this information to fill in the missing parts of any URL available inside that document. We can differentiate between an _absolute URL_ and a _relative URL_ by looking only at the _path_ part of the URL. If the path part of the URL starts with the "`/`" character, the browser will fetch that resource from the top root of the server, without reference to the context given by the current document. +When a URL is used within a document, such as in an HTML page, things are a bit different. Because the browser already has the document's own URL, it can use this information to fill in the missing parts of any URL available inside that document. We can differentiate between an _absolute URL_ and a _relative URL_ by looking only at the _path_ part of the URL. If the path part of the URL starts with the `/` character, the browser will fetch that resource from the top root of the server, without reference to the context given by the current document. Let's look at some examples to make this clearer. Let's assume that the URLs are defined from within the document located at the following URL: `https://developer.mozilla.org/en-US/docs/Learn`. diff --git a/files/en-us/learn/css/building_blocks/values_and_units/index.md b/files/en-us/learn/css/building_blocks/values_and_units/index.md index d5d5c44309ce429..24c9625a744ed62 100644 --- a/files/en-us/learn/css/building_blocks/values_and_units/index.md +++ b/files/en-us/learn/css/building_blocks/values_and_units/index.md @@ -326,9 +326,6 @@ In the example below, we have added a background image to the containing block o **In this example, try changing the alpha channel values to see how it affects the color output.** -> [!NOTE] -> In older versions of CSS, the `rgb()` syntax didn't support an alpha parameter - you needed to use a different function called `rgba()` for that. These days you can pass an alpha parameter to `rgb()`. The `rgba()` function is an alias for `rgb()`. - ### SRGB values The `sRGB` color space defines colors in the **red** (r), **green** (g), and **blue** (b) color space. @@ -371,9 +368,6 @@ Just like with `rgb()` you can pass an alpha parameter to `hsl()` to specify opa {{EmbedGHLiveSample("css-examples/learn/values-units/color-hsla.html", '100%', 900)}} -> [!NOTE] -> In older versions of CSS, the `hsl()` syntax didn't support an alpha parameter - you needed to use a different function called `hsla()` for that. These days you can pass an alpha parameter to `hsl()`, but for backwards compatibility with old websites, the `hsla()` syntax is still supported, and has exactly the same behavior as `hsl()`. - ## Images The [``](/en-US/docs/Web/CSS/image) value type is used wherever an image is a valid value. This can be an actual image file pointed to via a `url()` function, or a gradient. diff --git a/files/en-us/learn/css/first_steps/how_css_is_structured/index.md b/files/en-us/learn/css/first_steps/how_css_is_structured/index.md index 282d869fbbfa9d2..8efff32c9d6d0ee 100644 --- a/files/en-us/learn/css/first_steps/how_css_is_structured/index.md +++ b/files/en-us/learn/css/first_steps/how_css_is_structured/index.md @@ -471,7 +471,7 @@ Try adding comments in your CSS. ## White space -White space means actual spaces, tabs and new lines. Just as browsers ignore white space in HTML, browsers ignore white space inside CSS. The value of white space is how it can improve readability. +White space means actual spaces, tabs and new lines. Just as browsers ignore extra white space in HTML, browsers ignore extra white space inside CSS. The benefit of white space is that it improves readability. In the example below, each declaration (and rule start/end) has its own line. This is arguably a good way to write CSS. It makes it easier to maintain and understand CSS. @@ -512,17 +512,17 @@ div p + p { } ``` -The next example shows the equivalent CSS in a more compressed format. Although the two examples work the same, the one below is more difficult to read. +The next example shows the equivalent CSS in a more compressed format, with all extra white space removed. Although the two examples work the same, the one below is more difficult to read. ```css-nolint -body {font: 1em/150% Helvetica, Arial, sans-serif; padding: 1em; margin: 0 auto; max-width: 33em;} -@media (min-width: 70em) { body { font-size: 130%;}} +body{font:1em/150% Helvetica,Arial,sans-serif;padding:1em;margin:0 auto;max-width:33em;} +@media(min-width:70em){body{font-size:130%;}} -h1 {font-size: 1.5em;} +h1{font-size:1.5em;} -div p, #id:first-line {background-color: red; border-radius: 3px;} -div p {margin: 0; padding: 1em;} -div p + p {padding-top: 0;} +div p,#id:first-line{background-color:red;border-radius:3px;} +div p{margin:0;padding:1em;} +div p+p{padding-top:0;} ``` For your own projects, you will format your code according to personal preference. For team projects, you may find that a team or project has its own style guide. diff --git a/files/en-us/learn/css/styling_text/styling_links/index.md b/files/en-us/learn/css/styling_text/styling_links/index.md index 54b9e2693bab3bf..3d547274a057969 100644 --- a/files/en-us/learn/css/styling_text/styling_links/index.md +++ b/files/en-us/learn/css/styling_text/styling_links/index.md @@ -60,23 +60,7 @@ The example below illustrates what a link will look and behave like by default; - Unvisited links are blue. - Visited links are purple. - Hovering a link makes the mouse pointer change to a little hand icon. -- Focused links have an outline around them — you should be able to focus on the links on this page with the keyboard by pressing the tab key. (On Mac, you'll need to use - - option - - \+ - - tab - - , or enable the [Full Keyboard Access: All controls](https://support.apple.com/guide/mac-help/use-your-keyboard-like-a-mouse-mchlp1399/mac) option by pressing - - Ctrl - - \+ - - F7 - - .) +- Focused links have an outline around them — you should be able to focus on the links on this page with the keyboard by pressing the tab key. - Active links are red. Try holding down the mouse button on the link as you click it. diff --git a/files/en-us/learn/forms/advanced_form_styling/index.md b/files/en-us/learn/forms/advanced_form_styling/index.md index 020f32a034c8fd5..5d0552ba1fec71a 100644 --- a/files/en-us/learn/forms/advanced_form_styling/index.md +++ b/files/en-us/learn/forms/advanced_form_styling/index.md @@ -483,7 +483,7 @@ And then style the label to act like a button, which when pressed will open the label[for="file"] { box-shadow: 1px 1px 3px #ccc; background: linear-gradient(to bottom, #eee, #ccc); - border: 1px solid rgb(169, 169, 169); + border: 1px solid rgb(169 169 169); border-radius: 5px; text-align: center; line-height: 1.5; diff --git a/files/en-us/learn/forms/user_input_methods/index.md b/files/en-us/learn/forms/user_input_methods/index.md index 70718f7a9bfb7b3..7f7201fa318830a 100644 --- a/files/en-us/learn/forms/user_input_methods/index.md +++ b/files/en-us/learn/forms/user_input_methods/index.md @@ -92,7 +92,7 @@ When screen orientation matters for your form, you can read the screen orientati ### Fullscreen -If you need to present your form in fullscreen mode, such as when your form is displayed on a museum kiosk, toll booth, or really any publically displayed user interface, it is possible to do so by calling {{domxref("Element.requestFullscreen()")}} on that element: +If you need to present your form in fullscreen mode, such as when your form is displayed on a museum kiosk, toll booth, or really any publicly displayed user interface, it is possible to do so by calling {{domxref("Element.requestFullscreen()")}} on that element: ```js const elem = document.getElementById("myForm"); diff --git a/files/en-us/learn/forms/your_first_form/index.md b/files/en-us/learn/forms/your_first_form/index.md index 3fcbdb523c9ff65..a961ef1f442e70b 100644 --- a/files/en-us/learn/forms/your_first_form/index.md +++ b/files/en-us/learn/forms/your_first_form/index.md @@ -93,26 +93,24 @@ In terms of HTML code we need something like the following to implement these fo ```html
-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
+

+ + +

+

+ + +

+

+ + +

``` Update your form code to look like the above. -The {{HTMLelement("li")}} elements are there to conveniently structure our code and make styling easier (see later in the article). +The {{HTMLelement("p")}} elements are there to conveniently structure our code and make styling easier (see later in the article). For usability and accessibility, we include an explicit label for each form control. Note the use of the [`for`](/en-US/docs/Web/HTML/Attributes/for) attribute on all {{HTMLelement("label")}} elements, which takes as its value the [`id`](/en-US/docs/Web/HTML/Global_attributes/id) of the form control with which it is associated — this is how you associate a form control with its label. @@ -152,12 +150,12 @@ by default this element is filled with this text ### The ` - +

``` The {{htmlelement("button")}} element also accepts a `type` attribute — this accepts one of three values: `submit`, `reset`, or `button`. @@ -202,13 +200,7 @@ form { border-radius: 1em; } -ul { - list-style: none; - padding: 0; - margin: 0; -} - -form li + li { +p + p { margin-top: 1em; } @@ -275,29 +267,27 @@ Let's look at some of our form code again: ```html
-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • - - … -
+

+ + +

+

+ + +

+

+ + +

+ + …
``` -In our example, the form will send 3 pieces of data named "`user_name`", "`user_email`", and "`user_message`". -That data will be sent to the URL "`/my-handling-form-page`" using the [HTTP `POST`](/en-US/docs/Web/HTTP/Methods/POST) method. +In our example, the form will send 3 pieces of data named `user_name`, `user_email`, and `user_message`. +That data will be sent to the URL `/my-handling-form-page` using the [HTTP `POST`](/en-US/docs/Web/HTTP/Methods/POST) method. -On the server side, the script at the URL "`/my-handling-form-page`" will receive the data as a list of 3 key/value items contained in the HTTP request. +On the server side, the script at the URL `/my-handling-form-page` will receive the data as a list of 3 key/value items contained in the HTTP request. The way this script will handle that data is up to you. Each server-side language (PHP, Python, Ruby, Java, C#, etc.) has its own mechanism of handling form data. It's beyond the scope of this guide to go deeply into that subject, but if you want to know more, we have provided some examples in our [Sending form data](/en-US/docs/Learn/Forms/Sending_and_retrieving_form_data) article later on. diff --git a/files/en-us/learn/getting_started_with_the_web/installing_basic_software/index.md b/files/en-us/learn/getting_started_with_the_web/installing_basic_software/index.md index 280820e0f1ae6e1..89288c7cd137b3c 100644 --- a/files/en-us/learn/getting_started_with_the_web/installing_basic_software/index.md +++ b/files/en-us/learn/getting_started_with_the_web/installing_basic_software/index.md @@ -36,12 +36,10 @@ The following looks like a scary list, but fortunately, you can get started in w - **A computer**. Maybe that sounds obvious to some people, but some of you are reading this article on your phone or a library computer. For serious web development, it's better to invest in a desktop or laptop computer running Windows, macOS or Linux. - **A text editor**, to write code in. This could be a text editor (e.g. [Visual Studio Code](https://code.visualstudio.com/), [Notepad++](https://notepad-plus-plus.org/), [Sublime Text](https://www.sublimetext.com/), [GNU Emacs](https://www.gnu.org/software/emacs/), or [VIM](https://www.vim.org/)), or a hybrid editor (e.g. [Dreamweaver](https://www.adobe.com/products/dreamweaver.html) or [WebStorm](https://www.jetbrains.com/webstorm/)). Office document editors are not suitable for this use, as they rely on hidden elements that interfere with the rendering engines used by web browsers. -- **Web browsers**, to test code in. Currently, the most-used browsers are [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/), [Safari](https://www.apple.com/safari/), and [Microsoft Edge](https://www.microsoft.com/en-us/edge). You should also test how your site performs on mobile devices and on any old browsers your target audience may still be using (such as IE 8–10). [Lynx](https://lynx.browser.org/), a text-based terminal web browser, is great for seeing how your site is experienced by visually-impaired users. -- **A graphics editor**, like [GIMP](https://www.gimp.org/), [Figma](https://www.figma.com/), [Paint.NET](https://www.getpaint.net/), [Photoshop](https://www.adobe.com/products/photoshop.html), [Sketch](https://www.sketch.com/) or [XD](https://www.adobe.com/products/xd.html), to make images or graphics for your web pages. +- **Web browsers**, to test code in. Currently, the most-used browsers are [Firefox](https://www.mozilla.org/en-US/firefox/new/), [Chrome](https://www.google.com/chrome/), [Safari](https://www.apple.com/safari/), and [Microsoft Edge](https://www.microsoft.com/en-us/edge). You should also test how your site performs on mobile devices and on any other browsers your target audience may be using. [Lynx](https://lynx.browser.org/), a text-based terminal web browser, is great for seeing how your site is experienced by visually-impaired users. +- **A graphics editor**, like [GIMP](https://www.gimp.org/), [Figma](https://www.figma.com/), [Paint.NET](https://www.getpaint.net/), [Photoshop](https://www.adobe.com/products/photoshop.html), [Sketch](https://www.sketch.com/) or [XD](https://helpx.adobe.com/support/xd.html), to make images or graphics for your web pages. - **A version control system**, to manage files on servers, collaborate on a project with a team, share code and assets and avoid editing conflicts. Right now, [Git](https://git-scm.com/) is the most popular version control system along with the [GitHub](https://github.com/) or [GitLab](https://about.gitlab.com/) hosting service. -- **An FTP program**, used on older web hosting accounts to manage files on servers ([Git](https://git-scm.com/) is increasingly replacing FTP for this purpose). There are loads of (S)FTP programs available including [Cyberduck](https://cyberduck.io/), [Fetch](https://fetchsoftworks.com/) and [FileZilla](https://filezilla-project.org/). -- **An automation system,** like [Webpack](https://webpack.js.org/), [Grunt](https://gruntjs.com/), or [Gulp](https://gulpjs.com/) to automatically perform repetitive tasks, such as minifying code and running tests. -- Libraries, frameworks, etc., to speed up writing common functionality. A library tends to be an existing JavaScript or CSS file that provides ready-rolled functionality for you to make use of in your code. A framework tends to take this idea further, offering a complete system with some custom syntaxes for you to write a web app on top of. -- More tools besides! + +For more information about other project-specific tools, especially for client-side web development, see our [Understanding client-side web development tools](/en-US/docs/Learn/Tools_and_testing/Understanding_client-side_tools) guide. {{NextMenu("Learn/Getting_started_with_the_web/What_will_your_website_look_like", "Learn/Getting_started_with_the_web")}} diff --git a/files/en-us/learn/getting_started_with_the_web/javascript_basics/index.md b/files/en-us/learn/getting_started_with_the_web/javascript_basics/index.md index 778005974965cf6..08f5650bb4d12d4 100644 --- a/files/en-us/learn/getting_started_with_the_web/javascript_basics/index.md +++ b/files/en-us/learn/getting_started_with_the_web/javascript_basics/index.md @@ -289,7 +289,7 @@ if (iceCream === "chocolate") { } ``` -The expression inside the `if ()` is the test. This uses the strict equality operator (as described above) to compare the variable `iceCream` with the string `chocolate` to see if the two are equal. If this comparison returns `true`, the first block of code runs. If the comparison is not true, the second block of code—after the `else` statement—runs instead. +The expression inside the `if ()` is the test. This uses the strict equality operator (as described above) to compare the variable `iceCream` with the string `chocolate` to see if the two are equal. If this comparison returns `true`, the first block of code runs. If the comparison is not true, the second block of code—after the `else` keyword—runs instead. ### Functions diff --git a/files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md b/files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md index b32973592266167..e69248133149055 100644 --- a/files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md +++ b/files/en-us/learn/getting_started_with_the_web/what_will_your_website_look_like/index.md @@ -21,7 +21,7 @@ To begin, you'll need to answer these questions: 3. **What does your website look like,** in simple high-level terms? What's the background color? What kind of font is appropriate: formal, cartoony, bold and loud, subtle? > [!NOTE] -> Complex projects need detailed guidelines that go into all the details of colors, fonts, spacing between items on a page, appropriate writing style, and so on. This is sometimes called a design guide, design system, or brand book, and you can see an example at the [Firefox Photon Design System](https://design.firefox.com/photon/). +> Complex projects need detailed guidelines that go into all the details of colors, fonts, spacing between items on a page, appropriate writing style, and so on. This is sometimes called a design guide, design system, or brand book, and you can see an example at the [Firefox Acorn Design System](https://acorn.firefox.com/latest/). ## Sketching out your design @@ -71,7 +71,7 @@ Once you have found a font, there are two main ways of using it: 2. Download the font file to your own system, host the font yourself, and use your hosted copy in your website's code. > [!NOTE] -> Serving fonts hosted on Google Fonts may be incompatible with the European Union's data privacy regulation [GDPR](https://gdpr.eu/what-is-gdpr/) as the font service exposes the user's IP address. If this is a potential problem for you, then either choose the second option or choose a font provider that is GDPR compliant, such as [Bunny Fonts](https://fonts.bunny.net/about). +> Serving fonts hosted on Google Fonts may be incompatible with the European Union's data privacy regulation [GDPR](https://gdpr.eu/) as the font service exposes the user's IP address. If this is a potential problem for you, then either choose the second option or choose a font provider that is GDPR compliant, such as [Bunny Fonts](https://fonts.bunny.net/about). Alternatively you can use [safe web fonts](https://web.mit.edu/jmorzins/www/fonts.html) such as Arial, Times New Roman, or Courier New. diff --git a/files/en-us/learn/html/introduction_to_html/document_and_website_structure/index.md b/files/en-us/learn/html/introduction_to_html/document_and_website_structure/index.md index cf4d66290de76e9..401ae9ed0bce888 100644 --- a/files/en-us/learn/html/introduction_to_html/document_and_website_structure/index.md +++ b/files/en-us/learn/html/introduction_to_html/document_and_website_structure/index.md @@ -134,35 +134,41 @@ Our example seen above is represented by the following code (you can also [find congue enim, ut porta lorem lacinia consectetur.

-

Subsection

- -

- Donec ut librero sed accu vehicula ultricies a non tortor. Lorem ipsum - dolor sit amet, consectetur adipisicing elit. Aenean ut gravida lorem. - Ut turpis felis, pulvinar a semper sed, adipiscing id dolor. -

- -

- Pelientesque auctor nisi id magna consequat sagittis. Curabitur - dapibus, enim sit amet elit pharetra tincidunt feugiat nist imperdiet. - Ut convallis libero in urna ultrices accumsan. Donec sed odio eros. -

- -

Another subsection

- -

- Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum - soclis natoque penatibus et manis dis parturient montes, nascetur - ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at sem - facilisis semper ac in est. -

- -

- Vivamus fermentum semper porta. Nunc diam velit, adipscing ut - tristique vitae sagittis vel odio. Maecenas convallis ullamcorper - ultricied. Curabitur ornare, ligula semper consectetur sagittis, nisi - diam iaculis velit, is fringille sem nunc vet mi. -

+
+

Subsection

+ +

+ Donec ut librero sed accu vehicula ultricies a non tortor. Lorem + ipsum dolor sit amet, consectetur adipisicing elit. Aenean ut + gravida lorem. Ut turpis felis, pulvinar a semper sed, adipiscing id + dolor. +

+ +

+ Pelientesque auctor nisi id magna consequat sagittis. Curabitur + dapibus, enim sit amet elit pharetra tincidunt feugiat nist + imperdiet. Ut convallis libero in urna ultrices accumsan. Donec sed + odio eros. +

+
+ +
+

Another subsection

+ +

+ Donec viverra mi quis quam pulvinar at malesuada arcu rhoncus. Cum + soclis natoque penatibus et manis dis parturient montes, nascetur + ridiculus mus. In rutrum accumsan ultricies. Mauris vitae nisi at + sem facilisis semper ac in est. +

+ +

+ Vivamus fermentum semper porta. Nunc diam velit, adipscing ut + tristique vitae sagittis vel odio. Maecenas convallis ullamcorper + ultricied. Curabitur ornare, ligula semper consectetur sagittis, + nisi diam iaculis velit, is fringille sem nunc vet mi. +

+
diff --git a/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md b/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md index e716622bdcb0bc5..42ad829f9990ff6 100644 --- a/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md +++ b/files/en-us/learn/html/multimedia_and_embedding/other_embedding_technologies/index.md @@ -325,7 +325,7 @@ If you find yourself needing to embed plugin content, this is the kind of inform - accurate {{glossary("MIME type", 'media type')}} + Accurate {{glossary("MIME type", "media type")}} of the embedded content type @@ -333,7 +333,7 @@ If you find yourself needing to embed plugin content, this is the kind of inform - height and width (in CSS pixels) of the box controlled by the plugin + Height and width (in CSS pixels) of the box controlled by the plugin height
width @@ -343,19 +343,11 @@ If you find yourself needing to embed plugin content, this is the kind of inform - names and values, to feed the plugin as parameters - ad hoc attributes with those names and values + Independent HTML content as a fallback for an unavailable resource + Not supported (<noembed> is obsolete) - single-tag {{htmlelement("param")}} elements, contained within - <object> - - - - independent HTML content as fallback for an unavailable resource - not supported (<noembed> is obsolete) - - contained within <object>, after - <param> elements + Contained within the opening and closing + <object> tags diff --git a/files/en-us/learn/javascript/building_blocks/conditionals/index.md b/files/en-us/learn/javascript/building_blocks/conditionals/index.md index a416f292a95a628..0ccdba99a925b53 100644 --- a/files/en-us/learn/javascript/building_blocks/conditionals/index.md +++ b/files/en-us/learn/javascript/building_blocks/conditionals/index.md @@ -429,10 +429,10 @@ In this example, you are going to help us finish a simple calendar application. - An `onchange` event handler to detect when the value selected in the `` element value after the value changes, so "January" for example.) -2. Set a variable called `days` to be equal to the number of days in the selected month. To do this you'll have to look up the number of days in each month of the year. You can ignore leap years for the purposes of this example. +2. Assign the `days` variable to be equal to the number of days in the selected month. To do this you'll have to look up the number of days in each month of the year. You can ignore leap years for the purposes of this example. Hints: @@ -451,29 +451,31 @@ If you make a mistake, you can always reset the example with the "Reset" button.

@@ -518,25 +520,25 @@ const h1 = document.querySelector("h1"); select.addEventListener("change", () => { const choice = select.value; + createCalendar(choice); +}); +function createCalendar(month) { let days = 31; - if (choice === "February") { + + if (month === "February") { days = 28; } else if ( - choice === "April" || - choice === "June" || - choice === "September" || - choice === "November" + month === "April" || + month === "June" || + month === "September" || + month === "November" ) { days = 30; } - createCalendar(days, choice); -}); - -function createCalendar(days, choice) { list.textContent = ""; - h1.textContent = choice; + h1.textContent = month; for (let i = 1; i <= days; i++) { const listItem = document.createElement("li"); listItem.textContent = i; @@ -544,7 +546,8 @@ function createCalendar(days, choice) { } } -createCalendar(31, "January");`; +select.value = "January"; +createCalendar("January");`; function outputDocument(code) { const outputBody = ` diff --git a/files/en-us/learn/javascript/client-side_web_apis/third_party_apis/index.md b/files/en-us/learn/javascript/client-side_web_apis/third_party_apis/index.md index 2cada03e94b7df1..b51dee2680a8717 100644 --- a/files/en-us/learn/javascript/client-side_web_apis/third_party_apis/index.md +++ b/files/en-us/learn/javascript/client-side_web_apis/third_party_apis/index.md @@ -205,7 +205,7 @@ First, you'll need to make a connection between the API and your app. In the cas Replace the existing API key with the actual API key you got in the previous section. -2. Add the following line to your JavaScript, below the "`// Event listeners to control the functionality`" comment. This runs a function called `submitSearch()` when the form is submitted (the button is pressed). +2. Add the following line to your JavaScript, below the `// Event listeners to control the functionality` comment. This runs a function called `submitSearch()` when the form is submitted (the button is pressed). ```js searchForm.addEventListener("submit", submitSearch); diff --git a/files/en-us/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md b/files/en-us/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md index c57c7a3d39e132c..c5d18f7ae21c93f 100644 --- a/files/en-us/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md +++ b/files/en-us/learn/javascript/first_steps/test_your_skills_colon__arrays/index.md @@ -50,7 +50,7 @@ For this array task, we provide you with a starting array, and you will work in 1. Remove the last item in the array. 2. Add two new names to the end of the array. 3. Go over each item in the array and add its index number after the name inside parentheses, for example `Ryu (0)`. Note that we don't teach how to do this in the Arrays article, so you'll have to do some research. -4. Finally, join the array items together in a single string called `myString`, with a separator of "`-`". +4. Finally, join the array items together in a single string called `myString`, with a separator of `"-"`. Try updating the live code below to recreate the finished example: diff --git a/files/en-us/learn/performance/why_web_performance/index.md b/files/en-us/learn/performance/why_web_performance/index.md index 672680aa829e97d..34dd873788adc08 100644 --- a/files/en-us/learn/performance/why_web_performance/index.md +++ b/files/en-us/learn/performance/why_web_performance/index.md @@ -42,11 +42,11 @@ As an example, consider the loading experience of CNN.com, which at the time of - Imagine loading this on a desktop computer connected to a fibre optic network. This would seem relatively fast, and the file size would be largely irrelevant. - Imagine loading that same site using tethered mobile data on a nine-year-old iPad while commuting home on public transportation. The same site will be slow to load, possibly verging on unusable depending on cell coverage. You might give up before it finishes loading. -- Imagine loading that same site on a $35 Huawei device in a rural India with limited coverage or no coverage. The site will be very slow to load—if it loads at all—with blocking scripts possibly timing out, and adverse CPU impact causing browser crashes if it does load. +- Imagine loading that same site on a low-cost device in an area with limited coverage. The site will be very slow to load—if it loads at all—with blocking scripts possibly timing out, and adverse CPU impact potentially causing browser crashes if it does load. A 22.6 MB site could take up to 83 seconds to load on a 3G network, with [`DOMContentLoaded`](/en-US/docs/Web/API/Document/DOMContentLoaded_event) (meaning the site's base HTML structure) at 31.86 seconds. -And it isn't just the time taken to download that is a major problem. A lot of countries still have internet connections that bill per megabyte. Our example 22.6 MB CNN.com experience would cost about 11% of the average Indian's daily wage to download. From a mobile device in Northwest Africa, it might cost two days of an average salary. And if this site were loaded on a US carrier's international roaming plan? The costs would make anyone cry. (See [how much your site costs to download](https://whatdoesmysitecost.com/).) +And it isn't just the time taken to download that is a major problem. In some regions, internet connections are billed per megabyte, making large downloads prohibitively expensive. Our example 22.6 MB CNN.com experience would cost a significant portion of a mobile data user's daily allowance or even lead to high charges in certain international roaming plans.(See [how much your site costs to download](https://whatdoesmysitecost.com/).) ### Improve conversion rates diff --git a/files/en-us/learn/server-side/django/authentication/index.md b/files/en-us/learn/server-side/django/authentication/index.md index 17e03eb1d6f4385..6bd650be9f36ddf 100644 --- a/files/en-us/learn/server-side/django/authentication/index.md +++ b/files/en-us/learn/server-side/django/authentication/index.md @@ -453,7 +453,7 @@ Open the base template (**/django-locallibrary-tutorial/catalog/templates/base_g As you can see, we use `if` / `else` / `endif` template tags to conditionally display text based on whether `\{{ user.is_authenticated }}` is true. If the user is authenticated then we know that we have a valid user, so we call `\{{ user.get_username }}` to display their name. -We create the login link URL using the `url` template tag and the name of the `login` URL configuration. Note also how we have appended `?next=\{{ request.path }}` to the end of the URL. What this does is add a URL parameter `next` containing the address (URL) of the _current_ page, to the end of the linked URL. After the user has successfully logged in, the view will use this "`next`" value to redirect the user back to the page where they first clicked the login link. +We create the login link URL using the `url` template tag and the name of the `login` URL configuration. Note also how we have appended `?next=\{{ request.path }}` to the end of the URL. What this does is add a URL parameter `next` containing the address (URL) of the _current_ page, to the end of the linked URL. After the user has successfully logged in, the view will use this `next` value to redirect the user back to the page where they first clicked the login link. The logout template code is different, because from Django 5 to logout you must `POST` to the `admin:logout` URL, using a form with a button. By default this would render as a button, but you can style the button to display as a link. @@ -497,7 +497,7 @@ class MyView(LoginRequiredMixin, View): # … ``` -This has exactly the same redirect behavior as the `login_required` decorator. You can also specify an alternative location to redirect the user to if they are not authenticated (`login_url`), and a URL parameter name instead of "`next`" to insert the current absolute path (`redirect_field_name`). +This has exactly the same redirect behavior as the `login_required` decorator. You can also specify an alternative location to redirect the user to if they are not authenticated (`login_url`), and a URL parameter name instead of `next` to insert the current absolute path (`redirect_field_name`). ```python class MyView(LoginRequiredMixin, View): @@ -707,7 +707,7 @@ Testing on permissions in views and templates is then very similar to testing on ### Models -Defining permissions is done on the model "`class Meta`" section, using the `permissions` field. +Defining permissions is done on the model `class Meta` section, using the `permissions` field. You can specify as many permissions as you need in a tuple, each permission itself being defined in a nested tuple containing the permission name and permission display value. For example, we might define a permission to allow a user to mark that a book has been returned as shown: diff --git a/files/en-us/learn/server-side/django/deployment/index.md b/files/en-us/learn/server-side/django/deployment/index.md index b3ff3e858b51bf4..a3f17c3a4d35273 100644 --- a/files/en-us/learn/server-side/django/deployment/index.md +++ b/files/en-us/learn/server-side/django/deployment/index.md @@ -85,7 +85,7 @@ Some of the things to consider when choosing a host: The good news when you're starting out is that there are quite a few sites that provide "free" computing environments that are intended for evaluation and testing. These are usually fairly resource constrained/limited environments, and you do need to be aware that they may expire after some introductory period or have other constraints. They are however great for testing low traffic sites in a hosted environment, and can provide an easy migration to paying for more resources when your site gets busier. -Popular choices in this category include [Vultr Cloud Compute](https://blogs.vultr.com/new-free-tier-plan), [Python Anywhere](https://www.pythonanywhere.com/), [Amazon Web Services](https://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html), [Microsoft Azure](https://azure.microsoft.com/pricing/details/app-service/), and so on. +Popular choices in this category include [Vultr Cloud Compute](https://blogs.vultr.com/new-free-tier-plan), [Python Anywhere](https://www.pythonanywhere.com/), [Amazon Web Services](https://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html), [Microsoft Azure](https://azure.microsoft.com/en-us/pricing/details/app-service/linux/), and so on. Most providers also offer a "basic" tier that is intended for small production sites, and which provide more useful levels of computing power and fewer limitations. [Railway](https://railway.app/), [Heroku](https://www.heroku.com/), and [Digital Ocean](https://www.digitalocean.com/) are examples of popular hosting providers that have a relatively inexpensive basic computing tier (in the $5 to $10 USD per month range). diff --git a/files/en-us/learn/server-side/django/forms/index.md b/files/en-us/learn/server-side/django/forms/index.md index 274f666ff780605..494663b0d904187 100644 --- a/files/en-us/learn/server-side/django/forms/index.md +++ b/files/en-us/learn/server-side/django/forms/index.md @@ -235,7 +235,7 @@ urlpatterns += [ The URL configuration will redirect URLs with the format **/catalog/book/_\_/renew/** to the function named `renew_book_librarian()` in **views.py**, and send the `BookInstance` id as the parameter named `pk`. The pattern only matches if `pk` is a correctly formatted `uuid`. > [!NOTE] -> We can name our captured URL data "`pk`" anything we like, because we have complete control over the view function (we're not using a generic detail view class that expects parameters with a certain name). However, `pk` short for "primary key", is a reasonable convention to use! +> We can name our captured URL data anything we like, because we have complete control over the view function (we're not using a generic detail view class that expects parameters with a certain name). However, `pk` short for "primary key", is a reasonable convention to use! ### View @@ -351,9 +351,9 @@ If the form is valid, then we can start to use the data, accessing it through th > [!WARNING] > While you can also access the form data directly through the request (for example, `request.POST['renewal_date']` or `request.GET['renewal_date']` if using a GET request), this is NOT recommended. The cleaned data is sanitized, validated, and converted into Python-friendly types. -The final step in the form-handling part of the view is to redirect to another page, usually a "success" page. In this case, we use `HttpResponseRedirect` and `reverse()` to redirect to the view named `'all-borrowed'` (this was created as the "challenge" in [Django Tutorial Part 8: User authentication and permissions](/en-US/docs/Learn/Server-side/Django/Authentication#challenge_yourself)). If you didn't create that page consider redirecting to the home page at URL '`/`'). +The final step in the form-handling part of the view is to redirect to another page, usually a "success" page. In this case, we use `HttpResponseRedirect` and `reverse()` to redirect to the view named `'all-borrowed'` (this was created as the "challenge" in [Django Tutorial Part 8: User authentication and permissions](/en-US/docs/Learn/Server-side/Django/Authentication#challenge_yourself)). If you didn't create that page consider redirecting to the home page at URL `/`). -That's everything needed for the form handling itself, but we still need to restrict access to the view to just logged-in librarians who have permission to renew books. We use `@login_required` to require that the user is logged in, and the `@permission_required` function decorator with our existing `can_mark_returned` permission to allow access (decorators are processed in order). Note that we probably should have created a new permission setting in `BookInstance` ("`can_renew`"), but we will reuse the existing one to keep the example simple. +That's everything needed for the form handling itself, but we still need to restrict access to the view to just logged-in librarians who have permission to renew books. We use `@login_required` to require that the user is logged in, and the `@permission_required` function decorator with our existing `can_mark_returned` permission to allow access (decorators are processed in order). Note that we probably should have created a new permission setting in `BookInstance` (`can_renew`), but we will reuse the existing one to keep the example simple. The final view is therefore as shown below. Please copy this into the bottom of **django-locallibrary-tutorial/catalog/views.py**. @@ -427,7 +427,7 @@ Most of this will be completely familiar from previous tutorials. We extend the base template and then redefine the content block. We are able to reference `\{{ book_instance }}` (and its variables) because it was passed into the context object in the `render()` function, and we use these to list the book title, borrower, and the original due date. -The form code is relatively simple. First, we declare the `form` tags, specifying where the form is to be submitted (`action`) and the `method` for submitting the data (in this case an "HTTP `POST`") — if you recall the [HTML Forms](#html_forms) overview at the top of the page, an empty `action` as shown, means that the form data will be posted back to the current URL of the page (which is what we want). Inside the tags, we define the `submit` input, which a user can press to submit the data. The `{% csrf_token %}` added just inside the form tags is part of Django's cross-site forgery protection. +The form code is relatively simple. First, we declare the `form` tags, specifying where the form is to be submitted (`action`) and the `method` for submitting the data (in this case a `POST`) — if you recall the [HTML Forms](#html_forms) overview at the top of the page, an empty `action` as shown, means that the form data will be posted back to the current URL of the page (which is what we want). Inside the tags, we define the `submit` input, which a user can press to submit the data. The `{% csrf_token %}` added just inside the form tags is part of Django's cross-site forgery protection. > [!NOTE] > Add the `{% csrf_token %}` to every Django template you create that uses `POST` to submit data. This will reduce the chance of forms being hijacked by malicious users. @@ -527,7 +527,7 @@ Note that this template code can only run inside the `{% for %}` loop, because t ``` > [!NOTE] -> Remember that your test login will need to have the permission "`catalog.can_mark_returned`" in order to see the new "Renew" link added above, and to access the linked page (perhaps use your superuser account). +> Remember that your test login will need to have the permission `catalog.can_mark_returned` in order to see the new "Renew" link added above, and to access the linked page (perhaps use your superuser account). You can alternatively manually construct a test URL like this — `http://127.0.0.1:8000/catalog/book//renew/` (a valid `bookinstance_id` can be obtained by navigating to a book detail page in your library, and copying the `id` field). @@ -584,7 +584,7 @@ class Meta: ``` To add validation you can use the same approach as for a normal `Form` — you define a function named `clean_()` and raise `ValidationError` exceptions for invalid values. -The only difference with respect to our original form is that the model field is named `due_back` and not "`renewal_date`". +The only difference with respect to our original form is that the model field is named `due_back` and not `renewal_date`. This change is necessary since the corresponding field in `BookInstance` is called `due_back`. ```python diff --git a/files/en-us/learn/server-side/django/generic_views/index.md b/files/en-us/learn/server-side/django/generic_views/index.md index da14dbe2480213e..27bc98fc233d221 100644 --- a/files/en-us/learn/server-side/django/generic_views/index.md +++ b/files/en-us/learn/server-side/django/generic_views/index.md @@ -68,7 +68,7 @@ class BookListView(generic.ListView): model = Book ``` -That's it! The generic view will query the database to get all records for the specified model (`Book`) then render a template located at **/django-locallibrary-tutorial/catalog/templates/catalog/book_list.html** (which we will create below). Within the template you can access the list of books with the template variable named `object_list` OR `book_list` (i.e. generically "`_list`"). +That's it! The generic view will query the database to get all records for the specified model (`Book`) then render a template located at **/django-locallibrary-tutorial/catalog/templates/catalog/book_list.html** (which we will create below). Within the template you can access the list of books with the template variable named `object_list` OR `book_list` (i.e. generically `_list`). > [!NOTE] > This awkward path for the template location isn't a misprint — the generic views look for templates in `/application_name/the_model_name_list.html` (`catalog/book_list.html` in this case) inside the application's `/application_name/templates/` directory (`/catalog/templates/)`. @@ -97,7 +97,7 @@ class BookListView(generic.ListView): return Book.objects.filter(title__icontains='war')[:5] # Get 5 books containing the title war ``` -We might also override `get_context_data()` in order to pass additional context variables to the template (e.g. the list of books is passed by default). The fragment below shows how to add a variable named "`some_data`" to the context (it would then be available as a template variable). +We might also override `get_context_data()` in order to pass additional context variables to the template (e.g. the list of books is passed by default). The fragment below shows how to add a variable named `some_data` to the context (it would then be available as a template variable). ```python class BookListView(generic.ListView): @@ -428,7 +428,7 @@ class BookDetailView(generic.DetailView): model = Book ``` -That's it! All you need to do now is create a template called **/django-locallibrary-tutorial/catalog/templates/catalog/book_detail.html**, and the view will pass it the database information for the specific `Book` record extracted by the URL mapper. Within the template you can access the book's details with the template variable named `object` OR `book` (i.e. generically "`the_model_name`"). +That's it! All you need to do now is create a template called **/django-locallibrary-tutorial/catalog/templates/catalog/book_detail.html**, and the view will pass it the database information for the specific `Book` record extracted by the URL mapper. Within the template you can access the book's details with the template variable named `object` OR `book` (i.e. generically `the_model_name`). If you need to, you can change the template used and the name of the context object used to reference the book in the template. You can also override methods to, for example, add additional information to the context. @@ -520,7 +520,7 @@ Though a little larger, almost everything in this template has been described pr - We extend our base template and override the "content" block. - We use conditional processing to determine whether or not to display specific content. - We use `for` loops to loop through lists of objects. -- We access the context fields using the dot notation (because we've used the detail generic view, the context is named `book`; we could also use "`object`") +- We access the context fields using the dot notation (because we've used the detail generic view, the context is named `book`; we could also use `object`) The first interesting thing we haven't seen before is the function `book.bookinstance_set.all()`. This method is "automagically" constructed by Django in order to return the set of `BookInstance` records associated with a particular `Book`. @@ -583,7 +583,7 @@ Astute readers will note that the method `BookInstance.get_status_display()` tha ``` This function is automatically created because `BookInstance.status` is a [choices field](https://docs.djangoproject.com/en/5.0/ref/models/fields/#choices). -Django automatically creates a method `get_FOO_display()` for every choices field "`Foo`" in a model, which can be used to get the current value of the field. +Django automatically creates a method `get_foo_display()` for every choices field `foo` in a model, which can be used to get the current value of the field. ## What does it look like? diff --git a/files/en-us/learn/server-side/django/home_page/index.md b/files/en-us/learn/server-side/django/home_page/index.md index 4976c2b39f4c2c2..ef037b0f229945e 100644 --- a/files/en-us/learn/server-side/django/home_page/index.md +++ b/files/en-us/learn/server-side/django/home_page/index.md @@ -166,7 +166,7 @@ A template is a text file that defines the structure or layout of a file (such a A Django application created using **startapp** (like the skeleton of this example) will look for templates in a subdirectory named '**templates**' of your applications. For example, in the index view that we just added, the `render()` function will expect to find the file **_index.html_** in **/django-locallibrary-tutorial/catalog/templates/** and will raise an error if the file is not present. -You can check this by saving the previous changes and accessing `127.0.0.1:8000` in your browser - it will display a fairly intuitive error message: "`TemplateDoesNotExist at /catalog/`", and other details. +You can check this by saving the previous changes and accessing `127.0.0.1:8000` in your browser - it will display a fairly intuitive error message: "TemplateDoesNotExist at /catalog/", and other details. > [!NOTE] > Based on your project's settings file, Django will look for templates in a number of places, searching in your installed applications by default. You can find out more about how Django finds templates and what template formats it supports in [the Templates section of the Django documentation](https://docs.djangoproject.com/en/5.0/topics/templates/). @@ -324,7 +324,7 @@ return render(request, 'index.html', context=context) #### Referencing static files in templates -Your project is likely to use static resources, including JavaScript, CSS, and images. Because the location of these files might not be known (or might change), Django allows you to specify the location in your templates relative to the `STATIC_URL` global setting. The default skeleton website sets the value of `STATIC_URL` to '`/static/`', but you might choose to host these on a content delivery network or elsewhere. +Your project is likely to use static resources, including JavaScript, CSS, and images. Because the location of these files might not be known (or might change), Django allows you to specify the location in your templates relative to the `STATIC_URL` global setting. The default skeleton website sets the value of `STATIC_URL` to `"/static/"`, but you might choose to host these on a content delivery network or elsewhere. Within the template you first call the `load` template tag specifying "static" to add the template library, as shown in the code sample below. You can then use the `static` template tag and specify the relative URL to the required file. diff --git a/files/en-us/learn/server-side/django/introduction/index.md b/files/en-us/learn/server-side/django/introduction/index.md index 76c225d50fe22ed..26c050627ce5212 100644 --- a/files/en-us/learn/server-side/django/introduction/index.md +++ b/files/en-us/learn/server-side/django/introduction/index.md @@ -185,7 +185,7 @@ class Team(models.Model): The Django model provides a simple query API for searching the associated database. This can match against a number of fields at a time using different criteria (e.g. exact, case-insensitive, greater than, etc.), and can support complex statements (for example, you can specify a search on U11 teams that have a team name that starts with "Fr" or ends with "al"). -The code snippet shows a view function (resource handler) for displaying all of our U09 teams. The `list_teams = Team.objects.filter(team_level__exact="U09")` line shows how we can use the model query API to filter for all records where the `team_level` field has exactly the text '`U09`' (note how this criteria is passed to the `filter()` function as an argument, with the field name and match type separated by a double underscore: **`team_level__exact`**). +The code snippet shows a view function (resource handler) for displaying all of our U09 teams. The `list_teams = Team.objects.filter(team_level__exact="U09")` line shows how we can use the model query API to filter for all records where the `team_level` field has exactly the text `U09` (note how this criteria is passed to the `filter()` function as an argument, with the field name and match type separated by a double underscore: **`team_level__exact`**). ```python ## filename: views.py @@ -199,7 +199,7 @@ def index(request): return render(request, '/best/index.html', context) ``` -This function uses the `render()` function to create the `HttpResponse` that is sent back to the browser. This function is a _shortcut_; it creates an HTML file by combining a specified HTML template and some data to insert in the template (provided in the variable named "`context`"). In the next section we show how the template has the data inserted in it to create the HTML. +This function uses the `render()` function to create the `HttpResponse` that is sent back to the browser. This function is a _shortcut_; it creates an HTML file by combining a specified HTML template and some data to insert in the template (provided in the variable named `context`). In the next section we show how the template has the data inserted in it to create the HTML. ### Rendering data (HTML templates) diff --git a/files/en-us/learn/server-side/django/sessions/index.md b/files/en-us/learn/server-side/django/sessions/index.md index beefaac5d59366f..666f88e28d4ac2f 100644 --- a/files/en-us/learn/server-side/django/sessions/index.md +++ b/files/en-us/learn/server-side/django/sessions/index.md @@ -66,7 +66,7 @@ This session attribute represents the specific connection to the current user (o The `session` attribute is a dictionary-like object that you can read and write as many times as you like in your view, modifying it as wished. You can do all the normal dictionary operations, including clearing all data, testing if a key is present, looping through data, etc. Most of the time though, you'll just use the standard "dictionary" API to get and set values. -The code fragments below show how you can get, set, and delete some data with the key "`my_car`", associated with the current session (browser). +The code fragments below show how you can get, set, and delete some data with the key `my_car`, associated with the current session (browser). > [!NOTE] > One of the great things about Django is that you don't need to think about the mechanisms that tie the session to your current request in your view. If we were to use the fragments below in our view, we'd know that the information about `my_car` is associated only with the browser that sent the current request. @@ -96,7 +96,7 @@ By default, Django only saves to the session database and sends the session cook request.session['my_car'] = 'mini' ``` -If you're updating some information _within_ session data, then Django will not recognize that you've made a change to the session and save the data (for example, if you were to change "`wheels`" data inside your "`my_car`" data, as shown below). In this case you will need to explicitly mark the session as having been modified. +If you're updating some information _within_ session data, then Django will not recognize that you've made a change to the session and save the data (for example, if you were to change `wheels` data inside your `my_car` data, as shown below). In this case you will need to explicitly mark the session as having been modified. ```python # Session object not directly modified, only data within the session. Session changes not saved! diff --git a/files/en-us/learn/server-side/django/web_application_security/index.md b/files/en-us/learn/server-side/django/web_application_security/index.md index 4ef23ce8dca5928..da38178c8669c8b 100644 --- a/files/en-us/learn/server-side/django/web_application_security/index.md +++ b/files/en-us/learn/server-side/django/web_application_security/index.md @@ -183,8 +183,8 @@ The next and final step in this module about Django is to complete the [assessme ## See also +- [Security on the web](/en-US/docs/Web/Security) +- [Practical security implementation guides](/en-US/docs/Web/Security/Practical_implementation_guides) - [Security in Django](https://docs.djangoproject.com/en/5.0/topics/security/) (Django docs) -- [Security on the web](/en-US/docs/Web/Security) (MDN) -- [Practical security implementation guides](/en-US/docs/Web/Security/Practical_implementation_guides) (MDN) {{PreviousMenuNext("Learn/Server-side/Django/Deployment", "Learn/Server-side/Django/django_assessment_blog", "Learn/Server-side/Django")}} diff --git a/files/en-us/learn/server-side/express_nodejs/deployment/index.md b/files/en-us/learn/server-side/express_nodejs/deployment/index.md index 85818d13edecdf4..1b51bdc81a6adea 100644 --- a/files/en-us/learn/server-side/express_nodejs/deployment/index.md +++ b/files/en-us/learn/server-side/express_nodejs/deployment/index.md @@ -83,7 +83,7 @@ Some of the things to consider when choosing a host: The good news when you're starting out is that there are quite a few sites that provide "free" computing environments that are intended for evaluation and testing. These are usually fairly resource constrained/limited environments, and you do need to be aware that they may expire after some introductory period or have other constraints. They are however great for testing low-traffic sites in a hosted environment, and can provide an easy migration to paying for more resources when your site gets busier. -Popular choices in this category include [Glitch](https://glitch.com/), [Python Anywhere](https://www.pythonanywhere.com/), [Amazon Web Services](https://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html), [Microsoft Azure](https://azure.microsoft.com/pricing/details/app-service/), etc. +Popular choices in this category include [Glitch](https://glitch.com/), [Python Anywhere](https://www.pythonanywhere.com/), [Amazon Web Services](https://docs.aws.amazon.com/awsaccountbilling/latest/aboutv2/billing-free-tier.html), [Microsoft Azure](https://azure.microsoft.com/en-us/pricing/details/app-service/linux/), etc. Most providers also offer a "basic" or "hobby" tier that is intended for small production sites, and which provide more useful levels of computing power and fewer limitations. [Railway](https://railway.app/), [Heroku](https://www.heroku.com/), [Digital Ocean](https://www.digitalocean.com/) and [Python Anywhere](https://www.pythonanywhere.com/) are examples of popular hosting providers that have a relatively inexpensive basic computing tier (in the $5 to $10 USD per month range). diff --git a/files/en-us/learn/server-side/express_nodejs/displaying_data/home_page/index.md b/files/en-us/learn/server-side/express_nodejs/displaying_data/home_page/index.md index bca178973cecaa3..f747ed60c562433 100644 --- a/files/en-us/learn/server-side/express_nodejs/displaying_data/home_page/index.md +++ b/files/en-us/learn/server-side/express_nodejs/displaying_data/home_page/index.md @@ -130,7 +130,7 @@ block content li #[strong Genres:] !{genre_count} ``` -The view is straightforward. We extend the **layout.pug** base template, overriding the `block` named '**content**'. The first `h1` heading will be the escaped text for the `title` variable that was passed into the `render()` function—note the use of the '`h1=`' so that the following text is treated as a JavaScript expression. We then include a paragraph introducing the LocalLibrary. +The view is straightforward. We extend the **layout.pug** base template, overriding the `block` named '**content**'. The first `h1` heading will be the escaped text for the `title` variable that was passed into the `render()` function—note the use of the `h1=` so that the following text is treated as a JavaScript expression. We then include a paragraph introducing the LocalLibrary. Under the _Dynamic content_ heading we list the number of copies of each model. Note that the template values for the data are the keys that were specified when `render()` was called in the route handler function. diff --git a/files/en-us/learn/server-side/express_nodejs/introduction/index.md b/files/en-us/learn/server-side/express_nodejs/introduction/index.md index eff98e61c1fbfc5..c64cce05f780a99 100644 --- a/files/en-us/learn/server-side/express_nodejs/introduction/index.md +++ b/files/en-us/learn/server-side/express_nodejs/introduction/index.md @@ -431,7 +431,7 @@ These can return any content required, but must be called after all other `app.u Express comes with a built-in error handler, which takes care of any remaining errors that might be encountered in the app. This default error-handling middleware function is added at the end of the middleware function stack. If you pass an error to `next()` and you do not handle it in an error handler, it will be handled by the built-in error handler; the error will be written to the client with the stack trace. > [!NOTE] -> The stack trace is not included in the production environment. To run it in production mode you need to set the environment variable `NODE_ENV` to '`production'`. +> The stack trace is not included in the production environment. To run it in production mode you need to set the environment variable `NODE_ENV` to `"production"`. > [!NOTE] > HTTP404 and other "error" status codes are not treated as errors. If you want to handle these, you can add a middleware function to do so. For more information see the [FAQ](https://expressjs.com/en/starter/faq.html#how-do-i-handle-404-responses). diff --git a/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md b/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md index 14df7ac3f2731b9..53c9d67918ef94e 100644 --- a/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md +++ b/files/en-us/learn/server-side/express_nodejs/skeleton_website/index.md @@ -284,7 +284,7 @@ We can now start the server in almost exactly the same way as previously, but us > [!NOTE] > Now if you edit any file in the project the server will restart (or you can restart it by typing `rs` on the command prompt at any time). You will still need to reload the browser to refresh the page. > -> We now have to call "`npm run `" rather than just `npm start`, because "start" is actually an npm command that is mapped to the named script. We could have replaced the command in the _start_ script but we only want to use _nodemon_ during development, so it makes sense to create a new script command. +> We now have to call `npm run ` rather than just `npm start`, because "start" is actually an npm command that is mapped to the named script. We could have replaced the command in the _start_ script but we only want to use _nodemon_ during development, so it makes sense to create a new script command. > > The `serverstart` command added to the scripts in the **package.json** above is a very good example. Using this approach means you no longer have to type a long command to start the server. Note that the particular command added to the script works for macOS or Linux only. @@ -462,7 +462,7 @@ const usersRouter = require("./routes/users"); > [!NOTE] > At this point, we have just _imported_ the module; we haven't actually used its routes yet (this happens just a little bit further down the file). -Next, we create the `app` object using our imported _express_ module, and then use it to set up the view (template) engine. There are two parts to setting up the engine. First, we set the '`views`' value to specify the folder where the templates will be stored (in this case the subfolder **/views**). Then we set the '`view engine`' value to specify the template library (in this case "pug"). +Next, we create the `app` object using our imported _express_ module, and then use it to set up the view (template) engine. There are two parts to setting up the engine. First, we set the `"views"` value to specify the folder where the templates will be stored (in this case the subfolder **/views**). Then we set the `"view engine"` value to specify the template library (in this case "pug"). ```js const app = express(); @@ -493,7 +493,7 @@ app.use("/users", usersRouter); ``` > [!NOTE] -> The paths specified above (`'/'` and '`/users'`) are treated as a prefix to routes defined in the imported files. +> The paths specified above (`"/"` and `"/users"`) are treated as a prefix to routes defined in the imported files. > So for example, if the imported **users** module defines a route for `/profile`, you would access that route at `/users/profile`. We'll talk more about routes in a later article. The last middleware in the file adds handler methods for errors and HTTP 404 responses. @@ -540,12 +540,12 @@ router.get("/", (req, res, next) => { module.exports = router; ``` -The route defines a callback that will be invoked whenever an HTTP `GET` request with the correct pattern is detected. The matching pattern is the route specified when the module is imported ('`/users`') plus whatever is defined in this file ('`/`'). In other words, this route will be used when a URL of `/users/` is received. +The route defines a callback that will be invoked whenever an HTTP `GET` request with the correct pattern is detected. The matching pattern is the route specified when the module is imported (`"/users"`) plus whatever is defined in this file (`"/"`). In other words, this route will be used when a URL of `/users/` is received. > [!NOTE] > Try this out by running the server with node and visiting the URL in your browser: `http://localhost:3000/users/`. You should see a message: 'respond with a resource'. -One thing of interest above is that the callback function has the third argument '`next`', and is hence a middleware function rather than a simple route callback. While the code doesn't currently use the `next` argument, it may be useful in the future if you want to add multiple route handlers to the `'/'` route path. +One thing of interest above is that the callback function has the third argument `next`, and is hence a middleware function rather than a simple route callback. While the code doesn't currently use the `next` argument, it may be useful in the future if you want to add multiple route handlers to the `'/'` route path. ### Views (templates) diff --git a/files/en-us/learn/server-side/first_steps/client-server_overview/index.md b/files/en-us/learn/server-side/first_steps/client-server_overview/index.md index 0e92783c4e6e174..2730657d1a18fbd 100644 --- a/files/en-us/learn/server-side/first_steps/client-server_overview/index.md +++ b/files/en-us/learn/server-side/first_steps/client-server_overview/index.md @@ -50,9 +50,9 @@ This request includes: - `POST` data. `POST` requests add new resources, the data for which is encoded within the request body. - Client-side cookies. Cookies contain session data about the client, including keys that the server can use to determine their login status and permissions/accesses to resources. -Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an HTTP Response message. The response contains an [HTTP Response status code](/en-US/docs/Web/HTTP/Status) indicating whether or not the request succeeded (e.g. "`200 OK`" for success, "`404 Not Found`" if the resource cannot be found, "`403 Forbidden`" if the user isn't authorized to see the resource, etc.). The body of a successful response to a `GET` request would contain the requested resource. +Web servers wait for client request messages, process them when they arrive, and reply to the web browser with an HTTP response message. The response contains an [HTTP Response status code](/en-US/docs/Web/HTTP/Status) indicating whether or not the request succeeded (e.g., {{HTTPStatus("200", "200 OK")}} for success, {{HTTPStatus("404", "404 Not Found")}} if the resource cannot be found, {{HTTPStatus("403", "403 Forbidden")}} if the user isn't authorized to see the resource, etc.). The body of the response to a successful `GET` request contains the requested resource. -When an HTML page is returned it is rendered by the web browser. As part of processing, the browser may discover links to other resources (e.g. an HTML page usually references JavaScript and CSS files), and will send separate HTTP Requests to download these files. +When an HTML page is returned, it is rendered by the web browser. As part of processing, the browser may discover links to other resources (e.g. an HTML page usually references JavaScript and CSS files), and will send separate HTTP Requests to download these files. Both static and dynamic websites (discussed in the following sections) use exactly the same communication protocol/patterns. @@ -171,7 +171,7 @@ The main difference is that the URL doesn't have any parameters. As you can see, #### The response -The response from the request is shown below. The status code of "`302 Found`" tells the browser that the post succeeded, and that it must issue a second HTTP request to load the page specified in the `Location` field. The information is otherwise similar to that for the response to a `GET` request. +The response from the request is shown below. The status code of `302 Found` tells the browser that the post succeeded, and that it must issue a second HTTP request to load the page specified in the `Location` field. The information is otherwise similar to that for the response to a `GET` request. ```http HTTP/1.1 302 FOUND @@ -203,7 +203,7 @@ Let's recap on how this works, by looking again at the static site architecture ![A simplified diagram of a static web server.](basic_static_app_server.png) -When a user wants to navigate to a page, the browser sends an HTTP `GET` request specifying the URL of its HTML page. The server retrieves the requested document from its file system and returns an HTTP response containing the document and an [HTTP Response status code](/en-US/docs/Web/HTTP/Status) of "`200 OK`" (indicating success). The server might return a different status code, for example "`404 Not Found`" if the file is not present on the server, or "`301 Moved Permanently`" if the file exists but has been redirected to a different location. +When a user wants to navigate to a page, the browser sends an HTTP `GET` request specifying the URL of its HTML page. The server retrieves the requested document from its file system and returns an HTTP response containing the document and an [HTTP Response status code](/en-US/docs/Web/HTTP/Status) of `200 OK` (indicating success). The server might return a different status code, for example `404 Not Found` if the file is not present on the server, or `301 Moved Permanently` if the file exists but has been redirected to a different location. The server for a static site will only ever need to process GET requests, because the server doesn't store any modifiable data. It also doesn't change its responses based on HTTP Request data (e.g. URL parameters or cookies). @@ -255,7 +255,7 @@ Server-side web frameworks make writing code to handle the operations described One of the most important operations they perform is providing simple mechanisms to map URLs for different resources/pages to specific handler functions. This makes it easier to keep the code associated with each type of resource separate. It also has benefits in terms of maintenance, because you can change the URL used to deliver a particular feature in one place, without having to change the handler function. -For example, consider the following Django (Python) code that maps two URL patterns to two view functions. The first pattern ensures that an HTTP request with a resource URL of `/best` will be passed to a function named `index()` in the `views` module. A request that has the pattern "`/best/junior`", will instead be passed to the `junior()` view function. +For example, consider the following Django (Python) code that maps two URL patterns to two view functions. The first pattern ensures that an HTTP request with a resource URL of `/best` will be passed to a function named `index()` in the `views` module. A request that has the pattern `/best/junior`, will instead be passed to the `junior()` view function. ```python # file: best/urls.py diff --git a/files/en-us/learn/server-side/first_steps/introduction/index.md b/files/en-us/learn/server-side/first_steps/introduction/index.md index c8ac2482c5b08b0..c9ac675fc6c2d81 100644 --- a/files/en-us/learn/server-side/first_steps/introduction/index.md +++ b/files/en-us/learn/server-side/first_steps/introduction/index.md @@ -54,7 +54,7 @@ The server retrieves the requested document from its file system and returns an ### Dynamic sites -A dynamic website is one where some of the response content is generated _dynamically_, only when needed. On a dynamic website HTML pages are normally created by inserting data from a database into placeholders in HTML templates (this is a much more efficient way of storing large amounts of content than using static websites). +A dynamic website is one where some of the response content is generated _dynamically_, only when needed. On a dynamic website, HTML pages are normally created by inserting data from a database into placeholders in HTML templates (this is a much more efficient way of storing large amounts of content than using static websites). A dynamic site can return different data for a URL based on information provided by the user or stored preferences and can perform other operations as part of returning a response (e.g. sending notifications). diff --git a/files/en-us/learn/server-side/first_steps/website_security/index.md b/files/en-us/learn/server-side/first_steps/website_security/index.md index a0d7817d8f91216..fe9f34f9d2de697 100644 --- a/files/en-us/learn/server-side/first_steps/website_security/index.md +++ b/files/en-us/learn/server-side/first_steps/website_security/index.md @@ -140,6 +140,10 @@ A number of other concrete steps you can take are: - Keep track of the most popular threats (the [current OWASP list is here](https://owasp.org/www-project-top-ten/)) and address the most common vulnerabilities first. - Use [vulnerability scanning tools](https://owasp.org/www-community/Vulnerability_Scanning_Tools) to perform automated security testing on your site. Later on, your very successful website may also find bugs by offering a bug bounty [like Mozilla does here](https://www.mozilla.org/en-US/security/bug-bounty/faq-webapp/). - Only store and display data that you need. For example, if your users must store sensitive information like credit card details, only display enough of the card number that it can be identified by the user, and not enough that it can be copied by an attacker and used on another site. The most common pattern at this time is to only display the last 4 digits of a credit card number. +- Keep software up-to-date. + Most servers have regular security updates that fix or mitigate known vulnerabilities. + If possible, schedule regular automated updates, and ideally, schedule updates during times when your website has the lowest amount of traffic. + It's best to back up your data before updating and test new software versions to make sure there's no compatibility issues on your server. Web frameworks can help mitigate many of the more common vulnerabilities. diff --git a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md index 26653ba8e9f4301..81c29b3516c56d3 100644 --- a/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md +++ b/files/en-us/learn/tools_and_testing/client-side_javascript_frameworks/react_accessibility/index.md @@ -118,7 +118,7 @@ Doing this will populate our `editFieldRef` and `editButtonRef` with references console.log(editButtonRef.current); ``` -You'll see that the value of `editButtonRef.current` is `null` when the component first renders, but if you click an "Edit" button, it will log the `` element to the console. This is because the ref is populated only after the component renders, and clicking the "Edit" button causes the component to re-render. Be sure to delete this log before moving on. +You'll see that the value of `editButtonRef.current` is `null` when the component first renders, but if you click an "Edit" button, it will log the `