DEV Community: Ivan Karabadzhak

Kitty shortcuts work only with Latin characters - How to fix?

Ivan Karabadzhak — Sun, 28 Jan 2024 11:20:32 +0000

If you are reading this probably you have the same issues as I faced before. I love Kitty terminal. It's fast and simple. At the same time, I use in my life following languages: Bulgarian, Ukrainian, and Russian. All of them use the Cyrillic alphabet. And Kitty has an issue: shortcuts work only with Latin characters. That means, if your current layout is Bulgarian for example, you can't use shortcuts such as CMD+C, CMD+V, or their alternative Ctrl+C, Ctrl+V. It could make things hard if you need to use Cyrillic language and shortcuts at the same time. I have tried to fix that. Let me share what I found.

First step of the issue solving

While researching how to fix the issue I found this GitHub issue with the fun number 606 (almost 666). First, I should say, that there is no easy solution. Shortly you have to specify for each shortcut mapping alternative with your keyboard layout. That means, for example, if your keyboard has Cyrillic "м" instead of Latin "v" then for making work CMD+V you should add also into configuration an additional line with "м".

map cmd+v       paste_from_clipboard # default Latin 
map cmd+ъ       paste_from_clipboard # for default MacOS Bulgarian layout
map cmd+м       paste_from_clipboard # for default MacOS Ukrainian or Russian layout

Let't summarize. To resolve the issue just add for each shortcut additional mapping with your keyboard layout.

Pretty easy, isn't it? Yeah, but if you want to use all shortcuts you have to do the same for each one. And I don't want to be you if you want to make that for 2 or more different non-Latin layouts.

Automated solution

I decided to create automated solution for that. Why? Because manually mapping each key is tedious. And would be great to share the process with you. If you aren't interested in the automation process then just use the Python script from my GitHub repository.

For those who are interested in learning more. Let's do it together. The first step is creating a project directory. I usually prefer to use venv (virtual environment) in my Python scripts.

mkdir kitty-shortcuts-work-only-with-latin-characters
cd kitty-shortcuts-work-only-with-latin-characters
python -m venv ./venv
source ./venv/bin/activate # maybe you should use activate.fish or other file depends on your shell type

Great! Now we're ready to start coding. Before making any changes, I'd like to create a backup of the kitty.config file. It would be ideal if the script could handle this task. On Unix systems, the default configuration file is located at ~/.config/kitty/kitty.conf. I suspect that Kitty may already store a backup in the file named ~/.config/kitty/kitty.conf.bak. To be safe, we should avoid overwriting the default backup location. Let's use current unix timestamp as an additional name part for the file.

import time  # we will use it to get unix timestamp
import os  # we will use it to expand user path

# config file paths
current_unix_timestamp = str(time.time())
default_config_file = '~/.config/kitty/kitty.conf'
current_backup_file = f'~/.config/kitty/kitty.conf.{current_unix_timestamp}.bak'
default_config_file_full_path = os.path.expanduser(default_config_file)
current_backup_file_full_path = os.path.expanduser(current_backup_file)

Time to make a code for making backup.

import shutil  # we will use it to copy files

# backup config file
shutil.copyfile(default_config_file_full_path, current_backup_file_full_path)

Now we need to build a map of our keyboard layouts. In my case, I would create a mapping between the default English and Russian layouts because I use them most frequently for typing in any language. However, if your keyboard differs from the English US layout or if you use other non-Latin layouts, you should create your own map.

To simplify things, I created a text file with two lines. The first line corresponds to my English layout, and the second line to my Russian layout. I simply typed each key on the keyboard once, following the same sequence. This means, for example, that the character at position number 7 in the first line is on the same key as the character at position number 7 in the second line, but they represent different characters because they correspond to different symbols.

Here is my example.

qwertyuiop[]\asdfghjkl;'zxcvbnm,./
йцукенгшщзхъ\фывапролджэячсмитьбю.

Let's write some code to read that file and construct a map.

# load map file
with open('map.txt') as f:
    lines = f.readlines()
line1 = lines[0].strip()
line2 = lines[1].strip()
map_dict = dict(zip(line1, line2))

Now we could use map_dict as a source of mapping. Here are a few examples.

# get value for v in map_dict
print('Value of v is ', map_dict['v'])

# get value for c in map_dict
print('Value of c is ', map_dict['c'])

# get value for b in map_dict
print('Value of b is ', map_dict['b'])

The next step awaits us. I believe it would be a good and straightforward idea to implement the following algorithm:

Open the config file.
Read it line by line.
If a line does not contain a key map, then simply add it to the output as is.
If a line contains a key map, then add the original line as well as an additional line.
Save the output lines in the original file.

There are also two important things. The config file contains lines with comments that we do not wish to alter. These documentation comments begin with "#::". We should skip those lines and leave them unmodified. Additionally, the file has mappings lines that are commented out with the symbol "#". These represent default Kitty shortcuts. For such lines, we should remove the comment character and include two lines in the output: the original one and a new one with the non-Latin mapping. This is necessary because our goal is to keep the shortcuts functional for both keyboard layouts.

To find the correct mapping of the shortcut key, I use the split method on strings to determine the position of the shortcut key combination and then separate it into individual keys. We do not want to alter characters in keys such as "cmd", "alt", "ctrl", etc. However, we would like to change the mappings for keys like "k", "a", "c", etc.

# read config file all lines
with open(default_config_file_full_path) as f:
    lines = f.readlines()

# for each line search mapping line and add additional line with mapping
new_lines = []
for line in lines:

    # if line doesn't contain map
    if ' map ' not in line:
        new_lines.append(line)
        continue

    # if line contains map but starts with #::
    if line.startswith('#::'):
        new_lines.append(line)
        continue

    # line contains map the first thing is to find mapping parts
    line_parts = line.split(' ')
    map_part_index = line_parts.index('map')
    keys_part_index = map_part_index + 1
    keys_list = line_parts[keys_part_index].split('+')

    # for each key in keys list find mapping
    new_keys_list = []
    for key in keys_list:
        if key not in map_dict:
            new_keys_list.append(key)
            continue
        new_keys_list.append(map_dict[key])

    # create new line with new keys list
    new_keys_part = '+'.join(new_keys_list)
    new_line = ''
    for i, part in enumerate(line_parts):
        if i == keys_part_index:
            new_line += new_keys_part
        else:
            new_line += part
        new_line += ' '

    # remove comment from line and new line if it exists
    if line.startswith('#'):
        line = line[1:].strip() + '\n'
        new_line = new_line[1:].strip() + '\n'

    new_lines.append(line)
    new_lines.append(new_line)

