my outputs from uki: August 2017

Wednesday, August 16, 2017

Attituded

I am the master of my own thoughts............

My mind will obey only me..............

Negotiation is a dialogue between two or more people or parties intended to reach a beneficial outcome over one or more issues where a conflict exists with respect to at least one of these issues. This beneficial outcome can be for all of the parties involved, or just for one or some of them.

In order to achieve a desirable outcome, it may be useful to follow a structured approach to negotiation. For example, in a work situation a meeting may need to be arranged in which all parties involved can come together.

The process of negotiation includes the following stages:

Preparation
Discussion
Clarification of goals
Negotiate towards a Win-Win outcome
Agreement
Implementation of a course of action

Stages of Negotiation

The process of negotiation includes the following stages:

Preparation
Discussion
Clarification of goals
Negotiate towards a Win-Win outcome
Agreement
Implementation of a course of action

How can you improve your negotiation skills?

Show Up On Time. ...
Perfect the Handshake. ...
Negotiate with the Right People. ...
Maintain Friendly Eye Contact. ...
Be Aware of Your Facial Expressions. ...
Maintain Personal Space.

Britich councle summarize

How do you write summary

Do not rewrite the original piece.
Keep your summary short.
Use your own wording.
Refer to the central and main ideas of the original piece.
Read with who, what, when, where, why and how questions in mind.
Do not put in your opinion of the issue or topic discussed in the original piece.

how do you write summary paragraph

To summarize, you must read a passage closely, finding the main ideas and supporting ideas. Then you must briefly write down those ideas in a few sentences or a paragraph. It is important to understand the difference between a summary and a paraphrase. A paraphrase is simply a rewriting of a passage in your own words.

Tuesday, August 15, 2017

Express

💥Express is a minimal and flexible Node.js web application framework that provides a robust set of features to develop web and mobile applications. It facilitates the rapid development of Node based Web applications.

💥Following are some of the core features of Express framework −

Allows to set up middle wares to respond to HTTP Requests.
Defines a routing table which is used to perform different actions based on HTTP Method and URL.
Allows to dynamically render HTML Pages based on passing arguments to templates.

💥Install the Express framework globally using NPM so that it can be used to create a web application using node terminal.
npm install express --save
💥we should install the following important modules along with express
body-parser − This is a node.js middleware for handling JSON, Raw, Text and URL encoded form data.
npm install body-parser --save
cookie-parser − Parse Cookie header and populate req.cookies with an object keyed by the cookie names.
npm install cookie-parser --save
multer − This is a node.js middleware for handling multipart/form-data.
npm install multer --save

💥Request & Response

              Express application uses a callback function whose parameters are request and response objects.

          app.get('/',function()
                 {

                  })

Request Object − The request object represents the HTTP request and has properties for the request query string, parameters, body, HTTP headers.
Response Object − The response object represents the HTTP response that an Express app sends when it gets an HTTP request.

Scrum

💥The ability to create and respond to change in order to succeed in an uncertain and turbulent environment. Agile is a time boxed, iterative approach to software delivery that builds software incrementally from the start of the project, instead of trying to deliver it all at once near the end.
The Agile movement seeks alternatives to traditional project management. Agile approaches help teams respond to unpredictability through incremental, iterative work cadences and empirical feedback. Agilists propose alternatives to waterfall, or traditional sequential development.

💥The Four Agile Manifesto Values are:

Individuals & Interactions over processes and tools
Working Software over Comprehensive Documentation
Customer collaboration over contract negotiation
Responding to Change over following a plan

💥Agile Principles are:

Satisfy the customer.
Welcome changing requirements.
Face-to-face meetings are the most effective way to convey information
Working software is the primary measure of progress
Continuous attention to technical excellence and good design enhances agility
Simplicity is essential
Let the team reflect on how to do better at regular intervals and adjust behavior accordingly

💥Scrum is a framework for managing software development. Scrum is designed for teams of 3 to 9 developers who break their work into two-week cycles, called "sprints", check progress daily in 15-minute stand-up meetings, and deliver workable software at the end of every sprint.Approaches to coordinating the work of multiple scrum teams in larger organizations include Large-Scale Scrum and Scrum of Scrums.Scrum is part of the Agile movement.

💥What is Daily Stand-up?

