DEV Community: Asif Zubayer Palak

🐧 How to SSH Into Your Android Phone Running Ubuntu Server (via Termux + Tailscale)

Asif Zubayer Palak — Wed, 11 Jun 2025 06:57:58 +0000

Have you ever wanted to SSH into your Android phone like it's a real Linux server? With Termux, Ubuntu, and Tailscale, you can do exactly that — without root!

This guide walks you through setting up a fully functional Ubuntu environment inside Termux, exposing it via Tailscale, and making it the default shell on your phone. By the end, you'll be able to SSH into your phone from any device in your tailnet.

🧰 Prerequisites

Android phone
Tailscale installed and connected on both your phone and your PC
Termux installed via F-Droid (not from Play Store — it’s deprecated!)

Some Linux experience

⚠️ If You See This Error…
CANNOT LINK EXECUTABLE "-sh": Library "/data/data/com.termux/files/..."

You likely installed Termux from the Play Store, which is broken on modern Android.
Solution: Uninstall Termux and install it via F-Droid or GitHub Releases.

✅ Step 1: Install Ubuntu (or any other distro) in Termux Using proot-distro

pkg update && pkg upgrade
pkg install proot-distro
proot-distro list
proot-distro install ubuntu

To enter Ubuntu:

proot-distro login ubuntu

✅ Step 2: Make Ubuntu the Default Shell in Termux
You want Ubuntu to load automatically when you launch Termux. Here's how:

Edit the startup script:

nano ~/.bash_profile

Add this to the end of the file:

if [ -z "$PROOT_DISTRO_NAME" ]; then
  proot-distro login ubuntu-22.04
fi

This prevents recursive launches if you’re already inside Ubuntu.

Reopen Termux Now you'll land directly inside Ubuntu every time you open Termux. 🎉

✅ Step 3: Set Up SSH Server Inside Ubuntu

Launch Ubuntu:

proot-distro login ubuntu

Then run:

apt update && apt install openssh-server
passwd  # Set root password
service ssh start

Now your SSH server is live on Ubuntu inside Termux.

✅ Step 4: SSH Into Your Phone via Tailscale
Make sure your phone is connected to Tailscale and visible on your PC. Find the IP (e.g., 101.125.41.99).

From your PC:

If you want to ssh into Ubuntu inside termux

ssh root@ip -p 8022

or you can ssh into termux's shell by first:

Inside termux

whoami # it should be something like u0_a124

Then from your pc or other host device:

ssh u0_a124@ip -p 8022

You can change the port in the sshd_config, or use the default 8022 if inside Termux.

Fullstackopen Summary Part 3

Asif Zubayer Palak — Wed, 15 Nov 2023 15:00:55 +0000

This post contains the summary of what I learnt in fullstackopen (Part 3)

Preparing the backend

Create a directory for your backend and use

npm init

to create a package.json file.
Create a file called index.js to implement your backend code and to run it, you need to use

node index.js

Implement the server code

In order to handle server side development,
we need to use express
To install it, run:

npm install express

Next, in index.js file, import the express library and use it.

const express = require('express')
const app = express()

Listening on a port

const PORT=3001
app.listen(PORT, ()=> {
  console.log(`Server running on port ${PORT}`)
})

GET Request to show on local server

let data = [ ... data in json format ... ]

app.get('/', (request, response) => {
  response.send('<h1>Hello World!</h1>')
})

app.get('/api/data', (request, response) => {
  response.json(data)
})

Observe live changes in the server

In order to observe live changes in the server, we need to use nodemon

npm install nodemon --save-dev

To observe live changes in the server use:

nodemon index.js

Defining parameters for routes

app.get('/api/notes/:id', (request, response) => {
  const id = request.params.id
  const note = notes.find(note => note.id === id)
  response.json(note)
})

request.params.id contains the parameter id from the route url.

Emulate requests to the backend
Use POSTMAN to simulate requests to the backend.

Posting data to the backend

app.use(express.json())

This allows sending data to the backend in json format

app.post('/api/notes', (request, response) =>{
  const note = request.body  
  response.json(note)
})

Middlewares

Middlewares are functions used for handling request and response objects.
Used by the express server like this:

app.use(middleware)

CORS
In order to allow the client to access data from a server hosted on a different website or server, express needs to enable cors.

In terminal:

npm install cors

In index.js

