Basic HTML generator for Bootstrap 3

< What’s this? >
It generates basic HTML source for Bootstrap 3. You can choose options when you generate it. I often use this for myself. If you want, please bookmark this page.


< Generator >
Page Title :
Language code :
Bootstrap version :
Compatible with old IE :
Use fixed navbar :
Use sticky footer :
Use jQuery failover :
Use jQuery UI failover :
Use backbone.js :
Use underscore.js :
Use bootbox :

If you choose “Compatible with old IE ” “YES”, you need to put “bootstrap.min.css” and “respond.min.js” on your server. Basically “respond.min.js” doesn’t work correctly on CDN and servers of others.

< Scripts >
You can download scripts that HTML uses. You can put on your server and replace paths of scripts.
Bootstrap
jQuery
jQuery UI
backbone.js
underscore.js
bootbox
html5shiv
Respond.js
( Bootstrap and Respond.js are necessary to download for old IE. Please be careful. )

Make STINGER3 (WordPress theme) compatible with WPML (Multilanguage plugin)

< What’s WPML? >
It is a multilingual plugin for WordPress. I use WPML on this mecrazy blog.
Official website of WPML

< What’s STINGER3? >
This is a theme for WordPress. It has many nice functions without plugin. For example, snippet inserter for ads(like Google Adsense) and cool design social buttons. I have wanted to try to use this theme.
Official website of STINGER3 (Japanese page)

< Hope gentle activity >
The developer of STINGER3 is too busy to answer on Twitter, and I’m not sure he can read languages other than Japanese. If you have any questions about STINGER3, I hope you to find the answer on Google or solve the problems by yourself.

< For the people who can’t read Japanese >
Official website of STINGER3 is in Japanese. I think it’s difficult to find download link of theme zip file. You should find the Japanese word “ダウンロード“. It means “download” in English. Please use CTRL + F to find this word. Please find the current version file name “stinger3ver20140327.zip”.

< Code for compatibility >
The code below give WPML compatibility to STINGER3.

<style type="text/css">

.submenu-languages{
  background-color:#f3f3f3;
  border-style:solid;
  border-color:#dedede;
  border-width:0px 1px 1px 1px;
  position:absolute;
  margin-left:-11px;
  margin-top:21px;
  padding-bottom:5px;
  display:none;
}
.submenu-languages > li{
  white-space:nowrap !important;
  float:none !important;
  display:inline-block !important;
}

.iclflag{ vertical-align:middle;position:relative !important;top:-1px !important; }
#lang_sel{ z-index:1000; }
#lang_sel a{ display:block; }
#lang_sel ul,#lang_sel li,#lang_sel a{
  margin:0px;padding:0px;
  width:300px;
  text-align:left;
  white-space:nowrap;
}
#lang_sel ul,#lang_sel li{ margin:0px !important;padding:0px !important; }
#lang_sel a{ margin:0px !important;padding:0px 7px !important; }
#lang_sel li,#lang_sel a,#lang_sel span{
  height:30px !important;
  line-height:30px !important;
  font-size:14px;
}
#lang_sel > ul > li > ul{ top:31px; }

</style>
<script type="text/javascript">
jQuery(function($){
var langMenuObj = $('.submenu-languages').eq(0);
var wpmlMobile = (typeof(window.orientation) != "undefined");
$('.menu-item-language-current').eq(0).on('mouseenter',function(){
if(!wpmlMobile){langMenuObj.stop(true,true).fadeIn('fast');}
}).on('mouseleave',function(){
if(!wpmlMobile){langMenuObj.stop(true,true).fadeOut('slow');}
}).on('click',function(){
langMenuObj.stop(true,true).toggle();
});
$('.icl_lang_sel_current ').parent().click(function(){ return false; });
});
</script>

< How to insert this code? >
There are 3 example ways to insert the code. Please choose one of them. Or if you know how to customize WordPress, you can insert manually to your PHP scripts.

