nulib/caravans-wax

Digital Exhibit for ART HIST 395 using Wax

caravans-wax's Issues

Update JQuery to 3.4.1

• Do we need JQuery?
• If yes, update to 3.4.1

https://snyk.io/vuln/npm:jquery?lh=3.2.1&utm_source=lighthouse&utm_medium=ref&utm_campaign=audit

Control font performance

• https://developers.google.com/web/updates/2016/02/font-display?utm_source=lighthouse&utm_medium=devtools

Are we following best practices with web fonts? If not, determine what we need to do, add a comment explaining what we should do, then attempt to implement the best practice.

resolve image size issues for caching

workbox message:

Using configuration from /mnt/c/Users/cpd3149/web/caravans-wax/workbox-config.js.
img/tour/saharan-frontiers/sijilmasa/bowl-fragments_300.jpg is 2.79 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.
img/tour/saharan-frontiers/sijilmasa/bowl-fragments_800.jpg is 2.9 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.img/tour/saharan-frontiers/sijilmasa/half-disk_300.jpg is 2.83 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.
img/tour/saharan-frontiers/tadmekka/[email protected] is 3.11 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.img/tour/saharan-frontiers/tadmekka/carved_stone.jpg is 3.16 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.
img/tour/saharan-frontiers/tadmekka/cowrie_shell.jpg is 2.86 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.img/tour/saharan-frontiers/tadmekka/glazed_ceramics_oil_lamp.jpg is 3.1 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.
img/tour/saharan-frontiers/tadmekka/silk_textile.jpg is 2.84 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.img/tour/saharan-frontiers/tadmekka/stone-beads.jpg is 2.91 MB, and won't be precached. Configure maximumFileSizeToCacheInBytes to change this limit.

Run Lighthouse tests

We will use Lighthouse to assess the extent to which the website abides by PWA standards. We need to identify specific actions we need to take to score as high on these tests as possible.

To Do

• Run Lighthouse tests on the current version of the website.

Done looks like

• A brief report is written that summarizes the Lighthouse test results (this can be submitted as a comment to this issue)
• New issues are created in this repository for specific tasks we need to complete in order to improve our score

Em dashes / En dashs

check the tour pages for proper use of endashes and emdashes:

• em dashes for quotes
• en dashes for dates

Add Multiple Language Support

We need to have a plan for building and deploying three versions of the website: english, french, and arabic. All of the .md files in the current version will also need to be replicated for french and arabic versions of the text. We'll need to see if we can get this plugin to work with our site: https://github.com/kurtsson/jekyll-multiple-languages-plugin

To Do

• Create a branch
• Follow the instructions according to installing and using the plugin
• Report back issues in comments or check-in meetings

Notes

I have tried using this plugin with another jekyll site that uses another jekyll theme, and it didn't work. There was some incompatibility somewhere between Jekyll 4.0, the theme I was using, and the plugin itself. Some possible options if the plugin doesn't work:

• In the Gemfile, pin the plugin version to this PR branch that was published to make it work with Jekyll 4: kurtsson/jekyll-multiple-languages-plugin#151
• In the Gemfile, pin the jekyll version to a 3.x version of Jekyll
• Patch the plugin code (jekyll-multiple-languages-plugin.rb), to make it work

Make Saharan Frontiers Landing Page

Linked from the tour page should be another standard page for the Saharan Frontiers subsections, each will be a presentation.

Edit Images

For all images in the box folder...

• Crop images to emphasize the object wherever possible (not every photo needs to be cropped, but double-check)
• Only use JPEG for photos, and PNG for digital images (convert TIF to JPEG)

Tour sections: prepare Image Derivates for web and mobile

The images in PWA Images are the originals we need to use throughout the website.

If you come across an image whose filename starts with a number (example: 1. Tuareg camel saddle), it is likely that we already have derivatives for that image in the img/fragments/ directory. No additional processing is needed here.

Resizing images

Every other image will likely need some processing. An easy way to make web or mobile friendly images is to resize them. All .jpg and .png files can be resized in MS Paint. Images in .tif file formats might need special software like Gimp to resize them. You can also use a command-line tool like Imagemagick if you feel like learning about automated image processing.

• Create an mobile friendly images with a 300 pixel width and suffix the filename with _300
• Create an web friendly images with a 800 pixel width and suffix the filename with _800

Naming Derivative Image Files

