#frontend-tech

2017-05-17
yhsiang 14:55:04
@yhsiang has joined the channel
yhsiang 14:55:05
@yhsiang set the channel purpose: 前瞻性技術之頻道
mrorz 14:55:05
@mrorz has joined the channel
kcliu 14:55:05
@kcliu has joined the channel
kcliu 14:55:16
lol
jihchi 14:55:43
@jihchi has joined the channel
kcliu 14:55:45
`前瞻性` 技術之頻道 xd
jihchi 14:55:51
XDDDD
mrorz 14:56:07
這會害我切錯 www
yhsiang 14:56:27
jihchi 你叫 cy 加一下啊
kcliu 14:56:44
這樣左轉就可以去 #cofacts
yhsiang 14:56:46
mrorz 備份要怎麼設啊
zulip_bridgebot 14:56:56
@zulip_bridgebot has joined the channel
yhsiang 14:57:01
這樣就可以了?
mrorz 14:57:02
yeah 就這樣
czchen 14:57:10
@czchen has joined the channel
yhsiang 14:57:17
然後我要在那邊看到備份?
czchen 14:57:41
靠背,剛剛跑到 ocf.tw 的 frontend-tech 去了
mrorz 14:57:42
https://g0v-tw.slackarchive.io/ 大概明天會看到這個新 channel
yhsiang 14:57:46
XDDD
jerry.hong 14:57:53
@jerry.hong has joined the channel
yhsiang 14:57:58
你還可以再 ocf.tw 開 channel 太神啦
mrorz 14:57:58
到處都有 #frontend-tech
andy 14:57:59
@andy has joined the channel
mrorz 14:58:18
可以不要佔人家的 10000 則上限嗎www
mrorz 14:58:28
每一則訊息都會蓋掉別的 channel 的某個訊息 www
yhsiang 14:58:44
@yhsiang set the channel topic: 前瞻性技術之頻道
wuct 14:58:56
@wuct has joined the channel
wuct 14:59:10
還以為這裡有八卦
yhsiang 14:59:15
wuct 為啥這裡就叫 wuct
yhsiang 14:59:39
jerry.hong 為啥公司不用照片
wuct 14:59:51
這好久以前打的
jerry.hong 14:59:58
這很久以前的了
poga 15:01:14
@poga has joined the channel
jihchi 15:05:53
不過這邊算是 public 對吧?貼的內容都會被搜得到?
ca1025 15:06:02
@ca1025 has joined the channel
mrorz 15:06:36
yes it is
mrorz 15:08:10
slackarchive bot 不確定是否支援編輯與刪除
Jack 15:08:26
@jackhuang has joined the channel
jihchi 15:08:36
被收錄之前趕快刪掉 !?
jihchi 15:08:43
snapslack
joesu 15:57:00
@joesu has joined the channel
mofas 16:27:29
@mofas has joined the channel
mofas 16:28:09
You know who I am
jihchi 16:28:25
yhsiang 16:28:46
I know!
jihchi 19:15:08
twitter
5000+ users of the <https://twitter.com/googlechrome|@googlechrome> extension. Sweet! :lollipop::lollipop: <https://chrome.google.com/webstore/detail/sizzy/nfhlbmjiiogoelaflfclodlkncbdiefo> <https://pbs.twimg.com/media/DABHGu5XkAAqz2T.png>
jihchi 19:15:37
twitter
I just published “Universal React With Redux-Saga” <https://medium.com/p/universal-react-with-redux-saga-fb86e5e819a4>
jihchi 19:18:22
twitter
I just published "Building HandsUp: an OS real-time voting App w #GraphQL &amp; #Reactjs" <https://medium.com/@gerard.sans/building-handsup-an-os-real-time-voting-app-using-graphql-and-react-b2b7dcd0e136> #apollo #auth0 #reacteurope :sparkles::rocket:
jihchi 19:22:21
twitter
CSS Conf EU 2017 Best Of by netzartist-de <http://slides.com/netzartist-de/cssconfeu17-bestof> # 這份 slide 整理了剛結束的 <https://twitter.com/CSSconfeu|@CSSconfeu> 議程重點
jihchi 19:27:32
Mavo: A new, approachable way to create Web applications
http://mavo.io/
重點:Developed at MIT CSAIL and led by Lea Verou.
jihchi 19:29:12
Medium
This post is brought to you by Myles Borins who is a @nodejs ctc member / developer advocate for @googlecloud. Now with that background…
  • 1
