Blog

Getting committed lines of code count, through git

TL;DR

git diff --stat 4b825dc642cb6eb9a060e54bf8d69288fbee4904

Explanation

Git has a “secret” hardcoded SHA1 for an empty tree, referenced in the source code as EMPTY_TREE_SHA1 which is technically the /dev/null tree.
You can find the hash by doing git hash-object -t tree /dev/null
So with git diff --state 4b825dc642cb6eb9a060e54bf8d69288fbee4904 you get the difference between your current tree and an empty tree, which will return the lines of code committed

Note: That package.json and package-lock.json can become pretty big 🙂

Node-Alpine images with Git

This will be short and sweet.

I was building out an image for a swagger diff api (link)
and quickly realised that the size of the Node-Jessie image is > 600mb. Which is just too bloody much for my 12 lines of expressjs.


This image is based on the popular Alpine Linux project, available in the alpine official image. Alpine Linux is much smaller than most distribution base images (~5MB), and thus leads to much slimmer images in general.
This variant is highly recommended when final image size being as small as possible is desired. The main caveat to note is that it does use musl libc instead of glibc and friends, so certain software might run into issues depending on the depth of their libc requirements. However, most software doesn’t have an issue with this, so this variant is usually a very safe choice. See this Hacker News comment thread for more discussion of the issues that might arise and some pro/con comparisons of using Alpine-based images.


To minimize image size, it’s uncommon for additional related tools (such as git or bash) to be included in Alpine-based images. Using this image as a base, add the things you need in your own Dockerfile (see the alpine image description for examples of how to install packages if you are unfamiliar).

https://hub.docker.com/_/node/

The problem with the alpine image is that it does not contain GIT (as you can see from the above quote), which is a requirement for NPM to work properly.

So, the fast and easy way is to just add git to the dockerfile.

You simply add RUN apk --no-cache add git to your Dockerfile and you are good to go.

Doing this I ended up at an image size of 109mb down from 650mb, not bad.
Anyway, my Dockerfile went from

To


Note the change from
node:8.15-jessie to node:8.15-alpine as well.

If you want to know more about packaging simple node services inside a docker container, I highly recommend this article

Vue Collapsible Panel Component (with persisted state)

Today, ill create a simple re-usable collapsible panel component that saves state in localStorage.

Starting out

I start out by creating a basic vue project through the CLI (default settings)

Next up, add Fontawesome and Bulma (I ❤️ Bulma) yarn add bulma.

package.json after dependencies has been added

(I load in bulma through sass so I can override colors etc. so I’ve also installed node-sass and sass-loader as devDependencies)

In main.js I’ve added the basic FontAwesome setup (as per the link)

I just add ChevronUp (🔼) and ChevronDown (🔽) to the library and off we go.

On to the actual component

I’ve created the “panel” out of the bulma card component.
The component takes 2 props, namely id and title.
title is used for the card header and id is used for state management.

The component loads/saves the collapsible state in localStorage.

I’ve created a small extension to help (de)serialize objects to localStorage as localStorage only really does key/value pairs (which could have been used, but I find this to be much better).

We load the state during mounted() and we get/set via the following methods

The state is saved in an object in localStorage under the key collapsibles
and id‘s are added to that object with the collapsible state.
It creates something like this

Complete component

The component has 2 slots, a default one and a footer – you can see that in the usage below.

Usage

I’ve shown 2 usage scenarios in the following code. 1 with the footer and 1 without.

Below you can see the storage change when I change the state.

you can find the complete project on my github