The filenames are a little messy, so I recommend these guidelines (I don't have strict rules about this)

• Use short, lowercase names
• Use hyphens or underscores instead of spaces
• No periods or spaces, please

Saving the images to a folder

Here's a starter tour folder you can use. Some may already be there, others may be missing. Use it to get started and upload a finished version to Box.

Done looks like

• A folder called tour is uploaded to Box containing all image derivatives
• The folder has subfolders that represent pages within the tour sections (usually to correspond to the layout html files the images are used within for example:

tour
├── driving-desires
│   ├── ....jpg
 |── saharan-echoes
│   ├── intro_300.jpg
│   └── intro_800.jpg
├── saharan-frontiers
│   ├── sijilmasa
│   │   ├── 6-glazed-ceramic-inscribed-vase.jpg
│   │   ├── gate_300.jpg
│   │   ├── gate_600.jpg
│   │   ├── map_300.png
│   │   └── map_800.png

Investigate small tour images sizes on mobile

This would be a good issue to dig into after the image cropping and formatting task is complete.

Some of the images in the tour sections, when switched to mobile view ports, are very small:

while others aren't:

to do

• figure out why some images are sized smaller than others and suggest ways to take advantage of the mobile view port by making them larger
• if there's not an obvious fix, feel free to just comment on this issue if you have ideas about what's going on

notes

The CSS and JS files in play here are all in the /assets/reveals/ folder. The primary CSS file we are editing is /assets/revealjs/css/theme/simple.css

Write Issues to improve performance and responsive images

Use the resources in this box folder

First...

• download img.zip and replace it in your local working directory

Then..

• consult these resources for front-end performance best practices

Test the current state of the site: https://caravans.library.northwestern.edu

done looks like

• New GitHub issues are written
• Begin working on those issues

Add Open Graph Metadata

Resources

• https://developers.facebook.com/docs/sharing/webmasters/#markup
• https://developer.twitter.com/en/docs/tweets/optimize-with-cards/guides/getting-started

Update Bootstrap to 4.3.1

xss security vulnerability https://blog.getbootstrap.com/2019/02/13/bootstrap-4-3-1-and-3-4-1/

Update _i18n/en/_layouts

pwa_map.md contains markdown formatted content that needs to be copied and pasted into appropriate files and sections within _i18n/en/_layouts.

These are the files that need to be updated:

• saharan-frontiers-tadmekka.html
• saharan-frontiers-gao.html
• saharan-frontiers-niger-river.html
• saharan-frontiers-spread-of-ideas.html
• driving-desires.html
• long-reach-of-the-sahara-igbo.html
• long-reach-of-the-sahara-ife.html
• long-reach-of-the-sahara-medieval-glass-bead.html
• shifting-away-from-the-sahara.html

Within the pwa_map.md file, there are headings that help signal which files the content needs to be copied to, for example: B. TADMEKKA... refers to saharan-frontiers-tadmekka.html.

Each paragraph needs to be added to an HTML element that looks like this:

<section data-markdown >
  <textarea data-template>
	...
  </textarea>
</section>

Where you can copy the markdown formatted text within the <textarea> element.

Wherever there is an image, simply add this code block:

<section>
  <img class="stretch" alt="" data-src="">
</section>

These can be blank, as images will be added later.

Done when

• a PR is submitted with updates to all of the .html files listed above including the appropriate markdown content.

add google analytics tracking

Add Image Markup to _i18n/en/_layouts (Tours)

Note that you may want to finish #40 before working on this.

Create a new branch. Using the this document as a guide, add HTML markup for images in the follow template files:

• saharan-frontiers/tadmekka.html
• saharan-frontiers/gao.html
• saharan-frontiers/niger-river.html
• saharan-frontiers/spread-of-ideas.html
• driving-desires.html
• long-reach-of-the-sahara/igbo.html
• long-reach-of-the-sahara/ife.html
• long-reach-of-the-sahara/medieval-glass-bead.html
• shifting-away-from-the-sahara.html

sijilmasa.html is done, and here's an example of an image:

<section>
  <img srcset="/img/tour/saharan-frontiers/map_800.jpg, /img/tour/saharan-frontiers/map_300.jpg" class="stretch" alt="Map of central Sijilmasa" data-src="/img/tour/saharan-frontiers/map_800.jpg">
  <p>Plan of central Sijilmasa, located within the Tafilalt Oasis, produced by the Moroccan-American Project at Sijilmasa</p>
</section>

srcset = paths to sets of images the browser can choose based on size dimensions. Each srcset should have two options: a _300.jpg version and a _600.jpg version.
data-src = the larger one: _600.jpg

Use your best judgment to fill in the <p> tags and alt attributes.

Anytime there's an image in the word document that seems to combine multiple images (i.e. two that are side by side), just separate them into their own <section> elements and label them accordingly.

Add Background Sync for Service Workers

• Adding functionality so that files can be downloaded when connected to the internet even when not on the browser using workbox.backgroundSync

docs: https://developers.google.com/web/tools/workbox/modules/workbox-background-sync

Pre-caching Optimization

• Making the precaching list smaller/ more specific

Notes

we deploy the site using gzip compression, and the total size of the site is roughly 8.7 MiB. This doesn't seem that large, given that most phones come with about 6-8 GB storage.

Is is possible to precache everything?

Most essential files (in order of importance)

2019-10-28 08:02:53  209 Bytes workbox-config.js
2019-10-28 07:54:17  511 Bytes manifest.json
2019-10-28 08:29:07    1.8 KiB search/index.html
2019-10-28 08:29:07   54.6 KiB search/index.json
2019-10-28 08:02:53  549 Bytes service-worker.js
2019-10-28 08:02:53    3.8 KiB sw.js
2019-10-28 08:29:02    2.5 KiB index.html
2019-10-28 08:29:01    1.5 KiB 404.html
2019-10-28 08:29:07    2.5 KiB about/index.html
2019-10-28 08:02:55   15.1 KiB assets/bootstrap/bootstrap.min.js
2019-10-22 14:30:51  172.0 KiB assets/bootstrap/bootstrap.min.js.map
2019-10-28 08:02:54    5.4 KiB assets/elasticlunr.min.js
2019-10-28 08:02:55  536 Bytes assets/grayscale.min.js
2019-10-28 08:02:54   30.0 KiB assets/jquery-3.4.1.min.js
2019-10-28 08:02:55    6.7 KiB assets/popper.min.js
2019-10-28 08:02:54  815 Bytes assets/search-ui.js
2019-10-28 08:02:54   23.1 KiB assets/styles.css
2019-10-28 08:29:02    3.3 KiB collection/index.html
2019-10-25 12:53:24    1.2 KiB favicon-16x16.png
2019-10-25 12:53:23    2.2 KiB favicon-32x32.png
2019-10-28 08:02:53    6.6 KiB favicon.ico
2019-10-25 12:53:24   43.0 KiB caravans-192x192.png
2019-10-25 12:53:24   76.0 KiB caravans-256x256.png
2019-10-25 12:53:23  259.5 KiB caravans-512x512.png
2019-10-28 08:29:05    2.5 KiB fragments/1/index.html
2019-10-28 08:29:07    2.2 KiB fragments/3/index.html
2019-10-28 08:29:05    2.0 KiB fragments/10/index.html
2019-10-28 08:29:02    2.2 KiB fragments/11/index.html
2019-10-28 08:29:07    2.2 KiB fragments/12/index.html
2019-10-28 08:29:07    2.2 KiB fragments/13/index.html
2019-10-28 08:29:07    1.9 KiB fragments/14/index.html
2019-10-28 08:29:06    2.3 KiB fragments/15/index.html
2019-10-28 08:29:02    1.9 KiB fragments/16/index.html
2019-10-28 08:29:05    2.2 KiB fragments/17/index.html
2019-10-28 08:29:02    2.2 KiB fragments/18/index.html
2019-10-28 08:29:05    2.2 KiB fragments/19/index.html
2019-10-28 08:29:07    2.2 KiB fragments/2/index.html
2019-10-28 08:29:02    2.3 KiB fragments/20/index.html
2019-10-28 08:29:05    2.4 KiB fragments/21/index.html
2019-10-28 08:29:07    2.4 KiB fragments/22/index.html
2019-10-28 08:29:06    2.3 KiB fragments/23/index.html
2019-10-28 08:29:07    2.1 KiB fragments/24/index.html
2019-10-28 08:29:07    2.3 KiB fragments/25/index.html
2019-10-28 08:29:05    2.6 KiB fragments/26/index.html
2019-10-28 08:29:02    2.3 KiB fragments/27/index.html
2019-10-28 08:29:05    2.3 KiB fragments/28/index.html
2019-10-28 08:29:02    2.3 KiB fragments/29/index.html
2019-10-28 08:29:05    2.4 KiB fragments/30/index.html
2019-10-28 08:29:05    2.3 KiB fragments/31/index.html
2019-10-28 08:29:02    2.5 KiB fragments/32/index.html
2019-10-28 08:29:02    2.2 KiB fragments/33/index.html
2019-10-28 08:29:01    2.3 KiB fragments/34/index.html
2019-10-28 08:29:01    2.2 KiB fragments/35/index.html
2019-10-28 08:29:06    2.4 KiB fragments/36/index.html
2019-10-28 08:29:05    2.2 KiB fragments/37/index.html
2019-10-28 08:29:06    2.3 KiB fragments/38/index.html
2019-10-28 08:29:05    2.2 KiB fragments/39/index.html
2019-10-28 08:29:06    2.3 KiB fragments/4/index.html
2019-10-28 08:29:07    2.2 KiB fragments/40/index.html
2019-10-28 08:29:05    2.3 KiB fragments/41/index.html
2019-10-28 08:29:03    2.2 KiB fragments/42/index.html
2019-10-28 08:29:06    2.2 KiB fragments/43/index.html
2019-10-28 08:29:05    2.5 KiB fragments/44/index.html
2019-10-28 08:29:02    2.4 KiB fragments/45/index.html
2019-10-28 08:29:07    2.2 KiB fragments/46/index.html
2019-10-28 08:29:07    1.9 KiB fragments/47/index.html
2019-10-28 08:29:06    2.3 KiB fragments/48/index.html
2019-10-28 08:29:07    2.4 KiB fragments/49/index.html
2019-10-28 08:29:07    2.2 KiB fragments/5/index.html
2019-10-28 08:29:01    2.2 KiB fragments/50/index.html
2019-10-28 08:29:02    2.1 KiB fragments/51/index.html
2019-10-28 08:29:06    2.2 KiB fragments/52/index.html
2019-10-28 08:29:02    2.2 KiB fragments/6/index.html
2019-10-28 08:29:02    2.1 KiB fragments/7/index.html
2019-10-28 08:29:05    1.9 KiB fragments/8/index.html
2019-10-28 08:29:01    2.4 KiB fragments/9/index.html
2019-10-09 17:10:54    8.7 KiB img/SaharanFrontiers_LandingPageImg.tif_150xp.jpg
2019-10-09 17:10:54  134.5 KiB img/SaharanFrontiers_LandingPageImg.tif_640x.jpg
2019-10-09 17:10:53    3.2 KiB img/SaharanFrontiers_LandingPageImg.tif_75xp.jpg
2019-10-09 17:10:54   40.9 KiB img/bead-hero-mobile.jpg
2019-10-28 07:59:59  179.4 KiB img/bead-hero.jpg
2019-10-28 07:59:59  182.1 KiB img/caravans_hero.jpg
2019-10-09 17:10:54   52.5 KiB img/caravans_hero_mobile.jpg
2019-10-09 17:11:16   10.6 KiB img/fragments/1/1_150x.jpg
2019-10-28 07:59:59   43.0 KiB img/fragments/1/1_640x.jpg
2019-10-09 17:11:17    4.2 KiB img/fragments/10/10_150x.jpg
2019-10-09 17:11:18   33.9 KiB img/fragments/10/10_640x.jpg
2019-10-09 17:11:07    6.1 KiB img/fragments/11/11_150x.jpg
2019-10-09 17:11:07   69.7 KiB img/fragments/11/11_640x.jpg
2019-10-09 17:11:39    2.4 KiB img/fragments/12/12_150x.jpg
2019-10-09 17:11:38   28.3 KiB img/fragments/12/12_640x.jpg
2019-10-09 17:11:46    3.3 KiB img/fragments/13/13_1_150x.jpg
2019-10-09 17:11:48   51.2 KiB img/fragments/13/13_1_640x.jpg
2019-10-09 17:11:48    3.3 KiB img/fragments/13/13_2_150x.jpg
2019-10-09 17:11:47   41.3 KiB img/fragments/13/13_2_640x.jpg
2019-10-09 17:11:51    3.4 KiB img/fragments/14/14_150x.jpg
2019-10-09 17:11:52   47.1 KiB img/fragments/14/14_640x.jpg
2019-10-09 17:11:35    9.7 KiB img/fragments/15/15_150x.jpg
2019-10-09 17:11:35  115.3 KiB img/fragments/15/15_640x.jpg
2019-10-09 17:11:10    7.2 KiB img/fragments/16/16_150x.jpg
2019-10-09 17:11:09   80.1 KiB img/fragments/16/16_640x.jpg
2019-10-09 17:11:14    9.0 KiB img/fragments/17/17_150x.jpg
2019-10-09 17:11:14  124.6 KiB img/fragments/17/17_640x.jpg
2019-10-09 17:11:03    3.5 KiB img/fragments/18/18_150x.jpg
2019-10-09 17:11:01   43.2 KiB img/fragments/18/18_640x.jpg
2019-10-28 07:59:59    7.7 KiB img/fragments/19/19_150x.jpg
2019-10-28 07:59:59   79.3 KiB img/fragments/19/19_640x.jpg
2019-10-28 08:00:00    5.0 KiB img/fragments/2/2_150x.jpg
2019-10-28 08:00:00   86.4 KiB img/fragments/2/2_640x.jpg
2019-10-09 17:10:58   10.1 KiB img/fragments/20/20_150x.jpg
2019-10-09 17:11:01  132.5 KiB img/fragments/20/20_640x.jpg
2019-10-09 17:11:21    5.8 KiB img/fragments/21/21_150x.jpg
2019-10-09 17:11:21   77.3 KiB img/fragments/21/21_640x.jpg
2019-10-09 17:11:54   10.3 KiB img/fragments/22/22_150x.jpg
2019-10-09 17:11:54  188.2 KiB img/fragments/22/22_640x.jpg
2019-10-09 17:11:34    3.8 KiB img/fragments/23/23_150x.jpg
2019-10-09 17:11:34   45.9 KiB img/fragments/23/23_640x.jpg
2019-10-09 17:11:33    3.9 KiB img/fragments/24/24_150x.jpg
2019-10-09 17:11:33   39.8 KiB img/fragments/24/24_640x.jpg
2019-10-09 17:11:56    2.6 KiB img/fragments/25/25_150x.jpg
2019-10-09 17:11:55   24.3 KiB img/fragments/25/25_640x.jpg
2019-10-09 17:11:19   18.0 KiB img/fragments/26/26_150x.jpg
2019-10-28 07:59:57  239.8 KiB img/fragments/26/26_1_640x.jpg
2019-10-28 07:59:57  172.4 KiB img/fragments/26/26_2_640x.jpg
2019-10-28 07:59:57  153.3 KiB img/fragments/26/26_3_640x.jpg
2019-10-09 17:11:02    7.3 KiB img/fragments/27/27_150x.jpg
2019-10-09 17:11:03   85.5 KiB img/fragments/27/27_640x.jpg
2019-10-28 07:59:59    8.9 KiB img/fragments/28/28_150x.jpg
2019-10-28 07:59:59   67.4 KiB img/fragments/28/28_640x.jpg
2019-10-09 17:11:08    8.7 KiB img/fragments/29/29_1_150x.jpg
2019-10-09 17:11:09  117.5 KiB img/fragments/29/29_1_640x.jpg
2019-10-09 17:11:37   13.3 KiB img/fragments/3/3_150x.jpg
2019-10-28 08:00:00   86.5 KiB img/fragments/3/3_640x.jpg
2019-10-09 17:11:26    9.1 KiB img/fragments/30/30_150x.jpg
2019-10-09 17:11:26  132.0 KiB img/fragments/30/30_640x.jpg
2019-10-09 17:11:25    3.0 KiB img/fragments/31/31_150x.jpg
2019-10-28 07:59:59   99.9 KiB img/fragments/31/31_640x.jpg
2019-10-09 17:10:54    6.4 KiB img/fragments/32/32_150x.jpg
2019-10-09 17:10:54   68.8 KiB img/fragments/32/32_640x.jpg
2019-10-09 17:10:57    7.2 KiB img/fragments/33/33_150x-0.jpg
2019-10-09 17:10:57    4.4 KiB img/fragments/33/33_150x-1.jpg
2019-10-09 17:10:58  105.4 KiB img/fragments/33/33_640x-0.jpg
2019-10-09 17:10:58   29.0 KiB img/fragments/33/33_640x-1.jpg
2019-10-09 17:10:56   10.9 KiB img/fragments/34/34_150x.jpg
2019-10-09 17:10:56  136.8 KiB img/fragments/34/34_640x.jpg
2019-10-09 17:10:55    5.1 KiB img/fragments/35/35_150x.jpg
2019-10-09 17:10:54   55.3 KiB img/fragments/35/35_640x.jpg
2019-10-09 17:11:24    6.3 KiB img/fragments/36/36_150x.jpg
2019-10-09 17:11:24  108.0 KiB img/fragments/36/36_640x.jpg
2019-10-09 17:11:27    5.1 KiB img/fragments/37/37_150x.jpg
2019-10-09 17:11:27   66.3 KiB img/fragments/37/37_640x.jpg
2019-10-09 17:11:23    3.2 KiB img/fragments/38/38_150x.jpg
2019-10-09 17:11:23   30.5 KiB img/fragments/38/38_640x.jpg
2019-10-09 17:11:28    5.5 KiB img/fragments/39/39_150x.jpg
2019-10-09 17:11:28   64.6 KiB img/fragments/39/39_640x.jpg
2019-10-09 17:11:35    7.3 KiB img/fragments/4/4_150x.jpg
2019-10-09 17:11:34   83.1 KiB img/fragments/4/4_640x.jpg
2019-10-09 17:11:40    4.4 KiB img/fragments/40/40_150x.jpg
2019-10-09 17:11:41   44.9 KiB img/fragments/40/40_640x.jpg
2019-10-09 17:11:32    8.7 KiB img/fragments/41/41_150x.jpg
2019-10-09 17:11:32   92.0 KiB img/fragments/41/41_640x.jpg
2019-10-09 17:11:11    7.7 KiB img/fragments/42/42_150x.jpg
2019-10-09 17:11:10   74.7 KiB img/fragments/42/42_640x.jpg
2019-10-09 17:11:22    3.0 KiB img/fragments/43/43_150x.jpg
2019-10-09 17:11:23   26.6 KiB img/fragments/43/43_640x.jpg
2019-10-28 07:59:59    5.0 KiB img/fragments/44/44_150x.jpg
2019-10-28 07:59:59   29.5 KiB img/fragments/44/44_640x.jpg
2019-10-09 17:11:12    3.8 KiB img/fragments/45/45_150x.jpg
2019-10-09 17:11:12   69.4 KiB img/fragments/45/45_640x.jpg
2019-10-28 07:59:57    6.0 KiB img/fragments/46/46_150x.jpg
2019-10-28 07:59:57   34.3 KiB img/fragments/46/46_640x.jpg
2019-10-09 17:11:43    2.5 KiB img/fragments/47/47. A selection of beads 2.tif_150xp.jpg
2019-10-09 17:11:41   44.3 KiB img/fragments/47/47. A selection of beads 2.tif_640x.jpg
2019-10-09 17:11:41    2.5 KiB img/fragments/47/47. A selection of beads 3.tif_150xp.jpg
2019-10-09 17:11:41   41.1 KiB img/fragments/47/47. A selection of beads 3.tif_640x.jpg
2019-10-09 17:11:44    2.2 KiB img/fragments/47/47_1_150x.jpg
2019-10-09 17:11:42   36.3 KiB img/fragments/47/47_1_640x.jpg
2019-10-09 17:11:32    2.6 KiB img/fragments/48/48_150x.jpg
2019-10-09 17:11:32   33.1 KiB img/fragments/48/48_640x.jpg
2019-10-09 17:11:39    4.3 KiB img/fragments/49/49_150x.jpg
2019-10-09 17:11:38   38.6 KiB img/fragments/49/49_640x.jpg
2019-10-28 08:00:00    6.8 KiB img/fragments/5/5_150x.jpg
2019-10-28 08:00:00   51.0 KiB img/fragments/5/5_640x.jpg
2019-10-09 17:10:54    4.5 KiB img/fragments/50/50_150x.jpg
2019-10-09 17:10:54   52.2 KiB img/fragments/50/50_640x.jpg
2019-10-09 17:10:55    3.8 KiB img/fragments/51/51_150x.jpg
2019-10-09 17:10:56   25.3 KiB img/fragments/51/51_640x.jpg
2019-10-09 17:11:29    5.1 KiB img/fragments/52/52_150x.jpg
2019-10-09 17:11:28   55.3 KiB img/fragments/52/52_640x.jpg
2019-10-09 17:11:13    7.2 KiB img/fragments/6/6_150x.jpg
2019-10-09 17:11:13   90.8 KiB img/fragments/6/6_640x.jpg
2019-10-09 17:11:07    1.9 KiB img/fragments/7/7_150x.jpg
2019-10-09 17:11:08   35.9 KiB img/fragments/7/7_640x.jpg
2019-10-28 07:59:59    3.6 KiB img/fragments/8/8_150x.jpg
2019-10-28 07:59:59   30.0 KiB img/fragments/8/8_640x.jpg
2019-10-09 17:11:05    2.9 KiB img/fragments/9/9_150x.jpg
2019-10-09 17:11:04   25.4 KiB img/fragments/9/9_640x.jpg
2019-10-09 17:10:53   12.0 KiB img/libraries_logo.jpg
2019-10-28 08:29:07    2.9 KiB tour/index.html
2019-10-28 08:00:00   48.3 KiB img/tour/atlas-of-maritime.jpg
2019-10-28 08:00:00   45.0 KiB img/tour/gao-tour.png
2019-10-28 08:00:00   24.5 KiB img/tour/ife-tour.jpg
2019-10-09 17:12:01   89.5 KiB img/tour/igbo-tour.jpg
2019-10-28 08:00:00   18.2 KiB img/tour/man_on_camel_card.jpg
2019-10-28 08:00:00   20.1 KiB img/tour/medieval-glass-tour.png
2019-10-28 08:00:00  116.4 KiB img/tour/niger-river.png
2019-10-28 08:00:00   48.6 KiB img/tour/saharan-frontiers-1.jpg
2019-10-09 17:11:58   91.8 KiB img/tour/shifting-away-from-the-sahara.jpg
2019-10-28 08:00:00   54.2 KiB img/tour/spread-of-ideas.jpg
2019-10-28 08:00:00   50.5 KiB img/tour/tadmekka-tour.jpg
2019-10-28 08:02:54    2.4 KiB tour/mansa-musas-hajj-to-mecca/index.html
2019-10-28 08:02:54    2.8 KiB tour/ong-reach-of-the-sahara-central-sudan/index.html
2019-10-28 08:02:54    2.4 KiB tour/ong-reach-of-the-sahara-ife/index.html
2019-10-28 08:02:54    3.5 KiB tour/ong-reach-of-the-sahara-igbo/index.html
2019-10-28 08:02:54    1.5 KiB tour/ong-reach-of-the-sahara-medieval-glass-bead/index.html
2019-10-28 08:29:08    2.9 KiB tour/saharan-echoes/index.html
2019-10-28 08:02:54    2.5 KiB tour/saharan-frontiers-gao/index.html
2019-10-28 08:02:54    2.6 KiB tour/saharan-frontiers-niger-river/index.html
2019-10-28 08:02:54    3.6 KiB tour/saharan-frontiers-sijilmasa/index.html
2019-10-28 08:02:54    3.5 KiB tour/saharan-frontiers-spread-of-ideas/index.html
2019-10-28 08:02:54    2.7 KiB tour/saharan-frontiers-tadmekka/index.html
2019-10-28 08:02:54    3.4 KiB tour/shifting-away-from-the-sahara/index.html

I put the sw files at the top, but I'm not sure if all of them are needed for pre-caching?

Update About, Credits, and Tours

Using the text content from this document, update the relevant markdown and HTML files.

This will include:

• about.md
• several files in the layouts directory

Generally, use the headings in the word document to determine what files in the website need to be updated.

Add text compression

docs: https://developers.google.com/web/tools/lighthouse/audits/text-compression?utm_source=lighthouse&utm_medium=devtools

Investigate Broken Build

I merged the mutiple languages plugin #32 to master, but now I'm getting the following build error:

CDIAZ-MAC:caravans-wax cpd3149$ bundle exec jekyll serve
Configuration file: /Users/cpd3149/caravans-wax/_config.yml
            Source: /Users/cpd3149/caravans-wax
       Destination: /Users/cpd3149/caravans-wax/_site
 Incremental build: disabled. Enable with --incremental
      Generating...
             Error: A Liquid tag in the excerpt of _fragments/28.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/28.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/38.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/38.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/18.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/18.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/49.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/49.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/1.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/1.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/19.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/19.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/48.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/48.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/29.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/29.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/4.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/4.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/39.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/39.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/47.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/47.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/16.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/16.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/22.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/22.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/32.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/32.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/26.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/26.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/12.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/12.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/43.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/43.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/36.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/36.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/27.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/27.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/13.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/13.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/42.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/42.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/52.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/52.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/37.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/37.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/46.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/46.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/17.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/17.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/33.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/33.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/24.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/24.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/41.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/41.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/10.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/10.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/51.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/51.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/9.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/9.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/34.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/34.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/14.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/14.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/45.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/45.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/20.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/20.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/30.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/30.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/15.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/15.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/44.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/44.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/21.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/21.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/31.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/31.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/25.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/25.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/40.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/40.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/11.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/11.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/50.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/50.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/8.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/8.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/35.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/35.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/3.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/3.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/7.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/7.md: undefined method `ancestors' for nil:NilClass
             Error: A Liquid tag in the excerpt of _fragments/2.md couldn't be parsed.
             Error: could not read file /Users/cpd3149/caravans-wax/_fragments/2.md: undefined method `ancestors' for nil:NilClass
  Liquid Exception: Liquid syntax error (line 1): Unknown tag 'tf' in /Users/cpd3149/caravans-wax/_fragments/1.md
jekyll 3.8.5 | Error:  Liquid syntax error (line 1): Unknown tag 'tf'

Can you investigate what the problem is? Are you getting build errors when you run bundle exec jekyll serve locally?

Done looks like

• A comment is submitted with instruction on what i need to do to fix the error
• A PR is submitted to make the master branch build properly

Create Option for Toggling between languages

• research best practices
• implement a solution

Investigate lazy loading offscreen images

A common recommendation from the lighthouse audit tool is to lazy-load images that appear outside of the viewport on mobile devices.

docs: https://developers.google.com/web/tools/lighthouse/audits/offscreen-images?utm_source=lighthouse&utm_medium=devtools

To do

Research and recommend a re-usable method for lazy-loading offscreen images. A good page to test these methods would be: http://caravans.blockmuseum.northwestern.edu.s3-website-us-east-1.amazonaws.com/tour/

Swap references to Key Works with image / caption slides in the tours

remove render-blocking resources

• https://developers.google.com/web/tools/lighthouse/audits/blocking-resources?utm_source=lighthouse&utm_medium=devtools

Copyedit Fragments

The markdown files in the _fragments directory contain YAML front-matter that populates the tables on collection item pages. Here's the collection and here's a collection item page.

The problem

The written content for the pages were programmatically generated by a script that pulled data from a spreadsheet. There are punctuation errors and nonsensical characters in the YAML front-matter that were introduced by the process.

• Each row in the spreadsheet represents an .md file in the _fragments directory
• The Img. No. in the spreadsheet maps to the filename of the markdown file and the pid field in the YAML front-matter

To Do

• Review the spreadsheet and make sure the content is accurately represented in the corresponding .md file in the _fragments directory.
• Review the HTML rendering of the .md file on the website or locally and correct any obvious spelling, formatting, or grammar issues.

Done looks like

All errors are corrected in a new branch and a PR is submitted.

Add meta tags for SEO

• add meta description tag

Saharan Echoes

update the text to reflect most recent version

'Add to Home Screen' for iOS / Safari

The app can be installed on Android phones using Chrome as the browser; however, it is not clear how to "install" the app on an iOS / Safari device. What do we need to do to make it installable on apple devices?

Create a References page

The Tours section have lots of footnotes. We need to grab the footnotes from the PWA_WorkingMap_2020_03_03 document and add them as a bibliographic references to a /about/references/ page.

Add Lenders to About Page

Lenders to the exhibition
Canada
The Aga Khan Museum, Toronto
Royal Ontario Museum, Toronto

England
The British Museum, London

 

Mali
Direction nationale du patrimoine culturel, Bamako
Institut des hautes études et de recherches islamiques Ahmed Baba, Timbuktu
Institut des sciences humaines, Bamako
Musée national du Mali, Bamako

 

Morocco
Bank Al-Maghrib, Rabat
Fondation nationale des musées, Rabat
Ministère de la culture et de la communication, Rabat

Nigeria
National Commission for Museums and Monuments, Abuja

 

United States
Adler Planetarium, Chicago, IL
American Numismatic Society, New York, NY
Art Institute of Chicago, Chicago, IL
Brooklyn Museum, Brooklyn, NY
Charles Deering McCormick Library of Special Collections, Northwestern University Libraries, Evanston, IL
Cleveland Museum of Art, Cleveland, OH
Corning Museum of Glass, Corning, NY
Detroit Institute of Arts, Detroit, MI
The Field Museum, Chicago, IL
Harvard Art Museums, Cambridge, MA
Hispanic Society of America, New York, NY
Jewish Theological Seminary, New York, NY
Logan Museum of Anthropology, Beloit College, Beloit, WI
Los Angeles County Museum of Art, Los Angeles, CA
Loyola University Museum of Art, Chicago, IL
Melville J. Herskovits Library of African Studies, Northwestern University Libraries, Evanston, IL
The Metropolitan Museum of Art, New York, NY
National Museum of African Art, Smithsonian Institution, Washington, DC
Peabody Museum of Archaeology and Ethnology, Harvard University, Cambridge, MA
Toledo Museum of Art, Toledo, OH
The Walters Art Museum, Baltimore, MD

Accomodate work 29 compound image structure

Add manifest.json

Add Service Workers for Offline support

Investigate and implement service workers to enable website usability in offline contexts.

Resources

Consult these resources to find a method we can use to create service workers:

• https://developers.google.com/web/tools/workbox
• https://github.com/lavas-project/jekyll-pwa
• https://github.com/jeremiak/jekyll-offline

Done Looks Like

• in a new branch, a sw.js file is created that contains service workers
• documentation is written to explain how to maintain/ update the sw.js file

Catalan Atlas

• remove hero image of full map
• link to a full record of the map somewhere else
• focus the page around the cropped sections we want to highlight

add logos to footer

• Block Logo
• NUL

Home page / About page edits

Kathleen and I looked at this together. She agrees that the title looks good! Just one note here: Could the subtitle be in title caps (ie: Art, Culture, and Exchange across Medieval Saharan Africa)?

And now that we’ve added so much text in the About section:

• Is it possible to have a jump to sub-sections within the section?
• Could footnotes at the bottom of the page go with first section (maybe in a smaller font)?

Make sure all slide headings in every tour are ALL CAPS

Update Service Workers

Both service-worker.js and sw.js are out of date. Here's a summary of what's changed:

• the assets/reveal.js/ directory has been severely trimmed down to what i think are the essentials
• the fragments directory has been renamed to works however none of the path numbers have changed (i.e. /22/index.html is the same)
• all of the .md/.html files in tour/ have been updated
• several files in img/tour/ have been updated

i think that's it.

to do

• please re-run the workbox utilities to update both service worker files to reflect the above changes.

Precache

• html
• js
• css
• png (and PNG) try to target the mobile sized images only
• jpg (and JPEG, JPG) try to target the mobile sized images only

related work

#26 #25

Investigate i18n options

Support for English, French, and Arabic is one of the expectations of this app. We'll need to find a plug-in or method that allows us to generate three versions of the app for each language. How do other Jekyll projects handle internationalization (i.e. "i18n")?

To Do

• Research i18n options for Jekyll
• Test one or two options
• Make a recommendation

Check Paths in tf in main layouts folder `_layouts`

Add to Google Play Store ??

Looks possible, but maybe very difficult??

Instructions: https://css-tricks.com/how-to-get-a-progressive-web-app-into-the-google-play-store/

To do

• investigate what needs to be done and report back

Home page Updates

• Replace testing banner with full title of exhibit
• Experiment with menu button . nav bar for mobile if moving the full title above the nav

Add BackgroundSync to Master Branch

Investigate cherry-picking commits from PR branches for new pull requests OR create new PR with same code.

content updates

to do

• re-run the wax:pages rake task with new spreadsheet
• re-organize images for art direction
• add images to section tours

double check

You’ll notice that for some of the landing pages (such as in Sijilmasa and Tadmekka under Saharan Frontiers) that there are images with a tiled selection of objects. Those objects are individual images in the folder – could you please turn them into one image?

CSS Audit

• check for unused CSS (firefox 70 has an inactive css checker for html elements)
• follow recommendations here: https://developers.google.com/web/tools/lighthouse/audits/unused-css?utm_source=lighthouse&utm_medium=devtools
• remove unused CSS

Add Website Header to Tours

the tour pages use a JS library called RevealJS. It's not easy for users to navigate back to the main site after they enter a RevealJS presentation.

• Can we add a header or footer to the the presentaiton layout the allows the user to exit gracefully back to the /tour/ page or main site.
• Maybe add a link to the next section

done looks like

• options are added to one of the layouts (chris will add them to the rest)

add aria attributes to navigation in revealjs slides

Fix contributor credits

A student noticed some corrections on the working PWA link and asked that I pass them on to you. The names of authors Trent Steelman and Kun Lei are missing (perhaps they preferred not to be listed though, we’d have to confirm), and Emily’s last name is spelt Andrey, not Andry.

Wrong Images

o Please note that the following three images need to be replaced because they do not match the object information:
o Row 4: Fragment of painted wall decoration
o Row 8: Spouted vessel
o Rows 13 + 47 : Selection of cylindrical, tubular, and oblate finished beads
The images can be found here on Box. The first two are already in the PWA narrative. The third was a new one chosen by Kathleen. Something weird happened where the information and images for rows 13 and 47 were conflated so she picked one image that can serve for both. (I blacked out row 13 so there’s not confusion but didn’t want to mess with your numbering.)