There’re three similar methods in Function.prototype, call, apply and bind, these three methods could change the dynamical `this` in function, I’ll not talk too much about `this`, but more about these methods’ ins and outs.

Chinese: [JavaScript] 函數原型最實用的 3 個方法 — call、apply、bind

So, in this article, I’ll do compare with a(apply) / b(bind) / c(call), and little bit concept of function `this`, in last, will take a practical use case about self, bind, arrow function.

Let’s start our trip.

JavaScript (so called ECMAScript) is a dynamic programming language, the “dynamic” sounds abstract, you might think “yeah … but I also learned other dynamic programming languages”, but the point is, the function `this` is dynamic.

Let’s see the common use case of apply / bind / call:

F12 and press enter in console

You’ll get the…


If you’ve used Bootstrap, you’ve must applied some class name like these for responsive web design(RWD), would you want to know how it works? Let’s step by step to find the magic behind this!

Chinese version: 40行實作響應式的佈局系統 — 告訴你col-sm-12、col-md-6 是如何實現

Demo

To read this article, you don’t need:

  • Solid coding skill or JavaScript ability

But you need:

  • Understanding for-loop, I’ll use SCSS to do the duplicated operations
  • Known SCSS & is point to the nested element
  • Known about CSS Flex
  • Known media query

This article is for someone like me, who wanna find out the responsive implementation in book shop, but most books only teach “how to use Bootstrap“, lol.

For the user who are not familiar with front-end, the bootstrap is really helpful to do the layout, by adding class name like .row


If you’re a JavaScript beginner, you might have a question: why there’re too much way to declare the variable: “var” declaration from ES5, “let” and “const” from ES6, we can easily know “const” is for constant value, but what’s the difference between “var” and “let”?

Chinese: 用 1 分鐘簡單地了解 — JavaScript中 var 與 let 的主要差別 & 一次說清楚 JavaScript 中宣告的各種提升行為

let/const: { block scope }
var: function(){

function scope

}

Global →Function → Block

  • They have different scope “var” is scoped in function, “let” is scoped in block.
  • Hoisting in “var”
  • Temporal Dead Zone in “let”
We cannot access variable `b` in L6, try to use `var` to declare variable.

What interesting is, L12 also get the ReferenceError , it’s similar as L6, we cannot access the variable out of scope.

var declaration has hoisting behavior, but let doesn’t.

In the L2–5, we can found that…


根據八二法則,只需要兩成的功就能滿足八成的事,那我們來用兩成的 built-in hooks 來封裝八成我們會用到的 custom hooks 吧!

這不是一篇正經的 react-hooks 知識點文章,更多的反而是我的 murmur 跟一些對於 hooks 怎麼從無到有的一點思考路線。而下半段會做 code-reviewing。

https://zh-hant.reactjs.org/docs/hooks-reference.html

