frontend-tech

Month: 2017-10

2017-10-01

jihchi 09:01:22
https://github.com/Shopify/draggable

twitter

:heart_eyes: Lightweight, responsive, modern drag &amp; drop library :label: #code :arrow_right_hook: <https://shopify.github.io/draggable/> <https://pbs.twimg.com/media/DK6hYqjUEAAvX5s.png>

GitHub

Shopify/draggable

draggable - The JavaScript Drag &amp; Drop library your grandparents warned you about.

jihchi 09:03:52
https://github.com/hmemcpy/milewski-ctfp-pdf

GitHub

hmemcpy/milewski-ctfp-pdf

milewski-ctfp-pdf - Bartosz Milewski's 'Category Theory for Programmers' unofficial PDF and LaTeX source

jihchi 09:06:23
https://github.com/dawnlabs/carbon

GitHub

dawnlabs/carbon

carbon - :art: Create and share beautiful images of your source code

jihchi 10:00:33
https://babeljs.io/blog/2017/09/12/planning-for-7.0

babeljs.io

Planning for 7.0 · Babel

If you didn’t know already, we’re planning on releasing a 7.0 version soon :raised_hands: ! Work on it actually started back in February, when I just wanted to make a rel...

mofas 11:00:29
https://www.youtube.com/playlist?list=PLcGKfGEEONaDzd0Hkn2f1talsTu1HLDYu&disable_polymer=true

YouTube

Strange Loop 2017 - YouTube

Strange Loop 2017 Sept 28-30th, 2017 St. Louis, MO <https://thestrangeloop.com/2017/sessions.html>

mofas 11:00:40
Strange loop 2017 release!!!
💯 1
mofas 11:00:56
共50個video

2017-10-02

jihchi 18:54:01
https://twitter.com/bower/status/914424616671694848

twitter

How to (politely) drop Bower support? <https://bower.io/blog/2017/how-to-drop-bower-support/>

FINALLY!
jihchi 18:54:58
https://twitter.com/alanhietala/status/914685090659266560

twitter

I just published “Bringing ReasonML into an existing react app” <https://medium.com/p/bringing-reasonml-into-an-existing-react-app-d1006a72433b>

mofas 21:42:10
https://speakerdeck.com/staltz/oop-is-dead-only-if-fp-is-dead

Speaker Deck

OOP is dead only if FP is dead

It is common to see Functional Programming (FP) presented as the opposite of Object-oriented Programming (OOP). These two programming paradigms have important differences, but they can share a lot in common, so they are not in direct opposition. In this talk, Andre will explore the gray area between OOP and FP, with code samples in JavaScript, TypeScript, and Haskell, kept easy enough enough for any programmer to follow.

mofas 22:14:05
The hottest talk in strange loop

2017-10-03

jihchi 08:09:33
https://twitter.com/mathias/status/914887897886666753

twitter

:zap: Asynchronous stack traces: why `await` beats `.then()` <https://mathiasbynens.be/notes/async-stack-traces> async/await is more than just syntax sugar over promises!

💯 1
jihchi 08:10:24
https://twitter.com/umaar/status/914960745338634240

twitter

ResizeObserver has landed in Chrome Canary! Get notified in JavaScript when an element resizes. Element Media Queries may become a thing :star: <https://pbs.twimg.com/media/DLKWuz8W4AEhsUr.jpg>

jihchi 08:14:22
https://twitter.com/bower/status/914828104727703553

twitter

Today we explain how to migrate legacy project from Bower to Yarn <https://bower.io/blog/2017/how-to-migrate-away-from-bower/>

jihchi 09:48:06
https://github.com/jeffbcross/bad-rxjs

GitHub

jeffbcross/bad-rxjs

bad-rxjs - RxJS done badly

itsmisscs 10:45:42
@itsmisscs has joined the channel
mofas 11:19:59
簡而言之 Haxl 可以用data type 幫你檢查你這行code能不能concurrrent, 然後compiler會幫你自動轉.
也可以做到dataLoader那樣的cache
mofas 11:21:15
他甚至可以更暴力cache全部IO
jihchi 11:21:52
威威
mofas 11:24:27
假如前端可以做, 那就可以像snapshot testing 一樣 先接上server API然後用一下UI, 接下來他就會把所有request都記住, 然後damp 就可以跑unit test了..
mofas 11:24:39
end-to-end testing也可以變unit test
jihchi 11:33:03
~這樣應該算 integration test~
jihchi 15:16:08
https://reasonml.github.io/reason-react/blog/2017/10/02/new-docs-site.html