chhsiao1981 20:20:44
@chhsiao1981 has joined the channel
mrorz 20:22:37
Replied to a thread: 2017-05-17 19:27:32
重點:Developed at MIT CSAIL and led by Lea Verou.
  • 💯1
mrorz 20:22:37
Jih-Chi Lee
Mavo: A new, approachable way to create Web applications
http://mavo.io/
重點:Developed at MIT CSAIL and led by Lea Verou.
ggm 20:34:16
@ggm has joined the channel
lucien 20:34:25
@lucien has joined the channel
kdchang 21:26:05
@kdchang has joined the channel
2017-05-18
jihchi 08:40:37
twitter
As promised, here's my new ultra-fast JavaScript library for Delaunay triangulation of 2D points — enjoy! <https://github.com/mapbox/delaunator>
jihchi 08:41:01
twitter
Latest benchmark results: :white_check_mark: fastest startup of any framework :white_check_mark: lowest memory usage :x: need to improve row swapping <https://rawgit.com/krausest/js-framework-benchmark/67a05320ee3d485f059c3cb11fa2b872ded3c5bf/webdriver-ts/table.html>
jihchi 08:42:14
twitter
GraphQL Subscriptions was just merged into the upcoming spec release: <https://github.com/facebook/graphql/pull/305> along with real code <https://github.com/graphql/graphql-js/pull/846>
jihchi 08:44:02
twitter
DAMMIT, here too?! <https://pbs.twimg.com/media/C__fwIcUMAEJLEk.jpg>
jihchi 08:45:09
twitter
Next.js 2.4.0 (12 authors) :mega: ◆ Made dev webpack cfg extensible ◆ Better Windows support, errors, HMR ◆ Example fixes <https://github.com/zeit/next.js/releases/tag/2.4.0>
jihchi 09:18:05
CSS Houdini- the bridge between CSS, JavaScript and the browser by Serg Hospodarets
http://slides.com/malyw/houdini-codemotion#/
Slides
Today CSS Custom Properties are supported in all the major browsers. Now it’s time to do the next step- to have an ability to register new Custom Properties from JavaScript and setup the browser how to work with them (e.g. real CSS polyfills). They should work with the same performance as the native CSS properties, being animatable and aligned with CSSOM. Custom Properties can be used as a bridge between CSS and JavaScript. Houdini Task force introduces specs and JavaScript Worklets to expose the interaction with previously fully internal browser rendering mechanisms (during Paint, Layout, Composite stages). All this brings Front-End development to the next level, parts of which are already available for the developers.
作者說才剛講完,影片應該會發在 CodemotionWorld 的 youtube。
https://www.reddit.com/r/webdev/comments/6bonl2/css_houdini_the_bridge_between_css_javascript_and/dhoi1b3/
jihchi 09:24:54
CSS Houdini- the bridge between CSS, JavaScript and the browser by Serg Hospodarets
http://slides.com/malyw/houdini-codemotion#/36

Browser rendering/ pixel rendering pipeline
Slides
Today CSS Custom Properties are supported in all the major browsers. Now it’s time to do the next step- to have an ability to register new Custom Properties from JavaScript and setup the browser how to work with them (e.g. real CSS polyfills). They should work with the same performance as the native CSS properties, being animatable and aligned with CSSOM. Custom Properties can be used as a bridge between CSS and JavaScript. Houdini Task force introduces specs and JavaScript Worklets to expose the interaction with previously fully internal browser rendering mechanisms (during Paint, Layout, Composite stages). All this brings Front-End development to the next level, parts of which are already available for the developers.
mrorz 10:27:20
youtube.com
Enjoy the videos and music you love, upload original content, and share it all with friends, family, and the world on YouTube.
mrorz 10:27:36
slideshare.net
My talk for <http://CSSConf.eu|CSSConf.eu>. Where does new CSS come from, and how can we get involved?
  • 👍1
