สิ่งที่ผู้คนคิดว่านักพัฒนาเว็บทำกับสิ่งที่เราทำจริงๆ

สิ่งที่ผู้คนคิดว่านักพัฒนาเว็บทำ:

แผนภูมิแสดงสิ่งที่ผู้คนคิดว่านักพัฒนาเว็บทำ

  • โค้ด ปรับใช้และใช้งาน โดยการเข้ารหัสเป็นงานหลัก

สิ่งที่นักพัฒนาเว็บทำจริงๆ:

แผนภูมิแสดงงานจริง

  • การเข้ารหัส
  • ต้องการรหัสเฟรมเวิร์กบุคคลที่สามแบบสุ่ม
  • กำลังอัปเดตโหนด/NPM
  • ลองใช้คำสั่งสุดท้ายอีกครั้งด้วย `sudo`
  • กำลังตรวจสอบบนมือถือ
  • เขย่ากำปั้นไปทางคูเปอร์ติโน
  • หาของในเว็บ
  • การวางโซลูชัน Stack Overflow
  • ปรับขนาดเบราว์เซอร์/ใช้การจำลอง
  • ค้นพบว่าส่วนขยายเบราว์เซอร์เป็นปัญหาตลอดมา
  • อธิบายอีกครั้งว่าทุกอย่างไม่เหมือนกันทุกที่
  • เพิ่ม ARIA จนทุกอย่างเรียบร้อย
  • ติดตามปัญหาด้านประสิทธิภาพกลับไปที่ Analytics/โค้ดโฆษณา
  • แปลงเนื้อหาเป็นรูปแบบที่ใช้งานได้
  • การเพิ่ม/ลบ console.log()
  • ทำให้แคชใช้ไม่ได้
  • โดยใช้
  • เรียก Imhotep โดยใช้เวทย์มนตร์เลือดเพื่อช่วยในการแสดงผลบั๊ก

TL; DR: การเรียนรู้การเขียนโค้ดไม่ใช่ทักษะหลักที่คุณต้องการในฐานะนักพัฒนา

สคริปต์ teleprompter สำหรับการบันทึกวิดีโอ

ขณะนี้ ฉันกำลังบันทึกวิดีโอจำนวนมาก และพบว่าวิธีที่เร็วที่สุดที่จะทำได้คือการเขียนสคริปต์และอ่านให้กล้องฟัง จากนั้นจึงบันทึก screencasts และแก้ไขเพื่อให้เข้ากับคำบรรยาย เพื่อให้แน่ใจว่าฉันอ่านจากด้านบนของหน้าจอและอ่านในกล้อง ฉันต้องเลื่อนสคริปต์บ่อยมาก ซึ่งน่ารำคาญ ฉันจึงเขียนสคริปต์ teleprompter ขนาดเล็กเพื่อแก้ไขปัญหานั้น

คุณได้รับกล่องข้อความสำหรับเขียนหรือวางสคริปต์ของคุณ แล้วกดปุ่ม “แสดงตามที่แจ้ง” จะแสดงทีละย่อหน้าที่ด้านบนของหน้าจอเป็นแบบอักษรขนาดใหญ่ คุณสามารถคลิกเอกสารหรือกดแป้นลูกศรขวาเพื่อเดินหน้า และ Escape เพื่อกลับไปแก้ไข

สคริปต์ตัวเตือนในการดำเนินการ

หากคุณไปที่ https://codepo8.github.io/prompter/ คุณจะเห็นการทำงานจริงและ แหล่งที่มาก็อยู่บน GitHub ด้วย ไม่มีอะไรแฟนซีและ GitHub CoPilot เขียนถึงฉันมากมาย

บางคนควรสร้าง X สำหรับเว็บ” – ทำไมคุณถึงไม่ทำล่ะ สิ่งที่คุณต้องมีคือบัญชี GitHub

สัปดาห์ที่แล้ว Šime Vidas บ่นบน Twitter ว่ายากที่จะวางบล็อกข้อความ บนอุปกรณ์มือถือ ฉันเสนอให้ใช้ pastebin.com แต่ต้องมีการแตะหลายครั้งก่อนที่คุณจะวาง จากนั้น Šime ก็พูดติดตลกว่าเราควรสร้าง pastebinzero.com และทั้งหมดที่ต้องการก็คือแบบเต็มหน้าจอ



ดังนั้นฉันจึงใช้เวลาหนึ่งนาทีเพื่อสร้างสิ่งนี้ ในเบราว์เซอร์ของฉัน ไม่มีอะไรเลยนอกจากการเข้าสู่ระบบ GitHub ตั้งแต่การตั้งค่าไปจนถึงการเข้ารหัสด้วยการสนับสนุนการเติมข้อความอัตโนมัติไปจนถึงการโฮสต์ คุณสามารถเห็นมันในทุกสิริที่ https://codepo8.github.io/pastebinzero และดูรหัสที่ https://github.com/codepo8/pastebinzero

และคุณก็สามารถทำได้เช่นกัน นี่คือวิธีการ

หากคุณรู้สึกว่าต้องการเห็นสิ่งนี้เป็นวิดีโอ ให้ลองดูคำแนะนำสั้นๆ ต่อไปนี้ประมาณ 2 นาที

