原创 webpack4.x版本各種常見配置，快來打造屬於你自己的工作流吧
更新日誌 2018-12-05 提高熱更新速度 修改html文件也觸發熱更新 逼逼兩句 關於webpack是什麼，這裏不多說，webpack官方文檔，讓我直接進入正題吧! 1.最基礎的配置 新建一個文件夾，就叫webpack吧，先安裝主
2020-10-13 03:51:11
原创 那些你不知道的css爆炸級操作
本文介紹有關css的一些技巧以及一些比較另類的用法，有些情景完全可以避開使用Javascript，單純的css就可以完美實現 一、基礎 1. 復位 推薦大家使用reset.css * { box-sizing: border-box;
2020-09-19 14:42:30
原创 contenteditable跟user-modify還能這麼玩🌚
html中的contenteditable，他是一個全局屬性，可以大致理解爲"可以使一個元素處於可編輯狀態"，像極了textarea，不過還是存在許多不足跟問題，比如沒有change鉤子等，本文不作深入探討❌ 開胃 使一個div可以進行內容
2020-09-10 22:43:22
2
原创 關於帶有"顯示更多"按鈕的多行文本截斷思考😲
剛好最近遇到這個小需求，記得很早之前都是用JS處理，畢竟那時候年少無知。切換類的操作可以用Checked僞類實現，成本會比較低一點，那麼先來列一下功能要點： 多行文本截斷，顯示省略號 "顯示更多"按鈕可以展開所有文本 展開文本後，按鈕的
2020-06-16 05:24:23
1
原创 瀏覽器的一些“滾動”行爲鑑賞😂
最近挺忙的，這次抽空寫寫文陶冶下情操，瀏覽器滾動真的天天見日日見啦，比如你現在看的這篇文章，往下看就必須得滾動，這篇文章主要聊聊滾動相關的一些方法跟屬性，還有一些有趣的例子🎈 文章涉及到的方法或屬性在文末會放鏈接，方便大家自行查閱！ 分類
2020-06-16 05:24:23
原创 圖解直到今天也沒什麼人知道的原生dialog標籤😑
在html5中，新增了很多語義化的標籤。如footer、header之類的，今天的主角是dialog標籤😂 顧名思義，就是用來定義對話框的。目前只有Chrome和Safari支持該標籤，所以用的不多，不過確實挺好用的🤞 別擔心，有官方的po
2020-06-16 05:24:23
原创 圖解直到今天也沒什麼人知道的原生dialog標籤（非常詳細）😂
在html5中，新增了很多語義化的標籤。如footer、header之類的，今天的主角是dialog標籤😂 顧名思義，就是用來定義對話框的。目前只有Chrome和Safari支持該標籤，所以用的不多，不過確實挺好用的🤞 別擔心，有官方的po
2019-10-12 08:05:24
原创 稍微整理了幾個經常在H5移動端開發遇到的東西😢
不用說我也知道，此類文章太多太多了，常見的譬如： viewport、強制瀏覽器全屏、IOS的Web APP模式、可點擊元素出現陰影（這個我覺得真沒必要去掉，用戶點擊是需要反饋的，而這個背景色剛剛好提供了一種反饋）等等，太多啦，這些相信大家百
2019-10-09 18:15:29
原创 如何簡單實現一個刷爆朋友圈的"國旗頭像生成器"😂
相信大家昨天的朋友圈大部分是這樣的 又或者是這樣的... 起因是，騰訊新聞做了一個，可以生成帶有"國旗"的圖片H5網站，掃碼即可以體驗：活動好像已結束... 那麼，如何自己實現一個簡單的例子呢？用html2canvas插件簡單到飛起！ ht
2019-09-26 10:35:30
原创 關於"異步加載CSS"的相關思考，以及最簡單的實現方式😅
我們想提高網頁性能的最有影響力的措施之一，就是以不延遲網頁渲染的方式加載CSS。 在默認情況下，瀏覽器在加載CSS時將終止頁面的樣式呈現（同步加載），也就是加載CSS會阻塞DOM樹的渲染（但並不會阻塞DOM樹的構建），可以簡單理解爲：當在加
2019-09-23 15:45:30
1
原创 關於帶有"顯示更多"按鈕的多行文本截斷思考
剛好最近遇到這個小需求，記得很早之前都是用JS處理，畢竟那時候年少無知。切換類的操作可以用Checked僞類實現，成本會比較低一點，那麼先來列一下功能要點： 多行文本截斷，顯示省略號 "顯示更多"按鈕可以展開所有文本 展開文本後，按鈕的
2019-09-16 14:25:04
28
原创 瀏覽器的一些“滾動”行爲鑑賞🔼🔽
最近挺忙的，這次抽空寫寫文陶冶下情操，瀏覽器滾動真的天天見日日見啦，比如你現在看的這篇文章，往下看就必須得滾動，這篇文章主要聊聊滾動相關的一些方法跟屬性，還有一些有趣的例子🎈 文章涉及到的方法或屬性在文末會放鏈接，方便大家自行查閱！ 分類
2019-09-15 01:07:44
原创 借用repeating-linear-gradient實現一把刻度尺（ruler）📏
像刻度這種東西都是重複性的，說到重複我就想到了repeating-linear-gradient，看名字就能知道是重複線性漸變，它能更方便的實現隔行變色的功能，如果你想畫一個背景，它是重複、隔行的，那麼用它就沒錯了； 效果圖 原理 尺子刻
2019-09-03 15:45:07
1
原创 利用"交叉觀察者"這個小寶貝兒，輕鬆實現懶加載、吸頂、觸底 ❗
可以先看一下MDN中的介紹： IntersectionObserver接口，提供了一種異步觀察目標元素與其祖先元素或頂級文檔視窗(viewport)交叉狀態的方法，祖先元素與視窗(viewport)被稱爲根(root); 直接進入正題，In
2019-08-28 18:34:58
4
原创 這些不常用的Web API真的有用嗎? 別問，問就是有用🈶
本文列舉了一些列比較不常見的Web API，內容較多，所以有關兼容性的內容在本文不會出現，大家可以自己去查閱。 以下案例能配動圖的我儘量去配了，以免內容枯草乏味，但是如果內容有誤，也請大家親噴或者糾正👌 方法列表 querySelect
2019-08-23 18:45:06
4