reasonml.github.io

New Docs Site · ReasonReact

_The ReactJS doc site has also been updated last friday **by pure coincidence**. No conspiracy theory!_

mofas 23:12:57
https://twitter.com/dan_abramov/status/915209232605224961

twitter

Loving fish design principles. <https://fishshell.com/docs/current/design.html>

mofas 23:13:04
Dan 誠摯推薦

2017-10-04

mofas 01:51:43
https://twitter.com/code/status/915260546693324800

twitter

Terminal improvements incoming! Check out the details in our latest blog post: <https://code.visualstudio.com/blogs/2017/10/03/terminal-renderer>

mofas 01:51:50
https://twitter.com/AtomEditor/status/915263462300774401

twitter

Atom 1.21 and 1.22 beta have shipped today with improvements to performance, bracket matching, and more. <http://blog.atom.io/2017/10/03/atom-1-21.html> <https://pbs.twimg.com/media/DLOrPN-VAAASOmD.jpg>

mofas 01:52:05
兩個相差12分鐘tweet 很競爭喔
mofas 05:23:59
https://dropbox.design/

Dropbox Design

Evolving the Dropbox Brand

Welcome to the new Dropbox

mofas 05:24:10
看到這個 Typography
mofas 05:24:17
我就覺得dropbox沒救了
Jerry 05:41:41
好悲劇 … Sharp Grotesk

2017-10-05

itsmisscs 02:14:29
@mofas I really like VSCode. I completely removed Atom and just use VSCode and Sublime
👏 2

2017-10-06

mofas 06:03:34
https://twitter.com/code/status/916007777570451457

twitter

The <https://twitter.com/code|@code> September update is out, get it while it's hot! Download: <https://code.visualstudio.com/download>. See what's new: <https://code.visualstudio.com/updates/v1_17>. <https://pbs.twimg.com/media/DLZQMXYV4AAU75b.jpg>

mofas 06:03:41
https://twitter.com/code/status/916014336463605760

twitter

Lot's of cool stuff in the new update - like macOS touch bar support... <https://code.visualstudio.com/updates/v1_17#_macos-touch-bar-support>

mofas 06:03:51
VS code so hot right now
mofas 10:17:32
react-next video uploaded
jihchi 23:43:59
https://github.com/Foundry376/Mailspring

GitHub

Foundry376/Mailspring

Mailspring - :love_letter: A beautiful, fast and maintained fork of @Nylas Mail by one of the original authors.

2017-10-07

itsmisscs 02:49:55
Anyone here using Nylas? Thoughts?
Not so good. I use Spark now, It's better than Nylas.
oo looks nice. i’ll give it a shot.
jihchi 09:04:14
https://twitter.com/firacode/status/916341038335315968

twitter

SublimeText 3 dev builds 3146 and later support ligatures! :tada::tada::tada: <https://forum.sublimetext.com/t/dev-build-3145/32340>

jihchi 09:07:04
Abortable fetch  |  Web  |  Google Developers
https://developers.google.com/web/updates/2017/09/abortable-fetch

Google Developers

Abortable fetch  |  Web  |  Google Developers

Aborting fetches using a new web primitive – The abort controller.

2017-10-08

2017-10-10

mofas 03:53:00
https://zeit.co/blog/next4

zeit.co

Next.js 4

Next.js 4: React 16 and styled-jsx 2

好喔找時間來升
mofas 10:52:41
https://twitter.com/markdalgleish/status/917523785191800832

twitter

TIL If you use <https://twitter.com/code|@code> for Mac but find the icon to be a bit unpleasant (understatement), you can actually change it: <https://dribbble.com/shots/3168520-Visual-Studio-Code-Icon-Replacement>

mofas 10:52:48
Much Better in Mac
itsmisscs 23:52:19
I changed the sublime text icon all the time.

2017-10-11

mofas 07:41:53
https://twitter.com/dan_abramov/status/917823626937819137

twitter

People have mixed feelings about the JavaScript ecosystem. Watch my <https://twitter.com/zeithq|@zeithq> talk about how we should make it better: <https://www.youtube.com/watch?v=G39lKaONAlA>

