Load external scripts over HTTPS with Subresource integrity checking

[ghost]

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.8.0/highlight.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/jquery.fancybox.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.4/helpers/jquery.fancybox-thumbs.min.js"></script>

src="//" -> src="https:// https://developer.mozilla.org/en-US/docs/Web/Security/Subresource_Integrity

[kakawait]

Yes but about Subresource integrity I have to check if not breaking browser that does not support it yet (Edge mostly) https://caniuse.com/#search=integrity

[ghost]

Check out H5BP for fallback. You could also just download these resources and load them locally. This allows the site to own the source code of the scripts and improves security without jumping through hoops.

[kakawait]

@jhabdas its what I did previously (locally stored) but most of user forget to build theme in order to retrieve script from bower (or something else). Actual version allow user to get working theme without any building step. I want to keep that aspect, but I can improve grunt script to allow switching to locally stored resources.

[kakawait]

tested on Edge SRI is not validated as expected but script is still loaded so it's ok :)

[ghost]

What I like to do is eschew bower (unless I'm rolling libraries), create simple NPM scripts to copy assets so they can be version controlled and easily upgraded in the package manifest and, if necessary, use clean-css-cli, uglifier etc on your goods to make them smaller.

https://github.com/jgthms/bulma/pull/643 (clean-css NPM scripts example I did for Burma) https://github.com/comfusion/after-dark/blob/e9346c33eb9e5ad290eda46a867fb04b6ef318c8/package.json#L14-L15 (my copy scripts for After Dark)

Doing you can skip all the SRI stuff and keep things easier so users can spend more time eking out the performance they really need and others can learn from individual forks.

[ghost]

To add a little more color, I like to think about not having the perfect developer workflow, but a very good user experience (as users won't be upgrading this stuff all that often in most cases, and if they are they can bring their own build pipeline with something like hugulp. Hope that helps.

[kakawait]

Yes but was not about bower itself, just many blog creator user is not necessarily friendly with npm, grunt, gulp, etc.. and not even aware that theme should be build. They expect to just download (or git clone) then launch hugo like with default theme.

But I'm totally agree with you, that can be a great addition to offer possibility to do not depend on external CDN, and not so costly to develop (a bit more for me because I'm not a day to day frontend developer so I not familiar with grunt, unfortunately grunt is current build tool for that theme, I want to change to but no time for the moment).

In addition to hugulp I saw that project spotted https://github.com/netlify/victor-hugo from news Smashing magazine using Hugo and way more faster (something like that title)

[ghost]

Also worth noting, because GitHub won't list forks when there are too many consider adding a beacon to call analytics so you can get referrer data for those who haven't customized the copyright stuff in the footer. I've used this technique in AD and it allowed me to start building a list of sites others can learn from: https://github.com/comfusion/after-dark/wiki

[kakawait]

I have started https://github.com/kakawait/hugo-tranquilpeak-theme/wiki/Showcase but I'm not tracking myself site using Tranquilpeak I'm waiting that people allow and share with me their blog 👍

[ghost]

Not being a front-ender, I would avoid Webpack like the plague if you can help it: https://medium.com/@jhabdas/webpack-is-your-achilles-heel-d3cd80821a4f

I've already opened a few issues against victor regarding patterns they're letting people fall into and if you see in their closed issues users have already been asking for something more simple.

EDIT: Nice touch with the images in the showcase.

[kakawait]

@jhabdas Yeah I just starred the project, I didn't checkout more. So I can't tell you more about Victor. And similar to Hugulp I starred long time ago https://github.com/ktmud/huggle but same as Victor I didn't spend much time on it.

[ghost]

You may also really enjoy: https://github.com/adrinux/web-starter-hugo

[ghost]

For posterity, here's a list of asset pipelines (I just stared a list):

https://github.com/ktmud/huggle/ https://github.com/adrinux/web-starter-hugo https://github.com/netlify/victor-hugo https://github.com/jbrodriguez/hugulp

[kakawait]

@jhabdas thank for every links and analysis/discussion 👍
My personal/secret roadmap is to released 0.4.0 with missing feature and fixing bugs. Then I would take more time about releasing process, building process (discussion will match that category) on 0.5.0 and if I find time create my own Hugo blog with Tranquilpeak because I will be easier to maintain theme if I use it by myself

eat your own dog food 🐶

[kakawait]

@jhabdas fixed on develop branch, will be merged on master as soon as finish release.

I created other issue about revamp building process https://github.com/kakawait/hugo-tranquilpeak-theme/issues/161 related to discussion we had

[ghost]

You're on fire

[kakawait]

I will keep it open until merge back and release to mastee

[kakawait]

You now have the same capability for customJS and customCSS syntax, see https://github.com/kakawait/hugo-tranquilpeak-theme/blob/develop/docs/user.md#add-custom-js-or-css-using-configuration

[ghost]

Good stuff. Just a heads up, if users want to add something like Popper.js they'll be all set given it's a single file.

If they go for a PhotoSwipe gallery, a composite library, however, they won't be able to download both of it of its scripts asynchronously. Though I do have a solution for that.

So just let me know if asynchronous dependency management becomes a burden or users start to open issues about Theme performance on slower connections.