TOSDN http://www.tosdn.com Thailand Open Source Development Network Wed, 19 Nov 2014 04:06:49 +0000 en-US hourly 1 http://wordpress.org/?v=4.0.1 Material UI – CSS Framework สำหรับใช้ร่วมกับ Google’s Material Design http://www.tosdn.com/developer/css-html/material-ui-css-framework-for-googles-ma http://www.tosdn.com/developer/css-html/material-ui-css-framework-for-googles-ma#comments Wed, 19 Nov 2014 04:06:49 +0000 http://www.tosdn.com/?p=1697 Posted by few on Material UI – CSS Framework สำหรับใช้ร่วมกับ Google’s Material Design

Material-UI is a CSS framework and a set of React components that implement Google’s Material Design specification. Material-UI is available as an npm package. Use browserify and reactify for dependency management and JSX transformation. The CSS framework is written in Less, so you’ll need to compile that as well. The styles are separated into 2 […]

The post Material UI – CSS Framework สำหรับใช้ร่วมกับ Google’s Material Design appeared first on TOSDN.

]]>
Posted by few on Material UI – CSS Framework สำหรับใช้ร่วมกับ Google’s Material Design

Material-UI is a CSS framework and a set of React components that implement Google’s Material Design specification. Material-UI is available as an npm package. Use browserify and reactify for dependency management and JSX transformation. The CSS framework is written in Less, so you’ll need to compile that as well.

The styles are separated into 2 less files which allows you to override any variables defined in custom-variables.less without having to modify material-ui source files directly. It is licensed under MIT License.

The post Material UI – CSS Framework สำหรับใช้ร่วมกับ Google’s Material Design appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/css-html/material-ui-css-framework-for-googles-ma/feed 0
สร้างอักษรตัวแรกให้ใหญ่และสวยงาม ด้วย Dropcap.js http://www.tosdn.com/developer/javascript/dropcap-js-makes-beautiful-drop-caps http://www.tosdn.com/developer/javascript/dropcap-js-makes-beautiful-drop-caps#comments Fri, 07 Nov 2014 10:09:01 +0000 http://www.tosdn.com/?p=1691 Posted by few on สร้างอักษรตัวแรกให้ใหญ่และสวยงาม ด้วย Dropcap.js

สคริ้ปจัดการให้อักษรตัวแรกเป็นตัวใหญ่ เอาไว้เป็นทริปสวยๆสำหรับแสดงข้อความ พัฒนาโดย Adobe เชียวนะครับ (สำหรับ Windows รองรับ IE10+, Firefox, Chrome และถ้าเป็น OSX จะรองรับ Firefox, Chrome, Safari)

The post สร้างอักษรตัวแรกให้ใหญ่และสวยงาม ด้วย Dropcap.js appeared first on TOSDN.

]]>
Posted by few on สร้างอักษรตัวแรกให้ใหญ่และสวยงาม ด้วย Dropcap.js

Decorative initials, also known as drop capitals or “drop caps”, should be positioned on a baseline of the adjoining text; they should also be tall enough to reach the cap height of the first line of text.

Though drop caps are very common in magazines and books, they remain rare on the web. We believe this is because doing it right simply and reliably is too difficult. A simple CSS float:left on a ::first-letter pseudo-element is not enough. Dropcap.js makes beautiful drop caps easy for the web. We tested dropcap.js on Windows (IE10+, Firefox, Chrome) and OSX (Firefox, Chrome, Safari).

The post สร้างอักษรตัวแรกให้ใหญ่และสวยงาม ด้วย Dropcap.js appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/javascript/dropcap-js-makes-beautiful-drop-caps/feed 0
Lychee ระบบแกลลอรี่รูปสวยๆ สำหรับเปิดเว็บไซต์แกลลอรี่ http://www.tosdn.com/developer/php/lychee-a-free-photo-management-tool1688 http://www.tosdn.com/developer/php/lychee-a-free-photo-management-tool1688#comments Fri, 07 Nov 2014 09:53:54 +0000 http://www.tosdn.com/?p=1688 Posted by few on Lychee ระบบแกลลอรี่รูปสวยๆ สำหรับเปิดเว็บไซต์แกลลอรี่

Lychee is a free photo-management tool, which runs on your server or web-space. Installing is a matter of seconds. Upload, manage and share photos like from a native application. Lychee comes with everything you need and all your photos are stored securely. You can upload, move, rename, describe, delete or search your photos in seconds. […]

The post Lychee ระบบแกลลอรี่รูปสวยๆ สำหรับเปิดเว็บไซต์แกลลอรี่ appeared first on TOSDN.

]]>
Posted by few on Lychee ระบบแกลลอรี่รูปสวยๆ สำหรับเปิดเว็บไซต์แกลลอรี่

Lychee is a free photo-management tool, which runs on your server or web-space. Installing is a matter of seconds. Upload, manage and share photos like from a native application. Lychee comes with everything you need and all your photos are stored securely.

