DEV Community: Ume Abraham Kalu

Customize Gnome Desktop To Look Like macOS

Ume Abraham Kalu — Fri, 05 Mar 2021 07:03:15 +0000

Hey, today, I'll be walking on how to turn your Linux OS to look like macOS giving it a lively look and feel. This approach has been tested.

Here are some screenshots:

Alright, let's get started. Firstly we need to install some tools that will enable us to customize our gnome. This tool is well known it gives us the ability to tweak things around in our gnome.

Stage 1 (Tweak tool)

open your terminal and type the following code. If you already have them installed you can skip to the next stage:



   sudo apt install gnome-tweak-tool gnome-shell-extensions chrome-gnome-shell

For Fedora users type:



sudo dnf install gnome-tweak-tool gnome-shell-extensions chrome-gnome-shell

Once done, open Mozilla Firefox and enter the URL https://extensions.gnome.org/, where we'll be activating the gnome browser extension that will enable us to achieve our goal.

Sometimes you might have done this already but if you haven't, you'll see click here to install browser extension option. Click and install it.

Now that we've activated the gnome browser extension, refresh your page to see the list of extensions.

Stage 2 (Gnome Browser theme extensions activation)

It's time to start installing the gnome extensions we need to spice up our Linux OS.

2.1) Type on the page search box User Themes when gotten click on the name to see more details about it (this extension Loads shell themes from user directory). On the page that opened at the right side of the name you'll see a toggle button, click to turn it on. If it's already 'on' just leave it. Once clicked, it'll pop up permission to install the extension, select install.

Do the same for these other extensions:

Frippery Move Clock,
Dynamic Panel Transparency,
Compiz windows effect,
Panel OSD

2.2) Okay, remember you installed a gnome-tweak-tool? Now open it.

2.2.1) Click on Windows at the side menu and activate Center New Windows

2.2.2) Click on Windows Titlebars at the same side menu and change Placement to left and close the tweak. (This is to change the position of your minimize, maximize, and close button

2.2.3) Search for extensions on your Linux global search. Sometimes it's separated from the Tweak tool. If yours is merged together within the Tweak tool, just click on Extensions and Activate Dynamic Panel Transparency, Compiz windows effect, and Frippery Move Clock if they're not yet active.

2.2.4) Click on the settings icon beside Panel OSD activation button, drag the Horizontal position[%] from 0%(left) to 100%(right) slider to about 98.0 or your required desire (this is the position where your popup notification will be showing). Do the same for the vertical axis as you wish. Click on show test notification to know its display position. If satisfied, close it.

Stage 3 (Themes installation)

We'll be installing themes here.

3.1) Navigate to https://www.pling.com/p/1403328/ using gnome Firefox (recommended). Here, we'll download "WhiteSur Gtk Theme". Click on the files menu under the displayed image and "download" WhiteSur-light.tar.xz and WhiteSur-dark.tar.xz. (Do not click the install button).

3.1.1) Navigate to your downloads or file downloads location, extract, and copy the extracted folder/directory.

3.1.2) Navigate to your home directory, here, we'll be creating two directories called .themes and .icons these are hidden directories which means we'll not see them if not set to visible. For us to access them, we'll click on the 3 dots icon at the top right corner of the window and select show hidden files

3.1.3) Paste the copied extracted WhiteSur-light and WhiteSur-dark into the .themes directory. Note! the extracted version are usually two folder levels so make sure the contents are one folder level. Eg. WhiteSur-light -> WhiteSur-light -> contents (this is two folder level and it will not work). It should be WhiteSur-light -> contents.

3.2) Open the Tweak tool

Click on Appearance at the aside menu, on the Applications value, click and select WhiteSur-light to get a light macOS look and feel or choose WhiteSur-dark to get a darkened version. Do the same for the shell value (note: do not click on the box with the directory icon).

3.3) You can also set the transparency level of your windows by clicking on the extensions menu of the Tweak tool, Dynamic Panel Transparency, then on the Settings icon next to it. A window will open, click on the Background menu, enable opacity by activating the Enable custom opacity. Here you can set the opacity of Unmaximized Opacity maybe 50% or to your taste.

At this point, you have managed to change the theme of your Linux OS. But we're not yet done.

Stage 4 (Icons and Cursor)

In the previous stage, we've successfully changed our Gnome theme. Now let's work on the icons and cursor.

