Webdev

The Problem My wrists were hurting this past week, which drove me to figure out a way to solve this.  I had been looking into mechanical keyboards in the past but never pulled the trigger because of the expense, and also the thought: "It's just a keyboard". Well, since all this COVID stuff has had me at my home desktop for hours on end, I've been typing quite a bit on my old Kensington keyboard: sending messages out on MS Teams, typing up emails, and various other keyboard intensive tasks.  It was taking its toll as I was trying to multitask and keep people on track and informed. The Old Keyboard I'm a quick and heavy typist so my first thought was that I'm jamming my finger too hard on the keys of this cheap "membrane" key keyboard.  The board itself doesn't have a lot of key "drop" in which to slow your fingers down, and little to no resistance to the key presses. It's good if you're on  your keyboard a few hours a day, but if...

In my previous post on Papa Parse and Vue JS, I detailed how to dynamically import CSVs using the vue-cli / webpack.  We covered some issues that we could run into, and finally how to use the file loader correctly with the import statement. Here is a specific requirement that I ran into :  I needed to dynamically import and parse CSVs that reside inside the project / on the server, but I didn't want webpack to include all of these because I needed to replace the CSVs without having to recompile the whole project Code Splitting and Bundling Webpack's code splitting and bundling are some of the best features that webpack provides your project, but it can sometimes get in the way.  There are plenty of articles on the topic, but Webpack will divide up your code into bundles in order to optimize the number of times your project requests data from the server. The issue: Dynamic imports will include ALL of  your CSVs directly into the bundles.  What happens if you don...

I am working on a side project for work and decided to move the proof-of-concept to Vue.js.  After several weeks of spinning up on the Vue framework and Webpack, I've started implementing. Issue #1: Can't use <script> tag to load Papa Parse in Webpack In the original project I used Papa Parse  to parse CSVs by including it with a <script> tag.  In Vue CLI, it's a bit more involved.  You need a file loader (Webpack's  csv-loader in this case), which runs Papa Parse for you (after you configure vue.config.js to use the Webpack loader via chainWebpack ).  So you can do something like this in your main.js file: import Papa from "@/assets/data/mycsv.csv"; Which loaded the file as JSON as desired; however, I needed to dynamically load CSVs depending on a user selection. Issue #2: Conditionally loading CSVs After several frustrating hours, I discovered the dynamic  import() feature of JavaScript which allows you to load modules conditionally at...