What I Learned – 2019 Week 3

What I Learned – 2019 Week 3

AWS GovCloud MFA Permissions

Resources:

In the process of setting up a GovCoud account I need to provide MFA self-management permissions to certain privileged users, so they can setup MFA on their end (I’m remote). I found a reource (first resource listed above) that provides the JSON for a policy that does just this. However when trying to create the policy the following error is thrown Partition "aws" is not valid for resource "arn:aws:iam::*:mfa/${aws:username}". . After some investigation I need to change the arn:aws:iam parts in the "Resource": "arn:aws:iam::*:mfa/${aws:username}" sections to arn:aws-us-gov:iam.

Webkit: HardSourceWebpackPlugin

Resources:

I have been having issues with webpack and TypeScript that force me to go through a full rebuild anytime I make changes instead of relying on HMR. This has been a slow and painful process as builds take 30 to 60 seconds each. This means I have over an hour of compiling downtime just to test out 60 minor changes (these can even be small UI teaks). Which is an absurd amount of time. In comes HardSourceWebpackPlugin, which is described as “a plugin for webpack to provide an intermediate caching step for modules”. It is dead simple to setup as well, being plug and play. Since I use vue cli to setup and build my projects, I have to this plugin through the ‘vue.config.js’ file using webpack chain instead of through a webpack config:

This reduced my build time to 3-4 seconds from ~30 seconds with no other configuration.

 

Vue CSS Modules

Resources:

 

This started when I needed to use scoped CSS in my Vue components, but discovered that the scoped CSS will apply to children of that component as well. This can create problems if you are reusing a CSS class like .host to mark the root element of the template, as child components that use the .host class on their root elements will inherit the style of the parent components that also implements that class.

The solution to this problem is to use CSS modules, something I have discovered after asking a question on StackOverflow. The jist of how this works is that css-loader will create new class names for each of the classes under the <style module> section. To ensure the class names are globally unique, you can utilize the :global syntax which is better described in the webpack-contrib docs in the resources.

Example Code [ref] [code sandbox]:

Lets break down what you see here

  • <style lang="scss" module> This is the start of the style section, scss refers to the use of the SASS preprocessor instead of vanilla CSS (this is not necessary). The module attribute tells the Vue Loader and CSS Loader that this is a module and additional actions need to be performed
  • :class="$style.container" this is using the class binding syntax for Vue. And referencing the computed property $style. This property is injected by Vue Loader into the component when you use the module attribute. The effect of this is that this uses the generated class names from the $style property, and applies it to that element.

The Output:

As you can see from the output, our generated CSS class is now ._src_App__container and the  #app element has that class. The rest of the CSS is just the SCSS output.

 

Loading JSON Files at Compile Time With WebPack

I’m quickly prototyping an app and need to load a large chunk of JSON data into my Vuex Store, which could later be replaced with an API call with a real database backing it. So, how do I do this?

Thankfully StackOverflow came to the rescue again with this question. The solution, at least for me, is to use RequireJS to load the file. It appears that RequireJS will automatically parse the JSON as well into a JS object/array.

It was as easy as that.

Neat References:

Other Libraries:

Other Videos:

Other articles:

Leave a Reply

Your email address will not be published. Required fields are marked *