Day 1: Starting a blog about the development of Project Butterfly

Decided to do this to track my progress and look back after releasing this project to the public. Might be able to learn quite a bit and of course, review the process and proceed from there.

Realized I borrowed a PHP / SQL book that doesn’t really cover the entire process so went to library to get another 2. 3 books that are thicker than a dictionary and only a month of development. Project Rich is looking like ‘mission impossible’ but I’m loving the challenge.

Basically, the entire motivation for me is to clear out the old me and finally step into a phase. Hence the project name is Butterfly. Its going to be beautiful when I’m done. For now, done with chapter one of Info Archi and User Centered Design. The official docs are also gonna be really important for the pitch. Can’t wait to start typing codes or document to get that sense of progress~

Block Facebook Game Requests NOW!

Alright, all of us have friends on Facebook (if you don’t, I wonder what you use it for?) and we use it to catch up with one another or simply just to play some social games on it.

Although I love playing games but, I’m more of a PC / Console gamer (aka serious gamer) while others are into Social Network games. No problem with whichever side you are on…but…WHEN YOUR F*EAKING GAME KEEPS SENDING REQUESTS TO ME…that is CROSSING THE LINE!

And hence, this tutorial is born. If you are as fed up and annoyed as me…enjoy~

Step 1: Click on the request in your Notifications.

 

Step 2: Click on the App name as indicated…App Centre is fine too.

 

Step 3: Look at the bottom right of the page, its where they don’t want you to find it! Click ‘Block’

 

Last Step: Just click ‘Okay’ and you’re done! No more Game Requests from that game from any friends!

 

Alright! So I forgot to mosaic my name and email address from the photos, but I guess you are just too happy to stop all those spams and will forget about harassing me on the internet…or am I wrong?

BuyInCase Logo Re-Design

For those who are friends with me on Facebook would know that not-so-long ago, my buddy and I started an online store, BuyInCase.

talk about literal thinking for the initial logo design…sigh…failure on my part

and then we made some sales but not the volume we had originally imagined it to be. So my buddy then decided to open a physical shop instead but still adopt the same name. Long story short, the same shop is now only under his business partner and his care and me, I’m just a temporary staff taking care of his shop till he returns in July.

Nevertheless, this meant I can now charge him for any design jobs or web development projects…ha ha ha ha ha

Well then one of the jobs I received was to change his corporate logo. Truth be told, he did one concept on his own again and the results were like

well, you get the point.

And so he couldn’t take his own logo rendition no more and decided to hire someone professional to do it, he got me! Well, professional might not be the best word to describe but I do designs for a living…qualified?

Like any “good” clients out there who wants to be involved in the creative process, he showed me some examples he got off the net and told me to do my thang~

And to some miracle lateral thinking…this was what I achieved…

Looked like an icon but NO…its not! 

Inspiration was that it is supposed to take the shape of a MicroSIM card (thank Apple for that) and with the B,I and C alphabets as elements to form the letter B. Simple to implement for future branding purpose, especially for embroidery and embossing but yet has this gradient complicated version for full color printing.

Hope you like it as much as I do…

Designing Name Cards at 3.30am

16 years of friendship gets you perks like…getting your design savvy friend (me) to make a printable version of your concept for you FREE! Hahaha…I’m not complaining because its a for a dear friend of mine but my perfectionist side is making it harder for me to complete it soon.

The world is sleeping and I am just trying to be a better friend. Psst…Santa you watching this?

 

 

Update: For those who wonder how my dear friend’s concept originally came to me as…

and so I made it into…

 

How’s it? I wouldn’t say its the best but at least it looks decent enough to be on display. Psst…it was referenced off a free name card template on the net…I’m not taking credit for any of this.

Until next time!

Ended My Polytechnic Life with a Blast!

Yes, you didn’t read it wrongly. Three years of enduring my parents’ persistent question, “When are you going to graduate?” has come to an end (that is, if you do not mark it with the graduation ceremony).

I’ve learnt a lot throughout these 3 years and really enjoyed the journey. Weird thing was that it was not really what I learnt in the classroom that gave me this sense of satisfaction, but rather the friends I made and the self learnt subjects in my bedroom. No doubt the lecturers were still the main source of inspiration, like Mr Oran, Mr Seow, Mr Melvin, Mr Eric, Mr Lawrence, Ms Christina, Mr Wee Lian and yes, Mr Agus (he got me to carry a sketchbook wherever I went). All these people really made me behave like a Creative Professional and I’m pretty sure I will join the community of creativity real soon.

Most poly students go on to perform industrial attachment at renown companies but most of my course mates stayed to do a project for an entire year. Depending on how you see it, its either a really good time to slack (because no one was constantly supervising you) or to really make an impact for your portfolio. My group went with the latter.