4.1) Navigate through your browser (Firefox recommended) to https://www.pling.com/p/1399044. Here we'll be downloading the BigSur icon theme for our icons theme. Click on the files menu under the displayed image and "download" BigSur-black.tar.xz (note: do not click on the install). Also, navigate to https://www.pling.com/p/1355701/ to download McMojave-cursors.tar.xz for cursor theme.

4.1.2) Just as in the case of the themes, navigate to your downloads folder, locate and extract the BigSur.tar.xz and McMojave-cursors.tar.xz

4.1.3) Cut/copy the extracted version to the .icons folder in the home directory which you created earlier.

Now, you'll have about 3 different folders in the .icons directory.

4.2) Open the Tweak tool, click on Appearance at the aside menu, on the Cursor value, click and select McMojave-cursors and on the Icon value change it to BigSur-black to get a darken folder theme.

Now your icon and cursor have been set.

Please permit me to sip my cup of coffee 🤓

Stage 5 (Cairo-dock)

5.1) Open your terminal and type the code:



sudo apt install cairo-dock

Fedora:



sudo dnf install cairo-dock

5.2) Open the Tweak tool, and select Startup Applications, and add Cairo-Dock among the list.

5.3) Open the Cairo-Dock, grant access to the permission that popped up.

5.4) Navigate to https://www.pling.com/p/1401527/ to download mcOS BS for Cairo Dock a theme for Cairo-Dock. Download mcOS-BS-White.tar.gz and mcOS-BS-Dark.tar.gz

5.5) Right-click on the open Cairo-Dock and select configure, choose Themes from the top menu, click on Load theme menu, on the bottom right side of the window, click the box with upload icon and locate and select the downloaded mcOS-BS-White.tar.gz or mcOS-BS-Dark.tar.gz, click OK to load it.

5.6) Click Apply and confirm the changes made and close. Awesome!

5.7) Let's add Launcher (You may choose to ignore this if you like) but if you want it, right-click on the Cairo-Dock and select Add then Custom launcher. An icon like a Help icon gets added to the dock.

5.8) Right-click on the Cairo-Dock and select configure, select Current Items from the menu, right-click on Application menu, and remove.

5.9) Click and drag the New launcher to the top of the list. Rename the Launcher's name field to Launchpad, the Image's name or path field to Launchpad.png or Launchpad.svg whichever works for you. On the command to launch on click paste the below code:



dbus-send --session --type=method_call --dest=org.gnome.Shell /org/gnome/Shell org.gnome.Shell.Eval string:'Main.shellDBusService.ShowApplications()'

and click Apply and close.

Stage 6 (Albert-launcher)

Wow! We're really progressing. Now let us install Alber-launcher.

6.1) Open your terminal and type the following codes one after the other:



# Full example for Ubuntu 20.04
curl https://build.opensuse.org/projects/home:manuelschneid3r/public_key | sudo apt-key add -
echo 'deb http://download.opensuse.org/repositories/home:/manuelschneid3r/xUbuntu_20.04/ /' | sudo tee /etc/apt/sources.list.d/home:manuelschneid3r.list

sudo wget -nv https://download.opensuse.org/repositories/home:manuelschneid3r/xUbuntu_20.04/Release.key -O "/etc/apt/trusted.gpg.d/home:manuelschneid3r.asc"

sudo apt update

sudo apt install albert

Fedora



sudo rpm --import https://build.opensuse.org/projects/home:manuelschneid3r/public_key

sudo dnf config-manager --add-repo https://download.opensuse.org/repositories/home:manuelschneid3r/Fedora_32/home:manuelschneid3r.repo

sudo dnf install albert

6.2) Open and run Albert

6.3) A permission to send data, you can choose No or Yes as you may wish.

6.4) First time running Albert you show set the hotkeys to launch it. Click OK and proceed to set your configuration key.

6.5) set the Hotkey to a shortcut-key you'll be using to open the albert launcher. Also, Set the frontend to be Widget Box Model, Terminal to be Gnome Terminal, Theme to be Arc Dark Blue or your own choice. Increase the Amount of results to the highest number.

6.6) Click on the Extensions menu and select Applications, Calculator, Chrome bookmarks, firefox bookmarks, files, External extensions, snippets, systems, Terminal, and WebSearch

6.6.1) Click on the Firefox option selected, and select Fuzy Search and **Open with firefox by default

6.6.2) Click on the Files option selected, and select Audio, Video, Document, Folders, and Images and close.

