Google Maps Image APIs

Google Maps Image APIs คือบริการสร้างรูปภาพแผนที่จากตำแหน่ง Latitude และ Longitude ที่เราส่งเข้าไปใน API เราสามารถกำหนดขนาดของรูปภาพ ระยะการ Zoom ได้ ใส่ Marker เข้าไปเองได้ นอกจากนั้น ยังสามารถแสดงมุมของของแผนที่ในแบบ Street View ได้อีกด้วย ข้อดีของ Google Maps Image APIs คือ เราสามารถ save รูปภาพที่ได้จากการเรียกใช้ API แล้วนำมาวางไว้บน Server ของเราเอง ทำให้สามารถแสดงผลได้รวดเร็วกว่าการใช้ Google Maps แบบปกติ แต่ข้อเสียก็คือ ไม่สามารถ Zoom หรือโต้ตอบใดๆกับแผนที่ได้ เนื่องจากแผนที่ที่เราจะได้ออกมาจะเป็นเพียงรูปภาพธรรมดาเท่านั้น แต่สำหรับผู้ที่ต้องการเพียงแค่แสดงภาพแผนที่ เพียงเท่านี้ก็เพียงพอกับความต้องการแล้วครับ ลองดูตัวอย่างการใช้งานเบื้องต้นดังนี้ครับ

แบบแรก เรียกว่า Static Map Image API เป็นการแสดงแผนที่ในมุมมองปกติ (Terrain or Sattellite)

<img src="http://maps.googleapis.com/maps/api/staticmap?center=-15.800513,-47.91378&zoom=11&size=200x200&sensor=false">

แบบที่สอง เรียกว่า Street View Image API เป็นการแสดงแผนที่ในมุมมองแบบ Street View

<img src="http://maps.googleapis.com/maps/api/streetview?size=200x200&location=40.720032,%20-73.988354&heading=235&sensor=false">

สำหรับผู้ที่สนใจ สามารถศึกษารายละเอียดเพิ่มเติมได้ที่นี่ครับ http://bit.ly/Y8NcJo

How to output image in PHP

จากบทความก่อนหน้านี้ที่เคยแนะนำเกี่ยวกับการ Resize Image ใน PHP ไปแล้ว สำหรับบทความนี้ผมอยากจะมาแนะนำวิธีการ Output Image ใน PHP ดังนี้คือ เริ่มต้นจากการเตรียม Image File ก่อน (โดยอาจจะเป็น Image File ที่เตรียมไว้ล่วงหน้า หรือมาจากการ Resize) จากนั้นเราจะใช้คำสั่ง readfile เพื่ออ่าน content ที่อยู่ใน file พร้อมกับ output ออกมา แต่เนื่องจาก readfile จะส่งแค่ content ที่อยู่ใน file เท่านั้น ไม่ได้ส่ง header ตามมาตรฐาน HTTP ทำให้ browser ไม่รู้จัก ดังนั้นเราจะต้องสร้าง HTTP Header ขึ้นมาเอง โดยใช้คำสั่ง header โดยในที่นี้เราจะส่ง header 2 ตัว ซึ่งได้แก่ Content-Type และ Content-Length ไปพร้อมกับ Image เดี๋ยวลองดูในส่วนของ coding กันนะครับ

$file = 'images/todd_64x64.jpg';
header('Content-Type: image/jpg');
header('Content-Length: '.filesize($fle));
readfile($file);

ใน code ไม่มีอะไรยาก คงไม่ต้องอธิบายอะไรมาก ก็เริ่มจากการเตรียมตัวแปร จะนั้นก็สร้าง HTTP Header และใช้คำสั่ง readfile เพื่ออ่าน content ที่อยู่ใน file และส่งกลับคืนไป

หากใช้เทคนิคนี้ร่วมกับการ Resize Image จะช่วยให้เราไม่ต้องเตรียม Image สำหรับหน้าจอหลายขนาด เพียงแค่เตรียมภาพสำหรับขนาดหน้าจอใหญ่สุดที่จะรองรับ แล้วเราค่อย Resize โดยการ Scale Down ลง จะทำให้ภาพไม่เสียคุณภาพไปมาก

Open CUE file บน WinAmp v.5.6 ด้วย CUE Player Plugin

