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.

React animate height (slide up/down) component

Most JavaScript developers used jQuery’s .slideUp() and .slideDown() methods, and got used to them. As component based frameworks usually do not include such functionality, the first logic choice is to turn to CSS. But alas, CSS transitions do not work with height: auto. (Transitions can do a tween only between two numeric values.)

As we use this a lot in our company, I tried to find React component that does it. Found a couple, didn’t like them, as most of them rely on a tone of dependencies. Again, I decided to write my own - small, fast and with no dependencies.

Demo

You can see it live here. Same page has the documentation and links to the npm and GitHub.

Component can animate from (and to) 0 (collapsed), auto (expanded), and to any specific value in pixels.

Read more

Couple of talks I really liked

In this post you can find seven talks I really liked in no particular order, most of them development related. I’ll explain why I liked them, and why I should recommend watching every single one of them.

Every talks is embedded, but link to a website or youtube is included as well.

Please comment with the talks you think are worth watching.

Read more

Mobile Chrome vh units fix

2 Comments

If you ever used vh units and tested your work on mobile Chrome (iOS and Android), you probably were annoyed by page jumping when you scroll.

As you probably know vh units are based on the window height. When you scroll, Chrome’s address bar disappears and chrome actually changes window height. Also triggers window resize event. So when it does happen it changes the value of vh unit, making your elements resize, and page jump. On Android, keyboard toggle will do the same.

Well I made a plain JavaScript library to solve this problem.

Demo and documentation are available here.

Read more

Deploying React (Router) app to the subfolder on server

If you ever had to deploy React Router app to the subfolder on the server, you know what the problem is. Dev server will always launch app on the server root. And routes will get messed up once you upload it to the server. Here are two solutions I use in these cases.

Easy way, just use hashHistory

The easiest way to achieve this is to use hashHistory instead of browserHistory.

import { Router hashHistory } from 'react-router';

<Router history={ hashHistory }>
  ...
</Router>

This is the best approach if your subfolder name changes (for example, if folder name is a build version). But you’ll have /#/ included in the every URL. If this bothers you, check the second solution.

Read more

Winter Tech Meetup Vol 5

We prepared another tech meetup, this time with four presentations. There will be a break after the second one. This should be the biggest one so far, with two guest speakers.

It will happen on February the 4th, at Belgrade Youth Centre. Hope to see you there!

Visit Facebook event or meetup.com page. And apply here.

Thanks to everyone who participated!

Slides

Photos

Nikola Pantović Tech meetup audience Stanko Tadić talking about JavaScript Saša Ranisavljević