You can upload, move, rename, describe, delete or search your photos in seconds. All in one place, right from your browser. Look at all your images in full-screen mode, navigate forward and backward by using your keyboard or let others enjoy your photos by making them public.

The post Lychee ระบบแกลลอรี่รูปสวยๆ สำหรับเปิดเว็บไซต์แกลลอรี่ appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/php/lychee-a-free-photo-management-tool1688/feed 0
ตรวจจับใบหน้าบนรูปและวีดิโอ ด้วย jQuery Face Detection http://www.tosdn.com/developer/javascript/jquery-face-detection-works-images-videos http://www.tosdn.com/developer/javascript/jquery-face-detection-works-images-videos#comments Fri, 07 Nov 2014 09:30:32 +0000 http://www.tosdn.com/?p=1679 Posted by few on ตรวจจับใบหน้าบนรูปและวีดิโอ ด้วย jQuery Face Detection

jQuery Plugin ที่ช่วยจับใบหน้าของคนในรูปและวีดิโอ จากที่ทดสอบ ค่อนข้างแม่นเหมือนกันนะครับ

The post ตรวจจับใบหน้าบนรูปและวีดิโอ ด้วย jQuery Face Detection appeared first on TOSDN.

]]>
Posted by few on ตรวจจับใบหน้าบนรูปและวีดิโอ ด้วย jQuery Face Detection

jQuery Face Detection Plugin detects faces on images, videos and canvases to get theirs coordinates. It tracks a face and outputs the coordinate positions of the face model as an array. We believe that face recognition will open up a ton of possibilities in how we interact not just with each other.

The post ตรวจจับใบหน้าบนรูปและวีดิโอ ด้วย jQuery Face Detection appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/javascript/jquery-face-detection-works-images-videos/feed 0
วิธีติดตั้ง Laravel 4 บน VirtualBox+Vagrant+Homestead (For Windows 7,8) http://www.tosdn.com/developer/how-to-setup-laravel-4-windows http://www.tosdn.com/developer/how-to-setup-laravel-4-windows#comments Thu, 06 Nov 2014 08:04:31 +0000 http://www.tosdn.com/?p=1655 Posted by few on วิธีติดตั้ง Laravel 4 บน VirtualBox+Vagrant+Homestead (For Windows 7,8)

เพิ่งมีโอกาสได้ลองเล่น Laravel ซึ่งเป็น PHP Framework ที่กำลังบูมมาก (จริงๆก็บูมมาพักใหญ่ๆแล้ว) ว่ากันว่า มีเครื่องมือช่วยเยอะพอสมควร เรียนรู้ง่าย ใช้งานง่าย ซึ่งบล็อกนี้ผมขอบันทึกการเรียนรู้ Laravel ไว้ ใครเพิ่งหัดเล่น ก็หัดไปพร้อมๆกันเลยครับ

The post วิธีติดตั้ง Laravel 4 บน VirtualBox+Vagrant+Homestead (For Windows 7,8) appeared first on TOSDN.

]]>
Posted by few on วิธีติดตั้ง Laravel 4 บน VirtualBox+Vagrant+Homestead (For Windows 7,8)

เพิ่งมีโอกาสได้ลองเล่น Laravel ซึ่งเป็น PHP Framework ที่กำลังบูมมาก (จริงๆก็บูมมาพักใหญ่ๆแล้ว) ว่ากันว่า มีเครื่องมือช่วยเยอะพอสมควร เรียนรู้ง่าย ใช้งานง่าย ซึ่งบล็อกนี้ผมขอบันทึกการเรียนรู้ Laravel ไว้ ใครเพิ่งหัดเล่น ก็หัดไปพร้อมๆกันเลยครับ

แต่ก่อนจะไปถึงตรงนั้น เรามาลองติดตั้งกันก่อน ซึ่งเท่าที่ผมหาข้อมูลจากเว็บไซต์ Laravel Official เอง หรือจากที่ต่างๆ ก็มักจะแนะนำให้ทำ Virtual Machine โดยการใช้ VirtualBox และติดตั้ง Vagrant Package ที่ชื่อว่า Homestead สำหรับอำนวยความสะดวก เพราะใน Package มันจะลง Ubuntu Linux+PHP+Apache และเครื่องมือต่างๆสำหรับพัฒนาเว็บไซต์ด้วย Laravel ให้ครบถ้วนเลย (คนเขียน PHP ปกติ ก็เหมาะครับ)

ใน Vagrant Homestead จะมี Software ที่ติดตั้งให้เราใน VirtualBox ดังนี้

  • Ubuntu 14.04
  • PHP 5.6 (Laravel ต้องการ PHP >= 5.4 และ MCrypt PHP Extension)
  • HHVM
  • Nginx
  • MySQL
  • Postgres
  • Node (With Bower, Grunt, and Gulp)
  • Redis
  • Memcached
  • Beanstalkd
  • Laravel Envoy
  • Fabric + HipChat Extension

