DEV Community: Nur Ilyas

Understanding HTTPS/TLS

Nur Ilyas — Mon, 16 Nov 2020 17:44:01 +0000

A compilation of articles on HTTPS for a better understanding on how it works.

Dark mode in your web app

Nur Ilyas — Sun, 18 Oct 2020 12:42:09 +0000

Implement dark mode in your web app. #html #css #javascript

Step 1. Set background and text colors using CSS variables.
https://github.com/nibmz7/live-parade-state/blob/master/dev/main.css#L22-L86

Step 2. Apply variables to elements.
https://github.com/nibmz7/live-parade-state/blob/master/ui/global_styles.ts#L63-L64

Step 3. Toggle the dark mode class on document's body and save the user's preference in local storage.
https://github.com/nibmz7/live-parade-state/blob/master/ui/views/view_switcher.ts#L92-L98

Step 4. Add a script at the start of 'body' tag to load dark mode preference.
https://github.com/nibmz7/live-parade-state/blob/master/dev/index-mock.html#L18-L21

Smooth Keyboard Transition on mobile browsers

Nur Ilyas — Wed, 14 Oct 2020 05:22:40 +0000

Implementation ---> click here
Usage ---> click here

ES6 class vs function constructor

Nur Ilyas — Sat, 22 Aug 2020 19:20:32 +0000

I wrote an article on ES6 classes and how it was written before it existed. Take a look and let me know what you think! Point out any errors in the information provided if you spot any!

Demystifying JavaScript ‘Class’

https://www.linkedin.com/pulse/demystifying-javascript-class-nur-ilyas

UEFI & GPT

Nur Ilyas — Mon, 03 Aug 2020 13:40:25 +0000

DISCLAIMER: This post is written by a complete novice. Information stated may be inaccurate and if so, feel free to correct any mistakes.
RESEARCH TOPIC: UEFI & GPT.

WHAT PROMPTED THIS RESEARCH?: After fiddling with the BIOS screen and GRUB menu, I started wondering what they are...

BIOS & MBR

Before we begin, you might want to take a look at this excellent article on legacy BIOS/MBR to have a bit of context: MBR BOOT PROCESS.

UEFI

Picture courtesy of UEFI on Wikipedia

“The Unified Extensible Firmware Interface (UEFI) is a specification that defines a software interface between an operating system and platform firmware, replacing the legacy Basic Input/Output System (BIOS) firmware interface.”
There’s embedded software in your computer also known as firmware. This platform firmware checks and ensures the hardwares (cpu, memory, input-output devices etc) are initialized and ready to be used. The UEFI specification only requires the firmware to create the standardized interfaces and does not state how the underlying interfaces should be implemented so it is up to the vendor to execute that bit. There is an open source firmware implementation of UEFI called TianaCore.

You may still come across the ‘BIOS’ setup utility screen, which is essentially the firmware settings. The term ‘BIOS’ is still used although your firmware is built for UEFI. Is this because BIOS is recognized amongst consumers for access to firmware settings that it became a noun? Can anyone clarify.

Diagram from UEFI Forum

‘efibootmanger -v’ command output showing the NVMRAM entries

The platform firmware is responsible for setting up the UEFI protocols and services before starting what is called the UEFI boot manager. The UEFI boot manager will attempt to load the OS boot loaders in order according to globally defined NVRAM variables. You can view the boot order sequence variables in your ‘BIOS setup utility settings’ or using ‘efibootmanger -v’ on linux.
The OS loader is a special type of UEFI application (e.g. grubx64.efi) that utilizes the protocols and services provided by the UEFI layer to boot the chosen operating system. Once the OS loader has successfully launched the OS, it will call EFI_BOOT_SERVICES.ExitBootServices(), which will terminate all boot services in the system, including memory management, and the UEFI OS loader is responsible for the continued operation of the system. After control is passed to the operating system, only the runtime services will remain as part of the UEFI layer.

List of UEFI runtime services from UEFI Forum

GPT

Like MBR, GUID Partition Table (GPT) is a partitioning scheme which describes how partitions are laid out on a storage device. GPT is now the preferred way to partition a storage device and is used mainly for the UEFI boot, instead of MBR.
Let’s first take a look at the layout of a storage device using the GPT scheme.

GPT on Wikipedia

Logical Block Addressing (LBA)

If you would like to know a bit about LBA and how it relates to data being represented in the media, you may want to check these out.

HDD - Hard Disk Drive
- Cylinder Head Sector (CHS)
- Hard Disks, Sectors, Zone Bit Recording, Sectors vs Blocks, CHS, LBA, Sparing - Youtube
SSD - Solid State Drive

GPT Header Format

0x50 indicates the maximum number of possible partitions. Although this can be unlimited, it’s usually set at 128 partitions.

GPT Partition Entry Format

