Categories
Uncategorized

How to fix command not found : code

Step 1: Locate the vs-code executable file.

Step 2 : Edit ~/.bash_profile or  ~/.zshrc

export PATH="$PATH:/Applications/Visual Studio Code.app/Contents/Resources/app/bin"

Step 3: Restart your terminal to make change and try to open any files with code command again. That’s all!

Hope this help

Categories
Uncategorized

How to store access token securely in React Native

Async Storage#

Async Storage is a community-maintained module for React Native that provides an asynchronous, unencrypted, key-value store. Async Storage is not shared between apps: every app has its own sandbox environment and has no access to data from other apps.

DO USE ASYNC STORAGE WHEN…DON’T USE ASYNC STORAGE FOR…
Persisting non-sensitive data across app runsToken storage
Persisting Redux stateSecrets
Persisting GraphQL state
Storing global app-wide variables

Secure Storage#

React Native does not come bundled with any way of storing sensitive data. However, there are pre-existing solutions for Android and iOS platforms.

iOS – Keychain Services#

Keychain Services allows you to securely store small chunks of sensitive info for the user. This is an ideal place to store certificates, tokens, passwords, and any other sensitive information that doesn’t belong in Async Storage.

Android – Secure Shared Preferences#

Shared Preferences is the Android equivalent for a persistent key-value data store. Data in Shared Preferences is not encrypted by default, but Encrypted Shared Preferences wraps the Shared Preferences class for Android, and automatically encrypts keys and values.

Android – Keystore#

The Android Keystore system lets you store cryptographic keys in a container to make it more difficult to extract from the device.

In order to use iOS Keychain services or Android Secure Shared Preferences, you can either write a bridge yourself or use a library which wraps them for you and provides a unified API at your own risk. Some libraries to consider:

Ref: https://reactnative.dev/docs/security

Categories
Uncategorized

WordPress React Gutenberg

How this code will be looked when i call wp.element?

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};
  }

  componentDidMount() {
    this.timerID = setInterval(
      () => this.tick(),
      1000
    );
  }

  componentWillUnmount() {
    clearInterval(this.timerID);
  }

  tick() {
    this.setState({
      date: new Date()
    });
  }

  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>It is {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}

ReactDOM.render(
  <Clock />,
  document.getElementById('root')
);

wp.element is basically a React wrapper. Your code can look like this if you use wp.element

const { Component, render } = wp.element;

class Clock extends Component {
...rest of the code
}

render(
  <Clock />,
  document.getElementById('root')
);

Or you can keep using React too as it already ships with WordPress, in which case set it as an external in webpack so it isn’t bundled with your build and instead takes it from the WP Core.

Hope this helps!

Ref: https://wordpress.org/support/topic/reactjs-in-wpwp-elemet/

Categories
Uncategorized

PHP Formatter in VS Code

PHP CS Fixer Installation

Go to extension menu, searching for PHP CS Fixer and install it.

PHP CS Fixer for Visual Studio Code

PHP CS Fixer Configuration

After installed, go to setting and place following snippet below php-cs-fixer.executablePath

"php-cs-fixer.executablePath": "${extensionPath}/php-cs-fixer.phar",
"": {
    "editor.defaultFormatter": "junstyle.php-cs-fixer",
    "editor.formatOnSave": true
},
"php-cs-fixer.rules": "@PSR2",
"php-cs-fixer.formatHtml": true,
PHP CS Fixer Configuation in Setting
Right click to format PHP code

And happy coding!