ปกติผมชอบฟังเพลงจากแผ่น Audio CD แต่ตอนนี้เครื่องเล่น CD ของผมเสียอยู่ ก็เลยต้องเปลี่ยนมาฟังจากไฟล์ที่ RIP เก็บเอาไว้ใน Hard Disk แทน ปกติผมมักจะใช้ WinAmp เป็น Player ซึ่งโดยทั่วไปก็สามารถเปิดเล่นไฟล์ต่างๆทั่วไปได้ไม่มีปัญหา แต่มาติดที่ไฟล์ที่ผมเก็บเอาไว้ ซึ่งส่วนมากจะเป็น FLAC ซึ่งเป็น compression ในแบบ Lossless (ซึ่งจะให้คุณภาพเสียงคงเดิม หรือใกล้เคียงต้นฉบับมากที่สุด) ซึ่งในเวลา RIP จากแผ่น Audio ผมมักจะชอบ RIP ออกมาเป็น FLAC ไฟล์ใหญ่ๆเพียงแค่ไฟล์เดียว โดยที่จะมี CUE ไฟล์เป็นตัวคอยระบุ Track ที่อยู่ใน FLAC อีกที ซึ่ง Player หลายๆตัวที่ไม่รู้จัก CUE ก็จะไม่สามารถเปิดอ่านไฟล์ CUE ได้ ทำให้ไม่นำข้อมูลของแต่ละ Track ขึ้นมาแสดงให้ดูได้ (แต่สามารถเล่น FLAC ไฟล์นะครับ ยังฟังเพลงได้ตามปกติ  เพียงแต่จะไม่สามารถเลือก Track ที่ต้องการได้) ซึ่งใครที่ใช้ WinAmp v.5.6 เหมือนกับผม และอยากจะทำให้ WinAmp สามารถเปิดไฟล์ CUE ได้ วันนี้ผมมีวิธีมาแนะนำครับ ให้ไป download CUE Player Plugin สำหรับ WinAmp (แต่ต้องดูด้วยนะครับ ว่ารองรับ WinAmp version ไหน) สำหรับตัวที่ผมจะมาแนะนำ จะเป็นตัวที่สามารถใช้งานได้กับ WinAmp v.5.6 เริ่มต้นโดยเข้าไป download ไฟล์ Plugin จากใน Blog นี้ก่อนครับ http://bit.ly/UlJVCz จะได้เป็นไฟล์ ZIP มา จากนั้นให้เปิดไฟล์ ZIP ออกมา จะพบไฟล์ .dll อยู่ในนั้น 2 ไฟล์ ให้ copy ทั้ง 2 ไฟล์ เอาไปวางไว้ใน puglins folder ของ WinAmp จากนั้นให้ปิดแล้วเปิด WinAmp ใหม่ ก็จะสามารถเปิดไฟล์ CUE และสามารถมองเห็น Track ต่างๆได้แล้วครับ

Resize Image using PHP

การพัฒนาเว็บในปัจจุบันจำเป็นที่ต้องแสดงผลบนหลาย screen ที่มีขนาดแตกต่างกัน ไม่ว่าจะเป็น Desktop, Tablet หรือ Smartphone ดังนั้นการ Resize Image ให้เหมาะสำหรับการแสดงผลในแต่ละ screen จึงเป็นสิ่งที่จำเป็น สำหรับในบทความนี้ ผมอยากจะมาแนะนำ PHP Script สำหรับใช้ในการ Resize Image ซึ่งเขียนขึ้นโดย Simon Jarvis สามารถ Resize รูปได้หลายแบบ ไม่ว่าจะเป็นการ Resize โดยยึดจากความสูงเป็นหลัก หรือจะยึดจากความกว้างเป็นหลักก็สามารถทำได้ สำหรับตัว Script มีการใช้ GD Library เป็น Graphic Engine สำหรับทำงานเกี่ยวกับรูปภาพ สำหรับผู้ที่่สนใจ สามารถเข้าไปอ่านบทความ พร้อมทั้ง download script ไปใช้งานได้ที่นี่ครับ http://bit.ly/TUT8x2

เทคนิคการสร้าง Unique Array ใน JavaScript

สำหรับบทความนี้ผมจะมานำเสนอเทคนิคในการสร้าง Unique Array (คือ Array ที่มีค่า Value ไม่ซ้ำกัน) สำหรับเทคนิคที่จะนำมาใช้งานเป็นการปรับปรุงความสามารถของ Class Array ผ่านทาง Prototype ลองดูตัวอย่างนะครับ

 Array.prototype.getUnique = function(){
   var u = {}, a = [];
   for(var i = 0, l = this.length; i < l; ++i){
      if(u.hasOwnProperty(this[i])) {
         continue;
      }
      a.push(this[i]);
      u[this[i]] = 1;
   }
   return a;
}

