Web Development

Two tips when using CloudFlare

CloudFlare Tips

CloudFlare is a service which secures and optimizes the performance of a website. I have begun to use the service on the blog one week ago and here are two tips I found so far when tinkering around with the service:

Sub-domains

When setting up a new site, add any sub-domains which you want to optimize through CloudFlare. Or you could add them later by going to your websites list, and select DNS settings from the drop-down list for the main domain that your sub-domains are in.

Here are some screenshots on the setup process for this blog, blog.robbychen.com:

CludFlare websites

Red circle is where you need to click. Click the image to enlarge.

CloudFlare DNS

Click the image to enlarge. You need to fill out two fields. First is the name of the sub-domain. For example, the name for blog.robbychen.com is blog. You also need to fill out the IP address for your domain. This should be the same as the first IP address on the list on that page. When you finished filling out all the required fields, click Add button.

You need to add the sub-domains one by one. Otherwise, CloudFlare won’t be able to automatically detect them and therefore they won’t benefit from the service.

CloudFlare Page Rules

This tip is for those of you who use back-end for your website, such as WordPress.

If you tried some apps in CloudFlare such as uservoice and infolinks, you may notice they appear in all pages on the site, even in the back-end and/or in the areas where you do not want the apps to be installed in.

To solve these issues, you can use Page rules:

page rules

Click image to enlarge. Click the page rules link indicated by the red circle to go to the page rules settings page.

