Source maps

[papandreou]

Update assetgraph-builder to 4.0.0 for source map support.

To get it working with Chrome's Dev Tools:

• Click F1 while the Dev Tools app is focused
• Click Workspace
• Click Add folder...
• Select the http-pub directory of your local checkout
• Click Allow in the yellow bar
• Select the just created folder in the list
• Click Folder options...
• Put in a URL prefix of http://charcod.es and a Folder path of /
• Click X
• Click X

That should be it! As long as your local checkout has the sources for the version currently in production, you can map locations in the JS/CSS bundles to their soruce, set breakpoints in the source files, etc.

[papandreou]

@msiebuhr I'm taking the liberty of using your project to try assetgraph-builder 5 and enable some of the new features :)

There's also a bit of adaptation work now that GETSTATICURL('/foo') is spelled '/foo'.toString('url') and transpilation was removed.

[msiebuhr]

I've set you up to do the experimentation.

(Just make sure you don't break things too much for our 0.5 average daily users!)

[papandreou]

@msiebuhr Thanks for that, I'll merge and deploy :)

[papandreou]

Identified and fixed some very minor glitches in assetgraph that related to how nonce attributes were managed. All fixed and deployed now :)

[msiebuhr]

Cool! Nice to be of help ;)

[papandreou]

To summarize the changes:

Source maps

See the instructions above for mounting to source files to get it to work with Chrome Dev Tools. We could also explore the idea of simply uploading the original files to the gh-pages branch so they're always available.

Unfortunately I just noticed that no source maps are generated for the .less files due to require-less not concerning itself with source maps at all. It's fixable, but at this point I'd rather not invest too much time in require.js as better alternatives are available. How would you feel about trying system.js?

Sub resource integrity

integrity=... attributes are added to all <link rel="stylesheet" href=...> and <script src=...> elements to prevent mitm attacks. Granted, this is most useful when a CDN is in play, but what the hell :)

Spec here.

Content security policy

A CSP is in effect both in development and in the production build. It's defined in this meta tag: https://github.com/msiebuhr/charcod.es/blob/master/http-pub/index.html#L7

The nonce="developmentonly" attributes is a hack that allows us to have inline scripts and stylesheets in development without whitelisting 'unsafe-inline' in the script-src and style-src sections of the CSP. Remember to add that attribute when introducing a new inline stylesheet or script.

The production build removes the nonce attribute and whitelists the hash of the contents of the inline stylesheets and scripts that remain after doing the buildProduction gymnastics.

[papandreou]

Oh, and:

Use require-less

Replaces the in-browser .less compiler with a require.js plugin and stops relying on assetgraph doing the less => css transpilation (which it doesn't do anymore).

[msiebuhr]

I mostly use the site as a user for the time being (besides paying for the domain).

If it is convenient as a toy tech-project for you, I'm perfectly happy to trust you to use it as such.

[papandreou]

Thanks, I will do that :)