When we started out, we knew what we wanted, to make a game. Thats where our passion were heading towards when Oran told us that we get to make a game back in year one. So we formed a group but sadly, the entire clique didn’t manage to stay together but we got 5 of 7 in it. Challenges were abound as we were trained in Interactive Media and only taught to build and script in UDK. Next we had to deal with interpersonal relationships within the team, even the best of friends might crack under the work = credit system. However, a year passed and we heeded Oran’s advice well, “lock down your main gameplay and stick to it no matter what!”

Cutting the long story short, we did have a rather decent game as rookies in this discipline. Couple our great demo with a well prepared presentation and *BOOM!* we got really good reviews from the judging panel. This nearly brought tears into my eyes as our one year of hard work finally paid off. What’s more, we were offered the opportunity to enterprise our game and creating a studio with the people I love to work with is becoming a reality. No doubt that the better route would be to let each member gain more experience in the industry but all great people start off in an orthodox fashion don’t they? (Just look at the number of famous college dropouts in the IT industry)

Come tomorrow, we’ll decide the fate of this idea…either way, I can only smell good things coming our way. I’ll update with the outcome and don’t worry…I’ll be blogging more often with my commissioned work as a freelance developer and designer.

Let me end this blog post with the awesome people of Outsiders Allowed with our supervisor, Mr Melvin Tan.

Naughty or Nice?

We are in December and with that, we’ll be concluding the year 2011. This is also the same time we’ll be judge upon by our Dear Mr Claus.

I’m all grown up and so of course I know Santas all over the world are just lovely fathers putting on a costume to give their children something to believe in. Doesn’t help much for me when I’m a Singaporean Chinese as our dads don’t go to that length due to pride and we got no chimneys.

And so, based on the recent events that happened to me (breaking up, not paid promptly, loss of direction for my startups), the results are obvious…I’m naughty.

Of course there are happy events in my life (upgrading my HDD, scoring some As, going to NZ and Korea), but in comparison to those bad ones. I have to conclude that the bad events made a bigger impact on my life.

Breaking up is probably the worse. Besides taking it quite bad, like watering my face for 5 days straight, it really felt like a final blow to my love life. So its always like I describe, its more like a divorce. But because of my breaking up, I’m able to choose the University and study for as long as I can afford!

Scoring well in my Final Year Project is my top priority now…lets nail that A, Outsiders Allowed! (Yes, that’s our developer studio name…haha)

ITE != Its The End

ITE in Singapore stands for the Institute of Technical Education. However, what it signifies to most Singaporeans is that its a dump for those who didn’t make it in Secondary Education (aka High School in some parts of the world).

That’s where I graduated from. Back in 99′ I was sitting for my Cambridge Ordinary Levels Examination. I took the meaning more literal than my peers by just sitting down like any ordinary day and only picked up the pen to fill in my name. Not a single f*ck was given that day. (pardon the vulgarity but couldn’t find a better word to describe what I felt)

When the result was released, I realised the gravity of my mistake. No school was going to take me in and the only option written on my slip was ‘ITE-Certificate in Office Skills’. I was jealous and angry.

This however was a turning point in my life, I started scoring my first A there and it became addictive. I was mixing with the right crew (what people called geeks) and even group work was a breeze. I soon myself graduating from this short 1 year course with several awards and scholarships and eligible for advancement.

I would then go on to pursue a Higher NITEC in E-Commerce and this gave me my first knowledge of web programming and my first specialty. 2 years later, I graduated with more awards and even eligible for advancement into Polytechnics. I was on fire!

Now I am in Polytechnic studying what I love, programming, drawing and design. How many people wished they were doing what they love right?  I will be graduating soon and all I can say is that my grades are eligible for University…every single one available to me, even the firewalled local ones.

Not just that, I’m earning extra allowances through Web Development (what I learnt in ITE) and enjoying every moment of it. Compared to my classmates who are working as Servers or Retail Assistants and earning nuts for crazy hours of standing.

I’m not showing off or being arrogant but I want to share my story out there that landing up in ITE is not the worst thing to happen to you. It could be start of all good things to come, like me.

ITE graduates are not intellectually handicapped, they are brilliant people who were lazy or led astray. Work hard my fellow juniors, prove Singapore wrong.

What Drives You?

In your lifetime, I’m pretty sure you’ve met someone and thought to yourself, “I will never want to be him/her…NEVER!” Be it someone close or just some random jerk abusing his girlfriend in public, there is that SOMEONE.

For me, there’s quite a handful that made me the man I am today.

Firstly, my parents. I come from a broken family and so I never want to be like them and make my children go through the kind of life I’ve been through. I’m not saying they are bad parents but it just doesn’t feel good being a human soccerball.

Next, my elder cousin living with me. He’s not a really bad guy but his sense of responsibility towards family and finance is not one to look up to. I don’t want to hang my dirty laundry in public and so lets leave it at that.