มิฉะนั้น ต่อไปนี้คือขั้นตอนในการเริ่มต้น สร้าง และโฮสต์โปรเจ็กต์ที่ ใช้ HTML /CSS/JavaScript บน GitHub

  • ไปที่โปรไฟล์ GitHub ของคุณ คลิกที่ “ที่เก็บ” และกดปุ่ม “ใหม่” แอนิเมชั่นการสร้างที่เก็บใหม่ใน GitHub
  • คุณต้องตั้งชื่อที่เก็บ เนื่องจากจะเป็นส่วนหนึ่งของ URL ในภายหลัง GitHub จะบอกคุณโดยอัตโนมัติว่าชื่อ repo นั้นยังมีอยู่หรือไม่ ตรวจสอบให้แน่ใจว่า repo ของคุณเป็นแบบสาธารณะและกด “สร้างที่เก็บ” หากคุณไม่ต้องการแสดงซอร์สโค้ดแต่ให้คนอื่นเห็นผลลัพธ์ คุณยังสามารถเก็บไว้เป็นส่วนตัวได้ หน้า GitHub ที่สร้างขึ้นจะเป็นแบบสาธารณะเสมอ แอนิเมชั่นการตั้งชื่อและสร้างที่เก็บใหม่
  • สิ่งนี้สร้างที่เก็บและคุณได้รับข้อมูลทั้งหมดว่าต้องทำอะไรต่อไป สำหรับตอนนี้ คลิกลิงก์ `สร้างไฟล์ใหม่’ แอนิเมชั่นการสร้างไฟล์ใหม่ในที่เก็บ GitHub
  • ตั้งชื่อไฟล์ `index.html` และป้อนอะไรก็ได้ที่เป็นเนื้อหา สิ่งนี้ไม่สำคัญในตอนนี้ เนื่องจากตัวแก้ไขนี้สามารถแก้ไขได้อย่างรวดเร็ว แต่ไม่ได้ตัดมัสตาร์ด กดปุ่ม ‘ยืนยันไฟล์ใหม่’ และคุณจะได้รับไฟล์ใหม่ แอนิเมชั่นการสร้างไฟล์ดัชนีในที่เก็บ
  • ไปที่แท็บ “การตั้งค่า” และเลือกรายการเมนู “หน้า” ตรวจสอบให้แน่ใจว่าได้เลือกสาขา “หลัก” จากเมนูแบบเลื่อนลงและกด “บันทึก” ทำให้สิ่งที่คุณกำลังทำงานอยู่สามารถใช้ได้เป็น URL บนเว็บ แอนิเมชั่นหน้าเผยแพร่บน GitHub
  • กลับไปที่ส่วน ‘รหัส’ ของที่เก็บแล้วกดปุ่ม `.` สิ่งนี้จะโหลด Visual Studio Code ในเบราว์เซอร์โดยเปิดโปรเจ็กต์นี้ ตอนนี้คุณสามารถเขียนโครงการของคุณโดยใช้พลังเต็มรูปแบบของ VS Code รวมถึงการเติมข้อความอัตโนมัติและ IntelliSense แอนิเมชั่นการเปิดโค้ด VS ในที่เก็บและแก้ไขไฟล์
  • เมื่อเสร็จแล้ว ไปที่ตัวเลือก “การควบคุมแหล่งที่มา” ในโค้ด VS ป้อนข้อความยืนยันแล้วคลิกเครื่องหมายถูก สิ่งนี้ยืนยันการเปลี่ยนแปลงที่เก็บ แอนิเมชั่นการเพิ่มข้อความยืนยันและส่งไฟล์
  • คุณสามารถดูว่าผลิตภัณฑ์ของคุณพร้อมจำหน่ายทางออนไลน์เมื่อใดบนแท็บ “การดำเนินการ” ของที่เก็บของคุณ ตรวจสอบเวิร์กโฟลว์ “การสร้างและการปรับใช้หน้า” มันแสดงสปินเนอร์สีเหลืองจนกว่าหน้าจะพร้อม เมื่อเปลี่ยนเป็นเครื่องหมายถูกสีเขียว หน้าของคุณก็พร้อม แอนิเมชั่นของกระบวนการสร้างที่แสดงในแท็บการดำเนินการของ GitHub

สำหรับการสาธิตวิดีโอ รหัสมีอยู่ที่ https://github.com/codepo8/greencircle และสามารถดูเวอร์ชันในเบราว์เซอร์ได้ที่ https://codepo8.github.io/greencircle โดยที่ `codepo8′ คือผู้ใช้ GitHub ของฉัน ชื่อและ `greencircle’ ชื่อของที่เก็บ

ทำไมไม่ codepen, jsbin, codesandbox, jsfiddle… ?

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

คุณสมบัติเหล่านี้จำนวนมากยังมีอยู่ในแพลตฟอร์มอื่น ๆ และฉันชอบที่คุณสามารถดูผลลัพธ์ของโครงการของคุณได้ทันทีเมื่อคุณเขียนโค้ด แต่สิ่งนี้ให้ความรู้สึกเหมือนเป็นโซลูชันแบบ end-to-end ที่ยอดเยี่ยมซึ่งต้องการการเข้าสู่ระบบเพียงครั้งเดียวที่ฉันต้องการสำหรับงานส่วนใหญ่ อนึ่ง หากคุณต้องการให้แสดงโปรเจ็กต์ของคุณใน VS Code ในเบราว์เซอร์ทันที คุณยังสามารถติดตั้งส่วนขยาย “Codeswing” :https://ift.tt/TRh5XqO