glomgeek

Another blog by manudglom. The takeaway note from my read- ux, ui, web dev, game design, graphics, entrepreneurship, self improvement and life hack including lesson learned from my project.

[glomgeek]

IE11 and css filter:alpha(opacity)

filter : alpha(opacity) has to be define before background color to take effect on IE11. Not sure about other version or browser.

[glomgeek]

Has to add z-index to the envelop object, if the child has relative position.

[glomgeek]

Today we show you how to combine CSS3 Transitions and create complex animations that way.

Attribute Transition ใน CSS3 สามารถทำ transition effect ของ attribute อื่นๆใน container เดียวกันได้ ตั้ง elapse time แยกกันแต่ละ attribute ก็ได้ ใช้คู่กับ pseudo class อย่าง hover ก็ได้

[glomgeek]

How to sell yourself in 30 seconds and leave people wanting more

Eight steps to crafting the perfect elevator pitch.

1. เข้าใจตัวเองก่อนว่าอยากจะทำอะไร มองหาอะไรอยู่ ให้ value อะไรได้บ้าง 2. สรุปสิ่งที่เราทำได้ดีเป็นข้อๆสักสี่ข้อ 3. เล่าเรื่องจากข้อแรกกับข้อสอง 4. อย่าใช้คำศัพท์เฉพาะทาง 5. เรื่องที่เล่า เว้นจินตนาการให้มีการคุย ถามต่อยอดด้วยนะ 6. จับเวลา สามสิบวินาทีในการเล่าเรื่อง 7. อัดวีดีโอแล้วดูตัวเอง 8. ฝึกกับเพื่อนที่น่าจะยินดีให้เราฝึกด้วย ถามหาความเห็น

[glomgeek]

How did the web look and feel in 2015? We look back at some of the biggest web trends of the year.

1. Scroll ยาวๆ     เมื่อก่อนจะกลัวกันเพราะว่าจากงานวิจัยพบว่าคนไม่ค่อย scroll     แต่การมาของ mobile คนชินกันเรียบร้อย แถมกลายเป็นว่า เข้าใจง่ายกว่าการแยกหลาย     หน้าอีก     - ใส่ลูกเล่นตอน scroll เช่น parallax     - เมนูให้ค้างไว้ที่ขอบบน 2. Card design     อีกรูปแบบที่นิยม ย่อยเนื้อหาสั้นๆพร้อมรูปประกอบวางเรียยงเป็นการ์ด      - ควรคลิกได้ทั้งใบ     - ควรมี interactive กับผู้ใช้ระดับนึง เช่น hover / transition 3. Flat 2.0     ยังคงเป็นเทรนด์ แต่จะไม่แบนมากเหมือนเดิม จะมีการไล่สี เล่นแสงเงามากขึ้น แล้วก็     เล่นรายละเอียดจากงานออกแบบแบบลายเส้น layout มากขึ้น     - ghost button มีแต่ขอบ layout แต่พื้นหลังโปร่ง     - ลงตัวกับงานออกแบบสไตล์ minimal 4. Animation     - ใช้หลัก 12 ประการของดิสนี่ย์     - ถ้าใช้ long scroll ทำ animation ให้ smooth ขึ้น     - ใส่ animation ลง Bg / Load screen 5. ใช้รูปถ่ายเป็นส่วนประกอบ     - ใช้ overlay ช่วยคุมโทน 6. ใช้พื้นหลัง hd จากรูปถ่าย     - ใช้ svg     - ระวังอย่าให้เด่นเกินเนื้อหา     - ใส่ฟังก์ชันครอปรูป แต่ละอุปกรณ์ ratio ไม่เท่ากัน 7. วาง text ใช้สีและ font ที่ดึงความสนใจได้ดี     - สองฟ้อนท์กำลังพอดี 8. Interactive มากขึ้น เช่น swipe ได้ custom content ได้ เปลี่ยนตีม มี notification      แบบ fb quora g+ 9. สีโทนสว่างสดใส - สีเดียวหลายโทน หรือไม่เกินสามสี 10. Minimal - ลด ui เท่าที่จำเป็น เน้นใจความเนื้อหา เมนูใช้พับซ่อนนอกจอแต่ให้สังเกต ได้

