DEV Community: Abdulrahman Alblooshi

That Time I Installed Linux (Again) 🐧

Abdulrahman Alblooshi — Sat, 20 Apr 2024 19:08:24 +0000

Picture this: I just finished a quiz for my super cool Computer Systems Architecture class (which I somehow didn't fail), and I found myself with a free hour. Most people would grab a coffee or scroll through memes, but not me. I decided to install Ubuntu for the 11th time. Why? Maybe for the thrill, or maybe to see if it would finally stick this time. I set up Kubuntu (Ubuntu + KDE) to work alongside Windows, just for fun.

Why Linux Again?

I wasn't planning to ditch Windows completely. I was just curious. But before I knew it, I was putting all these funny-sounding tools on my computer, like oh-my-zsh, Kitty, and Neovim, hoping they'd make coding more fun. I even installed Nvidia drivers, thinking I might play games on Linux. But the only game I opened was Minecraft. Oops!

I made my Linux look like a Mac because if you can't have a Mac, why not pretend, right? Turns out, this made using Linux way better. Three months later, I actually liked Linux more than Windows for getting stuff done. Windows just felt too bloated and annoying with all its updates and pop-ups.

Why Kubuntu?

Before picking Kubuntu, I tried Ubuntu, Debian, and even Kali Linux when I was doing CTF (Capture the Flag). Here's what happened:

Ubuntu: Lots of people like it, but GNOME (the desktop UI environment thing) was so slow on my computer. Not a good match, and to be honest normal Ubuntu felt bloated it was just like Windows but with more customisation and UNIX based
Debian: I thought I'd like it since Kali is based on it. Nope, it felt too different from what I was used to.
Kali Linux: Great for penetration-testing, not so much for everyday stuff.

I almost tried Linux Mint because people say it's easy to use, but I didn't. In the end, I chose Kubuntu because of KDE Plasma. It looked good and worked well. After tweaking it, it felt just right.

Why Dual-Boot is Smart

At first, dual-booting sounded scary (GRUB Boot Loader isn't fun when it breaks), but it was actually a genius idea. Cal Newport's book (not sponsored, just a fan) talks about making separate spaces for deep work. So I made Windows for gaming with friends and Linux for serious coding. This helped me keep fun and work apart but easy to get to.

Linux Problems

Switching to Linux wasn't all sunshine and rainbows. Like on April 19, when my computer wouldn't start because of a GPU driver problem. Fixing it took four hours and was a pain, but also kind of fun. It was way more hands-on than fixing issues on Windows, where I often felt stuck waiting for updates.

Will I Keep Using Linux?

After three months, the answer is a big YES! But I'm not ready to say bye to Windows yet. It's still the best for gaming and some apps that Linux doesn't have. For now, I'm happy with Windows for fun and Linux for work & productivity.

Should You Try Linux?

If you're not a developer, probably not. If you don't want to spend time on tech forums or using the command line, Linux might just make you want to pull your hair out. It's not for the easily frustrated or impatient. If you want something that just works out of the box, maybe get a Mac instead.

Disclaimer: This is all just my personal experience and thoughts. It's not technical advice, just me sharing my computer adventures!

What is Docker? 🐋

Abdulrahman Alblooshi — Sat, 24 Dec 2022 17:39:43 +0000

What is it, and how does it work?

Docker is a tool that packages software into containers that can run in a reliable manner in any environment.

So if you didn't understand what that means, imagine a cardboard box that contains all the parts of a software application.

This box is the container, and it contains everything the application needs to run, including libraries, configuration files, and other dependencies.

The container is then deployed to a server, and the application runs inside the container. This means that the application can run anywhere, regardless of the underlying operating system or environment.

What are the benefits of using Docker?

Deployment

Using Docker has many advantages. For starters, it makes it easier to deploy applications. You don't have to worry about compatibility issues, since the application runs in a container that is isolated from the underlying environment.

Management

It also makes it easier to manage applications. Instead of having to manage multiple versions of the same application, you can just deploy a single container. This makes it easier to keep track of the application and its dependencies.

Scalability

Finally, Docker makes it easier to scale applications. You can easily deploy multiple containers to handle increased demand, and you can also scale down when demand decreases.

A month without the YouTube Rabbit Hole 🕳️

Abdulrahman Alblooshi — Tue, 28 Jun 2022 15:12:18 +0000

Identifying the Problem

Spending a couple of minutes on YouTube might not be that much of a problem, watching memes can be fun and joyful for lots of people, but when it's 2AM and you're trying to wake up early for work/school/university etc.. and you cannot resist the urge to watch just one more video of cute kittens or memes.

In this case you have successfully fallen into the YouTube Rabbit Hole.

A Solution

Unhook

I've discovered Unhook which is a Google Chrome Extension that hides some features of YouTube, specifically the ones that make you stay on the platform.

I've decided to try this extension for a month, since I wasn't a fan of being stuck in the YouTube rabbit hole at 2AM because it pretty much ruined my sleep schedule and my productivity.

Time Management

Another solution for me was time management, where I've used Noisli to set a timer for X minutes/hours for watching a YouTube video, or even browsing a social media platform.

Personally this solution didn't work as good as using the Unhook extension but it helped me with the procrastination problem while I was coding or doing university work.

The Result

It's interesting that within the first few days of testing the extension somehow it felt like something was wrong it was as if my brain was telling me that it's not enough and I needed to watch one more video.

I used to spend hours on YouTube where I've had issues with my sleep schedule and my productivity, but after a month of using this extension I've been able to search videos while working without any distractions or any procrastination which increased my productivity drastically.

(Disclaimer: I wrote this blog post based on my own opinions and experience)

Transforming SVG files into React Components 🖼️ ->🧩

Abdulrahman Alblooshi — Thu, 07 Apr 2022 21:48:40 +0000

Importing SVG files in React

If you've ever faced an issue where you had no idea how to import an SVG file in React.js or any other Javascript Framework then you've probably been in the same situation that I've been in 😢

So what's the solution? SVGR!

SVGR is a tool that applies complex transformations to convert an SVG file to JSX/React Component

So basically it converts an SVG file to a React Component automatically! ✨

Let's assume we had our SVG file as the following:

<svg
  width="200px"
  height="200px"
  viewBox="0 0 200 200"
  version="1.1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
>
........
........
........
</svg>

It would simply be converted into this form!

import * as React from 'react'

const SvgComponent = (props) => (
  <svg width="1em" height="1em" viewBox="0 0 200 200" {...props}>
    <path d="" fill="#FFF" />
  </svg>
)

export default SvgComponent

I've tried it on Next.js, I've had to do a two step process

First I had to configure my next.config.js file by adding the following:

module.exports = {
  webpack(config) {
    config.module.rules.push({
      test: /\.svg$/i,
      issuer: /\.[jt]sx?$/,
      use: ['@svgr/webpack'],
    })

    return config
  },
}

And after that I simply imported my logo as an SVG but wrote it as a React Component into Home by writing the following code:

import Logo from './logo.svg'

const Home = () => (
  <div>
    <Logo />
  </div>
)

It's as simple as that!

SVGR Playground

SVGR's website includes an in-browser SVG -> React Component converter which I've personally used on multiple occasions when I didn't need to install SVGR as a package
https://react-svgr.com/playground/

The best way of learning is by experimenting! Click here to visit SVGR's website

📝3 Simple ways to create a README.md

Abdulrahman Alblooshi — Mon, 06 Sep 2021 14:31:29 +0000

First of all, why have a well designed README.md?

Having a well designed README.md would give you the following benefits:

Makes the project documentation much easier to understand
It would give others the impression that your work is organized.
It could even help you point out and plan what you want to do with your project
It makes your project stand out from other projects

This is an example of a well designed README.md

On the other hand this is an example of a poorly designed README.md

Automation

“You're either the one that creates the automation or you're getting automated“ ~ Tom Preston-Werner

Some developers would rather spend time on the project itself than to spend it on a README.md, this is why automation is a key component here.

Here are a few examples of websites/apps that (almost) automate creating README.md files.

Readme.so

A really simple to use web app that simplifies creating README.md which is so close to automating it compared to the original way of creating README.md files, where you could add templates of sections and it makes it easier to know what to add to your README.md file.

Typora.io

A more minimalistic downloadable app that shows you a live preview of markdown language being written, it's not that much of automation but it helps you visualize what you type in a better way. (Available on Windows/OSX/Linux)

StackEdit.io

StackEdit is more of a markdown editor than a README.MD automation tool, but the way it's accessible is similar to Microsoft Word or even Google Docs which might be familiar to people who were used to working on those type of platforms.

In conclusion

The key component in making markdown files is finding an easy way to do them which doesn't cost a lot of time, the tools above are examples that could help you as a developer/writer to write a README.md file.