Friday, November 26, 2021

Sails JS - how to start server in a different port

 in production environment, this can be done by setting the 'port' value in production.js to the desired port that is wanted

in dev environment, this configuration can be done in the local.js and as usual start the server using sails lift. 

Sunday, November 7, 2021

The background of MUI v5 (part1)

Improved customizability

Migration from JSS to emotion


The first step we took to improve the customization experience was to rethink the styling solution from a blank page.

If you have been following MUI for a long time, you have probably noticed that we have iterated (a lot!) on the styling solution over the last seven years. 


Originally it was Less, then inline-styles, then JSS, and now emotion. Why change it again? We wanted to solve the following problems:

This was to solve following problems 



The React community is settling on styled() as the most popular CSS-in-JS API. We have used popularity as a proxy for "best".


const StyledDiv = styled('div')({

  color: 'red',

});


// or

const StyledDiv = styled.div`

  color: red;

`;



We have made styled() the lowest level primitive to add styles. This API is already known by many.


We have defined a common interface with concrete implementations:


@mui/styled-engine: implemented with emotion (default).

@mui/styled-engine-sc: implemented with styled-components

If you are using a different styling library, feel free to contribute a wrapper. For instance, there is one attempt with goober, a library obsessing on bundle size (3kB gzipped).

This allows developers to swap between different style engines. For example, styled-components users no longer need to bundle emotion and styled-component, nor do they need to configure the server-side rendering for each. How does the swap work? The same way it does from React to Preact.


The first immediate benefit of the move to emotion was performance. The <Box> component is x5-x10 more performant in v5, compared to v4.


Going forward, developers can either keep using JSS with the legacy @mui/styles package or migrate from JSS. We recommend the latter to match the core components.




references:

https://mui.com/blog/mui-core-v5/#high-level-goals-for-v5

Saturday, November 6, 2021

What is MUI v5 emotion

 Emotion is a library designed for writing css styles with JavaScript. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. Both string and object styles are supported.


There are two primary methods of using Emotion. The first is framework agnostic and the second is for use with React.


Framework Agnostic

npm i @emotion/css


The @emotion/css package is framework agnostic and the simplest way to use Emotion.

Requires no additional setup, babel plugin, or other config changes.

Has support for auto vendor-prefixing, nested selectors, and media queries.

You simply prefer to use the css function to generate class names and cx to compose them.

Server side rendering requires additional work to set up



import { css, cx } from '@emotion/css'


const color = 'white'


render(

  <div

    className={css`

      padding: 32px;

      background-color: hotpink;

      font-size: 24px;

      border-radius: 4px;

      &:hover {

        color: ${color};

      }

    `}

  >

    Hover to change color.

  </div>

)


React

The “@emotion/react” package requires React and is recommended for users of that framework if possible.


Best when using React with a build environment that can be configured.


css prop support


Similar to the style prop, but also has support for auto vendor-prefixing, nested selectors, and media queries.


Allows developers to skip the styled API abstraction and style components and elements directly.


The css prop also accepts a function that is called with your theme as an argument allowing developers easy access to common and customizable values.


Reduces boilerplate when composing components and styled with emotion.


Server side rendering with zero configuration.


Theming works out of the box.


ESLint plugins available to ensure proper patterns and configuration are set.


// this comment tells babel to convert jsx to calls to a function called jsx instead of React.createElement

/** @jsx jsx */

import { css, jsx } from '@emotion/react'


const color = 'white'


render(

  <div

    css={css`

      padding: 32px;

      background-color: hotpink;

      font-size: 24px;

      border-radius: 4px;

      &:hover {

        color: ${color};

      }

    `}

  >

    Hover to change color.

  </div>

)


npm i @emotion/styled @emotion/react


The @emotion/styled package is for those who prefer to use the styled.div style API for creating components.



import styled from '@emotion/styled'