(ที่ทำตัวหน้าคือ สิ่งที่ Laravel ต้องการใช้ (Server Requirements) ส่วนอื่นๆ ก็แล้วแต่งานของแต่ละคนว่าจำเป็นอะไรบ้าง)

ส่วนใครจะติดตั้งแบบปกติด้วยการลง Apache+PHP ใน Windows ก็สามารถทำได้ ไว้คราวหน้าผมจะเขียนให้อีกครั้งหนึ่ง

สิ่งที่เราจะใช้ติดตั้งทั้งหมดในบทความนี้ดาวน์โหลดมารอกันได้เลยครับ

  1. VirtualBox – สำหรับเป็นเครื่องเซฟเวอร์จำลอง (VIrtual Machine หรือเรียกย่อๆ VM)
  2. Vagrant – เครื่องมือช่วยติดตั้ง Package ในเครื่อง VM
  3. PuTTY – สำหรับล็อกอินเข้าเครื่อง VM ด้วย SSH
  4. PTTYgen – สำหรับสร้างไฟล์ SSL (ได้ทั้งแบบ public key และ private key)
  5. Homestead – เป็น Config เพื่อบอก Vagrant ว่า ต้องลง Package อะไรในเครื่อง VM บ้าง
  6. Laravel – PHP Framework พระเอกของเรา
  7. Composer – เครื่องมือจัดการ Library ของ PHP  (ในชุด Package ของ Homestead จะมีแจ้งติดตั้งในเครื่อง VM ให้เราด้วย)

1. ติดตั้ง Virtual Machine ด้วย VirtualBox + Vargrant + Homestead + SSH

เปิดไฟล์ Setup ของ VirtualBox เพื่อทำการติดตั้งเจออะไรก็กด Yes และ Next ไปเรื่อยๆ

2014-11-05 17_34_43-VirtualBox

เปิดไฟล์ Setup ของ Vagrant เพื่อทำการติดตั้ง แล้วก็เหมือนเดิมครับ ถ้าเจออะไรก็กด Yes และ Next ไปเรื่อยๆ

2014-11-05 17_35_01-Vagrant

เมื่อติดตั้งทั้ง VirtualBox และ Vagrant เสร็จแล้ว มันจะแจ้งให้ restart เครื่อง ก็ทำตามมัน

จากนั้นให้ทำการติดตั้ง homestead ด้วยการเปิด Command Line ขึ้นมา (กดปุ่ม Ctrl+R แล้วพิมพ์ cmd) มันจะขึ้น folder user ของเรา จากนั้นให้พิมพ์ดังนี้ (ในขั้นตอนนี้ต้องต่อ Internet ด้วย)

vagrant box add laravel/homestead

2014-11-06 12_00_18-C__Windows_system32_cmd.exe

ขั้นตอนนี้ Vagrant มันจะดาวน์โหลดไฟล์จาก Internet มาติดตั้งในเครื่อง VM ให้เราทั้งหมด ตามรายการ Software ข้างต้นที่ได้เขียนไว้

ระหว่างรอ Vagrant ทำงาน ให้เราไปดาวน์โหลดไฟล์ homestead config ที่ https://github.com/laravel/homestead (เมื่อเปิดหน้าเว็บไซต์มาแล้ว ให้กดที่ปุ่ม Download ZIP)

2014-11-06 12_07_14-Program Manager

จากนั้นคลาย ZIP ไว้ใน folder user ของเราเลยครับ ซึ่งของผมจะเป็น C:\Users\ifew\Homestead (ชื่อ ifew จะเป็นชื่อ user ซึ่งจะไม่เหมือนกับผม ส่วน Homestead จะเป็นตัวเล็กตัวใหญ่ก็ตามแต่สะดวกครับ) และไฟล์ข้างในก็จะมีประมาณนี้ครับ

2014-11-05 17_34_05-Homestead

จากนั้นเปิดโปรแกรม PuTTYgen ขึ้นมา ให้กดปุ่ม Generate แล้วเอาเม้าส์ลากๆๆ ตรงพื้นที่ว่างด้านบน สังเกตว่าจะมีแถบสถานะขึ้นมา ลากจนกว่ามันจะเสร็จ 100% นั่นแหละครับ และเมื่อเสร็จแล้ว ให้กด Save public key แล้วตั้งชื่อบันทึกไฟล์อะไรก็ได้ เอาไว้ใน Folder ที่เราทำไว้เมื่อสักครู่ (ของผมคือ C:\Users\ifew\Homestead) เสร็จแล้วให้กด Save private key แล้วทำการบันทึกไฟล์เหมือน public key เลยครับ (สำหรับขึ้นตอน save private key มันจะมีหน้าต่าง Warning เด้งขึ้นมา ให้กด Yes ผ่านไปเลย)

2014-11-05 17_35_24-PuTTY

ในรูป public key ผมใช้ชื่อ sshpublic, ส่วน private key ผมใช้ชื่อ sshprivate.ppk

2014-11-05 17_34_05-Homestead

