<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/>
3
GitHub
ran - :zap: RAN! React . Apollo (GraphQL) . Next.js Boilerplate :zap: - SEO-Ready, Production-Ready, SSR, Hot-Reload, CSS-in-JS, Caching and more...
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>
icaro - Smart and efficient javascript object observer, ideal for batching DOM updates (~1kb)
formik - Forms in React, without tears
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>
bundlesize - Keep your bundle size in check
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>
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)
Stateless login-with microservice for OAuth
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>
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>
zeit.co
Today we're announcing the second major release of Now Desktop
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...
stratiformltd/react-loadable-visibility
react-loadable-visibility - A wrapper around react-loadable to load elements that are visible on the page.
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>
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>
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>
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…
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` 取
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>
node-mock-examples - Examples of tests that mock Node system APIs: fs, http, child_process, timers
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>
1
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>
ocaml-graphql-server - GraphQL servers in OCaml
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.
I just published “Laziness with Representable Functors” <https://medium.com/p/laziness-with-representable-functors-9bd506eae83f>
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…
1
bodymovin - after effects to html library
nice, Apollo's Optics is free for 1M requests/m <https://dev-blog.apollodata.com/apollo-optics-is-now-free-up-to-1-million-graphql-requests-a-month-d759248ea084>, really cool addition to GraphQL APIs
slate - Beautiful static documentation for your API
wade - :ocean: Blazing fast, 1kb search for Javascript
mesh - Visualise data and edit JavaScript code using a spreadsheet interface.
prettier-atom 0.37.0 released, adds GraphQL query formatting support and some error display fixes! <https://github.com/prettier/prettier-atom>
pedronauck/yarn-workspaces-example
yarn-workspaces-example - Sample monorepo project using new Yarn feature called Workspaces
Vue.js Developers
Let's Get Critical: Minimizing Render-Blocking CSS With Webpack
If we only load the CSS that's useful for the initial page render, our users will see the page quicker. Isolating critical CSS and loading non-critical CSS in idle time is something that can be done programmatically in your Webpack pipeline.
change-by-example - Finds a function that transforms a given object into another given object.
2ality
A minimal setup for Babel-based npm packages
This blog post describes a minimal setup for producing npm packages via Babel. You can see that setup in action in the GitHub repository for `re-template-tag`.
Times Open
React, Relay and GraphQL: Under the Hood of the Times Website Redesign
The New York Times website is changing, and the technology we use to run it is changing too.
mike-engel/babel-plugin-bucklescript
babel-plugin-bucklescript - Write ReasonML and Bucklescript in your existing babel projects
Video of my talk "CSS Houdini: From CSS Custom Properties to JS Worklets and back" <https://www.youtube.com/watch?v=66E0_QFnmlA> Slides: <http://slides.com/malyw/houdini#/>
Killer feature of npx: run one-off tools (think yeoman) without an install. <https://medium.com/@maybekatz/introducing-npx-an-npm-package-runner-55f7d4bd282b#fa4a>
Some good points here, but please note you can keep using require('create-react-class') forever :slightly_smiling_face: <https://medium.com/@betaorbust/we-jumped-the-gun-moving-react-components-to-es2015-class-syntax-2b2bb6f35cb3>
:rotating_light::rotating_light: You better believe it!! #webpack 3.4.0 is shipped! Huge amt. of Perf updates and :bug: fixes! :rotating_light::rotating_light: #javascript Update, Test, File Issues, RT:bow: <https://pbs.twimg.com/media/DFmjEqwXgAES-bx.jpg>
Hooray, Promise.prototype.finally (<https://github.com/tc39/proposal-promise-finally>) is now stage 3! (<https://github.com/tc39/proposals/commit/daa3ca6f11b36e32582944c8e84c3f86328d25ba>)
Testing ScrollBoundaryBehavior in Chrome. Remove pesky non-passive listeners and make scrolling smooth! <https://wicg.github.io/scroll-boundary-behavior/>
grabient.com
Beautiful and simple UI for generating web gradients.
clauderic/react-tiny-virtual-list
react-tiny-virtual-list - A tiny but mighty 3kb list virtualization library, with zero dependencies :muscle: Supports variable heights/widths, scrolling to index, and more!
Why? Because we now don’t let React get into inconsistent state. Learn more about error handling in React 16: <https://facebook.github.io/react/blog/2017/07/26/error-handling-in-react-16.html>
Is Fiber ready yet? We'd say yes. :grinning: Just released a beta of React 16! <http://isfiberreadyyet.com> :tada:
<http://chromestatus.com> has a new (and super handy) schedule page with all upcoming features: <https://www.chromestatus.com/features/schedule> - awesome. <https://pbs.twimg.com/media/DFs5TQhU0AACyb_.jpg>
<https://twitter.com/dan_abramov/status/890359151771168773> Why? Because we now don’t let React get into inconsistent state. Learn more about error handling in React 16:
chromeless - :desktop_computer: Chrome automation made simple. Runs locally or headless on AWS Lambda.
Ptt 批踢踢實業坊
旋轉抽獎 2017 ModernWeb Ticket 登登登！ 千呼萬喚始出來～～～ 2017 ModernWeb 議程熱騰騰出爐啦！ 議程表：<http://modernweb.tw/agenda.html> 聽說今年講者高手雲集，許多議程非常精彩 Carousell 自家工程師表示流口水想聽XD ((遞衛生紙
Error boundaries! Where have you been all my life? #reactjs <https://pbs.twimg.com/media/DFGwcKSXsAEtVaQ.jpg>
Just won the coolest React T-shirt ever :heart_eyes::heart_eyes::heart_eyes: <https://twitter.com/reactkyiv/status/889761313391620096>
Крутые новости! Мы устраиваем розыгрыш! Ретвитни, чтобы получить нашу футболку с новым принтом! :tada: :sparkles: В четверг мы выберем победителя <https://pbs.twimg.com/media/DFkMj12XgAAyf3G.jpg>
D3 in Depth: An Intermediate Guide to D3 Visualizations - <http://d3indepth.com/>
fitty - Makes text fit perfectly.
styled-system - Design system utilities for styled-components, glamorous, and other css-in-js libraries
react-snapshot - A zero-configuration static pre-renderer for React apps
Top Resources to Explore React Fiber – Hacker Noon
The new React version was released; Stay updated by reading about the innovations
YouTube