const Button = styled.button`

  padding: 32px;

  background-color: hotpink;

  font-size: 24px;

  border-radius: 4px;

  color: black;

  font-weight: bold;

  &:hover {

    color: white;

  }

`


render(<Button>This my button component.</Button>)



References:

https://stackoverflow.com/questions/69631840/mui-v5-mui-material-styles-vs-emotion-react

https://emotion.sh/docs/introduction


Wednesday, November 3, 2021

How to create msi on Mac

The easiest option is to use the msi-packager utility 


The installer has no wizard. Users just run the installer and your app will be installed and shortcuts created.

You must have wixl from msitools available in your path.


brew install msitools


npm install msi-packager


var createMsi = require('./')

 

var options = {

 

  // required

  source: '/Users/matt/Code/loop/loopjs-packager/build/Loop Drop-win32',

  output: '/Users/matt/Code/loop/loopjs-packager/releases/Loop Drop v1.0.0.msi',

  name: 'Loop Drop',

  upgradeCode: 'YOUR-GUID-HERE',

  version: '1.0.0',

  manufacturer: 'loopjs.com',

  iconPath: '/Users/matt/Code/loop/loopjs-packager/icon.ico',

  executable: 'Loop Drop.exe',

 

  // optional

  description: "Some description",

  arch: 'x86',

  localInstall: true

 

}

 

createMsi(options, function (err) {

  if (err) throw err

  console.log('Outputed to ' + options.output)

})



There was a file system callback issue, but then it cleared after making some changes inside npm 


References:

https://www.npmjs.com/package/msi-packager

Thursday, October 21, 2021

Difference between null and undefined in Javascript

In JavaScript, undefined means a variable has been declared but has not yet been assigned a value, such as:

var testVar;
alert(testVar); //shows undefined
alert(typeof testVar); //shows undefined

null is an assignment value. It can be assigned to a variable as a representation of no value:

var testVar = null;
alert(testVar); //shows null
alert(typeof testVar); //shows object

From the preceding examples, it is clear that undefined and null are two distinct types: undefined is a type itself (undefined) while null is an object.

null === undefined // false
null == undefined // true
null === null // true

and

null = 'value' // ReferenceError 

undefined = 'value' // 'value' 

references:

https://stackoverflow.com/questions/5076944/what-is-the-difference-between-null-and-undefined-in-javascript

Sunday, October 10, 2021

What is TACACS authentication

Terminal Access Controller Access-Control System (TACACS/ˈtækæks/) refers to a family of related protocols handling remote authentication and related services for networked access control through a centralized server. The original TACACS protocol, which dates back to 1984, was used for communicating with an authentication server, common in older UNIX networks; it spawned related protocols:

  • Extended TACACS (XTACACS) is a proprietary extension to TACACS introduced by Cisco Systems in 1990 without backwards compatibility to the original protocol. TACACS and XTACACS both allow a remote access server to communicate with an authentication server in order to determine if the user has access to the network.
  • Terminal Access Controller Access-Control System Plus (TACACS+) is a protocol developed by Cisco and released as an open standard beginning in 1993. Although derived from TACACS, TACACS+ is a separate protocol that handles authentication, authorization, and accounting (AAA) services. TACACS+ has largely replaced its predecessors.



TACACS+ is a security application that provides centralized validation of users attempting to gain access to a router or network access server. TACACS+ provides detailed accounting information and flexible administrative control over authentication and authorization processes


TACACS+ is a remote authentication protocol, which allows a remote access server to communicate with an authentication server to validate user access onto the network. TACACS+ allows a client to accept a username and password, and pass a query to a TACACS+ authentication server. Login to ITNCM - Base is authenticated using the TACACS+ server instead of authentication locally.

