web technology

แหล่งความรู้ทางด้านเว็บไซต์สมัยใหม่ ทั้ง css, html และ jquery หรือเทคนิควิธีการต่างๆ ในการทำเว็บไซต์

12 vscode extensions for web developer

12 vscode extensions for web developer
ก่อนหน้านี้ผมใช้ IDE หรือ text editor สำหรับพัฒนาเว็บไซต์มาหลายตัว เช่น Notepad++, Atom, Aptana Studio, Sublime text เป็นต้น จนสุดท้ายผมมาจบที่ virtual  studio code (vscode) เพราะมันรองรับการทำงานของผมในหลายๆ ด้าน และมี extension ให้เลือกมาก ไม่น่าเชื่อว่า microsoft จะพัฒนา text editor ได้ดีขนาดนี้ ฮาๆ ซึ่งมันจะมี extension หลักๆ…
อ่านต่อ

รวมคำสั่งที่ใช้ประจำสำหรับ MongoDB v.3

รวมคำสั่งที่ใช้ประจำสำหรับ MongoDB v.3
ระยะหลังโปรเจ็คแต่ละครั้งของ Twin synergy ก็จะเลือกใช้ MongoDB เป็นอันดับแรก เพราะ mongodb ก็คือ NoSQL โดยจุดเด่นของ NoSQL ส่วนใหญ่ (แต่ไม่ใช่ทุกอย่าง) คือความสามารถในการเขียนข้อมูลได้เร็วกว่า MySQL เป็นอย่างมาก หากงานที่เราทำนั้นเน้นการเขียนข้อมูลมากๆ เช่นต้องเก็บ Log แบบตลอดเวลาแบบ Real-time ทุกการกระทำ และข้อมูลมีขนาดใหญ่โตมาก การใช้งาน…
อ่านต่อ

การทำยันต์ 5 แถวสำหรับ bootstrap 3

ผมใช้ bootstrap บ่อยมากเรียกได้ถ้าจะทำเว็บ responsive ผมจะเลือก bootstrap เป็นตัวแรกเสมอในการทำ ตัว bootstrap นั้นมีระบบ grid system มาให้ใช้เลย โดยเราสามารถสร้างเนื้อหาได้หลากหลาย columm (แถว) แต่ผมติดปัญหาที่ว่าอยากทำยันต์ 5 แถว (ฮาๆ) เพื่อใช้ในการแสดงผล 5 column ฉะนั้นเราก็ต้องเพิ่ม class ให้กับมัน วิธีเพิ่มการแสดงผล 5 แถว (column) ใน…
อ่านต่อ

คำสั่ง CSS ที่คุณคิดไม่ถึงว่ามันมีด้วยหรอ?

จริงๆ แล้วคำสั่ง CSS มีเยอะมาก โดยตัวที่ผมจะกล่าวถึงในครั้งนี้ผมว่าถ้านำมาใช้งานก็มีประโยชน์ไม่น้อย แต่ปัญหาก็คือรองรับเฉพาะบราวเซอร์บ้างเวอร์ชั่นเท่านั้น เรามาดูกันว่ามีตัวไหนน่าสนใจบ้าง Frist line [css]::first-line { }[/css] ตัวนี้จะเป็นการเลือกเฉพาะบรรทัดแรกใน paragraph หรือ element นั้นๆ HTML [code]Lorem ipsum dolor sit amet, consectetur…
อ่านต่อ

8 CSS3 Selectors ที่คุณต้องรู้จักมัน

Selector คือ HTML elements หรือ elements ที่ CSS Rule นำไปใช้เพื่อกำหนดค่าต่างๆ เช่น สี ขนาดกว้างสูง เป็นต้น ผมคงไม่อธิบายลงลึกมากนะครับ เพราะวันนี้ผมจะมาพูดถึง selector ของ CSS3 โดยเฉพาะที่เพิ่มเข้ามา ถ้าเรารู้จักวิธีใช้มันจะทำให้เราเขียน CSS สนุกขึ้นอีก เรามาดูกันว่ามีอะไรบ้าง E[foo^="bar"] E คือ html element , foo คือ attribute (id…
อ่านต่อ

หา latitude และ longitude ใน new google map

พอดีผมจะเอาแผนที่ google map ไปติดไว้ในเว็บของบริษัท และได้ลองไปเล่นกับ google map api ดูพบว่ามันต้องเรียกใช้ค่า latitude และ longitude ของสถานที่นั้นๆ ผมเลยไปหาวิธีมาว่าเราจะดูค่า latitude และ longitude ตรงจุดนั้นได้อย่างไรกัน วิธีดูค่า latitude และ longitude ใน new google map  เปิดเว็บ google map และไปยังตำแหน่งที่เราต้องการ…
อ่านต่อ

วิธีแก้ไขเมื่อเราใส่ youtube ในเว็บแล้วมันลอยเหนือทุกๆ element

หลายๆ คนคงเจอปัญหาที่ว่าเมื่อเวลาเราใส่ลิงค์ iframe ของ youtube ลงไปในเว็บเราแล้วเนี้ย ตัว iframe ของ youtube มันจะการเหมือนกำหนด z-index ให้มันอยู่บนสุดตลอด ซึ่งผมใช้ drupal ก็จะรำคาญมาก เพราะเวลาที่จะเข้าในส่วนของ admin มันจะเป็น overlay lightbox ขึ้นมา แต่เจ้ากรรม youtube จะต้องมาบังการแสดงผลตลอด T.T ตัวอย่างจากภาพด้านบน…
อ่านต่อ

CSS3 Help Sheet

CSS3 หรือ Cascading Style Sheets level 3 จะกลายเป็นมาตราฐานใหม่ของ CSS ในอนาคตแน่ครับ ซึ่งถ้าใครลองเล่นแล้วจะพบว่าทำให้การทำงานของพวก designer นั้นสะดวกมากขึ้น มี selector เพิ่มขึ้นมาเยอะพอสมควร โดยหลักๆที่ผมใช้งานตอนนี้ก็คงจะเป็น border-radius (ทำขอบมน) และ text-shadow (เงาของตัวอักษร) ซึ่งจะเห็นได้อย่างชัดเลยครับว่าถ้า CSS2…
อ่านต่อ

html5 cheat sheet

เป็นคู่มือ HTML5 นะครับโดยจะบอกรายละเอียดของ tag ต่างที่ใช้งานใน HTML5 ซึ่ง HTML5 ก็คือมาตราฐานใหม่ในอนาคตสำหรับ html นะครับ โดยจะมีการเปลี่ยนแปลงสำคัญๆ ใน HTML 5 คือ element ใหม่ๆ ที่ใช้งานเจาะจงและมีความหมายในตัวของมันเอง ต่างจากแต่ก่อนที่เราใช้ div ในการจัดเรียง layout ส่วนใครสงสัยก็ตามไปอ่านได้ที่ Preview of HTML5 ได้ครับมีภาพประกอบเข้าใจง่าย…
อ่านต่อ

Web Design Photoshop Layout 2010

วันนี้ผมไปเจอเว็บไซต์ที่เขารวบรวม template website แนวเว็บ 2.0 โดยเป็น Photoshop สวยงามมากครับมีหลากหลายแนวดี เหมาะสำหรับคนที่คิดไม่ออกว่าหน้าเว็บเราจะออกมาเป็นแบบไหน โดยเขาจะสอนทำ photoshop แบบ step by step กันเลยทีเดียว มีทั้งหมด 60 แบบครับ 1. Portfolio Layout 2. Web Hosting Layout 3. Business Layout เพิ่มเติมครับ : 60 Web Design Photoshop…
อ่านต่อ