จาก WikiBall

ใช้เวอร์ชั่นใหม่สุด

แน่นอนเสียเหลือเกินว่าของใหม่ย่อมดีกว่าของเก่า ดังนั้นเราจึงควรใช้ jQuery ในเวอร์ชั่นที่ใหม่กว่า

<!-- get the API with a simple script tag -->
 <script type="text/javascript" src="<a href="http://www.google.com/jsapi%22%3E%3C/script">http://www.google.com/jsapi"></script</a>>
 <script type="text/javascript">
     /* and load minified jQuery v1.3.2 this way */
     google.load ("jquery", "1.3.2", {uncompressed: false});  

     google.setOnLoadCallback (onLoad);
 </script>

ใช้ For แทน Each

รวมสคริปซะ

รวมสคริปของทุกเพจไว้ด้วยกัน เพื่อที่จะให้บราวเซอร์โหลดแค่ครั้งเดียว

ใช้ ID แทน Class

ในการใช้ selecter ของ jQuery ควรจะใช้เลือกโดย ID แทนการเลือกด้วย class เช่น $(’#demo’) แทนการใช้ $(’.example’) ดังนั้นเราจึงควรเขียน HTML ใช้สนับสนุนการใช้งานในส่วนนี้ด้วย หรือถ้าจำเป็นต้องใช้ class จริงๆ ควรทำการสโคปการค้นหาให้เล็กลงเช่น $(’.class’, ‘#class-container’)

$(expression, context)  

$('#demo').html ('What's up');
$('#demo').css ('color', '#444444');
$('#demo').addclass ('fulltext');

var demo = $('#demo');
demo.html ('What's up');
demo.css ('color', '#444444');
demo.addclass ('fulltext');

 $('#demo').css ('color', '#444444').addclass ('fulltext');

จาก WikiBall

How to

<script type="text/javascript">
if( window.console && window.console.firebug )
    document.getElementsByTagName('body')[0].innerHTML +=
           "<div onclick=\"this.style.display = 'none'\" "+
           "style='position:absolute; top:0; width:100%; padding: 5px 0; background: #ff7; border-bottom: 1px solid #770; font-weight: bold; text-align: center;'>"+
           "Firebug can make this web page slow, we suggest you disable it for this web page. Click to close this warning.</div>";
</script>

เพียงแค่เพิ่ม script ด้านบน ก็สามารถแจ้งเตือนผู้ใช้ได้แล้วว่าท่านกำลังเปิด firebug อยู่ ซึ่งอาจทำให้การดูเวปไซต์ของท่านนั้นช้าลง เหมือนตัวอย่างเช่น gmail นั่นเอง

Reference

• http://www.unwrongest.com/blog/if-firebug-slows-down-your-web-page-make-a-suggestion/
• http://blog.dkferguson.com/index.cfm/2009/3/31/Block-Firebug-on-your-site/

จาก WikiBall

1. ติดตั้งแพคเกจ msttcorefonts

   sudo apt-get install msttcorefonts

2. ดาวน์โหลดฟอนต์ Tahoma จาก http://download.microsoft.com/download/ie6sp1/finrel/6_sp1/W98NT42KMeXP/EN-US/IELPKTH.CAB
3. แตก IELPKTH.CAB โดยใช้คำสั่ง cabextract
4. ย้ายไฟล์สกุล ttf ไปที่/usr/share/fonts/truetype/msttcorefonts/
5. จัดการลบไฟล์ในข้อ 2-3 ออกไปได้เลย

ขอบคุณ http://bact.blogspot.com สำหรับเนื้อหานี้ครับ

จาก WikiBall

หลังจากค้นหาข้อมูลอยู่หลายครั้งในการทำ round-corner ให้กับเวปไซต์ ส่วนมาก round corner ที่ใช้กันจะเป็นแบบ static คือกำหนดความยาวรูป และกล่องมาเลย ทำให้ไม่ยืดหยุ่นในการใช้งาน แต่ถ้าเป็นแบบ dynamic ที่สามารถยืดหดกล่องได้และทำโดยใช้ div และ css จะทำได้ยากมากเพราะติดปัญหาเรื่อง cross browser โดยเฉพาะการแสดงผลใน MSIE จะมีปัญหามาก เนื่องจากไม่ค่อยแสดงผลตามแบบ w3c สักเท่าไหร่ และโดยเฉพาะเจ้า MSIE6 มีปัญหา bug ที่เกี่ยวกับ css มากอยู่พอสมควร เช่น ปัญหา [3px-jog] ซึ่งทำให้การออกแบบบางลักษณะไม่ได้

การใช้ css ของ Mozzilla

• -moz-border-radius-bottomleft sets the rounding for the bottom-left curve.
• -moz-border-radius-bottomright sets the rounding for the bottom-right curve.
• -moz-border-radius-topleft sets the rounding for the top-left curve.
• -moz-border-radius-topright sets the rounding for the top-right curve.

ข้อดีคือ

• ทำง่าย
• ใช้ bandwidth และ connection น้อย

ข้อเสีย

• ใช้ได้ไม่ครบทุก browser แน่นอนว่า MSIE ใช้ไม่ได้แน่นอน

https://developer.mozilla.org/en/CSS/-moz-border-radius

การใช้ DIV+CSS

HTML

<div id="box">
  <div class="border-top"></div>
  <div class="border-topleft"></div>
  <div class="border-topright"></div>
  <div class="border-left"></div>
  <div class="border-right"></div>
  <div class="border-bottom"></div>
  <div class="border-bottomleft"></div>
  <div class="border-bottomright"></div>
  <div class="content">
    /* Type your content */
  </div>
</div>

CSS

@charset "utf-8";
/* CSS Document */

#box {
	position: relative;
	/* Replace the border image size here */
	margin: 12px 12px 12px 12px;
	/*
	 * Don't use padding here because IE6 is render incorrectly
	 * Padding shoud be in ".content"
	 */
}

#box .content {
	padding: 4px;
}

.border-top,
.border-bottom,
.border-topleft,
.border-left,
.border-bottomleft,
.border-topright,
.border-right,
.border-bottomright {
	position: absolute;
}

.border-top,
.border-bottom {
	left: 0px;
}

.border-topleft,
.border-left,
.border-bottomleft {
	left: -12px;
	width: 12px;
}

.border-topright,
.border-right,
.border-bottomright {
	right: -12px;
	width:  12px;
}
.border-top,
.border-topleft,
.border-topright {
	top:   -12px;
	height: 12px;
}

.border-bottom,
.border-bottomleft,
.border-bottomright {
	bottom: -12px;
	height:  12px;
}

.border-top, .border-bottom {
	width: 100%;
}
.border-left, .border-right {
	top: 0px;
	bottom: 0px;
	height: 100%;
	/* IE6 fix the 100% bug */
	_height: expression(eval(this.parentNode.clientHeight) + "px");
}

/* replace the border images link here */
.border-top         { background: URL(../images/greenHorizontal.gif) repeat-x top; }
.border-topleft     { background: URL(../images/greenCorner.gif) no-repeat left top; }
.border-topright    { background: URL(../images/greenCorner.gif) no-repeat right top; }
.border-left        { background: URL(../images/greenVertical.gif) repeat-y left; }
.border-right       { background: URL(../images/greenVertical.gif) repeat-y right; }
.border-bottom      { background: URL(../images/greenHorizontal.gif) repeat-x bottom; }
.border-bottomleft  { background: URL(../images/greenCorner.gif) no-repeat left bottom; }
.border-bottomright { background: URL(../images/greenCorner.gif) no-repeat right bottom; }

การใช้ css ของ Mozzilla

• -moz-border-radius-bottomleft sets the rounding for the bottom-left curve.
• -moz-border-radius-bottomright sets the rounding for the bottom-right curve.
• -moz-border-radius-topleft sets the rounding for the top-left curve.
• -moz-border-radius-topright sets the rounding for the top-right curve.

ข้อดีคือ

• ใช้ได้ทุก browser

ข้อเสีย

• เขียน css ยุ่งยาก
• ต้องเปิด connection เพื่อโหลดรูปเพิ่มอีก 3 รูป

จาก WikiBall

HTML code

<div id="GovTop10"><h1>เวปราชการยอดนิยม</h1>
<ol>
<li><a title="สรรพากร (www.rd.go.th)" href="http://www.rd.go.th">สรรพากร</a></li>
<li><a title="สำนักงานคณะกรรมการการศึกษาขั้นพื้นฐาน (www.obec.go.th)" href="http://www.obec.go.th">สำนักงานคณะกรรมการการศึกษาขั้นพื้นฐาน</a></li>
<li><a title="สำนักงานประกันสังคม (www.sso.go.th)" href="http://www.sso.go.th">สำนักงานประกันสังคม</a></li>
<li><a title="สำนักงานสลากกินแบ่งรัฐบาล (www.glo.or.th)" href="http://www.glo.or.th">สำนักงานสลากกินแบ่งรัฐบาล</a></li>
<li><a title="กรมส่งเสริมการปกครองท้องถิ่น (Department of Local Administration) (www.thailocaladmin.go.th)" href="http://www.thailocaladmin.go.th">กรมส่งเสริมการปกครองท้องถิ่น (Department of Local Administration)</a></li>
<li><a title="กรมประชาสัมพันธ์ (www.prd.go.th)" href="http://www.prd.go.th">กรมประชาสัมพันธ์</a></li>
<li><a title="www.ocsc.go.th (www.ocsc.go.th)" href="http://www.ocsc.go.th">www.ocsc.go.th</a></li>
<li><a title="ธนาคารแห่งประเทศไทย (www.bot.or.th)" href="http://www.bot.or.th">ธนาคารแห่งประเทศไทย</a></li>
<li><a title="Information of Thai tambon or villages with local products and many interesting places (www.thaitambon.com)" href="http://www.thaitambon.com">Information of Thai tambon or villages with local products and many interesting places</a></li>
<li><a title="CM108.com เชียงใหม่ หางานเชียงใหม่ ภาพเชียงใหม่ เชียงใหม่108 จังหวัดเชียงใหม่ (www.cm108.com)" href="http://www.cm108.com">CM108.com เชียงใหม่ หางานเชียงใหม่ ภาพเชียงใหม่ เชียงใหม่108 จังหวัดเชียงใหม่</a></li>
</ol>
</div>

CSS code

#GovTop10 {
	text-align: left;
	width: 200px;
}
#GovTop10 li{
	width: 180px;
}
#GovTop10 h1{
	font-size: 15px;
	color: #29ABE2;
	text-align: center;
	margin-bottom: 0px;
}