這麼多 hooks ,分別:

  • 控 state 的useState useReducer useContext
  • 控 Effect 的useEffect useLayoutEffect
  • 控 ref 的useRef useImperativeHandle
  • 優化用的(useMemo useCallback
  • Debug 用( useDebugValue, 我沒用過)

由於八二法則的原因,所以我們就從十個 hooks 挑兩個來用吧!

useState & useEffect,必要時我們再挑其他的進來打 …


試想你用 React 刻了一個論壇的 Single Page App,但是為了 SEO / Performance 考量,你決定第一畫面的文章列表在 server side 先 render 出來,這時該怎麼做?

server-side fetching data from reddit endpoint

自己組一套 React server side rendering 其實蠻多文章的,也有翻到不錯的手把手教學文(真的很讚),但多數好像都只有教你弄出畫面,然後畫面上有 React 的功能,卻沒有做到封裝、傳入 data fetching / getInitialProps 這段。

這篇不是手把手的教學文,而是以最暴力的方式告訴你現有工具如何去拉+打解決 SSR data fetching / initial props

閱讀之前我們要有個共識:

  • 你碰過、寫過、蹂躪過 SSR 的 framework ,想知道如果自幹的話 markup 與 state/props 怎麼丟給 User client side
  • 你知道 hydrate 是在幹嘛,它長的跟 ReactDOM.render 87% 像,但 …


Promise 是常見的面試問題,相信各位打工仔肯定是不陌生,但往往會是:用的時候覺得理所當然,成為考題時卻覺得絆手絆腳難以解釋。這邊我想用一篇文章來整理思考路徑,以讓下次碰到這類提問是有個思考模型。

JavaScript 是一個非同步(異步)的語言,我們常常在解決使用者觸發的事件、Network IO 的請求、計時器觸發…之間打轉,對比其他同步語言,可以直落落的寫下來,JavaScript 仰賴的是回調函數(Callback)的幫助來分工合作。

但由於太多 callback 需要控制,往往就是會看到 callback 1 裡面塞 callback 2 來確保 order 正確,這也是俗稱的回調地獄(callback hell),而 Promise 的出現解決了這個問題。

Promise 是 ES6 的 built-in 函數,也就是說 15' 年開始寫 JS 的人,多半都會直接使用這個方法來取代 callback hell 的巢狀格式,在下個版本 ES7 中,更有 based on Pro …


瀏覽器看得懂 import / export 耶!支援程度如何?對資深前端打工仔 aka 網頁開發者來說又有什麼改變?未來的打包趨勢跟當今的 solution 又有何不同呢?

  • Browser 上原生的 import / export 怎麼用、原理
  • Support 程度
  • 對前端工程化影響
  • 適用 ESM 之打包工具——Snowpack / Vite

本文將會以速食般的速度,不廢話的講重點,不會加入太多前提解釋。

適合閱讀的受眾:

  • 已經了解前端工程化
  • 了解當代打包工具功能的前端打工仔。

不適合閱讀本文:

  • (Tune 模板)只有在 HTML 嵌入過 Bootstrap/jQuery
  • (前端新人)沒有 build 過 npm package 到瀏覽器上
  • (來自 2008 年的時空穿越者)以為前端只能寫幾個按鈕給 User submit


身為前端工程師,工作上最常見的無非是把自己加進去的功能錄下來以便 Demo ,輸出 .mov 檔,就得常常重複在command line 透過 ffmpeg 轉檔…心想,難道就沒有好用的網頁應用能夠取代嗎?

Video2Gif

拖拉 / 上傳你的影片檔,讓瀏覽器幫你生成 GIF 吧!

早期我其實開發過類似的專案 —— md2pdf,倒也不是說我有多麼熱衷於轉檔 Tool ,只是這類顯而易見的需求,正好滿足我個人需要,開發起來才會具有動力。

我們都知道,像 Medium 也只接受圖檔、GIF,偶爾你要把 Video 丟上來又要四處找轉檔工具,有時候不知道有沒有別人家的 Server。

所以我心想,與其抱怨、與其想著可能重複造輪子,不如就直接下去寫吧!

主要使用的 Tech stack 有:

  1. WASM 介接 FFmpeg 的 binary
  2. 有趣又可愛的樣式庫 NES.css
  3. ES6 Proxy wrap state setter
  4. Vanilla JS
  5. No React, no fancy frameworks

ffmpegwasm/ffmpeg.wasm

ffmpeg.wasm i …


常見的程式技術文總是正經,而我的撰文風格則以白爛、幽默的梗圖為優先,我甚至會為了能用上 JOJO 梗而寫,如果你也剛好喜歡這種風格,喜歡到快滿出來…

滿出來不如就讓它漫出來

文末另外整理了 7 篇精選舊文,皆是至今仍會作為筆記反複閱讀、讀者回應有幫助的文章。

選擇管道


你是不是也有相同的經驗,同樣是 Safari , 明明 Pornhub、XVIDEOS 常常不小心背景播放,但是為什麼控制中心按下播放時 YouTube 就是不能播放呢?讓我們透過 Chrome DevTool 一虧他們的程式碼邏輯吧!

當你背景播放 YouTube 時…

Safari 背景播放理論上是要可以 work 的,但是在 YouTube & YouTube Music,卻好像失靈了?讓我們用幾分鐘搞懂 YouTube 到底做了什麼吧!

#反正 YouTube 沒有在台灣招募前端工程師系列

  1. 進入 YouTube 影片
  2. 按下 F12 ,選擇一個手機的按鈕
  3. 重新整理至手機版 YouTube 頁面
  4. 按下播放並切換分頁

realdennis

If any interest, 👉 https://realdennis.me.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store