react is a frontend javascript implementation

1. you can run react direct in a standard html file
    https://www.w3schools.com/react/react_getstarted.asp

2. Or create a react.js app
   -- npm install -g create-react-app
   -- npx create-react-app my-app-name
   -- npm start - will start app on port 3000
   -- edit package.json to redirect port
        under scripts section in package.json
    change "start": "PORT=9561 react-scripts start",
   -- this is a development version
   -- can redirect apache with
      ProxyPass / http://localhost:9561/
   -- the sample app created expects the app to be at the top level
      e.g. react.mindcontract.com
      The paths are not set up to allow a subdir app.
      

   
react.js cheatsheet

From facebook.

Babel transpiler translates react.js to html/css

Command that puts JSX on DOM
ReactDOM.render(JSX, document.getElementById('root'))

When defining a JSX must return a complete element

comments:
{/* comments here  */}

ReactDOM api renders JSX to HTMLDOM
ReactDOM.render(componentToRender, targetNode)

use className instead of class on elements

Components:
1. components start with Capital letter
2. must return element or null
3. stateless
const MyComponent = function () {
    return (
    <div>foo</div>
    )
}

4. ES6 format - extend from React.Component
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <h1>Hi</h1>
    );
  }
}

const ChildComponent = () => {
    return (
        <div>hello</div>
    );
}

Composition
-----------
Once you define a component, compose with <NameComponent arg="foo" />
    ${props.foo} is the value.
    

import PropTypes from 'prop-types';

jquery is a javascript library that simplifies DOM management.

Basic Jquery Cheatsheet:

Get it from:
https://jquery.com/download

Run on Load
<script>
$(document).ready(function() {
});
</script>

Reference a type (e.g. a button)
$("typename").addClass("foo");

Reference a class:
$(".classname").addClass("foo");

Reference an id:
$("#idname").addClass("foo");

Functions:
----------
css - add css rule to element
   Sample $(#myid).css('background-color','red');
   Note that its a comma between elements, not a colon
addClass - adds a class to an element
removeClass -removes a class from an element
html - sets body of element
text - set element text without evaluating
remove - removes an element
appendTo - appends selected element to new target
      Sample: $("#myid").appendTo("#target2");
clone - create a clone
     Sample: $("#myid").clone().appendTo("#target2");
parent - finds parent element of element selected.
children - finds children elements of element selected.
nth-child - finds nth child of element

sass - syntactically awesome style sheets

SASS Cheat Sheet - Syntactically Awesome Style Sheets

Use type: text/scss on the style tag

<style type='text/scss'>
</style>

Define a variable:
$varname: value;
  Sample:  $text-color:red

Nesting css elements
.foo {
     p {
          color:red;
       }
   }

mixins:
--------
Define:
@mixin funcname($arg1, $arg2) {
   blah($arg1);
}
Use:
@include funcname("blah","blah2");

In mixins - conditionals
@if $val == foo
@else if $val == blah
@else

looping:
@for $var from 1 through 6 {
   .classname-#{$var} { font-size: 15 * $var}
}
loop over list:
@each $var in blue,green,red {
   .#{$var}-text { color: $var; }
}

while statement:
$var : 0;
@while $var < foo {
   .column-#{$var} { font-size: 12 * $var;}
    $var: $var +1;
}

import partials:
@import "filename"
_filename.scss would be file.

extend:
@extends .otherrule

Python is a popular language used for web development

https://developers.google.com/edu/python

1. build python
   ./configure
   make
   make install

2. install gunicorn
   pip3 install gunicorn

3. in apache enable proxy modules
LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

4. add ProxyPass entry in vhost
ProxyPass "/pybase/" "http://127.0.0.1:8000/"

5. configure gunicorn.service file in  /usr/lib/systemd/system/gunicorn.service

===== Start gunicorn.service File ======
[Unit]
Description=The Apache HTTP Server
After=network.target

[Service]
MAINPID = /run/cmdb/cmdb.pid
WorkingDirectory = /m/member/pybase
ExecStartPre = /bin/mkdir /run/cmdb
ExecStart=/usr/local/bin/gunicorn --workers=4 myapp:app --chdir="/m/member/pybase" --pid /run/cmdb/cmdb.pid
ExecReload=/bin/kill -s HUP $MAINPID
ExecStop=/bin/kill -s HUP $MAINPID
ExecStopPost = /bin/rm -rf /run/cmdb

PrivateTmp=true

[Install]
WantedBy=multi-user.target

===== End gunicorn.service File ======

A) definition of a function
  def funcname(arg1,arg2):

B) spacing matters - indentation defines block

C) definition of if statement
  if (a == 1):
     a += 1;

D) for statement
   for (x in environ):
       data += x+environ[x];