< Method – 1 >
Go to [ Appearance – Widgets ] of administrator menu. Please add “Text” to one valid area. Please do not enter the title, put the script only in the detail form.

< Method – 2 >
I developed a plugin STINGER3 loves WPML. This plugin do the same thing as “Method – 1”. If you find bugs, please report or tell me on Github, Twitter or Google+.

< Method – 3 >
Using WordPress plugin “Wp Insert“. It can insert HTML code to anywhere on your blog.

< Afterward >
I think each methods are not so difficult. But current version of STINGER3 is not compatible with language mo files. We can only translate with String Translation of WPML. If I have spare time, I want to develop patch for STINGER3 compatible with mo files.

< Updated on June 11, 2014 >
Fixed – It can’t handle first tap event of Android or iOS browsers. Source code on this page and the WordPress plugin on Github are updated.

Running WordPress on Android using KSWEB

< Warning >
You need the skill to set your Android’s IP address public. I don’t write the procedure about network settings, because it depends on your network hardware, software and provider. I’m sorry but please check it on another website.

< Awesome App for Android >
There is an awesome app on Google Play. The app name is KSWEB. Developer page is here. You can download from this page or Google Play.

< Requirements >
The developer of KSWEB says Android device with OS version 2.3.3 or higher and ARM-based processor is required. I will try to run KSWEB on IS05 (Japanese old Android smartphone by SHARP) and the procedure on this post is about this device. But maybe KSWEB can run on so many kinds of Android devices. Please try on any devices you have.

< Installing from Google Play >
( If you want to install from Google Play, please follow this procedure. )
You just need to go KSWEB – Google Play and install it. That’s all of installation.

< Installing from APK file >
( If you want to install from APK file, please follow this procedure. )
Before installing APK file, you need to change your Android’s setting for apps. You need to allow app installs from “unknown sources”. After that, please visit http://kslabs.ru/download/ to download the APK file of KSWEB.
20140531-174245

< Downloading WordPress >
You can choose “downloading on Android directly” or “downloading on PC and upload to Android”. I downloaded on PC from http://wordpress.org/. I installed AirDroid to my Android and visited http://web.airdroid.com/ to upload WordPress ZIP file to my Android. If you want to “download on Android directly”, you just need to visit http://wordpress.org/ by your Android browser.

< Installing ZIP extractor to your Android >
You need to extract WordPress ZIP file on your Android. I installed AndroZip™ File Manager to my Android. But there are many kinds of ZIP extractor on Google Play, you can choose any app you like.

< Extract ZIP file >
I put the ZIP file “wordpress-3.9.1.zip” on the root of SD card directory. After I extract it “wordpress” directory was automatically made.
20140531-180921

< Adding and enabling optional functions >
Please tap [ TOOLS – WebFace – Start ] to enable KSWEB Web Interface. Please tap [ TOOLS – Main – phpMyAdmin ] to add phpMyAdmin. phpMyAdmin is for making a database on MySQL for WordPress, so it’s not necessary. You can also make a database by PHP script.
20140530-002435

< Making a database by phpMyAdmin >
Please access http://localhost:8000/ by itself(Android) or http://< Android’s local IP address >:8000/ from any computer on the same network.
phpMyAdmin_login
You can login as root with no password. In my sample picture, I made a database “wordpress” for WordPress.
phpMyAdmin_table

< Change WWW root of lighttpd >
Please access http://localhost:8003/ by itself(Android) or http://< Android’s local IP address >:8003/ from any computer on the same network. It’s KSWEB Web Interface. Default user and password are both admin.
KSWEB_Web_Interface
Please click Server settings. You can edit a config file of lighttpd.
Please find a line like below.

server.document-root = “/mnt/sdcard/htdocs”

Change directory path of this line to your WordPress root.
My new setting is below.

#server.document-root = “/mnt/sdcard/htdocs”
server.document-root = “/mnt/sdcard/wordpress”

After changing config file, please reboot lighttpd or KSWEB.