เมื่อเราทำตามขั้นตอนเสร็จหมดทุกอย่างแล้ว ให้มาแก้ไข homestead config ดังนี้ (ถึงแม้ Vagrant จะยังกาวน์โหลดไม่เสร็จก็ทำ config ได้ครับ)

ใน Folder Homestead ที่เราได้ทำไว้ (ของผมคือ C:\Users\ifew\Homestead) ให้เปิดไฟล์ชื่อ Homestead.yaml เพื่อแก้ไข (ใช้ editor อะไรก็ได้ เช่น notepad, notepad++ ก็ตามสะดวก)

ในไฟล์จะมีช้อมูลตามรูปด้านล่างนี้ครับ

2014-11-05 17_34_22-C__Users_ifew_Homestead_Homestead.yaml - Notepad++

หมายเหตุ - ในที่นี้ ถ้าเห็น ~/Headstead/ มันหมายถึง  C:\Users\ifew\Homestead ครับ ซึ่งถ้าท่านทำตามผมโดยไว้ใน Folder User ก็แก้ตามนี้ครับ แต่ถ้าไม่ใช่ ต้องแก้เป็น path ที่ท่านเอาไว้ เช่น C:/Homestead (เครื่องหมาย / หรือ \ ให้ใช้ตามผมเลยครับ อาจจะสับสนหน่อย เพราะมันต้องระบุแบบ Linux)

อธิบาย Homestead Config

keys: 
เป็นที่เก็บไฟล์ SSL Private Key ซึ่งให้เราแก้เป็นที่อยู่ Private Key ที่เราได้สร้างไว้
(ที่อยู่ไฟล์ของผมคือ C:\Users\ifew\Homestead\sshprivate.ppk ดังนั้นผมจึงระบุว่า ~/Headstead/sshprivate.ppk)

folders: 
- map คือที่เก็บไฟล์เว็บไซต์ของเรา ในเครื่อง windows
to: คือที่เก็บไฟล์เว็บไซต์ของเราในเครื่อง VM
(ผมก็เพิ่งรู้ว่ามันทำแบบนี้ได้ คือมันสะดวกมากๆครับ โดยมันจะเชื่อม Folder จากเครื่องคอมพิวเตอร์เรา ตรงไปยังเครื่อง VM ได้เลย โดยเราไม่ต้อง FTP upload ให้ยุ่งยาก แก้ปุ๊บ ทดสอบได้ปั๊บ)

sites:
- map: คือชื่อ URL เว็บไซต์สำหรับเปิดใช้งานครับ ที่นี้ผมต้องการเปิดด้วย http://testlaravel/
to: คือที่อยู่ของไฟล์สำหรับเปิดเป็นหน้าแรกของเว็บไซต์เรา
(โครงสร้างของ Folder ใน Laravel ตัวไฟล์ที่เราจะแก้ไขได้มันอยู่ใน public ครับ, ซึ่งตอนแรกผมยังไม่รู้โครงสร้างของมัน ก็ก้มหน้าก้มตาทำตามคู่มือไป สุดท้ายเลยมี public ซับซ้อน 2 ชั้นเลย แหะๆ)

variables:
ไว้ระบุ environment ว่าเราพัฒนาอยู่บนระบบไหน เช่น local, staging, development, production ฯลฯ แต่ ณ ที่นี้ไม่ต้องแก้ ข้ามไปเลย

ขั้นตอนสุดท้าย  หลังจากติดตั้ง VirtualBox, Vagrant, แก้ไข Homestead Config เสร็จหมดแล้ว และรอจน Vagrant ดาวน์โหลดเสร็จทุกอย่างแล้ว ให้เราพิมพ์คำสั่งดังนี้

vagrant up

ซึ่งเป็นการสั่งให้ Vagrant ปรับค่าต่างๆตาม config เข้าไปในเครื่อง VM ของเรา, และรอจนมันเสร็จ

2014-11-05 17_33_12-C__Windows_system32_cmd.exe

หลังจากเสร็จแล้ว ให้ไปปรับค่า hosts ของ windows โดยการเข้าไปแก้ไขไฟล์ที่ C:\Windows\System32\drivers\etc\hosts โดยระบุ ดังนี้

192.168.10.10  testlaravel

หมายเหตุ* – testlaravel เป็นชื่อ URL ที่ผมใช้, ดังนั้นใน Homestead Config ท่านตั้งค่า sites: หัวข้อ map ไว้ชื่ออะไร ให้ใช้ชื่อเดียวกันนั่นเอง

2014-11-06 14_13_01-_C__Windows_System32_Drivers_etc_hosts - Notepad++

 ข้อควรทราบเกี่ยวกับเรื่อง Port

เนื่องจาก Homestead มันปรับเลข Port ของเราใหม่ เพื่อไม่ให้เป้นค่าปกติ (อาจเพื่อความปลอดภัย หรือเพื่อไม่ให้ Port ไปซ้ำซ้อนกับโปรแกรมอื่นๆในเครื่องเรา) ดังนั้น ต้องทราบไว้ตามนี้ครับ