# write new config file
with open(default_config_file_full_path, 'w') as f:
    f.writelines(new_lines)

It looks understandable to me; however, if you have any questions, please ask them below. I hope this article helps you. Don't forget to follow me on X (formerly Twitter) or subscribe to the blog newsletter.

Why Python is best tool for data processing

Ivan Karabadzhak — Sat, 30 Sep 2023 17:53:30 +0000

For a long time, I used NodeJS as a tool for all kinds of tasks. Nowadays, however, I find myself increasingly drawn to Python for data processing tasks, which have become more frequent in my work. I've found that NodeJS can be somewhat verbose for these types of projects, especially when dealing with one-time scripts.

As such, I've switched to Python where speed and asynchronous programming aren't vital. This shift has led me to appreciate the advantages of using Python for data processing, making it my go-to tool for such tasks.

Python’s simplicity and efficiency

If you're like me, having switched from NodeJS to Python, one of the first things you'll appreciate is Python's simplicity. Its syntax is clean and easy to understand, making it a breeze to read and write code in Python. This is particularly handy when working on data processing tasks where complexity can escalate quickly.

For instance, consider how we can load a CSV file, clean missing data, and compute the mean value of each column using the Pandas library in Python - all accomplished in just a few succinct lines of code:

import pandas as pd
# Load a CSV file
data = pd.read_csv('file.csv')
# Clean missing data
data = data.dropna()
# Compute the mean value of each column
mean_values = data.mean()
print(mean_values)

In addition to its simplicity, Python is extraordinarily efficient. Especially with data processing tasks that often involve dealing with large datasets, Python truly shines. It handles big data smoothly, enabling you to process, analyze, and derive insights from your data just like the 'mean_values' computation in our example, without skipping a beat.

Python’s powerful libraries for data processing

One of the main reasons why Python has become a powerhouse for data processing is its vast selection of libraries. In particular, Pandas, NumPy, and SciPy are three major players that work together to streamline the entire data processing journey. Gone are the days of verbose scripts in NodeJS; with these Python libraries, data processing becomes efficient and elegant.

For instance, in the following code, we utilize all three libraries to load a CSV file, generate an additional data column based on a condition, and perform a statistical test:

import pandas as pd
import numpy as np
from scipy import stats

# Load a CSV file using pandas
data = pd.read_csv('file.csv')

# Using numpy to generate an additional data column
data['new_column'] = np.where(data['old_column'] > 0, 1, -1)

# Using scipy to calculate a statistical test on two data columns
t_test_result = stats.ttest_ind(data['column_1'], data['column_2'])

print(t_test_result)

Each library boasts unique features: Pandas excels at data manipulation and analysis (as seen in loading the CSV file), NumPy aids numerical operations (demonstrated in creating the new column), and SciPy shines in scientific computations (evident from conducting the t-test). Together, they form a robust toolkit for any data scientist or enthusiast.

Python’s flexibility in handling data

Python's flexibility stands as one of its most compelling features. This adaptability is present in its platform-agnostic nature, allowing Python to seamlessly integrate across multiple operating systems. Whether you're employing Windows, macOS, or Linux, Python ensures a smooth coding experience.

Further illustrating this point, Python gracefully handles data in varied types and structures. From structured CSV files to semi-structured JSON data, or even data fetched directly from SQL databases - Python can work with them all. Moreover, it's capable of merging data from different sources, dealing with nested information, and transforming data types effortlessly.

This makes Python an extremely versatile tool, fitting for a range of applications; whether they are straightforward scripts or intricate data analysis tasks, Python adapts to the needs of the scenario at hand. Its flexibility truly sets it apart, ensuring it remains a popular choice among programmers worldwide.

import pandas as pd

# Load CSV data 
csv_data = pd.read_csv('data.csv')

# Load JSON data
json_data = pd.read_json('data.json')

# Load data from a SQL database
from sqlalchemy import create_engine

engine = create_engine('sqlite:///:memory:')
sql_data = pd.read_sql_query("SELECT * FROM my_table", engine)

# Work with data of different structures
# Flatten a nested column in the JSON data
json_data_flat = pd.json_normalize(json_data['nested_column'])

# Merging different data sources
merged_data = pd.merge(csv_data, json_data_flat, on='common_column')

Python's active community and helpful resources

A truly remarkable aspect of Python is its vibrant community. There's a plethora of resources available online for Python users, from beginners to seasoned professionals. Whether you're looking for tutorials, guides, or forums to troubleshoot an issue, the Python community has something to offer.

Moreover, Python is open-source, meaning it's continuously updated and improved by developers worldwide. This collaborative spirit ensures that Python remains on the cutting edge, and provides users with a virtually unlimited reservoir of knowledge and support.

Conclusion: Python – the optimal choice for data processing

In conclusion, Python emerges as the ideal choice for data processing tasks. Its simplicity, efficiency, wealth of powerful libraries, flexibility, and supportive community make it a force to be reckoned with in the realm of data science.

Whether you're just starting out or looking to ramp up your data processing capabilities, Python offers an extensive range of features to help you succeed. So, explore Python, leverage its potent capabilities, and revolutionize your approach to data processing. Once you experience Python's prowess, you'll wonder how you ever managed without it.

Making rest API with Deno and TypeScript

Ivan Karabadzhak — Wed, 12 Jul 2023 10:41:17 +0000

To be honest, I prefer the NodeJS runtime over JavaScript itself. While JS is great, I appreciate the added benefits of type validation and similar features. During my student days, I heavily used C# to build everything from desktop apps to web services, which is probably why I love TypeScript.

Today, I'll show you how to create a Rest API using Deno and TypeScript. It's a powerful combination that I'm excited to share with you.

What is Deno?

Deno is a secure and modern JavaScript/TypeScript runtime created by Ryan Dahl, the same person who created Node.js. It allows you to run JavaScript and TypeScript code outside a web browser, with built-in support for modules, TypeScript, and other valuable features. Deno is becoming increasingly popular among developers due to its security, simplicity, and ease of use.

By the way, if you are struggling with which language to learn first, check out my article about that: Choosing Your First Programming Language: A Beginner’s Guide.

Why Deno?

As I said before, I love TypeScript. Deno allows to run TypeScript directly without compilation in JavaScript.

One more reason is more personal. I like all ideas around Deno project. It would be great to try it with you.

Our Goal

We aim to create a REST API for generating "lorem ipsum" text via user requests. As part of the development process, we'll be implementing a basic security feature: API key validation.

Installing Deno

Deno installation is a simple process. There is an install script that could help do that on different platforms. I like Deno distribution idea like "one single executable". That makes more simple to deploy and use Deno.

Creating project

I suppose you have installed Deno and are ready to continue. Let's create a new directory for our project and then run deno init.

