Latest post

React scroll decorator

17 May 2017

Muffin Man's writings

or the front end playground

Front end development, maybe occasional rants and music.

My two cents on the new MacBook Pro

After the recent Apple keynote, it seems that community is not happy with the new MacBook Pro. Well, I’m not either.

As for iPhone/iPad, those are toys, I could use pretty much any other modern smartphone/tablet. But MBP is my working horse, and I was always saying that it doesn’t matter how much it costs, I would always get it.

Things have changed…

Read more

Setting up Travis, Jekyll and GitHub pages

As I already mentioned, GitHub pages do not work with the Jekyll plugins. It is a security measure. So I researched it a bit, and colleague of mine proposed a simple solution - Travis CI.

There is a great repo with instructions how to set everything up - jekyll-travis. But few steps are kinda confusing, and it took me 10 failed builds to make it work. So I’ll try to help you with those.

Read more

Blog redesign and new features

As you probably noticed I redesigned my blog and added some new features. This is a list of the new stuff.

  • New design
  • Category pages
  • Comments
  • Search
  • Reading time
  • Share buttons
Read more

Plain JavaScript animated window scroll function


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

Demo and documentation are available here.

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