Linux/Apache/PHP+MySQL/Smarty/JQuery/RubyOnRails

[Debug]"FastCGI process exceeded configured activity timeout" error

2012-02-08T01:30:00.000-08:00

Edit %WINDIR%\system32\inetsrv\fcgiext.ini


[Types]

…

php=PHP

…

[PHP]

ExePath=C:\Program Files (x86)\PHP\php-cgi.exe

under ExePath=C:\Program Files (x86)\PHP\php-cgi.exe,
add the following:

InstanceMaxRequests=10000
ActivityTimeout=600
RequestTimeout=600

reference :
http://forums.zend.com/viewtopic.php?f=8&t=273
http://forums.kayako.com/threads/support-desk-not-responding-after-sending-attachments.26719/

Crazy Egg Web Analytics

2012-02-06T21:32:00.000-08:00

The Astonishing Power of Eye
Tracking Technology... Without the High Costs

website : http://www.crazyegg.com/home2

Apache Kafka

2012-01-17T01:24:00.000-08:00

A high-throughput distributed messaging system.

Apache Kafka is a distributed publish-subscribe messaging system

Apache Kafka is a distributed publish-subscribe messaging system. It is designed to support the following

Persistent messaging with O(1) disk structures that provide constant time performance even with many TB of stored messages.
High-throughput: even with very modest hardware Kafka can support hundreds of thousands of messages per second.
Explicit support for partitioning messages over Kafka servers and distributing consumption over a cluster of consumer machines while maintaining per-partition ordering semantics.
Support for parallel data load into Hadoop.
Kafka provides a publish-subscribe solution that can handle all activity stream data and processing on a consumer-scale web site. This kind of activity (page views, searches, and other user actions) are a key ingredient in many of the social feature on the modern web. This data is typically handled by "logging" and ad hoc log aggregation solutions due to the throughput requirements. This kind of ad hoc solution is a viable solution to providing logging data to an offline analysis system like Hadoop, but is very limiting for building real-time processing. Kafka aims to unify offline and online processing by providing a mechanism for parallel load into Hadoop as well as the ability to partition real-time consumption over a cluster of machines.
The use for activity stream processing makes Kafka comparable to Facebook's Scribe or Apache Flume (incubating), though the architecture and primitives are very different for these systems and make Kafka more comparable to a traditional messaging system. See our design page for more details.

Apache Kafka is an effort undergoing incubation at The Apache Software Foundation (ASF), sponsored by the Incubator PMC. Incubation is required of all newly accepted projects until a further review indicates that the infrastructure, communications, and decision making process have stabilized in a manner consistent with other successful ASF projects. While incubation status is not necessarily a reflection of the completeness or stability of the code, it does indicate that the project has yet to be fully endorsed by the ASF.

reference : http://incubator.apache.org/kafka/

Highcharts

2012-01-04T19:25:00.000-08:00

Highcharts
Highcharts is a charting library written in pure JavaScript, offering intuitive, interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.

Xen VPS Hosting

2011-12-28T03:02:00.000-08:00

Deploy your Linode cloud servers worldwide, including our newest facility in Tokyo, Japan.

url : http://www.linode.com/

結婚習俗 - 結婚紅包行情

2011-12-28T00:56:00.000-08:00

結婚紅包行情價：
　
600元---一般訂婚習俗和結婚習俗，紅包是由600元開始起跳，但那是指非常不熟悉的禮金數。
1200元---就是一般辦公室朋友的[價位] ，三分熟交情；只包紅包祝賀，不出席喜宴。
1600元---是可以一起吃飯逛街的朋友，另外；如果你還可以拿到一盒新娘的喜餅，那就不好再少於這個數字。
2000~2600元---可以交換一些心事，倒些垃圾的朋友，平日相交已有些推心置腹的感覺。
3600元---親密的姐姐淘，兄弟情，如熟透的親密感。
6000元---親姐妹、親兄弟血濃於水，不容取代的手足情深，自然就從6000元以上起跳。
　紅包的由來：
　紅包袋---亦稱為紅封包，是將金錢放置紅色封套內做成的一種小禮物。訂婚結婚包紅包是中國傳統民俗，在各種喜慶場合如過年、小孩滿月及各式送金錢作禮物時都會使用。紅色在中國文化當中象徵著喜慶，紅包當中一般會放入有吉祥數字的金錢，例如有8字或以雙數結尾的數目，而且結婚紅包賀詞寫法也是有重要的象徵意義。
　　
　　
　小叮嚀
　
如果女方是訂婚收禮金，而男方是結婚收禮金；或是訂結婚一起舉辦，男女雙方都在現場擺禮桌收禮金，所以；要包給她，最好跟她說一聲，如果男方那邊收走了，至少她看過禮金簿時，知道你有包紅包給她，日後；你結婚時她才有包紅包的參考值。
紅包討吉利，新郎倌可不要忘了準備紅包給幫忙的親友；諸如：前來開新郎車門的舅爺，及六名隨新郎前去迎娶新娘的親友，捧洗臉水的女方親友、媒婆禮等。金額多為600、1200及2000元等。
　　
　紅包賀詞寫法
　
紅包上可寫上結婚賀詞，但紅包左下方寫上自己的名字(例如:xxx賀)
百年琴瑟花好月圓天緣巧合金石同心白頭偕老情聯碧合宜爾室家花開並蒂情投意合天作之合相親相愛永浴愛河緣訂三生......更多結婚賀詞
　　
　
　起源 | 訂婚流程 | 迎娶流程 | 歸寧流程 | 南北差異 | 結婚禁忌 | 結婚紅包行情　

本網站部分相關資料於各大雜誌及網站收集而來，單純為了提供網友方便，不作他用，若原作者不同意引用，請與我們聯絡。

reference : http://www.myloving.com.tw/WedInfo_MoresPacket.asp

結婚紅包行情

2011-12-28T00:55:00.000-08:00

最近好日子很多，因此收到不少朋友寄來請帖為此我希望得知包多少才得體，同時(1)顧及情感程度(2)顧及對方是否好回禮，台灣習俗:回禮不能比當初收到禮金少(至少等價)，因此包得好是祝福包不好是負擔，可能是自己的負擔也是對方的負擔。

此圖來自: veryWed討論區

這是PTT網友peegoo7 (瓜瓜瓜)整理出來的價目表

結論(參考朋友的看法):
(1)有分人到和禮到兩種金額，由於結婚禮金是要補助新人的做法，因此不難看出，扣除每桌費用後多少補貼的做法，好比一桌一萬元，每桌抓5-7個紅包(假設洽好是5對10人)，包2000是剛好餐費，則2200到2600甚至更多是較佳的包法，這樣的算法因人、地而異

(2)人到最少得包1600，如果帶的人數太多要酌量多加一點。

(3)由於只用雙數，不用單數！不用「四」和「八」(八有「別」之意) ！因此能用的數字只有600、1000、1200、1600、2000、2200、2600、3600、6000、6600等組合。

(4)你包3600給別人，碰上台灣習俗:回禮不能比當初收到禮金少(至少等價)，雖可回同樣的禮數，但是由於下個數字是6000，會有你要別人包6000的味道在。

依照景氣不同會有不同的包法，法無定法可由自己的狀態、友好度等做為考量，透過網路資料的整理可提供大家一個參考的方案。

reference : http://im88.tw/?p=1243

Gridow - Presenting Yourself in the simplest way

2011-12-19T23:50:00.000-08:00

Make your own Gridow video,
All you need is a laptop,
with a camera and internet access.

Take a BITE out of Bugs and Redundant Labor

2011-12-19T00:29:00.000-08:00

In a time when more and more of the web is becoming streamlined, the process of filing bugs for websites remains tedious and manual. Find an issue. Switch to your bug system window. Fill out boilerplate descriptions of the problem. Switch back to the browser, take a screenshot, attach it to the issue. Type some more descriptions. The whole process is one of context switching; from the tools used to file the bug, to gather information about it, to highlight problematic areas, most of your focus as the tester is pulled away from the very application you’re trying to test.

The Browser Integrated Testing Environment, or BITE, is an open source Chrome Extension which aims to fix the manual web testing experience. To use the extension, it must be linked to a server providing information about bugs and tests in your system. BITE then provides the ability to file bugs from the context of a website, using relevant templates.

When filing a bug, BITE automatically grabs screenshots, links, and problematic UI elements and attaches them to the bug. This gives developers charged with investigating and/or fixing the bug a wealth of information to help them determine root causes and factors in the behavior.

When it comes to reproducing a bug, testers will often labor to remember and accurately record the exact steps taken. With BITE, however, every action the tester takes on the page is recorded in JavaScript, and can be played back later. This enables engineers to quickly determine if the steps of a bug repro in a specific environment, or whether a code change has resolved the issue.

