Slack archive

frontend-tech

Month: 2018-08

2018-08-01

mofas 07:49:55
```
If you want to supercharge your VS Code setup, here’s a bunch of great extensions and themes.

↬ Techniques: VS Code Can Do That?
https://vscodecandothat.com

↬ VS Code Extensions
https://medium.freecodecamp.org/favorite-vs-code-extensions-2017-786ea235812f …

↬ VSCodeThemes
https://vscodethemes.com

Any other resources you’d recommend?
```
mofas 07:50:16
https://conf.reactjs.org/

conf.reactjs.org

React Conf 2018 - Fall 2018 in Lake Las Vegas, Nevada

React Conf 2018 is the official Facebook React event. This year's event will be held in Henderson, Nevada.

🎉 1
mofas 07:50:21
Offical React Conf!

2018-08-02

jihchi 08:23:01
https://twitter.com/reactjs/status/1024745321987887104?s=12
We've just released React DOM 16.4.2 to address a security vulnerability (CVE-2018-6341) in ReactDOMServer.
jihchi 08:54:33
https://medium.com/@addyosmani/the-cost-of-javascript-in-2018-7d8950fbb5d4

Medium

The Cost Of JavaScript In 2018 – Addy Osmani – Medium

Building interactive sites can involve sending JavaScript to your users. Often, too much of it. Have you been on a mobile page that looked…

jihchi 09:21:45
https://exercism.io/my/tracks/reasonml

Exercism

ReasonML | Exercism

ReasonML is a strongly typed functional language which compiles to both Javascript and native.

2018-08-03

jihchi 08:20:23
https://twitter.com/james_k_nelson/status/1024980685507973122?s=12
If you've been wondering what getSnapshotBeforeUpdate() is useful for in #reactjs, you're not alone. But today I found a use!

I want my console component to scroll to the bottom after update, but only if it was already scrolled down *before* the update.

reactjs.org/docs/react-com…
jihchi 08:33:02
https://twitter.com/jamiebuilds/status/1022568918949408768?s=12
The three browsers holding JavaScript back the most are:

1) IE 11 (2.7% of the web)
2) Android 4.4-4.4.3 (0.94% of the web)
3) Chrome 49 (0.71% of the web)

If we stopped supporting these browsers, we wouldn't have to transform most modern JavaScript syntax features... (cont)
jihchi 08:36:29
https://twitter.com/js_tut/status/1024791994231607297?s=12
After I released the Complete Flex diagram tutorial, lots of people still asked questions about how it worked. True. You can't fully explain Flex by static diagrams. So I'm creating an animated series.

(this is an unedited draft.)

#100daysofcode #javascript #reactjs #vuejs
mofas 11:34:59
七彩console.log
🌈 2
mofas 21:45:21
https://nodesource.com/blog/why-the-new-v8-is-so-damn-fast

The NodeSource Blog - Node.js Tutorials, Guides, and Updates

Why the New V8 is so Damn Fast

The entire V8 compiler pipeline was overhauled and shipped with Node.js version 8. This post investigates what speed improvements we can expect as a result.

2018-08-04

mofas 02:41:07
https://awesomereact.com/playlists/chain-react-2018

Awesome React

Awesome React - Simply React

Abstract: One of the things I love about React is how easy it is to encapsulate UI code into a component. I love this because it makes reuse of those components easy. But is it simple? I've made my fair share of components that had to accept a bunch of props to handle a growing list of different use cases resulting in a complex render function full of conditional statements and a confusing API for people using this "reusable" component. Eventually it becomes too much and I had to make a new version of the same component to handle slightly different use cases. Lots of code/bug duplication there because my reusable component wasn't reusable enough. It wasn't simple enough. There are patterns that have emerged in React that allow you to promote code reuse without sacrificing the simplicity or flexibility of the component. In this talk we’ll cover some of these patterns that will make your React components more useful.

mofas 02:41:16
Chain react 2018 all video uploaded
mofas 03:25:49
Kent C. Dodds 繼續推廣他在downshift的理念. 如何避免props爆炸
2 2

2018-08-05

mofas 06:04:47
https://brandur.org/interfaces

brandur.org

Learning From Terminals to Design the Future of User Interfaces

How we overvalue the wrong technology and novel aspects of interface design at the expense of substantial gains to our productivity.

mofas 11:45:16
現在react community 突然都開始玩framer X
🔥 2
mofas 23:07:13
https://github.com/jesseduffield/lazygit

GitHub

jesseduffield/lazygit

lazygit - simple terminal UI for git commands

mofas 23:07:16
So cool

2018-08-07

