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

 1export const AuthContext = React.createContext({
 2  isAuth: false,
 3  toggleAuth: () => {}
 4});
 5
 6class App extends Component {
 7  state = {
 8    isAuth: false
 9  };
10
11  toggleAuth = () => {
12    this.setState(prevState => {
13      return {
14        isAuth: !prevState.isAuth
15      };
16    });
17  };
18
19  render() {
20    return (
21      <AuthContext.Provider
22        value={{ isAuth: this.state.isAuth, toggleAuth: this.toggleAuth }}
23      >
24        <Login />
25        <Profile />
26      </AuthContext.Provider>
27    );
28  }
29}

using context

 1const login = props => (
 2  <AuthContext.Consumer>
 3    {authContext => {
 4      return (
 5        <button onClick={authContext.toggleAuth}>
 6          {authContext.isAuth ? 'Logout' : 'Login'}
 7        </button>
 8      );
 9    }}
10  </AuthContext.Consumer>
11);

> Memo

 1const login = props => {
 2  console.log(props);
 3  return (
 4    <React.Fragment>
 5      <button onClick={props.onLogout}>Logout</button>
 6      <button onClick={props.onLogin}>Login</button>
 7    </React.Fragment>
 8  );
 9};
10
11// export default React.memo(login);

> Lazy load

 1const Posts = React.lazy(() => import('./containers/Posts'));
 2
 3class App extends Component {
 4  state = { showPosts: false };
 5
 6  modeHandler = () => {
 7    this.setState(prevState => {
 8      return { showPosts: !prevState.showPosts };
 9    });
10  };
11
12  render() {
13    return (
14      <React.Fragment>
15        <button onClick={this.modeHandler}>Toggle Mode</button>
16        {this.state.showPosts ? (
17          <Suspense fallback={<div>Loading...</div>}>
18            <Posts />
19          </Suspense>
20        ) : (
21          <User />
22        )}
23      </React.Fragment>
24      // <BrowserRouter>
25      //   <React.Fragment>
26      //     <nav>
27      //       <NavLink to="/user">User Page</NavLink> |&nbsp;
28      //       <NavLink to="/posts">Posts Page</NavLink>
29      //     </nav>
30      //     <Route path="/" component={Welcome} exact />
31      //     <Route path="/user" component={User} />
32      //     <Route
33      //       path="/posts"
34      //       render={() => (
35      //         <Suspense fallback={<div>Loading...</div>}>
36      //           <Posts />
37      //         </Suspense>
38      //       )}
39      //     />
40      //   </React.Fragment>
41      // </BrowserRouter>
42    );
43  }
44}

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:

1<React.Suspense
2fallback={<MyPlaceHolder/>}
3>
4    <Post>
5        <Header></Header>
6        <Content></Content>
7    </Post>
8</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

 1const initialState = {count: 0};
 2
 3function reducer(state, action) {
 4  switch (action.type) {
 5    case 'increment':
 6      return {count: state.count + 1};
 7    case 'decrement':
 8      return {count: state.count - 1};
 9    default:
10      throw new Error();
11  }
12}
13
14function Counter() {
15  const [state, dispatch] = useReducer(reducer, initialState);
16  return (
17    <>
18      Count: {state.count}
19      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
20      <button onClick={() => dispatch({type: 'increment'})}>+</button>
21    </>
22  );
23}

Angular videos

These ARE the Angular tips you are looking for | John Papa

multiple unsubscribes with SbSink, but as a dependencie....

1subs = new SbSink()
2subs.add(observable)
3subs.add(observable)
4subs.unsubscribe()

and more about the JAMstack

🌈 Videos about Front-end