mofas 07:42:02
https://twitter.com/zeithq/status/917815665058369536

twitter

:tv: We just released the talks from ZEIT Day Berlin 2017! <https://zeit.co/tv>

mofas 12:47:37
https://twitter.com/sarah_edo/status/917757381479747584

twitter

My article about exploring data with Serverless and <https://twitter.com/vuejs|@vuejs> is up! Part one is out today, part two tomorrow :) <https://css-tricks.com/exploring-data-with-serverless-and-vue-part-i/>

jihchi 18:43:03
https://twitter.com/neoziro/status/917835629785907200

twitter

I just released React Hot Loader :atom_symbol::zap: v3 with React 16 support, new readme! A big thank you to <https://twitter.com/dan_abramov|@dan_abramov> :slightly_smiling_face: <https://github.com/gaearon/react-hot-loader> <https://pbs.twimg.com/media/DLzNWhyWAAo8dbq.jpg>

2017-10-12

jihchi 08:22:43
https://twitter.com/samccone/status/918142052927291392

twitter

So excited to see that <https://www.cypress.io/> is finally out of private beta and open to everyone! Finally e2e testing for the modern web:trumpet:

jihchi 08:32:02
https://twitter.com/mylesborins/status/918219114065391616

twitter

:tada::tada::tada::tada::tada::tada::tada::tada::tada::tada: Happy <https://twitter.com/nodejs|@nodejs> release day Upgraded V8 Upgraded LibUV Upgraded npm $ nvm install v8.7.0 <https://nodejs.org/en/blog/release/v8.7.0/> :tada::tada::tada::tada::tada::tada::tada::tada::tada::tada:

jihchi 18:46:47
https://twitter.com/trott/status/918222301853761536

twitter

Node.js 8.7.0 is out. nvm install node --reinstall-packages-from=node --latest-npm

mofas 22:49:23
Staltz 終於又來寫tech blog

2017-10-13

mofas 06:53:52
With styled-components into the future – 💅 styled-components – Medium
https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c

Medium

With styled-components into the future – :nail_care: styled-components – Medium

Preprocessing is dead, long live preprocessing!

mofas 09:47:48
馬呀 真的是大compiler時代, styled-components 要寫自己的css-in-js compiler https://github.com/cssinjs/istf-spec

GitHub

cssinjs/istf-spec

istf-spec - Interoperable Style Transfer Format [DRAFT]

jihchi 09:52:55
@mofas where did you see that styled-components are going to develop itself compiler !?
mofas 09:53:51
https://g0v-tw.slack.com/archives/C5EEC5EEN/p1507848832000157

With styled-components into the future – :nail_care: styled-components – Medium <https://medium.com/styled-components/with-styled-components-into-the-future-d1d917e7c22c>

mofas 09:53:57
你根本沒在看呀- -
jihchi 09:55:56
Haven't see this article yet ~_~
jihchi 09:56:20
Already in my instapaper~

2017-10-16

jihchi 01:09:15
https://github.com/mmatczuk/go-http-tunnel

GitHub

mmatczuk/go-http-tunnel

go-http-tunnel - Secure tunnels to localhost - open source ngrok alternative

server 要自架嗎?
看起來是呢
是的
jihchi 01:10:27
https://github.com/React-Sight/React-Sight

GitHub

React-Sight/React-Sight

React-Sight - Visualization tool for React, with support for Fiber, Router (v4), and Redux

jihchi 01:11:06
https://github.com/webpackmonitor/webpackmonitor

GitHub

webpackmonitor/webpackmonitor

webpackmonitor - A tool for monitoring webpack optimization metrics through the development process

mrorz 01:49:10
server 要自架嗎?
jihchi 08:28:03
https://twitter.com/elurchin/status/912830508215582720

twitter

­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­ ­

jihchi 09:18:03
https://medium.com/@bluepnume/introducing-paypals-open-source-cross-domain-javascript-suite-95f991b2731d

Medium

Introducing PayPal’s open-source cross-domain javascript suite

At PayPal we write a lot of javascript that ends up running on other websites and other domains. The prime example of this is checkout.js…

```in IE and Edge, you literally can not send a message between a popup window and a parent window on a different domain, without resorting to soul-crushing hacks.
```

