มารู้จักกับ node.js และการติดตั้ง node.js

Node.js เป็นการใช้ V8 JavaScript engine ของ Google ที่ open source มาสร้าง Web Server ที่ใช้ภาษา JavaScript ในการพัฒนา Web App เพื่อจุดประสงค์ Web App ที่ได้นั้นมีความสามารถในลักษณะ event-driven I/O เป็นหลัก ซึ่งเป็นลักษณะที่เมื่อมีการเปลี่ยนแปลงข้อมูลที่ฝั่ง Server ข้อมูลที่ฝั่ง Client ก็จะเปลี่ยนแปลงไปโดยที่ฝั่ง Client ไม่ต้อง Reload ข้อมูลใหม่แต่อย่างใด หรืออาจจะเรียกว่า Ajax Push (Reverse Ajax) ก็ได้

Node.js นั้นมีความง่ายและพัฒนาในการนำไปใช้งานไม่ยากนัก ซึ่งการใช้ Node.js ต้องลงแยกจาก Web Server หลักของระบบอย่าง Apache หรือ lighttpd เพราะใช้ลักษณะการทำงานไม่เหมือนกัน แต่ถ้าต้องการที่จะใช้ผ่าน port 80 ก็สามารถทำได้ถ้าเป็น Apache โดยผ่าน mod_proxy แล้ว reverse port ต่อไปได้ ตัวอย่างเช่น

[apache;localhost:80/api] -> [node.js;127.0.0.1:8000]

ในการติดตั้งนี้ผมอ้างอิงการติดตั้งบน Ubuntu Server 10.04 เป็นหลัก โดยการติดตั้งนั้นจะมีการลง package ที่จำเป็นสำหรับการพัฒนาในอนาคต เช่นรองรับ MySQL, Redis, Memcached, WebSocket, และการทำงานร่วมกับ PHP ผ่าน Dnode เป็นต้นครับ

Read more

เมื่อโปรแกรมเมอร์อารมณ์ติส ก็แนวๆ นี้แหละ

จาก http://bit.ly/fCTsuB “แอบชอบหนุ่มโปรแกรมเมอร์ จะแอบบอกความในใจด้วยโค๊ดแบบไหนได้มั่งอ่า”

ก็เลยเขียนเล่นๆ ช่วงที่เซงๆ กับเรื่องบางเรื่อง

javascript

  1. World = {
  2.     'CreateMe'  : function (n) {
  3.         World.me = n;
  4.         World.HaveSomeThingToTellYou = function () {
  5.             if(World.you != null)
  6.                 return true;           
  7.             alert('Single');
  8.             return false;      
  9.         }
  10.         return World;
  11.     },
  12.     'CreateYou'  : function (n) {
  13.         World.you = n;
  14.         World.Love = function (u) {
  15.             alert(World.me + " love " + u.you + ".");
  16.         }
  17.         return World;
  18.     }
  19. };
  20.  
  21.  
  22. i = World.CreateMe('Me');
  23. u = World.CreateYou('You');
  24.  
  25. if(i.HaveSomeThingToTellYou())
  26.     i.Love(u);

ร่วมด้วยช่วยกัน Say No To IE 6! สำหรับเว็บที่ใช้ jQuery (และพวก Prototype JavaScript ตัวอื่น ๆ ด้วย)

จาก entry หมดเวลา Internet Explorer 6 แล้ว เลิกใช้มันได้แล้ว !!! และจาก Campaign “Say No To IE 6!” จากเว็บ SaveTheDevelopers.org นั้นเค้าให้เอา code ด้านล่างนี้ไปใส่

  1. <script src="http://www.savethedevelopers.org/say.no.to.ie.6.js"></script>

แต่ถ้าเว็บใครใช้ jQuery นี่อาจจะไม่ได้ แบบ Theme K2 ของผม วิธีอีกแบบที่สามารถทำได้ และทำงานร่วมกับ jQuery ได้ก็คือใช้ CSS – Conditional comments นั้นเอง โดยกำหนดไว้ว่าถ้า IE ที่ version น้อยกว่า 7 ให้โชว์ตัว popDown นี้ขึ้นมาครับผม

  1. <!--[if lt IE 7]>
  2. <script type="text/javascript" src="path/to/savethedevelopers.js"></script>
  3. < ![endif]-->

เสร็จแล้วในไฟล์ savethedevelopers.js ก็ปรับแก้เป็นแบบนี้ครับ

