原创 WebStrom在Mac下無法打開或閃退的解決
(一) 前言 記錄一次webstorm從2019.1升級到2020.1.2的過程遇到的坑 (二) 卸載老版本 當我們卸載完之前2019，需要刪除之前的WebStrom配置，具體如下 # 刪除配置信息目錄 rm -rf ~/Libr
2020-07-02 04:29:29
4
原创 在WebStorm中添加px轉rem單位插件
（一）前言 大部分場景下，我們會postcss中集成，但是對於老項目而言，因爲歷史遺留問題，會導致再次集成postcss-pxtorem時候，出現設置比例不兼容情況，這時候當然處理兼容是做好方案嗎，但是，如果穩妥處理，那麼我們就依
2020-06-23 22:07:28
4
原创 Flexbox在button/fieldset/legend中(比如safair)失效問題
（一）前言 常規flex佈局，之前就已經介紹過了，那麼，其實之前，在封裝項目button的問題中，我幾乎都是基於div，爲其提供loading，disabled，這些效果，但是比較麻煩是，在onClick事件中，我必須爲其load
2020-06-23 22:07:28
20
原创 Tree和array之間相互轉換
（一）前言 對於大部分網站需求，我們經常會遇到一種需求，將list轉爲tree結構，或者將tree轉爲list結構，或者我們在tree結構中查找對於的數據，返回，或者返回頂層到查找級別的list。 （二）將list轉爲tree 我
2020-06-23 22:07:27
1
原创 推薦文章/常用工具
（前言） 這欄目會收集前端相關遇到過，覺得值得閱讀的文章， 有部分是乾貨，能直接對業務能力提升， 有部分是偏向講解底層原理，差不多意思就是，能提升對底層原理認識， 以及日後遇到喜歡談論底層原理，也能有個應對 工具 在線mp4轉
2020-06-23 22:07:27
2
原创 談談移動端IOS橡皮筋特效
（一）前言 對於移動h5應用，會發現進場出現滑動橡皮筋效果，大部分情況下，如果將body設置爲滾動條情況下，只要設置html就fixed定位，其實就能解決這個問題，但是大部分產品，會使用局部定位的元素來實現滾動，那麼隨之問題就會發
2020-06-23 22:07:26
9
原创 控制視圖首次渲染DOM數量
（一）前言 談及相關性能優化，我們可以想到兩個方面，一個是架構層級，一個是代碼層級。這裏我們說下常規代碼方面，如果加快頁面首次渲染，我們以React.js爲例子，其實常規談及最多就是減少重複渲染，但是如果我們在做一個頁面，會有很長
2020-06-23 22:07:26
原创 H5常規踩坑總結
（一）前言 在h5做兼容情況下，我們會遇到很多問題，但是不去總結話，下次遇到相同問題，又會去查詢資料，所以這裏是平時與遇到h5，踩坑總結的地方 （二）主體 scrollTo scrollTo兼容性替代方案 scrollTo支持
2020-06-23 22:07:26
2
原创 純CSS實現橫向滾動條
*（一）前言 基於大部分場景，我們需要使用橫向滾動，這種時候，大部分會選擇swiper來實現，但是其實，我們也可以通過純CSS的方式實現一個滾動條 *（二）實現 大家都知道overflow 可以單獨設置 // 橫向滾動 overf
2020-06-23 22:07:26
2
原创 CSP(內容安全策略)防運營商劫持
（一）前言 CSP英文全稱Content Security Policy，中文意思是 內容安全策略。 CSP以白名單的機制對網站加載或執行的資源起作用，在網頁中，這樣的策略通過 HTTP 頭信息或者 meta 元素定義。用於檢測並
2020-06-23 22:07:26
原创 script、iframe注入型防運營商劫持
（一）前言 準確是防運營商劫持就是防script、iframe注入型劫持，屬於HTTP劫持中的一種。主要是劫持js文件，然後在網頁中通過js腳本往網頁中注入圖片和鏈接或者框架廣告，也叫流量劫持。 至於劫持類型，這裏我建議，看這篇文
2020-06-23 22:07:25
原创 Charles工具（MAC）
（一）前言 對於常規頁面，我們可以通過瀏覽器的控制面板，抓取http請求，然後根據相關接口返回的數據，進行問題定位。但是對於內嵌到app裏面的應用，我們應該如果抓取請求呢，一種方案是，通過配置虛擬機，然後將測試的apk安裝到上面，
2020-06-23 22:07:25
原创 React Native開發（六：自定義React Navigation 過場動畫）
（一） 前言 版本環境 node 8.0+(v8.12.0) npm 5.0+(v6.4.1) java (v1.8.0_172) "react-native": "0.57.1", "react": "16.5.0", "re
2020-05-31 18:36:23
原创 npm包發佈流程和如何看插件源碼
(一) 註冊npm賬號 去官網註冊 方式二:通過終端註冊 $ npm adduser 查看npm當前使用的用戶 $ npm whoami (二) 登陸 $ npm login // 這裏需要將淘寶鏡像換成原np
2020-05-31 18:36:23
原创 React Native三端同構（二： webpack@4腳手架構建和項目代碼規範）
（一）前言 一個完整的web開發手腳架，應該包含以下 babel-loader 圖片 音視頻 字體 樣式處理等loader 開發環境配置 生產環境配置，流程化前端多生產構建 生產環境打包優化, 如構建速度，打包外鏈庫，抽離公共模
2020-05-31 18:36:23