“soul-crushing hacks” wwwwww
@mofas 的靈魂還好嗎
3
mofas 12:25:30
這library 真的很優秀
mofas 12:25:43
快點改寫tracking 啦
yhsiang 14:05:43
@jerry.hong 再叫你
jerry.hong 14:06:06
@@?
jerry.hong 14:07:04
這篇不錯誒

2017-10-17

2017-10-18

mofas 06:29:32
The best talk of react rally .
mofas 08:10:12
裡面有提到一個還蠻好用的技巧
```
const btnText = {
idle: 'Save',
loading: 'Saving',
error: 'Fail to save',
success: 'Save successfully'
}[state.status]
```
mofas 08:10:22
這好像比if 跟switch 都方便多了
mofas 08:10:46
雖然每次都會create 一個 object好像有點浪費
mofas 08:11:45
```
{{
default: <EmptyContent>,
loaded: <DataList data={data}>,
loading: <LoadingIcon>,
error: <ErrorMsg>,
}[status]}
```
mofas 08:13:37
好像還不錯
jihchi 08:22:08
Trasition 的概念應用也不錯!
jihchi 08:22:38
跟 compiler 做 tokenize 概念很像
jihchi 08:33:32
https://twitter.com/maybekatz/status/919306327331139584

twitter

When released, #cipm will be the fastest package manager you can possibly use on continuous integration/deployment environments. Hands down. <https://pbs.twimg.com/media/DMIIJeuUQAAXzyf.jpg>

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

jihchi 09:04:29
http://blog.klipse.tech//reason/2017/10/17/externals-js-ffi-reason.html

An interactive journey into functional programming with Yehonathan Sharvit

Type-safe bindings from JS to Reason for dummies

FFI. type safe bindings from JS to Ocaml and Reason. external javascript declaration.

fly 15:31:57
@leo424y has joined the channel
jihchi 18:48:23
https://twitter.com/nixcraft/status/920494336931856384

twitter

How <https://twitter.com/Microsoft|@Microsoft> deals with bugs :joy: <https://pbs.twimg.com/media/DMZAtqxX4AAUvkt.jpg>

2017-10-19

mofas 08:43:09
VS code 也可以當postman用惹
mofas 08:43:15
太神啦
jihchi 09:28:28
我喜歡他像是 script 的用法,純 text 去編寫
jihchi 09:37:14
https://github.com/thedaviddias/Front-End-Checklist

GitHub

thedaviddias/Front-End-Checklist

Front-End-Checklist - :card_index_dividers: The perfect Front-End Checklist for modern websites and meticulous developers

hsuting 17:01:10
@hsuting has joined the channel
jihchi 18:49:39
https://twitter.com/sebastienlorber/status/920958934151778304

twitter

Just published "redux-dispatch-subscribe": lightweight solution before upgrading to Redux-saga/Redux-observable <https://github.com/slorber/redux-dispatch-subscribe> <https://pbs.twimg.com/media/DMfnAGqWAAAMoMu.jpg>

jihchi 18:53:58
angular vs react vs vue vs ember-source | npm trends
http://www.npmtrends.com/angular-vs-react-vs-vue-vs-ember-source

npmtrends.com

angular vs react vs vue vs ember source | npm trends

Compare npm package download statistics over time: angular vs react vs vue vs ember source

jihchi 19:16:49
GitHub - getify/fasy: FP iterator helpers that are async/generator aware
https://github.com/getify/fasy

GitHub

getify/fasy

fasy - FP iterator helpers that are async/generator aware

jihchi 22:58:26
https://github.com/kkemple/graphql-auth

GitHub

kkemple/graphql-auth

graphql-auth - :lock: GraphQL authentication and authorization middleware

mofas 23:00:07
react-gripes.md

2017-10-20

Slackbot 02:53:44
This message was deleted.
`Central Authentication Service`
jihchi 08:38:47
https://twitter.com/bower/status/921039231623024640

twitter

On next Wednesday we’ll disable old registry for a full day. Please upgrade Bower to not experience any disruption: npm install -g bower

jihchi 08:40:20
https://twitter.com/compuives/status/921098071928397825

twitter

We now use Puppeteer and jest-image-snapshot to automatically check if sandboxes changed between commits by comparing screenshots!

jihchi 09:39:22
https://github.com/christianalfoni/create-ssl-certificate

GitHub

christianalfoni/create-ssl-certificate

create-ssl-certificate - Command line tool to create self signed SSL certificate