Stage 7 (Change login screen - Only for Ubuntu 20.xx)

Before we do this, make you have the path to the background you want to use ready.

7.1) Open your terminal and type in:



sudo apt install git libglib2.0-dev

7.2) Clone this git repo:



git clone https://github.com/PRATAP-KUMAR/focalgdm3.git

7.3) Change your login screen:



sudo ./focalgdm3/focalgdm3 --set

Follow the options on the terminal - 1 for Image, 2 for Color. Here we're only changing the image. So select 1.

7.4) Set your background image path which you already have. Eg: /home/..../filename.png

7.5) Use this to rest your login screen back to default if you don't like the changed background:



sudo ./focalgdm3/focalgdm3 --set

Wow! this is really a journey. I hope this helped you?

Thanks for your time.

If you like what I did feel free to:

Solved: "Your browser is managed by your organization" - Linux

Ume Abraham Kalu — Wed, 24 Feb 2021 20:49:55 +0000

According to [ https://support.google.com/chrome/a/answer/9844476?hl=en#zippy=%2Clinux ] If you have Microsoft® Windows®, Apple® macOS®, or Linux® devices that are no longer being used in your organization, you might decide to repurpose and distribute them for personal use. Or, some users might purchase a second-hand Windows or macOS device, where Chrome Browser was previously managed by an administrator in a school, company, or other groups. If devices are not properly reset, Chrome Browser might still be managed by an administrator.

To remove this on Linux, in my own case I used Fedora 32 - navigate to /etc/opt/chrome/policies/ and delete the files inside the policies directory.

Aww! Wait a minute, you couldn't delete that, right? Yes, you can't use the conventional way of deleting files to do that.

Okay, for us to delete the files/folders, right-click inside the policies folder and select open in Terminal

Yes! You got it, now login as an administrator using

 sudo su

and type in your password.

Wait, let's confirm you're in the right directory, type ls for us to be sure the files/folder we want to delete is actually what is listed or showing.

Confirmed! Okay now type

 rm -rf <file(s)_or_folder_name>

where rm -rf : Force deletion of current folder and sub folders in my own case it's rm -rf managed

OMG! It has deleted... wow

Now, let's open the Chrome browser, awesome! The "Your browser is managed by your organization" is no longer there.

You just did it!

Please like and share if this helped.

You can also if you want.

Submit a form and receive email Using Express, Nodejs, Nodemailer and MailGun - Complete Guide

Ume Abraham Kalu — Sat, 23 May 2020 15:24:59 +0000

Hello, guys today, I'll be showing you how to create a Contact Form that allows users to submit and you receive a mail directly to Email Account

Installing dependencies

Before we start you need to have Expressjs and Nodejs installed on your computer. Well if you don't have it here's how you install them:

For Expressjs use this command from your terminal

$ npm install express --save

For Nodejs use this command:

$ npm install npm -g

Did you get them installed correctly? Awesome!

Now that you have it installed, open your project directory if you already have it or create one to start building. Once done, you'll need to initialize your package.json using this:

$ npm init -y

Creating server.js

Once done, we'll create a file called server.js. This is where we'll be writing most of our codes for this application. You can create it from the terminal using:

$ touch server.js

Once you have this created. We'll need to install and save express nodemailer nodemailer-mailgun-transport:

$ npm install express nodemailer nodemailer-mailgun-transport -S

while the capital 'S' is saving the packages as a dependency. Once you're done installing them then next is to start working now.

On the server.js we're going to configure our route to render HTML files. More so, we'll be taking it bit by bit. Okay let's start

Place this code on your server.js

const express = require('express');

const log = console.log;
const app = express();
const path = required('path');
const PORT = 8080;

router.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'views', 'index.html'));
    //__dirname : It will resolve to your project folder.
});

app.listen(PORT, () => log('Server is starting on PORT,', 8080));

Before we continue we need to create a folder where our HTML files are going to be. Feel free to call it anything. For me, I'll it views*

$ mkdir views

$ touch views/index.html

Creating a simple HTML page named 'index.html'

We'll be creating a very simple HTML file called index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mailgun App</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
        body {
            box-sizing: border-box;
        }

        form {
            /* margin: 10%; */
            width: 400px;
            /* margin: 10% 40%; */
        }

        .container {
            margin: 10% 30%;
        }

        textarea {
            height: 300px;
        }
    </style>
</head>
<body>
    <div class="container">
