3e:null 3f:["$","title",null,{"children":"Integrating JavaScript Libraries | Ben M | Observable"}] 45:T954,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. - Fourth, CDN's are a *very* easy way to add JavaScript libraries. All you need to do is [paste](https://www.jsdelivr.com/package/npm/bootstrap) a [pre-created tag](https://cdnjs.com/libraries/bootstrap) into the \`\` of your page. - Fifth, if you're using GitHub or other version control, it's an easy way to avoid having to store other people's code in your repository. (there are more advanced ways to do this we'll cover later). `46:[] 43:{"id":"1d1e8d0f70beef0f","slug":"integrating-javascript-libraries","title":"Integrating JavaScript Libraries","thumbnail":"4e0534216d915177087cc921814d6a7ed8cabb0d4dd276a579289375c5787492","access_level":"public","create_time":"$D2022-09-16T18:18:19.449Z","update_time":"$D2022-09-26T12:03:48.463Z","view_time":null,"first_public_time":"$D2022-09-26T12:04:01.735Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"0181296cae5c789e","login":"benm","name":"Ben M","avatar_url":"https://avatars-next.observableusercontent.com/99963fd112b5f1b4f29b8e5750fc2a112ccc12773f1ec1dca9bdb83a479c1acd","tier":"starter_2024","bio":""},"version":85,"publish_version":85,"role":null,"authored":false,"authors":[{"type":"individual","id":"da731af43b5e1211","login":"benm","name":"Ben M","avatar_url":"https://avatars-next.observableusercontent.com/99963fd112b5f1b4f29b8e5750fc2a112ccc12773f1ec1dca9bdb83a479c1acd","tier":null,"bio":""}],"members":[{"type":"individual","id":"da731af43b5e1211","login":"benm","name":"Ben M","avatar_url":"https://avatars-next.observableusercontent.com/99963fd112b5f1b4f29b8e5750fc2a112ccc12773f1ec1dca9bdb83a479c1acd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":{"id":"22cecf99ff09de42","slug":"si-579-f22","title":"SI 579 F22","owner":{"id":"0181296cae5c789e","login":"benm","name":"Ben M"}},"type":"notebook","body":{"titling":"auto","title":"Integrating JavaScript Libraries","cells":[{"id":0,"value":"md`# Integrating JavaScript Libraries`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"md`## Mixing in JavaScript\n\nEvery exercise you've done in class already has the HTML that in includes JavaScript. For example, in the many exercises where you worked on \\`script.js\\`, the HTML file has this\n\\`\\`\\`HTML\n\n\\`\\`\\`\n\nThis is instructing the page to load that JavaScript file.\n\nYou can also load JavaScript from somewhere else entirely!\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":83,"value":"## Where to add CDN tags\nTypically, any CSS added will go in `` and any JS added will go immediately before the closing `` tag.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":20,"value":"md `## Example Library: PopperJS\n\n[Popper](https://popper.js.org/) started out as a tooltip library, and has evolved into a very powerful library for all sorts of positioning needs. \n\nIt's not uncommon for a project manager/designer to request something like \"just have (whatever) appear on hover\", only for a team to discover it's really hard to do that consistently with all scroll positions, viewport widths, and without potentially blocking important information. Popper is a great way to implement floating elements without many of the traps we'd run into if a solution was built from scratch. `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md`## Example Library: Bootstrap\n\nBootstrap is a free and open-source framework directed at responsive, mobile-first front-end web development. Bootstrap has been added via CDN in every assignment you've worked on.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"md`### Including the Bootstrap Library\n\n\nYou can use the CDN (links may be to earlier versions, bootstrap updates often)\n\\`\\`\\`\\`HTML\n\n\n\\`\\`\\`\\`\n\nOr you 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\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"html`css \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"html`

js`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {toc} from \"@harrystevens/toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}}
44:"$43:body"