Notes

ctrl k + ctrl F(Indent the code)

youtube ->share-> embeded ->copy paste the link
Videos directly come on the screen




3 types of styling using css
inline-direct to html tag
internal-inside html page
external-in a file

different ways of styling

1.styling for tag
tag_name{


}


2.styleing for id
#id_name{


}


3.Using class
.class_name{

}



margin is given to all 4 sides
different units of margin
32px;//behaves differently for different resolutions
2em;//element where 1em = 16 bits
2%;//percentage of the width, different for diff devices
2cm;//same prob as above, always 2cm


to apply style to only certain tags such as <a>
write the following code based on the parent

.navbar .navbar-item a{
text-decoration: none;
}







Javascript
1.Document object will have the HTML code
2.All values are stored as strings hence they have to be converted to int or float


debug tool
console
sourse->select js code and edit the code as reqd




responsive nav bar
set width to 100%
overflow : hidden(do not overflow, hide it)
float: left(brings all list item on the same line on left side)
float:right(brings all list item on the same line on right side)
display: block(add extra spaces to nav bar)

nav ul li.nav-right{ //if items on same level no space between items, here li and nav-right is on the same level
float:right;
}


nav ul li a:hover{ // when v hover over a tag

}

add a breakpoint to set the min width of screen to get the responsiveness
@media screen and (max-width: 680px){
//here applicable only if width is less than 680px, here we need to hide all buttons and show only the trigram symbol
}


@media screen and (max-width: 680px){
nav ul li:not(:nth-child(1)){ //do not apply the property on first child
display: none;
}
}


@media screen and (max-width: 680px){
nav ul li:not(:nth-child(1)){
display: none;
}
nav ul li.dropdownIcon{ //brings the triagram
display: block;
float: right; // brings it to right side
}
}


anchor tag removes bullets in list items











BOOTSTRAP

3 main components
container
row
column



col-12
col-sm-(small viewport take all 12 cols)
col-md-(medium viewport take all 12 cols)




image responsive (use class img-fluid)
to take the whole screen after screen is resized col-md-8(full size after md display is crossed)





web server for chrome----->>>extension
the first page should be index.html
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
1)http
2)client ex-android device, ios, desktop
3)server-renders web page/content to client
4)Database is attached to server
5)Client sends req to server to access DB, server sends back response to client
->response is very specific to the client
->diff for diff devices

http->response is always in text hence hyper "text" transfer protocol

http methods
1.GET (only server to client)
2.POST (client to server and data from server to client)
3.PUT (client to server info is sent, no info from server back to the client)



download and install node.js
chrome extension install postman interceptor extension on chrome

install mongoDB(complete installation, set path to c:/data/db)

node.js can run javascript outside the browser in powershell
all JS expressions are valid

in powershell
type "node" to go into node shell



create a js file
write the commands and after the node if v provide file name as an argument v can run it


JSON-java script object notation



PS C:UsersRakshith> node --version
v8.11.3
PS C:UsersRakshith> cd Desktop
PS C:UsersRakshithDesktop> cd internship1
PS C:UsersRakshithDesktopinternship1> cd node_intro
PS C:UsersRakshithDesktopinternship1node_intro> npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (node_intro) my-first-api
version: (1.0.0)
description: This is the first REST API i am creating
entry point: (index.js) server.js
test command:
git repository:
keywords:
author: Rakshith Kakathkar
license: (ISC)
About to write to C:UsersRakshithDesktopinternship1node_intropackage.json:

{
"name": "my-first-api",
"version": "1.0.0",
"description": "This is the first REST API i am creating",
"main": "server.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "Rakshith Kakathkar",
"license": "ISC"
}


Is this ok? (yes)


PS C:UsersRakshithDesktopinternship1node_intro> npm install express --save
npm WARN [email protected] No repository field.











Post-raw->json input
server doesnt accept json, hence it must be converted to json and then print it
hence it must be parsed using a utility in node called bodyParser


var bodyParser = require("body-parser");//to parse input in json form
var app = express();
app.use(bodyParser.json());//all body of req obj is converted to json







nodemon(prevents killing of server after changing the code, this is a demon , it runs in the background)
this monitors server.js file
npm install nodemon -g(saves it globally)