The partition type ID is globally unique. You may view the list of types here.

UEFI and GPT

For UEFI to work, it looks for a special partition known as the ‘EFI System Partition’ which must be formatted based on the FAT filesystem (MacOS is an exception). The EFI Boot Manager can interpret FAT filesystem and it is this partition where the EFI Boot Manager searches for EFI boot loaders. Here is an example of the contents in an 'EFI System Partition'.

/EFI/boot/bootx64.efi is the fallback path for the boot manager if there are no NVRAM entries saved for that storage media. This is particularly useful say if you want to create a bootable UBUNTU flash drive. You can partition the usb drive according to GPT, create the ‘EFI system partition’ and format it based on FAT32 and then insert grubx64.efi into the ‘EFI/boot/’ folder and rename it to ‘bootx64.efi’. That way when you insert the usb stick into your computer, the EFI boot manager will launch grub under the disguise of bootx64.efi.

Extras

Partitions on a laptop with SSD dual-booting Windows and Ubuntu

What is UUID, PARTUUID and PTUUID?
fdisk -l command output
If you need a better explanation or you’re wondering how to boot multiple distros, you can take a look at the following:

Basics of Linux GUI stack

Nur Ilyas — Mon, 03 Aug 2020 13:40:07 +0000

DISCLAIMER: This post is written by a complete novice. Information stated may be inaccurate and if so, feel free to correct any mistakes.
RESEARCH TOPIC: Linux GUI stack
WHAT PROMPTED THIS RESEARCH?: I stumbled across a process called 'xorg' and wondered what that is. A quick Google search shows it has something to do with displaying graphics and so begins the journey of trying to understand the Linux GUI stack on a surface level.

Windowing System

In a windowing system, there are 2 main components: the display server and the window manager.
- Display server
  - The display server protocol specifies communication between a client (GUI application) and the display server
  - Relays inputs (keyboards, mouse, touchscreen etc.) to clients
  - Displays the output onto a screen
- Window manager
  - Works hand-in-hand with a display server
  - Manages the placement and appearance of windows
There are 2 main types of windowing system used in GUI Linux operating systems today: X11 and Wayland.
- X11
  - X.Org server (display server) + Mutter/KWin (window manager)
  - X.Org server is the dominant implementation of the display server for X Window System (X11 Protocol).
  "In the case of X11, A window manager is a regular X client. It doesn’t have any superuser privileges or keys to kernel backdoors; it is a normal user process that is allowed by the X server to call a set of special APIs. X ensures that no more than one window manager is running at any given point by denying a client access to these APIs if another client currently has access. The first client to attempt to access these APIs always succeeds." - How X Window Managers Work, And How To Write One (Part I)
- Wayland
  - Mutter/KWin Wayland compositor (Display server + window manager)
  - Wayland, unlike its X11 counterpart, does not have network transparency in order to simplify its architecture.
  I was curious as to how a wayland client would communicate to the display server (wayland compositor). In wayland’s case, it would look for a unix socket (ipc socket) typically named wayland-0. https://wayland.freedesktop.org/docs/html/ch04.html#sect-Protocol-Wire-Format
Linux GUI toolkits (QT, GTK) now supports both X11 and wayland protocol.

Window Manager

"A window manager is a system software that controls the placement and appearance of windows within a windowing system in a graphical user interface." - Window Manager on Wikipedia
There are 2 notable types of Window Managers: Stacking and Tiling window managers.
- Stacking
  - Openbox
  - Mutter/Kwin - more precisely a compositing window manager
- Tiling
  - i3 (X11 Tiling window manager)
  - Sway (Tiling wayland compositor)

Display Manager

A display manager presents the user with a login screen. A session starts when a user successfully enters a valid combination of username and password.
Examples are GDM, KDM and LightDM.

Ubuntu uses GDM by default.

GDM runs on wayland. Display managers that run on X, on the other hand, starts up the X server before displaying the login UI.

GDM starts in TTY1 and on user login, it starts up the user session on TTY2. Why is my GDM at a different TTY than my desktop environment? Just a question: Is it possible to start greeter and user screen in the same TTY? Another question: *Session manager https://www.systutorials.com/docs/linux/man/1-gnome-session/ So the method of starting a window manager directly without a display manager does not use a session manager? What does that mean for a user?

Desktop Environments

"A desktop environment (DE) usually rides on top of a Window Manager and adds many features, including panels, status bars, drag-and-drop capabilities, and a suite of integrated applications and tools. " - zeal
You can run standalone window managers without the need of a desktop environment.
See desktop environments vs window managers
Examples include GNOME and KDE.

GUI Toolkits

Developers use these toolkits to ease development. They do not need to know the intricacies of X11/Wayland to start developing apps for the platform.
Examples of GUI toolkits are QT and GTK.

Digression