Also included in BITE is a Record/Playback console to automate user actions in a manual test. Like the BITE recording experience, the RPF console will automatically author javascript that can be used to replay your actions at a later date. And BITE’s record and playback mechanism is fault tolerant; UI automation tests will fail from time to time, and when they do, it tends to be for test issues, rather than product issues. To that end, when a BITE playback fails, the tester can fix their recording in real-time, just by repeating the action on the page. There’s no need to touch code, or report a failing test; if your script can’t find a button to click on, just click on it again, and the script will be fixed! For those times when you do have to touch the code, we’ve used the Ace (http://ace.ajax.org/) as an inline editor, so you can make changes to your javascript in real-time.

Check out the BITE project page at http://code.google.com/p/bite-project. Feedback is welcome at bite-feedback@google.com. Posted by Joe Allan Muharsky from the Web Testing Technologies Team (Jason Stredwick, Julie Ralph, Po Hu and Richard Bustamante are the members of the team that delivered the product).

reference : http://googletesting.blogspot.com/2011/10/take-bite-out-of-bugs-and-redundant.html

What is it? Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web.

2011-12-14T18:36:00.000-08:00

What is it?
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Raphaël ['ræfeɪəl] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Raphaël’s goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
Raphaël currently supports Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
How to use it?
Download and include raphael.js into your HTML page, then use it as simple as:
// Creates canvas 320 × 200 at 10, 50
var paper = Raphael(10, 50, 320, 200);

// Creates circle at x = 50, y = 40, with radius 10
var circle = paper.circle(50, 40, 10);
// Sets the fill attribute of the circle to red (#f00)
circle.attr("fill", "#f00");

// Sets the stroke attribute of the circle to white
circle.attr("stroke", "#fff");

reference : http://raphaeljs.com/

Mar30Speeding up Mootools with createDocumentFragment()

2011-11-29T22:24:00.000-08:00

A couple of days ago David Walsh posted a blog entry where he recommended a video from Google about JavaScript. I’ve found this very interesting and I have done some research about how to implement this very easy to Mootools. There are a lot of do’s and dont’s but what is the best practice for us as a Mootools developer? How to avoid the basic Mootools solutions and speed up your plugins? Well, I’ll post my neat workarounds to get your speed up.

I’ll start with modifying the DOM by injecting elements with the Mootools function inject(). Injecting elements to the DOM is very common with Mootools but it will make it slow down. To speed up you’ll have to do as little DOM modification as possible.

For example you load a JSON file and add elements depending on the content of the request. In this example we don’t avoid the Mootools each() function. We focus on the point that we don’t call the inject() function every time. This is my solution.Add the following lines to you general JavaScript file to implement a new function. I’ll recommend this if you

view plaincopy to clipboardprint?
window.addEvent('domready', function() {
Element.implement({
docFragment: function(){
return document.createDocumentFragment();
}
});
});
We’re going to add options to a select element, based on the JSON request.

view plaincopy to clipboardprint?
var fragment = Element.docFragment();

json.each(function(o){
var option = new Element('option',{'value': o.value, 'html': o.html});
fragment.appendChild(option); //No reflow
});

$('select').appendChild(fragment); //Reflow!
Results
I’ve done some testing and I think it helped me pretty good to speed up my scripts. I’ve modified my cvLinkSelect class and did some testing with it. Here are the results. Not very impressive at this point but you can see it will help the performance.

The test handles a 12 lined JSON request and for each record an option element will be added to the DOM. Not a very big effort for a browser, but you’ll see that there is some difference on the most common browsers and it’s no surprise that IE is the slowest of them all. If you scale this up it has to be a large difference and I’m confident with that.

Read more about createDocumentFragment on Mozilla Developer Center.

reference : http://youngdutchdesign.com/speeding-up-mootools-with-createdocumentfragment

Flipping Out

2011-11-19T20:31:00.000-08:00

Flickr is somewhat unique in that it uses a code repository with no branches; everything is checked into head, and head is pushed to production several times a day. This works well for bug fixes that we want to go out immediately, but presents a problem when we’re working on a new feature that takes several months to complete. How do we solve that problem? With flags and flippers!

Feature Flags

Flags allow us to restrict features to certain environments, while still using the same code base on all servers. In our code, we’ll write something like this:

if ($cfg.enable_unicorn_polo) {
// do something new and amazing here.
}
else {
// do the current boring stuff.
}
We can then set the value of $cfg.enable_unicorn_polo on each environment (false for production, true for dev, etc.). This has the additional benefit of making new feature launches extremely easy: Instead of having to copy a bunch of new code over to the production servers, we simply change a single false to true, which enables the code that has already been on the servers for months.

Feature Flippers

Flags allows us to enable features on a per environment basis, but what if we wanted to be more granular and enable features on a per user basis? For that we use feature flippers. These allow us to turn on features that we are actively developing without being affected by the changes other developers are making. It also lets us turn individual features on and off for testing.

Here is what the Feature Flip page looks like:

Continuously Integrating
Feature flags and flippers mean we don’t have to do merges, and that all code (no matter how far it is from being released) is integrated as soon as it is committed. Deploys become smaller and more frequent; this leads to bugs that are easier to fix, since we can catch them earlier and the amount of changed code is minimized.

This style of development isn’t all rainbows and sunshine. We have to restrict it to the development team because occasionally things go horribly wrong; it’s easy to imagine code that’s in development going awry and corrupting all your data. Also, after launching a feature, we have to go back in the code base and remove the old version (maintaining separate versions of all features on Flickr would be a nightmare). But overall, we find it helps us develop new features faster and with fewer bugs.

reference : http://code.flickr.com/blog/2009/12/02/flipping-out/

Quantum of Deployment

2011-11-19T16:55:00.000-08:00

Deployinator is now Open Source!
Grab it on github: https://github.com/etsy/deployinator

We deploy a lot of code. Deployinator is our creation to make that as easy and painless as possible. Deployinator is a one button web-based deployment app. Hit that button and code goes to our webservers and is serving requests in almost no time. Using Deployinator we’ve brought a typical web push from 3 developers, 1 operations engineer, everyone else on standby and over an hour (when things went smoothly) down to 1 person and under 2 minutes.

At Etsy, we’re doing what’s come to be called Continuous Deployment. However, what we’ve learned is that having a tool like Deployinator is useful for more than just enabling that. This post is about those benefits – for anyone deploying web code.

Why

Our job as engineers (and ops, dev-ops, QA, support, everyone in the company actually) is to enable the business goals. We strongly feel that in order to do that you must have the ability to deploy code quickly and safely. Even if the business goals are to deploy strongly QA’d code once a month at 3am (it’s not for us, we push all the time), having a reliable and easy deployment should be non-negotiable.

It’s a metric I’ve come to call the “quantum of deployment”: what’s the smallest number of steps, with the smallest number of people and the smallest amount of ceremony required to get new code running on your servers? This isn’t a trivial question. Even if you’re on a slow release cycle, and have a push engineer, what happens if there’s an emergency push needed? Does it go through your normal process, or is there a fast-lane? Do your fast-lane deployments get logged? Are they measured for speed? Is everyone aware that it happened the way they would for a normal deployment, or is it your dirty little secret?

It’s not hard to get started. If you currently have a bunch of shell scripts that move everything in place, wrap those up with a single shell script. The most important thing is that it’s ONE easy step. This might require changing your process. Try to remove or replace special cases. The less thought it takes to deploy, the more you can focus on getting stuff done.

Once deploying is No Big Deal, a lot of things can change. Features can go out a piece at a time instead of one all-or-nothing push. Your app configuration options can be in code – and changed quickly. Your hair can grow back. Puppies will lick your face!

What

Custom software? There’s a lot of choice out there, and we generally try to not reinvent the wheel whenever possible (and this wheel has been invented again and again). After comparing our requirements with the available software, we decided to roll our own. Here’s what we were looking for:

Web based
Logged (When, What and Who)
Adaptable to our network
Run from a central location
Announced in our IRC and email
Transparent in regards to its actions
Integrated with our graphing/monitoring tools
A lot of our requirements are inspired by the way Flickr deploys, as documented in Building Scalable Websites (Written by Friend of Etsy, Cal Henderson).

For anyone deploying code (engineers, designers… anyone really), it’s an easy process. Once your code is ready to go, you go to Deployinator and push the button to get it on QA. From there it visits Princess (see the sidebar). Then, when it’s ready to go live, you hit the “Prod” button and soon your code is live, and everyone in IRC knows who pushed what code, complete with a link to the diff. For anyone not on IRC, there’s the email that everyone gets with the same information.

What it looks like
This is the main Deployinator screen. Here is how we deploy the “web stack”.

Sidebar: What the heck is a “Princess”?

Princess is our staging environment. So why didn’t we just call it “staging”? Partly, that’s just how we roll. We used to have an environment called “Staging” that was the last stop before code went live to everyone. However, it was not ideally set up; the first time your code would interact with actual production hardware was when you deployed. Princess uses production data stores, our production network and production hardware. In order to make a clean mental break from the old way, one of our rad engineers, Eric Fixler, came up with “Princess”.

Here’s our IRC bot telling everyone that something went out. It also includes a link to the commits that went live.

How

When we first brought Deployinator online, it was just a web frontend to the shell scripts that moved everything in the right place. What we gained by putting a screen in front of it was the ability to iterate the backend without changing the experience for people deploying. Deployinator currently uses svn to update the code, then rsync to move it between environments.

Another important part of Deployinator is that the environments are a one way street. Code going from Princess to production is unaffected by any commits that have happened since getting on princess. This creates something of a “mantrap“, so that we know exactly what we’re deploying. No surprises!

Deployinator isn’t used just for our web stack either. With the simple architecture we’ve built, we can add all kinds of stuff to it easily. It’s currently used for many different things such as the API, Lists service, internal admin-only tools and others. Having a single deployment process has removed a lot of complexity.

When

This isn’t a post about continuous deployment. Having a very simple deployment procedure is something you should do even if the thought of deploying your code 20 times a day scares you. Deployment can be a contentious subject with many stakeholders. Getting it simple and repeatable allows everyone to share a common vocabulary.

For the nerds…

Transporting the bits and bytes
Here’s a rundown of some of the interesting parts of how Deployinator actually moves bits around. As mentioned above, this has changed and will change again. We analyze our entire process and have some low-hanging performance fruit to pick. As of today, an API push takes about 18 seconds, a Princess push takes about the same, and a production web push is 70-150 seconds. Here are the steps that a web push goes through:

From the repo of truth

We’re deploying directly from trunk (that’s a whole other post!). So the first step of deploying is to update the code on the deploy host.

Builda what now?

After the code is updated, we run “builda”, an app we wrote to take our assets and bundle them up with lots of magic. We use a combination of javascript async loading, Google’s closure and versioned directories to make things like css, javascript and sprites as fast as possible.

Rsync

At this point, we have a bunch of directories on our deploy host that represent our web tree. We then rsync to a staging area on each web box.

Fanout

At some number of boxes, rsyncing back to a single push host stops working. We’re employing a strategy called fan out. We rsync in chunks of 10 hosts at a time. This is one area where a lot of speed ups will be happening soon.

First they came for our assets…

Pop quiz, hotshot: Someone visits the site during a deployment and box 1 (the one they randomly get) has the new code. The html they’re returned refers to a new image. When they request that image, they end up on box 451.. which doesn’t have that asset yet. What do you do? WHAT DO YOU DO?

We’ve solved this with two steps. The first (mentioned above) is versioned asset directories. The next is to get those assets on ALL hosts before ANY host has the new code referring to it.

Graceful

We’re using APC user caching, and expect it to have fresh data each deployment. Things like some application settings, database fields and routes are all cached for super fast lookups. However, if someone changes something in some code going out, we need to make sure that it’s fresh. We’re currently issuing a graceful restart to our apaches on each deployment.

Deployinator itself
One of the design goals of Deployinator has been to be as simple as possible. It’s a sinatra web app, but could really be written in anything. The script that does the svn updating (and checking out for new stacks) is in PHP and some of the straight-up simplest code possible.

The commands that Deployinator runs through for each different stack are listed in ruby methods, and are mostly strings (with servers and such interpolated). It’s easy for anyone to come in and change how something works. Simple, understandable software that gets the job done.

The one fancy bit of Deployinator is the streaming rack middleware that powers the live updating code window:

Database DDLs aren’t code
An awesome feature of Capistrano is the ability to run schema migrations as part of your deployment. At a certain scale, however, database changes become more time consuming and dangerous. All of our schema changes go through a stringent process with several checks in place. However, not all schema is defined in the database. Whenever we have schema that’s defined in code, or inside the data itself, it’s just a normal code push.

Conclusion

Our deployment process is a very important part of how we work at Etsy. We treat it just like our web code, databases or other “serious” things. Deployinator has helped us to get more features out faster with less defects and drama. As we triple our engineering team in 2010 (we’re hiring!), tools like this are what make it possible for us to change the world.

reference : http://codeascraft.etsy.com/2010/05/20/quantum-of-deployment/

Mysql忘記root密碼

2011-11-17T05:24:00.000-08:00

1.先停掉mysql

# /etc/init.d/mysql stop

2.以–skip-grant-table& 的參數啟動mysql
/usr/bin/mysqld_safe --skip-grant-table&

3. 更改root 密碼

# mysql mysql
mysql> UPDATE user SET password=password('123456') WHERE user='root';
mysql> exit

4.停掉mysql再重跑

# /etc/init.d/mysql stop
# mysql -u root -p

reference : http://tw.myblog.yahoo.com/cherry-liang/article?mid=579&prev=633&next=-2&page=1&sc=1

You could use the DOMDocument class to reformat your xml

2011-11-14T17:54:00.000-08:00


$dom = new DOMDocument('1.0');
$dom->preserveWhiteSpace = false;
$dom->formatOutput = true;
$dom->loadXML($simpleXml->asXML());
echo $dom->saveXML();

PHP : XML Create-Add-Edit-Modify using DOM , SimpleXML , XPath

2011-10-28T08:31:00.000-07:00

Over the last few working days, I spent a quite a bit of time playing around with XML. While searching through the net, I found few comprehensive PHP XML guides. There never was a ’1 stop all operations’ guide for learning XML.
As such I decided to club together examples of all kinds of operations I ever did on XML in a single post. I hope it benefits others out there who wish to learn more about XML manipulation.
Note : Since the post got quite large, I decided to only use the Tree Map style parsers – DOM & Simple XML.

Operations Performed:
(1) Create XML OR Array to XML Conversion OR CDATA Element Eg
(2) Edit XML – Edit/Modify Element Data (accessed serially)
(3) Edit XML – Edit specific Elements (accessed conditionally)
(4) Edit XML – Element Addition (to queue end)
(5) Edit XML – Element Addition (to queue start)
(6) Edit XML – Element Addition (before a specific node)
(7) Delete Elements (accessed serially)
(8) Delete Elements (accessed conditionally)
(9) Rearrange / Reorder Elements
(10) Display Required data in XML Form itself OR Remove all children nodes save one OR Copy/Clone Node Eg OR Compare/Search non numeric data (like date or time) to get result.

library.xml will be used in all operations.
ps : I have added the indention & spaces outside the tags in the below xml for a presentable xml form.
Remove them before saving your xml file else most of the usual XML functions wont work in the desired manner.

01

02

03

04
<![CDATA[The Fountainhead]]>
05
Ayn Rand
06
300
07

08

09
<![CDATA[The Lord of the Rings]]>
10
J.R.R.Tolkein
11
500
12

13

14
<![CDATA[The Dark Tower]]>
15
Stephen King
16
200
17

18

#######################################
// (1) Create XML OR
Array to XML Conversion OR
CDATA Element Eg
#######################################

// (i) SimpleXML :

01
// Cant create CDATA element for title in SimpleXML.
02
function fnSimpleXMLCreate()
03
{
04
$arr = array(array('isbn'=>'1001', 'pubdate'=>'1943-01-01', 'title'=>'The Fountainhead',
05
'author'=>'Ayn Rand', 'price'=>'300'),
06
array('isbn'=>'1002', 'pubdate'=>'1954-01-01',
07
'title'=>'The Lord of the Rings', 'author'=>'J.R.R.Tolkein',
08
'price'=>'500'),
09
array('isbn'=>'1003', 'pubdate'=>'1982-01-01', 'title'=>'The Dark Tower',
10
'author'=>'Stephen King', 'price'=>'200'));
11

12
$library = new SimpleXMLElement('');
13

14
for($i=0;$i<3;$i++)
15
{
16
$book = $library->addChild('book');
17
$book->addAttribute('isbn', $arr[$i]['isbn']);
18
$book->addAttribute('pubdate', $arr[$i]['pubdate']);
19
$book->addChild('title', $arr[$i]['title']); //cant create CDATA in SimpleXML.
20
$book->addChild('author', $arr[$i]['author']);
21
$book->addChild('price', $arr[$i]['price']);
22
}
23

24
$library->asXML('library.xml');
25
}

// (ii) DOM :

01
function fnDomCreate()
02
{
03
$arr = array(array('isbn'=>'1001', 'pubdate'=>'1943-01-01', 'title'=>'The Fountainhead',
04
'author'=>'Ayn Rand', 'price'=>'300'),
05
array('isbn'=>'1002', 'pubdate'=>'1954-01-01',
06
'title'=>'The Lord of the Rings', 'author'=>'J.R.R.Tolkein',
07
'price'=>'500'),
08
array('isbn'=>'1003', 'pubdate'=>'1982-01-01', 'title'=>'The Dark Tower',
09
'author'=>'Stephen King', 'price'=>'200'));
10

11
$dom = new DOMDocument();
12
$library = $dom->createElement('library');
13
$dom->appendChild($library);
14

15
for($i=0;$i<3;$i++)
16
{
17
$book = $dom->createElement('book');
18
$book->setAttribute('isbn',$arr[$i]['isbn']);
19
$book->setAttribute('pubdate',$arr[$i]['pubdate']);
20

21
//$prop = $dom->createElement('title', $arr[$i]['title']);
22
$prop = $dom->createElement('title');
23
$text = $dom->createCDATASection($arr[$i]['title']);
24
$prop->appendChild($text);
25
$book->appendChild($prop);
26

27
$prop = $dom->createElement('author', $arr[$i]['author']);
28
$book->appendChild($prop);
29
$prop = $dom->createElement('price', $arr[$i]['price']);
30
$book->appendChild($prop);
31
$library->appendChild($book);
32
}
33
//header("Content-type: text/xml");
34
$dom->save('library.xml');
35
}

#######################################
// (2) Edit XML – Edit/Modify Element Data (accessed serially)
#######################################

// (i) SimpleXML :

1
// Edit Last Book Title
2
function fnSimpleXMLEditElementSeq()
3
{
4
$library = new SimpleXMLElement('library.xml',null,true);
5
$num = count($library);
6
$library->book[$num-1]->title .= ' - The Gunslinger';
7
header("Content-type: text/xml");
8
echo $library->asXML();
9
}

// (ii) DOM :

01
//Edit Last Book Title
02
function fnDOMEditElementSeq()
03
{
04
$dom = new DOMDocument();
05
$dom->load('library.xml');
06
$library = $dom->documentElement;
07
$cnt = $library->childNodes->length;
08

09
$library->childNodes->item($cnt-1)->getElementsByTagName('title')->item(0)->nodeValue .= ' Series';
10
// 2nd way #$library->getElementsByTagName('book')->item($cnt-1)->getElementsByTagName('title')->item(0)->nodeValue .= ' Series';
11

12
//3rd Way
13
//$library->childNodes->item($cnt-1)->childNodes->item(0)->nodeValue .= ' Series';
14
header("Content-type: text/xml");
15
echo $dom->saveXML();
16
}

#######################################
// (3) Edit XML – Edit specific Elements (accessed conditionally)
#######################################

// (i) SimpleXML :

1
//Edit Title of book with author J.R.R.Tolkein
2
function fnSimpleXMLEditElementCond()
3
{
4
$library = new SimpleXMLElement('library.xml',null,true);
5
$book = $library->xpath('/library/book[author="J.R.R.Tolkein"]');
6
$book[0]->title .= ' Series';
7
header("Content-type: text/xml");
8
echo $library->asXML();
9
}

// (ii) DOM (with XPath):

01
//Edit Title of book with author J.R.R.Tolkein
02
function fnDOMEditElementCond()
03
{
04
$dom = new DOMDocument();
05
$dom->load('library.xml');
06
$library = $dom->documentElement;
07
$xpath = new DOMXPath($dom);
08
$result = $xpath->query('/library/book[author="J.R.R.Tolkein"]/title');
09
$result->item(0)->nodeValue .= ' Series';
10
// This will remove the CDATA property of the element.
11
//To retain it, delete this element (see delete eg) & recreate it with CDATA (see create xml eg).
12

13
//2nd Way
14
//$result = $xpath->query('/library/book[author="J.R.R.Tolkein"]');
15
// $result->item(0)->getElementsByTagName('title')->item(0)->nodeValue .= ' Series';
16
header("Content-type: text/xml");
17
echo $dom->saveXML();
18

19
}

#######################################
// (4) Edit XML – Element Addition (to queue end)
#######################################

// (i) SimpleXML :

01
//Add another Book to the end
02
function fnSimpleXMLAddElement2End()
03
{
04
$library = new SimpleXMLElement('library.xml',null,true);
05
$book = $library->addChild('book');
06
$book->addAttribute('isbn', '1004');
07
$book->addAttribute('pubdate', '1960-07-11');
08
$book->addChild('title', "To Kill a Mockingbird");
09
$book->addChild('author', "Harper Lee");
10
$book->addChild('price', "100");
11
header("Content-type: text/xml");
12
echo $library->asXML();
13
}

// (ii) DOM :

01
//Add another Book to the end
02
function fnDOMAddElement2End()
03
{
04
$dom = new DOMDocument();
05
$dom->load('library.xml');
06
$library = $dom->documentElement;
07

08
$book = $dom->createElement('book');
09
$book->setAttribute('isbn','1000');
10
$book->setAttribute('pubdate','1960-07-11');
11

12
$prop = $dom->createElement('title');
13
$text = $dom->createTextNode('To Kill a Mockingbird');
14
$prop->appendChild($text);
15
$book->appendChild($prop);
16

17
$prop = $dom->createElement('author','Harper Lee');
18
$book->appendChild($prop);
19
$prop = $dom->createElement('price','100');
20
$book->appendChild($prop);
21

22
$library->appendChild($book);
23
header("Content-type: text/xml");
24
echo $dom->saveXML();
25
}

#######################################
//(5) Edit XML – Element Addition (to queue start)
#######################################

// (i) SimpleXML :

01
// Add a Book to List Start
02
// Insert Before Functionality not present in SimpleXML
03
// We can integrate DOM with SimpleXML to do it.
04
function fnSimpleXMLAddElement2Start()
05
{
06
$libSimple = new SimpleXMLElement('library.xml',null,true);
07
$libDom = dom_import_simplexml($libSimple);
08

09
$dom = new DOMDocument();
10
//returns a copy of the node to import
11
$libDom = $dom->importNode($libDom, true);
12
//associate it with the current document.
13
$dom->appendChild($libDom);
14

15
fnDOMAddElement2Start($dom); //see below DOM function
16
}

// (ii) DOM :

01
function fnDOMAddElement2Start($dom='')
02
{
03
if(!$dom)
04
{
05
$dom = new DOMDocument();
06
$dom->load('library.xml');
07
}
08
$library = $dom->documentElement;
09
#var_dump($library->childNodes->item(0)->parentNode->nodeName);
10
$book = $dom->createElement('book');
11
$book->setAttribute('isbn','1000');
12
$book->setAttribute('pubdate','1960-07-11');
13

14
$prop = $dom->createElement('title','To Kill a Mockingbird');
15
$book->appendChild($prop);
16
$prop = $dom->createElement('author','Harper Lee');
17
$book->appendChild($prop);
18
$prop = $dom->createElement('price','100');
19
$book->appendChild($prop);
20

21
$library->childNodes->item(0)->parentNode->insertBefore($book,$library->childNodes->item(0));
22
header("Content-type: text/xml");
23
echo $dom->saveXML();
24
}

#######################################
// (6) Edit XML – Element Addition (before a specific node)
#######################################

// (i) SimpleXML :

01
// Add a Book Before attribute isbn 1002
02
// Insert Before Functionality not present in SimpleXML
03
// We can integrate DOM with SimpleXML to do it.
04
function fnSimpleXMLAddElementCond()
05
{
06
$libSimple = new SimpleXMLElement('library.xml',null,true);
07
$libDom = dom_import_simplexml($libSimple);
08

09
$dom = new DOMDocument();
10
//returns a copy of the node to import
11
$libDom = $dom->importNode($libDom, true);
12
//associate it with the current document.
13
$dom->appendChild($libDom);
14

15
fnDOMAddElementCond($dom); //see below DOM eg.
16
}

// (ii) DOM :

01
// Add a Book Before isbn 1002
02
function fnDOMAddElementCond($dom='')
03
{
04
if(!$dom)
05
{
06
$dom = new DOMDocument();
07
$dom->load('library.xml');
08
}
09
$library = $dom->documentElement;
10

11
$book = $dom->createElement('book');
12
$book->setAttribute('isbn','1000');
13
$book->setAttribute('pubdate', '1960-07-11');
14

15
$prop = $dom->createElement('title','To Kill a Mockingbird');
16
$book->appendChild($prop);
17
$prop = $dom->createElement('author','Harper Lee');
18
$book->appendChild($prop);
19
$prop = $dom->createElement('price','100');
20
$book->appendChild($prop);
21

22
$xpath = new DOMXPath($dom);
23
$result = $xpath->query('/library/book[@isbn="1002"]');
24
$library->childNodes->item(0)->parentNode->insertBefore($book,$result->item(0));
25
header("Content-type: text/xml");
26
echo $dom->saveXML();
27
}

#######################################
// (7) Delete Elements (accessed serially)
#######################################

// (i) SimpleXML :

01
// Delete 2nd book
02
function fnSimpleXMLDeleteSeq()
03
{
04
$library = new SimpleXMLElement('library.xml',null,true);
05
//$library->book[1] = null; // this only empties content
06
unset($library->book[1]);
07
header("Content-type: text/xml");
08
echo $library->asXML();
09

10
}

// (ii) DOM :

01
// Delete 2nd Book
02
function fnDOMDeleteSeq()
03
{
04
$dom = new DOMDocument();
05
$dom->load('library.xml');
06
$library = $dom->documentElement;
07

08
$library->childNodes->item(0)->parentNode->removeChild($library->childNodes->item(1));
09

10
header("Content-type: text/xml");
11
echo $dom->saveXML();
12
}

#######################################
// (8) Delete Elements (accessed conditionally)
#######################################

// (i) SimpleXML :

01
// Delete a book with 20002
// Not possible to delete node found via XPath in SimpleXML. See below.
03
function fnSimpleXMLDeleteCond()
04
{
05
$library = new SimpleXMLElement('library.xml',null,true);
06
$book = $library->xpath('/library/book[price>"200" and price<"500"]');
07

08
//Problem here....not able to delete parent node using unset($book[0]);
09
// unset of parent node only works when accessing serially. eg : unset($library->book[0]);
10

11
//header("Content-type: text/xml");
12
//echo $library->asXML();
13

14
}

// (ii) DOM :

01
// Delete the book with 20002
function fnDOMDeleteCond()
03
{
04
$dom = new DOMDocument();
05
$dom->load('library.xml');
06
$library = $dom->documentElement;
07
$xpath = new DOMXPath($dom);
08
$result = $xpath->query('/library/book[price>"200" and price<"500"]');
09
$result->item(0)->parentNode->removeChild($result->item(0));
10
header("Content-type: text/xml");
11
echo $dom->saveXML();
12
}

#######################################
// (9) Rearrange / Reorder Elements
#######################################

// (i) SimpleXML :

01
// Exchange Position of 2nd book with 3rd : fnSimpleXMLRearrange(2,3);
02
// Due to absence of an inbuilt function (DOM has it), we have to make our own function in SimpleXML.
03
//Better to use DOM.
04
function fnSimpleXMLRearrange($num1,$num2)
05
{
06
$libSimple= new SimpleXMLElement('library.xml',null,true);
07
//$library->book[3] = $library->book[0]; // this doesnt work
08

09
$libDom = dom_import_simplexml($libSimple);
10

11
$dom = new DOMDocument();
12
//returns a copy of the node to import
13
$libDom = $dom->importNode($libDom, true);
14
//associate it with the current document.
15
$dom->appendChild($libDom);
16
fnDOMRearrange($num1,$num2,$dom); // see below DOM function
17
}

// (ii) DOM :

01
// Exchange Position of 2nd book with 3rd : fnDOMRearrange(2,3);
02
function fnDOMRearrange($num1,$num2,$dom=0)
03
{
04
if(!$dom)
05
{
06
$dom = new DOMDocument();
07
$dom->load('library.xml');
08
}
09
$dom = new DOMDocument();
10
$dom->load('library.xml');
11
$library = $dom->documentElement;
12

13
$book = $dom->createElement('book');
14
$book->setAttribute('isbn','1000');
15
$book->setAttribute('pubdate','1960-07-11');
16

17
$num1 = fnDOMConvIndex($num1);
18
$num2 = fnDOMConvIndex($num2);
19
$library->childNodes->item(0)->parentNode->insertBefore($library->childNodes->item($num2),$library->childNodes->item($num1));
20
header("Content-type: text/xml");
21
echo $dom->saveXML();
22
}
23
function fnDOMConvIndex($num)
24
{
25
$num = ($num==1)?$num:$num+1;//If its 1 then do nothing.
26
$num = ($num%2)?$num:$num+1; //Always odd index due to nature of DOM Element Index.
27
return $num;
28
}

#######################################
// (10) Display Required data in XML Form itself OR
Remove all children nodes save one OR
Copy/Clone Node Eg OR
Compare/Search non numeric data (like date or time) to get result.
#######################################

// (i) SimpleXML :

1
// Display Books published after 1980 in XML Form itself.
2
// No function to copy node directly in SimpleXML.
3
// Its simpler for this functionality to be implemented in DOM.
4
function fnSimpleXMLDisplayElementCond()
5
{
6
$library = new SimpleXMLElement('library.xml',null,true);
7
$book = $library->xpath('/library/book[translate(@pubdate,"-","")>translate("1980-01-01","-","")]');
8
// Manually create a new structure then add searched data to it (see create xml eg.)
9
}

// (ii) DOM :

01
// Display Books published after 1980 in XML Form itself.
02
function fnDOMDisplayElementCond()
03
{
04
$dom = new DOMDocument();
05
$dom->load('library.xml');
06
$library = $dom->documentElement;
07
$xpath = new DOMXPath($dom);
08

09
// Comparing non numeric standard data
10
$result = $xpath->query('/library/book[translate(@pubdate,"-","")>translate("1980-01-01","-","")]');
11
// For simpler search paramater use this :
12
//$result = $xpath->query('/library/book[author="J.R.R.Tolkein"]');
13

14
// Copy only node & its attributes not its contents.
15
$library = $library->cloneNode(false);
16
// Add the 1 element which is search result.
17
$library->appendChild($result->item(0));
18

19
header("Content-type: text/xml");
20
echo $dom->saveXML($library);
21
}
Lessons Learn’t :
SimpleXML is fantastic for those who will only briefly flirt with XML (or beginners) & perform simple operations on XML.
DOM is an absolute necessity for performing complex operations on XML data. Its learning curve is higher than SimpleXML off course but once you get the hang of it , you will know its very logical.
Use XPath for conditional access to data. For serial access (like last book) XPath is not needed (but u can use it) since I can use normal DOM / SimpleXML node access.

reference : http://quest4knowledge.wordpress.com/2010/09/04/php-xml-create-add-edit-modify-using-dom-simplexml-xpath/

PHP中的生成XML文件的4种方法

2011-10-27T09:21:00.000-07:00

Xml代码

title1
content1
2009-10-11

title2
content2
2009-11-11

【直接生成字符串】
方法1：使用纯粹的PHP代码生成字符串，并把这个字符串写入一个以XML为后缀的文件。这是最原始的生成XML的方法，不过有效！
PHP代码如下：
Php代码

$data_array = array(
array(
'title' => 'title1',
'content' => 'content1',
'pubdate' => '2009-10-11',
),
array(
'title' => 'title2',
'content' => 'content2',
'pubdate' => '2009-11-11',
)
);
$title_size = 1;

$xml = "\n";
$xml .= "

\n";

foreach ($data_array as $data) {
$xml .= create_item($data['title'], $title_size, $data['content'], $data['pubdate']);
}

$xml .= "

\n";

echo $xml;

// 创建XML单项
function create_item($title_data, $title_size, $content_data, $pubdate_data)
{
$item = "\n";
$item .= "" . $title_data . "\n";
$item .= "" . $content_data . "\n";
$item .= " " . $pubdate_data . "\n";
$item .= "\n";

return $item;
}

?>

【DomDocument】
方法2：使用DomDocument生成XML文件
创建节点使用createElement方法，
创建文本内容使用createTextNode方法，
添加子节点使用appendChild方法，
创建属性使用createAttribute方法
PHP代码如下：
Php代码

$data_array = array(
array(
'title' => 'title1',
'content' => 'content1',
'pubdate' => '2009-10-11',
),
array(
'title' => 'title2',
'content' => 'content2',
'pubdate' => '2009-11-11',
)
);

// 属性数组
$attribute_array = array(
'title' => array(
'size' => 1
)
);

// 创建一个XML文档并设置XML版本和编码。。
$dom=new DomDocument('1.0', 'utf-8');

// 创建根节点
$article = $dom->createElement('article');
$dom->appendchild($article);

foreach ($data_array as $data) {
$item = $dom->createElement('item');
$article->appendchild($item);

create_item($dom, $item, $data, $attribute_array);
}

echo $dom->saveXML();

function create_item($dom, $item, $data, $attribute) {
if (is_array($data)) {
foreach ($data as $key => $val) {
// 创建元素
$$key = $dom->createElement($key);
$item->appendchild($$key);

// 创建元素值
$text = $dom->createTextNode($val);
$$key->appendchild($text);

if (isset($attribute[$key])) {
// 如果此字段存在相关属性需要设置
foreach ($attribute[$key] as $akey => $row) {
// 创建属性节点
$$akey = $dom->createAttribute($akey);
$$key->appendchild($$akey);

// 创建属性值节点
$aval = $dom->createTextNode($row);
$$akey->appendChild($aval);
}
} // end if
}
} // end if
} // end function
?>

【XMLWriter】
方法3：使用XMLWriter类创建XML文件
此方法在PHP 5.1.2后有效
另外，它可以输出多种编码的XML，但是输入只能是utf-8
PHP代码如下：
Php代码

$data_array = array(
array(
'title' => 'title1',
'content' => 'content1',
'pubdate' => '2009-10-11',
),
array(
'title' => 'title2',
'content' => 'content2',
'pubdate' => '2009-11-11',
)
);

// 属性数组
$attribute_array = array(
'title' => array(
'size' => 1
)
);

$xml = new XMLWriter();
$xml->openUri("php://output");
// 输出方式，也可以设置为某个xml文件地址，直接输出成文件
$xml->setIndentString(' ');
$xml->setIndent(true);

$xml->startDocument('1.0', 'utf-8');
// 开始创建文件
// 根结点
$xml->startElement('article');

foreach ($data_array as $data) {
$xml->startElement('item');

if (is_array($data)) {
foreach ($data as $key => $row) {
$xml->startElement($key);

if (isset($attribute_array[$key]) && is_array($attribute_array[$key]))
{
foreach ($attribute_array[$key] as $akey => $aval) {
// 设置属性值
$xml->writeAttribute($akey, $aval);
}

}

$xml->text($row); // 设置内容
$xml->endElement(); // $key
}

}
$xml->endElement(); // item
}

$xml->endElement(); // article
$xml->endDocument();

$xml->flush();
?>

【SimpleXML】
方法4：使用SimpleXML创建XML文档
Php代码

$data_array = array(
array(
'title' => 'title1',
'content' => 'content1',
'pubdate' => '2009-10-11',
),
array(
'title' => 'title2',
'content' => 'content2',
'pubdate' => '2009-11-11',
)
);

// 属性数组
$attribute_array = array(
'title' => array(
'size' => 1
)
);

$string = <<

XML;

$xml = simplexml_load_string($string);

foreach ($data_array as $data) {
$item = $xml->addChild('item');
if (is_array($data)) {
foreach ($data as $key => $row) {
$node = $item->addChild($key, $row);

if (isset($attribute_array[$key]) && is_array($attribute_array[$key]))
{
foreach ($attribute_array[$key] as $akey => $aval) {
// 设置属性值
$node->addAttribute($akey, $aval);
}
}
}
}
}
echo $xml->asXML();
?>

reference : http://haroldphp.iteye.com/blog/1090240

【教學】縮放式的簡報工具--Prezi

2011-10-27T09:12:00.000-07:00

Prezi是今年初竄起的簡報工具，由匈牙利人所開發的，其炫麗的簡報畫面，讓人眼睛為之一亮！

數週前，由小弟的啟蒙師父、雙白金資訊教師--鄭文榤老師推薦 Prezi，

自己也玩過後，那自由奔放、有條理且人性化的操作介面，覺得超優的，

但因是英文介面，加上介面的使用方法很創新，故寫下這篇教學文，做個紀錄！

其類似心智圖般的從中間擴散出去，先觀看全局，再分述細部，打破傳統簡報一頁一頁的單向延伸，更符合人類思考的本質；

尤其是 Zooming 的縮放功能很實用，動一下滑鼠滾輪，即可讓讀者 Focus 目前的重點；

簡報路徑的呈現功能也是一絕，很像攝影鏡頭般，把目光從這一個物件忽然拉過去到另一個物件，時時牽引讀者的心；

個人覺得Prezi兼具較 PowerPoint 製作更容易的優點，以及有心智圖擴散性思考的優點，其把呆版的簡報，開創了新的局面，原來上台簡報可以這麼有趣，這麼有條理～

※操作簡介：

操作介面平易近人，就像在一面牆上，貼滿便利貼似的，

藉由十幾個按鈕，把文字、圖片、影片、框框、線條等物件放入，

每個物件就像一個便利貼，皆可直覺式的搬移、縮放、旋轉；

放置定位後，再規劃簡報時的呈現路徑，以便簡報時，Zooming、Focus某一個物件；

若是第一次使用可能會不甚習慣，但因操作介面簡潔，用個一兩次就順手了；

加入會員後，可免費在線上編輯簡報，容量限 100MB，

若付費後，可下載單機版來編輯簡報，也支援多人編輯簡報。

Prezi 有提供教育版，容量有 500 MB，可以不公開自己的作品，並移除 Prezi 的Logo，

申請教育版的步驟：

1. 必須是含有 .edu 的 e-Mail，

2. 選左邊的[Upgrade]選項，

3. 接著點選左邊的，填一些資料，即可升級為教育版囉！

網站名稱：Prezi

連結網址：http://prezi.com/

官網教學：Learn

互動式教學：四分鐘學會Prezi(英文)、使用Prezi的小技巧(英文)

中文教學：Prezi中文教學檔

官網作品：Showcase

本人拙作：維謙老師的自我介紹(Prezi製)、海報設計原則(Prezi製)

※中文教學

若覺得線上觀看略有模糊，請下載高清版的教學 prezi-full.swf

※幾項使用的小技巧（感謝　虎尾國中生生不息的林老師提供）

（1）路徑設在區塊上，FOCUS效果較好。

（2）小線條無法選取時，滑鼠左鍵要按久一點，再放開才可選取。

（3）免費版做出的簡報必為publish版，公開發表出來，付費版則可選隱藏發表。

（4）登入後方下載自己的簡報可成為單機播放使用。

※Prezi 目前的缺點(其製作團隊企圖心很強，這些問題應該有望解決)：

1. 中文支援的問題

1-1 雖支援中文輸入，但有的文字還是闕漏。

1-2 中文模板只有一種。

1-3 只有英文操作介面。

1-4 不支援中文檔名的上傳檔案。

2. 影片、圖片支援的問題

2-1 只支援 .FLV 格式，上傳 .SWF 格式亦可，但播放偶而有問題。(上傳 .WMV 格式有時成功有時失敗)。

2-2 下載的播放檔，在播放影片時，其下方的影片控制按鈕消失了。

2-3 圖片 .GIF 格式上傳後，不支援動畫功能，形成單純的圖片。

3. 文字編輯的問題

3-1 文字顏色太少，只有三種。

3-2 無法選擇字體。

4. 物件的問題

4-1 缺少編輯圖層的功能。

4-2 缺少物件變形的功能。

4-3 編輯物件路徑錯誤時。

4-4 缺少自訂框架的功能。

延伸閱讀：

ZuiPrezi～強力建議Google必買的超炫線上簡報器

Prezi超炫的線上簡報

reference : http://163.32.219.6/blog/u882061/e-originality/2011/06/10/1294

【程式】PHP : Curl with Session

2011-10-27T04:14:00.001-07:00

今天同事問了一個問題
A.php 用 Curl 去抓 B.php 。
然後 B.php 寫在 Session 的東西，
為什麼 A.php 抓不到 (當然 B.php 也抓不到 A.php 的值)，
這是因為 curl 其實產生了另一個 session，
所以就算存了也抓不到。
當然也有解決的方法，就是使用 session_id()
程式如下：
A.php
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
function doHttpRequest($url, $args='') {
$ch = curl_init();
//Post Data
curl_setopt($ch, CURLOPT_POST, 1);
curl_setopt($ch, CURLOPT_POSTFIELDS, 'sid='.session_id());

curl_setopt($ch, CURLOPT_URL, $url);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
$result = curl_exec($ch);
curl_close($ch);
return $result;
}

session_start();
$_SESSION['aa']='[A.php]';
session_write_close();

$url = 'http://cw.dev.com/B.php';
echo doHttpRequest($url);

session_id(session_id());
session_start();
var_dump($_SESSION);
B.php
?
1
2
3
4
session_id($_POST['sid']);
session_start();
$_SESSION['bb']='[B.php]';
var_dump($_SESSION);
執行結果：
array 'aa' => string '[A.php]' (length=7) 'bb' => string '[B.php]' (length=7)
array 'aa' => string '[A.php]' (length=7) 'bb' => string '[B.php]' (length=7)

以上，記錄一下…

reference : http://ching119.pixnet.net/blog/post/59676045-%E3%80%90%E7%A8%8B%E5%BC%8F%E3%80%91php-%3A-curl-with-session

Agilefant 軟體

2011-10-27T01:07:00.000-07:00

在跑 Agile 的人可以試試看

Introducing Phake Mocking Framework

2011-10-26T00:36:00.000-07:00

I have used PHPUnit heavily now for the last 4 years. As anyone that is heavily involved in writing Unit Tests knows, test doubles (commonly referred to as mock objects) are a necessary part of your toolbox. The mocking options that we used to have for PHP unit testing have traditionally been fairly limited and most all of them in some form or another were ports of JMock. The way PHP operates as well as some decisions made to more closely emulate how JMock does things lead to functionality in the existing mock library for PHPUnit that for some are a hassle. This ranges from PHPUnit implicitly calling the “mockee’s” constructor (you have to explicitly specify that you do not want to call the constructor) to the pain of trying to stub or verify multiple invocations of the same method with different parameters.

Over the last three years, my experience as well as the musing of some of my colleagues has led me to believe that a lot of what I don’t like about mocking in php is the result of the fundamental notions of combining stubbing with verification and setting expectations ahead of method calls instead of verifying that what you expected to happen has indeed happened. This was essentially proven to me over the last year and a half as I have been heavily working with Java code and as a result have been using the Mockito mocking library for Java. The result of this work is the Phake Mocking Framework.

Now I am fairly certain that at least 5 or 6 people (which may constitute everyone who reads this) are rolling their eyes by now. So instead of going further into why I like this style of mocking I’ll just show you how to use it. Phake was designed with PHPUnit in mind, however I don’t really see any reason why it couldn’t be used in other testing frameworks as well. It is on my roadmap to confirm support for other frameworks. In any case, I will be using PHPUnit for my examples.

This document assumes you already have a good understanding of the basics of mocking. If the terms ‘Mocking’, ‘Stubbing’, and ‘Test Doubles’ mean nothing to you, I would recommend checking out the following links:

PHPUnit on Mock Objects
Wikipedia on Mock Objects
The Universe on Mock Objects
Getting Started

You can get a copy of Phake from Github. If you are familiar and comfortable with with git you can just clone my repository. If you would rather avoid the trappings of Github, you can also download Phake’s latest release tarball. Either way will result in a directory with two subdirectories: src and test. You will want to move the contents of the src directory to somewhere in your include path (such as /usr/share/php). Once you have done this, you can simply include “Phake.php” in any of your tests or in your bootstrap script and you will be off to the races.

UPDATE!!!

I just set up a pear channel to distribute phake as well. So if you would like to install Phake using pear, just do the following:

pear channel-discover pear.digitalsandwich.com
pear install channel://pear.digitalsandwich.com/Phake-1.0.0alpha
To show you some of the basics of how to use this framework, I am going to write various bits of codes to mock, verify, stub, etc the following class:

class MyClass
{
private $value;

public function __construct($value)
{
$this->value = $value;
}

public function getValue()
{
return $this->value;
}

public function subtract($int)
{
return $this->value - $int;
}
}

?>
Stubbing

require_once 'Phake.php';
class Test extends PHPUnit_Framework_TestCase
{
public function testStubbingGetValue()
{
// Sets up the mock object.
// Analogous to $this->getMock() in PHPUnit
$mock = Phake::mock('MyClass');

// Builds the stub for getValue.
// Essentially any call to getValue will return 42
Phake::when($mock)->getValue()->thenReturn(42);

$this->assertEquals(42, $mock->getValue());
}
}
You can also do conditional stubbing based on passed in parameters.

public function testStubbingGetValue2()
{
$mock = Phake::mock('MyClass');

// You can pass parameters into the stubbed method to indicate you
// only want to stub matching invocations. By default, anything
// passed in must be loosely matched ('==')
Phake::when($mock)->subtract(42)->thenReturn(30);

$this->assertEquals(30, $mock->subtract(42));

// It is important to note that any unstubbed calls will return null.
// Since 41 != 42 this call will return null.
$this->assertNull($mock->subtract(41));
}
If a specific invocation or call of a mock object has not been stubbed, it will return null. This behavior is different than the default behavior of PHPUnit’s mocking framework. If you need the default PHPUnit behavior then you could use something called partial mocks. Partial mocks are setup to call the constructor of the class being mocked and for any call that has not been stubbed, the parent method will be called.

public function testStubbingGetValue3()
{
// Creates a mock object whose constructor will call
// MyClass::__construct(42);
$mock = Phake::partMock('MyClass', 42);

Phake::when($mock)->subtract(42)->thenReturn(0);

// Since 18 != 42, the real method gets call
$this->assertEquals(24, $mock->subtract(18));
}
You can also specify on a per call basis that you want to call the parent, using the thenCallParent() method instead of thenReturn(). The different values you can use for stubbing are referred to as ‘Answers’. Here are a list of them and what they will do when a matching invocation is called:

thenReturn(mixed $var) – Will return the exact value passed in.
thenCallParent() – Will return the results of calling the mocked parent method.
thenThrow(Exception $e) – Will throw $e.
captureReturnTo(&$variable) – Acts exactly like thenCallParent() however it also captures the value that the parent returned to $variable. This allows you to run assertions. This comes in very handy for testing legacy code with protected or private factory methods whose return values are never returned out of the tested method’s scope.
The other thing to take note of stubbing is that any PHPUnit constraints are supported.

public function testStubbingGetValue4()
{
$mock = Phake::mock('MyClass');

//Matches any call to subtract() where the passed in value equals 42
Phake::when($mock)->subtract(42)->thenReturn(30);

//Matches any call to subtract() where the passed in value is less
// than 42. Notice that this is a phpunit constraint
Phake::when($mock)->subtract($this->lessThan(42))->thenReturn(29);

$this->assertEquals(30, $mock->subtract(42));
$this->assertEquals(29, $mock->subtract(41));
}
This gives you the same kind of stubbing flexibility that you have present in PHPUnit.

Verification

Verifying that methods on your stub are called is starkly different then how it is done in PHPUnit. The most apparent symptom of this difference is that you verify calls after the calls to your test methods have been made.

public function testVerify1()
{
// You can apply stubbings and verifications to the same mock objects
$mock = Phake::mock('MyClass');

$mock->getValue();

//Notice, getValue() has already been called
Phake::verify($mock)->getValue();
}
You of course have the same matching functionality at your disposal.

public function testVerify2()
{
$mock = Phake::mock('MyClass');

$mock->subtract(40);

//Notice the constraint
Phake::verify($mock)->subtract($this->lessThan(42));
}
By default, verify only allows a single matching invocation. You can also specify that a specific number of invocations should be allowed.

public function testVerify3()
{
$mock = Phake::mock('MyClass');

$mock->subtract(40);
$mock->subtract(39);

//The number of times is passed as the second parameter of
//Phake::verify()
Phake::verify($mock, Phake::times(2))->subtract($this->lessThan(42));
}
You can also use Phake::atLeast($n) and Phake::atMost($n) instead of Phake::times($n).

You can also specify that you don’t expect there to be any interactions with a mock.

public function testVerify4()
{
$mock = Phake::mock('MyClass');

// This will ensure that UP TO THIS POINT no methods on $mock have
// been called
Phake::verifyNoInteraction($mock);

// This would not result in an error, this can be prevented with
// another method explained below
$mock->getValue();

}
I am sure you noticed the comment that Phake::verifyNoInteraction() only verifies that no calls were made up to that point. You can essentially freeze a mock with another method

public function testVerify5()
{
$mock = Phake::mock('MyClass');

$mock->getValue();

// This will ensure that no methods on $mock will be called after this
// point
Phake::verifyNoFurtherInteraction($mock);
}
There are a few more advanced things you can do with something called argument captors.

public function testVerify6()
{
$mock = Phake::mock('MyClass');

$mock->subtract(42);

// Phake::capture tells Phake to store the parameter passed to
// subtract as the variable $val
Phake::verify($mock)->subtract(Phake::capture($val));

$this->assertEquals(42, $val);
}
This is a very pedestrian example, but it is not that uncommon for fairly complicated objects to passed in and out of methods. Argument capturing allows you to much more succinctly assert the state of those types of parameters. It is definitely overkill for asserting scalar types or simple objects.

More to Come

This really does cover the very basics of the Phake framework. In the coming days I will be putting out smaller more focused articles discussing some of the specific functionality. In the meantime I would love to get some feedback from anyone who is brave enough to play with this. My future roadmap basically involves shoring up the current code base a little bit more, adding a few pieces of missing or suboptimal functionality (I’m not so sure I have implemented ‘consecutive calls’) but I anticipate releasing an RC version no later than the end of January. Also, I am currently using and monitoring the issue tracker for Phake at github, so if you have some functionality you would like or find any bugs in your exploring, you can also open an issue there. Also, if you would like to help out with contributions, they are certainly welcome.

reference : http://digitalsandwich.com/archives/84-introducing-phake-mocking-framework.html

Front-end Code Standards & Best Practices

2011-10-23T09:11:00.000-07:00

Overview

This document contains guidelines for web applications built by the Creative Technology (front end engineering) practice of Isobar US. It is to be readily available to anyone who wishes to check the iterative progress of our best practices. If you have any feedback, please leave a comment on the announcement blog post.

This document's primary motivation is two- fold: 1) code consistency and 2) best practices. By maintaining consistency in coding styles and conventions, we can ease the burden of legacy code maintenance, and mitigate risk of breakage in the future. By adhering to best practices, we ensure optimized page loading, performance and maintainable code.

General Guidelines◊Back to Top
Pillars of Front-end Development◊

Separation of presentation, content, and behavior.
Markup should be well-formed, semantically correct and generally valid.
Javascript should progressively enhance the experience.
General Practices◊

Indentation◊

For all code languages, we require indentation to be done via soft tabs (using the space character). Hitting Tab in your text editor shall be equivalent to four spaces.

Readability vs Compression◊

We prefer readability over file-size savings when it comes to maintaining existing files. Plenty of whitespace is encouraged, along with ASCII art, where appropriate. There is no need for any developer to purposefully compress HTML or CSS, nor obfuscate JavaScript.

We will use server-side or build processes to automatically minify and gzip all static client-side files, such as CSS and JavaScript.

Markup◊Back to Top
The first component of any web page is the tag-based markup language of HTML. The Hyper Text Markup Language (HTML) has a sordid history but has come into its own in the last few years. After a lengthy experimentation with the XML-based XHTML variant the industry has accepted that HTML is the future of the web.

Markup defines the structure and outline of a document and offers a structured content. Markup is not intended to define the look and feel of the content on the page beyond rudimentary concepts such as headers, paragraphs, and lists. The presentation attributes of HTML have all been deprecated and style should be contained in style sheets.

HTML5◊

HTML5 is a new version of HTML and XHTML. The HTML5 draft specification defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of web Applications, an area previously not adequately covered by HTML. (source).

We will use the HTML5 Doctype and HTML5 features when appropriate.

We will test our markup against the W3C validator, to ensure that the markup is well formed. 100% valid code is not a goal, but validation certainly helps to write more maintainable sites as well as debugging code. Isobar does not guarantee code is 100% valid, but instead assures the cross-browser experience is fairly consistent.

Template◊

For HTML5 Documents we use a fork of H5BP modified for our own project needs. Fork the Github repository.

Doctype◊

A proper Doctype which triggers standards mode in your browser should always be used. Quirks mode should always be avoided.

A nice aspect of HTML5 is that it streamlines the amount of code that is required. Meaningless attributes have been dropped, and the DOCTYPE declaration has been simplified significantly. Additionally, there is no need to use CDATA to escape inline JavaScript, formerly a requirement to meet XML strictness in XHTML.

HTML5 Doctype
1.

Character Encoding◊

All markup should be delivered as UTF-8, as its the most friendly for internationalization. It should be designated in both the HTTP header and the head of the document.

Setting the character set using tags.

1.

In HTML5, just do:

1.

General Markup Guidelines◊

The following are general guidelines for structuring your HTML markup. Authors are reminded to always use markup which represents the semantics of the content in the document being created.

Use actual P elements for paragraph delimiters as opposed to multiple BR tags.
Make use of DL (definition lists) and BLOCKQUOTE, when appropriate.
Items in list form should always be housed in a UL, OL, or DL, never a set of DIVs or Ps.
Use label fields to label each form field, the for attribute should associate itself with the input field, so users can click the labels. cursor:pointer; on the label is wise, as well. note 1 note 2
Do not use the size attribute on your input fields. The size attribute is relative to the font-size of the text inside the input. Instead use css width.
Place an html comment on some closing div tags to indicate what element you're closing. It will help when there is lots of nesting and indentation.
Tables shouldn't be used for page layout.
Use microformats and/or Microdata where appropriate, specifically hCard and adr.
Make use of THEAD, TBODY, and TH tags (and Scope attribute) when appropriate.
Table markup with proper syntax (THEAD,TBODY,TH [scope])
01.

02.

03.

04.

05.

06.

07.

08.

09.

10.

11.

12.

13.

14.

Table header 1	Table header 2
Table data 1	Table data 2

Always use title-case for headers and titles. Do not use all caps or all lowercase titles in markup, instead apply the CSS property text-transform:uppercase/lowercase.
Quoting Attributes◊

While the HTML5 specification defines quotes around attributes as optional for consistency with attributes that accept whitespace, all attributes should be quoted.

1.

This is my paragraph of special text.

CSS◊Back to Top
The second component of a web page is the presentation information contained in the Cascading Style Sheet (CSS.) Web browsers successful implementation of CSS has given a whole generation of web authors site-wide control over the look and feel of their web sites.

Just as the information on a web page is semantically described in the HTML Markup, CSS describes all presentation aspects of the page via a description of it's visual properties. CSS is powerful in that these properties are mixed and matched via identifiers to control the page's layout and visual characteristics through the layering of style rules (the "cascade").

General Coding Principles◊

Add CSS through external files, minimizing the # of files, if possible. It should always be in the HEAD of the document.
Use the LINK tag to include, never the @import.
Including a stylesheet
1.

Don't use inline styling
1.

This is poor form, I say

Don't include styles inline in the document, either in a style tag or on the elements. It's harder to track down style rules.
Use a reset CSS file (like the one present in H5BP or the Eric Meyers reset) to zero our cross-browser weirdness.
Use a font-normalization file like YUI fonts.css
Elements that occur only once inside a document should use IDs, otherwise, use classes.
Understand cascading and selector specificity so you can write very terse and effective code.
Write selectors that are optimized for speed. Where possible, avoid expensive CSS selectors. For example, avoid the * wildcard selector and don't qualify ID selectors (e.g. div#myid) or class selectors (e.g. table.results.) This is especially important with web applications where speed is paramount and there can be thousands or even tens of thousands of DOM elements. More on writing efficient CSS on the MDC.
CSS Box Model◊

Intimate knowledge and understanding of the CSS and browser-based box model is necessary for conquering the fundamentals of CSS layouts.

3D CSS Box Model diagram by Jon Hicks.
CSS Validation◊

We typically don't use the W3C validator.

CSS Formatting◊

At minimum, format CSS with selectors on one line and each property on its own line. The declarations are indented.

As an enhancement to that style, related or child styles and additional 2 or 4 spaces. That allows for hierarchical scanning and organization and makes (for some people) an easier-to-read style sheet.

01.
.post-list li a{
02.
color:#A8A8A8;
03.
}
04.
.post-list li a:hover{
05.
color:#000;
06.
text-decoration:none;
07.
}
08.
.post-list li .author a, .post-list li .author a:hover{
09.
color:#F30;
10.
text-transform:uppercase;
11.
}
For multiple author environments, single line CSS should be avoided because it can cause issues with version control.

Alphabetize◊
If you're performance obsessed alphabetizing CSS properties increases the odds of larger repeatable patterns being present to aid in GZIP compression.

Classes vs. IDs◊

You should only give elements an ID attribute if they are unique. They should be applied to that element only and nothing else. Classes can be applied to multiple elements that share the same style properties. Things that should look and work in the same way can have the same class name.

1.

Category 1

Category 2

Category 3

Naming Conventions for Selectors◊

It is always preferable to name something, be it an ID or a class, by the nature of what it is rather than by what it looks like. For instance, a class name of bigBlueText for a special note on a page is quite meaningless if it has been changed to have a small red text color. Using a more intelligent convention such as noteText is better because when the visual style changes it still makes sense.

Selectors◊

The CSS Selectors Level 3 specification introduces a whole new set of CSS Selectors that are extremely useful for better selection of elements.

Pseudo-classes◊
Pseudo-classes enable you to dynamically style content. Some pseudo-classes have existed since CSS1 (:visited, :hover, etc.) and CSS2 (:first-child, :lang). As of CSS3, 16 new pseudo-classes have been added to the list and are especially useful for styling dynamic content. Learn how to use pseudo-classes in-depth.

Combinators & Attribute Selectors◊
Combinators provide shortcuts for selecting elements that are a descendant element, a child element, or an element's sibling.

Attribute Selectors are great for finding elements that have a specific attribute and/or specific value. Knowledge of regular expressions helps with attribute selectors.

Specificity◊
Browsers calculate a selector's specificity to determine which CSS rule should apply. If two selectors apply to the same element, the one with the higher specificity wins.

IDs have a higher specificity than attribute selectors do, and class selectors have higher specificity than any number of element selectors. Always try to use IDs to increase the specificity. There are times when we may try to apply a CSS rule to an element and it does not work no matter what we try. This is likely because the specificity of the selector used is lower than another one and the properties of the higher one are taking precedence over those you want to apply. This is more common in working with larger more complex stylesheets. It isn't a big issue with smaller projects usually.

Calculating specifity◊

When working with a large and complex stylesheet it helps to know how to calculate the value of a selector's specificity, to save you time and to make your selectors more efficient.

Specificity is calculated by counting various components of your CSS and expressing them in a form (a,b,c,d).

Element, Pseudo Element: d = 1 – (0,0,0,1)
Class, Pseudo class, Attribute: c = 1 – (0,0,1,0)
Id: b = 1 – (0,1,0,0)
Inline Style: a = 1 – (1,0,0,0)
However, it may be better to use a specificity calculator.

Specificity Calculator
Some things you should know about specificity
IE Specificity bugs
Using !important overrides all specificity no matter how high it is. We like to avoid using it for this reason. Most of the time it is not necessary. Even if you need to override a selector in a stylesheet you don't have access to, there are usually ways to override it without using !important. Avoid using it if possible.

Pixels vs. Ems◊

We use the px unit of measurement to define font size, because it offers absolute control over text. We realize that using the em unit for font sizing used to be popular, to accommodate for Internet Explorer 6 not resizing pixel based text. However, all major browsers (including IE7 and IE8) now support text resizing of pixel units and/or full-page zooming. Since IE6 is largely considered deprecated, pixels sizing is preferred. Additionally, unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size.

Correct
1.
#selector {
2.
font-size: 13px;
3.
line-height: 1.5; /* 13 * 1.5 = 19.5 ~ Rounds to 20px. */
4.
}
Incorrect
1.
/* Equivalent to 13px font-size and 20px line-height, but only if the browser default text size is 16px. */
2.
#selector {
3.
font-size: 0.813em;
4.
line-height: 1.25em;
5.
}
Internet Explorer Bugs◊