[glomgeek]

เริ่มจาก Component ของ web browser 1) UI - UI ของเบราว์เซอร์ 2) Browser Engine - ทำงานระหว่าง UI + Rendering 3) Rendering Engine - Render จอตามประเภทของไฟล์ Chrome จะใช้ 1 instance : 1 tab. IE use Trident, FireFox use Gecko, Safari use WebKit, Chrome use Blink (modified WebKit) 4) Networking ตามชื่อ 5) JS Interpreter ตามชื่อ 6) UI Backend - Render แค่พวก Standard Web Control เช่น - Text Box, Dropdown list, Radio, Scroll Bar หัวใจสำคัญของการทำงานคือ Rendering Flow เริ่มจาก HTML Tag > Parsing DOM > สร้าง DOM Tree > คลอดเป็น Attachment ขณะเดียวกัน ฝั่ง CSS > Parsing ออกมาเป็น Style Rules > เอา Attachment จาก DOM Tree มารวมร่างกัน > ออกมาเป็น Render Tree เจ้านี่แหละสำคัญสุด Render Tree จะคำนวนจุด coordinate บนจอในการวาด แล้วค่อยวาดลงบนจอ กระบวนการนี้ Webkit เรียกว่า Layout ส่วน Gecko เรียกว่า Reflow ขั้นตอน Html & Css Parsing ไม่มีอะไรหวือหวา HTML / CSS จะทำการ parse พร้อมกันแล้วค่อยไปสร้าง DOM Tree / Style Rules parser จะมีความเท่ห์ตรง error tolerance ความยากและที่เกี่ยวข้องกับ front end จะเริ่มที่ Render tree ... หมดเวลา ต่อตอนสอง

[glomgeek]

[glomgeek]

Full Stack Development Theories and How-To Guides

บทความกี๊คๆวันนี้ Modern Web Solution Stack ฉบับนู้บ

แบ่งเป็นชิ้นๆก่อนดังนี้ Model = ชิ้นข้อมูลและลอจิคบนข้อมูลนั้น View=รูปแบบการแสดงผล Control = ควบคุมรูปแบบการแสดงผล Data = ดาต้าเบส > เมื่อก่อนเซิร์ฟเวอร์ทำงานทุกอย่างแล้วสร้างเพจซึ่งเป็นผลลัพธ์ส่งมาให้ browser แสดงผล ทำให้งานเล็กๆเช่นกดไลค์ก็ต้องรอเพจมันโหลดใหม่

> ยุค 200x เลยมีการพยายามดึงงาน Model View Control ง่ายๆออกมาจากเซิร์ฟเวอร์โดยใช้เทคโนโลยี AJAX อย่าง jQuery ช่วย แต่ทำให้มีปัญหาการแบ่งส่วนประมวลลอจิคไม่ค่อยดีระหว่าง Client Server เช่น Validate Data ให้ลอจิคมันอยู่ส่วนไหน

> ปัจจุบันใช้สถาปัตยกรรม MVC กัน ดึงงานมาอยู่ฝั่ง client ให้หมด ฝั่ง server มีหน้าที่เก็บ data อย่างเดียว  เทคโนโลยีปัจจุบันจึงมี framework ฝั่ง client เกิดมากมายหลายเจ้าเช่น Angular, Ember, Ract, ASP MVC และฝั่ง server เกิดใหม่หลายเจ้า Node, Ruby on Rail

ซึ่งการทำเว็บอาจถึงขั้นทำแค่หน้าเดียวแล้วก็ยังได้ เพราะเซิร์ฟเวอร์ไม่ต้องส่งเพจมาใหม่แล้ว เพจเดียวโหลดลอจิคทุกอย่างเลย หรือเรียกว่า Single Page Application มีข้อเสียคือโหลดทีแรกโหลดนาน และ Search engine ก็จะงงงวย crawl content ไม่ถูกเนื่องจากเว็บเรา dynamic ไม่มีเพจให้ไปตาม ซึ่งก็พอแก้ได้ด้วย framework ฝั่งเซิร์ฟเวอร์เช่น Meteor

