import secrets
jwt_secret_key = secrets.token_hex(32)

423c984f59fff65efcbb055cdcac8f32162db4d8561b3007a6cb80703f86d702

• Node.js: 14.17.0 → 20.9.0
• Ruby: 2.6.8 → 3.2.2
• Elixir: 1.9.4 → 1.15.6
• Python: 3.7.10 → 3.11.6

import { configureStore } from '@reduxjs/toolkit';

import counterReducer from './counter';
import authReducer from './auth';

const store = configureStore({
  reducer: { counter: counterReducer, auth: authReducer },
});

export default store;

import { createSlice } from '@reduxjs/toolkit';

const initialCounterState = { counter: 0, showCounter: true };

const counterSlice = createSlice({
  name: 'counter',
  initialState: initialCounterState,
  reducers: {
    increment(state) {
      state.counter++;
    },
    decrement(state) {
      state.counter--;
    },
    increase(state, action) {
      state.counter = state.counter + action.payload;
    },
    toggleCounter(state) {
      state.showCounter = !state.showCounter;
    },
  },
});

export const counterActions = counterSlice.actions;

export default counterSlice.reducer;

import { useSelector, useDispatch } from 'react-redux';

import { counterActions } from '../store/counter';

const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter.counter);
  const show = useSelector((state) => state.counter.showCounter);

  const incrementHandler = () => {
    dispatch(counterActions.increment());
  };

  const increaseHandler = () => {
    dispatch(counterActions.increase(10)); // { type: SOME_UNIQUE_IDENTIFIER, payload: 10 }
  };

  const decrementHandler = () => {
    dispatch(counterActions.decrement());
  };

  const toggleCounterHandler = () => {
    dispatch(counterActions.toggleCounter());
  };

  return (
    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      {show && <div className={classes.value}>{counter}</div>}
      <div>
        <button onClick={incrementHandler}>Increment</button>
        <button onClick={increaseHandler}>Increase by 10</button>
        <button onClick={decrementHandler}>Decrement</button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

export default Counter;

import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import store from './store/index';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

import { createStore } from 'redux';

const initialState = { counter: 0, showCounter: true };

const counterReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'increment':
      return {
        ...state,
        counter: state.counter + 1
      }
    case 'increase':
      return {
        ...state,
        counter: state.counter + action.amount
      }
    case 'decrement':
      return {
        ...state,
        counter: state.counter - 1
      }
    case 'toggle':
      return {
        ...state,
        showCounter: !state.showCounter
      }
    default:
      return state;
  }
};

const store = createStore(counterReducer);

export default store;

import { useSelector, useDispatch } from 'react-redux';

const Counter = () => {
  const dispatch = useDispatch();
  const counter = useSelector((state) => state.counter);
  const show = useSelector((state) => state.showCounter);

  const incrementHandler = () => {
    dispatch({ type: 'increment' });
  };

  const increaseHandler = () => {
    dispatch({ type: 'increase', amount: 10 });
  };

  const decrementHandler = () => {
    dispatch({ type: 'decrement' });
  };

  const toggleCounterHandler = () => {
    dispatch({ type: 'toggle' });
  };

  return (
    <main className={classes.counter}>
      <h1>Redux Counter</h1>
      {show && <div className={classes.value}>{counter}</div>}
      <div>
        <button onClick={incrementHandler}>Increment</button>
        <button onClick={increaseHandler}>Increase by 10</button>
        <button onClick={decrementHandler}>Decrement</button>
      </div>
      <button onClick={toggleCounterHandler}>Toggle Counter</button>
    </main>
  );
};

export default Counter;

import ReactDOM from 'react-dom/client';
import App from './App';
import { Provider } from 'react-redux';
import store from './store/index';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(
  <Provider store={store}>
    <App />
  </Provider>
);

// shallow clone/copy:
let arr2 = [].concat(arr1);
let arr3 = [...arr1];
let obj2 = Object.assign({}, obj1); 
let obj3 = {...obj1};

// deep clone/copy
let obj2 = JSON.parse(JSON.stringify(obj1)); // old approach
let obj3 = structuredClone(obj1); // new approach

1. Mkdir .github/workflows in repo
2. Create below secrets in Repo Settings
   AWS_ACCESS_KEY_ID
   AWS_SECRET_ACCESS_KEY
   AWS_REGION
   BUCKET_NAME
3. Below is sample workflow for vue project. Add it in .github/workflows/buid-and-deploy-to-s3.yml

name: build-and-deploy-to-s3
on:
  push:
    branches:
      - master
jobs:
  build-and-deploy-to-s3:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Git Repo
        uses: actions/checkout@v4

      - name: Install Node
        uses: actions/setup-node@v4

      - name: Install Dependencies
        run: npm install

      - name: Build Website
        run: npm run build

      - name: Configure AWS Credentials
        uses: aws-actions/configure-aws-credentials@v4
        with:
          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
          aws-region: ${{ secrets.AWS_REGION }}

      - name: Delete js assets
        run: rm -rf ./dist/js

      - name: Deploy static site to S3 bucket
        run: aws s3 sync ./dist/ s3://${{ secrets.BUCKET_NAME }} --delete --no-progress

