Categories
การพัฒนาซอฟท์แวร์

เปิด UML class diagram ใน IntelliJ

กด Ctrl+Alt+U เพื่อเปิด UML class diagram

Categories
การพัฒนาซอฟท์แวร์

รวมสไลด์จากงาน I/O Extended Bangkok (9 ก.ค. 2017)

เมื่อวันเสาร์ที่ผ่านมา (9 ก.ค. 2017) มีการจัดงาน I/O Extended Bangkok ที่ตลาดหลักทรัพย์แห่งประเทศไทย มีหัวข้อที่น่าสนใจหลายหัวข้อเลยครับ ผมรวบรวมสไลด์เท่าที่หาได้ สำหรับเพื่อน ๆ ที่ไม่ได้ไปร่วมงานหรือเพื่อน ๆ ที่ไปร่วมงานแล้วอยากได้ Reference จากในสไลด์ของ speaker แต่ละท่านเพื่อนำไปศึกษาเพิ่มเติม

What’s new in Firebase and Cloud Platform


Speaker : Jirawat Karanwittayakarn (GDE Firebase)

…..

What’s new in Android O

GitHub -> https://github.com/akexorcist/Android-O-Feature

Speaker : Somkiat Wongkitwattana (GDE Android)

…..

Unlock the power of web Components with Polymer

Speaker : Tanakrit Saisillapee

…..

Introduction to Kotlin

Speaker : Travis Subanaphong

…..

Building apps for the Google Assistant

Github -> https://github.com/thangman22/googleiobkk17-action-on-google

Speaker : Warat Wongmaneekit (GDE Web Technologies)

…..

Speeding up your Android Gradle builds

Speaker : Jirawat Karanwittayakarn (GDE Firebase)

…..

Introduction to Architecture Components

GitHub -> https://github.com/akexorcist/Android-ArchComponents

Speaker : Somkiat Wongkitwattana (GDE Android)

…..

Modern web The next era of web experience

Speaker : Warat Wongmaneekit (GDE Web Technologies)

Categories
iOS

[iOS] การทำให้ UITableView ไม่แสดง Separator สำหรับ Cell ที่ว่าง

ผมคิดว่าคนที่พัฒนาแอพ iOS คงจะเคยเจอปัญหาว่า UITableView จะแสดงเส้นคั่น (separator) สำหรับ cell ที่ว่างกันมาบ้าง ตามรูปนี้ครับ

บล็อกนี้ผมจะเสนอวิธีง่ายๆ ที่จะแก้ปัญหานี้ครับ

Swift

override func viewDidLoad() {
    super.viewDidLoad()
    self.tableView.tableFooterView = UIView()
}

Objective-C

- (void)viewDidLoad 
{
    [super viewDidLoad];

    // This will remove extra separators from tableview
    self.tableView.tableFooterView = [UIView new];
}

หรืออาจจะทำแบบนี้ก็ได้ครับ

self.tableView.tableFooterView = [[UIView alloc] initWithFrame:CGRectZero];

อ้างอิง stackoverflow

Categories
Git

การใช้ไฟล์ .gitignore กับโปรเจคเก่า ๆ

บางครั้งเรามีโปรเจคเก่าที่ใช้ Git อยู่แล้ว แต่เรา ignore ไฟล์ไม่ครบ อาจมีไฟล์ที่เราไม่ต้องการ ถูก track เข้าไปด้วย เช่น ไฟล์จาก OS หรือ ไฟล์จาก IDE เป็นต้น

เราสามารถแก้ไขได้ง่าย ๆ ด้วยคำสั่งเพียงไม่กี่คำสั่ง แต่ก่อนอื่นผมขอแนะนำสำหรับคนที่ไม่รู้ว่าจะ Ignore ไฟล์อะไรดี สามารถเข้าไปดูได้ที่ https://github.com/github/gitignore ซึ่งรวบรวมไฟล์และโฟลเดอร์ที่เราควร ignore ไว้ครบถ้วน (ผมแนะนำให้ดูในโฟล์เดอร์ Global ด้วย เพราะมีคำแนะนำการ ignore ไฟล์ของ IDE และ OS เพิ่มเติม)

สมมุติว่าผมเขียน Java ด้วย Eclipse บน macOS ผมจะสามารถสร้างไฟล์ .gitignore ได้ประมาณนี้

# General
*.DS_Store
.AppleDouble
.LSOverride

# Icon must end with two \r
Icon

# Thumbnails
._*

# Files that might appear in the root of a volume
.DocumentRevisions-V100
.fseventsd
.Spotlight-V100
.TemporaryItems
.Trashes
.VolumeIcon.icns
.com.apple.timemachine.donotpresent

# Directories potentially created on remote AFP share
.AppleDB
.AppleDesktop
Network Trash Folder
Temporary Items
.apdisk