< Ports of lighttpd >
Default ports setting is like below.
lighttpd_ports
If you want to change them, please edit config file.

< Don’t sleep! >
Basically Android smartphone automatically sleeps. If you want it to work 24 hours, you need to keep it away from sleeping. There are many apps to stay it awake on Google Play. Please use StayAwake, KeepScreen or another one you find on Google Play.

< Start WordPress >
Next step is same procedure of general installation of WordPress. Please access your Android with your domain name. WordPress default installation will start. Enjoy your energy‐saving WordPress life.

Reverse proxy on nginx on Raspberry pi

< Ready to install >
You need Debian wheezy to follow my procedure. Not only for Raspberry Pi.

< Why I use Raspberry Pi >
Reverse proxy is simple function. Basically it’s too easy task for general personal computers or any servers. Raspberry Pi is not so powerful, but it’s energy saving computer. It’s not expensive. Anyone can buy it all over the world. It’s enough for reverse proxy on nginx. That’s why I choose Raspberry Pi for reverse proxy server and wrote this post.

< Installing nginx >
Execute command below as root.

apt-get install nginx

That’s all.

< Edit config file >
Edit default config file.

nano /etc/nginx/sites-available/default

My “/etc/nginx/sites-available/default” is like below.

server {
listen 80;
server_name mydomain.net;

location / {
proxy_pass http://127.0.0.1:8080;
}
}

This config transfer accesses “mydomain.net” to 8080 port of local Apache server on Raspberry Pi.

< Add proxy config file >
Add a file for proxy settings.

nano /etc/nginx/conf.d/proxy.conf

My “/etc/nginx/conf.d/proxy.conf” is like blow.

# Header
proxy_redirect off;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
proxy_set_header X-Forwarded-Host $host;
proxy_set_header X-Forwarded-Server $host;
proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;

# Timeout
proxy_connect_timeout 60;
proxy_read_timeout 90;
proxy_send_timeout 60;

# Buffer
proxy_buffering on;
proxy_buffer_size 8k;
proxy_buffers 100 8k;

# Cache
proxy_cache_path /var/cache/nginx/mydomain.net levels=1:2 keys_zone=cache_$
proxy_temp_path /var/cache/nginx/temp;

proxy_cache_valid 200 2h;
proxy_cache_valid 302 2h;
proxy_cache_valid 301 4h;
proxy_cache_valid any 1m;

Also you need to make cache dir as root.

mkdir /var/cache/nginx

< Start nginx >

service nginx start

How you think about this procedure? So easy?

Generating dynamic web pages only with Google Drive

< Warning >
I recommend you to get extra Google account only for public.
Because if you follow my procedure, your Gmail address will be on public XML file.

< Can I put adsense codes on HTML on Google Drive? >
The answer is NO. I found the important information on Google Product Forums below.
Can I place adsense codes (ads) in my google drive every doucement?
You can not place adsense codes on any documents in Google Drive. Please be careful.

< New solution on 2014/07/07 >
I wrote the post Get new version of Google Spreadsheets as JSONP. If you want to use new version of Google Spreadsheets to generate dynamic web pages instead of the old version, please read that post.

< Updated on 2014/04/26 >
Please use Anyfile Notepad or any other text editor apps for Google Drive on Google Web Store instead of Drive Notepad. Because Drive Notepad was removed from store.

< Updated on 2014/05/12 >
Hey! Drive Notepad is back to Google Web Store!

< Recommendation >
I recommend you to install “Drive Notepad”. It’s an extension for Google Drive. When you install Drive Notepad, you need Chrome. But after connecting Drive Notepad to Google Drive, Chrome is not required. You can use Drive Notepad on any browsers.
https://chrome.google.com/webstore/detail/drive-notepad/gpgjomejfimnbmobcocilppikhncegaj?hl=en-GB
drive_notepad_en_us

< For updating contents from Spreadsheet >
You need to use “Google Spreadsheet version 1”. Because “version 2” doesn’t support CSV and XML sharing yet. ( I wrote this post in April 19 2014. ) If you normally generate new spreadsheet today, it’s automatically be version 2.

