Node express up and running in 5 minutes

Follow the guidelines here: https://expressjs.com/en/starter/generator.html

All in all, from command prompt:

1. npx express-generator my-app
2. cd my-app
3. npm install
4. npm start

 

A primer on Angular (Not AngularJS)

Disclaimer: I am writing this for my understanding and reference. Also provided the links on each topic what I referred to. Please refer them for complete details.

What are the differences between Angular and AngularJS?

https://stackify.com/angular-vs-angularjs-differences-between-angular-and-angularjs/

https://gorrion.io/blog/angularjs-vs-angular

"Angular JS, based on JavaScript, uses terms of scope and controllers while Angular uses a hierarchy of components. Angular is component-based while AngularJS uses directives."

What is the official site for Angular?

https://angular.io

What do you need to know to work an Angular app?

HTML, CSS, JavaScript, TypeScript, knowledge of JavaScript classes, modules

Basic architecture concepts of an Angular app

How do you set up an Angular app to begin with?

https://angular.io/guide/setup-local

> npm i -g @angular/cli

> ng new angular-app

> cd angular-app

> ng serve --open (app opens up at http://localhost:4200/)

Explain the process of application launch/bootstrapping?

An Angular application launches by bootstrapping the root module which creates the components listed in the bootstrap array and inserts each one into the browser DOM.

https://angular.io/guide/bootstrapping

What are the key components in Angular?

• NgModule - class with @NgModule decorator
• Component - class with @Component decorator. Go through the component life cycle.
• Service - class with @Injectable decorator
• Dependency Injection - a class requests dependencies from external sources rather than creating them. 
• Decorators - a decorator appears immediately before class definition, which declares the class to be of the given type, and provides metadata suitable to the type.
• Directives
• structural directives - add, remove, manipulate the HTML elements. Exa: *ngIf, *ngFor
• attribute directives - change the appearance or behavior of a DOM element. Exa: ngModel, ngSwitch, ngStyle, ngClass
• Binding  (Interpolation, property binding [ ], event binding ( ), attribute binding, class binding, style binding, two-way binding [( )])
• Pipes

Best tutorial to learn Angular?

https://angular.io/tutorial (Tour of Heroes app)

Web Components or Custom Elements

In short:

• We all know the HTML elements like header elements (h1, h2, etc.), content elements (div, p, span, etc.).
• To create a custom element(Web Component), per say, my-custom-element, you need to follow the steps as below:
• Create a class that extends the HTMLElement.
• Add the structure, style, and behavior to the class.
• Add the life cycle to the custom element depending on the need.
• Attach a shadow DOM tree to the custom element.
• Define it in window.customElements.
• Use libraries like Stencil to build the web components in a breeze.

I started reading about Web Components from a layman level. 

Initially I went through the fundamentals of Web Components here: https://www.webcomponents.org/introduction

Then I read about window.customElements.define here: https://developer.mozilla.org/en-US/docs/Web/API/Window/customElements

Then I went through the examples and the details given here: https://www.robinwieruch.de/web-components-tutorial.

Also, to make your hands dirty:

This is the best (short and sweet): https://www.youtube.com/watch?v=mTNdTcwK3MM

try Stencil and build a stop-watch (a library to build your web component project) :  https://medium.com/@ahsan.ayaz/building-web-components-with-stencil-a3717787954a

Handling data with Web Components: https://itnext.io/handling-data-with-web-components-9e7e4a452e6e

Well, I ended up with some understanding after going through these articles. Happy coding 😊

Additional read: Thorough coverage on Stencil props, events, state: https://blog.logrocket.com/building-reusable-web-components-with-stencil-js/

Data binding example with NO stencil: https://medium.com/swlh/https-medium-com-drmoerkerke-data-binding-for-web-components-in-just-a-few-lines-of-code-33f0a46943b3

A quick look through before an interview

 ES6 important features:

https://frontendjournal.com/javascript-es6-learn-important-features-in-a-few-minutes/

https://www.mkwd.net/learn-es6-in-5-minutes-tutorial/

TypeScript:

https://www.typescriptlang.org/docs/handbook/typescript-tooling-in-5-minutes.html

Angular

https://angular.io/start

JavaScript - Comparing Objects and finding the difference

 Though posted a while back, I tried the solution suggested by Johan Persson and I liked it:

https://stackoverflow.com/questions/31683075/how-to-do-a-deep-comparison-between-2-objects-with-lodash

All about SAS Macros

https://communities.sas.com/t5/SAS-Programming/Value-returned-in-a-macro/td-p/461868

React Hooks Testing

I am adding the reference to this blog, https://medium.com/javascript-in-plain-english/testing-react-hooks-be74ec3fc0c4, only because the author used a gif of 'Indiana Jones' which is a cool way of explaining a mock function. I haven't read the article yet.

More to come here...

React Redux Example

Basics:

• Redux provides means to create an empty store where application state can be manufactured.
• You tell the store what to create as the application state, how to update the application state thru reducer.
• Reading from the application state in application is straight forward.
• Updating the application state is by triggering the update logic in the store by dispatching the actions.
• NOTE: When you update a state, you don’t update the state but rather create a new state out of old state.

• react-redux provides couple of additional facilities, Provider and connect.
• Provider to provide the store to the root component.
• Connect passes state, dispatch actions to child component. 

Example:

• npx create-react-app reduxexample
• cd reduxexample
• npm install redux
• npm install react-redux
• Remove all files under src folder and public folder
• Create index.html under public folder
• Create rest of the files under src folder
• npm start

index.html

index.js

reducer.js

dispatcher.js

kitchen.jsx

Menu.jsx

App.jsx

Rest API with NodeJS and Loopback or Fastify or just nodejs

Totally surprised when I saw the search results for the key words: 'node and rest api in 5 minutes'

Building Rest API with LoopBack: Mind blowing, read this article: https://www.freecodecamp.org/news/build-restful-api-with-authentication-under-5-minutes-using-loopback-by-expressjs-no-programming-31231b8472ca/

About Loopback:

https://auth0.com/blog/developing-restful-apis-with-loopback/

https://www.npmjs.com/package/loopback

https://loopback.io/doc/en/lb4/express-with-lb4-rest-tutorial.html

Using Fastify:

https://medium.com/zero-equals-false/build-rest-apis-in-5-minutes-with-node-js-and-fastify-5c72b67e2cd3

Just nodeJS:

https://www.codementor.io/@olatundegaruba/nodejs-restful-apis-in-10-minutes-q0sgsfhbd

Safety datasets

These are safety datasets EX CM AE DS MH IE LB VS

Which datasets are SAFETY datasets? AE CM DS EX MH IE LB VS

ES6 Super quick reference

Arrow functions:

// ES5
function sayHello (name) {
  return 'Hello ' + name
}

// ES6
const sayHello = (name) => 'Hello ' + name

console.log(sayHello('Ramesh'))

Variables:

var firstName = 'Ramesh'; // ES5

let firstName = 'Ramesh' // ES6 - have block scope

const firstName = 'Ramesh' // ES6 - as it says, it's a constant

Template Strings:

let strWelcome = 'Welcome'

// use the backticks to combine strings with variables
let templateString = `${strWelcome} Ramesh` 

console.log(templateString)

async await:

https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await

Destructuring:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

Shorthand objects

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer

Function arguments

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/arguments

Expand arrays

https://www.smashingmagazine.com/2016/07/how-to-use-arguments-and-parameters-in-ecmascript-6/

let myArray = [1,2,3]
Math.max(...myArray)

Classes

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class

nvm - switch node versions with nvm

Node Version Manager (nvm) helps to switch between different versions of nodejs. This article provides all the details on nvm:

Some basic commands:

• To install nvm on mac: brew install nvm

• To install nodejs using nvm: nvm install node

• To install a specific version of nodejs: nvm install 13.5.0

• To use a specific version as default: nvm alias default 12.16.1

• To see what versions are available on your local: nvm list

• To use a specific version: nvm use <version number>

References:

https://michael-kuehnel.de/node.js/2015/09/08/using-vm-to-switch-node-versions.html

https://www.kulik.io/2019/05/01/set-default-node-version-using-nvm/

https://nodesource.com/blog/installing-node-js-tutorial-using-nvm-on-mac-os-x-and-ubuntu/

npx - Installation-less command execution

You don't want to install some command but you want to use it on the fly! Well, npx comes to your rescue: https://nodejs.dev/the-npx-nodejs-package-runner

For a quick understanding of differences between npm and npx, read this: https://stackoverflow.com/questions/50605219/difference-between-npx-and-npm

Also read the interesting facts about Node.js: https://nodejs.dev/a-brief-history-of-nodejs

Read thru this article that would help better understand an executable global module: https://medium.com/jspoint/creating-cli-executable-global-npm-module-5ef734febe32

About JavaScript modules, module formats, module loaders, module builders

This article was written in 2017 and I was NOT blessed to read this till now. Well, better late than nothing. You want to know the intricacies of JavaScript modules, this is it, you have to read this.

Here is the link to the article: https://www.jvandemo.com/a-10-minute-primer-to-javascript-modules-module-formats-module-loaders-and-module-bundlers/

And then follow this article: https://www.sitepoint.com/understanding-module-exports-exports-node-js/, that explains the additional details of how to use nodeJS modules.

To understand module exports

As the article header says, it was a good effort by the author to help the readers to understand Node.js module exports:

https://stackify.com/node-js-module-exports/

SAS Practice Examples

Create a Student table with studentnum, quarter, math, science, english marks?

data Student;
 input studentnum $ quarter math science english;
 datalines;
 1001 1 70 80 76
 1001 2 80 80 78
 1001 3 90 85 80
 ;
run;

Add 4th quarter marks as a new record and create a new Student_1 table?

data Student_1;
 set Student end=eof;
 output;
 if eof then do;
   studentnum = '1001';
   quarter = 4;
   math = 88;
   science = 90;
   english = 88;
   output;
 end;
run;

Add the total for each quarter?

data Student_marks_total;
 set Student_1;
 total = math + science + english;
run;

Add the average for each column including the total as a new row in the bottom?

data Student_marks_avg;
 
 set Student_marks_total end=eof;
 drop sum_math sum_science sum_english sum_total;
 retain sum_math sum_science sum_english sum_total 0;
 
 sum_math = sum_math + math;
 sum_science = sum_science + science;
 sum_english = sum_english + english;
 sum_total = sum_total + total;
 
 output;
 
 if eof then do;
  studentnum = 'avg';
  quarter = .;
  math = sum_math / 4;
  science = sum_science / 4;
  english = sum_english / 4;
  total = sum_total / 4;
  output;
 end;
run; 

Sort the Student_1 table by reversing the quarter?

proc sort data=student_1 out=student_1_sort_by_quarter;
 by descending quarter;
run;

Combine Sales, Delivery employee datasets as Marketing dataset?

data Sales;
 input empno empname $;
 datalines;
 1001 Daniel
 1002 Peter
 ;
run;

data Delivery;
 input empno empname $;
 datalines;
 1003 Simon
 1004 Chris
 ;
run;

data Marketing;
 set Sales Delivery;
run;

Merge a Student's arts and groups marks into a single dataset?

data student_arts;
 input studentnum english spanish latin;
 datalines;
 1001 80 70 78
 ;
run;

data student_groups;
 input studentnum math science history;
 datalines;
 1001 88 78 89
 ;
run;

data student_arts_and_groups;
 merge student_arts student_groups;
 by studentnum;
run;

Is it possible to create a table in a simple way with couple of records and couple of columns?

data blah;
 firstname = 'Sean'; 
 lastname = 'Connery';
run;

Or with two records

data blah;
 firstname = 'Sean'; 
 lastname = 'Connery';
 output;
 firstname = 'Matt';
 lastname = 'Damon';
 output;
run;

Calculate average and grade the student based on this grading guidelines?
failed: below 35
ordinary: > 35 and <= 50
second: > 50 and <= 60
first: > 60 and <= 70
distinction: > 70

data Student;
 input studentnum $ math science english;
 datalines;
 1001 40 50 46
 1002 60 60 68
 1003 90 85 80
 1004 10 20 23
 ;
run;

data Student_grading;
 set Student;
 
 average = (math + science + english) / 3;
 average = Round(average, 0.01);
 
 length grading $ 12;
 
 if average > 35 and average <= 50 then grading = 'ordinary';
 else if average > 50 and average <= 60 then grading = 'second';
 else if average > 60 and average <= 70 then grading = 'first';
 else if average > 70 then grading = 'distinction';
 else grading = 'failed';
 
run;

Based on Student marks, decide the grading and add some comments?
(NOTE: more than one action in if-then statement, so you have to use do)

data student;
 input studentnum marks;
 datalines;
 1001 49
 1002 89
 1003 34
 1004 89
 ;
run;

data student_report;
 set student;
 if marks > 50 then do;
  result = 'pass';
  comments = 'eligible to go to next level';
 end;
 else do;
  result = 'fail';
  comments = 'not eligible to next level';
 end;
run;

How to add a column with table name?

data report_card;
 set student_grading indsname=name;
 tablename=scan(name,2);
run;

Create a temp dataset out of Student dataset using SQL?

proc sql;
 create table student_temp as
 select * from student;
quit;

Add numbers 1 to 5 and give the sum?

data sum_1_to_5;
 sum = 0;
 do i = 1 to 5;
 sum = sum + i;
 end;
 drop i;
run;

Nik has 10 dollars. Vik has 16 dollars. Keep giving Nik a dollar per day till they both have equal money?
(Note: Use Do while loop)

data level_the_brothers;
 nik_money = 10;
 vik_money = 16;
 
 do while (nik_money < vik_money);
  nik_money = nik_money + 1;
 end;
 
 final_nik_money = nik_money;
 final_vik_money = vik_money;
 
 drop nik_money vik_money;
run;

Nik has 10 dollars. Vik has 16 dollars. Keep giving Nik a dollar per day till they both have equal money?
(Note: Use Do until loop)

data level_the_brothers;
 nik_money = 10;
 vik_money = 16;
 
 do until (nik_money = vik_money);
  nik_money = nik_money + 1;
 end;
 
 final_nik_money = nik_money;
 final_vik_money = vik_money;
 
 drop nik_money vik_money;
run;

Find the total, average marks of students if all 6 subjects marks are provided for each student?

data array_example;
 input studentnum s1 s2 s3 s4 s5 s6;
 array s(6) s1-s6; /* Hint - array element names match column names */
 marks_total = sum(of s(*));
 marks_avg = round(mean(of s(*)), 0.01);
 datalines;
 1001 78 56 45 34 75 65
 1002 56 67 78 89 45 34
 ; 
run;

Sandbox for ReactJS application

Code Sandbox is a good place to play with your ReactJS samples.

I was able to add couple of pages in no time: https://codesandbox.io/s/compassionate-bhaskara-wbt24

Learning topics for a newbie

Mac command line (terminal) basics:

https://github.com/fonnesbeck/Bios6301/wiki/Mac-OS-X-Command-Line-Tutorial

Windows DOS basic commands:

http://people.uncw.edu/pattersone/121/labs/L1_MSDOS_Primer.pdf

Git introduction:

https://product.hubspot.com/blog/git-and-github-tutorial-for-beginners

https://www.edureka.co/blog/git-tutorial/ (I love the diagram in this tutorial)

https://kaloraat.com/articles/learn-git-from-scratch

Deploy a static HTML web site using Git Pages:

https://pages.github.com/

Learning HTML, CSS, JavaScript and SQL:

https://www.w3schools.com/

https://dev.to/devmount/8-games-to-learn-css-the-fun-way-4e0f

OKTA

Get quick and robust authentication by adding one of OKTA's SDKs to your app or API service.

https://developer.okta.com/docs/

Build user registration with NodeJS, React, and Okta:

https://developer.okta.com/blog/2018/02/06/build-user-registration-with-node-react-and-okta

may be another good read??: https://developer.okta.com/code/react/okta_react/

JavaScript Playground, Sandbox

You can use this page where you write the code and check the result immediately:

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Build Rest API with NodeJS

Ain't this article cute? (with all the pictures, icons, emojis):

https://dev.to/lenmorld/quick-rest-api-with-node-and-express-in-5-minutes-336j (my 5 stars to this author)

Golden statement from the author: Rest API means providing an API to clients via HTTP Methods

https://www.positronx.io/build-secure-node-js-mongodb-express-restful-api-from-scratch/

Also, other useful links while practicing these exercises:

https://medium.com/@alexishevia/using-cors-in-express-cac7e29b005b

All in all, to overcome the CORS issue while playing around with express & rest api:

npm install cors

In server.js...
let cors = require('cors')
server.use(cors())

This would set the Access-Control-Allow-Origin: *

https://alligator.io/react/axios-react/

ReactJS Charts

https://morioh.com/p/48b9a6f4ece6

Let's learn about Pivotal Cloud Foundry

About CF Cli: https://docs.run.pivotal.io/cf-cli/getting-started.html

https://www.quickdevops.com/2019/09/pivotal-cloud-foundry-tutorial-for-beginners.html

ReactJS - Hey, don't forget to read the documentation

Good documentation helps to understand the concepts faster. If you are new to ReactJS, this is one of the best pages to begin learning: https://reactjs.org/docs/getting-started.html

It's all about Spring Boot

Building a Spring Boot application with Rest API

• This link has the simplest Rest API building example: https://spring.io/guides/gs/rest-service/
• Also check out the links at the end of the page of https://spring.io/guides/gs/rest-service/ and you will learn almost everything using Spring Boot.
• Also check this page too: https://spring.io/guides#getting-started-guides

Building a Spring Boot and ReactJS mono-repo application

• Look no further! This link has all listed out all the details: https://github.com/kantega/react-and-spring

Spring Boot application with Postgresql on Heroku

• On Mac, brew install Postgresql
• Some useful commands to work with Postgresql on local:
• By default, Postgresql is already started. If not, use this command to manually start the Postgresql
  pg_ctl -D /usr/local/var/postgres -l /usr/local/var/postgres/server.log start
• To turn-off Postgresql manually, use this command pg_ctl -D /usr/local/var/postgres stop -s -m fast
• To access Postgres from command prompt: psql postgres -U kad221
• To stop the access to Postgres from command prompt: quit psql CMD+D
• Follow the instructions to set up and push the spring boot application to Heroku: https://devcenter.heroku.com/articles/deploying-spring-boot-apps-to-heroku
• In Heroku dashboard, select the spring boot application that is deployed.
• Go to Resources, click on the Heroku Postgres, click on settings > View Credentials > Copy URI.
• From command prompt: psql <paste the URI here> and hit enter.
• In application.properties, add spring.datasource.url: <paste URI here>
• From command prompt, run ./mvnw spring-boot:run, and you are good to go with the development.

Search is over to find spring-and-react application build guidelines

It took some time to find this, but found it eventually :)