เมื่อเราปรับปรุงความสามารถของ Array เรียบร้อยแล้ว เราก็จะมาลองใช้งานดูดังนี้ โดยเริ่มจากการประกาศ Array ขึ้นมาก่อน โดยเราจะลองทำให้ Array มีค่าซ้ำๆกันอยู่ ดังนี้ครับ

var arr = [1,2,3,3];  // สังเกตุว่า มี 3 ซ้ำกันอยู่ 2 ตัว

alert(arr.getUnique()); // ค่าที่ Alert ออกมาจะเป็น [1,2,3] สังเกตุว่าค่าที่ซ้ำจะถูกกำจัดออกไปแล้ว

แหล่งที่มา : http://bit.ly/TbfHie

วิธีการเรียกใช้งาน Controller จาก Script ภายนอก ใน Angular.js

โดยปกติเราสามารถเรียกใช้งาน Controller ได้โดยผ่านการ Binding แต่สำหรับในกรณีที่เรามีความจำเป็นต้องเรียกใช้งาน property หรือ method ที่อยู่ภายใน Controller จาก Script ที่อยู่ภายนอก ซึ่งเราไม่สามารถใช้วิธีการ binding ได้ เราสามารถทำโดยการเรียกใช้งานผ่าน scope โดยตรง ซึ่ง โดยปกติ Angular จะสร้าง scope Object ไว้กับ Element ที่เราประกาศให้เป็น Controller ซึ่งเราสามารถดึงเอา Scope Object ออกมาใช้งานได้ดังต่อไปนี้

ตัวอย่างของ Code ในส่วนของ Controller

function HelloCtrl($scope){
    $scope.title = 'Hello!';
    $scope.test = function(){
        alert('xxx');
    }
}

สมมุติว่า ประกาศ controller ไว้ที่ body tag ดังนี้

<html ng-app>
<body ng-controller="HelloCtrl">
</body>
</html>

เราสามารถดึง scope object ออกมาจาก body tag ได้ดังนี้

var scope = angular.element($('body')).scope();

จากนั้น เมื่อเราได้ scope object ออกมาแล้ว เราก็จะสามารถเรียกใช้งาน property และ method ที่อยู่ภายใน controller ได้ตามปกติ ยกตัวอย่างเช่น

alert(scope.title);  // เรียกใช้งาน property ที่ชื่อว่า title
scope.test(); // เรียกใช้งาน method ที่ชื่อว่า test

เทคนิคการ Share Data ระหว่าง Controller ใน Angular.js

สำหรับเทคนิคต่อไปนี้ เป็นการใช้ข้อมูลร่วมกันระหว่าง Controller โดยใช้วิธีการ bind Service ลองดูตามตัวอย่างดังต่อไปนี้ครับ

<!doctype html>
<html ng-app="project">
<head>
    <title>Angular: Service example</title>
    <script src="http://code.angularjs.org/angular-1.0.1.js"></script>
    <script>
var projectModule = angular.module('project',[]);

projectModule.factory('theService', function() { 
    return {
        thing : {
            x : 100
        }
    };
});

function FirstCtrl($scope, theService) {
    $scope.thing = theService.thing;
    $scope.name = "First Controller";
}

function SecondCtrl($scope, theService) {  
    $scope.someThing = theService.thing;
    $scope.name = "Second Controller!";
}
    </script>
</head>
<body> 
    <div ng-controller="FirstCtrl">
        <h2>{{name}}</h2>
        <input ng-model="thing.x"/>        
    </div>

    <div ng-controller="SecondCtrl">
        <h2>{{name}}</h2>
        <input ng-model="someThing.x"/>            
    </div>
</body>
</html>

จากตัวอย่าง เมื่อเรามีการ update ข้อมูลใน Service จะส่งผลให้ Controller ที่ Bind เอาไว้กับข้อมูลใน Service มีการเปลี่ยนแปลงตามไปด้วย

วิธีการ Communicate ข้าม Controller ใน Angular.js

สำหรับผู้ที่ใช้ Angular.js และมีการสร้าง Controller ไว้มากกว่า 1 ตัว สามารถสื่อสารข้ามกันระหว่าง Controller ได้ โดยอาศัยการใช้ Message ดังต่อไปนี้

function FirstController($scope) {
  $scope.$on('someEvent', function() {});
  // another controller or even directive
}

function SecondController($scope) {
  $scope.$emit('someEvent', args);
}