mofas 10:55:13
https://twitter.com/iamdevloper/status/920666823414214657

twitter

two nerds try to configure babel <https://pbs.twimg.com/media/DMbdl85WkAAr5vk.jpg>

👯 1
mofas 11:54:01
最近想要來接Google Oauth,
mofas 11:54:11
一進去google developer console已經面目全非啦
mofas 11:54:25
有誰現在記得是要active哪一個libary嗎 = =
yhsiang 12:04:41
你用 node ?
yhsiang 12:05:07
console 的話就是加驗證
jihchi 12:08:48
https://console.cloud.google.com/apis/credentials 不是這?

accounts.google.com

Google Cloud Platform

Google Cloud Platform lets you build, deploy, and scale applications, websites, and services on the same infrastructure as Google.

mofas 12:13:25
是喔
mofas 12:13:28
感謝大家
mofas 12:13:37
不過現在又有另外一個煩惱了 😞
mofas 12:13:41
我需要Fixed domain name.
mofas 12:15:15
now.sh 每次deploy都會給特殊domain name
Michael Hsu 12:18:10
可以用 alias 啊
mofas 12:18:40
他alias 我可以亂綁到一個fixed的 now.sh domain下嗎?
mofas 12:18:45
例如mofas.now.sh
mofas 12:19:18
靠腰
mofas 12:19:19
可以耶
mofas 12:19:33
now.sh真大方 lol
Michael Hsu 12:20:44
對啊 alias 先搶先贏
建議 CD 可以參考這樣做:
https://github.com/evenchange4/micro-medium-api/blob/master/tasks/deploy.sh#L15-L20

確保每次服務都啟起來再換掉 alias
remove/purge 時才不會被搶走

GitHub

evenchange4/micro-medium-api

micro-medium-api - Microservice for fetching the latest posts of Medium with GraphQL.

mofas 12:21:12
這我倒是沒問題
mofas 12:21:23
先搶再說
Michael Hsu 12:21:39
👍
mofas 21:19:19
@jihchi 你有用docker-stack.yaml嗎 他跟docker-compose.yaml有啥差- -
`docker-stack.yaml` 是給 Docker Swarm 用的。
就是你下面提到的 docker service / stack
mofas 21:19:25
該不會只是改名吧 😞
mofas 21:27:08
好久沒追 docker 突然冒出了 docker service, docker stack, docker secret
mofas 22:37:27
zeit server down = =
mofas 22:56:05
https://twitter.com/zeit_status

twitter.com

ZEIT Status (@zeit_status) | Twitter

The latest Tweets from ZEIT Status (@zeit_status). Quick updates on the status of our infrastructure and microservices

2017-10-21

mofas 23:36:09
@mrorz
我最近突然想到..graphql 假如有配graphql client 例如apollo 或是 relay 其實可以做data compression 傳輸功能..
因為type根本就固定
mofas 23:36:36
例如
```
{
UserList {
Id
Name
}
}
```
mofas 23:37:44
其實在server端可以傳非常dense的資料格式到前端. 由client再解壓縮回JSON
mofas 23:38:43
例如上面那個格式可以傳成csv
```
UserList
Id, Name
id_1, "User Name 1"
id_2, "User Name 2"
id_3, "User Name 3"
```
mofas 23:39:01
這樣應該省很多頻寬吧
mofas 23:39:45
比較麻煩的就是nested部分要攤平而已
mofas 23:39:50
不過應該做得到 😛
mofas 23:43:44
BTW, 我問一下graphql-js 要怎麼生成.graphql黨呀
mofas 23:43:49
我記得我幹過這件事
mofas 23:43:53
但是我現在沒code了
mofas 23:43:56
不知道怎做

2017-10-22

mofas 12:02:05
https://medium.com/@tjholowaychuk/up-0-3-0-custom-domains-logging-stability-improvements-and-more-6f9d3f7925f7

Medium

Up 0.3.0 — Custom domains, logging &amp; stability improvements and more.

I’m back from a little vacation with a new release of Apex Up! This release introduces custom domains, domain purchasing from the command…

mofas 12:02:45
看 TJ 一個人的UP VS Zeit 的 Now
mofas 12:03:19
其實 TJ 設計真的很強.. 完全不輸Zeit的UI Designer
mofas 12:04:08
但是UX還是 Zeit比較強一點
mofas 12:04:30
看UP的流程就有點囉唆