Building a spring boot application with ReactJS front end: https://github.com/kantega/react-and-spring

A nice online guid generator

I like this online guid generator: https://www.guidgenerator.com/online-guid-generator.aspx

SDTM in a nutshell

Beautifully explained the practical methods for creating CDISC SDTM tables:

https://support.sas.com/resources/papers/proceedings/pdfs/sgf2008/207-2008.pdf

Golden words: Analyses are "one proc away" from ADaM data. 

Other important SAS related references:

SAS clinical questions and answers: https://tekslate.com/sas-clinical-interview-questions-and-answers

There is a listing of sample graphs and example code: https://support.sas.com/en/knowledge-base/graph-samples-gallery.html

Details of Oncology studies and a relation between SDTM, ADaM and Controlled Terminology: https://www.pharmasug.org/proceedings/2018/DS/PharmaSUG-2018-DS06.pdf

Powerpoint slides details on ADaM tables and RECIST 1.1: https://www.cytel.com/hubfs/0-library-0/pdfs/CDISCJourneyonSolidTumorusingRECIST1.1.pdf

Again, it is a listing of sample graphs: http://support.sas.com/sassamples/graphgallery/PROC_SGPLOT.html

https://www.cdisc.org/system/files/all/event/restricted/2018_US/6B-CDISC-ADaM_Overview_-_Minjoe.pdf