ซ้ายคือ เลข Port ของ Homestead ที่เราจะใช้, ส่วน ขวาคือ เลข Port มาตรฐานเดิม
SSH: 2222 -> Forwards To 22
HTTP: 8000 -> Forwards To 80
MySQL: 33060 -> Forwards To 3306
Postgres: 54320 -> Forwards To 5432

2. ติดตั้ง Laravel ด้วย Composer

หลังจากทำเครื่อง VM เรียบร้อย คราวนี้ก็มาถึงตัวพระเอกของเรา คือ Laraval นั่นเอง
โดยขั้นแรกให้เราไป Download ไฟล์ Laravel ที่ Github โดยกดที่นี่ได้เลยครับ > Laravel lastest version (หรือใครดาวน์โหลดมาแต่แรกแล้วก็ข้ามขั้นตอนนี้ไป)

จากนั้นคลาย ZIP ไฟล์ ไว้ใน Folder เก็บเว็บไซต์ ที่เราได้ระบุในไฟล์ Homestead Config ส่วนของ folders หัวข้อ map ที่เราได้สร้างไว้ ( ในที่นี้ผมเก็บไว้ที่ D:/www/testlaravel/)

ต่อมา ให้เราเปิดโปรแกรม PuTTY  แล้วทำการ connect ไปยังเครื่อง VM ของเรา ดังนี้

Host Name: 127.0.0.1
Post: 2222 (ปกติ SSH จะใช้ 22 แต่ Homestead มันแก้ให้เราเป็น 2222)

2014-11-05 17_44_02-Blog

เมื่อเข้าไปแล้ว จะเจอหน้าจอให้กรอก login ซึ่งค่ามาตรฐานของ vagrant คือ (เปลี่ยนภายหลังได้)

login: vagrant
password: vagrant

2014-11-05 17_44_19-Blog

หลังจากกรอกผ่านแล้วตามรูปด้านบน ให้เข้าไปที่ Folder ของไฟล์ ที่เราระบุไว้ใน Homestead Config ส่วนของ folders หัวข้อ to (ในที่นี้ ผมตั้งไว้ว่า testlaravel ดังนั้น path ของผมคือ /home/testlaravel/)

2014-11-05 17_44_54-Blog

สังเกตนะครับ ว่า ไฟล์ที่เราคลาย ZIP ไว้ในเครื่องจริงของเราที่เป็น Windows มันจะต้องตรงกับในเครื่อง VM ที่เป็น Linux เพราะมันได้เชื่อมถึงกัน (โครตเจ๋งเลย)

2014-11-05 17_45_26-laravel

เมื่อทุกอย่างครบแล้ว ให้กลับไปที่หน้าจอของ PuTTY และเช็คให้แน่ใจว่าเราอยู่ใน Folder User ของเรา (ของผมคือ /home/testlaravel/) คราวนี้เราจะใช้ composer ในการ install โดยพิมพ์ดังนี้

composer install

เจ้าตัว composer มันก็จะไปโหลด library เวอร์ชั่นล่าสุด ที่เป็นตัวมาตรฐานของ Laravel มาให้ทั้งหมด โดยเราไม่ต้องไปนั่งหาดาวน์โหลดเองเลย (เจ๋งโครตอีกแล้ว)

เมื่อดาวน์โหลดเสร็จแล้ว ให้ไปแก้ไขไฟล์ใน Folder ของ Laravel ดังนี้ /app/config/app.php (ซึ่งถ้าเทียบกับ path ของผม คือ D:/www/testlaravel/public/laravel/app/config/app.php)

แก้ 3 หัวข้อ ดังนี้

‘url’ => ‘http://testlaravel/’, << ใช้ URL ตามที่คุณตั้งชื่อใน Homestead Config

‘timezone’ => ‘Asia/Bangkok’, << ใครอยู่ประเทศอื่นก็ตั้งให้ตรงนะ โดยดูได้ที่ PHP Timezones

‘local’ => ‘th’, << หรือจะปล่อยเป็น en ก็ได้

