Apple doesn't make NTFS writable even in latest mountain lion operating system, so after I switch to new Macbook with Retina Display, I have not write anything to 'My Book Essential' which is NTFS format. However, due to the macbook 256G storage limit, I have to look for backing up before delete ebooks, photos and videos. Then I need write data to NTFS.
First I downloaded and installed NTFS_1.0d2.dmg by mistake, which was quite old and dated in 2003. I should read the download info carefully before typing my admin password to install this wrong app (which is also using package installer wizard, not the drag&drop app installation).
Then I googled and tried to find a way to uninstall it, but the solution is not straightforward, I even could not find a easy-to-understand way (something like the Window control panel way). To a rescue, I open the install package, and run the uninstall command shell, but I don't know if the uninstall is complete or not. Apple is always trying to hide the details from end user, good and bad.
OSXFUSE-2.5.4.dmg
https://github.com/osxfuse/osxfuse/downloads
ntfs-3g-2010.10.2-macosx.dmg
http://sourceforge.net/projects/catacombae/?source=dlp
are the solutions to get NTFS writable.
They are also package, but uninstall or update can be found from preference pane, which should be available in System Preferences once you have installed the package. In case you need run shell command from Terminal,
NTFS-3G
/System/Library/Filesystems/ntfs-3g.fs/Support/uninstall-ntfs-3g.sh
OSXFUSE (not sure if below works)
https://github.com/osxfuse/osxfuse/blob/master/packaging/uninstaller/uninstall-osxfuse-core.sh
Tuesday, December 25, 2012
Thursday, December 20, 2012
4 ways to call parent functions in backbone
Struggled with OOP concept in backbone.js when calling parent function, actually it is not backbone problem, but Javascript itself. After google, I found 4 most discussed ways to make sub class invoke parent class functions.
1. Use backbone plugin
https://github.com/lukasolson/Backbone-Super
this._super(attributes, options);
2. Use standard using Javascript style prototype
Backbone.Model.prototype.xxx.call(this)
3. Use the internal __super__ property
childModel.__super__.xxx.call(this)
4. Create _super function to Backbone Class
Backbone.Model.prototype._super = function(funcName){
return this.constructor.__super__[funcName].apply(this, _.rest(arguments));
}
this._super('set', arg);
I suggest to use the plugin if possible.
1. Use backbone plugin
https://github.com/lukasolson/Backbone-Super
this._super(attributes, options);
2. Use standard using Javascript style prototype
Backbone.Model.prototype.xxx.call(this)
3. Use the internal __super__ property
childModel.__super__.xxx.call(this)
4. Create _super function to Backbone Class
Backbone.Model.prototype._super = function(funcName){
return this.constructor.__super__[funcName].apply(this, _.rest(arguments));
}
this._super('set', arg);
I suggest to use the plugin if possible.
Wednesday, December 19, 2012
Debug FB API in local computer
Facebook Javascript SDK is well-designed and ease-of-use based on well-documented developer web site. There are a couple of steps to use FB APIs, and debug the codes in local computer rather than server.
Step 1:
Setup the app on https://developers.facebook.com/apps/
Usually need fill out the following two major sections:
1) Website with Facebook Login
2) App on Facebook (Canvas URL, Secure Canvas URL)
Step 2:
Change local computer hosts file to map 127.0.0.1 to production domain URL (the one entered in step 1)
Step 3:
Access local computer using production domain, which will be pointing to local code base, and it is easy to debug.
Step 1:
Setup the app on https://developers.facebook.com/apps/
Usually need fill out the following two major sections:
1) Website with Facebook Login
2) App on Facebook (Canvas URL, Secure Canvas URL)
Step 2:
Change local computer hosts file to map 127.0.0.1 to production domain URL (the one entered in step 1)
Step 3:
Access local computer using production domain, which will be pointing to local code base, and it is easy to debug.
Monday, December 17, 2012
Destroy Backbone View
When look at backbone.js View (http://backbonejs.org/#View), it is a Javascript object for UI piece, and works very well with backbone model (can be updated independently when the model changes). However, there is no handy destroy() or cleanup() or close() method to completely get rid of backbone view.
Then how to destroy a backbone view?
Suggestion 1:
Backbone.View.prototype.destroy = function(){
this.remove();
this.unbind();
if (this.onClose){
this.onClose(); // in each view, implement this: like this.model.unbind("change", this.render)
}
}
Suggestion 2:
Backbone.View.prototype.destroy = function() {
this.remove();
this.unbind(); // alias of this.off();
if (this.model) {
this.model.off(null, null, this);
}
if (this.collection) {
this.collection.off(null, null, this);
}
}
Suggestion 3:
Backbone.View.prototype.destroy = function() {
this.remove();
this.undelegateEvents(); // use this or this.unbind/this.off?
$(this.el).removeData().unbind(); // this is to remove custom data from jQuery data cache?
Backbone.View.prototype.remove.call(this); // this is redundant?
}
Backbone view does provide the following APIs
1. remove() which is to remove a view from DOM
2. undelegateEvents() which is to removes all of the view's delegated events
The call to `this.remove()` delegates to jQuery behind the scenes, by calling `$(this.el).remove()`. The effect of this is 2-fold. We get the HTML that is currently populated inside of `this.el` removed from the DOM (and therefore, removed from the visual portion of the application), and we also get all of the DOM element events cleaned up for us. This means that all of the events we have in the `events: { … }` declaration of our view are cleaned up automatically!
The call to `this.unbind()` will unbind any events that our view triggers directly – that is, anytime we may have called `this.trigger(…)` from within our view, in order to have our view raise an event.
The last thing we need to do, then, is unbind any model and collection events that our view is bound to.
With that, suggestion 1 or 2 is the way to go.
Then how about sub-views?
One best practice is saving sub views in a view property, and when destroy parent view, loop through sub view list to destroy them one by one.
How to render view with sub-view?
The answer is: Use view.setElement() method. For instance,
render : function () {
this.$el.$html(this.template());
this.subview1.setElement(this.$('.subview-1')).render();
this.subview2.setElement(this.$('.subview-2')).render();
return this;
}
Backbone 0.9.9
This 1.0 release candidate added listenTo() and stopListening() to help destroy view completely, below is from Backbone online upgrade info.
Most importantly, Backbone events have two new methods: listenTo and stopListening. These are an inversion-of-control flavor of the usual on and off, and make it a little easier to clean up all events that an object is listening to on other objects. When you destroy Views with view.remove(), this will now be done automatically.
If when bind view to model/collection using listenTo, then our view destory will be:
Backbone.View.prototype.destroy = function(){
this.remove(); //remove from dom, clean up dom events, and also call stopListening() to remove any bound model events that the view has listenTo'd.
this.unbind(); //remove self triggered events
}
Then how to destroy a backbone view?
Suggestion 1:
Backbone.View.prototype.destroy = function(){
this.remove();
this.unbind();
if (this.onClose){
this.onClose(); // in each view, implement this: like this.model.unbind("change", this.render)
}
}
Suggestion 2:
Backbone.View.prototype.destroy = function() {
this.remove();
this.unbind(); // alias of this.off();
if (this.model) {
this.model.off(null, null, this);
}
if (this.collection) {
this.collection.off(null, null, this);
}
}
Suggestion 3:
Backbone.View.prototype.destroy = function() {
this.remove();
this.undelegateEvents(); // use this or this.unbind/this.off?
$(this.el).removeData().unbind(); // this is to remove custom data from jQuery data cache?
Backbone.View.prototype.remove.call(this); // this is redundant?
}
Backbone view does provide the following APIs
1. remove() which is to remove a view from DOM
2. undelegateEvents() which is to removes all of the view's delegated events
The call to `this.remove()` delegates to jQuery behind the scenes, by calling `$(this.el).remove()`. The effect of this is 2-fold. We get the HTML that is currently populated inside of `this.el` removed from the DOM (and therefore, removed from the visual portion of the application), and we also get all of the DOM element events cleaned up for us. This means that all of the events we have in the `events: { … }` declaration of our view are cleaned up automatically!
The call to `this.unbind()` will unbind any events that our view triggers directly – that is, anytime we may have called `this.trigger(…)` from within our view, in order to have our view raise an event.
The last thing we need to do, then, is unbind any model and collection events that our view is bound to.
With that, suggestion 1 or 2 is the way to go.
Then how about sub-views?
One best practice is saving sub views in a view property, and when destroy parent view, loop through sub view list to destroy them one by one.
How to render view with sub-view?
The answer is: Use view.setElement() method. For instance,
render : function () {
this.$el.$html(this.template());
this.subview1.setElement(this.$('.subview-1')).render();
this.subview2.setElement(this.$('.subview-2')).render();
return this;
}
Backbone 0.9.9
This 1.0 release candidate added listenTo() and stopListening() to help destroy view completely, below is from Backbone online upgrade info.
Most importantly, Backbone events have two new methods: listenTo and stopListening. These are an inversion-of-control flavor of the usual on and off, and make it a little easier to clean up all events that an object is listening to on other objects. When you destroy Views with view.remove(), this will now be done automatically.
If when bind view to model/collection using listenTo, then our view destory will be:
Backbone.View.prototype.destroy = function(){
this.remove(); //remove from dom, clean up dom events, and also call stopListening() to remove any bound model events that the view has listenTo'd.
this.unbind(); //remove self triggered events
}
Sunday, December 16, 2012
Browser is becoming Web OS
Browser as an OS for the Web might be the future of front-end development platform. Google Chrome is getting closer to this, and Firefox OS is also moving toward this direction. Using Javascript, HTML5 and CSS to build native-like apps for the Web, it will bring our WWW more interactive, more user-friendly, more productive and of course more capable.
Recently I started to look at Chrome Web Store, they are many many free apps, extensions and themes in the store. Developing these stuff on top of Chrome browser is kind of fun and straightforward if following Google online tutorial, user manual and API descriptions.
App has hosted app and packaged app. Packaged app is more interesting and need explore further, while hosted app is basically a reference (soft link) to your own hosted web app instead of Chrome web store.
Extensions (plugins) are Javascript/HTML/CSS built package installable on Chrome browser, so that the extension can interact with Chrome browser and provides many cool functions via well-documented APIs (https://developer.chrome.com/extensions/api_index.html)
Themes are skins which empowers preference (color tone, wallpaper etc) on the browser platform.
With these fun experiment, modern browser is changing from platform to OS and HTML5 gives web developers more flexibility and ability to build beautiful web apps. I consider these modern browsers are operating system for the Web on top of native operating systems (Windows, Mac, Linux etc).
Recently I started to look at Chrome Web Store, they are many many free apps, extensions and themes in the store. Developing these stuff on top of Chrome browser is kind of fun and straightforward if following Google online tutorial, user manual and API descriptions.
App has hosted app and packaged app. Packaged app is more interesting and need explore further, while hosted app is basically a reference (soft link) to your own hosted web app instead of Chrome web store.
Extensions (plugins) are Javascript/HTML/CSS built package installable on Chrome browser, so that the extension can interact with Chrome browser and provides many cool functions via well-documented APIs (https://developer.chrome.com/extensions/api_index.html)
Themes are skins which empowers preference (color tone, wallpaper etc) on the browser platform.
With these fun experiment, modern browser is changing from platform to OS and HTML5 gives web developers more flexibility and ability to build beautiful web apps. I consider these modern browsers are operating system for the Web on top of native operating systems (Windows, Mac, Linux etc).
Sunday, December 2, 2012
Select HTML5 Video/Audio Player
There are many HTML5 Video and audio players which support native HTML5 audio/video tags with flash/silverlight fallback to support non-modern browsers. Selecting appropriate player among a big list needs more research effort, so finding the right one for your web application depends on your web app requirement and design. Even your web app doesn't need support non-modern browsers, I still suggest to use one HTML5 media player because different browsers support different video/audio codecs.
Web app requirement and design usually include the following points:
1. Do you want a unified UI/API for native HTML5 and flash fallback?
2. Do you need this on iOS (or other mobile browsers)?
3. Do you need the skinnable player?
4. Do you need the player support both video and audio?
5. What kind of license do you accept?
Among the big list and google results, I finally referenced the below 3 links to narrow down my choices
http://praegnanz.de/html5video/
http://html5video.org/wiki/HTML5_Player_Comparison
http://websitesmaderight.com/2011/05/45-html5-media-players-tutorials-and-resources/
For Video
video.js (LGPLv3)
SublimeVideo (Service/licensed)
JW Player (Custom)
flowplayer (GPLv3/Commercial)
For Audio
audio.js (MIT)
SoundManager (BSD)
For both Video and Audio
mediaelement.js (GPLv2 & MIT)
jplayer.js (GPL/MIT))
pickle player (licensed/purchase)
jMediaelement(GPL/MIT)
html5media.info (CC BY-NC-ND 3.0)
I want to find a player to support both Video and Audio, license free, working on iOS and with different themes for visual happiness. From above shorter list, I probably go with mediaelement.js (Paul Irish also recommends this player).
Web app requirement and design usually include the following points:
1. Do you want a unified UI/API for native HTML5 and flash fallback?
2. Do you need this on iOS (or other mobile browsers)?
3. Do you need the skinnable player?
4. Do you need the player support both video and audio?
5. What kind of license do you accept?
Among the big list and google results, I finally referenced the below 3 links to narrow down my choices
http://praegnanz.de/html5video/
http://html5video.org/wiki/HTML5_Player_Comparison
http://websitesmaderight.com/2011/05/45-html5-media-players-tutorials-and-resources/
For Video
video.js (LGPLv3)
SublimeVideo (Service/licensed)
JW Player (Custom)
flowplayer (GPLv3/Commercial)
For Audio
audio.js (MIT)
SoundManager (BSD)
For both Video and Audio
mediaelement.js (GPLv2 & MIT)
jplayer.js (GPL/MIT))
pickle player (licensed/purchase)
jMediaelement(GPL/MIT)
html5media.info (CC BY-NC-ND 3.0)
I want to find a player to support both Video and Audio, license free, working on iOS and with different themes for visual happiness. From above shorter list, I probably go with mediaelement.js (Paul Irish also recommends this player).
Subscribe to:
Posts (Atom)