https://www.cdisc.org/system/files/all/event/restricted/2017_International/INTX17%20Session%203%20Track%20A_Soloff.pdf

https://www.lexjansen.com/pharmasug/2018/DS/PharmaSUG-2018-DS24.pdf

https://www.lexjansen.com/pharmasug/2010/HW/HW06.pdf

https://www.quantics.co.uk/blog/an-introduction-to-integrated-summary-of-safety-and-integrated-summary-of-effectiveness-iss-and-ise/

https://blogs.sas.com/content/iml/2011/09/19/count-the-number-of-missing-values-for-each-variable.html

https://blogs.sas.com/content/iml/2012/04/02/count-missing-values-in-observations.html

https://journals.lww.com/anesthesia-analgesia/Fulltext/2018/09000/Survival_Analysis_and_Interpretation_of.32.aspx

https://www.lexjansen.com/pharmasug-cn/2014/CD/PharmaSUG-China-2014-CD03.pdf

https://www.lexjansen.com/phuse/2018/ds/DS03_ppt.pdf

Graphs from Robert Allison: https://robslink.com/SAS/Home.htm

About ADaM flags: https://www.pharmasug.org/proceedings/2013/PO/PharmaSUG-2013-PO11.pdf

http://www.stattutorials.com/SAS/

Oncology Survival Plot: https://support.sas.com/rnd/datavisualization/papers/Annotate_Your_SGPLOT_Graphs.pdfhttps://support.sas.com/rnd/datavisualization/papers/Annotate_Your_SGPLOT_Graphs.pdf

