สองสามเดือนก่อน (ประมาณสิงหา – กันยา) เริ่มเข้ามาอยู่กับทีมเว็บใหม่ๆ ก็อยากทำของเล่นซักชิ้นเพื่อลองอะไรบางอย่าง ประกอบกับเบื่อ Trac ที่ทำอะไรหลายอย่างไม่ได้ดั่งใจไม่ถูกใจ UI ด้วยหาตัวเลือกอื่นก็ไม่ได้ที่ถูกใจเสียทีก็เลยเขียนเองเลย ต้นแบบที่อยากได้คล้ายๆก็ประมาณ Scrumy ก็เป็นระบบที่เสียเงิน อยากใช้ฟรี feature บางอย่างก็หายไป อีกอย่างคงเอา private project ภายในไปแปะไว้ภายนอกให้คนอื่นเห็นก็คงไม่ดีเท่าไหร่ ฉไนเลยเขียนเองซะ ได้อย่างที่ต้องการแน่นอน วันนี้มันก็มาถึงจุดที่น่าจะเอามาอวดได้แล้ว ชื่อที่เรียกเล่นๆ ตอนนี้เรียกว่า Scrumboard จากจุดแรกที่อยากเอามาใช้เพราะลอง Scrum process หน้าตาก็ประมาณด้านล่างนี้ ความอยากส่วนตัวตอนเริ่มทำก็ประมาณ อยากลอง Web storage อยากลอง Application cache อยากรู้ว่า Offline mode ของ Browser ทำงานยังไง Drag and drop ที่มากับ Javascript engine ของ browser ต่างจาก Drag and [...]
HTML5 Application Cache #2
จากภาคแรก สิ่งที่ยังไม่ได้เขียนถึงคือ event และ status ของ Application Cache สองอย่างนี้ใช้คู่กันเมื่อ manifest file มีการเปลี่ยนแปลงโดย browser จะยิง event มาหลังจากเทียบ manifest file และโหลดไฟล์ที่กำหนดให้เก็บไว้ event ต่างๆ ก็มี checking: event แรกที่จะถูกยิงออกมา เป็นช่วงที่ browser ดาวโหลด manifest มาเทียบว่าต้องดึงไฟล์มาใหม่หรือไม่ ตรวจสอบเสร็จก็จะมี 4 event ที่ยิงถัดมาคือ noupdate, downloading, obsolete, error noupdate: หลังจากตรวจสอบแล้ว manifest ไม่มีการเปลี่ยนแปลง Application Cache ก็ยิง event นี้ออกมา downloading: หลังจากตรวจสอบแล้วว่า manifest มีการเปลี่ยนแปลง browser ก็จะดาวโหลดไฟล์ใหม่และ Application Cache [...]
HTML5 Online/Offline
เมื่อวานเขียนเรื่อง Application Cache ไปสิ่งหนึ่งที่เกี่ยวข้องแต่แยกออกมาคือ online/offline ใน browser ปัจจุบัน (Chrome, Firefox, Safari) สามารถตรวจว่าตอนนี้เครื่องที่เราใช้อยู่ online/offline อยู่ได้จาก navigator ตามด้านล่าง สถานะ online/offline จะดูตาม network interface ของเครื่องเลยว่ามี interface ไหนที่ active อยู่บ้างถ้าไม่มี interface ไหน active เลย navigator.onLine จะมีค่าเป็น false ถ้ามี interface นึงที่ active จะมีค่าเป็น true นอกจาก flag ที่ check จาก navigator แล้วยังมี event ที่บอกว่าเปลี่ยนเป็น online/offline เมื่อไหร่ดักได้ตาม code ด้านล่าง จาก code ไว้สำหรับคอยดักดูว่า [...]
HTML5 Application Cache
Feature นึงใน Kindle Reader ที่ทำให้สงสัยมากตอนเล่นครั้งแรกคือทำยังไงถึง Bookmark เป็น App ใน iPad แล้วพอเปิดขึ้นมาแบบ Airplane mode ยังสามารถทำงานได้อยู่โดยไม่ต้องต่อเนท เคยลองทำเว็บเล่นเองพอ Bookmark iPad ก็ไปโหลด resource ใหม่อยู่ดีจนไม่นานมานี้ทำ Project ทดลองจริงจังจึงพบว่า มี Feature นึงใน Browser รุ่นใหม่ๆ เรียกว่า Application Cache Feature นี้ใช้ได้เฉพาะ Safari, Chrome และ Firefox เท่านั้น IE9 ยังไม่รองรับ (ส่วน Opera ยังไม่ได้ลอง) เพราะงั้น Project ทดลองเลยบอกไว้เลยว่าไม่รอบรับ IE (เพราะมันเล่น Offline ไม่ได้นั่นเอง) หน้าตาเว็บที่ใช้ Application cache ก็จะมีหน้าตา HTML ตามด้านล่าง [...]
HTML5 Drag&Drop
เมื่อคืนช่วงที่เขียนเรื่อง IAAS/PAAS จริงๆ มีเรื่องนี้อยู่ในหัวด้วย มันมาตั้งแต่ตอนทำ Scrumboard ให้ลาก Task ได้แต่ไม่มีเวลารวบรวมซักที ช่วงเช้ายังว่างๆ ไม่มีใครมาเลยจดไว้ก่อนละกัน วิธีการใช้งาน HTML5 Drag&Drop แทบจะเหมือน Flex เป๊ะชื่อฟังก์ชั่นหรือ event นี่ลอกมาแทบจะไม่ต่าง (หรือจริงๆ Adobe อาจจะเป็นคนผลักมันออกมาเป็น Standard) Event พื้นฐานก็มี (@plutoniix แย้งมาตาม comment ว่ามาจาก MS ต่างหาก) dragstart: ใช้กับ DOM ที่จะลากเพื่อบอกว่า DOM นี้มีคนกดลากแล้วนะ dragend: ใช้กับ DOM ที่ลากไปมาได้เหมือน dragstart เกิดเมื่อตอนปล่อยเม้าส์จาก DOM ที่ลากไปมา dragover: ใช้กับ DOM ที่จะเป็นตัวรับ DOM ที่ลากไปมา เกิดตอน DOM อื่นถูกลากมาเหนือ DOM [...]
Subscribe / Connect
Subscribe to our e-mail newsletter to receive updates.
