




Developer Blog
11.04.13
Create ECommerce System to support subscription shipments
Developed Ecommerce system integrated with Authorize.net API to support single, multiple and subscription purchases. Complete Ecommerce system processes credit cards, sends confirmation email, allows user to auto unsubscribe via link, tracks user history, auto processes payment by schedule and more. System easily reskinned to sell different products.
08.28.13
![]() Managed all of there television web sites. Converted all sites to cloud system for mass audience support utilizing dynamic scaling, directed web development teams, created solutions for large contests with legal restriction limitations.
11.04.11
Gild Inc - Launched new Web 2.0 style website
Their previous site was heavily overloaded and slow due to great deal of evolutionary buildup of changes. We constructed the new one from scratch on a Ruby based platform. The site launched and the company received funding, it acquired another company and has been receiving large amounts of press from places like TechCrunch.
05.15.11
I authored the entire UI, made fully cross browser compatible. This was a site they showed when they marketed their products in a large ad campaign.
04.25.11
Eurorscg Inc - AFROTC Web Application Form Launched
The entire web application form was reskinned and data updates to the database were made along with new features added.
02.01.11
EVB launches CamelBak
The site was reconstructed from scratch just importing the old DB. I constructed the entire UI, inclduing the special effects piece on top so we didnt have to use flash. The page takes only about a second to load. The product and shelf pages have a unique way of displaying information and showing products. Entire site including all special effects is IE7-IE9, Safari and FireFox compatible as usual. There also a military version of the entire system. CamelBak
07.03.10
Mekanism launches Influence Project for FastCompany
The launch which was a contest to determine how "influencial" you are where the winner would have a spot in the magazine. This launch generated 33,000 sign ups, a great deal of angry news media and several high profile famous celebrities to join along with several denial of service attacks and other hackers who posted pictures of faces with ski masks as there profile picture. http://influenceproject.fastcompany.com
08.05.10
Mekanism launches Microsoft DeepZoom Studio
Microsoft goes live showing off its DeepZoom technology DeepZoom Studio.
05.25.10
AMEX sponsors TakePart
AMEX integrated its MembersProject program into TakePart.com and launched its first commericals during 2010 Olympics. Ever since then, you could not watch TV without having run into the MembersProject commercial. View one of the commercials here ~ http://www.youtube.com/watch?v=wlaYJhLylzw and more info here ~ http://www.youtube.com/watch?v=wlaYJhLylzw.
11.23.09
Mekanism launches TakePart.com
After long hard work with an amazing team at a great company, today we launch our work at TakePart.com.
08.01.09
Mekanism
For the last three months I've been contracting for a production studio company called Mekanism. They are a power house production company that pretty much designs and develops anything media related from advanced animations to films to commercials to software. Pretty much anything you need done, they provide it. The project I'm tasked with is to develop for one of their projects called TakePart. TakePart is a beta site that helps users explore todays issues and find out how to get involved. I've developed heavily in Drupal modules (PHP/MySql) and scripting using JQuery and objected oriented javascript. So far the project is very exciting with a lot of really cool coding going on working on a really senior team of engineers. When I first arrived, immediately I helped solve a lot of big problems that were urgent. Once that was done, I had the opportunity to optimize the site, pages were taking 20 to 25 seconds to load I was able to reduce down to 5 to 7 seconds and sometimes faster using some creative somewhat AJAX related trick I designed. The solution is even better then simply making calls through AJAX in my opinion. I also got the opportunity to create entire new modules to add to their Drupal framework. Its a great company to work for with really friendly people. I'm realy happy with how things are going, the contract is for an uncertain amount of time.
05.05.09
Soft-I/O Online
For the last three years, I have been the lead UI engineer for the development of an application called Soft-I/O (http://www.soft-io.com) which is embedded on a device which allows users to connect devices to interact with other devices through a web based software. Learn More
04.29.09
![]() Designed and developed a control panel with graphical enhancements for usability integraded with a controller which connects to a touch screen panel and joystick to control the robots. I have the robots displayed on a radar like screen, the direction they are facing is represented by a pointer. I got it so the robots can smoothly fly round the radar screen and rotate the pointer by their angle degree. Interesting thing was I took the image of a circle with a pointer of it, and using php graphic library I would rotate the image by a degree and save it, thus creating 360 degrees of the circle image. View demo
03.14.09
Massive ECommerce Data Handling
At the beginning of the year, I contracted for a ECommerce company here that
had a very large set of data which needed to be reformatted, validated, processed, filtered, etc...
Previous to me, two other engineers failed to complete this task and three months have past.
I am proud to say I completed the task in two weeks, on the day of successfully submitting the data,
my clients received orders INSTANTLY. He was back in business and I was glad I could help.
The task consisted of a lot of PHP and EXCEL and DB work.
12.31.08
CyberENA Relaunched
I had a hard time releasing a first version of CyberENA because I have so many ideas and work I wanted to constantly add to this site, but as an old codemaster friend of mine shared with me - "Dont get it RIGHT, get it WRITTEN". Thus, I bring to you, CyberENA Version 1 Project Alive. Imagination is my only limitation, I try to bring to reality whatever I can see. This site contains several innovative special effects I create, check out the lab section to learn more.
Services
Over 15 years of web based software application development experience.
Skills: JS - HTML - CSS - PHP - MySQL - PHOTOSHOP
Portfolio
Contact
Email: production@cyberena.com
Laboratory
The laboratory will constantly be updated with new tips and tricks to more innovative ideas, useful tips and research.
More coming soon, check back for updates.
Laboratory - Soft-I/O
![]() The application is heavily web 2.0 based, with AJAX front end, RSH for history management, jQuery, javascript animations effects and all done in object oriented javascript design. The application consists of approximately 25,000 lines of code (approximately 10,000 javascript, 15,000 DHTML) hand written majority by me. Configuring Devices - View Configuration Page This is a page where you can configure a device. For this demo, use your mouse and drag and drop the colored circled on top into the section below. You can easily use GUI to make assignments of pins here. There are also a lot of other validation logic, for example, some pins must be adjacent to each other. You can play with that on this very screen, you will see the enforcement automatically happen as you drag all four pins. Finally, another thing you can do is share certain pins. In this example, if you want to share a pin, drag and drop the blue one over another blue one to watch how it is handled. These are just a few examples of making something that was originally difficult to configure easily done through graphical enhancements.
Custom Visual IDE design page - View Visual IDE Page
On the left, you'll have a list of devices with possible data items you can add. For an example, Click on one of the devices like RTD. Then click the + button, you will see it thrown on to the page on the right. You can drag and drop where you like that value to be displayed, change it into a chart format, change the font, color, whatever. Then if you wanted to put a label on it, click on the "T" button on the top of the options box to add TEXT and type in your text, format it, and drag and drop it. I could go on forever. In the background, it is saving what you are doing through AJAX calls and the data is converted and saved by JSON Objects.
Programming devices using graphical user interface wizards - View Configure Sequences Page
Laboratory - Robot Radar
![]() ![]() ![]() This is one piece of a control panel I created for controlling robots that fly round in a massive pool. This "radar" shows the location of the robots and the direction they maybe facing. This is connected to a backend controller which has a joystick and touch screen buttons enabling the user to control the robots. The backend controller would send up positioning data to tell the UI where the robot is located in scale to reality. Essentially I did this by creating a radar like background, making two ball images with transparent png backgrounds. The tricky part was one of them needed to display which direction the robot is facing. I couldnt think of any way to easily make the image rotate dynamically and quickly so I used PHP GD library and had the image rotated 360 degrees and saved 360 times. So there is an image for each degree, referenced by "smallCircleAngle.90.png". The 90 is the angle of the image to be loaded. This worked out great, though its tricky because you have to make sure the image's center point is in the center correctly for the script to rotate from. In the script, we save it as transparent background around the ball.
Laboratory - Glowing Fog
![]() Step 1: You will need at LEAST two images. This effect works best if its images of fog to give an effect that looks as if its almost animated, when really all we are doing is fading one image to another. Load the image on your page somewhere using absolute or fixed positioning. img src="images/fog1.jpg" style="position:absolute;top:30px;left:30px;z-index:1"Step 2: You'll need to edit the same image with photoshop, modifying it so the fog is larger, smaller, shifted a little to the right or left. The image has to be saved in the same size as the first one. Once you have this second image created, also place it on the page using absolute or fixed positioning, also setting display to none and zindex a little higher. img src="images/fog2.jpg" id="fog2" style="position:absolute;top:30px;left:30px;z-index:2;display:none;"Step 3: Now the concept is to fade one into the other. One way you could do it is have the first image already displayed, then using JQuery fadeIn command fade in the second one. This will fade it in over the first one giving a somewhat animated glowing smoke like feel if you did the photoshop alright. function fade1() { $("#fog2").fadeIn(3000); } function fade2() { $("#fog2").fadeOut(3000); } function startFogRotation() { setTimeout(fade1, 3100); setTimeout(fade2, 6100); setTimeout(startFogRotation, 9100); //repeat }This design sets fog1.jpg as the image always displayed on the very bottom, while fading into fog 2 in and out simulating an animated transition making fog look like its moving. What I did for my fog is added a total of 3 fog images, so it moved slowly from small to medium to large fog design.
Laboratory - Broken Light
![]() I used this effect to make the horses eye glow and also to fade in and out images in the background lightly just to have some special effects which I thought added to a ghost like theme. Instructions Step 1: You will need a minimum of two images. In my case, I used an image with the horses eyes colored gray, and another image with the horses eyes colored white. Load the first image setting its CSS position attribute to be fixed or absolute. Set a TOP and LEFT point and set a z-index. img src="images/horse1.jpg" style="position:absolute;top:30px;left:30px;z-index:1" Step 2: Load the second image also setting the position of it to the exact same location as the first image with a z-index greater then the first image (i.e. 2). Also make sure you set the display of this to none and include an ID on this image. An ID on the first image is not required. img src="images/horse2.jpg" id="horseEyes" style="position:absolute;top:30px;left:30px;z-index:2;display:none;" Step 3: Include the script below function BrokenLight() { var that = this; var g_imgID1 = null; this.start = function(imgID, bRepeatForever, repeatTimer) { g_imgID = imgID; setTimeout(show, 100); setTimeout(hide, 250); setTimeout(show, 200); setTimeout(hide, 250); setTimeout(show, 320); setTimeout(hide, 400); setTimeout(show, 450); setTimeout(hide, 750); setTimeout(show, 850); setTimeout(hide, 950); setTimeout(show, 1000); setTimeout(hide, 1100); setTimeout(fadeIn, 1500); //hack: bl.start(), if you know how to call itself within itself here without referring to the instantiated class name, plesae let me know bRepeatForever ? setTimeout(function() { bl.start(imgID, true, repeatTimer); }, repeatTimer) : null; }; function show() { $("#" + g_imgID).show(); } function hide() { $("#" + g_imgID).hide(); } function fadeIn() { $("#" + g_imgID).fadeIn(1000); } } var bl = new BrokenLight(); Step 4: Run the start() function sending in the second image ID. bl.start("horseEyes");You can also send in params if you want to repeat forever and how often to repeat bl.start("horseEyes", true, 60000)
Laboratory - Ghost Writer
![]() I integrated this script into a website I created with music, photos and a deep personal message using the ghost writer effect in an attempt to reconcile with my ex-girlfriend. I wanted to give the text a much more human, personal and thoughtful touch (girls like thoughtfulness!). The reconcilation attempt FAILED, but the script was not a total loss and now it remains savaged from the crash and burn ex-girlfriend experience. Though I would not recommend using this for relationship enhancement purposes. Instructions Step 1: Create a DIV with an ID. Step 2: Add this script to your page function HumanTyper() { var that = this; this.type = function(txt, outputArea, callback, callbackTimer, bClear, clearTimer) { var interval = 1000; var output = ""; var randomnumber = 0; for (var i = 0; i < txt.length; i++) { output += txt.charAt(i); setTimeout("ht.writeText('" + output + "', '" + outputArea + "')", interval); randomnumber = Math.floor(Math.random()*11) interval += randomnumber*80; } bClear ? setTimeout("clearType('" + outputArea + "')", (interval + clearTimer)) : null; callback ? setTimeout(callback, (interval+clearTimer+callbackTimer)) : null; }; this.writeText = function(output, area) { document.getElementById(area).innerHTML = output; }; } var ht = new HumanTyper(); Step 3: Run the function type() sending in the text you want to print out and the DIV ID to print it out to. Example: ht.type("Hello World", "humanTextDiv") There are additional parameters you can send in such as what function to call once this script is done (callback), how long to wait before calling the callback function (callbackTimer), whether or not you want the text to disappear after a certain time (bClear) and how long before the text should disappear (clearTimer). COPYRIGHT NOTICE Copyright 2009 Philip Lee All Rights Reserved. CyberENA (http://www.cyberena.com) CyberENA content / source code / graphics may be used and modified free of charge by anyone so long as this copyright notice remains intact. |