mongoDB(noSQL db)
no pre defined schema
adding col in relational db is a problem bcoz it is in a tabular form





use batch1_mongo_intro
creates a database named batch1_mongo_intro

db.product.insert({"name":"red t-shirt","price":"200"})
creates a collection named product and inserts the following data in JSON form

show collections
product is shown

db.product.find().pretty() //similar to select * from product
to view the collections



to install mongoose


var mongoose = require("mongoose");
var db = mongoose.connect("mongodb://localhost/database_name");


it doesnt have a schema, but schema can be created to be followed
npm install mongoose -g


the argument to find must be in json format
db.producs.find({"categories":"car"}).pretty


api with parameters as input
app.get("/products/:categories",function(req,res){ //here categories is the parameter
params take the categories

}
)




scaling
1.vertical scaling
2.Horizontal scaling




---------------------------------------------------------------------------------------------------------------------------

ES
wrapper for js
current version ES6

react is a wrapper for js,html, css developed by facebook
npm install -g create-react-app


to create a react app
go into the new folder
type the command "create-react-app ecommerce-web"

to open the editor for coding(opens in visual code)
PS C:UsersRakshithDesktopinternship1ecommerce-webecommerce-web> code .


PS C:UsersRakshithDesktopinternship1ecommerce-webecommerce-web> npm start(opens browser)
v can use this template to modify code





render() --- it must be in all components to render something
it can have html, or js anything within {} is js
1)html=class in react=className(camel Notation) used in div tag
2)module.exports to use code of one file in another file, we use 'export default App' in react
3)'link' is replaced by 'import'



to include Bootstrap

go to index.htmtl


%PUBLIC_URL%---relate with public folder it is a variable, this is replaced on different machines
all static codes are stored in public folder


create css and js folder
in css copy bootstrap and bootstrap-grid
in js copy bootstrap.js


create App folder
move App.css and App.js into it, delete App.test





fetch data from backend server
(download whatwg)
PS C:UsersRakshithDesktopinternship1ecommerce-webecommerce-web> npm install --save whatwg-fetch

create a folder called services which gives serveices
and a file http-service.js
we use whatwg import it
(synchronous calls-one after another
asynchronous calls - not in order(ex while browsing fb, we can work in other functunalities also, it doesnt block the user wen doing other work))
fetch data is asynchronous call
after data is fetched, perform a callback function for success and error



in app.js, create a constructor for the base class component using "super"

learn about Promises

this.state.products.map();

===========================================================================================================================================================================
Singleton classes
only one object can be created, even if another object is created it refers to the previously created object only

//this is how a singleton class is created
constructor(){
if(!instance){
instance = this;
}
return instance;
}







==============================================================================================================================================================================================================


Firebase

var config = {
apiKey: "AIzaSyC4MG6THoeB7G5w0GZV2RoVSq-hCrb_7Nk",
authDomain: "certgeneration.firebaseapp.com",
databaseURL: "https://certgeneration.firebaseio.com",
projectId: "certgeneration",
storageBucket: "certgeneration.appspot.com",
messagingSenderId: "19272763846"
};
firebase.initializeApp(config);




create database
realtime database




====================================================================================================================



solution explorer->references->right click->Nuget package->browse-> aforge.imaging(download)



convert image into gray scale

aforge is used for that, we need to include that
using AForge.Imaging.Filters;



Grayscale.CommonAlgorithms.BT709.Apply(){press down arrow 2 times and pass the image as parameter}





Morphological operaration using Aforge.

Dilation small pixels will becomme white,
after dilation size of hand also incereases hence we need to do erosion to bring it back to the original size

Closing operator is dilation followed by erosion


we need to extract biggest blob to get only the palms, ie parts which are connected to each other

bounding box- the smallest box fitting the image



to make it into a dll, remove the picture box code


---------------------------------------------------------------------------------------------------------------------------------------------
Machine Learning

Support vector machine

in our proj we have 36 dimensions

plot the point, find the cluster near to it and find where it belongs to

data is accepted in a text file, hence feature vector must be converted into a file
1 image data in one line of the file


This is where the text will be present
C:UsersRakshithsourcereposfirstfirstbinDebug


to include svm.dll
go to the references, add references, browse, select the folder and then OK