Hello, I'm Stanko, a software engineer in Belgrade, writing mostly about JavaScript and React.

I washed my headphones

Recently I lost my iPhone headphones. I didn’t care much, as they were almost three years old, and I had a brand new ones. But today, while getting ready for work, I found them in the pocket of the pants I washed about week ago.

I was sure they wouldn’t work, but guess what? They do! Probably the fact that they dried for days helped.

So I guees I have a spare pair of headphones now :)

Update, April 2019.

This time lightning connector headphones were washed. And dried. Plastic and cable warped, and I won’t be using them. But they are still workoing and can play music.

Null Object Tech Meetup Vol 3

Another tech meetup is behind us, even more people came this time. As promised, we will keep them coming more often.

Stanko Tadic talking at tech meetup

Miloš spoke first about learning in tech, and keeping up with it. My talk was about SPAs, and how hard they are.

Read more

Sektor - draw and animate SVG sectors

3 Comments

For a current project I’m on, we needed both circular timer, and progress bar. Again, I wasn’t able to find small library to do that. But I found awesome answer on Stack Overflow, decided SVG is way to go, and wrote Sektor.

Sektor is a plain JavaScript library that draws circle sector (or an arc). Once it is drawn, you can change it’s angle and animate the change.

Sektor - draw and animate SVG circle

It works in every browser with SVG and requestAnimationFrane support (IE10+ and modern browsers). Check demo and docs.

I may use this for example how much better is to use requestAnimationFrame than setInterval. If you are bored, try it yourself, and you’ll see that animating using requestAnimationFrame is way smoother.

React component is coming soon as well. Cheers!

Change to position fixed on iOS Safari while scrolling

26 Comments

If you ever had to fix element on scroll, you probably had an issue on iOS Safari (and other mobile devices). Element will usually flicker, and disappear until scrolling has stopped completely.

Just force GPU acceleration by adding transform: translate3d(0,0,0); to your element.

You will have something like this:

.Element-header {
  transform: translate3d(0,0,0);
}

.Element-header--fixed {
  top: 0;
  position: fixed;
}

Enjoy ¯\_(ツ)_/¯

Update, if the element inside fixed one flickers

In the comments Matt made a great tip, so I’m adding it here as well:

If you are styling the element within fixed element, you need to apply the translate3d hack to the nested element in order for it to not flicker/disappear.

Thanks Matt!

Highlight variables in Atom, Babel template strings

Atom Babel plugin doesn’t highlight variables in ES6 (ES2015) template strings.

You’ll need to add this snippet to your Atom’s style.less

atom-text-editor::shadow .variable.js {
  color: #F8F8F2;
}

ES6 template string with variable highlighted in Atom

In general, you can just inspect stuff in Atom, find out what classes element are using, and then style it via CSS (LESS). Just don’t forget to add atom-text-editor::shadow before your rules.

If anyone is interested, I’m using Monokai Seti theme.