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

Plain JavaScript animated window scroll function

2 Comments

Before modern frameworks, I always used jQuery’s scrollTo method. At some point, not every project included jQuery, so I wrote simple function to animate window scroll.

I have kept copying that function from project to project. Finally I took some time, cleaned it up and published it on the npm (this is the first npm package I published).

Check the demo and read documentation of Github.

Read more

Implementing PhotoShop font sizes and tracking in CSS, points to pixels conversion

We’ve all been there - trying to get right font sizes from PhotoShop to CSS. Designers usually work with points, which are used in the print, but not common on the web. They also use term tracking a lot, which is actually only a letter spacing with different units.

You can recalculate everything by hand and try to keep track of it. But we can use the goodies of SCSS to make that process a bit easier.

Point to pixel ratio is 1pt = 1.333333px. We’ll create SASS function to do conversion for us.

And PhotoShop tracking works relative to the font size. One point of tracking is 1/1000 of the font size. For this one we’ll create a mixin.

Read more

Always use

Always try to use <button> when element is clickable, but it is not a link. Avoid <a>, <span>, <div> and other elements.

Note that display: flex works differently on buttons in different browsers, but we have easy fix for that.

Read more

SASS random() and circle animation

I decided to move my CSS playground to the CodePen, and this is the first one I made.

Idea came to me while I was riding on a bus, and I might use it on this blog, as a part of it’s redesign.

This is CSS only animation (I used JS to create 50 elements though). And you can see the usage of SASS random() function.

Read more

Setting up Webpack, Babel and React from scratch - Part 2

4 Comments

Part two

Update: Part two is pretty much done. Part three will cover redux and production builds.

Other parts:

  • Part 1 - Webpack, Babel, React, Router, ESLint
  • Part 2 - SASS, More ES6 goodness (Static props, decorators, deconstruction…)
  • Part 3 - Where to go from here

Adding SASS

We will use SASS loader for webpack, so let’s install it together with node-sass compiler, css and style loaders

npm install --save-dev style-loader css-loader sass-loader node-sass

Create scss folder in the app folder, and main app.scss file in it. This file will include all of the other scss files.

Now we need to add a loader to webpack config file.

Read more