Then there are the ‘sleeping’ people on public transport not giving seats to needy people like the elderly and pregnant ladies. And those that drive after drinking who ram innocent people in their moment of folly.

There so many more and you may think they are on my hate list, but nope. These are just people I don’t want to become, not hate. So me pursuing a higher education and doing my best in everything are all credited to these ‘someones’. This is my drive.

So…what drives you to become the person you are today?

Tutorial: Joomla Extended Menu Implementation

A preview of what we are going to make (minus the grey background below as this is a screen shot from my site).

First of all, go download Extended Menu from Joomla’s Extension section and install it into your system. I hope you already know how to do this but if not, I’m sure there are loads of tutorials out there.

Next, go to Modules and click on the name to go into its settings. Go ahead and set it according to the ones I have.

3 important settings to note:
1. Choose the menu that you want Extended Menu to be applied on in the Menu Name.
2. Choose Tree List from Menu Style.
3. Make the menu expand till what you need but I would think 3 is the max for most of us.

Please note that you do have to leave the Menu Class Suffix and Module Class Suffix as blank so the CSS that I’m going to show you will work as I’m applying the styling to its default. Don’t worry, only the menu will be affected and not all the other links.

Copy and paste this wonderful chuck of code I modified from a CSS Dropdown Menu Tutorial by Harry Roberts into the CSS from your template. Go to Extensions > Template Manager > *Choose Template* > Edit CSS.

#mainlevel{
	list-style:none;
	/* Clear floats */
	float:left;
	width:800px;
        margin:0px;
        padding:0px 0px 0px 10px;
        margin-top:2px;
	/* Bring the nav above everything else--uncomment if needed.*/
	position:relative;
	z-index:5;	
}
#mainlevel li{
	float:left;
	margin-right:30px;
	position:relative;
}
#mainlevel a{
	display:block;
	padding:5px;
	color:#900;
	text-decoration:none;
}
#mainlevel a:hover{
	color:#FFF;
	background:#900;
	text-decoration:none;
}

#mainlevel ul{
	background:#fff; /* Adding a background makes the dropdown work properly in IE7+. Make this as close to your page's background as possible (i.e. white page == white background). */
	background:rgba(255,255,255,0); /* But! Let's make the background fully transparent where we can, we don't actually want to see it if we can help it... */
	list-style:none;
	position:absolute;
	margin:0px;
	padding:0px;
	left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
}
#mainlevel ul li{
	padding-top:0px; /* Introducing a padding between the li and the a give the illusion spaced items */
	float:none;
}
#mainlevel ul a{
	white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
}
#mainlevel li:hover ul{ /* Display the dropdown on hover */
	left:0; /* Bring back on-screen when needed */
}
#mainlevel li:hover a{ /* These create persistent hover states, meaning the top-most link stays 'hovered' even when your cursor has moved down the list. */
	background:#900;
	color:#FFF;
	text-decoration:none;
}
#mainlevel li:hover ul a{ /* The persistent hover state does however create a global style for links even before they're hovered. Here we undo these effects. */
	text-decoration:none;
}
#mainlevel li:hover ul li a:hover{ /* Here we define the most explicit hover states--what happens when you hover each individual link. */
	color:#CCC;
	background:#790101;
}

I apologize for the poor styling of the code but I think its easier for you to browse than having the text wrapped within the block quote.
So if you have some basic knowledge of CSS, please go ahead and change them to your liking. If not, please do look for the Background: attribute to change the background color. Color: attribute in order to change the text color. If there is any other tweaking you want to achieve and don’t know how, please leave a comment so either myself or some wise developer can help you out.

Story: I was thinking of implementing a Dropdown Menu for my latest Joomla project and at first I thought it would be already in the default modules but I was wrong. So went on to search for some extensions that would make my life easier and after some recommendations, Extended Menu seems to be the winner.

Extended Menu is a no frills extension that uses pure HTML and CSS to allow developers to create a full (or more) W3C compliant site. Lazy me was thinking that a few switches will get me what I need and decided exploring. 15 minutes into my exploration and nothing worked! Was about to give up but went back to read the fine prints and noticed…”don’t use it if you are not sure what HTML/CSS is and you actually don’t care about web standards (accessibility etc.)”

This gives me a clue that I would most likely need to dwell into my own template’s file and do some tweaking. Wanted to see if any kind soul had any tutorial up and found one. Tried it but it seems to be for the previous versions and didn’t work. So that’s the reason for this tutorial and hope that it is of some help.

Tutorial: Installing Joomla 1.5 into CPanel

This is another opportunity for me to share some knowledge from being locked in a room. So in the holidays I’ve been exploring Joomla! and of course, not all servers that you signed up for provides a link to install Joomla! like GoDaddy. So here we go!