Inevitably, when all other browsers appear to be working correctly, any and all versions of Internet Explorer will introduce a few nonsensical bugs, delaying time to deployment. While we encourage troubleshooting and building code that will work in all browsers without special modifications, sometimes it is necessary to use conditional if IE comments for CSS hooks we can use in our stylesheets. Read more on paulirish.com

Fixing IE
1.

2.

3.

4.

5.

1.
.box { float: left; margin-left: 20px; }
2.
.ie6 .box { margin-left: 10px; }
If you're using HTML5 (and the HTML5 Boilerplate) we encourage the use of the Modernizer JavaScript library and this pattern:

1.

2.

3.

4.

5.

Shorthand◊

In general, CSS shorthand is preferred because of its terseness, and the ability to later go back and add in values that are already present, such as the case with margin and padding. Developers should be aware of the TRBL acronym, denoting the order in which the sides of an element are defined, in a clock-wise manner: Top, Right, Bottom, Left. If bottom is undefined, it inherits its value from top. Likewise, if left is undefined, it inherits its value from right. If only the top value is defined, all sides inherit from that one declaration.

For more on reducing stylesheet code redundancy, and using CSS shorthand in general:
http://qrayg.com/journal/news/css-background-shorthand
http://sonspring.com/journal/css-redundancy
http://dustindiaz.com/css-shorthand
Images◊

For repeating images, use something larger than 1x1 pixels
You should never be using spacer images.
Use CSS sprites generously. They make hover states easy, improve page load time, and reduce carbon dioxide emissions.
Typically, all images should be sliced with a transparent background (PNG8). All should be cropped tightly to the image boundaries.
However, the logo should always have a background matte and have padding before the crop. (so other people can hotlink to the file)
General Text and Font Styling◊

Headings◊
Define default styling for h1-h6 headings including headings as links. It's helpful to declare these at the top of your CSS document, and modify them with as necessary for consistency across the site.
Headings should show a hierarchy indicating different levels of importance from the top down starting with h1 having the largest font size.
SEO: To get a rough idea of how your page hierarchy is organized and read, use your Developer Toolbar to disable CSS. You'll end up with a text-based view of all your h1-h6 tags, strong, em, etc.
Links◊
Default styles for links should be declared and different from the main text styling, and with differing styles for hover state.
When styling links with underlines use border-bottom and some padding with text-decoration: none;. This just looks better.
Web Typography◊

The use of custom fonts and typefaces on the web has been growing more popular the past few years. with native browser support on the rise and several supporting services and APIs now available there is real momentum in this space. Each of these approaches have their own pros and cons. Before a project kicks off it's best to do research into technology and licensing limitations to choose the proper approach for the specific project.

All of these approaches have drawbacks in code overhead, development time and performance (clock and perceived). Familiarizing yourself with these issues and communicating them to the other members of the team and to the client will save significant problems later on in the project.

Listed here are some popular methods of embed custom fonts, list in the order of our preference for implementation.

@font-face◊

The @font-face at-rule allows you to define custom fonts. It was first defined in the CSS2 specification, but was removed from CSS2.1. Currently, it's a draft recommendation for CSS3.

Our first and most preferred choice for customizing fonts on the web is @font-face, simply because it is part of the CSS Fonts Module working draft which means it will continue to grow in popularity as browser support grows, and ease of use for it improves as it becomes more stable.

For now, when using @font-face it's recommended to declare the source for each font format. This is important if you want it to work in the most number of browsers, though it is not a requirement for use.

The font formats included in the specification are:
woff: WOFF (Web Open Font Format)
ttf: TrueType
ttf, otf: OpenType
eot: Embedded OpenType
svg, svgz: SVG Font
Bulletproof @font-face◊
For full cross-browser compatibility use Fontsprings' new bulletproof @font-face syntax (latest version as of 2/21/11).

01.
@font-face {
02.
font-family: 'MyFontFamily';
03.
src: url('myfont-webfont.eot'); /* IE9 Compat Modes */
04.
src: url('myfont-webfont.eot?iefix') format('eot'), /* IE6-IE8 */
05.
url('myfont-webfont.woff') format('woff'), /* Modern Browsers */
06.
url('myfont-webfont.ttf') format('truetype'), /* Safari, Android, iOS */
07.
url('myfont-webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
08.
font-weight: ;
09.
font-style: ;
10.
// etc.
11.
}
Here's a working demo using this version of implementation.

Cross-Browser Compatibility◊
Safari, IE 6-9, IE 9 Compatibility Modes, Firefox, Chrome, iOS, Android, Opera

Prevent Compatibility Mode◊
Sometimes IE can have a mind of its own and will switch to compatibility mode without you knowing. Include the following in the site to prevent your site from defaulting to compatibility mode:

1.

Tips for @font-face◊
IE 6–8 will only accept a TrueType font packaged as an EOT.
font-weight and font-style have different meanings within @font-face. Declarations where font-weight:bold; means this is the bold version of this typeface, rather than apply bold to this text
@font-face gotchas
Pros
Easy to implement
Large variety of APIs
Customizable
Easy to add to elements
Nothing required besides CSS
Is currently part of the working draft of CSS Fonts Module 3
Cons
Limited browser support if used improperly
Some older versions of modern browsers (Chrome, Opera) don't always render well. Text can have rough edges. **I have not been able to confirm whether this is still an issue now or not.
Google WebFonts API & Font Loader◊

There are two options available with Google Webfonts. Both options have their downsides of course but they can be just as good to use as @font-face, it all depends on a projects needs.

Webfonts API◊
Google's Webfonts API essentially does the same thing as @font-face, it just does all the hard work for you, providing wider browser support.The major drawback to this method is the very small font library it uses. To make it work all you need to do is include the stylesheet + the font name.

1.

Then define a style for the selector you want to apply the font to:
1.
CSS selector {
2.
font-family: 'Font Name', serif;
3.
}
Webfont Loader◊

Another option Google offers is the Webfont Loader which is a JavaScript library that allows for more control than the font API does. You can also use multiple webfont providers like Typekit. To use it include the script in your page:

01.

Including the webfont.js file this way is faster if not already using the Ajax APIs. Otherwise you should use this:
1.

2.

By using the Webfont Loader you have more ability to customize things including the use of more fonts, not just those in the Google Webfont library which is not large. However, it then requires you to load JavaScript, sacrificing one thing for another.

Pros
Very easy to implement
Wide browser support
Can be combined with Typekit
Customizable when using the font loader
API does the same thing as @font-face
Cons
Very small font library if using the font API
Using the Webfont Loader requires the use of JavaScript to work
Most browsers will load the rest of the page first, leaving a blank space where the text would be, or otherwise show the fallback option if one exists, until the page fully loads.
Some fonts in the webfont library render poorly on Windows
Cufon◊

If you choose to use Cufon, it is highly recommended you use the Cufon compressed version. You will need to convert your font using the generator.

1.

2.

3.

We recommend using Cufon sparingly since it can cause a lot of overhead if applied to a large amount of text. For more info visit the Cufon Wiki.

Pros
Wide browser support
Renders well in supported browsers
Customizable
Easy to implement
Cons
Requires use of JS to work
Text can't be selected that uses it
Not all characters can be used
Customization can be a pain
Not always easy to apply to multiple elements, especially when adding effects like hovers
Typekit◊

Using Typekit has its advantages and shouldn't be completely disregarded when choosing which method to use for adding custom fonts to a web site. It has strong platform integration and is a scalable and popular service. It can be used with Google Webfonts and is easily added to WordPress, Posterous, Typepad, and other similar CMS powered sites.

However, full use of Typekit doesn't come without a cost. If you need to use it on more than 2 sites or on a site that gets a high amount of pageviews you will need to pay an annual cost of $49.99, and for sites with a million+ pageviews it costs twice as much. Though, you probably have the money to cover the cost if you're getting over a million pageviews. If not then you may want to rethink your business model.

Pros
Large font library, including Adobe fonts
Easy implementation
Google Webfont API and blogging platform integration
Free plan has limits but doesn't expire
Cons
Requires JavaScript to use
Limited font library access without paying
Free and cheapest plans only allow use on 1-2 web sites and 2-5 fonts per site
You have to pay to use it on more than 1 site
Scalable Inman Flash Replacement (sIFR)◊

We do not recommend that you use this method but because of how widely used it is we felt it was necessary to include so you could make a properly informed decision when choosing which method to go with for customized webfonts.

Despite its wide popularity among web designers, and its decent support in most browsers, the drawbacks to its use outweigh its convenience. The biggest and most obvious reason to not use sIFR is the fact that it uses Flash. Plus, in order for the Flash to even work, it requires JavaScript and the scripts must be loaded before the text you use it on is visible on the page. Not to mention that it increases page load time, and can cause a slow site to be even slower.

We'll let you do the math here.
Pros
Text can be selected
Support on most browsers
Renders okay on supported browsers
Cons
It uses Flash
Requires JavaScript for the Flash to work
It's Flash!
Text doesn't appear until the scripts load
...and it's Flash...
Font Licensing◊

Even though you can transform just about any font into a web font file, you should still make sure it is legally okay for you to do so. Many foundries have updated their conditions to specify how their fonts can be used on the web. View Font Licensing and Protection Details for more information.

Specifications & Font File Formats◊

CSS 2 Fonts – May 1998 (Obsolete)
CSS 3 Fonts – Working Draft 2009
CSS Fonts Module – W3C Working Draft March 2011
WOFF Font Format – Working Draft 2010
SVG Font Format
Embedded Open Type (EOT) File Format
Microsoft Open Type Specification
OpenType Feature File Specification
Apple True Type Reference

JavaScript◊Back to Top
JavaScript is the third major component of a web page. JavaScript code, when properly applied to a web page, enhances the overall user and browser-based experience through attaching to events and controlling the overall behavior layer.

JavaScript has seen an explosion in popularity in recent years as powerful new browser implementations have finally empowered the creation of full on browser-based web applications. Additionally, careful use of JavaScript allows for full manipulation and control over the other two components of web page authoring, HTML Markup and CSS. Today the structure of pages and the visual styles of pages can be manipulated real time without full web page refreshes.

JavaScript Libraries◊

We primarily develop new applications in jQuery, though we have expertise in plain JavaScript as well as all major modern javascript libraries.
General Coding Principles◊

99% of code should be housed in external javascript files. They should be included at the END of the BODY tag for maximum page performance.
Don't rely on the user-agent string. Do proper feature detection. (More at Dive Into HTML5: Detection & jQuery.support docs)
Don't use document.write().
All Boolean variables should start with "is".
Test for positive conditions
1.
isValid = (test.value >= 4 && test.success);
Name variables and functions logically: For example: popUpWindowForAd rather than myWindow.
Don't manually minify. With the exception of the traditional i, etc. for for loops, variables should be long enough to be meaningful.
Documentation should follow NaturalDocs structure.
Constants or configuration variables (like animation durations, etc.) should be at the top of the file.
Strive to create functions which can be generalized, take parameters, and return values. This allows for substantial code reuse and, when combined with includes or external scripts, can reduce the overhead when scripts need to change. For example, instead of hard coding a pop-window with window size, options, and url, consider creating a function which takes size, url, and options as variables.
Comment your code! It helps reduce time spent troubleshooting JavaScript functions.
Don't waste your time with comments surrounding your inline javascript, unless you care about Netscape 4. :)
Organize your code as an Object Literal/Singleton, in the Module Pattern, or as an Object with constructors.
Minimize global variables - the less globals you create, the better. Generally one, for your application namespace, is a good number.
When specifying any global variable, clearly identify it
1.
window.globalVar = { ... }
White-space◊

In general, the use of whitespace should follow longstanding English reading conventions. Such that, there will be one space after each comma and colon (and semi-colon where applicable), but no spaces immediately inside the right and left sides of parenthesis. In short, we advocate readability within reason. Additionally, braces should always appear on the same line as their preceding argument.

Consider the following examples of a JavaScript for-loop...

Correct
1.
for (var i = 0, j = arr.length; i < j; i++) {
2.
// Do something.
3.
}
Incorrect
1.
for ( var i = 0, j = arr.length; i < j; i++ )
2.
{
3.
// Do something.
4.
}
Also incorrect
1.
for(var i=0,j=arr.length;i2.
// Do something.
3.
}
plugins.js and script.js◊

Starting with H5BP we're presented with two files, plugins.js and script.js. This section outlines basic usage of these two files.

plugins.js◊
Plugins.js is meant to hold all of a sites plugin code. Instead of linking to many different files, we can improve performance by including plugin code directly in this one file. There can and should be exceptions to this usage. An extremely large plugin only used on one rarely visited page, for example, might be better off in a separate download, only accessed on the target page. Most of the time, however, it's safe to just paste in minified versions of all your plugins here for easy access.

Here's what an example file might looks like, including a small table of contents. This can serve as a handy guide for what plugins are in use, including URLs for documentation, rationale for use and the like.

01.
/* PLUGIN DIRECTORY
02.
What you can find in this file [listed in order they appear]
03.

04.
1.) Animate Background Position - http://plugins.jquery.com/project/backgroundPosition-Effect
05.
2.) jQuery Easing Plugin - http://gsgd.co.uk/sandbox/jquery/easing/
06.
3.) jQuery Ajax Form plugin - http://jquery.malsup.com/form/#download
07.
4.) jQuery validation plugin (form validation) - http://docs.jquery.com/Plugins/Validation
08.
-password strength
09.
5.) Styled Selects (lightweight) - http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview
10.
*/
11.

12.
/**
13.
* 1.) Animate Background Position - http://plugins.jquery.com/project/backgroundPosition-Effect
14.
* @author Alexander Farkas
15.
* v. 1.21
16.
*/
17.
(function($) {
18.
if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8
19.
//SNIPPED
20.
};
21.
})(jQuery);
22.