const cors = require('cors')
app.use(cors())

Production Build

To deploy the app, we must first create the production build which is made by

npm run build

which creates a folder called dist containing the build files.

Once the production build has been run, you can move it to the backend folder and then allow the backend to use the static content using:

app.use(express.static('dist'))

Proxy
We can use proxy to shorten the base url link since the backend is hosted on another url.
To do so, go to vite.config.js file and add the following:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {    
   proxy: {      
    '/api': {        
      target: 'http://localhost:3001',
      changeOrigin: true,      
    },    
  }  
 },
})

Saving data to mongodb

Go to mongodb atlas to create a cluster and get a mongodb uri like:
mongodb+srv://fullstack:<password>@cluster0.o1opl.mongodb.net/?retryWrites=true&w=majority

To use the mongodb database, we need to use a node package called mongoose which can be installed using

npm install mongoose

and to implement it, you need to go to the server side and add the following:

const mongoose = require('mongoose')

To use the specific mongodb cluster, we need to use the cluster's uri which should be saved as an environment variable in a .env file.

To set it up, you need to install dotenv
and import it using:

require('dotenv').config()

let's say the variable name is MONGO_URI, so to use it, you need to access it by process.env.MONGO_URI.

Configuring the schema

mongoose.set('strictQuery',false)

ensures that only the items stated in the schema gets saved into the mongodb database.

Then we connect the mongodb database to our backend using:

mongoose.connect(process.env.MONGO_URI)

Next, we declare a schema to set the basis of the data that our database will hold using:

const schema = new mongoose.Schema({
  item_1: datatype,
  item_2: datatype,
  ....
})
const Object = mongoose.model('Object',schema)

<create an entry using that schema, this part is demonstrated later on>

entry.save().then(res => {
  mongoose.connection.close()
})

Fetching items from the database
We previously made an instance called Object which followed the schema we made.

In order to get all the entries in that object, we use:

app.get('/api/data'.(req,res) => {
  Object.find({}).then(result=>{
    res.json(result)
  })
})

Transforming mongodb output

The response from the mongodb database comes with some default values such as _id and __v.
These needs to be transformed into attributes that are cleaner.

Implement that by using:

schema.set('toJSON', {
  transform: (document, returnedObject) => {
    returnedObject.id = returnedObject._id.toString()
    delete returnedObject._id
    delete returnedObject.__v
  }
})

Once you save this configuration, you need to export it by:

module.exports = mongoose.model('Object',schema)

Error Handling
We can handle the errors in a middleware, in the middleware's HTTP request, you can do the following:

app.get('/api/notes/:id', (request, response, next) => {  Note.findById(request.params.id)
    .then(note => {
        ...
    .catch(error => next(error))})

the next function sends the error down the next routes till it reaches the errorhandler middleware.

You can initiate the errorhandler middleware like:

const errorHandler = (error, request, response, next) => {
  console.error(error.message)

  if (error.name === 'CastError') {
    return response.status(400).send({ error: 'malformatted id' })
  } 

  next(error)
}

// this has to be the last loaded middleware.
app.use(errorHandler)

The order of middleware loading

app.use(express.static('dist'))
app.use(express.json())
app.use(requestLogger)

app.post('/api/notes', (request, response) => {
  const body = request.body
  // ...
})

const unknownEndpoint = (request, response) => {
  response.status(404).send({ error: 'unknown endpoint' })
}

// handler of requests with unknown endpoint
app.use(unknownEndpoint)

const errorHandler = (error, request, response, next) => {
  // ...
}

// handler of requests with result to errors
app.use(errorHandler)

Delete and Update Requests

Delete

app.delete('/api/notes/:id', (request, response, next) => {
  Note.findByIdAndRemove(request.params.id)
    .then(result => {
      response.status(204).end()
    })
    .catch(error => next(error))
})

Update

app.put('/api/notes/:id', (request, response, next) => {
  const body = request.body

  const note = {
    content: body.content,
    important: body.important,
  }

  Note.findByIdAndUpdate(request.params.id, note, { new: true })
    .then(updatedNote => {
      response.json(updatedNote)
    })
    .catch(error => next(error))
})

Enforce Validation

const noteSchema = new mongoose.Schema({
  content: {    
    type: String,    
    minLength: 5,    
    required: true  
  },  
  important: Boolean
})

Add this to errorhandler

else if (error.name === 'ValidationError') {    
  return response.status(400).json({ error: error.message })  }

Add this to the update request:

 Note.findByIdAndUpdate(
    request.params.id, 
    { content, important },    
    { new: true, runValidators: true, context: 'query' }  
)

Fullstackopen Summary Part 2

Asif Zubayer Palak — Wed, 08 Nov 2023 09:10:40 +0000

This post contains the summary of what I learnt in fullstackopen (Part 2)

Higher Order Functions in Javascript such as map,filter,reduce and find:

Filter:

const ages = [32, 33, 16, 40];
const result = ages.filter(age=>{
  return age>=18
})

Output:

[ 32, 33, 40 ]

Map:

const numbers = [65, 44, 12, 4];
const newArr = numbers.map(num=>{
  return num*10
})

Output:

[ 650, 440, 120, 40 ]

Reduce:

const arr = [1.5, 20.3, 11.1, 40.7]
const total = arr.reduce((sum,item)=>{
  return sum+item
},0)

Output:

73.6

Find:

const array = [10, 20, 30, 40, 50];
const found = array.find((element)=>{
    return element > 20;
})

Output:

Key attribute

When rendering mapped out items, we need to assign the key attribute to distinguish between each element.

useState hook

const [item,setItem] = useState(initialValue)

Note that the state updates asynchronously, so if you update an item using useState, it might not immediately be in effect until the next render.

Forms in React

<form onSubmit={addNote}>        
  <input 
    value={newNote}
    onChange={handleNoteChange}
  />        
  <button type="submit">save</button>      </form>

Using JSON server

After making a json file containing all the data.
Install json-server using

npm install json-server --save-dev

and then run

json-server --port 3000 --watch db.json

Fetching data from server side We need to use axios to fetch data, therefore

npm install axios

To use axios

import axios from 'axios'
axios.get('http://localhost:3001/data')
.then(res=> console.log(res.data))

useEffect hook

It is used to fetch data from the server as it executes immediately upon render.

useEffect(() => {        
 axios
  .get('http://localhost:3001/')
  .then(response => {        
       setNotes(response.data)      
 })  
}, [])

The array at the end is called the dependency array where you can pass variables and functions, which would cause the DOM to render upon changes in those variables and functions.

Axios post and put

POST
PUT:

axios.put(url, changedNote).then(response => {
  setNotes(notes.map(note => 
  note.id !== id ? note : response.data))
})

Creating a separate module Keep all the axios requests in a separate module and maintain modularity and lastly export those functions using

export default { 
  getAll, 
  create, 
  update 
}

Error Handling

Attaching

.catch(error){
  console.log(error)
}

Outputs the error in case the request doesn't pass through

Fullstackopen Summary Part 1

Asif Zubayer Palak — Sun, 05 Nov 2023 19:07:46 +0000

This post contains the summary of what I learnt in fullstackopen (Part 1)

Creating a react app

npm create vite@latest appname -- --template react

Running vite application

npm run dev

Export Component

[...create component...]
export default ComponentName

Import component

import ComponentName from '../component.jsx'

What to render
The react app cannot render objects
How to render objects
using the map function:

object.map(item => <p>{item}<p>)

works if each item in the object is not an object itself as well.

this keyword
this tells us about what context it was called from.
if this is called from a reference, it becomes a global object, and if it is called within a function, this refers to the scope of the function.
Using props
Pass it through the component:

<Component prop={variable} />

Using props on the components:

const Component = ({prop1,prop2}) => {
...
}

Updating object

const items = {
right: 0,
left: 0
}
const updated = {
...items,
left: items.left + 1
}

4 BEST places to find Open Source projects

Asif Zubayer Palak — Fri, 20 Oct 2023 13:24:48 +0000

Beginners who are looking to contribute to open source either to improve their skills, include in their portfolio or for whatever reason - they often get confused on where to start to which repositories to work on.

To address these issues, there are some techniques and places where you can pick a project and get started with contributing.

However, there are some criterion to keep in mind before you get started:

Know your skills
Complexity of the project
Maintenance of a repository
Where to find projects/repositories?

Know your skills

In order to start contributing, you need to have the skill set necessary to understand the existing project code and workflow as well.
Many people may comment on that you do not need technical skills if you want to work on the Documentation. However, that cannot be further from the truth, since working on the Documentation requires you to have a full understanding of the project's workflow.

Now, to understand whether a project is fit for you can be estimated by looking at the right-hand side of the Github Repository.

If your skill set correspond to these, you may work on the project.

NOTE: You should ideally have knowledge of Markdown syntax, if you don't -- you may want to check out this

Complexity of the project

Some projects are easy, some are not-so-easy. In order to decide whether you want to delve into a project, you should check out the Issues tab in the specific repository.
Ideally, you should read the README file carefully and look into the directories and read the code to get an abstract idea of how things are working.

If you feel like Yeah I might/could solve this problem after looking at the issues, you can dive in.
It's fine if you feel like you cannot fix any of these, you just need some time to learn the missing gaps in your knowledge-base and look more through the codebase.

Maintenance of a repository

Check the date of the last merge date of a Pull Request or the frequency of the responses in the Issues
If the repository has not been maintained in more than 3 months, it's most likely that your pull request or issues may not be addressed and get dropped.

Ideally, the activity in a repository should be between few days to a week or two.

Where to find Open Source Projects?

Finding good open source repositories might be a bit daunting, but there are several resources that can help you find them easily:

GoodFirstIssue

This is a good resource that allows you to filter and find repositories open for contribution based on your preferred language.

Github Open Source Tag

Many Github repositories tag themselves open for contribution so that people can easily contribute.

Github Good First Issue

This is Github's own good first issue tag that many repositories have that are perfect for people who are beginner programmers or first time into open source contribution.

First Contributions

This is similar to GoodFirstIssue, where you can filter projects or repositories based on the language and technologies used.

How to mount a drive at boot in Arch Linux

Asif Zubayer Palak — Tue, 03 Oct 2023 11:16:25 +0000

If you have a removable drive and you don't want to manually mount every time you boot your PC, you can easily set it up to automatically mount every time your PC boots up.

Gathering the required info

In order to set up the auto mount, you need to know several things such as:

the drive partition directory
mount point
UUID
File System or FS

To find these information, run

lsblk -f

on your terminal.

You will get something like this:

Look for your desired partition directory such as sdc1 or sdb1 and take note of the FSTYPE and copy the UUID.
Next, you will need to create a mount point by running this command:

sudo mkdir /run/media/user/directory_name

where user is your username and directory_name is what you want the partition to be called.

Once done, use vim/nano or any other text editor to open /etc/ftsab
It will look something like this:

Create a new line and add the following entry

# /dev/your_partition_directory

UUID=(copied UUID here)  mount_point(eg: /run/media/user/partition) filetype(eg: ntfs or ext4) rw,relatime

Match the format with the example image above and then save and exit.
Reboot your pc and check if the partitions are automatically mounted.

How to set media key-binds for dwm in Arch Linux

Asif Zubayer Palak — Mon, 02 Oct 2023 14:24:49 +0000

After installing Arch Linux with suckless dwm window manager, some of the keys in your keyboard may stop working.

This requires the need to manually set up keybinds for your set up.

Required Installations

In order to get started, there are some packages that you need to install to set the keybinds.
The packages are xbindkeys and xbindkeys_config

The commands to install these two packages for Arch are:

if you don't have yay installed, run this first
sudo pacman -Sy yay

or you can also build them from AUR, but I suggest using yay

yay -S xbindkeys xbindkeys_config-gtk2
xbindkeys -d > ~/.xbindkeysrc

This will create a file called .xbindkeysrc in your home directory which contains all your keybinds, but we will be using the GUI version instead.

If you want to not use the GUI version or if it is not working for you, check out the xbindkeys manual here

Setting Keybinds

Open the application called xbindkeys_config either from dmenu or from the terminal
You will be prompted with a window such as:
On the bottom bar, there are several options, select New which will open a panel to the left.
There are several text boxes for each attribute. Name would contain the name of the keybind, Key will contain the keycode of the hardware keys and Action contains the command that will execute upon pressing the button.

Configs for Keybinds

Config for Volume Up:

First write Volume Up in the name and then select Get Key that will pop up a blank window.
Select the key combination for your keybind
Next, put this command into the Action box

pactl set-sink-volume @DEFAULT_SINK@ +1%

You can change 1% to whatever value you want to increment the volume by.

Lastly hit Save

Config for Volume Down:

Same as Volume up except the Action command will be

pactl set-sink-volume @DEFAULT_SINK@ -1%

Config for Mute:

To mute/unmute the Audio Output/Speaker/Headphone

pactl set-sink-mute @DEFAULT_SINK@ toggle

To mute/unmute the Audio Input/Microphone

pactl set-source-mute @DEFAULT_SOURCE@ toggle

Config for Media Playback:

To set keybinds for pause/play or next/previous, you need to install playerctl

Run the command yay -Sy playerctl in the terminal and you are good to go.

The Action Commands for Pause/Play:

playerctl play-pause

The Action Commands for Previous Track:

playerctl previous

The Action Commands for Next Track:

playerctl next

Once Done, Hit Save and Exit and lastly, in order for your keybinds to remain permanent after each boot, you must configure your .xinitrc in the directory `~.xinitrc`

Use a text editor of your choice and add the following line:

xbindkeys &

before exec dwm

JS Classes: Extend and Super Keyword

Asif Zubayer Palak — Wed, 29 Mar 2023 15:27:16 +0000

Extend and Super Keywords are used to implement Inheritance in JS.

The extends keyword, as the name suggests, extends a class - meaning, one class inherits the properties from another class.

The super keyword refers to superclass or parent objects. It is used to call and to access superclass methods and constructor.

How to use the Extend and Super Keywords?

class Vehicle{
 constructor(vehicleType,numofSeats){
   this.vehicleType = vehicleType;
   this.numofSeats = numofSeats;
   this.forSale = false;
 }
 describe(){
  return `This ${vehicleType} has ${numofSeats}`;
 }
}

Here we will use the extend keyword to inherit the properties of the Vehicle class.

class Car extends Vehicle{
  constructor(vehicleType,numofSeats,color){
    super(vehicleType,numofSeats);
     this.color = color;
     this.forSale = true;
  }
  describe(){
    super();
  }
}

super calls the constructor function of the Vehicle class since we are extending from Vehicle.

Doing so reduces your hassle of writing

this.vehicleType = vehicleType;
this.numofSeats = numofSeats;

all over again for the Car class.

color is a property that was not in the Vehicle class, therefore - we add it in the Car constructor and assign this.color to color.
Since we are selling the Car, this.forSale should be set to true.

In case of functions, you can also inherit and call it from the parent class. Such as the code snippet

describe(){
  super();
}

as shown in the code above invokes the super function inside the describe() function. What this does is the Car class invokes the describe function from the Vehicle class. Meaning that the Car subclass is calling the describe()function from the Vehicle class while using the parameters of the Car subclass.

To learn about `static` methods, check out JS Classes: Static Methods

JS Classes: Classes and Constructors

Asif Zubayer Palak — Fri, 03 Mar 2023 11:24:08 +0000

What are classes?

Classes are a template for creating objects. Use the keyword class to create a class.
Always add a method named constructor()

Creating a new class

class Car{
 constructor(brand, model, color){
  this.brand = brand;
  this.model = model;
  this.color = color;
  this.sold = false;
 }
 carSold(){
  this.sold = true;
 }
}

We create a class with the class keyword and then create the constructor function.

The constructor function immediately gets invoked when we create an object using this class.

You might notice that there is a function

carSold(){
  this.sold = true;
 }

Which is actually in the ES6 syntax. Normally, you'd see this function written like:

this.carSold = function(){
 this.sold = true;
}

Creating an object with the class

Now as you're done creating the class, time to create an object with it.
To do this you need to type in:
let <object_name> = new <class_name>(<parameters>)

For example, for the class stated above:

let car1 = new Car('Toyota','Sienna','Blue')'

This would create an object car1 of Brand: Toyota, Model: Sienna and Color: Blue.

Here, the parameters inside the round brackets are passed to the constructor and thus sets the Brand to Toyota, Model to Sienna and Color to Blue.

Initially its sold status is set to false.
This is changed by calling the carSold() function.
So if you call car1.carSold() - the value of car1.sold will be true

To learn about the Extend and Super keyword, check out JS Classes: Extend and Super Keyword

13 Terminal commands in Linux that you must know!

Asif Zubayer Palak — Wed, 04 Jan 2023 14:26:54 +0000

Linux is a popular operating system that majority of the web servers use. If you are a web developer, your website is most likely being hosted on a Linux environment and using some of its tools.

Although you may not need to interact much with Linux - as a developer, it is powerful for you to know how to get around in a Linux environment.

Below are some of the commonly used Linux Terminal commands used for basic operations:

< ls >

ls is a terminal command used to display the list of files and sub-directories in the current directory.

The syntax of this command is

ls [flag] [File]

Some of the commonly used flags are
ls -a
list all files including hidden files.

ls -l
list with long format - shows permissions.

< cd >

cd stands for change directory and is used to move to another directory from your current directory.

The syntax of the command is

cd [directory_name]

cd / can be used to move to the root directory
cd a/b/c can be used to move to a nested directory. Here, c is inside b and b is inside a.
cd ~ or just cd can be used to move to the home directory.
cd .. can be used to move up one directory (previous directory).
cd "new folder" is the format used to change to a directory which has a blankspace in its name.

< man >

man command shows the user manual of any command that we can run on
the terminal. The manual contains NAME, SYNOPSIS, DESCRIPTION, OPTIONS etc. related to the command.
This is one of the most useful commands in Linux because it helps you learn to use other commands.

The syntax of the command is

man [command_name]

Entering man nmap gave out this result:

< touch >

The touch command primarily serves two purposes: create a file and modify a file's timestamp.

The syntax of the command is

touch <flag> <file_name>

Simply using touch <file_name> will let you create a file if it doesn't exist.
If a file of that name exists, it will update its timestamp to current time.

You can create multiple files together using touch by touch <file1> <file2> ... <filex>

You can create multiple ordered files using touch by touch <filename{<start>..<finish>}>
Example: touch file{1..10} or touch file{a..z}

< mkdir >

mkdir is a command that is used to create new directories.

The syntax of the command is

mkdir [flag] [directory]

The command mkdir folder1 is used to create a folder named folder1. You can create multiple folder simultaneously by mkdir folder1 folder2 folder3 ...

You can also create nested directories:
mkdir -p a/b/c

if folder a and folder b do not exist, they will be created before creating folder c.

< pwd >

pwd stands for present working directory and it displays the path of the directory you are currently in.

The syntax is simply pwd

< clear >

clear command clears the terminal. If your terminal is cluttered with commands and outputs, clear command is used to erase them.

The syntax is simply clear

< mv >

mv command can be used to either move one or more files or directories from one place to another or rename a file or folder.

The syntax for this command is

mv [flag] [source] [destination]

mv a.txt b.txt is an example where mv was used to rename a.txt to b.txt

mv a.txt folder1 is an example where mv was used to move a.txt was moved to a folder named folder1

< cp >

cp is used for copying files or directories from one location to another.

The syntax for using this command is

cp [source] [destination]

This can be used to move a file into a folder or a folder into a folder.

< rm >

rm is used to remove files in a directory, although they cannot delete directories by default. But with some flags, they can delete directories as well.

The syntax for the command is

rm [flag] [file]

you can remove multiple files consecutively.

To delete directories, you will need to use rm -rf folder1.

This is mostly helpful if the folder has nested folders and files in them.

< rmdir >

rmdir is similar to rm -rf however, it can only remove directories that are empty.

The syntax for this command is

rmdir folder1

< grep >

grep is globar regular expression print, which is used to search for a particular string or pattern in files.

The syntax for this command is

grep [flag] [pattern] [file]

Example: grep Username Records.txt
can help find the line containing "Username" from the "Records.txt" file and output the line.

< package managers >

There are different package managers based on what distro of linux you are using. Debian based distros use the apt package manager whereas the Arch based distros use pacman.

These package managers are important as they allow you to install, uninstall, reinstall and update packages and software.

The syntax for apt is

sudo apt [command] [package_name]

Commonly used commands are update to update a package, install to install a package, remove to uninstall and search to look for that package in the software repositories.

sudo is added to the beginning of the command because making changes to the packages requires root level permissions.

Entering sudo apt update gave the following result:

Now, the syntax for pacman is

sudo pacman [flag] [package_name]

Here the flags most commonly used are
-S to install a package, -Rs or -R to remove a package with and without its dependencies respectively.
-Ss to look for a package from the repositories.
-Suy is a flag that is used without the package_name, and it is used to upgrade all the packages in your system.

You can also install local or remote packages using -U flag and including the path to the file in [package_name] section.
Make sure the file ends in .pkg.tar.xz

So this brings you to a conclusion on the most commonly used linux commands, although they might seem daunting at first - by using them over time will make them seem like second nature!

How To Use Font Awesome Icons in HTML

Asif Zubayer Palak — Tue, 06 Dec 2022 09:20:23 +0000

Icons have become a crucial element in Web Development and adding the appropriate icons to your Website could make or break the design.
Font Awesome is an icon library that you can implement into your website straight from their website.

How to use Font Awesome Icons?

1. CDN Method

Step 1

Locate the link to font-awesome CDN by going to this site.

Step 2

Press on </> button next to the link that ends with all.min.css
Which will copy something like this onto your clipboard



<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css" integrity="sha512-XXXXX+y+XXXXX/XXXX==" crossorigin="anonymous" referrerpolicy="no-referrer" />

Step 3

Go to your .html file where you're designing your webpage and paste the copied code within the <head> tag.

Step 4

Find your desired icons from fontawesome.com or by directly going here

Step 5

Click on the icon to show its panel, which would look something like this:

Step 6
Click on the code snippet to copy it and paste it on the desired location of your webpage.

2. Downloading the Icon Pack

Step 1

Go to the download section of fontawesome.com and click on icon pack of your choice. I'll be using "Free for Web" for this tutorial.

Step 2

A .zip file will be downloaded, which you have to unzip and place it in the same folder as your website.

Step 3

Use the link tag in the <head> tag and locate the css file containing the icon data.
The directory would look something like this:
/fontawesome-free-x.x.x-web/css/all.css

Step 4

Find your desired icons from fontawesome.com or by directly going here

Step 5

Click on the icon to show its panel, which would look something like this:

Step 6
Click on the code snippet to copy it and paste it on the desired location of your webpage.

Troubleshooting

In case you notice square boxes in the places where you put the icons, there are two probable reasons (as far as I know).

One is due to the font family set onto that element or its parent element.
Since font-awesome icons are treated as fonts, declaring a different font family would override it and the font-awesome icon cannot be found.

Another reason could be the class declaration issue. For example, in
<i class="fa-solid fa-circle-info"></i>
no class of fa-solid may be found in the CDN.
In that case, you can remove the -solid to use the default version of the icon.
The code snippet would look something like:
<i class="fa fa-circle-info"></i>

All the JS Array methods you need to know

Asif Zubayer Palak — Sun, 09 Oct 2022 15:22:24 +0000

A method can be referred to as a shortcut for achieving results that you would otherwise have to write extensive code for.

Arrays have a set of methods as well which can manipulate the array or the data inside it to cater to your needs.

Below are the methods this article covers:

Array Length
Changing Elements in the Array
Merging Arrays
Array to String Conversion
Popping out & pushing in values
Shifting & Unshifting
Splice & Slice

Array Length

This method returns the length of an array.

const pets = ["cat", "hamster", "dog", "rabbit"];
print(pets.length); // 4
console.log(pets[pets.length]); // rabbit

the array.length can be also used to get the last element in the array

Changing Elements in the Array

Index number of an array can be used to address an element in the array and can be used to change elements as well.

const cats = ["molly", "polly", "kolly", "jolly"];
cats[0] = "perry";
console.log(cats); // ["perry", "polly", "kolly", "jolly"]

Merging Arrays

The concat() method creates a new array by merging other arrays.

const list_1 = ["one", "two"];
const list_2 = ["three", "four", "five"];

const lists = list_1.concat(list_2);
console.log(lists); // ["one", "two", "three", "four", "five"]

Array to String Conversion

If you want to convert an array to string, there are two methods that can achieve this:

const numbers = [1,2,3,4,5];
console.log(numbers.toString()); // 1,2,3,4,5
console.log(numbers.join()); // 1,2,3,4,5

The array.join() method can modify the separator as well, such as: if you want the separator to be something else instead of ",", you can pass that symbol as the argument.

const numbers = [1,2,3,4,5];
console.log(numbers.join("-")); // 1-2-3-4-5

Popping out & pushing in values

If you wish to add new elements to the end of the array or remove the last element of the array - using the push and pop methods are the most useful.
To push an element to the end of an array:

const list = [1,2,3,4];
list.push(5); // here 5 is the value

You should also know that array.push(value) also returns the length of the newly updated array, so you can store it in a variable if you wish to use it later.

If you wish to remove the last element from an array:

const list = [1,2,3,4];
list.pop(); // 4 removed from the array

You should also know that array.pop() also returns the element that has been removed, you can store it in a variable if you wish to use it later.

Shifting & Unshifting

Shifting and Unshifting is similar push and pop but mirrored out.

const list = [1,2,3,4];
list.shift(); // [2,3,4]

You should know that array.shift() also returns the element that has been removed, you can store it in a variable if you wish to use it later.

const list = [1,2,3,4];
list.unshift(0); // [0,1,2,3,4]

You should know that array.unshift() also returns the updated array length, you can store it in a variable if you wish to use it later.

Splice & Slice

Splice

Splice is one of the methods of array which can be used to add, remove, replace elements.

const list = [1,2,3,4];
list.splice(x, y, value_1, value_2,....,..);

x defines the position where new elements should be added
y defines how many elements should be removed - to remove an element using array.splice(index of element to remove, number of elements to remove)

Slice

Slice creates a new array with the elements from an existing array starting from a target index

const list = [1,2,3,4];
const newList = list.slice(2);
console.log(newList); // [3,4]

DEV Community: Asif Zubayer Palak

🐧 How to SSH Into Your Android Phone Running Ubuntu Server (via Termux + Tailscale)

Fullstackopen Summary Part 3

Fullstackopen Summary Part 2

This post contains the summary of what I learnt in fullstackopen (Part 2)

Fullstackopen Summary Part 1

This post contains the summary of what I learnt in fullstackopen (Part 1)

4 BEST places to find Open Source projects

Beginners who are looking to contribute to open source either to improve their skills, include in their portfolio or for whatever reason - they often get confused on where to start to which repositories to work on.

Know your skills

Complexity of the project

Maintenance of a repository

Where to find Open Source Projects?

How to mount a drive at boot in Arch Linux

If you have a removable drive and you don't want to manually mount every time you boot your PC, you can easily set it up to automatically mount every time your PC boots up.

Gathering the required info

How to set media key-binds for dwm in Arch Linux

After installing Arch Linux with suckless dwm window manager, some of the keys in your keyboard may stop working.

Required Installations

Setting Keybinds

Configs for Keybinds

Once Done, Hit Save and Exit and lastly, in order for your keybinds to remain permanent after each boot, you must configure your .xinitrc in the directory ~.xinitrc

JS Classes: Extend and Super Keyword

Extend and Super Keywords are used to implement Inheritance in JS.

How to use the Extend and Super Keywords?

To learn about static methods, check out JS Classes: Static Methods

JS Classes: Classes and Constructors

What are classes?

Creating a new class

Creating an object with the class

To learn about the Extend and Super keyword, check out JS Classes: Extend and Super Keyword

13 Terminal commands in Linux that you *must* know!

Linux is a popular operating system that majority of the web servers use. If you are a web developer, your website is most likely being hosted on a Linux environment and using some of its tools.

Although you may not need to interact much with Linux - as a developer, it is powerful for you to know how to get around in a Linux environment.

Below are some of the commonly used Linux Terminal commands used for basic operations:

< ls >

< cd >

< man >

< touch >

< mkdir >

< pwd >

< clear >

< mv >

< cp >

< rm >

< rmdir >

< grep >

< package managers >

So this brings you to a conclusion on the most commonly used linux commands, although they might seem daunting at first - by using them over time will make them seem like second nature!

How To Use Font Awesome Icons in HTML

How to use Font Awesome Icons?

1. CDN Method

2. Downloading the Icon Pack

Troubleshooting

All the JS Array methods you need to know

A method can be referred to as a shortcut for achieving results that you would otherwise have to write extensive code for.

Arrays have a set of methods as well which can manipulate the array or the data inside it to cater to your needs.

Below are the methods this article covers:

Array Length

Changing Elements in the Array

Merging Arrays

Array to String Conversion

Popping out & pushing in values

Shifting & Unshifting

Splice & Slice

Splice

Slice

That brings us to the end of the few methods most commonly used in JavaScript

Once Done, Hit Save and Exit and lastly, in order for your keybinds to remain permanent after each boot, you must configure your .xinitrc in the directory `~.xinitrc`

To learn about `static` methods, check out JS Classes: Static Methods

13 Terminal commands in Linux that you must know!