Videos about Front-end
Node Summit 2017 - PLATFORM AS A REFLECTION OF VALUES: JOYENT, NODE.JS, AND BEYOND - Bryan Cantrill
To be seen
Rust, WebAssembly, and the future of Serverless by Steve Klabnik
- edge computing: servers near its customers
- Rust and web assembly
- Fastly
Building WebGPU with Rust The new foundation for graphics and compute
The Birth & Death of JavaScript
The Science of Great UI
To be seen
CSS Grid Changes EVERYTHING - Amazing Presentation
some examples of how to use it, looks intersting.
React
React 16.6 - What's New? Theory + Practice
Context: main.js
export const AuthContext = React.createContext({
isAuth: false,
toggleAuth: () => {}
});
class App extends Component {
state = {
isAuth: false
};
toggleAuth = () => {
this.setState(prevState => {
return {
isAuth: !prevState.isAuth
};
});
};
render() {
return (
<AuthContext.Provider
value={{ isAuth: this.state.isAuth, toggleAuth: this.toggleAuth }}
>
<Login />
<Profile />
</AuthContext.Provider>
);
}
}
using context
const login = props => (
<AuthContext.Consumer>
{authContext => {
return (
<button onClick={authContext.toggleAuth}>
{authContext.isAuth ? 'Logout' : 'Login'}
</button>
);
}}
</AuthContext.Consumer>
);
Memo
const login = props => {
console.log(props);
return (
<React.Fragment>
<button onClick={props.onLogout}>Logout</button>
<button onClick={props.onLogin}>Login</button>
</React.Fragment>
);
};
// export default React.memo(login);
Lazy load
const Posts = React.lazy(() => import('./containers/Posts'));
class App extends Component {
state = { showPosts: false };
modeHandler = () => {
this.setState(prevState => {
return { showPosts: !prevState.showPosts };
});
};
render() {
return (
<React.Fragment>
<button onClick={this.modeHandler}>Toggle Mode</button>
{this.state.showPosts ? (
<Suspense fallback={<div>Loading...</div>}>
<Posts />
</Suspense>
) : (
<User />
)}
</React.Fragment>
// <BrowserRouter>
// <React.Fragment>
// <nav>
// <NavLink to="/user">User Page</NavLink> |
// <NavLink to="/posts">Posts Page</NavLink>
// </nav>
// <Route path="/" component={Welcome} exact />
// <Route path="/user" component={User} />
// <Route
// path="/posts"
// render={() => (
// <Suspense fallback={<div>Loading...</div>}>
// <Posts />
// </Suspense>
// )}
// />
// </React.Fragment>
// </BrowserRouter>
);
}
}
Heres how React's New Context API Works
Source code:
- https://github.com/wesbos/React-Context/tree/master/src
Building The New Facebook With React and Relay | Ashley Watkins
How facebook works with react and preloading, they are using Graphql with Relay
they are using React.Suspense as a loading container, while the content is loading we can show a loading container:
<React.Suspense
fallback={<MyPlaceHolder/>}
>
<Post>
<Header></Header>
<Content></Content>
</Post>
</React.Suspense>
React and the Music Industry | Jameyel "J. Dash" Johnson"
Using Hooks and Codegen | Tejas Kumar
Data Fetching With Suspense In Relay | Joe Savona
Building a Custom React Renderer | Sophie Alpert
Simple implementation of React dom, a interesting fact is that the main library has less then 100 lines.
90% Cleaner React With Hooks - Ryan Florence - React Conf 2018
He is showing how to use HOCs to make the code simpler and the reducer HOC
const initialState = {count: 0};
function reducer(state, action) {
switch (action.type) {
case 'increment':
return {count: state.count + 1};
case 'decrement':
return {count: state.count - 1};
default:
throw new Error();
}
}
function Counter() {
const [state, dispatch] = useReducer(reducer, initialState);
return (
<>
Count: {state.count}
<button onClick={() => dispatch({type: 'decrement'})}>-</button>
<button onClick={() => dispatch({type: 'increment'})}>+</button>
</>
);
}
Angular videos
These ARE the Angular tips you are looking for | John Papa
multiple unsubscribes with SbSink, but as a dependencie....
subs = new SbSink()
subs.add(observable)
subs.add(observable)
subs.unsubscribe()
and more about the JAMstack