Fish Filosophy

How to set up another wordpress site locally

2014-07-04T17:47:00.003+10:00

Prerequisites:

Install Wordpress Locally on Mac using MAMP

Steps:

Create a new folder in the Document Root directory. e.g. /home/Users/john_smith/newsite

If you don't know where the Document Root directory is set to, check in MAMP -> Preferences -> Apache -> Document Root

Download and unzip the latest version of wordpress.zip.
Copy the contents of the wordpress directory to your new folder e.g.newsite
Open MAMP, then click on Start Servers.
Go to phpMyAdmin.
Create a new database via the Databases tab, go to Create Database
Navigate to localhost:8888/[new site name]
Create a configuration file as below.
Enter the database name you created in the previous step and use User Name/Password as root/root.
Click on Submit
Click on Run the Install
Enter the credentials for your website and click on Install WordPress

Evernote helps you remember everything and get organized effortlessly. Download Evernote.

Review of Wordpress A Year Later

2014-06-25T09:56:00.000+10:00

I wanted to write a blog relating to my experience with Wordpress a year after I began learning it. When I first started blogging, I just wanted something quick to set up. I overlooked Wordpress at the time because at first I thought it was one of these "free to try, then pay to use" kind of sites. During that time I was heavily involved in Google products such as the Google Web Toolkit (GWT) so making a decision to use Google's Blogger seemed like a no brainer.
I revisited Wordpress after searching freelance jobs. I saw that there were an abundance of postings for help on fixing or creating Wordpress sites. At first I was a bit reluctant to delve to learn yet another technology stack, but after a year of developing Wordpress sites I'm glad I changed my mind.
Here is a summary of my observations:

1. Wordpress is Popular

Whether you're a developer or blogger it pays to be with the most popular blogging platform. Why? Support. Apart from the excellent documentation found on www.wordpress.org, there are countless forums and sites that you can visit if you need help with a theme or you need a particular widget.

2. Wordpress is not just about blogging