ดังนั้นในยุคนี้ใครจะทำ Modern Web แบบ full stack ต้องอ่านเยอะกว่าเดิมมากเลย HTML, CSS, JavaScript, jQuery แล้วก็ framework ฝั่ง client กับ server

[glomgeek]

How Apple Is Giving Design A Bad Name

For years, Apple followed user-centered design principles. Then something went wrong.

บทความวันนี้เมื่อปรมาจารย์งานออกแบบ อดีตพนักงาน Apple มาวิพากษ์ว่าสินค้ายุคหลัง ดีแค่สวยแต่ใช้ยากขึ้น แกไม่ได้ซัดแค่ Apple แต่ลากยาวถึงการออกแบบ App สมัยนี้ที่เน้นสวย เน้น interaction แต่ใช้ยากขึ้นเนื่องมากจากอิทธิพลการออกแบบของ Apple เช่นกัน

สรุปปัญหาที่ทั้งสองท่านกล่าว 1. Gesture & Touch based ทำให้คนใช้ต้องมานั่งจำท่าถูจอ จำนวนครั้งในการแตะจอ แถมทำแล้วย้อนกลับไม่ได้ ซึ่งขัดกับหลักการสามอย่างคือ หน้าจอควรจะให้คนใช้ค้นหาได้ว่าสามารถทำอะไรกับหน้าจอได้ ตอบสนองว่าสั่งงานดังกล่าวแล้วเกิดอะไรขึ้น ย้อนกลับได้ถ้าเปลี่ยนใจ ทำให้คนใช้งาน "เรียนรู้" ที่จะใช้เองไม่ได้ เพราะต้องมีใครมาบอกแทนว่าถูจอท่าไหนแล้วก็ต้องจำเอา

2. Visual Design Direction ทำให้ Font บางไปจนอ่านยากสำหรับหลายๆคน จอเกลี้ยงเกินไป เลยกลายเป็นเสียฟังก์ชั่นสำคัญๆอย่าง undo ออก คำถามที่หลายคนอาจสงสัยคือรู้ได้ไงว่าอันไหนจำเป็น คำตอบคือไปเทสต์กับผูู้ใช้งานซะ

สิ่งที่งานออกการปฏิสัมพันธ์ระหว่างคนกับคอมพิวเตอร์ควรมี - ต้องบอกได้ว่ามีอะไรให้เลือกทำได้บ้าง - ตอบสนองว่าสั่งแล้วเกิดอะไรขึ้น จะข้อความหรือผลบนหน้าจอก็ได้ - ย้อนกลับได้ถ้าสั่งผิด / เปลี่ยนใจ - คงเส้นคงวาในการออกแบบ ปุ่มเดิมตำแหน่งเดิม เขียนเหมือนเดิมควรทำงานแบบเดิม - คนใช้งานใช้แล้วได้เรียนรู้แล้วก็เก่งมากขึ้นในการใช้งาน

ท่อนสรุปสุดโหด แต่ผมชอบ ไว้จะไปหาหนังสือแกมาอ่าน จากการทดสอบทางจิตวิทยา งานออกแบบที่ดีนั้นจะดึงดูดให้น่าใช้ ใช้แล้วรู้สึกดีมีคุณค่า ซึ่งผลิตภัณฑ์จะต้องสามารถเข้าใจได้ ควบคุมได้ ได้ประโยชน์จากการใช้ ซึ่งหลักการข้างต้นเป็นพื้นฐานที่ทำให้เกิดสิ่งเหล่านี้ นี่ถ้า Apple มา take course interaction design ใหม่ น่าจะสอบตก

[glomgeek]