mofas 07:32:57
https://twitter.com/mjackson/status/1026590000484216833
Twitter as your github issue. Again, presented by Dan!
😂 1
mrorz 10:51:15
chatbot lol

2018-08-08

mofas 07:20:57
其實Google front-end還是很強
但是強是強在針對每一個需求 手工刻藝術品...
從Google Map 的canvas globe map, Gmail Input, 到 Google Photo grid layout 每一個都是特化的寫法 來最大化效能 ...
👍 3
mofas 07:23:27
有時候 99% 公司要的只是大量的table和form去操作資料庫 或是靜態網頁來呈現資訊而已.. 所以framework還是有存在價值
mofas 09:39:15
https://medium.com/dartlang/dart-2-stable-and-the-dart-web-platform-3775d5f8eac7

Medium

Announcing Dart 2 Stable and the Dart Web Platform – dartlang – Medium

Signals the rebirth of Dart as a mainstream programming language for mobile and web development

mofas 09:39:35
好想開賭盤看Dart 2 一年後倒底是會活還是會死
⤵️ 1 ⤴️ 1

2018-08-09

mofas 02:22:15
https://mobile.twitter.com/dan_abramov/status/1027248875072114689
Okay, I give in. I wrote a guide on the most scalable file structure for React projects. I’m using it every day. Best part: it works for Vue projects too. Hope it’s helpful! :sparkles: (link: http://react-file-structure.surge.sh/) react-file-structure.surge.sh
mofas 06:41:35
https://medium.com/the-set-list/google-amp-a-70-drop-in-our-conversion-rate-35fe3cb69c59

Medium

Google AMP — A 70% drop in our conversion rate. – The Set List – Medium

Egg. On. Face. I just got done with no fewer than 3 articles and 3 YouTube videos bragging about how great my design work has been lately…

jihchi 18:44:53
https://twitter.com/dan_abramov/status/1027383357011845120?s=12
Ever got bitten by React component stacks only including index.js because your naming convention for every component is FolderName/index.js?

I just merged a PR that should fix that. Now if the filename is index.js, we'll show the folder name too.
jihchi 23:02:34
https://ptsjs.org/

ptsjs.org

Pts.js

Pts is a javascript library for visualization and creative-coding.

jihchi 23:08:59
https://github.com/haskellcamargo/sclack

GitHub

haskellcamargo/sclack

sclack - The best CLI client for Slack, because everything is terrible!

👍 1

2018-08-10

jihchi 08:14:41
https://twitter.com/threepointone/status/1027660980342468608?s=12
if you want to play with suspense -
- checkout facebook/react
- set enableSuspense = true in ReactFeatureFlags.js
- yarn build
- copy build/dist/* to some dir in your project
- setup alias: {react: ‘dir/react.whatever.js’ (and react-dom, etc) in webpack/parcel/etc config
- done!
💪 1
jihchi 17:44:23
http://blog-en.tilda.cc/articles-website-design-mistakes

blog-en.tilda.cc

Common webpage design mistakes

Simple layout and design tips to help you create a stunning webpage

😎 1

2018-08-11

mofas 00:14:49
https://github.com/hasura/graphqurl

GitHub

hasura/graphqurl

graphqurl - curl for GraphQL with autocomplete, subscriptions and GraphiQL. Also a JS library

mofas 00:15:09
好像有這麼一點用處...
mofas 00:15:20
不過直接用graphiQL好像還是比較快
mrorz 00:30:38
嗯 xd
mofas 02:15:29
https://medium.com/the-vue-point/vue-cli-3-0-is-here-c42bebe28fbb

Medium

Vue CLI 3.0 is here! – The Vue Point – Medium

Over the past few months, we’ve been working really hard on the next generation of Vue CLI, the standard build toolchain for Vue…

mofas 03:38:47
https://angularconsole.com/
https://blog.nrwl.io/angular-console-the-ui-for-the-angular-cli-a5d0924240b7

angularconsole.com

Angular Console

The Power of the Angular CLI. The Convenience of an App.

mofas 03:39:08
現在看起來React的 CLI真的是最爛的...
mofas 10:01:48
https://zeit.co/live

zeit.co

ZEIT React Meetup

The ZEIT React Meetup Livestream

jihchi 15:30:04
React CRA ?! 算我們想的那種 CLI 嗎⋯⋯
jihchi 17:22:28
https://github.com/zeeshanu/dumper.js

GitHub

zeeshanu/dumper.js

dumper.js - A better and pretty variable inspector for your Node.js applications

2018-08-12

mofas 06:53:26
There is no react CLI.
jihchi 22:19:43
https://github.com/umpox/TinyEditor

GitHub

umpox/TinyEditor

TinyEditor - A functional HTML/CSS/JS editor in less than 400 bytes

2018-08-13

mofas 05:36:05
academictorrents!
http://academictorrents.com/browse.php?c7=1&search=coursera&page=0
所有coursera的歷史好課都還在 lol

Academic Torrents

Search results for "coursera" - Academic Torrents

有推薦必收藏的嗎？
推了你也沒時間上吧..
先念SICP就贏一半

2018-08-14

jihchi 08:22:10
https://twitter.com/pedronauck/status/1029048461738614785?s=12
Docz v0.10.0 with a lot of good new features 🚀🎉
github.com/pedronauck/doc…

:hourglass_flowing_sand: Fetch data on documents
:tv: Edit playground code
:nail_care: Change playground theme
:bookmark: Resolve markdown files
:link: Auto Github link
:zap: A lot of bug fixes and improvements

#docz #javascript #react

2018-08-15

mofas 08:45:54
https://t.co/PIHFEGYNGO

Medium

Better tree shaking with deep scope analysis – webpack – Medium

Here’s my project in GSoC 2018: Improve tree-shaking for webpack, a widely used JS code bundler.

jihchi 20:51:12
https://github.com/react-tools/react-move

GitHub

react-tools/react-move

react-move - React Move :cyclone: Beautiful, data-driven animations for React

jihchi 20:51:20
https://github.com/iamkun/dayjs

GitHub

iamkun/dayjs

dayjs - :alarm_clock: Day.js 2KB immutable date library alternative to Moment.js with the same modern API

2018-08-16

mofas 04:09:36
The fastest bundler for JS written in Rust.
mofas 04:11:47
100x faster than browseify. I guess 10x faster than Rollup.js
jihchi 08:14:09
https://twitter.com/housecor/status/1029721142901334017?s=12
Jest 23.5 now supports .each statements: lay out multiple scenarios in a tabular format! Much more concise and readable than copy/pasting tests for each scenario.

Example with 4 scenarios:
Before: 68 lines, copy/pasted :-1:
After: 12 lines 👍

More info: buff.ly/2ODRnJk
jihchi 08:15:31
https://twitter.com/alexandereardon/status/1027782544467668992?s=12
I just published “Beautiful drag and drop: a year in review”
mofas 10:55:03
MS DV新作
mofas 10:57:21
這東西有機會跟excel一樣威猛呀
mrorz 11:00:29
打爆 google data studio
mofas 11:00:30
整個是web based
mofas 11:00:34
build on React
mofas 11:01:12
現在的MS又要再來個黃金十年了嗎
mofas 11:01:20
徵求大大幫refer MS
mofas 23:11:13
https://github.com/palmerhq/react-async-elements

GitHub

palmerhq/react-async-elements

react-async-elements - Suspense-friendly async React elements for common situations

2018-08-17

mofas 03:02:57
React rally, john's talk is excellent
mofas 10:45:28
這次React Rally 品質還不錯
mofas 10:47:01
有三個talk目前覺得值得聽
https://jovial-hypatia-a56434.netlify.com/#/
mofas 10:47:07
One of them
jihchi 19:23:38
🙏分享

2018-08-18

mofas 03:51:43
d3+react live coding. 很強
mofas 07:17:45
kent 的雖然重複講了 但是還不錯
jihchi 08:55:34
https://github.com/MichaelMure/git-bug

GitHub

MichaelMure/git-bug

git-bug - Distributed bug tracker embedded in Git

jihchi 09:22:16
https://github.com/Droogans/unmaintainable-code

GitHub

Droogans/unmaintainable-code

unmaintainable-code - A more maintainable, easier to share version of the infamous <http://mindprod.com/jgloss/unmain.html>

2018-08-19

jihchi 11:24:40
https://twitter.com/sharifsbeat/status/1030743240453120001?s=12
Created a list of basic and very useful Ramda List functions.
This might be useful if you're starting with Ramda or need a way to quickly lookup possible functions or need a printed list.
mofas 11:35:09
https://www.youtube.com/channel/UCXBhQ05nu3L1abBUGeQ0ahw

YouTube

ReactRally

Videos from the React Rally conferences.

2
mofas 11:35:16
Some video is uploaded
mofas 12:56:37
這一個good
👍 1
mofas 12:58:41
This is good.

2018-08-20

jihchi 21:59:52
https://github.com/facebook/reason/pull/2140#issuecomment-414191180

GitHub

Add `let!foo` sugar for continuation-passing-style by jaredly · Pull Request #2140 · facebook/reason

This will allow us to get most of the benefits of lwt&amp;#39;s ppx or ppx_let without baking in any specific implementation. I&amp;#39;ve included in the test an example of binding the option monad, but y...

2018-08-21

jihchi 08:23:12
GitHub - Rich-Harris/agadoo: Check whether a package is tree-shakeable
https://github.com/Rich-Harris/agadoo

GitHub

Rich-Harris/agadoo

agadoo - Check whether a package is tree-shakeable

jihchi 19:15:06
BuckleScript 4.0.0 (Part Two) · BuckleScript
https://bucklescript.github.io/blog/2018/07/17/release-4-0-0II

bucklescript.github.io

BuckleScript 4.0.0 (Part Two) · BuckleScript

`bs-platform` 4.0.0 introduces a new runtime representation for optionals.

jihchi 19:18:20
BuckleScript 4.0.0 (Part One) · BuckleScript
https://bucklescript.github.io/blog/2018/07/17/release-4-0-0

bucklescript.github.io

BuckleScript 4.0.0 (Part One) · BuckleScript

`bs-platform` 4.0.0 is released! It has some nice features that we want to share with you, a more detailed list of changes is available [here](<https://github.com/BuckleScript/bucklescript/blob/master/Changes.md#400>)

jihchi 21:52:39
https://github.com/checkly/puppeteer-recorder

GitHub

checkly/puppeteer-recorder

puppeteer-recorder - Puppeteer recorder is a Chrome extension that records your browser interactions and generates a Puppeteer script.

2018-08-22

Michael Hsu 09:10:50
https://github.com/IniZio/reim
https://github.com/pedronauck/reworm
怎麼這麼多這種 state management 的 api 還一樣

GitHub

IniZio/reim

reim - An immutable state management library with immer

GitHub

pedronauck/reworm

reworm - the simplest way to manage state!

不知道用起來感覺如何
JS 太多人寫惹 (欸
😛 1
mrorz 10:51:53
JS 太多人寫惹 (欸
wuct 11:34:13
因為 ECMAScript 還不把 immutable data structure 弄出來

2018-08-23

2018-08-24

mofas 04:54:33
Look like we will have new winner soon.
jihchi 19:23:31
https://www.taniarascia.com/getting-started-with-react/

Good React tutorial for beginners

Tania Rascia

Getting Started with React &amp;#8211; An Overview and Walkthrough

I've been hearing about React since I first started learning JavaScript, but I'll admit I took one look at it and it scare

2018-08-27

jihchi 22:28:26
https://github.com/GoogleChromeLabs/size-plugin

GitHub

GoogleChromeLabs/size-plugin

Track compressed Webpack asset sizes over time. Contribute to GoogleChromeLabs/size-plugin development by creating an account on GitHub.

2018-08-28

mofas 03:54:56
https://medium.com/google-design/google-maps-cb0326d165f5

Medium

Prototyping a smoother Map – Google Design – Medium

A glimpse into how Google Maps works, and possible improvements

mofas 03:55:03
Google map design blog!!
mofas 10:59:05
說到這個 我最近才知道某門課老師是TC 39 member
😍 1

2018-08-29

jihchi 08:49:49
Writing for readability with declarative arrays – LogRocket
https://blog.logrocket.com/writing-for-readability-with-declarative-arrays-64f0b1a807f3

LogRocket

Writing for readability with declarative arrays – LogRocket

By manipulating and digesting your arrays in a declarative fashion, you can produce much more readable code. Here are a few ways to do…

maria 10:08:42
@maria has joined the channel
jihchi 21:22:54
https://github.com/joaomilho/Enterprise

GitHub

joaomilho/Enterprise

The Enterprise™ programming language. Contribute to joaomilho/Enterprise development by creating an account on GitHub.

mofas 23:15:26
```
Dan Abramov Jun 15
I also think it’s a miracle that React, for all its “unconventional” choices like immutability, top-down data flow, lack of mutation tracking, transactional updates, ever became so popular. Maybe it was a temporary anomaly, and it’s time to dial it down a bit. 🙂
```
👍 1
mofas 23:15:43
Totally agree.
➕ 1

2018-08-31

mofas 09:23:11
https://remysharp.com/2018/08/23/cli-improved

remysharp.com

CLI: improved

I'm not sure many web developers can get away without visiting the command line. As for me, I've been using the command line since 1997, first at university when I felt both super cool l33t-hacker and simultaneously utterly out of my depth. Over the years my command line habits have improved and I often search for smarter tools for the jobs I commonly do. With that said, here's my current list of improved CLI tools.