myFormula App

Got some mathematical formula that’s used in your daily routine. myFormula app for android can help save your time by allowing to manage them. Add variables used in formula any static numbers, and arrange them between operation like +,-,/,*,log,sin,cos, and tan. Save them for future use. So next time you just need to input values of variables and it calculates the result.

As of now its available only for android, soon we will release ios version. Below is the link to play store.

myFormula Android App

Continue Reading

Experiments with fps

Hey, last week I was trying to compose water droplets with my new tamron 70-300mm lens for nikon. Since there is no VR (stabilization) I arranged my camera on pile of books. First shoot is without flash and uses light from the window behind. Second shoot is with flash with white paper behind the bowl. Since auto focus was difficult I captured all shots in manual mode. Setting focal plane was difficult so I used small plastic ball and set it afloat in bowl, adjusted lens so that ball is in center of bowl and visibly clear. Since I don’t have remote to take shoots, it was very troublesome to adjust shot at 10sec interval, and then to go back to bowl and make water drop on bowl. For second shoot I used droplets from water tap, just to make drooping of water automatic.

Fist up in the air
Shutter speed:1/800sec.
ISO:1600
Focal length:240mm
Camera:Nikon d5100
Lens:Tamron 70-300mm

Fist up in the air

Droplet splash
Shutter speed:1/200sec.
ISO:2000
Focal length:300mm
Camera:Nikon d5100
Lens:Tamron 70-300mm

Water splash

Continue Reading

Meme Generator

Jo Baka meme generator. A very fun application to generate JoBaka slogans and jokes. You can open application by below link.
Jo Baka Meme Generator

Jo-Baka (12)

You can select from numbers of characters and emoticons, also it allows to change backdrop. Since its mobile friendly open the link bookmark it to home screen and enjoy creating, downloading and sharing your Baka versions.

Continue Reading

Not Subscribed

A lot of STARTUPS emerging on daily basis, and their minimalist web portals emerging at the same rate. Some of them are based on subscription based model, offering few services only for paid users, but they do attract regular ones by providing glimpse of that services, kind of marketing strategy.

So coming to the code part, we can achieve similar kind not subscribed section look using some simple CSS tricks. Method used is very basic, since its just view that we are controlling not the actions.

See the Pen iLqld by Sanket Mehta (@sanketmehta7) on CodePen.

Adding class not-subscribed to any element or container will make that container and its child in accessible with layer of image upon it, we can disable javascript reach-ability to some extent using pointer-events and z-index.

Here we are controlling just view of that container, its always advisable not to assign any javascript events to container and their child.

Continue Reading

Jquery:One

.One event listener in jquery detaches itself from DOM after it has been executed. This lovely piece of event listener is not so popular and has limited use cases. During my development I found one of the scenario where it can be of good use.

Custom popups and drop downs are very popular in web sites. Since they are custom components they actually don’t behave like regular alert boxes and select list, and some of the UI calls need to be handled manually. One of them is to close them when users clicks outside their ROI (Region Of Interest).

mouseout can be a possible solution, but sometimes we want to be really sure and we demand a click from user to deactivate the popups. But with a view that, clicking on the custom container and its child items should not deactivate it.

So here we go.

See the Pen huJer by Sanket Mehta (@sanketmehta7) on CodePen.

Here we have assigned click events to all iActivate buttons. Which opens their respective popups. Apart from that it also creates ONE event listener for body, which listens to click event, in case click happens on any part of your body it tries to find its parent. If at all parent of the target element is having class .iAmParent, it restricts the current opened popup from closing otherwise it just closes the popup.

Don’t forget to miss event.stopPropagation
Since your click event to open the popup bubbles up and .one event gets fired and gets expired.

Hope you find this use case interesting, if you have any more such scenarios where .one event is useful, do write down in comment or mail me. Till then good bye.

Continue Reading

Structural adjustable classes

At times during web development process, developer comes across situations where she/he need to adjust html elements. Consulting UX guy at each adjustment is waste of time. Structural adjustable classes helps developer to make changes on his own.

Below are some handy classes, developers can use combinations of them to achieve desired layout.

To make elements look clickable

.pointer{
cursor: pointer;
}
----HTML----
<div class="mydiv pointer">Lorem</div>

Variable paddings

.padding10{
padding: 10px;
}
.padding22{
padding: 22px;
}
.padding35{
padding: 35px;
}
----HTML----
<div class="mydiv padding35">Lorem</div>

Same for variable margins

.margin10{
margin: 10px;
}
.margin22{
margin: 22px;
}
----HTML----
<div class="mydiv margin10">Lorem</div>

Set directional padding

.paddingSetRL{
padding-top: 0px;
padding-bottom: 0px;
}
.paddingSetTB{
padding-right: 0px;
padding-left: 0px;
}
.paddingSetT{
padding-right: 0px;
padding-left: 0px;
padding-bottom: 0px;
}
.paddingSetR{
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
}
.paddingSetB{
padding-right: 0px;
padding-left: 0px;
padding-top: 0px;
}
.paddingSetL{
padding-right: 0px;
padding-bottom: 0px;
padding-top: 0px;
}

Set padding of 10px from top and bottom only
<div class="mydiv padding10 paddingSetTB">Lorem</div>

Similarly, you can also Nullify padding for a given direction via

.paddingNullT{
padding-top: 0px;
}
.paddingNullR{
padding-right: 0px;
}
.paddingNullB{
padding-bottom: 0px;
}
.paddingNullL{
padding-left: 0px;
}
----HTML----
<div class="mydiv padding10 paddingNullL">Lorem</div>
Or
<div class="mydiv padding10 paddingNullR paddingNullB">Lorem</div>

Same goes for margin

<div class="mydiv margin10 marginNullR marginNullB">Lorem</div>

Continue Reading