mkdir lorem-ipsum-api-deno-typescript
cd lorem-ipsum-api-deno-typescript
deno init

Let's try to run a boilerplate.

deno run main.ts

Excellent, it's working. Now we are ready to move forward.

Create HTTP end-point

Let's create HTTP end-point. We will use Oak framework for that. Oak is similar to Express framework, which you maybe know because it is very popular in NodeJS community.

The basic code could look like the following.

// import Application class from Oak module
import { Application as OakApp } from "https://deno.land/x/oak/mod.ts";

// create main function of our program
export function runHttp(): void {

    // create new instance of Oak Application
    const app = new OakApp();

    // add handler to our application
    app.use((ctx) => {
        ctx.response.body = "Hello World!";
    });

    // start our application and use promise to show server started or not
    app.listen({ port: 8000 });

    // show message in console
    console.log("Server started on port 8000");
}

// run main function if this file is executed directly
// (not imported as a module)
if (import.meta.main) {
    runHttp();
}

Let's run it and test it. We should add --allow-net parameter to deno run command, because default Deno settings don't allow script access to the networking.

deno run --allow-net main.ts

Nice! Everything is working.

Adding router for lorem ipsum generation

Having all code inside one file and a single function isn't a good idea. Let's make a folder for routes and create there our first router.

// import Router class
import {Router} from "https://deno.land/x/oak/mod.ts";

// create new class that extends Router class
export class LoremIpsumRouter extends Router {

    // create constructor and init routes
    constructor() {
        super();
        this.get("/lorem-ipsum/get-text", this.getText);
    }

    // create handler for GET /lorem-ipsum/get-text
    getText(ctx): void {
        ctx.response.body = "Lorem ipsum dolor sit amet...";
    }
}

Let's import it inside our app.

// import our router class
import { LoremIpsumRouter } from "./routes/lorem-ipsum-router.ts";

And add using a new router by our app.

// create lorem ipsum router
const loremIpsumRouter = new LoremIpsumRouter();

// add handler to our application
app.use(loremIpsumRouter.routes());
app.use(loremIpsumRouter.allowedMethods());

Time to run and test.

Great! Everything is working fine.

Creating handling functions

Let's create a controllers directory and put code for handling requests there. I have created a separate class with static functions. We could use even just functions for that small project without creating classes. However, I put all handling functions inside the same class for a nice structure.

export class LoremIpsumController {

    public static getParagraphs(ctx): void {
        ctx.response.body = "Lorem ipsum dolor sit amet PARAGRAPHS...";
    }

    public static getSentences(ctx): void {
        ctx.response.body = "Lorem ipsum dolor sit amet SENTENCES...";
    }

    public static getWords(ctx): void {
        ctx.response.body = "Lorem ipsum dolor sit amet WORDS...";
    }
}

Now we can change a bit router to make it works with the newly created controller. I have added an optional parameter count to each one. That will allow our API users to specify the desired length of the requested text, sentences, or words. And I connected our controller to the router.

// import Router class
import {Router} from "https://deno.land/x/oak/mod.ts";
import {LoremIpsumController} from "../controllers/lorem-ipsum-controller.ts";

// create new class that extends Router class
export class LoremIpsumRouter extends Router {

    // create constructor and init routes
    constructor() {
        super();
        this.get("/lorem-ipsum/paragraphs/:count?", LoremIpsumController.getParagraphs);
        this.get("/lorem-ipsum/sentences/:count?", LoremIpsumController.getSentences);
        this.get("/lorem-ipsum/words/:count?", LoremIpsumController.getWords);
    }
}

Connect library for generating "lorem ipsum"

Thankfully for npm packages support in Deno we can use an existing library to generate the text. Let's use this package.

In Deno you don't need to install the package. For using lorem ipsum library, let's add those lines inside our controller file.

import { LoremIpsum } from 'npm:lorem-ipsum@2.0.8';

As you can see, it's easy to use npm package in Deno program. The syntax is easy npm:package-name@version.

Controller code for the responses

Time to add actual code for generating the response. Here is our complete controller code.

import { LoremIpsum } from 'npm:lorem-ipsum@2.0.8';

export class LoremIpsumController {

    public static getParagraphs(ctx): void {
        const count = ctx.params.count ? parseInt(ctx.params.count) : 3;
        const lorem = new LoremIpsum();
        ctx.response.body = lorem.generateParagraphs(count);
    }

    public static getSentences(ctx): void {
        const count = ctx.params.count ? parseInt(ctx.params.count)  : 3;
        const lorem = new LoremIpsum();
        ctx.response.body = lorem.generateSentences(count);
    }

    public static getWords(ctx): void {
        const count = ctx.params.count ? parseInt(ctx.params.count)  : 3;
        const lorem = new LoremIpsum();
        ctx.response.body = lorem.generateWords(count);
    }
}

Pretty simple, yeah? Don't forget to convert the count parameter to a number because, by default, it's a string. Also, I added the default count value as 3.

Is it working? Of course, I have tested the system.

Auth for Deno Rest API

Oak framework allows us to make different auth mechanisms. However, I would like to stay with a pretty simple one. Let's make auth with hardcoded Bearer Token.

First, I created auth middlewares folder and file inside: middlewares/auth-middleware.ts. The code of the file is pretty simple.

export async function authMiddleware(ctx, next) {
    
    // get authorization header
    const authHeader = ctx.request.headers.get('authorization');

    // check if authorization header exists and starts with Bearer
    if (!authHeader || !authHeader.startsWith('Bearer ')) {
        ctx.response.status = 401;
        ctx.response.body = {message: 'Unauthorized'};s
        return;
    }

    // get token from authorization header
    const token = authHeader.split(' ')[1];

    // check if token is valid (in this case token is '123456789')
    if (token !== '123456789') {
        ctx.response.status = 403;
        ctx.response.body = {message: 'Forbidden'};
        return;
    }

    // call next middleware
    await next();
}

But to make it work, we must add it to our app object. Let's edit the main.ts file a bit.

...

// import our middleware
import {authMiddleware} from "./middlewares/auth-middleware.ts";

...

// add our middleware to our application
app.use(authMiddleware);

Looks good. Let's test it out.

Everything is fine.

Final?

As you can see, building web apps with Oak framework isn't complex. Honestly, it's the same as Express framework in NodeJS.

I hope today you learned something new and easy can build Deno Rest API by yourself. If you have any questions or want more articles about Deno, please write about it in the comments section.

If you want to have the full source code checkout this GitHub repository.

Puppeteer doesn’t remove files from temp directory

Ivan Karabadzhak — Sun, 19 Mar 2023 07:11:21 +0000

