My First Component to Toggle Color and Color Name

 import { Fragment, useState, useReducer } from 'react';

function reducer(state, action) {

  console.log(state);

  console.log(action);

  switch (action.type) {

    case 'Green':

      return action.type;

      break;

    case 'Red':

      return action.type;

      break;

    case 'Yellow':

      return action.type;

      break;

    case 'Pink':

      return action.type;

      break;

  }

  return state;

}

function Toggle() {

  //const [state, setState] = useState('pink');

  const [state, dispatch] = useReducer(reducer, 'Pink');

  return (

    <Fragment>

      The color is{' '}

      <span style={{ backgroundColor: state, padding: '5px' }}> {state} </span>

      <button

        onClick={() => {

          dispatch({ type: 'Green' });

        }}

      >

        Green

      </button>

      <button

        onClick={() => {

          dispatch({ type: 'Red' });

        }}

      >

        Red

      </button>

      <button

        onClick={() => {

          dispatch({ type: 'Yellow' });

        }}

      >

        Yellow

      </button>

      <button

        onClick={() => {

          dispatch({ type: 'Pink' });

        }}

      >

        Pink

      </button>

    </Fragment>

  );

}

export default Toggle;

Drupal 8 programmatically get list of themes installed

 To get list of themes on a Drupal site programmatically, please use following code:

  $modulesList = \Drupal::service('extension.list.theme')->reset()->getList();
  if (! empty($modulesList)) {
    echo "<strong>Themes List:</strong>";
    echo "<br/>";
    foreach ($modulesList as $moduleName => $moduleObj) {
      echo "<br/>";
      echo '<strong>Machine Name: </strong>' . $moduleName;
      echo "<br/>";
      echo '<strong>Humand Readable Name: </strong>' . $moduleObj->info['name'];
      echo "<br/>";
      echo '<strong>Description: </strong>' . $moduleObj->info['description'];
      echo "<br/>";
      echo '<strong>Package: </strong>' . $moduleObj->info['package'];
      echo "<br/>";
      echo "-----------------------------------------------------------------";
    }
  }

Output:

Themes List:

Machine Name: bartik
Humand Readable Name: Bartik
Description: A flexible, recolorable theme with many regions and a responsive, mobile-first layout.
Package: Core
-----------------------------------------------------------------
Machine Name: claro
Humand Readable Name: Claro
Description: A clean, accessible, and powerful Drupal administration theme.
Package: Core
-----------------------------------------------------------------
Machine Name: classy
Humand Readable Name: Classy
Description: A base theme with sensible default CSS classes added. Learn how to use Classy as a base theme in the Drupal 8 Theming Guide.
Package: Core
-----------------------------------------------------------------
Machine Name: seven
Humand Readable Name: Seven
Description: The default administration theme for Drupal 8 was designed with clean lines, simple blocks, and sans-serif font to emphasize the tools and tasks at hand.
Package: Core
-----------------------------------------------------------------
Machine Name: stable
Humand Readable Name: Stable
Description: A default base theme using Drupal 8.0.0's core markup and CSS.
Package: Core
-----------------------------------------------------------------

Drupal 8 get List of modules programmatically.

To get list of modules programmatically, please use following code:

  $modulesList = \Drupal::service('extension.list.module')->reset()->getList();
  if (! empty($modulesList)) {
    echo "<strong>Modules List:</strong>";
    echo "<br/>";
    foreach ($modulesList as $moduleName => $moduleObj) {
      echo "<br/>";
      echo '<strong>Machine Name: </strong>' . $moduleName;
      echo "<br/>";
      echo '<strong>Humand Readable Name: </strong>' . $moduleObj->info['name'];
      echo "<br/>";
      echo '<strong>Description: </strong>' . $moduleObj->info['description'];
      echo "<br/>";
      echo '<strong>Package: </strong>' . $moduleObj->info['package'];
      echo "<br/>";
      echo "-----------------------------------------------------------------";
    }
  }

