ตั้งค่า Brave เป็นเบราว์เซอร์เริ่มต้นจาก Command Line

ฉันเป็นแฟนตัวยงของเว็บเบราว์เซอร์ Brave มาหลายปีแล้ว เป็นมิตรกับการเข้ารหัส มีคุณลักษณะการบล็อกโฆษณาแบบเนทีฟ และแม้กระทั่งการผสานรวม Tor เมื่อใดก็ตามที่ฉันตั้งค่าระบบใหม่ ฉันจะกำหนดให้ Brave เป็นเบราว์เซอร์เริ่มต้นโดยอัตโนมัติ

คุณสามารถใช้คำสั่งเชลล์ต่อไปนี้เพื่อตั้งค่า Brave เป็นเบราว์เซอร์เริ่มต้น:

  
open -a "Brave Browser" --args --make-default-browser  

Brave เป็นเบราว์เซอร์ที่ยอดเยี่ยมพร้อมการท่องเว็บแบบก้าวหน้า ฉันแนะนำให้ทุกคนใช้ Brave!

โพสต์ Set Brave เป็นเบราว์เซอร์เริ่มต้นจาก Command Line ปรากฏครั้งแรกใน บล็อกของ David Walsh

CSS :ป้อนอัตโนมัติ

องค์ประกอบ input HTML ที่ป้อนอัตโนมัติเป็นการกระทำของผู้ใช้บ่อยครั้งที่สามารถปรับปรุงประสบการณ์ของผู้ใช้ได้อย่างมาก แย่จัง เราทุกคนกรอกรหัสผ่านและข้อมูลที่อยู่ของเราโดยอัตโนมัติ แต่เราจะควบคุมอะไรได้บ้างเมื่อองค์ประกอบ input ได้รับการป้อนอัตโนมัติ

ในการเพิ่มสไตล์ CSS ที่กำหนดเองให้กับอินพุตที่เนื้อหาได้รับการป้อนอัตโนมัติโดยเบราว์เซอร์ คุณสามารถใช้ :autofill pseudo-class:

  
อินพุต: ป้อนอัตโนมัติ {  
    เส้นขอบ: สีส้มทึบ 2px;  
}  

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

เนื่องจากเบราว์เซอร์และระบบปฏิบัติการต่างๆ ในบางครั้งกำหนดรูปแบบองค์ประกอบที่ป้อนอัตโนมัติแตกต่างกัน :autofill จึงเป็นประโยชน์อย่างมาก!

โพสต์ CSS :autofill ปรากฏครั้งแรกใน บล็อกของ David Walsh

ตรวจสอบเหตุการณ์และการเรียกใช้ฟังก์ชันผ่าน Console

แม้จะทำงานกับ Firefox ที่ซับซ้อนมากมาหลายปีแล้ว แต่ฉันก็ชอบการดีบัก console.log แบบเดิมๆ อยู่เสมอ การบันทึกสามารถให้เส้นทางการตรวจสอบเมื่อมีเหตุการณ์เกิดขึ้นและข้อความที่คุณสามารถแบ่งปันกับผู้อื่นได้ คุณทราบหรือไม่ว่า Chrome มี monitorEvents และ monitor เพื่อให้คุณสามารถรับบันทึกทุกครั้งที่มีเหตุการณ์เกิดขึ้นหรือมีการเรียกใช้ฟังก์ชัน

ติดตามเหตุการณ์

ส่งผ่านองค์ประกอบและชุดเหตุการณ์เพื่อ monitorEvents เพื่อรับบันทึกคอนโซลเมื่อเกิดเหตุการณ์:

  
// ตรวจสอบการคลิกใด ๆ ภายในหน้าต่าง  
monitorEvents (หน้าต่าง 'คลิก')  
  
// ตรวจสอบเหตุการณ์ keyup และ keydown บนร่างกาย  
monitorEvents(document.body, ['keyup', 'keydown'])  

คุณส่งผ่านอาร์เรย์ของเหตุการณ์เพื่อฟังหลายเหตุการณ์ได้ event บันทึกไว้แสดงถึงเหตุการณ์เดียวกับที่คุณจะเห็นหากคุณเรียก addEventListener ด้วยตนเอง

ตรวจสอบการเรียกใช้ฟังก์ชัน

วิธีการ monitor ช่วยให้คุณฟังการเรียกใช้ฟังก์ชันเฉพาะ:

  
// กำหนดฟังก์ชันตัวอย่าง  
ฟังก์ชัน myFn() { }  
//เฝ้าติดตาม  
จอภาพ (myFn)  
  
// การใช้งาน 1: การโทรพื้นฐาน  
myFn()  
// ฟังก์ชัน myFn เรียกว่า  
  