Frequently I am building bots. They are running on the server and gathering some data. For some of them, I use Puppeteer and headless Chromium instances. That combination works great. However, there is an issue. Puppeteer doesn't remove files from a temp directory. After a while, it could be a problem, because directory size is growing consistently.

Did you meet the same issue? Let me help you fix it.

Good to know

This article is suitable only for people who run Puppeteer on Linux (maybe on Mac?). If you are using Windows, unfortunately, I can't help. However, perhaps you could use a general idea and make the same for your case.

Long story short

I solved that issue by adding a crontab task, which deletes all files with a modification time older than 10 days.

If you want to know more details read the following text.

Search Puppeteer temp files

Let's go into /tmp directory and check where are Puppeteer files.

# show files from /tmp filter by "puppeteer"
ls /tmp | grep puppeteer

Here we go. Puppeteer creates many directories. Let's calculate how many directories we have and the total size of them.

# count of directories
ls /tmp | grep puppeteer | wc -l

# total size of them 
du -hc /tmp/puppeteer* | grep total

I got 25782 directories and 27 gigabytes of size. It's huge... Let's move on and automate removing them.

Help Puppeteer remove temp files

If the mountain doesn't go to me, I will go to the mountain 😄. Let's write a crontab task to remove Puppeteer files that weren't modified for a long time.

First, let's write a command to find files older than 10 days (for example).

# find dirs and files that weren't modified 10+ days
find /tmp/puppeteer* -mtime +10

The command will find files that weren't modified 10 or more days ago. To delete them, we could extend the command like the following one.

# find and delete dirs and files that weren't modified 10+ days
find /tmp/puppeteer* -mtime +10 -exec rm -rf {} \;

Time to add it as a crontab task. Write the following command to open the crontab config.

crontab -e

Here is my example. The crontab will run that command each day at 4:05 and delete all files related to Puppeteer. I used the full path to find the command to be sure crontab would use the correct one.

Conclusion

That simple way will help Puppeteer to remove files from a temp directory. If you have any questions, ask them below in the comments section.

If you are interested, I have one more article related to headless browsers. Check it out: How to protect content against scrapers with headless browsers?

Choosing Your First Programming Language: A Beginner’s Guide

Ivan Karabadzhak — Fri, 03 Mar 2023 06:43:46 +0000

Are you wondering with questions: Which programming language should I learn first? What is the best coding language to learn first? Let me help with that.

Picking your first programming language can seem complex, especially if you're just getting started in that wonderful world. With so many options with unique advantages and drawbacks, it's not easy to know where to begin.

My first programming language

When I was 14, I started learning my first coding language, which wasn't easy. At one point, I almost gave up. The reason is, the internet suggested that "all languages are garbage, cool hackers use only C or C++". Learning programming from C/C++ isn't an easy task, and my suggestion is to start with something more straightforward and move forward if you like it and can see your goals more clearly.

As mentioned, choosing the first coding languages is complex. But by thinking about your interests and objectives, the job market, and the types of applications each language is typically used for, you can simplify your decision-making process and find the right language to start with.

Let's go to each point and discuss it a bit.

1. Consider your goals and interests

This step is vital in making an informed decision about where to start. By understanding what you want to achieve and what excites you, you can narrow your options and find the best-suited language.

Your goals may include building specific types of applications, such as mobile or web apps, or working in fields like data science or machine learning. Match your goals with the unique abilities of various languages to discover the one that helps you achieve your aspirations.

Your interests can also affect your decision. For example, if you enjoy working with visuals, you may prefer a language ideal for game or front-end web development. Python may be more appealing if you're more into data analysis and statistics. Choose a language that motivates you to learn by identifying your interests.

Remember, your interests and goals may change over time, and shifting your focus or even languages is okay if necessary. Start learning, enjoy the process, and have a clear objective to maximize your time and effort.

2. Popular languages are good options for beginners

Python and JavaScript are two fantastic options for beginners. They have huge communities and a lot of resources, videos, and tutorials. One of the most significant benefits of starting with a popular language is the size and diversity of its community. As a novice, you'll have access to plenty of resources and tutorials, including online documentation, code samples, forums, and educational materials. This makes it much simpler to learn the language, resolve issues, and locate solutions to problems that you may encounter.

Python is a versatile, high-level programming language for data science, machine learning, and web development. The language features a simple, readable syntax and an extensive standard library, making it easy to learn and utilize. Python also has numerous libraries and frameworks like pandas, scikit-learn, and Tensorflow, making it incredibly powerful. The Python community is very active and supportive, and you will find a lot of learning materials, tutorials, and documentation to help you learn more about the language and its applications.

JavaScript is a widely-used programming language mainly used to develop interactive and dynamic web pages and applications. JavaScript is also known as the only language that can run on the browser, making it the perfect choice for front-end development. The language boasts many frameworks and libraries like React and Angular, which make it very popular for web development. Furthermore, JavaScript can be used for server-side programming with NodeJS. With a huge community and plenty of resources, learning JavaScript can be a straightforward and enjoyable experience.

By the way, I have two popular articles with code examples of JavaScript and Python. Would you check them?

3. Job market and the types of applications

When selecting your first programming language, consider the job market and the types of applications typically developed with that language. Different languages are used for various purposes, and the type of application you want to build can impact which language is most appropriate for you to learn.

To assess the job market for a language, examine the number of job postings that require it. For example, Python is often used for data science and machine learning, and it's in high demand in these fields. JavaScript is often used for web and front-end development, commonly used to develop interactive and dynamic web pages and applications. Learning one of these languages is a good choice if you want a job in these fields.

Consider the types of applications developed using a particular language. For instance, learning JavaScript is wise if you're interested in building web apps due to its popularity in web development. Conversely, Python is more appropriate if you're interested in data science and machine learning. Many languages have multiple purposes, and you can find a job in a specific field with various languages.

Therefore, consider which language is more commonly used in the industry or field you wish to work.

4. Learning curve

When selecting your first programming language, consider the learning curve. Various languages have different levels of complexity, and some are easier to learn than others. For a beginner, starting with a language with a relatively straightforward syntax may be more beneficial. This can help make the learning process less frustrating and more enjoyable.

Python, for instance, has a simple and readable syntax that makes it easy to understand the code and write your programs. It has a simple grammatical structure and easy-to-understand ways of performing common operations. Furthermore, some languages have many resources, tutorials, and documentation available that can help you get started quickly. This makes it easier for beginners to learn the language and build their programs.

Other languages, such as C++ or Java, have a steeper learning curve, with more complex syntax and a greater number of features and concepts to learn. These languages may require more time and effort to master, making them more challenging for beginners. However, once you have mastered the language, you'll be able to build more complex applications.