#Eclipse
.metadata
bin/
tmp/
*.tmp
*.bak
*.swp
*~.nib
local.properties
.settings/
.loadpath
.recommenders

# External tool builders
.externalToolBuilders/

# Locally stored "Eclipse launch configurations"
*.launch

# PyDev specific (Python IDE for Eclipse)
*.pydevproject

# CDT-specific (C/C++ Development Tooling)
.cproject

# Java annotation processor (APT)
.factorypath

# PDT-specific (PHP Development Tools)
.buildpath

# sbteclipse plugin
.target

# Tern plugin
.tern-project

# TeXlipse plugin
.texlipse

# STS (Spring Tool Suite)
.springBeans

# Code Recommenders
.recommenders/

# Scala IDE specific (Scala & Java development for Eclipse)
.cache-main
.scala_dependencies
.worksheet

#Java
# Compiled class file
*.class

# Log file
*.log

# BlueJ files
*.ctxt

# Mobile Tools for Java (J2ME)
.mtj.tmp/

# Package Files #
*.jar
*.war
*.ear
*.zip
*.tar.gz
*.rar

# virtual machine crash logs, see http://www.java.com/en/download/help/error_hotspot.xml
hs_err_pid*

เมื่อสร้างไฟล์ .gitignore ก่อนที่จะทำขั้นตอนต่อไปให้ทำการ commit การเปลี่ยนแปลงทั้งหมดก่อน

แล้วใช้คำสั่งนี้เพื่อเคลียร์ index ของ git

$ git rm -r --cached .

แล้วใช้คำสั่ง

$ git add .

และ commit

$ git commit -m ".gitignore is now working"

เพียงเท่านี้เราก็สามารถ ignore ไฟล์และโฟลเดอร์ที่เราไม่ต้องการได้แล้วครับ

Categories
Git

การใช้งาน Git Submodules

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

การเพิ่ม Submodules เข้ามาใน Git Repository

ใช้คำสั่งดังนี้

$ git submodule add https://github.com/golfz/module1 lib/module1
Initialized empty Git repository in ~/a_project/lib/module1/.git/
remote: Counting objects: 1006, done.

remote: Compressing objects: 100% (978/978), done.

remote: Total 1006 (delta 631), reused 0 (delta 0)

Receiving objects: 100% (1006/1006), 408.22 KiB, done.

Resolving deltas: 100% (631/631), done.

แต่ละส่วนของคำสั่งมีรายละเอียดดังนี้

git submodule add เป็นคำสั่ง git เพื่อเพิ่ม Submodules

https://github.com/golfz/module1 คือ git repository ภายนอกที่เราต้องการเพิ่มเข้ามาเป็น submodule ซึ่งคุณต้องมั่นใจว่าคุณมีสิทธิ clone repository นี้

lib/module1 คือ path ของ submodules ใน repository หลัก

ลองตรวจสอบ repository ดูด้วย git status
$ git status
# On branch master
# Changes to be committed:

# (use "git reset HEAD <file>..." to unstage)

#

# new file: .gitmodules

# new file: lib/module1

#

ถ้าเราลองตรวจสอบ .gitmodules ที่เพิ่มเข้ามาใหม่ จะพบข้อมูลดังนี้

$ cat .gitmodules
[submodule "lib/module1"]
path = lib/module1

url = https://github.com/golfz/module1

การใช้งาน Submodules

ถ้าเราเพิ่ม clone repository ลงมา เราจะพบว่าโฟลเดอร์ที่เป็น submodule จะว่างเปล่า ดังนั้นเราต้อง initial submodules ก่อน ดังนี้