E) Templates
   Jinja2 is the most prevalent template engine
   sample code to load from file:

   import jinja2
   def display_template():
      templateLoader = jinja2.FileSystemLoader(searchpath="./templates")
      templateEnv = jinja2.Environment(loader=templateLoader)
      templateFile = "template.html"
      template = templateEnv.get_template(templateFile)
      return template.render();

F) getting data from the database
   - basic level method (cursor)
   ---------------------------------
   import mysql.connector
   def get_data(sql):
     cnx = mysql.connector.connect(
         user='membermaster',
         password='XXXXX',
         host='127.0.0.1',
         database='mainmemberdb')

    data = "<table>\n"
    if cnx and cnx.is_connected():
       with cnx.cursor() as cursor:
          result = cursor.execute(sql)
          rows = cursor.fetchall()
          for row in rows:
              data += "<tr>\n"
              for col in row:
                  data += "   <td>"+col+"</td>\n"
              data += "</tr>\n"
    data += "</table>\n\n"
    cnx.close()
    return data
   ---- end code --------
   -More sophisticated is to use pandas to load the data to a grid
   pandas can output the data in a number of formats
   pandas is a library that allows data to be loaded into a grid
   that can then be displayed.
--------------------------------------------------------------
def get_table(sql):
   try:
       cnx = mysql.connector.connect(
           user='membermaster',
           password='XXXXX',
           host='127.0.0.1',
           database='mainmemberdb')
       results = pd.read_sql(sql,cnx)
       cnx.close()
       # html table has systables as a css class systables in addition to
       # dataframe... e.g. <table class='dataframes systables'>
       return results.to_html( classes= "systables")
   except Exception as e:
    cnx.close()
    return str(e)
---- end code -----

G) Get an argument from command line
   import sys
   def main():
      if (len(sys.argv)>=2:
          print("ARG 1:",sys.argv[1]);

    if __name__ == '__main__':
       main()

H) repeat string... * syntax
   print("foo"*3);
   >>foofoofoo

I) From the command line - help(keyword)
   help(len)

J)To convert numbers to strings
    mystring = str(10);

K) numbers:
   1. no ++ - can't do a++
   2. integer division is two // e.g. 2.4 // 2 = 1

L) raw strings
   raw= r'this\t\n and that'
   multi= """ hello
      world """

M) slices
   s="hello";
   something = s[1:4]
   >>> 'ell'
   s[-1]
   >> 'o'
N) strings
   [f strings]
    value = 2.791514
    print(f'approximate value = {value:.2f}')

O) if statements
    if a==b:
        print("a equals b")
    elif c==d
        print("c equals d")
    else
        print("magic")

P) and/or  ( there is no && or || )
   if a and b:
      print(true)
   if a or b
      print(false)

Q) for/in
   for key in list:
     iterate here
   if "moe" in list:
       do if moe is in list
       

R) dict
   mydict = {key1:value1,key2:value2}
   mydict = {}
   usage: myvar = mydict[key1];
   mykeys = mydict.keys();
   myvalues = mydict.values();
   myitems = mydict.items();  // tuple
   for k,v in myitems : print (k,"=",v)
   s = : %(word)s %mydict
   del mydict[0];
   del mydict[-2:0]

S) files
   #open file
   f = fopen("filaneme.txt", "rt", encoding='utf-8')
   for line in f:
       print (line, end='')
   f.close();       

T) regular expressions
   import re
   mystr = " hello 123 456";
   mymatch = re.search(mystr, '\d+');
   mymatch = re.findall(mystr, "\d+");
   mymatch = re.sub(mystr, "123", "\d+");

U) major important libraries
   os lib: os.listdir(dir), os.path.join(dir,filename), os.path.abspath(filename), os.path.dirname(filename)
          os.path.basename(filename), os.path.exists(filename), os.mkdir(path), os.mkdirs(path1)
   shutil lib: shutil.copy(source,target)
   subprocess:
       output = subprocess.check_output(cmd, stderr=subprocess.STDOUT) -
       subprocess.popen
       subprocess.call
   urilib lib:
      ufile = urllib.request.urlopen(url);
      text = ufile.read()
      info = ufile.info()
      baseurl = ufile.geturl()
      urllib.request.urlretrieve(url, filename)
      urllib.parse.urljoin(baseurl, url)
      from urllib.request import urlopen
   uriparse lib:

Mongodb is a popular nosql server

MongoDB

https://www.mongodb.com/docs/manual/tutorial/install-mongodb-on-amazon/

To install:
a) set up yum repo
  /etc/yum.repos.d/mongodb-org-7.0.repo file should contain
