Sublime SFTP by

31
May
0

ขั้นแรกเราก็ไปโหลด Plugin มาก่อนนะครับ

https://github.com/SublimeText/Mote

จิ้มข้างบนเลยครับ

เมื่อโหลดเสร็จแล้วเราก็แตกไฟล์แล้วเอาไปไว้ใน Folder Packages ของ Sumlime นะครับ หากใครไม่รู้ว่ามันอยู่ตรงไหนกด ที่ menu Preferences->Browse Packages… ดูนะครับ มันจะมีหน้าต่างคล้ายๆ open file ขึ้นมาอ่ะครับ ตรงนั้นแหละครับ ที่ตั้งของ Folder Packages

พอเอา Folder ไปใส่ไว้เสร็จให้ copy psftp.exe ที่ download จาก web putty มาไปใส่ใน folder นั้น

ต่อมาเป็นการแก้ config นะครับ ใน Folder ของ Mote นั้นจะมีไฟล์ชื่อว่า servers.json ให้เราเปิดมันด้วย text editor(ถ้าไม่รู้จะใช้อะไร ก็ใช้ sublime เนี่ยแหละคร้าฟฟฟ) แล้วก็เพิ่ม config server ของเราเข้าไปครับ
เช่น

“pokdeng”:{
“connection_string”: “root@xxx.xxx.xxx.xxx”,
“port”: “xxxxx”,
“private_key”:”D:\\private.ppk”,
“idle_recursive”: false,
“default_path”: “/home/test/test”
}

ข้อควรระวังคือ private_key ใน path ห้ามมีเว้นวรรคโดยเด็ดขาด ไม่อย่างนั้นจะไม่สามารถใช้งานได้

เมื่อแก้ config เสร็จให้เรา save ทีนึง และก็ปิดมันไปได้เลยยย หมดประโยชน์ละ

เมื่อเราจะใช้ Mote ก็ให้กด
ctrl+shift+p
พิม Mote
เลือก server ที่เรา config ไว้ กด Enter

ถ้าหาก connect สำเร็จ มันจะมีหน้าต่างให้เราเลือก ไฟล์ ที่เราจะแก้
ถ้าเลือกไฟล์แล้ว มันจะ download มาใส่ไว้ใน folder temp ของ plugin
หลังจากนั้น ถ้าเราแก้ไขอะไรไฟล์นี้และกด save มันจะ upload ให้อัตโนมัติเลยครับ

วิธี remote debugging node.js ด้วย node-inspector by

31
May
0

เคยใช้พวก Watch, Breakpoint, Step into, Step Over, Step Out ช่วยในการ debug javascript ใน Chrome ไหมครับ รู้หรือไม่ว่าเราสามารถ remote debug code node.js ไปยังเครื่อง server ที่อยู่คนละที่ได้เลย :) วิธีการมีดังนี้ครับ

  1. npm install -g node-inspector
  2. เพิ่ม debugger; ในบรรทัดที่ต้องการ set breakpoint ภายในโปรแกรม node.js ของเรา
  3. node-inspector –web-port=1338 & (เปลี่ยน 1338 เป็นเลข port ที่คุณต้องการเปิดให้ debug เข้ามาได้ หรือถ้าไม่ใส่จะ default ที่ 8080)
  4. หากโปรแกรมคุณชื่อ server.js สั่งรันดังนี้คือ node –debug node server.js (ห้ามเอา –debug ไปต่อท้าย ต้องอยู่หลัง node เท่านั้น)
  5. เข้าเว็บ http://localhost:1338/debug?port=5858 (แก้ localhost เป็นชื่อเว็บที่คุณใช้งานได้เลย)
  6. จะปรากฎดังรูป พร้อมให้คุณใช้งาน debug!
    node-inspector-google-chrome_2013-05-31_21-19-32
  7. ส่วนที่วงสีแดงไว้ในข้อ 6 คือเราสามารถเปิด browse file ใน project ของเราเพื่อมา set breakpoint เพิ่มสดๆ ด้วยการคลิกที่เลขบรรทัดทางซ้ายได้เลยทันที สะดวกต่อการใส่ breakpoint เฉพาะเวลาที่ต้องการเท่านั้น
  8. สามารถเอาเม้าส์ชี้เพื่อดูค่าตัวแปร, add to watch, step into, step over, step out ได้ครบถ้วน Yay!

ขอให้โชคดีกับ Node.js ทุกๆ ท่าน :D

ปัญหา Click Event กับภาพ PNG พื้นหลังโปร่งใสใน Flash by

31
May
0

เคยไหมเมื่อต้องการ Import ภาพนามสกุล PNG ที่มีพื้นหลังโปร่งใส แล้วมีปัญหาเวลารับเหตุการณ์ Click Mouse ตรงที่เมื่อ Click ในส่วนที่เป็นพื้นโปร่งใสแล้วดันทำเหตุการณ์ไปด้วย เช่น

มีภาพ PNG ดังนี้

applepic

สร้างไฟล์ Flash ขึ้นมา 1 ไฟล์ และ Import ภาพแล้วนำไปทำเป็น Movie Clip แล้วตั้งชื่อว่า apple จากนั้นตั้ง Event ดังนี้

apple.addEventListener(MouseEvent.CLICK, clickApple);
function clickApple(e:MouseEvent)
{
trace("Wow!");
}

เมื่อกด Ctrl + Enter แล้วลองคลิกในส่วนที่เป็นพื้นหลังใส รอบๆ แอปเปิล สังเกตว่าจะขึ้นข้อความ Wow! ทั้งๆ ที่ไม่ได้กดในส่วนที่เป็นแอปเปิลเลย เพราะ Flash จะมองส่วนที่เป็นรูปภาพทั้งหมดไม่ว่าพื้นหลังจะใสก็ตาม ดังนั้นจากภาพตัวอย่างด้านล่างนี้ ถ้าคลิกในบริเวณในกรอบฟ้า ก็จะแสดงผล Wow! ทั้งหมด

