2a:null 2b:["$","title",null,{"children":"Integrating JavaScript Libraries | Steve Oney | Observable"}] 30:T798,md`## Including External Libraries External libraries allow us to directly use features written by others. Including external libraries is similar to including a local JavaScript script file. \`\`\`\`HTML \`\`\`\` You can also reference a library on a distant domain. \`\`\`\`HTML \`\`\`\` ### Using CDNs CDN stands for content delivery network. It is a geographically distributed group of servers which work together to provide fast delivery of Internet content. A CDN allows for the quick transfer of assets needed for loading Internet content including HTML pages, javascript files, stylesheets, images, and videos. Many external JavaScript libraries are stored at CDNs (e.g., [cdnjs](https://cdnjs.com/), [Google Hosted Libraries](https://developers.google.com/speed/libraries), [jsDelivr](https://www.jsdelivr.com/)). CDNs provide a lot of benefits. - First, it improves the speed **performance**. When requested content is cached (pre-saved) by a CDN’s servers, end users will get that content by connecting to the nearest CDN server rather than waiting for their request to go directly to the origin. Further, if you download the same library (from multiple distinct sites that include that library), your browser can remember (or "cache") the result so that it does not need to download it again. - Second, it ensures **availability** by making content accessible to end users under high-stress situations such as excessive user traffic, intermittent spikes, and potential server outages. - Third, most CDN services have made information **security** a core competency, providing unique cloud-based solutions. CDNs should protect content providers and users by mitigating against a wide array of attacks without malicious entities ever compromising delivery and availability. `31:[] 2e:{"id":"052346227f374fed","slug":"integrating-javascript-libraries","title":"Integrating JavaScript Libraries","thumbnail":"3097e88b7fb1dd4fd69371d4bdacba62a60bedaa8a6b7a5c68448e2c6fbdd95f","access_level":"public","create_time":"$D2020-12-30T20:19:19.408Z","update_time":"$D2023-10-02T17:43:40.078Z","view_time":null,"first_public_time":"$D2020-12-30T20:19:21.061Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"55b87b37da07de37","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":"starter_2024"},"version":32,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null}],"members":[{"type":"individual","id":"1d138075b46297f1","login":"soney","name":"Steve Oney","avatar_url":"https://avatars-next.observableusercontent.com/565926373d73cf99aa6425cf7c0d7ff79e41635d1a367894a5e3bce0299b18b9","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":2,"collection":{"id":"8fc582aae7c4b049","slug":"si-579","title":"Building Interactive Applications","owner":{"id":"55b87b37da07de37","login":"soney","name":"Steve Oney"}},"type":"notebook","body":{"title":"Integrating JavaScript Libraries","cells":[{"id":0,"value":"md`# Integrating JavaScript Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":23,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":22,"value":"md`## Recap: Mixing in JavaScript\n\nLet's first review the notes on [Mixing in JavaScript](https://observablehq.com/@soney/mixing-in-javascript).\n\nQuick questions:\n- What are different ways to include scripts in HTML?\n- What are the differences between placing the \\`\n\\`\\`\\`\\`\n\n- You can also use the [CDN copy](https://www.jsdelivr.com/package/npm/lodash).\n\\`\\`\\`\\`HTML\n\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"md`### Using Lodash\n\nIn this section, we introduce a couple of handy features of lodash. A full documentation of lodash can be found [here](https://lodash.com/docs/4.17.15).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":18,"value":"md`#### Array Methods\n\n\\`_.join\\`: Converts all elements in array into a string separated by separator.\n\n\\`\\`\\`\\`javascript\n_.join(['a', 'b', 'c'], '~');\n// => 'a~b~c'\n\\`\\`\\`\\`\n\n\\`_.reverse\\`: Reverses array so that the first element becomes the last, the second element becomes the second to last, and so on.\n\n\\`\\`\\`\\`javascript\nconst array = [1, 2, 3];\n_.reverse(array);\n// => [3, 2, 1]\nconsole.log(array);\n// => [3, 2, 1]\n\\`\\`\\`\\`\n\n\\`_.take\\`: Creates a slice of array with n elements taken from the beginning. (n=1 by default)\n\n\\`\\`\\`\\`javascript\n_.take([1, 2, 3]);\n// => [1]\n\n_.take([1, 2, 3], 2);\n// => [1, 2]\n\n_.take([1, 2, 3], 5);\n// => [1, 2, 3]\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"md`\n#### Function Methods\n\n\\`_.after\\`: This method creates a function that invokes func once it's called n or more times.\n\\`\\`\\`\\`javacript\nconst saves = ['profile', 'settings'];\nconst done = _.after(saves.length, function() {\n console.log('done saving!');\n});\n\n_.forEach(saves, function(type) {\n asyncSave({ 'type': type, 'complete': done });\n});\n// => Logs 'done saving!' after the two async saves have completed.\n\\`\\`\\`\\`\n\n\\`_.bind\\`: Creates a function that invokes func with the this binding of thisArg and partials prepended to the arguments it receives.\n\n\\`\\`\\`\\`javascript\nfunction greet(greeting, punctuation) {\n return greeting + ' ' + this.user + punctuation;\n}\n \nconst object = { 'user': 'fred' };\n \nconst bound = _.bind(greet, object, 'hi');\nbound('!');\n// => 'hi fred!'\n \n// Bound with placeholders.\nconst bound = _.bind(greet, object, _, '!');\nbound('hi');\n// => 'hi fred!'\n\\`\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":16,"value":"md`## Example Library: Bootstrap\n\nBootstrap is a free and open-source framework directed at responsive, mobile-first front-end web development.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":15,"value":"md`### Including the Bootstrap Library\n\nYou can download [compiled css and js](https://github.com/twbs/bootstrap/releases/download/v5.0.0-beta1/bootstrap-5.0.0-beta1-dist.zip). You will need to include both CSS files and JavaScript files.\n\n\\`\\`\\`\\`HTML\n\n\n\\`\\`\\`\\`\n\nYou can also use the CDN.\n\\`\\`\\`\\`HTML\n\n\n\\`\\`\\`\\`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"md`### Using Bootstrap\n\nIn this section, we demonstrate several bootstrap components. A full documentation of bootstrap can be found [here](https://getbootstrap.com/docs/5.0/getting-started/introduction/).\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"md`#### Buttons\nBootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"html`\n\n\n\n\n\n\n\n\n\n\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":11,"value":"md`#### Alerts\nAlerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight required contextual classes (e.g., .alert-success).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"html`\n

\n A simple primary alert—check it out!\n

\n A simple secondary alert—check it out!\n

\n A simple success alert—check it out!\n

\n A simple danger alert—check it out!\n

\n A simple warning alert—check it out!\n

\n A simple info alert—check it out!\n

\n A simple light alert—check it out!\n

\n A simple dark alert—check it out!\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":9,"value":"md`#### Navs and tabs\nNavigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states. Swap modifier classes to switch between each style.\n\nThe base .nav component is built with flexbox and provide a strong foundation for building all types of navigation components. It includes some style overrides (for working with lists), some link padding for larger hit areas, and basic disabled styling.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":8,"value":"html`\n

\n Active\n
\n Link\n
\n Link\n
\n Disabled\n

\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":7,"value":"_ = {\n const [_, fp] = await Promise.all([\n require(\"lodash@4\"),\n require(\"https://cdn.jsdelivr.net/gh/lodash/lodash@4/dist/lodash.fp.min.js\")\n ]);\n return fp(_);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"html`css `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"html`

js\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":4,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}}
2f:"$2e:body"