#############################################
[mongodb-org-7.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/amazon/2023/mongodb-org/7.0/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://pgp.mongodb.com/server-7.0.asc
##############################################

b) mongodb runs a user mongod, systemctl start mongod
   /var/lib/mongo is repository
   /var/log/mongodb is logging directory
   
c) mongosh = mongo shell
   test> use mydb         // change to database
   mydb> show collections  // show collections

   db.users.insertOne(['username'=>'triemer']);
   db.users.find();



d) So install on amazon 2023 doesn't work for mongosh
   > dnf remove mongodb-mongosh
   > dnf install -qy mongodb-mongosh-shared-openssl3

e) For PHP, install mongodb extension
   -- Install the mongodb extension to php
   >pecl install mongodb
   (I chose all the defaults)
   > cd /usr/local/lib/php/extensions
   mongodb built in subdir... copy up one level
   >add extension=mongodb.so to php.ini (/usr/local/lib/php.ini)

   -- now install php library
   in your php project where composer.json is
   composer require mongodb/mongodb
   

f) basic code to initiate mongodb from php
  From: https://www.mongodb.com/docs/php-library/current/tutorial/crud/
 
  <?php
     require_once "lib/vendor/autoload.php";
     $serverApi = new ServerApi(ServerApi::V1);
     $client = new MongoDB\Client('mongodb://127.0.0.1',[],['serverApi'=>$serverApi]);


  CRUD operations:
  define the collection:
  $collection = $client->test->users  ( creates a users table in test database)
  // CREATE
  $result =$client->insertOne(['username'=>'admin',email=>admin@fubar.com']);
  Get Count: echo $result->getInsertedCount();
  Get Inserted Id: echo $result->getInsertedId();
 
  $result = $client->insertMany(
        ['username'=>'admin','email'=>'admin@fubar.com'],
      ['username'=>'tom','email'=>'tom@fubar.com']
      );
  Get Count: echo $result->getInsertedCount();
  Get Inserted Ids: echo $result->getInsertedIds();

  // SERACH
  $cursor = $collection->find(['username'=>'admin',
        'last_name'=> MongoDB\BSON\Regex('^garden', 'i')
      ],$options);
  // Mix and match options
     $options = ['projection'=>
                    ['username'=>1,
             'first_name'=>1,
             'last_name'=>1],
         'limit'=>4,
         'sort'=>['pop' => -1],
         'sort'=>
         ];


   Update
   ------
   $result = $collection->updateOne(
    ['name'=>'Tom']
    ['$set'=>['address'=>'123 test way']]
    );
    $count = $result->getMatchedCount();
    $modified = $result->getModifiedCount();

   $result = $colletion->updateMany(
          ['state'=>'ny'],
       ['$set'=>['country'=>'us']));
   ** Updated only updates the fields mentioned **

   Replace
   -------
   $result = $collection->replaceOne(
        ['name'=>'Tom'],    // filter
    ['username'=>'thomas',  // new document
     'last_name'=>'myname']);
    $count = $result->getMatchedCount();
    $modified = $result->getModifiedCount();

  /* This replaces all fields */

  Upsert
  ------
 
    $updateResult = $collection->updateOne(
    ['name' => 'Bob'],
    ['$set' => ['state' => 'ny']],
    ['upsert' => true]
);
    ** updates the table if exists, creates if not */
    
  Delete
  ------
  $collection->deleteOne(['name'=>'bob']);
  $collection->deleteMany(['name'=>'tom']);
 

  Indexes
  $collection->createIndex(['name'=>1]);
  foreach ($collection->listIndexes() as $indexInfo) {
        var_dump($indexInfo);
  }
  $collection->dropIndex();
  $collection->dropIndexes(); // drops all indexes on collection
 
------------------------
installation on rhel 8.9
-------------------------
https://linuxconfig.org/how-to-install-mongodb-on-redhat-8

Then follow commands above to install pecl and library

-------------------------
Enable authentiction
-------------------------
1. create an admin user
   use admin
   createUser( { user:"myUserAdmin", pwd:"mypath",
      roles: [ { role: "userAdminAnyDatabase", db: "admin" } ]
      });

2. configure /etc/mongod.conf
   Security:
     authorization:enabled

3. now create user in the database
   user admin
   db.auth("myUserAdmin","mypath")
   
   use mydb
   createUser( { user:"fancyuser", pwd:"mypass",
           roles: [ { role: "readWrite", db:"mydb"}]
       })
       
4. in php configure the url for the collection connection
   $collection = new MongoDB\Client('mongodb://fancyuser:mypass@127.0.0.1/mydb');
   e.g. mongodb://user:password@127.0.0.1/database
   
----------------------------------
Creating a database
----------------------------------
Bit weird here...
1. authorize with myUserAdmin
  > use admin
  > db.auth("myUserAdmin","mypath")
  > use newdb
  >    createUser( { user:"fancyuser", pwd:"mypass",
           roles: [ { role: "readWrite", db:"newdb"}]
       })

2. the database will not show up in user databases
   until something is written to it.

3. BUT the authorization works.

TypeScript is typed javascript that compiles to javascript It reduces errors in javascript.

These are basic takeaways from reading about typescript
So typescript is compiled javascript with strict typing.

1) Install typescript
npm i -g typescript
2) Check version
tsc -v
3) Compile stuff in .ts files to .js files
tsc -w