Please send your request
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">Subject</label>
                <input type="text" class="form-control" id="subject" aria-describedby="emailHelp" placeholder="Subject">
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Message</label>
                <textarea class="form-control" id="mesage" placeholder="Message"></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

    </body>
</html>

More so we'll need to add this script to the body of our index.html for us to be able to capture the user's input. We can simply do this by putting these lines of code:

<!-- already existing HTML codes above -->

<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>

<!-- Here is a script where we will be collecting data from the form  -->
    <script>
        $('form').on('submit', (e) => {
            // e.preventDefault();

            const name = $('#name').val().trim();
            const email = $('#from-email').val().trim();
            const subject = $('#subject').val().trim();
            const text = $('#text').val().trim();

            const data = {
                name,
                email,
                subject,
                text
            };

            $.post('/email', data, function() {
                console.log('Server recieved our data');
            });
        });
        // document.getElementById('#form-data').reset();
    </script>

You can start your server.js using:

$ nodemon server.js

and your application will be listening to port: 8080 to access it, go to your browser address bar and type:

localhost:8080

To continue, we need to make sure that our HTML is at least sending data to our server.js in order for us to get those data from our server and be ready to send them over the email address.

To achieve this, on our server.js, we need to configure our Data parsing so that whenever this data comes in we'll be able to post this data. Use the below code to do that inside the server.js

// Configuring our data parsing
app.use(express.urlencoded({
    extend: false
}));
app.use(express.json());

We'll also be creating an app post which will be receiving data from our client. It'll be called email. This is where we'll be configuring the email sending. But for now, we'll be sending a dummy email just make sure that things are in order before pushing real emails. Just below the code above in the server.js, we'll be adding this line of code:

app.post('/email', (req, res) => {
    //Send an email here but currently dummy email
    console.log('Data:', req.body);
    res.json({message: 'Message received!'})
});

So now, we'll be checking if the program is working. Start the server.js open your browser, before submitting the form open your browser console log then fill and submit the form. you should see Message received! then in your terminal you should see the details you filled in the form. If you're unable to see these, please pause and check your work before moving to the next step.

Creating mail.js

We'll be creating a new file called mail.js, this is where we'll configure everything we need to send our email. Remember the two packages we installed - nodemailer and nodemailer-mailgun-transport?, we'll bring them here and configure it. Create this file outside the views directory:

touch mail.js

Inside it, we'll enter the following lines of code which imports the two packages, then we'll configure authentication for the mailgun with required @params. Don't worry, I'll show you where you can get it.

const nodemailer = require('nodemailer');
const mailGun = require('nodemailer-mailgun-transport');

const auth = {
        auth: {
            api_key: '',
            domain: ''
        }
    };

Then we'll configure our transporter just below the code using the nodemailer and mailGun the calling the auth as the parameter for the mailGun.

const transporter = nodemailer.createTransport(mailGun(auth));

Also, we'll configure our sendMail mailOptions using the id of our input form from the HTML we created

const sendMail = (name, email, subject, text, cb) => {
    const mailOptions = {
        sender: name,
        from: email,
        to: 'recipient@email.com',
        subject: subject,
        text: text
    };

    transporter.sendMail(mailOptions, function(err, data) {
        if (err) {
            cb(err, null);
        } else {
            cb(null, data);
        }
    });

// Exporting the sendmail
module.exports = sendMail;
}

Okay now lets see where to get our email api_keys and the domain from mailGun. Sign up if don't have an account with them.

Once done, on the dashboard page scroll down to the bottom where you'll see sending domain and copy the domain address

On the right-hand side of the page, you'll equally see the API keys Private API key, Public API key, and HTTP WebHook Signing key. In this case, we're only concerned about the Private API Key

Click the eye icon to reveal the hidden key and copy it

Once you get these, place them in the auth object:

const nodemailer = require('nodemailer');
const mailGun = require('nodemailer-mailgun-transport');

const auth = {
        auth: {
            api_key: 'xxxxxxxxxxxxxxx',
            domain: 'sandboxxxxxxxxxxxxx.mailgun.org'
        }
    };

One more thing we need to do on the mailgun site is to authorize the receiving email. failure to do this, you won't be able to receive the submitted form to your email address.

To do this, go back to the sandbox domain address and click on the domain link it'll open another page where you'll invite a recipient email

Authorize a recipient by typing the email address and click invite.