The Free plan lets you run a single non-highly available Redis database with up to 30MB and 30 connections, forever (or as long as you use it)! It lets you run Redis Enterprise Cloud in a selected region across all three major public clouds (Amazon Web Services, Microsoft Azure, and Google Cloud). You can use  all available Redis modules: RediSearch, RedisJSON, RedisGraph, RedisTimeSeries, and RedisBloom. Best of all, it’s totally free, no credit card required. 

https://redis.com/blog/new-pricing-for-redis-enterprise-cloud/

1. Log in to the server using ssh client of your choice using the private key.

ssh -i your-key.pem username@(public-ip-address)

1. Open the sshd_config file.

sudo vi /etc/ssh/sshd_config

1. Find the line containing “PasswordAuthentication” parameter and change its value from “no” to “yes“

PasswordAuthentication yes

1. Setup ec2 user password using the “passwd” command.

sudo passwd ubuntu

1. Now, restart the “sshd” service using the following command.

sudo service sshd restart

1. Now you can log out and log in using the password you set for the user. For example,

ssh ubuntu@35.162.225.240

router.beforeEach((to, from, next) => {
  if (to.meta.requiresAuth && !store.getters.isAuthenticated) {
    next("/login'):
  } else if (to.meta.requiresUnauth && store.getters.isAuthenticated) {
    next("/home");
  } else {
    next():
  }
});

{
    "rules": {
        "coaches": {
            ".read": true,
            ".write": "auth != null"
        },
        "requests" : {
            "•read": "auth != null",
            ".write": true
        }
    }
}

Create a project:

$ composer create-project drupal/recommended-project:9.3.1 my_site_name_dir
 

This will create a project in 'my_site_name_dir' and automatically executes composer install to download the latest stable version of Drupal and all its dependencies.

Your 'my_site_name_dir' will contain files that should be outside of your web root and not  accessible by the web server. The web root will be 'my_site_name_dir/web'.

Install Php Filter:

$ composer require.  drupal/php
 

Alternate Installation:

Clone the below repo

https://github.com/apfromiit/drupal9

and run $ composer install

Add File Permissions:

$ sudo chmod +777 web/sites/default/files

Copy default.settings.php to settings.php

$ sudo chmod +777 web/sites/default/settings.php
 

Open in browser to complete the setup.

Remove File Permissions:

$ sudo chmod 755 web/sites/default/settings.php

Add new item to Main Navigation Menu:

Step 1: Create a tagname in Taxonomy:

Step 2: Create a page view for new menu item:

Now, adding tags to article will render the article in corresponding page.

We can remove the unwanted blocks by deleting them on the context menu provided on top right corner of every blocks.

import redux from 'redux';

const reducer = (state = { counter: 0 }, action) => {
    switch (action.type) {
        case 'INCREMENT':
            return { counter: state.counter + 1 };
        case 'DECREMENT':
            return { counter: state.counter - 1 };
        default:
            return state;
    }
};

const subscriber = () => {
    const latestState = store.getState();
    console.log(latestState);
};

const store = redux.createStore(reducer);
store.subscribe(subscriber);

store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });
store.dispatch({ type: 'DECREMENT' });

{ counter: 1 }
{ counter: 2 }
{ counter: 1 }
{ counter: 0 }

I use Angular 4 at work for building a single page application. Today, I faced the problem where I had to use different base paths for router and static assets. Angular makes use of the base href to tell router how to compose navigation URLs. If your application exists at the root, then you can use / as the href value as shown below.

<base href="/">

I wanted to use /users as my application base for router and /public as base for my assets.

If you build the project the Angular project for the production environment using the default values you will get the following index.html generated.

ng build -prod

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SampleNgApp</title>
    <base href="/">
    
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="styles.xxxx.bundle.css" rel="stylesheet"/>
  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

This generated page will not work as it router will use / as base for composing navigation URLs and static assets will be looked in the current directory.

To solve my problem, I used —-base-href and —-deploy-url options as shown below.

ng build -prod --base-href /users --deploy-url /public

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>SampleNgApp</title>
    <base href="/users">

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="icon" type="image/x-icon" href="favicon.ico">
    <link href="/public/styles.xxxx.bundle.css" rel="stylesheet"/>
  </head>
  <body>
    <app-root>Loading...</app-root>
  </body>
</html>

This way I solved my problem.

pip install vulture

vulture --ignore-decorators @app.route <path>

<script src="https://unpkg.com/vue@latest"></script>
<script src="https://unpkg.com/axios@latest"></script>

<div id="app">
  {{ message }}
</div>

<script>
App = {
  data() {
    return {
        message: "Hello world!"
    }
  }
}

Vue.createApp(App).mount('#app');
</script>

How to deploy static website to Heroku?

