การเข้ารหัส - หน้า 26

CodePen เป็นสนามเด็กเล่นออนไลน์สำหรับนักพัฒนา Front-end ที่มีความสามารถสถานที่ที่คุณสามารถหาโปรเจคที่ยอดเยี่ยมเพื่อขยายขอบเขตของคุณและดูว่านักพัฒนาคนอื่น ๆ วันหยุดสิ้นปีเป็นช่วงเวลาที่ดีในการสร้างความประหลาดใจให้กับคนที่คุณรักด้วยโครงการสร้างสรรค์ส่วนตัวหรือกล่าวขอบคุณลูกค้าของคุณด้วยดีไซน์เก๋ ๆ เก๋ ๆ ที่จะช่วยให้วันหยุดของคุณสดใส. ในโพสต์นี้เราจะดูที่ 20 สุดยอดการทดลองคริสต์มาสใน CodePen, ที่คุณสามารถใช้เป็นแรงบันดาลใจในการสร้างงานออกแบบของคุณเอง. 1. เพลงคริสต์มาสสำหรับครอบครัว แอพเพลงคริสต์มาสสำหรับครอบครัวที่น่ารักนี้สามารถเล่นเพลงคริสต์มาสที่คุณชื่นชอบซึ่งโฮสต์อยู่บน SoundCloud กฎสไตล์ถูกเขียนในภาษาสไตล์ชีต LESS และฟังก์ชั่นเครื่องเล่นเพลงนั้นจัดทำโดยปลั๊กอิน jQuery ที่กำหนดเอง. ไอคอนเกล็ดหิมะและต้นคริสต์มาสในพื้นหลังให้บรรยากาศที่เคร่งขรึมกับการออกแบบและหากคุณวางเมาส์เหนือปากกาคุณยังสามารถหาเอฟเฟกต์ CSS บางอย่างได้. ดู Pen Christmas...

เราสามารถทำสิ่งต่างๆได้มากมายด้วย CSS เช่น build modals สร้างเอฟเฟกต์ข้อความที่สวยงามวาดโล่ Viking และสร้างรูปหัวใจ มีมากมายที่เราสามารถทำได้กับ CSS3 Box Shadows และในบทความนี้เราจะไป ดูว่านักออกแบบบางคนเล่นกับเงา CSS เพื่อผลลัพธ์ที่ยอดเยี่ยม. ในรายการนี้คุณจะเห็น ใช้เงา CSS ในการสร้างตัวนับฟ้อง, เอฟเฟกต์ 3 มิติบนข้อความ, ภาพพิกเซล, ภาพเคลื่อนไหวอย่างง่ายและอื่น ๆ หากต้องการดูงานเดียวกันเพิ่มเติมลองดูพอร์ตการลงทุนของนักออกแบบ รู้การใช้ CSS Shadows...

หากคุณเป็นผู้พัฒนาเว็บส่วนหน้ามาระยะหนึ่งแล้วมีโอกาสสูงที่คุณจะมีช่วงเวลาที่คุณพยายามหาวิธีเขียนโค้ดบางอย่างและรับรู้หลังจากผ่านการทำ Google เล็กน้อย “มี CSS สำหรับสิ่งนั้น”. ถ้าคุณไม่มีคุณก็กำลังจะทำ. โพสต์นี้เป็นคอลเลกชันของรหัส CSS ที่สามารถให้คุณสมบัติเช่นเปลี่ยนองค์ประกอบที่เหนียวให้เส้นประที่ขีดเส้นใต้ขีดความสามารถในการไหลข้อความของหน้าของคุณในรูปแบบพิเศษหรือบรรลุผล Parallax บางส่วนได้รับการสนับสนุนอย่างกว้างขวางขณะที่เบราว์เซอร์ทั้งหมดกำลังสนับสนุนอย่างเต็มที่. การกำหนดหมายเลขส่วนหัวและหัวเรื่องย่อย สมมติว่าคุณมีชุดหัวเรื่องและหัวเรื่องย่อยในเอกสารของคุณและคุณกำหนดหมายเลขด้วยตนเองหรือผ่านสคริปต์ คุณสามารถใช้ตัวนับ CSS เพื่อทำสิ่งนี้แทน มีโพสต์เชิงลึกอยู่ที่นี่แล้ว และเนื่องจากมันมาจากสเปค CSS2 คุณจึงสามารถเดิมพันได้ว่ามันรองรับเบราว์เซอร์ทั้งหมดยกเว้น IE 6. ดูปากกา GJRLWj โดย Preethi (@rpsthecoder) บน CodePen....

คุณจะไม่เคยได้ยินเกี่ยวกับ HTML5 เว้นเสียแต่ว่าคุณจะอยู่ใต้ก้อนหิน ทุกที่ในขณะนี้ต้องขอบคุณการส่งเสริมของ Apple ผู้บริหารสูงสุด Steve Jobs อดีต CEO และนักพัฒนาบางคนที่เชื่อว่า HTML5 สามารถครอบครอง Flash ได้. ในความเป็นจริงเรายังไม่เห็นสถานการณ์นี้เกิดขึ้น แต่ HTML5 นั้นมหัศจรรย์ในการอ้างอิงถึงความสามารถในวิดีโอภาพประกอบบนผืนผ้าใบและภาพเคลื่อนไหวซึ่งทำงานได้ดีและราบรื่นจริงๆ ความจริงก็คือมันมีแนวโน้มมากที่โครงการจะเปิดขึ้นทั่วทุกแห่งที่สร้างขึ้นเพื่อทดสอบขอบเขตของ HTML5. เชื่อพลังของมันหรือไม่เราจะจัดแสดงการทดลอง 15 รายการที่ใช้ประโยชน์จาก HTML5 อย่างดีที่สุดและคาดเดาว่าคุณจะได้สัมผัสกับแรงโน้มถ่วงแอนิเมชั่นที่ใช้ดนตรีและการสร้างสิ่งมีชีวิตที่ทำงานเหมือนสัตว์! ขอให้สนุกกับพวกเขาและพวกเขาจะได้รับบริการที่ดีที่สุดกับ Mozilla Firefox และ...

