Remove git orphan branches

Quite often especially when you create a pull request for some short time you have a local branch and a corresponding remote one that you track. But after your pull request is merged and remote branch is removed you still have your local branch.

If you run command

git remote prune origin

It will check if branches that you track are still there, if not  then your local branches are orphans now.

If you run now

git branch -vv

Then you will get a nice info about each branch

Here we can see that branch_a is gone, git literally says it. This is our orphan branch. No we can run the following command to remove it.

git branch -D branch_a

But what if we have 5 or 10 branches that became orphans? It would be nice to have some helper function that automates this process.

If your working environment is windows you can easily add a helper function into your powershell profile. Just go to powershell console and run

notepad $profile

And add the code bellow at the end of your powershell profile.

function git-clean() {
 git branch -vv | Where {$_.Contains("gone")} | ForEach -Process { git branch -D $_.Split()[2] }
}

Now every time you open a powershell console it will scan your profile and import all functions declared there. Now you can simply run git-clean and it will do all magic.

As summary just run

git remote prune origin
git-clean

P.S. if you have just added this function you need first to restart you powershell console to make this function available.

Recharts bar chart with multiple colors

I needed once to add a bar chart using Recharts  library but with multiple colors, with two coloros rotated in the bar. Something like this:

There is no such functionality out of the box, but it's doable. Recharts provide a possibility to customize bar shape. Bar component has an attribute shape that accepts a function or a component, to render the shape of the bar.

Since Recharts uses SVG under the hood the first thing I did I found how people get such shapes using pure SVG. To achive that we need to define 2 things: a pattern and a mask based on that pattern.

<svg width="120" height="120" viewBox="0 0 120 120"
    xmlns="http://www.w3.org/2000/svg">

  <!-- Pattern -->
  <pattern id="pattern-stripe" 
        width="8" height="8" 
         patternUnits="userSpaceOnUse"
         patternTransform="rotate(45)">
    <rect width="4" height="8" transform="translate(0,0)" fill="white"></rect>
  </pattern>
  <!-- Mask -->
  <mask id="mask-stripe">
   <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" />
  </mask>
  
  <!-- Reactangle that uses mask -->
  <rect x="10" y="10" width="100" height="100" mask='url(#mask-stripe)' />
</svg>

I put the mask and the pattern in the SVG tag and also a rect tag that uses the mask to define how this react will be filled. If you save it as SVG file and open in a browser you will see something like this:

It's pure SVG and it has nothing to do with react and recharts. However we already know that we are on the right track.
Let's create a function that will render a colored rectangle:

const CandyBar = (props) => {
 const {    
    x: oX,
    y: oY,
    width: oWidth,
    height: oHeight,
    value,
    fill
  } = props;
  
  let x = oX;
  let y = oHeight < 0 ? oY + oHeight : oY;
 let width = oWidth;
  let height = Math.abs(oHeight);

 return (
   <rect fill={fill}
          mask='url(#mask-stripe)'
          x={x}
          y={y}
          width={width}
          height={height} />
    );
};

No we can use it as shape parameter for the Bar component. There is nothing interesting here, we just so cover here the case when height is negative, it happens when we need to display a negative value.  We also set here the mask, to define how the react will be filled. This is how looks a bar with custom shape:

 <Bar dataKey="a" fill="green" shape={<CandyBar />} />

Now let's put everything together:

const data = [
      {name: 'Page A', a: 400, b: 240, c: 240},
      {name: 'Page B', a: 300, b: 139, c: 221},
      {name: 'Page C', a: -200, b: -980, c: 229},
      {name: 'Page D', a: 278, b: 390, c: 200},
      {name: 'Page E', a: 189, b: 480, c: 218},
      {name: 'Page F', a: 239, b: -380, c: 250},
      {name: 'Page G', a: 349, b: 430, c: 210}
];

const CandyBar = (props) => {
  const {    
    x: oX,
    y: oY,
    width: oWidth,
    height: oHeight,
    value,
    fill
  } = props;
  
  let x = oX;
  let y = oHeight < 0 ? oY + oHeight : oY;
  let width = oWidth;
  let height = Math.abs(oHeight);

  return (
   <rect fill={fill}
       mask='url(#mask-stripe)'
          x={x}
          y={y}
          width={width}
          height={height} />
    );
};