เมื่อแก้เสร็จแล้วก็ลองเปิดเว็บไซต์ด้วย URL ที่คุณได้ตั้งไว้ (ในที่นี้ผมตั้งไว้ว่า http://testlaravel/) มันก็จะขึ้นหน้าจอ Laravel หมายถึงได้ติดตั้งเรียบร้อยแล้วครับ

2014-11-05 17_36_14-Program Manager

หมายเหตุ* – เวลาเรา ปิด/เปิด เครื่องคอมพิวเตอร์เราใหม่ ก็ให้เข้า Command Line แล้วไปที่ Folder Homestead Config ที่เราตั้งไว้ จากนั้นทำการสั่ง vagrant up เพื่อเปิดเครื่อง VM ก่อน แล้วจึงใช้งานได้ครับ (ไม่มีมีวิธีอื่นหรือวิธีอัตโนมัติไหม ใครมีแนะนำด้วยนะครับ)

2014-11-06 15_01_09-C__Windows_system32_cmd.exe - vagrant  up

The post วิธีติดตั้ง Laravel 4 บน VirtualBox+Vagrant+Homestead (For Windows 7,8) appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/how-to-setup-laravel-4-windows/feed 1
BugDay Bangkok 2014 ตอน สวัสดี Automate Testing http://www.tosdn.com/lifestyle/update/bugday-bangkok-2014 http://www.tosdn.com/lifestyle/update/bugday-bangkok-2014#comments Wed, 20 Aug 2014 04:26:31 +0000 http://www.tosdn.com/?p=1650 Posted by few on BugDay Bangkok 2014 ตอน สวัสดี Automate Testing

BugDay เป็นงานเกี่ยวกับเรื่องของการมาแบ่งปันประสบการณ์ในด้านของ Software Testing และ Software Quality Assurance/Control แบบที่ จับต้องได้ เน้นเอาประสบกาณ์มาแบ่งปันจากคนที่ลงมือทำจริงๆ

The post BugDay Bangkok 2014 ตอน สวัสดี Automate Testing appeared first on TOSDN.

]]>
Posted by few on BugDay Bangkok 2014 ตอน สวัสดี Automate Testing

BugDay เป็นงานเกี่ยวกับเรื่องของการมาแบ่งปันประสบการณ์ในด้านของ Software Testing และ Software Quality Assurance/Control แบบที่ จับต้องได้ ทำมาเอง เจ็บจริง เลือดออก มือเปื้อนทั้ง ดิน โคลน หรือ เลือด จริงๆ เน้นเอาประสบกาณ์มาแบ่งปันจากคนที่ลงมือทำจริงๆ

BugDay Bangkok 2014 ครั้งนี้ เราจะไปเลี้ยงอาหารกลางวัน บริจาคของใช้และอาหารสำหรับเด็กอ่อน และเวชภัณฑ์ยาที่จำเป็น ที่ สถานสงเคราะห์เด็กอ่อนพิการทางสมองและปัญญาบ้านเฟื่องฟ้า อ.บางเก็ด จ.นนทบุรี (http://www.fuengfah.com/)

โดยจะขอรับเป็นเงินบริจาค และสิ่งของใช้และอาหารสำหรับเด็กอ่อน และเวชภัณฑ์ยา แทนเงินค่าตั๋วเข้างาน รายละเอียดจะแจ้งให้ทราบอีกครั้งที่ www.welovebug.com

วันพบปะ

  • วันพฤหัสบดีที่ 18 กันยายน พ.ศ. 2557
  • เวลา 09:00น. – 17:00น.

หัวข้อแบ่งปัน

  • กำลังจะมา

กำหนดการ

  • 08:30 – 09:30 ลงทะเบียน ณ ชั้น 3 อาคาร Software Park
  • 09:30 – 09:45 กล่าวต้อนรับและเปิดงานโดยผู้อำนวยการเขตอุตสาหกรรมซอฟต์แวร์ประเทศไทย
  • 09:45 – 10:00 Welcome to BugDay Bangkok 2014
  • 10:00 – 10:45 <หัวข้อแบ่งปัน>
  • 10:45 – 11:30 <หัวข้อแบ่งปัน>
  • 11:30 – 12:15 <หัวข้อแบ่งปัน>
  • 12:15 – 13:15 พักรับประทานอาหารกลางวัน
  • 13:15 – 14:00 <หัวข้อแบ่งปัน>
  • 14:00 – 14:45 <หัวข้อแบ่งปัน>
  • 14:45 – 15:30 <หัวข้อแบ่งปัน>
  • 15:30 – 16:15 <หัวข้อแบ่งปัน>
  • 16:15 – 17:00 เสวนาพาเพลิน และปิดงาน

* หมายกำหนดการจะมีการเปลี่ยนแปลง

แผนที่การเดินทางมางาน

แผนที่การเดินทางมายัง Software Park Thailand

software park thailand map

ติดต่อสอบถาม

ข้อสงสัย หรือต้องการสอบถามข้อมูลใดๆ หรือสนใจสนับสนุน ติดต่อได้ที่

  • Email: webmaster@welovebug.com
  • Twitter: @welovebug
  • Facebook Group: https://www.facebook.com/groups/welovebug/
  • hastag: #bugdaybkk2014

The post BugDay Bangkok 2014 ตอน สวัสดี Automate Testing appeared first on TOSDN.

]]>
http://www.tosdn.com/lifestyle/update/bugday-bangkok-2014/feed 0
Google Web Starter Kit – Boilerplate & Tooling for Multi-Device Development http://www.tosdn.com/developer/css-html/google-web-starter-kit http://www.tosdn.com/developer/css-html/google-web-starter-kit#comments Fri, 20 Jun 2014 10:02:37 +0000 http://www.tosdn.com/?p=1644 Posted by few on Google Web Starter Kit – Boilerplate & Tooling for Multi-Device Development