// การใช้ 2: ข้อโต้แย้ง  
myFn(1)  
// ฟังก์ชัน myFn ถูกเรียกด้วยอาร์กิวเมนต์: 1  

ฉันชอบที่คุณสามารถโต้แย้งได้ซึ่งเหมาะสำหรับการตรวจสอบ

ฉันมักจะเลือกใช้ monitorEvents ตรวจสอบแทนที่จะฝังคำสั่ง console ในโค้ด แต่ monitor และ monitorEvents ให้ทางเลือกสำหรับทั้งสองอย่าง

โพสต์ Monitor Events และ Function Calls ผ่าน Console ปรากฏครั้งแรกใน บล็อกของ David Walsh

CSS :อยู่นอกช่วง

แง่มุมหนึ่งของการพัฒนาเว็บไซต์ที่ฉันไม่ชอบมาโดยตลอดคือการทำงานกับแบบฟอร์ม โดยปกติแล้วองค์ประกอบของแบบฟอร์มจะจัดรูปแบบได้ยากเนื่องจากความแตกต่างของระบบปฏิบัติการและเบราว์เซอร์ และการตรวจสอบความถูกต้องอาจเป็นฝันร้าย โชคดีที่ HTML API ดั้งเดิมเพิ่มวิธีการในการปรับปรุงสถานการณ์การตรวจสอบแบบฟอร์ม

ด้วยองค์ประกอบ input[type=number] คุณสามารถเพิ่มแอตทริบิวต์ min และ max ได้ คุณลักษณะเหล่านั้นดีมาก แต่เบราว์เซอร์ไม่แสดงรูปแบบข้อผิดพลาดที่แตกต่างกัน หากตัวเลขเหล่านั้นอยู่นอกช่วง โชคดีที่เรามี :out-of-range :

  
/* จับคู่เมื่อตัวเลขไม่อยู่ในค่าต่ำสุดและสูงสุด */  
input[type=number]:out-of-range {  
  ขอบสี: สีแดง;  
}  

ขอบคุณ CSS :out-of-range นักพัฒนาสามารถจัดรูปแบบองค์ประกอบ input ตามสถานะค่าที่ถูกต้อง แม้จะมีการตรวจสอบความถูกต้องและการจัดรูปแบบ HTML คุณยังคงต้องทำการตรวจสอบฝั่งเซิร์ฟเวอร์ สุจริตคุณอาจต้องการตรวจสอบ JavaScript ที่นี่ด้วย

โพสต์ CSS :out-of-range ปรากฏครั้งแรกใน บล็อกของ David Walsh

git Force Push

Rebasing เป็นงานประจำสำหรับทุกคนที่ใช้ git บางครั้งเราใช้การรีเบสเพื่อแยกโค้ดของเราจากการเปลี่ยนแปลงครั้งล่าสุด หรือแม้กระทั่งเพื่อปล่อยคอมมิตจากสาขา

บ่อยครั้งเมื่อพยายามผลักดันหลังจากทำการรีเบส คุณจะเห็นสิ่งต่อไปนี้:

  
คำใบ้: การอัปเดตถูกปฏิเสธเนื่องจากส่วนปลายของสาขาปัจจุบันของคุณอยู่ข้างหลัง  
คำใบ้: คู่หูระยะไกลของมัน รวมการเปลี่ยนแปลงระยะไกล (เช่น  
คำใบ้: 'git pull ...') ก่อนที่จะกดอีกครั้ง  
คำใบ้: ดู 'หมายเหตุเกี่ยวกับการกรอไปข้างหน้า' ใน 'git push --help' สำหรับรายละเอียด  

นักพัฒนาทั่วไปจะใช้แฟล็ก --force หรือ -f ระหว่างการ push เพื่อบังคับให้เปลี่ยนโค้ดแบบพุช:

  
git push origin my-branch --force  
# หรือ  
git push origin my-branch -f  

ฉันเพิ่งประหลาดใจเมื่อพบว่าคุณสามารถนำหน้าชื่อสาขาด้วย + เพื่อบังคับ:

  
git push origin +my-branch  

ไวยากรณ์ + น่าสนใจ แต่ดูเหมือนไม่ใช้งานง่าย ดังนั้นจึงไม่ใช่วิธีปฏิบัติที่ฉันจะใช้ แต่นั่นไม่ได้หมายความว่าคุณไม่ควรทำ!

โพสต์ git Force Push ปรากฏครั้งแรกใน บล็อกของ David Walsh

วิธีฉีด Global ด้วยส่วนขยายของเว็บในไฟล์ Manifest V3

