DEV Community: Dagim G. Astatkie

How do you setup your gnome extension development environment?

Dagim G. Astatkie — Fri, 19 Jul 2024 20:47:21 +0000

When I first thought of developing a gnome extension I thought it would be as simple as all the other web projects I did before. Start the project with vite then develop using visual studio code and see changes in real time when you change your code. But it was more complicated than that.

I faced two difficult problems (as a beginner for this kind of development) during this journey.

Finding a good starter template with typescript
Hot reloading the extension when I change the source code in my IDE

After some digging I got an active forum in matrix called extensions-gnome. I relentlessly asked so many questions to the members until I get what I need and finally I was able to have a good dev environment.

Today I want to take you on that journey where I went to have a good development environment when developing extensions for gnome. However, bear in mind that I am just a beginner in this topic and there may be better ways to do what I wanted to do. I wrote this for beginners like me who want to go from 0 to gnome-extension hero 🙂🙂 with simple reproducible steps.

So, for the first problem, I got a simple solution when I was bombarding the matrix room with questions. It was a CLI tool that you can use without installing anything. Here it is:

Scaffolding the Extension

npm create gnome-extension@latest

It will ask you some questions and finally create the extension for you. This is the GitHub repository for the project, if you want to check it out for yourself. create-gnome-extension. This tool gives you a basic extension that you can build and install in your system. But hang in there don't build it yet, there is more configuration.

Hot Reloading

This one was a lot more challenging and took me a couple of days to figure out. The main reason that makes it difficult was that when you change something in you extension and try to apply the latest changes to the running extension for testing, you are actually changing the gnome-shell. Changing the gnome-shell means it has to be restarted so that the changes can take effect and this is only possible by logging out and logging in again to the system. Imagine doing this every time you change something in your code. That would be a total waste of time and disruption of your workflow. The Solution involves virtual machines for testing the running extensions and debugging.

Let's split it the solution into two sub sections.

2.1 Setting Up a Virtual Machine

This one is pretty straight forward. Download an OS of your choice and set it up as a Virtual Machine. For instance I used Gnome Boxes to setup a Fedora 40 Guest OS

The Guest OS should be configured the following way.

Make the default display server x11/Xorg. In the login screen head to the right bottom corner and click the settings button. This is because gnome-shell restart without logging out and logging in is not possible in wayland.

Install Unsafe Mode Menu

This is because the gnome-shell restart needs gnome unsafe mode to be enabled to work correctly.

Install Extension Manager or using the terminal

This is to check your extensions, debug them and more.

Ubuntu
sudo apt install gnome-shell-extension-manager 

Fedora
sudo dnf instlal gnome-shell-extension-manager

Finally, install node because you gonna need it for the extension development. (yeah I know, but you need node in the Guest OS too !!)

Ubuntu
sudo apt install nodejs

Fedora
sudo dnf install nodejs

2.2 Sharing the extension dev folder between the Host and Guest OS

Now that you have your VM setup, you need to be able to install the extension in this Guest OS for debugging purposes. And also change something in your code in the host machine and see the changes in the extension installed on the guest os right away. For this to work we need these packages

sshfs - allows us mount a remote filesystem using SFTP
ssh - allows us to have remote access to a computer Install these packages for your distro both in the host machine and the guest os. And also check whether ssh service is running in both the host machine and the guest os.

So, what we are going to do is, mount a folder from the host machine to the guest os using sshfs. But before this check whether you can ssh into the guest os from the host machine and vice versa. You can use the following command

ssh username@ipaddress

# For example I use

ssh lix@192.168.124.167 -> from host to guest-os
ssh jd@192.168.124.1 -> from guest-os to host

After you make sure the above commands work correctly you can continue to mount you extension directory to the guest os using the following command which uses sshfs. (You run this command in the Guest OS Terminal)

sshfs username@host_ipaddress:/path/to/the/extension/dev/folder /mount/directory/in/the/guestos

# For example I use

sshfs jd@192.168.124.1:/home/jd/JDrive/Projects/TYPESCRIPT/gnome-extensions /mnt/host

