Category: Web Development

Categories
Blog Mobile App Development Web Development

Tips for debugging Android Apps with Cordova

I’ve been working with PhoneGap/Cordova and Meteor JS lately to develop an e-commerce site/app hybrid. Here are some tips I’ve discovered about testing on Android

  1. You need as many variation of Android devices as possible. Right now looking at the current market, I would recommend at least one of each for Android 4, 5 and 6 (Ice Cream sandwich, Jelly Bean and Kit Kat) Tablets are fine, but best to use actual phones to check out for screen size issues (specially when it comes to scrolling)
  2. Check if the phone is plugged in on both side by checking if it is charging
  3. Command for loading Meteor JS + Cordova app on Android devices is: 
    $ Meteor run android-device
  4. Don’t forget to connect to database before running Meteor (MONGO_URL=mongodb://yourdb.com:2222) or include settings (–settings settings.json)
  5. Even if you have no use for it, you should still install Android File Transfer on your computer, it will instantly tell you if your device is plugged in and if the cable is still functioning correctly!
  6. Bear in mind, there is no chrome device inspector for devices running Android 4 “Ice Cream sandwich” or lower. For CSS issues, making a lot of colourful borders to help you see what’s going on.

 

Categories
Blog Web Development

Making Google Maps iFrame Responsive

I’ve been design a lot of websites for sport studio lately, and they often need google maps which uses iframes which by default only comes in 3 sizes: small @400px X 300px, medium @600px X 450px and large @800px X 600px. Which is great if you know the EXACT size of the end user’s screen size, since that’s not possible, we need to make them responsive with the little tiny bit of HTML and CSS

ORIGINAL
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d59067.01774355863!2d113.92182782515583!3d22.289782504003966!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sairport+near+Hong+Kong!5e0!3m2!1sen!2s!4v1425565266119" width="800" height="600" frameborder="0" style="border:0"></iframe>
NEW HTML
<div class="responsive-map"> 
<iframe src="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d59067.01774355863!2d113.92182782515583!3d22.289782504003966!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1sairport+near+Hong+Kong!5e0!3m2!1sen!2s!4v1425565266119" width="800" height="600" frameborder="0" style="border:0">
</iframe>
</div>
NEW CSS
<style>
 .responsive-map {
 position: relative;
 padding-bottom: 75%; // This is the aspect ratio
 height: 0;
 overflow: hidden;
 }
 .responsive-map iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100% !important;
 height: 100% !important;
 }
</style>

The Result

 
Thank you for this handy script from Digital Inspiration

Categories
Blog Web Development Wordpress

WordPress the_excerpt() not working with Chinese Text

WordPress’ excerpt is pretty useful, if the article doesn’t have predefined text as excerpt, it would  automatically create one using the first 55 words from your post to make one for you.
If the original text is:

The path of the righteous man is beset on all sides by the inequities of the selfish and the tyranny of evil men. Blessed is he, who in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother’s keeper and the finder of lost children. And I will strike down upon thee with great vengeance and furious anger those who would attempt to poison and destroy my brothers. And you will know my name is the Lord when I lay my vengeance upon thee.

The generated excerpt would become:

The path of the righteous man is beset on all sides by the inequities of the selfish and the tyranny of evil men. Blessed is he, who in the name of charity and good will, shepherds the weak through the valley of darkness, for he is truly his brother’s keeper and the finder of… Read More

It’s great when you’re lazy like me, but what’s not so great is IT DOESN’T work with Chinese text, because it uses the spaces in your sentence to define words, since Chinese text doesn’t use spaces like that, it doesn’t work. The only solution I’ve found is to use the following instead of “the_excerpt();”

<?php
 $content = get_the_excerpt();
 $trimmed_content = mb_substr($content, 0, 54)."<a href=". get_permalink() ."> ...Read More</a>";
 echo $trimmed_content;
 ?>

This works by first retrieving the original excerpt, using the mb_substr PHP function to get the first 55 characters from the excerpt and link it with “…Read More”. If you would like a longer excerpt, simply change 54 (In programming, you start counting from zero) to your desired number.
The main flaw to this function is that if you mix chinese and english articles it won’t be able to tell the difference and end up only giving you the first 55 characters. So that will become

