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

[
{"name":"Alabama","alpha-2":"AL"},
{"name":"Alaska","alpha-2":"AK"},
{"name":"Arizona","alpha-2":"AZ"},
{"name":"Arkansas","alpha-2":"AR"},
{"name":"California","alpha-2":"CA"},
{"name":"Colorado","alpha-2":"CO"},
{"name":"Connecticut","alpha-2":"CT"},
{"name":"Delaware","alpha-2":"DE"},
{"name":"District of Columbia","alpha-2":"DC"},

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

import React from 'react';
import { connect } from 'react-redux';

class PrettyLoader extends React.Component {
  _show() {
    // Don't forget that loading can be any data type you want!
    if (this.props.loading === true) {
      return (
        <div className="loading">
          <img src="crazyLoading.gif" />

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

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 PrettyLoader extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    };
    this.setLoading = this.setLoading.bind(this);
  }
  
  componentDidMount() {