Survival analysis (Time-to-event analysis) is the process of measuring the length of time to the event. The event could be progress-free survival or overall survival or objective response rate. It may not be possible to measure the length of time for some patients because the patient disappeared or a bus hit him, or the study called off, etc. The missing data related to that patient is called the censored data.

Proc lifetest is useful to get the survival plot in a clinical trial. Also it provides multiple survival plots between two treatments. In the TIME statement, the survival time variable, Days, is crossed with the censoring variable, Status, with the value 0 indicating censoring.

The ADSL data structure has one record for one subject and contains subject-level population flags indicating whether subjects are in efficacy, safety, pharmacokinetic, pharmacodynamic, food effect, or dose proportionality analyses. In the Basic Data Structure (BDS) data sets, common record-level analysis flags include: recheck flags, flags for exclusion, baseline flags, early termination identifiers, and treatment-emergent flags.

Free, free, free ReactJS templates

Isn't it beautiful if you can find some free templates that makes your job simpler to build a ReactJs app?

Here you go: https://colorlib.com/wp/free-react-templates/

Another life saver with the templates: https://bootstrapious.com/p/bootstrap-sidebar (all you got to do is go to demo pages, view source, and customize it to your requirement) %3CmxGraphModel%3E%3Croot%3E%3CmxCell%20id%3D%220%22%2F%3E%3CmxCell%20id%3D%221%22%20parent%3D%220%22%2F%3E%3CmxCell%20id%3D%222%22%20value%3D%22WS%22%20style%3D%22rounded%3D0%3BwhiteSpace%3Dwrap%3Bhtml%3D1%3B%22%20vertex%3D%221%22%20parent%3D%221%22%3E%3CmxGeometry%20x%3D%22849%22%20y%3D%22295%22%20width%3D%2235%22%20height%3D%2230%22%20as%3D%22geometry%22%2F%3E%3C%2FmxCell%3E%3C%2Froot%3E%3C%2FmxGraphModel%3E

