JavaScript Weekly #468 (上)

閱讀時間約 11 分鐘
本系列文為節選第 468 期 JavaScript Weekly 文章的讀後整理心得。
本文為「上」,收錄內容:
  • Tesseract.js 2.0 颯爽登場
  • State of JavaScript 2019 問卷結果
  • CNDJS 維護團隊(Cloudflare)的真情告白
  • 高手都是這樣用 console.log
  • void 在現代 JavaScript 下的生存之道

Tesseract.js 2.0 颯爽登場

作者另外有寫一篇 Medium 文章解釋 2.0 的內容。
為什麼需要這次改版
  • performance 瓶頸
  • 失敗後難以 debug,找不到原因
更新內容
  • 用新的 emscripten 升級到新的 core
  • 更好懂的 API
  • 支援排程,可以同時跑很多個 OCR 工作
  • 加入 TypeScript 定義檔
  • 重寫文件
新 API 讓你可以提早載入訓練資料,需要使用的時候不用等太久:
const { createWorker } = require('tesseract.js');
const image = 'https://tesseract.projectnaptha.com/img/eng_bw.png';
const worker = createWorker();
let isReady = false;
// Called as early as possible
(async ()=> {
await worker.load();
await worker.loadLanguage('eng');
await worker.initialize('eng');
isReady = true;
})();
// Do other stuffs
(async (image) => {
if (isReady) {
const { data: { text } } = await worker.recognize(image);
console.log(text);
}
});
CPU 資源足夠的情況下,用 scheduler 多開 woker 可以巨幅加快辨識速度:
const { createWorker, createScheduler } = require('tesseract.js');
const image = 'https://tesseract.projectnaptha.com/img/eng_bw.png';

const scheduler = createScheduler();

(async () => {
for (let i = 0; i < 4; i++) {
const w = createWorker();
await w.load();
await w.loadLanguage('eng');
await w.initialize('eng');
scheduler.addWorker(w);
}
const rets = await Promise.all(Array(10).fill(0).map(() => (
scheduler.addJob('recognize', image);
)));
console.log(rets.map(({ data: { text } }) => text));
await scheduler.terminate();
})();

State of JavaScript 2019 問卷結果

這邊只挑覺得有趣或意外的部分來講,請搭配頁面中的圖表觀看。

調查人口

  • 大家薪水好多 😠
  • 9 成答卷者是男的 www
  • 職稱「全端工程師」占最多,真是辛苦大家了
  • 看完 CSS ProficiencyBack-end Proficiency 發現原來答卷仔高手雲集

總覽

時間變化圖簡直就是大型掉粉現場 😂
  • 有些今年才出來的只有一個點
  • 從不掉粉仔筆記一下,列入觀察重點
  • Express
  • Jest
  • GraphQL
  • Apollo
  • Storybook
  • Next.js
  • TypeScript
滿意度跟使用率這個部份我覺得首要還是看滿意度,感覺比較能反映出發展性。
  • 70% 以上的看起來都前途不可限量
  • Ionic 意外地落在 AVOID 區…

語言特性

雷聲大雨點小大型展示會。
不過看起來蠻符合我想像中的模樣,沒什麼意外的點。
真要說的話,原來這麼多人用 fetch 的嗎…
axios 才是標配吧= =
整體感覺還是新東西不推出個 3、5 年,是很難廣泛的被採用的。

JavaScript 加強版們

Languages that compile to JavaScript
基本上我是覺得除了 TypeScript 以外,大概都還是會保持小眾。
這個 branch 的很多比較,我都看不出什麼關聯性,484 我太笨了…
當年的老夥伴 CoffeeScript 已經被擺到「其他」裡 😅

前端框架

React 還是最秋的,那我就放心了 (誤)
我在想這問卷如果拿來台灣做不知道有沒有機會被 Vue.js 翻盤…

資料層

等等,apollo 不是跟 graphql 站同邊的嗎?
Relay 相對不夠親民,熱度比較低是可以想的到的。
偷渡一下,我覺得 MobX 是真滴好用,尤其 5.0 以後丟掉了一些過去的包袱,已經可以說是完全體了。

後端框架

  • express 大神還是大神
  • Next.js 只能說現在的 SSR 需求實在是不小,自己搞又非常麻煩…
  • Gatsby 體驗還是算不錯,雖然有一些些限制但瑕不掩瑜