Bear in mind that the learning curve of a language is not the only factor to consider when selecting your first programming language. Other factors, such as community support, the job market, and your interest in projects, are also critical. Therefore, the best approach to choosing a language would be to weigh the pros and cons of each and make a decision that best suits your personal situation.

5. First programming language & Fun?

Learning your first programming language can be an exciting and rewarding experience, but it can also be challenging and frustrating at times. However, enjoying the process and having fun while learning is essential.

One way to make the learning process more enjoyable is to find a language that aligns with your interests and passions. For example, if you're interested in web development, learning JavaScript can be a fun and engaging experience. On the other hand, if you're interested in data science and machine learning, Python may be a more intriguing language to learn.

Another way to make learning fun is to set small and achievable goals for yourself. This can help you stay motivated and make the learning process more manageable. Celebrate your achievements along the way, and don't be afraid to make mistakes as they can be valuable learning experiences.

In summary, having fun while learning your first programming language is crucial. Finding a language that aligns with your interests and passions, setting achievable goals, and celebrating your progress can make the learning process more enjoyable and rewarding.

Summary

In summary, while learning a programming language may require effort and dedication, ensuring you're having fun and enjoying the process is essential. This will help you stay motivated and progress, and it will make it more likely that you'll continue to learn and use the language in the future.

Do you have any questions? Ask them in the comments section below.

How to debug TypeScript in WebStorm?

Ivan Karabadzhak — Sun, 19 Feb 2023 08:10:55 +0000

In this article, I want to show you how WebStorm can debug TypeScript code. As you know, TypeScript code should be compiled into JavaScript before running in a browser or NodeJS. After compilation code will not be the same. If you want to put a breakpoint and check variable values, you have to tell the debugger where it should stop. How to do that?

I will set up a project from scratch and show you how to make the WebStorm debugger work.

Long Story Short: you need to set sourceMap parameter in tsconfig.json to true. It will tell tsc to build source maps and that will help WebStorm to know where to stop if you put a breakpoint.

Setup the TypeScript project

First of all, you should have installed NodeJS and WebStorm to make all scripts on commands works. Also, all terminal commands might not work in Windows systems.

And one more important thing. Of course, you can debug with console.log and don't use any external debugger. However, I should say sometimes the program's complexity makes console.log debugging pretty hard. Better to have some tools in the pocket that will allow you to use more power.

Let's set up an empty project first. We can create a directory and initialize npm there by following commands.

# create directory
mkdir typescript-debug-webstorm

# go inside directory
cd typescript-debug-webstorm

# initialize empty npm project
npm init -y

To make TypeScript work we need to install it and initialize it. Let's do that.

# installing TypeScript
npm i --save-dev typescript

# initialize default configuration
npx tsc --init

Now I would like to set up a basic directories structure. My preference is to use src directory for TypeScript files, and dist directory for compiled code.

# create both directories 
mkdir src 
mkdir dist

Now time to edit TypeScript configuration and make it work as excepted with my directories. Open the directory in WebStorm, and then open the tsconfig.json file. Afterward we need to edit it a bit to make it work with my preferred directory structure.

TypeScript compiler will scan src directory by default. As for dist directory, we need to edit the parameter outDir. Find it in the file, remove the comment, and change it to ./dist.

Now time to test our setup before we move to debug. Let's create a simple index.ts file inside the src directory.

And here is the code.

function main() {
    console.log('Hello World! We will setup TypeScript debugging in WebStorm!');
}

main();

Let's compile it and run it by executing the following commands.

# compile source (you could also just run tsc)
npx tsc 

# run 
node dist/index.js

Nice! As a result it looks like everything is working. But noted let's set up one more thing before we will move to debugging. I am talking about npm commands. Open the package.json file and add a few commands inside the scripts section. Here is my result package.json file.

{
  "name": "typescript-debug-webstorm",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "npx tsc",
    "prestart": "npm run build",
    "start": "node dist/index.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "^4.9.5"
  }
}

As you can see, I added the commands build and start. Also, I added a pre-command, which will run before each start execution start. Now we can run our program by following the command, and the source code will be compiled automatically. That is possible because before each start we run the build command which compiles our sources via TypeScript compiler.

Let's change our program code a bit and rerun the program.

function main() {

    console.log('Hello World! We will setup TypeScript debugging in WebStorm!');
    for (let i = 0; i < 10; i++) {
        console.log(`Debugging is fun! ${i}`);
    }
}

main();

# run our program by following command
npm run start

It looks like everything is working. Okay, now let's move to setting up the debugger.

Debugging TypeScript in WebStorm

First, let's add run configuration to our WebStorm settings.

Open Edit Configurations popup.
Then press on "+" to add new.
In the new popup, select npm.
After select the command start from the scripts menu.
Press OK.

1. Open Edit Configurations popup.

2. Then press on "+" to add new.

3. In the new popup, select "npm".

4. After select the command start from the sripts menu.

5. Press OK

After all, we are done with the configurations. Let's try to debug. Put breakpoint somewhere, for example, on the second console.log call. To do that, click on the line number on the left.

Then press debug button on the top. Additionally don't miss one important thing: the start script should be selected like a current run configuration.

Nice, but... The program finished successfully, besides nothing happened with our breakpoint.

Why did it happen? As I mentioned before, WebStorm doesn't know where to stop, because NodeJS executes compiled JavaScriopt code.

How to fix it? We need to edit the tsconfig.json file and set sourceMap parameter to true. That will tell TypeScript compiler to make a source map between TypeScript and JavaScript code. Because of that WebStorm will know where is corresponding code.

Let's try again to debug.

Finnaly it's working! After that you could use the Resume Program button and iterate via each loop statement inside the code. Awesome, isn't it?

In sum it isn't too hard to setup debugger for TypeScript in WebStorm. I hope you will be able to use the full power of the WebStorm debugger. If you have any questions feel free to ask them in the comments section below.

If you would like to check source files welcome to my GitHub: https://github.com/Jakeroid/blog-article-typescript-debug-webstorm.

How to write your first Solidity smart contract?

Ivan Karabadzhak — Thu, 03 Nov 2022 20:06:34 +0000

Hello folks! Maybe, as you might know, I am learning blockchain development. My current focus is Solidity smart contract development. I decided to make a simple article to show you how to write your first Solidity smart contract. I don't think you will learn a lot. But I want to show how it is simple to start. Maybe that will motivate you to continue to do some interesting things. Who knows? Let's start.

What is Remix IDE?

Starting to develop Solidity smart contracts is very simple. There is an online IDE for that called Remix IDE. You can open it in your browser and start it! You don't need to set up everything on your computer.

