frontend-tech

Month: 2017-12

2017-12-01

jihchi 09:04:41
https://burkeknowswords.com/introducing-react-food-truck-b23ea1e2cf79

Burke Knows Words

Introducing React Food Truck – Burke Knows Words

There are many important questions to ask when you are building an application. Questions like: “Who are the users?”, “What browser will…

快速掃了一下,蠻不錯,React developer 可以考慮裝。
但他會把 props 展開成
```
const {
props: { children },
} = this;
```

lol
jihchi 09:11:51
Type-Safe GraphQL with OCaml (part 1) · Andreas Garnæs
https://andreas.github.io/2017/11/29/type-safe-graphql-with-ocaml-part-1/

2017-12-02

jihchi 23:52:05
https://github.com/reactopt/reactopt

GitHub

reactopt/reactopt

reactopt - A CLI React performance optimization tool that identifies potential unnecessary re-rendering

NOTICE: node 7.6+
後面是用 puppeteer
AWESOME
jihchi 23:52:40
https://github.com/ianstormtaylor/superstruct

GitHub

ianstormtaylor/superstruct

superstruct - A simple and composable way to validate data in Javascript.

2017-12-03

2017-12-04

jihchi 22:49:26
https://haltu.github.io/muuri/

haltu.github.io

Muuri - Responsive, sortable, filterable and draggable grid layouts

Muuri is a JavaScript library that creates responsive, sortable, filterable and draggable grid layouts.

jihchi 22:49:43
https://github.com/diit/overtime-cli

GitHub

diit/overtime-cli

overtime-cli - Easy time-overlap tables for remote teams.

jihchi 22:51:11
我的 Chrome 跑是壞的..

2017-12-05

jihchi 08:36:28
https://twitter.com/kentcdodds/status/937686244045176832

twitter

:atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift: Here's my big announcement! My <https://twitter.com/eggheadio|@eggheadio> courses have been published and are totally FREE! “Learn React Fundamentals and Advanced Patterns” <https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db> :atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift::atom_symbol::gift:

jihchi 08:39:32
https://twitter.com/thelarkinn/status/937777635626688512

twitter

:heart_eyes::heart_eyes::heart_eyes::heart_eyes: On the 4th day of #webpack #JavaScript Christmas, our team gave to you! :heart::heart::heart::heart::heart::heart::heart: #webpack 4.0.0-alpha.0 :heart::heart::heart::heart::heart::heart::heart: All hands on deck, we'd love as much testing and feedback as possible. Please RT for coverage!!! SO MUCH TO TRY OUT!!!!!! <https://pbs.twimg.com/media/DQOnllZU8AA60Sa.jpg>

<https://pbs.twimg.com/media/DQOnoEbUIAAXOMd.jpg>

<https://pbs.twimg.com/media/DQOnqcbVoAARtiO.jpg>

<https://pbs.twimg.com/media/DQOnvhtVoAA-UUn.jpg>

jihchi 09:07:56
Curry away in React – Hacker Noon
https://hackernoon.com/curry-away-in-react-7c4ed110c65a

這用法在 render-intensive component 會很慘

Hacker Noon

Curry away in React – Hacker Noon

So you’re going to build the next-gen eCommerce company selling dog supplies and you’ve decided to use React to build it with coz, you know…

jihchi 22:04:03
https://github.com/appier/create-react-app/releases/tag/react-scripts-appier%407.0.2

GitHub

appier/create-react-app

create-react-app - Create React apps with no build configuration.

🎉 1
yhsiang 22:20:00
寫投影片中 XD
🎉 1
jihchi 22:24:00
`subdirs` 已加上 7.0.2
👍 1
jihchi 23:11:17
https://github.com/prettier/prettier/releases/tag/1.9.0

GitHub

prettier/prettier

prettier - Prettier is an opinionated code formatter.

jihchi 23:31:50
https://twitter.com/wsokra/status/937937284808265728

twitter

#webpack 4 release will be somewhere around February - March 2018. Release Candidate will be at least 1 months before release. With the RC we will announce the final release date.

2017-12-06

Michael Hsu 09:14:57
https://twitter.com/devongovett/status/938084464743165952

twitter

:package::rocket: Super excited to announce Parcel: A blazing fast, zero configuration web application bundler! :computer: Github: <https://github.com/parcel-bundler/parcel> :earth_americas: Website: <https://parceljs.org> :memo: Background: <https://medium.com/@devongovett/announcing-parcel-a-blazing-fast-zero-configuration-web-application-bundler-feac43aac0f1> <https://pbs.twimg.com/media/DQS-1-bUQAE7nVb.jpg>

Michael Hsu 09:24:29
https://twitter.com/BenLesh/status/938184403066298368

twitter

#RxJS 5.5.4 has been released. Resolves a couple of regressions caused in 5.5.3. #MyFault :pray::pray::pray: <https://github.com/ReactiveX/rxjs/blob/stable/CHANGELOG.md#554-2017-12-05>

Michael Hsu 09:39:19
https://medium.com/@ericsimons/introducing-turbo-5x-faster-than-yarn-npm-and-runs-natively-in-browser-cc2c39715403

Medium

Introducing Turbo: 5x faster than Yarn &amp; NPM, and runs natively in-browser :fire:

Note: This is part of a talk I’m giving at Google’s Mountain View campus on Wednesday, December 6th — come join!

2017-12-07

jihchi 08:43:43
https://twitter.com/mathias/status/938341147570835457

twitter

:package: jsvu lets you quickly install or update JavaScript engine binaries with a single command :fire: <https://github.com/GoogleChromeLabs/jsvu> Supported engines: - <https://twitter.com/ChakraCore|@ChakraCore> - JavaScriptCore - <https://twitter.com/SpiderMonkeyJS|@SpiderMonkeyJS> - <https://twitter.com/v8js|@v8js> Perfect in combination with eshost-cli! <https://pbs.twimg.com/media/DQWoSLuXkAAZLwh.png>

<https://pbs.twimg.com/media/DQWoSQvW0AA_2Vg.png>