23.

24.
/**
25.
* 2.) jQuery Easing Plugin (we're not using jQuery UI as of yet) - http://gsgd.co.uk/sandbox/jquery/easing/
26.
*/
27.

28.
// t: current time, b: begInnIng value, c: change In value, d: duration
29.
jQuery.easing['jswing'] = jQuery.easing['swing'];
30.

31.
jQuery.extend( jQuery.easing,
32.
{
33.
//SNIPPED
34.

35.
});
36.
;(function($) {
37.
$.fn.ajaxSubmit = function(options) {
38.
//SNIPPED
39.
}
40.
})(jQuery);
41.

42.
/*
43.
* jQuery Styled Select Boxes
44.
* version: 1.1 (2009/03/24)
45.
* @requires jQuery v1.2.6 or later
46.
*
47.
* Examples and documentation at: http://code.google.com/p/lnet/wiki/jQueryStyledSelectOverview
48.
*
49.
* Copyright (c) 2008 Lasar Liepins, liepins.org, liepins@gmail.com
50.
*
51.
* Permission is hereby granted, free of charge, to any person obtaining a copy
52.
* of this software and associated documentation files (the "Software"), to deal
53.
* in the Software without restriction, including without limitation the rights
54.
* to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
55.
* copies of the Software, and to permit persons to whom the Software is
56.
* furnished to do so, subject to the following conditions:
57.
*
58.
* The above copyright notice and this permission notice shall be included in
59.
* all copies or substantial portions of the Software.
60.
*
61.
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
62.
* IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
63.
* FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
64.
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
65.
* LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
66.
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
67.
* THE SOFTWARE.
68.
*
69.
*/
70.

71.
jQuery.fn.styledSelect = function(settings) {
72.
//SNIPPED
73.
return this;
74.
};
Script.js◊
Script.js is meant to hold your site or application code. Again, this isn't always the best solution as larger teams and or larger, more feature rich projects can really benefit from breaking out application code into module or feature specific files. For smaller sites, simpler applications, and initial prototyping, however, dropping your work into scripts.js makes sense.

A simplified example, using the Markup-based unobtrusive comprehensive DOM-ready execution pattern, might look something like the following:

01.
/* Name: Demo
02.
Author: Demo King */
03.
/*demo namespace*/
04.
demo = {
05.
common : {
06.
init : function(){
07.
//initialize
08.
},
09.
finalize : function(){
10.
//finalize
11.
},
12.
config : {
13.
prop : "my value",
14.
constant : "42"
15.
}
16.
},
17.
mapping : {
18.
init : function(){
19.
//create a map
20.
},
21.
geolocate : function(){
22.
//geolocation is cool
23.
},
24.
geocode : function(){
25.
//look up an address or landmark
26.
},
27.
drawPolylines : function(){
28.
//draw some lines on a map
29.
},
30.
placeMarker : function(){
31.
//place markers on the map
32.
}
33.
}
34.
}
Variables, ID & Class◊

All JavaScript variables shall be written in either completely lowercase letter or camelCase. The one exception to this are Constructor functions, which are capitalized by tradition. All id and class declarations in CSS shall be written in only lowercase. Neither dashes nor underscores shall be used.

Event Delegation◊

When assigning unobtrusive event listeners, it is typically acceptable to assign the event listener directly to the element(s) which will trigger some resulting action. However, occasionally there may be multiple elements which match the criteria for which you are checking, and attaching event listeners to each one might negatively impact performance. In such cases you should use event delegation instead.

jQuery's delegate() is preferred over live() for performance reasons.

Debugging◊

Even with the best of validators, inevitably browser quirks will cause issues. There are several invaluable tools which will help to refine code integrity and loading speed. It is important that you have all of these tools available to you, despite the browser you primarily use for development. We recommend developing for Firefox and Safari first, then Google Chrome and Opera, with additional tweaks via conditional comments just for Internet Explorer. The following is a list of helpful debuggers and speed analyzers...

Firefox: Firebug, Page Speed, YSlow
Safari: Web Inspector
Google Chrome: Developer Tools
Opera: Dragonfly
Internet Explorer 6-7: Developer Toolbar
Internet Explorer 8-10: Developer Tools
Patterns for better JavaScript◊

Writing Maintainable Code
Single var Pattern
Hoisting: A Problem with Scattered vars
(Not) Augmenting Built-in Prototypes
Avoiding Implied Typecasting
Avoiding eval()
Number Conversions with parseInt()
Opening Brace Location
Capitalizing Constructors
Writing Comments
Avoid void
Avoid with Statement
Avoid continue Statement
Avoid Bitwise Operators if possible
Stoyan Stefanov covers these and more in detail here.

Accessibility◊Back to Top
Section 508 Standards for intranet and internet information and applications.

— Interfaces developed by Isobar should meet Section 508 standards.
W3C checklist of checkpoints for accessibility.

— Interfaces developed by Isobar should meet Priority 1 guidelines.
— The WCAG 1.0 Guidelines.

Performance◊Back to Top
As we continue to push the limits of what the web can do, it remains just as important a web page can be used with minimal effort or wait time. The following section explains how web pages can be optimized to keep all audiences happy.

Optimize Delivery of CSS and JavaScript◊

There are many optimizations that should be done for serving CSS and javascript in Production:

Follow the Yahoo Performance Guidelines
Smush images using smush.it. Also using YSlow can autosmush all your images for you.
Set caching headers appropriately.
Consider a cookie-less subdomain for static assets
Avoid inline

Mac — Adding Hex Color Picker to Color Picker

2011-09-23T00:36:00.000-07:00

I’ve actually been launching Photoshop here and there to get my color picker (ridiculous, I know), or if I manage to remember, preview + color picker.
It’s time to set up a real hex color picker.
First, let’s make the color picker an executable app.
Push CMD + Space, and run AppleScript Editor

In the window that appears, type in “choose color”.

Save it as an app in the “file format” field, and name it what you’d like.

Now I’d go ahead and give it the icon of the Digital Color Meter and throw it on the dock:

Install HexColorPicker
Download file at http://wafflesoftware.net/hexpicker/
and move the HexColorPicker.colorPicker to your ~/Library/ColorPickers

You’re done — start the app and look at your shiny new tab on the right.

reference : http://yuji.wordpress.com/2010/08/01/mac-adding-hex-color-picker-to-color-picker/

讓AJAX動態內容支援瀏覽器回上頁功能

2011-09-22T03:05:00.000-07:00

隨著AJAX動態更新技術的普及，手邊專案有愈來愈多網頁開始實現"無PostBack"的設計風格，透過jQuery $.post(), $.get()與ASP.NET程式溝通，執行查詢、更新作業並取得結果，再動態改變HTML DOM回應使用者。(註: 對ASP.NET開發者來說，UpdatePanel是另一個無痛實現AJAX化的選項，但有些副作用)

由使用者的回饋來看，減少網頁PostBack與網頁重新導向次數，確實大幅提高操作回應速度，提供更好的操作體驗，不過倒有一個常被垢病之處 --- 使用者明明覺得點選操作後瀏覽器切換到下一個畫面，為什麼按覽器的回上頁卻無法回到上個畫面?

細究這個問題的根源，在於程式是透過AJAX方式取得下一畫面內容更新在網頁上，或是動態顯示/隱藏不同的DOM元素，給予使用者"由操作網頁A切換到操作網頁B"的認知，但以瀏覽器的角度，卻始終是同一個網頁；由於使用者覺得網頁已被切換過，當需要回前一個介面進行資料修改或重新選擇時，直覺上便會去點選"回上頁"，結果跳過了AJAX切換介面的過程，直接進入這個網頁前的瀏覽網頁，造成認知與執行結果的落差，形成抱怨。

當然，在吃過幾次悶虧(例如: 回上頁造成結果沒儲存之類的，這個倒有解藥)，碰了一鼻子灰之後，使用者就會學乖，自動避開"在某某網頁不能按【回上頁】，很可怕，不要問"的地雷。或者，我們也可以恐嚇提示或教育使用者避免在這類介面按回上頁，或是在網頁加上自己寫的"AJAX版回上頁"按鈕實現切換回上一個UI效果做為替代，不過，這些治標做法終究無法完全避免使用者誤觸回上頁所造成的困擾。

用一個實例來展示這個問題:

排版顯示純文字

AJAX GoBack

STEP1

STEP2

FINAL

線上展示

以上的網頁包含三個

，假裝是輸入流程中的三個步驟，STEP1按Next可以跳到STEP2，STEP2按Next可以跳到STEP3。在操作上，讓使用者感覺在不同的網頁介面間切換，但對瀏覽器來說，自始至終都在同一網頁，於是，如圖所以，操作時連回上頁鈕都沒得按。

搞HTML的老骨頭可能記得#書籤的用法(參考[請看"書籤"相關說明])，在網頁MyPage.htm中放入，當URL指定MyPage.htm#myBookmark，瀏覽器就會開啟該網頁並捲動到的所在位置。有趣的是，MyPage.htm#a跟MyPage.htm#b可被視為不同網址(這表示在瀏覽歷史中會出現一筆)，卻又不會觸發網頁重新載入，這個特性讓AJAX回上頁問題出現一線曙光。

在URI規範中，#符號後方所帶的資訊被定義成Fragment Identifier(#是Hash symbol，#後方的內容也被稱為hash)，不只是作為書籤定址，還可實現AJAX的歷史巡覽功能(from Wiki: With the rise of AJAX, some websites use fragment identifiers to emulate the back button behavior of browsers for page changes that do not require a reload, or to emulate subpages.)，硬綁綁的規範讓人頭好痛，這裡只研究怎麼應用就好。

以下是一個簡單的hash應用示範(請使用IE8/9/10的標準模式、Firefox、Chrome或Safari執行)

排版顯示純文字

Hash Demo

線上展示

網頁裡有一小段程式，會在第0-7秒時，在URL的最後方加上#s0-#s7，執行完畢後，按瀏覽器回上頁及回下頁可在不同的#sn間切換，按下"Show location.href"則會顯示目前的location.hash，當來回切換上一頁下一頁，下方hash=#sn的

顯示並不會被清除，驗證了網頁並未被重新載入，Javascript及DOM的狀態在切換過程中不會遺失。

但很不幸地，IE7(或IE8/9開相容模式)對location.hash特性支援不夠完整，hash改變時並不會在瀏覽歷史中產生記錄，因此需要透過加入隱藏式iframe等特殊手法來克服，自己處理跨瀏覽器議題太辛苦，有個很好用的jQuery外掛BBQ(不是中秋烤肉巴比Q，是Back Button & Query)可以讓我們輕鬆寫出跨瀏覽器版的AJAX回上頁功能。

小小改寫前述STEP1-STEP2-FINAL網頁，主要是在切換網頁時透過$.bbq.pushState()將目前的階段設成location.hash(#step=sn)，另外在window.onhashchage事件則加入一小段程式，讀取hash值決定現在是STEP1,2還是FINAL，以及該顯示哪一個

。如此，一旦使用者按下回上頁/回下頁，URL中的hash不同就會觸發hashchange事件，程式就能依指定的階段切換不同的

。

排版顯示純文字

AJAX GoBack

STEP1

STEP2

FINAL

線上展示

經過這番加工，網頁就能跨瀏覽器支援回上頁功能，我們又向高級AJAX網頁開發再前進一步囉!

reference : http://blog.darkthread.net/post-2011-09-22-ajax-goback.aspx?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+Darkthread+%28Darkthread%29

Mac OSX intelliJ idea 10.5.2 XDebug setting

2011-09-21T23:23:00.000-07:00

Install XDebug
Download [xdebug.so] from http://code.activestate.com/komodo/remotedebugging/
Click [PHP Remote Debugging Client] > [Mac OS X (universal)]
$ copy xdebug.so /Applications/XAMPP/xamppfiles/lib/php/php-5.3.1/extensions/no-debug-non-zts-20090626/xdebug.so

edit php.ini
$vi /path/to/php.ini


[xdebug]
zend_extension = /Applications/XAMPP/xamppfiles/lib/php/php-5.3.1/extensions/no-debug-non-zts-20090626/xdebug.so
xdebug.profiler_enable = 1
xdebug.profiler_output_dir = /tmp/xdebug
xdebug.profiler_enable_trigger =1
xdebug.remote_enable=on
xdebug.remote_handler=dbgp
xdebug.remote_host=localhost
xdebug.remote_port=9000

Set the path of php bin
[Preferences] > PHP
PHP Home :
/Applications/XAMPP/xamppfiles/bin
Debugger : Xdebug

Set the Server information
Name : MySiteName
Host : 127.0.0.1
Port : 3171
Debugger : Xdebug

Senerio 1: Javascript Debug Settings
Step1: [Run] > [Debug Configurations] > Defaults > JavaScript Debug(Mouse right click) > Add New Configuration
Step2:
Switch to [Remote] tab
-Name : JS-IndexPHP (Example: If I want to link to index.php)
-URL to open : http://127.0.0.1:3171/index.php (Apache webserver url link to index.php)
-Browser : Chrome
Step3: Set path of Chrome [/Applications/Google Chrome.app]
[Preferences] > Web Browsers > Chrome
check [Active]

Senerio 1: PHPUnit Settings(AllTests.php testsuite)
Step1: [Run] > [Debug Configurations] > Defaults > PHPUnit > Add New Configuration
Step2:
Switch to [Configuration] tab
-Test : All in File
-Test file : /path/to/build/testCase/phpunit/AllTests.php

Senerio 1: PHPUnit Settings(CustomTest.php testclass)
Step1: [Run] > [Debug Configurations] > Defaults > PHPUnit > Add New Configuration
Step2:
Switch to [Configuration] tab
-Test : Class or Suite
-Test file : /path/to/build/testCase/phpunit/inc/class/widgetPool/class/db/WidgetPoolDB.php
- Test class : WidgetPoolDBTest

Eclipse 下右鍵打開文件所在文件夾(Explorer Files) Plugin

2011-09-18T22:33:00.000-07:00

如果你經常需要在Eclipse裡打開相關資源文件所在的文件夾，比較麻煩，要右鍵，屬性，在Location一欄中把所在的文件夾Copy一下，然後再去資源管理器裡輸入這個路徑，Enter，打開它。

解決方法：用EasyExplorer插件，有了這個插件就可以很方便地打開資源文件所在的文件夾了.

安裝： EasyExplorer 從http://sourceforge.net/projects/easystruts

IntelliJ IDea PHPUnit Support

2011-09-15T22:49:00.000-07:00

After you set up PHPUnit, Web IDE greatly helps you to run your tests. Namely, to quickly create test run configuration:

Right-click the desired target: a directory or a PHP file in the Project view, or a test class/method name in the code editor
Choose Run to start or Create to specify additional parameters
That’s it!

XML configuration file

Advanced settings can be specified through PHPUnit configuration file. All the options specified in Web IDE take precedence over those set in configuration file.

Test groups

A test can be tagged as belonging to one or more groups using the @group annotation as shown below.

The test is run if none of the specified groups is excluded and at least one group is included.

Run/Debug Tests

Before you execute tests, please set up PHP home directory (one that contains PHP executable) in Settings | PHP. Debugging is currently available via XDebug. Specify the same debug port in Settings | PHP as in php.ini file (xdebug.remote_port=).

Test results window

You can easily navigate from tests results tree and stack trace to the corresponding source code location.

When debugging your tests you get all the features, such as watches, expressions evaluation, etc. You can have several debug sessions simultaneously.

All of these features will be available since next EAP.

Test with pleasure!

This entry was posted in Feature and tagged PHP, PhpStorm, PHPUnit, testing. Bookmark the permalink.
page: 2

Web IDE EAP (build 94.5)
Posted on December 9, 2009 by neuro159

There are numerous updates in this build. As usually, most notable are listed below, with details on all (S)FTP, PHPUnit, formatting, javascript and other fixes available in the issue tracker.

Code analyzer will recognize classes, functions and constants referenced by their PHP 5.3 use aliases.
Added PHP Unit debugging and XML config support (included/excluded groups etc.)
Rename refactoring will take care of @param annotations
Undefined variable inspection will recognize pass by reference parameters as appropriate declarations, i.e. in preg_match(.., .. &$matches)
Basic “Add declaration” quickfix for unresolved class methods, properties and constants (Alt-Enter)
Tools|Analyze stacktrace
It looks like we’re done with PHPUnit support – no pending feature requests or bug fixes, please check it out.

Nearest plans include complete support for namespaces to finally close PHP 5.3 support, improved remote synchronization setup and all fixes and neat features that we will be able to stuff-in, just as usual.

Also since IntelliJ IDEA 9.0 is now released we are expecting third party plugins to be updated for 9.0 platform compatibility – that will bring them to WebIDE plugin repository.

Download Web IDE EAP build 94.5 for your platform from project EAP page.

-JetBrains Web IDE Team

reference : http://blog.jetbrains.com/webide/2009/12/phpunit-support/

Zend Studio 8.0 PHPUnit Debugger setting[use XDebug in Max OSX 10.6]

2011-09-09T11:26:00.000-07:00

Predefined:
XAMPP version 1.7.3
PHP 5.3.1

Step1 : Install XDebug
Download [xdebug.so] from http://code.activestate.com/komodo/remotedebugging/
Click [PHP Remote Debugging Client] > [Mac OS X (universal)]
$ copy xdebug.so /Applications/XAMPP/xamppfiles/lib/php/php-5.3.1/extensions/no-debug-non-zts-20090626/xdebug.so

Step2 : Edit php.ini
$ vi /Applications/XAMPP/etc/php.ini


[XDebug]
zend_extension = /Applications/XAMPP/xamppfiles/lib/php/php-5.3.1/extensions/no-debug-non-zts-20090626/xdebug.so

Zend Studio 8 setting as below:

Zend Studio 8.0.1 PHPUnit Debugger setting[use XDebug in Windows Server2008]

2011-09-09T10:35:00.000-07:00

Predefined:

php.ini as below:


[XDebug]
zend_extension = C:\AppServ\php5\ext\php_xdebug-2.1.0-5.3-vc9-nts.dll

[PHPUnit]
include_path = ".;C:\CruiseControl\projects\Widget_Framework\Int\build\phpunit\PHPUnit"

[Zend]
;zend_extension="C:\Program Files (x86)\Zend\Zend Studio - 8.0.1\plugins\org.zend.php.debug.debugger.win32.x86_5.3.18.v20110322\resources\php53\ZendDebugger.dll"
zend_debugger.allow_hosts=127.0.0.1
zend_debugger.expose_remotely=always
zend_debugger.connector_port = 10013

Zend Debugger setting as below:

A project with that name already exists in the wor

2011-08-16T08:18:00.000-07:00

Keyword : Eclipse The project could not be created. This may occur if a project in by that name already exists
Solution : You need to open up the Project Explorer view (it may already be open) and delete the project from within there.

CruiseControl how to reset build number

2011-08-16T08:15:00.000-07:00

Step 1 : stop cruisecontrol service
Step 2 : Delete C:\CruiseControl\*.ser
Step 3 : Delete C:\CruiseControl\artifacts\*
Step 4 : Delete C:\CruiseControl\logs\*
Step 5 : start cruisecontrol service

Use NuSOAP Create your Web Service

2011-08-11T01:34:00.000-07:00

NuSOAP is a group of PHP classes that allow developers to create and consume SOAP web services. It does not require any special PHP extensions. The current release version (0.6.7) of NuSOAP at the time this was written (03-November-2004), supports much of the SOAP 1.1 specification. It can generate WSDL 1.1 and also consume it for use in serialization. Both rpc/encoded and document/literal services are supported. However, it must be noted that NuSOAP does not provide coverage of the SOAP 1.1 and WSDL 1.1 that is as complete as some other implementations, such as .NET and Apache Axis.

This document follows up Introduction to NuSOAP, Programming with NuSOAP, and Programming with NuSOAP Part 2 with additional samples that demonstrate how to use NuSOAP to create and consume SOAP web services using WSDL.

Hello, World Redux
The New Client
Defining New Data Structures
Hello, World Redux

Showing no imagination whatsoever, I used the ubiquitous "Hello, World" example in Introduction to NuSOAP. In that document, I showed the SOAP request and response exchanged by the client and server. Here, I extend that sample to use WSDL.

A WSDL document provides metadata for a service. NuSOAP allows a programmer to specify the WSDL to be generated for the service programmatically using additional fields and methods of the soap_server class.

The service code must do a number of things in order for correct WSDL to be generated. Information about the service is specified by calling the configureWSDL method. Information about each method is specified by supplying additional parameters to the register method. Service code for using WSDL is shown in the following example.

// Pull in the NuSOAP code
require_once('nusoap.php');
// Create the server instance
$server = new soap_server();
// Initialize WSDL support
$server->configureWSDL('hellowsdl', 'urn:hellowsdl');
// Register the method to expose
$server->register('hello', // method name
array('name' => 'xsd:string'), // input parameters
array('return' => 'xsd:string'), // output parameters
'urn:hellowsdl', // namespace
'urn:hellowsdl#hello', // soapaction
'rpc', // style
'encoded', // use
'Says hello to the caller' // documentation
);
// Define the method as a PHP function
function hello($name) {
return 'Hello, ' . $name;
}
// Use the request to (try to) invoke the service
$HTTP_RAW_POST_DATA = isset($HTTP_RAW_POST_DATA) ? $HTTP_RAW_POST_DATA : '';
$server->service($HTTP_RAW_POST_DATA);
?>
Now for some magic. Point a Web browser at this service, which in my environment is at http://localhost/phphack/hellowsdl.php. The HTML that is returned to your browser gives you links to view the WSDL for the service or view information about each method, in this case the hello method. The screen should look something like this.

hellowsdl
View the WSDL for the service. Click on an operation name to view it's details.

hello
Displaying the details for the hello operation looks something like this.

hellowsdl
View the WSDL for the service. Click on an operation name to view it's details.

hello
Close

Name: hello
Binding: hellowsdlBinding
Endpoint: http://localhost/phphack/hellowsdl.php
SoapAction: urn:hellowsdl#hello
Style: rpc
Input:
use: encoded
namespace: urn:hellowsdl
encodingStyle: http://schemas.xmlsoap.org/soap/encoding/
message: helloRequest
parts:
name: xsd:string
Output:
use: encoded
namespace: urn:hellowsdl
encodingStyle: http://schemas.xmlsoap.org/soap/encoding/
message: helloResponse
parts:
return: xsd:string
Namespace: urn:hellowsdl
Transport: http://schemas.xmlsoap.org/soap/http
Documentation: Says hello to the caller
So, with just a little code added to the service, NuSOAP provides browsable documentation of the service. But, that is not all. By either clicking the WSDL link on the documentation page, or by pointing the browser at the service with a query string of ?wsdl (e.g. http://localhost/phphack/hellowsdl.php?wsdl), you get the following WSDL.

xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/"
xmlns:si="http://soapinterop.org/xsd"
xmlns:tns="urn:hellowsdl"
xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"
xmlns:wsdl="http://schemas.xmlsoap.org/wsdl/"
xmlns="http://schemas.xmlsoap.org/wsdl/"
targetNamespace="urn:hellowsdl">

Says hello to the caller

encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/>

encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/>

Return to top.
The New Client

Adding a few NuSOAP WSDL calls to the service allows it to generate WSDL and other documentation. By comparison, client support for WSDL is anti-climactic, at least for this simple example. The simple client shown below is not much different than the non-WSDL client. The only difference is that the constructor for the soapclient class is provided the URL of the WSDL, rather than the service endpoint.

// Pull in the NuSOAP code
require_once('nusoap.php');
// Create the client instance
$client = new nusoap_client('http://localhost/phphack/hellowsdl.php?wsdl', true);
// Check for an error
$err = $client->getError();
if ($err) {
// Display the error
echo '

Constructor error

' . $err . '

';
// At this point, you know the call that follows will fail
}
// Call the SOAP method
$result = $client->call('hello', array('name' => 'Scott'));
// Check for a fault
if ($client->fault) {
echo '

Fault

';

    print_r($result);

    echo '

';
} else {
// Check for errors
$err = $client->getError();
if ($err) {
// Display the error
echo '

Error

' . $err . '

';
} else {
// Display the result
echo '

Result

';

        print_r($result);

    echo '

';
}
}
// Display the request and response
echo '

Request

';
echo '

' . htmlspecialchars($client->request, ENT_QUOTES) . '

';
echo '

Response

';
echo '

' . htmlspecialchars($client->response, ENT_QUOTES) . '

';
// Display the debug messages
echo '

Debug

';
echo '

' . htmlspecialchars($client->debug_str, ENT_QUOTES) . '

';
?>
Here are the request and response for this WSDL implementation.

POST /phphack/hellowsdl.php HTTP/1.0
Host: localhost
User-Agent: NuSOAP/0.6.8 (1.81)
Content-Type: text/xml; charset=ISO-8859-1
SOAPAction: "urn:hellowsdl#hello"
Content-Length: 550

xmlns:SOAP-ENV="http://schemas.xmlsoap.org/soap/envelope/"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/"
xmlns:si="http://soapinterop.org/xsd"
xmlns:tns="urn:hellowsdl">

Scott

HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
Date: Wed, 03 Nov 2004 21:05:34 GMT
X-Powered-By: ASP.NET
X-Powered-By: PHP/4.3.4
Server: NuSOAP Server v0.6.8
X-SOAP-Server: NuSOAP/0.6.8 (1.81)
Content-Type: text/xml; charset=ISO-8859-1
Content-Length: 551

Hello, Scott

Return to top.
Defining New Data Structures

An important aspect of WSDL is that it can encapsulate one or more XML Schema, allowing programmers to describe the data structures used by a service. To illustrate how NuSOAP supports this, I will add WSDL code to the SOAP struct example in Programming with NuSOAP Part 2.

The service code gains the changes already shown in the Hello, World example, but it also has code to define the Person data structure.

// Pull in the NuSOAP code
require_once('nusoap.php');
// Create the server instance
$server = new soap_server();
// Initialize WSDL support
$server->configureWSDL('hellowsdl2', 'urn:hellowsdl2');
// Register the data structures used by the service
$server->wsdl->addComplexType(
'Person',
'complexType',
'struct',
'all',
'',
array(
'firstname' => array('name' => 'firstname', 'type' => 'xsd:string'),
'age' => array('name' => 'age', 'type' => 'xsd:int'),
'gender' => array('name' => 'gender', 'type' => 'xsd:string')
)
);
$server->wsdl->addComplexType(
'SweepstakesGreeting',
'complexType',
'struct',
'all',
'',
array(
'greeting' => array('name' => 'greeting', 'type' => 'xsd:string'),
'winner' => array('name' => 'winner', 'type' => 'xsd:boolean')
)
);
// Register the method to expose
$server->register('hello', // method name
array('person' => 'tns:Person'), // input parameters
array('return' => 'tns:SweepstakesGreeting'), // output parameters
'urn:hellowsdl2', // namespace
'urn:hellowsdl2#hello', // soapaction
'rpc', // style
'encoded', // use
'Greet a person entering the sweepstakes' // documentation
);
// Define the method as a PHP function
function hello($person) {
$greeting = 'Hello, ' . $person['firstname'] .
'. It is nice to meet a ' . $person['age'] .
' year old ' . $person['gender'] . '.';

$winner = $person['firstname'] == 'Scott';

return array(
'greeting' => $greeting,
'winner' => $winner
);
}
// Use the request to (try to) invoke the service
$HTTP_RAW_POST_DATA = isset($HTTP_RAW_POST_DATA) ? $HTTP_RAW_POST_DATA : '';
$server->service($HTTP_RAW_POST_DATA);
?>
Besides the additional code to support WSDL, the code for the service method itself is changed slightly. With WSDL, it is no longer necessary to use the soapval object to specify the name and data type for the return value.

Similarly, the WSDL client does not need to use a soapval to specify the name and data type of the parameter, as shown in the following code.

// Pull in the NuSOAP code
require_once('nusoap.php');
// Create the client instance
$client = new soapclient('http://localhost/phphack/hellowsdl2.php?wsdl', true);
// Check for an error
$err = $client->getError();
if ($err) {
// Display the error
echo '

Constructor error

' . $err . '

';
// At this point, you know the call that follows will fail
}
// Call the SOAP method
$person = array('firstname' => 'Willi', 'age' => 22, 'gender' => 'male');
$result = $client->call('hello', array('person' => $person));
// Check for a fault
if ($client->fault) {
echo '

Fault

';

    print_r($result);

    echo '

';
} else {
// Check for errors
$err = $client->getError();
if ($err) {
// Display the error
echo '

Error

' . $err . '

';
} else {
// Display the result
echo '

Result

';

        print_r($result);

    echo '

';
}
}
// Display the request and response
echo '

Request

';
echo '

' . htmlspecialchars($client->request, ENT_QUOTES) . '

';
echo '

Response

';
echo '

' . htmlspecialchars($client->response, ENT_QUOTES) . '

';
// Display the debug messages
echo '

Debug

';
echo '

' . htmlspecialchars($client->debug_str, ENT_QUOTES) . '

';
?>
WSDL enables one more capability on the client. Instead of using the call method of the soapclient class, a proxy can be used. The proxy is a class that mirrors the service, in that it has the same methods with the same parameters as the service. Some programmers prefer to use proxies because the code reads as method calls on object instances, rather than invocations through the call method. A client that uses a proxy is shown below.

// Pull in the NuSOAP code
require_once('nusoap.php');
// Create the client instance
$client = new soapclient('http://localhost/phphack/hellowsdl2.php?wsdl', true);
// Check for an error
$err = $client->getError();
if ($err) {
// Display the error
echo '

Constructor error

' . $err . '

';
// At this point, you know the call that follows will fail
}
// Create the proxy
$proxy = $client->getProxy();
// Call the SOAP method
$person = array('firstname' => 'Willi', 'age' => 22, 'gender' => 'male');
$result = $proxy->hello($person);
// Check for a fault
if ($proxy->fault) {
echo '

Fault

';

    print_r($result);

    echo '

';
} else {
// Check for errors
$err = $proxy->getError();
if ($err) {
// Display the error
echo '

Error

' . $err . '

';
} else {
// Display the result
echo '

Result

';

        print_r($result);

    echo '

';
}
}
// Display the request and response
echo '

Request

';
echo '

' . htmlspecialchars($proxy->request, ENT_QUOTES) . '

';
echo '

Response

';
echo '

' . htmlspecialchars($proxy->response, ENT_QUOTES) . '

';
// Display the debug messages
echo '

Debug

';
echo '

' . htmlspecialchars($proxy->debug_str, ENT_QUOTES) . '

';
?>
Regardless of whether the "regular" or proxy coding style is used, the request and response messages are the same.

POST /phphack/hellowsdl2.php HTTP/1.0
Host: localhost
User-Agent: NuSOAP/0.6.8 (1.81)
Content-Type: text/xml; charset=ISO-8859-1
SOAPAction: "urn:hellowsdl2#hello"
Content-Length: 676

Willi
22
male

HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
Date: Wed, 03 Nov 2004 21:20:44 GMT
X-Powered-By: ASP.NET
X-Powered-By: PHP/4.3.4
Server: NuSOAP Server v0.6.8
X-SOAP-Server: NuSOAP/0.6.8 (1.81)
Content-Type: text/xml; charset=ISO-8859-1
Content-Length: 720

Hello, Willi. It is nice to meet a 22 year old male.

0

Return to top.
You can download the source for these examples as well.

Return to top.
Resources

Join the NuSOAP mailing list to learn more and ask questions.
The home of the NuSOAP project.
NuSOAP home of Dietrich Ayala, the author of NuSOAP.

PS : If you use PHP5, Use nusoap_client() instead of soapclient(). PHP5 has some problem with legacy functions on NuSoap. Otherwise you will occurs error [PHP Fatal error: SoapClient::SoapClient() Invalid parameters]
reference : http://www.scottnichol.com/nusoapprogwsdl.htm

After VMWare converter, Windows failed to start. A recent hardware or software change might be the cause. (0xc0000225)

2011-08-10T02:10:00.000-07:00

If you tried to expand a VMware virtual disk on a Windows Vista or Windows Server 2008 VM, or you just messed up your Windows then you might have run into this nasty error when trying to boot:

Windows failed to start. A recent hardware or software change might be the cause.

File: \Windows\system23\winload.exe

Status: 0xc0000225

Windows failed to start (0xc0000225) – error screen
I got a bit worried when I saw this, since I didnt really want to set up a new VM for my development environment. It was an easy fix though, lucky me. After looking around on the web a bit, it was pretty clear that Windows Vista and Windows Server 2008 really does not like it when you resize its partitions behind its back. It renders the disk unbootable and that needs to be fixed.

Windows Vista:

Boot up on your installation DVD. Choose country and keyboard layout and click “Next”. At the next screen and choose “Repair your computer”. It will fix this problem. If you don’t have the installation DVD you might be in trouble

Windows Server 2008:

Windows Server 2008 unfortunately is a bit different than Vista when it comes to repairing this partition, but don’t worry it’s quite simple what we need to do.

Boot up on your Windows DVD.

Select your keyboard layout and click next and on the next screen click “Repair your computer”

At the System Recovery Options screen, select the Windows Server 2008 OS from the list, and click “next”
Select the “Command Prompt” option and type:

cd recovery
startrep

When it’s done, click “Finish”. It will now reboot. Select “Start Windows Normally” during boot.

Checkdisk will run automatically before starting windows up, to make sure everything is fine.

reference : http://code-journey.com/2009/windows-failed-to-start-a-recent-hardware-or-software-change-might-be-the-cause-0xc0000225/

Scrum Project Management Tools

2011-07-29T02:23:00.000-07:00

http://www.rallydev.com/

十人以內免費 :)

Mac OSX Zend Studio 8 newline problem

2011-07-13T02:02:00.000-07:00

Situation:
I use Zend Studio8 in mac os,
when I use source->format

the newline will change to \r\n,
After submit to P4.

My colleagues open the file in windows platform,
There will appear the extra newline.

Solution:
Preference -> General -> Workspace -> New text file line delimeter
choose Other -> Unix

Why is xcopy returning “invalid number of parameters”?

2011-06-27T20:04:00.000-07:00

1.The usual solution for this is to be sure that your filenames are enclosed in quotes, as this can be an issue with batch files where you have something like xcopy %1 %2 and you really need xcopy "%1" "%2".
2.xcopy is parsing the forward slashes in the path to its own binary. You can also run into this if you have your PATH defined using forward slashes instead of backslashes.

reference : http://superuser.com/questions/114178/why-is-xcopy-returning-invalid-number-of-parameters

利用 XCOPY 和批次檔 .BAT 功能做備份

2011-06-26T03:48:00.000-07:00


rem 是註解, 可以依照個人需求 移除 OR 增加 

代碼:

rem ----- 檔案名稱 : BACKUP.BAT -------------------------------------------------------
rem ----- 用途 : 利用 XCOPY 和 .BAT 功能做備份 ----------------------------------------

rem ----- 將 BACKUP.BAT 加入 系統排程 ( 可以手動加入 [開始][程式集][啟動] 中 ) ------  
rem at 23:00 /every:s,m,t,w,th,f,sa "d:\LU\BACKUP.bat" 

rem ----- XCOPY 用法 可用 "XCOPY /?" 查詢 ---------------------------------------------
rem  XCOPY 差異備份常用參數
rem  /D:m-d-y     複製在指定日期當天或之後發生變更的檔案。如果沒有給日期，只複製那些來源檔案日期比目的檔案日期為新的檔案。
rem  /H           時複製隱藏檔和系統檔。
rem  /I           如果目的不存在且複製一個以上的檔案的話，就假?#93;指定的目的一定是目錄。
rem  /S           複製每個目錄及其?#93;含的子目錄，不複製空目錄。
rem  /E           複製每個目錄及其?#93;含的子目錄，?#93;複製空目錄。/S 與 /E 相同，能夠用來修改 /T。
rem  /Y           不要提示您確定是否要覆蓋一個已經存在的檔案。

rem ----- 增加 route 資料, 廢除 ---------------
rem route add 140.127.177.17 192.168.0.2

rem ----- 將開始備份時間寫入 log 紀錄中 -----------------------------------------------------------------------
rem %date% 表示日期環境變數, %date:~0,4% 表示  日期環境變數中從第 0 個位置抓出 4 個字
echo %date:~0,4%%date:~5,2%%date:~8,2% 網頁資料備份紀錄檔 > D:\Backup\log\%date:~0,4%%date:~5,2%%date:~8,2%.log 
echo 始備份時間 >> D:\Backup\log\%date:~0,4%%date:~5,2%%date:~8,2%.log 
TIME /T    >> D:\Backup\log\%date:~0,4%%date:~5,2%%date:~8,2%.log 

rem ------ [完整備份] 將網站資料備份到 以 日期為目錄名稱 的目錄中 --------------------------------------------------------
rem xcopy c:\inetpub D:\Backup\%date:~0,4%%date:~5,2%%date:~8,2% /h /i /s /k /o /y >> D:\Backup\log\%date:~0,4%%date:~5,2%%date:~8,2%.log 

rem ----- [差異備份] 備份 MSN 表情符號, 改名成 .gif 方便?#91;看, 更名失敗表示重複, 可刪除
XCOPY "C:\Documents and Settings\lu\Application Data\Microsoft\MSN Messenger\1061698994\CustomEmoticons" "D:\CustomEmoticons" /D /H /I /S /Y
REN D:\CustomEmoticons\*.dat *.gif
DEL D:\CustomEmoticons\*.dat 

rem ------ [差異備份] 備份 MSN 表情符號 到 File Server 的個人備份區 
XCOPY D:\CustomEmoticons Z:\CustomEmoticons\ /D /H /I /S /Y

rem ------ [差異備份] 備份 我的最愛 到自己的 D: 磁碟 --------------------------------------------------------------
rem 使用 %USERPROFILE% 環境變數, 它代表 "C:\Documents and Settings\(使用者登入帳號)" 
XCOPY %USERPROFILE%\Favorites   "z:\Favorites\"  /D /H /I /S /Y
rem XCOPY "C:\Documents and Settings\lu\Favorites"                                 "D:\Favorites\"  /D /H /I /S /Y

rem ------ [差異備份] 備份 Outlook Express 6.x 通訊錄 到自己的 D: 磁碟 -------------------------------------------------------------------
XCOPY "%USERPROFILE%\Application Data\Microsoft\Address Book"   "D:\Address Book\"  /D /H /I /S /Y
rem XCOPY "C:\Documents and Settings\lu\Application Data\Microsoft\Address Book"   "D:\Address Book\"  /D /H /I /S /Y
      
rem ------ [差異備份] 備份 我的最愛 到 File Server 的個人備份區 -----------------------------------------------------------
XCOPY %USERPROFILE%\Favorites   "z:\Favorites\"  /D /H /I /S /Y
rem XCOPY "C:\Documents and Settings\lu\Favorites"                                 "z:\Favorites\"  /D /H /I /S /Y

rem ------ [差異備份] 備份 Outlook Express 6.x 通訊錄 到 File Server 的個人備份區 -----------------------------------------------------------
XCOPY "%USERPROFILE%\Application Data\Microsoft\Address Book"   "z:\Address Book\"  /D /H /I /S /Y
rem XCOPY "C:\Documents and Settings\lu\Application Data\Microsoft\Address Book"   "z:\Address Book\"  /D /H /I /S /Y

rem ----- [壓縮完整備份] 將 D:\lu 用 WinRAR 壓縮放在 d:\lu.rar 或 d:\日期.rar ----------------------
rem WinRar 是商業軟體, 網?#125; http://www.rarsoft.com/
rem c:\progra~1\winrar\rar a -r d:\lu.rar d:\lu\*
rem c:\progra~1\winrar\rar a -r d:\%date:~0,4%%date:~5,2%%date:~8,2%.rar d:\lu\*
rem "C:\Program Files\WinRar\rar a -r d:\%date:~0,4%%date:~5,2%%date:~8,2%.rar d:\lu\*

rem ----- [壓縮完整備份] 將 D:\lu 用 7-zip 壓縮 ----------------------
rem 7-Zip 是免費軟體, 網?#125; http://www.7-zip.org/
rem "C:\program Files\7-zip\7z" a -r c:\%date:~0,4%%date:~5,2%%date:~8,2%.7z d:\lu\*.*
rem 壓縮成為 .zip 格式
rem "C:\program Files\7-zip\7z" a -r -tzip c:\%date:~0,4%%date:~5,2%%date:~8,2%.zip d:\lu\*.*

rem ----- 差異備份, 異動檔案輸出到 1.log -----
rem XCOPY D:\LU Z:\LU\ /D /H /I /S /Y  >> c:\1.log
XCOPY D:\LU Z:\LU\ /D /H /I /S /Y 

rem ------ 備份 Outlook 信件 -------------------------------------------------
rem echo 請先關閉 Outlook , 否則 Outlook 信件無法備份 
rem pause
XCOPY "D:\Outlook"   "z:\Outlook\" /D /H /I /S /Y

rem ------ 備份 hosts 檔案 ------------------------------------------------- 
XCOPY C:\WINDOWS\system32\drivers\etc\hosts  z:\   /D /H /I /S /Y

rem ------ 輸出備份完成時間 -----------------------------------------------
echo 結束備份時間 >> D:\Backup\log\%date:~0,4%%date:~5,2%%date:~8,2%.log 
TIME /T    >> D:\Backup\log\%date:~0,4%%date:~5,2%%date:~8,2%.log

reference : http://www.bestlong.idv.tw/redirect.php?tid=763&goto=lastpost

XSLT 筆記

2011-06-21T16:32:00.000-07:00

PS: 這是筆記，不是詳細的教學手冊

◎ XSLT 可用於 XML 轉換成其他格式的 XML, HTML 或其他格式檔，所以，將它視為

檔案格式轉換程式

或，一種 Template Engine

◎ 和 DOM Tree 的處理一樣，藉由 XPath 的方式來「指定」XML 文件內的特定 element，然後進行各 element 內容的萃取以及處理，一些可以縮寫的 XPath 語法

非縮寫	縮寫	說明
/	/	root
child:para	para	目前節點下所有 para 的子點（只有下一層)
/child:para	/para	root 下所有 para 的子點
descendant::para	.//para	目前節點下所有 para 的子點（不限只有下一層)
/descendant::para	//para	root 節點下所有 para 的子點（不限只有下一層)
attribute::id	@id	具有 id 的屬性的節點
attribute::*	@*	所有屬性的節點
child::chapter[position()=5]	chapter[5]
child::chapter[attribute::id="this-one"]	chapter[@id="this-one"]
child::chapter[not(attribute::include="y")]	child::chapter[not(@include="y")]
/descendant::text()	//text()	目前節點下的所有文字節點
child::part[attribute::num="1"][attribute::draft="y"]	part[@num="1"][@draft="y"]
parent::node()[attribute::include="y"]	..[@include="y"]	選擇 include 屬性內包含 "y" 的母節點
/descendent::chapter[attribute::id and attribute::include]	//chapter[@id and @include]