สำหรับผู้ที่ไม่คุ้นเคยกับโลกของการพัฒนาส่วนขยายเว็บ พายุกำลังก่อตัวขึ้นกับ Chrome Google จะหยุดการสนับสนุนรายการเวอร์ชัน 2 ซึ่งเป็นสิ่งที่ส่วนขยายเว็บส่วนใหญ่ใช้ Manifest เวอร์ชัน 3 เห็นการเปลี่ยนแปลงมากมาย แต่การเปลี่ยนแปลงที่ใหญ่ที่สุดคือการย้ายจากสคริปต์เบื้องหลังแบบถาวรไปยังพนักงานบริการ นี่…คือ…เป็น…ครั้งใหญ่…เปลี่ยนแปลง

การเปลี่ยนแปลงจากไฟล์ Manifest เวอร์ชัน 2 เป็นเวอร์ชัน 3 รวมถึง:

  • เปลี่ยนจากสคริปต์เบื้องหลังแบบถาวรไปเป็นพนักงานบริการที่สามารถตายได้หลังจาก 5 นาที
  • ห้ามใช้องค์ประกอบ <iframe> หรือ DOM API อื่นๆ จากพนักงานบริการ
  • API ทั้งหมดได้กลายเป็น Promise-based
  • ข้อจำกัดเกี่ยวกับเนื้อหาจากมุมมองของ CSP

ฟังก์ชันหนึ่งที่ส่วนขยายเว็บมักใช้คือการเรียกใช้สคริปต์เมื่อโหลดหน้าเว็บใหม่แต่ละครั้ง สำหรับส่วนขยายของเว็บ เช่น MetaMask เราจำเป็นต้องจัดเตรียม window.ethereum ส่วนกลางสำหรับ dApps เพื่อใช้งาน แล้วเราจะทำอย่างนั้นกับ manifest เวอร์ชัน 3 ได้อย่างไร?

ใน Chrome v102 นักพัฒนาสามารถกำหนดคุณสมบัติของ world ด้วยค่า isolated มาหรือ main (ในหน้าเว็บ) สำหรับสคริปต์เนื้อหา ในขณะที่นักพัฒนาควรกำหนด content_scripts ในไฟล์ manifest.json ของส่วนขยาย ค่า main ใช้งานได้จริงเท่านั้น (เนื่องจากข้อบกพร่องของ Chrome) เมื่อคุณกำหนดโดยทางโปรแกรมจากพนักงานบริการ:

  
รอ chrome.scripting.registerContentScripts([  
  {  
    id: 'inpage',  
    ตรงกัน: ['http://*/*', 'https://*/*'],  
    js: ['in-page.js'],  
    runAt: 'document_start',  
    โลก: 'หลัก',  
  },  
]);  

ในตัวอย่างข้างต้น in-page.js จะถูกฉีดและดำเนินการภายในแท็บเนื้อหาหลักทุกครั้งที่มีการโหลดหน้าใหม่ ไฟล์ in-page.js นี้ตั้งค่า window.ethereum สำหรับ dApps ทั้งหมดที่จะใช้ หาก world undefined หรือ isolated สคริปต์จะยังคงทำงาน แต่จะทำเช่นนั้นในสภาพแวดล้อมที่แยกออกมา

งาน Manifest เวอร์ชัน 3 นั้นค่อนข้างยาก ดังนั้นโปรดกอดผู้พัฒนาส่วนขยายที่ใกล้เคียงที่สุดของคุณ มีการเปลี่ยนแปลงเชิงโครงสร้างครั้งใหญ่มากมาย และการนำการเปลี่ยนแปลงเหล่านั้นไปทำได้ยากมาก!

โพสต์ How to Inject a Global with Web Extensions in Manifest V3 ปรากฏครั้งแรกใน บล็อกของ David Walsh

ปลั๊กอินช่วยปรับปรุงประสบการณ์การแก้ไขแบบ WYSIWYG ได้อย่างไร (สนับสนุน)


ภาพโดย JK_Studio จาก Pixabay

โปรแกรมแก้ไขแบบ WYSIWYG เป็นหนึ่งในองค์ประกอบหลักของระบบจัดการเนื้อหา (CMS) โปรแกรมแก้ไข HTML แบบ WYSIWYG ที่มีโค้ดอย่างดีและเต็มไปด้วยคุณลักษณะ สามารถแยกความแตกต่างระหว่างสิ่งที่ผู้ใช้ CMS ชื่นชอบและสิ่งที่ไม่สามารถต้านทานได้

แม้ว่าโปรแกรมแก้ไข WYSIWYG ทั้งหมดจะมีชุดฟังก์ชันพื้นฐาน แต่พลังของปลั๊กอินช่วยปรับปรุงประสบการณ์การแก้ไข ปลั๊กอินช่วยให้โปรแกรมแก้ไข WYSIWYG ทำสิ่งต่างๆ ได้มากขึ้นและมอบคุณลักษณะขั้นสูงให้กับผู้ใช้

