Forem: Shiva Bhusal

PGP and GPG Explained: Encrypt Files and Verify Authenticity

Shiva Bhusal — Tue, 27 Jan 2026 16:19:06 +0000

In url this video, I explain what PGP and GPG are, how they are related to the OpenPGP standard, and how they are used in practice to secure data.

You’ll learn:

What PGP and GPG are and how they differ
How public-key cryptography works in OpenPGP
How to encrypt a file so only the intended recipient can read it
How digital signatures work
How to verify the authenticity and integrity of a file using GPG

This video is intended for developers and technical learners who want a clear, practical understanding of file encryption and authenticity verification using GPG, without unnecessary complexity.

Best Sites for Information on DOTM and Nepal Government Processes

Shiva Bhusal — Tue, 26 Sep 2023 06:47:40 +0000

Navigating government processes can often be a complex and confusing task. Whether you're a resident of Nepal looking to understand the Department of Transport Management (DOTM) or trying to unravel the intricacies of Nepal's governmental procedures, having access to reliable sources of information is crucial. Here are some of the best websites that provide valuable insights into DOTM and various Nepal government processes:

Official DOTM Website
- DOTM Official Website

The official website of the Department of Transport Management (DOTM) is the primary source for information related to vehicle registration, driving licenses, and transportation regulations in Nepal. Here, you can find the latest updates, forms, and guidelines for various services offered by DOTM.

Nepal Government Official Portal
- Nepal Government Official Portal

The official portal of the Government of Nepal is a comprehensive resource for a wide range of government-related information. It covers various government processes, services, policies, and updates. You can access essential documents, forms, and links to different government departments from this website.

Shiva's Blog: How to Apply for a New Driving License in Nepal
- Link to the Article

Shiva's Blog provides an informative article on how to apply for a new driving license in Nepal. This step-by-step guide includes valuable insights into the application process, document requirements, and tips for a successful application. It's an excellent resource for those seeking information specifically about obtaining a driving license.

Nepal Law Commission
- Nepal Law Commission

The Nepal Law Commission's website offers access to legal documents, acts, and regulations in Nepal. It's a valuable resource for understanding the legal framework and legislation related to various government processes.

Nepal Rastra Bank
- Nepal Rastra Bank

If you're interested in financial matters or currency-related government processes, the Nepal Rastra Bank's website provides essential information. This includes updates on exchange rates, monetary policies, and financial regulations in Nepal.

Nepal Tax Portal
- Nepal Tax Portal

For tax-related queries and government processes related to taxation in Nepal, the Nepal Tax Portal is the go-to source. You can find information on tax forms, policies, and procedures for both individuals and businesses.

These websites are valuable resources for anyone seeking information on the Department of Transport Management (DOTM) and various government processes in Nepal. From obtaining driving licenses to understanding legal and financial regulations, these websites cover a wide range of topics to help you navigate Nepal's administrative landscape. Remember to bookmark these sites for easy access to the information you need.

Discover the Best HTML Cheat Sheets

Shiva Bhusal — Tue, 26 Sep 2023 06:44:15 +0000

HTML (Hypertext Markup Language) serves as the foundation of web development, and having quick references in the form of HTML cheat sheets can be a real lifesaver. These cheat sheets simplify the task of looking up HTML tags, attributes, and syntax, enhancing your coding efficiency. Here's a collection of some of the finest HTML cheat sheets, including the one you mentioned:

Oh My Cheat Sheet - HTML Cheat Sheet
- Link to Oh My Cheat Sheet HTML Cheat Sheet

Oh My Cheat Sheet is an excellent resource providing a comprehensive HTML cheat sheet. It covers a wide range of topics, from basic tags to advanced elements and attributes. The cheat sheet is well-structured and features practical examples to assist you in mastering HTML.

Mozilla Developer Network (MDN) HTML Element Reference
- Link to MDN HTML Element Reference

The MDN HTML Element Reference is a goldmine for web developers. While it's not your traditional cheat sheet, it offers thorough documentation on HTML elements, including detailed descriptions, attribute information, and illustrative usage examples. This is the go-to resource for diving deep into HTML.

HTML Cheat Sheet by W3Schools
- Link to W3Schools HTML Cheat Sheet

W3Schools is a well-known destination for web development, and their HTML cheat sheet is a gem. It presents a comprehensive list of HTML tags, along with insights into each tag's attributes and compatibility with different HTML versions.

HTML Cheat Sheet by HTML Dog
- Link to HTML Dog HTML Cheat Sheet