#GovTop10 .site{
	width: 180px;
	list-style: none;
}

GovTop10 .zebra_odd{
	background-color:#FFFFFF;
}
#GovTop10 .zebra_even{
	background-color: #EFEFEF;
}

วิธีแก้ไข

หลังจากหาอยู่เป็นเวลานานจึงได้พบว่า สิ่งที่ทำให้เกความผิดพลาดคือ

#GovTop10 li{
	width: 180px;
}

โดยถ้าลบ width ทิ้ง ก็จะแสดงผลได้ถูกต้องตามเดิม

จาก WikiBall

ปิดไม่ให้แสดง error

# supress php errors
php_flag display_startup_errors off
php_flag display_errors off
php_flag html_errors off

แสดง error ใน logs file

# enable PHP error logging
php_flag  log_errors on
php_value error_log  /home/path/public_html/domain/PHP_errors.log

จัดการ permission ของ logs

# prevent access to PHP error log
<Files PHP_errors.log>
 Order allow,deny
 Deny from all
 Satisfy All
</Files>

จาก WikiBall

Network Infrastructor

1. Gateway router : adsl เราเตอร์ทั่วไป กำหนด ip เป็น 192.168.0.2 (เป็นอย่างอื่นได้ 192.168.0.X แต่ต้องตั้งค่าอื่นให้ตรงตามนี้ด้วย) ซึ่ง adsl router แต่ละรุ่นจะมีวิธีตั่งค่า gateway ที่แตกต่างกัน
2. Routing server : เนื่องจากคุณสมบัติของ Gateway ถึงแม้จะมันเรียกกันว่า router ก็ตาม แต่ไม่มีคุณสมบัติในการ route หาเส้นทางแต่อย่างใด ดังนั้นจึงจำเป็นต้องใช้ PC หรือเครื่องคอมพิวเตอร์อื่นในการทำการหาเส้นทางแทน ไม่จำเป็นต้องแรง เพราะของผมที่ใช้งานอยู่ก็ PIII ram 128MB ก็ใช้ได้ แต่ควรมี UPS ซักหน่อยเพื่อความเสถียร
3. Client : เครื่อง PC หรือ Notebook ของผู้ใช้งาน