測試

完了,真D沒空寫。
不過好像我有稍微用過得還算不少 ㄎ
  • jest 的聲勢大概就跟 React 綁一起的,不太意外,也確實好用
  • cypress 超級推,E2E test 戰鬥力直接爆表
  • storybook 因為我不是什麼嚴謹的 component 人,沒有在用
  • enzyme 我不懂它往下掉的原因是什麼…
  • 難道是 shallow rendering 神話破滅的緣故嗎?
  • react-testing-library 有崛起的趨勢
  • 還是 hook 太夯,但 shallow rendering 支援度不佳呢?
明年的前排應該會加上 react-testing-library 了,畢竟它今年漲得實在不少。
Kent 大大太神啦!

手機/桌機 app

  • reactnative 知名度竟然超過 electron XD
  • ionic 一種跟 cordova 一起沉淪感 (所以才推出自己的 capacitor 吧)
我目前有點看好 Flutter (被歸在「其他」裡面了),Flutter 用畫的解決了很多問題(這樣真的好嗎)。而且除了開發 native app,觸手還伸到了 Web 這邊來,可謂是充滿了野心。
相信明年份的調查,Flutter 也會站到前排了吧!

其他工具

加減看看。
Moment 這麼大包竟然還是蠻受歡迎的…

新知來源

看起來我常用的站也有上榜,好家在。
W3Schools 真的是屹立不搖 www
Podcats 倒是真的沒有在聽。

看法

pass

頒獎典禮

是說我怎麼覺得 Svelte 是因為作者比較會引戰所以才得到這麼高的注目…
Polymer 系的也都蠻屌的,不過不太會宣傳這樣。

結論

被 Sporky 騙到,還去 google 了一下,結果是瞎掰的 library。
寫 JavaScript 真是太棒了!

CNDJS 維護團隊(Cloudflare)的真情告白

Cloudflare 團隊想要告訴大家,現在他們相當努力的在保持 CDNJS 的運作及更新。
簡短的介紹 CDN 之後,提到了現在 CDNJS 為什麼是在掛在 cdnjs.cloudflare.com 底下。
眼看當年就要因為流量爆炸被迫關站(付不出錢),CDNJS 團隊聯絡了 Cloudflare,希望他們能夠幫忙。而 Cloudflare 也答應了,於是就出現了 cdnjs.cloudflare.com,而且還不收錢喔 😉
總之接下來的時間一切安好,CDNJS 也不停地繼續壯大(月流量 3PB),不過也因為瀏覽器的獨立 cache 機制,蒙上了一小層陰影: CDN 是不是變得沒什麼卵用了?
一個月前,一直以來負責自動更新 CDNJS 上套件版本的 bot 掛了,那是一個開源專案,然後作者現在已經沒空修了,開源真是太棒了 👍
歷經一番波折之後,現在變成是由 Cloudflare 團隊接手維護 CDNJS 專案了(從下游變成上游),因為他們知道 CDNJS 的重要性。
如果你也對 CDNJS 有熱情,歡迎貢獻一己之力參與討論
如果最近有打算開始做什麼新專案,不如就用 CDNJS 吧!
Cloudflare 團隊向你保證,CDNJS 就是穩到不行 💪

高手都是這樣用 console.log

好像久久就會看到一次類似的文章,不過每次都會多一點點新東西 XD
我想直接看文章最後這個總結的 gist 就好囉!

void 在現代 JavaScript 下的生存之道

