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

Sektor - draw and animate SVG sectors

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!

Null Object Tech Meetup Vol 3 is coming up

We have another tech meetup coming up.

My friend and colleague Miloš, will talk about how we all are Keeping up with the tech. And my talk will be dedicated to single page applications, and how actually hard they are.

This time it is on the river, at the Lemon Chili. Again, admission is free, but please register in advance. For more info check the Facebook event .

Change to position fixed on iOS Safari while scrolling

18 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.

Switching to Atom, this time for good

I’m a big fan of Sublime Text editor, which I was using for years now. Minimal, fast, reliable. But there is one big problem with it. Only one man is working on it’s development and community really slowed down. JavaScript ecosystem is going forward at incredible speed, and I’m not sure if Sublime will be able to keep up.

Even bus factor comes to mind.

That’s why I tried couple of alternatives. When comes to bigger IDEs JetBrains is really good, but it is not as snappy as I would like. Logical move was to try GitHub’s Atom editor again.

Atom editor

Read more