วันอังคารที่ 23 มิถุนายน พ.ศ. 2558

Legacy CSS

เอาไงดีนะตอนนี้ซื้อ Theme  มาแล้ว แต่ก็อยากจะเปลี่ยนรูปร่างหน้าตาบางอย่างใน Theme เราในมันสวยงามตามที่เราหรือลูกค้าอยากได้จะทำไง

ส่วนใหญ่ที่เจอมาเรามันจะหยิบ Class ใน Css ของ Theme ออกมา Overide มันซะ ฮ่าๆ (หัวเราะดังมาก)
พอทำไปนานๆ มันก็จะบวมๆ บางทีอาจจะไม่เห็นภาพ ยกตัวอย่างเช่น

เรื่องสมมติ

บางคน(บางคนนะ บางคน) ใช้ Bootstrap เป็น Template  เวปไซท์แต่ลูกค้าบอกว่า อยากเปลี่ยน Design ของ popover เราก็จะ overide class popover ลงไปตรงๆ เลย WORK FINE!! มันก็โอเคนะไม่เห็นจะเป็นอะไรเลย พอทำไปนานๆ ลูกค้าบอกว่า ในหน้านี้ขอ popover อีกแบบนึง(เอาด่วน) คราวนี้ทำไงล่ะ ก็เอา id  มาผูกกับ popover นั้น 

#page2 .popover { }

มันก็ใช้นี่ WORK FINE !! (ฮ่าๆๆๆๆๆ) แล้วเราก็จะทำแบบนี้ไปเรื่อยๆ จนอ่าว popover เยอะไปหมดเลย ผูกกับอันนั้นอันนี้ไปหมดเลย บางครั้งลูกค้าก็ต้องปรับแก้ดีไซน์ เราก็ต้องกับไปแก้แต่ละอัน อีกนึงที่เสียไปคือ เราจะเสีย popover ของ template เก่าไปเลย เพราะเรา override ไปแล้ว

ทำไงดี?


อย่า Override ครับใช้การเพิ่ม feature หรือ Modified ของเราเข้าไป ถ้าคิดไม่ออกตั้งชื่อไงก็ไปอ่านเรื่อง BEM นะครับ ในโพสเก่าผมได้ครับ


ปล. อย่า !important  ใน CSS file ของเรานะครับ


วันเสาร์ที่ 6 มิถุนายน พ.ศ. 2558

ตั้งชื่อ Class อะไรดี

ตั้งชื่อ Class อะไรดี


เป็นคำถามแรกเมื่อเราสร้าง HTML Element ขึ้นมาแล้วอยากจะเขียน CSS กำกับ Element นั้น แล้วมันจะชื่ออะไรดีน้า ตั้งแบบนั้นก็ไม่สื่อแหะ จะตั้งอีกอย่างก็ เห้ย มันไปใช้กับ Element อื่นไม่ได้ แล้วก็นั่งคิดหลายนาที สุดท้ายลงเอยกับชื่ออะไรก็ไม่รู้ ที่เราบอกว่าโอเคละ ใช้ได้ แต่พอนานไปไอ้สิ่งที่ใช้ได้กับมัน เราก็งงว่ามันคืออะไร

มาใช้ BEM กัน


BEM คือ อะไร BEM วิธีการอย่างนึ่งในการตั้งชื่อ Class HTML และ CSS ถูกพัฒนาขึ้นโดยทีมที่ Yandex (ผมไม่รู้จักทีมนี้แหะ) จุดประสงค์ก็อยากให้คนอ่าน HTML และ CSS รู้เรื่อง เข้าใจว่า CSS นี้คืออะไรทำให้ใน HTML ได้

มาเริ่ม BEM กัน BEM ย่อมาจาก Block, Element, Modifier 

Block คือ Component นั่นแหละ ยกตัวอย่างเข่า .btn {}, .table{}, .nav{} เป็นต้น
Element คือ เป็น level ต่ำกว่า Block หรือ จักว่าเป็น ลูกก็ได้ เช่น .btn__price{}

