2017下半年掘金日報優質文章合集:前端篇

趙小餅發表於2017-12-26

在掘金微信群裡的小夥伴應該都有看每日小報吧!這是小餅每天為大家精選的優質掘金文章(大家都很愛學習,我已經跟不上了QAQ..)小餅已經被N位群友連續幾周催著出小報合集了,2017年馬上就要結束了,拖延症絕不拖到明年!這就給大家整理出來——掘金2017下半年優質小報合集。)

CSS/頁面佈局

border屬性的多方位應用和實現自適應三角形

BEM實戰之扒一扒淘票票頁面

一勞永逸的搞定 flex 佈局

20個CSS高階技巧彙總

從a標籤為什麼不能包含div標籤-瞭解HTML5元素分類與內容模型

聊聊為什麼淘寶要提出「雙飛翼」佈局

前端切圖 | 百度EUX

CSS盒模型詳解

前端最佳實踐(一)——DOM操作

Rem佈局的原理解析

移動端字型放大問題的研究

我不知道你知不知道的偽元素小技巧

個人總結(css3新特性)

10 個獨特的 CSS 背景視覺效果

我只是想在頁面上加個連結

2.5分鐘學會 CSS Grid 佈局

編寫自己的程式碼庫(css3常用動畫的實現)

一步步打造自己的純CSS單標籤圖示庫

Web自適應佈局你需要知道的所有事兒

BFC模型淺識

JavaScript

這些JavaScript程式設計黑科技,裝逼指南,高逼格程式碼,讓你驚歎不已

Promise 必知必會(十道題)

帶你理解 JS 容易出錯的坑和細節

例項感受-es6的常用語法和優越性

從一個 JSON.parse 錯誤深入研究 JavaScript 的轉義字元

談談 js 去重方法的那點事

Js 的多宿主時代

JavaScript 閉包

25行程式碼實現Promise函式

高效使用 JavaScript 閉包

如何用 3KB 不到的 JavaScript 實現微機模擬器

如何無痛降低 if else 麵條程式碼複雜度

JavaScript設計模式-用組合模式寫出複雜元件

JavaScript 效能優化

JS彈幕實現

歸併排序與快速排序的簡明實現及對比

編寫自己的程式碼庫(javascript常用例項的實現與封裝)

【譯】JavaScript權威面試指南

這一次,徹底弄懂javascript執行機制 關於JavaScript物件,你所不知道的事(一)- 先談物件

JavaScript 工作原理:記憶體管理 + 處理常見的4種記憶體洩漏

javascript專案開發規範例項

JavaScript 實用技巧和寫法建議

你需要知道的演算法之基礎篇

JavaScript非同步程式設計大冒險: Async/Await

忍者級別的JavaScript函式操作

ES6 Promise 用法

你所不知道的 Typescript 與 Redux 型別優化

JavaScript 開發人員需要知道的簡寫技巧

14個你可能不知道的JavaScript除錯技巧

打造自己的JavaScript武器庫

全面梳理JS物件的訪問控制及代理反射

當使用陣列splice刪除元素時,你應該知道這個小坑

深入到不能再深入之JS大法系列 -- 作用域鏈

前端全(無)埋點之JS異常上報

【譯】JavaScript 如何工作的: 事件迴圈和非同步程式設計的崛起 + 5 個關於如何使用 async/await 編寫更好的技巧

ES6 中的超程式設計:第一部分 —— Symbol,了不起的 Symbol

兩句話理解js中的this

為什麼(2.55).toFixed(1)等於2.5?

JS中可能用得到的全部的排序演算法

反擊爬蟲,前端工程師的腦洞可以有多大?

前端框架

React

讓 Vue 和 React 無縫融合

從Preact瞭解一個類React的框架是怎麼實現的(三): 元件

1分鐘讀完《我希望在深入 React 之前知道這些》 React Render Array 效能大亂鬥

Preact:一個備胎的自我修養

我為什麼從Redux遷移到了Mobx

重構與模式系列(一)簡化函式

Typescript+React+Redux-Observable腳手架

React 服務端渲染實現 Gank 移動端

我為什麼從Redux遷移到了Mobx

React 服務端渲染實現 Gank 移動端

Vue.js

vue router 如何使用params query傳參,以及有什麼區別

State of Vue.js report 2017 中文版

vue快速入門的三個小例項

VUE元件間的資料傳遞

Vue 脫坑記 - 查漏補缺(彙總下群裡高頻詢問的xxx及給出不靠譜的解決方案)

用vue做一個酷炫的menu

Vue.js 升級踩坑小記

vue移動助手實踐(一)——基於vue的換膚功能

nuxt(vue) + koa + mongo 寫blog的一次小結

聊聊Vue.js的template編譯

Vue 生產專案連結 -- 上線專案大集合