POP!_OS and Regolith OS looks pretty sick.
What's Chrome OS GUI stack like?
- Aura
- Ozone
  - Overview
  - Chrome Is Reaching The Point Of Good X11 + Wayland Support In Same Build
Android
- Has its own windowing system known as SurfaceFlinger
  - What is Android's SurfaceFlinger
- https://source.android.com/devices/graphics
MacOS - Quartz Compositor ?

Material dialog with CSS Animation

Nur Ilyas — Wed, 02 Oct 2019 18:33:55 +0000

Refer to the full source code on github. Feedbacks are most welcome :)

I don't want to blabber too much so let's get right on to making the modal dialog inspired by Material Design.

Our version of modal dialog is made up of three components: the modal screen which also acts as a backdrop, the dialog itself & a form which the dialogue will display. The dialog contains 2 forms and both are set to hidden. The ModalDialog.js class will be responsible for displaying/hiding the respective forms.



    <div id="modal-screen" class="modal" hidden>

        <div class="dialog">

            <div id="user-form-one" class="hide" hidden>
                <p>Continue as . . .</p>
                <div id="alias-list"></div>
                <p class="seperator"><span>or</span></p>
                <button class="button">Create new user</button>
            </div>

            <div id="user-form-two" class="hide" hidden>
                <div class="info-alias">
                    <span>Enter your alias</span> 
                    <div class="tooltip" data-tip="Lorem Ipsum blablabla">
                        <img src="./help.svg"/>
                    </div>
                </div>
                <input class="input-alias" type="text" maxlength="35" placeholder="e.g. John Doe">
                <button class="button">Continue</button>
                <p class="error-message" hidden>Lorem Ipsum</p>
            </div>

        </div>

    </div>

To show/hide the modal screen, we will toggle the 'open' and 'close' class on the modal div element.



.open {
    animation: fade-in 0.5s forwards;

    .dialog {
        animation: slide-in 0.5s forwards;
    }
}

.close {
    animation: fade-out 0.5s forwards;

    .dialog {
        animation: slide-out 0.5s forwards;
    }
}

@keyframes fade-in {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes fade-out {
    100% { opacity: 0; }
}

@keyframes slide-in {
    100% { transform: translateY(100px); }
}

@keyframes slide-out {
    0% { transform: translateY(100px); }
    100% { transform: translateY(200%); }
}

Now on to animating the smooth scaling of the dialog box. The UserForm.js class is created as a base class for the 2 forms.

Inside show(), requestAnimationFrame function triggers a callback method, draw(), which performs the scaling animation of the dialog box and fading-in of the form.

But before show() can be called on the form that is about to be displayed, hide() method on the previous form is called first and a callback will be triggered once the fading-out animation has ended.



     /* In ModalDialog.js...
        userFormOne.hide(() => {
            userFormTwo.show();
        });
    */

class UserForm  {

    constructor(formId) {
        this.dialog = document.querySelector('.dialog');
        this.form = document.getElementById(formId);
        this.button = this.form.querySelector('.button');
        this.button.onclick = this.onButtonClick.bind(this);
        this.formHeight = null;
        this.formWidth = null;
    }

    onButtonClick(e) {
        e.stopPropagation();
        this.button.disabled = true;
    }

    hide(callback) {
        this.form.addEventListener('animationend', this.onFormHidden(callback));
        this.form.className = 'hide';

    }

    show() {
        this.form.hidden = false;
        this.button.disabled = false;    
        requestAnimationFrame(this.draw.bind(this));
    }

    draw() {
        this.dialog.style.width = this.getFormWidth();
        this.dialog.style.height = this.getFormHeight();
        this.form.className = 'show';
    }

    getFormHeight() {
        if(!this.formHeight) this.formHeight = this.form.offsetHeight + 'px';
        return this.formHeight;
    }

    getFormWidth() {
        if(!this.formWidth) this.formWidth = this.form.offsetWidth + 'px';
        return this.formWidth;
    }

    onFormHidden(callback) {
        const listener = () => {
            this.form.removeEventListener('animationend', listener);
            this.form.hidden = true;
            callback();
        }
        return listener;
    }
}

export default UserForm;

Take a look at UserFormOne.js and UserForm2.js to see which methods were overidden and also added functionalities.

For navigating between the forms, History API is used to keep track of that and onpopstate listener in the ModalDialog.js class will display the appropriate views.

I do apologize if this post seems rushed as I'm writing this at 3 in the morning and there's a lot of things to explain and I'm unsure if the code I wrote is proper(which is why I really want feedback). Also reason why I'm rushing through this is because I'm flying off for a month tomorrow leaving my laptop behind and I can't put this off any longer. Also, I find this a good way to improve on my English. Anyhow, It's been a pleasure and thank you so much for reading! Now, time to hit the hay ZzZzZz....