const CustomShapeBarChart = React.createClass({
  render () {
    return (
    <div>    
      <BarChart width={700} height={300} data={data}
            margin={{top: 20, right: 30, left: 20, bottom: 5}}>
        
        <pattern id="pattern-stripe" 
         width="8" height="8" 
         patternUnits="userSpaceOnUse"
         patternTransform="rotate(45)">
         <rect width="4" height="8" transform="translate(0,0)" fill="white"></rect>
        </pattern>
        <mask id="mask-stripe">
        <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-stripe)" />
        </mask>

         <XAxis dataKey="name"/>
         <YAxis/>
         <CartesianGrid strokeDasharray="3 3"/>
         <Bar dataKey="a" fill="green" isAnimationActive={false} shape={<CandyBar />} />
         <Bar dataKey="b" isAnimationActive={false} fill="red" />
         <Bar dataKey="c" isAnimationActive={false} shape={<CandyBar fill="#8884d8" />} />
      </BarChart>
    </div>
    );
  }
})

ReactDOM.render(
  <CustomShapeBarChart />,
  document.getElementById('container')
);

It will render fallowing chart:

Here is a working fiddle

There are several important things here:
1. BarChart component generates SVG tag.
2. Mask and Pattern tags should be inside SVG tag. That is why we put them as children of the BarChart
3. Bar component uses CandyBar to define how the shape will be rendered.
4. CandyBar generates a rect with the proper mask that is located by Id.

React datetime component, disable keyboard input

We currently use react on our current project and react-datetime library to render datetime picker.

Recently we got a requirment to disable keyboard input, so that users can choose a date only from the calendar UI. Unfortunately this functionality is not availbale out of the box. But there is a way to do it.

ReactDOM package provides a method to locate html element that contains react component.

ReactDOM.findDOMNode(this);

The simplest solution would be to wrap <Datetime /> component with a custom one and then disable user input, simply suppress all keyboard interaction.

Each react component has a set of hooks , one of them is componentDidMount. This method is invoked once when component is mounted. This is the right place to do some magic.

componentDidMount() {
  const componentPlaceholder = ReactDOM.findDOMNode(this);
  $(componentPlaceholder)
   .find('input')
   .on('keydown', () => false);
}

We simply search for the html element that contains the component and then search for an input inside of that element. Then we add event listenet for keydown event and suppres all keys. It would probably make sense to add some exceptions for some special keys like F11, F12, etc.

Full component code:

import React from 'react';
import ReactDOM from 'react-dom';
import Datetime from 'react-datetime';
import 'react-datetime/css/react-datetime.css';

export default class DateTimePicker extends React.Component {

    componentDidMount() {
      const componentPlaceholder = ReactDOM.findDOMNode(this);
      $(componentPlaceholder)
          .find('input')
          .on('keydown', () => false);
    }

    render() {
        return <Datetime {...this.props} />;
    }
}

Unity and Quartz .NET

In my current project we need to use Quartz .NET for scheduled tasks. Since we already use Unity IoC it makes sense to inject all dependencies into quartz jobs. After googling I found this repository but example in that soulution as well as the nuget package keep throwing exceptions. Turned out to be that in order to integrate any IoC container with quartz it's enough to do three simple steps.

1. Implement IJobFactory interface

public class UnityJobFactory : IJobFactory
{
    private readonly IUnityContainer _container;

    public UnityJobFactory(IUnityContainer container)
    {
        _container = container;
    }

    public IJob NewJob(TriggerFiredBundle bundle, IScheduler scheduler)
    {
        return _container.Resolve(bundle.JobDetail.JobType) as IJob;
    }

    public void ReturnJob(IJob job)
    {
    }
}

2. Inherit StdSchedulerFactory

public class UnitySchedulerFactory : StdSchedulerFactory
{
    private readonly IJobFactory _jobFactory;

    public UnitySchedulerFactory(IJobFactory jobFactory)
    {
        _jobFactory = jobFactory;
    }

    protected override IScheduler Instantiate(QuartzSchedulerResources rsrcs, QuartzScheduler qs)
    {
        qs.JobFactory = _jobFactory;

        return base.Instantiate(rsrcs, qs);
    }
}

3. Register those two implementations in the container

