Hello, I'm Stanko, a software engineer in Belgrade, making digital products and generative art.

JSON.stringify removes undefined and how to keep it

1 Comment

This is something I keep rediscovering, because I keep forgetting it. JSON.stringify will omit all object attributes that are undefined.

In most cases, it doesn’t really matter, because if we parse that string back, and try to access that attribute - it will be undefined by design. Check the example below:

const user = { name: 'Stanko', phone: undefined };
user.phone; // -> undefined

const stringifiedUser = JSON.stringify(user); // -> "{\"name\":\"Stanko\"}"

const parsedUser = JSON.parse(stringifiedUser) // -> { name: "Stanko" }

// At the end it behaves the same
parsedUser.phone; // -> undefined
Read more

Flex justify content equally distanced items

1 Comment

I want to share a hack (or a trick if you prefer) my colleague Marko showed me today.

What is the problem? We want our flex items to be equally distanced between each other and from the parent’s edge. Unforunately I wasn’t aware of this property, thanks Marc for mentioning it in the comment below! is not supported in IE and Edge. And space-around or space-between won’t work.

You can see what we are trying to achieve in the first row, and how the latter two are behaving.

Flex justify content examples

Read more

CSS and SVG input animations

Yesterday, one of my colleagues shared UI Movement website. It resulted in me playing with random animations trying to replicate mockups I liked.

Here are the results:

Fix for Chrome not rendering 1px borders


This happened to me couple of times - borders would just randomly disappear in Chrome. All other browsers render them normally, but they just vanish in Chrome, on some screen sizes. Resizing helps sometimes, but I never was able to catch real pattern for reproducing.

If this ever happens to you, there is a (hacky) solution. Change border width from 1px to thin.

border: 1px solid #000;
/* change it to: */
border: thin solid #000;

Although I don’t like it, as it is a hacky workaround and I don’t really understand why it works, it does solve the issue.

It seems that I’m not the only one having this problem.

Add git version tag after publishing to npm



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.

Git tags are used as releases on GitHub

Read more