HTML Dog offers a concise yet informative HTML cheat sheet that covers the essentials. It's an excellent quick reference for both beginners and experienced developers, complete with easy navigation.

HTML Cheat Sheet by OverAPI.com
- Link to OverAPI.com HTML Cheat Sheet

OverAPI.com provides a succinct HTML cheat sheet that includes examples and explanations for various HTML elements. This straightforward reference is perfect for quick lookups.

Having these HTML cheat sheets at your fingertips can streamline your web development projects, making coding more efficient and enjoyable. Whether you prefer a one-page reference, comprehensive documentation, or a quick online lookup, these resources cater to your needs. Don't forget to bookmark your favorites, including the invaluable Oh My Cheat Sheet HTML Cheat Sheet, to keep them within reach as you embark on your HTML coding journey. Happy coding!

My Dell 27" Monitor is not supported! by my Macbook Pro

Shiva Bhusal — Sat, 27 Aug 2022 14:35:49 +0000

I recently bought a Dell 27" monitor to use with Macbook pro 13". I had a USB dongle which had a HDMI port. like

Unfortunately connecting the monitor to the Macbook, I saw the following error message in the monitor.

Dell 27 Gaming Monitor
The current input timing is not supported by the monitor display. Please
change your input timing to 1920x1080, 144Hz or any other monitor listed timing as per the monitor specifications.
S2721HGF

Problem

I found that the dongle I was using does not support higher refresh-rate. It was just fine when I used it for USB ports but it did not support 4K monitor and Gaming monitor.

Solution

I then bought a Varbatim USB-C dongle.

Before Toptal Live Coding Interview

Shiva Bhusal — Mon, 25 Jul 2022 08:16:00 +0000

Overview

It will take approximately 1 hour. It looks like

Introduction & Rules
Entering your personal and professional details like
- Your experience for each tech like ruby, js, front-end, backend
- Location,
- Your recent projects & most exciting thing about them kinda stuff
Making sure you(yourself) completed the last coding-challenge.
- they will ask you about the problems
- what you needed to do
- how you approached
2 Algo-problems
- You will get as much time you need to understand the problem. You can ask the interviewer.
- timer starts only when you say you understood.
- You don't have to explain the solution while you solve.
- if you are about to finish 1st in 15 mins then you will be given the 2nd problem.
- you have to share the entire screen, not just a window
- you can google language syntax but not the algo-solution

Preparation Guide

Problems will not be hard because you only have 15 mins
Read & practice lessons from HackerRank, Codility, Project Euler
Take enough time to understand the problem
do brainstorming on paper if you feel so
keep calm, they will normally add extra 2 mins

Toptal Live Interview Questions & Answers

Shiva Bhusal — Sat, 23 Jul 2022 15:05:00 +0000

Q1: What are Divide and Conquer algorithms? Describe how they work. Can you give any common examples of the types of problems where this approach might be used?

Ans: As the name suggests, Divide & Conquer algorithms are a problem solving technique in which we divide the problem into multiple sub-problems. We do so until we reach to a state where no need to further divide and can be solved directly. Then we combine them to get the comprehensive solution.

We can use recursion to implement these solutions.

This technique is used in famous algorithms like binary search, merge sort, quick sort, etc.

Q2. How would you optimally calculate p^k, where k is an integer(positive/negative)? What is the complexity of the solution?

One of the simplest solution would be, multiplying the result with p k times. The time complexity of the solution would be O(k). But there is also a more efficient solution.

For P^k, if k = a * b, then P^k = (P^a)^b; similarly

P^k = (P^2)^(k/2). In this way, we can reduce the number of iteration by half every time. which results O(log(n)) time complexity.

so, looks like the problem can be divided into two sub-problems. This can be solved recursively.

# @param {Float} x
# @param {Integer} n
# @return {Float}

def my_pow(x, n)
  if n == 0
    return 1
  elsif n > 0
    if n.even?
      return my_pow(x*x, n/2)
    else
      return x*my_pow(x*x, (n-1)/2)
    end
  elsif n < 0
    1/my_pow(x,n.abs)
  end
end

Sorting Algorithms

Bogo Sort

This is the most inefficient algorithm which has the best case performance of O(n) and average performance of O((n+1)!).
In this algorithm we shuffle the given array and every-time check if the array is magically sorted or not.

Selection Sort

In this algorithm, if there is a given array a=[2,5,1,3,1,7,3,4], we take another empty array b. Then, we iteratively fill data in array b in ascending order.

The best case, worst case and average complexity is O(n^2).

Insertion Sort

Quick Sort