จากในตัวอย่างจะสังเกตุว่า SeconCotroller จะส่ง Message ออกมา ในขณะที่ FirstController ก็รอรับ Message อยู่ ลองเอาไปประยุกต์ใช้ดูแล้วกันนะครับ

แหล่งที่มา : http://stackoverflow.com/questions/9293423/can-one-controller-call-another-in-angularjs

เทคนิคการ Remove Item ออกจาก Array ใน JavaScript

สมมุติว่าเราประกาศ Array ไว้ดังต่อไปนี้

var myArray = ['a','b','c','d','e'];

แล้วเราต้องการลบ item ตัวที่ 1 (index เท่ากับ 0) ออกจาก myArray ด้วยการใช้คำสั่ง delete ดังต่อไปนี้

delete myArray[0];

สิ่งที่เกิดขึ้นก็คือ JavaScript จะไม่ได้ทำการลบ item นั้นออกจาก Array จริงๆ แต่เป็นการไปแทนที่ข้อมูลในตำแหน่งนั้นๆด้วย undefined ซึ่งถ้าเรา debug ดูใน Firebug เราจะเห็นว่าข้อมูลใน myArray เป็นดังต่อไปนี้

[undefined,'b','c','d','e'];

ซึ่งไม่เป็นไปอย่างที่เราต้องการ แต่มีวิธีแก้ครับ โดยนำ Script ที่เขียนไว้โดย John Resig ซึ่งเขียนเพิ่มคำสั่ง remove เข้าไปใน Array  มาใช้งานดังนี้ครับ

// Array Remove - By John Resig (MIT Licensed)
Array.prototype.remove = function(from, to) {
  var rest = this.slice((to || from) + 1 || this.length);
  this.length = from < 0 ? this.length + from : from;
  return this.push.apply(this, rest);
};

ตอนนี้ หากเราอยากลบ item ที่ 1 เราก็เพียงใช้คำสั่ง

myArray.remove(0);  // item ที่ 1 จะมีค่า index = 0

หรือหากอยากจะลบ item ลำดับที่ 2 จากตำแหน่งท้ายสุดของ Array ก็สามารถทำได้ดังนี้

myArray.remove(-2);

หรือหากอยากจะลบหลายๆ item พร้อมๆ กัน ก็สามารถทำได้ โดยการส่งค่า index ที่ต้องการลบเข้าไป ดังนี้

myArray.remove(1,3); // จะเป็นการลบ item ในตำแหน่งที่ 2 และ 4 ตามลำดับ

แหล่งที่มา : http://stackoverflow.com/questions/500606/javascript-array-delete-elements

เรียกใช้งาน JavaScript ในแบบ Modular โดยใช้ Require.js