What to prepare when applying for a JavaScript position?

What to prepare:

1. Core JavaScript concepts: 10 things to learn during a weekend
2. Building NPM packages, publishing, and importing
3. Building an application with an express server
4. Two ways of creating a react app: from scratch and from create-react-app
5. Build react app with a fake server for API testing
6. Git repos and commands
7. Responsive web design, (can this make the process simpler: react-responsive-navbar)
8. CSS approaches: SCSS files, bootstrap, css modules, media-queries
9. ReactJs routing, hooks, using context & HIC, child as a function
10. Some examples of Jest unit testing
11. Some examples of Ajax call testing
12. Feature testing: Selenium, Cypress
13. Responsive web design
14. A11y
15. ESLinting
16. Build and deploy process
17. CodeSandBox and CodePen
18. Workshop

Core JavaScript concepts:

Function objects:

• Functions are function objects. In JavaScript, anything that is not a primitive type ( undefined, null, boolean, number, or string) is an object. Objects in JavaScript are extremely versatile. Because of this, we can even pass a function as a parameter into another function.

Callback functions:

• A callback is a function that is to be executed after another function has finished executing — hence the name 'call back'.

• Example: setTimeout(function() {console.log('I am the response from callback function')}, 300)

Promises: 
Use Promise API to use asynchronous code. Create promise object using Promise API, access the asynchronous code response using promise.then.