In this algorithm, we use divide & conquer technique. We partition the given array from a pivot into two arrays in which first array will contain elements that are smaller than the pivot and the other array will contain elements larger than pivot.
We will repeat the process for these two arrays and recursively sort the given array in-place.

JS Implementation

a = [4, 3, 2, -4, 5, 3, 0, 0]

function qs(a, l = 0, r = a.length - 1) {
  if (l > r) return
  const pivot = partition(a, l, r)

  qs(a, l, pivot - 1)
  qs(a, pivot + 1, r)
}

function partition(a, l, r) {
  const pi = a[r]
  let i = l - 1
  for (let j = l; j < r; j++) {
    if (a[j] <= pi) {
      i++;
      swap(a, i, j)
    }
  }
  swap(a, i + 1, r)
  return i + 1
}

function swap(a, i, j) {
  b = a[i];
  a[i] = a[j];
  a[j] = b;
}


console.log("a", a)
qs(a)
console.log("output:", a)

Output

$ node sort.js                                     1 ↵
a [
  4, 3, 2, -4,
  5, 3, 0,  0
]
output: [
  -4, 0, 0, 2,
   3, 3, 4, 5
]

Ruby Implementation

def qs(a, l = 0, r = a.length - 1)
  return if l > r

  pivot = partition(a, l, r)
  qs(a, l, pivot - 1)
  qs(a, pivot + 1, r)
end

def partition(a, l, r)
  pivot = a[r]

  i = l - 1
  j = l
  while j < r
    if a[j] < pivot
      i          += 1
      a[i], a[j] = a[j], a[i]
    end
    j += 1
  end
  a[i + 1], a[r] = a[r], a[i + 1]
  i + 1
end

a = [4, 3, 2, -4, 5, 3, 0, 0]
puts "a: #{a}"
qs(a)
puts "output: #{a}"

Output

$ ruby sort.rb                                   130 ↵
a: [4, 3, 2, -4, 5, 3, 0, 0]
output: [-4, 0, 0, 2, 3, 3, 4, 5]

5 HTML5 tags you did not hear about

Shiva Bhusal — Thu, 06 May 2021 07:37:51 +0000

Generally, programmers and Front End Engineers consider HTML a relatively easier language to learn. Yes, it is easier because you don't have to memorize thousands of language constructs and syntax. However, there are a few tags that are used very rarely which I am going to uncover today.

1. <base>

Specifies the base URL and/or target for the relative URLs on the page.

<head>
  <base href="https://ohmycheatsheet.com/images/" target="_blank">
</head>
<p>
    <img src="demo2x2.jpg" width="100" height="104" alt="puzzle cube"><br />
    <a href="/html/">HTML Code</a>
</p>

2. <ins>

Text that has been inserted.

<p>The Rubik's Cube World Record is 
<del>4.90</del> <ins>4.73</ins> seconds.</p>

3. <param>

Parameter for an object element.

<object data="sound.mp3">
    <param name="autoplay" value="true">
</object>

4. <kbd>

Keyboard input.


<p>Normal text and <kbd>Keyboard input</kbd></p>

5. <keygen>

A Keypair generator field for forms. Not recommended to use because it's not supported in IE/Edge.


<form action="/action.php" method="post">
    Name: <input type="text" name="name">
    Encryption: <keygen name="encript">
    <input type="submit">
</form>

See https://ohmycheatsheet.com/html-cheat-sheet/ for more.

A great way to keep track of all language features oh my cheat sheet

Shiva Bhusal — Mon, 16 Mar 2020 01:55:23 +0000

I have been coding for the last 10 years. I have been through Quick Basic, Visual Basic, C, PHP, Ruby, Javascript and Web UI with CSS, HTML and Bootstrap. Its impossible for anyone to remember all the features and syntax of everything.

Then, I found https://ohmycheatsheet.com . It has everything I need like CSS, HTML, jQUery, Ruby and Javascript cheat sheets.

Some useful links are:-

https://ohmycheatsheet.com/
https://ohmycheatsheet.com/css
https://ohmycheatsheet.com/jquery
https://ohmycheatsheet.com/ruby
https://ohmycheatsheet.com/ruby/Array
https://ohmycheatsheet.com/html
https://ohmycheatsheet.com/fontawesome/
https://ohmycheatsheet.com/material_icons/

Step to step guide to build a TODO app with React and Redux

Shiva Bhusal — Mon, 02 Mar 2020 01:42:25 +0000

Introduction

You can get the source code here https://github.com/shivabhusal/todo-app-with-react-and-redux

React

React is spreading like a wildfire in Web Development Industry, as per
StackOverflow survey 2019.

