How to filter JS Object properties

I was working in a React JS project and going to develop a higher order component to extend some feature of another component which is provided by a UI library. There is a Filter method in JS which works only with Array. First thing came into my mind is the old school approach like below.

Continue reading How to filter JS Object properties

Why I have chosen React JS Ecosystem

React JS is a JavaScript library for building user interfaces. React is a DOM manipulation library. It does the same thing as jQuery does but, in a different way. React is a component based and declarative library. React JS is not a framework, it’s a small library which can be used with any other library or framework such as jQuery, Angular etc. In this article I would like to share why I have chosen React JS and its ecosystem.

Continue reading Why I have chosen React JS Ecosystem

SVG for Web Design

What is SVG

SVG stands for Scaleable Vector Graphics. If you work with graphics or have some idea about it you know what’s the advantage of working with vector graphics. We know about some vector format like eps, ai etc. svg is yet another format specially built for web to make two dimensional graphics.. The SVG specification is an open standard developed by the World Wide Web Consortium(W3C) since 1999. SVG is written by XML language which is pretty semantic but it’s very hard to write with hand though. All modern browsers support SVG. Checkout full support details here. Continue reading SVG for Web Design

Why Toptal seems great to me

I know Toptal from their awesome tutorials and blog posts. Many days ago when I was googling I found some tutorials written inToptal blog. Those tutorials were so helpful and when I was discussing with one of my designer friend he was telling that Toptal is actually a marketplace of most talented freelancers around the globe. Also heard that he failed to pass in Toptal screening process. It made me interested. Continue reading Why Toptal seems great to me

How to change bootstrap scrollspy offset

Its a case study actually, I was stuck to change the scrollspy offset, however, there is some dirty and fair way to set this value. Question is why I need this. If you use fixed position navigation or change the scroll offset then you will see the navigation items inn’t highlighting perfectly, generally the problem is always the exact previous item being highlighted after reaching the content. I saw a topic here but wasn’t satisfied actually. Continue reading How to change bootstrap scrollspy offset

WE Tech Fest 2014 in AUW

WE Tech Fest: Women Empowerment through Tech Fest” is focusing on women’s visibility and involvement in IT field. This is one of the first initiatives taken in this region to promote women in the technology field. It aims to ensure a large number of women’s participation in IT Development. Moreover, AUW IT Club always encouraged female leaders from Asian University for Women in Technology. Continue reading WE Tech Fest 2014 in AUW

How to change bootstrap collapse nav menu appearing time

I was trying to change the appearing time for bootstrap navigation for touch device. Many jQuery and less css based solution I found in web but I found a convenient solution in Stack Overflow. Here is it Continue reading How to change bootstrap collapse nav menu appearing time

Some resource for google map embedding

Its really difficult to customize Google map with its new API system for noob developer who isn’t good at JavaScript. I’m also in this team, I was trying to enable and disable some feature of google map with its v3 API system. I got some valuable resource and sharing here. Continue reading Some resource for google map embedding

transition not working while resizing image

I was making a navigation which will be fixed and be smaller after scrolling a little bit. I set transition for smooth resizing content. I got a problem that the logo image wasn’t resizing smoothly i mean with transition.

The image don’t support (as far as I know) transition on resizing if the size isn’t defined. You have to write the normal size of the image and also the size of the image after the event (hover, click etc.)

wrong code,

#logo img:hover {width: 150px;}

Correct code,

 

#logo img {width: 100px;}

#logo img:hover {width: 150px;}