สำหรับบทความนี้ผมอยากจะมาแนะนำเกี่ยวกับเทคนิคในการเรียกใช้งาน JavaScript ในแบบ Modular โดยใช้ Require.js ประโยชน์ของการใช้ Require.js คือ จะช่วยให้เราสามารถเรียกใช้งาน JavaScript ในแบบ Asynchronous (คือความสามารถในการ load หลายๆ file ได้พร้อมๆกัน) ทำให้สามารถ load เสร็จได้เร็วขึ้นกว่าการ load โดยใช้ script tag แบบปกติ แต่เป้าหมายจริงๆ ของ Require.js อยู่ที่การแบ่ง coding ออกให้เป็นสัดส่วน หรือเราเรียกว่า module แต่ละ module จะมีหน้าที่เฉพาะของตัวเอง หากเราต้องการใช้ เราก็ค่อยเรียกมาใช้งาน ซึ่งทำให้การเรียกใช้งานมีความยืดหยุ่น เรียกใช้งานได้รวดเร็ว และสามารถ maintain ได้ง่ายอีกด้วย นอกจากนั้น Require.js ยังมีความสามารถในเรื่องของการ load dependency ที่จำเป็นก่อนการเรียกใช้งานแต่ละ module ได้อีกด้วย เดี๋ยวเราลองมาดูวิธีการใช้งานแบบง่ายๆก่อนนะครับ ขั้นแรกเลย ก็ต้องไป download "require.js" มาก่อน (โดยเข้าไป download ได้จาก http://requirejs.org) จากนั้น วิธีการเรียกใช้งาน ให้เรียกใช้งานดังต่อไปนี้ครับ

<script data-main="scripts/main.js" src="scripts/require.js"></script>

วิธีการเรียกใช้งาน require.js ก็เหมือนกับการเรียกใช้งาน JavaScript อื่นๆโดยทั่วไป แต่ให้สังเกตุ attribute ที่ชื่อว่า data-main ซึ่งมีไว้เพื่อให้เรากำหนด JavaScript ที่ใช้เป็น file หลัก สำหรับที่เราจะเรียกใช้งาน module อื่นๆต่อไป (JavaScript ที่เรากำหนดไว้ใน data-main จะถูกเรียกใช้งานหลังจากที่ "require.js" ถูกโหลดเสร็จเรียบร้อย)

ต่อไป เราจะมาดู script ในส่วนของ main.js (จะตั้งชื่อเป็นอย่างอื่นก็ได้ แต่ถ้าตั้งเป็นชื่ออื่น ก็ต้องกำหนดค่าใน data-main ให้สัมพันธ์กันด้วย แค่นั้นเอง) หน้าที่ของ main.js ก็คือ เป็นไฟล์หลักที่ใช้สำหรับ load module อื่นๆ จะสังเกตุว่า ผมใช้คำว่า module จะไม่ใช้คำว่า script เพราะ Require.js พยายามให้เรามอง JavaScript เป็น module เดี๋ยวมาลองดูตัวอย่างกันก่อนแล้วกันนะครับ

main.js
======
require(["helper/util"], function(util) {
    util.hello();
});

ใน main.js เราเรียกใช้งาน function ที่ชื่อว่า require เพื่อ load "helper/util" module (ให้สังเกตุว่า ไม่ต้องใส่ .js เข้าไป เดี๋ยว require.js จะเติมให้เองโดยอัตโมมัติ) ส่วน path ในการเรียกใช้งาน ก็จะ relative จาก file ที่เรากำหนดให้เป็น file หลัก ซึ่งในที่นี้ก็คือ main.js นั่นเอง (เราสามารถกำหนดได้ว่า จะให้ require.js ไปมองหา module จากที่ไหน โดยการกำหนดค่า config ซึ่งในที่นี้ไม่อธิบายแล้วกันนะครับ เพราะมันจะยาวไป หากสนใจจริงๆ ก็เข้าไปอ่านได้ที่ http://requirejs.org/docs/api.html)

parameter ตัวแรก คือ array ของชื่อ module ที่เราต้องการ load ส่วน parameter ตัวที่สองคือ call function ที่จะถูกเรียกใช้งานเมื่อ module ที่เราต้องการถูก load ขึ้นมาเรียบร้อยแล้วนั่นเอง ให้สังเกตุว่ามีการส่งค่า util เข้าไปที่ function ด้วย นั่นหมายความว่า module ที่เรา load ในขณะนี้จะถูกส่งมาในตัวแปรที่ชื่อว่า util นั่นเองครับ ซึ่งภายใน function นี้ เราสามารถเรียกใช้งาน util.hello() ได้แล้วครับ

ส่วนต่อไป เดี๋ยวเราจะมาลองดูกันต่อใน script ส่วนที่เป็นการ define module ซึ่งจากตัวอย่างในที่นี้ก็คือ util.js ครับ

util.js
=====
define(function(){   
    var m = {};

    m.hello = function(){
        alert('Hello!');
    }

    return m;
});

ในส่วนของ util.js เราสร้าง Anonymous Function ขึ้นมา ซึ่งภายจะกำหนดค่าต่างๆ หรือจะทำอะไรก็แล้วแต่ แต่สุดท้ายจะต้องคืนค่า module กลับมา สำหรับในตัวอย่างนี้เราประกาศตัวแปรที่ชื่อว่า m เอาไว้สำหรับเก็บ namespace ที่เราสร้างขึ้นมาใหม่ โดยใช้ {} และภายใน namespace นี้ เราก็ประกาศ function ชื่อว่า hello() เอาไว้ เมื่อทุกอย่างเสร็จเรียบร้อย เราจะคืนค่า m กลับออกไป

สำหรับตัวอย่างที่ยกมาให้ดู อาจจะดูไม่ค่อยมีประโยชน์ในการนำไปใช้งานจริงๆสักเท่าไหร่ แต่มันได้ concept ครับ ลองคิดดูแบบง่ายๆ แทนที่จะต้องเขียน Framework ตัวใหญ่ๆ ถ้าหากเราสามารถแบ่ง Framework ออกเป็นส่วนๆ แล้วค่อยๆเรียกใช้งานเท่าที่จำเป็น เราก็ไม่จำเป็นต้อง load JavaScript ตัวใหญ่ๆทีเดียวแบบเมื่อก่อนแล้วครับ และยังช่วยให้เรา extend ความสามารถเพิ่มเติมต่อไปได้ง่ายอีกด้วยครับ เพราะมีการแยก module ออกจากกันอย่างชัดเจน ช่วยให้เราทำงานง่ายขึ้น และก็แก้ไขก็ง่ายดีด้วยครับ

ที่จริงแล้วเทคนิคนี้มันมีชื่อเรียก ชื่ออย่างเป็นทางการมันเรียกว่า Modular Pattern เป็น Best Practice รปแบบหนึ่ง ซึ่งผมเห็นว่ามันมีประโยชน์ดี แล้วสามารถนำไปใช้งานได้จริงครับ ก็คิดว่าบทความนี้น่าจะพอจุดประกายให้ใครอีกหลายคนนำไปประยุกต์ใช้งานกันต่อไปนะครับ หากนำไปใช้งานแล้วได้ผลดี ก็อาจช่วยเขียนบทความเป็นวิทยาทานให้คนอื่นๆต่อไปแล้วกันนะครับ
  
แหล่งที่มา : http://requirejs.org

วิธีการ Select DOM Element โดยไม่ใช้ jQuery

โดยส่วนมากเวลาที่เราต้องการ select DOM element เรามักจะนึกถึง jQuery เพราะใช้ง่าย และแทบจะเป็น library มาตรฐานสำหรับการพัฒนา web ในปัจจุบันไปแล้ว สำหรับบทความนี้ ผมอยากจะมาแนะนำการ select DOM element โดยไม่ใช้ jQuery (อาจจะด้วยเหตุผลใดก็ตาม) เมื่อก่อน เวลาเราจะ select DOM element เราก็มักจะนึกถึง methods ที่ชื่อว่า getElementById() กับ getElementByTagName() ซึ่งการใช้งานค่อนข้างจำกัด ไม่หลากหลายเท่าการใช้ CSS Selector เหมือนใน jQuery ซึ่งเป็นหนึ่งในเหตุผลว่าทำไม jQuery ถึงได้รับความนิยม หลายๆคน (รวมทั้งผมด้วย) ใช้ jQuery กันจนเคยชิน จนไม่รู้เลยว่าเดี๋ยวนี้ DOM selector APIs ได้รับการพัฒนาขึ้นจากเมื่อก่อนมาก ซึ่งในปัจจุบันรองรับการใช้งาน CSS selector แล้วด้วย ผ่านทาง APIs ที่ชื่อว่า querySelector() และ querySelectorAll() ทั้ง 2 APIs รองรับการใช้งาน CSS selector โดยมีความแตกต่างกันที่ querySelector() จะ return DOM element เพียงแค่ตัวเดียว ในขณะที่ querySelectorAll() จะ return DOM elements ทั้งหมดที่ตรงตามเงื่อนไข ส่วนวิธีการเรียกใช้งาน ดูตามตัวอย่างข้างล่างนี่เลยครับ

document.querySelector('#myheader') //returns the element with ID="myheader"
document.querySelector('p.description') //returns the P with class="description" element

document.querySelectorAll('.mygroup') //returns all elements with class="mygroup"
document.querySelectorAll('#biography, #gallery') //returns both elements "#biography" and "#gallery" (inclusive)

แหล่งที่มา : http://www.javascriptkit.com/dhtmltutors/css_selectors_api.shtml

PHP Proxy Solution for cross-domain AJAX scripting

โดยปกติเราจะไม่สามารถเรียก AJAX ข้าม Domain ได้ เนื่องจากเป็นข้อกำหนดในเรื่องความปลอดภัย สำหรับบทความที่จะนำมาแนะนำต่อไปนี้เป็นวิธีการสร้าง Proxy โดยใช้ PHP เพื่อที่เราจะสามารถเรียกใช้งาน AJAX ข้าม Domain ได้ ลองเข้าไปดูบทความได้ที่นี่ครับ http://bit.ly/ONrztb

แหล่งที่มา : http://bit.ly/ONrztb

How to implement Facebook share button ?

สงสัยอยู่เหมือนกันว่าทำใน Facebook Social Plugins ถึงได้ไม่มี Share Button เข้าใจ Facebook น่าจะเอา Share Button ออกเนื่องจากมองว่าใกล้เคียงกับ Like Button แต่ผมกลับคิดว่ามันไม่เหมือนกัน โดยส่วนตัวผมชอบ Share Button มากกว่า เพราะเวลาแสดงผลใน Wall มันชัดเจนดี และหลายๆครั้งก็ไม่ได้ Like แต่อยากจะ Share เฉยๆ หลังจากที่ใช้เวลาหาพอสมควร ในที่สุดก็เจอ ก็เลยอยากจะ post ไว้ เผื่อว่าใครอาจจะอยากเอาไปใช้ สำหรับตัวอย่างต่อไปนี้ เป็นตัวอย่างของ script สำหรับสร้าง Share Button ครับ http://pastie.textmate.org/4532375

แหล่งที่มา : http://bit.ly/Q70BqM

Social Media Share Button

ผมกำลังเพิ่ม share to Social เข้าไปใน web ที่ผมกำลังทำอยู่ ก็เลยลองค้นไปใน Google ก็เจอวิธีสร้างปุ่ม share แบบง่ายๆ ก็เลยอยากจะ post เอาไว้ เผื่อใครกำลังอยากได้วิธีในการสร้างปุ่ม share แบบไม่ต้องวุ่นวายมาก ลองเข้าไปดูตัวอย่างได้ที่นี่ครับ http://bit.ly/Pq9640 หรือถ้าหากไม่อยากเขียนเอง ก็ลองใช้บริการของ share this, add this หรือ Lockerz Share ดู มีให้เลือก share ไปหลาย platform ครับ ส่วนอันนี้เป็นอีกบทความหนึ่งที่เขียนแนะนำวิธีการ implement social button เอาไว้ ลองเข้าไปอ่านดูครับ http://yoast.com/social-buttons/

แหล่งที่มา : http://bit.ly/Pq9640

How to get current page full URL in PHP ?

สำหรับบทความนี้จะนำเสนอวิธีการ get ค่า URL สำหรับ page ที่เรากำลัง request อยู่ เทคนิคที่จะนำเสนอต่อไปนี้ใช้วิธีการอ่านค่า REQUEST_URI ซึ่งถูก set โดย Apache Web Server (ในกรณีที่ใช้ IIS ค่า REQUEST_URI จะไม่ถูก set ซึ่งทำให้เทคนิคนี้ใช้ไม่ได้กับ IIS) การอ่านค่า Request URL สามารถทำได้ดังนี้

$_SERVER['REQUEST_URI']=$_SERVER['PHP_SELF'].'?'.$_SERVER['argv'][0];

แหล่งที่มา : http://stackoverflow.com/questions/189113/how-do-i-get-current-page-full-url-in-php

How to get thumbnail of YouTube video link

สำหรับใครที่กำลังหาวิธีดึง Thumbnail จาก Video ใน YouTube ลองอ่าน post นี้ดูครับ เป็น post คำถามที่ post เอาไว้ที่ stackoverflow.com ซึ่งจะบอกวิธีการดึง Thumbnail ทั้งแบบใช้ API และแบบใช้ Direct URL ครับ

แหล่งที่มา: http://stackoverflow.com

7 ways to convince MySQL to use the right index

สำหรับการใช้งาน Database การสร้าง Index เป็นสิ่งที่สำคัญ แต่เรารู้หรือไม่ว่า บางครั้งเราสร้าง Index ขึ้นมาหลายตัว แต่ปัญหาก็คือ Index ตัวที่เหมาะสมอาจจะไม่ได้ถูกเรียกใช้งาน สำหรับบทความที่จะนำมาแนะนำต่อไปนี้ เป็นเทคนิคในการสร้าง SQL Statement (สำหรับ MySQL) โดยให้ index ที่เหมาะสม ถูกเรียกใช้งาน สำหรับผู้ที่สนใจ ลองศึกษาจากบทความนี้ครับ "7 ways to convince MySQL to use the right index" เขียนไว้โดย Shlomi Noach

แหล่งที่มา: http://code.openark.org/blog/

Create Crawlable, Link-Friendly AJAX Websites Using pushState()

สำหรับบทความที่จะนำมาแนะนำต่อไปนี้มีชื่อว่า "Create Crawable, Link-Friendly AJAX Websites Using pushState()" ซึ่งจะพูดถึงเทคนิคในพัฒนา website โดยใช้เทคโนโลยี AJAX แต่ในขณะเดียวกัน Search Bot ก็ยังคงสามารถ crawl มาที่ URL ของเราได้ โดยจะพูดถึงการใช้งาน window.history.pushState() ซึ่งเป็นส่วนหนึ่งของ HTML5 History API หน้าที่ของ pushState() ก็คือเปลี่ยน URL ที่แสดงอยู่บน Address Bar (ซึ่งก็ยังคงใช้งานได้ในบาง Browser) สำหรับเทคนิคที่นำมาใช้ก็คือ load content ในส่วนที่ต้องการด้วย AJAX จากนั้นก็เรียกใช้งาน pushState() เพื่อเปลี่ยน URL บน Address Bar ให้ตรงกับ address จริงของ web page นั่นเอง เพียงเท่านี้เราก็จะสามารถใช้งาน AJAX และในขณะเดียวกัน Search Bot ก็ยังคงสามารถ Crawl มายัง URL ของเราได้ (เนื่องจากเราใช้ URL จริงๆในการแสดงผลบน Address Bar) ซึ่งเทคนิคนิคนี้ หากมองดูปกติก็จะไม่แตกต่างจากการ reload page แต่จริงๆแล้วมีประสิทธิภาพที่ดีกว่ามาก ถือว่าเป็นเทคนิคที่น่าสนใจอันนึงครับ ส่วนอันนี้เป็น demo site ที่เค้าสร้างขึ้นมาเพื่อแสดงการใช้งาน pushState() ให้ดูครับ สำหรับอันนี้เป็นอีกหนึ่งบทความที่อธิบายเกี่ยวกับการใช้งาน pushState() ไว้ค่อนข้างละเอียด บทความมีชื่อว่า
HTML5: Changing the browser-URL without refreshing page ลองอ่านดูแล้วกันนะครับ

แหล่งที่มา: http://www.seomoz.org/blog/create-crawlable-link-friendly-ajax-websites-using-pushstate

Improving Disk I/O in PHP Apps

สำหรับอันนี้เป็นบทความที่มีชื่อว่า "Improving Disk I/O in PHP Apps" เขียนไว้โดย Rodney Rehm เกี่ยวกับเทคนิคในการลด Disk I/O ใน PHP ที่เค้านำมาใช้ในการปรับปรุง Smarty version 3.1.0 ในบทความจะพูดถึงการหลีกเลี่ยงการ access Hard Disk โดยไม่จำเป็น โดยเค้าได้พูดเปรียบเทียบถึงการ access Hard Disk ไว้ดังนี้ครับ "Compared to the CPU any hard disk (yes, even SSDs) are turtles chained to a rock" ในบทความมีเทคนิคที่น่าสนใจอย่างเช่น วิธีการหลีกเลี่ยงการใช้งาน file_exists() มีประโยชน์ ลองอ่านดูแล้วกันนะครับ

แหล่งที่มา: http://blog.rodneyrehm.de/archives/12-Improving-Disk-IO-in-PHP-Apps.html

Why is `ereg` deprecated in PHP ?

การใช้งาน ereg() ใน PHP

ผมคิดว่าหลายๆคนที่เขียน PHP แล้วเจอกับปัญหา "ereg() is deprecated" (ใน PHP version 5.3.0 เป็นต้นไป) น่าจะเกิดความสงสัย (เหมือนกับผม) ว่าทำไมถึง deprecated

สาเหตุที่ PHP ตัดสินใจเลิกใช้งาน ereg() เพราะว่าอยากจะให้ใช้ PCRE (Pearl Compatible Regular Expression) Extensions แทน เพราะว่าโดยทั่วไปจะมีประสิทธิภาพที่ดีกว่า (แต่ไม่เสมอไป ในบาง function ereg() ก็สามารถทำงานได้เร็วกว่า) ยกตัวอย่างเช่น function preg_match() ซึ่งใช้ PCRE syntax จะทำงานได้เร็วกว่า function ereg() สำหรับในบาง post ก็พูดถึงสาเหตุของการที่ PHP ยกเลิกใช้งาน ereg() ว่าเป็นเพราะใน PHP 6.0 ได้มีการพัฒนาในส่วนของการรองรับ Unicode ขึ้นมาใหม่ ซึ่งน่าจะเป็นสาเหตุหลักที่ทำให้ ereg() ไม่สามารถใช้งานได้

สำหรับ PHP  ตั้งแต่ version 6.0 เป็นต้นไป ได้ตัด function ereg() ออกไปเป็นที่เรียบร้อยแล้วนะครับ ถ้าหากว่าใครที่มีแนวโน้มว่าจะต้อง upgrade ไปใช้ PHP 6.0 ควรหลีกเลี่ยงการใช้งาน ereg() นะครับ

แหล่งที่มา:

1. http://stackoverflow.com/questions/3078993/why-is-ereg-deprecated-in-php
2. http://stackoverflow.com/questions/1361591/php-ereg-vs-preg