Lesson 14To go further, some code practices
- Notion 86 - Introduction to eco web design code practices with The Good Manager project
- Notion 87 - Clean code for energy efficiency
- Notion 88 - Asynchronous code: do more, in less time
- Notion 89 - More efficient and less resource-intensive servers
- Notion 90 - Manage your server workload
- Notion 91 - Using external libraries: the example of Bootstrap CDNs
- Notion 92 - Code practices review
Notion 91
Using external libraries: the example of Bootstrap CDNs
Target skills
Exercise
Bootstrap is a famous library for quickly styling pages and adding interactive features.
You can either use it with local files, or through a CDN.
In this exercise, learn more about Bootstrap and try to evaluate its impact when imported on a webpage.
Resources
Bootstrap code
You can learn more about Bootstrap in the official documentation: https://getbootstrap.com/docs/5.1/getting-started/introduction/
The Bootstrap code is available from these addresses:
- CSS code, for the layout: https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css
- JS code, for the interactions: https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js
Use the Bootstrap code on your own site
You can have a look at the different CDNs used to import the elements required by Bootstrap to work: https://www.bootstrapcdn.com/
To use the Bootstrap code on your own site, you need to encapsulate these addresses in specific HTML tags:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
From these resources, you can evaluate the weight of these files, by going to one of these addresses and doing "save as".
Correction
To use Bootstrap, you need to import 2 files from CDNs:
- A styling (CSS) file, that weights 160kb
- A script (JavaScript) file, that weights 76kb
It may not seem like much, but not all Bootstrap features are generally used on a single webpage, meaning some elements are being transferred for nothing.
This exercise puts into perspective the weight of useless code that can be imported from external libraries and how to evaluate it.