บทความกี๊คๆวันนี้ Responsive VS Adaptive website ทั้งสองวิธีเป็นการเขียนเว็บให้แสดงผลบนหลายๆ device ได้แต่ว่า adaptive นั้นจะเขียนให้ปรับตามขนาดจอที่ระบุไว้แล้วเท่านั้น เช่นเจอจอไอโฟนแบบนึง ใหญ่ขึ้นเป็น galaxy note ก้แบบนึง เป็น ipad ก้แบบนึง เป็น desktop ก้อีกแบบ responsive ขยายยืดหดไม่สนขนาดจอ อาจมีเล็งแค่เพิ่ม grid ลด grid ตาม ขนาดจอที่เหมาะสมในการเพิ่มลด grid adaptive เขียนง่ายดีไซน์ง่ายกว่า แต่ถ้าเจอ device จอแปลกๆอาจเดี้ยงได้ responsive ต้องคิดเยอะกว่า เขียนยากกว่าแต่ครอบคลุมแน่นวล ความเหมาะแล้วแต่แผนงาน ตัวอย่างดูได้ในลิ้งค์

[glomgeek]

A roadmap for vector building provides you with in-depth training on Design. Taught by Von Glitschka as part of the Drawing Vector Graphics

เริ่มต้นวาด vector art บนอิลลัสต์

ช่วงนี้มีความจำเป็นต้องทำอาร์ทเวิคขนาดใหญ่เป็นเมตร ด้วยความที่ตัวเองเป็นคนถนัดวาดฟรีแฮนด์ ทำให้พอทำลงโฟโต้ชอปที่แคนวาสใหญ่ๆมันกินเครื่องมากๆ กระติกยิกๆเลย

เลยเริ่มมีความคิดที่จะลองหัดวาด vector เพราะมันเบากว่าเยอะ scale เท่าไรก็ได้

- step เริ่มจากวาดฟรีแฮนด์ เอารูปเข้า illust - จากนั้นเอา pencil tool ลากตามลายเส้นไปเลย พยายามให้ทรงใกล้เคียงที่สุด - แล้วค่อยใช้ pen tool คลิกตาม node เพื่อดัดความโค้ง shift+click เพื่อขยับตำแหน่ง - พอได้โครงเสร็จก็ใช้การเทสิ stroke ได้เลย

- เทคนิค advance ขึ้นอีกนิดคือใช้การ merge และ subtract สร้างรูปทรงต่างๆเช่น ครึ่งวงกลม

[glomgeek]

Hick’s Law: Making the choice easier for users

Now let’s see a topic about keeping our users’ lives easy. “Isn’t that the theme of most articles here?” you may ask. Well, this one is especially geared towards users. Understanding Hick’s law means you can design so that more users will visit and stay on your website.Delivering a good user experience requires that first you find out the functionalities that will answer their needs; second, you need to guide them to the specific functions they need most. If users end up stuck in the decision-ma...

ทำยังไงให้การเลือกตัวเลือกง่ายสำหรับผู้ใช้งาน บทความนี้ชวนให้พวกเราเอากฎของ Hick มาใช้ในงานออกแบบ สมการของ Hick นั้นกล่าวแบบย่อโคตรๆได้ว่า ยิ่งตัวเลือกเยอะ คนยิ่งใช้เวลาตัดสินใจนาน ...ตรงตัวมากซะจนงงว่าของแบบนี้เขียนเป็นสมการได้ด้วยวุ้ย อย่างไรก็ตามวิธีการนำไปใช้โดยย่อคือให้งานออกแบบ Keep It Short and Simple หรือ KISS เจ้าเก่า ตัวอย่าง - ทำปุ่มให้เหลือน้อยๆในหน้าแรก หน้าแรกของเว็บหรือแอพนี่สำคัญมากๆ ถ้าเข้ามาแล้วไม่รู้ไปยังไงต่อนี่จบเลย - จัดหมวดเนื้อหาให้เป็นกลุ่มๆเวลาคนใช้ใสก็เลือกกลุ่ม หรือมองเป็นกลุ่ม - ถ้าขั้นตอนการใช้ฟังก์ชั่นยาวทำให้เหลือหน้าสั้นๆแต่ซอยหลายหน้าไล่ขั้นตอนแทน การวัดผล - ถ้าออกแบบมาตามหลักการนี้ time on page ก่อนไป page สุดท้ายต้องน้อยๆ เพราะไม่ต้องคิดนานกดผ่านได้รัวๆ - Time on site ต้องไม่มากเกินไป(แสดงว่าหลง) ไม่น้อยเกินไป(ไปต่อไม่ได้ปิดแม่ม) งานออกแบบไม่ต้องสวยนะ แต่ออกแบบให้คนใช้ผลิตภัณฑ์เราแก้ปัญหาเค้าได้

