jihchi
frontend-tech
Month: 2018-07
- 2017-05 (154)
- 2017-06 (376)
- 2017-07 (185)
- 2017-08 (136)
- 2017-09 (386)
- 2017-10 (251)
- 2017-11 (197)
- 2017-12 (294)
- 2018-01 (231)
- 2018-02 (137)
- 2018-03 (133)
- 2018-04 (142)
- 2018-05 (155)
- 2018-06 (110)
- 2018-07 (178)
- 2018-08 (119)
- 2018-09 (80)
- 2018-10 (136)
- 2018-11 (44)
- 2018-12 (46)
- 2019-01 (74)
- 2019-02 (7)
- 2019-03 (28)
- 2019-04 (12)
- 2019-05 (11)
- 2019-06 (4)
- 2019-07 (28)
- 2019-08 (27)
- 2019-09 (10)
- 2019-10 (14)
- 2019-11 (34)
- 2019-12 (9)
- 2020-01 (6)
- 2020-02 (29)
- 2020-03 (23)
- 2020-04 (18)
- 2020-05 (15)
- 2020-06 (10)
- 2020-07 (16)
- 2020-08 (14)
- 2020-09 (2)
- 2020-11 (1)
- 2020-12 (2)
- 2021-01 (5)
- 2021-02 (2)
- 2021-03 (1)
- 2021-04 (3)
- 2021-05 (4)
- 2021-06 (3)
- 2021-07 (4)
- 2021-08 (6)
- 2021-10 (2)
- 2021-11 (2)
- 2022-01 (1)
- 2022-02 (1)
- 2022-03 (2)
- 2022-04 (2)
- 2022-05 (2)
- 2022-06 (4)
- 2022-07 (2)
- 2022-08 (1)
- 2022-09 (1)
- 2022-10 (1)
- 2022-12 (6)
- 2023-02 (1)
- 2023-03 (2)
- 2023-05 (1)
- 2023-06 (1)
- 2023-07 (2)
- 2023-08 (1)
- 2023-09 (1)
- 2023-10 (1)
- 2023-11 (2)
- 2023-12 (3)
- 2024-01 (2)
2018-07-02
2018-07-03
jihchi
GitHub
yubaba - :sparkles: Element to element animation orchestrator for React.js :point_right:
mrorz
湯婆婆
👩 1
2018-07-04
mofas
聽一堆對前端不熟的辦公室同事討論前端 會一直想要翻白眼
mrorz
什麼辦公室～～
jihchi
卡
😢 2
jihchi
https://twitter.com/compuives/status/1014120920389177349?s=12
Announcing CodeSandbox Dashboard & Teams! 🎉
🗃️ Use your dashboard to organize, search and edit all of your sandboxes
⚡ Create teams to collaborate on sandboxes together in real-time
🔴 Because of this, CodeSandbox Live is now free!
there's more:
medium.com/@compuives/ann…
Announcing CodeSandbox Dashboard & Teams! 🎉
🗃️ Use your dashboard to organize, search and edit all of your sandboxes
⚡ Create teams to collaborate on sandboxes together in real-time
🔴 Because of this, CodeSandbox Live is now free!
there's more:
medium.com/@compuives/ann…
jihchi
https://twitter.com/samccone/status/1014341689253613569?s=12
🌩️ Instantly understand where your webpack 4 build time is going by adding one argument.
webpack --plugin webpack/lib/debug/ProfilingPlugin
🌩️ Instantly understand where your webpack 4 build time is going by adding one argument.
webpack --plugin webpack/lib/debug/ProfilingPlugin
💪 1
2018-07-05
jihchi
cssguidelin.es
High-level advice and guidelines for writing sane, manageable, scalable CSS
👍 1
jihchi
termtosvg - Record terminal sessions as SVG animations
❤️ 1
jihchi
quine-relay - An uroboros program with 100+ programming languages
2018-07-06
mofas
Medium
Vue.js: the good, the meh, and the ugly – Pier Bover – Medium
Moving from React to Vue, two years later
mofas
The man, the meth, the legend!
jihchi
https://twitter.com/sharifsbeat/status/1014900348492943360?s=12
Obviously Promises are not cancellable.
But what we can do, is make them lazy by wrapping them inside a function and making them quasi cancellable. Cancellable is a very small function, might be useful if you're not using Tasks, bluebird or rxjs f.e.
codesandbox.io/s/yk0vw275rz
Obviously Promises are not cancellable.
But what we can do, is make them lazy by wrapping them inside a function and making them quasi cancellable. Cancellable is a very small function, might be useful if you're not using Tasks, bluebird or rxjs f.e.
codesandbox.io/s/yk0vw275rz
jihchi
enlight.nyc
A walkthrough of the purpose and workings of the Y combinator in JavaScript.
mofas
這東西真熟悉
jihchi
http://keycode.info/ @swei.hsu 上次一直找不到，最近找到了！
keycode.info
Keycode testing tool - which keys map to which keycodes?
💯 1
jihchi
itty-bitty - Itty.bitty is a tool to create links that contain small sites
2018-07-08
mofas
Speaker Deck
When I first met ReactJS, it was love at first sight. We built beautiful UIs for years together with our firstborn, Redux. I felt like nothing would get between us. Not even when a younger, skinnier version came along (Preact). Life was good. Everything changed when ReasonReact showed up on our block. I was curious, of course. Didn’t act on it, though. Why would I? We’d run into each other a lot since we shared the same circles. One day, the temptations got too strong. What was I thinking? Nothing about what I was doing felt right, at first. I was leaving a lot behind but for some weird reason, I knew I’d end up here anyway. I mean, it’s not like we’re splitting apart. React will still be there, but so will Reason... I’m here to announce my love affair.
mofas
GraphQL Europe 2018
1
2018-07-09
mofas
YouTube
The Future of GraphQL Servers - Peggy Rayzis @ GraphQL Europe 2018
mrorz
totally agree that sever-side adoption is super important
… But we use python in backends, and graphene is still very cryptic ._.
… But we use python in backends, and graphene is still very cryptic ._.
yhsiang
drop it
🎉 2
mofas
Best talk in graphQL Europe
jihchi
GitHub - rhysd/vim.wasm: Vim editor ported to WebAssembly
https://github.com/rhysd/vim.wasm
https://github.com/rhysd/vim.wasm
vim.wasm - Vim editor ported to WebAssembly
mofas
有人要猜一下
```
const reg1 = /^[abc]+$/gi;
const reg2 = /^[def]+$/gi;
const f1 = (words) => {
return words.filter(d => {
console.log(reg1.test(d), reg2.test(d));
return reg1.test(d) || reg2.test(d);
});
}
const f2 = (words) => {
return words.filter(d => {
return reg1.test(d) || reg2.test(d);
});
}
console.log(f1(['abc', 'abf', 'def']));
console.log(f2(['abc', 'abf', 'def']));
```
f1跟f2會return什麼嗎
```
const reg1 = /^[abc]+$/gi;
const reg2 = /^[def]+$/gi;
const f1 = (words) => {
return words.filter(d => {
console.log(reg1.test(d), reg2.test(d));
return reg1.test(d) || reg2.test(d);
});
}
const f2 = (words) => {
return words.filter(d => {
return reg1.test(d) || reg2.test(d);
});
}
console.log(f1(['abc', 'abf', 'def']));
console.log(f2(['abc', 'abf', 'def']));
```
f1跟f2會return什麼嗎
mofas
mrorz
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/test
> test() called multiple times on the same global regular expression instance will advance past the previous match.
看來沒事不要亂用 regexp instance 的 method，你永遠猜不到哪些會是記憶性的 lol
> test() called multiple times on the same global regular expression instance will advance past the previous match.
看來沒事不要亂用 regexp instance 的 method，你永遠猜不到哪些會是記憶性的 lol
jihchi
恭喜🎉 要 reset
Michael Hsu
可以參考 ramda 實作 test（或直接用
每次都 new 一個新的 Reg
每次都 new 一個新的 Reg
mofas
把g拿掉就好了 哪來這麼麻煩= =
MDN Web Docs 2018-07-10
mofas
jxnblk.com
The writing of Brent Jackson
mofas
"Avoid Apropcalypse" is really an art.
abstracting a new prop or defining a new component is a hard decision.
abstracting a new prop or defining a new component is a hard decision.
3
3
32018-07-11
mofas
```
if (d > 1) ret += (d >> 1) << 1;
```
想不到寫js 也會有一天寫出這樣的code lol
if (d > 1) ret += (d >> 1) << 1;
```
想不到寫js 也會有一天寫出這樣的code lol
mofas
唉呀, 我錯了 有更快的 `if (d > 1) ret += d & ~1;`
mofas
總之就是某段code要跑 `Math.floor(d/2)*2` 但是速度太慢了(這clock應該破千). 只好直接條bit 只要兩個clock
mrorz
`if (d > 1) ret += d - d%2` ?
調 bit 是否會比較快要看 interpreter 是否會正確翻譯 instruction 呢
調 bit 是否會比較快要看 interpreter 是否會正確翻譯 instruction 呢
mofas
d % 2 你這裡就在跑 除法
mofas
乘除都是幾千clock
mrorz
那浮點數轉 int 再轉回來要多少 cycle？
還是在你想跑的環境裡測一下比較能確定
還是在你想跑的環境裡測一下比較能確定
mrorz
v8 如果能猜對 type 應該就會比較快就是了
mofas
的確應該要來寫個uint好惹
mofas
`In Java, the bitwise operators work with integers. JavaScript doesn't have integers. It only has double precision floating-point numbers. So, the bitwise operators convert their number operands into integers, do their business, and then convert them back. In most languages, these operators are very close to the hardware and very fast. In JavaScript, they are very far from the hardware and very slow. JavaScript is rarely used for doing bit manipulation.`
mofas
好像真的不會快 = =
mofas
module 比較快 !! lol
mrorz
我每次跑都不一樣，有時候 bitwise 比較快，有時候 module 比較快
mrorz
https://jsperf.com/bit-vs-module-2 `uint` 發生什麼事了囧
👍 2
Michael Hsu
https://www.facebook.com/AirbnbEng/videos/1989360027763421/
Airbnb Tech Talk: GraphQL and Apollo at Airbnb
Airbnb Tech Talk: GraphQL and Apollo at Airbnb
2018-07-12
jihchi
https://twitter.com/bobzhang1988/status/1016860153725911041?s=12
ICYMI: we have made a major release: bs-platform 4.0.0
ICYMI: we have made a major release: bs-platform 4.0.0
2018-07-13
mofas
eslint-scope 3.7.2 was compromised
mrorz
wow 大新聞
mofas
mrorz現在是白天都不用上班惹ㄇ
mrorz
照樣上班ㄚ
mofas
code.visualstudio.com
Introducing Logpoints and auto-attach
Introducing Logpoints and auto-attach to make debugging easier and simpler to use in Visual Studio Code
mofas
```
This observation is especially relevant for JavaScript developers, who mostly deal with the complexity of managing state, and this might explain why most JavaScript developers still prefers to add console.log's to their source code instead of using a script debugger.
```
This observation is especially relevant for JavaScript developers, who mostly deal with the complexity of managing state, and this might explain why most JavaScript developers still prefers to add console.log's to their source code instead of using a script debugger.
```
mofas
`Logpoints` 還蠻好用的 不用打 `console.log` 但是我還是比較喜歡一鍵執行
👍 1
jihchi
<https://github.com/eslint/eslint-scope/issues/39#issuecomment-404533026>
ESLint - Pluggable JavaScript linter
Postmortem for Malicious Packages Published on July 12th, 2018
A pluggable and configurable linter tool for identifying and reporting on patterns in JavaScript. Maintain your code quality with ease.
mrorz
幸好發現得算快呢
jihchi
https://twitter.com/dan_abramov/status/1017409804308905986?s=12
Just got a report that CodePens in the official Tutorial on the React website used a two-years-old version of React (0.14).
Can’t decide if I should be embarrassed that I forgot to update them, or proud that all of them work with latest React 16 with ZERO changes.
Just got a report that CodePens in the official Tutorial on the React website used a two-years-old version of React (0.14).
Can’t decide if I should be embarrassed that I forgot to update them, or proud that all of them work with latest React 16 with ZERO changes.
jihchi
https://twitter.com/addyosmani/status/1017655423099289600?s=12
Tip: Webpack supports performance budgets for sites :moneybag:
You can..
:writing_hand: Configure a max file size (e.g JS should be < some KB)
:rotating_light: Throw a warning or error if files get large
:mag_right: Only apply to certain file extensions (.js, .css etc)
https://webpack.js.org/configuration/performance/ …
Tip: Webpack supports performance budgets for sites :moneybag:
You can..
:writing_hand: Configure a max file size (e.g JS should be < some KB)
:rotating_light: Throw a warning or error if files get large
:mag_right: Only apply to certain file extensions (.js, .css etc)
https://webpack.js.org/configuration/performance/ …
jihchi
teodosii/react-notifications-component
react-notifications-component - Highly configurable and easy to use React Component to notify your users!
2018-07-14
mofas
fastpack.io
Fastpack · Pack JavaScript fast & easy
Pack JavaScript fast & easy
mofas
Ultra fast pack tool, 10x faster than webpack/parcel
mofas
Medium
Building the Google Photos Web UI – Google Design – Medium
A peek under the hood
2018-07-15
mofas
How to build yourself npm worm!
mofas
The good example of worm! Try to find by yourself.
😂 1
2018-07-16
mofas
9to5Mac
10 years of the App Store: The design evolution of the earliest apps
One of the most significant design opportunities in recent history was announced with a simple blog post on Apple’s website. “Let me just say it: We want native third-party applications on the iPhone, and we plan to have an SDK in developers’ hands in February,” Steve Jobs wrote. On a quiet Thursday morning less than a year later, the App Store opened to iPhone users with a selection of just over 500 apps. Few contemporary innovations have changed how we live our lives and interact with the world around us more than iPhone apps. The creators of the first 500 available at launch had the unique opportunity of shaping the design direction and interaction methods of the millions of apps created since. To celebrate the App Store’s 10th anniversary, let’s study the visual evolution of 10 original App Store apps. The Apps For the purpose of this piece, I’ve focused exclusively on notable visual changes to apps that were available to download on day one and are still receiving updates today. While many of these apps are also available for iPad, this review highlights changes to iPhone versions. (Click on any photo to view a larger version.) iTunes Remote Apple set an example for other developers right out of the gate by publishing some of their own software on the App Store. Two of the first apps created were the game Texas Hold’em and Remote, a simple utility for controlling playback of your Mac or Apple TV’s iTunes library over Wi-Fi. While Texas Hold’em was pulled from the store in 2011, Remote lives on today. From the beginning, Remote’s design was heavily influenced by the look and feel of the iPhone’s iPod app (today called Music). In fact, the Now Playing view was essentially identical in appearance. Version 2.0 brought a new icon designed by Louie Mantia. The two apps began to diverge at iOS 6, when the stock Music app was completely redesigned and featured a volume slider that responded dynamically to the movement of your iPhone. Remote kept a more stock appearance. The icon was again updated to match the styling of iTunes 11 on the Mac. Remote’s first major ground-up redesign came with iOS 7. In contrast to the Music app’s stark white theme, Remote featured a dark, blurred background that was tinted by the color of your album artwork. In 2016, Apple released the Apple TV Remote app for the 4th-generation Apple TV, a logical step forward that appeared to replace Remote. Shortly after, Remote was renamed iTunes Remote. While the app continued to be available for download, it remained practically unchanged until this past June, when it received a completely new design and support for the iPhone X’s taller display. iTunes Remote’s refresh returns to a much more visually conservative look reminiscent of the iOS 11 Music app, but forgoes large titles and cards in favor of traditional navigation. Instead of a red tint color, iTunes Remote uses blue to match the updated icon. Facebook In contrast to iTunes Remote’s modest changes, the Facebook app has been continuously redesigned over the past decade with increasing frequency. A comprehensive visual history of the app would fill a small book, so I’ve chosen to highlight eight of the more significant changes. Facebook’s adventures on the iPhone actually began before the App Store existed. The service was initially available as one of the iPhone’s first web apps in October 2007. Version 1.0 in the App Store is barely recognizable as Facebook today aside from the signature blue navigation bar. Even the icon is missing the signature white “f.” The app’s News Feed was essentially an embellished table view above a tab bar with five icons: Home, Profile, Friends, Chat, and Inbox. Version 2.0 built on the same concept, adding two more layers of navigation underneath the main title bar. Facebook 3.0 was first previewed in July 2009, and introduced a 3×3 grid of icons to help solve the app’s ballooning navigation. Early screenshots show an entirely blue tiled grid, but this design was never released in a public build of the app. In October 2011, Facebook 4.0 was an early adopter of the “hamburger menu” for navigation. The app’s popularity hastened the embrace of the controversial design element across countless apps and websites in following years. After version 4, Facebook’s design timeline becomes significantly more challenging to follow. The app’s look began to iterate faster, and changes were often rolled out incrementally instead of being held for major releases. In April 2013, Facebook experimented with “Chat Heads” in the iOS app, moveable profile photos that expanded into chat windows when tapped on. iOS 7’s new look necessitated a redesign that saw the reintroduction of a tab bar for navigation. Tab bar icons are still regularly redesigned and relocated between updates. Some of Facebook’s design challenges come from their operational scale. Unlike many smaller apps, Facebook must offer a consistent experience to its customers on a large number of platforms, not just Apple’s. An update in August 2017 attempted to unify the design of the News Feed across iOS, Android, and the web with comments styled to look more like a Messenger conversation. Things Things began development as a task management tool for the Mac, but ended up hitting 1.0 status on iOS first. Cultured Code, the app’s developer, noted in their launch post that the original version was built in just over a month – a deadline that seemed impossible. Things 1.0 lacked a way to sync with the Mac version and had tagging disabled, both critical features. Despite the stressful launch, the same basic hierarchy of the app persists to this day. An excellent Flickr album documents the app’s early design stages. The first major visual refresh came in August 2012 when Things 2.0 was released. A fresh coat of paint shed the stock iOS look, and little graphical embellishments gave it unique personality. Things 2.5 in September 2014 refreshed the app’s UI again with a flatter look and lighter color scheme. A redesign was originally planned for Things 3, but development took longer than expected. Things 3 released in May 2017 was the most significant change the app’s look yet. Virtually every icon and UI element was re-drawn while preserving the underlying layout. In the update’s launch video, Cultured Code specifically highlights how animation was used to give the app an all-new feel. The redesign earned Cultured Code an Apple Design Award in 2017. OmniFocus Even in its infancy, the App Store was well-stocked with task management apps. Both Things and OmniFocus, from The Omni Group, have been available since day one. Although both apps provide similar utility, each has taken unique design directions over the past decade. OmniFocus for iPhone initially used simple table views with custom iconography for navigation, winning an Apple Design Award in 2008. The Omni Group redrew all of their artwork and the app’s icon in June 2010 in response to the iPhone 4’s Retina display. One of the app’s largest changes came in June 2011 when Forecast mode was added. A glossy date picker just under the navigation bar became a defining UI element, even when the gloss was dropped in 2013 for an iOS 7-era redesign. The new flat look relied heavily on text tint colors for spatial awareness. An update in spring 2015 brought a darker app icon to the iPhone with softer edges on the check mark. Every icon since 2012 has included an Easter egg that even longtime users might not know about. Zoom in and you’ll notice that the carbon fiber texture is actually made up of tiny, repeating Omni logos. The most recent major update to OmniFocus came this past May with OmniFocus 3.0. While many of the changes were engi…
2
jihchi
GitHub
v8n - :ballot_box_with_check: JavaScript fluent validation library.
jihchi
graphql-engine - Blazing fast, instant GraphQL APIs on Postgres with fine grained access control
2018-07-17
mofas
Twitter as your REPL.
mofas
"only work when you have 129k followers"
😂 2
mofas
Tutorial: Designing a GraphQL API
2018-07-18
jihchi
rogue.js - Rogue.js - a nearly invisible framework for creating server-rendered React applications
2018-07-20
jihchi
https://twitter.com/addyosmani/status/1020064908895895552?s=12
Measure web performance with the RAIL model: bit.ly/rail-model - goals and guidelines for faster pages. Updated for 2018 ⚡
Measure web performance with the RAIL model: bit.ly/rail-model - goals and guidelines for faster pages. Updated for 2018 ⚡
jihchi
https://twitter.com/left_pad/status/1019947243019882496?s=12
If you've been wondering how the Pipeline Proposal has been moving along, @JamesDiGioia has written a post on the @babeljs blog 🎉! babeljs.io/blog/2018/07/1…
If you've been wondering how the Pipeline Proposal has been moving along, @JamesDiGioia has written a post on the @babeljs blog 🎉! babeljs.io/blog/2018/07/1…
jihchi
yarn - :package::cat2: Fast, reliable, and secure dependency management.
2018-07-21
jihchi
thedaviddias/Front-End-Performance-Checklist
Front-End-Performance-Checklist - :video_game:The only Front-End Performance Checklist that runs faster than the others.
jihchi
pax - The fastest JavaScript bundler in the galaxy.
2018-07-22
mofas
ndb is an improved debugging experience for Node.js, enabled by Chrome DevTools
👍 2
mofas
現在js的dev tools DX 應該top1惹
mofas
之前 vs code attach debug整合 node.js 已經還不錯了
mofas
現在這個更加暴力
mofas
還可以做各種profiling
2018-07-23
mofas
用了vue這段時間 真的覺得vue-cli是一個大贏react eco system的設計
mofas
你可以開 ui 去選擇要inject什麼東西到你的project去, 不用自己 yarn install 然後調config 和 import
像是inject jest plugin 他就幫你開好資料夾 加上example code 注入npm script 和install all dependency
像是inject jest plugin 他就幫你開好資料夾 加上example code 注入npm script 和install all dependency
mofas
雖然覺得這沒定義好 inject不同plugin 應該會overwrite的亂七八遭 然後壞掉
mofas
但是目前還沒發生過 lol
mrorz
我覺得他應該會發生在一年後當你想要升其中幾個套件的版本的時候。
不過 React 也何嘗不會有這種問題呢 XDD
不過 React 也何嘗不會有這種問題呢 XDD
mrorz
所以 vue-cli 讓大家亂 inject 還可以繼續 work？
這樣 create-react-app 又在堅持什麼，讓大家啥都不能改 Orz
這樣 create-react-app 又在堅持什麼，讓大家啥都不能改 Orz
mofas
另外vue-cli 裡面用webpack-chain 讓你想怎麼改webpack就怎麼改
mofas
我用rewired-cra 寫到都快吐血惹
mofas
我覺得是vue-cli的plugin 已經吸取大量前人精髓(望向webpack) 所以設計的plugin可以cover到大多數人的用途 又能避免炸掉
https://cli.vuejs.org/dev-guide/plugin-dev.html#service-plugin
看這精美的dev documents
https://cli.vuejs.org/dev-guide/plugin-dev.html#service-plugin
看這精美的dev documents
mrorz
jihchi
beginner friendly ?
jihchi
react-window - React components for efficiently rendering large lists and tabular data
jihchi
https://github.com/bvaughn/react-window/issues/5 . 各種 AutoSizer
AutoSizer · Issue #5 · bvaughn/react-window
Document an AutoSizer solution built with react-measure (based on the Resize Observer spec, can be polyfilled). This seems like a more future-friendly way of detecting resize. For the moment, I hav...
mofas
Shamelessly copy and use!
👍 2
2
2
😎 1
2
2
😎 1
mrorz
由於我們希望可以重複使用 action creator，我們現在的 code base 的 action creator 有很多這種 code：
```
dispatch(setState('isLoading', false));
dispatch(setLoadingError(''));
dispatch(loadData(resp));
```
但其實上面這樣的 code 會觸發 3 次 re-render。
讀了一下 https://github.com/reduxjs/redux/issues/959 發現其實 2015 年 gaearon 曾經推薦過 redux-batched-actions: https://github.com/tshelburne/redux-batched-actions
感覺起來應該挺必要的，有人踩過什麼雷嗎？
```
dispatch(setState('isLoading', false));
dispatch(setLoadingError(''));
dispatch(loadData(resp));
```
但其實上面這樣的 code 會觸發 3 次 re-render。
讀了一下 https://github.com/reduxjs/redux/issues/959 發現其實 2015 年 gaearon 曾經推薦過 redux-batched-actions: https://github.com/tshelburne/redux-batched-actions
感覺起來應該挺必要的，有人踩過什麼雷嗎？
jihchi
re-render 透過 PureComponent 可以不用太擔心？
mrorz
但我的例子裡，state 被更新了三次沒錯。
如果你的 component 是 `Form` 好死不死就 connect 了 `isLoading`, `loadError`, `data`
就會 render 三次呢 XD
如果你的 component 是 `Form` 好死不死就 connect 了 `isLoading`, `loadError`, `data`
就會 render 三次呢 XD
jihchi
假設裡面的 component 沒用到 prop 就不會 re-render
mrorz
Hmm 確實透過夠細緻的封裝可以避免 re-render
不過同時也會進行很多的 prop comparison（當然與 vdom 比起來，這個比較確實輕量很多）
如果能把 dispatch batch 起來，就不用做這些 prop comparison 惹
不過同時也會進行很多的 prop comparison（當然與 vdom 比起來，這個比較確實輕量很多）
如果能把 dispatch batch 起來，就不用做這些 prop comparison 惹
mofas
你可以用updater pattern 呀 XD
```
updater => updater(reducer)
dispatcher('update', state => state.set('isLoading', false).set('loadingError', '').set('data', resp));
```
```
updater => updater(reducer)
dispatcher('update', state => state.set('isLoading', false).set('loadingError', '').set('data', resp));
```
jihchi
XD
mofas
我偷懶不想create action/action type/listener 的時候 整個reducer就只會有一個action 叫update XD
mofas
反正我已經幾乎沒在用redux log 去看action dispatch
jihchi
維護不易啊
mofas
it is fine if you don't need to maintain
jihchi
Hahhah
jihchi
It’s true
mofas
react-select.com
A flexible and beautiful Select Input control for ReactJS with multiselect, autocomplete and ajax support.
jihchi
Downshift 正夯？
mofas
我覺得downshift理念真的比較好
mofas
只是實作細節react-select做了必較好
jihchi
時代不一樣，定位也不一樣。react-select 當時還是最好用
jihchi
不見得每次都有時間自己刻
2018-07-24
jihchi
https://twitter.com/dceddia/status/1021396910823886848?s=12
A quick tutorial on React's Context API - pass props around easily without "prop drilling" (and no Redux needed):
A quick tutorial on React's Context API - pass props around easily without "prop drilling" (and no Redux needed):
mofas
cyan33/learn-react-source-code
learn-react-source-code - :fire: Build react from scratch (code + blog)
mofas
雖然簡中看起來有點蛋疼
mofas
still a good source
mrorz
簡中不是問題
但這中文翻譯感有點重，卻又找不到英文來源，一個用中文呈現英文句構的概念
好好說中文呀大大
但這中文翻譯感有點重，卻又找不到英文來源，一個用中文呈現英文句構的概念
好好說中文呀大大
mofas
下面有disclaimer呀
mofas
他只是把它更新到最新的fiber
mofas
這位作者 就是在fb專門負責fiber suspense那段code嘚
mrorz
酷，原來他有更新到 fiber
猛猛
猛猛
👏 1
mrorz
https://github.com/zpao/building-react-from-scratch 原本這個沒有 guidance 這些文件呢
zpao/building-react-from-scratch
building-react-from-scratch - Code for my React Rally talk.
mrorz
所以你看到的中文應該都是 cyan33 自己寫的
mrorz
只是讀一讀會覺得，好想看英文版啊
mrorz
他英文應該講得比中文溜
mofas
對呀 講啥weird的Chinese ..
mofas
`render 函数返回的也正是一个 element，而不是真正的 DOM 节点`
mofas
他馬的 就這樣中英交雜是在寫啥鬼
mrorz
what `render` function returns is exactly an element, rather than the real DOM node.
2018-07-25
jihchi
Resources:
1) Code before: https://codesandbox.io/s/q8yqx48074
2) Context solution (appropriate for significantly more complex cases): https://daveceddia.com/context-api-vs-redux/ …
3) Code with the pattern I’m suggesting: https://codesandbox.io/s/5wr22mkr6x
4) Docs on this pattern:
1) Code before: https://codesandbox.io/s/q8yqx48074
2) Context solution (appropriate for significantly more complex cases): https://daveceddia.com/context-api-vs-redux/ …
3) Code with the pattern I’m suggesting: https://codesandbox.io/s/5wr22mkr6x
4) Docs on this pattern:
CodeSandbox
The online code editor tailored for web applications
The online code editor tailored for web applications
2018-07-26
jihchi
https://twitter.com/mislav/status/1022058279000842240?s=12
We’re finally finished removing jQuery from GitHub.com frontend. What did we replace it with? No framework whatsoever:
• querySelectorAll,
• fetch for ajax,
• delegated-events for event handling,
• polyfills for standard DOM stuff,
• CustomElements on the rise.
We’re finally finished removing jQuery from GitHub.com frontend. What did we replace it with? No framework whatsoever:
• querySelectorAll,
• fetch for ajax,
• delegated-events for event handling,
• polyfills for standard DOM stuff,
• CustomElements on the rise.
jihchi
https://twitter.com/yarnpkg/status/1022149506350104576?s=12
We've just released Yarn 1.9! Slight performance increase, --no-default-rc, and various fixes are at the menu. Currently in prerelease, will be bumped to stable on Friday 🐱
We've just released Yarn 1.9! Slight performance increase, --no-default-rc, and various fixes are at the menu. Currently in prerelease, will be bumped to stable on Friday 🐱
jihchi
onegraph.com
Dashboard - Build Integrations 10x-100x Faster
OneGraph is a GraphQL service that wraps and connects the internet's SaaS APIs. Build integrations to Stripe, Intercom, Salesforce, Zendesk, GMail, and more 10-100x faster with OneGraph.
jihchi
2018-07-27
mofas
真假 time travel js debugger
mrorz
UIST 2013 有人發表過類似的東西唷
https://www.youtube.com/watch?v=ugHAzyQ6H00
我記得他是透過把 webkit 外面包一層東西記錄所有 signal 來達成的，靈感來自於虛擬化技術。
是篇非常 hardcore 的 paper
https://www.youtube.com/watch?v=ugHAzyQ6H00
我記得他是透過把 webkit 外面包一層東西記錄所有 signal 來達成的，靈感來自於虛擬化技術。
是篇非常 hardcore 的 paper
YouTube
Timelapse: Interactive Record/Replay for Web Application Debugging
mrorz
Paper: https://dl.acm.org/citation.cfm?id=2502050
快打開學校 VPN 來下載
快打開學校 VPN 來下載
mrorz
這邊有報 paper 的 session: https://vimeo.com/75999901
Vimeo
Brian Burg | Interactive Record/Replay for Web Application Debugging | Sep 25, 2013
Title: Interactive Record/Replay for Web Application Debugging During debugging, a developer must repeatedly and manually reproduce errant behavior in order to inspect different facets of the program’s execution. Existing behavior reproduction tools support replay via linear pause/play controls, but none is designed for interactive, random-access exploration during debugging tasks. In this paper, we present Timelapse, a developer tool and record/replay infrastructure for disseminating and debugging behaviors in web applications. Timelapse is integrated with the browser and introduces negligible runtime overhead when capturing behaviors. Developers can use Timelapse’s user interface to interactively browse, visualize, and seek through recordings while simultaneously using familiar debugging tools such as breakpoints and logging. Testers and end-users can use it demonstrate failures in situ and share captured recordings with developers, improving bug report quality by obviating the need for detailed reproduction steps. Together, our tool and infrastructure support systematic bug reporting and debugging practices. Brian Burg is a Ph.D student in the Computer Science & Engineering Department at the University of Washington. He is advised by Michael Ernst and Andrew Ko. He is interested in tools, techniques and designs that help programmers understand and debug software more effectively.
mrorz
當時在 UIST 聽完就跪惹
2018-07-29
jihchi
wretch - A tiny wrapper built around fetch with an intuitive syntax. :candy:
2018-07-30
jihchi
Contribute to between.js development by creating an account on GitHub.
jihchi
mdx-deck - MDX-based presentation decks
mofas
Google Developers
Page Lifecycle API | Web | Google Developers
The Page Lifecycle API brings app lifecycle features common on mobile operating systems to the web. Browsers are now able to safely freeze and discard background pages to conserve resources, and developers can safely handle these interventions without affecting the user experience.
1
2018-07-31
jihchi
https://twitter.com/typescriptlang/status/1023972234015076352?s=12
🎉 TypeScript 3.0 is here!!!! 🎉
Check out project references, extractable parameter lists, easier errors, and more! blogs.msdn.microsoft.com/typescript/201…
🎉 TypeScript 3.0 is here!!!! 🎉
Check out project references, extractable parameter lists, easier errors, and more! blogs.msdn.microsoft.com/typescript/201…
jihchi
grain - Compiler for Grain, the functional programming language. A modern web staple. :ear_of_rice:
jihchi
1st React DEV Conf of China
https://react.w3ctech.com/?l=en
https://react.w3ctech.com/?l=en
react.w3ctech.com
中国首届React开发者大会将于2018年8月18日在广州举行，本次大会由w3ctech联合前端圈举办。