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,

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

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

Display all products in woocommerce admin

Woocommerce is good start for ecommerce beginners, easy to install and get start with, I was using CSV importer to import thousands of SKU however I realised that it will not update the current tax that you have. So in order to fix that we need to update the tax again in each product, you can do quickly using bulk action, and click Edit

Screen Shot 2015-08-30 at 2.15.42 pm

 

By default woocommerce only allow you to show 20 products per page, you can open up the screen option button at the top right, and change the number of items per page, easy fix.

Screen Shot 2015-08-30 at 2.18.31 pm

 

Add active state on meteor.js menu

Imaging you have already created a menu in meteor js framework, somewhere in your header, something like this

<ul>
 	<li><a href="/home">Home</a></li>
 	<li><a href="/about-us">About Us</a></li>
 	<li><a href="/contact-us">Contact Us</a></li>
</ul>

SO you want to make the menu to be active when you are on current route, one of the simple solution is to create a template helper, Register a template helper by adding a file on client folder called helper.js

then inside helper.js register a template helper (Template.registerHelper), which previously called UI.registerHelper.

 

Template.registerHelper('isActive', function(){ // take in some params to determine the stats
  // assume that you are using iron-router, if not please install "meteor install iron:router"
  var currentRoute = Router.current().route.getName();
  if(currentRoute == parms){
    return "current";
  }
})

with this helper, you can add to your template.

 

<ul>
 	<li class="{{isActive "><a href="/home">Home</a></li>
</ul>

// Notice the home as argument which you defined on your iron router name.
<ul>
 	<li class="{{isActive "><a href="/about-us">About Us</a></li>
 	<li class="{{isActive "><a href="/contact-us">Contact Us</a></li>
</ul>

 

now your li class will return active when you are on that page/route.

Becareful with jquery on or bind event.

When you do jQuery and sometime you would bind some functions on an event outside appended DOM elements, and rerun the function again like this:

<ul>
 	<li>test</li>
 	<li>test</li>
 	<li>test</li>
</ul>
<button></button>

for example we want to change the text to something else when we click on each of the li, maybe lets change to “run test …”;

function changeText(){
  $(this).find('p').text("run test");
}

$('li').on('click', changeText);
//$('li').bind('click', changeText);

now you want append a new li and allow function on that appended li like this:

Continue reading “Becareful with jquery on or bind event.”

Meteor include external javascript or other files

When I first start meteor i found it hard to load external libraries like javascript files, especially when you bought some templates somewhere, which contains more than 5 javascript files and 4 css files.

A few solution I tired was using some external library loader, such as IRLibLoader, its pretty easy to use inside your router, call this method

IRLibLoader.load('/js/whatever.js')

will this seems to work fine at first, when first load its working the javascript initialised, however when i refresh and or navigate around and back again its not working, the script inside this does not initialed.

So the better solution to load this when page rendered, in template js file,

 

Template.templateName.rendered= function(){
  $('body').append('<script src="/js/whatever.js">');
}

 

Meteor 1.0++ seems to able to put external tags inside the body tag, you can just include the external libraries into template tag