top 10 sites for learning programming for free in 2019

GAUTAM SHARMA

@gauti123456

@geekygautam1997

🌍 YOUTUBER & CODINGSHIKSHA.COM

👨‍💻 WEB DEVELOPER

📍India

observables is fun

standard event handling

observables are correct way to handle events in angular

Text

top css frameworks for developers

top css frameworks for developers

what is observable?

stream of asynchronous data from server

publisher in observable

publishers send out events in program

subscriber or observers?

notification is sent out from observable to observer.

subscription is necessary!!

observable

observer

subscription

METHODS OF SUBSCRIPTION

DATA

ERROR

NEW DATA

IS AVAILABLE

next() method will be invoked

ANY ERROR

OCCURED

error() method

will be invoked

E

N

D

onComplete() method

will be invoked

DATA

defining a observable

// Create simple observable that emits three values
const myObservable = of(1, 2, 3);
 
// Create observer object
const myObserver = {
  next: x => console.log('Observer got a next value: ' + x),
  error: err => console.error('Observer got an error: ' + err),
  complete: () => console.log('Observer got a complete notification'),
};
 
// Execute with the observer object
myObservable.subscribe(myObserver);
// Logs:
// Observer got a next value: 1
// Observer got a next value: 2
// Observer got a next value: 3
// Observer got a complete notification

positional arguments

myObservable.subscribe(
  x => console.log('Observer got a next value: ' + x),
  err => console.error('Observer got an error: ' + err),
  () => console.log('Observer got a complete notification')
);

WHAT IS rxjs?

RXJS

Reactive Extensions for

Javascript

Simplifies creation of

Observables

Can be easily configured with

Angular

fetch OBSERVABLES WITH RXJS

import { from } from 'rxjs';

// Create an Observable out of a promise
const data = from(fetch('/api/endpoint'));
// Subscribe to begin listening for async result
data.subscribe({
 next(response) { console.log(response); },
 error(err) { console.error('Error: ' + err); },
 complete() { console.log('Completed'); }
});

importing from method in rxjs

this is the subscribe method of

the observable method

interval OBSERVABLES WITH Rxjs

import { interval } from 'rxjs';

// Create an Observable that will publish a value on an interval
const secondsCounter = interval(1000);
// Subscribe to begin publishing values
secondsCounter.subscribe(n =>
  console.log(`It's been ${n} seconds since subscribing!`));

importing interval method in rxjs

this is the subscribe method of

the observable method

create OBSERVABLES WITH event

import { fromEvent } from 'rxjs';

const el = document.getElementById('my-element');

// Create an Observable that will publish mouse movements
const mouseMoves = fromEvent(el, 'mousemove');

// Subscribe to start listening for mouse-move events
const subscription = mouseMoves.subscribe((evt: MouseEvent) => {
  // Log coords of mouse movements
  console.log(`Coords: ${evt.clientX} X ${evt.clientY}`);

  // When the mouse is over the upper-left of the screen,
  // unsubscribe to stop listening for mouse movements
  if (evt.clientX < 40 && evt.clientY < 40) {
    subscription.unsubscribe();
  }
});

importing fromEvent method in rxjs

this is the subscribe method of

the observable method

create OBSERVABLES with ajax

import { ajax } from 'rxjs/ajax';

// Create an Observable that will create an AJAX request
const apiData = ajax('/api/data');
// Subscribe to create the request
apiData.subscribe(res => console.log(res.status, res.response));

importing ajax method in rxjs

this is the subscribe method of

the observable method

map operator in observables

import { map } from 'rxjs/operators';

const nums = of(1, 2, 3);

const squareValues = map((val: number) => val * val);
const squaredNums = squareValues(nums);

squaredNums.subscribe(x => console.log(x));

// Logs
// 1
// 4
// 9

importing map operator

from rxjs

this is the subscribe method of

the observable method

pipe operator in observables

import { filter, map } from 'rxjs/operators';

const squareOdd = of(1, 2, 3, 4, 5)
  .pipe(
    filter(n => n % 2 !== 0),
    map(n => n * n)
  );

// Subscribe to get values
squareOdd.subscribe(x => console.log(x));

importing pipe operator

from rxjs

this is the subscribe method of

the observable method

error handling in observables

import { ajax } from 'rxjs/ajax';
import { map, catchError } from 'rxjs/operators';
// Return "response" from the API. If an error happens,
// return an empty array.
const apiData = ajax('/api/data').pipe(
  map(res => {
    if (!res.response) {
      throw new Error('Value expected!');
    }
    return res.response;
  }),
  catchError(err => of([]))
);

apiData.subscribe({
  next(x) { console.log('data: ', x); },
  error(err) { console.log('errors already caught... will not run'); }
});

importing methods

from rxjs

this is the subscribe method of

the observable method

thanks very much for watching

please subscribe! 🖖

Copy of Making your Vue apps faster by being lazy

By Coding Shiksha

Copy of Making your Vue apps faster by being lazy

We keep shipping more and more features in our Web applications, and as a result, we ship heavier apps that take more time to load. So we use bundlers like webpack to split our application code into multiple bundles and load them asynchronously. As a result, we end up having asynchronous code pretty much everywhere in our apps. This means that we need to handle unexpected errors that were otherwise impossible, like network ones, handle loading state and make sure the application is able to recover from these errors. During this talk, we will take a look at different patterns about handling asynchronous request correctly in Vue applications in order to make our Apps feel light, fast and reliable everywhere.

212

Coding Shiksha