ดังนั้นจึงเป็นเรื่องสำคัญที่จะต้องพิจารณาปลั๊กอินบางตัวที่ทำให้โปรแกรมแก้ไขแบบ WYSIWYG บางตัวอยู่เหนือตัวอื่นๆ สิ่งสำคัญคือต้องตรวจสอบว่าคุณสามารถเพิ่มปลั๊กอินเหล่านี้ได้ง่ายเพียงใด

ในบทความนี้ เราจะพาคุณเข้าสู่โลกของตัวแก้ไขและปลั๊กอินแบบ WYSIWYG เพื่อให้คุณสามารถยกระดับการแก้ไขของผู้ใช้ไปอีกระดับ

ไลบรารีปลั๊กอิน

Froala มีปลั๊กอินมากมายให้ดาวน์โหลดบนเว็บไซต์ของพวกเขา:

โปรแกรมแก้ไข WYSIWYG ที่ยอดเยี่ยมควรมีปลั๊กอินจำนวนมากที่รวมและใช้งานได้ง่าย เนื่องจากยิ่งมีปลั๊กอินมากเท่าใด ตัวแก้ไขก็จะยิ่งใช้งานได้หลากหลายมากขึ้นเท่านั้น และกรณีการใช้งานก็สามารถรองรับได้มากขึ้น

ยิ่งไปกว่านั้น ยิ่งปลั๊กอินที่ใช้งานง่ายและเป็นมิตรกับนักพัฒนามากเท่าใด การปรับใช้ก็จะยิ่งเร็วขึ้นเท่านั้น

รูปภาพด้านล่างแสดงให้เห็นว่าโปรแกรมแก้ไขแบบ WYSIWYG มักจะแสดงรายการปลั๊กอินบนเว็บไซต์และเอกสารประกอบ ดังนั้น ผู้ใช้จะพบคุณลักษณะเพิ่มเติมที่ต้องการได้ไม่ยาก

ปลั๊กอินที่ได้รับความนิยมและทรงพลังที่สุดบางส่วนมีดังนี้:

  • ลากได้ – ลากและวางเนื้อหาที่หลากหลาย ตั้งแต่รูปภาพไปจนถึงวิดีโอ ข้ามช่องเนื้อหา
  • Code Beautifier – ปรับปรุงการจัดรูปแบบโค้ดในเนื้อหาด้วยสายตา ซึ่งมีความสำคัญเป็นพิเศษสำหรับบล็อกเกอร์ด้านเทคโนโลยี
  • ตัวจัดการไฟล์ – ปลั๊กอินพิเศษสำหรับจัดการรูปภาพและไฟล์อื่นๆ
  • Image TUI – ให้คุณเพิ่มฟิลเตอร์และลายน้ำให้กับภาพได้ทันที
  • รองรับ Markdown – เขียนและจัดรูปแบบเนื้อหาด้วย Markdown — ประหยัดเวลาได้มากสำหรับผู้สร้างเนื้อหาจำนวนมาก
  • ตัวตรวจสอบการ สะกดและไวยากรณ์ – ตรวจสอบให้แน่ใจว่าผู้ใช้จะสามารถระบุและแก้ไขข้อผิดพลาดทางไวยากรณ์และการสะกดคำขณะพิมพ์ได้
  • การทำงานร่วมกันแบบเรียลไทม์ – ให้ผู้ใช้ทำงานร่วมกัน สร้าง ตรวจสอบ แก้ไขเนื้อหา และพูดถึงผู้อื่นแบบเรียลไทม์

การใช้ปลั๊กอิน

มาดูวิธีที่คุณสามารถเพิ่มปลั๊กอินในโปรแกรมแก้ไขแบบ WYSIWYG ได้ ในกรณีส่วนใหญ่ ในการเข้าถึงปลั๊กอิน คุณจะต้องแทรกไฟล์ JavaScript และ CSS เท่านั้น:

 <!-- รวมไฟล์ CSS ของปลั๊กอิน Tables -->  
<link rel="stylesheet" href="../css/plugins/table.min.css">  
  
<!-- รวมไฟล์ JS ปลั๊กอินของ Tables -->  
<script src="../js/plugins/table.min.js"></script>  

จากนั้น ในการรวมปลั๊กอินในอินสแตนซ์ตัวแก้ไข ให้เพิ่มลงในคีย์ pluginsEnabled (หรือเทียบเท่าในโปรแกรมแก้ไขที่คุณต้องการ):

 ตัวแก้ไข const = ใหม่ FroalaEditor ('#editor-element', {  
    pluginsEnabled: ['ตาราง'],  
    // ... config เพิ่มเติม  
});  

นั่นคือทั้งหมดที่ใช้ในการเริ่มใช้ปลั๊กอินตัวแก้ไข WYSIWYG ที่คุณเลือก คุณสามารถลองใช้ตัวอย่างส่วนขยายแบบลากแล้ววางที่ยอดเยี่ยมนี้เพื่อดูเพิ่มเติมว่าปลั๊กอินมีประโยชน์เพียงใด