There are significant benefits to be achieved from the implementation of external authentication:

  • Improved Security — login authentication is more secure, as the ITNCM - Base user passwords are not held on a local database, instead it is managed and stored on a remote machine.
  • Central Storage of Passwords — leverage existing password checking infrastructure. No need to duplicate account.
  • Password Ageing — TACACS+ caters for password ageing, and notifies the user when the account has expired, and when it is about to expire.
  • Configuring the TACACS server
    The TACACS server must first be configured on a different machine than the server running ITNCM - Base.
  • Error messages
    There are error messages associated with TACACS+ authentication.
  • AUTH.XML
    The auth.xml file is configurable, and should be used to adjust settings for the TACACS server being used. For the purposes of TACACS authentication, the information within the <tacacsPlus> and <backupTacacsServer> XML tags, MUST be configured to modify TACACS server name, password, port number, client name, client port and authorization type.



  • TACACS/TACACS+ Terminology
    • Client - The client is any device, (often a Network Access Server) that provides access services.
    • Server - The server receives TACACS+ protocol requests, and replies according to its business model.
    • TACACS/TACACS+ Authentication - TACACS Authentication is the action of determining who a user (or entity) is. Authentication can take many forms. Traditional authentication utilizes a name and a fixed password. However, fixed passwords have limitations, mainly in the area of security. Many modern authentication mechanisms utilize "one-time" passwords or challenge-response query. TACACS+ is designed to support all of these, and be powerful enough to handle any future mechanisms. Authentication generally takes place when the user first logs in to a machine or requests a service of it.
    • TACACS/TACACS+ Authorization - Authorization is the action of determining what a user is allowed to do. Generally authentication precedes authorization, but again, this is not required. An authorization request may indicate that the user is not authenticated (we don't know who they are). TACACS+ authorization does not merely provide yes or no answers, but it may also customize the service for the particular user. The TACACS+ server might respond to these requests by allowing the service, but placing a time restriction on the login shell, or by requiring IP access lists on the PPP connection.
    • TACACS/TACACS+ Accounting - Accounting is typically the third action after authentication and authorization. But again, neither authentication nor authorization is required. Accounting is the action of recording what a user is doing, and/or has done. TACACS+ Accounting can serve two purposes: It may be used as an auditing tool for security services. It may also be used to account for services used, such as in a billing environment.


  • Authentication Flow
    There are 3 types of packets which are exchanged in tacacs+ authentication flow,they are -
    • 1. START
    • 2. REPLY
    • 3. CONTINUE


    • At first the client sends the START packet to the TACACS server. Every packet sent either way consists of 12 byte Packet header followed by distinguished packet body.The START body packet consists of different fields such as Action, privilege level, authentication type, port, user, remote address and data.
    • The server responds with the REPLY packet. The packet either consist of a request for more information (GETDATA, GETUSER or GETPASS) or a termination (PASS or FAIL).When the REPLY status equals TAC_PLUS_AUTHEN_STATUS_GETDATA, TAC_PLUS_AUTHEN_STATUS_GETUSER or TAC_PLUS_AUTHEN_STATUS_GETPASS, then authentication continues and the SHOULD provide server_msg content for the client to prompt the user for more information.
    • The client MUST then return a CONTINUE packet containing the requested information in the user_msg field. All three cause the same action to be performed, but the use of TAC_PLUS_AUTHEN_STATUS_GETUSER, indicates to the client that the user response will be interpreted as a username, and for TAC_PLUS_AUTHEN_STATUS_GETPASS, that the user response represents will be interpreted as a password.
    • After accepting all the required information server authenticates the client with the same REPLY packet.


  • Authorization Flow
    There are 2 types of packets which are exchanged in tacacs+ authorization flow,they are -
    • 1. REQUEST
    • 2. RESPONSE


    • TACACS+ protocol provides an extensible way of providing remote authorization services. An authorization session is defined as a single pair of messages, a REQUEST followed by a RESPONSE.
    • The authorization REQUEST message contains a fixed set of fields that indicate how the user was authenticated or processed and a variable set of arguments that describe the services and options for which authorization is requested.
    • The RESPONSE contains a variable set of response arguments (attribute-value pairs) that can restrict or modify the clients actions.
    • The arguments in both a REQUEST and a RESPONSE can be specified as either mandatory or optional. An optional argument is one that may or may not be used, modified or even understood by the recipient.



  • Accounting Flow
    There are 2 types of packets which are exchanged in tacacs+ accounting flow,they are -
    • 1. REQUEST
    • 2. REPLY


    • TACACS+ accounting is very similar to authorization. The packet format is also similar. There is a fixed portion and an extensible portion. The extensible portion uses all the same attribute-value pairs that authorization uses, and adds several more.
    • The extra field that the request packet body contain is the ‘flags’ field which may consist of START(0x02), STOP(0x04) or WATCHDOG(0x08) value.
    • The response to an accounting message is used to indicate that the accounting function on the server has been completed. The server will reply with success only when the record has been committed to the required level of security, relieving the burden on the client from ensuring any better form of accounting is required.




references:

https://en.wikipedia.org/wiki/TACACS

Saturday, October 9, 2021

Whatis queries tag on Android manifest file


Specifies the set of other apps that an app intends to interact with. These other apps can be specified by package nameby intent signature, or by provider authority, as described in later sections on this page.



references:

https://stackoverflow.com/questions/62969917/how-to-fix-unexpected-element-queries-found-in-manifest-error

https://developer.android.com/guide/topics/manifest/queries-element


Thursday, September 16, 2021

Pod install fails in M1 chipset.

 Below error was receiving when attempting to pod install 


### Error


```

LoadError - dlopen(/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.3/lib/ffi_c.bundle, 0x0009): could not use '/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.3/lib/ffi_c.bundle' because it is not a compatible arch - /Library/Ruby/Gems/2.6.0/gems/ffi-1.15.3/lib/ffi_c.bundle

/Library/Ruby/Site/2.6.0/rubygems/core_ext/kernel_require.rb:85:in `require'

/Library/Ruby/Site/2.6.0/rubygems/core_ext/kernel_require.rb:85:in `require'

/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.3/lib/ffi.rb:5:in `rescue in <top (required)>'

/Library/Ruby/Gems/2.6.0/gems/ffi-1.15.3/lib/ffi.rb:2:in `<top (required)>'

/Library/Ruby/Site/2.6.0/rubygems/core_ext/kernel_require.rb:85:in `require'

/Library/Ruby/Site/2.6.0/rubygems/core_ext/kernel_require.rb:85:in `require'

/Library/Ruby/Gems/2.6.0/gems/ethon-0.14.0/lib/ethon.rb:3:in `<top (required)>'

/Library/Ruby/Site/2.6.0/rubygems/core_ext/kernel_require.rb:85:in `require'

/Library/Ruby/Site/2.6.0/rubygems/core_ext/kernel_require.rb:85:in `require'

/Library/Ruby/Gems/2.6.0/gems/typhoeus-1.4.0/lib/typhoeus.rb:2:in `<top (required)>'

/Library/Ruby/Site/2.6.0/rubygems/core_ext/kernel_require.rb:85:in `require'

/Library/Ruby/Site/2.6.0/rubygems/core_ext/kernel_require.rb:85:in `require'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/sources_manager.rb:74:in `cdn_url?'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/sources_manager.rb:36:in `create_source_with_url'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/sources_manager.rb:21:in `find_or_create_source_with_url'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:178:in `block in sources'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:177:in `map'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:177:in `sources'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:1073:in `block in resolve_dependencies'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/user_interface.rb:64:in `section'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:1072:in `resolve_dependencies'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer/analyzer.rb:124:in `analyze'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:414:in `analyze'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:239:in `block in resolve_dependencies'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/user_interface.rb:64:in `section'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:238:in `resolve_dependencies'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/installer.rb:160:in `install!'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command/install.rb:52:in `run'

/Library/Ruby/Gems/2.6.0/gems/claide-1.0.3/lib/claide/command.rb:334:in `run'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/lib/cocoapods/command.rb:52:in `run'

/Library/Ruby/Gems/2.6.0/gems/cocoapods-1.10.1/bin/pod:55:in `<top (required)>'

/usr/local/bin/pod:23:in `load'

/usr/local/bin/pod:23:in `<main>'

```


――― TEMPLATE END ――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――――


[!] Oh no, an error occurred.


Search for existing GitHub issues similar to yours:

https://github.com/CocoaPods/CocoaPods/search?q=dlopen%28%2FLibrary%2FRuby%2FGems%2F2.6.0%2Fgems%2Fffi-1.15.3%2Flib%2Fffi_c.bundle%2C+0x0009%29%3A+could+not+use+%27%2FLibrary%2FRuby%2FGems%2F2.6.0%2Fgems%2Fffi-1.15.3%2Flib%2Fffi_c.bundle%27+because+it+is+not+a+compatible+arch+-+%2FLibrary%2FRuby%2FGems%2F2.6.0%2Fgems%2Fffi-1.15.3%2Flib%2Fffi_c.bundle&type=Issues


If none exists, create a ticket, with the template displayed above, on:

https://github.com/CocoaPods/CocoaPods/issues/new


Be sure to first read the contributing guide for details on how to properly submit a ticket:

https://github.com/CocoaPods/CocoaPods/blob/master/CONTRIBUTING.md


Don't forget to anonymize any private data!


Looking for related issues on cocoapods/cocoapods...

 - M1 error running pod install

   https://github.com/CocoaPods/CocoaPods/issues/10904 [closed] [2 comments]

   2 days ago


 - Pod outdated error

   https://github.com/CocoaPods/CocoaPods/issues/10901 [closed] [3 comments]

   2 days ago


 - macBook m1 error run pod install

   https://github.com/CocoaPods/CocoaPods/issues/10903 [closed] [2 comments]

   a week ago


and 2 more at:

https://github.com/cocoapods/cocoapods/search?q=dlopen%28%2FLibrary%2FRuby%2FGems%2F2.6.0%2Fgems%2Fffi-1.15.3%2Flib%2Fffi_c.bundle%2C%200x0009%29%3A%20could%20not%20use%20%27%2FLibrary%2FRuby%2FGems%2F2.6.0%2Fgems%2Fffi-1.15.3%2Flib%2Fffi_c.bundle%27%20because%20it%20is%20not%20a%20compatible%20arch%20-%20%2FLibrary%2FRuby%2FGems%2F2.6.0%2Fgems%2Fffi-1.15.3%2Flib%2Fffi_c.bundle&type=Issues&utf8=✓

\W $pod install

Analyzing dependencies


――― MARKDOWN TEMPLATE ―――――――――――――――――――――――――――――――――――――――――――――――――――――――――――


### Command


```

/usr/local/bin/pod install

```


### Report


* What did you do?


* What did you expect to happen?


* What happened instead?



### Stack


```

   CocoaPods : 1.10.1

        Ruby : ruby 2.6.3p62 (2019-04-16 revision 67580) [universal.arm64e-darwin20]

    RubyGems : 3.2.21

        Host : macOS 11.4 (20F71)

       Xcode : 12.5.1 (12E507)

         Git : git version 2.30.1 (Apple Git-130)

Ruby lib dir : /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib

Repositories : trunk - CDN - https://cdn.cocoapods.org/

```


### Plugins


```

cocoapods-deintegrate : 1.0.4

cocoapods-plugins     : 1.0.0

cocoapods-search      : 1.0.0

cocoapods-trunk       : 1.5.0

cocoapods-try         : 1.2.0

```


### Podfile


```ruby

source 'https://github.com/CocoaPods/Specs'




Below was to fix this issue 


$sudo arch -x86_64 gem install ffi

\W $arch -x86_64 pod install     



This installed the pods successfully