This is a CFP for ReactiveConf open call for lightning talks. If you'd like to see this talk become a reality, please ⭐️ star this gist. #ReactiveConf
function loadCSS( href, before, media){ | |
"use strict"; | |
// Arguments explained: | |
// `href` is the URL for your CSS file. | |
// `before` optionally defines the element we'll use as a reference for injecting our <link> | |
// By default, `before` uses the first <style> element in the page. | |
// However, since the order in which stylesheets are referenced matters, you might need a more specific location in your document. | |
// If so, pass a different reference element to the `before` argument and it'll insert before that instead | |
// note: `insertBefore` is used instead of `appendChild`, for safety re: http://www.paulirish.com/2011/surefire-dom-element-insertion/ | |
var ss = window.document.createElement( "link" ); |
{ | |
"apps": [{ | |
"name": "Application", | |
"exec_interpreter": "./node_modules/babel-cli/bin/babel-node.js", | |
"script": "./bin/www", | |
"args": [], | |
"watch": ["public", "package.json", "pm2.development.json"], | |
"ignore_watch": ["public"], | |
"watch_options": { | |
"persistent": true, |
1-In the github repo on Settings > Integration & Services, enable | |
2-Go to travisCI page and enable the repo | |
3-Configure the env variables on TravisCI so that it is not necessary to save credentials on github | |
-in the project Settings on TravisCI, add the entry for netlify site id: NETLIFY_SITE_ID - <site_id from .netlify file generated on netlify create> | |
-create a netlify access token for TravisCI | |
-On Netlify Dashboard, Go to Account Settings > OAuth Applications (https://app.netlify.com/account/applications) > Personal access tokens and press New Access Token | |
-Name it anything, but to make it easier the suggestion is name TravisCI. | |
-Generate it and COPY it - you won’t see it again! | |
-in the project Settings on TravisCI, add the entry for netlify personal access token generated for TravisCI: NETLIFY_ACCESS_TOKEN | |
4-Generate a .travis.yml file in the local repo |
NOTE: Sokra confirmed I had a misunderstanding, Webpack is still a static build tool and the below won't work. It's still a nice concept though...
With webpack 1, code splitting react-router routes is quite tedious. It requires us to repeat the getComponent
function over and over again. (See here for an explanation how it works with webpack 1)
Example:
<Router history={history}>
<Route
path="/"
// // LUI Next Colors | |
// // LUI Now colors live in @lendi-ui/color package | |
import hexToRgba from 'hex-to-rgba'; | |
export const isHex = (str: string) => str.match(/^#(?:[0-9a-fA-F]{3}){1,2}$/); | |
type Shade = Partial<950 | 900 | 800 | 700 | 600 | 500 | 400 | 300 | 200 | 100 | 50 | 25 | 0>; | |
type Format = 'hexadecimal' | 'rgba'; | |
type Category = 'primary' | 'secondary' | 'success' | 'error' | 'warning' | 'info' | 'shade' | 'focus'; | |
type ColorObject = Partial<{ [key in Shade]: { value: string; format: Format } }>; |
import babel from 'rollup-plugin-babel' | |
import commonjs from 'rollup-plugin-commonjs' | |
import postcss from 'rollup-plugin-postcss' | |
import resolve from 'rollup-plugin-node-resolve' | |
import pkg from './package.json' | |
export default { | |
input: 'src/index.js', | |
output: [ |
tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.
A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.
But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.
How do we solve this with React?
Seen a few tweets on this. I want to dispel some FUD.
Node is probably going to introduce a new file extension for JavaScript modules, .mjs
. The reasons for this are long and perilous, and trying to summarize the discussion that led to it is maddening. The short version is that ES6 modules have different semantics from existing scripts, and need to be executed differently. In browsers, this is done with <script type="module">
. In Node, this will be done by analyzing the file extension of the imported file.
I'll be honest: I don't love this solution! I was rooting for the TC39 counter-proposal. But I also understand the solution that the Node developers chose, and why they chose it.
The new file extension is a good enough solution. You can read the [draft spec](https://github.com/nodejs/node-eps/
{ | |
"explorer.fileNesting.enabled": true, | |
"explorer.fileNesting.patterns": { | |
"*.js": "${capture}.js.map, ${capture}.d.ts, ${capture}.d.ts.map", | |
"*.ts": "$(capture).test.ts, $(capture).test.tsx, $(capture).test.node.ts, $(capture).test.node.tsx, $(capture).test.native.ts, $(capture).test.native.tsx, $(capture).test.ios.ts, $(capture).test.ios.tsx, $(capture).test.web.ts, $(capture).test.web.tsx, $(capture).test.android.ts, $(capture).test.android.tsx, ${capture}.native.tsx, ${capture}.ios.tsx, ${capture}.android.tsx, ${capture}.web.tsx, ${capture}.native.ts, ${capture}.ios.ts, ${capture}.android.ts, ${capture}.web.ts, ${capture}.native.js, ${capture}.ios.js, ${capture}.android.js, ${capture}.web.js, ${capture}.native.jsx, ${capture}.ios.jsx, ${capture}.android.jsx, ${capture}.web.jsx", | |
"*.tsx": "$(capture).test.ts, $(capture).test.tsx, $(capture).test.node.ts, $(capture).test.node.tsx, $(capture).test.native.ts, $(capture).test.native.tsx, $(capture).test.ios.ts, $(capture).test.ios.tsx, $(captur |