在這個 ES6 以後 arrow function 當道的時代,過氣的 void 運算子總算找到了自己的新用法。
The void operator evaluates the given expression and then returns undefined.
於是文章作者提出了搭配 arrow function 的用法:
在把 arrow function 寫成單行的時候,可以用 void 來達成 return undefined 的效果
這個用法是建立於 想要寫單行的 arrow function,卻不想要 return 任何東西 的情境下。
文章裡面舉了幾個例子,順便還提到了在某些 ESLint config 裡面有包了 no-void 這個 rule,而看起來確實也有人不想要它被內置在裡面。
為什麼會看到廣告
4會員
7內容數
網頁前端是一個需要與時俱進的工作。 你也喜歡前端嗎? 在這邊你可以找到一些前端小知識、新技術或是趣聞,歡迎與我們一同成長 🚀
留言0
查看全部
發表第一個留言支持創作者!
你可能也想看
Javascript入門-Day10:套件套件(Package)是將程式或程式庫進行組織、分發和共享的一種方式。在軟體開發中,套件通常包含了相關的程式碼、資源文件和元數據,並提供了統一的名稱空間和版本管理。
Thumbnail
avatar
浴火重生的雞
2024-06-04
Javascript入門-Day9:例外處理當你在開發程式時,難免會遇到各種錯誤和異常情況。這些錯誤可能是因為代碼中的錯誤、外部資源無法訪問或其他不可預期的狀況。為了提高程式的可靠性、穩定性和可維護性,我們使用「例外處理」來處理這些異常情況。
Thumbnail
avatar
浴火重生的雞
2024-06-03
Javascript入門-Day8:物件導向本章節旨在介紹JavaScript中的物件導向編程。內容包括類別(Class)的定義和使用,建構子的作用,以及公開,私有,受保護(Protected)等不同訪問修飾符的概念。此外,還涵蓋了繼承、多型、封裝、介面、抽象類別、靜態類別、列舉、委派、Lambda表達式、泛型、反射等物件導向的主要觀念。
Thumbnail
avatar
浴火重生的雞
2024-06-02
Javascript入門-Day7:函數本章節旨在介紹JavaScript中函數的基本結構和使用方法,包括函數聲明、函數表達式、箭頭函數和匿名函數的定義方式,以及函數的呼叫、參數使用和返回值的處理方式。透過了解這些函數的基本概念和用法,可以幫助讀者更靈活地編寫和理解JavaScript代碼。
Thumbnail
avatar
浴火重生的雞
2024-06-02
JavaScript 與 CoffeeScript、TypeScript 和 Flow 的關係JavaScript (簡稱 JS) 是具有一級函數的輕量級、直譯式或即時編譯的程式語言。它因為用作網頁的腳本語言而大為知名,但也用於許多非瀏覽器的環境,像是 Node.js 等。由於 JavaScript 語法上的一些缺點,軟體工程師們又設計出了 CoffeeScript、TypeScript 和
Thumbnail
avatar
Chih-Yuan Yip
2024-06-01
JavaScript 面試考題:事件委託是什麼在搞清楚事件委託前必須先了解什麼是事件傳遞機制(Event Propagation),也就是捕獲(capture)跟冒泡(bubble),聽起來好像很難但是我昨天看完彭彭的直播課程(17:00開始)後就懂了!我寫成文章幫助記憶,也希望能幫助到大家,然後希望我面試會被考到。
Thumbnail
avatar
溫蒂蒂蒂
2023-01-17
[JavaScript] 究竟什麼是Event loop?執行以上程式碼,然後看到了這個結果: 為什麼「延遲0秒」的函式寫在上方,但在console印出的結果,它還是被排在第二順位? 利用AC教材提供的youtube演講連結一窺究竟: 演講提供了更多JS的細節概念,身為JS新手的我還在消化,但若針對教案提出的問題來回答,加上利用google大神查到MDN的
Thumbnail
avatar
SUPOAN
2022-10-29
Javascript : Event Queue & Event Loop前言 這是第一次寫技術文章,但其實應該也只能說是蒐集很多資料並學習如何透過自己的話解釋的內容,並不能像其他大神可能分享一些很酷的技術,目標就單純是為了完成最後一週的作業(如下)。 走入非同步之前 執行環境(Execution Context) 執行環境堆疊 (Execution stack)
Thumbnail
avatar
Blockcyber
2022-08-16
JavaScript — var letJava script 中有其中兩種宣告分別是 var 跟 let var 結果: let 結果: ** let 是一種區塊的變數宣告像是 if else while for 即跳出區塊時就無法取得資料
avatar
John
2022-05-08
【JavaScript 簡史】什麼是 ES5、ES6?網頁開發與 ECMAScript 的小故事在一開始學習前端開發的時候,一直遇到講師在課程內容中提到 ES5、ES6 等關鍵字,當初的我,單純認為 ES5、ES6 是講述 JavaScript 的版本,所以在使用上就沒有想太多,反正就是 JavaScript 1.0 、2.0 的感覺吧?
Thumbnail
avatar
Vivian Yeh
2022-01-15