Learning Webpack

April 2, 2020

This project has really allowed me to explore npm and webpack recently. In the past, I used frameworks like Nuxt.js that already had webpack integrated so I didn't have to configure much. With Mithril, I followed the instructions on this article and didn't realize how easy it was to get webpack installed and running so quickly. I was also amazed at how fast webpack generated files when it didn't have much configured.

Once I got it running, I added the following capabilities in this order:

added babel-loader to support ES6 modules
converted the CommonJS webpack.config.js file to an ES6 webpack.config.babel.js file
added eslint-loader to check code for formatting issues
added html-webpack-plugin to generate an index file
added clean-webpack-plugin to remove generated files on rebuild
added mini-css-extract-plugin to generate CSS from SCSS
added copy-webpack-plugin to copy static files into the distribution folder
enabled splitChunks to separate out the vendored modules into a separate file
added output.publicPath to set all assets to absolute instead of relative in the index.html file

It was definitely a good learning experience and I recommend you configure webpack on your own if you've never set it up from scratch before. Here's a great place to start.

From Vue to Mithril

March 30, 2020

Joseph Spurrier

I subscribe to the Golang Weekly newsletter. Last week, they had a link to a repo for an application called duit which is built with Go and Mithril. I did a quick search comparing Vue to Mithril and found this article by the Mithril folks.

Go has always been close to my heart because "Go is expressive, concise, clean, and efficient.". I've been looking for a JavaScript framework that is built with the same values:

Why use Mithril?

In one sentence: because Mithril is pragmatic. This 10 minute guide is a good example: that's how long it takes to learn components, XHR and routing - and that's just about the right amount of knowledge needed to build useful applications.

The pragmatic characteristics also come out in their documentation:

As a rule of thumb, if your team is already heavily invested in another framework/library/stack, it makes more sense to stick with it, unless your team agrees that there's a very strong reason to justify a costly rewrite.

However, if you're starting something new, do consider giving Mithril a try, if nothing else, to see how much value Mithril adopters have been getting out of under 10kb (gzipped) of code. Mithril is used by many well-known companies (e.g. Vimeo, Nike, Fitbit), and it powers large open-sourced platforms too (e.g. Lichess, Flarum).

I also really liked hearing Mithril has more documentation than it needs - this saves me from having to search around for the right information and I learn a little more at the same time:

Mithril documentation typically errs on the side of being overly thorough if a topic involves things outside of the scope of Mithril. For example, when a topic involves a 3rd party library, Mithril documentation walks through the installation process for the 3rd party library. Mithril documentation also often demonstrates simple, close-to-the-metal solutions to common use cases in real-life applications where it's appropriate to inform a developer that web standards may be now on par with larger established libraries.

I tried it out for an afternoon and then decided to convert the project over to use Mithril. Have no fear - I left the old govueapp repo intact and then created a new repo called gomithrilapp and then copied the code and commit history over. You'll also notice there are a lot of the same blog posts. Enjoy the new language!

Guides for Docker Compose and Documentation

March 23, 2020

Joseph Spurrier

I added a few new pages to the Guides section:

The Docker Compose guide goes over how to use the docker-compose commands and explains the configuration in the docker-compose.yml file.

On the documentation front, it feels like inception - I'm using documentation to write documentation around how to generate documentation!

Docs through Docusaurus

March 15, 2020

Joseph Spurrier

I've used Hugo in the past, but I decided to give Docusaurus a shot and it's been a pretty good process so far. I'm haven't spent much time with React but the project is pretty easy to use. It's great you can build sidebars referencing pages and when you load that page, it will load the sidebar with it. Their documentation is a little limited but I easily fall back to plain HTML to get the layouts working the way I want.

Smarter Testing

March 14, 2020

Joseph Spurrier

When I first wrote the code and tests in note.go and note_test.go, I wanted to see if I could get to 100% code coverage. It's a good exercise if you've never done it before to see what you have to do to get there. It requires a lot more effort than it's worth for most applications, but still a good exercise. View commit.

In Go, table driven tests is very common. You can read able them here. It helps cut down on all the boilerplate code you have to repeat everywhere.

It's also helpful if you have a setup and teardown process that is run with each of your tests. Since that code was copy and pasted in many different places, considated they to easy to use functions. View commit.

Code samples below.

From Jest to Cypress

March 8, 2020

Joseph Spurrier

It's hard to argue that Cypress doesn't make an engineer's life easier. I originally wrote tests for Jest, but after seeing a bunch of vulnerabilities pop up in the packages that it's using, I decided it was a good time to switch to Cypress so I could access the wonderful GUI that's available. View commit.

I'll admit, I'm not a JavaScript developer, but Cypress does make it more fun to write tests because you can see your progress live. A video is below.

Finally, ESLint Working with VSCode

March 8, 2020

Joseph Spurrier

I finally figured out how to get ESLint to work properly with Visual Studio Code (VSCode). View commit.

It was quite a challenge getting ESLint to work properly when the .eslintrc.js file is not in the root of the project - the trick was the "eslint.workingDirectories" setting. All the settings are included in the .vscode/settings.json file. I use VSCode open only to the root of the project with no other projects. I also recommend the following VSCode extensions:

Cleaning up npm

March 7, 2020

Joseph Spurrier

I did a little deep dive learning today on npm modules. There were some vulnerabilities and dependencies that were in the wrong places in the package.json file. View commit.

I added some notes to the README.md file on how to interact with the package manager. The code is also below:

Bye Go Modules - Hello Makefile

March 7, 2020

Joseph Spurrier

I really want to use Go modules but it seems the community ("⚠️ These tools do not provide a good support for Go modules yet.") is not quite ready for them yet. Visual Studio Code is one of my favorite tools by the Microsoft team. It's a really great editor with a great open-source community behind it. I've enjoyed playing with the latest and greatest tech, but the older I get, the more I want my tools to just work reliably. I stopped testing the iOS betas because I didn't like restarting my phone every time I hopped in the car to get music to start playing.

I need my IDE to allow me to be as productive as possible so I'm switching back to vendoring depdendencies using gvt until modules is better supported by popular tools. We've used gvt on large teams for years so even though it's deprecated, it still works extremely well for our purposes. View commit.

Makefile

Instead of keeping all the frequently used commands in a text file that team members have to copy and paste, I added a Makefile to simply a lot of the work. This should help streamline the process for all the engineers on your team so each person can run the same commands quickly instead of hunting for that text file they created a while ago. View commit.

CI/CD with Travis-CI

May 12, 2019

Joseph Spurrier

Every project needs a good CI/CD solution - now we've got a Travis-CI integration. View commit. Travis will help us check our code when we commit it to ensure all of our unit tests and end to end tests are still passing. It will also generate Swagger spec to make sure it's valid from our annotations.

If you haven't already, check out all the work Martin Fowler has on his website - he shares a lot of great concepts and methodologies on development and testing. A good read is The Practical Test Pyramid by Ham Vocke that talks about one approach to testing.