ออกแบบเว็บไซต์ - หน้า 21

นักพัฒนาของเฟรมเวิร์ก Front-End Foundation ไม่เพียง แต่นั่งอยู่บนลอเรลในขณะที่ทีม Bootstrap ทำงานในรุ่นใหญ่ใหม่ที่น่าประทับใจ เมื่อปีที่แล้วพวกเขาได้ไปเที่ยวรอบโลกที่ยอดเยี่ยมเพื่อแบ่งปันความรู้กับผู้ใช้และถามพวกเขาเกี่ยวกับการใช้งานมูลนิธิในการทำงานจริง. หลังจากกลับไปที่โต๊ะทำงานพวกเขาได้รวบรวมความต้องการและความปรารถนาของผู้ใช้และเริ่มวางแผนการปล่อยเฟรมเวิร์กรุ่นใหม่ที่สำคัญ: มูลนิธิ 6. มันยังอยู่ภายใต้การพัฒนา แต่แผนมีแนวโน้มมาก คุณสมบัติที่จะมาถึงมุ่งเน้นไปที่ 3 พื้นที่หลัก: ประสิทธิภาพการปรับแต่งและการเข้าถึง. ลองดูที่ 10 ของคุณสมบัติเหล่านี้ตอนนี้. 1. คล่องตัวเวิร์กโฟลว์ จากประสบการณ์ของผู้ใช้ทีมงานมูลนิธิได้พัฒนาสโลแกนใหม่คือ “ต้นแบบการผลิต”, สำหรับมูลนิธิ 6 ซึ่งหมายถึงเวิร์กโฟลว์ใหม่ที่คล่องตัวซึ่งจะช่วยให้นักออกแบบและนักพัฒนา ตรงจากต้นแบบการผลิต. เป้าหมายของมูลนิธิใหม่ 6...

คิดถึงฟิลด์อินพุตที่ต่างกันทั้งหมดที่ ต้องการโครงสร้างที่จัดรูปแบบ. หมายเลขโทรศัพท์บัตรเครดิตวันเกิดที่อยู่ ... พวกเขาทั้งหมดมี รูปแบบที่เป็นเอกลักษณ์ของตัวเอง. ง่ายพอที่จะปล่อยให้ฟิลด์เหล่านี้อยู่ตามลำพังและไว้วางใจผู้ใช้ แต่มันอาจจะดีกว่าที่จะใช้ Cleave.js, ฟรีปลั๊กอิน JavaScript วานิลลา ช่วยคุณ จัดรูปแบบฟิลด์อินพุตโดยอัตโนมัติ. HTML5 มาพร้อมกับมัน ชุดของอินพุตที่เกี่ยวข้องกับรูปแบบข้อมูล เช่นหมายเลขโทรศัพท์ ด้วย Cleave คุณสามารถนำสิ่งนี้ไปสู่อีกระดับด้วย อินพุตที่กำหนดเอง ที่ จัดรูปแบบข้อความโดยอัตโนมัติ ตามที่พิมพ์. ตามค่าเริ่มต้นปลั๊กอินสนับสนุน รูปแบบข้อความพื้นฐานห้าแบบ: หมายเลขบัตรเครดิต เบอร์โทรศัพท์ วันที่...

คุณสมบัติ CSS flexbox ใหม่ล่าสุดได้เปลี่ยนแปลงวิธีการที่นักพัฒนาสร้างอินเทอร์เฟซ ไม่มีการลอยและ CSS แฮ็กที่จะได้รับการจัดตำแหน่งอย่างสมบูรณ์แบบ ไม่ต้องกังวลเกี่ยวกับเทคนิคการตอบสนองที่กำหนดเองสำหรับการจัดการโครงร่างแบบหลายคอลัมน์. แต่ถึงแม้ว่า flexbox จะแก้ปัญหาได้หลายอย่าง แต่มันก็ซับซ้อนในการเรียนรู้ เพื่อช่วยให้คุณเริ่มต้นได้มีห้องสมุดออนไลน์ใหม่ที่เรียกว่า Flexbox Patterns ซึ่งแคตตาล็อกองค์ประกอบ flexbox ที่แตกต่างกันมากมายไว้ในที่เดียว. ห้องสมุดนี้มีอิสระในการใช้อย่างสมบูรณ์และเปิดให้บริการบน GitHub ตัวอย่างทั้งหมดสามารถ ดาวน์โหลดภายในเครื่องผ่าน NPM หรือ ผ่าน GitHub. แต่คุณยังสามารถเรียกดูตัวอย่างผ่านเว็บไซต์เพื่อคัดลอกและวางรหัสได้ตามต้องการ. แต่ละรูปแบบมีหน้าของตัวเองพร้อมคำอธิบายสั้น ๆ และตัวอย่างโค้ด...