jihchi 08:54:42
https://twitter.com/mxstbr/status/938352788479848448

twitter

redux-saga vs. redux-observable: Which one to use for complex asynchronous flows, and why? :thinking_face: Tons of practical experiences in this thread: <https://spectrum.chat/thread/2e738f7a-b385-4120-aff1-5fca9d1a6f34> :100:

jihchi 08:56:11
https://twitter.com/thelarkinn/status/938201037852221440

twitter

Okay I forgot here on previous photo's I didn't include a11y-friendly stats: So webpack v4, without sideEffects: false lodash-es (one export 'add'): 600 KiB minified d3 (one export 'treemap'): 100 KiB minified w/ `sideEffects: false` lodash-es: ~3 KiB d3: ~1 KiB :heart_eyes: <https://twitter.com/TheLarkInn/status/938188174794223616>

twitter

Nice to see <https://twitter.com/jdalton|@jdalton>'s lodash come to life as its intended tiny size!!! That :deciduous_tree:shaking for the win with #webpack 4.0.0-alpha and "'sideEffects': false". This is the promise of ESM modules. &lt;3 Will need to try d3 next and compare, cc <https://twitter.com/mbostock|@mbostock> #JavaScript #AlwaysBetOnWebpack <https://pbs.twimg.com/media/DQUdDGKUEAATCG-.jpg>

itsmisscs 09:11:58
https://github.com/reactjs/rfcs

GitHub

reactjs/rfcs

rfcs - RFCs for changes to React

jihchi 10:11:06
https://github.com/reasonml-community/index

GitHub

reasonml-community/index

index - Index of available BuckleScript bindings

Michael Hsu 15:32:39
https://github.com/react-community/reason-react-native-scripts

GitHub

react-community/reason-react-native-scripts

Contribute to reason-react-native-scripts development by creating an account on GitHub.

💯 1

2017-12-08

mofas 07:04:03
https://reactjs.org/blog/2017/12/07/introducing-the-react-rfc-process.html

reactjs.org

Introducing the React RFC Process - React Blog

We’re adopting an RFC (“request for comments”) process for contributing ideas to React. Inspired by Yarn , E

jihchi 08:40:15
https://twitter.com/code/status/938825465988636676

twitter

More Git improvements: review and stage changes directly inline! Get the latest <https://twitter.com/code|@code>: <https://buff.ly/2Ap137x>

Michael Hsu 12:26:03
https://twitter.com/thejameskyle/status/938981209035571200

twitter

Published an npm package that polyfills the proposed React Context API: - Repo: <https://github.com/thejameskyle/create-react-context> - RFC: <https://github.com/reactjs/rfcs/pull/2> <https://pbs.twimg.com/media/DQfuazyVwAAFYeW.jpg>

mofas 13:31:11
https://twitter.com/ElleOhHell/status/938466491510476805

twitter

If Wonder Woman and Spider-Man go into business together, they should call it Amazon Web Services.

😂 1
jihchi 18:40:24
https://twitter.com/2ality/status/938980729932759040

twitter

ReasonML: basic values and types <http://2ality.com/2017/12/basic-types-reasonml.html>

2017-12-09

mofas 10:30:36
最近看完Kent的 advanced react toturial
mofas 10:31:15
覺得介紹方式超OO, 雖然是用FP方式去寫, 但是每一種方法都要給個pattern name
mofas 10:31:45
有沒有這麼煩呀, 不就單純使用abstract或是partial function而已= =
mofas 13:28:25
https://twitter.com/paf31/status/939254996977172480

twitter

My OBT-2018 submission was rejected sadly, but here it is anyway: a short two-page introduction to a comonadic semantics of user interfaces: <http://functorial.com/the-future-is-comonadic/main.pdf>

2017-12-10

mofas 07:55:05
https://evilmartians.com/chronicles/evil-front-part-1

Martian Chronicles

Evil Front Part 1: Modern Front-end in Rails — Martian Chronicles

An opinionated guide to modern, modular, component-based approach to handling your presentation logic in Rails that does not depend on any front-end framework. Follow our three-part tutorial to learn the bare minimum of up-to-date front-end techniques by example and finally make sense of it all. Part 1: goodbye Asset Pipeline, code organization, linting.

mofas 07:58:35
Well, I feel Ruby is so obsolete when I read this "latest" article for FE developing.
mofas 07:59:36
You need to do some much configuration to develop in modern way.
mofas 07:59:43
And this is the only part 1

2017-12-11

Michael Hsu 10:47:00
https://twitter.com/jiayi_ghu/status/939801924655869952

twitter

:fire: Finally had the time to finish react-tiny-dom, a minimal implementation of react-dom using react-reconciler APIs: <https://github.com/jiayihu/react-tiny-dom> I think it could very useful to see how to implement a custom renderer in React 16 <https://twitter.com/reactjs|@reactjs> <https://twitter.com/dan_abramov|@dan_abramov> <https://pbs.twimg.com/media/DQrXoCzX0AAqZmd.jpg>

jihchi 18:48:23
https://twitter.com/saadabedine/status/940089276951289856

twitter

When HTML is life. <https://pbs.twimg.com/media/DQveNYYU8AEudD9.jpg>

jihchi 18:53:29
https://twitter.com/fermatslibrary/status/939862298268786688

twitter

73939133 is the largest prime number with this curious property: if you take one or more digits off the end, the resulting numbers are all prime. <https://pbs.twimg.com/media/DQsPx1WXUAAQ7RA.jpg>

1

2017-12-12

mofas 00:20:52
https://deeplearnjs.org/

deeplearnjs.org

deeplearn.js

a hardware-accelerated machine intelligence library for the web

mofas 00:21:05
竟然有這麼晚整的package了
jihchi 00:28:55
better late than never
jihchi 08:37:27
https://twitter.com/ebidel/status/940297256745308160

twitter

