Tuesday, December 29, 2009

simon20.com back to business

After a long frozen season, the domain "simon20.com" has finally been revived. I have updated its settings to point to this blog. From this point on, you can access this blog using http://epicgear.blogspot.com or http://www.simon20.com

I'm actually thinking about getting a cheap hosting through http://www.slicehost.com. Let's see if I can get this budget approved by "the wife". (maybe I should put up a paypal donation button for all the chrome extensions i'm writting *hint*)

Chrome Extension - Regular Expression Search

I'm now on my third extension now.

Here it is, Regular Expression Search 1.0

A simple search utility that allows you to search a web page using regular expression.

==== Features under development ====
 1. toggle through found results
 2. improved UI


Chrome Extension - Regular Expression Checker

On firefox, there are quite a few regular expression tester add-ons. Unfortunately, there has not been any for Chrome yet. So I decided to make a simple one.

Here it is, Regular Expression Checker 1.0


Simple regular expression checker/tester.

==== Features under development ====
 1. save regular expressions
 2. provide a library of pre-built regular expressions
 3. replace feature
 4. regex match status (how many matches, how many subpatterns, etc)


Monday, December 28, 2009

ChromeArmory 1.0

Over this holiday season, I figured instead of running endless of instances in WoW, I better work on something fun and useful.

In my previous posts, I promised a tutorial post on how to write chrome extensions. This promise is not broken yet, it's still in the queue of all the posts I try to write and release everyday. Before I get to the actual tutorial post, I decided to write an extension of my own first.

So here it is, Chrome Armory 1.0.
Feel free to leave me any comments and suggestions. Bugs are also welcomed.

This extension provides a quick access to your world of warcraft's character profile. Items displayed on the profile page also provides tooltip powered by Wowhead.com.

==== Features under development ====
 1. base/ranged/melee/spell/defense stats of the character
 2. dual spec detection
 3. achievement stats
 4. additional tools to determine the status of the character (whether character is def capped, have enough spell power, etc.)



Thursday, December 24, 2009

Google Chrome Extensions - For the developers

In the previous article, I reviewed some fun and useful Chrome Extensions. Today, I'm going to review a few Chrome extensions for developers. It's a perfect holiday present for all the nerdy devs out there (including myself).

1. Resolution Test
Resolution Test changes the size of the browser window for developers to preview their websites in different screen resolutions. It includes a list of commonly used resolutions as well as a custom option for you to input your own.
This one is a must have for anyone who wants to develop pages for different screen sizes. I still don't get why the hell people are still on 800x600.

2. Web Developer Tools
This extension is trying to duplicate the functionalities of Web Developer for Firefox. So far, i'm pretty impressed by the functionalities, although I don't really like the UI of the tool.



3. IE Tab
I reviewed this in my last post. This IE Tab is great for running IE only sites, it is also a great tool for developer who wants to see the evil outcome of IE quickly within Chrome itself.

4. Speed Tracer (by Google)
This is purely awesome. It can profile the speed of your web application in real time and helps to identify the slowness. It can identify how busy the UI calls are, and a separated graph for tracing how the resources perform from a network perspective. This is perfect for developer who's developing rich web (Ajax) applications.



5. Chrome SEO
Ever wonder what you can do to improve your site's search engine ranking? It often takes a lot of research and always stay on top of the latest SEO tips (literally tips) to be good at SEO. And quite frankly, SEO is also a day to day task if you want the ultimate most result.
This extension doesn't show you all the areas where you should improve for SEO. However, this nifty tool does show you the outcome of your SEO efforts by showing you the results pulled from major search engines and analytics tools.
This extension is still under heavy development and a new version is said to be released this week.



------------------------------
-- Current Features --
------------------------------
Pages Indexed on:
- Bing
- Google
- Yahoo


Backlinks as reported by :
- Alexa
- Bing
- Google
- MajesticSeo
- Yahoo


Current Traffic and Rankings as reported by :
- Alexa
- Compete
- Google PageRank
- Quantcast
- SEMRush
- Technorati


Social Bookmark counts on :
- Delicious
- Digg
- Dmoz
- StumbleUpon


Cached Versions of the website from :
- Archive.org
- CoralCDN
- Google
- WebCite


Domain Details such as :
- DNS
- IP Address
- Server Location
- Whois details


-----------------------------
-- Future Features --
-----------------------------
- Integration with Google Search Results. Similar to SeoQuake or the SEOBook Firefox extension.


- Keyword Ranking Checker to quickly and easily check your rankings for multiple sites and keywords across the major search engines.


- On page keyword analysis


- NoFollow checker to highlight links on the current page that are no followed.


- Keyword Research to easily generate and analyze keyword lists and view how much traffic each keyword receives.


- PPC Integration (Adwords, Adsense, Microsoft Adcenter, Yahoo Search Marketing)


- Google Analytics Integration


So far, I have reviewed 5 useful dev extensions. There are still a few I really want to review, but they are either still under development or still buggy. I will save them for the future when they are finished and stabilized.
In the next article, I'm going to write a short tutorial on how to write Chrome extensions. Hopefully it will also mark as the beginning of a new Chrome Extension project from me. Stay tuned.

Sunday, December 20, 2009

1000+ freebie icons

You all will love this. As i was on the quest of bringing my blog back, i found this site which offers 1000+ icons for free download.

Mark James is a very talented web developer and designer. I so appreciate him for making all these “Silk Icons” and best of all “FREE”.

Here are the links:

http://www.famfamfam.com/
http://www.famfamfam.com/lab/icons/silk/

Fun and Useful - Google Chrome Extensions

12/08/09, ah the magical Google Chrome day, an early Christmas day for all of us chrome/google fan boys out there. Google brought us three gifts: Chrome for Mac beta, Chrome for Linux beta, and Chrome extensions beta. I have to confess, the Linux beta is on the top of the list for me. Under Linux, there isn't that many choices for browsers. The best browser so far has been "always memory hungry" Firefox (not saying FF is bad, i still love it, but on a $90 512MB RAM play machine, you know what will happen). Now I have Chrome, oh yes, the Google Chrome.

Ok, back to the topic. The much anticipated Official Google Chrome extensions support is finally here. As an early adopter, I have been on the dev channel Chrome builds, so having able to install extensions isn't news to me. But, with the extension support released on normal Chrome builds and extensions site released, we are suddenly opened to hundreds, if not thousands of extensions and with installation as easy as a click of a button.

I have been exploring different extensions. In this post, I'm going to show you a few of my favorite extensions. You'll certainly find them fun and useful. In the future, I'll have another post to review some great dev related extensions.

1. Invisible Hand
"InvisibleHand discreetly notifies you if the product you’re browsing is available more cheaply from another retailer. The notification provides a convenient link straight to the relevant product page on the competing retailer’s website."
This magical extension really does work. I was searching for a video card on Newegg.com and look what showed up on my Chrome:


Yes, it alerted me that I could save $7.99 if I buy the very same card from Amazon.com. Isn't that cool? I tested a bunch of other products and they all seemed to work. Although sometimes the saving is only a few cents, but it still shows me that. It compares all the major online retailers for the best bargain. Purely awesome!!!

2. Evernote Web Clipper
"Use the Evernote Web Clipper extension to easily save all the interesting stuff you see while browsing the web. No more bookmarks, tabs, or open windows. See something you like, clip it and you'll have it forever."
If you are an Evernote user, then you will definitely love this extension. It allows you to quickly clip a page that you like and saves to your Evernote account.


3. IE Tab
"Use Internet Explorer to display web pages in a Chrome tab. Some sites can only be displayed using IE, and with this extension you can now see those sites without leaving Chrome. Great for web developers who want to test the IE rendering engine, users who use sites with ActiveX controls, and users who want to use the explorer view for local files (i.e. file:// URLs)."
The classic IE Tab. We had that on FF, now it's also available on Chrome.


4. Aviary Screen Capture

"Take a screenshot of any webpage and edit it directly in your browser with Aviary.com applications. Plus convenient access to the Aviary website and tools.


This quick screen capture addon is a must-have for bloggers and designers alike! It will perform a screen capture of the visible portion of any webpage and then open the capture INSTANTLY in a basic image editor where you can do markup (draw arrows and rectangles), edit (crop, rotate and resize) and get the exact pixel colors of the image. A perfect companion tool for designers and bloggers!"
This is really useful. You can quickly capture the page you are currently viewing and allows you to make modifications. Matter fact, I used it for all the images above. What's even cooler is that it allows you save the image to disk or save to web. Personally, I still like TinyPic for hosting my images, but for people that aren't as picky as I am, Aviary's save to web is definitely a must have.

Saturday, December 19, 2009

CKEditor 3.0.2 released

First of all, I don't know if any of you remember the old ugly FCKEditor (commonly know as the f-u-c-k editor). It has gotten a complete redesign. Maybe this isn't news to you anymore, but at least it is still news to me. Looking at the new fresh redesign of their website and all the great themes, it is super exciting. Now there is a reason for try out CKEditor to compare with TinyMCE. This again proves that healthy competition pushes the whole technology forward.

3.0.2 Release included a bunch of bug fixes (really, a ton of bugs), and one new feature. Here's the release note and the download link.

涼宮ハルヒ-god knows完整版

涼宮ハルヒ-god knows完整版
One of the best Animation Music Video i’ve seen with a kick ass song.



Here’s the LIVE version - by the actual voice of Haruhi (btw, she’s really hot)

product pages: so much suck, so easy to fix

I just came across this awesome article by Amy Hoy on web User Experienceshttp://www.thinkvitamin.com/features/design/product-pages-so-much-suck-so-easy-to-fixhttp://www.thinkvitamin.com/features/design/product-pages-so-much-suck-so-easy-to-fix. The much talked about User Expirence a lot of times either get overly abused or completely missed out.

What really bother me is that a lot of new sites today lean towards providing cutting edge functionality but misses the usability. What really attracts ppl to the site is not just because how bad ass your Ajax app is and absolutely not how good you can make a page look pretty. What really counts is how user friendly is your site, in another word “User Experience”. Your site doesn’t have to look top notch, as long as it has a good user experience flow, and looks elegant, ppl won’t bounce.

I love the opera example she made. The previous design was just a complete disaster. All the characters they came up with in the flash didn’t help them in any posstive way. When you landed there, all you see is that ugly flash which dis-encourages the user to continue on and click on the download link. That’s a broken user experience right there.
First Experiences Last a Lifetime
Your mother always told you first impressions count, and the same is true of web sites. You don’t get a lot of time to sell yourself to a potential customer who loads your page; most people are lazy, and more importantly, impatient. You have to go the extra mile, because they won’t (and that is the natural and proper order of things). All the research seems to indicate that you have mere seconds to convince a shopper that he or she just has to have what you’re selling (or offering for download), to hook ’em and leave ’em wanting more, but not too much more.
User Experience Basics
We’ll get to the practicum in just a moment but first, let’s talk — very briefly — about some super basic UX tenets:
  • Be nice to your users and customers (and potential customers).
  • Design as if your main goal is to inform and educate.
  • Be honest and forthcoming, while you’re at it.
  • Help your users and customers to do what they want, not what you want them to do.
  • Be consistent with your message and quality of service (and I’m including software design here, folks).
  • Scientific, measurable “usability” doesn’t necessarily make for a good experience.
  • Good design makes people feel good.




ie vs ff on javascript

We all know how painful it is to deal with the standard differences when it comes to javascript programming across IE and Firefox. There can be many to be listed, but I’m going to list them out as a series of posts over time. These are going to be my findings, so correct any mistakes i may have.

Access DOM Object in an attached event
let’s say you have a link on the page that you want to attach an onclick event to
and assume addEvent is a method created to support both IE and FF

Under Firefox, if you want to access the linkObj, you can simply use “this”
linkObj.addEvent(”click”, function(){
alert(this.href);
})
Under IE, you can’t use “this” because “this” will referrer to the document object
instead, you have to use srcElement, and pass in e as an argument
linkObj.addEvent(”click”, function(e){
var thisObj=e.srcElement;
alert(thisObj.href);
});

Friday, December 18, 2009

PHP Memcache Extension - Lesser Known Pitfalls

Ah yes, we love memcache, sometimes it even makes me wonder, why did I spend so much time on optimizing queries on large db tables when I can just cache them in memory. Some people even take memcache into its extreme by utilizing it as session and data storage (depending on the situation and sensitivity of the data, it's really not a good idea, but i'll save this as another topic for another day)

Now, back to the main topic. There are a few less known pitfalls about memcache. If you've been lucky so far, you probably never experienced it, but if on the other hand, you are like me, then you should pay attention. I'm going to break it down into a couple sections to discuss the pitfall.

Pitfall #1: serialized data
The fundamental.
Memcache stores data in key-value pair in the memory for faster data retrieval. It relies on serializing data to maintain stored data and its structures.

The pitfall.
Did you catch the word "serializing" in the last paragraph? If not, read it again out loud. Yes, memcache relies on serializing data. In another word, it relies on data that can be serialized. Normally, when there's an error in setting values into memcache (like memory is full), memcache will fail silently. However, if the data you passed in is not serializable, memache will throw an error. Why? because memcache wouldn't know what to do with the data.
For int, float, or bool, memacache will first convert the value into a string then store it. In return, when you try to get the data, a string is returned instead of the original type.


The solution.

Oh yeah, pitfall!=total failure. There's always a solution (or workaround if you must) out there. The simplest thing to do is to just serialize the data before it is passed to memcache. The Memcache::set()'s third argument $flag supports an undocumented value "1". If you pass in 1, it essentially tells memcache to deserialize the data it received.
Example:  $memcache->set($key, serialize($var), 1)
Also, make sure that once you have set a key to use the secret flag, the next time you set a value to it, maintain the flag or the server will be marked as failed.

Pitfall #2: memcache fail silently on failed compression
The fundamental. From the documentation of Memcache::set()
"Use MEMCACHE_COMPRESSED to store the item compressed (uses zlib)."

The pitfall. Again, there's a word to catch in the last paragraph. This time, it's "zlib". So what will happen if zlib is not installed? Well, nothing will be put into memcache if you always pass in the compression flag. However, since memcache most times fails silently (except the pitfall #1), you probably won't realize the issue until your main database is killed.

The solution. Simple: INSTALL ZLIB.

I'm sure there are many other pitfalls out there. If I see it, i'll definitely put it up again (hopefully i will find those pitfalls out without a total server failure).

Simon20.com Migration

Unfortunately, I'm no longer maintaining the old blog powered by WordPress. There is no point to keep the hosting up just for the old content anymore. I've decided to the shut down the operation.

On the brighter side, I will be migrating my old posts from the WordPress over in the next few days. Once this migration is over, this blog will become my official blog and the domain Simon20.com will be pointed to here.

Stay tuned, there are many interesting and useful stuff from the past.

WebGL Draft Released

Ever since WebGL first surfaced, there has been many attempts on implementing it. I have to admit, it is a very sexy technology. For the first time, we can write rich graphical web application without Flash (I'm not here to judge flash since flash is not just limited to providing rich graphical web experience)

On the 10th of this month, the WebGL Working Group @ Kronos released the first draft of WebGL specification. This is really exciting. It means that the WebGL has leaped a giant step forward, from a prototype to a much more mature official project. Now the developers who are interested in WebGL can contribute directly and help finalize the specification. For now, it is predicted that the specification will be finalized by first quarter of 2010.

With HTML5 and CSS3 also in the horizon, down the pipeline, on my wishlist, in my best dream, the web is going to be very promising and interesting. Christmas is coming, I'm hoping Santa is going to grant our dreams this time.

我叫MT 第二集 - I'm MT Ep.02

Episode 2 - Part 1



Episode 2 - Part 2

How to embed youtube video with HQ enabled by default

This might not be a secret to some people already, but I think it is still worth sharing.
When you are on youtube, you can watch videos in high quality and the video stretches to a wide screen mode.

From my point of view, the size of the video and the quality of the video is perfect for audience's viewing pleasure. However, when you try to embed the video into your page (blog), the amount of options provided by youtube really limits you to low quality and square sized video.

After a few Google searches, I found the perfect solution (hack, if you prefer this word)

This is the default embed code:
<object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/fO4DsOcZHBs&hl=en_US&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/fO4DsOcZHBs&hl=en_US&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Let's modify a few things:
<object width="854" height="505"><param name="movie" value="http://www.youtube.com/v/fO4DsOcZHBs&hl=en_US&fs=1&ap=%2526fmt%3D18"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/fO4DsOcZHBs&hl=en_US&fs=1&ap=%2526fmt%3D18" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="854" height="505"></embed></object>

You can see the result in my previous post (I'm MT Ep.01)

我是MT 第一集 - I'm MT Ep.01

All credit goes to 《我叫MT》官方网站
This whole series just brings back so many memories of my past WoW experiences. Yes, all the epic failures of a noob. I often laugh at players who laughs at noobs in the game. After all, we were all noobs when we first started.
Anyways, enjoy this first episode. I'll keep posting the other episodes as well.

Update:
Season one has ended. It contains 10 episodes, so stay tuned, the rest of the episodes are on their way.

Wednesday, December 16, 2009

HTML5 & CSS3? Not Yet

ok, this is a simple post about why I don't want to implement html5 and css3 on any of my projects (excluding pet projects).
don't get me wrong, I love the new cutting edge features provided by html5 and css3 and I often wonder why it would take so long to get implemented across all browsers.
But my views are simple:
  a. neither of them has been made official by W3C
  b. Firefox, Chrome, WebKit has all implemented some cool things out of html5 and css3. But they have all implemented them differently. I'm talking about down to the syntax different. It becomes a maintainers' nightmare when there are 3 different syntaxes for just one rounded corner.

I'm fine with exploring HTML5 and CSS3 and I love them very much, but putting them on my production projects? Meh.... maybe not just yet.

Drunkeness Continues

After a whole year of absence, I have decided to start blogging again. Why is it called "Drunkeness Continues"? Well, for anyone (and i really hope there is anyone) that still remembers http://www.simon20.com, this is the continuation of it. I decided to not continue maintaining the lousy wordpress. The theory is simple: why re-invent the wheels when Google has a much better wheel already built?

So, what happened in the past whole year and why did I drop blogging? I'll save these for another post another day.

For now, please enjoy the content on my old blog:
http://www.simon20.com
and also the TDS (the daily simon)