Notes for Web Dev Intro By Scott Granneman & Jans Carton Find the presentation at http://www.granneman.com/presentations/ ## Slide 3 http://www.granneman.com ## Slide 8 Tim Berners-Lee-Knight.jpg, by John S. and James L. Knight Foundation https://commons.wikimedia.org/wiki/File:Tim_Berners-Lee-Knight.jpg ## Slide 9 Tim Berners-Lee-Knight.jpg, by John S. and James L. Knight Foundation https://commons.wikimedia.org/wiki/File:Tim_Berners-Lee-Knight.jpg ## Slide 10 Tim Berners-Lee-Knight.jpg, by John S. and James L. Knight Foundation https://commons.wikimedia.org/wiki/File:Tim_Berners-Lee-Knight.jpg ## Slide 11 https://en.wikipedia.org/wiki/File:W3C_Icon.svg ## Slide 12 https://en.wikipedia.org/wiki/HTML#HTML_versions_timeline https://en.wikipedia.org/wiki/HTML#HTML_draft_version_timeline: “October 1991: HTML Tags, an informal CERN document listing 18 HTML tags, was first mentioned in public” HTML draft: https://www.w3.org/MarkUp/draft-ietf-iiir-html-01.txt (June 1993) ## Slide 13 https://web.archive.org/web/20060819035802/http://www.adobe.com/macromedia/proom/pr/2005/unveiling_flashplatform.html ## Slide 14 HTML developed for documents, not programs/apps or page layout & design http://www.w3.org/Proposal.html Tim Berners-Lee, “WorldWideWeb: Proposal for a HyperText Project”, November 12, 1990 ## Slide 15 HTML developed for documents, not programs/apps or page layout & design http://www.w3.org/Proposal.html Tim Berners-Lee, “WorldWideWeb: Proposal for a HyperText Project”, November 12, 1990 ## Slide 16 Notice that Application is central to this group, not documents! https://en.wikipedia.org/wiki/File:WHATWG_logo.svg ## Slide 18 https://www.w3.org/blog/2019/05/w3c-and-whatwg-to-work-together-to-advance-the-open-web-platform/ ## Slide 19 https://html.spec.whatwg.org/multipage/ ## Slide 20 https://spec.whatwg.org/ ## Slide 21 https://www.w3.org/Style/CSS/current-work ## Slide 22 https://www.w3.org/Style/CSS/current-work ## Slide 23 https://www.ecma-international.org ## Slide 24 https://www.ecma-international.org/ecma-262/10.0/ ## Slide 25 https://github.com/tc39/proposals/blob/master/finished-proposals.md ## Slide 26 https://github.com/tc39/proposals/blob/master/finished-proposals.md ## Slide 27 https://kangax.github.io/compat-table/es6/ ## Slide 29 https://caniuse.com ## Slide 30 https://caniuse.com/#search=grid ## Slide 31 https://caniuse.com/#search=grid ## Slide 32 https://caniuse.com/#search=grid ## Slide 33 https://caniuse.com/#search=grid ## Slide 34 https://caniuse.com/#search=grid ## Slide 36 https://kangax.github.io/compat-table/es6/ ## Slide 38 https://en.wikipedia.org/wiki/File:HTML5_APIs_and_related_technologies_taxonomy_and_status.svg Mercury999, created January 4, 2014 ## Slide 42 https://medium.freecodecamp.org/why-you-should-care-about-supporting-older-browsers-39bbc28fb7fd ## Slide 43 https://medium.freecodecamp.org/why-you-should-care-about-supporting-older-browsers-39bbc28fb7fd ## Slide 44 http://www.brucelawson.co.uk/2016/one-weird-trick-to-get-online-designers-hate-it/ https://commons.wikimedia.org/wiki/File:Wikipedia_Mobile_on_a_feature_phone.JPG ## Slide 59 https://techcrunch.com/2018/12/06/microsoft-edge-goes-chromium-and-macos/ ## Slide 60 https://techcommunity.microsoft.com/t5/microsoft-365-blog/microsoft-365-apps-say-farewell-to-internet-explorer-11-and/ba-p/1591666 ## Slide 62 https://en.wikipedia.org/wiki/Chromium_(web_browser)#Browsers_based_on_Chromium * Vivaldi (2016): aimed at power users * Brave (2016): privacy-focused, with Brave Attention Tokens * Blisk (2016): aimed at web developers, featuring device simulations * Epic (2013): privacy-focused & aimed at Indian users * Amazon Silk (2011): developed by Amazon for Kindle Fire ## Slide 63 https://gs.statcounter.com/browser-market-share/all/united-states-of-america http://gs.statcounter.com/browser-market-share ## Slide 64 http://gs.statcounter.com/browser-market-share ## Slide 65 http://gs.statcounter.com/browser-market-share ## Slide 66 https://gs.statcounter.com/browser-market-share/all/united-states-of-america ## Slide 67 https://gs.statcounter.com/browser-market-share ## Slide 68 https://gs.statcounter.com/browser-market-share/all/united-states-of-america ## Slide 69 https://gs.statcounter.com/browser-market-share ## Slide 72 https://techcrunch.com/2018/12/06/microsoft-edge-goes-chromium-and-macos/ https://en.wikipedia.org/wiki/Microsoft_Edge ## Slide 73 https://pragprog.com/the-pragmatic-programmer/extracts/tips ## Slide 75 https://www.campaignmonitor.com/blog/post/2393/microsoft-takes-email-design-b/ https://techcrunch.com/2009/06/24/microsoft-outlook-is-broken-says-6000-tweets-and-growing-fix-it/ ## Slide 76 http://caniuse.com/#cats=html5 ## Slide 77 http://caniuse.com/#cats=CSS ## Slide 78 http://caniuse.com/#cats=CSS,HTML5 ## Slide 80 Spyglass ➝ IE (Mac & UNIX version killed) ➝ Edge (EdgeHTML) ➝ Edge (Chromium) ## Slide 81 Spyglass ➝ IE (Mac & UNIX version killed) ➝ Edge (EdgeHTML) ➝ Edge (Chromium) ## Slide 82 Mosaic ➝ Mozilla (Mosaic Killer) Netscape ➝ Mozilla ## Slide 83 Konqueror (KHTML) ➝ Safari (WebKit) ➝ Chrome ➝ Chrome () ➝ Chromium-based browsers (Brave, Vivaldi, Opera, Edge, Yandex) ## Slide 91 https://en.wikipedia.org/wiki/Web_server#February_2019 ## Slide 93 https://en.wikipedia.org/wiki/Protocol https://en.wikipedia.org/wiki/Hypertext_Transfer_Protocol ## Slide 122 https://en.wikipedia.org/wiki/JavaScript ## Slide 123 https://www.infoworld.com/article/2653798/javascript-creator-ponders-past--future.html http://speakingjs.com/es5/ch04.html https://web.archive.org/web/20080208124612/http://wp.netscape.com/comprod/columns/techvision/innovators_be.html ## Slide 124 https://web.archive.org/web/20070916144913/http://wp.netscape.com/newsref/pr/newsrelease67.html ## Slide 125 Diagram by Jans Carton ## Slide 126 Note: A background color is set on the Document, which is inherited by the other nodes in the document except for the Sidebar, which has a different background color that is then inherited by everything in it A default font is set on the Document, which is also inherited, except for the Sidebar, which reduces the size of the font Headers have a different font to set them apart from the body text Diagram by Jans Carton ## Slide 127 Diagram by Jans Carton ## Slide 128 A more detailed, accurate browser processing pipeline can be found in the CSS Overview presentation Diagram by Scott Granneman & Jans Carton ## Slide 129 Exceptions: Some HTML elements are conveniences for avoiding writing CSS (e.g., , , ) or for structure (
& ) Some CSS inserts content (e.g., ::before & ::after) or modifies behavior (e.g., animate & transition) Some JavaScript modifies HTML & CSS to change meaning or presentation, not for behavior ## Slide 136 https://www.nytimes.com; accessed July 27, 2019 ## Slide 137 https://www.nytimes.com; accessed July 27, 2019 ## Slide 138 https://www.nytimes.com; accessed July 27, 2019 ## Slide 140 http://codepen.io/websanity/pen/xmuyH ## Slide 141 http://codepen.io/websanity/pen/xmuyH ## Slide 142 http://codepen.io/websanity/pen/xmuyH ## Slide 143 http://codepen.io/websanity/pen/xmuyH ## Slide 144 http://codepen.io/websanity/pen/xmuyH ## Slide 146 http://codepen.io/websanity/pen/xmuyH ## Slide 147 http://codepen.io/websanity/pen/xmuyH ## Slide 148 http://codepen.io/websanity/pen/xmuyH ## Slide 152 https://html.spec.whatwg.org/multipage/syntax.html#void-elements ## Slide 156 https://www.w3.org/TR/html5/embedded-content-0.html#the-img-element ## Slide 157 https://www.w3.org/TR/html5/text-level-semantics.html#the-a-element ## Slide 158 https://www.w3.org/TR/html5/forms.html#the-input-element ## Slide 159 https://www.w3.org/TR/html5/forms.html#the-input-element ## Slide 165 SGML: Standard Generalized Markup Language; see https://en.wikipedia.org/wiki/Standard_Generalized_Markup_Language ## Slide 166 https://en.wikipedia.org/wiki/Quirks_mode ## Slide 171 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Obsolete_things_to_avoid#Doctype ## Slide 177 https://en.wikipedia.org/wiki/Noto_fonts ## Slide 178 https://en.wikipedia.org/wiki/Mojibake ## Slide 183 http://en.wikipedia.org/wiki/ASCII ## Slide 184 Ange Albertini (@angealbertini). Twitter (January 13, 2018). . Accessed December 24, 2018. ## Slide 186 https://en.wikipedia.org/wiki/File:ISO_english_logo.svg ## Slide 189 http://www.alsacreations.com/astuce/lire/83-codages-ascii-latin1-etc.html ## Slide 193 https://en.wikipedia.org/wiki/File:Windows-1252-infobox.svg ## Slide 195 Unicode 13: “This is a list of Unicode characters; there are 143,859 characters, with Unicode 13.0, covering 154 modern and historical scripts, as well as multiple symbol sets.” ; 2020-08-05 “Version: 1.0.0; Date: October 1991” , 2020-08-05 1,112,064: , 2020-08-05 Version 11 “As of version 11.0, Unicode contains a repertoire of over 137,000 characters covering 146 modern and historic scripts, as well as multiple symbol sets.” https://en.wikipedia.org/wiki/List_of_Unicode_characters “In total Noto fonts cover nearly 64,000 characters, which is under half of the 137,439 characters defined in Unicode 11.0 (released in June 2018).” https://en.wikipedia.org/wiki/Noto_fonts ## Slide 196 “Unicode 13.0 represents emoji using 1,367 characters spread across 24 blocks” (https://en.wikipedia.org/w/index.php?title=Emoji&oldid=970907448, 2020-08-06) ## Slide 197 http://www.fileformat.info/info/unicode/block/index.htm ## Slide 198 https://en.wikipedia.org/wiki/JIS_X_0208 ## Slide 199 https://en.wikipedia.org/wiki/JIS_X_0208 ## Slide 200 https://www.dampfkraft.com/ghost-characters.html https://en.wikipedia.org/wiki/JIS_X_0208 ## Slide 201 https://en.wikipedia.org/wiki/JIS_X_0208 ## Slide 202 https://en.wikipedia.org/wiki/JIS_X_0208 ## Slide 203 https://www.dampfkraft.com/ghost-characters.html ## Slide 204 2020: “UTF-8 is by far the most common encoding for the World Wide Web, accounting for over 95% of all web pages, and up to 100% for some languages, as of 2020.“ , 2020-08-05 2009: , 2020-08-05 2018: “UTF-8 has been the dominant character encoding (the ‘mandatory’ Unicode encoding) for the World Wide Web since 2009, and as of October 2018 accounts for 92.5% of all web pages (some of which are simply ASCII, as it's a subset of UTF-8) and 95.0% of the top 1,000 highest ranked web pages.” https://en.wikipedia.org/wiki/UTF-8 ## Slide 205 http://www.utf8everywhere.org ## Slide 206 “In total Noto fonts cover nearly 64,000 characters, which is under half of the 137,439 characters defined in Unicode 11.0 (released in June 2018).” https://en.wikipedia.org/wiki/Noto_fonts ## Slide 209 https://www.google.com/get/noto/#sans-lgc ## Slide 214 https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Obsolete_things_to_avoid#_element_and_charset_attribute ## Slide 216 https://html.spec.whatwg.org/multipage/semantics.html#charset ## Slide 231 http://codepen.io/websanity/pen/xmuyH ## Slide 233 http://codepen.io/websanity/pen/vdjfz ## Slide 234 http://codepen.io/websanity/pen/xmuyH ## Slide 239 http://codepen.io/websanity/pen/uIzeg?editors=100 ## Slide 254 https://www.youtube.com/watch?v=JJ9x1peCJRg http://justsolve.archiveteam.org/wiki/PC-Write ## Slide 255 http://www.jnkmail.com/stuff/nostalgia/ ## Slide 274 https://en.wikipedia.org/wiki/File:W8Notepad.png ## Slide 278 http://brackets.io ## Slide 286 https://code.visualstudio.com ## Slide 294 http://codepen.io ## Slide 295 http://codepen.io/websanity/ ## Slide 297 http://codepen.io/websanity/pen/veJdq ## Slide 298 http://codepen.io/MateiGCopot/pen/BfAhe WebSanity did NOT do this ## Slide 303 https://www.granneman.com/webdev/editors/brackets/extensions/html-templates/ https://github.com/rsgranne/Brackets-HTML-Templates-Updated/zipball/master ## Slide 328 http://en.wikipedia.org/wiki/File:Netscape_Navigator_usage_share.png
http://en.wikipedia.org/wiki/File:Internet-explorer-usage-data.svg ## Slide 330 http://www.mozilla.org ## Slide 344 http://www.scottmccloud.com/2-print/1-uc/index.html ## Slide 372 http://caniuse.com/#cats=HTML5 ## Slide 373 http://caniuse.com/#cats=CSS ## Slide 374 http://caniuse.com/#cats=CSS,HTML5 ## Slide 375 http://weknowmemes.com/2013/09/conversation-among-browsers/ ## Slide 387 https://addons.mozilla.org/en-US/firefox/ ## Slide 388 https://addons.mozilla.org/en-US/firefox/extensions/ ## Slide 389 https://addons.mozilla.org/en-US/firefox/themes/ ## Slide 394 200 extensions installed! ## Slide 397 https://www.apple.com/safari/, 2014-06-30 ## Slide 399 https://www.apple.com/safari/, 2014-06-30 ## Slide 404 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 405 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html ## Slide 406 http://www.nytimes.com/2014/06/30/us/before-shooting-in-iraq-warning-on-blackwater.html