What I Learned – 2019 Week 1

What I Learned – 2019 Week 1

I’ve decided that I should start keeping track of what I’ve learned over time, so I can go back and view my progress and habits. The goal of this is to write a weekly post highlighting what I learned during that week. In doing so this should reinforce what I’ve learned, as well as testing the depth that I have explored the subjects. I don’t expect everything I write about to be in depth, or to even go past the a surface-level understanding of a topic. References and resources should be included with each topic to provide more in-depth information.

The week numbers will refer to the chronological order these posts are made in, not the actual week# of this year.

Webpack – General

These are general resources I found to be helpful while struggling through Webpack

Webpack – Chunking

Version: 4.28.x
Resources:

While searching for webpack optimization information I found this wonderful plugin called SplitChunks. This finds modules which are shared between chunks and splits them into separate chunks to reduce duplication or separate vendor modules from application modules. The advantage this provides is better caching, less code generation, and fewer downloads for clients when a package or code is changed. It’s super easy to setup, and since I am using vue-cli this goes inside my vue.config.js file instead:

This will put any modules >= 30KB in size under /node_modules/ into an output named vendor.js. The remaining modules, such as those from my application code will be put into app.js.

TypeScript – Declaration Files

Version: 3.2.x
Resources:

I decided to switch over to TypeScript for my Vue project, which had the unintended consequence of throwing error TS7016: Could not find a declaration file for ___ module ____ implicitly has an 'any' type during builds. This was being thrown on my app.ts imports for vanilla JS libraries. After some searching I discovered that I have the noImplicitAny flag set in my config. Which, in short, stops TypeScript from implicitly determining a type to be of the type any. It has to be declared explicitly as any if TypeScript cannot determine the type on it’s own.

The fix for this was to make declaration files for the JS libraries I was trying to import.  There are a couple steps involved here, and for this example I’ll be using portal-vue

  1. Create the .d.ts declaration files
  2. Organize them somewhere
  3. Tell the TypeScript compiler where to find them

The declaration files are fairly easy to make, simply create the TypeScript file and end it in .d.ts:

Since I have multiple declaration files like this they should be organized somewhere so they are not polluting my projects root. I decided to create a /types subdirectory in my project that will hold these files.

To point the TypeScript compiler to this folder I had to add the path to the typeRoots array:

Note: Doing it this way will add all typings under that directory to the global namespace. If you want to avoid this add it to paths instead.

Flexbox

Resources:

My CSS is pretty poor, so I’m trying to make a concerted effort to learning more. My first step is Flexbox, I see it everywhere and never know how it works. I really don’t have much to say about this as the above resource covers everything pretty well.

Pitfalls

Other Articles

This should be a regular section dedicated to miscellaneous articles that I’ve read and learned from during the week, but don’t need their own section.

 

 

 

 

 

Leave a Reply

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