ในฐานะนักพัฒนาเว็บคุณต้องจัดการบ่อยครั้ง DOM, โมเดลวัตถุที่เบราว์เซอร์ใช้ ระบุโครงสร้างตรรกะ ของเว็บเพจและใช้โครงสร้างนี้เป็น แสดงองค์ประกอบ HTML บนหน้าจอ. HTML กำหนด โครงสร้าง DOM เริ่มต้น. อย่างไรก็ตามในหลายกรณีคุณอาจต้องการจัดการกับ JavaScript โดยทั่วไปเพื่อ เพิ่มฟังก์ชันพิเศษ ไปยังเว็บไซต์. IMAGE: นักพัฒนาของ Googleในโพสต์นี้คุณจะพบรายการ 15 เมธอด JavaScript พื้นฐาน ที่ ช่วยเหลือการจัดการ DOM. คุณน่าจะใช้วิธีการเหล่านี้บ่อยครั้งในรหัสของคุณและคุณจะชนพวกเขาในบทช่วยสอน JavaScript...

IFTTT ตัวย่อของ ถ้าเป็นเช่นนั้น) เป็นบริการฟรีถึง เชื่อมต่อบริการออนไลน์ต่าง ๆ, เช่นเว็บไซต์โซเชียลมีเดีย, IOT, และเครื่องมือเพิ่มผลผลิตออนไลน์และ ทำให้งานทั่วไปเป็นไปโดยอัตโนมัติ. ตัวอย่างเช่นโดยใช้ IFTTT คุณสามารถทวีตอัพเดตสถานะ Facebook ใหม่ทั้งหมดของคุณโดยอัตโนมัติ. บริการที่มีใน IFTTT นั้นเรียกว่า ช่อง, ในขณะที่รูทีนอัตโนมัติที่คุณสร้างขึ้นนั้นเป็นที่รู้จักกันในนาม สูตร. เว็บไซต์ที่ได้รับความนิยมสูงสุดของโลกเช่น Dropbox, Slack, Gmail และ Twitter นั้นล้วนแล้วแต่เป็นช่องทางของ IFTTT แต่ก็ไม่ค่อยมีใครรู้จักกันมากนัก...

ข้อความหรือตัวอักษรที่สวยงามจะทำให้การออกแบบของคุณดูน่าสนใจ ในการออกแบบเว็บ CSS ช่วยให้มีสไตล์ในการออกแบบรวมถึงเอฟเฟกต์ต่างๆในข้อความหรือตัวอักษร ด้วย CSS คุณสามารถใช้การตัดและเพิ่มภาพเคลื่อนไหวลงในข้อความเพื่อเพิ่มสีสันให้กับสิ่งต่าง ๆ. และเพื่ออธิบายสิ่งนี้เราได้รวบรวม เอฟเฟกต์ข้อความสุดเจ๋ง 15 แบบที่จะทำให้ CSS เป็นไปได้ (บางคนมีความช่วยเหลือเล็กน้อยจากรหัส Javascript). สำหรับสิ่งเพิ่มเติมที่คุณสามารถทำได้ด้วย CSS ลองดู: 18 สิ่งดีๆที่คุณจะไม่เชื่อว่าถูกสร้างขึ้นโดยใช้ CSS 30 jQuery text effects libraries ที่คุณต้องรู้ วิธีสร้างรูปหัวใจด้วย CSS...

การลดขนาด Javascript เป็นเทคนิคที่ ควบแน่นสคริปต์ของคุณเป็นรอยขนาดเล็กมาก. คุณสูญเสียความสามารถในการอ่านของมนุษย์ แต่คุณต้องประหยัดแบนด์วิดท์เป็นจำนวนมาก - ในที่สุด, Javascript มีไว้สำหรับเบราว์เซอร์ของคุณไม่ใช่สำหรับผู้ใช้ของคุณ. เว็บไซต์ที่ใช้งานจริงส่วนใหญ่ใช้การลดขนาด Javascript แต่วิธีการที่ได้รับนั้นแตกต่างกันมาก ตั้งแต่เครื่องมือแปลงออนไลน์อย่างง่ายไปจนถึงเครื่องมือ GUI ที่ครอบคลุมมากขึ้นไปจนถึงอินเตอร์เฟสบรรทัดคำสั่งตัวเลือกของเรานั้นมีความหลากหลาย ในบทความนี้เราจะมาดู การย่อขนาดของ Javascript ทำงานอย่างไร, วิธีที่เราสามารถสร้างมันลงในเวิร์กโฟลว์ของเราและข้อดีและข้อเสียของการลดขนาดคืออะไร. Minification ทำงานอย่างไร วิธีที่ดีที่สุดในการเรียนรู้สิ่งที่เกิดขึ้นเมื่อคุณลดขนาดโค้ดของคุณคือดูที่ UglifyJS Github Repository สคริปต์นี้ใช้ในเครื่องมือแปลงออนไลน์มากมายรวมถึงเครื่องมือ GUI และเครื่องมือบรรทัดคำสั่งเช่น...