Earthchie Software Engineer, Front-end Developer, Google Fanboy

Category: Front-end Development (page 2 of 3)

เนื้อหาเกี่ยวกับเทคโนโลยีการแสดงผลเว็บไซต์ มักเป็น jQuery Plugins หรือเทคนิค CSS3

On Page SEO เบื้องต้น – Focus Keyword

GA_Home_Hero_02_social

 

ออกตัวก่อนเลยว่าผมก็เป็นมือใหม่ เพิ่งศึกษา SEO ได้ไม่นาน แต่ในช่วงที่ผมกำลังศึกษาวิธีทำ SEO นั้นผมพบว่า หาบทความที่ตอบโจทย์ผมไม่ได้เลย

บทความที่ผมอยากได้คือ ไม่ต้องยาวลงละเอียดมากก็ได้ แค่ช่วยสรุปมาเป็นข้อๆ เลย ว่าต้องทำอะไรตรงไหนบ้าง
มัวแต่สาธยายอยู่นั่นแหละ ว่า search engine ทำงานยังไง ซึ่งผมไม่แคร์ไง 555

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

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

[experiment] คำสั่ง random string สั้นๆ ใน javascript

randomnumber_wordle

พอดีเพิ่งรู้ว่าคำสั่ง toString() ใน javascript เนี่ยสามารถใช้แปลงเลขฐานได้ ตั้งแต่ฐาน 2-32 เลย ตัวอย่างเช่น

(15).toString(16);

จะได้ f ออกมาเพราะ 15 ฐาน 10 คือ f ในเลขฐาน 16

ไอเดียบรรเจิดครับคราวนี้ มันผุดขึ้นมาในหัวว่าสามารถเอาไปประยุกต์ใช้กับการ random string ได้นี่หว่า แบบได้โค้ดสั้นๆ เลย อ่านต่อ

เราไม่ควรใช้ Placeholder แทนชื่อฟิลด์เพียงอย่างเดียว

html5-placeholder-syntax

ที่มาภาพ www.aghoshb.com

ใน HTML5 มี attribute ใหม่ตัวนึงชื่อ placeholder ใช้ในการแสดงข้อความชั่วคราวในแบบฟอร์ม
ทำให้หลายๆ เว็บไซต์ ใช้ placeholder แทนชื่อฟิลด์ไปเลย โดยหวังจะทำให้แบบฟอร์มดู minimal ขึ้น
ซึ่งมัน minimal จริง แต่ในขณะเดียวกันมันก็ทำให้ผู้ใช้ไม่รู้ว่าแต่ละช่องที่กรอกไป คือค่าอะไรบ้าง (UI สวยขึ้น แต่ UX แย่ลง)

อ่านต่อ

วิธี Inspect Element หน้าเว็บบนมือถือ (ใน Chrome for Android)

chrome1

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

แต่มันดันติดปัญหาที่ เรา Inspect Element ได้เฉพาะในคอมพิวเตอร์เท่านั้น ในขณะที่ตอนนี้เข้าสู่ยุค Mobile Phone เรียบร้อย
Developer บางคนก็ใช้วิธีย่อจอทำงานเอาแทน ซึ่งก็พอถูไถไปได้ ถ้าไม่เจออะไรแปลกๆ

แต่มันดันเจออะไรแปลกๆ อยู่เป็นประจำ… ฮือๆ T_T
เราก็ทำได้แค่ก้มหน้ารับชะตากรรม ใช้วิธียุคหิน เดาว่าปัญหาเกิดจากอะไร > ไปแก้โค้ด > รีเฟรชดูใหม่ วนลูปไปเรื่อยๆ

ในที่สุด (ปลายปีที่แล้ว) สวรรค์ก็ทรงโปรด ส่ง Chrome Dev Tool มาให้ใช้ ทำให้เราสามารถ Inspect Element หน้าเว็บบนมือถือได้เสียที
แต่ก่อนอื่นเราต้อง set up กันซักหน่อย ไม่ยากๆ 5 นาทีเสร็จ (ถ้าเน็ตไว 55)

อ่านต่อ

การทำ Responsive Height (กำหนดความสูงเป็น %)

ยุคนี้คือยุคแห่งการทำเว็บแบบ responsive นักออกแบบเว็บไซต์ที่ดีจะรู้ว่าไม่ควรกำหนดหน่วยความยาวเป็นค่าคงที่
เขาจะพยายามกำหนดความยาวเป็นค่ายืดหยุ่น เช่น % หรือ em แทน

แต่ปัญหาก็คือ หากเรากำหนดความสูงใน css

img{
     width: 100%;
     height: 55%;
}

จะพบว่าความสูงไม่เห็นจะ 55% เลย วันนี้ผมมีวิธีกำหนดความสูงเป็น % มาฝาก
อ่านต่อ

Older posts Newer posts

Copyright © 2019 Earthchie

Theme by Anders NorenUp ↑