การสร้างปลั๊กอิน

โปรแกรมแก้ไขแบบ WYSIWYG บางตัวช่วยให้คุณสร้างปลั๊กอินได้ในไม่กี่ขั้นตอนง่ายๆ ตัวอย่างเช่น นี่คือโค้ดรูปแบบทั่วไปที่ลดขนาดลงสำหรับการสร้างปลั๊กอินในตัวแก้ไข:

 (ฟังก์ชัน (FroalaEditor) {  
  // เพิ่มตัวเลือกสำหรับปลั๊กอินของคุณ  
  FroalaEditor.DEFAULTS = Object.assign (FroalaEditor.DEFAULTS, {  
    myOption: เท็จ  
  });  
  
  // กำหนดปลั๊กอิน  
  // พารามิเตอร์ตัวแก้ไขคืออินสแตนซ์ปัจจุบัน  
  FroalaEditor.PLUGINS.myPlugin = ฟังก์ชัน (ตัวแก้ไข) {  
    // ตัวแปรส่วนตัวมองเห็นได้ภายในขอบเขตของปลั๊กอินเท่านั้น  
    var private_var = 'ปลั๊กอินที่ยอดเยี่ยมของฉัน';  
  
    // เมธอดส่วนตัวที่มองเห็นได้เฉพาะในขอบเขตของปลั๊กอิน  
    ฟังก์ชัน _privateMethod () {  
      console.log (ส่วนตัว_var);  
    }  
  
    // เมธอดสาธารณะที่มองเห็นได้ในขอบเขตอินสแตนซ์  
    ฟังก์ชั่น publicMethod () {  
      console.log (_privateMethod());  
    }  
  
    // จุดเริ่มต้นสำหรับปลั๊กอินของคุณ  
    ฟังก์ชัน _init () {  
      // คุณสามารถเข้าถึงตัวเลือกใดก็ได้จากเอกสารประกอบหรือตัวเลือกที่คุณกำหนดเอง  
      console.log (editor.opts.myOption)  
  
      // เรียกวิธีการใดก็ได้จากเอกสาร  
      // editor.methodName(พารามิเตอร์);  
  
      // คุณสามารถฟังเหตุการณ์ใดก็ได้จากเอกสาร  
      // editor.events.add('contentChanged', (params) => {});  
    }  
  
    // เปิดเผยวิธีการสาธารณะ หาก _init ไม่เป็นสาธารณะ ปลั๊กอินจะไม่ถูกเตรียมใช้งาน  
    // วิธีสาธารณะสามารถเข้าถึงได้ผ่านตัวแก้ไข API:  
    // editor.myPlugin.publicMethod();  
    กลับ {  
      _ในนั้น,  
      วิธีสาธารณะ  
    }  
  }  
})(FroalaEditor);  

อย่างที่คุณเห็น การทำให้ปลั๊กอินของคุณมีโครงสร้างที่ค่อนข้างตรงไปตรงมา หากคุณมีตัวแก้ไขแบบ WYSIWYG ที่เหมาะสม

Froala เป็น โปรแกรมแก้ไข HTML ที่มีไลบรารีปลั๊กอิน ทำให้เป็นตัวเลือกที่ดีสำหรับตัวแก้ไข WYSIWYG ใน CMS ของคุณ

ที่เก็บปลั๊กอินที่มีอยู่มีฟังก์ชันการทำงานที่ยอดเยี่ยม และการสร้างปลั๊กอินด้วย Froala นั้นง่ายมาก ปลั๊กอินแก้ไข Markdown เพียงอย่างเดียวก็คุ้มค่าสำหรับนักเขียนเช่นฉัน!

ดังนั้นคุณมีมัน คุณได้เรียนรู้เกี่ยวกับปลั๊กอินที่ดีที่สุดบางตัวที่คุณควรมองหาในตัวแก้ไขแบบ WYSIWYG การเพิ่มและการใช้ปลั๊กอินในตัวแก้ไขเหล่านี้ และแม้แต่การสร้างปลั๊กอินของคุณ

ซึ่งน่าจะเพียงพอสำหรับคุณในการแก้ไขเนื้อหาของผู้ใช้ด้วยตัวแก้ไขแบบ WYSIWYG ในระดับที่สูงขึ้น

โพสต์ How Plugins Enhance The WYSIWYG Editing Experience (Sponsored) ปรากฏตัวครั้งแรกใน บล็อกของ David Walsh

JavaScript Event.defaultPrevented