Start your project with the Web Starter Kit and ensure you're following the Web Fundamentalsguidelines out of the box.

The post Google Web Starter Kit – Boilerplate & Tooling for Multi-Device Development appeared first on TOSDN.

]]>
Posted by few on Google Web Starter Kit – Boilerplate & Tooling for Multi-Device Development

Your starting point for building great multi-device web experiences

  • Multi-device responsive boilerplate

    A responsive boilerplate optimized for the multi-screen web, with a high PageSpeed Insights performance score.

  • Living component style guide

    A visual design system for documenting your site’s components that evolves as it does.

  • Cross-device Synchronization

    Synchronize clicks, scrolls, forms and live-reload across multiple devices as you edit your project. Powered by BrowserSync.

  • Live Browser Reloading

    Reload the browser in real-time anytime an edit is made without the need for an extension.

  • Performance optimization

    Minify and concatenate JavaScript, CSS, HTML and Images to help keep your pages lean.

  • Built in HTTP Server

    A built in server for previewing your site means you can test your pages without messing with other tools.

  • PageSpeed Insights Reporting

    Web performance metrics showing how well your site performs on mobile and desktop.

  • Sass support

    Compile Sass into CSS with ease, bringing support for variables, mixins and more.

mobile pixel

  • Responsive Layout

    Responsive layout is included with the kit that adapts to fit the device your user is viewing it on. This helps you hit the ground running with an experience that looks good everywhere.

  • Performance in mind

    Web Starter Kit strives to give you a high performance starting point out of the box and we actively work on delivering the best PageSpeed Insights score and frame-rate possible.

  • Delete-key friendly

    Create a tailored starter kit by taking only what you need, and easily deleting anything you don’t.

The post Google Web Starter Kit – Boilerplate & Tooling for Multi-Device Development appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/css-html/google-web-starter-kit/feed 0
GitHub Octicons – icon font for anyone http://www.tosdn.com/designer/freebie/github-octicons http://www.tosdn.com/designer/freebie/github-octicons#comments Wed, 18 Jun 2014 03:15:39 +0000 http://www.tosdn.com/?p=1640 Posted by few on GitHub Octicons – icon font for anyone

Way back in 2012, social coding community GitHub launched its own icon font called Octicons, leveraging what it called at the time “CSS3 techniques like rounded corners, gradients, and @font-face across all pages of the site.”

The post GitHub Octicons – icon font for anyone appeared first on TOSDN.

]]>
Posted by few on GitHub Octicons – icon font for anyone

Octiconsไอคอนฟรีๆจาก GitHub เป็นการพัฒนาจาก Font และ CSS3 จึงทำให้ย่อ-ขยายดูขนาดไหนก็ยังสวยงามคงเดิม เหมือนกับ Font Awesome Icons ของ Bootstrap

Way back in 2012, social coding community GitHub launched its own icon font called Octicons, leveraging what it called at the time “CSS3 techniques like rounded corners, gradients, and @font-face across all pages of the site.”

This was designed to be as much about aesthetics for the emerging retina-screened products as it was about site performance, and was used across many of GitHub’s sites, including its hackable text editor Atom. Now, GitHub has announced it’s making them available for anyone and everyone to download and use.

The post GitHub Octicons – icon font for anyone appeared first on TOSDN.

]]>
http://www.tosdn.com/designer/freebie/github-octicons/feed 0
osTicket – Widely-used and trusted open source support ticket system http://www.tosdn.com/developer/php/osticket-widely-used-trusted-open-source-support-ticket-system http://www.tosdn.com/developer/php/osticket-widely-used-trusted-open-source-support-ticket-system#comments Sat, 10 May 2014 09:23:48 +0000 http://www.tosdn.com/?p=1621 Posted by few on osTicket – Widely-used and trusted open source support ticket system

ปกติผมใช้ Redmine และพยายามหาตัวใช้แทนอยู่ แต่ต้องการนำมาติดตั้งเอง้ดวย PHP ซึ่งคิดว่าตัวนี้ค่อนข้างใกล้เคียง ออกแบบ Input ได้เอง ระบบค้นหา ระบบฟีลเตอร์ (Filter) ระบบสรุปรายงาน การส่งต่อหรือสั่งงาน การตั้ง SLA หรือแม้แต่การส่งโน๊ตคุยกันเอง ทำได้หมดเลยครับ

The post osTicket – Widely-used and trusted open source support ticket system appeared first on TOSDN.

]]>
Posted by few on osTicket – Widely-used and trusted open source support ticket system

osTicket is a widely-used and trusted open source support ticket system. It seamlessly routes inquiries created via email, web-forms and phone calls into a simple, easy-to-use, multi-user, web-based customer support platform. osTicket comes packed with more features and tools than most of the expensive (and complex) support ticket systems on the market. The best part is, it’s completely free.

Custom Fields

Customize the data collected from users when submitting a ticket to help get straight to the issue.