javascript

  1. jQuery(document).ready(function(){
  2.     var now = new Date();
  3.     var time = now.getTime();
  4.     var div = document.createElement('a');
  5.     var id = 'saynotoie6_div_' + time;
  6.     div.setAttribute('id',id);
  7.     div.setAttribute('href','http://www.savethedevelopers.org/');
  8.     div.setAttribute('target','_blank');
  9.     div.style.display = 'block';
  10.     div.style.color = '#1d1d1d';
  11.     div.style.textAlign = 'left';
  12.     div.style.fontFamily = 'Arial';
  13.     div.style.fontSize = '11px';
  14.     div.style.background = 'url(http://webhost.domain/path/to/savethedevelopers/PopDown.gif)';
  15.     div.style.padding = '0';
  16.     div.style.position = 'absolute';
  17.     div.style.top = '0';
  18.     div.style.right = '40px';
  19.     div.style.zIndex = '999999';
  20.     div.style.width = '330px';
  21.     div.style.height = '63px';
  22.     div.style.marginTop = '-80px';
  23.     div.style.filter = 'alpha(opacity=95)';
  24.     document.body.appendChild(div);
  25.    
  26.     var animate = function(){
  27.         var myDiv = document.getElementById(id);
  28.         var value = parseInt(myDiv.style.marginTop)
  29.         myDiv.style.marginTop = value + 1 + 'px';
  30.         if(parseInt(myDiv.style.marginTop) < -1){
  31.             var timer = setTimeout(animate,30 * 80/Math.abs(value) * .27);
  32.         }else{
  33.             var timer = setTimeout(hide,25000);
  34.         }
  35.     }
  36.    
  37.     var hide = function(){
  38.         var myDiv = document.getElementById(id);
  39.         var value = parseInt(myDiv.style.marginTop)
  40.         myDiv.style.marginTop = value - 1 + 'px';
  41.         if(parseInt(myDiv.style.marginTop) > -80){
  42.             var timer = setTimeout(hide,1.4 * 80/Math.abs(value) * 3.70);
  43.         }
  44.     }
  45.    
  46.     setTimeout(animate,1000);
  47. });

ลองเทียบกับของเก่าเค้าก็ได้นะครับ อันนี้ผมปรับให้โชว์ไว้สัก 25 วินาทีครับผม ส่วนถ้าเอาไปใช้กับ mootools หรือตัวอื่น ๆ ก็เปลี่ยนการ windows.onload เป็นแบบอื่น แทนการใช้ jQuery(document).ready(); ครับ

เรามาร่วมด้วยช่วยกันประกาศครับผม เอาพวกไม่ได้มาตรฐานออกไปจากสังคมสักทีนึงครับผม

แก้ปัญหาจุกจิกหลาย ๆ อย่างใน IE 5/6 ด้วย IE7 { css2: auto; }

เจ้า IE7 { css2: auto; } นั้นตอนนี้เป็น version ที่ 0.9 (alpha) แล้ว และหยุดพัฒนาตั้งแต่ปี 2005/08/19 โดยหลัก ๆ ที่เอามาใช้เพราะนำมาแก้ไขปัญหา PNG alpha transparency ใน IE5/6 นั้นเอง และ JavaScript ตัวแก้ไขตัวนี้ก็ทำงานได้ดีตลอดมา ผมนำไปใช้กับ Siampod.com และได้ผลดีมาก ๆ แต่เว็บ blog ตัวเองก็ยังไม่ได้ใส่มัน -_-‘ เดี่ยวใส่วันสองวันนี้แหละ เริ่มวาง ๆ แล้ว ;)

IE7 is a JavaScript library to make IE behave like a standards-compliant browser. It fixes many CSS issues and makes transparent PNG work correctly under IE5 and IE6.

  • supports the following CSS selectors:
    • namespace|selector
    • parent > child
    • adjacent + sibling
    • adjacent ~ sibling
    • [attr], [attr="value"], [attr~="value"] etc
    • .multiple.classes (fixes bug)
    • :hover, :active, :focus (for all elements)
    • :first-child, :last-child, only-child, nth-child, nth-last-child
    • :check, :disabled, :enabled
    • :root, :empty, :contains(), :not()
    • :before/:after/content:
    • :lang()
  • works with both HTML and XML documents
  • supports imported style sheets
  • preserves the cascade of the style sheet
  • does not alter the document structure
  • does not repeatedly query the DOM tree using JavaScript
  • uses pure CSS to enforce style sheet rules
  • supports the W3C box model in both standards and quirks mode
  • supports fixed positioning (flicker free)
  • supports overflow:visible
  • supports min/max-width/height
  • fixes broken (X)HTML elements (abbr, object)
  • standardies forms behavior
  • supports PNG alpha transparency
  • lightweight script (22K)
  • completely modular (add/remove fixes)
  • works for Microsoft Internet Explorer 5+ (Windows only)

[Update 11/11/2007 1:38am]

นั่งแก้ มันทำไมใช้ไม่ได้ก็ไม่รู้ พอหา ๆ ใน Google เจอคนมีปัญหาแบบเดียวกัน แต่สรุปได้ว่า เพราะใช้ Themes K2 นี่เอง T_T คนใช้ IE 6 ก็เศร้ากันไปนะครับ อันนี้ช่วยไม่ได้ ฮา ….