A daily stand-up is a daily status meeting among all team members and it is held roughly for 15 minutes.
Every member has to answer three important questions −
- What I did yesterday?
- What I'll do today?
- Any impediment I am facing.../ I am blocked due to...
Daily stand-up is for status update, not for any discussion. For discussion, team members should schedule another meeting at a different time.
Participants usually stand instead of sitting so that the meeting gets over quickly.

💥Scrum has three roles: Product Owner, Scrum Master, and Team.

👸Scrum Master

A Scrum Master is a team leader and facilitator who helps the team members to follow agile practices so that they can meet their commitments. The responsibilities of a scrum master are as follows −

To enable close co-operation between all roles and functions.
To remove any blocks.
To shield the team from any disturbances.
To work with the organization to track the progress and processes of the company.
To ensure that Agile Inspect & Adapt processes are leveraged properly which includes
- Daily stand-ups,
- Planned meetings,
- Demo,
- Review,
- Retrospective Meetings, and
- To facilitate team meetings and decision-making process.

👸Product owner

The product owner is commonly a lead user of the system or someone from marketing, product management or anyone with a solid understanding of users, the market place, the competition and of future trends for the domain or type of system being developed.communication is a large part of the product owner responsibilities. The product owner role requires working closely with key stakeholders throughout the organization and beyond, so he or she must be able to communicate different messages to different people about the project at any given time.

👸Team
According to Scrum’s founder, “the team is utterly self managing.” The development team is responsible for self organizing to complete work. For software projects, a typical team includes a mix of software engineers, architects, programmers, analysts, QA experts, testers, and UI designers. Each sprint, the team is responsible for determining how it will accomplish the work to be completed. The team has autonomy and responsibility to meet the goals of the sprint.

Monday, August 14, 2017

Gannt Chart

A Gantt Chart is a timeline that is used as a project management tool to illustrate how the project will run. we can view individual tasks, their durations and the sequencing of these tasks. View the overall timeline of the project and the expected completion date.
It is useful for planning and scheduling projects. It helps we assess how long a project should take, determine the resources needed, and plan the order in which we'll complete tasks. It is also helpful for managing the dependencies between tasks.

Authentication in React Applications

    💥we have built the initial application with presentational and container components for the sign-up form, the login form, and the home component.

    💥we need to add new dependencies

   👸 bcrypt is a package with the bcrypt algorithm implementation for hashing passwords
👸 jsonwebtoken is an implementation of JSON Web Token standard
👸 mongoose is a MongoDB ORM library
👸 passport is a flexible authentication library
👸 passport-local is a Passport strategy for authenticating with an email and a password

    💥We can install these packages by typing:

npm install --save bcrypt jsonwebtoken mongoose passport-local

💥The application will have the next directory structure

💥 Index.js file

const express = require('express');
const bodyParser = require('body-parser');
const passport = require('passport');
const config = require('./config');

// connect to the database and load models
require('./server/models').connect(config.dbUri);

const app = express();
// tell the app to look for static files in these directories
app.use(express.static('./server/static/'));
app.use(express.static('./client/dist/'));
// tell the app to parse HTTP body messages
app.use(bodyParser.urlencoded({ extended: false }));
// pass the passport middleware
app.use(passport.initialize());

// load passport strategies
const localSignupStrategy = require('./server/passport/local-signup');
const localLoginStrategy = require('./server/passport/local-login');
passport.use('local-signup', localSignupStrategy);
passport.use('local-login', localLoginStrategy);

// pass the authenticaion checker middleware
const authCheckMiddleware = require('./server/middleware/auth-check');
app.use('/api', authCheckMiddleware);

// routes
const authRoutes = require('./server/routes/auth');
const apiRoutes = require('./server/routes/api');
app.use('/auth', authRoutes);
app.use('/api', apiRoutes);

// start the server
app.listen(3000, () => {
console.log('Server is running on http://localhost:3000 or http://127.0.0.1:3000');
});

The property jwtSecret of the config object contains a secret phrase our application will use to sign tokens.

config/index.json

{

"dbUrl": "mongodb://localhost/react_app",

"jwtSecret": "a secret phrase! !"

}

💥The bcrypt module will generate a hash from a generated earlier salt string and a user’s password. This hash instead of a user’s password will be saved in the collection.