Example: 

let promise = new Promise(a callback function); 

// By the way, this callback takes two parameters resolve and reject that are functions too, so…

let resolve = function(){}

let reject = function(){}

let promise = new Promise(function(resolve, reject) {

// do your async code here…

// If successful, call resolve function

// If failure, call reject function

});

promise.then to handle the data returned by either resolve or reject

Nobody can explain promises better than this guy: https://www.sitepoint.com/overview-javascript-promises/

Closures:

A Closure is nothing but a function that has access to the variables defined in outer (and enclosing) function. 

As far as scope is concerned, the closure has access to global variables, its own variables, and variables of outer (and enclosing) function.

Example:

const myFunctionTwo = () => {  

   const message = 'My New Message';  

   const printMessage = () => {  

     console.log(message);  

   }  

   return printMessage;  

 }  

 const myPrintMessage = myFunctionTwo();  

 myPrintMessage();

// prints My New Message

Currying:

The curried effect is achieved by binding some of the arguments to the first function invoke, so that those values are fixed for the next invocation. It’s something like keeping masala ready and cook either chicken, goat, beef with ease.

Example:

var all_you_have_to_do_is_specify_masala = function(masala) {

return cook_with_masala = function(b){

console.log('i cooked ' + b + ' with ' + masala)

}

}

