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.

Why we need apply / bind / call ?


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!

Demo
  • Solid coding skill or JavaScript ability
  • 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…


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”?

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

function scope

}

Global →Function → Block

Summary

  • They have different scope “var” is scoped in function, “let” is scoped in block.
  • Hoisting in “var”
  • Temporal Dead Zone in “let”

Scope


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

寫在文前

內建的 hooks

https://zh-hant.reactjs.org/docs/hooks-reference.html
  • 控 state 的useState useReducer useContext
  • 控 Effect 的useEffect u …


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

server-side fetching data from reddit endpoint

寫在文前


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

前言(廢話)


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

大致上談幾件事

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

寫在前面

  • 已經了解前端工程化
  • 了解當代打包工具功能的前端打工仔。
  • (Tune 模板)只有在 HTML 嵌入 …


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

Video2Gif

專案 — video2gif


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

滿出來不如就讓它漫出來

選擇管道


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

當你背景播放 YouTube 時…

在桌面環境重現這個 Feature

  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