geetotes

1. Create new XHRequest Object: var client = new XMLHttpRequest();
2. Assign handler to onreadystatechange event: client.onreadystatechange = handler;
3. This handler with normally check for a readyState of 4 and a status of 200

function handler() {
if(this.readyState == 4 && this.status == 200) {
// so far so good
if(this.responseXML != null && this.responseXML.getElementById('test').firstChild.data)

geetotes

Compositing: how a browser combines layers created in the CPU and the GPU

• In normal situations, browser will do the initial paint with CPU, then it will send it to GPU for display
• When there is an animation, each frame is recaluclated by the CPU and sent to the GPU for rendering. Only the part of the page that is animated is redrawn
• GPU composing is when the GPU draws two layers in the animation and offsets them from another, compositing the two layers.

In order for a CSS property in a web animation to take advantage of compositing:

• It must not depend on or affect the document's flow
• It must not cause a repaint

For example, use transform over left when animating properties, since transform meets the conditions above

geetotes

#!/bin/bash

 ffmpeg -i export.mp4 -c:v libx264 -crf 22 -preset:v veryfast -ac 2 -c:a aac -vbr 3 output.mp4

geetotes

server {

        root /var/www/status.icu;
        index index.html;
        server_name status.icu;
        location / {
                try_files $uri $uri/ =500;
        }

        location ~ /200  {

geetotes

class SignUpForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: null,
      username: null,
      errorMessages: { // This is new -- if we don't set these defaults, render() will thrown an error
        email: [],
        username: []
      }

geetotes

  render() {
    return(
      <form>
        Usernane: <input type='text' name='username' value={this.state.username} onChange={this._change} />
        <div className='error'>{this.state.errorMessages.username.join('. ')}</div>
        Email: <input type='email' name='email' value={this.state.email} onChange={this._change} />
        <div className='error'>{this.state.errorMessages.email.join('. ')}</div>
        <button onClick={this._validate}>Submit</button>
      </form>
    );

geetotes

_validate() {
  let valid = true;
  let { username, email } = this,state;
  let errorMessages = {
    username: [],
    email: []
  };
  
  // Null is the default value for the username attribute,
  // as declared in the constructor

geetotes

class SignUpForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: null,
      username: null,
    };
    
    this._change = this._change.bind(this);
    this._validate = this._validate.bind(this);

geetotes

class BasicWizard extends React.Component {
  /*
  snip...
  */
 _next(data) {
   // data is the user input from the form
   // it could be saved here in state or POSTed to an API, for example
   // after that is done, we'll move currentStep forward
   
   // look familiar?

geetotes

class Step1 extends React.Component {
 render() {
   if (this.props.currentStep !== 1) {
     return null;
   } 
   return(
     <p>This is step 1</p>
  );
}