ไม่ว่าคุณจะเริ่มต้นด้วยคุณสมบัติ on_____ เก่าหรือ addEventListener คุณทราบดีว่าเหตุการณ์ขับเคลื่อนประสบการณ์ของผู้ใช้ใน JavaScript สมัยใหม่ หากคุณเคยทำงานกับเหตุการณ์ คุณทราบดีว่า preventDefault( preventDefault() และ stopPropagation() มักใช้เพื่อจัดการเหตุการณ์ สิ่งหนึ่งที่คุณอาจไม่รู้: มี defaultPrevented พร็อพเพอร์ตี้ในกิจกรรม!

พิจารณาบล็อกของรหัสต่อไปนี้:

  
// เฉพาะกับลิงค์  
ลิงก์ const = document.querySelector('#my-link');  
link.addEventListener('คลิก', e => e.preventDefault());  
  
// ขอบเขตเอกสารที่ใหญ่ขึ้น  
document.addEventListener('คลิก', documentClickHandler);  
ฟังก์ชัน documentClickHandler (เหตุการณ์) {  
    if (event.defaultPrevented) {// การใช้คุณสมบัติ  
        // ทำสิ่งหนึ่งหากมีการจัดการการคลิก  
    }  
    อื่น {  
        // อย่างอื่นทำสดใหม่  
    }  
}  

เมื่อ preventDefault ถูกเรียกในเหตุการณ์ที่กำหนด คุณสมบัติ defaultPrevented จะถูกสลับ true เนื่องจากการ เผยแพร่ เหตุการณ์ เหตุการณ์จึงพุ่งสูงขึ้นด้วยค่า defaultPrevented นี้

ฉันจัดการงานต่างๆ มาสองทศวรรษแล้ว และไม่รู้ว่าสถานที่นี้มีอยู่จนถึงตอนนี้ สิ่งที่ยอดเยี่ยมเกี่ยวกับ defaultPrevented ก็คือ มันอยู่กับเหตุการณ์โดยไม่จำเป็นต้องติดตามทั่วโลก!

โพสต์ JavaScript Event.defaultPrevented ปรากฏตัวครั้งแรกใน บล็อกของ David Walsh

7 วิธีในการเพิ่มประสิทธิภาพสำหรับไซต์ WordPress ของคุณ (สนับสนุน)

บล็อก เว็บไซต์ข่าว และเว็บไซต์ข้อมูลส่วนใหญ่ทำงานบน WordPress ในขณะที่ทีมนักพัฒนาและชุมชน WordPress พยายามอย่างเต็มที่เพื่อให้แน่ใจว่า wordPress ทำงานได้อย่างมีประสิทธิภาพ มีแนวทางปฏิบัติมากมายที่คุณสามารถนำไปใช้เพื่อให้เว็บไซต์ของคุณทำงานได้รวดเร็ว ลองดูที่บางส่วนของพวกเขา!

ใช้ปลั๊กอิน Cloudinary WordPress สำหรับสื่อ

Cloudinary คือบริการการแปลง การส่งมอบ และการเพิ่มประสิทธิภาพสื่อแบบไดนามิกที่สุดบนอินเทอร์เน็ต ด้วย Cloudinary คุณสามารถ:

  • นำเสนอภาพ เสียง และวิดีโอที่ปรับให้เหมาะสมตามอุปกรณ์ แพลตฟอร์ม และเบราว์เซอร์
  • ใช้ Cloudinary API หรือพารามิเตอร์สตริงการสืบค้นเพื่อปรับแต่งสื่อได้ทันที
  • ใช้ประโยชน์จากไลบรารี JavaScript ฝั่งไคลเอ็นต์เพื่อสร้างโปรแกรมดูรูปภาพ สไลด์โชว์ และอื่นๆ

ปลั๊กอิน Cloudinary WordPress ทำให้การใช้ Cloudinary ในเว็บไซต์ของคุณง่ายยิ่งขึ้นด้วยการอัปโหลดโดยตรงไปยัง Cloudinary และวิธีการปรับเปลี่ยนสื่อของคุณ

ml_collections_newsearch.png

ml_asset_management.png

ประโยชน์ทั้งหมดที่ Cloudinary มอบให้ ซึ่งรวมอยู่ในเว็บไซต์ WordPress ของคุณโดยตรง ความพยายามน้อยที่สุดในการติดตั้ง ฟังก์ชันการทำงานสูงสุด และความยืดหยุ่น!

ขี้เกียจโหลดรูปภาพ

เทคนิคการโหลดรูปภาพแบบ Lazy Loading มีมานานหลายทศวรรษแล้ว แต่ข้อมูลจำเพาะ HTML เพิ่งเพิ่มวิธีการโหลดรูปภาพแบบ Lazy Loading ด้วย JavaScript:

 <img src="path/to/image.jpg" lazyload /> 

การโหลดรูปภาพของคุณอย่างขี้เกียจจะช่วยเพิ่มประสิทธิภาพได้อย่างมาก — ทำไมคุณจึงไม่จำเป็นต้องแสดงรูปภาพ!

ลบไฟล์ปลั๊กอินที่ไม่จำเป็น

ปลั๊กอิน WordPress อาจมีประโยชน์อย่างมหาศาลสำหรับการทำงาน แต่บ่อยครั้งที่ปลั๊กอินจะแทรกทรัพยากรที่อาจทำให้เว็บไซต์ของคุณช้าลง WordPress มี API เพื่อลบไฟล์ที่ไม่ต้องการเหล่านี้:

 // ออกไปจากเพจฉันซะ! wp_dequeue_style('รูปแบบเลขหน้า'); wp_dequeue_script('jquery'); 

อย่าปล่อยให้ปลั๊กอินเหล่านี้ทำทุกอย่างที่ต้องการ — ควบคุมสิ่งที่พวกเขาสามารถโหลดได้ในแต่ละหน้า!

ใช้ปลั๊กอินแคชเนื้อหา

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

เพื่อเพิ่มประสิทธิภาพของ WordPress คุณสามารถใช้ปลั๊กอินแคชของ WordPress จำนวนเท่าใดก็ได้ บางอย่างง่ายมากในขณะที่บางอย่างค่อนข้างสูง บางหน้าสร้างหน้า HTML แบบคงที่ ผลลัพธ์อื่น ๆ ของฐานข้อมูลแคช ในขณะที่บางหน้าเขียนกฎที่เหมือน . .htaccess แบบไดนามิกเพื่อให้ไซต์ของคุณเร็วที่สุด

ป้องกัน Hotlinking ของไฟล์

Hotlinking ของไฟล์เป็นภาระใหญ่ในเว็บไซต์ WordPress ของคุณ นอกเหนือจากการที่เว็บไซต์ที่กระทำผิดเป็นแนวปฏิบัติที่น่ากลัว เวทย์มนตร์ . .htaccess เพียงเล็กน้อยสามารถป้องกันไม่ให้ฮอตลิงค์เกอร์ใช้ทรัพยากรเซิร์ฟเวอร์ของคุณ:

 RewriteEngine บน เขียนใหม่ %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^https://davidwalsh.name/.*$ [NC] ใหม่! RewriteRule .*.(png|gif|jpe?g)$ [F,NC] 

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

เพิ่มประสิทธิภาพการส่ง JavaScript และ CSS

ปลั๊กอิน Cloudinary WordPress เพิ่มประสิทธิภาพการส่งรูปภาพ วิดีโอ และสื่ออื่นๆ แต่ไม่ใช่ทรัพย์สินคงที่ เช่น ไฟล์ JavaScript และ CSS เนื่องจากเนื้อหาเหล่านี้แทบไม่มีการเปลี่ยนแปลงแต่อาจมีผลกระทบอย่างมากต่อความเร็วในการดาวน์โหลดไซต์ ขอแนะนำให้นักพัฒนาใช้ CDN

บล็อกนี้ใช้การนำส่งเนื้อหาที่ปรับให้เหมาะสมจาก CloudFlare แต่มี CDN ที่น่าทึ่งอีกจำนวนหนึ่งที่สามารถเพิ่มประสิทธิภาพเว็บไซต์ของคุณสำหรับตำแหน่ง ประเภทสื่อ การบีบอัด และอื่นๆ อีกมากมาย!

เปิดใช้งานการบีบอัด GZip สำหรับเนื้อหาที่โฮสต์ในเครื่อง

ขอแนะนำให้แสดงไฟล์ JavaScript และ CSS แบบคงที่ผ่าน CDN แต่ CDN ไม่ใช่ตัวเลือกสำหรับไฟล์ทั้งหมดเสมอไป การบีบอัด GZip ซึ่งเป็นวิธีบีบอัดเนื้อหาเพื่อการดาวน์โหลดที่เร็วขึ้น เป็นวิธีที่ยอดเยี่ยมในการปรับปรุงประสิทธิภาพของเนื้อหา:

 gzip บน; gzip_proxied ใด ๆ; gzip_types ข้อความ/ข้อความธรรมดา/ข้อความ xml/แอปพลิเคชัน css/x-javascript; 

การบีบอัด GZip ทำงานได้อย่างมหัศจรรย์เพื่อลดขนาดไฟล์ของคุณเมื่อคุณไม่มี CDN ที่จะทำเพื่อคุณ!

การรักษาเว็บไซต์ WordPress ของคุณให้ฉับไวเป็นสิ่งสำคัญอย่างยิ่งสำหรับ SEO และความสะดวกของผู้ใช้ ส่วนที่ดีที่สุดคือแนวทางปฏิบัติเหล่านี้ใช้เวลาเพียงไม่กี่นาทีในการดำเนินการ และถ้าคุณต้องการการบีบอัด การส่ง และความยืดหยุ่นของรูปภาพที่ดีที่สุด คุณจะต้องใช้ ปลั๊กอิน Cloudinary WordPress เพื่อทำสิ่งนี้!

โพสต์ 7 วิธีในการเพิ่มประสิทธิภาพสำหรับไซต์ WordPress ของคุณ (สนับสนุน) ปรากฏตัวครั้งแรกใน บล็อกของ David Walsh

วิธีรับข้อมูล Manifest ส่วนขยาย

การทำงานกับส่วนขยายของเว็บอาจดูดุร้าย ด้านหนึ่งคุณแค่เข้ารหัสเว็บไซต์ อีกด้านหนึ่ง คุณถูกจำกัดตามที่เบราว์เซอร์บอกว่าคุณสามารถทำได้ในสภาพแวดล้อมการดำเนินการส่วนขยาย การเปลี่ยนแปลงหนึ่งในสภาพแวดล้อมนั้นกำลังจะมาในเดือนมกราคม 2023 — ผลักดันให้ส่วนขยายย้ายไปที่รายการเวอร์ชัน 3 ฉันเพิ่งสงสัยว่าส่วนขยายยอดนิยมอื่นๆ ได้เสร็จสิ้นการอัปเดตเวอร์ชัน 3 แล้วหรือไม่

การดำเนินการคำสั่งต่อไปนี้ในหน้าพื้นหลัง (ไฟล์ Manifest เวอร์ชัน 2) หรือพนักงานบริการ (เวอร์ชัน 3) จะให้รายการของส่วนขยายแก่คุณ:

 chrome.runtime.getManifest() 

การเรียก getManifest ส่งคืนอ็อบเจ็กต์ขนาดใหญ่ที่มีรายละเอียดรายการของส่วนขยาย นี่คือสิ่งที่คุณจะเห็นสำหรับส่วนขยายเบราว์เซอร์ MetaMask:

 {     "ผู้เขียน": "https://metamask.io",     "พื้นหลัง": {         "หน้า": "background.html",         "ถาวร": จริง     },     "browser_action": {         "default_icon": {             "16": "images/icon-16.png",             "19": "images/icon-19.png",             "32": "images/icon-32.png",             "38": "images/icon-38.png",             "64": "images/icon-64.png",         },         "default_popup": "popup.html",         "default_title": "MetaMask"     },     "คำสั่ง": {         "_execute_browser_action": {             "suggested_key": {                 "chromeos": "Alt+Shift+M",                 "linux": "Alt+Shift+M",                 "mac": "Alt+Shift+M",                 "windows": "Alt+Shift+M"             }         }     },     "content_scripts": [         {             "all_frames": จริง             "เจส": [                 "disable-console.js",                 "globalthis.js",                 "lockdown-install.js",                 "ล็อกดาวน์-รัน.js",                 "lockdown-more.js",                 "contentscript.js"             ],             "การแข่งขัน": [                 "ไฟล์://*/*",                 "http://*/*",                 "https://*/*"             ],             "run_at": "document_start"         }     ],     "current_locale": "en_US",     "default_locale": "th",     "description": "กระเป๋าเงิน Ethereum ในเบราว์เซอร์ของคุณ",     "externally_connectable": {         "รหัส": [             "*"         ],         "การแข่งขัน": [             "https://metamask.io/*"         ]     },     "ไอคอน": {         "16": "images/icon-16.png",         "19": "images/icon-19.png",         "32": "images/icon-32.png",         "38": "images/icon-38.png",         "48": "images/icon-48.png",         "64": "images/icon-64.png",     },     "manifest_version": 2,     "minimum_chrome_version": "66",     "ชื่อ": "MetaMask",     "การอนุญาต": [         "พื้นที่จัดเก็บ",         "พื้นที่เก็บข้อมูลไม่จำกัด",         "คลิปบอร์ดเขียน",         "http://localhost:8545/",         "https://*.infura.io/",         "https://lattice.gridplus.io/*",         "แอคทีฟแท็บ",         "คำขอเว็บ",         "*://*.eth/",         "การแจ้งเตือน"     ],     "short_name": "MetaMask",     "update_url": "https://clients2.google.com/service/update2/crx",     "เวอร์ชัน": "10.16.1" } 

ส่วนขยายเว็บจำนวนมากยังคงใช้รายการเวอร์ชัน 2 อยู่ ดังนั้นนักพัฒนาส่วนขยายจำนวนมากจึงพยายามทำงานรายการเวอร์ชัน 3 ให้เสร็จสิ้น!

โพสต์ How to Get Extension Manifest Information ปรากฏครั้งแรกใน บล็อกของ David Walsh