You can create custom lists of data to add to each ticket or specific help topics for clients to choose from when creating a ticket. Custom Fields/Forms/Lists can be added to each web ticket created or only show up when a specific help topic is chosen. They can be configured as best suits your business needs.

Rich Text HTML

Rich text or HTML email, is supported and allows for rich text markup in staff replies and internal notes posted to the ticket thread.

Auto-Response templates also contain the rich text which allows you to further brand your help desk to your customers by adding your logo. Pictures as well as video can be added to a ticket when responding. (Can you say, SCREEN SHOTS!)

Ticket Filters

Define rules to route incoming tickets to the right departments or staff members, and action triggers.

By using the filter system, osTicket empowers you to automate the creation and routing of tickets. Set actions such as ticket rejection, automatic department assignment or even send a canned response!

Help Topics

Configurable help topics for web tickets. Route inquiries without exposing internal departments or priorities.

Tickets can be streamlined for faster response times by being routed to pre-determined departments. Combined with custom forms, you can design a form for a specific help topics to gather additional information for specific requests.

Agent Collision Avoidance

Ticket locking mechanism to allow staff to lock tickets during response and avoid conflicting or dual responses.

Avoid multiple agents responding to the same ticket at the same time! You set the amount of time the lock remains on a ticket. When a ticket is locked, other staff can not respond to the ticket until the lock expires.

Assign and Transfer

Transfer tickets between departments to make sure it’s being handled by the correct staff. Assign tickets to a staff or to a team.

Tickets can be auto-assigned by help topics or departments when they arrive, but what if they need to be reassigned? No problem! You can reassign tickets to staff or a team of staff or transfer to a different department all together. Transfers and assignment notes are logged as internal notes in the ticket thread so you can keep track of where the ticket has been routed to for processing.

Auto-Responder

Configurable automatic reply sent out when a new ticket is opened or a message is received.

Auto responses can be formatted to pull information from the ticket to personalize the email. osTicket supports placeholder variables such as %{ticket.name.first}which will become the user’s first name when the automated response is sent. Auto responses can be edited and customized for each department and associated with help topics.

Internal Notes

Add internal notes to tickets for staff. Activity logs let you see events or actions that have been taken, when they took place, and by whom.

Service Level Agreements

SLA Plans allow you to track tickets and due dates without the hassle.

Get overdue alerts and notices on missed due dates, and priority escalation. Create an unlimited number of SLA Plans and assign them to help topics, departments or ticket filters.

Customer Portal

All support requests and responses are archived online. User can login using email and ticket ID. No user account or registration required to submit a ticket.

Dashboard Reports

Get system overview and basic historical statistics on tickets count and status per department, staff and help topics.

Dashboard reports give you an at a glance view at the performance and functionality of your help desk. You can also download and export more ticket detail by preforming an advanced search from the ticket que.

Locked-2 Rich Text Response Screen Shot 2013-12-05 at 9.23.26 AM Screen Shot 2013-12-05 at 9.24.22 AM Screen Shot 2013-12-05 at 9.25.23 AM SLA Plans Ticket Assignment 2 Ticket Filters tour-003 tour-004 Auto Responses Dept Transfer 2 Help Topics 2 Help Topics Internal Notes 2- change status

The post osTicket – Widely-used and trusted open source support ticket system appeared first on TOSDN.

]]>
http://www.tosdn.com/developer/php/osticket-widely-used-trusted-open-source-support-ticket-system/feed 0
Brick – Web Fonts that Actually Look Good http://www.tosdn.com/designer/brick-web-fonts http://www.tosdn.com/designer/brick-web-fonts#comments Wed, 02 Apr 2014 10:13:28 +0000 http://www.tosdn.com/?p=1617 Posted by few on Brick – Web Fonts that Actually Look Good

Web Font แจกฟรี เน้นสวยงามและเป็นระเบียบ จะโหลดมาติดตั้งใช้เองหรือจะใช้แบบ CDN เลยก็ได้ สะดวกดีครับ

The post Brick – Web Fonts that Actually Look Good appeared first on TOSDN.

]]>
Posted by few on Brick – Web Fonts that Actually Look Good

In the age of the Internet, we’ve found ourselves in yet another typographic battle. In an effort to speed up loading times, we’ve compressed fonts, and along the way, we’ve lost the majority of the quality of rendered type.

Let’s change that. The fonts served by Brick are clones of the original, converted without modification to WOFF format for high quality rendering and fast loading across all modern browsers.

  • Beautiful

    We don’t modify or subset the font in any way, so they are rendered the way they were meant to be seen.

  • Fast

    Fonts are served throughFastly’s industry-leading CDN network throughout and supported by Linode’s reliable infrastructure.

  • Open source

    Brick is entirely open-source, so in addition to being free, anyone interested can contribute to the project.

The post Brick – Web Fonts that Actually Look Good appeared first on TOSDN.

]]>
http://www.tosdn.com/designer/brick-web-fonts/feed 0