webpack
Today I learned about webpack, a way to “bundle your site”.
As I would summarize it webpack allows you to write your web application across multiple files, with multiple dependencies, and it takes care of resolving (and bundling) everything into a functional output that can be served. I had heard of webpack before but specifically came across it while reading the Vue.js tooling documentation. One thing that was really helpful to wrap my head around webpack's functionality was the Concepts documentation. I really wish more projects laid out this sort of high-level picture.
In addition to tooling around a bit with webpack I also gained a much better
appreciation for how the JavaScript ecosystem works including npm and
npm-scripts.
CORS
Cross-origin resource sharing (CORS) is a method for HTTP access control is a method by which a server can specify, via an HTTP response header, the origins (eg: websites) that are allowed to access a requested endpoint. By default the same-origin-policy restricts cross-origin request. CORS is a mechanism to relax this in order to allow content to be embedded from other sources. This image from the Mozilla Documentation describes it well:
In this case, domain-b can use CORS to determine if it's content can be
embedded in the domain-a page.
I dug into CORS more today when I ran into an issue trying to access the Beeminder API with an XMLHttpRequest.
XMLHttpRequest cannot load https://www.beeminder.com/api/v1/users/me.json?auth_token=XXX.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://127.0.0.1:8080' is therefore not allowed access.
I thought it would be cool to make a site with no backend that you could just directly query the API. Seems that that will not be possible (nor perhaps was it the best idea authentication wise).
Bonus
p.s. This post has a sweet image, #first! I still need to figure out the best way to
host images that I upload. I welcome any suggestions here.