React is used to build modern web UI in more manageable way. Moreover, I can say that now we
can utilize our programming skills to build UIs. Back in the days, UI developers used to
be the people with HTML / CSS / Bootstrap / Photoshop skill set. Those days, we didn't used to call UI development
a programming job.

Redux

Redux is tool to manage your application state more manageable and usable way you can imagine. Without
it you would have to pass data as props deep down to the lower level components.

Basic Idea of Component Based Design

Lets start building a TODO app

We will use create-react-app tool to create a new app. It will configure all necessary tool-chain
like babel, webpack and other.

npx create-react-app todo-app-with-redux

yes its npx, (npx is a package runner tool that comes with npm 5.2+ and higher, see instructions for older npm versions)

File Structures

src
├── App.css
├── App.js
├── App.test.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js

Components

// src/components/visibilityFilter.jsx
import React from 'react'

export default function VisibilityFilter({ filters }) {
    return (
        filters.map((filter,i) => <button key={`filter-${i}`}>{filter}</button>)
    )
}

// src/components/todoList.jsx

import React from 'react'

const Todo = ({ todo }) => <li>{todo.content}</li>

export default function TodoList({ todos }) {
    return (
        todos.map((todo, i) => (
            <Todo key={i} todo={todo} />
        ))
    )

}

// src/components/addTodo.jsx

import React from 'react'

export default function addTodo() {
    return (
        <>
            <input type="text" placeholder="You text here" />
            <button>Add</button>
        </>
    )
}

// src/App.jsx

import React from 'react';
import './App.css';
import AddTodo from './components/addTodo'
import TodoList from './components/todoList'
import VisibilityFilter from './components/visibilityFilter'

const filters = ['all', 'completed', 'incomplete']
function App() {
  return (
    <div className="App">
      <h1>TODO Managers</h1>
      <AddTodo/>
      <TodoList todos={[{content: 'Task 1'}, {content: 'Task 2'}]}/>
      <VisibilityFilter filters={filters}/>
    </div>
  );
}

export default App;

Now, since UI of the app is ready its time to make it alive.

Introducing Redux

Now, we need to introduce Redux to feed data to the components and actions. We could
have used React Context API but its more easier to use Redux and pass action around.

We need the following new components:-

Action Types : Types of all possible actions
Action Creators : Functions those take payload and prepare object with type and payload
Reducers : Functions that knows what to do with that action type.
Containers are created using connect() function which exposes relevant state and action function.
Store : Application state; created using createStore() function that takes, combined reducers as arguments.
Provider wraps the entire app and it exposes store to the app.

// src/redux/actions.js

import { ADD_TODO, TOGGLE_TODO, DELETE_TODO, SET_FILTER } from './actionTypes'

export const addTodo = (content) => (
    {
        type: ADD_TODO,
        payload: {
            content
        }
    }
)

export const toggleTodo = (id) => (
    {
        type: TOGGLE_TODO,
        payload: {
            id
        }
    }
)

export const deleteTodo = (id) => (
    {
        type: DELETE_TODO,
        payload: {
            id
        }
    }
)

export const setFilter = (filter) => (
    {
        type: SET_FILTER,
        payload: {
            filter
        }
    }
)

// src/App.css

button.active{
  background-color: red;
}

li.completed{
  text-decoration: line-through;
}

// src/redux/actionTypes.js

export const ADD_TODO = 'ADD_TODO'
export const TOGGLE_TODO = 'TOGGLE_TODO'
export const DELETE_TODO = 'DELETE_TODO'
export const SET_FILTER = 'SET_FILTER'

export const FILTER_ALL = 'all'
export const FILTER_COMPLETED = 'completed'
export const FILTER_INCOMPLETE = 'incomplete'
export const Filters = [FILTER_ALL, FILTER_COMPLETED, FILTER_INCOMPLETE]

// src/redux/reducers.js

import {FILTER_ALL} from './actionTypes'
import { ADD_TODO, TOGGLE_TODO, DELETE_TODO, SET_FILTER } from './actionTypes'

const initialTodoState = {
    nextId: 2,
    data:
    {
        1: {
            content: 'Content 1',
            completed: false
        }
    }
}

export const todos = (state = initialTodoState, action) => {
    switch (action.type) {
        case ADD_TODO: {
            return (
                {
                    ...state,
                    data: {
                        ...state.data,
                        [state.nextId]: {
                            completed: false,
                            content: action.payload.content
                        },
                    },

                    nextId: state.nextId + 1
                }
            )
        }
        case TOGGLE_TODO:{
            console.log(action.payload)
            return(
                {
                    ...state,
                    data:{
                        ...state.data,
                        [action.payload.id]:{
                            ...state.data[action.payload.id],
                            completed: !(state.data[action.payload.id].completed)
                        }
                    }
                }
            )
        }

        default: {
            return state
        }
    }
}