Firefox Developer Edition เป็นเบราว์เซอร์เดียวในปัจจุบันที่สร้างขึ้นเพื่อนักพัฒนาโดยเฉพาะ เครื่องมือของนักพัฒนาซอฟต์แวร์ในรุ่นมาตรฐานจะปรากฏขึ้นเป็นครั้งแรกในรุ่นของนักพัฒนาซอฟต์แวร์และมีเครื่องมือในรุ่นสำหรับนักพัฒนาที่ไม่ได้และจะไม่สามารถใช้ได้ในรุ่นมาตรฐาน วันนี้เราจะมาดูเครื่องมือบางอย่างที่ตอนนี้ สามารถพบได้ในรุ่นสำหรับนักพัฒนาเท่านั้น. หากคุณเป็นคนที่ไม่เคยใช้หรือไม่คุ้นเคยกับเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์แม้แต่ในรุ่นมาตรฐานลองดู "DevTools Challenger" สุดเจ๋งของ Mozilla ก่อน ที่นี่คุณสามารถฝึกฝนด้วยเครื่องมือบางอย่างที่กล่าวถึงด้านล่างในเบราว์เซอร์ Firefox Developer Edition ตัวอย่างคือความสนุกและง่ายต่อการปฏิบัติตามคำแนะนำที่ตรงไปตรงมาและหากคุณไม่สามารถติดตามได้ให้ทำตามวิดีโอสอนแทน. 1. เครื่องมือตรวจสอบภาพเคลื่อนไหว ภาพเคลื่อนไหว CSS กำลังเป็นที่แพร่หลายมากขึ้นและเครื่องมือภาพเคลื่อนไหว CSS ที่จัดทำโดยนักพัฒนา Firefox ทำให้ง่ายต่อการติดตามและตรวจสอบทุกขั้นตอนของภาพเคลื่อนไหวที่สร้างขึ้น คุณสามารถหยุดเล่นและย้อนกลับภาพเคลื่อนไหวใด ๆ คุณยังสามารถดูมันเกิดขึ้นทีละเฟรมผ่านการขัดถู....

แม่แบบจดหมายข่าว / อีเมลที่ออกแบบมาอย่างดีอาจแตกต่างระหว่างความสำเร็จในการล้มเหลว ไม่ว่าจะเป็นการอัปเดตลูกค้าเกี่ยวกับผลิตภัณฑ์หรือแบ่งปันข้อมูลการมีเทมเพลตที่ออกแบบมาอย่างดีอาจเป็นจุดเริ่มต้นที่ดีในการให้คำแนะนำแก่ผู้อ่านของคุณ นี่เป็นสิ่งสำคัญโดยพิจารณาว่าความประทับใจแรกมีความสำคัญเพียงใด. นี่คือบางส่วนของ เทมเพลตจดหมายข่าว HTML ที่ดีที่สุดฟรี บนอินเทอร์เน็ตคุณสามารถดาวน์โหลดได้โดยไม่ต้องเสียเงิน. รายการทั้งหมดหลังจากกระโดด. แม่แบบจดหมายข่าวฟรีห้าอันดับแรกที่เราชอบมากที่สุด การตรวจสอบแคมเปญ - เทมเพลตจดหมายข่าว HTML ฟรี 30 รายการ นี่คือชุดของเทมเพลตที่ผลิตอย่างดีจำนวน 30 ชุดซึ่งได้รับการทดสอบกับโปรแกรมรับส่งเมลหลักและเว็บเมลเช่น Outlook, Thunderbird และ Gmail หนึ่งในคุณสมบัติคือมันมีการจัดเรียงแม่แบบทั้งหมดไว้ล่วงหน้าแล้วกับแม่แบบที่มีแถบด้านซ้ายหรือด้านขวาหรือแม่แบบคอลัมน์เดียว Aweber: - 5...

