รวม Bar Chart แบบ Pure CSS ที่น่าใช้

รวมกราฟแบบบาร์ ที่มี Animation ง่ายๆ ไม่ซับซ้อน ใช้แค่ CSS จริงๆ แล้วมันอาจจะมีมากกว่านี้ แต่เลือกอันที่โดนใจมา : D ถ้าเจออีกก็จะพยายามสะสมไว้ในนีน๊า

ปรับแสงสีใน Google Map

ปกติกูเกิ้ลแม็พจะมี Style ให้เราเลือกไปใช้อยู่ 6 แบบ ซึ่งจะมีวิธีขั้นตอนการนำไปใช้อยู่ใน https://developers.google.com/maps/documentation/javascript/styling https://mapstyle.withgoogle.com/ เป็นลิงก์สำหรับจัดการตั้งค่า Style ต่างๆ ภายใน Map ซึ่งในหน้านี้ เมื่อเราเลือกธีมแผนที่แล้ว เรายังสามารถปรับแต่ง ตั้งค่าสีตามใจชอบ แสดง หรือซ่อน icon เกี่ยวกับถนน หรือ องค์กรธุรกิจได้ โดยการคลิกที่  More Options     เมื่อเราตั้งค่าเสร็จเรียบร้อย เราก็ทำการ Export style ออกมา Google จะ Generate Style ออกมาให้เราเป็น JSON เราก็ก็ Copy ไปไว้ในแอ๊พ หรือเว็บไซต์ของเรา นอกจากนี้ เขายังมีแหล่งรวม Custom style ของ Google map ที่ https://snazzymaps.com  ในนี้เราสามารถเลือกธีมที่เราชอบ แล้วมาดัดแปลงแก้ไขได้เพิ่มเติมอีกด้วยน๊า : D

Web Design, Development Blog and Graphic Resources (Path I)

Tympanus Web design and development blog that publishes articles and tutorials about the latest web trends, techniques and new possibilities. tympanus.net   Free images / Graphic resources Unsplash Free high-resolution photos. https://unsplash.com/   Graphic Burger Free mockups, UI kits, icons, text effects, background and others. http://graphicburger.com/ Uplabs Daily UI Inspiration & Downloads very best of Android, … Continue reading Web Design, Development Blog and Graphic Resources (Path I)

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

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

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 ก็จะแสดงรายละเอียดของ … Continue reading CSS PEEPER

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.

53km สำรวจโลก

บันทึกจากวันที่ 2 ตุลาคม 2559 เพราะสมัครสนาม PYT100 ไว้ การเข็นตัวเองออกไปซ้อมก็ต้องมีบ้าง เพื่อให้ชินกับความชันที่ต้องพบเจอ การฝึกซ้อมกำลังขา การกินระหว่างทาง หลังจากจบ 50K ที่ Columbia Trail master ที่หนองเขียว ก็ไม่เคยเกินระยะ 50K อีกเลย ถ้างั้น เราควรออกไปซ้อม เหมือนจะสอบ เราก็ต้องอ่านหนังสือ แต่เพราะเป็นเด็กขี้เกียจก็เลยเหมือนอ่านหนังสือก่อนสอบไม่นาน โถ่วว วันนั้นเราออกไปซ้อมพร้อมกับมนุษย์ขาเทรลอีก 4 คน พี่เติ้ล จ๊อบ บิ๊ก เป้า เส้นทางที่ไปคือ Basecamp - วังบัวบาน - บ้านม้งขุนช่างเคี่ยน - ดอยปุย - ผากลอง - สวนพฤกษศาสตร์ - Site B - บ้านม้งขุนช่างเคี่ยน - วังบัวบาน - Basecamp … Continue reading 53km สำรวจโลก

การเขียน 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 … Continue reading การเขียน Property ของ Font แบบ Shorthand

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

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