Google explained new spreadsheet on “Check out the new Google Sheets“.

I worried about CSV and XML sharing will not support in version 2. So I checked also “Unsupported features in the new Google Sheets“. But this function isn’t listed on that page. Yep … not listed … but nobody is sure when Google change their mind….
Can you agree this situation? LOL

Let’s access https://g.co/oldsheets to generate a spreadsheet in version 1.

It’s my sample.

It’s only one sheet. It has header, 3 cols and 2 rows.
( I’m going to generate imgur image web site. )

< Let’s make it public >
Follow the pic below.
publish_to_the_web_en_us

Select “Publish to the web” and push “Start publishing”.
See “Get a link to the published data” section.
publish_to_the_web_2_en_us
You can get your spreadsheet as Web page, HTML, CSV, TXT, PDF, ATOM, RSS, XLS and ODS.
If you want to sync spreadsheet to your website, you should choose CSV, ATOM or RSS. These are easy format for syncing. When you choose one of them, you can find the function to select column and row. This function can make file size per request smaller.

If you choose CSV, before selecting range, please select a target sheet. Sample is like the pic below.
select_sheet_en_us
In my sample, “A1” is header. I want to get 5 rows maximum. So I set the range “A2:A6”.
select_cell_en_us
You can find “range=A2%3AA6” in the url. If you want to add paging function to your web site, you should dynamically change the parameter for “range” by Javascript.

< Is it difficult? >
Don’t worry. I wrote the Javascript code here.
https://github.com/mecrazy/generateGoogleDriveUri
This script is compatible with CSV, ATOM and RSS formats. It’s only URI generator. It doesn’t have parser. If you choose ATOM or RSS, you can use jQuery as a parser.

Please use “generateGoogleDriveUri.min.js” like below.

<!DOCTYPE html>
<html>
<head>
<title>Sample page</title>
<script src="js/generateGoogleDriveUri.min.js"></script>
<script type="text/javascript">
window.onload = function(){

//Casting object
var gduObj = new genGDU('Put a link to the published data here');

//Generate URI
var atomUri = gduObj.genUri(
  'atom', // I choose ATOM format.
  {
    startRow:2, //Start from row 2
    startCol:1, //Start from col 1
    cols:1, //Cut 1 columns
    rows:5, //Cut 5 Rows per page
    page:1 //Get page 1
  }
);

var html = '<a href="' + atomUri + '" target="_blank">' + atomUri + '</a>';
document.getElementById('sample').innerHTML = html;

}
</script>
</head>
<body id="sample"></body>
</html>

< Add index.html and Drive Notepad setting >
After you add Drive Notepad on Chrome, you can find “Text Document” on create menu of your Google Drive.
add_index_en_us
If it’s your first time to use Drive Notepad, you will be asked like below.
permission_01_en_us
Push “Login and/or grant app permissions…” and accept the question below.
permission_02_en_us

Please change file name to “index.html”. After saving the file, close the tab.
change_file_name_en_us

Please change setting about “Manage apps”.
manage_apps_en_us
Please check “Use by default” of Drive Notepad row.
use_by_default_en_us
After that, you can use Drive Notepad like the other apps on Google Drive.

< Change sharing settings >
Select your folder to set public.
After that, follow the pic below.
set_sharing_enabled_01_en_us
Set “Public on the web” checked.
set_sharing_enabled_02_en_us

< Preparing HTML, CSS, Javascript >
Use Drive Notepad to prepare them.
Or edit with your own text editor and upload them.
My relative position is like below.
my_public_tree_en_us

The link below is my web page created with Google Spreadsheet.
https://googledrive.com/host/0B2hsIY7iHEnLS290OHlmRkFmbU0/
If you want, please use sources as sample.

< Extra script >
I developed imgur URL converter for my web page. If you want, please use this.
https://github.com/mecrazy/imgurUrlConverter