如何用 Vue.js 實現一個建站應用

Vuex2.0原始碼解析

從template到DOM(Vue.js原始碼角度看內部執行機制)

另闢蹊徑:vue單頁面,多路由,前進重新整理,後退不重新整理

Vue.js新手教學|如何寫一個Checklist元件

vue+webpack 升級後在原有專案上的適配問題

Vue 聊天元件

Vue2 原始碼漫遊(二)

前端表單進階之路:通過 Vue.js 實現表單可配置化

聊聊Vue.js元件間通訊的幾種姿勢

Vue + TypeScript 新專案起手式

一起來擁抱強大的TypeScript吧--Ts+Vue完全教程(附Demo專案)

Vue2 原理淺談

vue-calendar 基於 vue 2.0 開發的輕量,高效能日曆元件

Vue-cli 使用json server在本地模擬請求資料

認識Skeleton Screen【螢幕載入骨架】

我們為什麼以及是如何從 Angular.js 遷移到 Vue.js?

《京保養》基於Vue+Vuex的單頁面應用實踐

Vue2學習小記-給Vue2路由導航鉤子和axios攔截器做個封裝

手摸手,帶你用vue擼後臺 系列一(基礎篇)

簡單例子學習Vue.js單元測試

【譯】vue 自定義指令的魅力

適用於 Vue 2.0 的功能強大的 ContextMenu 元件

尚妝達人店 UI 元件化 工程實踐(weex vue)

基於vue配置axios

用vue做一個酷炫的menu

AngularJS

Angular 5 開發一個有道翻譯

其它

「大前端」weex裡native主動傳送事件到JS的方案實現

Weex 開發小遊戲是件很 high 的事

記一次 Weex 的 iPhone X 適配

2017 年比較 Angular、React、Vue 三劍客

Fly.js 攔截全域性 Ajax 請求

以同構之名,再談 Redux/Vuex 的必要性

打包工具

Webpack 打包器皮膚進階

webpack 為什麼這麼難用?

Webpack3.0小案例躺坑css處理與ES6編譯

Parceljs和Webpack在React專案上打包速度對比

webpack中小型多頁面應用整合webpack終極方案

基於gulp+webpack 快速搭建的前端自動化腳手架

媽媽再也不用擔心我不會webpack了

PWA

一份來自 Treebo 的 React 與 Preact PWA 效能分析報告 改造你的網站,變身 PWA

影像/圖表

有意思的clip-path

軟軟的 Echarts

Android/iOS/Web開發中的動效設計與實現 —— 貝塞爾曲線動畫的插值法

10 個 CSS、SVG 和 Canvas 蒙版(mask)精彩例項 譯用 WebGL 探索動畫和互動技術(一個學習案例)

前端架構

如何管理好10萬行程式碼的前端單頁面應用 微前端 - 將微服務理念延伸到前端開發中

70%以上業務由H5開發,手機QQ Hybrid 的架構如何優化演進?

面試/個人成長

張克軍:寫給初學前端工程師的一封信

vue面試題總彙

流形:我是如何面試一位前端工程師

找不到工作的我,只好研究自動投遞簡歷了

前端入行兩年--教會了我這些道理

前端面試總結(at, md)

小程式

微信小程式如何像webview一樣載入html5網頁

微信小程式無埋點資料採集方案

在婚禮上搞點事情如何

微信小程式中使用Fly

微信小程式音訊功能開發實(cai)踐(keng)

手把手教你實現微信小程式中的自定義元件

分享微信小程式中實現sticky效果的列表頁

微信小程式開發完工+問題彙總

本地儲存相關

談談cookie

localStorage 還能這麼用

瀏覽器的渲染:過程與原理

ajax & !async & cookie 是一個冷門的坑

Redux 非同步資料流方案對比

大殺器Bodymovin和Lottie:把AE動畫轉換成HTML5/Android/iOS原生動畫

工具資源

便於 Code review 的 Git 流程方案

無頭瀏覽器 Puppeteer 初探

前端中的 Pipeline

前端開發中經常使用到的20個正規表示式

web開發者為什麼選擇Electron去開發跨平臺的桌面客戶端

滴滴 Web 移動端元件庫 cube-ui 開源

打造絲般順滑的 H5 翻頁庫

【輪子】Element UI 的Form, Table, Pagination元件封裝來一波

效能優化相關

效能指標都是些什麼鬼? 前端開發工程師必須關注的幾個效能指標

javascript函數語言程式設計系列 ① call 和 apply

其他

iPhone X 網頁設計

LINE漫畫:通過Page Stack實現流暢的頁面切換

美團:前端線上故障響應方法

字串模板淺析

axios的一些常見用法

淺談前端和移動端的事件機制