appleborder

วิธีการทำให้ Event ตรวจจับเฉพาะส่วนของแอปเปิล นั่นคือการใช้ Class สำเร็จรูปที่มีชื่อว่า InteractivePNG ซึ่งจะทำให้เราสามารถแก้ไขปัญหาในบทความนี้ได้ ซึ่ง ดาวน์โหลดได้ที่นี่

เมื่อดาวน์โหลดมาแล้วให้แตกไฟล์และ Copy Folder ชื่อ com ไปไว้ที่เดียวกับไฟล์ Flash ที่บันทึกไว้ จากนั้นให้แก้ไข Movie Clip รูปแอปเปิ้ลที่ใช้งานด้านบนด้วยการไปที่ Library แล้วคลิกขวาที่ Movie Clip ที่ใช้งาน เลือก Properties…  ให้กดติ้กถูกที่ Export for Actionscript และในช่อง class ให้ใส่ com.mosesSupposes.bitmap.InteractivePNG ดังภาพ  (หากไม่มีรายละเอียดดังกล่าวให้แก้ไข ให้กดปุ่ม Advanced ก่อน)

screen-shot-2556-05-31-at-90338-pm

จากนั้นให้ลองกด Ctrl + Enter เพื่อรันใหม่ จะพบว่าเมื่อกดพื้นหลังใสบริเวณรอบแอปเปิลจะไม่ขึ้นข้อความ Wow! แล้ว จะขึ้นเฉพาะตอนที่กดโดนแอปเปิลเท่านั้น

ดาวน์โหลดตัวอย่างที่เสร็จสมบูรณ์ได้ที่

วิธีการนำรูปไฟล์ GIF ที่มีอนิเมชั่นมาใช้ใน Flex by

31
May
0

โดยปกติแล้วถ้าเราใช้ส่วนที่โหลดไฟล์รูปปกติมาโหลดไฟล์ GIF แล้ว รูป GIF ของเราจะแสดงผลแต่จะไม่เคลื่อนไหวใดๆ หรือไม่มี Animation เลย วันนี้เลยจะเสนอวิธีการรนำรูปไฟล์ GIF ที่มีอนิเมชั่นมาใช้ใน Flex โดยที่ยังเล่น Animation ต่อครับ

ขั้นแรกให้เราโหลด class นี้มาใช้ก่อนครับ GIF Player

จากนั้นก็ทำการโหลดไฟล์ GIF มาใส่เท่านี้ก็จะสามารถแสดงผลไฟล์ GIF ได้แล้วครับ :)

ตัวอย่าง

public function Main():void
{
var request:URLRequest = new URLRequest("sample.gif");
var player:GIFPlayer = new GIFPlayer();
player.load(request);
addChild(player);
}

การเขียน javascript ในรูปแบบ oop by

31
May
0

oop (Object Oriented Programming)
เป็นหลักการ เขียนโปรแกรมชนิดหนึ่งครับ บางคนอาจจะนึกไม่ออกแต่ถ้า บอกว่า เขียนในรูปแบบของ class กับ object หลายๆคนคงจะนึกออกน่ะครับ
แต่การเขียน javascript ในรูบแบบของ oop นั้นจะมีวิธีการเขียนที่แปลกสักหน่อย ครับ ดังนี้ครับ
รูปแบบการเขียน

จากตัวโครงสร้างการเขียน class เราจะสร้าง class Foo ขึ้นมา โดย
function Foo() {
}
จะเป็นเหมือนการประกาศ class ครับ
ส่วนการสร้าง Constructor จะเป็นการรับค่ามาจาก parameter
ในรูปแบบของ
function Foo(bar) {
// การสร้าง Constructor กับ Attribute
this.bar = bar;
this.baz = ‘baz’; // default value
}
โดย ใช้ this. การสร้าง Attribute ขึ้นมา
และส่วนการสร้าง Method นั้น จะใช้การเขียนแบบนี้ครับ
Foo.prototype.fooBar = function() {
};
ชื่อ class.prototype.ชื่อMethod = function ที่เราจะสร้าง
แต่ ชื่อ class.prototype. นั้นสามารถ ตามด้วย Attribute ได้ แต่ ค่าตัวนั้นจะเป็นค่า ของ class
คือ Object ที่สร้างจาก class นี้จะมีค่า เหมือนกัน เหมือนตัวอย่างนี้ ครับ

var Foo = function (name) { this.name = name; };
Foo.prototype.data = [1, 2, 3];
Foo.prototype.showData = function () { console.log(this.name, this.data); };

var foo1 = new Foo(“foo1″);
var foo2 = new Foo(“foo2″);

foo1.showData(); // “foo1″, [1, 2, 3]
foo2.showData(); // “foo2″, [1, 2, 3]

// ถ้าเราเพิ่ม ค่าลง ( prototype.data )
foo1.data.push(4);

// obj ทั้ง 2 จะเหมือนกัน
foo1.showData(); // “foo1″, [1, 2, 3, 4]
foo2.showData(); // “foo2″, [1, 2, 3, 4]

ประมาณนี้ครับ แต่ถ้าต้องการ แยก class ออกมาอีกไฟล์หนึ่งก็ใช้
module.exports = Foo;
ออกมาครับ

กู้เงิน | เศรษฐกิจพอเพียง | สินเชื่อบุคคล | สมัครบัตรกดเงินสด | สินเชื่อ | เงินกู้ด่วน | ยืมเงินทรูมูฟ | เงินด่วนนอกระบบ