Program Installation and Configuration

Routing Server

ติดตั้งโปรแกรมสำคัญในเรื่อง Routing server ซึ่งในที่นี้จะใช้ OS เป็น Ubunutu(Linux) ซึ่งจะใช้ Linux ตัวอื่นก็ไม่ผิด แต่อาจมี configuration file ของบางโปรแกรมอยู่ไม่ตรงกัน

Network Interface configuration

$ sudo vim /etc/network/interfaces

ตั้งค่าเป็น

# This file describes the network interfaces available on your system
# and how to activate them. For more information, see interfaces(5).

# The loopback network interface
auto lo
iface lo inet loopback

# The primary network interface
#auto eth0
#iface eth0 inet dhcp

auto eth0
iface eth0 inet static
        address 192.168.0.1
        netmask 255.255.255.0
        network 192.168.0.0
        gateway 192.168.0.2

auto eth0:1
iface eth0:1 inet static
        address 192.168.1.1
        netmask 255.255.255.0
        network 192.168.1.0
        #firewall configuration
        pre-up sh /etc/network/firewall/firewall.sh

Network Firewall

สร้าง diretory ชื่อ firewall ใน /etc/network/ หรือที่ไหนก็ได้แต่อย่าลืมเปลี่ยนบรรทัดสุดท้านใน interfaces ให้ตรงด้วย