user.password = hash;

💥The basic logic here is to check if a user with a given email exists. If so, we will compare the given password’s hash value with a value saved in the database. If the user exists and the password is correct, we will create a JSON Web Token (JWT).

The token looks similar to this:

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.

eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiYWRtaW4iOnRydWV9.

TJVA95OrM7E2cBab30RMHrHDcEfxjoYZgeFONFh7HgQ

Sunday, August 13, 2017

Tic-tac-toe

If you want to do Tic-tac-toe, here are the steps to follow:

     😛Make sure you have a recent version of node js installed.
     😝Follow the installation instructions to create a new project.
             👉 npm install -g create-react-app
             create-react-app my-app

                 cd my-app
                 npm start

😝Delete all files in the src/ folder of the new project.
😝 Add a file named index.css in the src/folder with css code.

👉 body {
font: 14px "Century Gothic", Futura, sans-serif;
margin: 20px;
}

ol, ul {
padding-left: 30px;
}

.board-row:after {
clear: both;
content: "";
display: table;
}

.status {
margin-bottom: 10px;
}

.square {
background: #fff;
border: 1px solid #999;
float: left;
font-size: 24px;
font-weight: bold;
line-height: 34px;
height: 34px;
margin-right: -1px;
margin-top: -1px;
padding: 0;
text-align: center;
width: 34px;
}

.square:focus {
outline: none;
}

.kbd-navigation .square:focus {
background: #ddd;
}

.game {
display: flex;
flex-direction: row;
}

.game-info {
margin-left: 20px;
}

😜Add a file named index.js in the src/ folder with Js code.

👉

import React from 'react';

      import ReactDOM from 'react-dom';
      import './index.css';

      class Square extends React.Component {
render() {
    return (
      <button className="square">
        {/* TODO */}
      </button>
    );
}
}

class Board extends React.Component {
renderSquare(i) {
    return <Square />;
}

render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
}
}

class Game extends React.Component {
render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
}
}

ReactDOM.render(
<Game />,
document.getElementById('root')
);

😝In particular, we have three components:

Square
Board
Game

The Square component renders a single <button>, the Board renders 9 squares, and the Game component renders a board with some placeholders that we'll fill in later. None of the components are interactive at this point.

😝passing some data from the Board component to the Square component.

   👉class Square extends React.Component {
render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
}
}

class Board extends React.Component {
renderSquare(i) {
    return <Square value={i} />;
}

render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
}
}

class Game extends React.Component {
render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{/* status */}</div>
          <ol>{/* TODO */}</ol>
        </div>
      </div>
    );
}
}

ReactDOM.render(
<Game />,
document.getElementById('root')
);

😝Declaring a Winner

when a game is won. Add this helper function

👉function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];

if (squares[a] && squares[a] === squares[b] && squares[a] ===

squares[c]) {
      return squares[a];
    }
  }
  return null;
}

😝If you want any changes in this game. you only change in index.js file.

final index.js code.

   👉 import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';

function Square(props) {
return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
);
}

class Board extends React.Component {
renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}
        onClick={() => this.props.onClick(i)}
      />
    );
}

render() {
    return (
      <div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}

        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}

        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}

        </div>
      </div>
    );
}
}

class Game extends React.Component {
constructor() {
    super();
    this.state = {
      history: [{
        squares: Array(9).fill(null)
      }],
      xIsNext: true
    };
}

handleClick(i) {
    const history = this.state.history;
    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      history: history.concat([{
        squares: squares
      }]),
      xIsNext: !this.state.xIsNext,
    });
}

render() {
    const history = this.state.history;
    const current = history[history.length - 1];
    const winner = calculateWinner(current.squares);

    const moves = history.map((step, move) => {
      const desc = move ?
        'Move #' + move :
        'Game start';
      return (
        <li>
          <a href="#" onClick={() => this.jumpTo(move)}>{desc}</a>
        </li>
      );
    });

    let status;
    if (winner) {
      status = 'Winner: ' + winner;
    } else {
      status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={(i) => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>
        </div>
      </div>
    );
}
}

ReactDOM.render(
<Game />,
document.getElementById('root')
);

function calculateWinner(squares) {
const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
];
for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
}
return null;
}

my outputs from uki