mrorz 10:36:45
作者說才剛講完,影片應該會發在 CodemotionWorld 的 youtube。
https://www.reddit.com/r/webdev/comments/6bonl2/css_houdini_the_bridge_between_css_javascript_and/dhoi1b3/
reddit
31 points and 7 comments so far on reddit
mrorz 14:14:15
@mrorz set the channel topic: 前瞻性技術之頻道。
封存:https://g0v-tw.slackarchive.io/frontend-tech
mrorz 14:14:30
@mrorz set the channel topic: 前瞻性技術之頻道。
討論紀錄:https://g0v-tw.slackarchive.io/frontend-tech
jihchi 22:44:03
GitHub
fsql - Search through your filesystem with SQL-esque queries.
jihchi 22:48:33
GitHub
rxdb - :computer: :iphone: Client-Side Database for Browsers, NodeJS, electron, cordova, react-native and every other javascript-runtime :heavy_exclamation_mark:
jihchi 22:49:04
bradfrost.github.io
Write an awesome description for your new site here. You can edit this line in _config.yml. It will appear in your document head meta (for Google search results) and in your feed.xml site description.
2017-05-19
jihchi 09:21:24
http://blog.seraum.com/crystal-lang-vs-nodejs-vs-golang-vs-http-benchmark

單純 wrk 壓測,node 最慢,再來是 golang ⋯
Seraum - Blog
When you develop a Web Application or an API for IoT, performance and scalability are importants. NodeJS scales well, but Crystal lang is better. We have done some benchmarks, and results are surprising !
poga 10:48:26
Golang 內建的 http module 本來就很慢啊 XD
jihchi 10:49:57
這篇後面有追加 `fasthttp` 的測試。快很多。
Poga Po
Golang 內建的 http module 本來就很慢啊 XD
jihchi 19:37:21
twitter
Install it today with yarn create react-app my-app :tada: <https://twitter.com/reactjs/status/865429237578125314>
twitter
New in Create React App: webpack 2, Jest 20, PWA by default, runtime error overlay, and more! :sparkles: <https://facebook.github.io/react/blog/2017/05/18/whats-new-in-create-react-app.html>
jihchi 19:39:07
twitter
In order to be a great software developer, you have to have both an extremely high tolerance for bullshit, and zero tolerance for bullshit.
jihchi 19:40:35
twitter
"The State of Go" May 2017 My #gopherfest slides are online #golang <https://talks.golang.org/2017/state-of-go-may.slide#1> <https://pbs.twimg.com/media/DAJeYBlUQAAeDge.jpg>
jihchi 19:44:26
twitter
Vue 2.4 SSR will support code-splitting anywhere, no longer just route components. It just works!
jihchi 19:46:41
twitter
best quote from <https://twitter.com/ReactEurope|@ReactEurope> : "UI is not a tree, it's a graph" <https://twitter.com/_chenglou|@_chenglou>
jihchi 19:50:56
[徵才] Pressplay徵網頁前端工程師
https://www.ptt.cc/bbs/Soft_Job/M.1495164145.A.A88.html

要會 photoshop!
Ptt 批踢踢實業坊
公司名稱,統編(中華民國以外註冊可免填): 瑞奧股份有限公司(PrssPlay Inc.) 公司地址(填寫詳細至號): 台北市中山區中山北路二段45巷11號3樓 職缺:
2017-05-20
jihchi 13:21:24
twitter
I've spend the last two hours wiring up postcss parser inside of prettier. It may not be too hard to get CSS support <https://gist.github.com/vjeux/28e10cead431da7af8e00a3369a6f657>
  • 1
