DEV Community: Jae Beojkkoch

Easy dark theme with CSS only

Jae Beojkkoch — Sat, 27 Feb 2021 07:56:03 +0000

Today, I'm going to show you how to add a simple dark theme do your website.

First, we have something like this, light theme by default.

The light theme corresponds to this in CSS:

body {
    background-color: #FFF;
    color: #212121;
}

Now, let's make a dark theme by default!
It is fairly simple to do, just change your background-color and color to the values you need for your dark theme (don't forget links as well if you already don't have theming for those).

For instance:

body {
    background-color: #212121;
    color: #FFF;
}
a {
    color: #F57C00;
}

Which will give this by default.

Sweet, but now we want people to still be able to see the light them if they selected it.
To achieve that, just add @media screen and (prefers-color-scheme: light) around your light theme CSS.
For instance:

@media screen and (prefers-color-scheme: light) {
    body {
        background-color: #FFF;
        color: #212121;
    }
    a {
        color: #7E57C2;
    }
}

And voilà, you have now a website that supports light and dark themes 🎉

Obtaining A+ SSL w/ Caddy

Jae Beojkkoch — Fri, 26 Feb 2021 19:29:58 +0000

Hi there, today I'm going to show you how to get an A+ on SSL Labs.

Note: This tutorial is only usable with Caddy Server.

The DNS CAA

The DNS CAA (or DNS Certification Authority Authorization) is a security mechanism that allows you to mark certain certificate authorities as trusted.

For instance, if you are using Let's Encrypt certificates, you would have to allow letsencrypt.org to make valid certificates for your domains.

To add this verification level, you must add a CAA record to your domain's DNS.

In text only, the record looks like: your.domain. CAA 0 issue "letsencrypt.org"

Headers

To get the A+ score, you need to set up some headers as shown below:

header {
    X-Frame-Options "Deny"
    Content-Security-Policy "
        default-src 'none';
        style-src 'self';
        script-src 'self';
        font-src 'self';
        img-src data: 'self';
        form-action 'self';
        connect-src 'self';
        frame-ancestors 'none';
        base-uri 'self';
        report-uri {$CSP_REPORT_URI}
    "
    X-Content-Type-Options "nosniff"
    Strict-Transport-Security "max-age=31536000; includeSubDomains; preload"
}

Let's see what all of this stuff does shall we?

X-Frame-Options "Deny" disallows other pages or websites to add embeds, frames, iframes and objects referencing your domain. Alternatively of Deny, you can set it to SAMEORIGIN so you can use it on your website.
X-Content-Type-Options "nosniff" is used to prevent MIME Sniffing
Strict-Transport-Security "max-age=31536000; includeSubDomains; preload" is forcing your domain to have a valid HTTPS certificate for the time period specified by the max-age parameter (one year in our case). If the HTTPS certificate is not present, the browser will display an error. The includeSubDomains directive is used so the STS is applied to all subdomains as well.
Content-Security-Policy is a wide range of policies to allow or not distant domains to load resources (such as CSS or JavaScript files). The provided configuration only allows for the current domain to load files which can be problematic in some use cases. To allow a domain to load resources, just add it after the self. E.G: style-src 'self' CDN.domain.TLD;

Word of the end

Congrats!

You should be ready now. The only thing to do left is to test your settings using a tool like SSL Labs.

Accelerating PrestaShop 1.6

Jae Beojkkoch — Fri, 26 Feb 2021 14:11:31 +0000

Greetings everyone, today I'm going to show you how to speed up PrestaShop's back office.
When clicking on the 'Modules and Services' button, PrestaShop sends a request to get the latest add-ons available in the store.
Since PrestaShop is made by incompetent people, the API server is of course very slow.

To incapacitate that request, nothing more simple.
For this, navigate to classes and find the Tools.php file.
Now, go to approximately line 3353 (when the function addonsRequest starts) and add this:

public static function addonsRequest($request, $params = array())
{
    return false;

It should now prevent PrestaShop to load indefinitely for nothing.

Prestashop: the good, the bad and the ugly

Jae Beojkkoch — Thu, 25 Feb 2021 11:42:11 +0000

I recently got a job opportunity where I had to maintain a PrestaShop website & additional modules, how bad could it be?

Well, even worse than you may think.

At first, PrestaShop seemed like an okay CMS, not good, not bad, just meh.

The pages were loading in a reasonable time for a PHP application this big and there were no major issues.

And then a week passed.

I immediately noticed the "Modules and Services" tab took at least a minute to load in the first place, more than ten in the worst cases, this is due to PrestaShop trying to load the distant module shop, which is frankly hosted by people that don't know how to run a server.

Did I also mention that there is no way for a regular user to disable that? I had to modify PrestaShop's core to get rid of this "feature" because modules that previously blocked this loading were not working any more.

Currently, the shop runs on the 1.6 of PrestaShop which is riddled with thousands, if not millions of bugs.

PrestaShop themselves, in their incompetence, decided to not fix the bugs of the 1.6 and release the 1.7, without prior notice, changing everything and rendering thousands of modules unusable on newer versions.

As of now, updating PrestaShop adds way more bugs than it fixes, this is why updating is not even remotely recommended for anyone in their right minds!

Also, when we're at it, let's talk a bit about modules and support.

PrestaShop is managed by idiots; some modules can cost up to a fucking thousand Euros but the support is as good as talking to a bot.

In the best case, you pay more and only get three months of support and one update for a module that will maybe work.

Nothing on their shop is tested before being sold, and it wouldn't surprise me if there would be malicious content on there, sold for real money.

When having a problem with a module, the person charged with your support request will most likely say "it's your server, not our module" and close your support ticket (for both unofficial and official modules).

Given the countless bugs, incompetent people and shitty support, please, please do not use PrestaShop.

A good alternative would be WooCommerce; if you really want to use PrestaShop, please use the fork ThirtyBees whose goal is to offer a stable experience, without any bugs.

How to install Spip with Docker

Jae Beojkkoch — Wed, 24 Feb 2021 19:29:56 +0000

In this small tutorial, I'm assuming you are using Debian Buster as your server OS.

First step: install Docker

Installing Docker is pretty straightforward, and all the instructions are available on the official Docker website.

This can be summed up as (to execute as root):

apt remove docker docker-engine docker.io containerd runc apt update apt install apt-transport-https ca-certificates curl gnupg-agent software-properties-common curl -fsSL https://download.docker.com/linux/debian/gpg | apt-key add -

add-apt-repository \ "deb [arch=amd64] https://download.docker.com/linux/debian \
$(lsb_release -cs) \
stable"

apt update apt install docker-ce docker-ce-cli containerd.io

systemctl start docker systemctl enable docker

Also, do not forget to install docker-compose as these tools make easier the deployment of services:

curl -L "https://github.com/docker/compose/releases/download/1.28.2/docker-compose-$(uname -s)-$(uname -m)" -o /usr/local/bin/docker-compose

chmod +x /usr/local/bin/docker-compose

And you're all set-up for the rest!

Creating the Docker Compose file

Creating the docker-compose.yml is fairly easy:

version: '3'
services:
  db:
   image: mariadb:10
   restart: always
   environment:
     - MYSQL_RANDOM_ROOT_PASSWORD=1
     - MYSQL_DATABASE=spip
     - MYSQL_USER=spip
     - MYSQL_PASSWORD=verysecret
   volumes:
     - './spip-db:/var/lib/mysql'
  spip:
    image: ashledombos/spip-web
    depends_on:
      - php
      - db
    volumes:
      - './spip-core:/var/www/html/core'
      - './spip-data:/var/www/html/data'
    restart: always
    environment:
      - SPIP_DB_SERVER=db
      - SPIP_DB_LOGIN=spip
      - SPIP_DB_PASS=verysecret
      - SPIP_DB_NAME=spip
    ports:
      - '8031:80'
  php:
    image: 'ashledombos/spip-fpm:3.2'
    depends_on:
      - db
    volumes:
      - './spip-core:/var/www/html/core'
      - './spip-data:/var/www/html/data'
    environment:
      - SPIP_DB_SERVER=mysql
      - SPIP_DB_HOST=db
      - SPIP_DB_LOGIN=spip
      - SPIP_DB_PASS=verysecret
      - SPIP_DB_PREFIX=spip
      - SPIP_ADMIN_NAME=admin
      - SPIP_ADMIN_LOGIN=administrator
      - SPIP_ADMIN_EMAIL=me@domain.tld
      - SPIP_ADMIN_PASS=imverysecret
      - PHP_MAX_EXECUTION_TIME=60
      - PHP_MEMORY_LIMIT=256M
      - PHP_POST_MAX_SIZE=40M
      - PHP_UPLOAD_MAX_FILESIZE=32M
      - PHP_TIMEZONE=Europe/Paris

Of course, replace the passwords and ports with whatever fits you.

You can also use an environment file to store the passwords (which is recommended if you share your config in a public repo).

Now, all you have to do to start the services is docker-compose up -d.

All the basics of the docker-compose command can be seen on their official website.

Setting up the reverse proxy

As a reverse proxy, I am currently using the Caddy server as it is really easy to use and maintain.

It also has automatic SSL certificates (with auto-renew) which I find very practical.

In order to serve Spip to users, you need to add this to your Caddyfile:

https://domain.tld { encode zstd gzip reverse_proxy 127.0.0.1:8031 }

Note: the encode zstd gzip is only used to compress pages which can improve loading times in certain browsers.

And you should be all set-up, all is left to do is the regular Spip first startup configuration!

NextDNS, a good companion for everyday internet usage

Jae Beojkkoch — Wed, 24 Feb 2021 11:02:34 +0000

I have been using NextDNS for well over a week now and here is what I have to say about it.

First, what is NextDNS?

Well, it is a DNS firewall that can be used to block tracking and annoying domains.

It is especially useful for mobile devices, on which ad-blockers such as uBlock Origin aren't available.

As a bonus, NextDNS can also be configured to block telemetry from the major OSes such as Microsoft Windows, Apple macOS or Google's Android.

The service itself is free to use up to 300k requests per month, which is more than enough for a regular user.

The next plan costs 2.- per month for unlimited requests and that's about all that is added.

All features of NextDNS are free by default (except for the unlimited requests).

Setting up NextDNS itself is really easy, they do have an Open-Source client available on all major desktop OSes such as Linux, Windows, macOS, iOS, Android and even FreeBSD (even tho it is the same as the Linux client).

It is also noted that NextDNS can protect you from CNAME Cloaking and that the service offers hundreds of blocklists to choose from.

My favourite part of the service must be the 'analytics' tab which offers you an insight into your requests.

There, you can see your total number of queries, your top resolved and blocked domains, the devices that have sent the most requests, a map of where your requests are going and something called "GAFAM dominance" which is a graph of all requests made to the GAFAMs.

In the end, NextDNS is a good service which I recommend using if you want to avoid being tracked on your mobile devices and have a rather clean web experience.

Installing a Gemini pod

Jae Beojkkoch — Wed, 24 Feb 2021 10:28:50 +0000

Greetings everyone, this is my first post on there and today, I'll tell you how to install a Gemini pod.

Gemini is a lightweight protocol made to be private and to be light.
Today, I'll teach you how to deploy your own server, named "pod" so you can brag about it online.

Prerequisites

A brain
Some time (20 minutes maximum)
A server (dedicated, VPS, magical potato)
A domain pointed to that server
Basics in Docker
Something that tastes good to drink as a reward after

Starting up

For simplicity reasons, we will use docker-compose.
As for the server image, we will use adrianhesketh/gemini.

Create a docker-compose.yml file containing:

version: '2.1'
services:
  gemini:
    image: adrianhesketh/gemini:latest
    ports:
      - 1965:1965
    environment:
      - PORT=1965
      - DOMAIN
    volumes:
      - ./certs:/certs
      - ./content:/content

In order to contain the domain, create a .env file containing:

DOMAIN=my-domain.tld

Now, let's create the required directories by doing mkdir {certs,content} and move on by generating the certificates.
Navigate in the 'certs' directory using cd certs and generate the SSL certificates using:

openssl ecparam -genkey -name secp384r1 -out server.key
openssl req -new -x509 -sha256 -key server.key -out server.crt -days 3650

Note: you can use SSL certificates from Let's Encrypt, Zerossl or any other source if you wish.

Now, return to the root (where the docker-compose.yml is) and edit the file content/index.gmi.
Put inside:

# Hello world!
## This is my Gemini Pod~

Now, all you have to do left is to execute docker-compose up -d to start your server.
After booting it up, navigate to your domain using a Gemini browser and you should see a nice page saying "Hello world!".

Congratulations, you have now your own Gemini pod, you can now drink whatever you prepared earlier!
You can learn more about the page syntax of Gemini by going on their official website.

Original article on my blog!.