PSA: Network throttling has been added to headless Chrome 63. Means you can now reliably use it with <https://twitter.com/____lighthouse|@____lighthouse>:bulb::house: for perf testing or Puppeteer 🤹:skin-tone-2:‍♂️ to automate device emulation in CI! Among 1000s of other use cases :) <https://bugs.chromium.org/p/chromium/issues/detail?id=728451#c10>

jihchi 08:38:21
https://twitter.com/umaar/status/940352091452837888

twitter

30 seconds of code :star: <https://github.com/Chalarangelo/30-seconds-of-code> - Curated collection of useful Javascript snippets that you can understand in 30 seconds or less :timer_clock: - Also useful for functional programming in JS! <https://pbs.twimg.com/media/DQzNDDaW4AIHOGc.png>

jihchi 08:39:51
https://twitter.com/jordwalke/status/940355721354387456

twitter

Now, <https://twitter.com/reasonml|@reasonml> is licensed under the MIT license! Thanks to <https://twitter.com/dmwlff|@dmwlff>, FB legal, and <https://twitter.com/fbOpenSource|@fbOpenSource> people (you know who you are) <https://github.com/facebook/reason/commit/e8fb73ec6ff7c3136715a3c628769e3d5906c4f0>

jihchi 08:40:22
https://twitter.com/code/status/940309249095294976

twitter

Add multiple root folders to your workspace (Multi Root Workspaces) in <https://twitter.com/code|@code>'s latest release: <https://buff.ly/2A3Lcb9>

mofas 08:58:44
https://twitter.com/zofgames/status/940245768337788929

twitter

HardSource #Webpack Plugin version 0.5 is out! <https://www.npmjs.com/package/hard-source-webpack-plugin> Primary changes are - No longer depends on binary dependencies - Better ES2015 support - Serializes ModuleConcatenationPlugin - Better `environmentHash` default so less projects need it

mofas 08:59:01
hardsource become popular those day.
mofas 08:59:11
5k daily download ~
jihchi 09:53:30
https://stackoverflow.com/questions/47761894/why-are-fragments-in-react-16-better-than-container-divs

stackoverflow.com

Why are Fragments in React 16 better than container divs?

In React 16.2, improved support for Fragments has been added. More information can be found on React's blog post here. We are all familiar with the following code: render() { return ( //

Michael Hsu 12:31:12
https://github.com/developit/microbundle

GitHub

developit/microbundle

microbundle - Zero-configuration bundler for tiny modules, powered by Rollup.

Michael Hsu 12:31:18
https://github.com/egoist/poi

GitHub

egoist/poi

poi - :zap: Delightful web development.

Michael Hsu 12:31:28
各種 zero config
Michael Hsu 12:32:00
https://github.com/graphcool/graphql-yoga

GitHub

graphcool/graphql-yoga

graphql-yoga - 🧘 Fully-featured GraphQL Server with focus on easy setup, performance &amp; great developer experience

jihchi 14:34:10
https://github.com/andrewdavey/immutable-devtools 無意間發現一個好物!有用 Immutable.js 的好工具

GitHub

andrewdavey/immutable-devtools

immutable-devtools - Chrome Dev Tools custom formatter for Immutable-js values

💯 2
jihchi 19:10:35
https://twitter.com/jedwatson/status/940452745642786817

twitter

I just published an issue on the future of react-select: <https://github.com/JedWatson/react-select/issues/2208>

jihchi 19:11:36
https://twitter.com/sebmarkbage/status/940484973953294337

twitter

<https://twitter.com/kentcdodds|@kentcdodds> PureComponent was really mostly added to enforce that you don't rely on random mutation. To give React the option to bailout rather than force a bailout like sCU. I'd recommend using it everywhere so you have the option to bailout when you do need it.

2017-12-13

jihchi 08:32:58
https://twitter.com/popmotionjs/status/940579440672768000

twitter

Incredibly happy, and proud, to introduce Popmotion 8! A functional, reactive JavaScript motion library <https://popmotion.io>

jihchi 08:36:06
https://twitter.com/mattmueller/status/940621130737389568

twitter

I'm very excited to finally share what I've been working on. Introducing the Joy Compiler: Translate idiomatic Golang into concise Javascript that works in every browser. <https://mat.tm/joy/>

mofas 11:28:59
https://stateofjs.com/2017/introduction/

stateofjs.com

The State of JavaScript 2017: Introduction

A short survey about current popular JavaScript technologies.

mofas 11:31:21
https://stateofjs.com/2017/other-tools/
VS竟然超越Atom這麼多 lol

stateofjs.com

The State of JavaScript 2017: Other Tools

A short survey about current popular JavaScript technologies.

jihchi 11:31:51
現在周圍幾乎都用 VS Code
mofas 11:31:56
eslint is still dominate on linter ..
jihchi 11:32:35
VS Code launch speed 已經是讓你不覺得慢了
mofas 11:32:56
I believe prettier + flow/ts combination will be the better choice.
mrorz 16:15:00
@mrorz set the channel topic: 前瞻性技術之頻道。
討論紀錄:https://g0v-tw.slackarchive.io/frontend-tech
mrorz 17:32:46
eslint 是因為他很會整合吧。
像我們就是用 eslint 來呼叫 prettier 然後把 prettier 的 config 存在 eslint 的 config 裡頭。這樣他統計應該是兩者各加一票。

雖然現在 prettier 已經支援 config files 了,但 linter 設定不會一天到晚改,2017 年用了就是用了,最快明年才會改 XDD
jihchi 19:13:59
https://twitter.com/bahmutov/status/940796962269548545

twitter

How did Ramda - a functional programming library allowed itself to be included in the "state of JavaScript"?!! <http://stateofjs.com/2017/other-tools/>

😂 2
mofas 22:25:44
https://twitter.com/v8js/status/940879905079873536

twitter

:mega: V8 has native support for JavaScript code coverage. Tools like <https://twitter.com/ChromeDevTools|@ChromeDevTools> and Istanbul can now access V8’s coverage information without instrumenting the code! <https://v8project.blogspot.com/2017/12/javascript-code-coverage.html> <https://pbs.twimg.com/media/DQ6tR7wXUAYP5Ge.png>

