react passing props to this.props.children

Previous article I mentioned about this.props.children and its feature, problem is this.props.children does not not provide a way to pass down the props, so we need a wrapper called React.cloneElement which allows you get this component and return a new component where you can also pass in the props like this:

{React.cloneElement(this.props.children, this.props)}

by the way there are more very useful helpers to help you interacting with this.props.children, for example:,()=>{…})

React.Children.forEach(this.props.children, (child, i) => {
  console.log(child + ' at index: ' + i);

see all API at React.children

React double scrollbar component

While playing with react, I have built a react component which server as second scrollbar for your overflow divs.
You are free to use the code that I added to github…

React pass parameter to parent component or call parent function on ES6

sometime you will need to call parents function on react component, the problem in ES6 is that all functions are not bind with this, so you will need to do manually, below is a simple toggle function that you will call from Child component, notice that in order to call the parent’s method, you will have to pass in the function as a property to Child component then trigger from child onClick method, notice that I have bind this to this.props.parentToggle, by default in ES6 react decided not to auto bind this like what usual javascript does, so we have to do it manually.

Continue reading “React pass parameter to parent component or call parent function on ES6”

using SVG on your web

SVG Scalable Vector Graphics is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. Because of its scalable native, especially with very high graphical screens(example: retinal screen for Mac) these days, we need solutions for images or graphics to be display on these screens.

Well these are many ways to resolve these, such as using large image 2x of your current size and scale down to smaller dimension on web, or for icons we use Font-icons. Since SVG was widely used on most modern browsers including IE9, and its pretty lightweight we should make use of it.
How we can use SVG on the web and why we will use it.

Continue reading “using SVG on your web”

Fixing a broken image alt

When your image is broken in browser, it will show Alt text from the image attribute if you are using:

<img src="“yourimageurl”" alt="“Image" />

a quick fix for this is really simple, change your image background and color to transparent.

img {
  color: transparent;
  background-color: transparent;

that is it, and enjoy.

gmail clipping float right

While doing email marketing and when you send out email with long contents and its annoying to see gmail clipped it and it ask you to click to view entire email Screen Shot 2016-06-28 at 11.05.41 AM

And yet for me happened to have this problem, this message goes to right side of my content. Screen Shot 2016-06-28 at 11.10.00 AM

After playing around for sometime, all you need to do is add overflow:auto to your tag, after all Google will convert this to tag to div.

CSS3 right offset

Did you realised that when you need to place your background image on the right side and it always touches the corner of the right, CSS3 to save, you can actually do a offset of right by doing this:

.class {
  background-position:right 10px center; // this will offset a 10px from right side.

Magento 2 install sample data error

If you ever faced magento 2 installing sample data error using MAMP on local,


SQLSTATE[HY000] [2002] No such file or directory


SQLSTATE[HY000] [2002] No such file or directory

here’s a solution for you, provided you are using composer to install magento, this happened to me while updating the sample data, php magentoFolder/bin/magento setup:upgrade

ln -s /Applications/MAMP/tmp/mysql/mysql.sock /tmp/mysql.sock