<https://twitter.com/ur_friend_james|@ur_friend_james> <https://twitter.com/reasonml|@reasonml> Just finished the translation: <http://987.tw/a-first-reason-react-app-for-javascript-developers/>
![](https://emoji.slack-edge.com/T02G2SXKM/good/10f827110020fb3a.png)
<https://twitter.com/ur_friend_james|@ur_friend_james> <https://twitter.com/reasonml|@reasonml> Just finished the translation: <http://987.tw/a-first-reason-react-app-for-javascript-developers/>
GitHub
ran - :zap: RAN! React . Apollo (GraphQL) . Next.js Boilerplate :zap: - SEO-Ready, Production-Ready, SSR, Hot-Reload, CSS-in-JS, Caching and more...
GitHub
autodll-webpack-plugin - Webpack's DllPlugin without the boilerplate
Announcing Chalk v2: Truecolor support and tagged template literal. Chalk is for colorizing text in the terminal. <https://github.com/chalk/chalk/releases/tag/v2.0.0>
GitHub
icaro - Smart and efficient javascript object observer, ideal for batching DOM updates (~1kb)
GitHub
formik - Forms in React, without tears
GitHub
yup - Dead simple Object schema validation
Great writeup on React Context. Very clear walkthrough on how to approach Context by <https://twitter.com/mweststrate|@mweststrate> <https://medium.com/@mweststrate/how-to-safely-use-react-context-b7e343eff076>
GitHub
bundlesize - Keep your bundle size in check
GitHub
resonance - Resonance | Data-driven transitions in React
Ptt 批踢踢實業坊
潛水已久,把 4、5 月面試的心得寫下來,希望有點參考價值。文有點長。 我背景工作經驗 5 年左右,fullstack 開發,最近一份工作在小公司當過小主管,但 也沒管幾個人。 前端就 js 還算可以,jquery、react 也寫過一些。 後端 php、nodejs 寫過中型(不敢說大型,覺得沒很大)專案。資料庫設計跟 web
I've finally published my proposal for Pattern Matching in JavaScript. Very rough, but eager to hear your thoughts! <https://github.com/tc39/proposal-pattern-matching>
Compose is built-in in JavaScript! <https://gist.github.com/xtuc/68f1e7def4b92ea3c7920b1dae0dc798> <https://pbs.twimg.com/media/DDznWLZXkAIii3r.jpg>
![]()
New release of bs-loader - a <https://twitter.com/reasonml|@reasonml> loader for #webpack! Now with better error messages thanks to <https://twitter.com/danschuman|@danschuman> <https://github.com/rrdelaney/bs-loader/releases/tag/v1.5.4> <https://pbs.twimg.com/media/DD6J7GxVoAAR13X.jpg>
![]()
<https://pbs.twimg.com/media/DD6LBktV0AEGcQt.jpg>
![]()
this <https://twitter.com/reasonml|@reasonml> react tutorial almost ready! yaks shaved: ~4 :tada:
Native ECMAScript modules are enabled by default in Chrome 61: <https://chromium-review.googlesource.com/c/558727/> The overview and how to use: <https://blog.hospodarets.com/native-ecmascript-modules-the-first-overview> <https://pbs.twimg.com/media/DD6okF7UwAIpe1A.jpg>
![]()
GitHub
Bloom-Filter - Bloom Filter Demo
Automated Testing with Headless Chrome: <https://developers.google.com/web/updates/2017/06/headless-karma-mocha-chai>
bogdan-lyashenko.github.io
Entire ReactJS code base explanation by visual block schemes (Stack+Fiber versions)
GitHub
Stateless login-with microservice for OAuth
GitHub
justjavac/the-front-end-knowledge-you-may-dont-know
the-front-end-knowledge-you-may-dont-know - :innocent: 你可能不知道的前端知识点
Love the idea for simple dom stuff! will definitely give this a shot some time <https://redom.js.org>
boris-marinov.github.io
Why is functional programming awesome
I really am not the best person to author such an article (I am not that into programming anymore, and I never was a real expert in it), however I am doing it, because I have been waiting for someone else to write it for years and kept noticing the following phenomena: People who understand functional programming, cannot make themselves understood by the general (programming) public. Many of the people who are able to make themselves understood by the public, don’t understand enough for them to be worth listening (all functional programming articles that are understandable don’t go much farther than “You should use pure functions, man!”. Roughly the same thing has been called “the curse of the monad” by some people: “Once you understand it, you lose the ability to explain it”. It is clear now that monads are not something you get in an afternoon, but I think you can get some idea of what FP (functional programming) is. Or, you know, in a year or so. But in order to spend that time you need some motivation. You probably need someone to tell you why exactly do you need to know about FP? Why is it awesome, so to say. And so my article begins.
It's done! For all you <https://twitter.com/reactjs|@reactjs> JavaScript folks who want to learn <https://twitter.com/reasonml|@reasonml>, here you go! "A ReasonReact Tutorial" <https://jaredforsyth.com/2017/07/05/a-reason-react-tutorial/>
✎ Designing The Perfect Date And Time Picker. With a checklist of every single detail to consider and UI examples. <https://www.smashingmagazine.com/2017/07/designing-perfect-date-time-picker/>
A house nearby just exploded into flames. Everyone is safe. While you're arguing about JS, keep in mind what's really important in life.
GatsbyJS
Announcing Gatsby 1.0.0 :tada::tada::tada:
Gatsby is your friendly, blazing fast static site generator for React. And after nearly a year of research, prototyping, and testing, Gatsby...
![]()
YouTube
GraphQL-Europe is a non-profit GraphQL conference in Europe with speakers from all around the world. Learn about GraphQL best practices from industry experts...
:rotating_light::rotating_light: GET THOSE THURSDAY BUILDS INTO GEAR WITH #WEBPACK 3.1 RTRT :fire::fire: :heavy_check_mark: Decrease avg build and rebuild :hourglass: by +60% (<https://twitter.com/mikesherov|@mikesherov> <https://twitter.com/GaryBorton|@GaryBorton>) <https://pbs.twimg.com/media/DEFrb_EVwAAIYuX.jpg>
![]()
We use the same CLI arguments for <https://twitter.com/yarnpkg|@yarnpkg> commands for a project. Now we can actually pass them via .yarnrc <https://yarnpkg.com/en/docs/yarnrc#toc-cli-arguments>
Wildcard Certificates Coming January 2018 <https://letsencrypt.org//2017/07/06/wildcard-certificates-coming-jan-2018.html>
GitHub
rebass - Functional React UI component library, built with styled-components
Learn how ReactDOM.render works. See missing `key` bugs in (live) action. Play with animated fractals. #reactjs <https://reactarmory.com/guides/learn-react-in-browser-with-animated-fractal/rendering-and-rerendering>
I spoke at utah's PolyJS meetup last night about <https://twitter.com/reasonml|@reasonml> Recording: <https://www.youtube.com/watch?v=vTb8UU_Yjmk> Slides: <https://jaredforsyth.com/reason-javascript-flavored-ocaml/>
Haven't seen this React pattern yet. Very elegant from my point of view. WithState: the Component as a view prop. <https://www.webpackbin.com/bins/-KoXb-K74xnSNq8hphQ2> <https://pbs.twimg.com/media/DEOEOTGWsAUAcR7.jpg>
![]()
Smooth your dashboards! #Monitorama '17 talk on ASAP (<http://futuredata.stanford.edu/asap/>) by <https://twitter.com/kexinrong|@kexinrong> <https://vimeo.com/221062931> <https://speakerdeck.com/futuredata/automating-dashboard-displays-with-asap>
temochka.com
I remember learning my first programming language. As a part of the required informatics class in the second grade, we had to study some dialect of BASIC. Sl...
GitHub
stratiformltd/react-loadable-visibility
react-loadable-visibility - A wrapper around react-loadable to load elements that are visible on the page.
vertical-align in CSS
Modern DevTools Update - <https://ModernDevTools.com> - In lesson 7, we understand :mag: the real cost of JavaScript parse and execution times :timer_clock: <https://pbs.twimg.com/media/DEYiOaNXUAAiXhF.png>
![]()
I just published “Introducing webpack academy!” <https://medium.com/p/introducing-webpack-academy-bad0a4e23deb>
#fantasyland 19 #Semigroupoid/#Category! Your queries + fearies on the theories. tl;dr: it's all #Monoid in the end! <http://www.tomharding.me/2017/07/10/fantas-eel-and-specification-19/>
Bundle Buddy is a tool to find shared code across bundles. :weight_lifter:♂️:hammer_and_pick: (A collab w/ <https://twitter.com/DataToViz|@DataToViz>):sparkles: npm i -g bundle-buddy <https://github.com/samccone/bundle-buddy>
“Introducing npx: an npm package runner” by <https://twitter.com/maybekatz|@maybekatz> <https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b>
This is a great tool. But ready for a rant? /1 <https://twitter.com/samccone/status/884410588301991937>
Bundle Buddy is a tool to find shared code across bundles. :weight_lifter:♂️:hammer_and_pick: (A collab w/ <https://twitter.com/DataToViz|@DataToViz>):sparkles: npm i -g bundle-buddy <https://github.com/samccone/bundle-buddy>
Boldly moving #react to <https://twitter.com/elmlang|@elmlang>? Wanna continue down the rabbit hole? <https://twitter.com/jusrin00|@jusrin00> talks Elm *inside* #purescript :O <http://qiita.com/kimagure/items/d12525d42516f95dd541>
Did you know you can convert React.PropTypes to prop-types package automatically? <https://facebook.github.io/react/blog/2017/04/07/react-v15.5.0.html#migrating-from-react.proptypes>
:speaker:The security releases for ALL active #nodejs release lines are available. Update ASAP. New versions: - 8.1.4 - 7.10.1 - 6.11.1 - 4.8.4
Medium
emotion – Kye Hohenberger – Medium
The Next Generation of CSS-in-JS
<https://babeljs.io/php/>: (I don't know any PHP, so why not :slightly_smiling_face:) <https://twitter.com/kornelski/status/884742627169628160>
This is Chrome running PHP :smiling_imp: <https://pbs.twimg.com/media/DEc8jh8WAAIuY-o.jpg>
![]()
Another bugfix release for webpack 3. It's getting stable... <https://github.com/webpack/webpack/releases/tag/v3.2.0> <https://pbs.twimg.com/media/DEewZ4yXgAU2HdI.jpg>
![]()
when you roll your own crypto
The babel-macros API has solidified and is ready for use. Docs have been updated. Give it a whirl! <https://github.com/kentcdodds/babel-macros>
GitHub
tiansijie/reason-react-infinity-menu
reason-react-infinity-menu - reason-react implementation of [react-infinity-menu](<https://github.com/socialtables/react-infinity-menu>)
:sunglasses: New to Rx? Start here: Observables, observers and operators introduction: <https://toddmotto.com/rxjs-observables-observers-operators>
npx is so absurdly useful I'm gonna have to do a whole talk just about it <https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b>
Yarn
Hello everyone! Today, we’re gonna write a new package manager, even better than Yarn! Ok, maybe not, but at least we’re gonna have some fun, learn how packa...
![]()
anyone trying to scale up a version control workflow for teams should look at <https://trunkbaseddevelopment.com/>
When it comes to URLs, remember that URLs are UI too. <https://www.hanselman.com/blog/URLsAreUI.aspx>
Google Developers
What's New In DevTools (Chrome 59) | Web | Google Developers
New features and changes coming to DevTools in Chrome 59.
Medium
C’est la “Vue” – eMAG TechLabs – Medium
The journey from giving up React.js in favor of Vue.js
![]()
Hacker Noon
ES8 was Released and here are its Main New Features :fire:
The new features of the EcmaScript specification 8th edition
![]()
Graphical Linear Algebra
And because arithmetic science and geometric science are connected, and support one another, the full knowledge of numbers cannot be presented without encountering some geometry, or without seeing that operating in this way on numbers is close to geometry; the method is full of many proofs and demonstrations that are made with geometric figures. Fibonacci, preface to Liber Abaci (first published 1202, 1228 manuscript translated by Lawrence E. Sigler) Graphical linear algebra is a work in progress, and there are many open research threads. We are looking for PhD students, so please consider applying! This blog is written in English. To read and contribute to translations (Dutch, French, German,…) see this page by Vincent Verheyen. Introduction Episode 1 – Makélélé and Linear Algebra Episode 2 – Methodology, Handwaving and Diagrams Adding and Copying Episode 3 – Adding (Part 1) and Mr Fibonacci Episode 4 – Dumbing Down and Magic Lego Episode 5 – Spoilers, Adding (Part 2) and Zero Episode 6 – Crema di Mascarpone and Diagrammatic Reasoning Episode 7 – Copying, Discarding and The Slogan Episode 8 – When Adding met Copying… Episode 9 – Natural numbers, diagrammatically Matrices and PROPs Episode 10 – Paths and Matrices Episode 11 – From Diagrams to Matrices Episode 12 – Monoidal Categories and PROPs (Part 1) Episode 13 – PROPs (Part 2) and Permutations Episode 14 – Homomorphisms of PROPs Episode 15 – Matrices, diagrammatically Episode 16 – Trust the Homomorphism, for it is Fully Faithful Integers and Relations Episode 17 – Maths with Diagrams Episode 18 – Introducing the Antipode Episode 19 – Integer matrices Episode 20 – Causality, Feedback and Relations Episode 21 – Functions and Relations, diagrammatically Episode 22 – The Frobenius Equation Episode 23 – Frobenius Snakes and Spiders Fractions and Spaces Episode 24 – Bringing it all together Episode 25 – Fractions, diagrammatically Episode 26 – Keep Calm and Divide by Zero Episode 27 – Linear Relations Episode 28 – Subspaces, diagrammatically Episode 29 – Dividing by zero to invert matrices Episode 30 – The essence of graphical linear algebra Interlude – string diagrams and resource-sensitive syntax Why string diagrams? Sequences and Signal Flow Graphs Episode 31 – Fibonacci and sustainable rabbit farming Offtopic Sometimes this blog actually looks like a blog. 16 September 2016 – Leicester and the battle for universities 16 April 2017 – …, a monoid is a category, a category is a monad, a monad is a monoid, … 10 May 2017 – 1st Workshop on String Diagrams in Computation, Logic, and Physics
Medium
How to use Immutable.js Records with React and Redux
It’s the small things that change your product. React and Flux can be small things, but using them has changed our product like we could…
What's New In DevTools (Chrome 61) <https://developers.google.com/web/updates/2017/07/devtools-release-notes> - Debug ES6 modules - Mobile device throttling - Storage usage - Cache timestamps <https://pbs.twimg.com/media/DEpidU4XYAAVL_H.png>
![]()
I just posted a tutorial for routing in <https://twitter.com/reasonml|@reasonml> & Reason React <https://jamesfriend.com.au/routing-in-reason-react>
Vue overwrites array's push/pop/shift/unshift/splice/sort/reverse methods borking generic prototype use e.g. <http://splice.call>(a,i,1)
The problem of not allowing developers to learn on company time. Something I just thought about, maybe true to some degree... <https://pbs.twimg.com/media/DEnX6KlXUAACcJt.jpg>
![]()
Universal Now: Now, on Every Cloud. <https://zeit.co/blog/universal-now>
GitHub
gpu.js - GPU Accelerated JavaScript
Client side validation <https://pbs.twimg.com/media/DEoC5E2UQAEAn4H.jpg>
![]()
Medium
webpack freelancing log book (week 12–14) – webpack – Medium
2017/06/19–2017/07/09
Alex Kras
Reverse Engineering One Line of JavaScript
Few months ago I received the following email from a friend of mine: Subject: Can you unroll and explain this 1 line of code to me? Body: Call me stupid but…I don’t understand it and wo…
Alex Kras
Reverse Engineering One Line of JavaScript
Few months ago I received the following email from a friend of mine: Subject: Can you unroll and explain this 1 line of code to me? Body: Call me stupid but…I don’t understand it and wo…
看了這篇才知道 js 可以直接用 id 當作 variable name 去 access element: `document.getElementById("app")` 可以直接 global `app` 取
Medium
Pure UI Control – Adam Solove – Medium
This month marks 10 years that I’ve been paid to build web user interfaces. And today is the second anniversary of Guillermo Rauch’s essay…
![]()
:tada: jest-styled-components v4 is out now! Testing styled components won't get much better :100: Stellar work <https://twitter.com/MicheleBertoli|@MicheleBertoli> :clap: <https://twitter.com/fbjest|@fbjest>
Why has everyone using React not switched to Preact? Honestly curious. No horse in the race.
“Surprising polymorphism in React applications” by <https://twitter.com/bmeurer|@bmeurer> <https://medium.com/@bmeurer/surprising-polymorphism-in-react-applications-63015b50abc>
GitHub
node-mock-examples - Examples of tests that mock Node system APIs: fs, http, child_process, timers
GitHub
Consider re-licensing to AL v2.0, as RocksDB has just done · Issue #10191 · facebook/react
Hi there, The Apache Software Foundation Legal Affairs Committee has announced that the so-called 'Facebook BSD+Patents License' is no longer allowed to be used as a direct dependency in Apache pro...
We have our first Pattern Matching PR in <https://twitter.com/babeljs|@babeljs>'s parser :heart_eyes: <https://github.com/babel/babylon/pull/635> by <https://twitter.com/krzKaczor|@krzKaczor> <https://pbs.twimg.com/media/DFBBYt4XoAAV1jN.jpg>
![]()
Because a couple of people asked yesterday, here's a silly little example I put together using error boundaries: <http://plnkr.co/edit/JE7CqR?p=preview>
Medium
Redux-First Router data-fetching: solving the 80% use case for async Middleware
Understanding the architectural decisions behind the tools you are using is perhaps more important than the many things a new package does…
![]()
Apollo GraphQL
Apollo Server 1.0 — A GraphQL Server for all Node.js frameworks
Use GraphQL with Express, Hapi, Koa, Lambda, Micro, Restify, etc.
![]()
GitHub
apollo-server - :earth_africa: GraphQL server for Express, Connect, Hapi and Koa
I just published “Laziness with Representable Functors” <https://medium.com/p/laziness-with-representable-functors-9bd506eae83f>
Medium
Why data structure is just syntax sugar in FP – Mofas – Medium
When I start to learn programming language. I hear the concept that “Closure is data and data is closure. They are just the two sides of…