$ git submodule init
Submodule 'lib/module1' (https://github.com/golfz/module1) registered for path 'lib/module1'

ขั้นตอนต่อไปเราจำเป็นต้อง pull files ลงมา

$ git submodule update
Initialized empty Git repository in ~/a_project/lib/module1/.git/
remote: Counting objects: 26, done.

remote: Compressing objects: 100% (22/22), done.

remote: Total 26 (delta 5), reused 0 (delta 0)

Receiving objects: 100% (26/26), 17.37 KiB, done.

Resolving deltas: 100% (5/5), done.

Submodule path 'lib/module1': checked out '1c407cb2315z0847facb57d79d680f88ca004332'

ตอนนี้ถ้าเราเข้าไปดูใน lib/module1 เราจะพบว่ามีไฟล์อยู่อย่างถูกต้องแล้ว

การลบ Submodules

ขั้นตอนในการลบ Submodules จะมีความซับซ้อนเล็กน้อย ดังนี้

1. เข้าไปลบข้อมูล submodules ในไฟล์ .gitmodules ให้ลบข้อมูลออกไปดังนี้
[submodule "lib/module1"]
path = lib/module1
url = https://github.com/golfz/module1

2. เข้าไปลบข้อมูล submodule entry ในไฟล์ .git/config ขั้นตอนนี้ไม่จำเป็นต้องทำก็ได้ แต่เพื่อป้องกันปัญหาในอนาคตหากเราใช้คำสั่ง “git submodule init” ผมแนะนำว่าทำก็ดีครับ โดยให้ลบข้อมูลออกไปดังนี้
[submodule "lib/module1"]
url = https://github.com/golfz/module1

3. ลบ path ของ Submodules ด้วยคำสั่ง
$ git rm --cached lib/module1
rm 'lib/module1'

การอัพเดต Submodules

นี่เป็นอย่างหนึ่งที่เราจะค่อนข้างสับสนเมื่อใช้งาน Submodules เพราะเมื่อเราเพิ่ม submodules เข้ามา เราจะได้รับ commit ล่าสุดของ repository ของ submodule นั้น

หากหลังจากนั้น Repository ของ submodule มีการอัพเดตแล้วเรา clone โปรเจคหลักไปที่อื่น แล้วใช้คำสั่ง

$ git submodule init

ต่อด้วย

$ git submodule update

เราจะพบว่าเราจะไม่ได้โค้ดล่าสุดของ submodule ซึ่งมักสร้างความสับสนอยู่บ่อยครั้ง

แต่หากคิดดูดี ๆ ก็จะพบว่ากลไกนี้มีความเหมาะสมแล้ว เนื่องจาก code ใน repository หลักของเราได้ถูกทดสอบกับ submodules เวอร์ชั่นใด เมื่อ clone repository หลักไปใช้ก็ควรได้ submodule เวอร์ชั่นเดิมที่เคยทดสอบแล้ว ไม่ใช่เวอร์ชั่นใหม่ล่าสุดที่เราไม่เคยทดสอบ

แต่หากเราต้องการ repository ของ submodule ใหม่ล่าสุด สามารถทำได้ดังนี้

1. เข้าไปที่โฟลเดอร์ของ submodule

$ cd lib/module1

2. checkout ไปที่ master

$ git checkout master
Previous HEAD position was b8ff8f6... re-ordering
Switched to branch 'master'

Your branch is behind 'origin/master' by 8 commits, and can be fast-forwarded.

3. ดึงอัพเดตล่าสุดลงมา

$ git pull
remote: Counting objects: 31, done.
remote: Compressing objects: 100% (24/24), done.

remote: Total 24 (delta 15), reused 0 (delta 0)

Unpacking objects: 100% (24/24), done.

From https://github.com/golfz/module1

b8ff8f6..5cab93f master -> origin/master

* [new tag] 1.2.28 -> 1.2.28

From https://github.com/golfz/module1

* [new tag] 1.2.26 -> 1.2.26

* [new tag] 1.2.27 -> 1.2.27

Updating c547e0d..5cab93f

Fast-forward

index.php | 109 ++++++++++++++-

css/admin.css | 26 ++++

js/admin.js | 17 +++

3 files changed, 51 insertions(+), 4 deletions(-)

create mode 100644 css/admin.css

create mode 100644 js/admin.js

4. กลับไปที่ repository หลัก แล้ว

$ git add lib/module1
$ git status
# On branch master
# Changes to be committed:

# (use "git reset HEAD ..." to unstage)

#

# modified: lib/module1

#

Categories
Android iOS Mobile

สรุปการใช้งาน Cordova (PhoneGap)

Cordova จะทำงานร่วมกับ SDK ของ Mobile แต่ละ Platform ดังนั้นก่อนติดตั้ง Cordova ต้องติดตั้ง SDK ของแต่ละ Platform ก่อน

 

การติดตั้งบน Windows

  1. Java JDK  เวอร์ชั่น 6 ขึ้นไป ทดลองคำสั่ง java -version
  2. Android Studio http://developer.android.com/sdk
  3. ติดตั้ง Node.Js ดาวน์โหลดได้จาก http://nodejs.org
    • เมื่อติดตั้งเสร็จแล้วทดลองด้วยคำสั่ง npm -v ถ้าใช้ไม่ได้ลองรีบูทเครื่อง
  4. ติดตั้ง Git ดาวน์โหลดจาก http://git-scm.com เสร็จแล้วกำหนด PATH ไปที่ไดเรกทอรี่ bin ของ Git ด้วย แล้วทดลองคำสั่ง git –version
  5. ติดตั้ง Apache Ant ดาวน์โหลด zip ได้ที่ http://ant.apache.org/
    • แล้วคลาย zip ไปที่โฟลเดอร์ใดก็ได้
    • เพิ่ม ANT_HOME ให้ชี้ไปที่พาทของ Ant เช่น C:\ant\Apache-ant-x.x.x
    • เพิ่มโฟลเดอร์ bin ของ Ant ไปที่ PATH
    • ทดลองคำสั่ง ant -version
  6. ติดตั้ง Cordova โดยพิมพ์คำสั่ง npm install -g cordova
    • แล้วลองคำสั่ง cordova -v

 

ติดตั้งบน Mac

  1. Java JDK  เวอร์ชั่น 6 ขึ้นไป ทดลองคำสั่ง java -version
  2. Android Studio http://developer.android.com/sdk
  3. ติดตั้ง Node.Js ดาวน์โหลดได้จาก http://nodejs.org
    • เมื่อติดตั้งเสร็จแล้วทดลองด้วยคำสั่ง npm -v
  4. ติดตั้ง Git ดาวน์โหลดจาก http://git-scm.com แล้วทดลองคำสั่ง git –version
  5. ติดตั้ง Apache Ant
    • ใช้คำสั่ง brew install ant ถ้าหากไม่มีคำสั่ง brew ให้ติดตั้ง Homebrew ด้วยคำสั่ง
    • ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”ทดลองคำสั่ง ant -version
  6. ติดตั้ง Cordova โดยพิมพ์คำสั่ง npm install -g cordova
    • แล้วลองคำสั่ง cordova -v
  7. ติดตั้ง Xcode
  8. ติดตั้ง ios-sim ด้วยคำสั่ง sudo npm install ios-sim -g
  9. ติดตั้ง ios-deploy ด้วยคำสั่ง sudo npm install -g ios-deploy
    • ทดลองรัน iOS Simulator โดยเรียก
      • ios-sim –version
      • ios-sim start
      • ios-sim start –retina –tall

 

การสร้าง App เบื้องต้น

  1. สร้างโปรเจคใหม่
    cordova -d create ชื่อโฟลเดอร์แอพ ชื่อแพคเกจ ชื่อแอพ
  2. เพิ่ม platform
    cordova platform add ios
    cordova platform add android
    หรือ
    cordova platform add ios android

    • ถ้าต้องการดู platform ที่เพิ่มเข้ามาแล้ว
      cordova platform ls
    • ถ้าต้องการลบ platform
      cordova platform remove android
  3. การสั่ง Build
    cordova build
    หรือ
    cordova build android
    cordova build ios
  4. การสั่ง Run บน Simulator
    cordova emulate android
    หรือ
    cordova emulate ios
  5. การสั่ง Run บนมือถือจริง (ถ้า Windows ต้องติดตั้ง driver ก่อน, แต่ Mac OS X สามารถเสียบอุปกรณ์ได้เลย)
    cordova run android
    หรือ
    cordova run ios
Categories
Android Mobile

Android App Development for Beginners Playlist

Categories
การพัฒนาซอฟท์แวร์

หลักการเขียนโปรแกรม 50 ข้อ

บางข้อเก่าไปแล้ว แต่หลายข้อยังใช้ได้

1.โปรแกรมแบบพอเพียง(ทำอะไรให้เล็กที่สุดเท่าที่เป็น ไปได้)

2.ทำสิ่งธรรมดาให้ง่าย ทำสิ่งยากให้เป็นไปได้

3.จงโปรแกรมโดยนึกว่าจะมีคนมาทำต่ออย่างแน่นอน

4.ระเบียบ กฏข้อบังคับ เชื่อมั่นไม่ได้แล้ว ถ้ามีเพียงหนึ่งโมดูลไม่ปฏิบัติตาม

5.ตัดสินใจให้ดีระหว่างความชัดเจน(clearance) กับ การขยายได้(extensibility)

6.อย่าเชื่อมั่น output จากโมดูลอื่น ถึงแม้เราจะเป็นคนเขียนเอง

7.ถ้าคนเขียนยังเข้าใจได้ยาก แล้วคนอ่านจะเข้าใจได้ยากกว่าแค่ไหน

8.ค้นหาข้อมูลสามวันแล้วทำหนึ่งวัน หรือจะทำสามวันแล้วแก้บั๊กตลอดไป

9.จงสร้างเครื่องมือ ก่อนทำงาน

10.อย่าโทษโมดูลอื่นก่อน โดยเฉพาะถ้าโมดูลอื่นเป็น OS และ Compiler

11.พยายามทำตามกฏ แต่ถ้ามีข้อยกเว้น ต้องมีอย่างหลีกเลี่ยงไม่ได้ แล้วประกาศและตะโกนให้ดังที่สุด

12.High cohesion Loose coupling. (ยึดเกาะให้สูงสุดในโมดูล และ เกาะเกี่ยวกับโมดูลอื่นให้น้อยที่สุด)

13.ให้สิ่งที่เกี่ยวข้องกันยิ่งมากอยู่ไกล้กันมากที่ สุด

14.อย่าเชื่อโดยไม่พิสูจน์

15.อย่าลองทำแล้วคอมไพล์ดู ถ้าเราไม่ได้คาดหวังผลลัพธ์อะไรไว้ (อย่างเช่นปัญหา index off by one)

16.จงกระจายความรู้เพราะนั่นคือการทำ Unit Test ระดับล่างสุด(ระดับความคิด)

17.อย่าเอาทุกอย่างใส่ใน UI เพราะ UI คือส่วนที่ Unit Test ได้ยาก

18.ทั้งโปรเจ็คต์ควรไปในทางเดียวกันมากที่สุด( Consistency )

19.ถ้ามีสิ่งที่ดีอยู่แล้วจงใช้มัน อย่าเขียนเอง ถ้าจำเป็นต้องเขียนเอง ให้ศึกษาจากข้อผิดพลาดในอดีตก่อน

20.อย่ามั่นใจเอาโค้ดไปใช้จนกว่าจะ test อย่างเพียงพอ

21.เอาโค้ดที่ test ไว้ที่เดียวกันกับโค้ดที่ถูก test เสมอ

22.ทุกครั้งที่แก้ไขโค้ดให้ run unit test ทุกครั้ง

23.จงใช้ Unit Test แต่อย่าเชื่อมั่นทุกอย่างใน Unit Test เพราะ Unit Test ก็ผิดได้

24.ถ้าต้องทำอะไรที่ซ้ำกันมากกว่าหนึ่งครั้ง ก็เพียงพอแล้วที่จะแยกโค้ดส่วนนั้นออก

25.ทำให้ใช้งานได้ก่อน แล้วค่อย optimize และถ้าไม่จำเป็น อย่าoptimize

26.ยิ่งประสิทธิภาพเพิ่ม ความเข้าใจง่ายจะลดลง

27.ใช้ Design Pattern ที่เป็นที่รู้จักจะได้คุยกับใครได้รู้เรื่อง

28.อย่าเก็บไว้ทำทีหลัง ถ้ายังไงก็ต้องทำ

29.MutiThreading ไม่ใช่แค่การเพิ่มประสิทธิภาพ แต่มันมาพร้อมกับ Concerency, Deadlock, IsolationLevel, Hard to debug, Undeterministic Errors.

30.จงทำอย่างโจ่งแจ้ง

31.อย่าเพิ่ม technology โดยไม่จำเป็น เพราะนั่นทำให้โปรแกรมเมอร์ต้องวุ่นวายมากขึ้น

32.จงทำโปรเจ็คต์ โดยคิดว่าความเปลี่ยนแปลงเกิดขึ้นได้เสมอ

33.อย่าย่อชื่อตัวแปรถ้าไม่จำเป็น เดี๋ยวนี้ IDE มันช่วยขึ้นเยอะแล้วไม่ต้องพิมพ์เองแค่ dot มันก็ขึ้นมาให้เลือก

34.อย่าใช้ i, j , k , result, index , name, param เป็นชื่อตัวแปร

35.ทำโค้ดที่ต้องสื่อสารผ่านเครือข่ายให้คุยกันน้อยท ี่สุด

36.แบ่งแยกดีดี ระหว่าง Exception message ในแต่ละเลเยอร์ ว่าต้องการบอกผู้ใช้ หรือ บอกโปรแกรมเมอร์

37.ที่ระดับ UI ต้องมี catch all exception เสมอเพื่อกรอง Exception ที่ลืมดักจับ

38.ระวัง คอลัมภ์ allow null ใน database ดีดี ค่า มัน convert ไม่ได้

39. อย่าลืมว่า Database เป็น global variable ประเภทหนึ่ง แต่ละโปรแกรมที่ติดต่อเปรียบเหมือน MultiThreading ดังนั้นกฏของ Multithreading ต้องกระทำเมื่อทำงานกับ Database

40.ระวังอย่าให้ logic if then else ซ้อนกันมากมาก เพราะสมองคนไม่ใช่ CPU จินตนาการไม่ออกหรอกว่ามันอยู่ตรงไหนเวลา Debug (ถ้ามากกว่าสามชั้นก็ลองคิดใหม่ดูว่าเขียนแบบอื่นได้ มั้ย)

41.ระวังอย่าให้ลูปซ้อนกันมากมาก ไม่ใช่แค่เรื่องความเร็วอย่างเดียว เวลา Debug เราคิดตามมันไม่ได้ (ถ้าเกินสามชั้นก็ไม่ไหวแล้ว)

42. อย่าใช้ Magic Number ใน Code เช่น if( controlingValue == 4 ) เปลี่ยนไปใช้ Enum ดีกว่า เป็น if( controlingValue == ControllingState.NORMAL ) เข้าใจง่ายกว่ามั้ย

43.ถ้าจะเปรียบเทียบ string Trim ซ้ายขวาก่อนเสมอ

44.คิดหลายๆ ครั้งก่อนใช้ Trigger

45.โปรแกรมเมอร์คือห่วงโซ่สุดท้ายของมลพิษทางความซับ ซ้อน ดังนั้นหา project leader ดีดีแล้วกัน

46. มนุษย์ฉลาดกว่าคอมพิวเตอร์ การเขียนโปรแกรมก็คือการสอนให้คอมพิวเตอร์ฉลาดได้เหม ือนเรา (มนุษย์ฉลาดกว่าคอมพิวเตอร์จริงๆนะ) Reply With Quote

47. จงควบคุมคอม มิใช่ให้คอมควบคุมเรา เราต้องสั่งให้คอมทำงาน ไม่ใช่ให้เราทำงานตามคอมสั่ง

48. อย่าปล่อยให้ข้อจำกัดของคอม มาจำกัดความคิดของเรา [คอมไม่ดีเปลี่ยนเครื่องเลย 55+]

49. ยอมรับความคิดของผู้อื่น แต่อย่าออกจากกรอบของตนเอง

50. หมั่น Save โปรแกรมไว้อย่าสม่ำเสมอ ก่อนที่จะไม่มีโอกาส Save [จะให้ดี Save เป็นแต่ละ Version เลย] [ ใช้ Version Control System สิ ]

ที่มา: https://www.blognone.com/node/2286

Categories
Web site

Resources, Tools และ Plugins สำหรับคนทำเว็บ

CSS tools and resources
img
CSShake
Some CSS classes to move your DOM! Impressive effects with minimum of effort.
img
Magic animations
CSS3 Animations with special effects. Just include the CSS style: magic.css or include the mynified version: magic.min.css
img
Hover.css
A collection of CSS3 powered hover effects to be applied to links, buttons, logos, SVG, featured images and so on.
img
typebase.css
Typebase.css is a minimal, customizable typography stylesheet.
img
Materialize
A modern responsive front-end framework based on Material Design
img
Material UI
A CSS Framework and a Set of React Components that Implement Google’s Material Design
img
CSS Shrink
A CSS minifier built because CSS is on the critical path to rendering pages. It must be small! Or else!
img
Power To CSS
A well designed CSS framework, based on the principles of SMACSS and DRY.
img
Flexbox Grid
A grid system based on the flex display property. A neat grid system that you can start using today.
jQuery plugins
img
pagePiling.js
pagePiling plugin by Alvaro Trigo. Create a scrolling pile of sections.
img
fullPage.js
A simple and easy to use plugin to create fullscreen scrolling websites.
img
Animsition
A simple and easy jQuery plugin for CSS animated page transitions.
img
Flickerplate 
A cool jQuery plugin that lets you flick through content.This plugin is included within Webplate .
img
ScrollMe
A jQuery plugin for adding simple scrolling effects to web pages
img
Slidebars
Slidebars is a jQuery plugin for quickly and easily implementing app style off-canvas menus and sidebars into your website.
img
Magneticmediajs
A JavaScript and CSS solution to display media content in a stylish mobile-ready overlay fashion.
img
SVGMagic
A jQuery plugin that searches for SVG images on your website and creates PNG versions if the browser doesn’t support SVG.
img
Simple jQuery CSS3 slider
A simple slider that does what a simple slider has to do: slide slides!
CSS experiments
img
Pull Menu
Menu Interaction Concept. Just pull down and release to jump between pages.
img
Responsive Mail UI
t’s responsive until pretty darn small but i haven’t actually tested it on mobile devices.
img
Blurred Background CSS
Create blurred version of the background, and set the background property both of them to be cover sized and fixed.
img
Apple zoom out effect
Interesting effect that Apple used for a presentation of a product that designers managed to recreate.
img
CSS-only Weather App Concept
Dribbble rework of an original shot by Sergey Valiukh. Impressive at least.
img
Firewatch Parallax in CSS
The parallax header on the Firewatch website in CSS. It was originally meant as a daft experiment.
UI kits
img
Bootstrap 3 Vector UI Kit
This UI Kit contains all Twitter Bootstrap 3 UI controls in vector format,
img
Summer UI Kit 
Summer is a UI kit for designers and web developers that can be downloaded for free.
img
Sally Blocks
PSD blocks and elements for fast and simple creating of responsive websites.
img
Flat UI Kit
Nice and modern UI kit that will surely be of use for you. Download and use it.
img
Awesome UI Kit
Useful UI kit with few but interesting design elements, just good to make quick designs.
img
Free Flat UI Kit
Free .sketch UI kit for those who use Sketch App and want an UI kit in their toolkit.
Icons
img
Themify Icons
Themify Icons is a complete set of icons for use in web design and apps, consisting of 320+ icons.
img
Linea
A free outline iconset featuring 730+ Icons. Coded and designed by Dario Ferrando.
img
OPEN ICONIC
An open source icon set with 223 marks in SVG, webfont and raster formats
img
Touch Icon Set
A free collection of 340 touch icons designed at 24 x 24 pixels and scaled up for retina.
img
Icon Works
The icon pack TTF, EOT, WOFF, and SVG font files that are ready for you to use in your web projects.
img
150 outlined icons
A simple but useful icon set, completely free now and ever. Icons available in PSD, AI, SVG, Webfont format.
Categories
Android iOS Mobile Startup

เรียนรู้การสร้าง Mobile application จาก Facebook

มาลองดูแนวทางการพัฒนา Mobile App จากทีมงานของ facebook กันหน่อย

ที่มา http://www.somkiat.cc/how-facebook-make-mobile-app/

ในงาน @Scale Conference
ทีมพัฒนา Mobile application ของ Facebook ได้มาพูดเกี่ยวกับ
การพัฒนาระบบเพื่อให้สามารถทำงานได้บนมือถือและ network ต่างๆ ทั่วโลกได้

มาดูกันว่าทีมพัฒนาของ Facebook ทำการพัฒนา สร้าง product กันอย่างไร
เพื่อรองรับการใช้งานจากคนทั้งโลกกันอย่างไร

สิ่งที่ทางทีมพัฒนาชี้ประเด็นคือ

เรื่องความเร็ว network ของมือถือ
ซึ่งเป็นปัญหาแรกๆ ที่พบเจอ โดยสรุปได้ว่า

  • ในประเทศสหรัฐอเมริกา นั้นความเร็วของเครื่องข่าย 3G ใช้เวลาในการรับส่งข้อมูลต่อครั้ง 280 milisecond
  • ในประเทศอินเดีย นั้นความเร็วของเครื่องข่าย 3G ใช้เวลาในการรับส่งข้อมูลต่อครั้ง 500 milisecond
  • ในประเทศบราซิล นั้นความเร็วของเครื่องข่าย 3G ใช้เวลาในการรับส่งข้อมูลต่อครั้ง 800 milisecond

โดยทีมพัฒนาที่ทำการวิจัยสามารถสรุปกลุ่มผู้ใช้งาน facebook ไว้ง่ายๆ ว่า

Not everyone is on a fast
Not everyone has a large screen
Not everyone is on a fast network

ดังนั้น สิ่งที่ทางทีมพัฒนาจะเน้นเป็นพิเศษ คือ เรื่องปัญหาของ network

สิ่งที่ต้องจัดการประกอบไปด้วย 3 เรื่องคือ

  1. ขนาดของรูป ที่ต้องทำการ download ผ่าน network
  2. การตรวจสอบคุณภาพของ network ก่อนเลือกวิธีการทำงานให้เหมาะสม
  3. การแอบดึงข้อมูลบางส่วนมาก่อน

1. การลดขนาดของรูป

รูปแบบที่ใช้สำหรับรูปภาพคือ WebP
ซึ่งสร้างด้วยทีมของ Google ในปี 2010

จากข้อมูลของการใช้งาน Facebook for Android นั้นพบว่า 85% คือรูปภาพ
และ Facebook messenger นั้นพบว่า 67% คือรูปภาพ
ดังนั้น ถ้าสามารถลดขนาดของรูปภาพได้
ก็จะทำให้ application ทำงานได้เร็วขึ้น

ดังนั้นสิ่งที่ทีมพัฒนาต้องทำมีดังนี้

สิ่งแรกคือ การส่งข้อมูลที่เหมาะสมมาให้ผู้ใช้งาน
หมายความว่า จะทำการตรวจสอบก่อนว่าผู้ใช้งานนั้นเป็นอย่างไร
เช่นมีความเร็วของ network ความสามารถของมือถือ หรือ tablet และ ขนาดของหน้าจอ เป็นต้น
ทำให้ server สามารถเลือกข้อมูลที่เหมาะสมได้ เช่น ขนาดของภาพ
จะได้ไม่เปลือง bandwidth และ เปลืองเวลาในการรอของผู้ใช้งาน

แต่ในปัจจุบันเรื่องขนาดหน้าจอที่ใหญ่ และ ละเอียดขึ้น
ส่งผลให้ต้องส่งรูปภาพที่ละเอียด และ ขนาดใหญ่ขึ้น
ซึ่งวิธีการนี้อาจจะไม่ค่อยมีประสิทธิภาพเท่าไรนัก
แต่โดยรวมแล้วถือว่าคุ้มกับการลงมือทำ

สิ่งต่อมาคือ การเปลี่ยนรูปแบบของรูปภาพมาอยู่ในรูปแบบ WebP
ซึ่งสามารถลดขนาดของภาพ JPEG ลงไปได้ 7% เมื่อต้องการคุณภาพเท่ากัน
แต่ถ้าทำการเปลี่ยนแปลงค่าต่างๆ เช่นคุณภาพ สามารถลดขนาดภาพลงไปมากกว่า 30%
สามารถลดขนาดภาพลงไปมากกว่า 80% ของรูป PNG
เป็นการปรับปรุงที่ได้ผลดีมากมาย

สำหรับใน Android เวอร์ชั่นเก่าๆ ที่ไม่สนับสนุน WebP นั้น
ใช้วิธีการส่งข้อมูลเป็น WebP แต่ในการแสดงผลยังเป็น JPEG อยู่

2. การตรวจสอบคุณภาพของ Network

สิ่งหนึ่งที่ทางทีมพัฒนาได้เรียนรู้ก็คือ อย่าตัดสินเรื่องความเร็วของ Network ต่างๆ
ตาม technology เช่น 2G, 3G, LTE และ WIFI เป็นต้น
เพราะว่า แต่ละประเทศมันมีความเร็วที่แตกต่างกันมากพอสมควร

ดังนั้น สิ่งที่นำมาใช้ในการตัดสินใจก็คือ
การวัดจากความเร็วจากผู้ใช้งานที่เกิดขึ้นจริงๆ ณ ขณะนั้น

โดยจะวัดจากความเร็วของ network ที่ใช้งานตอนนั้น
ซึ่งทุกๆ response ที่ส่งกลับมาจาก server ของ Facebook
จะมี RTT (Round Trip Time) มาให้เสมอ เพื่อใช้ประมาณเวลาการรับส่งข้อมูล
และการตัดสินใจว่าจะส่งข้อมูลมาให้ด้วยคุณภาพสูงหรือต่ำเพียงใด
แบ่งออกเป็น 4 ระดับคือ

  1. Poor มีความเร็วน้อยกว่า 150kbps
  2. Moderate มีความเร็วระหว่าง 150-600kbps
  3. Good มีความเร็วระหว่า 600-2000kbps
  4. Excellent มีความเร็วมากกว่า 2000kbps ขึ้นไป

เมื่อรู้คุณภาพของ network แล้ว สิ่งที่จะต่อไปที่ต้องทำก็คือ

  • การเพิ่มหรือลดคุณภาพของข้อมูล
  • การส่งข้อมูลแบบขนานหรือไม่
  • การเปิดและปิด Auto play ของ VDO
  • การแอบดึงข้อมูลบางอย่างมาก่อน

ในการทดสอบนั้น ทีมพัฒนาได้สร้างระบบภายในที่เรียกว่า  Air Traffic Control ขึ้นมา
เพื่อจำลองรูปแบบต่างๆ ของ network
ทำให้เจอปัญหาที่ไม่คาดคิด บนระบบ network ที่ช้าได้อย่างรวดเร็ว
ซึ่งทำให้แก้ไขได้อย่างรวดเร็ว

3. การดึงข้อมูลบางส่วนมาไว้ก่อน (Prefetch content)

เนื่องจากปัญหาความเร็วของ Network ดังนั้นระบบอาจจะต้องทำการดึงข้อมูลบางอย่าง
ที่ยังไม่ถูกใช้งานมาเก็บไว้ก่อน ซึ่งข้อมูลเหล่านี้จำเป็นต่อการทำงาน

ยิ่งถ้า network ที่ช้าๆ แล้วจะพบว่า จะทำการดึงข้อมูลมาไม่ทัน
เช่นดึงข้อมูลมาไม่ได้ แล้ว ผู้ใช้งานจะพบเจอกับรูปภาพหน้าขาวขึ้นมา (ผมเจอประจำเลย)

โดยการดึงข้อมูลมาก่อนนั้น สามารถทำได้ตั้งแต่ตอนเปิด application ขึ้นมาใช้งาน
หรือทำในขณะที่กำลังใช้งานก็ได้

แต่สิ่งที่ต้องคำนึง คือ การดึงข้อมูลต้องไม่ไปทำให้ผู้ใช้งานสะดุด
หรือ block การใช้งานของผู้ใช้งานโดยเด็ดขาด
นั่นคือต้องแยกการทำงานระหว่าง foreground process และ background process ออกจากกัน
รวมทั้งไม่ดึงข้อมูลที่ผู้ใช้งานไม่จำเป็นมาด้วย

และสิ่งสำคัญสุดๆ ก็คือ
ต้องมีระบบ monitoring สำหรับดูว่าผู้ใช้งานแต่ละคนหรือแต่ละเครื่อง
ไม่ทำการดึงข้อมูลมาไว้ก่อนมากจนเกินไป ไม่เช่นนั้นจะเปลือง bandwidth การใช้งานมากๆ

ปิดท้าย

ทีมพัฒนานายังบอกด้วยว่า Facebook application for Android นั้นมีไฟล์ APK มากกว่า 20 ไฟล์
ซึ่งแยกตาม API Level, ขนาดของหน้าจอ และ สถาปัตยกรรมของ CPU อีกด้วย
มันไม่ใช่เรื่องที่ง่าย หรือ เล่นๆ เลยนะ

ดังนั้นลองนำแนวคิดเหล่านี้ ไปใช้เพื่อปรับปรุง Mobile application กันได้
น่าจะมีประโยชน์ไม่มากก็น้อยครับ

Reference VDO