The path of the righteous man is beset on all sides by… Read More

If you have a better way to tackle this, please do share it with the rest of us.
Credits to this Stack Exchange post and yes that is a quote from Pulp Fiction 🙂

Categories
Blog Startups Web Development Wordpress

My Startup Project: Getfit.hk

Several months ago, I had the idea of developing Getfit.hk, a website that promotes sports and fitness as well as provide a comprehensive listing of all Sports clubs, Yoga studios, Martial Dojos and Training Gyms available in Hong Kong. I wanted to build this website because I’ve been wanting to work on my own project for sometime now and I do firmly believe it is a genuine solution for individuals looking to be healthier but are struggling to make it happen, my leap of faith presumption is if people find an activity they enjoy, they would actually stick with it.

I love feeling good and hate getting headaches

The title might be true for many people, but how many are willing to do something about it. There’s always too much work, not enough tired, too tired, a good show is on TV, have to waste time on the internet and play that game on my phone. I personally love that feeling of pure bliss after a good training session or a fun game of badminton, I would rather have that then to give my any of the excuse above. I’m hoping others will feel the same way with the help of useful and interesting health related information through the Getfit.hk platform.

Will it work?

Frankly, i have no idea if this idea would work or not, but i am going to give it a good shot. First month alone after the soft launch, I had over 500 unique visitors, which I think is a pretty good for zero marketing .

Phase 1: the ugly baby I love

I would openly admit, the current version of getfit.hk is built using a premium wordpress theme as base and was heavily customised to fit my needs. It’s pretty darn ugly, doesn’t exact “sell” and has performance issues, but at least it’s out there, as said many times “Better done than perfect”, this is an MVP to test reaction and I think so far it’s relatively positive, enough to convince me to move forward with it.
Big Thanks to my friend Kenny Li for making me push this out.
getfit-screenshot

What’s next?

I’m currently trying to apply for some funding for the project, with or without funding, I am determined to make it happen.  Moving forward my aims are

  1. Develop high quality contents (Text articles and Infographics)
  2. Expand listing for gyms
  3. Get gyms to sign up for premium plans
  4. Redesign the site (Really want to do this NOW, but content is King, so most work on that first)

What do you think?

So what do you think about Getfit.hk so far? I would love to hear your thoughts using the form below.

Categories
Blog Web Development

An over simplified web developer's guide to hacking through InDesign

First of all, please know I am an absolute beginner when it comes to Adobe InDesign, the following notes are various similarities I’ve noticed between HTML/CSS & InDesign whilst learning to put together my first book.  This is by no means a step by step walk through either, for that I would highly recommend this article. There is also a very good chance I could be wrong in any number of ways. If you spot any mistakes, I would extremely appreciate it if you could leave a comment below.

The Notes

As far as I am aware, there’s no code based interface to InDesign. Instead to manipulate elements, you will have to rely on the  paragraph or character style panels under the WINDOW menu button.
indesign-window
 
To apply a style to a text object, first select the text box, then simply click on a paragraph style. That’s like adding a CSS class to the text. Class or ID is similar to Paragraph Styles, once that’s been applied any changes you make to that paragraph style (by right click – Edit Style) will be applied through out to other objects.
Inline styling is  similar to selecting text and making edits. If the style exists in more than one place, try not to do this. Like CSS inline styling, mixing content HTML code with styling CSS code is often frown upon. The table below shows a few common attributes for CSS, and what they are known as in InDesign (why can’t they all use the same terminologies is beyond me!)

CSS InDesign equivalent
Padding-Left Indent and Spacing/Left-Indent
Padding-Right Indent and Spacing/Right-Indent
Margin-Top Indent and Spacing/Space Before
Margin-Bottom Indent and Spacing/Space After
Line Height Leading
Letter Spacing Tracking

Here’s a much more extensive list of parameters for indesign and a handy cheat sheet from 99Designs

Categories
Blog Tools & Services Web Development