jihchi 13:23:21
twitter
react-scripts@1.0.1 is out with numerous bugfixes. Please update! <https://github.com/facebookincubator/create-react-app/releases/tag/v1.0.1> <https://pbs.twimg.com/media/DANwjSkXkAEr7BQ.jpg>
jihchi 13:29:53
twitter
With #npm5 about to come out, I thought I'd update those benchmarks. Here's the npm5 code I'm working on, vs npm@4.6.1 on a popular repo
jihchi 13:30:26
twitter
Funny ofc, but inaccurate. Dan has never said "ALL YOUR STATE ARE BELONG TO REDUX" and all I'm trying to say is "setState isn't 'evil'". <https://twitter.com/bradwestfall/status/865339829474664448>
twitter
The current state of React. I love the conversations between <https://twitter.com/dan_abramov|@dan_abramov> and <https://twitter.com/ryanflorence|@ryanflorence> <https://pbs.twimg.com/media/DAJN9uwV0AAfQ21.jpg>
jihchi 13:38:13
twitter
The 10 most downloaded npm packages: debug readable-stream async lodash glob ms qs minimist source-map minimatch <https://docs.google.com/spreadsheets/d/1XvQXov5cCfxVL-1awbC9_EuKj-KvsGo7Mwyl19rReXY/edit#gid=0>
poga 15:25:43
@poga has left the channel
jihchi 23:05:59
GitHub
react-pdf - Create PDF files using React
jihchi 23:07:03
workboxjs.org
Workbox Microsite
2017-05-21
jihchi 22:16:38
GitHub
asm-dom - A minimal WebAssembly virtual DOM focused on performance
2017-05-22
jihchi 08:44:47
twitter
What’s coming in React 16 and beyond? Watch <https://twitter.com/acdlite|@acdlite> share our plans in the <https://twitter.com/ReactEurope|@ReactEurope> keynote! <https://youtube.com/watch?v=QW5TE4vrklU>
jihchi 08:46:07
twitter
Installing npm packages with sudo -g results in so many permission complexities/unknowns. Always do this instead: <https://github.com/sindresorhus/guides/blob/master/npm-global-without-sudo.md>
jihchi 08:51:58
twitter
If you’re using webpack-bundle-size-analyzer, you are likely getting incorrect sizes. Don’t miss this note! <https://github.com/robertknight/webpack-bundle-size-analyzer> <https://pbs.twimg.com/media/DAYoe6nXcAIf7Oq.jpg>
jihchi 08:52:37
twitter
Have you ever wondered where the terms lower and uppercase text came from? <https://pbs.twimg.com/media/DATj6_AWAAAkFE3.jpg>
jihchi 08:54:59
twitter
Code splitting in React apps - A quick 7 minute video summary: <http://buff.ly/2q6uEsu> #reactjs
jihchi 08:56:25
twitter
Released 3.0.0-alpha.3 just now! Fixes a #webpack + #postcss compatibility issue with #create-react-app. <https://pbs.twimg.com/media/DAXpukdXsAAiHaE.jpg>
<https://pbs.twimg.com/media/DAXp3SfWsAIbq95.jpg>
wen 12:38:59
@wen has joined the channel
2017-05-23
jihchi 08:43:48
twitter
Great post. Goes to show just how low-level Webpack is, but excited to finally read a good guide on the topic. <https://twitter.com/schnibl/status/865761508978020352>
twitter
I just published “Predictable long term caching with Webpack” <https://medium.com/p/predictable-long-term-caching-with-webpack-d3eee1d3fa31>
jihchi 08:45:29
https://twitter.com/housecor/status/866651617998897152

不需要 prop 的時候可以直接用 public class field
twitter
Tip: You don't need to declare a constructor in your React component to initialize state. Can use a public class field instead! #reactjs <https://pbs.twimg.com/media/DAb3DR4XgAAQ3u_.jpg>
  • 1
jihchi 08:50:05
twitter
Finally published "A Unified Styling Language" on CSS-in-JS, why people do it, and why the CSS community should care <https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660>
jihchi 08:53:12
https://twitter.com/captainsafia/status/866686093864951810

挺方便。直接在 command line 顯示行號
twitter
command line tip of the day: pipe to `nl` to get line numbers in command outputs!
jihchi 08:59:15
twitter
New blog post: A brief and incomplete history of JavaScript bundlers <https://nolanlawson.com/2017/05/22/a-brief-and-incomplete-history-of-javascript-bundlers/>
wuct 13:52:36
reddit
Hello haskellers and other functional developers! My name is Alexander Granin, and I’m glad to present you 5 chapters of my book “Functional...
  • 👍1