container.RegisterType<IJobFactory, UnityJobFactory>();

container.RegisterType<ISchedulerFactory, UnitySchedulerFactory>();

In adition to keep everything more separated, independat and easier to use, we can extract registration into a Unity extension.

public class QuartzUnityExtension : UnityContainerExtension
{
    protected override void Initialize()
    {
        this.Container.RegisterType<IJobFactory, UnityJobFactory>();

        this.Container.RegisterType<ISchedulerFactory, UnitySchedulerFactory>();
    }
}

And of cause an example.

public class MyJob : IJob
{
    private readonly ISomeService _someService;

    public MyJob(ISomeService someService)
    {
        _someService = someService;
    }

    public void Execute(IJobExecutionContext context)
    {
        Console.WriteLine(_someService.GiveMeSomething());
    }
}

public interface ISomeService
{
    string GiveMeSomething();
}

public class SomeService : ISomeService
{
    public string GiveMeSomething()
    {
        return "Something";
    }
}

public class Program
{
    public static void Main(string[] args)
    {
        var container = new UnityContainer();

        container.AddNewExtension<QuartzUnityExtension>();

        container.RegisterType<ISomeService, SomeService>();

        var scheduler = container.Resolve<ISchedulerFactory>().GetScheduler();

        scheduler.ScheduleJob(
            new JobDetailImpl("myJob", typeof(MyJob)),
            new CalendarIntervalTriggerImpl("TestTrigger", IntervalUnit.Second, 2)
        );

        scheduler.Start();

        Thread.Sleep(TimeSpan.FromSeconds(10));

        scheduler.Shutdown();
    }
}

Nodejs 4.x.x on Raspberry Pi

Simple steps to install nodejs 4.x.x on Raspberry Pi 2:

sudo apt-get update

sudo apt-get upgrade

curl -sL https://deb.nodesource.com/setup | sudo bash -

sudo apt-get install nodejs

I got version 0.10.4 yours can be different.

Let's update it to the version 4.x.x:

sudo npm install -g n

sudo n stable

Restart the terminal and type

node -v

I got version v4.2.1

P.S. OS version on my Raspberry Pi:

Distributor ID: Debian
Description:    Debian GNU/Linux 7.8 (wheezy)
Release:        7.8
Codename:       wheezy

You can check your version simply by typing:

lsb_release -a

Nodejs 4.x.x on Debian 7 wheezy

If you use debian 7 wheezy and cannot install nodejs of version 4.x.x most likely it's because you have a wrong version of gcc. Nodejs 4.x.x requires gcc 4.8 or higher. Unfortunately Debian has gcc 4.8 starting from version 8 jessie. Fortunately there is a way to install it.

In order to install you need to adjust sources.list file in /etc/apt. Just add on line at the bottom of this file:

deb http://ftp.uk.debian.org/debian/ jessie main non-free contrib

Now check if you have preferences file in /etc/apt. If no then just create one.
Add following content to this file:

Package: *
Pin: release n=wheezy
Pin-Priority: 900

Package: gcc*
Pin: release n=jessie
Pin-Priority: 910

Now just use aptitude to install required version of gcc

sudo aptitude update
sudo aptitude install gcc/jessie

Interesting behavior in Moment.js

Momemnt.js is a great library to work with dates. One of the features that I really like is ability to parse dates in different formats. Recently our QA has found that dates in short format, where the year is represented by 2 digits behave differently. For example date format is DD.MM.YY in this case we will have following results:

'12.05.88' becomes Thu May 12 1988 00:00:00 GMT+0200 (W. Europe Daylight Time)
'12.05.52' becomes Sun May 12 2052 00:00:00 GMT+0200 (W. Europe Daylight Time)

We got two dates in different centuries.
Turned out to be there is a special function called parseTwoDigitYear and default implementation is:

hooks.parseTwoDigitYear = function (input) {
    return toInt(input) + (toInt(input) > 68 ? 1900 : 2000);
};

It means that all years after 68 will be in 20th century but 68 and everything bellow 68 will go to the 21st. What is also interesting that 68 is just a random number. Good thing is that it could be adjusted.
You can override this behavior. As example let's make it return always the year 1995.

moment.parseTwoDigitYear = function (input) {
    return 1995;
};

You can find more about customization here