The very exciting CrazyEgg for understanding your website

I’ve known about the in-page analytics and visualisation tool CrazyEgg for a fair sometime now, but it wasn’t until very recently did I realise just how interesting and useful it can be!
It all started when AppSumo offered a FREE lifetime use of CrazyEgg for any one web page. Being extremely cheap and curious I  decide to give it a go, I wasn’t even sure where I would use it to begin with. I ended up installing it on the front page of this very website and after just a few days I was like WOW! All along I thought Google Analytics was all I need to understand what works on my site and boy was I wrong! Google GA is a fantastic tool in itself, allowing me to see if people are coming to my site and what they like to read (WordPress Calendar & Trello). What I didn’t really realise was exactly HOW visitors were using my page. Where they like to click and what they try to click on!
One great example was I originally had my name “Chi Wai Li” highlighted on the home page and it turns out people were clicking on it thinking it’s a link. I’ve since change that to save the confusion but I’m very curious what they would think it would link to? Perhaps my bio or even my twitter? But isn’t that what the top nav and icons to the top right are for? As a website designer, it’s really fascinating to see how users interact with my websites.
It also got me thinking about how I should structure my site. Originally I created this was website as my portfolio, to help me find a full time or freelance work. Since I don’t really need to do that anymore, I’ve made some minor updates to shift the focus into my writing. With over 1000 unique visitors a month I’m pretty proud on this site and hopefully with the help of CrazyEgg I can do a even better job. I am actually rather excited with seeing this data!
It really goes without say that I am very strongly recommending CrazyEgg, it really is a fantastic tool to help you optimisation user experience for your website.
Scrollmap for www.shapes.io

Categories
Blog Tools & Services Web Development Wordpress

Appointments and Meetings management with WordPress

After my previous post on WordPress Booking Systems I am once again on the look out for a suitable plugin to help me manage appointments and meeting’s for a client.
The WP Booking Calendar plugins I reviewed before was very good at the job but not wanting to settle for what I already know, I went hunting for something more comprehensive. And that’s when I came across WPMU’s Appointments plugin, now it’s NOT FREE. But it is pretty powerful and flexible, aside from the usual ability to allow clients to make bookings and pay, two key function I just love is its ability to sync with Google Calendar and send user email reminders! How cool is that? So in a way it’s more than just a appointment management system but also a personal assistant which I think it’s pretty darn cool.

WPMU Appointmentswpmu-appointment-booking2


Another plugin I looked at is the JS-Appointment Calendar (No longer available) from CodeCanon, again it’s paid at $25 USD at the time of writing, so not the cheapest but it does look like it could be perfect. However, since I already have membership with WPMU, I will test out WPMU’s Appointments first. But good one to check if you are interested.
js-appintment
Let me know if you have any questions on any of these appointments and meetings WordPress plugins. Better yet, if you know of similar tools I should look into, please comment below!
*In case anyone is wondering what that image I used for my featured image is, it’s actually an cropped area of an traditional Chinese daily calendar.
 

Categories
Blog Web Development

How to style a 'Choose File' Upload button

For some silly reason standard css wouldn’t allow the file upload button to be styled. Naturally the very smart people have found ways around this. Although there are various method, I like this simple one the most.

The HTML

<div id="file" class="btn">Upload Photo</div>
<input type="file" name="file" />

The CSS

#file {
    display:none;
}​

The Javascript

var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
var fileInput = $(':file').wrap(wrapper);
fileInput.change(function(){
    $this = $(this);
    $('#file').text("File attached");
})
$('#file').click(function(){
    fileInput.click();
}).show();

From the very intelligent folks at Stack Overflow

Variation 1: Image button

If you would like to use an image button instead, simple add your image code instead of “Upload Photo” like this:

The HTML

<div id="file"><img src="/images/button-image.jpg"></div>
<input type="file" name="file" />

Variation 2: File name

If you would like to use the file name instead of the text “File attached”, you could try the following Javascript, courtesy of the brainy folks of StackOverflow, the only code that is highlighted:

