Muffin Man's writings

or the front end playground

Front end development, maybe occasional rants and music.

Being a tech lead, the thing I miss the most

I started leading teams relatively early in my career. Mentoring and leading younger developers is something I tremendously enjoy. But there is one thing I really miss about being a “regular” developer.

And that is - being able to put my headphones, play some rock ‘n’ roll, and code for a couple of hours without any distractions.

Something that is almost impossible today. I’m not complaining, but the truth is that I really miss it. Luckily, I can fulfill my geek needs working on pet projects.

Cheers!

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.


Wat
Gary Bernhardt, 2012

The talk I shared too many times. Gary talks about weird stuff in Ruby and JavaScript. It is witty and educational at the same time. I guarantee it will make you laugh. Only four minutes long, give it a try.

Link

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