/etc/network$ sudo mkdir firewall
/etc/network$ cd firewall
/etc/network/firewall$ sudo vim torrent-block.iptables

# Generated by iptables-save v1.4.0 on Sat Jan 10 23:19:36 2009
*filter
:INPUT ACCEPT [1148:92586]
:FORWARD DROP [1106:549432]
:OUTPUT ACCEPT [835:103625]

# open icmp packet
-A FORWARD -i eth0 -p icmp -j ACCEPT
-A FORWARD -i eth0:1 -p icmp -j ACCEPT 

# open forward tcp port
-A FORWARD -p tcp --dport 20 -j ACCEPT
-A FORWARD -p tcp --sport 20 -j ACCEPT
-A FORWARD -p tcp --dport 21 -j ACCEPT
-A FORWARD -p tcp --sport 21 -j ACCEPT
-A FORWARD -p tcp --dport 22 -j ACCEPT
-A FORWARD -p tcp --sport 22 -j ACCEPT
-A FORWARD -p tcp --dport 23 -j ACCEPT
-A FORWARD -p tcp --sport 23 -j ACCEPT
-A FORWARD -p tcp --dport 25 -j ACCEPT
-A FORWARD -p tcp --sport 25 -j ACCEPT
-A FORWARD -p udp --dport 53 -j ACCEPT
-A FORWARD -p udp --sport 53 -j ACCEPT
-A FORWARD -p tcp --dport 53 -j ACCEPT
-A FORWARD -p tcp --sport 53 -j ACCEPT
-A FORWARD -p tcp --dport 80 -j ACCEPT
-A FORWARD -p tcp --sport 80 -j ACCEPT
-A FORWARD -p tcp --dport 443 -j ACCEPT
-A FORWARD -p tcp --sport 443 -j ACCEPT
-A FORWARD -p tcp --dport 88 -j ACCEPT
-A FORWARD -p tcp --sport 88 -j ACCEPT
-A FORWARD -p tcp --dport 135:139 -j ACCEPT
-A FORWARD -p tcp --sport 135:139 -j ACCEPT
-A FORWARD -p tcp --dport 445 -j ACCEPT
-A FORWARD -p tcp --sport 445 -j ACCEPT
-A FORWARD -p tcp -s 192.168.0.0/24 -j ACCEPT
-A FORWARD -p tcp -d 192.168.0.0/24 -j ACCEPT
COMMIT
# Completed on Sat Jan 10 23:19:36 2009