Maybe some serious developers use the local environment to build robust smart contracts. However, I don't know a simpler way for beginners than Remix IDE. So, don't waste your time and click on https://remix-project.org/.

Then scroll down and click on that block.

If you even use VSCode, then you will like Remix IDE UI. They are very similar.

My goal is to show you the simplicity of writing a new contract. So, let's go.

Writing smart contract code

Left-click on the contracts folder on the left and choose a new file. Name it MyContract.sol.

Cool, now we should write code. But before we write the first Solidity smart contract, let's check some examples of open contracts which are already in the contracts folder. You could open, for example, 1_Storage.sol.

There aren't a lot of code lines. It's pretty simple. What could we learn from it?

Each Solidity contract should have a license comment and a Solidity version at the top.
Each contract is very similar to a class in other languages.
The contract could have methods inside.

Let's write our contract now. First copy license and pragma version. Then add an empty contract.

// SPDX-License-Identifier: GPL-3.0

pragma solidity >=0.7.0 <0.9.0;

contract MyContract {

}

Looks great, but it's empty. Let's add some logic.

contract MyContract {
    string name;

    function setName(string memory _name) public {
        name = _name;
    }

    function whatIsName() public view returns(string memory) {
        return name;
    }
}

I will not jump into detail today. The general idea of MyContract is similar to 1_Storage.sol. However, it stores strings instead of integers.

Compiling and Deployment

Press Ctrl + S or CMD + S to compile the contract. Another way is to click that icon and press the button.

If everything is good, you will see the green mark.

Testing

How could we test the contract? In the real world, developers deploy contracts on the blockchain. However, it costs money. Remix IDE provides an environment to deploy contracts and test them for free.

Go to that tab.

There are many things, but you don't need to know each one to test your smart contract. Just press the Deploy button and see the magic.

As you can see contract is deployed. Let's test it. Press the arrow on the left and expand the contract details. You can see our methods/functions from our contract.

Remix IDE provides UI for interacting with our contract. Write something in the input text field and press the "setName" button. You will see some transaction appears in the bottom window. It is similar to transactions when we deploy contracts.

Now press the "whatIsName" button. THE MAGIC WILL APPEAR!

Conclusion

Is it pretty simple? Absolutely! Of course, to develop some complex smart contracts as real developers do, you should learn more about blockchains, crypto, and Solidity language. However, I hope this small note in my blog will inspire you to try and go deeper.

Stay posted if you are interested in more articles about blockchains, crypto, and Solidity.

By the way, did you check my article about how to make a great Upwork profile?

How to set timezone in your docker image?

Ivan Karabadzhak — Wed, 02 Nov 2022 20:04:57 +0000

Sometimes you may want to set the correct timezone in a docker image. It could be needed for some simple things, or even it can change how your application inside the container behaves. Anyway, the task is pretty simple. Let me show you.

So, long story short, to set the timezone in your docker image, add the following line to your Dockerfile.

ENV TZ="Europe/London"

This method will work if you have the package tzdata installed. For example, Debian has tzdata, but Ubuntu doesn't. You need to install tzdata to use the same Dockerfile command in Ubuntu.

What to do if you got something different than Debian? Don't worry, I collected instructions for different distributives. If you use some distro not mentioned, let me know, and I'll try to add instructions for it too.

Debian

As I said before, it's pretty simple. Just add that line to your Dockerfile.

ENV TZ="Europe/London"

Ubuntu

Also simple, but one more command required because we need to install tzdata.

RUN apt-get update && apt-get install tzdata -y
ENV TZ="Europe/London"

Alpine

Very similar to Debian and Ubuntu, but Alpine uses a different package manager (apk instead of apt).

RUN apk add tzdata
ENV TZ="Europe/London"

CentOS

For CentOS, the situation is a bit more complex. CentOS uses the yum package manager. By default CentOS docker image doesn't have any URL in sources lists, so you need to add them first. After that, everything is very similar to another distributive.

RUN sed -i -e "s|mirrorlist=|#mirrorlist=|g" /etc/yum.repos.d/CentOS-*
RUN sed -i -e "s|#baseurl=http://mirror.centos.org|baseurl=http://vault.centos.org|g" /etc/yum.repos.d/CentOS-*

RUN yum -y install tzdata
ENV TZ="Europe/London"

If you want to have Dockefile examples, please, check out my github.

I hope this article helps you. Feel free to ask any questions in the comments.

How to download Vimeo video using JavaScript?

Ivan Karabadzhak — Wed, 02 Nov 2022 19:50:29 +0000

Some time ago, I made the same article but with Python. You can find it here. Some guys asked me to make a similar post, but with JavaScript and NodeJS. So, today I'll teach you how to download a Vimeo video using JavaScript. The article is oriented toward beginners. Welcome undercut.

Attention!

I made this post and this code for learning purposes. I don't recommend it for commercial use. I'm not responsible for any damage caused by this code. Please, don't lawlessly use this code and avoid any illegal activities.

Setup project template

I have NodeJS on my MacBook if you don't, please install it first. Installing NodeJS is out of scope for this post, but if you need some help feel free to ask any questions here or on my Twitter. My NodeJS version is 18.0.0.

The next step is creating an empty directory and initializing npm there. I use terminal commands for that.

# create directory
mkdir download-vimeo-video-javascript

# go inside
cd download-vimeo-video-javascript

# init npm
npm init -y

Those commands create a project directory and initialize it with the default package.json file. By default, index.js is the main file, but I prefer for those kinds of apps to use app.js.

Also, to use ES6 imports, we need to change the package type by putting the "type": "module" option. I usually do it to be able to use "import" instead of "require".

And will be great to have npm command to run our application.

Honestly, this doesn't matter for the current article, but I am showing you what I always do. So, let's edit package.json file.