On its settings page, you can define which URL you want to be excluded from certain features. Or you can use the pattern to define multiple URLs to be excluded, domain.com/wp-admin/* for example. Unfortunately, it can only use asterisks (*) in the URL pattern and cannot use regular expression to include more broad areas at one time, such as [*.]domain.com for both *.domain.com and domain.com. The only way to include these two patterns is to write separate rule for each of them. Below is a screenshot for these two rules I created.

Page Rules Settings

Click image to enlarge. As the image shows, not only you can control which pages the apps will be executed on, but you can also control other settings as well, such as security and performance.

Conclusion

Fortunately for me, the free plan of CloudFlare is enough for my sites. Besides the restrictions in the settings, there is also the limit of 3 page rules I can create. The free plan may or may not work for your site(s). You can try it free on your site(s) as long as you want, and purchase a paid plan if you want or in need of other features.

Do you have any other tips on using CloudFlare as well as any question regarding above tips? Please leave a comment below.

Site Gamified

captainUp

I have always wanted to do the idea of gamification on the site ever since I got into the achievements/goals mechanic of playing games on the iPad. While I have a good idea on how my achievements list and rewards system are gonna work, I don’t have enough skill to implement it on the site. That’s why I will be learning to develop WordPress plugins as well as JavaScript, and write a tutorial series for them on this blog as I learn so that you will benefit from it as well as remembering the learning materials.

Besides learning these two skills, I also may need to learn some game design skills, specifically level design (or whatever it is called). Since I lack drawing and creativity skills, I’m not planning to be a game developer. In the future, I may be entering game-related career once I learned all the necessary skills, who knows.

In the mean time, I will be using Captain Up to gamify the site. As far as I know, the rewards system for Captain Up is badges. It’s great for general public. However, it basically doesn’t have any reward (neither virtual nor real rewards).

My idea of rewards system is specifically for the web developers, bloggers, and anyone who has a website in mind. It would have four levels (Bronze, Silver, Gold, and Platinum). The level is determined by your points. You earn points by completing tasks described in the achievements.

Once you are in either of these four levels, you can spend points on the visibility of your website for the specific length of time. The website’s visibility basically means that your website will be visible on both the homepage of my site and in the sidebar.

The visible time is increment of one week for each level (1 week for Bronze, 2 week for Silver, and so on). As you may have noticed, the max time for the website visibility is 1 month.

As far as the points system go, the points will be subtracted from your account once you spent on a reward. And since your points are tied to the level, your level will be decreased as well (Gold to Silver, Silver to Bronze, and so on).

The above rewards system is my intension to implement on the site. And eventually and hopefully, this implementation will become a WordPress plugin.

What do you think about this idea and gamification in general? Leave your thoughts in the comment below.

HTML5 ContentEditable usage

contentEditable and localStorage

The ContentEditable attribute in HTML5 is very useful to those who just want simple and small edit directly in their HTML document without go into the backend. It also can give users the freedom to edit the document the way they want and maintain their edits with the help of Local Storage. This post discusses the second option which uses Local Storage to give users the ability to edit and maintain the document.

Create a new HTML document and type the following code:

<!doctype html>
<html>
	<head>
		<meta charset='utf-8'>
		<title>contentEditable</title>
	</head>
	<body>
		<div id='edit' contenteditable='true'>
			Hello
		</div>
		<script>
			var edit = document.getElementById("edit");
			edit.innerHTML = localStorage.getItem('edit');
			edit.addEventListener('blur', function() {
				localStorage.setItem('edit', this.innerHTML);
			});
		</script>
	</body>
</html>

In the above code, the contentEditable attribute is added to the edit id. It then uses JavaScript to add the localStorage functionality.

One usage tip for contentEditable is that when focused in the contentEditable area, you can select the text and press Ctrl/Command + b, Ctrl/Command + i, and any other keyboard shortcuts for text formatting to format the text as show below.

contentEditable and localStorage

Replace a phrase in several posts for WordPress

MySQL replace function

I talked about changing the URL paths of images and links for the old posts will be based on the 404 not found error generated through traffic, one by one. Apparently, this was a bad decision. I don’t expect the traffic go up so quickly after I added these old posts. It seems that they still are more popular than my new ones. Therefore, I decided to search for a solution to replace some parts of url for the links (and images) in the old posts with the current url format so that it can direct them to the correct file locations.

During the research, I stumbled across MySQL replace function. I thought that it could come in handy when replace certain phrase within some posts, such as old links and image links. And here are the steps:

  1. Login to cPanel of your web host.
  2. Find and login to phpmyadmin.
  3. Go to the database which your WordPress installation resides.
  4. Click the SQL tab and type the following codes into the text box:
    update wp_posts set post_content = replace(post_content, ‘find this text’, ‘replace with this’);

    Replace “find this text” with the text or phrase or whatever you want to be replaced, and replace “replace with this” with the text you want to replace. For instance, mine was

    update wp_posts set post_content = replace(post_content, ‘robbychen.com/oldBlog’, ‘blog.robbychen.com’);
  5. Click Go button and the text is changed in the database.

Now that almost all the links were fixed (at least I think), I still will continue monitoring the 404 errors to see which links are missed from the above code until there are no more 404 errors.

If the above code could not work for you, you can’t understand one or more of above steps, or you have other solutions to replace the text across multiple posts, leave a comment below.

A temp WordPress installation for Reviewing old posts

A long long time ago in 2012, there were some forgotten posts ...

I mentioned that I will be reposting some posts I wrote some years ago. This is the first step, creating a temporary WordPress installation to connect to the old database, review its data, and post any old but still useful information as a new post. Because this installation of WordPress is a multi-site installation in sub-domain form, I set up one of the subdomains as a wildcard subdomain (*.robbychen.com). Therefore I created a separate subdomain called rcblog-old.robbychen.com, and installed a single-site WordPress installation into this subdomain. Here are the detailed steps for recovering past posts which I wrote that had been long-forgotten:

  1. Login to the web hosting account (mine is Hostmonster).
  2. Use the find feature on the hosting panel (usually cPanel), find and click on the subdomains link.
  3. Create a new subdomain by entering the name of the subdomain, leave everything else default, and click create.
  4. Note the home folder for the new subdomain. We will need it later to upload a copy of WordPress.
  5. Grab a copy of WordPress on wordpress.org, extract it, and upload to the home folder mentioned in step 4 through either FTP or SSH.
  6. Go back to the hosting panel, find and click on the phpmyadmin link, and login using the web hosting credential.
  7. Search for any unused or old/long-forgotten database and verify that it’s a WordPress-generated database (usually almost all of the tables are prefixed with wp_ unless you changed prefix during the installation of WordPress).
  8. Go into the chosen database, look for wp_options table, and check the checkbox on the option_value for siteurl and home option_name. If you can only see one of them, make sure to click the “Show All” button at the bottom of page.

    Change siteurl and home variables in the database

    Change siteurl and home variables in the database (circled in red). Click the image to enlarge for more details.

  9. Scroll to the bottom of page and click Change.
  10. Change the option_value for both of them to the newly created subdomain (that’s http://rcblog-old.robbychen.com for me).
  11. Note the database name and go to the URL for the new subdomain.
  12. Click on the “Create a Configuration File” button, then click on “Let’s go!” button, and fill out the database details into the appropriate fields.
  13. When you are done filling all the fields, click submit button and click the “Run the install” button.
  14. Because the database already contains the WordPress data, it shows the Already Installed message.

    WordPress Already Installed screen

    WordPress Already Installed screen

  15. Click on the “Log In” button.
  16. Because this is an old WordPress database (probably very old), you may have forgotten either its username or password or both. In this case, click the “Lost your password?” link and enter your email address to recover your username and/or password.
  17. If you don’t remember the email address for this WordPress database either, you have to go back to phpmyadmin interface. Navigate to the wp_users table, and if you were the only user, the one and only email is under user_email column. You can also change the email address within this interface if you don’t use this email address anymore and/or would like to change to another email address.
  18. After you successfully logged into WordPress admin, it might show notice to upgrade your database. Go ahead and let it upgrade. After that, ignore the updates section since it’s a temporary WordPress.
  19. Go straight to the posts and/or pages section and let the “best forgotten posts” treasure hunting begin.

If you have any question regarding some of the above steps, please let me know in the comment. I will help you as possible as I can.

SQLite Proof-of-concept WP plugin (Updated)

SQLite & WordPress

UPDATE 1: I will upload the plugin to both WordPress Plugins Repo and GitHub so that others could contribute to the plugin and hopefully others will use it as a starting point for developing SQLite-based plugins.

UPDATE 2: But before that, I will rewrite the plugin using the WP Plugin Boilerplate for more cleaner code.

As promised, I have been working on this plugin for the last several days. As the name suggests, this plugin is created for developers who want to maintain the performance of WordPress for their end users by storing the data of each plugin into separate SQLite files.

You are free to use any section of the source code for this plugin without contribution. The source code should be clean enough to be readable (I tried to write a comment for each confuse-able code whenever possible).

Here is the plugin. Please leave a comment if you don’t understand certain part of the code.

New Project on Experimenting SQLite in a WordPress Plugin

SQLite & WordPress

This is a little late, but happy new year to all. I’ve been trying to write one post per day for this blog but never got a chance. This post is the first post of 2013 so I will try to write a post every day from now on.

Anyway, lately I’ve been reading the source code of all types of WordPress plugins, and noticed that there are either no SQLite plugins for the current version of WordPress or the SQLite plugins are only compatible with older WordPress version.

According to my own experience, using SQLite in a WordPress plugin has the following benefits:

  • Separate plugin data and settings from the main MySQL database which stores WordPress core data in order to maintain the size and speed of the core database.
  • Eliminate the need for extra code which used to remove the plugin-generated records from the MySQL database, which doesn’t usually work in my opinion.
  • SQLite database file typically resides in the plugin folder. When removing the plugin, the database removed as well. No more useless data generated by the plugin left behind inside the MySQL database.

Most of the benefits above are for end users. However, for the plugin developers like us, there are a few downsides for using SQLite:

  • Since WordPress is a MySQL-based application, all of its build-in functions are specifically made for the MySQL operations. It means that we need to use either PDO (PHP Data Objects) or native SQLite functions in PHP.
  • We need to manually create the database tables for every aspects of the plugin, such as its settings and custom fields.
  • We also need to manually apply and check for the saved plugin settings.
  • SQLite doesn’t have any helpful utilities similar to phpMyAdmin. Although there is SQLiteManager, I don’t find it useful as the SQLite database file needs to be at the same directory as the manager. Imagine that we just need to change one record inside a SQLite database. We need to move the whole file to the manager folder, open the browser, navigate to the SQLiteManager admin page, find and update this one record, and then move the file back to the original folder. If We are debugging database errors, this could become very unproductive.
  • We should familiar with the command line since SQLite doesn’t have any good GUI interface as stated above.

If you have been relying on the build-in WordPress functions to develop database-dependent plugins without knowing anything about PHP and SQL languages, it’s time to learn these two languages.

In the next post, I will write a “proof of concept” plugin to show what you can do with SQLite-based WordPress plugins.

Write CSS3 with Understandable Variables with LessPHP – Part 2 (Updated)

LessPHP

Update: I updated the code to add more explanation on the Flexible Box Model related properties.

LessPHP provides CSS stylesheet to have variables for reducing repeatable code in order to improve productivity.

In the last part, I talked about how to installing the LessPHP and general folder structure of an one-page web app using LessPHP. This part I will provide you with var.less which includes some CSS3 properties discussed in this post on Nettuts+.

Note that all of the code used LessPHP and CSS3 syntax. If you don’t understand the LessPHP syntax yet, here is its full documentation.

@bg-color(@color:red) {
 background-color: @color;
}

@bg-size(@xWidth:100%;@yWidth:100%) {
 background-size: @xWidth @yWidth;
 -o-background-size: @xWidth @yWidth;
 -webkit-background-size: @xWidth @yWidth;
 -moz-background-size: @xWidth @yWidth;
}

@border-radius(@radius:4px) {
 border-radius: @radius;
 -webkit-border-radius: @radius;
 -moz-border-radius: @radius;
}

 // Accepts start, end, center, baseline, stretch. Default to stretch
@box-align(@align:center) {
 -moz-box-align: @align;
 -webkit-box-align: @align;
 box-align: @align;
}

 // Accepts horizontal, verticle, inherit. Default to horizontal
@box-orient(@orientation:horizontal) {
 -moz-box-orient: @orientation;
 -webkit-box-orient: @orientation;
 box-orient: @orientation;
}

 // Accepts start, end, center, justify. Default to start
@box-pack(@pack:center) {
 -moz-box-pack: @pack;
 -webkit-box-pack: @pack;
 box-pack: @pack;
}

@box-shadow(@x:1px;@y:1px;@blur:3px;@color:#292929) {
 -webkit-box-shadow: @x @y @blur @color;
 -moz-box-shadow: @x @y @blur @color;
 box-shadow: @x @y @blur @color;
}

@box-shadow-multi(@shadows:1px 1px 3px green, -1px -1px 3px blue) {
 -webkit-box-shadow: @shadows;
 -moz-box-shadow: @shadows;
 box-shadow: @shadows;
}

@center {
 display: -moz-box;
 display: -webkit-box;
 display: box;
 @box-orient;
 @box-pack;
 @box-align;
}

@columns {
 display: -moz-box;
 display: -webkit-box;
 display: box;
 @fill(@fill:1) {
 box-flex: @fill; // Accepts either 0 to be as is or an integer to fill the entire area of parent box
 -moz-box-flex: @fill;
 -webkit-box-flex: @fill;
 }
}

 // This is the test/default styles
@defaults {
 @dimension;
 @bg-color;
 @center;
}

@dimension(@width:100px; @height:100px) {
 width: @width;
 height: @height;
}

@resize(@direction:both) {
 resize: @direction; // Value can be both, horizontal, vertical, or none
 -moz-resize: @direction;
 -webkit-resize: @direction;
}

@rotate(@rotateX:rotateX(0deg);@rotateY:rotateY(0deg);@rotateZ:rotateZ(0deg)) {
 transform: @rotateX @rotateY @rotateZ;
 -webkit-transform: @rotateX @rotateY @rotateZ;
 -moz-transform: @rotateX @rotateY @rotateZ;
}

@text-outline(@outterColor:black;@innerColor:white) {
 text-shadow: 0 1px 0 @outterColor, 0 -1px 0 @outterColor, 1px 0 0 @outterColor, -1px 0 0 @outterColor;
 color: @innerColor
}

@text-overflow{
 .on(@type:ellipsis;@width:500px) {
 text-overflow: @type; // text-overflow accepts two values: ellipsis, and clip which didn't seem to work in Chrome
 -o-text-overflow: @type;
 width: @width;
 overflow:hidden;
 white-space:nowrap;
 }
 .off {
 white-space: normal;
 width:100%;
 }
}

@text-shadow(@x:1px;@y:1px;@blur:3px;@color:blue) {
 text-shadow: @x @y @blur @color;
}

@text-stroke(@length:3px;@outterColor:black;@innerColor:white) {
 -webkit-text-stroke: @length @outterColor;
 color: @innerColor;
}

@transition(@property:padding;@duration:0.4s;@easing:ease-in) {
 -webkit-transition: @property @duration @easing;
 -moz-transition: @property @duration @easing;
 -o-transition: @property @duration @easing;
 transition: @property @duration @easing;
}

Some of the above code is commented to give you more information about the acceptable values. One of the code blocks, @defaults, provides you the basic layout for an element. It allows you to add other CSS properties to enhance its layout. As the comment stated, it also provides you with a test layout to test an element.

You also can use the above code as a reference to CSS3 since some people think that CSS3 is harder and more complex than CSS2

You probably noticed that there aren’t multiple background images and @font-face, that’s because I can’t figure out how to integrate them with LessPHP yet.

Do you have any problem using the above stylesheet? Leave a comment below and I will respond to you quickly.

Write CSS3 with Understandable Variables with LessPHP – Part 1

LessPHP

LessPHP is the PHP version of LessCSS, a CSS stylesheet language which is relied on Node.js web server. All LessPHP need is the PHP server.

In this part I walked you through the installation of LessPHP compiler and general folder structure for a one-page web app using LessPHP. In the next part, I will give you some CSS3 properties with parameters which have easy to understand variables.

The installation of LessPHP is easier than you think. After you download its source from GitHub, the only step is to copy lessc.inc.php into your web app folder and included in the page. Here is the basic structure for the folder:

Folder structure for the one-page web app

Folder structure for the one-page web app

Below is the explanation for each file and folder from top to bottom:

web app is the root of the web app.

styles contains lessPHP files and compiled CSS stylesheets.

less contains lessPHP compiler and less source.

main.less relates to main.css which I discussed below. It contains the styles information that will output to main.css.

var.less contains the lessPHP variable definitions which is imported to main.less using @import.

index.php in the styles folder is used to compile the less source to CSS stylesheet. It contains the following code:

<?php
// Convert LESS to CSS styles
include_once 'less/lessc.inc.php';
try { lessc::ccompile('styles/less/main.less', 'styles/main.css'); }
catch (exception $ex) { exit($ex->getMessage()); }
?>

main.css is the compiled stylesheet.

index.php contains the code of your web app but first you need to include the index.php from the styles folder:


<?php
include_once 'styles/index.php'; // Include the LessPHP compiler in the beginning of this file
?>

The above is general folder structure of mine for one-page web app. If you need to create a multi-page web app, you can create a include folder and include the lessPHP compiler to header.php or somewhere similar.

When you edit the stylesheet, you need to only edit the .less files and it will re-generate main.css file once the page is loaded.

In the next part, I will provide you the content of var.less which mentioned above that includes some CSS3 properties for your reference or you can use it as a template.

If you have any question about this part, post them in the comment below.