Friday, December 26, 2008

My Skills for Hire!

Hello prospective customer!
[09/19/2014 update: I am no longer working in this sector, as I'm in medical school]

Allow me to tell you what I am capable of so far.

I am currently working at an online company where my work is about
coding in XHTML/CSS and Javascript/AJAX.

More technically, I have done various AJAX - based id, purchase code checking
mechanisms under both casual and financially sensitive setting (billing pages),
with JSP/PHP based backend engines driving the web applications.

I've also coded for MySpaces pages and am well fluent enough
to do a mirror-like transformation from PSD to HTML/CSS.

CakePHP is not my expertise, but as it is a MVC model I figure it's gonna
be similar to Ruby on Rails, which I have studied and dabbled a bit.

Languages / frameworks I am fluent in :

JSP/Struts/Tomcat (Java based web applications)
jQuery (easy but powerful Javascript library)
XHTML/CSS
Visual C# (windows applications dealing with EXCEL sheets, SQL DBs)
TSQL - SQL Server's language
PHP - raw coding, and Drupal installation/setting up


I hope we can work out a schedule of operations. As I am a full-time student,
I can only allot time when I am off from school, at my home.


Thanks and I look forward to doing business with you.

Friday, December 19, 2008

favicon ie7 problem

Her's the answer to make IE7 show favicons.
If you put any of these lines:
<link rel="icon" href="http://www.ogplanet.com/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://www.ogplanet.com/favicon.ico" type="image/x-icon">

THEY HAVE TO BE PUT BEFORE any <meta> and RIGHT AFTER <html>!!

Took me couple hours to find out. Thanks!

Tuesday, September 30, 2008

Ruby : The Study in Stock Investing

I started to get interested in Ruby. And while I was starting Ruby, I got this idea that I'll make
a program in Ruby that will automate stock investing! From retrieving stock suggestions from
a website to running calculations on it and feeding it to an investor site, the program would automate the whole process.

While coding away I read a book about stock investing and found out there's more to investing then what I had thought prematurely. I thought trading many times frequently would generate revenue, but it turns out the commission fees and tax alone are not small enough to create a good revenue.

To hell with reality! Why not just code first and then think of some ways to make the code useful!?
Yeah I thought so at first. I was 70% done, and my algorithm was actually working to some level,
but then it felt so futile. I have only around 6 months of CS related stuff to do and I wasn't going to make some purposeless code take my time.

But it's that I wrote so much code, and it works relatively to a certain level. Aside from a logical gap between what the code does and how it doesn't fulfill the goal I intended, the code does, in a higher level, is capable of facilitating data transfer between two sites, and even uses WATIR to mimic human interaction with the site.

I am therefore putting the code openly on this blog, in case anyone would find it useful.

Here is the code, as it is.. it's not been cleaned up. It's in its raw state.

To help understand the code, I've written a brief explanation of the logic behind the code,
written below and also as a .doc file:
==============================================================
Here goes:

Before reading the following, there is a terminology conflict that is bound to create confusion among readers – ‘modules’ are not some data structure, they are just conceptual block of functionality. They are actually implemented as classes.

My project which I couldn't end is a test on how a group in a special interest in an area of subject can produce datasets, which are standard enough that unintentionally aid an activity which couldn't have functioned well but with the use of more-than-average resources.

The setting I got inspired from and tried to place in setting was stock trading.

Technology I used was Ruby with a good amount of use of WATIR - the IE handling library for Ruby.

Programming Design Summary:

I set up 3 modules that cover the process of stock trading,

1. Retriever,
2. Strategist,
3. Investor

I'll briefly describe how they were designed and how they function:



1. Retriever

The retriever is a basic scraper of Internet sites.

Basically, this is a scraper/spider of sorts that will gather data
by scraping it from a suggestion website.

I got the idea from this site:
http://www.ibm.com/developerworks/linux/library/l-spider/index.html

The site I scraped was this site:
http://caps.fool.com/Stats.aspx

The target website was Fools.com, and the page lists the recommended stock picks, categorized by certain types of the recommendation – highest rated, newly picked, “watercooler”, to name a few.

The Ruby – based scraper reads the site, does simple parsing of the site to gather the stocks picks, and forms it into an array for the “Strategist” and the “Investor” to use.

The key data are: stock name and rating, along with reference stock prices at the time of the scraping.

2. Strategist

Inside this module lies the heart of the algorithm. It gets the recommendation stock picks, and decides which are the most important characteristics of the given group of stock picks. Afterwards it gives a frame where it provides a place to put an algorithm to run to actually sort out the stock picks. The generic Strategy provided in the code base uses the “Knapsack” algorithm, with optimal goal of making the most value, with limitations being your capital and the price of stocks, which are represented as weight in the algorithm.

Afterwards, the module figures out which stocks should be queued for investing, and puts it into a portfolio file which is read and updated by the Investor module.

3. Investor:

The Investor module talks with the Internet sites that do investing. The generic module in the code base does simulation investing with http://vse.marketwatch.com, a virtual stock exchange site.

The Investor module reads the portfolio file generated by the Strategy module, which then uses that to run the steps as a human would in inserting the investment data to a stock investing site.

The generic module in the code base employs ‘WATIR’, which is a really nice Ruby library that simulates Internet human interaction by using Ruby to control Internet Explorer. It is also possible to control Firefox with ‘WATIR’ but it hasn’t been used in the code base.

It’s kinda neat to see it work – the Internet Explorer works by itself, inserting stock quotes and pushing buttons to actually enter data.

After it enters data, the Investor checks off the stocks it requested to the portfolio file. The Investor module also checks, as when it is called, to check whether the requested stocks have actually finished their transaction and the stocks bought. The portfolio gets updated promptly as a result.

4. Coordinator

The modules are separate, and they only get woken up when scheduled, to increase resource use. Which means, a sort of a “coordinator” is needed to coordinate the sequence of how the modules are run in sequence, along with the passing of data and housekeeping of necessary files – such as a capital file and a portfolio file.

The module has not yet been made into a class. The basic inner workings of the module has been written in the main file – stocker.rb.

5. Test modules

There are some modules that are used for gathering data, to be used in cases when there is a need to collect stock data(ie recommendations) to compare investment results with hindsight and without, the latter being the actual core functionality of this project.

They are either inherited and modified versions of the listed Retriever, Strategist, and Investor modules. They haven’t been finished, and the usage was being tested in stocker.rb file, seen at the top few lines of the file.


LAST WORDS:

The code will not be touched again. It’s provided AS-IS, and I’m sure among the viewers there is bound to be someone that finds the scripts useful, at least partially, to their own use. I hope the code lines spur a new life that way.

Reasons why I’m not pursuing this further:

I have worked on the code for two years off and on, from concept to near-realization. At the time of formulating the idea I didn’t think too much or know much about stock investing, and the amount of excess expenses and rules that would make my project unrealistic. Thing is I found out about this when I got too deep in and things were actually being implemented and tested. After reading some books about stock investing I decided that another big chunk of time would be needed to refactor my logic to make this work beneficial. At the time of this writing, I have six months to pursue some project of my own before I have no spare time at all, and I decided I wouldn’t give it on this project.

I learned a lot about Ruby through this project, and I am rather sulking at the fact that I won’t be able to look into this code at least in the near future. That’s why I’m posting this online.

Thank you!

Work done in Work so FAR

Before I start my discussion on Ruby and my project,

I'd like to discuss what I have been doing at my work lately.
Finally I have been involved in some pretty heavy coding (webpage that is),
and so far I've coded 4 versions of a game site (teaser, closed beta, open beta, and commercial),
complete with CSS/HTML/JS (specifically, jQuery), almost 95% written by me.
Recently I'm near completion of a facelift version of our main portal site, which give or take
is around 75 web pages. That means a compiled CSS of around 2000 lines and around 300 lines of
Javascript(I should've written more but thanks jQuery!).

I even coded the MySpace page for the game in CSS hack sorta way, to resemble another
game site in MySpace which was designed and made by the actual MySpace team, of which
their work is around 10K a site, because they remove the ad on top. I take pride in that
the commercial, MySpace site of this game is nearly similar in design and layout to this game,
and it was done only by hacking the hell out of a personal MySpace profile!

Now I KNOW when I look at a .PSD file, of how to design the layout in CSS. I just KNOW.
I've even written a C# app to read in game character stats and generate it into HTML (took 3 hours to code it, and used it on 4 characters. So I spent 4 hours to code the data, where otherwise hand-coding would have taken a whole freeggin day).

Here are a list of techniques I employ for webpage coding:

1. CSS

-I use a technique of controlling the deployment of CSS styles on specific sub pages and main page
by listing the parent tags first and making more specific naming further on (details on a separate blog article)

-Targeting IE6 and IE7 CSS hacks specifically by concise hack method of '* html' and '*:first-child+html'

-Extensive use of Firebug inside Firefox to interactively do a WYSIWYG editing of CSS

-Striving to separate content from design. All CSS does is giving the look, and HTML alone just lays out the information clearly and simplies the viewing of it.

-Use of barebone CSS sets. These things are AWESOME! They make default paddings/borders/margins all to non-existent or zero so you don't have to worry about it.

-Standardizing the look of the website by creating what's called a "design theme," or translating it into CSS. For example, a website will have only two type of rounded corner boxes, warning messages are in blocks, always accompany an icon with a yellow text background, etc..

2. HTML

-Care is put into put data appropriately in tags that mostly fit the data. For example, menus or
similar types of a parent type are put into list tags, and written blocks inside paragraphs. That way, CSS can target it better and make it viewable even without CSS.

-NEVER, EVER put design parts into HTML. You don't need to put a
tag to create gaps between a title and paragraph. TABLEs never have background. Heck, images, unless dynamically needed, don't need to have specific image sources in HTML. Make HTML show
almost only content and layout, nothing else!

3. Javascript

- Use jQuery. Even Visual Studio will ship with jQuery, having Intellisense and everything!
It gets the nitty gritty part, especially AJAX and browser compatibility anal pains out of sight for you and sort of makes a setting to create high-level Javascript code. What took 70% overhead of environment setting and 30% functional, actual working algorithm for writing Javascript code is, with jQuery, almost 90% coding working algorithm! It's also sooooo concise. 3 lines of code and you create a content slide down and up. Beat that!

- Use more jQuery! Sure, Prototype, Mootools, Dojo are all significant frameworks to work with, but none can beat the overall simplicity with relatively good response time. I had to do research at work about the 4 frameworks and I didn't know any of them before. After research, I concluded jQuery is THE BEST FRAMEWORK .. for me.

-Bloated Javascript isn't that good. It takes a long time to load, and since Javascript is based half on event-based execution of code, sometimes if you are not careful you will create race conditions where a code will execute faster than the other, unintentionally.




For the past 2 weeks I've stayed up nearly every night to code the 70-plus page main portal.
Sure I think coding pages is a busy-work. With so much content, designers not 100% sure of their "design theme" and constantly changing/editing the .PSD files, the work can be highly
stressful, especially staying up all night and coding.. webpages. However, when everything's done, CSS is all tidied up, and presentation of webpages / UI are as I intended, it gives a satisfaction that trumps the work.



However, coding by itself is such a repetitive action that resembles other menial tasks like
stapling or pasting envelopes. If you fail to strive shortening coding and grow an aversion towards repetition, I don't think growth will happen.

Wednesday, August 27, 2008

Web Coding - Fun with Subversion

WINDOWS Subversion usage for casual Web-Coding team environment

Okay. This is going to be a terse walkthrough in how to set up a version-control
work environment for the web design/coding&UI teams.

Setting: Usually nowadays the trend is that there is a design team and a coding team, not to mention a web-dev team.

Normally, the workflow starts from the PM (P stands for what I dunno.. production? project?)s that think of what needs to be developed. Designers get sent the raw material and the design barebone layout and start working their magic to turn something with lines to something with graphics.

The UI/Code team gets this and implements the actual HTML version of the normally graphic
format of PSD files.

A couple revisions at this step, and the coded page is worthy of passing on the developers, where it actually gets implemented into Internet-ready pages.

Problem: Too many versions of the same thing.

Let me explain how our company's workflow is:
  1. They give me the design. I code.
  2. I put the finished code for review into the networked drive. So, I have to manage 2 copies.
  3. Then again, some things are different for the actual deploy version of the code. So I copy again into another folder. 3 copies.
  4. If the developers put them on the servers, that also is counted, so 4 copies.
If changes need to be made, I have to change my source code for testing, overwrite the copies on the networked drives for other members to test, AND update it to the server.
Do you know how long this takes? 40 minutes.
Do you know how many points of access where I can stupidly delete stuff? ALOT.

So, I decided to try Subversion. Now, I won't explain what Subversion is because that is
documented so well in their site as well as good portion of Google search results.

What I want to describe is exactly how I used scripts and programs to create a easy-learning, transparent, version-controlled work environment.

Here are what each quality means:
  1. Easy learning: virtually the implementation speaks for itself.
  2. Transparent: I don't add another layer of access for version control - the codes are what is seen, the version-control parts are really non-visible and non-intrusive.
  3. Version-controlled: I'll just say that equals to less than 10 minute maintaining versions and the other free 30 minutes divulging into more fun stuff(er, activities) @ work.
So let's get down to it!

  1. First, follow this link and do EXACTLY what it says. You'll be installing Subversion, Apache Server, and TortoiseSVN(a GUI client for Subversion). Come back when you are done!
....
Good! Okay. Now there can be 2 problems that might occur with this configuration. First, TortoiseSVN uses a different Subversion client than the Subversion installed with Apache. Meaning, Subversion 1.5.X and 1.4.X are NOT compatible!! Just keep it mind that

At the Tigris Subversion site, the package for Windows for Apache Server comes with 1.4.6 of Subversion, and TortoiseSVN is packed with Subversion 1.5.X

.. which would cause problem for those that has this occured.

Eventually the Subversion 1.5.X installing would make this problem go away.

Anyways, you've checked in your codes, and you feel good.
But how should you deal with making a copy on the networked drive?
Sure, checkout another copy over there too. But.. don't you feel like you'd what it to
automate the update process of the copy on the networked drives?

So you won't have to do the couple clickings of the mouse just to get the codes updated?
Well, onto the next step:

2. Synchronizing via Scheduling Task Manager

It's really simple.
Map the networked folder to a drive. For this example, it'll be W:
Make a batch file (XXXX.bat).
Inside the batch file, type:


W:
cd Folder1
cd Folder_THAT_HAS_VERSION_CONTROLLING
svn up

That's it! Save and double click. You'll see that the networked folders are updated. Voila~

But don't you think the black command shell box is a bit intrusive? What doesn't need to know, doesn't need to show.

Make a YYYY.vbs file, inside the folder that has the .bat file for simplicity.

Inside, write:



CreateObject("Wscript.Shell").Run """XXXX.bat""", 0, False


Yep. Double click that, and the same batch file would run, but it would run in the background. No black windows!

3. Scheduling.

Start->Programs->Accessories->System Tools has the 'Schedule Tasks' program. Click it.
You know how to manage adding a new schedule right? If you want extra description, ask, I'll do it.
Add a schedule to run, like every 30 minutes. The program to run is the YYYY.vbs file.


4. Done!

I just implemented this workflow with this project I'm working on, and I am totally psyched about it. Now, I don't need to figure out which file to update, which file to leave, which file to copy over, which to just get some code lines from it... NO! I have Subversion and my scripts to do that for me!!

WOOT

Monday, August 04, 2008

How to Code Newsletters with CSS

This method works in following clients:

Yahoo! Mail: all images show
Google Mail: all images show
Outlook/Hotmail: if you allow it, all images show. If not, the text/HTML based newsletter shows!

At work, I had to code newsletters given by designers.

I wanted every possible way of not touching their artwork,
as it is my goal to code for perfection.

I read these good tutorials:
http://www.sitepoint.com/article/code-html-email-newsletters/2
http://www.reachcustomersonline.com/content/2004/11/11/09.27.00/index.php


My goal in coding this was to provide readability to as much people as possible over
various methods of reading emails.

That meant for those that can, show the newsletter in its original image form, and
for those who block any and all images, show the text-based version, which would be
gracefully replace the images automatically, by them filtering the images.

Let's think about that a moment.
What kind of methods are there to accomplish replacing images with text? Via presentation
filtering images? I will just lay out all the ones that failed first. Let me know if you want to know
how I tried only to fail. For those reasons I won't go into detail.

1. Position:absolute inside a Position:relative block, layering the image on top of text
2. "margin-top:-width" method to cover the text by pulling up the image by its height
3. Variations on these (image tag before div tage, vice versa) to make them work.

I couldn't do it! I mean if I get it working in YahooMail, GoogleMail wouldn't show anything. Outlook/Hotmail always displayed no images, but they showed the text all right. I only focused on those 4 methods of mail-viewing as I assumed they grasped the major market of mail-viewers.

Well, I tried floating the image.

So here are the basic steps I found out after couple tests.
1. Follow the link and read about the basic setup of a newsletter.

2. Follow and make/copy the code so you get rid of all the style tags and make it still work with inline CSS.

3. Basically you'll be using TABLEs to represent content. In a is where you'd show the sliced up newsletter images. Now that has no info whatsoever, and that same place is where you put the text-based content as well.

4. Inside that :
  1. Make a DIV tag, which will be wrapper for your content.

  2. Inside it, place your image first. Float it, block it.
    you don't need to give it dimension.

  3. After the IMG tag, Make a
    as same height as your image, and put content in.
    **make sure the text based content won't be taller than the image. It's gonna show gaps if so.

  4. THAT'S IT!!!!!!!!!!!
Here's how it looks:



TESTING:
I use this site to send me some test letters: http://www.mailchimp.com

It's a pretty good site, and they are very informative on things.


EVALUATION:

This method works in following clients:
Yahoo! Mail: all images show
Google Mail: all images show
Outlook/Hotmail: if you allow it, all images show. If not, the text/HTML based newsletter shows!

Monday, June 09, 2008

My accomplishments so far in OGPlanet.com

I have been working at a small game-publishing company in El Segundo, LA.
Called OGPlanet.com.

I love the job I'm doing. I'm an assistant web programmer, and that's basically what I do all
day.

Code websites all day. It's awesome. I've been dreaming about this kind of lifestyle - the life
of a coder - since the last few months of my last year at UCLA as undergrad.

Let me tell what I do:

Designers design the websites, and based on the producer's intention I have to follow through
and convert the stoic, PSD based files into websites.

Moreover, I get to code/learn Javascript and CSS.

Sure I don't get paid much($30,000 a year), but I'm actually doing what I wanted to do.

I've coded so much CSS styles that now I'm getting better and better at making neat,readable
stylesheets. I pretty much memorized hacks for FF, IE6, and IE7 and use them. I know,
I should create code that shouldn't use hacks. But I'm thinking I'm getting better at it.

I got to know jQuery - the best duct tape tool for Javascript. It makes coding in Javascript
what Ruby does to scripting languages - super easy, focus on logic rather than syntax.

... aside from assignments, I have a lot of time for idle developments, and this is what
is best about this job! I normally get around a day a week of nothing to do except acting busy.

So since this is my first job, I never would allow myself to actually do NOTHING. I took upon
myself to enforce a habit of coding - you know, like the policy they have at Google, where
you are required to use 20% of work time for research/project of your own.

Here are some of the little side projects I've made so far:

  • In our company we send newsletters weekly to the registered users that play our games. So, the designers always send me little zipped files to process. Without going into details, I made a Visual C# Windows application that would automatically process the files, upload it to the server, and open up the browser for me to check. I'm sure this will be beneficial to the designers and also it'll free up my time considerably - in the area of 20 minutes.
  • Anyone know Processing? It's a language used by media artists for artsy projects using databases. Sort of a visualization language for Java applets. Well, I overheard a PM (Project Manager) wishing there would be a real-time sales display of sales made in games, like in a bar chart that is constantly updating. I've made the thing using Eclipse and Processing - where it would function both using logged sales history and also in realtime. It is really nice - nice colored bar chart that moves every second, and basic graphical aesthetics (jittering, zooming, color fading, alpha blending) for cool effects. It's like a prototype for the big display-based system I'm having in mind. Since Applets can increase in size by setting window dimensions, a 42" display on a plasma screen is plausible.
  • I've noticed the company manages a lot of game sites - a game site would have from 20 to 30 pages. Every week there are 4,5 image/flash files that need to be uploaded to the static file server and sometimes links should be changed to the javascript that handles menus. I've made a Visual C# Windows app where I can drag the file to upload, select which of our sites it belongs to, which context it is - eg) left_ad_banner - and the filename should one want to change the default filename. I press upload, and voila! It shortened the task which took around 20 minute down to 2 minutes and relieved me of the anxiety of manual uploading which is possible to make mistakes due to high freedom of access.
  • Each Visual C# apps are password protected, and object-oriented - meaning I made classes that are in namespaces so if I want to make more company-related apps, I can easily inject the inner workings of access - since it's already object oriented.
So that's what I do until 6:00PM. Back home, if I'm not tired, I have a couple of my own projects:

1. Music Album via Buzz and Linux based Music Studio(UbuntuStudio)
2. Team-based employment site
3. Stock - related research


God I love my life!

Thursday, May 01, 2008

3 New Projects

First of all, I got hired at www.ogplanet.com as an Assistant Web Programmer,
and the job is as I have expected: coding websites.

I got a chance to use and learn cool new script libraries such as jQuery,
and the job is pretty fun and the thrill of coding on the clock is just mind-blowing!! :)

The project development flow was pretty cool too. I am experiencing
real-life execution of website developing that includes powerpoint based
functionality overview by the producer, and getting the design by the designers,
and finally coding the entire thing by yours truly.

As a side project and to regurgitate what I have learned in terms of project management,
I hereby announce, to myself and whatever random people that will see this post,

3 Projects that I intend to finish within one year.

[1]: Music band site
==============
My good friend Bang and I go a long way back, and that includes million what-ifs of
forming a band. Our dreams, even though we live in separate continents now, never
sorta phased out. I have my stockpile of lyrics, and he has his poems.

This will be like our 4th attempt at making something using the Internet, and this time
it will be something, as our school-years ended for the time being.

It will host a multi-genre band, comprised of me and .. Bang, with songs of Christian and secular.
We are both Christians, whether it's up to God and people if I am devout or not,
and personally for me what fuels my lyrics is all my relationship with God and His grace for
a hypocrite like me.

I'm excited and this will be a chance for me to use CSS/JS(jQuery)/Open Source tools for
web development,
and LINUX - based music production environment that I've always wanted to make an excuse
for learning :).

