[based on a true story]
So. Your friend's about to teach you how to make a website. Great!
You make a file, and you save it as 'index.html'. Why it's called 'index' isn't really explained to you, but whatever.
You type the following.
hello world
package com.teslamotors.TeslaApp; | |
import android.app.Application; | |
import com.BaiduMaps.BaiduPackage; | |
import com.airbnb.android.react.maps.MapsPackage; | |
import com.facebook.react.ReactApplication; | |
import com.facebook.react.ReactNativeHost; | |
import com.facebook.react.ReactPackage; | |
import com.facebook.react.shell.MainReactPackage; | |
import com.i18n.reactnativei18n.ReactNativeI18n; |
[based on a true story]
So. Your friend's about to teach you how to make a website. Great!
You make a file, and you save it as 'index.html'. Why it's called 'index' isn't really explained to you, but whatever.
You type the following.
hello world
Many of us building single-page apps today use JavaScript module bundling tools that trend towards a monolithic "bundle.js" file including the full app and vendor code for multiple routes. This means if a user lands on any arbitrary route they need to wait for a large bundle of JS to be fetched, parsed and executed before the application is fully rendered and interactive.
This is a little backwards, especially when apps are used under real-world network (3G) and device
// getComponent is a function that returns a promise for a component | |
// It will not be called until the first mount | |
function asyncComponent(getComponent) { | |
return class AsyncComponent extends React.Component { | |
static Component = null; | |
state = { Component: AsyncComponent.Component }; | |
componentWillMount() { | |
if (!this.state.Component) { | |
getComponent().then(Component => { |
Earlier this year Facebook open sourced its React based rich text editing framework Draft.js. At Facebook it powers status updates, comments & notes. Others used it to build editors matching Medium’s experience.
Together with a whole team of open source contributors I built a plugin architecture on top of Draft.js. In this talk I walk you through the existing plugins and show how you can build your own feature-rich text editor for the web with only a handful lines of code. 🤓
Proposal for this year's Reactive lightning talks @ReactiveConf - If you want to see my talk, star this gist please :-) [Reactive Blogpost][reactive-conference-blogpost]
As a JavaScript developer, could you imagine using something else than Atom, Sublime or other IDE-like text-editors? During their daily work, people wrangle a lot with different applications, editors, windows, browsers and loose a lot of time because of their tools getting in their way.
I recently had several days of extremely frustrating experiences with service workers. Here are a few things I've since learned which would have made my life much easier but which isn't particularly obvious from most of the blog posts and videos I've seen.
I'll add to this list over time – suggested additions welcome in the comments or via twitter.com/rich_harris.
Chrome 51 has some pretty wild behaviour related to console.log
in service workers. Canary doesn't, and it has a load of really good service worker related stuff in devtools.
//////////////////////////////////////////////////////////////////////// | |
// Intro | |
/////////////////////// | |
// Tools like Redux-saga, React-redux and Reselect can easily be used without Redux | |
// For Reselet there's nothing to do, it's just not coupled to Redux | |
// For the others, you just need to provide an adapter | |
// At Stample.co we use a legacy framework that is quite close to Redux but with a bad API | |
// We want to progressively migrate to Redux, so starting now to use Redux tools on new features will make our migration faster |
/** | |
* Registers the given callback to be called in the node.js callback | |
* style, with error as the first argument, when the promise resolves. | |
* | |
* Also, returns a function that may be used to prevent the callback | |
* from ever being called. Calling the returned function is synonymous | |
* with saying "I no longer care about the resolution of this promise, | |
* even if it fails." | |
* | |
* Since there is no provision in the promise spec for cancel/abort |
# Put this in your .zshrc or .bashrc file | |
# Install `tree` first — brew install tree | |
function t() { | |
# Defaults to 3 levels deep, do more with `t 5` or `t 1` | |
# pass additional args after | |
tree -I '.git|node_modules|bower_components|.DS_Store' --dirsfirst --filelimit 15 -L ${1:-3} -aC $2 | |
} |