Redirect www domain to non-www with .htaccess

April 23rd, 2014 by Alex No comments »

I’ll just leave the htaccess RewriteRule here

RewriteEngine On
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [R=301,L]

Remove inline font-size and line-height in ul and ol lists in TinyMce

April 23rd, 2014 by Alex No comments »

This bug is very annoying as it produces unnecessary inline styles like this:

<ol>
<li><span style="font-size: 12px; line-height: 100%">list item 1</span></li>
<li><span style="font-size: 12px; line-height: 100%">list item 2</span></li>
</ol>

Not quite what we need, but the fix seems to be pretty easy, all we need is include the lists plugin in tinymce initialization:

tinymce.init({
  ...
  'plugins': 'lists',
  ...
})

And now we have a clean pretty HTML :)

Use FB.ui() instead of old Facebook sharer

April 22nd, 2014 by Alex No comments »

So the old lovely facebook.com/sharer.php no longer treats all your titles and summaries, and you don’t have a possibility to use og: meta tags. Same problem? Well, truth is that platform developers are also developers and it’s hard to make something perfect initially. That’s why things constantly change, and this time we at least have a substitute: Facebook JavaScript SDK

There will be 3 steps we need to do in order to make it work.

Step 1: Register your application
We will need the APP ID when we are done with registering. Make sure you use the same domain name as you are testing on, otherwise you get an error looking like this: API Error Description: The specified URL is not owned by the application

Step 2: Init the SDK:
Put the code right after your <body>, and make sure to change {your-app-id}

<div id="fb-root"></div>
<script>
      window.fbAsyncInit = function() {
        FB.init({
          appId      : '{your-app-id}',
          status     : true,
          xfbml      : true
        });
      };
 
      (function(d, s, id){
         var js, fjs = d.getElementsByTagName(s)[0];
         if (d.getElementById(id)) {return;}
         js = d.createElement(s); js.id = id;
         js.src = "//connect.facebook.net/en_US/all.js";
         fjs.parentNode.insertBefore(js, fjs);
       }(document, 'script', 'facebook-jssdk'));
</script>

Step 3: Call the FB.ui() when you need to share something
Example with jQuery:

$(function() {
  $('a').click(function() {
    FB.ui({
      method: 'feed',
      name: 'Facebook Dialogs',
      link: document.location.href,
      caption: document.title,
      description: 'Some custom text here'
    });
    return false;
  });
});

Use 1 native HTML5 input type ‘color’ to pop out a colorpicker when we need it

April 14th, 2014 by Alex No comments »

So let’s say we have several places where we need to have a color picker. Some might use a jQuery Colorpicker, bunch of CSS files, gradient images, and so on. But, let’s imagine all browsers support input type="color".

First things first, we create 1 input which will be our color picker:

<input type="color" id="colorpicker" />

Wow, that was hard.. now we add some simple CSS rules to make it invisible, but still “workable”:

#colorpicker { position: absolute; top: -9999px }

Then, let’s say we have 2 places where we need to input our color, but we need it to look custom:

<div>Color is: <span id="color"></span> </div>
<div><input type="button" value="Pick Color" id="colorpickertoggle" /></div>
 
<div>Color is: <span id="color2"></span> </div>
<div><input type="button" value="Pick Color" id="colorpickertoggle2" /></div>

Now, we add the last part – the actual JS code. We will trigger color picker with a button input, and update the proper elements when we get a new value:

var changeelement = 'color';
document.getElementById('colorpickertoggle').addEventListener('click', function() {
    changeelement = 'color';
    document.getElementById('colorpicker').click();
}, false);
document.getElementById('colorpickertoggle2').addEventListener('click', function() {
    changeelement = 'color2';
    document.getElementById('colorpicker').click();
}, false);
document.getElementById('colorpicker').addEventListener('change', function() {
    document.getElementById(changeelement).innerHTML = this.value;
}, false);

Potentially, we can add any amount of buttons and inputs and variables and .. do whatever we want with the value returned by a color picker.

Working fiddle:
http://jsfiddle.net/CW5J8/

Checkbox input size on mobile devices

April 13th, 2014 by Alex No comments »

So far this seems to be the best approach for Android devices:

input[type=checkbox] {
  -webkit-transform: scale(2,2);
}