Start by logging into your CPanel (normally its http://www.myweb.com:2082 or whatever link that your host provides). This should be idiot proof and I don’t think a screenshot is required right?

Then scroll down to the Databases tab and click on MYSQL Databases.

Which will lead you to this next page.

We will need to create a new Database for Joomla! to store all its information. So as you can see, I’m working on my project, Retail Menu so the system added a ‘retailme_’ in front. In order to let me remember this is a database for Joomla! I simply  name it as ‘retailme_joomla’.Click on Create Database to continue onto your first success and then click ‘Go Back‘.

Next we’ll create a User for Joomla! to communicate with the database as shown (its on the same page as the one you created the database from)

Just choose any user name and password that you want and remember to write it down. We’ll need it later during the installation of Joomla! Do note that the system put a prefix of ‘retailme_’ in front of your chosen user name. So my user name is actually ‘retailme_admin’. Go ahead and click on ‘Create User‘ and then return back to same page.

Now we have a database and a user, we need to link it up. In the same page, look for:

Simply choose the user that you created and the Joomla! database earlier from the dropdown boxes and click ‘Add‘. In the following page, empower this user to every privilege as shown.

Click on ‘Make Changes‘ and we are done with the prep work to install Joomla! into our host. Just to check, you will see the linkage at the end of the table as such:

Not too complicated right? Hang in there for we have completed half the journey.

Now go to http://www.joomla.org/download.html and download the 1.5.x version. You will notice that there is a later version of Joomla! at the top so why shouldn’t you download that instead? My point of view is that the extensions library for the 1.5 is well developed and most of the time, I don’t see myself having trouble with finding one that fits my needs. In due time, we’ll all move on to later versions, but for now, I’m stickin with it.

Download the full package and do not unzip it, its easier to upload just one file than many using CPanel. After the download is complete, go back to CPanel and look for File Manager under the Files tab.

A pop up menu will appear for you to choose which directory you wish to open.

You will want to choose the directory that web browsers will automatically point to for the home page (aka index page). In most cases of hosting, it will be in public_html. If you have the same screen as me, choose the Web Root and click Go.

Look for the Upload button on the top menu bar and click it

You will see the Upload screen as below. Click on Choose File and point it to the Joomla! zip package we have just downloaded.

The upload status is on the bottom right and when it says ‘Complete’ as follows, we’re good to go

Go back to the File Manager screen and you should see the the following:

Highlight the zip folder by clicking on it and then click on Extract at the top. A pop up window will appear and if you have followed my guide to a tee, you can let it point to web root. In my example, it will be ‘public_html’.

Click on Extract File(s) and in a blink of an eye, everything is done! Close the dialog window that shows you the files extracted and now you should see an entire collection of folders in your web root directory like this:

Alright! We’re done with CPanel and now to see what you’ve achieved. Go to your website’s address / URL like http://www.myweb.com. Nothing special in this.

TA DA!

You have successfully installed Joomla! Choose the language of your choice and click Next. Joomla! will conduct a check for you to see if you meet the requirements and provide some solutions if you do not meet them. Go ahead and follow their guide and then click Next.

Which will lead you to Joomla’s licence page. I know you don’t read it, neither do I. So just click Next and move on to the configurations.

Remember the username, password and database name I told you to make a note of? Now is a good time to make use of it and enter it as described. The Host Name usually is ‘localhost’ and with my small experiences with host, it usually is like that. If not, go to CPanel > Databases > PHPmyAdmin and look at the top. It will indicate the host name.

Next is the FTP Configuration screen. I don’t use that and prefer to use my own FTP client to go into the Joomla! files to fine tune the looks. If you want the function, just fill in with the necessary info and click Next.

The next Configuration page will allow you to update the necessary information for your own website. Have fun and give it a name, update your details as the Super Admin and if you wish, you can install the Sample Data available. I normally prefer to install the sample data to configure the look of the data before loading in my own. If you want to install the package, click on the button Install Sample Data.

Click Next and we are left with one last step!  Do not be afraid of this last screen shot I’m going to show you.

The last step you need to do is go back to CPanel and then to File Manager. I hope you remember where it is. Highlight the folder titled Installation and click on Delete as shown.

This is important as the files within the Installation folder will allow people to re-install Joomla! on your host and overwrite all the settings and data you have done.

Go back to Joomla! and click on the Site button on the right top, you should see this if you installed the sample data like I did.

To access the backend of Joomla!, just add ‘/administrator’ at the end of your URL like http://www.myweb.com/administrator. User name is Admin and the password will be what you set in the Joomla! configuration page.

Phew~ That’s quite a long one post I’m glad you made it this far. Hope this guide helped you and it definitely will serve as a good refresher for myself. Have fun with Joomla!