響應式腦電波—如何使用 RxJS、Angular、Web 藍芽以及腦電波頭戴裝置來讓我們的大腦做一些更酷的事

fly.js—Node下增強的API

趁著雙11,寫個京東商品自動下單

「前端那些事兒」② 優化策略-自查表

前端需要了解的 SSO 與 CAS 知識

如何在SSR架構中實現離線可用?

用 Electron 打造 Win/Mac 應用,從「程式碼」到可下載的「安裝包」,可能比你想得麻煩一點

讓我為你介紹一個神器:Chimee,一套可擴充套件的 H5 視訊播放器解決方案

用TypeScript編寫釋出函式庫

iPhone X 適配 手Q H5頁面通用解決方案

Three.js 初探 - 微場景製作

搭建 vue2 vue-router2 webpack3 多入口工程

你見過用命令列寫的簡歷嗎?

全面梳理JS物件的訪問控制及代理反射

MacOS : 前端必備姿勢(工作環境)

一隻node爬蟲的升級打怪之路

微信小程式:完成一個tabbar+下拉重新整理元件,需要經歷什麼坑

初識Http快取君

underscore 系列之如何寫自己的 underscore

ThinkJS 3.0 如何實現對 TypeScript 的支援

git merge使用不當引發的程式碼丟失血案

譯 怎麼做 Web API 版本控制?

如何編寫通用的 Helper Class

53合1:Node.js 最佳實踐大合集

【開源】canvas影像裁剪、壓縮、旋轉

2017 年比較 Angular、React、Vue 三劍客

如何自定義自己的vue-cli模板

使用fjpublish釋出前端專案(安全篇)

Miox帶你走進動態路由的世界

服務端渲染 vs 客戶端渲染

淺談前端線上部署與運維

優雅的使用 element-ui 中的 table 元件

IMVC(同構 MVC)的前端實踐

基於 Docker 打造前端持續整合開發環境

螞蟻金服開源:資料驅動的高互動視覺化圖形語法G2 解鎖Charles的姿勢

Spirit: Web動畫製作工具

來聊一聊瀏覽器渲染

前端如何處理emoji表情

HTML5原生拖拽/拖放 Drag & Drop 詳解

前端本地檔案操作與上傳

一次 H5 「儲存頁面為圖片」 的踩坑之旅

iOS開發者的大前端感悟:向前端說對不起

koa 實現 jwt 認證

Q:你瞭解非同步程式設計、程式、單執行緒、多執行緒嗎?

實踐中的前後端分離

手摸手,帶你優雅的使用 icon

在沒有DOM操作的日子裡,我是怎麼熬過來的(上)

一起炫起來 -- 3D粒子動畫篇

給女票寫的一個簡書爬蟲

node.js使用Nodemailer傳送郵件

如果有人問你爬蟲抓取技術的門道,請叫他來看這篇文章

記憶體尋夢環遊記:一個變數的三重死亡

用canvas實現視訊播放與彈幕功能

為你的網站帶上帽子 — 使用 helmet 保護 Express 應用

Nuxt.js服務端渲染實踐,從開發到部署

7 款前端開發者重製的經典遊戲 總有一款能讓你回味童年時光

如何在一週之內獲得GitHub stars 3500+

你不知道的前端SDK開發技巧

具有代表性的 HTTP 14 個狀態碼

基於 Electron 的前端檔案處理工具

用不到20行程式碼寫一個freestyle外掛後臺

HTTP----HTTP快取機制

import、require、export、module.exports 混合使用詳解

網頁中文字朗讀功能開發實現分享

基於 eros 改編的網易嚴選 app

帶你開發一個日曆控制元件

免SDK實現微信/支付寶轉賬打賞功能

vv-ui 骨架屏實踐

移動端如何強制頁面橫屏

【翻譯】fancyBox3 中文文件

前端程式碼異常監控實戰

Git提交歷史的修改刪除合併

WEEX-EROS | 或許不用 RN 我們也能開發一個 APP

帶你開發一個二維周檢視日曆

從時間旅行的烏托邦,看狀態管理的設計誤區

前端小專案之線上便利貼

寫一個chrome外掛來實現網站的自動登入

前端跨域常用方法小結

基於 Electron 的前端檔案處理工具

最後:

由於文章確實量很多所以沒有再進行細分了,大家可以Mark起來~不過呢小餅還是建議大家到微信群裡看每日小報,畢竟每天消化一兩篇會更加有用,日積月累就會有很大的收益。反而積攢到一起的話要麼就是「債多了不愁。。」再也不會開啟(比如我TAT);要麼就是看得很累,要花很多時間來補。

歡迎加入掘金前端交流群,找對屬於你的技術圈子

掃下方二維碼加小編邀請你進群喲

2017下半年掘金日報優質文章合集:前端篇

相關文章