This command will mount your extension development folder into the directory you choose in the guest os. After that you can execute commands like rebuild and reload gnome-shell while you are editing the source code in the host machine.

That's it. You are done 🙂🙂. Now all you need is one magical command to run everytime you change something in the source code.

npm run build:dev

You need to run this command in the guest os inside the shared folder (which we mount earlier) and it will rebuild the extension, install it in the guest os and also reload the gnome-shell withing 2–3 seconds. What a relief !!

As you can see I am in the host machine (My main machine) and in the second terminal I ssh into the guest os. So, while I am inside visual studio code I can rebuild the extension installed in the guest os and also reload the gnome-shell of the guest os.

If you happen to know anyway to persist mount during reboots, I will be happy to listen and learn.

Finally, If this helps you setup your environment don't forget to clap and also if you have any feedback don't hesitate to put it in the comment section.

The power button

Dagim G. Astatkie — Thu, 13 Jul 2023 08:02:29 +0000

Have you wondered what happens when we press the power button on our computer ? How does a computer begins in an off state and then be in an active state in 15 seconds ? It would be amazing to know every step a computer takes to be turned on and be fully functional.

That’s what I am going to be researching today.

💡 What exactly happens when you press the power button on your PC ?

To understand the whole process let’s divide it into subtopics.

1. Power

Every component of our computer needs electricity to operate. So, for this purpose there is a component called Power Supply that handles this process. It receives power from a DC, AC or if we have a laptop our battery will do the same thing. They distribute the power among the components of the PC. Here the power that is being distributed is going to be checked whether its the right amount or not. After everything got power the CPU tries to load a program called BIOS which is found in ROM.

2. ROM, POST and BIOS

let’s see each of them separately

I. ROM

ROM is an abbreviation of Read Only Memory, when we were learning about it I didn’t get what its used for until now. When I am learning I like to relate new things with the things I know before. But for this one I couldn’t relate it at all.

So related to our topic, what ROM is used for is to store this program we called BIOS earlier. Since its read only memory its contents will be there anytime and cant be overwritten.

Additionally it is hardwired in the motherboard and it comes loaded with the BIOS which the manufacturers of the motherboard will be responsible for.

II. BIOS

BIOS stands for Basic Input Output System. So, this piece of software is stored on a small memory chip (the ROM as I mentioned before).

We can say BIOS is the first software to run after we press that power button. But what is its use in the process that we are talking now ?

It contains a set of instructions waiting to be executed once we press that power button. The first instruction to be executed is called POST. And it loads configuration settings from a special place called CMOS battery ( It is here that your clock is ticking by the way).

III. POST

POST stands for Power On Self Test. What this thing basically do is check all the components(RAM, Hard drive and other Input Output devices ) in the motherboard ****whether they are working correctly or not. This is because its at this point we have to know if something is not working among the components. Here if there is a failure, it will tell us using different kinds of beep sounds. And like the morse code these beep sounds have their own meaning, maybe you encounter them before.

It achieves this checking stage by sending signals using the System Bus to the components. So, if all the components are functioning normally the next step begins. Here let’s talk about BIOS a little bit.

The BIOS is currently in control of everything at this point, so after the POST is over it grants the CPU to have access to all the hardware components that are connected to the motherboard. Hence, the CPU tries to access a startup code which is usually (There is a reason I said usually but that is for another article.) found in the hard drive. This startup code is called The Boot Code.

Now that all the hardware are operating in our motherboard, the next step will be booting up the software.

3. The Boot Code

So, before we talk about the Boot Code we have to have a base knowledge about the MBR. What is MBR ??

First MBR stands for Master Boot Record. It is a small piece of code responsible for loading the OS on your computer. It also contains information about the partitions on your hard drive and how they lay out.

We said BIOS is found in a ROM chip which is hardwired in the motherboard if you remember, so where ****is the MBR located ??

The MBR is located in the first sector of your hard drive which is S*ector 0*. (If you are wondering what sector is, I got you. Sector is the smallest physical storage unit of a hard drive and it is fixed to store 512 bytes of data.)

