diff --git a/.github/workflows/auto-cleanup-bot.yml b/.github/workflows/auto-cleanup-bot.yml index 485f6b7a7207600..620555d775b641a 100644 --- a/.github/workflows/auto-cleanup-bot.yml +++ b/.github/workflows/auto-cleanup-bot.yml @@ -31,6 +31,8 @@ jobs: yarn content fix-flaws yarn fix:md yarn fix:fm + node scripts/sort_and_unique_file_lines.js .vscode/ignore-list.txt + node scripts/sort_and_unique_file_lines.js .vscode/terms-abbreviations.txt - name: Create PR with only fixable issues if: success() diff --git a/.github/workflows/pr-check_cspell_lists.yml b/.github/workflows/pr-check_cspell_lists.yml new file mode 100644 index 000000000000000..a40d41797fd9669 --- /dev/null +++ b/.github/workflows/pr-check_cspell_lists.yml @@ -0,0 +1,33 @@ +name: Check cSpell lists + +on: + pull_request: + branches: + - main + paths: + - .vscode/ignore-list.txt + - .vscode/terms-abbreviations.txt + +jobs: + docs: + runs-on: ubuntu-latest + steps: + - uses: actions/checkout@v4 + with: + sparse-checkout-cone-mode: false + sparse-checkout: | + .vscode/ignore-list.txt + .vscode/terms-abbreviations.txt + .nvmrc + package.json + scripts/sort_and_unique_file_lines.js + + - name: Setup Node.js environment + uses: actions/setup-node@v4 + with: + node-version-file: ".nvmrc" + + - name: Check if cSpell word lists are in correct order + run: | + node scripts/sort_and_unique_file_lines.js .vscode/ignore-list.txt --check + node scripts/sort_and_unique_file_lines.js .vscode/terms-abbreviations.txt --check diff --git a/.github/workflows/spelling-check-bot.yml b/.github/workflows/spelling-check-bot.yml index cc04cb4776acc40..f8eacc8444f979d 100644 --- a/.github/workflows/spelling-check-bot.yml +++ b/.github/workflows/spelling-check-bot.yml @@ -44,7 +44,7 @@ jobs: env: GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} TITLE: Weekly spelling check - LABELS: reported by automation,good first issue + LABELS: reported by automation BODY: | Typos and unknown words: diff --git a/.lintstagedrc.js b/.lintstagedrc.js index 4204b0b0beb4f16..decfb9664873fbd 100644 --- a/.lintstagedrc.js +++ b/.lintstagedrc.js @@ -17,4 +17,10 @@ export default { `yarn filecheck ${filenames.join(" ")}`, ], "*": (filenames) => [`node scripts/log-url-issues.js`], + ".vscode/ignore-list.txt": (filenames) => [ + `node scripts/sort_and_unique_file_lines.js .vscode/ignore-list.txt`, + ], + ".vscode/terms-abbreviations.txt": (filenames) => [ + `node scripts/sort_and_unique_file_lines.js .vscode/terms-abbreviations.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 5b8bf9c17347399..80797e93d6c6a44 100644 --- a/.vscode/ignore-list.txt +++ b/.vscode/ignore-list.txt @@ -1,22 +1,19 @@ -Amit -Scrimba -rvfc -Azarath -Tamaran AAAAAAABAAE AAAAD AAABAAEAEBAAA +aaabcc aaba +aabaac AABB +AABB's aabbcc aabbccdd -AABB's +aacbbbcac AAEC AAFEI AAGUID AAQAB aarch -Áaron abaac Ababa ABAQ @@ -65,10 +62,12 @@ accentlightesthighlight accentlightshadow accentregularhighlight accentregularshadow +ACCEPTEDTOS Accessibilità Accessibles accesskeys acclmtr +accname accountnum accu accumsan @@ -81,9 +80,7 @@ achromatopsia acknowl acknowled acodec -𝚊𝚌𝚘𝚜 acosh -𝚊𝚌𝚘𝚜𝚑 Acrosync ACSS activatable @@ -98,6 +95,7 @@ addressbar addsourcebuffer addstream addtrack +adduser Addy ADHD Adilah @@ -106,16 +104,19 @@ adipiscing adipisicing adipscing adjtimes +adjtimescapheight +adjtimesexheight Adlam adlm ADPCM +adrianroselli ADSR adtech +advertisementreceived AEDT aeio AEIOU aeiouy -ˈælfa Aenean AEST afes @@ -128,6 +129,7 @@ afterprint afterscriptexecute afunkydomainname agere +aggregatable aggregately Agnostify AGWG @@ -135,6 +137,7 @@ Ahom AIAAAA Akhgari ALAC +alastairc alaw albumicon Alem @@ -152,6 +155,7 @@ aliquid aliquip aliquyam alispivak +alistapart ality allbooks ALLCAPS @@ -159,10 +163,12 @@ Allons allowdirs allowdropevent allowevents +ALLOWFROM ALLPASS allsettled allsmallcaps Alman +alphanumerals alphatransparency ALPN alternatingbackground @@ -172,6 +178,7 @@ ambisonic Amet Amete Amiri +Amit Amit's amore Amorim @@ -185,10 +192,10 @@ analyser's analyzability anana Anand -André Andreas Andreessen Andrzej +André Anek angleminus ANGLETYPE @@ -200,7 +207,9 @@ animationend animationiteration animationstart animi +Animometer ANMF +Annonay annunaki anonid Anonymization @@ -210,11 +219,14 @@ anotherscript anothertarget Ansari Ansyari +antialiasing antitracking Anurag anyfunc anypage Anytown +apacheconf +apachectl Apapou APCA aperiam @@ -273,18 +285,18 @@ Arun Asana ASCAP ascendingly +ASCIIID Asclepias ASGI Ashita Ashlyn Ashok's -𝚊𝚜𝚒𝚗 asinh -𝚊𝚜𝚒𝚗𝚑 asintn ASLR asmo Assemblée +assetlinks associationlist associationlistitemkey associationlistitemvalue @@ -294,10 +306,8 @@ asuintn asynchrony asynciterator ATAG -𝚊𝚝𝚊𝚗 Atanassov atanh -𝚊𝚝𝚊𝚗𝚑 atexits atlasing Atmark @@ -310,6 +320,7 @@ Attributs Attrx auctor Audiocogs +audiocontext audioend Audiofile audioinput @@ -368,6 +379,7 @@ Axess AXQB Aylin Ayşe +Azarath Azeri AZERTY Aziz @@ -420,12 +432,15 @@ beforeend beforeevicted beforeinput beforeinstallprompt +beforeinstallpromptevent beforematch beforeprint beforescriptexecute +beforetoggle beforeunload beforexrselect Beihang +belgin belowbreve belowcircumflex belowcomma @@ -442,8 +457,6 @@ Bernouilli beststartupever Beverloo's Bezier -Bézier -Béziers bezje bfalse bfcache @@ -501,6 +514,7 @@ blit blitting blobconstructor Blobular +blockable blockified blockiness blocklists @@ -553,13 +567,13 @@ Boxrender boxtitle BPPV BPTC -ˈbraːˈvo braceless brah Brai braillelabel brailleroledescription bram +brians brickfield brighttext Broadcastchannel @@ -569,7 +583,9 @@ browserless Browsershots browserslistrc BROWSERSTACK +Browsersync browsertabbar +browsingtopics Bruant brucelindbloom BSAC @@ -608,11 +624,15 @@ byterange byteranges bytestream Bytestreams +bytestring +Bézier +Béziers caaaaaaandy caaandy caandy Cachable Cacheable +CACHEDIR CAFEBABE CAIND caitmuenster @@ -651,6 +671,8 @@ Cassini caststatus Català Catan +catchable +Caterina catfishhead catflap catfront @@ -663,7 +685,6 @@ CBDT CBJS CBOR cbrt -𝚌𝚋𝚛𝚝 ccall CCITT CCPA @@ -672,7 +693,6 @@ cdbbdbsbz CDLR cdylib Ceci -Célestes cellhighlight cellhighlighttext CELP @@ -686,6 +706,7 @@ Chakra Chakra's Chamakh changeme +characterboundsupdate characteristicvaluechanged characterset charat @@ -698,10 +719,13 @@ chatbox chatserver chbox chbx +Cheatsheet +checkboard checkedness checkiandj checkin checkj +checkmarks checkmenuitem Chiki childlist @@ -751,6 +775,7 @@ clienthello clientkey clig clike +clipboardchange Clippy clipspace cliptext @@ -761,8 +786,8 @@ cloneable closebutton closeme Cloudinary -Clóvis CLREQ +Clóvis CMAMBAAAAAA CMYK cndy @@ -773,6 +798,7 @@ codebases Codecademy Codedread Codeinput +Codelab codementor CODEOWNERS codepaths @@ -793,8 +819,10 @@ colex colexographical colindextext collapser +collectability Collectn collectstatic +collinearity Colomb colorbox colorchange @@ -830,6 +858,7 @@ compositionend compositionstart compositionupdate CONCAT +concatenator Cond Conde Condei @@ -856,22 +885,29 @@ consetetur Consolas constructio Containerless +contenido contentaccessible contentarea contentdelete Contentful +contentlost +contentscripts contenttypes +contentvisibilityautostatechange contentvisibilityautostatechanged contextlost contextrestored +controlbar controllerchange controlslist conubia convallis Convolutional cookiechange +cookieless coolexample coolmodule +cooluser Coprime copysign copywithin @@ -880,9 +916,7 @@ CORB Corber CORSM Cortana -𝐜𝐨𝐬 COSE -𝚌𝚘𝚜𝚑 couleur countername Coursera @@ -894,16 +928,18 @@ cpuworker cqmax cqmin Cras +crashextensions Cratchit crbug createpattern createreader createsuperuser +credentialled Credentialless -crédit creds cript Crockford +crookedtimber cros crossbrowser crossdomain @@ -913,6 +949,7 @@ cryptokey CRYPTOMINING cryptosystem cryptosystems +crédit csbig Cscript cseuckr @@ -935,6 +972,7 @@ csscomputed cssdb cssfontstack cssgrid +cssgridgarden cssgridlegacy csshiftjis cssinfo @@ -947,6 +985,7 @@ cssremedy cssruleview csssubgrid csssyntax +csstricks cssvisual CSSWG CSSX @@ -958,7 +997,9 @@ ctlr ctron ctrz ctypes +Cubehelix cubemap +cubemaps cubetexture cubilia cuechange @@ -971,15 +1012,19 @@ Curlz curr currentcolor currententrychange +currentscreenchange cursus Curveto CUSEL customelements customshapes +customstateset CWND cwrap Cyberduck +cycletracker Cylon +Célestes DAAA daala dafont @@ -1011,6 +1056,7 @@ datetimeformat datetimes Datumizer davbrito +davidwalsh davidwalshblog dbbd DBFF @@ -1045,17 +1091,16 @@ delectus deleniti deleteoperator deleteproperty -ˈdeltɑ Demi -démonstration demozilla demultiplexing demux +demuxing Denicola Denicola's Deno -denormalized Deno's +denormalized deoptimize depreceted deprioritized @@ -1070,6 +1115,7 @@ Desaulniers descendingly descr descript +Descripton deserunt desinis Desproges @@ -1236,6 +1282,7 @@ Dreamweaver dropevent dropmarker dropshadow +dropshow droptarget DSCP DSLs @@ -1263,6 +1310,7 @@ Dyno Dynos dyscalculia Dyslexi +démonstration Eader EAEFF Ealert @@ -1320,7 +1368,6 @@ elot elts emailme emailoptin -Émanuel embeddable Embedder Embedders @@ -1337,6 +1384,7 @@ Emptytext EMSCRIPTEN Emscripting emsdk +enablei Encod encodeuri encodeuricomponent @@ -1351,6 +1399,7 @@ Endtest endtime engageability engageable +Engish enim ENLW ENOENT @@ -1395,6 +1444,7 @@ Esta Etag etags Etarget +Ethere ethertank ethi ethioaa @@ -1407,6 +1457,8 @@ eveniet evenodd eventname eventtarget +everytime +evilsite Examp examplebutton examplecheckbox @@ -1430,6 +1482,7 @@ exampleradio examplerange examplereset examplesearch +examplestyles examplesubmit exampletel exampletext @@ -1446,11 +1499,9 @@ Exfiltration EXIF exitpictureinpicture Exljbris -𝚎𝚡𝚙 Expando expedita expm -𝚎𝚡𝚙𝚖 expressjs expresstests exprgen @@ -1481,6 +1532,7 @@ factfile factit Factsheet failovers +Fairchild fakeid fakepath falsey @@ -1508,6 +1560,9 @@ fedcm feedforward FEFD felis +fencedframe +fencedframeconfig +fencedframes feoffset fermentum fers @@ -1534,9 +1589,11 @@ filesharing filesize filestream Filesystems +filetext Filezilla FILLMODE fillstyle +filterfunctions filteron fina finalizer @@ -1568,13 +1625,14 @@ flabada FLAC FLAC's flagcolors +Flagfox flashtext flatmap Flavio fleurons Flexbox -Flexboxes flexbox's +Flexboxes Flexbugs flexy Flickr @@ -1633,6 +1691,7 @@ forof Fortnite Forw forwardonly +forwidth FOSS Foti FOUC @@ -1673,8 +1732,8 @@ fromentries frontmatter frontmost fround -Früh fruitbear +Früh Fscreen Fscript fugiat @@ -1734,6 +1793,7 @@ gangnam Gannen gatheringstatechange Gato +gattserverdisconnected Gayatri Gbps GCLI @@ -1745,6 +1805,7 @@ geckoversion geckoview Gedit gement +generatable generix geng geolocate @@ -1756,11 +1817,11 @@ geor GEOSTD GEQUAL Gerd -GESÄSS -Gesäß gesturechange gestureend gesturestart +GESÄSS +Gesäß getbigint getbiguint getcanonicallocales @@ -1772,6 +1833,7 @@ getfloat getfullyear gethours getint +GETMATCHEDRULES getmilliseconds getminutes getmonth @@ -1804,6 +1866,7 @@ Gillenwater's gims giphy Gitbash +givenname glanceable Glat glcanvas @@ -1841,9 +1904,11 @@ graylevel Grayscale Grayscaling Graywolf +greenblue Greenify Greensock greentoggle +greenzero grek greklow greon @@ -1866,6 +1931,7 @@ groupbytomap groupingoperator groupname growsandstays +growshrink GSAP GSSAPI Gstreamer @@ -1882,7 +1948,6 @@ gzipped Gzipping Gzzh habitasse -háček halehame HALFWIDTH Halloumi @@ -1901,6 +1966,7 @@ HANKAKU hansfin hantfin harissa +harpercollins harum Hashbang hashchange @@ -1954,6 +2020,7 @@ HIGHPASS highres Highrise HIGHSHELF +highspeed Hijri Hildy hilite @@ -1991,7 +2058,6 @@ Holzman Homescreen homothetic Honigswald -Hönigswald hoosteeno horizontalstrike horzvert @@ -2056,7 +2122,8 @@ Hyperaudio's hyperlinktext hypertexts hypot -𝚑𝚢𝚙𝚘𝚝 +háček +Hönigswald iaculis iarc ICAI @@ -2148,7 +2215,9 @@ Ilter Ilya imag imageattr +imagebad imagedata +imagegrid imagemaps IMAGESET imageurl @@ -2161,8 +2230,8 @@ impedit imperdiet importmap IMSC -imscjs IMSC's +imscjs imul inactivetitlebarcolor inceptos @@ -2174,6 +2243,9 @@ indexeddb indexof infile infobar +infobox +infobox's +infoboxes inga initialimage Initialise @@ -2183,6 +2255,7 @@ Inkscape's inlinable Inlines innerht +innertext innolitics inoperator inputdevices @@ -2206,6 +2279,7 @@ Intelli Intellifont Interactability interactable +interarrival interceptable intercooler Interdimensional @@ -2227,6 +2301,7 @@ invidunt Invision Ionos ipaddr +ipados IPFS ipns ipsa @@ -2287,6 +2362,7 @@ iyqi Jaenisch Jalad Jalkhov +jamiedoe Jank janking Jankord @@ -2304,7 +2380,6 @@ Jehl's Jeni's Jeonja Jeremie -Jérémie jeremiepat Jewett jfgd @@ -2312,7 +2387,7 @@ JFIF jgndmic jhokmfdskl jibbering -jícama +Jinping JISHO Jitsi Jjom @@ -2361,16 +2436,18 @@ jswebm jsxref jumpless jumpterm -Júnior JUNJA justo justone juxtaposi JXON +Jérémie +jícama +Júnior Kadir Kadlec -kaios Kahlo +kaios Kakao Kaku Kaply @@ -2442,6 +2519,7 @@ Kneeland Knocky Knolwedgement Knowbility +Kobabe Kokoro Kolkata kombu @@ -2456,9 +2534,12 @@ Kravets Kulikov KUMA kumascript -Kütük kwargs Kyouko +Kütük +L'homme +l'oignon +l'âge labelable labeledby labore @@ -2467,7 +2548,6 @@ laboris laborum lacinia lacus -l'âge Lagerblad laggy Laing @@ -2496,6 +2576,7 @@ laudatur Lauke lazify lazyload +lazyloaded lazysizes Lbitfield Lclampf @@ -2519,13 +2600,12 @@ Lempel LENGTHADJUST LENGTHTYPE Lennart -Léonie -Léonie's leopardskin lepc Lepcha LEQUAL Lesh +letmein letterboxed letterboxing letterform @@ -2535,7 +2615,6 @@ levelchange levent Lexi Leyla -L'homme Lianghekou Libav Libertinus @@ -2552,16 +2631,19 @@ liga Lightbox lightgoldenrod lightnesses +lightpurple lightshow Lighttpd Limbu Limin Lindbloom's +Lindenberg Lindesay lineargradient Linearize lineboundary linebreak +linecaps linename Lineto linewidth @@ -2585,7 +2667,6 @@ Llanfair LLLLLLLLLLLLLLLLRRRRRRRRRRRRRRRR LMENU lmodern -𝙻𝙽 lname lnum loadeddata @@ -2612,12 +2693,9 @@ localtime locationbar lockscreens lofi -𝚕𝚘𝚐 -𝙻𝙾𝙶 logarithmed logline Logpoints -l'oignon longdiv longhands longspan @@ -2625,15 +2703,18 @@ longtask longtasks Longterm longwave +longwinded Lookaheads lookbehinds loopend loopstart +loopstarted Losslessly lostcapture lostpackets lostpointercapture Lovie +lowdelay lowlights lowp LOWPASS @@ -2665,6 +2746,9 @@ lvmax lvmin LWIN lwtheme +Léonie +Léonie's +macaron Macarons Machrek Macknik @@ -2689,6 +2773,7 @@ Majestatis Majumdar makemigrations Makey +Malala malesuada malloc Mamitiana @@ -2708,7 +2793,6 @@ MARKERUNITS Markmarkimark Martell martinfowler -März Masaram Masayuki Maski @@ -2716,11 +2800,11 @@ MASSHOU Massieux matchall MATF -𝙼𝚊𝚝𝚑 mathbb mathbold mathdbl mathfont +mathit MATHML mathmono Mathoid @@ -2742,6 +2826,7 @@ maxgreen maxime Maximiliano maximus +maxplaybackrate maxrow maxsafeinteger maxvalue @@ -2767,6 +2852,7 @@ mediump Medline Meetei MEETORSLICE +megastore Meggin meinheld memcpy @@ -2799,6 +2885,7 @@ messagebox messageerror Metafile metalness +metastring meterbar meterchunk METHODTYPE @@ -2840,16 +2927,19 @@ minimalistic minmax minuto minutos +miplevel MIPMAP mipmapped Mipmapping Mipmaps Miracast +Miroslav mirrorable mirunacurtean misissuance misissuances misissued +Misparsed mitigations MITM Mitzie @@ -2873,6 +2963,7 @@ Moderna Modernizr Modernizr's Modif +modulepreloaded Moin Moiré Mojibake @@ -2887,6 +2978,7 @@ momot monkeypatch monoscopic Montag +montecarlo moof Moonrocks Mooog @@ -2900,6 +2992,7 @@ Mork morx Mothman MOUSEDOWN +mouseentry MOUSEHWHEEL mouseleave mouselook @@ -2957,13 +3050,14 @@ MUAT Mufasa MUHENKAN Mullany -Müller mult Multicol multicolumn multicolumns multicore +multifactor multihomed +multimemory multimessaging multipage multipass @@ -2983,12 +3077,12 @@ Multiview Mundo Munsell muscaria -Musée musicdsp Musicogenic musicplayer Musicr Mustafa +Musée MVVM myaddon MYAGE @@ -3028,6 +3122,7 @@ myfoot myform myframe mygraphic +mygroupmarker myhead myhost myid @@ -3068,12 +3163,14 @@ myrenderpassencoder myrenderpipeline myroutine myrows +mysampler myscript myserver myshader myshov mysprite mystate +mystatename mystring mystunserver mystylesheet @@ -3093,10 +3190,11 @@ myview myweb mywindow myworkerurl +März +Müller Nacl Nada Naeher -naïvely Nakamura Nakano's Nally @@ -3113,11 +3211,13 @@ nativehyperlinktext natoque natus Navara +navigables navigateerror navigatesuccess Navigations -Nazário Nazarrudin +Nazário +naïvely NCBI NCLX ndata @@ -3162,6 +3262,7 @@ newtab newtarget newtext newval +nextslide nextstep NEXTTRACK nextul @@ -3170,9 +3271,9 @@ NFKC NFKD nguy nibh +NIC's nicezero nicht -NIC's niform nightlies nightwatch @@ -3187,6 +3288,7 @@ nobis nobooks nobullets nocache +Nodepad nodeset nodownload noemit @@ -3228,6 +3330,7 @@ notanaudio Notar notaurl notavideo +noteblocks notebox notecard notfound @@ -3236,11 +3339,13 @@ notificationbox notificationclick notificationclose Noto +notrendered notservice NOTSUPPORTEDERR nourl nowledge nowledgement +Nowrapping NPAPI npmjs NPNVDOM @@ -3290,6 +3395,7 @@ offmainthreadcomposition offscreencanvas offsetblur offsetleft +offsetted oggz Ogonek OIDC @@ -3344,6 +3450,8 @@ onscreenschange onscrollend onsinkchange ontent +ontextformatupdate +ontextupdate ontrol onum onuncapturederror @@ -3395,7 +3503,6 @@ osma Osmani Osmani's Osmanya -Österreich otation othercompany otherdoc @@ -3443,15 +3550,19 @@ pageinfo Pagella pageload pageloadtime +pagereveal pageshow -páginas +pageswap Pahawh +paintable +paintsize paintworklet paintworklet's pais Palatino Paletton pantherina +papermakers paragraaf paragraphboundary paragraphe @@ -3503,8 +3614,8 @@ Pedestaling peerconnection peerjs Pelientesque -Pellentesque Pell's +Pellentesque Penadés penatibus Pereira @@ -3514,6 +3625,7 @@ periodicsync perispomeni Perlin permessage +permissionspolicy pers personalbar personaltoolbar @@ -3534,7 +3646,6 @@ phonorecords photopic Photoshop PHPSESSID -𝙿𝙸 Picryl Picturefill PIDOM @@ -3548,6 +3659,7 @@ Pinia PINP Pinterest Piotrek +pipline Pissuti Pitstop Pixabay @@ -3559,9 +3671,11 @@ placeat placerat Platane platea +Platformer platformers platformversion playbackorder +playbackrate playbackspeed playbutton playcanvas @@ -3611,6 +3725,8 @@ pomm pomr popcnt popout +popovertarget +popovertargetaction popstate populatedb popuponclick @@ -3639,7 +3755,6 @@ potappo potenti potl potr -𝚙𝚘𝚠 Powerbook powerefficient Powermapper's @@ -3651,9 +3766,14 @@ Praesent pranswer Prateek preactivate +precache +precached +precaches +precaching precoded Precomposed preconnecting +preconnects predeclared preffed prefixless @@ -3665,7 +3785,9 @@ prefwindow preg preinstall prelighting +preloaders premkproject +premultiplication PREMULTIPLY preorder prepopulate @@ -3676,9 +3798,10 @@ preprocessors Prerender prerendered prerendering +prerenderingchange +prerenders preresolved presentationml -présenté PRESERVEASPECTRATIO presnap pressable @@ -3690,9 +3813,11 @@ pretium prettyping preventdefault preventextensions +previousslide PREVIOUSTRACK PREVUNIQUE prflx +pricelist primarykey primcount primis @@ -3716,6 +3841,7 @@ proident Proin proinde promobutton +properities propertyaccessors propertyisenumerable propfind @@ -3730,6 +3856,7 @@ proxify proxyfied proxyhandler Proxying +présenté pseudoclass pseudoclasses Pseudocode @@ -3753,16 +3880,19 @@ purejsgame purgecaches pushsubscriptionchange PVRTC +PWA's pwabuilder pwamp pwas -PWA's pwid pwllgwyngyllgogerychwyrngogogoch PXHQTXP pylint Pythagora +pythonanywhere +pythonaware pyxpidl +páginas Qbsshxk QCIF QCMS @@ -3781,7 +3911,6 @@ quaxxor queryphrase queryset querysets -querystring quibusdam QUIC quickbrownfox @@ -3824,6 +3953,7 @@ ratechange ratione Rauschmayer Rauschmayer's +rawupdate Raytracer RBGA rcap @@ -3837,10 +3967,12 @@ Readablestream readback readdir readingerror +readonlyinline readwrite readwriteflush READYSTATE realid +realpython Realtek Rearrangeable reate @@ -3851,6 +3983,7 @@ receivebox Recep Rects recvonly +redblue reddinate Redeclaration Redeclarations @@ -3863,14 +3996,14 @@ redsquare redtext redtoggle redtogreen +redyellow +redzero reen Reeza -Référence referenceable referer referralpolicy reflectionchange -Régagnon regexes regionless reimplementation @@ -3911,19 +4044,22 @@ reprioritize reproject repudiandae requirable +requireinteraction requireuserinteraction Reregister rerum rescan rescoping +reselecting resends -réservé resh Resig Resig's resizability +Resizeable resizer resizerpanel +resnapped resolvedoptions resourcetimingbufferfull respecified @@ -3934,7 +4070,6 @@ restcookbook restofurl restparameters resultobj -résumé retarget retargeted retargeting @@ -3980,6 +4115,7 @@ roletype rolloff Romaji romanlow +Ronaldo Roselli Rossen Rossum @@ -4011,6 +4147,7 @@ RTCICE RTCIP RTCP RTCRTP +rtctransform RTCWEB RTMP RTMPE @@ -4030,8 +4167,14 @@ Runtimes rustc Rustup rutrum +rvfc RWIN Ryuno +Référence +Régagnon +réservé +résumé +s'écrase sadipscing Saepe safariextz @@ -4048,6 +4191,7 @@ Saltasaurus Salva SAMEORIGIN Samesite +samplepay Samplerate samplesize samr @@ -4074,6 +4218,7 @@ scalethumbend scalethumbstart scalethumbtick scalex +scanability scancode scanf scangamepads @@ -4086,10 +4231,10 @@ Schiff Schola Scholz schon -schön Schonheit schreibt Schwarz +schön scooby scopable scottohara @@ -4099,8 +4244,11 @@ screenful screenleft screenorientation screenreader +screenreaders +screenschange screentop Scribie +Scrimba Scriptable Scripters scriptname @@ -4132,12 +4280,12 @@ SECAM Sechelt secmetadata secp -s'écrase sectionhead Securecontext securityheaders securitypolicy securitypolicyviolation +seecompattable Seekable seekbackward seeked @@ -4149,7 +4297,9 @@ Segoe segundos Seizureless selectables +selectchange selectedcandidatepairchange +selectedness selectend selectionchange selectrepo @@ -4168,14 +4318,15 @@ senectus sentenceboundary Separatei sequi -será serialno serialnumber +Serpentina serverhello Serverside serverstart SERVFAIL serviceworker +será SESAC sess sessionhistory @@ -4213,10 +4364,14 @@ SFNT Shadeed shadowdom shadowrootclonable -shān +shadowrootdelegatesfocus +shadowrootmode +shadowrootserializable Sharada sharedarraybuffer +sharedmem sharedworker +sharpyuv Shazaam Sheppy shexp @@ -4228,12 +4383,16 @@ shippingoptionchange Shireen Shoeshop shortlink +shortlinks showable showbf shrd +shrinkwap +shrinkwrapping shtm SHTTP Shumway +shān sidebox sideload sideloaded @@ -4251,8 +4410,8 @@ SIGTERM Silf Silverlight SIMD -𝚜𝚒𝚗𝚑 Sinhala +sinkchange Sino sint Sintel @@ -4279,7 +4438,6 @@ skjfndskjfnbdskjfb skybox skyboxes Skywalker -𝔰𝔩 slabcraft Slaght slideheading @@ -4296,6 +4454,7 @@ smakar smallcaps SMARTPOSTER smartquotes +smashingmagazine smbps smcp SMIL @@ -4308,6 +4467,7 @@ Smus Snackbars snapport snapshotted +Snapshotting snapsvg SNES snews @@ -4351,6 +4511,7 @@ someroute Somers somescript somesite +somestate somesystem someusername somevideo @@ -4411,8 +4572,6 @@ spritesheets sprop sqlzoo Sqrd -𝚜𝚚𝚛𝚝 -𝚂𝚀𝚁𝚃 squarefree squeezeend squeezestart @@ -4425,6 +4584,7 @@ sref srflx SRGB srgba +srihash SRTP sscanf ssedemo @@ -4432,6 +4592,7 @@ SSIDs SSML SSRC ssthresh +stackexchange Stackoverflow Stalybridge Starcraft @@ -4455,6 +4616,8 @@ steponup STITCHTYPE STIX Storei +Stormys +Stratford strawman strcat strcmp @@ -4486,6 +4649,7 @@ studiorum stunprotocol stunserver Stylable +styleable styleeditor styleguide stylemap @@ -4508,12 +4672,15 @@ subexpression subexpressions subfeature subfolders +subformula +subformulas subframe subframes Subgrid -subgridded subgrid's +subgridded subgrids +subheaders Subinstruction subkey sublicensable @@ -4531,7 +4698,10 @@ subpage Subpages subpanels subpaths +subpattern subpatterns +subpopover +subproject subprojects subproperty subrectangle @@ -4542,6 +4712,8 @@ Subresource subresources subsampled Subsampling +Subsentence +subsetting substate substeps substr @@ -4549,6 +4721,8 @@ substream substreams Subtag Subtags +subteam +subteams subtr Subtractor subvalue @@ -4565,6 +4739,7 @@ sund sundried Sundström sunhpark +sunsetting sunt suntheme Superc @@ -4573,6 +4748,7 @@ superdomain superfast Supermedium superscaling +supersets superspeed supportedlocalesof supportedvaluesof @@ -4607,6 +4783,7 @@ svgz svmax svmin Svpf +swashoff swashon swimjiy Swisswatch @@ -4634,13 +4811,14 @@ takimata takr Takri talu +Tamaran tamen taml tamldec -𝚝𝚊𝚗𝚑 Tanx targetable TARGETDURATION +targettable taskattribution taskbars taskboard @@ -4682,10 +4860,12 @@ textarget textboxes textcolor textencoder +textformatupdate textnode TEXTPATH texttop texttrack +textupdate TEXTUREI tgfe Thaana @@ -4726,6 +4906,7 @@ timecodes Timecount timedelta timefield +timeframe Timepicker timerange timeslice @@ -4881,16 +5062,18 @@ truedoc truetype Trunc Trustwave +truthyness trycatch tsize TSLÍ -ˈtʃɑːli TTFB TTML TTSI +tunetheweb turnpassword turnserver turpis +tutsplus tvkeys tvremote tweened @@ -4955,6 +5138,8 @@ undecoded undeletable underflowing underflows +underliner +underlyingly underover Underscript Underscripts @@ -5069,7 +5254,9 @@ urlscheme urna urpmi Uruk +usecase usedtx +useinbandfec usepackage useragentstring userbase @@ -5102,6 +5289,7 @@ vaii validlink Vallejoanderson vals +valuechange valueof Vanderheiden Vandermonde @@ -5151,6 +5339,7 @@ videooutput videoplayer vidi Vieno +viewbox Viewmodel Viewports viewsource @@ -5160,6 +5349,7 @@ VIRTUALENV virtualenvs VIRTUALENVWRAPPER virtualizes +virtualkeyboardpolicy Virtuals visibilitychange visibilitystate @@ -5256,14 +5446,19 @@ weakmap weakset Weathersby weba +webappmanifest Webapps webassembly webaudio webauthn +webbundle webcal +webcodecs Webcompat webcomponents webconsole +webdav +webdesignerdepot Webdev webdeveloper webext @@ -5280,6 +5475,7 @@ webglreport webglsamples webgpu webhint +webidentity Webidl webkitdirectory webkitmouseforcechanged @@ -5308,6 +5504,7 @@ webshell Websniffer Websockets webspeech +webtransport Webvr WEBVTT webxr @@ -5327,6 +5524,7 @@ WHATWG's Whereami wherearemyglasses Whitenoise +whitepoint whitespaces Whitlock Whittaker @@ -5349,6 +5547,7 @@ wireframed wirelessly Wireshark Wirfs +wisedog Wisen wisi Wolenetz @@ -5357,6 +5556,7 @@ Wordmark wordmarks wordprocessingml workfile +workgroups Worklet worklet's Worklets @@ -5371,6 +5571,7 @@ writability writeln WRITEMASK writemasks +writingsuggestions wrnogly Wrox WSCTRL @@ -5481,6 +5682,9 @@ Zehe Zenevich ZENKAKU Zepto +zeroblue +zeroyellow +zerozero zfail Zheng zhuyin @@ -5503,6 +5707,13 @@ Zstandard zvon ZWNBSP ZWSP +Áaron +Émanuel +Österreich +ˈbraːˈvo +ˈdeltɑ +ˈtʃɑːli +ˈælfa ζήτα θdeg Θεϊκό @@ -5546,13 +5757,13 @@ ZWSP לדוגמא עִבְרִית أحلامك -اَلأَعْشَى الانتقال التطبيق العربية الفقرة اليسار اليمين +اَلأَعْشَى باللغة تحقيق تطبيق @@ -5562,4 +5773,27 @@ ZWSP شسيبتنمك طولا مرحبا +𝐜𝐨𝐬 +𝔰𝔩 +𝙻𝙽 +𝙻𝙾𝙶 +𝙼𝚊𝚝𝚑 +𝙿𝙸 +𝚂𝚀𝚁𝚃 +𝚊𝚌𝚘𝚜 +𝚊𝚌𝚘𝚜𝚑 +𝚊𝚜𝚒𝚗 +𝚊𝚜𝚒𝚗𝚑 +𝚊𝚝𝚊𝚗 +𝚊𝚝𝚊𝚗𝚑 +𝚌𝚋𝚛𝚝 +𝚌𝚘𝚜𝚑 +𝚎𝚡𝚙 +𝚎𝚡𝚙𝚖 +𝚑𝚢𝚙𝚘𝚝 +𝚕𝚘𝚐 +𝚙𝚘𝚠 +𝚜𝚒𝚗𝚑 +𝚜𝚚𝚛𝚝 +𝚝𝚊𝚗𝚑 𞤲𞥋𞤣𞤫 diff --git a/.vscode/terms-abbreviations.txt b/.vscode/terms-abbreviations.txt index e297fc75815e594..917bcc4a462c317 100644 --- a/.vscode/terms-abbreviations.txt +++ b/.vscode/terms-abbreviations.txt @@ -2,10 +2,10 @@ affordance affordances APNG Axess -bézier Bhattacharya Brosset Brotli +bézier callouts Caniuse cdylib diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index b587e9a63a476e3..55f23e627bf333c 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -8784,7 +8784,7 @@ /en-US/docs/Web/API/IdleDetector/onchange /en-US/docs/Web/API/IdleDetector/change_event /en-US/docs/Web/API/IdleDetector/requestPermission /en-US/docs/Web/API/IdleDetector/requestPermission_static /en-US/docs/Web/API/Image /en-US/docs/Web/API/HTMLImageElement/Image -/en-US/docs/Web/API/ImageBitmapFactories/createImageBitmap /en-US/docs/Web/API/createImageBitmap +/en-US/docs/Web/API/ImageBitmapFactories/createImageBitmap /en-US/docs/Web/API/Window/createImageBitmap /en-US/docs/Web/API/ImageBitmapRenderingContext/transferImageBitmap /en-US/docs/Web/API/ImageBitmapRenderingContext/transferFromImageBitmap /en-US/docs/Web/API/ImageData.ImageData /en-US/docs/Web/API/ImageData/ImageData /en-US/docs/Web/API/ImageData.data /en-US/docs/Web/API/ImageData/data @@ -10256,17 +10256,17 @@ /en-US/docs/Web/API/WindowOrWorkerGlobalScope/caches /en-US/docs/Web/API/Window/caches /en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearInterval /en-US/docs/Web/API/clearInterval /en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout /en-US/docs/Web/API/clearTimeout -/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap /en-US/docs/Web/API/createImageBitmap +/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap /en-US/docs/Web/API/Window/createImageBitmap /en-US/docs/Web/API/WindowOrWorkerGlobalScope/crossOriginIsolated /en-US/docs/Web/API/Window/crossOriginIsolated /en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch /en-US/docs/Web/API/Window/fetch /en-US/docs/Web/API/WindowOrWorkerGlobalScope/indexedDB /en-US/docs/Web/API/Window/indexedDB /en-US/docs/Web/API/WindowOrWorkerGlobalScope/isSecureContext /en-US/docs/Web/API/Window/isSecureContext /en-US/docs/Web/API/WindowOrWorkerGlobalScope/origin /en-US/docs/Web/API/Window/origin -/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask /en-US/docs/Web/API/queueMicrotask +/en-US/docs/Web/API/WindowOrWorkerGlobalScope/queueMicrotask /en-US/docs/Web/API/Window/queueMicrotask /en-US/docs/Web/API/WindowOrWorkerGlobalScope/rejectionhandled_event /en-US/docs/Web/API/Window/rejectionhandled_event /en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval /en-US/docs/Web/API/setInterval /en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout /en-US/docs/Web/API/setTimeout -/en-US/docs/Web/API/WindowOrWorkerGlobalScope/structuredClone /en-US/docs/Web/API/structuredClone +/en-US/docs/Web/API/WindowOrWorkerGlobalScope/structuredClone /en-US/docs/Web/API/Window/structuredClone /en-US/docs/Web/API/WindowOrWorkerGlobalScope/unhandledrejection_event /en-US/docs/Web/API/Window/unhandledrejection_event /en-US/docs/Web/API/WindowSessionStorage /en-US/docs/Web/API/Window/sessionStorage /en-US/docs/Web/API/WindowSessionStorage.sessionStorage /en-US/docs/Web/API/Window/sessionStorage @@ -10439,6 +10439,7 @@ /en-US/docs/Web/API/console/timeStamp /en-US/docs/Web/API/console/timeStamp_static /en-US/docs/Web/API/console/trace /en-US/docs/Web/API/console/trace_static /en-US/docs/Web/API/console/warn /en-US/docs/Web/API/console/warn_static +/en-US/docs/Web/API/createImageBitmap /en-US/docs/Web/API/Window/createImageBitmap /en-US/docs/Web/API/crossOriginIsolated /en-US/docs/Web/API/Window/crossOriginIsolated /en-US/docs/Web/API/crypto_property /en-US/docs/Web/API/Window/crypto /en-US/docs/Web/API/document.URL /en-US/docs/Web/API/Document/URL @@ -10709,6 +10710,7 @@ /en-US/docs/Web/API/onMSVideoOptimalLayoutChanged_ /en-US/docs/Web/API/HTMLVideoElement /en-US/docs/Web/API/origin /en-US/docs/Web/API/Window/origin /en-US/docs/Web/API/performance_property /en-US/docs/Web/API/Window/performance +/en-US/docs/Web/API/queueMicrotask /en-US/docs/Web/API/Window/queueMicrotask /en-US/docs/Web/API/range.cloneContents /en-US/docs/Web/API/range/cloneContents /en-US/docs/Web/API/range.cloneRange /en-US/docs/Web/API/range/cloneRange /en-US/docs/Web/API/range.collapse /en-US/docs/Web/API/range/collapse @@ -10740,9 +10742,11 @@ /en-US/docs/Web/API/range.startOffset /en-US/docs/Web/API/range/startOffset /en-US/docs/Web/API/range.surroundContents /en-US/docs/Web/API/range/surroundContents /en-US/docs/Web/API/range.toString /en-US/docs/Web/API/range/toString +/en-US/docs/Web/API/reportError /en-US/docs/Web/API/Window/reportError /en-US/docs/Web/API/scheduler_property /en-US/docs/Web/API/Window/scheduler /en-US/docs/Web/API/select.type /en-US/docs/Web/API/HTMLSelectElement/type /en-US/docs/Web/API/sessionStorage /en-US/docs/Web/API/Window/sessionStorage +/en-US/docs/Web/API/structuredClone /en-US/docs/Web/API/Window/structuredClone /en-US/docs/Web/API/style.media /en-US/docs/Web/API/HTMLStyleElement/media /en-US/docs/Web/API/style.type /en-US/docs/Web/API/HTMLStyleElement/type /en-US/docs/Web/API/success /en-US/docs/Web/API/IDBRequest/success_event diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index 9d074f9ae90e53a..56fedd50797192d 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -66604,6 +66604,28 @@ "modified": "2020-10-15T22:16:13.286Z", "contributors": ["mfuji09", "wbamberg"] }, + "Web/API/Window/createImageBitmap": { + "modified": "2020-10-15T21:37:56.407Z", + "contributors": [ + "gmanpersona", + "mfluehr", + "styfle", + "fscholz", + "DomenicDenicola", + "Halfman", + "jaffathecake", + "jpmedley", + "Brettz9", + "MatthiasSaihttam", + "nmve", + "chrisdavidmills", + "yisibl", + "DrRataplan", + "zeird", + "Kaku", + "adria" + ] + }, "Web/API/Window/crossOriginIsolated": { "modified": "2020-10-15T22:25:16.295Z", "contributors": ["ExE-Boss", "chrisdavidmills"] @@ -68208,6 +68230,16 @@ "JesseW" ] }, + "Web/API/Window/queueMicrotask": { + "modified": "2020-10-15T22:21:06.789Z", + "contributors": [ + "Kaiido", + "chrisdavidmills", + "Sheppy", + "zbjornson", + "DomenicDenicola" + ] + }, "Web/API/Window/rejectionhandled_event": { "modified": "2020-10-15T21:44:33.123Z", "contributors": [ @@ -71496,38 +71528,6 @@ "myakura" ] }, - "Web/API/createImageBitmap": { - "modified": "2020-10-15T21:37:56.407Z", - "contributors": [ - "gmanpersona", - "mfluehr", - "styfle", - "fscholz", - "DomenicDenicola", - "Halfman", - "jaffathecake", - "jpmedley", - "Brettz9", - "MatthiasSaihttam", - "nmve", - "chrisdavidmills", - "yisibl", - "DrRataplan", - "zeird", - "Kaku", - "adria" - ] - }, - "Web/API/queueMicrotask": { - "modified": "2020-10-15T22:21:06.789Z", - "contributors": [ - "Kaiido", - "chrisdavidmills", - "Sheppy", - "zbjornson", - "DomenicDenicola" - ] - }, "Web/API/setInterval": { "modified": "2020-12-09T23:19:41.310Z", "contributors": [ 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/deep_copy/index.md b/files/en-us/glossary/deep_copy/index.md index 297ea42bc2fdd67..49d900eb4bdfbee 100644 --- a/files/en-us/glossary/deep_copy/index.md +++ b/files/en-us/glossary/deep_copy/index.md @@ -48,10 +48,11 @@ console.log(ingredientsList[1].list); However, while the object in the code above is simple enough to be {{Glossary("serialization", "serializable")}}, many JavaScript objects are not serializable at all — for example, [functions](/en-US/docs/Web/JavaScript/Guide/Functions) (with closures), [Symbols](/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol), objects that represent HTML elements in the [HTML DOM API](/en-US/docs/Web/API/HTML_DOM_API), recursive data, and many other cases. Calling `JSON.stringify()` to serialize the objects in those cases will fail. So there's no way to make deep copies of such objects. -The web API [`structuredClone()`](/en-US/docs/Web/API/structuredClone) also creates deep copies and has the advantage of allowing [transferable objects](/en-US/docs/Web/API/Web_Workers_API/Transferable_objects) in the source to be _transferred_ to the new copy, rather than just cloned. It also handles more data types, such as `Error`. But note that `structuredClone()` isn't a feature of the JavaScript language itself — instead it's a feature of browsers and other JavaScript hosts that implement web APIs. And calling `structuredClone()` to clone a non-serializable object will fail in the same way that calling `JSON.stringify()` to serialize it will fail. +The web API {{DOMxRef("Window.structuredClone", "structuredClone()")}} also creates deep copies and has the advantage of allowing [transferable objects](/en-US/docs/Web/API/Web_Workers_API/Transferable_objects) in the source to be _transferred_ to the new copy, rather than just cloned. It also handles more data types, such as `Error`. But note that `structuredClone()` isn't a feature of the JavaScript language itself — instead it's a feature of browsers and other JavaScript hosts that implement web APIs. And calling `structuredClone()` to clone a non-serializable object will fail in the same way that calling `JSON.stringify()` to serialize it will fail. ## See also - Related glossary terms: - {{glossary("Shallow copy")}} -- [`window.structuredClone()`](/en-US/docs/Web/API/structuredClone) +- {{DOMxRef("Window.structuredClone()")}} +- {{DOMxRef("WorkerGlobalScope.structuredClone()")}} 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/serializable_object/index.md b/files/en-us/glossary/serializable_object/index.md index 40c3d9462839371..bfa77cce88e8ac7 100644 --- a/files/en-us/glossary/serializable_object/index.md +++ b/files/en-us/glossary/serializable_object/index.md @@ -7,7 +7,7 @@ page-type: glossary-definition {{GlossarySidebar}} **Serializable objects** are objects that can be serialized and later deserialized in any JavaScript environment ("realm"). -This allows them to, for example, be stored on disk and later restored, or cloned with {{domxref("structuredClone()")}}, or shared between workers using {{domxref("DedicatedWorkerGlobalScope.postMessage()")}}. +This allows them to, for example, be stored on disk and later restored, or cloned with {{DOMxRef("Window.structuredClone", "structuredClone()")}}, or shared between workers using {{domxref("DedicatedWorkerGlobalScope.postMessage()")}}. The serialization may not include all the properties and other aspects of the original object. For example, a serialization of a {{domxref("DOMException")}} must include the `name` and `message` properties, but whether it includes other properties is implementation dependent. 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/organizing/index.md b/files/en-us/learn/css/building_blocks/organizing/index.md index b6de822a7edd92c..0a33fddc876f462 100644 --- a/files/en-us/learn/css/building_blocks/organizing/index.md +++ b/files/en-us/learn/css/building_blocks/organizing/index.md @@ -332,7 +332,7 @@ Read more about this system [BEM 101](https://css-tricks.com/bem-101/) on CSS Tr #### Other common systems -There are a large number of these systems in use. Other popular approaches include [Scalable and Modular Architecture for CSS (SMACSS)](https://smacss.com/), created by Jonathan Snook, [ITCSS](https://itcss.io/) from Harry Roberts, and [Atomic CSS (ACSS)](https://acss.io/), originally created by Yahoo!. If you come across a project that uses one of these approaches, then the advantage is that you will be able to search and find many articles and guides to help you understand how to code in the same style. +There are a large number of these systems in use. Other popular approaches include [Scalable and Modular Architecture for CSS (SMACSS)](https://smacss.com/), created by Jonathan Snook, [ITCSS](https://itcss.io/) from Harry Roberts, and [Atomizer CSS (ACSS)](https://acss-io.github.io/atomizer/), originally created by Yahoo!. If you come across a project that uses one of these approaches, then the advantage is that you will be able to search and find many articles and guides to help you understand how to code in the same style. The disadvantage of using such a system is that they can seem overly complex, especially for smaller projects. diff --git a/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md b/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md index 9763fb5e047c8bf..cae4a47972d6ec8 100644 --- a/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md +++ b/files/en-us/learn/css/css_layout/practical_positioning_examples/index.md @@ -258,7 +258,7 @@ In our second example, we will take our first example — our info-box — and a > [!NOTE] > You can see the finished example running live at [fixed-info-box.html](https://mdn.github.io/learning-area/css/css-layout/practical-positioning-examples/fixed-info-box.html) ([source code](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/fixed-info-box.html)). Check it out to get an idea of what you will be building in this section of the article. -As a starting point, you can use your completed example from the first section of the article, or make a local copy of [info-box.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/info-box.html) from our GitHub repo. +As a starting point, you can use your completed example from the first section of the article, or make a local copy of [tabbed-info-box.html](https://github.com/mdn/learning-area/blob/main/css/css-layout/practical-positioning-examples/tabbed-info-box.html) from our GitHub repo. ### HTML additions 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/css/styling_text/web_fonts/index.md b/files/en-us/learn/css/styling_text/web_fonts/index.md index 67746b51cf8c4e0..3da26ecf79b015b 100644 --- a/files/en-us/learn/css/styling_text/web_fonts/index.md +++ b/files/en-us/learn/css/styling_text/web_fonts/index.md @@ -119,7 +119,7 @@ Web services for font generation typically limit file sizes. In such a case, con 1. [sfnt2woff-zopfli](https://github.com/bramstein/sfnt2woff-zopfli) for converting ttf to woff 2. [fontforge](https://fontforge.org/) for converting from ttf to svg -3. [batik ttf2svg](https://people.apache.org/~clay/batik/ttf2svg.html) for converting from ttf to svg +3. [batik ttf2svg](https://xmlgraphics.apache.org/batik/tools/font-converter.html) for converting from ttf to svg 4. [woff2](https://github.com/google/woff2) for converting from ttf to woff2 ### Implementing the code in your demo 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 e6a3a0534b78dca..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. +- **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..5bf53da692ce1f1 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/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/javascript/index.md b/files/en-us/learn/performance/javascript/index.md index 7edc89f049d1172..c28c3e747f30bf3 100644 --- a/files/en-us/learn/performance/javascript/index.md +++ b/files/en-us/learn/performance/javascript/index.md @@ -208,30 +208,22 @@ async function main() { } ``` -To improve this further, we can use {{domxref("Scheduling.isInputPending", "navigator.scheduling.isInputPending()")}} to run the `yield()` function only when the user is attempting to interact with the page: +To improve this further, we can use {{domxref("Scheduler.yield")}} where available to allow this code to continue executing ahead of other less critical tasks in the queue: ```js -async function main() { - // Create an array of functions to run - const tasks = [a, b, c, d, e]; - - while (tasks.length > 0) { - // Yield to a pending user input - if (navigator.scheduling.isInputPending()) { - await yield(); - } else { - // Shift the first task off the tasks array - const task = tasks.shift(); - - // Run the task - task(); - } +function yield() { + // Use scheduler.yield() if available + if ("scheduler" in window && "yield" in scheduler) { + return scheduler.yield(); } + + // Fall back to setTimeout: + return new Promise((resolve) => { + setTimeout(resolve, 0); + }); } ``` -This allows you to avoid blocking the main thread when the user is actively interacting with the page, potentially providing a smoother user experience. However, by only yielding when necessary, we can continue running the current task when there are no user inputs to process. This also avoids tasks being placed at the back of the queue behind other non-essential browser-initiated tasks that were scheduled after the current one. - ## Handling JavaScript animations Animations can improve perceived performance, making interfaces feel snappier and making users feel like progress is being made when they are waiting for a page to load (loading spinners, for example). However, larger animations and a higher number of animations will naturally require more processing power to handle, which can degrade performance. 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/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/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/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 ` +
+ + + + +``` + +The `updateContent()` method passes unsanitized content to the element's `innerHTML` property, which will cause a CSP violation. +We'd see the log output: + +```plain +blockedURL: trusted-types-sink +``` + +In order to avoid the violation we would need to update the script to define a trusted type policy, and use it to sanitize the input passed to the element: + +```js +const policy = trustedTypes.createPolicy("myPolicy", { + createHTML: (string) => { + // Some (insufficient) sanitization code + return string.replace(/`](/en-US/docs/Web/HTML/Element/meta) element to set the {{httpheader('Content-Security-Policy')}} `default-src` to `self`, which allows scripts and other resources to be loaded from the same origin, but does not allow inline scripts to be executed. +The document also includes an inline script, which should therefore trigger a CSP violation. + +```html + + + + + + + CSP: Violation due to inline script + + +

CSP: Violation due to inline script

+ + + +``` + +#### JavaScript (main.js) + +The document above also loads the external script `main.js`, which is shown below. +Because this is loaded from the same domain as the HTML, it is not blocked by the CSP. + +The script creates a new {{domxref("ReportingObserver")}} to observe content violation reports of type `"csp-violation"`. +Each time the callback function is invoked, we get the body of the first entry of the reports array, and use it to log the file, line, and column of the violation to the console. + +```js +// main.js +const observer = new ReportingObserver( + (reports, observer) => { + const cspViolationBody = reports[0].body; + console.log(`sourceFile: ${cspViolationBody.sourceFile}`); + console.log(`lineNumber: ${cspViolationBody.lineNumber}`); + console.log(`columnNumber: ${cspViolationBody.columnNumber}`); + }, + { + types: ["csp-violation"], + buffered: true, + }, +); + +observer.observe(); +``` + +Note that while there might be multiple reports in the returned array, for brevity we only log the values of the first element. + +#### Results + +You can try this out using a [local server](/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server). +Copy the above code into `test/index.html` and `test/main.js` and run the server in the root directory. +Assuming the address of the local server is `http://127.0.0.1:9999`, you can then load the HTML file from `http://127.0.0.1:9999/test/` (or `http://127.0.0.1:9999/test/index.html`). + +With the above setup, the output of the log on Chrome is: + +```plain +sourceFile: http://127.0.0.1:9999/test/ +lineNumber: 15 +columnNumber: 0 +``` + +The result is similar for Firefox: + +```plain +sourceFile: http://127.0.0.1:9999/test/ +lineNumber: 15 +columnNumber: 13 +``` + +Note that the column number is different for the two browsers. +Chrome always appears to report `0`. +The value on Firefox represents the position of the first character after the end of the opening ` + CSP: Violation due to inline script + + +

CSP: Violation due to inline script

+ + + +``` + +#### JavaScript (main.js) + +The document above also loads the external script `main.js`, which is shown below. +Because this is loaded from the same domain as the HTML, it is not blocked by the CSP. + +The script creates a new {{domxref("ReportingObserver")}} to observe content violation reports of type `"csp-violation"`. +Each time the callback function is invoked, we get the body of the first entry of the reports array, and use it to log the file, line, and column of the violation to the console. + +```js +// main.js +const observer = new ReportingObserver( + (reports, observer) => { + const cspViolationBody = reports[0].body; + console.log(`disposition: ${cspViolationBody.disposition}`); + // For example: "enforce" + }, + { + types: ["csp-violation"], + buffered: true, + }, +); + +observer.observe(); +``` + +Note that while there might be multiple reports in the returned array, for brevity we only log the values of the first element. + +#### Results + +If serving the above code, the log output would be: + +```plain +disposition: enforce +``` + +> [!NOTE] +> If `Content-Security-Policy-Reporting-Only` was enabled the disposition would be `report`. +> Note however, that `Content-Security-Policy-Reporting-Only` must be served: it can't be set in the `` element as we have done above. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SecurityPolicyViolationEvent.disposition")}} diff --git a/files/en-us/web/api/cspviolationreportbody/documenturl/index.md b/files/en-us/web/api/cspviolationreportbody/documenturl/index.md new file mode 100644 index 000000000000000..298e2c87221bbf1 --- /dev/null +++ b/files/en-us/web/api/cspviolationreportbody/documenturl/index.md @@ -0,0 +1,115 @@ +--- +title: "CSPViolationReportBody: documentURL property" +short-title: documentURL +slug: Web/API/CSPViolationReportBody/documentURL +page-type: web-api-instance-property +browser-compat: api.CSPViolationReportBody.documentURL +--- + +{{APIRef("Reporting API")}} + +The **`documentURL`** read-only property of the {{domxref("CSPViolationReportBody")}} interface is a string that represents the URL of the document or worker that violated the [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP). + +## Value + +A string containing the URL of the document or worker that violated the CSP. + +## Examples + +### CSP inline script violation showing referrer + +This example triggers a CSP violation using an inline script, and reports the violation using a {{domxref("ReportingObserver")}}. +We navigate to the page from another page and log the `referrer`, `documentURL`, and `blockedURL`. + +#### HTML + +First we define our referrer page `/bounce/index.html`. +This page just contains a link to another page `../report_sample/index.html`. + +```html + + + + + + + + + + +``` + +The `../report_sample/index.html` HTML file is defined below. +This uses the [``](/en-US/docs/Web/HTML/Element/meta) element to set the {{httpheader('Content-Security-Policy')}} `script-src-elem` to `self`, which allows scripts to be loaded from the same domain, but does not allow inline scripts to be executed. +The document also includes an inline script, which will trigger a CSP violation. + +```html + + + + + + + + + + + +``` + +#### JavaScript (main.js) + +The report sample above also loads the external script `main.js`, which is shown below. +Because this is loaded from the same domain as the HTML, it is not blocked by the CSP. + +The script creates a new {{domxref("ReportingObserver")}} to observe content violation reports of type `"csp-violation"`. +Each time the callback function is invoked, we get the body of the first entry of the reports array, and use it to log the violation `documentURL`, `referrer`, and `blockedURL` to the console. + +```js +// main.js +const observer = new ReportingObserver( + (reports, observer) => { + console.log(`documentURL: ${reports[0].body.referrer}`); + console.log(`referrer: ${reports[0].body.referrer}`); + console.log(`blockedURL: ${reports[0].body.blockedURL}`); + }, + { + types: ["csp-violation"], + buffered: true, + }, +); + +observer.observe(); +``` + +Note that while there might be multiple reports in the returned array, for brevity we only log the values of the first element. + +#### Results + +The console output for the above code would look a bit like that below (the site will depend on how the pages are served): + +```plain +documentURL: http://127.0.0.1:9999/report_sample/ +referrer: http://127.0.0.1:9999/bounce/ +blockedURL: inline +``` + +Note that `referrer` is the page we navigated from, `documentURL` is the page with the CSP violation, and `blockedURL` is not an URL at all in this case, but an indication that the violation was caused by an inline script. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SecurityPolicyViolationEvent.documentURI")}} diff --git a/files/en-us/web/api/cspviolationreportbody/effectivedirective/index.md b/files/en-us/web/api/cspviolationreportbody/effectivedirective/index.md new file mode 100644 index 000000000000000..c33c8cdc1ec551c --- /dev/null +++ b/files/en-us/web/api/cspviolationreportbody/effectivedirective/index.md @@ -0,0 +1,105 @@ +--- +title: "CSPViolationReportBody: effectiveDirective property" +short-title: effectiveDirective +slug: Web/API/CSPViolationReportBody/effectiveDirective +page-type: web-api-instance-property +browser-compat: api.CSPViolationReportBody.effectiveDirective +--- + +{{APIRef("Reporting API")}} + +The **`effectiveDirective`** read-only property of the {{domxref("CSPViolationReportBody")}} interface is a string that represents the effective [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) directive that was violated. + +Note that this contains the specific directive that was effectively violated, such as [`script-src-elem`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/script-src-elem) for violations related to script elements, and not the policy that was specified, which may have been the (more general) [`default-src`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/default-src). + +## Value + +A string representing the effective [`Content-Security-Policy` directive](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#directives) that was violated. + +## Examples + +### CSP inline script violation + +This example triggers a CSP violation using an inline script, and reports the violation using a {{domxref("ReportingObserver")}}. +In particular, it logs the `effectiveDirective` and the `originalPolicy`, making the difference clear. + +#### HTML + +The HTML file below uses the [``](/en-US/docs/Web/HTML/Element/meta) element to set the {{httpheader('Content-Security-Policy')}} `default-src` to `self`, which allows scripts and other resources to be loaded from the same domain, but does not allow inline scripts to be executed. +The document also includes an inline script, which should trigger a CSP violation. + +```html + + + + + + + CSP: Violation due to inline script + + +

CSP: Violation due to inline script

+ + + +``` + +#### JavaScript (main.js) + +The document above also loads the external script `main.js`, which is shown below. +Because this is loaded from the same domain as the HTML, it is not blocked by the CSP. + +The script creates a new {{domxref("ReportingObserver")}} to observe content violation reports of type `"csp-violation"`. +Each time the callback function is invoked, we get the body of the first entry of the reports array, and use it to log the effectiveDirective and `originalPolicy` of the violation to the console. + +```js +// main.js +const observer = new ReportingObserver( + (reports, observer) => { + console.log(`effectiveDirective: ${reports[0].body.effectiveDirective}`); + // effectiveDirective: script-src-elem + console.log(`originalPolicy: ${reports[0].body.originalPolicy}`); + // originalPolicy: default-src 'self'; report-to csp-endpoint + }, + { + types: ["csp-violation"], + buffered: true, + }, +); + +observer.observe(); +``` + +Note that while there might be multiple reports in the returned array, for brevity we only log the values of the first element. + +#### Results + +The console output for the above code is: + +```plain +effectiveDirective: script-src-elem +originalPolicy: default-src 'self'; report-to csp-endpoint +``` + +Note that the `originalPolicy` matches the `` content of the `Content-Security-Policy` directive in the HTML, and specifies that the policy is `self` by default (`default-src 'self'`). + +The `effectiveDirective` is `script-src-elem`, which specifies valid sources for JavaScript {{htmlelement("script")}} elements. +This is the specific directive that has effectively been violated, even though `default-src` was set in the policy. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SecurityPolicyViolationEvent.effectiveDirective")}} diff --git a/files/en-us/web/api/cspviolationreportbody/index.md b/files/en-us/web/api/cspviolationreportbody/index.md index e4a5311f9593fb4..b3919a74b631e36 100644 --- a/files/en-us/web/api/cspviolationreportbody/index.md +++ b/files/en-us/web/api/cspviolationreportbody/index.md @@ -28,7 +28,7 @@ These reports similarly have a `type` of `"csp-violation"`, and a `body` propert _Also inherits properties from its parent interface, {{DOMxRef("ReportBody")}}._ - {{domxref("CSPViolationReportBody.blockedURL")}} {{ReadOnlyInline}} - - : A string representing the URL of the resource that was blocked because it violates the CSP. + - : A string representing either the type or the URL of the resource that was blocked because it violates the CSP. - {{domxref("CSPViolationReportBody.columnNumber")}} {{ReadOnlyInline}} - : The column number in the script at which the violation occurred. - {{domxref("CSPViolationReportBody.disposition")}} {{ReadOnlyInline}} @@ -64,12 +64,18 @@ _Also inherits methods from its parent interface, {{DOMxRef("ReportBody")}}._ To obtain a `CSPViolationReportBody` object, you must configure your page so that a CSP violation will occur. In this example, we will set our CSP to only allow content from the site's own origin, and then attempt to load a script from `apis.google.com`, which is an external origin. -First, we will set our {{HTTPHeader("Content-Security-Policy")}} header: +First, we will set our {{HTTPHeader("Content-Security-Policy")}} header in the HTTP response: ```http Content-Security-Policy: default-src 'self'; ``` +or in the HTML [``](/en-US/docs/Web/HTML/Element/meta) element: + +```html + +``` + Then, we will attempt to load an external script: ```html @@ -82,7 +88,10 @@ Finally, we will create a new {{domxref("ReportingObserver")}} object to listen ```js const observer = new ReportingObserver( (reports, observer) => { - const cspViolation = reports[0]; + reports.forEach((violation) => { + console.log(violation); + console.log(JSON.stringify(violation)); + }); }, { types: ["csp-violation"], @@ -93,7 +102,7 @@ const observer = new ReportingObserver( observer.observe(); ``` -If we were to log the violation report object, it would look similar to the object below. +Above we log the each violation report object and a JSON-string version of the object, which might look similar to the object below. Note that the `body` is an instance of the `CSPViolationReportBody` and the `type` is `"csp-violation"`. ```js @@ -130,7 +139,7 @@ Reporting-Endpoints: csp-endpoint="https://example.com/csp-report-to" Content-Security-Policy: default-src 'self'; report-to csp-endpoint ``` -As before, we can trigger the violation by loading an external script from a location that is not allowed by our CSP header: +As before, we can trigger a violation by loading an external script from a location that is not allowed by our CSP header: ```html @@ -153,7 +162,7 @@ As you can see from the example below, the `type` is `"csp-violation"` and the ` "lineNumber": 1441, "originalPolicy": "default-src 'self'; report-to csp-endpoint", "referrer": "https://www.google.com/", - "sample": "console.log(\"lo\")", + "sample": "", "sourceFile": "https://example.com/csp-report-to", "statusCode": 200 }, diff --git a/files/en-us/web/api/cspviolationreportbody/linenumber/index.md b/files/en-us/web/api/cspviolationreportbody/linenumber/index.md new file mode 100644 index 000000000000000..debe2ebbf9f2da0 --- /dev/null +++ b/files/en-us/web/api/cspviolationreportbody/linenumber/index.md @@ -0,0 +1,120 @@ +--- +title: "CSPViolationReportBody: lineNumber property" +short-title: lineNumber +slug: Web/API/CSPViolationReportBody/lineNumber +page-type: web-api-instance-property +browser-compat: api.CSPViolationReportBody.lineNumber +--- + +{{APIRef("Reporting API")}} + +The **`lineNumber`** read-only property of the {{domxref("CSPViolationReportBody")}} interface indicates the line number in the source file that triggered the [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) violation. + +Note that the browser extracts the value from _the global object_ of the file that triggered the violation. +If the resource that triggers the CSP violation is not loaded, the value will be `null`. +See {{domxref("CSPViolationReportBody.sourceFile")}} for more information. + +This property is most useful alongside {{domxref("CSPViolationReportBody.sourceFile")}} and {{domxref("CSPViolationReportBody.columnNumber")}}, as it provides the location of the line in that file and the column that resulted in a violation. + +## Value + +An integer containing the line number that triggered the violation, or `null`. + +## Examples + +### CSP inline script violation + +This example triggers a CSP violation using an inline script, and reports the violation using a {{domxref("ReportingObserver")}}. + +#### HTML + +The HTML file below uses the [``](/en-US/docs/Web/HTML/Element/meta) element to set the {{httpheader('Content-Security-Policy')}} `default-src` to `self`, which allows scripts and other resources to be loaded from the same origin, but does not allow inline scripts to be executed. +The document also includes an inline script, which should therefore trigger a CSP violation. + +```html + + + + + + + CSP: Violation due to inline script + + +

CSP: Violation due to inline script

+ + + +``` + +#### JavaScript (main.js) + +The document above also loads the external script `main.js`, which is shown below. +Because this is loaded from the same domain as the HTML, it is not blocked by the CSP. + +The script creates a new {{domxref("ReportingObserver")}} to observe content violation reports of type `"csp-violation"`. +Each time the callback function is invoked, we get the body of the first entry of the reports array, and use it to log the file, line, and column of the violation to the console. + +```js +// main.js +const observer = new ReportingObserver( + (reports, observer) => { + const cspViolationBody = reports[0].body; + console.log(`sourceFile: ${cspViolationBody.sourceFile}`); + console.log(`lineNumber: ${cspViolationBody.lineNumber}`); + console.log(`columnNumber: ${cspViolationBody.columnNumber}`); + }, + { + types: ["csp-violation"], + buffered: true, + }, +); + +observer.observe(); +``` + +Note that while there might be multiple reports in the returned array, for brevity we only log the values of the first element. + +#### Results + +You can try this out using a [local server](/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server). +Copy the above code into `test/index.html` and `test/main.js` and run the server in the root directory. +Assuming the address of the local server is `http://127.0.0.1:9999`, you can then load the HTML file from `http://127.0.0.1:9999/test/` (or `http://127.0.0.1:9999/test/index.html`). + +With the above setup, the output of the log on Chrome is: + +```plain +sourceFile: http://127.0.0.1:9999/test/ +lineNumber: 15 +columnNumber: 0 +``` + +The result is similar for Firefox: + +```plain +sourceFile: http://127.0.0.1:9999/test/ +lineNumber: 15 +columnNumber: 13 +``` + +Note that the column number is different for the two browsers. +Chrome always appears to report `0`. +The value on Firefox represents the position of the first character after the end of the opening ` + CSP: Violation due to inline script + + +

CSP: Violation due to inline script

+ + + +``` + +#### JavaScript (main.js) + +The document above also loads the external script `main.js`, which is shown below. +Because this is loaded from the same domain as the HTML, it is not blocked by the CSP. + +The script creates a new {{domxref("ReportingObserver")}} to observe content violation reports of type `"csp-violation"`. +Each time the callback function is invoked, we get the body of the first entry of the reports array, and use it to log the effectiveDirective and `originalPolicy` of the violation to the console. + +```js +// main.js +const observer = new ReportingObserver( + (reports, observer) => { + console.log(`effectiveDirective: ${reports[0].body.effectiveDirective}`); + // effectiveDirective: script-src-elem + console.log(`originalPolicy: ${reports[0].body.originalPolicy}`); + // originalPolicy: default-src 'self'; report-to csp-endpoint + }, + { + types: ["csp-violation"], + buffered: true, + }, +); + +observer.observe(); +``` + +Note that while there might be multiple reports in the returned array, for brevity we only log the values of the first element. + +#### Results + +The console output for the above code is: + +```plain +effectiveDirective: script-src-elem +originalPolicy: default-src 'self'; report-to csp-endpoint +``` + +Note that the `originalPolicy` matches the `` content of the `Content-Security-Policy` directive in the HTML, and specifies that the policy is `self` by default (`default-src 'self'`). + +The `effectiveDirective` is `script-src-elem`, which specifies valid sources for JavaScript {{htmlelement("script")}} elements. +This is the specific directive that has effectively been violated, even though `default-src` was set in the policy. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SecurityPolicyViolationEvent.originalPolicy")}} diff --git a/files/en-us/web/api/cspviolationreportbody/referrer/index.md b/files/en-us/web/api/cspviolationreportbody/referrer/index.md new file mode 100644 index 000000000000000..f04a3924e4680bd --- /dev/null +++ b/files/en-us/web/api/cspviolationreportbody/referrer/index.md @@ -0,0 +1,121 @@ +--- +title: "CSPViolationReportBody: referrer property" +short-title: referrer +slug: Web/API/CSPViolationReportBody/referrer +page-type: web-api-instance-property +browser-compat: api.CSPViolationReportBody.referrer +--- + +{{APIRef("Reporting API")}} + +The **`referrer`** read-only property of the {{domxref("CSPViolationReportBody")}} interface is a string that represents the URL of the referring page of the resource who's [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP) was violated. + +The referrer is the page that caused the page with the CSP violation to be loaded. For example, if we followed a link to a page with a CSP violation, the `referrer` is the page that we navigated from. + +## Value + +A string representing the URL for the referrer of the page with the CSP violation, or null. + +Note that if the referrer is an HTTP(S) URL then any username, password or fragment is removed. +If the URL scheme is not `http:` or `https:` then just the scheme is returned. + +## Examples + +### CSP inline script violation showing referrer + +This example triggers a CSP violation using an inline script, and reports the violation using a {{domxref("ReportingObserver")}}. +We navigate to the page from another page and log the `referrer`, `documentURL`, and `blockedURL`. + +#### HTML + +First we define our referrer page `/bounce/index.html`. +This page just contains a link to another page `../report_sample/index.html`. + +```html + + + + + + + + + + +``` + +The `../report_sample/index.html` HTML file is defined below. +This uses the [``](/en-US/docs/Web/HTML/Element/meta) element to set the {{httpheader('Content-Security-Policy')}} `script-src-elem` to `self`, which allows scripts to be loaded from the same domain, but does not allow inline scripts to be executed. +The document also includes an inline script, which will trigger a CSP violation. + +```html + + + + + + + + + + + +``` + +#### JavaScript (main.js) + +The report sample above also loads the external script `main.js`, which is shown below. +Because this is loaded from the same domain as the HTML, it is not blocked by the CSP. + +The script creates a new {{domxref("ReportingObserver")}} to observe content violation reports of type `"csp-violation"`. +Each time the callback function is invoked, we get the body of the first entry of the reports array, and use it to log the violation `documentURL`, `referrer`, and `blockedURL` to the console. + +```js +// main.js +const observer = new ReportingObserver( + (reports, observer) => { + console.log(`documentURL: ${reports[0].body.referrer}`); + console.log(`referrer: ${reports[0].body.referrer}`); + console.log(`blockedURL: ${reports[0].body.blockedURL}`); + }, + { + types: ["csp-violation"], + buffered: true, + }, +); + +observer.observe(); +``` + +Note that while there might be multiple reports in the returned array, for brevity we only log the values of the first element. + +#### Results + +The console output for the above code would look a bit like that below (the site will depend on how the pages are served): + +```plain +documentURL: http://127.0.0.1:9999/report_sample/ +referrer: http://127.0.0.1:9999/bounce/ +blockedURL: inline +``` + +Note that `referrer` is the page we navigated from, `documentURL` is the page with the CSP violation, and `blockedURL` is not an URL at all in this case, but an indication that the violation was caused by an unsafe inline script. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SecurityPolicyViolationEvent.referrer")}} +- {{httpheader("Referer")}} diff --git a/files/en-us/web/api/cspviolationreportbody/sample/index.md b/files/en-us/web/api/cspviolationreportbody/sample/index.md new file mode 100644 index 000000000000000..8dd858e9fbc3b5f --- /dev/null +++ b/files/en-us/web/api/cspviolationreportbody/sample/index.md @@ -0,0 +1,103 @@ +--- +title: "CSPViolationReportBody: sample property" +short-title: sample +slug: Web/API/CSPViolationReportBody/sample +page-type: web-api-instance-property +browser-compat: api.CSPViolationReportBody.sample +--- + +{{APIRef("Reporting API")}} + +The **`sample`** read-only property of the {{domxref("CSPViolationReportBody")}} interface is a string that contains a part of the resource that violated the [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP). + +This sample is usually the first 40 characters of the inline script, event handler, or style that violated a CSP restriction. +If not populated it is the empty string `""`. + +Note that this is only populated when attempting to load _inline_ scripts, event handlers, or styles that violate CSP [`script-src*`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#script-src) and [`style-src*`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#style-src) rules — external resources that violate the CSP will not generate a sample. +In addition, a sample is only included if the `Content-Security-Policy` directive that was violated also contains the [`'report-sample'`](/en-US/docs/Web/HTTP/Headers/Content-Security-Policy#report-sample) keyword. + +> [!NOTE] Violation reports should be considered attacker-controlled data. +> The content of this field _in particular_ should be sanitized before storing or rendering. + +## Value + +A string containing a sample of the inline resource that violated the CSP, usually the first 40 characters, or the empty string. + +## Examples + +### CSP inline script violation + +This example triggers a CSP violation using an inline script, and reports the violation using a {{domxref("ReportingObserver")}}. +We also add `'report-sample'` to the CSP in order to populate a `sample` in the body. + +#### HTML + +The HTML file below uses the [``](/en-US/docs/Web/HTML/Element/meta) element to set the {{httpheader('Content-Security-Policy')}} `script-src-elem` to `self`, which allows scripts to be loaded from the same domain, but does not allow inline scripts to be executed. +We include `'report-sample'` in the directive so that a sample is generated. +The document also includes an inline script, which should trigger a CSP violation. + +```html + + + + + + CSP: Violation due to inline script + + +

CSP: Violation due to inline script

+ + + +``` + +#### JavaScript (main.js) + +The document above also loads the external script `main.js`, which is shown below. +Because this is loaded from the same domain as the HTML, it is not blocked by the CSP. + +The script creates a new {{domxref("ReportingObserver")}} to observe content violation reports of type `"csp-violation"`. +Each time the callback function is invoked, we get the body of the first entry of the reports array, and use it to log the violation `sample` to the console. + +```js +// main.js +const observer = new ReportingObserver( + (reports, observer) => { + console.log(`sample: ${reports[0].body.sample}`); + }, + { + types: ["csp-violation"], + buffered: true, + }, +); + +observer.observe(); +``` + +Note that while there might be multiple reports in the returned array, for brevity we only log the values of the first element. + +#### Results + +The console output for the above code is: + +```plain +sample: const int = 4; +``` + +In this case the sample contains the entire content of the inline script. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("SecurityPolicyViolationEvent.sample")}} diff --git a/files/en-us/web/api/cspviolationreportbody/sourcefile/index.md b/files/en-us/web/api/cspviolationreportbody/sourcefile/index.md new file mode 100644 index 000000000000000..d410b432654c4a8 --- /dev/null +++ b/files/en-us/web/api/cspviolationreportbody/sourcefile/index.md @@ -0,0 +1,123 @@ +--- +title: "CSPViolationReportBody: sourceFile property" +short-title: sourceFile +slug: Web/API/CSPViolationReportBody/sourceFile +page-type: web-api-instance-property +browser-compat: api.CSPViolationReportBody.sourceFile +--- + +{{APIRef("Reporting API")}} + +The **`sourceFile`** read-only property of the {{domxref("CSPViolationReportBody")}} interface indicates the URL of the source file that violated the [Content Security Policy (CSP)](/en-US/docs/Web/HTTP/CSP). + +For a violation triggered by the use of an inline script, `sourceFile` is the URL of the current document. +Similarly, if a document successfully loads a script that then violates the document CSP, the `sourceFile` is the URL of the script. + +Note however that if a document with a CSP that blocks external resources attempts to load an external resource, `sourceFile` will be `null`. +This is because the browser extracts the value from _the global object_ of the file that triggered the violation. +Because of the CSP restriction the external resource is never loaded, and therefore has no corresponding global object. + +This property is most useful alongside {{domxref("CSPViolationReportBody.lineNumber")}} and {{domxref("CSPViolationReportBody.columnNumber")}}, which provide the location within the file that resulted in a violation. + +## Value + +A string containing the URL of the file that triggered the violation, or `null`. + +## Examples + +### CSP inline script violation + +This example triggers a CSP violation using an inline script, and reports the violation using a {{domxref("ReportingObserver")}}. + +#### HTML + +The HTML file below uses the [``](/en-US/docs/Web/HTML/Element/meta) element to set the {{httpheader('Content-Security-Policy')}} `default-src` to `self`, which allows scripts and other resources to be loaded from the same origin, but does not allow inline scripts to be executed. +The document also includes an inline script, which should therefore trigger a CSP violation. + +```html + + + + + + + CSP: Violation due to inline script + + +

CSP: Violation due to inline script

+ + + +``` + +#### JavaScript (main.js) + +The document above also loads the external script `main.js`, which is shown below. +Because this is loaded from the same domain as the HTML, it is not blocked by the CSP. + +The script creates a new {{domxref("ReportingObserver")}} to observe content violation reports of type `"csp-violation"`. +Each time the callback function is invoked, we get the body of the first entry of the reports array, and use it to log the file, line, and column of the violation to the console. + +```js +// main.js +const observer = new ReportingObserver( + (reports, observer) => { + const cspViolationBody = reports[0].body; + console.log(`sourceFile: ${cspViolationBody.sourceFile}`); + console.log(`lineNumber: ${cspViolationBody.lineNumber}`); + console.log(`columnNumber: ${cspViolationBody.columnNumber}`); + }, + { + types: ["csp-violation"], + buffered: true, + }, +); + +observer.observe(); +``` + +Note that while there might be multiple reports in the returned array, for brevity we only log the values of the first element. + +#### Results + +You can try this out using a [local server](/en-US/docs/Learn/Common_questions/Tools_and_setup/set_up_a_local_testing_server). +Copy the above code into `test/index.html` and `test/main.js` and run the server in the root directory. +Assuming the address of the local server is `http://127.0.0.1:9999`, you can then load the HTML file from `http://127.0.0.1:9999/test/` (or `http://127.0.0.1:9999/test/index.html`). + +With the above setup, the output of the log on Chrome is: + +```plain +sourceFile: http://127.0.0.1:9999/test/ +lineNumber: 15 +columnNumber: 0 +``` + +The result is similar for Firefox: + +```plain +sourceFile: http://127.0.0.1:9999/test/ +lineNumber: 15 +columnNumber: 13 +``` + +Note that the column number is different for the two browsers. +Chrome always appears to report `0`. +The value on Firefox represents the position of the first character after the end of the opening `