<a class=“btn” href=“#”>
<span class=“btn__price”>1,000</span>
<span class=“btn__currency”>Bath</span>
</a>
Modifier คือ เป็น level ที่ไว้ปรับเปลี่ยน style ของ Block อีกที เช่นความสูง เปลี่ยนสี เปลี่ยนอนิเมชั่น เช่น .btn--red{}, .btn--big, .btn--bounce

เช่น 

<a class=“btn btn—-red” href=“#”>
 <span class=“btn__price”>1,000</span>
 <span class=“btn__currency”>Bath</span>
</a>

<a class=“btn btn—-blue” href=“#”>
 <span class=“btn__price”>1,000</span>
 <span class=“btn__currency”>Bath</span>
</a>

ถ้าเรามาอ่าน html เราจะเข้าใจได้ทันทีว่า class นี้ทำอะไร มีความสัมพันธุ์แบบไหน แล้วเราก็ใช้กระบวนการคิดน้อยลงอีก


เอาเป็นว่าการตั้งชื่อ Class ไม่มีถูกไม่มีผิด แต่เราต้องรู้ว่าไอ้ Class ที่เราตั้งนั่นน่ะเอาไปใช้ทำอะไร กลับมาอ่านเข้าใจไหม ถ้าใครสนใจวิธีการ BEM นี้ลองดูครับ

วันศุกร์ที่ 27 มีนาคม พ.ศ. 2558

จะทนเจ็บกับมันไปทำไม รีบจัดการซิ จะได้หายเร็วๆ

เล็บขบ



ผมเจ็บเล็บนิ้วโป้งมานานมากเกือบจะครบหนึ่งสัปดาห์ ผมไม่ได้ใส่ใจความเจ็บที่มีอยู่ แต่รู้ว่ามันเจ็บ


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

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

เหตุการณ์นี้มันบอกผมได้อย่างนึง 

“ถ้าเราทนเจ็บ จนถึงที่สุดแล้วค่อยจัดการปัญหานั้น แม้ปัญหานั้นจะหายไปเราเองนี่แหละต้องใช้เวลารักษาเยียวยาตัวเองต่อไป”


ผมว่าถ้าเราทนกับปัญหา เรารู้ว่ามันเจ็บปวด แต่เราทนเพื่อบอกว่า 

“สักวันมันจะดีขึ้น” หรือ “ถ้ามันถึงที่สุดแล้วฉันจะจบมันเอง”

“แต่เราไม่เคยคิดว่าสุดท้ายเราต้องเยียวยาตัวเอง” 

ทั้งเจ็บ และเยียวยาตัวเองด้วยต่อไป


ถ้าเราเจอปัญหา ควรเข้าจัดการกับปัญหาให้เร็วที่สุด ให้เจ็บตัวน้อยที่สุดจะดีกว่าครับ

วันพฤหัสบดีที่ 18 ธันวาคม พ.ศ. 2557

อย่าเพิ่งคิด” แล้ว “ทำเลย Robot

สวัสดีครับ 

วันนี้ไม่ได้มาเขียนเกี่ยวกับการวาดรูปแต่อย่างใด.....ครับ

แต่วันนี้จะมาเขียนเกี่ยวกับ Automate Test หรือ Robot ซึ่งผมจะข้ามรายละเอียดเรื่องการเขียนไปก่อน

ผมจะเล่าพอเป็นพิธีก็แล้วกัน (ในความรู้อันน้อยนิดของผม ใครที่มีความรู้มากกว่าเห็นว่ามันไม่ถูกต้องอย่างไร ก็แนะนำเข้ามาได้ครับ)

Automate Test หรือ Robot คือเครื่องมือไว้ช่วยให้ Developer และ Business มาบรรจบกันได้ Robot บอกได้ถึงพฤติกรรมการทำงานของโปรแกรมที่เราเขียนซึ่งจะประกอบไปด้วย Test Case หรือเหตุการณ์ที่จะเกิดขึ้นจำลองมันออกมาให้เห็นเป็นภาษาที่คนทั่วไปเห็นก็อ่อ เข้าใจก็รายละเอียดผมว่า คงต้องหาอ่านต่อกันเองแล้วล่ะครับ

