Hello, I'm Stanko, a software engineer in Belgrade, making digital products and generative art.
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.
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!
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 ¯\_(ツ)_/¯
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!
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;
}
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.
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.
Two days ago, we held the second Tech Meetup. There were two speakers including myself, and Nemanja Nićiforović, our CEO. Nemanja spoke How to Freelance, and I covered Intro to React.
Grab slides:
We are very thankful to our friends at Zaokret where meetup took place. There were around 60 people and we hope even more people will come to the next one. Hopefully, we are not going to make a year long pause like we did between this and the last one.