Count LOC recursively

Count lines of code in a directory recursively:

find . -name '*.java'  |  xargs wc -l

See [1].

[1] How to count all the lines of code in a directory recursively?

Avoid text/image/video width overrun with css

Say you have a html table or div, or in the case of mobile device browser. A long text segment, or image, or video (e.g., from youtube, using iframe), whose width is too long to fit in the parent container, this will break the layout. Since I'm working on a forum compatible with both desktop computer and mobile devices, here are my findings on the solutions.

== text ==

Use this in display:

<pre class="forum">content</pre>

Of course, it does not have to be pre tag. It can be a div too. In css [1]:

pre.forum {
    /* Wrap long text with space in the middle. */
    white-space: pre-wrap;       /* Wrap text as needed. CSS 3. */
    white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */
    white-space: -pre-wrap;      /* Opera 4-6 */
    white-space: -o-pre-wrap;    /* Opera 7 */
    word-wrap: break-word;       /* Internet Explorer 5.5+, Non standard for webkit */
  
   /* Wrap long text without space in between. */
 -ms-word-break: break-all;
     word-break: break-all;

-webkit-hyphens: auto;
   -moz-hyphens: auto;
    -ms-hyphens: auto;
        hyphens: auto;
}

This css works for both desktop browser and mobile browser.

== Image ==

Use this in display:

<img src="..." class="media_img">

In css:

img.media_img {
    max-width: 100%;
    height: auto;
}

Note here use max-width instead of width, because if the image width is less than device width or parent container width (in desktop browser), we want to keep the image width and not expand it. This css works for both desktop browser and mobile browser.

This will always work in Safari. However, this may fail in firefox, if the "width" value is specified in the img tag, e.g.,

<img src="..." width="1500" class="media_img"> 

The way to fix this, is to wrap the img tag with another div tag, whose width is specified as an absolute value (the max design value):

<div class="media_img_container"> <img src="..." width="1500" class="media_img"> </div>

In css:

div.media_img_container {
    width: 1000px;
}

Then the image will be at most 1000px in width, despite the specification of width="1500" in img tag. This also means that for different design width, you need to specify different div container width.

== Video ==

For desktop browser, this usually is not a problem, since video width is often around 500px. For mobile device, this can be a problem since mobile browser width can be only 320px, so the css here can be used. This css will resize the video iframe to always match device width.

In the case the iframe width is less than device width, this will expand the iframe width. If you don't want to do it, maybe you can check the width parameter in the iframe tag and don't apply this css.

Use this in display:

<div class="aspect-ratio"><iframe ...></iframe></div>

In css [2]:

.aspect-ratio {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 75%; /* height/width, usually 3/4 on youtube */
}

.aspect-ratio iframe {
    position: absolute;
    width: 99%;  
    height: 99%;
    left: 0; top: 0;
}


References:

[1] http://kenneth.io/blog/2012/03/04/word-wrapping-hypernation-using-css/
[2] http://fettblog.eu/blog/2013/06/16/preserving-aspect-ratio-for-embedded-iframes/

Create a website compatible with Mobile device

A template of a html page compatible with mobile device layout is attached at the end of this post.

In the header:  <meta name="viewport" content="width=device-width"> means if the agent is a mobile device, then set the page width to the device's width.

In the resizePage() function, if the navigator useragent is detected as a mobile device, then set the image's width and the div's width. Function effectiveDeviceWidth() [1] will return the device screen width for the current orientation (horizontal or vertical). The code in [1] was like this but somehow it does not work with my Android:

function effectiveDeviceWidth() {
  var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height;
  // iOS returns available pixels, Android returns pixels / pixel ratio
  // http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
  if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio) {
    deviceWidth = deviceWidth / window.devicePixelRatio;
  }
  return deviceWidth;
}

Note you can see relevant parameters with this javascript:

document.write("width: " + window.screen.width + ", height:" + window.screen.height + ", ratio:" + window.devicePixelRatio + ", orientation:" + window.orientation);

For example, for iPhone:
Vertical: width: 320, height: 480, ratio: 2, orientation: 0
Horizontal: width: 320, height: 480, ratio: 2, orientation:90 or -90

For Android:
Vertical: width: 480, height: 800, ratio: 1.5, orientation: 0
Horizontal: width: 800, height: 480, ratio: 1.5, orientation:90 or -90

Note in general it is hard to get the device size in a way compatible with all the brands. I am using iPhone 7.1 and Android 4.1.2.

The code after this [2] are useful to mobile devices that do not automatically update layout when orientation is changed. This is not an issue for iPhone, but is one for Android.


== HTML Page Template Compatible With Mobile Devices ==

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<title>Test Site</title>
</head>
<body style="margin: 0px 0px 0px 0px;" onload="resizePage();">
<center>

<img id="img1" src="https://www.google.com/images/srpr/logo11w.png">

<div id="div1">
<h2>About</h2>
<p>This is a site compatible to mobile device layout.</p>
</div>

</center>

<script type="text/javascript">

//
// Reisze page elements according to device width.
// Applies for mobile devices only.
//
function resizePage() {
  var uagent = navigator.userAgent.toLowerCase();

  if (uagent.search("iphone") > -1 ||
      uagent.search("ipod") > -1 ||
      uagent.search("ipad") > -1 ||
      uagent.search("appletv") > -1 ||
      uagent.search("android") > -1 ||
      uagent.search("blackberry") > -1 ||
      uagent.search("webos") > -1
     ) {
    var w = effectiveDeviceWidth(); 
    document.getElementById("img1").style.width = w + "px";
    document.getElementById("div1").style.width = (w - 20) + "px";
  }
}

function effectiveDeviceWidth() {
  // document.write("width: " + window.screen.width + ", height:" + window.screen.height + ", ratio:" + 
  // window.devicePixelRatio + ", orientation:" + window.orientation); 

  var deviceWidth = window.screen.width;

  if (navigator.userAgent.toLowerCase().indexOf('android') > -1 && window.devicePixelRatio) {
    deviceWidth = deviceWidth / window.devicePixelRatio;
  }
  return deviceWidth;
}

//
// Resize page if orientation is changed. useful for Android.
//
var previousOrientation = window.orientation;
var checkOrientation = function(){
  if(window.orientation !== previousOrientation){
    previousOrientation = window.orientation;
    resizePage();
  }
};

window.addEventListener("resize", checkOrientation, false);
window.addEventListener("orientationchange", checkOrientation, false);

</script>
</body>
</html>


References:

[1] Detect effective horizontal pixel width on a mobile device with Javascript
[2] Detect rotation of Android phone in the browser with javascript

WordPress note

== Move WordPress to another folder ==

There is no need to backup entire site and move things. A simple, light-weight procedure is [1]:

1. Go to admin panel: Settings > General
2. Change the two URI addresses, click on "Save Changes". This will show an error page, but it's fine.
3. Open your SSH/FTP client (or other site admin tool) and move the WP folder
4. Now open your blog at the new location, go to Settings > General, click on "Save Changes".
5. Go to Settings > Permalinks, click on "Save Changes", this is supposed to recreate all .htaccess rules.

== Add social media share function ==

The simple script to insert for the sharing panel can be obtained from [2]. It just needs to insert this script anywhere between the body tags in your site.

Say you are using the twenty twelve theme, just edit this file: wp-content/themes/twentytwelve/footer.php
Add the script before the close body tag. That's all.

[1] http://wordpress.org/support/topic/moving-wordpress-to-another-folder
[2] http://jiathis.com/