DEV Community: Sinan

CloudYourself Introduction: Setup Raspberry Pi

Sinan — Wed, 15 Mar 2023 16:21:32 +0000

There are numerous services that may be run within your homelab, however the important question remains: is it truly worthwhile? Throughout this series, we are going to setup some of those services, while simultaneously discussing the pros and cons, so you can decide ahead of time if you wanna do it.

Preface

We will focus on utilizing a Raspberry Pi, although any outdated pc or the Raspberry Pi alternatives here with ubuntu would also do the trick. It is important to note that a Pi possesses sufficient capabilities to support all services discussed in this series, but not for tasks like media encoding for Plex.

Chosing an OS

My suggestion is to use an Debian-based headless distribution - we won't need a desktop environment. For those who utilize Pi, Pi OS Lite is an excellent choice, as it offers stability, uses the apt packet manager, remains headless, and excludes extraneous packages.

Requirements

🍓 Raspberry Pi
💾 MicroSD Card (+16 GB recommended)
📡 WiFi or 🔌 Ethernet
🖥️ Dekstop or 💻 Laptop

Step 1: Download Raspberry Pi Imager

The Raspberry Pi Imager is a utility application which helps installing an OS on a microSD card. After installing it, you should be seeing the following:

Step 2: Setup Pi OS 🛠️

Click on CHOOSE OS -> Raspberry Pi OS (other) and then scroll down to select Raspberry Pi OS Lite (64-Bit).

Next click on the settings icon in the right bottom cornern. Select the first box and set a hostname for your pi. Select Enable SSH with Use password authentication and set a username and password below. (We will need it later, when we connect per ssh)

If you are not going to use ethernet, we have to setup WiFi. Failing to do so will result in an inability to access the Pi, as it remains headless - without a desktop interface.

Disable the telemetry setting at the bottom and click on save.

Step 3: Plug your microSD 💾 card and flash ⚡ it

Click on CHOOSE STORAGE and select your microSD card. Confirm the name and the size before you select it, since everything will be deleted on the storage device you select.

Click on Write to start flashing and wait until it is done and you see a message.

Step 4: Start your PI 🍓 and find it

With your microSD card inserted, plug in the pi to power. It will start automatically. It takes about 15 - 30 seconds for the pi to boot.

To find the local ip address, go to your routers dashboard. After logging in you should see an overview of connected devices. Find your Pi with the hostname you selected in the list and note the ip address of it.

Step 5: Connect ☎️ via SSH

Open a terminal on your computer and type

ssh USERNAME@YOUR_IP_ADDRESS

If you entered the correct ip address, it should ask for a password

USERNAME@YOUR_IP_ADDRESS's password:

After typing in your password you should see something like

USERNAME@HOSTNAME:~ $ |

Congratulations 🎉

What's next?

Next time we are going to install Portainer, a web interface that helps us manage our docker containers. It's like Docker Desktop, but better. It will be usefull to setup new docker containers and maintain them.

When centering text is more difficult than you think!

Sinan — Tue, 23 Aug 2022 01:38:00 +0000

Imagine you're an experienced web developer 👨‍💻 and someone asks you to center a text inside a box. "Not like I didn't do that a 1 Mio times in my life" you say and continue. Rule after rule is being added by you to the css file, and finally you look at the result. Something is off, the text isn't just a little bit too low. In fact, the text in the button is also too low, it was never really centered. You apply, just like a pro would do, EVERY css rule that has "align" in the name and set it to "center" aaaand doesn't work,

That wouldn't happen to you? Well, go ahead, logout and check the Log in and Create account button from dev.to. Did you notice that the space above is larger than the one below? It is off by a pixel.

Here you can count them 😉:

Now I don't dare to say that it was by accident in the case of dev.to, and I will go ahead, saying it is by design like that. But why could that be the case on other websites?

Well, the cause of the issue is vertical metric (or rather its poor values), which as the name implies, is there to vertically align the font. If that metric is off, your alignment will be trash. "Only unknown, cheap fonts are affected" I hear you say, to which I can only answer: No!

Just to give you an example: One of them is Open Sans, which according to Google Fonts is used by 130,000,000 websites and the second most used font from Google Fonts... which means 130,000,000 Websites have wrong text alignment 😅

Cheers

Edit #1:
The vertical offset is most likely intentionally by the creator(s) for most fonts. However, I think it would be better if all of them would be centered by default and manually offset by software, e.g. using css-rules.

leading-trim

Edit #2:
Above I said that all 130,000,000 websites are affected by it, but that would only be the case if all of them actually tried to vertically center at least one piece of text using that font.

Tailwind css dark mode switch with JavaScript

Sinan — Tue, 25 Aug 2020 21:34:46 +0000

