โฮมเพจ » Toolkit - หน้า 20

    Toolkit - หน้า 20

    นักออกแบบคำนวณอัตราส่วนภาพที่สมบูรณ์แบบด้วย RatioBuddy
    นักออกแบบทราบถึงความเจ็บปวดจากการพยายามทำ จับคู่ภาพกับอัตราส่วน. สิ่งนี้เกิดขึ้นตลอดเวลาเมื่อคุณกำลังสร้างธีม WordPress และพยายามหาขนาดภาพที่ดีที่สุดสำหรับภาพขนาดย่อ. แต่มีงานที่คล้ายกันหลายสิบรายการ การหาอัตราส่วนภาพที่เหมาะสม ของรูปภาพวิดีโอหรือองค์ประกอบแบบฝัง ขอบคุณ, RatioBuddy สามารถช่วย. แอปพลิเคชันเว็บขนาดเล็กนี้ช่วยให้คุณ คำนวณอัตราส่วนภาพของอะไรก็ได้ แบบไดนามิกจากเบราว์เซอร์ของคุณ สิ่งที่คุณต้องการคือการเข้าถึงอินเทอร์เน็ตและขนาดที่เหมาะสมที่คุณต้องการ (หรืออัตราส่วนที่ต้องการ). ในการเริ่มต้นสิ่งที่คุณทำคือ ป้อนขนาดภาพปัจจุบัน หรือขนาดที่คุณต้องการใช้ ลองทำตัวอย่างสำหรับการสร้างชุดรูปแบบ WordPress และเลือกขนาดรูปภาพที่แนะนำ. สมมติว่าคุณต้องการให้ภาพเด่นของคุณวัดความกว้าง 800px สูง 500px ป้อนสิ่งนี้ลงใน RatioBuddy แล้วคุณจะได้อัตราส่วนกว้างยาวเท่ากับ 8:...
    การแสดงข้อมูลด้วยกราฟ CSS แผนภูมิและอื่น ๆ
    การนำเสนอข้อมูลที่ดีเป็นสิ่งสำคัญในอุตสาหกรรมเว็บเพราะเป็นกุญแจสำคัญที่ช่วยให้ผู้เข้าชมเข้าใจเนื้อหาของคุณภายในไม่กี่วินาที. ยิ่งผู้เข้าชมของคุณเข้าใจเนื้อหาบนเว็บของคุณง่ายขึ้นหรือเร็วขึ้นเท่าใดมันก็ยิ่งสะท้อนให้เห็นถึงความเป็นมืออาชีพของคุณในการจัดการงานนำเสนอ. เกณฑ์สำหรับการนำเสนอข้อมูลที่ดีควรเรียบง่าย แต่มีความหมายบรรยายอย่างละเอียด แต่จัดการเพื่อรักษาความสนใจของผู้ใช้ไม่ต้องกังวลกับเนื้อหาย่อยสะดวกในการเปรียบเทียบและสุดท้ายผู้ใช้ควรตัดสินใจหรือสรุปข้อมูลที่นำเสนอได้อย่างง่ายดาย ยากเท่าที่เกณฑ์บ้าเหล่านี้อาจฟังดูเป็นไปได้. ในโพสต์ของวันนี้เราต้องการที่จะนั่งสำหรับวิธีการต่างๆเพื่อความสวยงามและ เครื่องมือสร้างภาพข้อมูลที่สร้างสรรค์ซึ่งมีพื้นฐานมาจาก CSS / HTML. ใช่ เพียงแค่คัดลอกและวางจากนั้นปรับแต่งตามความต้องการของคุณ แผนภูมิเหล่านี้สามารถเป็นกราฟแท่ง CSS ซึ่งแสดงข้อมูลในรูปแบบแนวนอน / แนวตั้ง, รายการแบบหล่นลงเพื่อจัดระเบียบข้อมูลของคุณหรือแม้กระทั่งกราฟเส้นและแผนภูมิวงกลม! คุณต้องการมากขึ้น? เลื่อนต่อไป! Barchart แนวนอน วิธีง่ายๆในการแสดงตัวเลขทางสถิติเป็นภาพรวมของแผนภูมิแท่งที่สามารถเข้าถึงได้นี้โดยใช้ CSS บาร์จะคำนวณค่าเซลล์และป้ายกำกับที่ใช้ ส่วนหัวของตารางที่ใช้โดยใช้คลาสข้อความ aural CSSplay แผนภูมิแท่งเป็นรายการที่ชัดเจนพร้อมสไตล์และคลาสที่กำหนดในแต่ละบรรทัด...
    กำหนดค่าเครื่องมือนักพัฒนาซอฟต์แวร์ Chrome ด้วยผู้แต่ง DevTools
    หากคุณเป็นผู้พัฒนาส่วนหน้าคุณควรทราบเกี่ยวกับแผง DevTools ของ Google Chrome แล้ว สิ่งนี้มาพร้อมกับเครื่องมือเสนอ Chrome ทุกรุ่นสำหรับการแก้ไข HTML / CSS ดิบพร้อมกับคอนโซล JS และความสามารถในการจัดการ DOM แบบเรียลไทม์. ปลั๊กอิน Chrome ฟรีใหม่ที่ชื่อว่า DevTools Author ให้คุณปรับแต่งแผง DevTools ด้วยโครงร่างสีไวยากรณ์เพิ่มเติมแบบอักษรพิเศษและขนาดแบบอักษรที่กำหนดเอง. การตั้งค่าค่อนข้างตรงไปตรงมา คุณเพิ่งติดตั้งส่วนขยายจาก Chrome Webstore แล้วไปที่ลิงก์นี้ในเบราว์เซอร์ของคุณ:...
    ฟิลด์ป้อนข้อมูลเวลาที่กำหนดเองด้วย jQuery Timedropper
    บางเว็บฟอร์มต้องการ อินพุตตามวันที่ และปลั๊กอินตัวใช้เลือกวันที่สามารถช่วยได้ แต่สิ่งที่เกี่ยวกับ อินพุตเวลา? ด้วยปลั๊กอิน jQuery ฟรี Timedropper, คุณสามารถเพิ่ม ตัวเลือกเวลาที่กำหนดเอง สำหรับการตั้งค่าการนัดหมายกำหนดเวลาการโทรหรือทุกสิ่งที่คุณต้องการ. มันง่ายอย่างเหลือเชื่อและคุณ ต้องการไลบรารี jQuery เท่านั้น ที่จะเริ่มต้น. เมื่อคุณติดตั้งไลบรารีนั้นแล้วคุณสามารถเพิ่มไฟล์ Timedropper JS / CSS และปล่อยให้มันทำงานได้ แค่นั้นแหละ! แต่ละฟิลด์อินพุตต้องเป็น กำหนดเป้าหมายโดยตัวเลือก jQuery ซึ่งเพิ่มฟิลด์อินพุต Timedropper นี้...
    CSS Starter Kit สำหรับนักพัฒนา - Shoelace.css
    นักพัฒนาส่วนหน้าต้องการทรัพยากรที่ดีที่สุดเท่าที่จะทำได้ โดยปกติหมายถึง ทำงานบนกรอบ เช่น Bootstrap เพราะมันเต็มไปด้วยทุกสิ่งโดยทั่วไป. อย่างไรก็ตามมีทางเลือกมากมายและ Shoelace.css เป็นตัวอย่างหนึ่งที่คุณควรคุ้นเคย. นี้ ชุด CSS ฟรี ไม่ใช่กรอบที่สมบูรณ์จริงๆ แทนที่จะเป็นเช่นนั้น ชุดเริ่มต้นสำหรับนักพัฒนา ผู้ที่ไม่ต้องการสร้างสไตล์ CSS ที่กำหนดเองนับตั้งแต่เริ่มต้น. คุณสามารถใช้การรีเซ็ต CSS ได้ตลอดเวลา แต่เพียงฟอร์แมตเบราว์เซอร์แต่ละตัวเท่ากัน การรีเซ็ตคือ ไม่ใช่ใบปะหน้าสำหรับการจัดการงานที่ซับซ้อนมากขึ้น, และนั่นคือประเด็นของ Shoelace. มันมาเป็น แพ็กเกจที่มี CLI...
    ครอบตัดและปรับขนาดรูปภาพด้วยปลั๊กอิน jQuery ที่เรียบง่ายนี้
    การครอบตัดรูปภาพแบบไดนามิก ง่ายกว่าที่เคยขอบคุณห้องสมุดเช่น jQuery codebase นั้นใช้งานง่ายและชุมชนมีปลั๊กอินหลายพันรายการ การจัดการภาพ. หนึ่งปลั๊กอินดังกล่าวคือ เครื่องเก็บเกี่ยว, โซลูชันครอบตัดรูปภาพโอเพนซอร์ซฟรีที่ใช้งานได้ ซูม, การปลูกพืช, และแม้กระทั่ง บันทึกภาพ. โครงการนี้คือ มีอยู่ใน GitHub กับบางอย่าง มาก เอกสารที่มีความยาวพร้อมคุณสมบัติที่กำหนดเองมากมาย. Cropper ช่วยให้คุณ (ผู้พัฒนา) ควบคุมทุกแง่มุมของอินเทอร์เฟซได้อย่างสมบูรณ์ คุณสามารถทำงานกับ ตัวเลือกมากกว่า 30 แบบ และ 20+ วิธีการที่กำหนดเอง...
    สร้าง Shortener URL ของคุณเองด้วย Polr
    ตัวย่อ URL หลัก เช่น Bit.ly นั้นยอดเยี่ยม แต่ยากที่จะปรับแต่ง API ของพวกเขาสามารถ จำกัด และในขณะที่พวกเขาอยู่ สมบูรณ์แบบสำหรับโครงการขนาดเล็กที่สุด, พวกเขาทำ ขาดไหวพริบที่แน่นอน ของตัวย่อ URL ที่ไม่ซ้ำ. Polr คือ API shortener URL โอเพนซอร์สฟรี คุณสามารถติดตั้งและเรียกใช้ภายในเครื่องบนโดเมนของคุณเอง มัน เขียนใน PHP และ วิ่งบนลูเมน, ดังนั้นควรปรับใช้สำหรับเซิร์ฟเวอร์ใด...
    สร้างบอทตอบรับอัตโนมัติของคุณเองด้วย Bottr
    พวกเราส่วนใหญ่จำได้ เหตุการณ์ Microsoft Tay ผู้ใช้อินเทอร์เน็ตอยู่ที่ไหน สอน AI บอทคำบางคำที่บ้าสวย ในอีกไม่กี่วัน มันเป็นตัวอย่างที่ตลกของบอทบนเว็บ แต่คุณสามารถสร้างบอตข้อความ Twitter หรือ FB ของคุณเอง ไม่มีสิ่ง AI. Bottr เป็นห้องสมุดโอเพนซอร์สฟรีสำหรับ สร้างบอทตั้งแต่เริ่มต้น. มันติดฉลากตัวมันเอง “กรอบบอทที่ง่ายที่สุดในโลก” และฉันต้องยอมรับ. สแต็คทั้งหมด ทำงานบน JavaScript, เพื่อให้คุณสามารถสร้างบอทที่กำหนดเองโดยใช้ ส่วนหน้า ECMAScript ด้านบนของ...