• git clone https://github.com/heroku/php-getting-started.git
• Replace contents of web/ with your static website.
• Replace contents of composer.json with {}
• Remove composer.lock
• Save changes and do git commit.
• heroku login -i
• heroku create <app-name>
• git push heroku main
• heroku open

fetch(url)
.then(data => data.json())
.then(data => { console.log(data); })
.catch(error => alert(error));

import hashlib

str2hash = "test"
result = hashlib.sha256(str2hash.encode()).hexdigest()
print("sha256", len(result), result)

str2hash = "test"
result = hashlib.md5(str2hash.encode()).hexdigest()
print("md5", len(result), result)

sha256 64 9f86d081884c7d659a2feaa0c55ad015a3bf4f1b2b0b822cd15d6c15b0f00a08
md5 32 098f6bcd4621d373cade4e832627b4f6

Recursive Function:

Solution:

1. Clone json-server-heroku repo
2. Place json data in db.json and commit
3. heroku login
4. heroku create
5. git push heroku master

Note: Changes to db are non persistent. Heroku free dyno would become idle if no api request for 30 minutes. Heroku loads original db on next cold start.

import pandas as pd

df = pd.read_csv("data.csv", low_memory=False)
df.to_json("data.json", orient="records")
print("Done")

Mac

1. pip install virtualenv
2. virtualenv -p python3.11 venv
3. source venv/bin/activate

Windows

1. pip install virtualenv
2. virtualenv venv
3. .\venv\Scripts\activate

Requirements:

pip install firebase-admin

Write to firebase RTDB:

import firebase_admin, json
from firebase_admin import credentials, db

cred = credentials.Certificate("credentials.json")
firebase_app = firebase_admin.initialize_app(cred, {
    'databaseURL': 'https://<projectid>-default-rtdb.firebaseio.com'
})
with open("data.json") as json_file:
    data = json.load(json_file)
    ref = db.reference("sample_key")
    ref.set(data)
firebase_admin.delete_app(firebase_app)

Read from firebase RTDB:

import firebase_admin
from firebase_admin import credentials, db

cred = credentials.Certificate("credentials.json")
firebase_app = firebase_admin.initialize_app(cred, {
    'databaseURL': 'https://<projectid>-default-rtdb.firebaseio.com'
})
ref = db.reference("sample_key")
data = ref.get()
firebase_admin.delete_app(firebase_app)

RTDB security rules:

{
  "rules": {
    ".read": false,
    ".write": false
  }
}

Error:

Solution:

1. wget https://sourceforge.net/projects/libpng/files/libpng15/older-releases/1.5.15/libpng-1.5.15.tar.gz/download -O libpng-1.5.15.tar.gz
2. tar -zxvf libpng-1.5.15.tar.gz
3. cd libpng-1.5.15
4. sudo yum groupinstall -y "Development Tools"
5. ./configure --prefix=/usr
6. sudo make install
7. sudo yum install -y libtiff

Error:

Solution:

• sudo wget http://pastebin.com/raw.php?i=AmfYN3er -O /etc/fonts/conf.d/10-wkhtmltopdf.conf

<picture>
  <source media="(min-width: 650px)" srcset="img1.jpg">
  <source media="(min-width: 465px)" srcset="img2.jpg">
  <img src="img3.jpg">
</picture>

{
    "glob": "**/*",
    "input": "node_modules/ngx-monaco-editor/assets/monaco",
    "output": "./assets/monaco/"
}

import { MonacoEditorModule, NgxMonacoEditorConfig } from 'ngx-monaco-editor';

const defaultEditorConfig: NgxMonacoEditorConfig = {
  defaultOptions: {
    theme: 'vs-dark',
    automaticLayout: true,
    minimap: {
      enabled: false
    },
    scrollBeyondLastLine: false,
    scrollbar: {
      vertical: "hidden",
      horizontal: "hidden"
    }
  }
};

MonacoEditorModule.forRoot(defaultEditorConfig)

editorOptions = { language: 'python' };

<ngx-monaco-editor [options]="editorOptions" [(ngModel)]="html"></ngx-monaco-editor>

1. Go to System Preferences > Security & Privacy > Privacy > Full Disk Access:

2. Click on the (+) icon to add an item to the list. Press command+shift+G to open the Go to Folder… dialog, type /usr/sbin/cron and press Enter:

3. Select the cron file and click Open:

That’s it!

• npm install eslint --save-dev
• npx eslint --init
• npx eslint yourfile.js

Reference: ESLint

Simple Interest Calculator

declare const PR: any;

ngAfterViewChecked() {
    PR.prettyPrint();
}

li.L0, li.L1, li.L2, li.L3,
li.L5, li.L6, li.L7, li.L8 {
    list-style-type: decimal !important;
}

pre.prettyprint {
    border-radius: 0;
    white-space: pre;
}

<pre class="prettyprint linenums lang-cpp">
...
Place the code here
...
</pre>

• pip install labels
• labels -u <username> -t <token> fetch -o <owner> -r <repo>
• labels -u <username> -t <token> sync -o <owner> -r <repo> -f <path/to/labels.toml>