max

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:

1
{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:

1
2
3
4
5
React.children.map(this.props.children,()=>{})

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

see all API at React.children

Inline css in modern apps

While modern framework communities are push forward in using inline css, innovated by one of the react developer react-css-in-js.

As Vjeux have presented in his deck the problems that they faced using css while they are working on react projects.
css problems

Since then internet was boomed about working on inline css, thats when the birth of most popular plugins:
Comparison of CSS in JS Libraries for React
One of the coolest feature that inline css offer is the ability to recompute your styles at runtime, and styles does not exists when not required.

where there is a solution, there will be a problem in computer science, using inline css you do not get full features of css, such as hover, pseudo styles, such as :active, :active + sibling etc… thought some plugins already solve this yet another problem using inline css is slower than external css, imaging you when you have 10000 rows in a table and each TD in contains each inline styles then loading of your html will be a problem.

1
2
3
<td style="border:2px solid #ccc; background:#ccc; ...."
....
...

then when you open up your console and now you realised you have hard time debugging it, lots of css on your DOM, and usually we search elements by class name… my conclusion is that I will definitely stay with SASS for a while with some nice name convention concept like SuitCss or BEM

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…

https://github.com/maxlibin/react-doublescrollbar

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.

Read More

What is this.props.children

When I first saw this API, its about to tear my head apart, and now I will share with you about what I have learned on this.props.children
the concept is easy:
Imaging you have Parent component that call child component that works fine,

what if you want to pass in the props to parent and render whatever the props is, yet should show in child and wrap in child div…

so this.props.children works little bit like in Meteor blade or emberjs, now I will put everything together and this is how I would use this.props.children

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.

We are include/embed svg like what we can to images.

on HTML: we can include as an image or XML code, for example:

1
<img src=“mysvgfile.svg” alt=“svg file” /> // if you need to scale add width and height…

or you want to use XML, the good part using xml is you have control over some svg settings such as fill, colors and so on…

Well, one thing you need to make sure when you are using xml is that if your web page contains multiple same svg that I would suggest you embed them as image because the image file will only be downloaded 1 time, whereas xml will add more weights to html when it was downloaded from server.

1
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill=“red” d="M12 3C8.032 3 7 4.8 7 7.8c1.642-3 4.157-2.795 5-2.795V3zm0-2v6l3-3-3-3z"></path><path fill=“green” d="M14 7v4c0 1.113-.9 2-2.01 2H4.01C2.9 13 2 12.105 2 11V5c0-1.113.9-2 2.01-2H7.2c-.597.56-1.05 1.23-1.384 2H4v6h8V9l2-2zm-3-2h-.04l.04-.01V5z"></path></svg>

SVG can also be included from css side like what we did to images normally.

1
2
3
4
5
6
.container {
  background:url(mysvgfile.svg) no-repeat;
  background-size:100px 100px; // adjust svg size
  width:100px;
  height:100px;
}

Alternatively we can also include svg as xml from css:

1
2
3
4
5
6
.container {
 background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><circle cx='15' cy='15' r='10' /></svg>")  no-repeat;
  background-size:100px 100px; // adjust svg size
  width:100px;
  height:100px;
}

Well this works well in most browsers, however Internet Explorer refuses to work with it, so we need to convert them into base64, you can read more about base64 on: http://stackoverflow.com/questions/201479/what-is-base-64-encoding-used-for

1
2
3
4
5
6
.container {
 background: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzMCIgaGVpZ2h0PSIzMCI+PGNpcmNsZSBjeD0iMTUiIGN5PSIxNSIgcj0iMTAiPjwvY2lyY2xlPjwvc3ZnPg==")  no-repeat;
  background-size:100px 100px; // adjust svg size
  width:100px;
  height:100px;
}

There are many svg to base64 convertor out there, one of it I use it a lot is: https://dopiaza.org/tools/datauri/index.php

Optimizing Svg files is rather easy, we mentioned svg is just XML file, so you can open it on Text editors such as sublime and so on, you will see lines of code, and as we all know to reduce file size for code is to keep them into one line, and this apply to SVG too, just convert them into one line and you save 40-70% of file size, or if you want to optimise them in bulk, you can use open source tools “svgo” from github https://github.com/svg/svgo, either in CLI or GUI: https://github.com/svg/svgo-gui

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

1
<img src=“yourimageurl” alt=“Image descriptions” />

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

1
2
3
4
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:

1
2
3
  .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,

1
2
3
4
5
6
7
Zend_Db_Adapter_Exception]

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

[PDOException]

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

1
ln -s /Applications/MAMP/tmp/mysql/mysql.sock /tmp/mysql.sock
Page 1 of 912345...Last »