[glomgeek]

Space Yourself – Smashing Magazine

There’s more to spaces than the space key. Marcin Wichary shows other space characters, what their heritage is, and how they can be useful today.

 ลิ้งค์นี้งานละเอียดว่าด้วย space หลากหลายรูปแบบระหว่างตัวอักษรซึ่งบทความนำเสนอให้ใช้ unicode แทนที่จะใช้ css ไปเลยเช่น ช่องว่างที่ควรมีระหว่างสัญลักษณ์อย่าง - / * + กับตัวหนังสือ ใช้ space ที่เรียกว่า hair space หรือถ้าบทความภาษาอังกฤษจะมีเคสที่ phase มันติดๆกันและไม่ควรโดน wrap แค่บาง terms ก็มี unicode ของ space ที่ทำให้ container มัน wrap text ได้สวยๆเรียกว่า non breaking space 

ตาราง unicode ตามลิ้งค์

คหสต บางทีมันก็อิงกับคนทำฟ้อนต์ด้วยนะว่าเว้นมาแล้วรึเปล่า

[glomgeek]

จากสถิติปี 2014 - 2015 desktop และ mobile web มีสถิติการเข้าชมที่สูงกว่า mobile app มาก แต่ว่าในแง่ระยะเวลาที่อยู่บนหน้าจอแล้วนั้นกลับกัน mobile app ชนะเว็บขาดลอย ทั้งนี้เนื่องจากผู้ใช้งาน search บนเว็บเจอก่อน แล้วค่อยไปโหลด app ถ้าสนใจในสินค้าหรือบริการ ดังนั้นในยุคนี้ เว็บจึงเป็นหน้าร้าน และ app จึงเป็นสืงที่อยู่ในร้าน

[glomgeek]

The Guide to Productivity That Will Change Your Life

Do you want to be more productive? Do you want to boost your productivity? This article is what you were looking for.

จับเวลา ทำงาน 25 นาทีห้ามว่อกแว่ก แล้วได้เบรค 5 นาที จากนั้นก็เพิ่มไปเรื่อยๆ ที่เคยเจอบทความอื่นบอกให้ทำ 50 นาที พัก 10 นาที หรือมากสุด 90 นาที ต้องพักละ 15 นาที สมาธิและพลังงานสมองคนเราได้ประมาณนี้ ที่เหลือก็ตรงไปตรงมา ให้ทำรายการที่จะทำทั้งหมด แบ่งเป็นรายปีรายเดือนรายสัปดาห์รายวันแล้วก็ลง agenda

[glomgeek]

Success is a continuous journey

In his typically candid style, Richard St. John reminds us that success is not a one-way street, but a constant journey. He uses the story of his business' rise and fall to illustrate a valuable lesson -- when we stop trying, we fail.

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

Richard St. John: Success is a continuous journey

[glomgeek]

The Rule of Thirds: Know your layout sweet spots

Now that we’ve started covering the topic of proportion in design (beginning with the Golden Ratio article), let’s look at another vital subject. Getting a firm grasp of the Rule of Thirds will empower you to fine-tune your eye to bring out the best of the elements in your design by placing them where they belong best. What Is the Rule of Thirds? The Rule of Thirds is another way to look at the layout of a design (be it a web page, a painting or a photograph). The idea is straightforward; y...

Rule of Thirds ไม่ได้ใช้กับรูปถ่ายหรือวาดรูปอย่างเดียว วางเลย์เอาท์เว็บก็ได้

แบ่งจอทั้งแนวนอนแนวตั้งเป็นสามส่วนแล้วลาก grid จุดตัดซ้ายบนวาง key content ลงไปเลย ปกติสายตาคนจะไล่จากจุดตัดซ้านบน มาซ้ายล่าง แล้วก็ไปขวาบน ขวาล่าง เป็นรูปตัว F