🎉 1

2017-12-14

mofas 08:48:49
https://twitter.com/reactjs/status/941104685523406848

twitter

Hi friends. :sparkling_heart: The stars haven't quite aligned, so we won't have React Conf in early 2018 like we have in past years. TBD if we'll host something in the later half of the year. Maybe we'll catch y'all at another conference next year though! :rocket:

jihchi 19:07:48
https://twitter.com/jhusain/status/941182249671696384

twitter

Facebooks Haxl library for Haskell is great example of why it pays to learn a teensy bit of category theory. Think async/await on steroids. Now the compiler magic that makes this possible has landed in <https://twitter.com/purescript|@purescript>, so you can write Node apps this way! <https://m.youtube.com/watch?v=sT6VJkkhy0o>

2017-12-15

jihchi 08:34:13
https://twitter.com/wsokra/status/941331347653779457

twitter

#webpack 4 alpha.1 * importing wasm now correctly exports (no extra default) * overriding side effects for libraries possible via rules * minimizing added to production mode, uglifyjs 3 * cli move to webpack-cli * better progress reporting <https://github.com/webpack/webpack/issues/6132>

jihchi 08:36:03
https://twitter.com/fbopensource/status/941370631357997056

twitter

We are excited to announce the launch of <https://twitter.com/docusaurus|@docusaurus> - an infrastructure to help you easily create and manage open source websites. <https://docusaurus.io/blog/2017/12/14/introducing-docusaurus.html>

💯 1
jihchi 08:37:08
https://twitter.com/jedwatson/status/941298755323621376

twitter

Just published react-value It's a super simple component + HOC for turning controlled value into uncontrolled value, using a render prop. <https://github.com/jedwatson/react-value>

jihchi 08:39:38
https://twitter.com/jasnell/status/941371538623881216

twitter

I just published “Node.js and the Web Tooling Benchmark” <https://medium.com/p/node-js-and-the-web-tooling-benchmark-c982a88cf5b6>

jihchi 09:09:33
https://medium.com/@kevlinhenney/simplicity-before-generality-use-before-reuse-722a8f967eb9

Good article for software engineers

Medium

Simplicity Before Generality, Use Before Reuse – Kevlin Henney – Medium

A common problem in component frameworks, class libraries, foundation services, and other infrastructure code is that many are designed to…

Michael Hsu 09:42:25
https://twitter.com/evenchange4/status/941483387386175489

twitter

What's the difference between graphcool framework and graphql-yoga? graphcool framework =&gt; graphql native graphql-yoga =&gt; API gateway <https://github.com/graphcool/graphql-yoga/issues/29>

Michael Hsu 09:43:12
https://github.com/jaredpalmer/awesome-react-render-props

GitHub

jaredpalmer/awesome-react-render-props

awesome-react-render-props - :sunglasses: Awesome list of React components with render props

mofas 11:09:59
https://egghead.io/

egghead.io

Short,instructional screencast video tutorials for web developers on @eggheadio

Concise screencast video tutorials that cover the best tools, libraries, and frameworks that modern javascript web developers can use to code more effectively and stay current.

mofas 11:10:06
最近有holiday free course
mofas 11:10:09
想看的快看喔
jihchi 15:31:54
有推哪個嗎?
jihchi 18:47:31
https://twitter.com/toddmotto/status/941031523184250880

twitter

:zap: New post: Finally understand Redux by building your own Store. <https://toddmotto.com/redux-typescript-store>

2017-12-16

mofas 03:56:04
推薦這一個
https://www.youtube.com/playlist?list=PLbgaMIhjbmEnaH_LTkxLI7FMa2HsnawM_

YouTube

Category Theory - YouTube

Category theory for programmers by Bartosz Milewski. Seattle, Summer 2016. Additional material at <https://bartoszmilewski.com/2014/10/28/category-theory-for->...

mofas 09:46:56
https://egghead.io/courses/state-monad-in-javascript?utm_content=buffer31cc6&utm_medium=social&utm_source=twitter.com&utm_campaign=buffer

egghead.io

JavaScript tutorial: State Monad in JavaScript from @evilsoft on @eggheadio

Dealing with stateful computations can be a challenge when writing purely functional JavaScript. They can result in undesired variable declaration at best and boilerplate state management code in every function dependent on the state at its worst. In this course we will explore a well know Algebraic Data Type named State, that is built from the ground up to address these :corn:cerns. While this course will be focused around a State implementation provided by a library named crocks, a majority of the techniques we learn here can be used with most of the State implementations in the wild.

mofas 09:47:04
stateMonad in JS..
mofas 09:47:50
有興趣的話..
我也用JS 寫了一個極簡版本的
https://gist.github.com/mofas/dee44d8ba633cc63fbd0f7ef2b9ac008
mofas 09:47:56
stateMonad.js

2017-12-17

jihchi 10:55:46
https://twitter.com/_developit/status/941715749458018305

twitter

:mega: I have an exciting announcement: I'm joining the Chrome team <https://twitter.com/Google|@Google> in the new year! Looking forward to pushing the web...forward! :blush:

jihchi 10:57:11
Author of preact joined Google!
jihchi 15:22:52
https://github.com/c8r/x0

GitHub

c8r/x0

x0 - Zero-config React development environment and static site generator

jihchi 15:37:58
https://github.com/btholt/sfo

GitHub

btholt/sfo

sfo - Instant build process

lynn 16:11:47
@lynn has joined the channel

2017-12-18

mofas 00:55:39
最近在逛一些網站 發現字體變得很漂亮,
https://github.com/necolas/normalize.css/issues/665

GitHub

font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif · Issue #665 · necolas/normalize.css

It's time to add: font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif This solution is harmless and very useful. It is used by GitHub, Wordpr...

mofas 00:55:54
後來查發現好像是apple的字體
mofas 04:55:02
https://twitter.com/jaredpalmer/status/942410160739377152

twitter

Woah. React-based game framework... <https://github.com/google/boardgame.io>

