janusha

Thursday, October 12, 2017

HTML introduction

HTML stands for Hyper Text Markup Language.

HTML describes the structure of web page using markup.

HTML elements are the building blocks of HTML pages.

HTML elements are represented by tags.

HTML tags label pieces of content such as "heading", "paragraph", "table".

<!DOCTYPE html>

This document to be HTML5(2014)

<html>

The root element of an HTML page.

<head>

Contains meta information about the document.

<title>

Specifies a title for the document.

<body>

Contains the visible page content.

<h1>

Defines a large heading.

Defines a paragraph.

Opening tag

Closing tag

</tag name>

Contents are written between opening tag and closing tag.

<!DOCTYPE>

Represents the document type.

<!DOCTYPE> declaration is not case sensitive.

HTML headings

HTML headings are defined with the <h1> to <h6> tags.

<h1> defines the most important heading(biggest heading).

<h6> defines the least important heading(smallest heading).

HTML links

HTML links are defined with the <a> tag.

The links destination is specified in the href attribute.

Example: <a href="http://janusha997.blogspot.com/">This is a link</a>

HTML images

HTML images are defined with the <img> tag.

The source file(src), alternative text(alt), width and height are provided as attributes.

Attributes means additional information about HTML elements.

Example: <img src=" " alt=" " width=" " height=" ">

Monday, October 2, 2017

Languages

Front end languages : HTML,CSS,Javascript.

Libraries

1. jquery : jquery is a front-end javascript library.
2.Bootstrap : It is a structured library for front-end development.

Frameworks

1. Reactjs : It is a front-end framework.
2.nodejs : It is a back-end framework.

Database : MongoDB(syntax is in javascript-json) .

Deployment : heroku.

Back end languages : php,Javascript(Json),Java.

Json is store and move data between server and browser.

Sunday, August 20, 2017

💥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.

Monday, August 14, 2017

Heroku and mLab

Deployment Steps For Heroku & mLab

Signup for Heroku
Signup for mLab
Create DB notable in mLab
Add user in mLab
Update DB url in node server

mongodb://<dbuser>:<dbpassword>@ds149122.mlab.com:49122/notable

6. Test notable app

7. Install Heroku - refer doc https://docs.google.com/document/d/1McXVRadb18VPX7LMQa2OZkZYphbtiF4P2Jxz6PuLqkI/edit?usp=sharing

8. Add (specify version of node) to package.json

"engines": {

"node": "6.10.1"

}

9. Add Procfile to root

web: node server.js

10. Edit /client from notes_routes.js to app.get('/',function(req, res) {

11. Make Common Base URL on script1.js and script2.js

var getUrl = window.location;

var baseUrl = getUrl .protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];

console.log(baseUrl);

Add baseUrl instead of “http://localhost:8000” for all 4 CRUD methods.

11. Add .gitignore file to root

/node_modules
npm-debug.log
.DS_Store
/*.env

12. Change Port on server.js

const port = process.env.PORT || 8000;

10. Build and run locally

npm install

heroku local web

12. Deploy your application to Heroku

git add .

git commit -m "first commit"

heroku login

Enter your Heroku credentials.
...

heroku create ukifunwork2byname

git push heroku master

Optional (if above fails)- Add heroku git remote

heroku git:remote -a yourapp

And retry git push heroku master

heroku open

For Logging

heroku logs --tail

Tic-Tac-Toe

TIC-TAC-TOE

💕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')
);

Tic-Tac-Toe

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;
}

Heroku

Heroku

💙Heroku is a cloud platform as a service supporting several programming languages that is used as a web application deployment model.

1.How to use Heroku

Download the Heroku Toolbelt.
Login: heroku login.
Add your public key: heroku keys:add.
Pull down your current application heroku git:clone -a app-name.
Make your improvements.
Git add and commit your changes.
Push back to heroku: git push heroku master.

2.Advantages in Heroku

Heroku is easy to get started.

Heroku is the cheapest option for a low traffic site

we don't have to add our credit card for payment at early stage.

They offer no of Dyno for upgrade and downgrade app instance

Database integration is pretty simple with PostgreSQL

3.Disadvantages in Heroku

we have to pay very high, once we decide to handle more traffic.

we have to manually scale our application on hight traffic.

we can't login to your server via SSH(Secure Remote Login & File Transfer)

4.What is SSH protocol?

The protocol is used in corporate networks for:

providing secure access for users and automated processes
interactive and automated file transfers
issuing remote commands
managing network infrastructure and other mission-critical system components.