Thanks to the countless number of plugins available to Wordpress, Wordpress sites can be made to become eCommerce sites, scheduling sites and sales campaign sites amongst other things. There are literally thousands of plugins available for Wordpress to give added functionality. For example for a recent client, I was asked to set up registration forms for courses that were available on their site. A quick search in the www.wordpress.org plugin directory led me to "Contact Form DB" and within minutes I was able to add this functionality to the site. (You can see that example here:http://thepeartree.com.sg/register-for-a-workshop/)

3. Wordpress is customisable

As long as you have a programming background, you can customise Wordpress to your heart's content. This can be done through child-themes and plugins. I set up a WooCommerce site for one client and they wanted a particular 'list' view for their composite products. To do this I had to modify the child theme and plugin (CSS3 and PHP) to achieve the desired result.
If you're not able to modify the theme or plugin yourself, you can post a request on a site like www.freelancer.com and there will be lots of Wordpress developers able to help.
Overall in terms of spiking new ideas or creating minimum viable products, I still prefer Google App Engine over Wordpress. Google just has more of that 'hacker/developer' feel, where as Wordpress is more commercial and formal. That commercial and formal feeling however has lead me to the majority of my paid work so in terms of financial success, I definitely think that all web developers should learn Wordpress.

How to add a custom font (OTF, TTF) to iDraw for MAC

2013-12-03T22:22:00.001+11:00

If you can't find a custom font in your iDraw for Mac here are some simple instructions on how to do it. In my example I was trying to download a google font Ubuntu.

Download and install Skyfonts http://www.fonts.com/web-fonts/google.
Once you install Skyfonts, access it via the top toolbar on your Mac.
Click on the Cloud Service to search for your font (in my case I chose Google Fonts).
Add the required font. (I chose Ubuntu regular).
In the main menu, select the font you just added, and click on "Reveal font in Finder".
Now copy the font file eg. Ubuntu regualr.ttf to your fonts directory \Library\Fonts\ directory.
The new font will now appear in iDraw.

How Learning Flask, Python and Google App Engine helped me make the website My3Pages.appspot.com

2013-08-26T23:09:00.002+10:00

Hi all. Over the past few months, I've been learning Python on Google App Engine. Why? Well after attending some of the Google App Engine Developer group presentations, I noticed that most of the presenters used Python in their examples.

Being a typical programmer I just wanted to be able to create my own website quickly and that's when one of my colleagues recommended using the Flask Python Framework. I have never looked back. It has excellent documentation and from what I hear its a whole lot easier to set up and learn then Django. I will eventually try to tackle Django in the future, but in the meantime, I'm really enjoying how easy Flask (and Python) make it easy to create websites. On top of this you can create Flask websites on Google's App Engine.

In the next few days, I'm going to be putting up some How To Guides on using Flask on Google App Engine. In the meantime, you can check out what I created in 3 weeks. It's still a work in progress, but I hope you can see how easy it is to create:

http://my3pages.appspot.com

For those interested, the code is available here:

https://bitbucket.org/vincentcaesar/my3pages

Sneak Peek of Agile User Story Application Using GWT and jsPlumb

2012-01-20T14:57:00.000+11:00

Well, its been a while, but I've finally got back in to the programming after the holiday festivities. I've got a new application up which helps create Agile User Stories on the fly. Check it out. It's at: http://infrasigner.appspot.com.

It may look like sticky notes and paper clips, but try linking up the sticky notes from left to right and you'll see that the Current Stories notepad gets updated. I'm still working on exporting and saving this data for this user, but in the mean time feel free to comment and give any feedback.

GWT Developer Plugin is now compatible with Firefox 8.0.1

2011-12-21T11:07:00.001+11:00

If you've been sitting on an older version of Firefox because the GWT Developer Plugin wasn't compatible, the great news is that its now fixed in version 8.0.1! Unfortunately latest versions of Google Chrome and Safari still have the issues as described in this post, but with the fix in the latest Firefox there's no reason why you'll need to use those other browsers until you get to production testing of your code. Happy GWT coding!

How to Connect GWT Widgets Using jsPlumb

2011-12-14T12:11:00.000+11:00

After a lot of tinkering around and research I finally got GWT and jsPlumb working. To skip the tutorial and jump straight to the demo go to: http://gwtjsplumb.appspot.com. Note, if you're using Internet Explorer 8 and below this won't work.

The actual demo may not look so exciting, but if you've been trying to get javascript libraries such as jQuery and jQueryUI to work with GWT you'll know what I'm talking about. I've always liked GWT for its widget library and its ability to create web applications without knowing any javascript; however some functions such as simple drag-and-drop and connecting widgets alluded me. I looked at the ease and power of jQuery and jsPlumb and thought why can't GWT do that.

Well you can have the best of both worlds thanks to JSNI. I've listed the high level steps below. (For details on the actual code that was written for this demo please go to: http://code.google.com/p/gwt-jsplumb/ or follow the links in the steps.)

Steps

Screenshot of the gwt/jsplumb demo

By the way if you're a coder (experienced or newbie) please check out our new site: http://www.codifyme.co.

GWT Drag and Drop

2011-12-10T23:23:00.001+11:00

I wasn't able to find any documentation on GWT's inherent drag and drop, but it is covered in this video. Skip to the 20:37 mark to see an example of how to use it.

How to Wrap jQueryUI in GWT to make GWT widgets draggable

2011-11-29T22:18:00.001+11:00

Following my previous post, I've been trying to get GWT and jQuery/jQueryUI to work together. I came across this blog How to Create a Simple jQuery Wrapper written by Matthew Edwards and after some tinkering I was able to get a make a GWT Label widget draggable using the jQueryUI draggable() function.

I've cut and pasted most of Matthew's instructions below and highlighted in red what I did to allow gwt-Labels to be draggable. I'm hoping I can apply the same logic to other javascript libraries and gwt widgets.

1. Reference the jQuery and jQueryUI libraries in your web page

2. Reference the GWT application in your web page

3. Create a JSNI method to call jQuery

// Using Selector
public static native void draggable(String selector) /*-{
$wnd.jQuery(selector).draggable();
}-*/;

4. Call the method from within GWT

// Using Selector

RootPanel.get(sectionTagID).add(new Label("draggable label");
draggable(".gwt-Label");

One thing to note is that "sectionTagID" must be the id of a <section> tag and not a <div> tag.
e.g.
<section id="id_of_section_tag"></section> will work,

I tried using an id of a div tag, but the RootPanel.element.add() function didn't even work. i.e. no GWT labels were added to my webpage. (Perhaps you can suggest a reason).

I will try and write a step-by-step when I get some more time and have played more with other javascript libraries and GWT widgets, but hopefully there's enough here to inspire you to try it out in the meantime.

jQueryUI vs GWT: Drag and Drop

2011-11-21T10:06:00.000+11:00

So you want to try and create an application that has simple drag and drop capabilities? My advice is if you're app relies heavily on drag and drop; and drawing connections between widgets - use jQueryUI.

GWT Drag and Drop
I started using GWT/GAE because I could host my application on Google's cloud for free. I wanted to create an application that utilises drag and drop for a web-based diagram drawing tool (something like lucidchart). I googled "GWT and drag and drop" and used the gwt-dnd library. It's a bit of a learning curve, but once you get the hang of what DropController and DragController it becomes pretty simple. If all you want to do is drag and drop then using the gwt-dnd library is a good option.

However if you want to do more complicated things like, drawing a line between two widgets then you might be better off using jQueryUI. There are gwt libraries such as gwt-connectors and gwt-links, but these don't offer the same user experience as jsPlumb which uses jQueryUI.

jQueryUI Drag and Drop
jQueryUI and its big brother jQuery are powerful JavaScript libraries that provide rich user interface experiences. jsPlumb was just one extended application of jQueryUI/jQuery, but there are many others. If you're familiar with CSS, then understanding jQuery and jQueryUI should be a breeze as it works off the same selectors that CSS does. For example to make all divs of class "widget" to be draggable, you could just write:

$(".widget").draggable();

Combining GWT and jQueryUI
Ideally if I could combine the gwt-widgets that I've already created in my app with the added functionality that jQueryUI can offer I'd be a happy chap. This is where I'm at now. So far I've been trialling JSNI, but am running in to difficulties because the gwt-widgets load after the jQueryUI runs rendering my jQueryUI code useless. Another avenue I'm going to be investigating is Google's Closure Lab. Either way I'll update the progress and post it on here. If you're writing Google Apps and trying to use your own custom JavaScript would love to hear from you too.

Lessons Learnt Using Objectify with Google App Engine's Bigtable

2011-09-20T11:26:00.000+10:00

1. Import the correct @Embedded library

If you are getting errors like "... is not a supported property type" when trying to save an entity, check that the your import line is:

import javax.persistence.Embedded
and not
import javax.jdo.annotations.Embedded.

(This is one of those things that took me 3 hours to debug before realising the suggested import Eclipse gave me was wrong).

2. Example of how to Register Your Classes Using a DAO
According to Objectify's Best Practices, you should be using a Data Access Object (DAO) to register your classes, however the example they give may be a bit limited.

David M. Chandler has an excellent example here which you can use.

I'm using RPC in my code so in your RpcServiceImpl.java so to add a new class to the datastore you can use code like the following:

@Override

public void addTemplate(Template template)

throws IllegalArgumentException {

ObjectifyDao<Template> objDao = new ObjectifyDao<Template>(Template.class);

objDao.put(template);

}

and substitute Template for the class that you have defined.

3. Think in Bigtable and not in Relational Database mode

This is a bit of a tricky one to explain (and more of a Bigtable lesson learnt), but basically the strength of BigTable is how it manages denormalized data. So instead of multiple tables to store information (RDBMS), Bigtable uses well ... one bigtable to store the information.

This affects how you define your classes, because Objectify doesn't have inner joins (select from table A values matching those of in table B). Instead data is retrieved and then filtered. You should review the Query Class information that Google provides when creating your classes for more information, but as long as you remember denormalised data you should find designing your classes pretty easy.

If you have any other lessons learnt from using Objectify, I'd be glad to hear from you.

CSS3 Pocket Guide

2011-09-12T19:40:00.000+10:00

Just thought I'd share a great book I've been using to learn CSS3. It's The CSS Pocket Guide (Peachpit Pocket Guide). If you already have some Web/HTML experience this is a good place to start as its straight to the point and you can learn quite quickly how to style your web page. After I read the chapter on the box-model I finally understood why my buttons weren't being aligned.

While there is loads of info for free on the internet, if you're like me, its good to get a paper version for easy referral. You can always supplement your knowledge with resources from the net if you want more in depth information.

GWT Developer Plugin not compatible for Firefox 6

2011-08-24T09:35:00.000+10:00

UPDATE: This issue is resolved in Firefox version 8.0.1.

If you just upgraded your Firefox to version 6, you'll realise that the GWT Developer Plugin no longer works. This kind of sucks if you're on a Mac, because your other options for browsers: Safari 5.1 (doesn't work) and Google Chrome (extremely slow) means you're basically stuffed. You can always try local mode (i.e. http://127.0.0.1:8888/), but it means you'll have to compile more often to see even the simplest CSS change.

If you're in this situation here's what you can do:
(Option 1) If you have time-machine on your Mac, revert back to the previous version of Firefox. (Mine is 5.0.1)
(Option 2) Download Firefox 3.6. Note that this means that some CSS3 features won't work (like rounded borders), but at least you'll have a web browser that is usable in GWT Developer Mode.

Google App Engine Frameworks: Twig vs Objectify

2011-07-06T19:32:00.000+10:00

What is Google App Engine?
If you're new to the whole Google App thing, you're probably wondering what Google App Engine (GAE) is. In newbie terms its Google's cloud computing offering. If you're about to create your own start up or have a pet project you want to begin on the cheap, Google offers a way of hosting your application for free (to a certain limit). Other companies to offer such services include Amazon (EC2) and Microsoft (Azure).

I started looking at Google App Engine first, because I was developing an application using Google's Web Toolkit (GWT). Originally I was going to use a NoSQL graph database at the backend, but then I ran in to problems when I wanted to host my application. The original reason why I didn't choose GAE was because of the complicated code that had to be used for the datastore and the somewhat steep learning curve Bigtable (Google's database system) seemed to be. You only need to look at the amount of documentation there is for Java Data Objects (JDO) and Java Persistence API (JPA) in the Google documentation to see why.

An easier way to understand use Google's datastore
Then I came across Twig, Objectify and Slim3 under Frameworks for Modelling and Persisting Data. These frameworks made it easier to understand how to use Google's datastore because of the more 'sql-like' commands of 'put', 'update', 'delete' etc. The only challenge now was to choose a framework.

Twig vs Objectify
Unfortunately I didn't find an article on comparing Slim3 to Twig and Objectify. I did however find this great interview on the lead developers of Objectify, Twig and SimpleDS (another datastore framework). The questions and style of the interview makes it very easy to understand the benefits and disadvantages of the different frameworks. If you want to skip all the talk, there is a summary of the feature sets on this link. My opinion is that if you're looking for quick way to create a spike for your application, use Objectify. Their documentation is good and the list of interfaces is small, making it easier to understand. If however you want more control over the datastore and richer feature set, choose Twig. Twig is the only one of the 3 frameworks that offer parallel asynchronous queries and support for polymorphism. At the end of the day choose what's appropriate for your purposes. The one thing that all the lead developers agreed on, is that whichever framework you choose, its going to be a whole lot easier than JDO/JPA.