TL;DR

If you just want to add git version tag after npm publish add this to your package.json:

"postpublish" : "PACKAGE_VERSION=$(cat package.json | grep \\\"version\\\" | head -1 | awk -F: '{ print $2 }' | sed 's/[\",]//g' | tr -d '[[:space:]]') && git tag v$PACKAGE_VERSION && git push --tags",

I advise you to read rest of the post to see what this code does. Because blindly coping code from the internet is probably not the smartest thing to do.

This is a weird one, and not something you will stumble into every day. But it is a bug nonetheless.

On iOS safari, if you use window.scrollTo(0, y) and y is larger than document’s maximum scroll, any immediate call to getBoundingClientRect will return incorrect top value. Same will happen for horizontal scroll and left value.

Recently I switched to a new laptop and had to set it up to my likings. This comic describes my setup pretty accurately. My setup includes a bunch of small apps I found over the years. It seems that most people are not aware of these, so I decided to share a list.

All of them are free (with the exception of TotalFinder), and if you like them, consider donating to authors.

Today I learned:

To upload files using fetch and FormData FormData is supported in IE10+. you must not set Content-Type header.

const fileInput = document.querySelector('#your-file-input') ;
const formData = new FormData();

formData.append('file', fileInput.files[0]);

const options = {
  method: 'POST',
  body: formData,
  // If you add this, upload won't work
  // headers: {
  //   'Content-Type': 'multipart/form-data',
  // }
};

fetch('your-upload-url', options);

Some CSS fun. Lately I’ve stumbled upon couple of websites with elastic hover effect on buttons. Each one was using SVG morphing, which is fine, but I was wondering how hard would it be to implement it in CSS.

It ended up up being pretty easy.