🔥 สวัสดีจ้า วันนี้แอดจะมาบอกต่อ 5 ฟีเจอร์เด็ดๆ ของ Javascript Console ที่จะช่วยให้เราสามารถ print log ได้สะดวกมากยิ่งขึ้น มีตัวไหนบ้างไปดูกันเลย
.
⚡ 1) Console Groups - จะทำการ log ค่าออกมาในรูปแบบ Group จะทำให้ดูได้ง่ายมากยิ่งขึ้น
.
📝 วิธีการใช้งาน - เปิดด้วย console.group() และปิดด้วย console.groupEnd(); เช่น
.
console.group("Person Data");
console.log("Name: BorntoDev");
console.log("Age: 4");
console.groupEnd();
console.log("Outside of the group...");
.
⚡ 2) Live Expressions - เป็นฟีเจอร์ของ Google Chrome ที่จะช่วยแสดงผลลัพธ์จากโค้ด JavaScript แบบเรียลไทม์ได้เลย
.
⚡ 3) Timing Your Code - ใช้เพื่อจับเวลาในการทำงานของโค้ด
.
📝 วิธีการใช้งาน - เปิดด้วย console.time() และปิดด้วย console.timeEnd() เช่น
.
console.time("addHeadings");
for (let i = 0; i < 10000; i++) {
document.body.insertAdjacentHTML("beforeend", "
Heading
");}
console.timeEnd("addHeadings");
.
⚡ 4) Styling with CSS - สามารถใส่ CSS Style เวลา print log ออกมาได้เลย เฟี้ยวมาก555
.
📝 วิธีการใช้งาน - โดยจะใช้ร่วมกับ console.log() ใช้ %c ข้างหน้าข้อความที่ต้องการให้แสดง CSS เช่น
.
console.log("I am programer in %cborn to dev co., Ltd.", "color: yellow; font-weight: bold;");
.
⚡ 5) Assertions - ใช้ในการ Debug โค้ดของเราเขียนว่าสามารถทำงานได้ตามจุดประสงค์หรือไม่ ซึ่งจะ return ที่เป็น false เท่านั้น
.
📝 วิธีการใช้งาน - format console.assert(assertion, obj1 [, obj2, ..., objN]); เช่น
.
console.assert(true === true);
console.assert(true === false,"false");
.
จบแล้วกับ 5 ฟีเจอร์เด็ดที่แอดรวบรวมมาให้ ไหนใครลองไปใช้แล้วบ้าง ? หรือมีตัวไหนเด็ดๆนอกจาก 5 อันนี้ ไว้มาบอกต่อกันบ้างนะคร้าบบ 😄
.
borntoDev - 🦖 สร้างการเรียนรู้ที่ดีสำหรับสายไอทีในทุกวัน
css font 在 [閒聊] CSS font-family 順序- 看板Web_Design - 批踢踢實業坊 的推薦與評價
CSS font-family 的順序，相信大家都知道基本的用法是這樣：
font-family: font1, font2, serif;
系統有 font1 就先用 font1
如果使用者的系統字體沒有 font1，就看他有沒有 font2
如果都沒有，就改用瀏覽器指定的 serif 字體
如此一來可以透過技巧指定中英文不同字體，例
font-family: Arial, '新細明體', sans-serif;
遇到英文的時候，會先看 Arial 能不能用
因為可以用所以英文會先套用 Arial 字體
遇到中文的時候，會先看 Arial 能不能用
因為 Arial 沒有中文字不能用，所以就再看下一個'新細明體'
由於'新細明體'字體裡面有中文可以用，所以中文就套用了'新細明體'
阿萬一都通通沒有，就以瀏覽器指定的 sans-serif 字體為主
如果 sans-serif 字體沒有中文字
就會去找系統內的 fallback 順序找到中文字體
如果你反過來寫就沒有這個效果，例
font-family: '新細明體', Arial, sans-serif;
中英文都可以在'新細明體'裡面找到
所以中英文全部都會用'新細明體'來顯示
萬一系統沒有'新細明體'
英文會先用 Arial, 中文會去找瀏覽器指定的 sans-serif 字體
如果 sans-serif 字體沒有中文字
就會去找系統內的 fallback 順序找到中文字體
不同的系統，想指定不同的字體，也可如法炮製
OSX 有 Helvetica 也有 Arial
Win 有 Arial
然後我們又知道 Arial 其實是 Helvetica 的山寨版
當然要優先使用 Helvetica
font-family: Helvetica, Arila, sans-serif;
這樣英文字體就會先使用 Helvetica
萬一系統沒有 Helvetica，才使用 Arial
如果你反過來寫...
font-family: Arial, Helvetica, sans-serif;
你也知道這樣兩套系統都有 Arial
就全部都會使用 Arial 了阿
（當然是指使用者沒有自己刪除Arial又去安裝Helvetica的狀況）
同樣可以類推中文的狀況:
OSX 有 LiHei Pro（儷黑Pro，Mac上很受歡迎的預設中文字體）
若裝了 office 也有 新細明體
Win 有 新細明體 （似乎只有這個可以用）
誰來告訴我微軟正黑體的「碧」bug改了沒？
那這樣
font-family: 'LiHei Pro', '新細明體', sans-serif;
OSX上就會乖乖使用LiHei Pro
（而且不會去使用醜掉的10.6預設字體HeitiTC）
Win上就會使用新細明體
那中英文綜合的時候就是這樣
font-family: Helvetica, Arial, 'LiHei Pro', '新細明體', sans-serif;
如果你想要有微軟正黑體的時候，就取代新細明體，那就...
font-family: Helvetica, Arial, 'LiHei Pro', '微軟正黑體',
'新細明體', sans-serif;
以上就是 CSS font-family 的遊戲方式
--
明天週三（7/14）的RGBA聚會照常舉行
沒來過或忘記來的朋友可以看看介紹
https://rgba.tumblr.com/post/356284580/about
我會帶這本火熱的html5新書 給大家翻翻
https://www.flickr.com/photos/1pxphoto/4777289742/in/photostream/lightbox/
--
RGBA網頁設計師聚會 — 一群網頁設計師發起的交流聚會，隨意聊天問問題的好地方
https://rgba.tumblr.com/post/356284580/about
EvenDesign意門設計 — 專門提供網站開發者跨平台、能安心整合的標準規格網頁設計
https://evendesign.tw
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 114.32.77.168
... <看更多>