Ghetto - style music production setup in my dorm room.........using donated used laptops...
..........how more cool can this get!!?!

So, that's that and let's see where this goes!! ^.^

[2]:"Gig".com
==========
My friend from college and I thought this one up. I've lost him to a very rich and evil company

but hopefully he won't sell his soul there. haha.
Anyways, this is a social-team-based recruiting site where
employers will be looking for a "team", not an individual worker.

This is a new concept because what with the economy so bad as it is,
people will be pressured to outsource whatever things could be,
and those wanting their foot in the job-pool would want more protection,
and a team-based gig proposal, in my opinion is better than an individual.

... Plus it has that reality-zing to it. A website where.. new bonds among members are met..
and old bonds.. broken.

Anyways it's a site for Korean 20's in Korea. You'd think getting a job in the states is bad..
in Korea it's way worse than here. This will be sorta my charity work for Korea.

I'm still pondering whether I should code the whole thing or use Drupal.. I'm gonna have to
see if I really want to code everything by myself. And if by me, I'm gonna use CakePHP - as
people say that is pretty good for OOPHP programming, which I've always wanted to learn.

Hope I can get this baby off the ground soon. The idea was created 1 year ago already.

[3]:Stocker
========
This is a concept I am working on, regarding stock infos and speculations. I would have more
to say if I have more concrete direction of the development but currently I'm stuck
by my lack of knowledge in Ruby.

I'll just say I am using Ruby and making it interact with the Internet ^___^;

--------

So, that is that and I'll try to update faster from now on.. since I would like to see this blog
in high traffic as well.