# Generated by iptables-save v1.4.0 on Sat Jan 10 23:19:36 2009
*nat  REROUTING ACCEPT [166:14287]  OSTROUTING ACCEPT [3:337]
:OUTPUT ACCEPT [3:337]
-A POSTROUTING -s 192.168.1.0/24 -o eth0 -j SNAT --to-source 192.168.0.1
COMMIT
# Completed on Sat Jan 10 23:19:36 2009

Bash script

สร้าง Bash script อย่างง่ายเพื่อ run command หรือจะเรียกใน shell ตามคำสั่งต่อไปนี้ได้เลย

# Add static static route
# if-UP
route add -net 192.168.0.0 netmask 255.255.255.0 gw 192.168.0.1 dev eth0
route add -net 192.168.1.0 netmask 255.255.255.0 gw 192.168.1.1 dev eth0:1
iptables-restore /etc/network/firewall/torrent-block.iptables

DHCP

เพื่อจะให้เครื่อง server ของเราแจก ip ได้โดยอัตโนมัติ
ติดตั้ง dhcpd3

$ sudo apt-get install dhcp3-server
$ sudo vim /etc/dhcp3/dhcpd.conf

ตั้งค่า

# Sample configuration file for ISC dhcpd for Debian
#
# Attention: If /etc/ltsp/dhcpd.conf exists, that will be used as
# configuration file instead of this file.
#
# $Id: dhcpd.conf,v 1.1.1.1 2002/05/21 00:07:44 peloy Exp $
#

# The ddns-updates-style parameter controls whether or not the server will
# attempt to do a DNS update when a lease is confirmed. We default to the
# behavior of the version 2 packages ('none', since DHCP v2 didn't
# have support for DDNS.)
ddns-update-style none;

# option definitions common to all supported networks...
option domain-name "example.org";
option domain-name-servers ns1.example.org, ns2.example.org;

default-lease-time 600;
max-lease-time 7200;

# If this DHCP server is the official DHCP server for the local
# network, the authoritative directive should be uncommented.
#authoritative;

# Use this to send dhcp log messages to a different log file (you also
# have to hack syslog.conf to complete the redirection).
log-facility local7;

# No service will be given on this subnet, but declaring it helps the
# DHCP server to understand the network topology.

#subnet 10.152.187.0 netmask 255.255.255.0 {
#}

# This is a very basic subnet declaration.

# A slightly different configuration for an internal subnet.
subnet 192.168.1.0 netmask 255.255.255.0 {
  range 192.168.1.50 192.168.1.130;
  option domain-name-servers 58.64.124.150;
# option domain-name "internal.example.org";
  option routers 192.168.1.1;
  option broadcast-address 192.168.1.255;
  default-lease-time 600;
  max-lease-time 7200;
}

$ sudo /etc/init.d/dhcp3-server start

ข้อดี ข้อเสีย

ข้อดี

1. สร้างง่าย
2. ต้นทุนต่ำ เพราะไม่ต้องลงทุนมาก มีเครื่องเก่าก็เอามาประยุกต์ใช้ได้

ข้อเสีย

1. ถ้าผู้ใช้มีความรู้มากหน่อย ก็จะสามารถหาช่องทางออกช่องอื่นได้ง่าย เพราะยังดีช่องโหว่อยู่มีเยอะให้ออก