คำวินิจฉัย ภาพถ่ายสต็อกที่มีคุณภาพ สามารถเจ็บปวดจริงในก้น ภาพถ่ายสต็อกส่วนใหญ่ดูเรียบง่ายหรือเข้ากับเป้าหมายที่คุณตั้งไว้. แต่, Everypixel เปลี่ยนแปลงทั้งหมดนั้นด้วยอานุภาพ เครื่องมือค้นหาใหม่ ที่ให้คุณค้นหา โดยคำหลัก & รูปภาพที่อัปโหลด. คุณสามารถอัปโหลดภาพถ่ายจากคอมพิวเตอร์ของคุณและมันจะทำการถ่ายภาพโดยอัตโนมัติ ค้นหาเว็บไซต์ภาพถ่ายจำนวนมาก เพื่อค้นหาภาพที่เกี่ยวข้อง พูดคุยเกี่ยวกับความสะดวกสบาย! ตามค่าเริ่มต้นแล้วเสิร์ชเอ็นจิ้นนี้จะทำการรวบรวมข้อมูลไซต์ภาพถ่ายสต็อกมากกว่า 50 รายการในพื้นที่เก็บข้อมูลของพวกเขา นอกจากนี้คุณยังสามารถ จำกัด การค้นหาเฉพาะภาพฟรี โดยคลิกสวิตช์วิทยุขนาดเล็กที่มุมขวาบน. ตัวเลือกอื่น ๆ ให้คุณ จำกัด การค้นหาตาม ไซต์รูปภาพ, ปฐมนิเทศ,...

เว็บที่ทันสมัยคือ ตอบสนองอย่างเต็มที่ และนักออกแบบมากขึ้นตระหนักถึงสิ่งนี้ทุกวัน แต่มีความท้าทายที่น่ารำคาญเมื่อพูดถึงการออกแบบที่ตอบสนองได้: เนื้อหาที่ฝัง. ทุกเว็บไซต์วิดีโอจาก YouTube ถึง Vimeo มี รหัสฝังเริ่มต้น จับจ้องไปที่ขนาดที่แน่นอน ซึ่งหมายความว่านักพัฒนาซอฟต์แวร์จำเป็นต้องใช้โซลูชั่นอื่น ๆ สร้างวิดีโอที่ตอบสนองอย่างเต็มที่. อย่างไรก็ตามแทนที่จะใช้คลาสคอนเทนเนอร์ CSS คุณสามารถใช้ SuperEmbed.js, ไลบรารี JavaScript ฟรีสำหรับ สร้างวิดีโอตอบสนอง. ปลั๊กอินนี้ แก้ปัญหาสองข้อ ในครั้งเดียว. วิดีโอทั้งหมดที่ฝังจะ ยืดเพื่อเติมภาชนะหลัก, ในขณะที่ยังยืดหยุ่นเพียงพอ ปรับขนาดตามหน้าต่างเบราว์เซอร์....

คุณเคยต้องการที่จะ ทำการแก้ไขโดยตรง ในเบราว์เซอร์ของคุณโดยไม่เปลี่ยนกลับไปเป็นไฟล์ CSS ของคุณหรือไม่ ทางออกหนึ่งคือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome แต่นักพัฒนาบางคน ชอบเวิร์กโฟลว์ที่ง่ายขึ้น. นั่นคือสิ่งที่ CSS George เข้ามาฟรี เครื่องมือแก้ไขในเบราว์เซอร์ โรงงาน น้อยกว่า และมันริเริ่มโดย ไฟล์ JavaScript ง่าย ๆ. นักพัฒนาส่วนใหญ่ชอบ เครื่องมือแก้ไขเบราว์เซอร์ เนื่องจากไม่ใช่ทุกคนที่ใช้ precompiler ของ LESS แต่ CSS George...