jihchi 08:38:12
https://twitter.com/ntulswani/status/942079674527518720

twitter

Introducing React Performance Devtool !! A chrome extension to inspect the performance of React components. Github - <https://github.com/nitin42/react-perf-devtool> Chrome extension - <https://chrome.google.com/webstore/detail/react-performance-devtool/fcombecpigkkfcbfaeikoeegkmkjfbfm> cc <https://twitter.com/PKodmad|@PKodmad> Demo :point_down:

jihchi 08:47:09
https://twitter.com/benlesh/status/942299783917477888

twitter

LOL. I'm still not using G+. Although I do think it's better, feature wise, than Facebook. <https://twitter.com/_youhadonejob1/status/941418759583158273>

twitter

Social media explained. <https://pbs.twimg.com/media/DRCXX0xX4AAI77q.jpg>

mrorz 10:22:03
不是很能理解 Svelte 跟 Vue 的 vue 檔差在哪裡 lol
mrorz 10:28:18
他要做 observable 與 2-way binding 還是要弄個 runtime 呀 ._.
jihchi 10:34:12
Svelte 產生 Vanilla JavaScript,沒有 runtime
jihchi 10:37:28
不過還是得有些 "code" 來達成 observ. / 2-way binding
mrorz 10:39:46
我對 runtime 的理解是
例如說我們寫了一個 React component
我們定義了 render(),他就會在正確的時間被執行
這對我來說就是 runtime 幫我做的事情
mrorz 10:40:15
而 svelve 他的 hello world 範例,編出來長這樣
mrorz 10:40:57
update function
jihchi 10:42:39
Svelte 就幫你用 native JS / DOM API 去組出這些功能
mrorz 10:42:49
而這個 update (`p`) 在 setState 的時候會被執行
jihchi 10:43:07
React 還需要 lib 多一層 "runtime" 去組出這些功能
mrorz 10:43:16
setState
mrorz 10:43:31
這就像是在 babel compile 時把 runtime 塞進去不是嗎 Orz
mrorz 10:44:03
看起來是不用 import 一個 “library” 沒錯
mrorz 10:44:11
因為他在 compile 時塞進去惹。
mrorz 10:45:05
然後如果這個 compiler 足夠聰明
複數個 svelve compoent 被 compile 時只會塞 1 份這些 function 的話
mrorz 10:45:20
那看起來就像是自動 import 了一個 library 不是嗎 QQ
jihchi 10:45:28
是喔,沒錯
jihchi 10:46:09
嚴格說起來,就差在你自己 createElement 跟有沒有 lib / compiler 幫你 createElement
mrorz 10:46:27
所以我覺得沒有 runtime 這件事情像是行銷話術
jihchi 10:47:01
Svelte 一個賣點就是,我 compile 出來就是 Vanilla JavaScript,可以用在任何 React / Angular / Vue
mofas 10:47:12
我覺得比較像是inline function的optimization
mofas 10:47:39
你哪一個code compile出來不是vanilla js = =
mofas 10:47:46
只是有沒有reuse function而已
mofas 10:48:08
library就保留原來function然後reuse
mofas 10:48:27
假如svelve夠聰明可以做staging
mofas 10:48:32
或是partial evaluation
mrorz 10:48:34
React runtime 無法被用在其他地方是因為他的 runtime 接管了 DOM,嚴格使用 lifecycle 來處理事情,任何其他對 DOM 的操作,如果沒有做特殊處理(shouldComponentUpdate)的話,會被 react 給覆蓋或弄壞

svelve 之所以可以被重用,是因為他的 “runtime” 直接操作 DOM
mrorz 10:48:43
而不是因為他「沒有 runtime」
mofas 10:48:46
那其實runtime loading會更小
mrorz 10:48:48
也不是因為他 compile to vanilla
jihchi 10:49:58
我不知道怎麼在 Angular 裡面 import React component 來用..
mrorz 10:50:22
那是因為 Angular 的 runtime 用了 digest loop,不照他的做法來做會壞掉
mrorz 10:50:53
因此 svelte 之所以可以 portable 是因為他「直接操作在 DOM 上」
mrorz 10:51:07
沒有 DOM 之外的其他邏輯
mrorz 10:51:17
我覺得更像是 2018 年的 jQuery UI
mrorz 10:51:29
API 很不錯
mofas 10:51:37
喔 那就是No virtual DOM render而已
💯 1
mrorz 10:51:39
行銷話術很猛
jihchi 10:51:49
> 我覺得更像是 2018 年的 jQuery UI
這句很不錯
mofas 10:52:15
叫 Real DOM render 會不會比較酷
mofas 10:52:34
應該是他可以完整判斷data 有沒有變
mofas 10:52:42
根本就不需要用virtual DOM去比對
mofas 10:52:58
這才是他高效的地方ㄅ
mrorz 10:53:11
可能有人用過了吧 lol
例如說 morphdom
mrorz 10:55:18
https://github.com/patrick-steele-idem/morphdom

GitHub

patrick-steele-idem/morphdom

morphdom - Fast and lightweight DOM diffing/patching (no virtual DOM needed)

mrorz 10:55:23
這樣不行,沒有行銷點 (?)
jihchi 10:56:03
沒有包裝好
mrorz 10:56:17
嗯嗯,他是 basic building block
jihchi 10:56:21
Svelte 包裝好,讓你寫起來感覺像 React component
jihchi 10:56:28
還有附加一堆東東
mrorz 10:56:35
包好之後 DX 才會讓人想用
💯 1
jihchi 10:57:53
看一些 open source project 在推廣,很多 DX 考量都超越 language 本身了 ..
jihchi 10:58:13
Reason 3 就很 JS ..
mrorz 10:58:14
我覺得 svelte 真正做的事情是
「你寫 html 與 component config,我在 babel compile 時幫你接 DOM API 與 2-way binding」
mrorz 10:59:30
文件裡那些慷慨激昂的「讓我們一起改變 2018 年的前端」不知道是誰想出來的 ._.
mrorz 10:59:36
募資ㄇ
jihchi 11:00:36
XD 哪裡看到啊?
https://svelte.technology/blog/frameworks-without-the-framework

> Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass.
> – front end developers in 2018
哪一段啊?
抱歉有點超譯了他的話 QQ

原文一開始是一個設計對白
> Wait, this new framework has a runtime? Ugh. Thanks, I’ll pass.
> – front end developers in 2018

文末則有
> head over to GitHub to help kickstart the next era of front end development.
有有有,意思有到
「開啟前端開發下一個紀元」 XD
mofas 11:01:17
大大們可以踩雷一下
https://github.com/parcel-bundler/parcel

GitHub

parcel-bundler/parcel

parcel - :package::rocket: Blazing fast, zero configuration web application bundler

jihchi 11:03:22
@yhsiang 有玩了一下 https://github.com/yhsiang/reason-parcel-demo

GitHub

yhsiang/reason-parcel-demo

reason-parcel-demo - Create ReasonReact project with Parcel in 5 minutes

Michael Hsu 11:03:59
https://twitter.com/thekitze/status/941969671124848640
好久沒用 v2也改成 render prop 了

twitter

TIL, react-transition-group has a much better API now:ok_hand: Here's how you can write a simple Fade component. Sandbox here: <https://codesandbox.io/s/y26rj99yov> <https://pbs.twimg.com/media/DRKMPmiWsAAUE6O.jpg>

2017-12-19

mofas 07:40:47
https://twitter.com/fbjest/status/942714166384758785

twitter

Jest 22 is out! We refined the entire testing experience and graduated Jest's custom runners from experimental status. Check it out: <http://facebook.github.io/jest/blog/2017/12/18/jest-22.html>

mofas 07:43:01
https://twitter.com/tjholowaychuk/status/942896400555110400

twitter

<https://parceljs.org> :ok_hand:

mofas 07:43:06
TJ說ok
👌 2
mofas 07:43:32
https://twitter.com/leeb/status/942861371980505088

twitter

:gift: GraphQL.js v0.12.0 is ready just in time for the holidays with a *ton* of exciting new stuff, following the latest draft of the spec, and adding a bunch of new utilities and extended capabilities. :tada: <https://github.com/graphql/graphql-js/releases/tag/v0.12.0> <https://pbs.twimg.com/media/DRW3GjpWsAASZ6H.jpg>

1
mofas 08:43:12
jest-worker看起來很有淺力
mofas 09:16:32
Jest 22 support Puppeteer http://facebook.github.io/jest/docs/en/puppeteer.html

facebook.github.io

Using with puppeteer · Jest