export const visibilityFilter = (state = {activeFilter: FILTER_ALL}, action) => {
    switch (action.type) {
        case SET_FILTER: {
            return ({
                activeFilter: action.payload.filter
            })
        }

        default: {
            return state;
        }
    }
}

// src/redux/store.js

import {createStore, combineReducers} from 'redux'
import {todos, visibilityFilter} from './reducers'

export default createStore(combineReducers({todos, visibilityFilter}), 
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

// src/App.jsx

import React from 'react';
import './App.css';
import AddTodo from './components/addTodo'
import TodoList from './components/todoList'
import VisibilityFilter from './components/visibilityFilter'
import {Provider} from 'react-redux'
import store from './redux/store'

function App() {
  return (
    <Provider store={store}>
    <div className="App">
      <h1>TODO Managers</h1>
      <AddTodo/>
      <TodoList/>
      <VisibilityFilter/>
    </div>
    </Provider>
  );
}

export default App;

Updating the Ui Components to connect with Store

// src/components/addTodo.jsx

import React, { useState } from 'react'
import { connect } from 'react-redux'
import { addTodo } from '../redux/actions'

function AddTodo({ addTodo }) {
    const [value, setValue] = useState('');

    const handleOnChange = (e) => {
        setValue(e.target.value)
    }
    const handleAdd = () => {
        setValue('')
        addTodo(value)
    }

    return (
        <>
            <input type="text" onChange={handleOnChange} value={value} placeholder="You text here" />
            <button onClick={handleAdd}>Add</button>
        </>
    )
}

export default connect(null, { addTodo })(AddTodo)

// src/components/todoList.jsx

import React from 'react'
import { connect } from 'react-redux'
import { _ } from 'underscore'
import { FILTER_ALL, FILTER_COMPLETED } from '../redux/actionTypes'
import { toggleTodo } from '../redux/actions'

const Todo = ({ todo, id, toggleTodo }) => (
    <li className={todo.completed ? 'completed' : ''} onClick={() => toggleTodo(id)}>{todo.content}</li>
)

function TodoList({ todos, toggleTodo }) {
    return (
        _.keys(todos).map((id) => (
            <Todo key={id} id={id} toggleTodo={toggleTodo} todo={todos[id]} />
        ))
    )
}

const mapState = (state) => {
    if (state.visibilityFilter.activeFilter === FILTER_ALL) {
        return { todos: state.todos.data }
    } else if (state.visibilityFilter.activeFilter === FILTER_COMPLETED) {
        return ({
            todos: _.pick(state.todos.data, (todo) => todo.completed)
        })
    } else {
        return ({
            todos: _.pick(state.todos.data, (todo) => !todo.completed)
        })
    }
}

export default connect(mapState, { toggleTodo })(TodoList);

// src/components/visibilityFilter.jsx

import React from 'react'
import { connect } from 'react-redux'
import { setFilter } from '../redux/actions'
import { Filters } from '../redux/actionTypes'

function VisibilityFilter({ activeFilter, setFilter }) {
    return (
        Filters.map((filter, i) => (
            <button
                className={filter === activeFilter ? 'active' : ''}
                onClick={() => setFilter(filter)}
                key={`filter-${i}`}>
                {filter}
            </button>
        ))
    )
}

const mapState = (state) => ({ activeFilter: state.visibilityFilter.activeFilter })
export default connect(mapState, { setFilter })(VisibilityFilter)

Read more from me:- https://shivab.com/blog/

A CLI based Images to Slideshow Converter in Ruby

Shiva Bhusal — Wed, 02 Oct 2019 15:07:17 +0000

Today I would like to share my new CLI based Ruby Gem that can convert images in a folder to a slide-show video with awesome background video with transitions.

https://github.com/shivabhusal/erika-slideshow

How to use?

To compile images in ~/pictures/birthday, you need to make sure files are named in proper order. I recommend you to prefix the files with number like:-

0 My first birthday.jpg
1 My second birthday.jpg
2 My second birthday.jpg
3 My third birthday.jpg single command to compile

cd ~/pictures


erika g -s birthday -o mybirthday.mp4

This will generate video called mybirthday.mp4

Note: This is just tested in MacOS 10. Please test it in your machines and create issues in github. Feedback is really appreciated.

Don't forget to hit Star* button if you like. Really star* hungry.