ในนี้มีเขียนไว้ http://www.somkiat.cc/ ลองเข้าไป Search หา keyword Robot ดูครับ

ที่ผมจะเล่าต่อคือ เวลาที่โปรแกรมเราใหญ่โตมโหฬาร ที่มีหลาย Function หลายๆ Module มันก็ทำให้เกิด Test Case ใน Robot เรามากมาย เวลามีการแก้หรือเปลี่ยนแปลงให้ตัวโปรแกรมของเรา Robot ที่ทำหน้าที่ตรวจสอบพฤติกรรมเราก็จะตาย(ฟ้องว่า พฤติกรรมของโปรแกรมมันเปลี่ยน คุณต้องมาดูและแก้ไขฉันนะ) นี่แหละความวิบัติ

เราเริ่มลงมือแก้ไขใน Test Case มันผูกติดๆ กันนั้นมันจะท้อ ทำไมนะฉันแก้ตรงนี้แล้ว ไอ้ตรงนี้มันตายนะ แก้อีกเอ้าตรงนั้นตายนะ เรามันจะพยายามคิดเผื่อมันเข้าไปด้วยอีก เหมือนเรากำลังทำตัวเหมือนเรากำลังเขียนโปรแกรมอีกหนึ่งโปรแกรมนั่นไม่ใช่มันทำให้เรา “เหนื่อยมาก เพราะคิดไปด้วย แก้ไปด้วย และหงุดหงิดไปด้วย”

ต้องขอขอบคุณ Chockchai Phatharamalai หรือพี่จั๊ว ให้คำแนะนำที่ดีมาก และที่มานั่ง Pair Programming กับผมด้วย

พี่จั๊วให้ผมหยุดการคิดทั้งหมดแล้วพยายามแก้ที่ละ Test Case และค่อยๆ ดูไป”อย่าเพิ่งคิด” ว่ามันจะเกิดอะไรขึ้น ให้เปิด Report ดูแล้วแก้ไปตาม Report นั้นเลย นอกจากจะพบว่าการแก้ Robot นั้นรวดเร็ว และผมก็พบว่าเราเหนื่อยน้อยลงจริง เราเปิด Report แล้วแก้ตาม แล้วรัน Robot แล้วตายซ้ำแล้วซ้ำอีกจนมันเขียว(สีที่แสดงสถานะว่า Robot ผ่านแล้ว)

Robot บอกถึงพฤติกรรมของคนใช้งานของโปรแกรมเราอยู่แล้ว ถ้าพฤติกรรมไม่เปลี่ยน แต่ข้อมูลเปลี่ยนก็ไม่ต้องคิด แก้ตามข้อมูลที่เปลี่ยนไปเลย

“อย่าเพิ่งคิด” แล้ว “ทำเลย” 



ขอบคุณครับ

วันเสาร์ที่ 11 ตุลาคม พ.ศ. 2557

Comic Path 2 "อยากวาด Comic แล้ว"

สวัสดีครับ วันนี้จะมาพูดกันต่อเรื่อง Comic จากเดิมเราพูดไปแล้วว่า Comic ตะวันตก กับตะวันออกต่างกันยังไง เราก็จะมาต่อว่า "อยากวาด Comic แล้วล่ะทำไง"


ถ้าอยากวาด เราต้องรู้ตัวตนเราก่อนว่าเราชอบอะไร ชอบสไตล์ไหน

"เอ้าจะรู้ได้ไงล่ะพี่ ก็ผมไม่เคยเขียน"

ก็ดูว่าเราชอบศิลปินคนไหน หรืองานเก่าๆ ของเรา ส่วนตัวผมชอบ Joe Madureira (หรือ Joe Mad) และก็ Miwa Shirow  ถ้าไม่รู้จักนะก็ต้องพึ่ง Google ละครับ ดูผลงานเค้าได้ แฟนๆ เยอะอยู่