yucj 16:20:42
@yucj has joined the channel
jennyliang 16:29:06
@jennyliang has joined the channel
jihchi 18:53:28
twitter
I just published “JS RegExp, Fast and Slow” <https://medium.com/p/js-regexp-fast-and-slow-d29d6b77b06>
jihchi 18:58:59
https://twitter.com/_jayphelps/status/866853406190714880

Android 開 grunt 首頁名字會變成 dorkq
twitter
Remember that one time grunt's homepage showed "dorkq" instead of "grunt" cause of a bug in Java Development Kit? <https://github.com/gruntjs/gruntjs.com/issues/81> <https://pbs.twimg.com/media/DAetqqZXYAEoaXB.jpg>
2017-05-24
jihchi 08:45:14
twitter
So. #npm5 landed in Node and is going to roll out in today's node8 RC! :sparkles: <https://github.com/nodejs/node/pull/12936#issuecomment-303477159>
jihchi 08:46:10
twitter
Just published my favorite takeaways from #ReactEurope 2017, great edition so far! <https://medium.com/@ncuillery/what-ive-learned-from-react-europe-2017-c433468890d6>
jihchi 08:58:02
https://twitter.com/dceddia/status/867117924661813251

你也可以用 symbolic link: `ln -s src/node_modules src`
twitter
Create React App supports setting NODE_PATH to make imports easier :) No webpack magic required! <https://pbs.twimg.com/media/DAifBj0WsAIjcGT.jpg>
vscode 好像認不得這種 XD
用了這個的話 cmd+click 就無法 go to definition
@mrorz 你是指 `ln` 還是 `NODE_PATH` ?
啊,我是用 webpack resolve ._.
eslint 有 plugin 吃 webpack resolve
倒是沒試過 `NODE_PATH` 與 `ln -s`
`node_modules` 原生應該都運作正常
jihchi 08:59:28
twitter
I put together some slides on how to manage forms with #reactjs. Feedback welcome. <http://presentations.survivejs.com/forms-in-react>
mrorz 10:59:36
vscode 好像認不得這種 XD
mrorz 10:59:51
用了這個的話 cmd+click 就無法 go to definition
jihchi 11:00:16
@mrorz 你是指 `ln` 還是 `NODE_PATH` ?
mrorz 11:00:43
啊,我是用 webpack resolve ._.
mrorz 11:00:53
eslint 有 plugin 吃 webpack resolve
mrorz 11:01:07
倒是沒試過 `NODE_PATH` 與 `ln -s`
jihchi 11:05:03
`node_modules` 原生應該都運作正常
jihchi 18:02:26
GitHub
D3-ID3 - iD3: an Integrated Development Environment for D3.js
jihchi 18:46:04
twitter
Slack's emoji picker is now built in React. 85–90% faster on initial render! :heart_eyes: <https://slack.engineering/rebuilding-slacks-emoji-picker-in-react-bfbd8ce6fbfe>
2017-05-25
jihchi 08:45:01
twitter
Refactoring some React code related to class components. I wrote this comment to help me out. <https://pbs.twimg.com/media/DAl6A2bXUAIteK_.jpg>
wuct 13:18:41
GitHub
eslint-config-cleanjs - An eslint config which reduces JS to a pure functional language
Michael Hsu 13:34:04
@evenchange4 has joined the channel
kcliu 18:01:01
twitter
command line tip of the day: use `!*` to use all of the arguments from the previous command in the current one.
  • 👍1
2017-05-26
jihchi 08:40:58
twitter
BuckleScript 1.7.4 is out: create a project : `npm i -g bs-platform &amp;&amp; bsb -init hello &amp;&amp; cd hello &amp;&amp; npm run build` <https://sympa.inria.fr/sympa/arc/caml-list/2017-05/msg00113.html>
  • 👍1