Now let’s continue where we left off. We stopped when the CPU tries to access this Boot Code which is found in the hard drive. Actually this Boot Code is not found alone. That’s why I tried to explain what MBR is. It turns out Boot Code ( 446 bytes ) is one of the three main parts of the MBR. The other two parts are The partition table ( 64 bytes ) and The MBR signature ( 2 bytes).

We now know what a Boot Code and MBR are, so we can proceed to the next step. The next step will be the CPU loading this MBR to the memory ( RAM ) to run it. Here, after the CPU runs the Boot Code it will try to find where the installed OS is found in the partitions of our hard drive.

Once it find the OS files it will load them to RAM to run them. And then the OS will take control of the system starting from now. At this point the OS will tell the CPU to run a bunch of background services and device drivers which will run in the background these background services include:

Windows services (If you are using windows)
Different processes
Desktop environments

Finally, you will be asked to enter your password. Voila your PC booted up successfully !!

If you are still here it means you are curios enough to continue . . . These are the resources I used to write this.

Resources

What happens when I turn my computer on?

What happens when you turn on a computer

WHAT HAPPENS WHEN YOU PRESS COMPUTERS POWER BUTTON!!!!!!

What Exactly happens when you press the power button on PC ?

What Exactly Happens When You Turn On Your Computer?

What Happens When You Press the Power Button? - AMI

What happens when you turn on the computer |Computer Fundamentals |Computer course |computer science

An Ultimate Guide to the Master Boot Record (MBR)

💪🏿Let's flex . . .

Dagim G. Astatkie — Tue, 04 Jul 2023 18:48:24 +0000

Have you ever wondered about the difference between the display values block, flex, inline-flex and inline-block ?

block and inline-block are used to create block-level and inline-level elements respectively. block elements take up the full width available and create a new line, while inline-block elements only take up as much width as needed and allow other elements to sit next to them on the same line.

flex and inline-flex are used to create flexible containers that can adjust the size and position of their child elements. flex containers are block-level elements, while inline-flex containers are inline-level elements that can be placed inline with other elements. The main difference between flex and inline-flex is the direction in which the items are laid out. By default, flex lays items out in a row, while inline-flex lays items out in a line along the inline axis.

What do all the above sentences mean ? I don’t know NotionAi said that. Now let me tell you mine 😊.

Let’s see what their difference is with an example to make it more clear. So, here is what we start the example with.

<div class="wrap">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>
<div class="wrap">
    <div class="child">1</div>
    <div class="child">2</div>
    <div class="child">3</div>
</div>

Let’s add some css to spice it up.

.wrap {
        /* display: flex; */ 
        /* display: inline-flex; */
                /* display: inline-block; */
        border: 3px solid blue;
        padding: 5px;
        margin: 30px;
    }

    .child {
        border: 2px solid green; 
        margin: 5px 2px;
        padding: 3px;
        text-align: center;
    }

As you can see from the above html and css

we have two sets of three child div elements wrapped in parent div elements with the class wrap. Now let's apply different display values to the parent div elements and see how it affects the layout of the child div elements.

block: The wrap elements will take up the full available width and the child elements will be displayed in a block layout, with each child element taking up the full width of the parent element and appearing on a new line.

💡 Remember: block is the default value for div tag

inline-block: The wrap elements will only take up as much width as necessary and also will be displayed in inline layout, but the child elements will be displayed in an block layout, with each child element taking up only as much width as necessary.

flex: The wrap elements will become flexible containers that can adjust the size and position of their child elements. By default, the child elements will be laid out in a row, but the wrap element is still in block layout.

inline-flex: The wrap elements will become flexible containers that can adjust the size and position of their child elements, and they will be displayed inline with other elements. By default and also the child elements will be displayed in inline layout too.

This is the basic difference between them. feel free to comment what you think !!

And here is a codepen link for you to play with if you are curious
https://codepen.io/dagimg-dot/pen/poQrvaO