The Javascript

 var wrapper = $('<div/>').css({height:0,width:0,'overflow':'hidden'});
 var fileInput = $(':file').wrap(wrapper);
 fileInput.change(function(){
    $this = $(this).val().replace(/C:\fakepath\/i, '');
    $('#file').text($this);
 })
 $('#file').click(function(){
    fileInput.click();
 }).show();

 
 

Categories
Blog Web Development Wordpress

Reminder for creating custom WordPress sidebars

This is one I keep on forgetting and have to Google on numerous occasions, so I’m adding it to my blog as a reminder.  I like to refer to the Sidebar in WordPress blog by Justin Tadlock, it’s old, written in 2010, but as far as I can see it still work.
There’s 3 parts to creating a custom Sidebar:

  1. Creating the Sidebar PHP file
  2. Registering the Sidebar in functions.php
  3. Adding the sidebar in the page template

1.Creating the Sidebar PHP file

Assuming you want to create a new sidebar called “Special” Duplicate the sidebar.php from your theme and rename it to sidebar-special.php

2.Registering the Sidebar in functions.php

Open the theme’s function.php file and search for my_register_sidebars it should look similar to the following:

<?php
add_action( 'widgets_init', 'my_register_sidebars' );
function my_register_sidebars() {
	/* Register the 'primary' sidebar. */
	register_sidebar(
		array(
			'id' => 'primary',
			'name' => __( 'Primary' ),
			'description' => __( 'A short description of the sidebar.' ),
			'before_widget' => '<div id="%1$s" class="widget %2$s">',
			'after_widget' => '</div>',
			'before_title' => '<h3 class="widget-title">',
			'after_title' => '</h3>'
		)
	);
	/* Repeat register_sidebar() code for additional sidebars. */
}
?>

Paste the following lines after /* Repeat register_sidebar() code for additional sidebars. */


	array(
		'id' => 'special',
		'name' => __( 'Special' ),
		'description' => __( 'My custom made special sidebar.' ),
		'before_widget' => '<div id="%1$s" class="widget %2$s">',
		'after_widget' => '</div>',
		'before_title' => '<h3 class="widget-title">',
		'after_title' => '</h3>'
	)

3.Adding the sidebar in the page template

In your custom page template, replace get_sidebar(); with get_sidebar('special')
And that should do the trick, But remember to add items in your widgets page.

Categories
Blog Misc Web Development

E-bay vs E-commerce Site which is more suitable

If you would like to set up an online store, should you use eBay or should you set up an standalone e-commerce website? We compare the Pro’s and Con’s for each below.
ebay Advantages. 

  • E-bay is well known
  • It is a pre-designed platform, very cheap to start
  • User already understand how it works
  • There are already a lot of users
  • Advertising on ebay is relatively cheap
  • Faster to set up

 
ebay Disadvantages:

  • Your product will be listed right next to your competitions, unless you know of have an unique selling point your potential customers will definitely go for, you might be putting your self in a bad situation
  • You become dependent on buyer rating system. If one user leave a negative comment, it could ruin greatly damage the e-bay shop
  • E-bay popularity is going down
  • Expensive on the long run, as you will be paying eBay for each listing and for each sale
  • Not suitable for products with a slim margin
  • Would you target audience go to ebay to look for packaging materials? I personally only ever used it for books and camera lens
  • Limited customisation
  • You have to track down payment on each sales
E-commerce site advantages
  • Freedom to design the site how you best see fit
  • A standalone site will appear more professional and trustworthy (Anyone can set up an ebay store)
  • Expected monthly operation cost
  • Positive brand connection/loyalty
  • Less competition once the customers are on your site
  • Allow for user interaction tracking, for understanding how customers arrive at your site and how they use the site
E-commerce site disadvantages
  • A lot more effort need to be placed on marketing to ensure potential customers can see it
  • More expensive to set up
  • Takes more time to set up
  • Marketing cost

To conclude

If you have the budget and time, I would suggest e-commerce site. If you would like to get things of the ground quickly with a smaller budget, perhaps e-bay is more suitable, but this will only work if you know you can beat your competitions.