เมื่อ jQuery อยู่ร่วมโลกกับ Prototype/Mootools ไม่ได้ (โดยเฉพาะใน Drupal)

ถ้าใครใช้ jQuery, Prototype และ Mootools นั้นจะรู้ว่ามี namespace ตัวนึงคือ $ ซึ่งจะเป็นตัวอ้างอิงเสมือนเวลาอ้างอิงการทำงานใด ๆ ใน ถ้าอ่านในเว็บ jQuery ก็จะบอกไว้เลยว่า

By default, jQuery uses “$” as a shortcut for “jQuery”

ปัญหาก็คือ …..

มันดันใช้วิธีที่ไปเหมือนกับ Prototype, MooTools และ YUI นั้นดิ

ทำให้เวลาเอามาใช้ร่วมกันมันจะตีกันสนุกสนานเลยหล่ะ วิธีแก้ไขก็คือให้ jQuery หลีกทางให้กับตัวอื่น ๆ ซะ

จาก

javascript

  1. <script type="text/javascript" src="prototype.js" />
  2. <script type="text/javascript" src="mootools.js" />
  3. <script type="text/javascript" src="jquery.js" />
  4. <script type="text/javascript">
  5. // ต้องใช้ jQuery
  6. $(document).ready(function(){ $("div").hide(); });
  7. // ต้องใช้ Prototype/Mootools
  8. $('someid').style.display = 'none';
  9. </script>

ถ้าเป็นแบบนี้มันจะใช้งานไม่ได้ ครับ จะเกิดการตีกันระหว่างทั้ง 3 ตัวครับ เราต้องเปลี่ยนมาเป็น

javascript

  1. <script type="text/javascript" src="prototype.js" />
  2. <script type="text/javascript" src="mootools.js" />
  3. <script type="text/javascript" src="jquery.js" />
  4. <script type="text/javascript">
  5. // เพิ่มบรรทัดนี้ลงไป
  6. jQuery.noConflict();
  7. // แล้วใช้ jQuery จาก $ เป็น jQuery(...) แทน
  8. jQuery(document).ready(function(){jQuery("div").hide();});
  9. // ส่วน Prototype/Mootools ใช้ $(...) ได้ตามปกติ
  10. $('someid').style.display = 'none';
  11. </script>

แนวทางการแก้ปัญหาก็ ok นะ แต่ …..

ใน Drupal หล่ะ ถ้าเราเอามาใช้เนี่ยทำไง

โดยตัว Drupal 5.2 แล้วมี jQuery 1.0.1 ใส่มาด้วย แต่ปัญหาคือมันดันไม่มี noConflict มาให้ ตอนนั่งแก้ปัญหา นั่งงงไปพักนึง เลยไปนั่งไล่แกะ จนรู้ว่าต้องมา upgrade เป็น jQuery 1.2 เสียก่อน เลยจัดการเอามาใส่ทับลงไปใน /misc แทนตัวเก่า

แล้วทำการแก้ไขไฟล์ต่าง ๆ ที่ Drupal นั้นใช้ jQuery ซึ่งได้แก่

  • misc/autocomplete.js
  • misc/collapse.js
  • misc/drupal.js
  • misc/progress.js
  • misc/tableselect.js
  • misc/textarea.js
  • misc/upload.js
  • misc/update.js
  • misc/farbtastic/farbtastic.js

โดยทำการ replace ‘$(‘ เป็น ‘jQuery(‘ แล้วทำการใส่ JavaScript ตัวนึงลงไปคือ

javascript

  1. jQuery.noConflict();

โดยเอาไปใส่ไว้ด้านล่าง Durpal $scripts ที่ Theme ของเรา ตามด้วยการใส่ mootools.js ไปก่อนหน้า Drupal $head

เฮ้อ ….. เล่นซะมึนไปครึ่งวัน

การมีมาตรฐานและเอามาใช้ร่วมกันนี่ยากเหมือนกันนะเนี่ย ยิ่ง JavaScript ที่มี Prototype หลายค่ายเหลือเกินยิ่งแล้วใหญ่ ความเข้ากันได้ยิ่งยากเข้าไปอีก แถมแต่ละตัวก็ ok ในเรื่องการใช้งาน แต่ว่าบางตัวมีข้อดีแต่ต่างกัน บางตัวใช้งานบางอย่างได้ดี และง่าย บางตัวทำแบบอีกตัวก็ได้ แต่ง่ายกว่ามาก เลยต้องหาจุดลงตัวของมันไป ทำให้ต้องมาปวดหัวกันไป แต่ก็นะเอามาใส่ลงไปในงานของเรา เพื่องานที่ออกมาดีที่สุด และง่ายที่สุดด้วย (ก็มีให้ใช้นิ)

อ้างอิงจาก