จาก WikiBall

Command

propset

ใช้คำสั่ง propset เพื่อทำการสร้างค่า properties ใหม่ให้กับ file ตังตัวอย่างการ set ในส่วนของ copyright โดยชื่อ file สามารถใช้ regular expression ได้ด้วย ซึ่งการใช้ regular expression ใน svn แบบ UI เป็นเรื่องที่ทำยากมาก

$ svn propset copyright '(c) 2003 Red-Bean Software' calc/button.c
property 'copyright' set on 'calc/button.c'

ด้วอย่างด้านล่าง จะเป็นการเปลี่ยนหมดทุกไฟล์ ใน directory

$ svn propset svn:keywords 'Author Date Id Revision HeadURL' *

propedit

proplist

proplist ใช้สำหรับแสดง properties ใน file ในตัวอย่างต้านล่างเป็นการดู properties ทีละหลายๆ ไฟล์ โดยสามารถเลือกดูทีละ file โดยเปลี่ยนจาก * เป็นชื่อ
เราใช้ –verbose สำหรับแสดง value ใน properties ต่างๆ ซึ่งถ้าเราไม่ใส่ เอาพุตที่ออกมานั้นจะเป็นเฉพาะชื่อ properties ที่ทำการตั้งไว้เท่านั้น

$ svn proplist --verbose *
Properties on 'gcp_addressbook.ext.php':
  svn:keywords : Author Date Id Revision HeadURL
Properties on 'gcp_all.ext.php':
  svn:keywords : Author Date Id Revision HeadURL
Properties on 'gcp_compose.ext.php':
  svn:keywords : Author Date Id Revision HeadURL
Properties on 'gcp_list.ext.php':
  svn:keywords : Author Date Id Revision HeadURL
Properties on 'gcp_login.ext.php':
  svn:keywords : Author Date Id Revision HeadURL
Properties on 'gcp_mail.ext.php':
  svn:keywords : Author Date Id Revision HeadURL
Properties on 'gcp_settings.ext.php':
  svn:keywords : Author Date Id Revision HeadURL

Keywords

การใส่ keyword ใน file นั้น สามารถทำได้โดยการใส่ข้อความตามรูปแบบ ชื่อ keyword ที่ต้องการระหว่าง $ ดังต่อไปนี้

$Revision$
$Id$

ไม่ต้องใส่ค่าสงไป เพราะค่าที่ได้จะถูกใส่โดยอัตโนมัติ

Date

สำหรับใส่วันที่ที่การเปลี่ยนแปลงไฟล์ ใน revision นั้นๆ หรือใช้ LastChangedDate. แทนก็ได้ ซึ่งจะให้ผลดังตัวอย่าง

$Date: 2002-07-22 21:42:37 -0700 (Mon, 22 Jul 2002) $ 

Revision

สำหรับใส่เลข revision หรือใช้ LastChangedRevision หรือ Rev แทนก็ได้

$Revision: 144 $

Author

สำหรับใส่ชื่อผู้เขียนข้อมูลนี้ขึ้น หรือใช้ LastChangedBy แทนก็ได้

$Author: harry $

HeadURL

สำหรับใส่ URL หรือที่อยู่ไฟล์ (ในตำแหน่งสุดท้าย ไม่ขึ้นอยู่กับว่าจะย้ายหรือคัดลอกมาจากไหน) หรือใช้ URL แทนก็ได้

$HeadURL: http://svn.collab.net/repos/trunk/README $

Id

ใส่ทุกอย่างที่จำเป็นต้องมี ดูได้ดังตัวอย่าง คือ ชื่อไฟล์ Revision วันที่และเวลาที่ทำการเปลี่ยนแปลง และผู้เขียน ตามลำดับ

$Id: calc.c 148 2002-07-28 21:30:43Z sally $

ขอบคุณข้อมูลดีๆ จาก ref

• http://svnbook.red-bean.com/en/1.1/ch07s02.html#svn-ch-7-sect-2.3.4