With the [Global Setup/Teardown](/jest/docs/en/configuration.html#globalsetup-string) and

Jest 22 以前,這個不能透過 `before()` 與 `after()` 來做嗎
Fix: beforeAll 和afterAll 的確也可以async
照理說是可以啦.. 可能有啥神奇的bug造成要用這種奇怪的方法
是說 environment 嗎
我也蠻好奇為什麼要做 environment 的 XD
像是官方說「我知道你們以前都用奇怪的做法來做 setup / teardown,現在我們提供官方作法囉」這樣 @@
Michael Hsu 2017-12-19 11:17:03
之前用奇怪的方法做+1
我看到了 他不想beforeAll裡面再create puppeter
為了整個專案只起一個puppeter, 在beforeAll裡面 只做 `await global.__BROWSER__.newPage()`

2017-12-20

mofas 08:37:16
Reason DX還是好差, = = 我再多等幾個月好惹.. 一直回我Unknown Syntax Error 然後就炸惹
native Reason ?
Reason 還有分是不是native的喔
我是想問是有 to JS 嗎 (BS)
就Reason轉Ocaml這段掛
oh, got it.
是 ocaml language server 的問題,或者是 vscode plugin 的問題
unknown syntax error 通常真的是 syntax error 例如少了 ; 或多了 ; XD
大概撞個半天到一天就會過去了 XD
mofas 08:37:55
是沒人在用pattern match 所以那邊的Syntax error message沒人寫ㄇ- -
jihchi 08:38:40
https://twitter.com/elijahmanor/status/943256724403781633?ref_src=twcamp%5Eshare%7Ctwsrc%5Eios%7Ctwgr%5Ecom.tinyspeck.chatlyio.share

twitter

If you write #JavaScript and Regular Expressions, then Regexly is great! <https://regexly.chipto.io/> <https://pbs.twimg.com/media/DRceoJIWAAAN6vN.jpg>

mofas 09:21:21
Reason 的 recursive function 也有點囉唆, 不完全是 first class function - -
mofas 10:49:53
Fuck, 連type declaration 也不能recursive..
```
type exp =
| Symbol(string)
| Number(int)
| Plus(exp, exp)
| Multi(exp, exp)
| Lambda(string, exp)
| Application(exp, exp);

type env =
| EmptyEnv
| Env(string, ret, env);

type ret =
| Int(int)
| Error(string)
| Closure(string, exp, env);
```
不確定是不是你要的
那個我試過
不做用在variants上
`exp` 在哪兒?
你要是完整的喔.. 我改一下
喔喔也不用啦
喔喔好
感謝
```
Reason # type env =
| EmptyEnv
| Env(string, env);

type env = EmptyEnv | Env(string, env);
```
可以耶
應該看得出來再寫 interpreter 😛
還是online的compiler有bug
我單純 recursive env ~variable~ variant
喔 單純的recursive可以
但是env 要用ret ret 要用 env
就不行
circle 在 rtop 也不行。online compiler 應該是正常
```
type exp =
| Symbol(string)
| Number(int)
| Plus(exp, exp)
| Multi(exp, exp)
| Lambda(string, exp)
| Application(exp, exp)

and env =
| EmptyEnv
| Env(string, ret, env)

and ret =
| Int(int)
| Error(string)
| Closure(string, exp, env);
```
這樣不是可以?
原來是要這樣 我打 and type
對,這有點靠杯 ... 我仔細看了 tutorial 才發現 XD
感謝大大 我的mini interpreter 終於寫完了
可以支援lambda application囉
Michael Hsu 10:56:34
https://twitter.com/fold_left/status/943197276901728261

twitter

expect-more-jest 1.0.0: A huge library of test matchers for a range of common use-cases <http://bit.ly/expect-more-jest> #javascript #typescript #nodejs #tdd #bdd <https://twitter.com/fbjest|@fbjest>

Michael Hsu 11:35:46
https://twitter.com/mjackson/status/943194229085429760

twitter

Preach it, <https://twitter.com/dan_abramov|@dan_abramov>! :innocent: <https://pbs.twimg.com/media/DRbl8YsVoAEGYxb.jpg>

Michael Hsu 17:34:57
https://twitter.com/Fitzpasd/status/941411989427052546

twitter

Today we released RxRelayJS, a RxJS lib that introduces Relay types. Relays are similar to Subjects, but stateless (can't call error() or complete()). Inspired by the original Java implementation by <https://twitter.com/JakeWharton|@JakeWharton>. <https://twitter.com/OpenAtMicrosoft|@OpenAtMicrosoft> <https://github.com/microsoft/rxrelayjs>

jihchi 20:17:10
https://danilowoz.github.io/react-content-loader/

danilowoz.github.io

react-content-loader

React component that uses SVG to create a collection of loaders which simulates the structure of the content that will be loaded, similar to Facebook cards loaders.

2017-12-21

mofas 00:09:05
https://blogs.technet.microsoft.com/virtualization/2017/12/19/tar-and-curl-come-to-windows/

blogs.technet.microsoft.com

Tar and Curl Come to Windows!

Information and announcements from Program Managers, Product Managers, Developers and Testers in the Microsoft Virtualization team.

mofas 00:09:25
Mac pro 再沒進步 下一台可能就要買surface惹
mofas 00:09:43
Apple不知道腦袋哪裡有洞 竟然解散Mac pro team
從來沒用過 mac pro ._.
我是說mac probook
probook 聽起來很厲害
mofas 01:41:05
https://medium.muz.li/using-gradients-the-right-way-878d797bc600

Muzli -Design Inspiration

Using Gradients the right way – Muzli -Design Inspiration

I couldn’t agree more with one of the world’s most celebrated graphic designers. And, why shouldn’t I? Design is a universal language, and…

jihchi 08:29:38
https://twitter.com/reasonldn/status/943423478618877952?ref_src=twcamp%5Eshare%7Ctwsrc%5Eios%7Ctwgr%5Ecom.tinyspeck.chatlyio.share

twitter

Hey look, it’s nact! A :sparkles:brand new:sparkles: library that lets you combine <https://twitter.com/nodejs|@nodejs> and actors with first class support for <https://twitter.com/reasonml|@reasonml>, lovingly crafted by @hncthbrt. The site is gorgeous and you should definitely check it out. :unicorn_face::rainbow: <https://nact.io/>

jihchi 08:34:50
https://twitter.com/sumandna/status/943581354675056640?ref_src=twcamp%5Eshare%7Ctwsrc%5Eios%7Ctwgr%5Ecom.tinyspeck.chatlyio.share

twitter

<https://twitter.com/parceljs|@parceljs> #Webpack - Compared Parcel(1.2.1) and Webpack(3.5.6) on project (~800 JS files) Run1: Webpack: 6.7 min Parcel: 1 min 6 s Run2: Webpack: 5.65 min Parcel: 2 s Config Details: Webpack - [Babel thread-loader and caching, parallel uglify, no sourcemap] Parcel - [none]

Michael Hsu 2017-12-21 09:39:29
> Parcel - [none] 😳
XD
可以看討論串,裡面有深入點的討論
💯 1
jihchi 08:36:06
https://twitter.com/thelarkinn/status/943606514509418496?ref_src=twcamp%5Eshare%7Ctwsrc%5Eios%7Ctwgr%5Ecom.tinyspeck.chatlyio.share

twitter

Alright everyone who's writing all these 5cent hype-blogs about <https://twitter.com/parceljs|@parceljs> v #webpack without trying it. Here's what we call _facts_. #JavaScript #OSS Chew on this: ==Alt a11y Text== parcel (no-cache): 7.56s parcel (cache): 2.71s webpack@webpack/webpack#next (no-cache): 973ms <https://pbs.twimg.com/media/DRhcUfbUQAAlxAW.jpg>

<https://pbs.twimg.com/media/DRhcV4FU8AAm96l.jpg>

👍 1
jihchi 08:41:39
https://twitter.com/jasnell/status/943546850606424064?ref_src=twcamp%5Eshare%7Ctwsrc%5Eios%7Ctwgr%5Ecom.tinyspeck.chatlyio.share

twitter

Performant Programming Pro Tip: Abstractions have a cost. Those costs add up. Every time you add a new abstraction to your code for the sake of convenience you necessarily slow your code down.

Michael Hsu 09:49:43
https://twitter.com/paul_irish/status/943545583909838849
Safari ❤️ service worker

twitter

Service Workers are ENABLED BY DEFAULT in Safari Technology Preview! :tada::tada: <https://twitter.com/webkit/status/943541983569727496>

twitter

Release notes for today’s Safari Technology Preview release 46 update are now available. <https://webkit.org/blog/8042/release-notes-for-safari-technology-preview-46/> <https://pbs.twimg.com/media/DRgibulW0AAMmhj.jpg>

2017-12-22

jihchi 09:41:14
https://github.com/parcel-bundler/parcel/commit/47e91926f1d9ed763ad11cbd39a9b9fbc1986b20

GitHub

Add Reason asset type (#342) · parcel-bundler/parcel@47e9192

* Add bsb-js dependency * Add ReasonAsset type * Actually add the Reason asset type * Add OCaml file type, add integration test, remote unused imports * use promisify for reading files ...

jihchi 09:41:26
MERGED!

2017-12-23

mofas 23:10:04
這篇開始大混戰了
mofas 23:10:09
Dr boolean 參戰
mofas 23:11:31
我也覺得vjeux沒有搞清楚FP 很多drawback SICP就解釋正確的原因

2017-12-25

jihchi 09:47:50
https://redex.github.io/

redex.github.io

redex | Reason Package Index

Package index for the ReasonML/BuckleScript ecosystem

jihchi 18:49:38
https://twitter.com/addyosmani/status/944838976162189313?ref_src=twcamp%5Eshare%7Ctwsrc%5Eios%7Ctwgr%5Ecom.tinyspeck.chatlyio.share

twitter

New blog post: Performance lessons from Tinder's Progressive Web App <https://medium.com/@addyosmani/a-tinder-progressive-web-app-performance-case-study-78919d98ece0> ~ built with React 16, Redux, webpack 3 :scissors: JavaScript optimizations (code-splitting &amp; preloading) :iphone: Service Workers for network resilience :hourglass: Performance budgets &amp; more

jihchi 18:52:04
https://twitter.com/patrick91/status/944992010867535872?ref_src=twcamp%5Eshare%7Ctwsrc%5Eios%7Ctwgr%5Ecom.tinyspeck.chatlyio.share

twitter

Here we go! We have an official repo for <https://twitter.com/PrettierCode|@PrettierCode>'s Python support! Can't wait to have this done! I'll be working on it again soon :) Feel free to test and help! <https://github.com/prettier/prettier-python>

2017-12-28

jihchi 08:37:16
https://twitter.com/fbplatform/status/946078253952983042?ref_src=twcamp%5Eshare%7Ctwsrc%5Eios%7Ctwgr%5Ecom.tinyspeck.chatlyio.share

twitter

Introducing React v16.2.0: Improved Support for Fragments. <https://twitter.com/reactjs|@reactjs> now provides a first-class fragment component that can be used in place of arrays <http://bit.ly/2ACSnuM>

jihchi 22:59:41
https://twitter.com/codewisdom/status/946388770886242304?ref_src=twcamp%5Eshare%7Ctwsrc%5Eios%7Ctwgr%5Ecom.tinyspeck.chatlyio.share

twitter

"Refactoring- the process of taking a well-designed piece of code and, through a series of small, reversible changes, making it completely unmaintainable by anyone expect yourself." - Jason Gorman

2017-12-29

jihchi 08:41:52
https://twitter.com/jaredforsyth/status/946457013864734720?ref_src=twcamp%5Eshare%7Ctwsrc%5Eios%7Ctwgr%5Ecom.tinyspeck.chatlyio.share

twitter

:tada: Released my <https://twitter.com/reasonml|@reasonml> game to the google play store: "Gravitron" <https://play.google.com/store/apps/details?id=com.jaredforsyth.gravitron> Also available on desktop web: <http://gravitron.jaredforsyth.com/> and the source is here: <https://github.com/jaredly/gravitron/> <https://pbs.twimg.com/media/DSJ9XU8UEAAVKrS.jpg>

<https://pbs.twimg.com/media/DSJ9XyrVwAAKO2z.jpg>

<https://pbs.twimg.com/media/DSJ9YTVVAAAG5r5.jpg>

mofas 11:08:21
New chapter !!!!
mofas 11:56:40
jlongster 開發方式好老派
😂 1
Michael Hsu 17:11:09
https://twitter.com/zeit_status/status/946597402483421184
這邊好像很多人用

twitter

Core services and user deployments are back at 100% availability. We are actively monitoring the system health, and are curating a post-mortem to be released soon. Thank you once again for your patience.

Michael Hsu 17:11:26
昨晚掛掉近 10 個小時
jihchi 17:13:40
Parcel 官網也是掛在 ZEIT
Michael Hsu 17:16:36
好慘喔 發生一次不知道會流失多少用戶
mofas 23:07:42
project 做完就不理他惹
mofas 23:07:44
https://babeljs.io/blog/2017/12/27/nearing-the-7.0-release

babeljs.io

Nearing the 7.0 Release · Babel

Check out Planning for 7.0 for the last updates throughout the 7.0 pre-releases. If something isn’t clear in this post let me know!

2017-12-30

mofas 10:20:23
https://twitter.com/mweststrate/status/946770150702899200?ref_src=twcamp%5Eshare%7Ctwsrc%5Eios%7Ctwgr%5Ecom.tinyspeck.chatlyio.share

twitter

Woke up last night with the idea that copy-on-write (with structural sharing) would make writing #Redux reducers much more straightforward. So, here it is (before and after). Happy new year! <https://github.com/mweststrate/immer> <https://pbs.twimg.com/media/DSOaR1xW4AA6LTq.jpg>

<https://pbs.twimg.com/media/DSOaTpyXcAAbrVq.jpg>

jihchi 10:31:08
GitHub - mweststrate/immer: Create the next immutable state by mutating the current one
https://github.com/mweststrate/immer

GitHub

mweststrate/immer

immer - Create the next immutable state by mutating the current one

Performance 圖表更新了

https://github.com/mweststrate/immer#performance

看起來跟 ImmutableJS 沒有太大差別
而且如果選了 ImmutableJS 又亂 toJS 的話,會無以復加的差⋯⋯
似乎可以直接 replace immutable
是呢
但如果 code base 裡已經一堆 `.get()`、`.getIn()`,那或許已經為時已晚⋯⋯
下次開新專案再說吧 XDDD
CRA 改預設裝這個?!
唔喔,這倒是個好問題
@yhsiang 覺得如何
@mrorz 用 reason 都沒差惹

2017-12-31

jihchi 12:38:04
https://twitter.com/jaredforsyth/status/947321579356045315?ref_src=twcamp%5Eshare%7Ctwsrc%5Eios%7Ctwgr%5Ecom.tinyspeck.chatlyio.share

twitter

I just posted "Building async/await in <https://twitter.com/reasonml|@reasonml>" -- let me know what you think! <https://jaredforsyth.com/2017/12/30/building-async-await-in-reason/>

wildsky 21:39:08
@wildsky has joined the channel