let use_ramesh_recipe = all_you_have_to_do_is_specify_masala ('masala made with garlic, ginger, spices')

use_ramesh_recipe('chicken')

use_ramesh_recipe('goat')

JavaScript making HTTP requests

The XMLHttpRequest object can be used to request data from a web server.

Example:

const puzzleAPIhit = () => {  

   const request = new XMLHttpRequest()  

   request.addEventListener('readystatechange', (e) => {  

     if (e.target.readyState === 4 && e.target.status === 200) {  

       const data = JSON.parse(e.target.responseText);  

       console.log(data.puzzle)  

     } else if (e.target.readyState === 4) {  

       console.log('An error has taken place')  

     }  

   })  

   request.open('GET', 'https://puzzle.mead.io/puzzle?wordCount=3')  

   request.send()  

 }  

 puzzleAPIhit(); 

Fetch API:

The Fetch API introduced in relatively newer versions of JavaScript and has built-in support for Promises. Technically, it is just another method of hitting HTTP Requests while harnessing the powers and perks of Promises and Promise Chaining.

fetch('http://puzzle.mead.io/puzzle', {}).then((response) => {  

   if (response.ok) {  

     return response.json();  

     /*  

       Actually, the .json() method takes the response and returns a Promise Object and hence  

       We need to add another then() as we have done in Promise Chaining   

     */  

   } else {  

     throw new Error('Unable to fetch the puzzle');  

   }  

 }).then((data) => {  

   console.log(data.puzzle);  

 }).catch((error) => {  

   console.log(error);  

 }); 

Object Oriented Programming (OOP) in JavaScript:

OOP describes a way to write programs. This way focuses on data: stored as object properties, and actions: stored as object methods.

• Constructor functions versus ES6 classes, encapsulation, inheritance, prototypal vs static methods in JavaScript: https://medium.com/@luke_smaki/javascript-es6-classes-8a34b0a6720a

• Prototypal methods Vs Static methods: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes

• References: https://fullstackgeek.blogspot.com/2019/02/asynchronous-javascript-explained-for-beginners.html#HittingHTTPRequests

• Building NPM packages, publishing and importing (https://npmjs.com)

• Reference: https://medium.com/the-andela-way/build-and-publish-your-first-npm-package-a4daf0e2431

Building an application with an express server: 

• Create the app from express, tell your app how to handle get, post, put requests, and run the app at a port
• Reference: https://alligator.io/nodejs/express-basics/

Creating a React app from scratch:

• You need Webpack, React, Babel to create a react app from scratch.
• Example: https://www.valentinog.com/blog/babel/ 

• Create a React using create-react-app:
• Example: https://github.com/facebook/create-react-app

Creating a web site using MEAN stack:

• https://medium.com/javascript-in-plain-english/full-stack-mongodb-react-node-js-express-js-in-one-simple-app-6cc8ed6de274

Build react app with a fake server for API testing

Spring Boot + React application

Could this process be easier than this?

https://dzone.com/articles/spring-boot-and-react-happily-ever-after