"เอ้าพี่ผมชอบแล้วทำไงต่อ"


ลอกครับ อ่านไม่ผิดครับ ลอกครับ ลอกภาพเขาเลย เราลอกเขาเพื่อพัฒนาตัวเอง ไม่ใช่ลอกเพื่อไปอวดอ้างว่าเป็นงานเราครับ ดียังไงถ้าเราลอกงานเขา

1. ฝึกมือ
    เราจะฝึกการลากเส้นดำ งาน Comic วัดกันที่เส้น งั้นเราต้องฝึกเรื่องนี้หนักๆ หน่วงๆ ไปเลย

2. ได้ฝึกกายวิภาค
    เราจะได้ดูว่าที่เค้าวาดกล้ามเนื้อนั้นวาดยังไงแบบไหน และที่สำคัญเราเองต้องแม่นเอง พยายามไปหาฝึกวาดเพิ่มเติมด้วยครับ

3. สีแสงและเงา
    เราได้ดูว่าแสงที่เขาลงเข้ามาทางไหน มุมไหน ส่วนเทคนิคการลงแสงสี(ไม่มีเสียง) จะตามมาอีกทีนะครับ


"จงลอกเพื่อเป็นความรู้ครับ อย่าลอกเพื่อนำมาอวดอ้างว่าเป็นของตนครับ"

แล้วเราจะภูมิใจในงานของเรา คนที่มาดูเค้าจะได้ดูงานของเรา ตัวตนของเราจริงๆ ครับ

วันพฤหัสบดีที่ 11 กันยายน พ.ศ. 2557

สวัสดีครับ ไม่ได้เขียน blog นานมากได้เวลากลับมาเขียนอีกครั้งโดย เพื่อนๆ ในทีมงาน Odd-e ครับ โดยตั้งใจว่าต่อจากนี้จะเขียนเกี่ยวกับการวาดการ์ตูน Comic ฝั่งตะวันตกกันครับ

เรื่อง หัดวาด Comic ฝั่งตะวันตกจ้า ep01 


ผมคงไม่ต้องเกริ่นนะครับ ว่า comic ฝั่งตะวันตกนี่ต่างจาก มังงะ (Manga) หรือ Janpanese Comic ยังไงนะครับ ความต่างคือ(ทัศนะของผมนะ) แบบ Manga แล้วส่วน Manga ใช้ช่องไฟที่หวือหวา มีเส้นสปีดที่ทำให้ดูรวดเร็วดุดัน ร่างกายของตัวละครบิดเบี้ยวผิดส่วนบ้างเพื่อความสนุกเพลิดเพลินในการอ่าน 

 Comic 

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

Manga 

            จะต่างจาก Comic  จะไม่ได้ลงรายละเอียดกับตัวคนมากนัก ไม่ได้ดูสมจริงเท่าไหร่ แต่จะต่างกันที่กรอบของตัว Manga ที่จะทำให้เราดำเนินเรื่องได้เร้าใจ พร้อมกับเส้นสปีดที่ทำให้ ตัวละคร Action ได้เลื่อนไหลมากยิ่งขึ้น จะไม่ค่อยลงสีเท่าไหร่ เพราะแค่งานตัดเส้นถมและเส้นสปีดก็หนักเอาเรื่อง เพื่อไม่ให้ภาพดูแบนราบจนเกินไปจึงใช้สกรีนโทนเข้ามาช่วย


งานของ Comic และ Manga นั้นดูเหมือนจะแตกต่างกันอยู่บ้าง แต่สิ่งที่ทำให้เหมือนกันนั้นก็คืองานลงเส้นดำ มันเป็นงานที่ต้องใช้พลังกาย พลังใจ และความอดทนสูงมาก กินเวลาเยอะมาก ฉะนั้นงานนี้ถ้าไม่รักกันจริง ก็อาจจะทำให้ท้อกันง่ายๆ เลย