Tailwind css is really a greate utility-first framework that provides a lot of preset values (colors, sizes, etc...) that work very well out of the box. I also like the fact that I dont have to jump between the html and the css file, while others prefer the separation.

Now the problem is that tailwind makes it harder to implement a dark or a colored version, unless you know how it is done. Without tailwind I would add a class like 'scheme-dark' to the html tag and customize every element in my scss file like this:

/* style.scss */

h1 {
    color: black;
}

.scheme-dark {
    h1 {
        color: white;
    }
}

However in tailwind we define the color of the text with a class in the html file, so this is what we want:

/* index.html */

<h1 class="text-blue-900 dark:text-white">Hello world!</h1>

The official documentation recommends to add the following to the tailwind config

/* tailwind.config.js */

module.exports = {
  theme: {
    extend: {
      screens: {
        'dark': {'raw': '(prefers-color-scheme: dark)'},
        // => @media (prefers-color-scheme: dark) { ... }
      }
    }
  }
}

This works, but not as good as expected. Why? Because the media rule prefers-color-scheme looks at the browser setting, it is not possible to change it with e.g. a button and some javascript. So the user would have to go into the browser settings and change to light/dark mode.

To give the user the option to change to light/dark or any other color mode, we can modify the tailwind configs.

First we create our custom variant by adding a new plugin in the tailwind configs:

    ...
    plugins: [
        plugin(function ({ addVariant, prefix }) {
            addVariant('dark', ({ modifySelectors, separator}) => {
                modifySelectors(({ selector }) => {
                    return selectorParser((selectors) => {
                        selectors.walkClasses((sel) => {
                            sel.value = `dark${separator}${sel.value}`
                            sel.parent.insertBefore(sel, selectorParser().astSync('.scheme-dark '))
                        })
                    }).processSync(selector)
                })
            })
        })
    ]
    ...

The name of our variant is dark and it has a parent class .scheme-dark (don't forget the space at the end!)? This will be used by tailwind when it generates the css.

Then we add our custom variant to the properties that we want to use:

    ...
    variants: {
        textColor: ['dark', 'responsive', 'hover', 'focus'],
        backgroundColor: ['dark', 'responsive', 'hover', 'focus']
    },
    ...

Tailwind will now generate every text color class and background color class additionally with the .dark:\ prefix with the parent class .scheme-dark. So e.g. for the text color text-white it will create the following css:

.text-white {
    color: #fff;
}

.scheme-dark .dark:\text-white {
    color: #fff;
}

So we can now simply add the scheme-dark to our html tag and define a text/background color like <h1 class="text-black dark:text-white" >Hello</h1> when dark mode is enabled.

<script>
    const html = document.getElementsByTagName('html')[0];    

    function toggleDarkMode() {
        if(html.classList.contains('scheme-dark')) {
            html.classList.remove('scheme-dark');
        } else {
            html.classList.add('scheme-dark');
        }
    }
</script>

<button onclick="toggleDarkMode()">Toggle dark mode</button>

Here is the complete tailwind config file:

const plugin = require("tailwindcss/plugin");
const selectorParser = require("postcss-selector-parser");

module.exports = {
    theme: {
    ...
    },
    variants: {
        textColor: ['dark', 'responsive', 'hover', 'focus'],
        backgroundColor: ['dark', 'responsive', 'hover', 'focus']
    },
    plugins: [
        plugin(function ({ addVariant, prefix }) {
            addVariant('dark', ({ modifySelectors, separator}) => {
                modifySelectors(({ selector }) => {
                    return selectorParser((selectors) => {
                        selectors.walkClasses((sel) => {
                            sel.value = `dark${separator}${sel.value}`
                            sel.parent.insertBefore(sel, selectorParser().astSync(prefix('.scheme-dark ')))
                        })
                    }).processSync(selector)
                })
            })
        })
    ]
}

Now you might ask me: What If I want to change the color when hovering the text in dark mode?

No problemo amigo! Justo addo uno plugino:

        plugin(function ({ addVariant, e }) {
            addVariant('dark-hover', ({ modifySelectors, separator}) => {
                modifySelectors(({ className }) => {
                    return `.scheme-dark .${e(`dark\:hover${separator}${className}`)}:hover`
                })
            })
        })

and add the variant:

    variants: {
        textColor: ['responsive', 'dark', 'dark-hover', 'hover', 'focus'],
    },

Now we can do this:

<h1 class="text-black dark:text-white dark:hover:text-red-600 hover:text-blue-600">Hover me</h1>

Remember, this is only the dark mode, you could also do the same for colored versions!

If you use postcss to remove unused css (recommended!) like

module.exports = {
    purge: [
        './build/app/views/**/*.php',
        './build/public/**/*.php',
    ],
    ...
}

then you need to add an empty div with the class scheme-dark:

<div class="scheme-dark"></div>
```


If you don't do this every `scheme-dark` class will be removed!