◎ 例子：資料檔假設 data.xml

<?xml version="1.0"?>
<Position>
    <X>9</X>
    <Y>9</Y>
</Position>
<Position>
    <X>10</X>
    <Y>9</Y>
</Position>

我們可以撰寫一個 xsl 檔，假設為 extract.xsl

 
<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
    <xsl:output method="text"/>
 
    <xsl:template match="Position">
           <xsl:value-of select="./X" />
           <xsl:text>,</xsl:text>
           <xsl:value-of select="./Y" />
    </xsl:template>
 
</xsl:stylesheet>

然後，我們可以抓個 XSLT Processor，比如 Saxon ，執行

 
java -jar saxon.jar data.xml convert.xsl

就會產生

 
9,9
10,9

的結果

◎ 當然，有其他更複雜的操作方式，略記一些常用的語法

xsl:apply-templates 整個 XSLT 的核心語法

xsl:template

xsl:value-of select=xxx 將結果輸出

xsl:import href=xxx 可以 reuse 其他 xsl 檔

xsl:include 同前者，唯相同定義出現，這個會中止 compile.

xsl:strip-space xsl:preserve-space 處理空白

xsl:output

xsl:key

xsl:decimal-format 用來設定數字的格式

xsl:namespace-alias

xsl:attribute-set 設定屬性組

xsl:variable xsl:param 處理一些變數運算

條件式判斷
- xsl: if test="xxx=1"
- xsl:choose xsl:when

◎ Saxon 是 for Java, 若要 C/C++ 版本，可以考慮

Xalan

Sablontron (with expat XML processor)

◎ MacOSX 下用 MacPort 安裝

 
sudo port install saxon

安裝在 /opt/local/var/macports/software/saxon/8.9_0 目錄，可以在 .profile 內加下述這行，以簡化指令執行

 
alias saxon='java -jar /opt/local/var/macports/software/saxon/8.9_0/opt/local/share/java/saxon8.jar'

但要注意 saxon8 支援 XSLT2.0，所以，可能執行時會出現下述訊息

 
Running an XSLT 1.0 stylesheet with an XSLT 2.0 processor

只要在 xsl:stylesheet version 的部份由原 1.0 改成 2.0 即可 pass 該訊息。

◎ 參考：

XSLT Tutorial

XSLT on the Server

reference : http://blog.derjohng.com/2008/10/16/xslt-%E7%AD%86%E8%A8%98/

Essential JavaScript Design Patterns For Beginners

2011-06-06T20:55:00.000-07:00

Copyright 2011 © Addy Osmani. Last edited: May 23rd 2011.

Creative Commons Attribution-NonCommercial-ShareAlike 3.0 unported license. You are free to remix, tweak, and build upon this work non-commercially, as long as you credit Addy Osmani (the copyright holder) and license your new creations under the identical terms. Any of the above conditions can be waived if you get permission from the copyright holder. For any reuse or distribution, you must make clear to others the license terms of this work. The best way to do this is with a link to the license.

Foreword

I would like to thank Rebecca Murphey for inspiring me to open-source this mini-book and release it for free download and distribution - making knowledge both open and easily available is something we should all strive for where possible. I would also like to extend my thanks to the very talented Alex Sexton who was kind enough to be the technical reviewer for this publication. I hope that it helps you learn more about design patterns and the usefulness of their application to JavaScript code.

Introduction

At the beginning of this book I will be focusing on a discussion about the importance and history of design patterns in any programming language. If you're already sold on or are familiar with this history, feel free to skip to the chapter 'What is a Pattern?' to continue reading.

One of the most important aspects of writing maintainable code is being able to notice the recurring themes in that code and optimize them. This is an area where knowledge of design patterns can prove invaluable.

Design patterns can be traced back to the early work of a civil engineer named Christopher Alexander. He would often write publications about his experience in solving design issues and how they related to buildings and towns. One day, it occurred to Alexander that when used time and time again, certain design constructs lead to a desired optimal effect.

In collaboration with Sarah Ishikawra and Murray Silverstein, Alexander produced a pattern language that would help empower anyone wishing to design and build at any scale. This was published back in 1977 in a paper titled 'A Pattern Language'.

Some 30 years ago, software engineers began to incorporate the principles Alexander had written about into the first documentation about design patterns, which was to be a guide for novice developers looking to improve their coding skills. It's important to note that the concepts behind design patterns have actually been around in the programming industry more than likely since its inception, albeit in a less formalized form.

One of the first and arguably most iconic formal works published on design patterns in software engineering was a book in 1995 called 'Design Patterns: Elements Of Reusable Object-Oriented Software'. This was written by Erich Gamma, Richard Helm, Ralph Johnson and John Vlissides - a group that became known as the Gang of Four (or GoF for short).

The GoF's publication is considered quite instrumental to pushing the concept of design patterns further in our field as it describes a number of development techniques and pitfalls as well as providing twenty-three core Object-Oriented design patterns frequently used around the world today. We will be covering these patterns in more detail in the section ‘Categories of Design Patterns’.

In this book, we will take a look at a number of popular JavaScript design patterns and explore why certain patterns may be more suitable for your projects than others. Remember that patterns can be applied not just to vanilla JavaScript, but also to abstracted libraries such as jQuery or Dojo as well. Before we begin, let’s look at the exact definition of a ‘pattern’ in software design.

Contents

What is a Pattern?
'Pattern'-ity Testing, Proto-Patterns & The Rule Of Three
The Structure Of A Design Pattern
Writing Design Patterns
Anti-Patterns
Categories Of Design Pattern
Design Patterns in JavaScript
Creational Pattern
Constructor Pattern
Singleton Pattern
Module Pattern
Revealing Module Pattern
Observer Pattern
Prototype Pattern
Command Pattern
DRY Pattern
Facade Pattern
Factory Pattern
Mixin Pattern
Decorator Pattern
A High-level View Of Design Patterns in jQuery
Lazy Initialisation
Composite Pattern
Wrapper Pattern
Facade Pattern
Observer Pattern
Iterator Pattern
Strategy Pattern
Proxy Pattern
Builder Pattern
Prototype Pattern
Flyweight Pattern
Conclusions
References

What is a Pattern?

A pattern is a reusable solution that can be applied to commonly occurring problems in software design - in our case - in writing JavaScript applications. Another way of looking at patterns are as templates for how you solve problems - ones which can be used in quite a few different situations.

To consider how useful a pattern may be, let us consider that if you were to write a script where you said ‘for each item, sound an alert’, if sounding an alert was complex in nature, it would always result in more maintainable code doing the above over saying ‘do this for item 1’, ‘do this for item 2’, ‘do the same again for item 3’, i.e. If the code performing the bulk of the work exists in fewer places it becomes significantly easier to maintain.

You may ask why it’s important to understand patterns and be familiar with them. Design patterns have three main benefits:

Patterns are proven solutions: They provide solid approaches to solving issues in software development using proven solutions that reflect the experience and insights the developers that helped define and improve them bring to the pattern.
Patterns can be easily re-used: A pattern usually reflects an out of the box solution that can be adapted to suit your own needs. This feature makes them quite robust.
Patterns can be expressive: When you look at a pattern there’s generally a set structure and ‘vocabulary’ to the solution presented that can help express rather large solutions quite elegantly.

Patterns are not an exact solution. It’s important that we remember the role of a pattern is merely to provide us with a solution scheme. Patterns don’t solve all design problems nor do they replace good software designers, however, they do support them. Next we’ll take a look at some of the other advantages patterns can offer us.

Reusing patterns assists in preventing minor issues that can cause major problems in the application development process. What this means is that when your code relies more on proven patterns, you can afford to spend less time worrying about your code architecture and more time focusing on the quality of your overall solution. This is because patterns can encourage you to code in a more structured and organized fashion so the need to refactor it for cleanliness purposes in the future can be significantly decreased.
Patterns can provide generalized solutions which are documented in a fashion that doesn't require them to be tied to a specific problem. This generalized approach means that regardless of the application (and in many cases the programming language) you are working with, design patterns can be applied to improve the structure of your code.
Certain patterns can actually decrease the overall file-size footprint of your code by avoiding repetition. By encouraging developers to look more closely at their solutions for areas where instant reductions in repetition can be made, e.g. reducing the number of functions performing similar processes in favor of a single generalized function, the overall size of your codebase can be decreased.
Patterns that are frequently used can be improved over time by harnessing the collective experiences other developers using those patterns contribute back to the design pattern community. In some cases this leads to the creation of entirely new design patterns whilst in others it can lead to the provision of improved guidelines on how specific patterns can be best used. This can ensure that pattern-based solutions continue to become more robust than ad-hoc solutions may be.

'Pattern'-ity Testing, Proto-Patterns & The Rule Of Three

Remember that not every algorithm, best practice or solution represents what might be considered a complete pattern. There may be a few key ingredients here that are missing and the pattern community is generally weary of something claiming to be one unless it has been heavily vetted. Even if something is presented to us which *appears* to meet the criteria for a pattern, it should not be considered one until it has undergone suitable periods of scrutiny and testing by others.

Looking back upon the work by Alexander once more, he claims that a pattern should both be a process and a ‘thing’. This definition is obtuse on purpose as he follows by saying that the process should create the ‘thing’. This is a reason why patterns generally focus on addressing a visually identifiable structure i.e you should be able to visually depict (or draw) a picture representing the structure that placing the pattern into practice results in.

In studying design patterns, you may come across the term ‘proto-pattern’ quite frequently. What is this? Well, a pattern that has not yet been known to pass the ‘pattern’-ity tests is usually referred to as a proto-pattern. Proto-patterns may result from the work of someone that has established a particular solution that is worthy of sharing with the community, but may not have yet had the opportunity to have been vetted heavily due to it’s very young age.

Alternatively, the individual(s) sharing the pattern may not have the time or interest of going through the ‘pattern’-ity process and might release a short description of their proto-pattern instead. Brief descriptions of this type of pattern are known as patlets.

The work involved in fully documenting a qualified pattern can be quite daunting. Looking back at some of the earliest work in the field of design patterns, a pattern may be considered ‘good’ if it does the following:

Solves a particular problem - patterns are not supposed to just capture principles or strategies. They need to capture solutions. This is one of the most essential ingredients for a good pattern.
The solution to this problem cannot be obvious - you can often find that problem-solving techniques attempt to derive from well-known first principles. The best design patterns usually provide solutions to problems indirectly - this is considered a necessary approach for the most challenging problems related to design.
The concept described must have been proven - design patterns require proof that they function as described and without this proof the design cannot be seriously considered. If a pattern is highly speculative in nature, only the brave may attempt to use it.
It must describe a relationship - in some cases it may appear that a pattern describes a type of module. Although an implementation may appear this way, the official description of the pattern must describe much deeper system structures and mechanisms that explain it’s relationship to code.

You wouldn’t be blamed for thinking that a proto-pattern that doesn’t meet the guidelines for a complete pattern isn’t worth investigating, but this is far from the truth. Many proto-patterns are actually quite good. I’m not saying that all proto-patterns are worth looking at, but there are quite a few useful ones in the wild that could assist you with future projects. Use best judgment with the above list in mind and you’ll be fine in your selection process.

One of the additional requirements for a pattern to be valid is that they display some recurring phenomenon. This is often something that can be qualified in at least three key areas, referred to as the rule of three. To show recurrence using this rule, one must demonstrate:

Fitness of purpose - how is the pattern considered successful?
Usefulness - why is the pattern considered successful?
Applicability - is the design worthy of being a pattern because it has wider applicability? If so, this needs to be explained.When reviewing or defining a pattern, it is important to keep the above in mind.

The Structure Of A Design Pattern

When studying design patterns, you may wonder what teams that create them have to put in their design pattern descriptions. Every pattern has to initially be formulated in a form of a rule that establishes a relationship between a context, a system of forces that arises in that context and a configuration that allows these forces to resolve themselves in context.

I find that a lot of the information available out there about the structure of a good pattern can be condensed down to something more easily digestible.With this in mind, lets now take a look at a summary of the component elements for a design pattern.

A design pattern must have a:

Pattern Name and a description
Context Outline – the contexts in which the pattern is effective in responding to the users needs.
Problem Statement – a statement of the problem being addressed so we can understand the intent of the pattern.
Solution – a description of how the user’s problem is being solved in an understandable list of steps and perceptions.
Design – a description of the pattern’s design and in particular, the user’s behavior in interacting with it
Implementation – a guide to how the pattern would be implemented
Illustrations – a visual representation of classes in the pattern (eg. a diagram))
Examples – an implementation of the pattern in a minimal form
Co-requisites – what other patterns may be needed to support use of the pattern being described?
Relations – what patterns does this pattern resemble? does it closely mimic any others?
Known usage – is the pattern being used in the ‘wild’?. If so, where and how?
Discussions – the team or author’s thoughts on the exciting benefits of the pattern

Design patterns are quite a powerful approach to getting all of the developers in an organization or team on the same page when creating or maintaining solutions. If you or your company ever consider working on your own pattern, remember that although they may have a heavy initial cost in the planning and write-up phases, the value returned from that investment can be quite worth it. Always research thoroughly before working on new patterns however, as you may find it more beneficial to use or build on top of existing proven patterns than starting afresh.

Writing Design Patterns

Although this book is aimed at those new to design patterns, a fundamental understanding of how a design pattern is written can offer you a number of useful benefits. For starters, you can gain a deeper appreciation for the reasoning behind a pattern being needed but can also learn how to tell if a pattern (or proto-pattern) is up to scratch when reviewing it for your own needs.

Writing good patterns is a challenging task. Patterns not only need to provide a substantial quantity of reference material for end-users (such as the items found in the structure section above), but they also need to be able to almost tell a ‘story’ that describes the experience they are trying to convey. If you’ve already read the previous section on ‘what’ a pattern is, you may think that this in itself should help you identify patterns when you see them in the wild. This is actually quite the opposite - you can’t always tell if a piece of code you’re inspecting follows a pattern.

When looking at a body of code that you think may be using a pattern, you might write down some of the aspects of the code that you believe falls under a particular existing pattern, but it may not be a one at all. In many cases of pattern-analysis you’ll find that you’re just looking at code that follows good principles and design practices that could happen to overlap with the rules for a pattern by accident. Remember - solutions in which neither interactions nor defined rules appear are not patterns.

If you’re interested in venturing down the path of writing your own design patterns I recommend learning from others who have already been through the process and done it well. Spend time absorbing the information from a number of different design pattern descriptions and books and take in what’s meaningful to you - this will help you accomplish the goals you’ve got of designing the pattern you want to achieve. You’ll probably also want to examine the structure and semantics of existing patterns - this can be begun by examining the interactions and context of the patterns you are interested in so you can identify the principles that assist in organizing those patterns together in useful configurations.

Once you’ve exposed yourself to a wealth of information on pattern literature, you may wish to begin your pattern using an existing format and see if you can brainstorm new ideas for improving it or integrating your ideas in there. An example of someone that did this quite recently is JavaScript developer Christian Heilmann, who took an existing pattern called the module pattern and made some fundamentally useful changes to it to create the revealing module pattern (this is one of the patterns covered later in this book).

If you would like to try your hand at writing a design pattern (even if just for the learning experience of going through the process), the tips I have for doing so would be as follows:

Bare in mind practicability: Ensure that your pattern describes proven solutions to recurring problems rather than just speculative solutions which haven’t been qualified.
Ensure that you draw upon best practices: The design decisions you make should be based on principles you derive from an understanding of best practices.
Your design patterns should be transparent to the user: Design patterns should be entirely transparent to any type of user-experience. They are primarily there to serve the developers using them and should not force changes to behaviour in the user-experience that would not be incurred without the use of a pattern.
Remember that originality is not key in pattern design: When writing a pattern, you do not need to be the original discoverer of the solutions being documented nor do you have to worry about your design overlapping with minor pieces of other patterns.If your design is strong enough to have broad useful applicability, it has a chance of being recognized as a proper pattern
Know the differences between patterns and design: A design pattern generally draws from proven best practice and serves as a model for a designer to create a solution. The role of the pattern is to give designers guidance to make the best design choices so they can cater to the needs of their users.
Your pattern needs to have a strong set of examples: A good pattern description needs to be followed by an equally strong set of examples demonstrating the successful application of your pattern. To show broad usage, examples that exhibit good design principles are ideal.

Pattern writing is a careful balance between creating a design that is general, specific and above all, useful. Try to ensure that if writing a pattern you cover the widest possible areas of application and you should be fine. I hope that this brief introduction to writing patterns has given you some insights that will assist your learning process for the next sections of this book.

Anti-Patterns

If we consider that a pattern represents a best practice, an anti-pattern represents a lesson that has been learned. The term anti-patterns was coined in 1995 by Andrew Koenig in the November C++ Report that year. It was inspired by the Gang of Four's book Design Patterns, that developed the concept of design patterns in the software field. In Koenig’s report, there are two notions of anti-patterns that are presented. Anti-Patterns:

Describe a bad solution to a particular problem which resulted in a bad situation occurring
Describe how to get out of said situation and how to go from there to a good solution

On this topic, Alexander writes about the difficulties in achieving a good balance between good design structure and good context:

“These notes are about the process of design; the process of inventing physical things which display a new physical order, organization, form, in response to function.…every design problem begins with an effort to achieve fitness between two entities: the form in question and its context. The form is the solution to the problem; the context defines the problem”.

While it’s quite important to be aware of design patterns, it can be equally important to understand anti-patterns. Let us qualify the reason behind this. When creating an application, a project’s life-cycle begins with construction however once you’ve got the initial release done, it needs to be maintained. The quality of a final solution will either be good or bad, depending on the level of skill and time the team have invested in it. Here good and bad are considered in context - a ‘perfect’ design may qualify as an anti-pattern if applied in the wrong context.

The bigger challenges happen after an application has hit production and is ready to go into maintenance mode. A developer working on such a system who hasn’t worked on the application before may introduce a bad design into the project by accident. If said bad practices are created as anti-patterns, they allow developers a means to recognize these in advance so that they can avoid common mistakes that can occur - this is parallel to the way in which design patterns provide us with a way to recognize common techniques that are useful.

To summarize, an anti-pattern is a bad design that is worthy of documenting. Examples of anti-patterns in JavaScript are the following:

Polluting the namespace by defining a large number of variables in the global context
Passing strings rather than functions to either setTimeout or setInterval as this triggers the use of eval() internally.
Prototyping against the Object object (this is a particularly bad anti-pattern)
Using JavaScript in an inline form as this is inflexible
The use of document.write where native DOM alternatives such as document.createElement are more appropriate. document.write has been grossly misused over the years and has quite a few disadvantages including that if it's executed after the page has been loaded it can actually overwrite the page you're on, whilst document.createElement does not. You can see here for a live example of this in action. It also doesn't work with XHTML which is another reason opting for more DOM-friendly methods such as document.createElement is favorable.

Knowledge of anti-patterns is critical for success. Once you are able to recognize such anti-patterns, you will be able to refactor your code to negate them so that the overall quality of your solutions improves instantly.

Categories Of Design Pattern

A glossary from the well-known design book, Domain-Driven Terms, rightly states that:

“A design pattern names, abstracts, and identifies the key aspects of a common design structure that make it useful for creating a reusable object-oriented design. The design pattern identifies the participating classes and their instances, their roles and collaborations, and the distribution of responsibilities.

Each design pattern focuses on a particular object-oriented design problem or issue. It describes when it applies, whether or not it can be applied in view of other design constraints, and the consequences and trade-offs of its use. Since we must eventually implement our designs, a design pattern also provides sample ... code to illustrate an implementation.

Although design patterns describe object-oriented designs, they are based on practical solutions that have been implemented in mainstream object-oriented programming languages ....”

Design patterns can be broken down into a number of different categories. In this section we’ll review three of these categories and briefly mention a few examples of the patterns that fall into these categories before exploring specific ones in more detail.

Creational Design Patterns

Creational design patterns focus on handling object creation mechanisms where objects are created in a manner suitable for the situation you are working in. The basic approach to object creation might otherwise lead to added complexity in a project whilst creational patterns aim to solve this problem by controlling the creation of such objects.

Some of the patterns that fall under this category are: Factory, Abstract, Prototype, Singleton and Builder.

Structural Design Patterns

Structural patterns focus on the composition of classes and objects. Structural ‘class’ creation patterns use inheritance to compose interfaces whilst ‘object’ patterns define methods to create objects to obtain new functionality.

Patterns that fall under this category include: Decorator, Facade, Composite, Adapter and Bridge

Behavioral Design Patterns

The main focus behind this category of patterns is the communication between a class’s objects. By specifically targeting this problem, these patterns are able to increase the flexibility in carrying out this communication.

Some behavioral patterns include: Iterator, Mediator, Observer and Visitor.

Summary Table Of Design Pattern Categorization

In my early experiences of learning about design patterns, I personally found the following table a very useful reminder of what a number of patterns has to offer - it covers the 23 Design Patterns mentioned by the GoF. The original table was summarized by Elyse Nielsen back in 2004 and I've modified it where necessary to suit our discussion in this section of the book.

I recommending using this table as reference, but do remember that there are a number of additional patterns that are not mentioned here but will be discussed later in the book. Also bare in mind that there will be patterns in this table that reference the concept of 'classes' - something which can be simulated, but which don't come with out-of-the box support in JavaScript.

That said, it's still a great starting point for learning and I recommend reviewing it.

Creational Based on the concept of creating an object.
Class
Factory Method This makes an instance of several derived classes based on interfaced data or events.
Object
Abstract Factory Creates an instance of several families of classes without detailing concrete classes.
Builder Separates object construction from its representation, always creates the same type of object.
Prototype A fully initialized instance used for copying or cloning.
Singleton A class with only a single instance with global access points.

Structural Based on the idea of building blocks of objects
Class
Adapter Match interfaces of different classes therefore classes can work together despite incompatible interfaces
Object
Adapter Match interfaces of different classes therefore classes can work together despite incompatible interfaces
Bridge Separates an object's interface from its implementation so the two can vary independently
Composite A structure of simple and composite objects which makes the total object more than just the sum of its parts.
Decorator Dynamically add alternate processing to objects.
Facade A single class that hides the complexity of an entire subsystem.
Flyweight A fine-grained instance used for efficient sharing of information that is contained elsewhere.
Proxy A place holder object representing the true object

Behavioral Based on the way objects play and work together.
Class
Interpreter A way to include language elements in an application to match the grammer of the intended language.
Template
Method Creates the shell of an algorithm in a method, then defer the exact steps to a subclass.
Object
Chain of
Responsibility A way of passing a request between a chain of objects to find the object that can handle the request.
Command Encapsulate a command request as an object to enable, logging and/or queuing of requests, and provides error-handling for unhandled requests.
Iterator Sequentially access the elements of a collection without knowing the inner workings of the collection.
Mediator Defines simplified communication between classes to prevent a group of classes from referring explicitly to each other.
Memento Capture an object's internal state to be able to restore it later.
Observer A way of notifying change to a number of classes to ensure consistency between the classes.
State Alter an object's behavior when its state changes
Strategy Encapsulates an algorithm inside a class separating the selection from the implementation
Visitor Adds a new operation to a class without changing the class

Design Patterns In JavaScript

Next we’re going to take a look at 10 popular design patterns that I’ve personally found very useful to apply in JavaScript applications over the years.

Note that there is no ‘ideal’ pattern to use from this selection as developers often use best judgment when deciding on the pattern, which is the best ‘fit’ for their needs.

Each pattern varies in complexity, however I have tried to keep my explanations as simple as possible so that both beginners and intermediate developers can benefit from the material.

The patterns we will be exploring are the:

Creational Pattern
Constructor Pattern
Singleton Pattern
Module Pattern
Revealing Module Pattern
Observer Pattern
Prototype Pattern
Command Pattern
DRY Pattern
Facade Pattern
Factory Pattern
Mixin Pattern
Decorator Pattern

The Creational Pattern

This pattern is the basis for a number of other patterns in this section and is actually quite straightforward to understand. As you might guess, a creational pattern deals with the concept of creating objects within an application. In JavaScript, the traditional way of creating objects (collections of name/value pairs) is as follows:

1
var newObject = new Object(); //or
2
var newObject = {};
3

4
newObject['someValue'] = 'Hello World';
A lot of the time, you'll have reasons for approaching this in a much more object-specific way but the above simplistic approach to creation shows you how easy it is to apply this pattern where non-specific object types need to be created. You simply use a constructor to instantiate an instance of your object for later on when you need it. There are however situations where this is neither an advantage nor a desired feature.

The Constructor Pattern

The phrase ‘constructor’ is familiar to most developers, however if you’re a beginner it can be useful to review what a constructor is before we get into talking about a pattern dedicated to it. Constructors are used to create specific types of objects - they both prepare the object for use and can also accept parameters which the constructor uses to set the values of member variables when the object if first created. The idea that a constructor is a paradigm can be found in the majority of programming languages, including JavaScript. You’re also able to define custom constructors that define properties and methods for your own types of objects.

Basic Constructors

In JavaScript, constructor functions are generally considered a reasonable way to implement instances. JavaScript doesn't support the concept of classes but it does support special constructor functions.By simply prefixing a call to a constructor function with the keyword 'new', you can tell JavaScript you would like function to behave like a constructor and instantiate a new object with the members defined by that function.Inside a constructor, the keyword 'this' references the new object that's being created. A very basic constructor may be:

01
function Car(model, year, miles){
02
this.model = model;
03
this.year = year;
04
this.miles = miles;
05
this.toString = function(){
06
return this.model + " has done " + this.miles + " miles";
07
};
08
}
09

10
var civic = new Car("Honda Civic", 2009, 20000);
11
var mondeo = new Car("Ford Mondeo", 2010, 5000);
12

13
console.log(civic.toString());
14
console.log(mondeo.toString());
The above is a simple version of the constructor pattern but it does suffer from some problems. One is that it makes inheritance difficult and the other is that functions such as toString() are redefined for each of the new objects created using the Car constructor. This isn't very optimal as the function should ideally be shared between all of the instances of the Car type.

Constructors With Prototypes

Functions in JavaScript have a property called a prototype. When you call a JavaScript constructor to create an object, all the properties of the constructor's prototype are then made available to the new object. In this fashion, multiple Car objects can be created which access the same prototype. We can thus extend the original example as follows:

01
function Car(model, year, miles){
02
this.model = model;
03
this.year = year;
04
this.miles = miles;
05
}
06

07
/*
08
Note here that we are using Object.prototype.newMethod rather than
09
Object.prototype so as to avoid redefining the prototype object
10
*/
11
Car.prototype.toString = function(){
12
return this.model + " has done " + this.miles + " miles";
13
};
14

15
var civic = new Car("Honda Civic", 2009, 20000);
16
var mondeo = new Car("Ford Mondeo", 2010, 5000);
17

18
console.log(civic.toString());
Here, a single instance of toString() will now be shared between all of the Car objects.

Side-note: Douglas Crockford recommends capitalizing your constructor functions so that it is easier to distinguish between them and normal functions.

The Singleton Pattern

In conventional software engineering, the singleton pattern can be implemented by creating a class with a method that creates a new instance of the class if one doesn't exist. In the event of an instance already existing, it simply returns a reference to that object. The singleton pattern is thus known because traditionally, it restricts instantiation of a class to a single object. With JavaScript, singletons serve as a namespace provider which isolate implementation code from the global namespace so-as to provide a single point of access for functions.

The singleton doesn't provide a way for code that doesn't know about a previous reference to the singleton to easily retrieve it - it is not the object or 'class' that's returned by a singleton, it's a structure. Think of how closured variables aren't actually closures - the function scope that provides the closure is the closure.

Singletons in JavaScript can take on a number of different forms and researching this pattern online is likely to result in at least 10 different variations. In its simplest form, a singleton in JS can be an object literal grouped together with its related methods and properties as follows:

1
var mySingleton = {
2
property1:"something",
3
property2:"something else",
4
method1:function(){
5
console.log('hello world');
6
}
7
}
If you wished to extend this further, you could add your own private members and methods to the singleton by encapsulating variable and function declarations inside a closure. Exposing only those which you wish to make public is quite straight-forward from that point as demonstrated below:

01
var mySingleton = function(){
02

03
/* here are my private variables and methods */
04
var privateVariable = 'something private';
05
function showPrivate(){
06
console.log(privateVariable);
07
}
08

09
/* public variables and methods (which can access private variables and methods ) */
10
return {
11
publicMethod:function(){
12
showPrivate();
13
},
14
publicVar:'the public can see this!'
15
}
16
}
17

18
var single = mySingleton();
19
single.publicMethod(); // logs 'something private'
20
console.log(single.publicVar); // logs 'the public can see this!'
The above example is great, but let's next consider a situation where you only want to instantiate the singleton when it's needed. To save on resources, you can place the instantiation code inside another constructor function as follows:

01
var Singleton =(function(){
02
var instantiated;
03
function init (){
04
/*singleton code here*/
05
return {
06
publicMethod:function(){
07
console.log('hello world')
08
},
09
publicProperty:'test'
10
}
11
}
12

13
return {
14
getInstance :function(){
15
if (!instantiated){
16
instantiated = init();
17
}
18
return instantiated;
19
}
20
}
21
})()
22

23
/*calling public methods is then as easy as:*/
24
Singleton.getInstance().publicMethod();

So, where else is the singleton pattern useful in practice?. Well, it's quite useful when exactly one object is needed to coordinate patterns across the system. Here's one last example of the singleton pattern being used:

01
var SingletonTester = (function(){
02

03
//args: an object containing arguments for the singleton
04
function Singleton(args) {
05

06
//set args variable to args passed or empty object if none provided.
07
var args = args || {};
08
//set the name parameter
09
this.name = 'SingletonTester';
10
//set the value of pointX
11
this.pointX = args.pointX || 6; //get parameter from arguments or set default
12
//set the value of pointY
13
this.pointY = args.pointY || 10;
14

15
}
16

17
//this is our instance holder
18
var instance;
19

20
//this is an emulation of static variables and methods
21
var _static = {
22
name: 'SingletonTester',
23
//This is a method for getting an instance
24

25
//It returns a singleton instance of a singleton object
26
getInstance: function (args){
27
if (instance === undefined) {
28
instance = new Singleton(args);
29
}
30
return instance;
31
}
32
};
33
return _static;
34
})();
35

36
var singletonTest = SingletonTester.getInstance({pointX: 5});
37
console.log(singletonTest.pointX); // outputs 5

The Module Pattern

Let's now look at the popular module pattern. The module pattern was originally defined as a way to provide both private and public encapsulation for classes in conventional software engineering.

In JavaScript, the module pattern is used to emulate the concept of classes in such a way that we're able to include both public/private methods and variables inside a single object, thus shielding particular parts from the global scope. What this results in is a reduction in the likelihood of your function names conflicting with other functions defined in additional scripts on the page.

Exploring the concept of public and private methods further, the module pattern pattern allows us to have particular methods and variables which are only accessible from within the module, meaning that you have a level of shielding from external entities accessing this 'hidden' information.

Let's begin looking at an implementation of the module pattern by creating a module which is self-contained in the global object. Here, other parts of the code are unable to directly read the value of our incrementCounter() or resetCounter(). The counter variable is actually fully shielded from our global scope so it acts just like a private variable would - its existence is limited to within the module's closure so that the only code able to access its scope are our two functions. Our methods are effectively namespaced so in the test section of our code, we need to prefix any calls with the name of the module (eg. 'testModule').

01
var testModule = (function(){
02
var counter = 0;
03
return {
04
incrementCounter: function() {
05
return counter++;
06
},
07
resetCounter: function() {
08
console.log('counter value prior to reset:' + counter);
09
counter = 0
10
}
11
}
12
})();
13

14
/*test*/
15
testModule.incrementCounter();
16
testModule.resetCounter();
When working with the module pattern, you may find it useful to define a simple template that you use for getting started with it. Here's one that covers namespacing, public and private variables:

01
var myNamespace = (function(){
02
var myPrivateVar = 0;
03
var myPrivateMethod = function(someText){
04
console.log(someText);
05
}
06

07
return {
08
myPublicVar: "foo",
09
myPublicFunction: function(bar){
10
myPrivateVar++;
11
myPrivateMethod(bar);
12
}
13
}
14

15
})();
A piece of trivia is that the module pattern was originally formally defined by Douglas Crockford (famous for his book 'JavaScript: The Good Parts, and more), although it is likely that variations of this pattern were used long before this. Another piece of trviai is that if you've ever played with Yahoo's YUI library, some of its features may appear quite familiar and the reason for this is that the module pattern was a strong influence for YUI when creating their components.

So, you've seen why the singleton pattern can be useful, but why is the module pattern a good choice?. For starters, it's a lot cleaner for developers coming from an object-oriented background than the idea of true encapsulation, at least from a JavaScript perspective. Secondly, it supports private data - so, in the module pattern, public parts of your code are able to touch the private parts, however the outside world is unable to touch the class's private parts (no laughing!. oh, and thanks to David Engfer for the joke).

The disadvantages of the module pattern are that as you access both public and private members differently, when you wish to change visibility, you actually have to make changes to each place the member was used. You also can't access private members in methods that are added to the object at a later point. That said, in many cases the module pattern is still quite useful and when used correctly, certainly has the potential to improve the structure of your application. Here's a final module pattern example:

01
var someModule = (function(){
02

03
//private attributes
04
var privateVar = 5;
05

06
//private methods
07
var privateMethod = function(){
08
return 'Private Test';
09
};
10

11
return {
12
//public attributes
13
publicVar : 10,
14
//public methods
15
publicMethod : function(){
16
return ' Followed By Public Test ';
17
},
18

19
//let's access the private members
20
getData : function(){
21
return privateMethod() + this.publicMethod() + privateVar;
22
}
23
}
24
})(); //the parens here cause the anonymous function to execute and return
25

26
someModule.getData();
To continue reading more about the module pattern, I strongly recommend Ben Cherry's JavaScript Module Pattern In-Depth article.

The Revealing Module Pattern

Now you’re probably a little more familiar with what the Module pattern is. Let’s take a look at a slightly improved version - Christian Heilmann’s Revealing Module pattern, often described as a neat extension to a rather robust pattern.

The Revealing Module Pattern came about as Heilmann (now at Mozilla) was frustrated with the fact that in you had to repeat the name of the main object when you wanted to call one public method from another or access public variables. He also disliked the Module pattern’s requirement for having to switch to object literal notation for the things you wished to make public.

The result of his efforts were an updated pattern where you would simply define all of your functions and variables in the private scope and return an anonymous object at the end of the module along with pointers to both the private variables and functions you wished to reveal as public.

Once again, you’re probably wondering what the benefits of this approach are. The RMP allows the syntax of your script to be fairly consistent - it also makes it very clear at the end which of your functions and variables may be accessed publicly, something that is quite useful. In addition, you are also able to reveal private functions with more specific names if you wish.

An example of how to use the revealing module pattern can be found below:

01
/*
02
The idea here is that you have private methods
03
which you want to expose as public methods.
04

05
What are are doing below is effectively defining
06
a self-executing function and immediately returning
07
the object.
08
*/
09
var myRevealingModule = (function(){
10

11
var name = 'John Smith';
12
var age = 40;
13

14
function updatePerson(){
15
name = 'John Smith Updated';
16
}
17
function setPerson () {
18
name = 'John Smith Set';
19
}
20
function getPerson () {
21
return name;
22
}
23
return{
24
set: setPerson,
25
get: getPerson
26
}
27
}());
28

29
// Sample usage:
30
myRevealingModule.get();

The Observer Pattern

The observer pattern (also known as the publisher/subscriber model) is a design pattern which allows an object (known as an observer) to watch another object (the subject) where the pattern provides a means for the subject and observer to form a publish-subscribe relationship. Observers are able to register so that they can receive events from the subject and when the subject needs to notify observers regarding events, it sends the events to each observer. The pub/sub model is quite popularly used in implementing event handling systems as it is both quite effective and is relatively straight-forward to use.

The motivation behind using the observer pattern is where you need to maintain consistency between related objects without making classes tightly coupled. For example, when an object needs to be able to notify other objects without making assumptions regarding those objects. Another use case is where abstractions have more than one aspect, where one depends on the other. The encapsulation of these aspects in separate objects allows the variation and re-use of the objects independently.

Benefits of using the observer pattern include:

Support for simple broadcast communication. Notifications are broadcast automatically to all objects that have subscribed.
Dynamic relationships may exist between subjects and observers which can be easily established on page load. This provides a great deal of flexibility.
Abstract coupling between subjects and observers where each can be extended and re-used individually.

A draw-back of the pattern is that observers are ignorant to the existence of each other and are blind to the cost of switching in subject. Due to the dynamic relationship between subjects and observers the update dependency can be difficult to track.

Although many examples of where the observer pattern can be used correctly exist, a popular one in academic circles is the example of a spreadsheet application. Let us imagine that this application is Google Docs, where a number of UI components may be in use: the spreadsheet's formula bar (ssFormula), a pie-chart (ssPieChart) and a bar graph (ssBarGraph). The data source for all of these components will be referred to as 'ssSpreadsheetData'. ssFormula, ssPieChart and ssBarGraph are all observer objects. ssSpreadsheetData may be considered the subject object. The ssSpreadsheet data object notifies its observers when a data change occurs which could make its state inconsistent with the observers.

Let us now take a look at an example of the observer pattern implemented in JavaScript. The following demo is a minimalist version of pub/sub I released on GitHub under a project called 'pubsubz'. Sample usage of this implementation can be found lower down the page.

Observer implementation

01
var pubsub = {};
02
(function(q) {
03

04
var topics = {},
05
subUid = -1;
06

07
q.publish = function(topic, args) {
08

09
if (!topics[topic]) {
10
return false;
11
}
12

13
setTimeout(function() {
14
var subscribers = topics[topic],
15
len = subscribers ? subscribers.length : 0;
16

17
while (len--) {
18
subscribers[len].func(topic, args);
19
}
20
}, 0);
21

22
return true;
23

24
};
25

26
q.subscribe = function(topic, func) {
27

28
if (!topics[topic]) {
29
topics[topic] = [];
30
}
31

32
var token = (++subUid).toString();
33
topics[topic].push({
34
token: token,
35
func: func
36
});
37
return token;
38
};
39

40
q.unsubscribe = function(token) {
41
for (var m in topics) {
42
if (topics[m]) {
43
for (var i = 0, j = topics[m].length; i < j; i++) {
44
if (topics[m][i].token === token) {
45
topics[m].splice(i, 1);
46
return token;
47
}
48
}
49
}
50
}
51
return false;
52
};
53
}(pubsub));
Subscribing and publishing

01
var testSubscriber = function( topics , data ){
02
console.log( topics + ": " + data );
03
};
04

05
/*
06
* Publishers are in charge of "publishing" notifications about events
07
*/
08
pubsub.publish( 'example1', 'hello world!' );
09
pubsub.publish( 'example1', ['test','a','b','c'] );
10
pubsub.publish( 'example1', [{'color':'blue'},{'text':'hello'}] );
11

12

13
/*
14
* Subscribers basically "subscribe" (or listen)
15
* And once they've been "notified" their callback functions are invoked
16
*/
17
var testSubscription = pubsub.subscribe( 'example1', testSubscriber );
18

19

20
/*
21
* Unsubscribe if you no longer wish to be notified
22
*/
23

24
setTimeout(function(){
25
pubsub.unsubscribe( testSubscription );
26
}, 0);
27

28
pubsub.publish( 'example1', 'hello again! (this will fail)' );
A jsFiddle version of this example can be found at http://jsfiddle.net/LxPrq/

Note:If you are interested in a pub/sub pattern implementation using jQuery, I recommend Ben Alman's GitHub Gist for an example of how to achieve this.

The Prototype Pattern

The prototype pattern is based on the concept of prototypal inheritance where we create objects which act as prototypes for other objects. The prototype object itself is effectively used as a blueprint for each object the constructor creates.If the prototype of the constructor function used contains a property called 'name' for example (as per the code sample below), then each object created by that same constructor will also have this same property.

Looking at the definitions for the prototype pattern in existing literature non-specific to JavaScript, you *may* find references to concepts outside the scope of the language such as classes. The reality is that prototypal inheritance avoids using classes altogether. There isn't a 'definition' object nor a core object in theory. We're simply creating copies of existing functional objects.

One of the core benefits of using the prototype pattern is that we're working with the strengths JavaScript has to offer natively rather than attempting to imitate features of other languages (something a few design pattern implementations do). Not only is this an easy way to implement inheritance, but this also comes with a performance boost as well. When defining a function in an object, they're all created by reference (so all child objects point to the same function) instead of creating their own individual copies.

For those interested, real prototypal inheritance, as defined in the ECMAScript 5 standard, requires the use of Object.create which is a recent newly native method. Object.create creates an object which has a specified prototype and which optionally contains specified properties (i.e Object.create(prototype, optionalDescriptorObjects)). We can also see this being demonstrated in the example below:

1
/*No need for capitalization as it's not a constructor*/
2
var someCar = {
3
drive: function() {},
4
name: 'Mazda 3'
5
};
6

7
/*Use Object.create to generate a new car*/
8
var anotherCar = Object.create(someCar);
9
anotherCar.name = 'Toyota Camry';

Object.create allows you to easily implement advanced concepts such as differential inheritance where objects are able to directly inherit from other objects. With Object.create you're also able to initialise object properties using the second supplied argument. For example:

01
var vehicle = {
02
getModel : function(){
03
console.log('The model of this vehicle is..' + this.model);
04
}
05
};
06

07
var car = Object.create(vehicle, {
08
'id' : {
09
value: MY_GLOBAL.nextId(),
10
enumerable:true /*writable:false, configurable:false by default*/
11
},
12
'model':{
13
value: 'Ford',
14
enumerable:true
15
}
16
});
Here the properties can be initialized on the second argument of Object.create using an object literal using the syntax similar to that used by the Object.defineProperties and Object.defineProperty methods. It allows you to set the property attributes such as enumerable, writable or configurable.

If you wish to implement the prototype pattern without directly using Object.create, you can simulate the pattern as per the above example as follows:

01
var vehiclePrototype = {
02
init: function(carModel) {
03
this.model = carModel;
04
},
05
getModel: function() {
06
console.log('The model of this vehicle is..' + this.model);
07
}
08
};
09

10

11
function vehicle(model) {
12
function F() {};
13
F.prototype = vehiclePrototype;
14
var f = new F();
15
f.init(model);
16
return f;
17
}
18

19
var car = vehicle('Ford Escort');
20
car.getModel();

The Command Pattern

The command pattern aims to encapsulate method invocation, requests or operations into a single object and gives you the ability to both parameterize and pass method calls around that can be executed at your discretion. In addition, it enables you to decouple objects invoking the action from the objects which implement them, giving you a greater degree of overall flexibility in swapping out concrete 'classes'.

If you haven't come across concrete classes before, they are best explained in terms of class-based programming languages and are related to the idea of abstract classes. An abstract class defines an interface, but doesn't necessarily provide implementations for all of its member functions. It acts as a base class from which others are derived. A derived class which implements the missing functionality is called a concrete class (you may find these concepts familiar if you're read about the Decorator or Prototype patterns).

The main idea behind the command pattern is that it provides you a means to separate the responsibilities of issuing commands from anything executing commands, delegating this responsibility to different objects instead.

Implementation wise, simple command objects bind together both an action and the object wishing to invoke the action and consistently include an execution operation (such as run() or execute()). All command objects with the same interface can easily be swapped as needed and this is considered one of the larger benefits of the pattern.

To demonstrate the command pattern we're going to create a simple car purchasing service.

01
$(function(){
02

03
var CarManager = {
04

05
/* request information */
06
requestInfo: function(model, id){
07
return 'The information for ' + model + ' with ID ' + id + ' is foobar';
08
},
09

10
/* purchase the car */
11
buyVehicle: function(model, id){
12
return 'You have successfully purchased Item ' + id + ', a ' + model';
13
},
14

15
/* arrange a viewing */
16
arrangeViewing: function(model, id){
17
return 'You have successfully booked a viewing of ' + model + ' ( ' + id + ' ) ';
18
}
19

20
};
21

22
})();
Now taking a look at the above code, we could easily execute our manager commands by directly invoking the methods, however in some situations we don't expect to invoke the inner methods inside the object directly. The reason for this would be, we don't want to increase the dependencies amongst objects i.e if the core login behind the CarManager changes, all our methods that carry out the processing with the manager have to be modified in the mean time. This would effectively go against the OOP methodology of loosely coupling objects as much as possible which we want to avoid.

Let's now expand on our CarManager so that our application of the command pattern results in the following: accept any process requests from the CarManager object where the contents of the request include the model and car ID.

Here is what we would like to be able to achieve:

1
CarManager.execute({commandType: "buyVehicle", operand1: 'Ford Escort', operand2: '453543'});
As per this structure we should now add a definition for the "CarManager.execute" method as follows:

1
CarManager.execute = function(command){
2
return CarManager[command.request](command.model,command.carID);
3
};
Our final sample calls would thus look as follows:

1
CarManager.execute({request: "arrangeViewing", model: 'Ferrari', carID: '145523'});
2
CarManager.execute({request: "requestInfo", model: 'Ford Mondeo', carID: '543434'});
3
CarManager.execute({request: "requestInfo", model: 'Ford Escort', carID: '543434'});
4
CarManager.execute({request: "buyVehicle", model: 'Ford Escort', carID: '543434'});

The DRY Pattern

Disclaimer: DRY is essentially a way of thinking and many patterns aim to achieve a level of DRY-ness with their design. In this section we'll be covering what it means for code to be DRY but also covering the DRY design pattern based on these same concepts.

A challenge that developers writing large applications frequently have is writing similar code multiple times. Sometimes this occurs because your script or application may have multiple similar ways of performing something. Repetitive code writing generally reduces productivity and leaves you open to having to re-write code you’ve already written similar times before, thus leaving you with less time to add in new functionality.

DRY (don’t repeat yourself) was created to simplify this - it’s based on the idea that each part of your code should ideally only have one representation of each piece of knowledge in it that applies to your system. The key concept to take away here is that if you have code that performs a specific task, you shouldn’t write that code multiple times through your applications or scripts.

When DRY is applied successfully, the modification of any element in the system doesn’t change other logically-unrelated elements. Elements in your code that are logically related change uniformly and are thus kept in sync.

As other patterns covered display aspects of DRY-ness with JavaScript, let's take a look at how to write DRY code using jQuery. Note that where jQuery is used, you can easily substitute selections using vanilla JavaScript because jQuery is just JavaScript at an abstracted level.

Non-DRY

01
/*Let's store some default values in an array*/
02
var defaultSettings = {};
03
defaultSettings['carModel'] = 'Mercedes';
04
defaultSettings['carYear] = 2010;
05
defaultSettings['carMiles'] = 5000;
06
defaultSettings['carTint'] = 'Metallic Blue';
07

08
/*Let's do something with this data if a checkbox is clicked*/
09
$('.someCheckbox').click(function(){
10

11
if (this.checked){
12
$('#input_carModel').val(activeSettings.carModel);
13
$('#input_carYear').val(activeSettings.carYear);
14
$('#input_carMiles').val(activeSettings.carMiles);
15
$('input_#carTint').val(activeSettings.carTint);
16

17
} else {
18

19
$('#input_carModel').val('');
20
$('#input_carYear').val('');
21
$('#input_carMiles').val('');
22
$('#input_carTint').val('');
23
}
24
});

DRY

01
$('.someCheckbox').click(function(){
02
var checked = this.checked;
03
/*
04
What are we repeating?
05
1. input_ precedes each field name
06
2. accessing the same array for settings
07
3. repeating value resets
08

09
What can we do?
10
1. programmatically generate the field names
11
2. access array by key
12
3. merge this call using terse coding (ie. if checked,
13
set a value, otherwise don't)
14
*/
15
$.each(['carModel', 'carYear', 'carMiles', 'carTint'], function(i,key){
16
$('#input_' + v).val(checked ? defaultSettings[key] : '');
17
});
18
});

The Facade Pattern

This pattern both simplifies the interface of a class and it also decouples the class from the code that utilizes it. Facades are often considered an essential part of a developer’s pattern toolkit - they can make library utilities significantly easier to understand by creating convenience routines that simplify the use of complex systems.

An example of where the Facade pattern can be found is in the creation of uniform JavaScript APIs which often seek to provide consistent experiences across all browsers. Facades provide us with an ability to indirectly interact with subsystems in a way that may be less prone to error than accessing the subsystem directly.

Facade’s advantages include ease of use and often a small size-footprint in implementing the pattern. It does however have some pitfalls - Facade is inefficient when used consecutively and each time it’s called a new check must be made to determine the features available for attaching event listeners. Let’s take a look at the pattern in action:

This is an unoptimized code example but here we utilize Facade to simplify an interface for attaching events. We do this by creating a common method that can be used in one’s code which does the task of checking for the existence of features so that it can provide a safe and cross-browser compatible solution.

1
var addMyEvent = function(el,ev,fn){
2
if(el.addEventListener){
3
el.addEventListener(ev,fn, false);
4
}else if(el.attachEvent){
5
el.attachEvent('on'+ev, fn);
6
} else{
7
el['on' + ev] = fn;
8
}
9
};

The Factory Pattern

Similar to other creational patterns, the Factory Pattern deals with the problem of creating objects (which we can think of as ‘factory products’) without the need to specify the exact class of object being created.

Specifically, the Factory Pattern suggests defining an interface for creating an object where you allow the subclasses to decide which class to instantiate. This pattern handles the problem by defining a completely separate method for the creation of objects and which sub-classes are able to override so they can specify the ‘type’ of factory product that will be created.

This can come in quite useful, in particular if the creation process involved is quite complex. eg. if it strongly depends on the settings in configuration files.

You can often find factory methods in frameworks where the code for a library may need to create objects of particular types which may be subclassed by scripts using the frameworks.

In our example, let’s take the code used in the original Constructor pattern example and see what this would look like were we to optimize it using the Factory Pattern:

01
var Car = (function() {
02
var Car = function (model, year, miles){
03
this.model = model;
04
this.year = year;
05
this.miles = miles;
06
};
07
return function (model, year, miles) {
08
return new Car(model, year, miles);
09
}
10
})();
11

12
var civic = new Car("Honda Civic", 2009, 20000);
13
var mondeo = new Car("Ford Mondeo", 2010, 5000);

When To Use This Pattern

The Factory pattern can be especially useful when applied to the falling situations:

When your object's setup requires a high level of complexity
When you need to generate different instances depending on the environment
When you're working with many small objects that share the same properties

When Not To Use This Pattern

It's generally a good practice to not use the factory pattern in every situation as it can easily add an unnecessarily additional aspect of complexity to your code. It can also make some tests more difficult to run.

The Mixin Pattern

In traditional object-oriented programming languages, mixins are classes which provide the functionality to be inherited by a subclass. Inheriting from mixins are a means of collecting functionality and classes may inherit functionality from multiple mixins through multiple inheritance.

In the following example, we have a 'Car' class defined without any methods. We also have a constructor called 'Mixin'. What we're going to do is augment the Car 'class' so it has access to the methods within the Mixin.This code demonstrates how with JavaScript you can augment a constructor to have a particular method without using the typical inheritance methods or duplicating code for each constructor function you have.

01
/* Car Class */
02
var Car = function(settings){
03
this.model = settings.model || 'no model provided';
04
this.colour = settings.colour || 'no colour provided';
05
};
06

07
/* Mixin Class */
08
var Mixin = function(){};
09
Mixin.prototype = {
10
driveForward: function(){
11
console.log('drive forward');
12
},
13
driveBackward: function(){
14
console.log('drive backward');
15
}
16
};
17

18

19
/* Augment existing class with a method from another class */
20
function augment(receivingClass, givingClass) {
21
/* only provide certain methods */
22
if (arguments[2]) {
23
for (var i=0, len=arguments.length; i24
receivingClass.prototype[arguments[i]] = givingClass.prototype[arguments[i]];
25
}
26
}
27
/* provide all methods*/
28
else {
29
for (methodName in givingClass.prototype) {
30
/* check to make sure the receiving class doesn't
31
have a method of the same name as the one currently
32
being processed */
33
if (!receivingClass.prototype[methodName]) {
34
receivingClass.prototype[methodName] = givingClass.prototype[methodName];
35
}
36
}
37
}
38
}
39

40

41
/* Augment the Car class to have the methods 'driveForward' and 'driveBackward'*/
42
augment(Car, Mixin,'driveForward','driveBackward');
43

44
/* Create a new Car */
45
var vehicle = new Car({model:'Ford Escort', colour:'blue'});
46

47
/* Test to make sure we now have access to the methods*/
48
vehicle.driveForward();
49
vehicle.driveBackward();

The Decorator Pattern

Decorator patterns are an alternative to creating subclasses. This pattern can be used to wrap objects within another object of the same interface and allows you to both add behaviour to methods and also pass the method call to the original object (ie the constructor of the decorator).

The decorator pattern is used when you need to keep adding new functionality to overridden methods. This can be achieved by stacking multiple decorators on top of one another.

What is the main benefit of using a decorator pattern? Well, if we examine our first definition, I mentioned that decorators are an alternative to subclassing. When a script is being run, subclassing adds behaviour that affects all the instances of the original class, whilst decorating does not. It instead can add new behaviour for individual objects, which can be of benefit depending on the application in question. Let’s take a look at some code that implements the decorator pattern:

01
//The class we're going to decorate
02
function Macbook(){
03
this.cost = function(){
04
return 1000;
05
};
06
}
07

08
function Memory(macbook){
09
this.cost = function(){
10
return macbook.cost() + 75;
11
};
12
}
13

14
function BlurayDrive(macbook){
15
this.cost = function(){
16
return macbook.cost() + 300;
17
};
18
}
19

20

21
function Insurance(macbook){
22
this.cost = function(){
23
return macbook.cost() + 250;
24
};
25
}
26

27

28
// Sample usage
29
var myMacbook = new Insurance(new BlurayDrive(new Memory(new Macbook())));
30
console.log( myMacbook.cost() );

Here's another decorator example where when we invoke performTask on the decorator object, it both performs some behaviour and invokes performTask on the underlying object.

01
function ConcreteClass(){
02
this.performTask = function()
03
{
04
this.preTask();
05
console.log('doing something');
06
this.postTask();
07
}
08
}
09

10
function AbstractDecorator(decorated){
11
this.performTask = function()
12
{
13
decorated.performTask();
14
}
15
}
16

17
function ConcreteDecoratorClass(decorated){
18
this.base = AbstractDecorator;
19
this.base(decorated);
20

21
this.preTask = function()
22
{
23
console.log('pre-calling..');
24
}
25

26
this.postTask = function()
27
{
28
console.log('post-calling..');
29
}
30

31
}
32

33
var concrete = new ConcreteClass();
34
var decorator1 = new ConcreteDecoratorClass(concrete);
35
var decorator2 = new ConcreteDecoratorClass(decorator1);
36
decorator2.performTask();

Design Patterns in jQuery

Now that we've taken a look at vanilla-JavaScript implementations of popular design patterns, let's switch gears and find out what of these design patterns might look like when implemented using jQuery. jQuery (as you may know) is currently the most popular JavaScript library and provides a layer of 'sugar' on top of regular JavaScript with a syntax that can be easier to understand at a glance.

Before we dive into this section, it's important to remember that many vanilla-JavaScript design patterns can be intermixed with jQuery when used correctly because jQuery is still essentially JavaScript itself.

jQuery is an interesting topic to discuss in the realm of patterns because the library actually uses a number of design patterns itself. What impresses me is just how cleanly all of the patterns it uses have been implemented so that they exist in harmony.

Let's take a look at what some of these patterns are and how they are used.

Module Pattern

The Module Pattern is based on the idea of having an encapsulated module which doesn't conflict with other modules in your code nor modules created by others which are included through other scripts on the page. This pattern is covered in greater detail in the section on pattern implementations in JavaScript but below is a version showing how you can use it in jQuery.
01
$(function(){
02
var itemClass = (function(){
03
var someItem = $('#item');
04
return{
05
thisItem: function(){
06
thisItem = document.createElement("div");
07
$(thisItem)
08
.html("test")
09
.appendTo("#container");
10
}
11
}
12
})();
13
});

Lazy Initialization

Lazy Initialization is a design pattern where you employ a tactic of delaying any expensive processes (eg. the creation of objects) until the first instance they are needed. An example of this is the .ready() function in jQuery that only executes a function once the DOM has fully loaded.

1
$(document).ready(function(){
2
$('#content').fadeIn();
3
});

The Composite Pattern

The Composite Pattern describes a group of objects that can be treated in the same way a single instance of an object can. Implementing this pattern allows you to treat both individual objects and compositions in a uniform manner. In jQuery, when we're accessing or performing actions on a single DOM element or a group of DOM elements, we can treat both in a uniform manner. This is demonstrated by the code sample below:

1
$('#someDiv').addClass('active'); // a single element
2
$('div').addClass('active'); // a collection of elements

The Wrapper Pattern

The Wrapper Pattern is a pattern which translates an interface for a class into a compatible interface. Wrappers basically allow classes to function together which normally couldn't due to their incompatible interfaces. The wrapper translates calls to its interface into calls to the original interface and the code required to achieve this is usually quite minimal.

1
$('.container').css({
2
opacity: .5 //apply opacity in modern browsers (eg. Chrome, FireFox) but use filter for IE
3
});

The Facade Pattern

The Facade Pattern is quite commonly used with OOP (Object-oriented programming) where a facade is an object which provides a simpler interface to a larger piece of code (eg. a class library). Facades can be frequently found across the jQuery library and make methods both easier to use and understand, but also more readable. The following are facades for jQuery's $.ajax():

1
$.get();
2
$.post();
3
$.getJSON();
4
$.getScript();

The Observer Pattern

The Observer pattern is where a subject (the object), keeps a list of its dependants, which are known as observers, and notifies them automatically of any changes in state. This is commonly done by calling one of their methods. The Observer pattern can be considered a subset of PubSub (publish/subscribe pattern).

1
//Here jQuery makes use of its event system on top of DOM events
2
$('.button').click(function(){})
3
$('.button').trigger('click', function(){})

The Iterator Pattern

The Iterator Pattern is a design pattern where iterators (objects that allow us to traverse through all the elements of a collection) access the elements of an aggregate object sequentially without needing to expose its underlying form. Iterators encapsulate the internal structure of how that particular iteration occurs - in the case of jQuery's .each() iterator, you are actually able to use the underlying code behind .each() to iterate through a collection, without needing to see or understand the code working behind the scenes that's providing this capability.

1
$.each(function(){});
2
$('.items').each(function(){});
An interesting side-note is that jQuery's 'each' method is backwards from the ECMAScript 5 way of doing this but may change at some point in the future.

The Strategy Pattern

The Strategy Pattern is a pattern where a script may select a particular algorithm at runtime. The purpose of this pattern is that it's able to provide a way to clearly define families of algorithms, encapsulate each as an object and make them easily interchangeable. You could say that the biggest benefit this pattern offers is that it allows algorithms to vary independent of the clients that utilize them. An example of this is where jQuery's toggle() allows you to bind two or more handlers to the matched elements, to be executed on alternate clicks.The strategy pattern allows for alternative algorithms to be used independent of the client internal to the function.

1
$('#container').toggle(function(){}, function(){});

The Proxy Pattern

The Proxy Pattern - a proxy is basically a class that functions as an interface to something else. The proxy can be an interface to almost anything: a file, a resource, an object in memory, something else that is difficult to duplicate etc. jQuery's .proxy() function takes as input a function and returns a new one that will always have a particular context. This is parallel to the idea of providing an interface as per the proxy pattern.

1
$.proxy(function(){}, obj);

The Builder Pattern

The Builder Pattern's main concept is that it abstracts the steps involved in creating objects so that different implementations of these steps have the ability to construct different representations of objects. Below is an example of how jQuery utilizes this pattern to allow an element which you may wish to append to the document body to be constructed using a string definition.

1
$('

bar

');

The Prototype Pattern

The Prototype Pattern is used when the objects you wish to create are determined by a prototypal instance that is cloned to produce the new objects. Essentially this pattern is used to avoid creating a new object in a standard manner when this process may be expensive or overly complex. In the following code sample which extends the jQuery.fn object for a minimal plugin, underlying prototypal code makes this possible:

1
$.fn.plugin = function(){}
2
$('#container').plugin();

The Flyweight Pattern

The Flyweight Pattern is a design pattern where an object attempts to minimize the amount of memory used by sharing as much information as possible with other objects that are similar in nature. It's a way to utilize objects in large numbers when a simple repeated representation may use an amount of memory deemed unacceptable. There are often aspects of an object state that can be shared and it's commonplace that these be stored in external data-structures that are passed to the flyweight objects temporarily when needed.

1
// The userConfig is shared here:
2

3
$.fn.plugin = function(userConfig){
4
userConfig = $.extend({
5
content: 'Hello user!'
6
}, userConfig);
7
return this.html(useConfig.content);
8
});
A side-note here is that prototypal inheritance in JavaScript uses differential inheritance to only define objects once in a prototype chain until they are overridden. This makes it easier to save memory.

Conclusions

That’s it for this introduction to the world of design patterns in JavaScript & jQuery– I hope you’ve found it useful. The contents of this book are in no way an extensive look at the field of patterns, but should give you enough information to get started using the patterns covered in your day-to-day projects.

Design patterns make it easier to reuse successful designs and architectures. It’s important for every developer to be aware of design patterns but it’s also essential to know how and when to use them. Implementing the right patterns intelligently can be worth the effort but the opposite is also true. A badly implementing pattern can yield little benefit to a project.

Also bare in mind that it’s not the number of patterns you implement that’s important but how you choose to implement them. For example, don’t choose a pattern just for the sake of using ‘one’ but rather try understanding the pros and cons of what particular patterns have to offer and make a judgement based on it’s fitness for your application.

If I’ve encouraged your interest in this area further and you would like to learn more about design patterns, there are a number of excellent titles on this area available for generic software development but also those that cover specific languages.

For JavaScript developers, I recommend checking out two books:

‘Pro JavaScript Design Patterns’ by Ross Harmes and Dustin Diaz.
'JavaScript Patterns' by Stoyan Stefanov

If you’ve managed to absorb most of the information in my mini-book, I think you’ll find reading these the next logical step in your learning process (beyond trying out some pattern examples for yourself of course) : )

Thanks for reading Essential JavaScript & jQuery Design Patterns. For more free learning material on JavaScript, jQuery and User-Interface Design, check out my official site over at http://addyosmani.com for my latest educational resources.

References
Design Principles and Design Patterns - Robert C Martinhttp://www.objectmentor.com/resources/articles/Principles_and_Patterns.pdf
Ralph Johnson - Special Issue of ACM On Patterns and Pattern Languages - http://www.cs.wustl.edu/~schmidt/CACM-editorial.html
Hillside Engineering Design Patterns Library - http://hillside.net/patterns/
Pro JavaScript Design Patterns - Ross Harmes and Dustin Diaz http://jsdesignpatterns.com/
Design Pattern Definitions - http://en.wikipedia.org/wiki/Design_Patterns
Patterns and Software Terminology http://www.cmcrossroads.com/bradapp/docs/patterns-intro.html
Reap the benefits of Design Patterns - Jeff Juday http://articles.techrepublic.com.com/5100-10878_11-5173591.html
JavaScript Design Patterns - Subramanyan Guhan http://www.slideshare.net/rmsguhan/javascript-design-patterns
What Are Design Patterns and Do I Need Them? - James Moaoriello http://www.developer.com/design/article.php/1474561
Software Design Patterns - Alex Barnett http://alexbarnett.net/blog/archive/2007/07/20/software-design-patterns.aspx
Evaluating Software Design Patterns - Gunni Rode http://www.rode.dk/thesis/
SourceMaking Design Patterns http://sourcemaking.com/design_patterns
The Singleton - Prototyp.ical http://prototyp.ical.ly/index.php/2007/03/01/javascript-design-patterns-1-the-singleton/
JavaScript Patterns - Stoyan Stevanov - http://www.slideshare.net/stoyan/javascript-patterns
Stack Overflow - Design Pattern Implementations in JavaScript (discussion) http://stackoverflow.com/questions/24642/what-are-some-examples-of-design-pattern-implementations-using-javascript
The Elements of a Design Pattern - Jared Spool http://www.uie.com/articles/elements_of_a_design_pattern/
Stack Overflow - Examples of Practical JS Design Patterns (discussion) http://stackoverflow.com/questions/3722820/examples-of-practical-javascript-object-oriented-design-patterns
Design Patterns in JavaScript Part 1 - Nicholas Zakkas http://www.webreference.com/programming/javascript/ncz/column5/
Stack Overflow - Design Patterns in jQuery http://stackoverflow.com/questions/3631039/design-patterns-used-in-the-jquery-library
Classifying Design Patterns By AntiClue - Elyse Neilson http://www.anticlue.net/archives/000198.htm
Design Patterns, Pattern Languages and Frameworks - Douglas Schmidt http://www.cs.wustl.edu/~schmidt/patterns.html
Show Love To The Module Pattern - Christian Heilmann http://www.wait-till-i.com/2007/07/24/show-love-to-the-module-pattern/
JavaScript Design Patterns - Mike G. http://www.lovemikeg.com/2010/09/29/javascript-design-patterns/
Software Designs Made Simple - Anoop Mashudanan http://www.scribd.com/doc/16352479/Software-Design-Patterns-Made-Simple
JavaScript Design Patterns - Klaus Komenda http://www.klauskomenda.com/code/javascript-programming-patterns/
Introduction to the JavaScript Module Pattern https://www.unleashed-technologies.com/blog/2010/12/09/introduction-javascript-module-design-pattern
Design Patterns Explained - http://c2.com/cgi/wiki?DesignPatterns
Mixins explained http://en.wikipedia.org/wiki/Mixin
Working with GoF's Design Patterns In JavaScript http://aspalliance.com/1782_Working_with_GoFs_Design_Patterns_in_JavaScript_Programming.all
Using Object.createhttp://stackoverflow.com/questions/2709612/using-object-create-instead-of-new
t3knomanster's JavaScript Design Patterns http://t3knomanser.livejournal.com/922171.html
Working with GoF Design Patterns In JavaScript Programming - http://aspalliance.com/1782_Working_with_GoFs_Design_Patterns_in_JavaScript_Programming.7
JavaScript Class Patterns - Liam McLennanhttp://geekswithblogs.net/liammclennan/archive/2011/02/06/143842.aspx
Speaking on the Observer pattern - http://www.javaworld.com/javaworld/javaqa/2001-05/04-qa-0525-observer.html
Singleton examples in JavaScript - Hardcode.nlhttp://www.hardcode.nl/subcategory_1/article_526-singleton-examples-in-javascript.htm
Design Patterns by Gamma, Helm supplement http://exciton.cs.rice.edu/javaresources/DesignPatterns/

reference : http://www.addyosmani.com/resources/essentialjsdesignpatterns/book/

OS X 10.6 & PC 共用的檔案格式

2011-05-24T07:53:00.000-07:00

Mac 和 PC 要共用，最佳解法是使用 extfs.
extfs 是目前多數 linux 使用的檔案系統，完全的公開技術.
在各種平台，都有免費且完整的支援工具..
macos 用的http://sourceforge.net/projects/ext2fsx/
windows 用的http://sourceforge.net/projects/ext2fsd/

OS X 10.6 雪豹下使用 NTFS 內建或外部 USB 隨身碟

2011-05-24T07:52:00.000-07:00

剛使用 MacBook 的時候，最不能讓我適應的是外部存檔這件事了。不管是使用網路空間還是外部硬碟，都是困難重重。好像非得要用MobileMe 才可以輕易的把檔案在不同裝置裡傳來傳去。接上原來在 PC 上使用的 NTFS 格式 USB 硬碟，檔案可以輕易的讀出，可是不能寫入。好一陣子，我都是用 FTP 在儲存我的檔案。可是我還是覺得麻煩。經過一陣子的搜尋後，終於找到幾個好用的辦法了。

在 OS X 下使用NTFS 硬碟讀寫有好幾種方式，可以修該 fstab，使用 MacFUSE + NTFS-3G 或使用付費軟體。這幾個方法我都試過了，都不錯。可是最近 google 到了一個新方法，我個人非常喜歡，因為不用下載新軟體，直接使用雪豹的程式就可以了。不過這個進階設定直接修改雪豹的 NTFS 驅動方法，風險還是有的，修改前請先有心理準備。

警告：本文件說明了如何通過在終端機應用程式中輸入指令來修改權限設定。不熟悉 Terminal 和 UNIX 式環境的使用者應小心進行作業。輸入不正確的指令可能會導致資料流失及/或系統軟體無法使用。不當修改權限可能會降低系統的安全性及/或造成私密資料外洩。

原理：

雪豹的 NTFS 驅動程式在 /sbin/ 下面，檔案名稱是 mount_ntfs。這個驅動程式原本就可以把 NTFS 硬碟裝在 OS X 的檔案系統下面，可讀可寫。可是雪豹的出廠設定只讓 NTFS 硬碟可以讀，但不能寫。我們只要修改這個設定，把參數加上“讀寫”就好了。

因為硬碟檢測是自動的，OS X 偵測到 NTFS 硬碟，就會直接調用這個程式。我們只要寫一個小小的銜接程式（mddleware），加入我們要的參數，就大功告成了。

動工修改：

因為要直接修改雪豹，我們必須開啓終端機，使用系統管理員的權限做修改。建議先開啓 time machine 備份資料，萬一修改有問題還有機會回復。

（以下修改都在終端機裡面進行）

[補充] 如果你是使用系統管理員帳戶登入的話就可以直接從 STEP 1 開始。如果你現在登入的不是系統管理員，先在終端機裡變更身分，就可以順利進行。Stanly 提供另一個啓用 root 帳號的方法也可以。記得全部做完以後再把 root 帳號關起來就是了。參考：啓用和停用 root 帳號

變更使用者身分：假設管理員帳號名稱為 vincent，在終端機裡打入 su vincent (按 return)，系統會問你密碼。輸入密碼後你的身分就變成管理員 vincent 了。進行 STEP 1－》

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

[Stanley補充] 開啟root權限（如果你從Step 1開始做發現有問題不能繼續時，請照這裡步驟先開啟root帳號，再從頭來過）

在終端機裡輸入 sudo passwd root （然後按下enter）

會跳出請你輸入password，請先輸入你這個原本帳號的密碼

然後會請你重新設定root帳號密碼，並在輸入一次確認

接著，在終端機裡輸入 su （然後按下enter）

然後輸入剛剛重新設定的root密碼就可以以root權限使用終端機

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

STEP 1. 保存並更名原有驅動程式

打入 sudo mv /sbin/mount_ntfs /sbin/mount_ntfs.orig

系統會問你管理員密碼，輸入管理員密碼。

[重要補充] 檢查 mount_ntfs 是否已更名

（在終端機裡面）打入 ls /sbin/mount* (按 return)

系統會列出 /sbin 下面以 mount 開頭的所有檔案。檢查看看 mount_ntfs.orig 在不在，如果不在，檢查一下出了甚麼問題，不要直接往下做。如果沒有順利保存原有程式，你可能連讀取資料的機會都沒了。

STEP 2. 製作銜接程式（mddleware）。

（進階使用者：直接使用你熟悉的編輯軟體製作以下內容的檔案，檔案名稱為 mount_ntfs （一律小寫），放在 /sbin 目錄下。跳到 STEP 3）

銜接程式內容只有兩行：

#!/bin/sh
/sbin/mount_ntfs.orig -o rw "$@"

詳細步驟（在終端機裡面進行）：

開啓編輯器，打入 nano /sbin/mount_ntfs （然後按下enter）

輸入程式碼

按 Control -O 儲存檔案，再按 Control -X 離開編輯器

STEP 3. 授與銜接程式適當權限

在終端機中打入

sudo chown root:wheel /sbin/mount_ntfs （然後按下enter）

sudo chmod 755 /sbin/mount_ntfs （然後按下enter）

大功告成！！

****還原步驟*****

如果有任何理由想要還原上述變更的話，只要打入 sudo mv /sbin/mount_ntfs.orig /sbin/mount_ntfs 把原來的檔還原就好了。

**注意事項：網路上有相同的方法，而且程式檔案已經做好，可以免費下載。但為了電腦安全，建議不要下載不明軟體，還是自己花點時間，敲敲鍵盤吧！

reference : http://www.macuknow.com/node/6718

Multithreading in php

2011-05-11T16:03:00.000-07:00

Some time ago, I’ve wrote a small server in PHP. Nothing fancy. It would listen on a socket and when a new client would connect, the server would start a new thread and manage the client’s request. Since threading it’s not available in PHP, I’ve emulated the threads with child processes which are available in php. A thread object simply encapsulates a new process started with pnctl_fork() and emulates – to some extent – the behaviour of the java.lang.Thread class, the main difference being that in my implementation, you don’t extend the Thread class, you simply provide the name of a callback function in the constructor.

A simple multithreaded application would look like this:

require_once( 'Thread.php' );

// test to see if threading is available
if( ! Thread::available() ) {
die( 'Threads not supported' );
}

// function to be ran on separate threads
function paralel( $_limit, $_name ) {
for ( $index = 0; $index < $_limit; $index++ ) {
echo 'Now running thread ' . $_name . PHP_EOL;
sleep( 1 );
}
}

// create 2 thread objects
$t1 = new Thread( 'paralel' );
$t2 = new Thread( 'paralel' );

// start them
$t1->start( 10, 't1' );
$t2->start( 10, 't2' );

// keep the program running until the threads finish
while( $t1->isAlive() && $t2->isAlive() ) {

}
This will display Now running thread 1 and Now running thread 2 messages with 1 second delays. I know, not that impressive, but hey, it’s multithreaded.

PHP threading will only work on Unix and Linux systems, because pnctl_fork is nothing more than a wrapper for the fork() function from unistd.h and it’s not available under Microsoft operating systems.

I know that the first example was pretty lame, but there are some more interesting things you could do with threads in PHP. For instance, if you need to do some server side processing of all the images in a directory, a multithreaded approach will be much faster.

require_once( 'Thread.php' );

// test to see if threading is available
if( ! Thread::available() ) {
die( 'Threads not supported' );
}

// define the function to be run as a separate thread
function processImage( $_image ) {
// expensive image processing logic here
}

$threads = array();
$index = 0;

foreach( new DirectoryIterator( '/path/to/images' ) as $item ) {
if( $item->isFile() ) {
$threads[$index] = new Thread( 'processImage' );
$threads[$index]->start( $item->getPathname() );
++$index;
}
}

// wait for all the threads to finish
while( !empty( $threads ) ) {
foreach( $threads as $index => $thread ) {
if( ! $thread->isAlive() ) {
unset( $threads[$index] );
}
}
// let the CPU do its work
sleep( 1 );
}
PS: it’s a bad practice to keep looping in order to wait for a thread to finish. An ongoing empty loop will quickly boost your CPU ’s load to 100%. If you need your processor free (and you need it), simply send the current (looping) thread to sleep and let the others execute.

// wait for thread - bad approach (overloads the CPU)
while ( $thread->isAlive() ) {
}

// wait for thread - correct approach
while( $thread->isAlive() ) {
sleep( 1 );
}
Download Thread.php
Here you go: Thread.php. Just click the link to download the class. If you have a better approach to this issue or think that the original class could be improved, don’t be shy and leave a comment below. Credits will be given.

reference : http://blog.motane.lu/2009/01/02/multithreading-in-php/

PHP CLI slow to exit with CURL + MySQL extensions

2011-05-10T18:35:00.001-07:00

Description:
------------
OK, this is a strange one. If you have CURL and either the php_mysql or php_pdo_mysql extensions active, then PHP (command line) will hang for about 5 seconds before actually exiting the script.

This is especially problematic in a CGI scenario, because the connection to the browser isn't closed during this delay and it looks like the request isn't complete.

The problem goes away if I comment out the Mysql extensions in my ini file.

Failed: There was a problem authoring the DVD

2011-04-24T19:10:00.000-07:00

solution:
Burn -> Preferences -> Video -> DVD -> NTSC

Comparison of file systems

2011-04-21T00:28:00.000-07:00

The following tables compare general and technical information for a number of file systems.

reference : http://en.wikipedia.org/wiki/Comparison_of_file_systems

mac osx pdf電子書閱讀軟體推薦

2011-04-17T19:37:00.001-07:00

軟體﹣Skim

NirCmd v2.52 - Freeware Windows command-line tool

2011-04-15T03:23:00.000-07:00

NirCmd is a small command-line utility that allows you to do some useful tasks without displaying any user interface. By running NirCmd with simple command-line option, you can write and delete values and keys in the Registry, write values into INI file, dial to your internet account or connect to a VPN network, restart windows or shut down the computer, create shortcut to a file, change the created/modified date of a file, change your display settings, turn off your monitor, open the door of your CD-ROM drive, and more...

Examples of what you can do with NirCmd

Open the door of J: CD-ROM drive nircmd.exe cdrom open j:
Close the door of Y: CD-ROM drive nircmd.exe cdrom close y:
Speaks the text currently in the clipboard (For Windows XP and Vista). speak text ~$clipboard$
Increase the system volume by 2000 units (out of 65535) nircmd.exe changesysvolume 2000
Decrease the system volume by 5000 units (out of 65535) nircmd.exe changesysvolume -5000
Set the volume to the highest value nircmd.exe setsysvolume 65535
Mute the system volume nircmd.exe mutesysvolume 1
Unmute the system volume nircmd.exe mutesysvolume 0
Switch the system volume between the mute and normal state. nircmd.exe mutesysvolume 2
Create a shortcut on your desktop that switch the system volume between the mute and normal state. nircmd.exe cmdshortcut "~$folder.desktop$" "Switch Volume" mutesysvolume 2
Turn off the monitor nircmd.exe monitor off
Start the default screen saver nircmd.exe screensaver
Put your computer in 'standby' mode nircmd.exe standby
log off the current user nircmd.exe exitwin logoff
Ask if you want to reboot, and if you answer 'Yes', reboot the computer. nircmd.exe qboxcom "Do you want to reboot ?" "question" exitwin reboot
Turn off your computer nircmd.exe exitwin poweroff
Turn off all computers specified in computers.txt ! multiremote copy "c:\temp\computers.txt" exitwin poweroff force
Dial to "My Internet" connection nircmd.exe rasdial "My Internet"
Disconnect the "My Internet" connection nircmd.exe rashangup "My Internet"
Make your Internet Explorer windows 75% transparent ! (192 / 256) nircmd.exe win trans ititle "internet explorer" 192
Minimize all your Internet Explorer windows nircmd.exe win min class "IEFrame"
Close all your Internet Explorer windows nircmd.exe win close class "IEFrame"
Close all your Explorer windows (My Computer, folders, and so on) nircmd.exe win close class "CabinetWClass"
Hide all your Internet Explorer windows nircmd.exe win hide class "IEFrame"
Show all your Internet Explorer windows (after you made them hidden with previous example) nircmd.exe win show class "IEFrame"
Center all top-level windows nircmd.exe win center alltop
Remove the title bar of My Computer window. nircmd.exe win -style title "my computer" 0x00C00000
Return the title bar of My Computer window that we removed in the previous example. nircmd.exe win +style title "my computer" 0x00C00000
Set the My Computer window to right-to-left order (For hebrew and arabic languages) nircmd win +exstyle title "my computer" 0x00400000
Set all child windows of My Computer window to right-to-left order (For hebrew and arabic languages) nircmd win child title "my computer" +exstyle all 0x00400000
Create a shortcut on your desktop that closes all your Internet Explorer windows nircmd.exe cmdshortcut " "~$folder.desktop$ "Close All IE" win close class "IEFrame"
Create a shortcut on your desktop that hides all your Internet Explorer windows nircmd.exe cmdshortcut " "~$folder.desktop$ "Hide All IE" win hide class "IEFrame"
Create a shortcut on your desktop that shows back all your Internet Explorer windows nircmd.exe cmdshortcut " "~$folder.desktop$ "Show All IE" win show class "IEFrame"
Set the Windows Calculator as top-most window (above all other windows) nircmd.exe win settopmost title "Calculator" 1
Set the Windows Calculator back to regular window (non top-most window) nircmd.exe win settopmost title "Calculator" 0
Create a shortcut to Windows calculator under Start Menu->Programs->Calculators nircmd.exe shortcut "f:\winnt\system32\calc.exe" "~$folder.programs$\Calculators" "Windows Calculator"
Hide the desktop window nircmd.exe win hide class progman
Show the desktop window (After hiding it in previous example) nircmd.exe win show class progman
Hide the start button on the system tray nircmd.exe win child class "Shell_TrayWnd" hide class "button"
Show the start button on the system tray nircmd.exe win child class "Shell_TrayWnd" show class "button"
Hide the clock on the system tray nircmd.exe win child class "Shell_TrayWnd" hide class "TrayClockWClass"
Show the clock on the system tray nircmd.exe win child class "Shell_TrayWnd" show class "TrayClockWClass"
Kill (terminate) all instance of Internet Explorer processes nircmd.exe killprocess iexplore.exe
Create a shortcut on your desktop that opens the door of K: CDROM drive when you run it. nircmd.exe cmdshortcut "~$folder.desktop$" "Open CDROM" cdrom open k:
Create a shortcut to NirSoft Web site on your desktop nircmd.exe urlshortcut "http://www.nirsoft.net" "~$folder.desktop$" "NirSoft"
Add NirSoft Web site to your Favorities under Links folder. nircmd.exe urlshortcut "http://www.nirsoft.net" "~$folder.favorites$\Links" "NirSoft"
Create a shortcut to NirSoft Web site on the desktop of all computers listed in computers.txt nircmd.exe multiremote copy "c:\temp\computers.txt" urlshortcut "http://www.nirsoft.net" "~$folder.common_desktop$" "NirSoft"
Set the display mode to 800x600x24bit colors nircmd.exe setdisplay 800 600 24
Create a shortcut on the desktop that set the display mode to 800x600x24bit colors nircmd.exe cmdshortcut "~$folder.desktop$" "800x600x24" setdisplay 800 600 24
Copy all shortcuts on your desktop to another folder (f:\temp\desktop). nircmd.exe execmd copy "~$folder.desktop$\*.lnk" f:\temp\desktop
Restart your Apache server (under Windows NT/2000/XP/2003) nircmd.exe service restart apache
Create a shortcut on your desktop that restarts the Apache server nircmd.exe cmdshortcut "~$folder.desktop$" "Restart Apache" service restart apache
Restart your IIS nircmd.exe service restart w3svc
Restart MySql nircmd.exe service restart MySql
Open the desired Registry key/value in RegEdit nircmd.exe regedit "HKLM\Software\Microsoft\Windows\CurrentVersion" "CommonFilesDir"
Open the Registry key that you copied to the clipboard in RegEdit. nircmd regedit "~$clipboard$"
Disable the screen saver nircmd.exe regsetval sz "HKCU\control panel\desktop" "ScreenSaveActive" 0
Enable the screen saver nircmd.exe regsetval sz "HKCU\control panel\desktop" "ScreenSaveActive" 1
Change the date/time of the specified filename (creation time and modified time) nircmd.exe setfiletime "c:\temp\myfile.txt" "24-06-2003 17:57:11" "22-11-2005 10:21:56"
Copy your desktop folder path to the clipboard nircmd.exe clipboard set ~$folder.desktop$
Copy your start menu folder path to the clipboard nircmd.exe clipboard set ~$folder.start_menu$
Copy the content of info1.txt (simple text file) to the clipboard nircmd.exe clipboard readfile "c:\My Files\info1.txt"
Add the text content of clipboard to info1.txt nircmd.exe clipboard addfile "c:\My Files\info1.txt"
Clear the clipboard nircmd.exe clipboard clear
Create all folders specified in "c:\temp\folders.txt". The folder path names are separated by CRLF characters. nircmd.exe paramsfile "c:\temp\folders.txt" "" "" execmd md ~$fparam.1$
Install the specified .NET assembly in the global assembly cache (like gacutil) nircmd.exe gac install "C:\temp\MyAssembly\bin\MyAssembly.dll"
Empty the recycle bin in all drives. nircmd.exe emptybin
Answer 'Yes' to a standard Windows message-box. nircmd.exe dlg "" "" click yes
Wait 2 seconds, and then save the current screen to shot.png nircmd.exe cmdwait 2000 savescreenshot "f:\temp\shot.png"
Save 10 screenshots in a loop, and wait 60 seconds between the screenshot save calls. The filenames of the screenshot will contain the time and date of the saved screenshot. nircmd.exe loop 10 60000 savescreenshot c:\temp\scr~$currdate.MM_dd_yyyy$-~$currtime.HH_mm_ss$.png
Wait until Firefox is closed, and then say "Firefox was closed" waitprocess firefox.exe speak text "Firefox was closed"

System Requirements

This utility can work in all 32-bit Windows operating systems: Windows 9x/ME, Windows NT, Windows 2000, Windows XP, Windows Server 2003, and Windows Vista. However, some of NirCmd commands works only on Windows NT/2000/XP/2003/Vista.

官網：http://www.nirsoft.net/utils/nircmd.html

Portable PHP code: DIRECTORY_SEPARATOR is not necessary

2011-04-12T03:35:00.000-07:00

In attempting to write cross-platform, portable PHP code, I used PHP’s DIRECTORY_SEPARATOR constant to write path strings, e.g. "..".DIRECTORY_SEPARATOR."foo", because the “proper” way to do it on Windows would be "..\foo" while on everything else (Linux, UNIX, Mac OS X) it would be "../foo".

Well, as Christian on php.net pointed out and the guys at Web Design Forums confirmed, that’s completely unnecessary. As long as you use the forward slash, “/”, you’ll be OK. Windows doesn’t mind it, and it’s best for *nix operating systems.

(Note that DIRECTORY_SEPARATOR is still useful for things like explode-ing a path that the system gave you. Thanks to Shadowfiend for pointing this out.)

reference : http://alanhogan.com/tips/php/directory-separator-not-necessary

Write file manipulation cross-platform PHP code

2011-04-12T03:34:00.000-07:00

As we use Windows computers to develop our PHP scripts and Linux servers in production, we must be careful about what we use in our PHP script, especially when manipulating files.
A lot of PHP function work well in cross-platform, rename(), unlink(), copy(), realpath(), glob() ... all of them will do the job, whether they are called in Linux, or Windows, but when playing with temporary directory (That can be at different places, even on same platform), parsing file paths or include_path, we need some tools.
One thing to avoid is doing specific part of code for Windows, and specific for Linux.
So I will focus in this post on some functions and constants around file manipulation that are helpful when writing cross-platform code.

Temporary directory with sys_get_temp_dir()
sys_get_temp_dir() function is useful to find the path of the directory PHP stores temporary files by default.
echo sys_get_temp_dir();
Will output on Windows
C:\Windows\Temp\
and on Linux
/tmp
If you want to put some files in temporary directory, and don't want to check what is the temporary directory path, sys_get_temp_dir() is the function made for that.

DIRECTORY_SEPARATOR
Even if some people tell you that / will do the job in both Windows and Linux, using DIRECTORY_SEPARATOR is the good way to go.
Nothing tell us that next PHP Version or next OS you will deploy your PHP on will not change this, it's not about if it works or not with /, but if you really want to do cross-platform PHP at 100%, not just when you find it useful.
So DIRECTORY_SEPARATOR will produce / on Linux, and \ on Windows.
Where it's again useful, is for exploding or applying regular expression on paths
explode(DIRECTORY_SEPARATOR, $path);
will look and perform better than doing
preg_split('/\\|\//', $path);

PATH_SEPARATOR
When playing with include_path, one difference between Windows and Linux, is the path separator between each include path, : for Linux and ; for Windows.
PATH_SEPARATOR will contain the right path separator for the actual platform.
# Printing base include_path
echo get_include_path() . PHP_EOL;

#Adding temporary directory to include_path
set_include_path(get_include_path() . PATH_SEPARATOR .
sys_get_temp_var() . DIRECTORY_SEPARATOR . 'somefolder');

# Printing modified include_path
echo get_include_path();
Will output in Linux
.:/usr/share/pear:/usr/share/php
.:/usr/share/pear:/usr/share/php:/tmp/somefolder
And on Windows
.;C:\Program Files\Zend\ZendServer\bin\pear;
.;C:\Program Files\Zend\ZendServer\bin\pear;C:\Windows\Temp\somefolder

Creating and managing temporary files with tmpfile()
tmpfile() function is useful as it will create a temporary file with a unique name in read-write mode and will returns a file handle to use with fwrite(), fread(), ...
The file is then removed by PHP when closed (fclose()), or when the script ends, you don't have to worry about cleaning or doing platform dependent code.
# Creating temporary file
$handle = tmpfile();

# Listing what is under temporary directory
var_dump(glob(sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'php*'));

# Closing resource link
echo 'Closing temporary file resource ...' . PHP_EOL;
fclose($handle);

# Listing what is under temporary directory
var_dump(glob(sys_get_temp_dir() . DIRECTORY_SEPARATOR . 'php*'));
Will output on Linux
array(1) {
[0]=>
string(14) "/tmp/phpJeGEGm"
}
Closing temporary file resource ...
array(0) {
}
And on Windows
array(1) {
[0]=>
string(26) "C:\Windows\Temp\php82.tmp"
}
Closing temporary file resource ...
array(0) {
}
As you see, temporary file is created by PHP, and then removed without any action.

Conclusion
As you see, writing cross-platform PHP code is quick and simple, and can save you a lot of time, simply check PHP documentation if you have any doubt in a function.

reference : http://blog.elijaa.org/index.php?post/2010/10/14/Write-file-manipulation-cross-platform-PHP-code

PHP_EOL constant

2011-04-12T02:56:00.000-07:00

This is a PHP constant that represents the correct end-of line string for the particular operating system you are running the code on.

If you plan to create cross-platform PHP applications this is the correct way to terminate a line in a text file instead of writing code to distinguish between the string "\r\n" and "\n" yourself.

See the invisible whitespace characters in Eclipse

2011-04-12T02:54:00.000-07:00

It is now possible to see the invisible whitespace characters in textual editors:

This feature can either be controlled via "General > Editors > Text Editors > Show whitespace characters" preference, or via the tool bar button when the Editor Presentation action set is enabled.

reference : http://stackoverflow.com/questions/971283/view-tabs-in-eclipse

Avoiding the use of .htaccess for performance

2011-04-12T00:29:00.000-07:00

.htaccess files are often used because they allow quick changes to the apache web server configuration and don’t require apache to be restarted. However with this flexibility comes a number of performance implications and as a result they should be avoided unless you have absolutely no other way to put configuration changes into effect e.g: shared hosting where you are unlikely to have access to httpd.conf.

The .htaccess performance hit
If .htaccess files are allowed (through the AllowOverride directive) then apache will look for .htaccess files on every request. In addition apache has to look up the directory tree to see if there are further .htaccess files in locations above the location the file is requested from so that it can tell which directives have precedence. For example: if you request a file from /foo/bar, apache has to look for /foo/bar/.htaccess, /foo/.htaccess and /.htaccess and that’s even if there are no .htaccess files present in any of those locations! Once a .htaccess file is found it has to be parsed and don’t forget all of this has to happen for every request!!

As there’s nothing in a .htaccess file that can’t be achieved in your httpd.conf (or files included by httpd.conf) it makes sense to move existing .htaccess rules into your apache conf using a Directory or Location directive as appropriate.

Restarting apache without dropping users
One other reason why .htaccess are seen as a convenience is that they don’t require apache to be restarted after configuration changes. However if you restart apache with “apachectl graceful” you only force the parent process to re-read the apache configuration files and the children to restart when they’re not doing anything and as a result no end users are suddenly dropped.

Finding all of the .htaccess files on your system
Simply drop on to your terminal and change directory to where you site files are located and run: find . -name *.htaccess -print. This should provide output that shows the location of all of the .htaccess files so you can go through one by one and move them to into httpd.conf or a file included by httpd.conf.

reference : http://muffinresearch.co.uk/archives/2008/04/07/avoiding-the-use-of-htaccess-for-performance/

Multiplatform Principle

2011-04-07T00:40:00.001-07:00

Always
1)use lower case add underline for filename and foldername(EX: widget_framework, unit_test...)
2)use forward slash(/) for PATH