alxtz 16:50:58
@alxtz has joined the channel
jihchi 18:45:52
twitter
Awesome Functional Programming in JavaScript - <https://github.com/xgrommx/awesome-functional-programming#javascript> - Huge collection of resources on FP. Articles, videos, tutorials :ok_hand: <https://pbs.twimg.com/media/DAvxynEXgAEhstr.png>
jihchi 22:54:47
GitHub
nativefier - Make any web page a desktop application
2017-05-27
jihchi 17:20:56
twitter
npm 5 is out! - Faster - Indentation is preserved for package.json :sparkles: - `--save` is default - No more corrupt cache - Offline mode - Lockfile
jihchi 17:21:11
twitter
Two updates to React DevTools: dark themes and click-to-inspect! Get the fresh version: <https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi/>
jihchi 17:26:51
twitter
How programmers unit test over time <https://pbs.twimg.com/media/DAxWYwBU0AA-X2q.jpg>
  • 😂1
jihchi 17:34:58
twitter
Some <https://twitter.com/flowtype|@flowtype> tricks: Inference, Comment syntax, and typeof, all working together <https://pbs.twimg.com/media/DAxIHJYUwAAyaiM.jpg>
jihchi 17:39:18
twitter
Cool presentation from <https://twitter.com/stubailo|@stubailo> about recent happenings in the world of #GraphQL. <https://twitter.com/stubailo/status/868272397710839808>
twitter
:tv: Got to present the "State of <https://twitter.com/GraphQL|@GraphQL>" at <https://twitter.com/ThisDotMedia|@ThisDotMedia>'s online event! Quick recap of last few months: <https://www.youtube.com/watch?v=YDlfMYqR5w4> #GraphQL
jihchi 18:42:11
twitter
husky makes Git hooks amazingly easy 1. npm i husky -D 2. Add "scripts.prepush": "npm test" 3. ??? 4. Profit <http://buff.ly/2qtymMX>
justtry 22:53:19
@justtry has joined the channel
jihchi 23:15:28
https://github.com/FormidableLabs/react-live

> React Live brings you the ability to render React components and present the user with editable source code and live preview. It supports server-side rendering and comes in a tiny bundle, thanks to Bublé and a Prism.js-based editor.
>
> The library is structured modularly and lets you style its components as you wish and put them where you want.
GitHub
react-live - A production-focused playground for live editing React components
  • 1
2017-05-30
jihchi 23:19:19
RisingStack Engineering
In this post, we go through the most important features and fixes of the new Node.js version 8, which becomes the current LTS release from October.
jihchi 23:33:27
GitHub
chromatism - :rainbow: A simple set of utility functions for colours.
jihchi 23:36:03
GitHub
animate-components - Elemental components for doing animations in React
2017-05-31
jihchi 08:46:59
twitter
pshtt is a tool to scan domains for HTTPS best practices: <http://bit.ly/2rIk8g6> - great stuff! checks redirects, cert errors, HSTS, etc. <https://pbs.twimg.com/media/DAzQrZgU0AAUDq1.jpg>
jihchi 08:47:14
twitter
:memo: New post: I've been digging into HTTP/2 push. It's more complicated than I thought &amp; browser support isn't great. <https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/>
jihchi 08:49:15
twitter
I laughed at this way more than I should have <https://pbs.twimg.com/media/DA_q4FLUAAA6Tga.jpg>
jihchi 08:50:17
twitter
The first ES2018 feature: “Template Literal Revision” <http://2ality.com/2016/09/template-literal-revision.html>
jihchi 08:50:34
twitter
:tada: #nodejs 8 is out! Congrats to all those that worked on this release <http://bit.ly/2rBRe1A>
jihchi 08:50:59
twitter
Node.js 8 is available! With npm5 and util.promisify() to wrap the standard API in a function that returns a Promise <https://nodejs.org/en/download/current/> <https://pbs.twimg.com/media/DBG3hXmW0AI8u6E.jpg>
`In order to avoid confusion with V8, the underlying JavaScript engine, we've dropped the "v" and call it Node.js 8.`

lol
我大概會等他 LTS 生效(October 2017)再把所有 project 升上去ㄅ
嗯,這時候 packages 應該也都 support 了
mrorz 10:35:25
`In order to avoid confusion with V8, the underlying JavaScript engine, we've dropped the "v" and call it Node.js 8.`

lol
jihchi 10:35:47
XD
mrorz 10:36:33
我大概會等他 LTS 生效(October 2017)再把所有 project 升上去ㄅ
jihchi 10:37:19
嗯,這時候 packages 應該也都 support 了