{
  "name": "download-vimeo-video-javascript",
  "version": "1.0.0",
  "type": "module",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node app.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

We need to create a file app.js in the same directory and start coding. Finally!

Basic code

Let's make basic code for our app.js file.

'use strict';


const main = async () => {
    
    console.log('Hello World');
}

const promise = main();

promise.then(() => {
    console.log('Program finished!');
});

promise.catch((err) => {
    console.log('Program finished with error!');
    console.log(err);
});

Let me explain why we make those code.

The first line tells NodeJS we want to use strict mode. Strict mode is out of the scope of this article too. I use it by default because it disallows you to do some not safe things, and also, it shows an error that doesn't appear in no strict mode.

The next block is the initialization async function and putting it inside the variable name. I prefer to have the ability to use async/await constructions. You can put await only inside asynchronous functions. That's why I create the main. Inside the function, we have console.log call with hello world just for testing purposes. We will remove it later.

Below the main function initialization, I put calling of it and promise with then and catch handler. If you want to know more about promises, let me know. I could write an article about that.

Let's test our program. Run the following command.

npn run start

My result is in the screenshot bellow.

Looks like everything is working. Let's move to downloading the video now.

Theory

If you watch any video from Vimeo, your browser downloads it in the background. So, we can do the same, but we need to know the video URL. If we have a video URL, there isn't a problem with downloading it.

I have investigated before, and I know where it is. When you visit Vimeo page, your browser sends one more request with video ID to Vimeo servers, and it gets JSON object with information about the video. There is a video URL too.

Getting Vimeo video ID

Let's take some video for example. I took this one randomly in the previous article. It looks strange, but we don't need to care about content.

Our first goal is to take the ID of the video. Video ID is those numbers at the end of video URL.

    // input video url
    let inputVideoUrl = 'https://vimeo.com/712159936/';

    // check is there ending slash and remove it
    if (inputVideoUrl.slice(-1) === '/') {
        inputVideoUrl = inputVideoUrl.slice(0, -1);
    }

    // get video id from url
    const videoId = inputVideoUrl.split('/').pop();
    
    console.log(videoId);

Maybe you want some additional explanation.

At first, I checked if is there an ending slash inside the input URL. This is required because I want to split the string by "/" char and get the last element or result array (video ID). So, an ending slash could interfere with doing that.

Okay, we have a video ID. What is next?

Getting project JSON config from Vimeo

In my previous article how to download Video video using Python I show screenshots from browser inspection. They illustrate how browser sends an additional request to Vimeo servers and get project JSON config. Let me put them here.

As you can see, a browser sends the request to some Vimeo URL and get the JSON configuration of the video. You can't see this on screenshots, but for a request, the browser uses host player.vimeo.com.

Time to make the same.

First, let's import https module. For that just add import on the top of the file import https from 'https'; I like to use async/await contraction, so let's use promises to get our JSON with https module.

    // video json config url
    const videoJsonConfigUrl = `https://player.vimeo.com/video/${videoId}/config`;

    // get video json config
    const videoConfig = await new Promise((resolve, reject) => {

        https.get(videoJsonConfigUrl, (res) => {

            let result = '';

            res.on('data', data => {
                result += data;
            });

            res.on('error', err => {
                reject(err);
            });

            res.on('end', () => {
                resolve(JSON.parse(result));
            });

        });
    });

    console.log(videoConfig);

Here I put await and create new promise. The main code for getting video is inside the promise. I put data in the result string chunk by chunk and resolve it when the end event is emitted. If some error happens, then my code call rejects.

I put the result on the screenshot.

What is the next step?

Download Vimeo video using JavaScript

Each video has different video quality. Each quality item has its own URL. There is a field videoConfig.request.files.progressive. It is an array of objects. Each object represents a video quality item. And, of course, each object has its own URL.

Let's ignore quality choosing for now and download the first available one. At first, we need to import module fs. Add this line to the top of file import fs from 'fs';

Now we can implement downloading and finally get that video from Vimeo.

    // video quality items
    const videoQualityItems = videoConfig.request.files.progressive;

    // select file url
    const targetItem = videoQualityItems[0];
    const targetVideoFileUlr = targetItem.url;
    const localPath = `./${videoId}-${targetItem.quality}.mp4`;

    // download it
    await new Promise((resolve, reject) => {

            https.get(targetVideoFileUlr, (res) => {

                const file = fs.createWriteStream(localPath);

                res.pipe(file);

                res.on('error', err => {
                    reject(err);
                });

                res.on('end', () => {
                    resolve();
                });

            });
    });

I used almost the same way to download video, except adding pipe from the input https stream to the output file write stream. This allows us to download a huge file without taking care of memory.

Looks like everything works as excepted.

Choosing the quality of video

Now, let's say we want to choose the quality of the video. For example, let's take the best one. I use reduce method of the array for that.

    // selecting the best video quality based on height and width
    // you could also add FPS multiplication to get the best quality based on FPS too
    const targetItem = videoQualityItems.reduce((prev, curr) => {
        return prev.width * prev.height > curr.width * curr.height ? prev : curr;
    });

The logic here is very simple. Best quality = bigger amount of pixels. You could also FPS multiplication to get the best quality based on FPS too.

Conclusions

In general downloading video from Vimeo using JavaScript is pretty simple. I hope my article was useful for you. If you have any questions, suggestions, or criticism, please ask them below in the comments or write me directly on Twitter.

I put all code in my GitHub repository in case you need to check the full version.

How to protect content against scrapers with headless browsers?

Ivan Karabadzhak — Tue, 01 Nov 2022 20:23:11 +0000

We are living in a century of information. The data could bring huge value to your business. That's why a lot of different scrapers exist in the world. I guess each owner of a website at least once was thinking about how to protect their content. One of the ways is to use JavaScript to render content. However, modern technologies allow running a headless browser on the server and scraping all required data. Let's make scraper's creator life a bit harder…

I want to show you an example of how to protect content from scrapers that use headless browsers for rendering content. However, first, I need to tell you some theories. Feel free to skip the next paragraph if you are a smart ass.

Shadow Root

Let me introduce you Shadow Root. If one of you doesn't know what it is, I'll try to explain. Shadow Root allows you to create separate DOM inside your current DOM. It's kind of a document inside a document. Why could it be useful? For example, you can make your web component with your HTML IDs and CSS classes without taking care of other code on the web page. If you want to learn more, try to read documentation and this article.

Protection

So, how can we use shadow root to protect content from scrapers? Shadow Root has two modes: open and closed. If the mode is closed, then you can't access elements inside JavaScript. That makes it impossible to scrape content from those elements by evaluating JS inside the browser.

I'll show you an example. Let's create an empty HTML document with a div for sensitive data.

<strong>Following content should be protected:</strong>
<div id="protected-content">
</div>

We need to use JavaScript, so let's create a script block after our div and put the following code for the test. I use shadow root in an open mode for now.

<strong>Following content should be protected:</strong>
<div id="protected-content">
</div>
<script>
    const element = document.querySelector('#sensitive-content');
    element.attachShadow({ mode: 'open' });
    element.shadowRoot.innerHTML = '<p>Hello from protected area, buddy!</p>';
</script>

What did we get as a result?

Shadow root example in open mode

Looks like our shadow root code is working. However, it didn't give any protection. You could easily access it by using the code like element.shadowRoot.

element.attachShadow({ mode: 'closed' });

Oops... Looks like my code doesn't work now.

Shadow root is not accessible if mode is closed

As I said before, closed shadow root can't be accessible from JavaScript. That means element.shadowRoot will always be null if the mode is closed.

How can we fix that? Let's create a custom HTML component. At first, I removed div with id protected-content and the old JavaScript tag. Then I made a new script block inside the head and put the following code. The new code contains a declaration of the ProtectedWebComponent, the constructor, and connectedCallback method. You can find similar examples on the internet.

class ProtectedWebComponent extends HTMLElement {
    constructor() {
        super();
        this._protected_root = this.attachShadow({ mode: "closed" });
    }
    connectedCallback() {
        this._protected_root.innerHTML = `<p>Hello from protected area, buddy!</p>`;
    }
}
window.customElements.define("protected-web-component", ProtectedWebComponent);

Then I added a new component to HTML.

<strong>Following content should be protected:</strong>
<protected-web-component></protected-web-component>

Does it work? Yeah, looks good.

Closed shadow root example

However, there is still a problem. You can't access shadow root by calling something like element.shadowRoot, but there is still _protected_root field. So, it allows us to get shadow root by calling element._protected_root. How could we fix that? Let's initialize content inside the constructor and don't save the shadow root link anywhere.

class ProtectedWebComponent extends HTMLElement {
    constructor() {
        super();
        const shadowRootLink = this.attachShadow({ mode: "closed" });
        shadowRootLink.innerHTML = `<p>Hello from protected area, buddy!</p>`;
    }
}
window.customElements.define("protected-web-component", ProtectedWebComponent);

Looks much better now.

It's impossible to access closed shadow root from JavaScript

Source code

If you want to check the source code, welcome to my GitHub repository.

Results

As you can see, it's pretty to protect some content using shadow root. However, you should understand this way is not a magic stick. Using shadow root to protect content could make a web scraper developer's life more complex, but it doesn't put content in some bulletproof armor. If you are interested in how to avoid this protection, write a comment below, and I'll try to explain.

By the way, I have an article how to download Vimeo video using Python. Maybe you are interested.

Port 5000 is already in use macOS Monterey

Ivan Karabadzhak — Tue, 01 Nov 2022 20:10:32 +0000

After an update on my laptop, I got an issue. I have started the Docker container, but it fails. The port 5000 is already in use. Hmm, maybe another container took it. Ah, Airplay took it... Did you get the same issue? Let's fix it.

A long time ago, I started using 5000 ports for my projects. Usually, it is a web service. This is useful because you can't run many services on port 80. With port 5000, I can run containers with a web server, for example, on 5000, 5001, 5002, etc. This is easy to remember a thing. I started using it after some Flask (Python Framework) experience.

So, I started another container and got an error "Port 5000 is already in use". I checked my compose file and open ports and didn't understand the issue. After some research, I remembered about OS updates. Okay, catch you!

In macOS Monterey, Apple added the ability to use your Mac as an AirPlay device. For example, you can stream something from your iPhone to your MacBook.

Solution

Solution #1: This is stupid, but you could use a lot of other ports. For example, not I am using 6000 and other similar ports instead of 5000. Pros of this way are that you get AirPlay enabled on your Mac. There are a lot of open ports, but 5000 was like a habit (not a hobbit).

Solution #2: You could disable AirPlay. Go to System Preferences - Sharing. At the bottom, you will see the checkbox AirPlay Receiver. Disable it to make the port open.

I prefer the first way because using AirPlay on my MacBook could be useful. Anyway, it's good to have a choice. I hope this small note was helpful to you.

By the way, I made a small note about how to remove the Skype icon from menubar on macOS. Would you like to check it?

How to remove Skype icon from the menu bar?

Ivan Karabadzhak — Tue, 01 Nov 2022 19:55:23 +0000

All minimalists and perfectionists are welcome. Today we will make our life a bit easier by removing the Skype icon from the Mac OS menu bar. I am using a lot of messenger apps on my MacBook: Telegram, Signal, Slack, Upwork messages, sometimes Whatsapp, sometimes Viber, and Skype. They don't have an icon in the menu bar, but Skype does. And there isn't any option or setting to remove it. So today, we will smash that icon from our life! Welcome undercut.

How is it possible to remove the Skype icon from the menu bar? The answer is editing Skype source files. I should say this is not my invention. I have found this way on StackExchange. I have used the following command for a long time, but after maybe March 2022 updates, it stopped working.

LC_ALL=C sed -i '' -e "s/_initTray(){.\{7\}/_initTray(){return;/" -e "s/initTrayMenu(){.\{7\}/initTrayMenu(){return;/" /Applications/Skype.app/Contents/Resources/app.asar

Let me explain what the command does. It opens Skype files and replaces some code. Fortunately, Skype was written using some HTML/JS/CSS framework, and I guess it's Electron. So, you can easily open app files and edit JS code to change the app's behavior.

Let's edit the files manually to the disabled annoying Skype icon.

HEX editor

First, you need to have some HEX editor. I am using Hex Fiend, and you can download it from the official web page.

Skype updates

You got an editor, then the next step you should update Skype to the latest version. Each update will remove our code changes. So after the update, you have to edit Skype files to remove the icon. Maybe later, I'll make some automation for that, but for now, it's okay for me to edit source code sometimes.

Also, I recommend keeping the downloaded installer, or you can back up the original files. It could help to restore Skype if you broke something.

Close Skype

Some guys on StackExchange suggest running Skype at least once before editing source code files. Also, this is a good idea to check does Skype works before you start. Anyway, close Skype before editing it.

Edit files to remove the Skype icon

Run an editor and open file /Applications/Skype.app/Contents/Resources/app.asar. You will see something like the following image.

UPDATE 09.04.2023

Skype added multiple files for Intel or Apple Silicon processors systems. Approximately from version 8.95.0.408 you should edit file /Applications/Skype.app/Contents/Resources/app-x64.asar or /Applications/Skype.app/Contents/Resources/app-arm64.asar depending on your CPU type.

Now open Find & Replace menu and find the code:

_initTray(){this._tray=new

Replace it with the following one:

_initTray(){return;ray=new

After don't forget to save the file. Voila! We successfully remove the Skype icon from the menu bar.

Explanation

This code is the beginning of the _initTray functions, which is responsible for creating an icon in the menu bar, handling clicks on it, etc. To disable the icon, we need to change the body of the _initTray function.

The best way to disable executing code is to put a return statement in the first line of the function. However, if you add return in the first line, it breaks Skype. I guess that happens because the file length changed in case of adding new code. The solution is to replace the current code with a new one with the same length.

I hope this article was helpful to you. Ask questions in the comments section below if something is unclear for you.

By the way, I posted why port 5000 is already in use on Mac OS some time ago. Maybe you are interested.