Source Insight - Trace Code的神兵利器

2011-03-30T23:24:00.000-07:00

官方網址
http://www.sourceinsight.com/

也許這套大家不陌生，不過我倒是上班後才開始用到
因為以前寫的code哪有龐大到需要用這種來追 xD

讓我一步一步來教各位如何使用吧
1) 第一步當然是開新專案囉 [Project] → [New Project]
(在這邊填入你想要的Project名稱以及你source code所在的資料夾)

2) 下一步後出現 New Project Setting，這裡我是覺得直接用default就可以了

3) 下一步就要開始來做加入專案檔案囉！基本上在Directory那邊應該就是你整個程式的資料夾，
在File Name這裡選擇要加入的檔案。

基本上我都直接按 [Add All]，也就是將整個專案都加入啦！這邊要注意的就是你選Add All會出現
一個小視窗，預設值應該都只有勾第一個，記得把第二個勾起來(這個勾起來就是連同子目錄全選)

選好之後選擇 [Close]。

4) 接下來呢就請到[Opetions]→[Document Options]把你要全部有關聯的檔案通通加一下，
因為SI支援的類型實在太多啦

5) 嘿！別忘了做[Project]→[Synchronize files]，選項按照你的需求記得勾一勾，
這就是同步檔案啦！這樣就算完成啦！

可以開始來追Code啦~~~

軟體主畫面(右下角可以看relation)

看看滑鼠右鍵的功能表
幾個Jump to Caller、Jump to Definition、Lookup References就可以用到嚇嚇叫了

也可以直接對著某個function或是structure讓游標停留在上面，左下角會出現被定義的地方。
如果要再追進去的話，就在下面左下角那個視窗點兩下，就會跑進去那一隻程式啦！
(記得從[View]→[Relation Window]把右下角的relation叫出來，也可以直接對著那直接點哦)

這真的好用吧！嘿嘿，其實還有更好用的東西，可以去測試你的程式是否有defeat
下次我在介紹，是可以把他與Source Insight結合在一起哦！就像是外掛程式一樣 xDD

reference : http://www.wretch.cc/blog/hidex/8117748

log4php - Change log file Name dynamically in log4php.properties

2011-03-27T07:01:00.000-07:00

$rootlogger = Logger::getRootLogger();
$rootlogger->setLevel(LoggerLevel::toLevel(LoggerLevel::INFO));

$appender = new LoggerAppenderRollingFile("MyAppender");
$appender->setFile("custom_name.log", true);
$appender->setMaxBackupIndex(10);
$appender->setMaxFileSize("100MB");
$appenderlayout = new LoggerLayoutPattern();
$pattern = '%d{Y-m-d H:i:s} [%p] %c: %m (at %F line %L)%n';
$appenderlayout->setConversionPattern($pattern);
$appender->setLayout($appenderlayout);
$appender->activateOptions();

$rootlogger->removeAllAppenders();
$rootlogger->addAppender($appender);

$rootlogger->info("info");

reference : http://stackoverflow.com/questions/2658146/log4php-change-log-file-name-dynamically-in-log4php-properties