4) Defining variables
     let varname: type = default_value;
   types can be string, number, bigint, bool, null, undefined, symbol
   wrappers String,Number,BigInt, Boolean, Symbol
   union type: example : let foo: string|number=5;

   "any" type - not recommended - reverts to straight javascript
   const foo = document.querySelector('a')!;
   ! - indicates - non-null assertion to inform compiler
   type casting:
   const foo = document.getElementById('foobar') as HTMLFormElement;
   let flavors: 'chocolate'|'strawberry'|'blueberry';
   
5) reference types - arrays, objects, functions
  a) arrays
      let myarray: number[] = [1,2,4,5];
      let myarray: (number|boolean)[] = [1,true,2];
  b) tuples
      let mytuple: [string,number,boolean] = ['Danny,1,true];
  c) objects
     let person: {
          name: string;
     alive: boolean;
     };
     person = { name:"Tom"; alive:true};
     person.name = "Mike";
  3) interfaces
     interface Person
     {
        name: string;
    alive:true;
    sayHi(name:string):string;
    sayBye(name:string) => string;
     }

     let something:Person {
        sayHi: function (name:string)
    {
        return 'Hi ${name}';
    }
     }
     usage:
       let person1:Person { name:"mike",alive:true};
  d) functions
     
     function funcname(arg1:type,arg2?:type):return_type
     {
     }
     or with es6
          const funcname = (arg1:type,arg2?:type):return_type =>
      {
      }
     ? means optional argument.   
     signature:
     let funcname: (arg1:type):null;
  e) types
      type PersonObject= {
         name:string;
     age: number;
      }

  f) classes
 
        class classname {
       private name: string;
        protected age: number;
        constructor(n:string,a:number) {
          this.name = n;
          this.age = a;
          }
        display() {
            return "Name: ${this.name} age:${this.age}";
        }

     let people: Person[] = [person1,person2];

    definition of scope of variables:
     readonly name: string; // This property is immutable - it can only be read
     private isCool: boolean; // Can only access or modify from methods within this class
     protected email: string; // Can access or modify from this class and subclasses
      public pets: number; // Can access or modify from anywhere - including outside the class

   g) generics
      const addID = (obj: T) => {
      let id = Math.floor(Math.random() * 1000);

      return { ...obj, id };
     };
   
     interface hasLength {
      length: number;
     }    

     function logLength(a: T) {
        console.log(a.length);
       return a;
     }

  h) enums
      enum states { AL="AL",

                   AK="AK"};

6. typescript interacts with multiple react platforms:

    create-react-app (TS setup)

    Gatsby (TS setup) Next.js

    Next.js (TS setup)

Concise tutorial:

https://www.freecodecamp.org/news/learn-typescript-beginners-guide/

A satellite internet service.

I recently upgraded to StarLink.   I purchased the hardware through Amazon.

It took 2-3 weeks from when I ordered it before I received the hardware.

StarLink is an internet service run via satellites.    

It has matured in the last several years to the point where it is usable for a developer.

Before ordering you should check to see if its available in your area.

Go to http://starlink.com

Some technical notes:

1) I have android, and you want to set up your account on the starlink website first.

    The android setup of accounts is slightly broken... essentially when you begin

   to identify locations, the android app ends up with a blank screen.

   If you have an existing account, you can skip the blank screen issue.

2) Once you have activated your dish, http://dishy.starlink.com is actually

    the router on your local net.  Its useful because you can test the speed

    of the dish from the router.   In my case 83 Mbs down, 14 mbs up.

Docker is a tool used to manage the development/QA/release process

The term docker is often thrown around.   It turns out to be fairly complex as a it crosses

across the developer, qa, release, and system admin roles.

Its supposed to make all these easier and more consistent.

So

1. Docker is a unix/linux/macos command line utility

    It provides utilies to push, pull images, start up the image, stop the image , remove the image. 

2. Dockerfile is a file that specifies how to create an image for distribution.

    This is used at the point of release. 

3. docker-compose is a command line utility that processes the file docker-compose.y[a]ml

    docker-compose.yml defines a development environment that  developer can use

    to edit/add/manage code.