Once done, the recipient receives a validation email for authentication and once validated the recipient is ready to receive emails from the submit form if the email address is placed on the to: of the sendMail mailOptions

One last thing we'll do is to call the sendMail function in our server.js for us to be able to use it.

So the full code for our server.js is now going to be like this:

const express = require('express');
const sendMail = require('./mail');
const log = console.log;
const app = express();
const path = required('path');
const router = express.Router();
const PORT = 8080;

// Configuring our data parsing
app.use(express.urlencoded({
    extend: false
}));
app.use(express.json());

app.post('/email', (req, res) => {
    // res.sendFile(path.join(__dirname + '/contact-us.html'));
    //TODO
    //send email here
    const { name, subject, email, text } = req.body;
    console.log('Data: ', req.body);

    sendMail(name, email, subject, text, function(err, data) {
        if (err) {
            res.status(500).json({ message: 'Internal Error' });
        } else {
            res.status({ message: 'Email sent!!!' });
        }
    });
    // res.json({ message: 'Message received!!!' })
});

router.get('/', function(req, res) {
    res.sendFile(path.join(__dirname, 'views', 'index.html'));
    //__dirname : It will resolve to your project folder.
});

app.listen(PORT, () => log('Server is starting on PORT,', 8080));

Our HTML full code

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mailgun App</title>
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
    <style>
        body {
            box-sizing: border-box;
        }

        form {
            /* margin: 10%; */
            width: 400px;
            /* margin: 10% 40%; */
        }

        .container {
            margin: 10% 30%;
        }

        textarea {
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="container">
        <form>
            <div class="form-group">
                <label for="exampleInputEmail1">Email address</label>
                <input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email" required>
                <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
            </div>
            <div class="form-group">
                <label for="exampleInputEmail1">Subject</label>
                <input type="text" class="form-control" id="subject" aria-describedby="emailHelp" placeholder="Subject" required>
            </div>
            <div class="form-group">
                <label for="exampleInputPassword1">Message</label>
                <textarea class="form-control" id="text" placeholder="Message" required></textarea>
            </div>
            <button type="submit" class="btn btn-primary">Submit</button>
        </form>
    </div>

    <!--  -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>

    <!-- Here is a script where we will be collecting data from the form  -->
    <script>
        $('form').on('submit', (e) => {
            // e.preventDefault();

            const name = $('#name').val().trim();
            const email = $('#from-email').val().trim();
            const subject = $('#subject').val().trim();
            const text = $('#text').val().trim();

            const data = {
                name,
                email,
                subject,
                text
            };

            $.post('/email', data, function() {
                console.log('Server recieved our data');


            });
        });
        // document.getElementById('#form-data').reset();
    </script>

</body>

</html>

Our mail.js full code:

const nodemailer = require('nodemailer');
const mailGun = require('nodemailer-mailgun-transport');

const auth = {
    auth: {
        api_key: 'put-your-API-key',
        domain: 'put-your-sand-box-domain-from-mailgun'
    }
};

const transporter = nodemailer.createTransport(mailGun(auth));

const sendMail = (name, email, subject, text, cb) => {
    const mailOptions = {
        sender: name,
        from: email,
        to: 'umekalu@gmail.com',
        subject: subject,
        text: text
    };
    transporter.sendMail(mailOptions, function(err, data) {
        if (err) {
            cb(err, null);
        } else {
            cb(null, data);
        }
    });
}

// Exporting the sendmail
module.exports = sendMail;

Now start your server to test your application

$ nodemon server.js

Thanks a lot for your time. Please feel free to drop your comments and also follow for more updates.

Fixed: Simple Screen Recorder records sound only with a black screen - Fedora 32/30/31

Ume Abraham Kalu — Fri, 22 May 2020 11:28:07 +0000

Hello, I've heard some people having issues with Simple Screen Recorder. In this article, I'll guide you on fixing this issue.

Your need to Configure Xorg as the default GNOME session.

On your terminal open your custom.conf by typing this command:

sudo nano /etc/gdm/custom.conf

and uncomment

WaylandEnable=false

If it's commented but must be set to

false

Then, on the [daemon] section just under WaylandEnable=false add this line:

DefaultSession=gnome-xorg.desktop

and save the file. Then restart your system and try running your Screen Recorder program again.

Congratulations!

However, if nano command is not working please try installing it by running the command:

sudo dnf install nano

sudo apt-get install nano

Whichever one works for you. Thanks a lot for your time.