Output:

Modules List:

Machine Name: action
Humand Readable Name: Actions
Description: Perform tasks on specific events triggered within the system.
Package: Core
-----------------------------------------------------------------
Machine Name: aggregator
Humand Readable Name: Aggregator
Description: Aggregates syndicated content (RSS, RDF, and Atom feeds) from external sources.
Package: Core
-----------------------------------------------------------------
Machine Name: automated_cron
Humand Readable Name: Automated Cron
Description: Provides an automated way to run cron jobs, by executing them at the end of a server response.
Package: Core
-----------------------------------------------------------------
Machine Name: ban
Humand Readable Name: Ban
Description: Enables banning of IP addresses.
Package: Core
-----------------------------------------------------------------
Machine Name: basic_auth
Humand Readable Name: HTTP Basic Authentication
Description: Provides the HTTP Basic authentication provider
Package: Web services
-----------------------------------------------------------------

......

Drush command line get Drupal 8 Version

 We can get Drupal 8 version using Drush also.

drush st as a shortcut (alias) for 

drush status

Output:

 drush st

 Drupal version   : 8.8.0

 Site URI         : http://default

 DB driver        : pgsql

 DB hostname      : localhost

 DB port          : 5432

 DB username      : postgres

 DB name          : prod

 Database         : Connected

 Drupal bootstrap : Successful

 Default theme    : wealth

 Admin theme      : seven

 PHP binary       : E:\wamp64\bin\php\php7.3.21\php.exe

 PHP config       : E:\wamp64\bin\php\php7.3.21\php.ini

 PHP OS           : WINNT

 Drush script     : C:\Users\USERNAME\drush9\vendor\drush\drush\drush

 Drush version    : 9.7.2

 Drush temp       : C:\Users\AMOLBH~1\AppData\Local\Temp

 Drush configs    : C:/Users/Amol

                    Bhavsar/drush9/vendor/drush/drush/drush.yml

 Install profile  : minimal

 Drupal root      : E:\wamp64\www\drupal_installation

 Site path        : sites/default

 Files, Public    : sites/default/files

 Files, Private   : private

 Files, Temp      : /tmp

Windows 10: How to open a program on start up?

To open a program(Google Chrome, Outlook) on start up, please follow these steps:

1. Click on Window button, you will see Outlook icon.
2. Right click on Outlook, mouse over on More, click on Open File Location.
3. A folder will be opened with the shortcut to it.
4. Copy the shortcut icon.
5. Keyboard: Press Window + R
6. In the textbox, type shell:startup
7. A folder will be opened
8. Paste the Outlook shortcut icon here.
9. Restart the machine.
10. Now, Outlook will be opened whenever we start the machine.

How to make a text unreadable using CSS?

Imagine you are working on a page where you want to blur a text to make it unreadable for Anonymous users.

Please see the example below in the image:

This is achievable using CSS:

.class-name {

 text-shadow: 7px 7px 7px #0000;

 color: transparent;

}

That's it. All elements with class class-name will blur to become unreadable.

Drupal 8 Blocks: Visibility Hide/Show for certain Roles.

 In Drupal 8, while showing any block, there are visibility settings where, we can select which pages the block can be visible.

The same form has an underlying functionality to hide the block for the selected list or URLs.

Unfortunately, the same is not the case of Roles.

You can select which roles you want to display the block, but, you cannot select which Roles you want to hide the block.

Following code adds a Negate condition to Roles Visibility:

/* Negate the condition to decide visibility of which user roles to show/hide. */

function YOUR_MODULE_form_block_form_alter(&$form, \Drupal\Core\Form\FormStateInterface $form_state, $form_id) {

$form['visibility']['user_role']['negate'] = [

'#type' => 'radios',

                '#title' => '',

'#default_value' => 0,

'#options' => [

t('Show for selected Roles'),

t('Hide for selected Roles'),

],

];

}

This adds two radio buttons under the form: Roles.

Following is the screen shot for the same: