นึกถึง Muzli ทุกครั้งเวลาหิว

Muzli เป็น Chrome extension สำหรับเราแล้ว ถือว่าเป็นแหล่งเรียนรู้มหาศาล เป็นแหล่งรวม Inspiration เนื่องจากหลักๆ เขาก็จะหยิบเอา ดีไซน์เก๋ๆ กับเว็บไซต์ที่ สวยๆ มาเป็น feature ใหม่สดทุกวัน หรือเราเข้าไป setting เลือกเว็บไซต์ที่เราอยากจะดู feed ก็ได้ เนื้อหาอื่นๆ เรื่องเกี่ยวกับ Technology, Product ใหม่ๆ ก็มีนะ ส่วนการตั้งค่าก็ง่ายมาก เข้าไปที่เมนูตั้งค่า ที่มุมซ้ายใต้โลโก้ แต่จะบอกว่ามีแต่ข้อดีก็ไม่ได้ ข้อเสียก็มีบ้าง ช่วงแรกๆ ที่ลง extension ใหม่ บางทีทำงานอยู่ เปิด New Tab เจอบทความที่น่าสนใจ หลุดโฟกัสซะงั้น เพราะฉะนั้นแบ่งเวลาเสพย์ดีๆ นะ ฮ่าาาาา : D ไปตามหา Muzli กัน https://muz.li/ และย้อนดู Weekly Inspiration, UI, UX…

CSS PEEPER

CSS PEEPER เป็น Chrome extension ตัวนึง ที่ช่วยให้เราเช็ค style ให้เหมือนกับ design ได้เร็วมากขึ้น ที่มา : https://csspeeper.com/ ทำอะไรได้บ้าง แสดงข้อมูลพื้นฐาน ของเว็บเราได้ เช่น ขนาดของไฟล์ css, เวลาที่ใช้ในการโหลดไฟล์, ชนิดของ font ที่ใช้ใน header และใน body แล้วก็ยังบอกสี Background ของ body ด้วย สามารถ export ไฟล์รูปที่ใช้ในหน้าเว็บเราได้ โดย export ในรูปแบบ zip ไฟล์ นอกจากนั้นก็ยังแสดงรายละเอียดความ กว้าง และสูงของรูปในเว็บด้วย แสดง pallete สีที่เราใช้ในเว็บได้ (มันจะแสดงเฉพาะ สีที่อยู่ใน element html ไม่รวมถึงรูปภาพนะ) แสดงชื่อคลาสที่เราใช้ ถ้าไม่มีชื่อคลาสก็จะแสดงเป็นชนิดของ element เวลาคลิกที่ element ก็จะแสดงรายละเอียดของ…

Debugging Safari on mobile

How to setting Go to ‘General’ –> ‘Safari’ –> ‘Advanced’ –> turn on ‘Web inspector’ Open Safari Browser on your device Connect your device to Mac with USB. Open Safari Browser on Mac and select ‘Develop’ on menu bar –> select your device Select website that you would like to inspect.

Debugging print styles on Chrome & Firefox

Debugging print styles in Chrome In Chrome open DevTools MacOS : CMD + Opt + I Windows : Ctrl + Shift + I or View > Developer > Developer Tools Show the console drawer (Esc), open the rendering pane, check Emulate CSS Media and select Print. Debugging print styles in Firefox For debugging print styles in Firefox open…

การเขียน Property ของ Font แบบ Shorthand

โดยปกติ เวลาเราเขียน Property ต่างๆ ของ Font เราก็จะเขียนเรียงๆกัน แบบข้างล่างนี้ font-size: 30px; font-family: ‘Kanit’, sans-serif; line-height: 1.5; /* 45px */ จริงๆ มันสามารถย่อให้เหลือ 1 บรรทัดได้ แบบนี้ font: 30px/1.5 ‘Kanit’, sans-serif; การเขียน line-height แบบไม่มีหน่วย ก็คือการเอา font-size มาตั้งหาร จากข้างบนก็จะเป็น 30px/1.5 = 45px; การเขียน Shorthand property ของ font ที่นำมาเขียนได้ก็จะมี font-style, font-variant, font-weight, font-size, line-height และ font-family การเขียนแบบ shorthand font-family จะอยู่ลำดับสุดท้ายเสมอ Line-height…

การตัดสิน Break word ขึ้นบรรทัดใหม่ โดยนึกถึงความเป็นคำด้วย

เมื่อทำโปรเจ็ค ก็จะพบปัญหา ข้อความยาวเฟื้อย คำศัพท์นึงจะยาวกี่ตัวอักษรกัน 15 ตัวก็เยอะแล้ว (เคยคิดว่างั้น) มันมียาวมากกว่านั้น ติดกันยาวเป็น 100 ตัวก็ยังมี แต่ว่าคำพวกนี้เราไม่ค่อยได้ใช้หรอก แต่เราก็ควรมีวิธีกันไว้ เผื่อว่า ก๊อปปี้ลิงก์ยาวๆ มันก็จะได้ตัดให้เราอัตโนมัติ ตอนนี้เราใช้ ซึ่งมันเวิร์คกับทุก Browser นะ word-break: initial; word-wrap: break-word; ก่อนหน้านี้ใช้ word-break: break-word; ใน Firefox และ IE มีปัญหา

Internet Explorer 11 ignores list-style:none on the first load

หาสาเหตุไม่ได้สักที StackOverflow ช่วยชีวิตไว้ เป็นเฉพาะในตัวที่เป็น <ul> ใน IE11 ด้วย เขาบอกว่าให้เพิ่ม list-style-image: url(data:0); แต่มันอาจจะทำให้มีช่องว่างที่ไม่รู้ที่มาเหลืออยู่ ให้เราใส่ font-size: 0; เพิ่มไป แต่ก็ต้องไปไล่ดูลูกๆ ของมันว่าทำให้ style font-size ที่ไหนพังรึเปล่า

ปัญหา Font แปลงเป็น Font-face ไม่ได้

ปัญหา ฟอนต์บางอันมันไม่สามารถแปลงเพื่อใช้งาน Font-face ได้ หรือบางทีแปลงได้แล้ว แต่บาง Browser ก็ไม่ยอมอ่านฟอนต์ ใช้ http://www.freefontconverter.com แปลงจาก ttf เป็น otf ก่อน แล้วเอาไฟล์ otf ที่ได้มาไปเข้า http://www.fontsquirrel.com/fontface/generator อีกที CR. พี่ดิว