DEV Community: Street Community Programmer

The fck. Framework - What Is This?

Imam Ali Mustofa — Tue, 23 Jan 2024 22:11:17 +0000

What's with the title? Oh, does that read rude? If so, I apologize, because I was not wise from the start.

BTW, in this journal, I just want to tell you how this (which you don't know yet) came to my mind.

The Street

It has changed my perspective and way of thinking a lot, which has then influenced many aspects of my life (not to confide in), especially unconventional thought patterns, being a bit pushy, narcissistic, and appearing effeminate.

Yes! I am a freestyler with diction that is less educational and sometimes reprehensible (for most people), but not for people who understand the character and of course have the same character (this is a lie! They are too idealistic and that's not me). In this journal, I don't want to seem like I want a confession, because I can admit it myself. So thank you for asking (even though you said it silently).

House

It is a long process to achieve comfort. Comfortable is the most uncomfortable word when I feel comfortable. Because it contains poison that can kill my creativity as a freestyle artist. Even though I am now in a relationship with my young wife¹, I still have a good relationship with my first wife².

When the new house³ that we promised was implemented, it turned out that many things changed easily and too quickly and were very inefficient. Sometimes these new things give the impression of FOMO and are painful⁴.

1. JavaScript
2. PHP
3. You know what I mean
4. same as number 3

First Wife

We separated but not forever because at that time we both had unique desires and wanted to live them each.

From this first paragraph, I am portrayed as a jerk. Yes, go ahead, I can understand that because the story isn't finished yet.

In previous stories I have never told the truth; I separated from my first wife when she was pregnant and I often visited her to give the best to our child.

After a long time we were separated and our child was about to be born, our parents said; there will be a miracle that will come for you and that is very impressive.

Home Furnishings

Ah! Really, this makes me a little annoyed. I don't know why every time there are so many unnecessary knick-knacks she (second wife) chooses and arranges at home. What annoys me is that she (second wife) often buys new things without knowing their function and needs.

There are some items that only last 1 week or even only used once and pile up until they are neglected! And it's annoying!

When the house was arranged well, even though it was not finished perfectly according to the checklist, a new trend came and she (second wife) started looking at it and bringing it into the house, then discussing it with me with occasional heated debates.

Second wife

There are many stories about how second wives are in society. Honestly, I have to admit that almost 80% of them are right. Often we forget how we used to fight to achieve what we want, however, most of the time after what we want is achieved, we forget what and how we can fight for it.

The main thing is; that I started to feel less comfortable with her (second wife). Maybe because I'm too old to follow it, my energy is drained. However, it doesn't seem like it's me; because I'm too handsome for that.

This story is the background for me to create a new framework for reassembling broken memories, longing, and love which ultimately made me realize how important it is to understand history and forgive our past to build the future.

Street Programmer: Print Receipt From Online POS Web App to Local Thermal Printer

Imam Ali Mustofa — Sat, 02 Sep 2023 19:55:00 +0000

Before I tell you more about how I created a Websocket server with PHP to provide communication access between online web apps and local thermal printers, I would like to express my gratitude to donors who have provided support for what I'm doing here.

Donors:

Ingo Steinke, web developerFollow

Ingo has been developing websites for more than 20 years. A creative web developer focused on creating and improving websites to make the web more accessible, sustainable, and user-friendly.

GitHub Sponsors:

Maxime KubikFollow

Hi! I'm Software Engineer from France. Daily Learner. Docendo Discimus.

Previous story...

Build Warehouse and Store Management System - Pt. 3

Imam Ali Mustofa ・ Feb 18 '22

#showdev #javascript #php #tooling

Hello punk! I am Freestyler, many question a had on internet about how to print from online web app to local printer "thermal"?. Yep! Thermal Printer that usually used in POS Application, sound like whaaaaat.... (just kidding, nothing!)

Sorry... am narcissistic (in my head) person but yeah (am health BTW). So, what is my receipt?

The Receipt (Requirements)

In a long time ago am PHP Developer and then I have backstreet relationship (try to make it word like Hacker) with JavaScript (and falling in love with it) and now I am Playgrammer.

The Framework

React JS My young fiance
Workerman My old lady that can create WebSocket Server with easy!

Both of them it's just like Documentation.

When it's good, it's very good. When it's bad, it's better than nothing. - Dick Brandon

The Dependencies

React useWebSocket Hook WebSocket Client to talk with his mama
ESCPOS-PHP blank paper that client can wrote their homework and share with his mama
Dexie.js IndexedDB client to store printer setting (optional)

The Devices

Your Computer / Laptop (nah!)
Any Thermal Printer that compatible with ESCPOS-PHP Package

Additional Requirement

Coffee - Required!
Ciggarettes - Required!
Music that you hate so much! - Required!

Open The Door

Tok tok tok... open the door please. Open your unusual Text Editor and open terminal window then create your brand new react app! (FYI: I will not tell you how to create react brand new react app, just read their documentation!)

After create brand new react app, then install react-use-websocket using composer (it's wrong way dude!).

This is just (F) example that I used in my project so don't ask in different way. Just wrote in your way of imagination.

Create Printer Setting Storage

// Filename: src/db/index.js

import Dexie from 'dexie';

export const db = new Dexie('YOUR-STORAGE-NAME');

db.version(1).stores({
    printer_settings: '++id, app_name, printer_name, interface, font_type, ch_line_1, ch_line_2, ch_line_3, cf_line_1, cf_line_2, cf_line_3, cl_operator, cl_time, cl_trx_number, cl_costumer_name, cl_discount, cl_total_discount, cl_total, cl_tax, cl_member, cl_paid, cl_return, cl_loan, cl_saving, cl_tempo, line_feed_each_in_items, column_width, more_new_line, pull_cash_drawer, template'
});

Create Printer Setting Page

Create printer setting page to allow user setting their own language and how receipt will look like.

The printer setting page contains field like in Dexie Storage definition.

// Filename: src/constants/index.js
// NOTE:
// - cl = Custom Language
// - ch = Custom Header
// - cf = Custom Footer

export const DEFAULT_PRINTER_SETTING = {
    app_name: 'Your Application Name',
    printer_name: '/dev/usb/lp0',
    interface: 'linux-usb',
    font_type: 'C',
    ch_line_1: 'Your Header Line 1',
    ch_line_2: 'Your Header Line 2',
    ch_line_3: 'Your Header Line 3',
    cf_line_1: 'Your Footer Line 1',
    cf_line_2: 'Your Footer Line 2',
    cf_line_3: 'Your Footer Line 3',
    cl_operator: 'Operator Name',
    cl_time: 'Time',
    cl_trx_number: 'Transaction Number',
    cl_customer_name: 'Customer Name',
    cl_discount: 'Discount',
    cl_total_discount: 'Total Discount',
    cl_total: 'Total',
    cl_tax: 'Tax',
    cl_member: 'Member',
    cl_paid: 'Paid',
    cl_return: 'Return',
    cl_debt: 'Debt',
    cl_saving: 'Saving',
    cl_due_date: 'Due date',
    line_feed_each_in_items: 15,
    column_width: 40,
    more_new_line: 1,
    pull_cash_drawer: 'no',
    template: 'epson'
}

const interfaceOptions = [
    { value: 'cpus', key: 'CPUS' },
    { value: 'ethernet', key: 'Ethernet' },
    { value: 'linux-usb', key: 'Linux USB' },
    { value: 'smb', key: 'SMB' },
    { value: 'windows-usb', key: 'Windows USB' },
    { value: 'windows-lpt', key: 'Windows LPT' },
]

const fontTypeOptions = [
    { value: 'A', key: 'Font Type A' },
    { value: 'B', key: 'Font Type B' },
    { value: 'C', key: 'Font Type C' },
]

Create form that provide user to input settings. You can create with Formik or something that you know to create form in react.

In my (F) case, I use Formik and make DEFAULT_PRINTER_SETTING constant as form initialValues and use interfaceOptions and fontTypeOptions to create dropdown options in form.

Create Form Submit Handler

As you can see in above, form need to submit to store setting in Dexie Storage.

// Filename: src/pages/PrinterSetting.js
import { db } from '../db'
import { DEFAULT_PRINTER_SETTING } from '../constants'

const formOnSubmit = async (values) => {
    try {
        db.printer_settings.count(count => {
            if (count > 0) {
                db.printer_settings.update(1, values).then(updated => {
                    if (updated)
                        console.log("Printer setting was updated!");
                    else
                        console.warn("Nothing was updated - there were no update changed");
                });
            } else {
                db.printer_settings.add(DEFAULT_PRINTER_SETTING).then(() => {
                    console.log("New setting just created using default setting");
                }).catch(error => {
                    console.error(error)
                })
            }
        })
    } catch (error) {
        console.error(error)
    }
}

After creating printer setting page, don't forget to drink your coffee and fire your ciggarettes, play next song that you hate so much in loud volume!

Create POS Context

To make life easy... create POS Context and Provider in react. Place it and wrap you app on it.

We need to make WebSocket Client that share it in whole app:

Share WebSocket Connection Status
Create Indicator
Send Message to WebSocket Server

// Filename: src/contexts/POSContext.js
import useWebSocket from 'react-use-websocket'
import { db } from '../db'
import { DEFAULT_PRINTER_SETTING } from '../constants'

const POSContext = createContext()

const SOCKET_URL = 'ws://<your-websocket-address:port>'

const generateAsyncUrlGetter = (url, timeout = 2000) => () => {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(url);
        }, timeout);
    });
};

const POSProvider = ({ children }) => {
    const [currentSocketUrl, setCurrentSocketUrl] = useState(SOCKET_URL)
    const [printerSettings, setprinterSettings] = useState()

    const { sendMessage, sendJsonMessage, readyState } = useWebSocket(
        currentSocketUrl,
        {
            share: true,
            shouldReconnect: () => true,
            reconnectAttempts: 3,
            reconnectInterval: 3000,
            onError: (event) => {
                alert.show('WebSocket trying to connect to sever but failed!', {
                    type: 'error',
                    position: 'bottom right',
                    timeout: 3000
                })
            },
            onOpen: (event) => {
                alert.show('WebSocket connection establised!', {
                    type: 'success',
                    position: 'bottom right',
                    timeout: 3000
                })
            },
            onClose: (event) => {
                alert.show('WebSocket connection is closed!', {
                    type: 'warning',
                    position: 'bottom right',
                    timeout: 3000
                })
            },
            onReconnectStop: () => 6
        }
    )

    const readyStateString = {
        0: 'CONNECTING',
        1: 'OPEN',
        2: 'CLOSING',
        3: 'CLOSED',
    }[readyState]

    const reconnectWebSocket = useCallback(() => {
        if (readyState === 3) {
            setCurrentSocketUrl(generateAsyncUrlGetter(SOCKET_URL))
        } else {
            setCurrentSocketUrl(null)
        }
    }, [setCurrentSocketUrl, readyState])

    const initData = useCallback(async () => {
        if (readyState === 1) {
            db.printer_settings.count(count => {
                if (count > 0) {
                    setprinterSettings(first(settings))
                    console.log('Setting is exists')
                } else {
                    setprinterSettings(DEFAULT_PRINTER_SETTING)
                    console.log('Setting is not exists!')
                }
            })
        } else {
            console.log('Setting is not exists!')
            setprinterSettings(DEFAULT_PRINTER_SETTING)
        }
    }, [readyState])

    useEffect(() => {
        if (readyState === 1) initData()
    }, [readyState, initData])

    return (
        <KasirContext.Provider value={{
            sendMessage,
            sendJsonMessage,
            reconnectWebSocket,
            readyStateString,
            printerSettings
        }}>
            {children}
        </KasirContext.Provider>
    )
}

export { KasirContext, KasirProvider }

Drink coffee and smoke! More loud volume!

Create Indicator Button

This button showing WebSocket connection between Client and Server. This button also can trigger to reconnect to server when connection is closed.

// Filename: src/components/IndicatorButton.js

import React, { useContext } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { POSContext } from '../contexts/POSContext';

function IndicatorButton() {
    const posCtx = useContext(POSContext)

    return (
        <button
            className='btn btn-indicator'
            onClick={() => posCtx.reconnectWebSocket()}
        >
            <FontAwesomeIcon icon="fa-solid fa-satellite-dish" />{' '}
            Printer Server is:{' '}
            <span
                className={`${posCtx.readyStateString === 'CONNECTING' ? 'text-info' : (posCtx.readyStateString === 'OPEN') ? 'text-success' : (posCtx.readyStateString === 'CLOSED') ? 'text-secondary' : 'text-danger'}`}
            >
                {posCtx.readyStateString}
            </span>
        </button>
    )
}

export default IndicatorButton

You can place it that component somewhere in you code.

Now! The WebSocket Client is running but connection has been close for 3 times attempt reconnecting to WebSocket Server.

So what next?!

Create WebSocket Server

Creating websocket server using workerman is like magic.

Create new PHP index.php file inside printer-server directory
Visit Workerman Repository
Install workerman and escpos-php package inside printer-server directory using npm (that's dumb!)
copy and paste A simple websocket example
go to your bus terminal and run php index.php start

That's it, nothing else! and you can't do any printing call with that code. It's easy right?

WTF! Are you kidding me?! (That's sound great BTW. Thank you)

Don't mad me! Just Kidding Please!

Now update websocket server script with this code! I promise you... (My head sound: $^U@%G@YT@#.....)

But before you touch websocket server script you need to know what data that printer server needed?

Am Indonesian so don't mad me if my source code contains any Indonesian Language that mixed with English Language. You can translate Indonesia > English using Translator btw or after that you can learn more Indonesian Language (Hahaha just kidding! Next!)

Payload That WebSocket Server (Printer Server Needed)

{
    "trx": {
        "nama_kasir": "Umam",
        "no_transaksi": "nomor-transaksi",
        "trx": "only-number-trx",
        "nama_pelanggan": "nama-pelanggan",
        "tgl_transaksi": "tanggal-transaksi-format-yyyy-mm-dd",
        "diskon": "jumlah-diskon",
        "total_transaksi": "total-transaksi",
        "uang_diterima": "uang-diterima",
        "uang_kembali": "uang-kembali",
        "jenis_pembayaran": "jenis-pembayaran",
        "jatuh_tempo": "tanggal-jatuh-tempo",
        "uang_titip": "jumlah-uang-titip",
        "ekspedisi": null,
        "ongkir": null,
        "pajak": "0",
        "potongan_member": "0"
    },
    "text_kembalian": 0,
    "belanja": [
        {
            "barang_nama": "MIE SEDAP SOTO",
            "harga": "0",
            "jumlah": "50 Dus",
            "sub_total": "5125000",
            "initial_code": "BRG-605A5B07C3EE5",
            "no_transaksi": "nomor-transaksi"
        },
        {
            "barang_nama": "MIE SEDAP GORENG",
            "harga": "107000",
            "jumlah": "38 Dus",
            "sub_total": "4066000",
            "initial_code": "BRG-605A5B01530C4",
            "no_transaksi": "nomor-transaksi"
        },
        {
            "barang_nama": "PATI SG",
            "harga": "0",
            "jumlah": "100 Sak",
            "sub_total": "25450000",
            "initial_code": "BRG-625678D10EC80",
            "no_transaksi": "nomor-transaksi"
        }
    ],
    "alamat_gudang": "Jl. AHMAD YANI - DESA SAMBIROTO - TAYU - PATI <br>\r\nDepan Masjid Baitussalam <br>\r\n0853 - 2622 - 5333 / 0856 - 4165 - 5202",
    "app_name": "CV. Kalimasodo Agriculture",
    "nama_lengkap": "Umam",
    "from": "posclient",
    "command": "posclient",
    "printer_name": "EPSON TM-U220 Receipt",
    "printer_settings": {
        "printer_name": "/dev/usb/lp0",
        "interface": "linux-usb",
        "font_type": "A",
        "custom_print_header": [
            "Your Company Name",
            "Your Subheading for Receipt",
            "Your Third text on header"
        ],
        "custom_print_footer": [
            "Your Company Name",
            "Your Subheading for Receipt",
            "Your Third text on footer"
        ],
        "custom_language": {
            "operator": "Operator",
            "time": "Time",
            "trx_number": "TRX Number",
            "costumer_name": "Costumer",
            "discount": "Discount",
            "total_discount": "Total Disc" ,
            "total": "Total",
            "tax": "Tax",
            "member": "Member",
            "paid": "Paid",
            "return": "Return",
            "loan": "Loan",
            "saving": "Saving",
            "tempo": "Tempo"
        },
        "line_feed_each_in_items": 1,
        "column_width": 48,
        "more_new_line": 1,
        "pull_cash_drawer": false
    }
}

You can format that request payload as you want with that schema.

Create WebSocket Printer Server

Following is all the code in index.php

<?php

use Workerman\Worker;
use Mike42\Escpos\Printer;
use Mike42\Escpos\PrintConnectors\DummyPrintConnector;
use Mike42\Escpos\PrintConnectors\CupsPrintConnector;
use Mike42\Escpos\PrintConnectors\NetworkPrintConnector;
use Mike42\Escpos\PrintConnectors\FilePrintConnector;
use Mike42\Escpos\PrintConnectors\WindowsPrintConnector;
use Mike42\Escpos\CapabilityProfile;

require_once __DIR__ . '/vendor/autoload.php';

// Create a Websocket server
$ws_worker = new Worker('websocket://0.0.0.0:2112');

// Emitted when new connection come
$ws_worker->onConnect = function ($connection) {
    echo "New connection\n";
};

// Emitted when data received
$ws_worker->onMessage = function ($connection, $payload) {
    // Send hello $data
    $data = json_decode($payload, TRUE);
    $options = $data['printer_settings'];

    echo '> metadata: ' . $data['from'] . PHP_EOL;
    sendingMessage($connection, createMessage('info', 'metadata: ' . $data['from']));
    echo '> activer_printer: ' . $data['printer_name'] . PHP_EOL;
    sendingMessage($connection, createMessage('info', 'active_printer: ' . $data['printer_name']));
    echo '< echo', "\n";
    print_r($options);

    if ($data['from'] === 'posclient') {
        print_reciept($data, $options);
    } else if ($data['from'] === 'testprinter') {
    }
};

// Emitted when connection closed
$ws_worker->onClose = function ($connection) {
    echo "Connection closed\n";
};

// Run worker
Worker::runAll();

function print_reciept($arrData, $options = null)
{
    // Printer Connector
    $allowed_print_interfaces = ['cpus', 'ethernet', 'linux-usb', 'smb', 'windows-usb', 'windows-lpt'];
    if (in_array($options['interface'], $allowed_print_interfaces)) {
        switch ($options['interface']) {
            case 'cpus':
                $connector = new CupsPrintConnector($options['printer_name']);
                break;
            case 'ethernet':
                $connector = new NetworkPrintConnector($options['printer_name'], 9100);
                break;
            case 'linux-usb':
                $connector = new FilePrintConnector($options['printer_name']);
                break;
            case 'smb':
            case 'windows-usb':
            case 'windows-lpt':
            default:
                $connector = new WindowsPrintConnector($options['printer_name']);
                break;
        }
    } else {
        // Make sure you load a Star print connector or you may get gibberish.
        $connector = new DummyPrintConnector();
        $profile = CapabilityProfile::load("TSP600");
    }

    // Font Type
    $selectPrinterFont = [
        'A' => Printer::FONT_A,
        'B' => Printer::FONT_B,
        'C' => Printer::FONT_C
    ];

    if ($options['template'] === 'epson') {
        $fontSettings = [
            'header_nota' => $selectPrinterFont['B'],
            'sub_header_nota' => $selectPrinterFont['B'],
            'detail_operator' => $selectPrinterFont['C'],
            'detail_balanja' => $selectPrinterFont['C'],
            'sub_promo' => $selectPrinterFont['B'],
            'footer' => $selectPrinterFont['C'],
            'sub_footer' => $selectPrinterFont['B']
        ];
    } else {
        $fontSettings = [
            'header_nota' => $selectPrinterFont['C'],
            'sub_header_nota' => $selectPrinterFont['C'],
            'detail_operator' => $selectPrinterFont['C'],
            'detail_balanja' => $selectPrinterFont['C'],
            'sub_promo' => $selectPrinterFont['C'],
            'footer' => $selectPrinterFont['C'],
            'sub_footer' => $selectPrinterFont['C']
        ];
    }

    echo "Line feed each item: " . $options['line_feed_each_in_items'];

    $printer = new Printer($connector);
    $column_width = ($options['template'] === 'epson') ? 40 : 48;
    $divider    = str_repeat("-", $column_width) . "\n";
    $optnl = ($options['template'] === 'epson') ? 0 : $options['more_new_line'];
    $more_new_line = str_repeat("\n", $optnl);

    // Membuat header nota
    $printer->initialize();
    $printer->selectPrintMode(Printer::MODE_DOUBLE_HEIGHT); // Setting teks menjadi lebih besar
    $printer->setJustification(Printer::JUSTIFY_CENTER);    // Setting teks menjadi rata tengah
    $printer->setFont($fontSettings['header_nota']);
    $printer->setEmphasis(true);
    $printer->text($arrData['app_name'] . "\n");
    $printer->setEmphasis(false);
    $printer->feed(1);

    // Membuat sub header nota
    $printer->initialize();
    $printer->setJustification(Printer::JUSTIFY_CENTER); // Setting teks menjadi rata tengah
    $printer->setFont($fontSettings['sub_header_nota']);
    $printer->setEmphasis(true);
    if (count($options['custom_print_header']) > 0) {
        for ($i = 0; $i < count($options['custom_print_header']); $i++) {
            $header_text = str_replace('\r\n', "", $options['custom_print_header'][$i]);
            $header_text = str_replace('<br>', PHP_EOL, $header_text);
            $printer->text(strtoupper($header_text) . "\n");
        }
    } else {
        $printer->text("MELAYANI SEPENUH HATI\n");
        $printer->text(strtoupper(str_replace("<br>", "", $arrData['alamat_gudang'])) . "\n");
        $printer->text("Buka Jam 07:30 - 16:30\n");
    }
    $printer->setEmphasis(false);
    $printer->feed(1);

    // Membuat detail operator
    $printer->initialize();
    $printer->setLineSpacing(20);
    $printer->setFont($fontSettings['detail_operator']);
    $printer->setEmphasis(true);
    $printer->text($divider);
    $printer->text(buatBarisSejajar($options['custom_language']['operator'] . " : ", $arrData['nama_lengkap'] . $more_new_line, $column_width));
    $printer->text(buatBarisSejajar($options['custom_language']['time'] . " : ", $arrData['trx']['tgl_transaksi'] . ' ' . date('H:i:s')  . $more_new_line, $column_width));
    $printer->text(buatBarisSejajar($options['custom_language']['trx_number'] . " : ", $arrData['trx']['trx'] . $more_new_line, $column_width));
    $printer->text(buatBarisSejajar($options['custom_language']['costumer_name'] . " : ", $arrData['trx']['nama_pelanggan'] . $more_new_line, $column_width));
    $printer->text($divider);
    $printer->setEmphasis(false);
    $printer->feed(1);

    // Print Detail Belanja
    $printer->initialize();
    $printer->setLineSpacing(20);
    $printer->setFont($fontSettings['detail_balanja']);
    $printer->setEmphasis(true);
    $no    = 1;
    foreach ($arrData['belanja'] as $b) {
        $printer->text(buatBarisContent($b['barang_nama'], idr_format($b['sub_total'], false), $options['template']));
        $printer->text('@ ' . idr_format($b['harga'], true) . " x " . $b['jumlah'] . "\n");
        $printer->feed($options['line_feed_each_in_items']);
        $no++;
    }
    $printer->setEmphasis(false);
    $printer->feed(1);

    if (count($arrData['promo']) > 0) {
        // Membuat sub promo
        $printer->initialize();
        $printer->setLineSpacing(20);
        $printer->feed(1);
        $printer->setJustification(Printer::JUSTIFY_CENTER); // Setting teks menjadi rata tengah
        $printer->setFont($fontSettings['sub_promo']);
        $printer->setEmphasis(true);
        $printer->text($divider);
        for ($i = 0; $i < count($arrData['promo']); $i++) {
            $printer->text(wordwrap($arrData['promo'][$i], 35, "\n") . "\n\n");
        }
        $printer->setEmphasis(false);
        $printer->feed(3);
    }

    // Print Footer
    $printer->initialize();
    $printer->setLineSpacing(20);
    $printer->setFont($fontSettings['footer']);
    $printer->setEmphasis(true);
    $printer->text($divider);

    // Total Belanja
    if ($arrData['trx']['sebelum_diskon'] != $arrData['trx']['total_transaksi']) {
        $printer->text(buatBarisSejajar('Total Belanja', idr_format($arrData['trx']['sebelum_diskon']), $column_width) . $more_new_line);
    }

    // Total Pajak
    if ($arrData['trx']['pajak'] != 0) {
        $printer->text(buatBarisSejajar($options['custom_language']['tax'], idr_format($arrData['trx']['pajak']), $column_width) . $more_new_line);
    }
    // Total Diskon
    if ($arrData['trx']['diskon'] != 0) {
        $printer->text(buatBarisSejajar($options['custom_language']['discount'], idr_format($arrData['trx']['diskon']), $column_width) . $more_new_line);
    }
    // Total Potongan Member
    if ($arrData['trx']['potongan_member'] != 0) {
        $printer->text(buatBarisSejajar($options['custom_language']['member'], $arrData['trx']['potongan_member'], $column_width) . $more_new_line);
    }

    $printer->text(buatBarisSejajar($options['custom_language']['total'], idr_format($arrData['trx']['total_transaksi']), $column_width) . $more_new_line);

    // Total Bayar
    $bayar = ($arrData['trx']['uang_diterima'] != 0) ? number_format($arrData['trx']['uang_diterima']) : '-';
    $printer->text(buatBarisSejajar($options['custom_language']['paid'], $bayar, $column_width) . $more_new_line);

    $text_kembalian = ($arrData['trx']['jenis_pembayaran'] != 'Non Tunai') ? number_format($arrData['trx']['uang_kembali']) : '-';

    $printer->text(buatBarisSejajar($options['custom_language']['return'], $text_kembalian, $column_width) . $more_new_line);
    // End Total Kembalian
    if ($arrData['trx']['jenis_pembayaran'] == 'Non Tunai') {
        $printer->text(buatBarisSejajar($options['custom_language']['tempo'], date('d/m/Y', strtotime($arrData['trx']['jatuh_tempo'])), $column_width) . $more_new_line);
        $printer->text(buatBarisSejajar($options['custom_language']['saving'], number_format($arrData['trx']['uang_titip']), $column_width) . $more_new_line);
        $printer->text(buatBarisSejajar($options['custom_language']['loan'], number_format($arrData['trx']['total_transaksi'] - $arrData['trx']['uang_titip']), $column_width) . $more_new_line);
    }
    $printer->setEmphasis(false);
    $printer->feed(1);

    // Membuat sub footer nota
    $printer->initialize();
    // $printer->setLineSpacing(20);
    $printer->feed(1);
    $printer->setJustification(Printer::JUSTIFY_CENTER); // Setting teks menjadi rata tengah
    $printer->setFont($fontSettings['sub_footer']);
    $printer->setEmphasis(true);
    if (count($options['custom_print_footer']) > 0) {
        $printer->text("Terimakasih sudah berbelanja di\n");
        for ($i = 0; $i < count($options['custom_print_footer']); $i++) {
            $printer->text($options['custom_print_footer'][$i] . "\n");
        }
    } else {
        $printer->text("Terimakasih sudah berbelanja di\n");
        $printer->text("CV. Kalimosodo Angriculture\n");
        $printer->text("Barang yang sudah dibeli tidak bisa\n");
        $printer->text("dikembalikan.\n");
    }
    $printer->setEmphasis(false);
    $printer->feed(3);

    $printer->cut();

    // Get the data out as a string
    // $data = $connector -> getData();
    // echo $data . PHP_EOL;

    /* Pulse */
    if ($options['pull_cash_drawer']) {
        $printer->pulse();
    }

    // Close the printer when done.
    $printer->close();
}

function sendingMessage($connection, $message)
{
    $connection->send($message);
}

function createMessage($type = 'info', $message)
{
    $timestamps = date('Y/m/d H:i:s');
    $log = strtoupper($type);
    return "[$timestamps][$log] $message";
}

function buatBarisSejajar($kolom1, $kolom2, $x)
{
    $divider    = str_repeat("-", $x);
    $full_width = strlen($divider);
    $half_width = $full_width / 2;

    $rawText = str_pad($kolom1, $half_width);
    $rawText .= str_pad($kolom2, $half_width, " ", STR_PAD_LEFT);
    return $rawText . "\n";
}

function buatBarisContent($kolom1, $kolom2, $template)
{
    $paperLength   = ($template === 'epson') ? 40 : 48;
    $divider       = str_repeat("-", $paperLength);
    $full_width    = strlen($divider);
    $half_width    = $full_width / 2;
    $total_x1 = ($template === 'epson') ? 18 : 22;
    $total_x2 = ($template === 'epson') ? 21 : 25;
    $lebar_kolom_1 = $total_x1; // asale 18
    $lebar_kolom_2 = $total_x2; // asale 21

    // Melakukan wordwrap(), jadi jika karakter teks melebihi lebar kolom, ditambahkan \n
    $kolom1 = wordwrap($kolom1, $lebar_kolom_1, "\n", true);
    $kolom2 = wordwrap($kolom2, $lebar_kolom_2, "\n", true);

    // Merubah hasil wordwrap menjadi array, kolom yang memiliki 2 index array berarti memiliki 2 baris (kena wordwrap)
    $kolom1Array = explode("\n", $kolom1);
    $kolom2Array = explode("\n", $kolom2);

    // Mengambil jumlah baris terbanyak dari kolom-kolom untuk dijadikan titik akhir perulangan
    $jmlBarisTerbanyak = max(count($kolom1Array), count($kolom2Array));

    // Mendeklarasikan variabel untuk menampung kolom yang sudah di edit
    $hasilBaris = array();

    // Melakukan perulangan setiap baris (yang dibentuk wordwrap), untuk menggabungkan setiap kolom menjadi 1 baris
    for ($i = 0; $i < $jmlBarisTerbanyak; $i++) {

        // memberikan spasi di setiap cell berdasarkan lebar kolom yang ditentukan,
        $hasilKolom1 = str_pad((isset($kolom1Array[$i]) ? $kolom1Array[$i] : ""), $lebar_kolom_1);
        $hasilKolom2 = str_pad((isset($kolom2Array[$i]) ? $kolom2Array[$i] : ""), $lebar_kolom_2, " ", STR_PAD_LEFT);

        // Menggabungkan kolom tersebut menjadi 1 baris dan ditampung ke variabel hasil (ada 1 spasi disetiap kolom)
        $hasilBaris[] = $hasilKolom1 . " " . $hasilKolom2;
    }

    // Hasil yang berupa array, disatukan kembali menjadi string dan tambahkan \n disetiap barisnya.
    return implode("\n", $hasilBaris) . "\n";
}

function idr_format($number, $prefix = false, $decimal_number = 0, $decimal_point = ',', $thousand_point = '.')
{
    return ($prefix == false) ? number_format($number, $decimal_number, $decimal_point, $thousand_point) : 'Rp. ' . number_format($number, $decimal_number, $decimal_point, $thousand_point);
}

To run the above code we need to use the following command in the command line, with this command:

➜ php index.php start
Workerman[index.php] start in DEBUG mode
------------------------------------------- WORKERMAN --------------------------------------------
Workerman version:4.1.4          PHP version:7.4.33           Event-Loop:\Workerman\Events\Select
-------------------------------------------- WORKERS ---------------------------------------------
proto   user            worker          listen                      processes    status           
tcp     darkterminal    none            websocket://0.0.0.0:2112    1             [OK]            
--------------------------------------------------------------------------------------------------
Press Ctrl+C to stop. Start success.

If you want something more efficient and don't repeat the command above, please use supervisord, systemd, or nssm (NSSM - the Non-Sucking Service Manager for Windows users)

If you find this blog is useful and open your mind to another side of the world of IT and want to give me a cup of coffee or become a sponsor on my GitHub account:

Buy Me ☕ Become Sponsor ❤

For sponsors/donors, your name will be included in the upcoming article, so please make sure to provide your username from your DEV.to, Twitter, Github, or any other social media accounts you have.

Ask Me Anything 💬

No Framework - Eps#1: I am Bored!

Imam Ali Mustofa — Sun, 13 Aug 2023 21:49:08 +0000

Unveiling the Enigma of Text Transformation with a Personalized JavaScript Algorithm

In the domain of programming, the art of manipulating textual content holds great significance. Occasionally, we encounter situations that demand ingenious solutions for encoding and decoding text. In this exposition, we shall embark on a journey to unravel a bespoke algorithm to accomplish this feat using the eloquence of JavaScript.

Prelude

Envision a scenario where words metamorphose into an array of numerical symphonies, orchestrated by a unique pattern, only to be transmuted back to their original lyrical essence. This artistic rendition has myriad applications, ranging from the shroud of obfuscation to the creation of an exclusive lexicon of representation.

The Algorithmic Ballet

Two protagonists grace our stage: ste() Stupid Text Encoder, the enigmatic encoder, and std() Stupid Text Decoder, the illuminating decoder. The symphony of encoding is orchestrated by ste(), where text and an optional boolean parameter coalesce. Its counterpart, the melodious decoder std(), waltzes in tandem, decoding the encoded text, poised with the same boolean flourish.

The choreography is thus:

Step 1. A tapestry of ALPHABET unfurls, adorned with characters earmarked for encoding and decoding.

const ALPHABET = 'abcdefghijklmnopqrstuvwxyz <>?,./\':;[]=+-_(ABCDEFGHIJKLMNOPQRSTUVWXYZ)*&^%$#@!~`0123456789';

Step 2. The overture commences with ste(), a pas de deux with each character of the input text:

function ste(text, reverse = false) {
  const translated = [];

  for (let i = 0; i < text.length; i++) {
    const char = text[i];
    const index = ALPHABET.indexOf(char);

    if (index !== -1) {
      const numericalOrder = index + 1;
      translated.push(numericalOrder);
    } else {
      translated.push(text[i]);
    }
  }

  return reverse ? translated.reverse().join(' ') : translated.join(' ');
}

Index within the ALPHABET is ascertained.
For each found character, its numerical embodiment is calculated, a token for the translated tapestry.
For characters not in the ALPHABET, they are woven intact into the translated fabric.

Step 3. The second act unfolds with std(), unthreading the encoded text into a quilt of numerical notes and original characters:

function std(translatedText, reverse = false) {
  const numericalOrderArray = translatedText.split(' ');
  const decoded = [];

  for (let i = 0; i < numericalOrderArray.length; i++) {
    const value = numericalOrderArray[i];
    if (!isNaN(value)) {
      const index = parseInt(value) - 1;
      if (index >= 0 && index < ALPHABET.length) {
        decoded.push(ALPHABET[index]);
      }
    } else {
      decoded.push(value);
    }
  }

  return reverse ? decoded.reverse().join('') : decoded.join('');
}

Each element undergoes scrutiny as number or character.
A numerical reverie leads to indexing within the ALPHABET, and the veil lifts to reveal the corresponding character, gracefully nestled into the decoded keepsake.
Characters unacquainted with numerals journey unscathed into the bosom of the decoded collection.

Step 4. A scene-stealing twist: should the reverse cipher be invoked with a true decree, the characters execute a spectral dance, reversing arrays before their final symphonic reunion as strings.

Illustrative Melody

Observe our algorithm pirouette with elegance in this illustrative pas de deux:

const inputText = 'Hello 12345';

// Initiating the dance of encoding and decoding
const encodedText = ste(inputText, true);
console.log("Encoded:", encodedText);

const decodedText = std(encodedText, true);
console.log("Decoded:", decodedText);

Epilogue

With this bespoke algorithmic composition, you inherit the power to transmute text into numerical melodies and back again, a chameleon canvas for an array of scenarios. This arcane artistry, malleable and reversible, adds another color to your programming palette.

Feel the urge to wield this enigma in your creative quests, to harness the allure of text transformation in the orchestral symphony of programming. In the grand theater of code, let your creativity resonate. Happy coding!

No Framework - Eps#0: Don't-Do List

Imam Ali Mustofa — Thu, 10 Aug 2023 22:07:39 +0000

Greetings, companions who find solace in the symphony of keyboard strokes! Today, I embark on a new series in the realm of the Street Community Programmer blog, titled "No Framework." I aim to craft a narrative that unfolds into a simplistic and accessible application without the reliance on frameworks. A touch of whimsy graces this endeavor, for it would be indeed humorous if, under the banner of "No Framework," I were to inadvertently employ one. The potential for such a paradoxical occurrence could indeed elicit a bemused smile.

I shall undertake the creation of a "Don't-Do List App," an endeavor encapsulated within a single .html file, woven with the threads of CSS and JavaScript.

Immersed in the Essence

The nomenclature bestowed upon this segment rests entirely within the bounds of my prerogative!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 0;
        }

        .container {
            max-width: 400px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        h1 {
            text-align: center;
        }

        input[type="text"] {
            display: block;
            width: 90%;
            padding: 10px;
            margin: 10px auto;
        }

        button {
            display: block;
            margin: 10px auto;
            width: 100%;
            padding: 10px;
            background-color: #007BFF;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        ul {
            list-style-type: none;
            padding: 0;
        }

        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }

        button.deleteButton {
            background-color: #FF4444;
            width: 30%;
        }
    </style>
    <title>Don't-Do List App</title>
</head>
<body>
    <div class="container">
        <h1>Don't-Do List</h1>
        <input type="text" id="taskInput" placeholder="Add a new task">
        <button id="addButton">Add</button>
        <ul id="taskList"></ul>
    </div>
    <script>
        const taskInput = document.getElementById('taskInput');
        const addButton = document.getElementById('addButton');
        const taskList = document.getElementById('taskList');

        addButton.addEventListener('click', addTask);

        function addTask() {
            const taskText = taskInput.value;
            if (taskText) {
                const listItem = document.createElement('li');
                listItem.innerHTML = `
                    <span>${taskText}</span>
                    <button class="deleteButton">Delete</button>
                `;
                taskList.appendChild(listItem);
                taskInput.value = '';

                const deleteButton = listItem.querySelector('.deleteButton');
                deleteButton.addEventListener('click', deleteTask);
            }
        }

        function deleteTask(event) {
            const listItem = event.target.parentElement;
            taskList.removeChild(listItem);
        }
    </script>
</body>
</html>

The Troupe of Artistry

The makeup artists poised before the grand stage.

<style>
    body {
        font-family: Arial, sans-serif;
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
    }

    .container {
        max-width: 400px;
        margin: 20px auto;
        padding: 20px;
        background-color: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    h1 {
        text-align: center;
    }

    input[type="text"] {
        display: block;
        width: 90%;
        padding: 10px;
        margin: 10px auto;
    }

    button {
        display: block;
        margin: 10px auto;
        width: 100%;
        padding: 10px;
        background-color: #007bff;
        color: #fff;
        border: none;
        cursor: pointer;
    }

    ul {
        list-style-type: none;
        padding: 0;
    }

    li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px;
        border-bottom: 1px solid #ccc;
    }

    button.deleteButton {
        background-color: #ff4444;
        width: 30%;
    }
</style>

Ahahaha, a playful jest indeed!

Another Ensemble You Know Well

The active mechanics are, as rumored, poised to be extracted from the browser! An endeavor considered unattainable, dear friend!

<script>
    const taskInput = document.getElementById("taskInput");
    const addButton = document.getElementById("addButton");
    const taskList = document.getElementById("taskList");

    addButton.addEventListener("click", addTask);

    function addTask() {
        const taskText = taskInput.value;
        if (taskText) {
            const listItem = document.createElement("li");
            listItem.innerHTML = `
                    <span>${taskText}</span>
                    <button class="deleteButton">Delete</button>
                `;
            taskList.appendChild(listItem);
            taskInput.value = "";

            const deleteButton = listItem.querySelector(".deleteButton");
            deleteButton.addEventListener("click", deleteTask);
        }
    }

    function deleteTask(event) {
        const listItem = event.target.parentElement;
        taskList.removeChild(listItem);
    }
</script>

The Magnum Opus

<button id="addButton">Add</button>
<ul id="taskList"></ul>

Goto Space 🚀

There you have it, a journey complete! Undoubtedly facile, wouldn't you say? The baton now passes to you, dear reader, to seize the limelight and share your creations to be woven into a tapestry that transcends judgment and shall sizzle in the crucible of creativity!

This is a Serious Joke: The COLLABORATE Project Management Method

Imam Ali Mustofa — Mon, 31 Jul 2023 06:15:10 +0000

Introducing the COLLABORATE Project Management Method for Software Freestyle Engineers and Community Projects

The COLLABORATE project management method has been intricately crafted to cater specifically to the distinct requirements of software freestyle engineers engaged in community projects. Unlike the conventional SMART method, which may prove inadequate in accommodating the collaborative and dynamic nature of community-driven endeavors, the COLLABORATE approach accentuates the significance of cohesive teamwork, unbridled creativity, and unwavering adaptability.

Discerning the Distinctions: COLLABORATE versus SMART

C: Community-Centric Goals

At the heart of the COLLABORATE method lies an unwavering commitment to goals that emanate from the very core of community needs and aspirations. Unlike rigidly predetermined objectives, the COLLABORATE approach fosters a profound sense of ownership and inclusivity among community members. Through collaborative efforts, goals emerge organically, aligning the project's trajectory with the collective vision of the community.

O: Open-Ended and Evolving Objectives

In sharp contrast to the specificity emphasized by SMART, the COLLABORATE methodology acknowledges the organic evolution inherent in community projects. Objectives take on an open-ended form, allowing ample space for inspiration and input from diverse stakeholders. The process of defining objectives transforms into an ongoing dialogue that embraces the varied perspectives brought forth by the community.

L: Learning and Knowledge Sharing

Within the COLLABORATE framework, learning assumes a central and pivotal role in the realm of community projects. Software freestyle engineers and other community members alike are wholeheartedly encouraged to partake in the collaborative sharing of knowledge and skills. This continuous learning process enriches not only the individuals but also elevates the entire project through a diverse tapestry of perspectives.

L: Leveraging Diverse Talents

Assembled within the tapestry of community-driven projects is a kaleidoscope of diverse talents and skills. The COLLABORATE approach recognizes the utmost importance of leveraging this vibrant mosaic of abilities. Software freestyle engineers find themselves in harmonious collaboration with designers, writers, marketers, and an array of other talents, composing a cohesive and holistic team endowed with multifaceted strengths.

A: Agile and Iterative Approach

Embracing an agile and iterative outlook to project management, the COLLABORATE method enables seamless adaptation to ever-evolving community needs and priorities. Regular feedback loops foster flexibility, empowering software freestyle engineers to engage in experimentation, innovation, and the progressive evolution of their solutions.

B: Balancing Individual Contributions and Teamwork

While the essence of community projects lies in fruitful collaboration, the COLLABORATE method also recognizes the significance of individual contributions. Software freestyle engineers are encouraged to manifest their creativity and distinctive perspectives while effectively harmonizing within the collective team.

O: Outcome-Driven, Not Overly Measurable

In stark contrast to the measured parameters of SMART, the COLLABORATE ethos revolves around tangible outcomes rather than rigid metrics. As community projects often entail qualitative impacts that may elude quantification, the focus lies on comprehensively assessing the overall positive influence the project bestows upon the community.

R: Relationship Building and Trust

At the very foundation of the COLLABORATE approach lies a robust emphasis on fostering meaningful relationships and cultivating trust among team members and community stakeholders. Nurturing trust sets the stage for effective communication, seamless collaboration, and shared accountability for the resounding success of the project.

A: Adaptability to Community Needs

Acknowledging the potential influence of external factors, the COLLABORATE methodology underscores the utmost importance of adaptability to ever-changing community needs. This very adaptability ensures the project's continued relevance and responsiveness to emerging challenges and opportunities.

T: Timeframes with Consideration for Community Pace

While adherence to time-bound goals remains integral, the COLLABORATE method thoughtfully considers the natural rhythm and pace of the community. Recognizing that community projects may require extended periods for consensus-building, the approach accommodates creativity, which may flourish when not constrained by constant time pressures.

E: Emphasis on Empowerment and Engagement

The COLLABORATE approach stands as a fervent proponent of empowering every single community member, actively encouraging their full-fledged engagement in the project. Software freestyle engineers, in particular, play a pivotal role in bolstering the active participation of others, thereby cultivating an inclusive environment that reveres diverse perspectives.

Conclusive Reflections: COLLABORATE's Aptness for Software Freestyle Engineers

In summation, the COLLABORATE project management method offers a bespoke and fitting solution tailored to software freestyle engineers engaged in community projects. Its tenets, centered around collaboration, adaptability, and community-centric goals, instill a sense of efficacy within software freestyle engineers as they work harmoniously with others, contributing their invaluable creativity and skillset to projects that hold profound meaning for the community at large. The COLLABORATE approach spurs the spirit of inquiry and exploration, embracing a dynamic inquiry-driven endeavor that ventures into uncharted horizons, ultimately elevating the community project to unprecedented heights of success.

The Art of Software Improvisation: Becoming a Software Freestyle Engineer

Imam Ali Mustofa — Thu, 27 Jul 2023 06:31:45 +0000

Hey there, fellow developers and coding enthusiasts!

Today, I want to talk about something that sets our coding souls on fire - the art of software improvisation! You know that feeling when you've got your hands on the keyboard, and your mind starts dancing with lines of code, moving to the rhythm of your creativity? That's what being a Software Freestyle Engineer is all about!

Embracing the Challenge

As developers, we often find ourselves navigating through the maze of structured frameworks and methodologies. But here's the secret sauce - the real magic happens when we let our creativity take the lead and embrace freestyle engineering! It's like jazz, where you riff and improvise, creating something unique and captivating.

Freestyle engineering isn't about discarding best practices; it's about bending the rules to find the most innovative solutions. By embracing the challenge, we grow as developers and expand our coding horizons. So, don't be afraid to step off the beaten path and venture into the realm of uncharted code!

Bugs and Bloopers

Now, let's share a laugh together - we've all been there, right? The moment when our code decided to throw a party of its own and surprise us with a parade of bugs and bloopers! But fear not, for this is where freestyle engineering shines!

Imagine tackling a bug so elusive that it could win hide-and-seek championships. As a freestyle engineer, you'll learn to hunt down these sneaky critters with wit and humor, following unexpected trails until you find that sweet spot where the bug surrenders!

The Power of Community

As freestyle engineers, we thrive in a supportive community of like-minded individuals who believe in the power of collaboration. We celebrate each other's successes, share knowledge, and lift each other up during moments of code-induced frustration.

Don't hesitate to seek guidance from fellow developers when you're in a jam. Trust me; it's okay to ask for help! That "Aha!" moment when you crack a complex problem is even sweeter when you share it with the community.

Tips to Embrace Freestyle Engineering:

Be Curious: Explore new technologies and programming languages. Learning outside your comfort zone will sharpen your improvisation skills.
Practice Makes Perfect: Code daily, experiment, and tinker with pet projects. Freestyle engineering is a muscle that strengthens with practice.
Embrace Failure: Embrace mistakes as opportunities to learn and grow. Failures are stepping stones toward success.
Read the Masters: Dive into the code written by experienced developers. Learn from their techniques and adopt what resonates with your style.
Leave Room for Play: Code shouldn't feel like a chore. Allow yourself moments of playfulness and experimentation.

Being a Software Freestyle Engineer is an exhilarating journey of creativity, problem-solving, and camaraderie. Embrace the challenge, laugh at the bugs, and lean on the community for support. Remember, there's no one-size-fits-all approach to coding, and that's the beauty of it!

So, let's freestyle our way through the coding universe, leaving behind a trail of innovative and extraordinary creations. Together, we'll make the coding world groove to the rhythm of our passion for software improvisation!

I can't wait to hear your thoughts and stories in the comments below. Let's rock this freestyle engineering adventure together! 🚀

I am a Software Freestyle Engineer, this title is not just a joke this is my career path and mindset that always thinks the opposite of what other people think.

Are you interested in strange things and not fictional stories but real ones? Follow me and get interesting things that might inspire your way of thinking and perspective on something.

Follow Me:

Twitter: @panggilmeiam
GitHub: @darkterminal
Website: .darkterminal

Imam Ali MustofaFollow

Software Freestyle Engineer (SFE) and Metaphor Storyteller, I like to create useless tools and apps.

Our Open Source Organization:

Street Community Programmer · GitHub

In SCP we not called snippet for some code. But we called as Metaphor that represent unusual talks activity. - Street Community Programmer

github.com

5 Ways to Become a Software Freestyle Engineer

Imam Ali Mustofa — Wed, 26 Jul 2023 16:29:07 +0000

Hey there, fellow coders and developers! Today, we're diving into the exhilarating world of Software Freestyle Engineering. If you're a tech enthusiast who loves to break free from conventions and explore new horizons in software development, you're in for a treat! As a passionate Software Freestyle Engineer myself, I'm thrilled to share five ways to embrace this dynamic approach and take your coding skills to new heights.

1. Break the Chains of the Convention

As a Software Freestyle Engineer, you're not bound by rigid coding norms. Embrace the freedom to explore innovative solutions and experiment with unconventional techniques. Don't hesitate to break the chains of convention and follow your instincts. Whether it's crafting a novel algorithm or designing a user interface that challenges the status quo, let your creativity flow freely.

Think of your code as a canvas, and you're the Picasso of programming—boldly splashing colors of ingenuity!

2. Embrace the Messiness (with Purpose)

Yes, you heard it right—embrace the messiness! Software Freestyle Engineering is not about writing sloppy code, but rather about embracing complexity in pursuit of genius. Don't be afraid to dance with the chaos, but always with a purpose. Use comptime to unleash your brilliance at compile time and surprise yourself with the magic it brings to your projects.

Remember, it's not about perfection, but progress. Each line of code you write is a step closer to mastering the art of beautiful messiness!

3. Think Like an Artist, Code Like a Virtuoso

Coding is an art form, and as a Software Freestyle Engineer, you are the virtuoso of software development. Let your mind wander in the realms of creativity, just like an artist with a blank canvas. Blend the elegance of your code with the magic of imagination, and watch as your projects come to life in captivating ways.

In the symphony of programming, your code is the melody that resonates with the hearts of users.

4. Learn from the Community, Share with the World

Software Freestyle Engineering thrives on collaboration and knowledge sharing. Engage with the vibrant community of like-minded coders, exchange ideas, and learn from their experiences. The more you share, the more you grow. Don't be afraid to ask questions or provide solutions—after all, we're in this journey together.

Your contributions to the community have the potential to inspire the next generation of software wizards!

5. Embrace the Journey, Embrace the Growth

Becoming a Software Freestyle Engineer is not an overnight endeavor. Embrace the journey with all its ups and downs. Celebrate your successes and learn from your mistakes. Remember, growth is a continuous process. Embrace every challenge as an opportunity to evolve and refine your skills.

Like a river carving its path through the mountains, each line of code you write shapes your journey as a Software Freestyle Engineer.

In conclusion, my fellow coding enthusiasts, the path of a Software Freestyle Engineer is as exhilarating as it is transformative. Embrace the freedom, the messiness, and the boundless creativity that this approach offers. Unleash the virtuoso within you and revel in the magic of programming.

Let's embark on this journey together—hand in hand—as we redefine the boundaries of software development and create a world where imagination knows no limits. Together, we are the Software Freestyle Engineers of tomorrow!

Imam Ali MustofaFollow

Software Freestyle Engineer (SFE) and Metaphor Storyteller, I like to create useless tools and apps.

Adding Container IP to Node.js Express + Prisma ORM on Docker Container - Automagically

Imam Ali Mustofa — Sun, 16 Jul 2023 06:27:31 +0000

Hello Punk!

Welcome to the wild world of Software Freestyle Engineering, where we blend code and creativity to create magical software experiences. Today, we're going to embark on an adventure in Docker, Prisma, Node.js, and Express to solve a crucial problem: how to add the Container IP to the environment variables of your Node.js Express + Prisma ORM project when the container finishes booting. Get ready for a rollercoaster ride of code and character-driven development!

The Picture

You have your Node.js Express + Prisma ORM project wrapped in a cozy Docker container. It's like a little universe of its own, complete with its IP address and secrets stored in environment variables. But when the container starts, how do you make sure that IP address becomes a part of your project's environment? Fear not, my friend, for I shall guide you through this process with a pinch of humor and a dash of enthusiasm!

Grab your favorite beverage, fire up your code editor, and let's dive into the script that will bring our container to life:

#!/bin/bash
# Filename: .docker/entrypoint.sh

# Time to rock and roll! Run your startup commands or scripts here
echo "Container has started!"

# Ahoy, me matey! Retrieve the container's IP address
CONTAINER_IP=$(hostname -i)
echo "Container IP Address: $CONTAINER_IP"

# Let's play detective! Check if the .env file exists
if [ -f "/app/.env" ]; then
  echo ".env file already exists"

  # Hold your horses! Check if the DATABASE_URL variable exists in the .env file
  if grep -q "DATABASE_URL" "/app/.env"; then
    echo "DATABASE_URL variable already exists in .env file"

    # It's makeover time! Replace the IP address in DATABASE_URL with the container IP
    sed -i "s/@[^:]*:/@$CONTAINER_IP:/" /app/.env
    echo "DATABASE_URL updated with container IP: $CONTAINER_IP"
  else
    # Avast, me hearties! Append the CONTAINER_IP variable to the .env file
    echo "DATABASE_URL=postgresql://user:password@$CONTAINER_IP:5432/db" >> /app/.env
    echo "DATABASE_URL added to .env file with container IP: $CONTAINER_IP"
  fi
else
  # Let's create something new! A shiny .env file with the CONTAINER_IP variable
  echo "DATABASE_URL=postgresql://user:password@$CONTAINER_IP:5432/db" > /app/.env
  echo "New .env file created with container IP: $CONTAINER_IP"
fi

# It's showtime! Start the main process (e.g., start your application)
exec "$@"

Now, let's break this script down, step by step, and inject some playful explanations along the way. We're going to have more fun than a barrel of monkeys, so hold on tight!

The Boring

First things first, we announce with pride that our container has started. It's like the opening act of a rock concert, where we set the stage for all the action to come. Cue the applause!

Next, we transform into a detective, sniffing out the container's IP address. It's time to unveil the secret identity of our little container friend. We store this precious IP address in the CONTAINER_IP variable. It's like discovering buried treasure!

The Sherlock Holmes

Now, let's play Sherlock Holmes and investigate the existence of the elusive .env file. We need to know if it's already lurking around. If it is, we let out an "Ah ha!" and move on to the next clue. But if it's not there, well, we take matters into our own hands and create a brand-new .env file. It's like forging our own destiny!

Inside our .env file, there's a particular variable we're after: the cunning DATABASE_URL. We need to know if it's already hiding inside. If it is, we pat ourselves on the back and exclaim, "Well, well, well, what have we here?" But if it's missing, we take control and append it to the .env file. It's like making sure our treasure map is complete!

The Fun

Now comes the fun part: the makeover! We use a sed command to replace the IP address portion of the DATABASE_URL with our container's IP. It's like giving our database connection a new look, complete with the latest fashion trends!

But what if the DATABASE_URL is already present in the .env file? Well, it's time for a little update! We use the same sed command to ensure that the DATABASE_URL stays fresh and up to date. It's like getting a software makeover, but without the pricey salon bill!

Don't Bungling

But wait, what if the .env file doesn't exist at all? Fear not, my adventurous friend! We don our creator's hat and bring a brand-new .env file into existence. We fill it with the glorious DATABASE_URL containing our container IP. It's like breathing life into a new creation, just like Dr. Frankenstein!

And now, the stage is set, the actors are in position, and it's showtime! We start the main process of our container, whether it's launching our application or performing some code wizardry. It's like hitting the play button and letting the magic unfold!

🎉 TaDa Emoji (This is not generated by ChatGPT!)

Congratulations, my intrepid coder! You've made it through this wild journey of development journaling and code exploration. You've learned how to add the Container IP to the environment variables of your Node.js Express + Prisma ORM project in a Docker container. The world is your oyster, and you're the one wielding the code sword!

Remember, Punk, in the world of software freestyling, there are no limits. Code with passion, unleash your creativity, and have a blast along the way. Until next time, keep rocking those keyboards and coding with character!

🛹 Stay freestyle, my friend!

DISCLAIMER: This content was made via Google Translate (an AI tool used to translate languages, you may have forgotten so I reminded it). If the language I use seems odd, assume I'm digressing and trying to say something. Why should there be this disclaimer? Because I always considered ChatGPT!!!

The Software Freestyle Engineer and Their Awesome Duties

Imam Ali Mustofa — Sat, 01 Jul 2023 08:17:35 +0000

Hey there! Are you curious about a role that sounds as cool as a hip-hop freestyle? Well, hold on tight because we're about to dive into the world of the Software Freestyle Engineer! In this piece, we'll find out if this position is for real and what exactly these tech wizards do. So, let's get our groove on and uncover the secrets behind the Software Freestyle Engineer gig!

The Software Freestyle Engineer position is indeed a real deal, and these talented folks combine their technical prowess with creativity to craft innovative solutions and drive software development projects forward.

What's the deal with Software Freestyle Engineer?

Alright, so you're probably wondering, does this "Software Freestyle Engineer" title actually exist or is it just some made-up buzzword? Well, fret not, my friend! The Software Freestyle Engineer position is a legit role in the software industry. It's a fusion of technical expertise and a passion for thinking outside the box, kind of like a mixtape blending beats and rhymes.

Unmasking the Duties

Now that we know the Software Freestyle Engineer is more than just a fancy name, let's dig into what they actually do. These cool cats are all about finding creative solutions to complex problems, bringing together their coding skills, and a unique approach to tackle challenges. From writing and maintaining code to brainstorming innovative ideas, they are the modern-day superheroes of software development.

Dancing to the Rhythm of Innovation

In the fast-paced world of tech, staying ahead of the game is essential. And guess what? The Software Freestyle Engineer excels at it! These talented individuals are always keeping an eye on the latest trends and technologies. They love to experiment with new tools, frameworks, and techniques, constantly pushing the boundaries of what's possible. They don't just follow the beat; they create it!

Collaboration is the Name of the Game

Hey, even the most skillful freestyle rappers need a hype man or a DJ to complement their flow, right? Similarly, the Software Freestyle Engineer knows the power of collaboration. They work closely with other team members, including software developers, designers, and product managers. Together, they jam their way through projects, sharing ideas and expertise to build amazing software that will leave you in awe.

Conclusion

So, there you have it! The Software Freestyle Engineer is not some made-up position, but a real gem in the tech industry. Combining technical know-how with a flair for creativity, these individuals are the backbone of innovative software development projects. They thrive on finding unique solutions, exploring new technologies, and working in harmony with their teammates. If you're looking for a role that blends technical chops with a touch of artistic magic, then the Software Freestyle Engineer gig might just be the perfect stage for your skills to shine!

Unleashing the Power of Software Freestyle Engineers in Modern IT

Imam Ali Mustofa — Wed, 21 Jun 2023 15:54:24 +0000

DISCLAIMER: The Role of a Software Freestyle Engineer in Modern IT - This is a serious imagination journal written by me (Imam Ali Mustofa).

In the fast-paced world of software development, a new role has emerged that promises to revolutionize the industry. Meet the Software Freestyle Engineer, a versatile professional who possesses the skills and mindset to bridge the gap between different development disciplines. In this article, we dive deep into the role of Software Freestyle Engineers and explore their significance in modern IT.

Table of Contents:

The Rise of Software Freestyle Engineers
Embracing Versatility in Software Development
The T-Shaped Professional: A Perfect Fit
Debunking the Specialization Myth
Unleashing Innovation through Collaboration
The Impact of Software Freestyle Engineers in Real-World Projects
Conclusion: Embrace the Future of Software Development

Discover the emerging role of Software Freestyle Engineers in modern IT and how they are revolutionizing software development. Learn about their versatile skill set, the importance of collaboration, and the impact they bring to real-world projects.

The Rise of Software Freestyle Engineers

In recent years, the demand for adaptable software professionals who can seamlessly integrate various tools, languages, and platforms has been on the rise. The Software Freestyle Engineer has emerged as a novel approach to meet this demand. We explore the factors that have contributed to the rise of this role and the unique value it brings to the IT landscape.

Embracing Versatility in Software Development

Software Freestyle Engineers possess a diverse skill set that allows them to navigate multiple development disciplines with ease. From front-end to back-end, from mobile to web, they are true generalists who excel in adapting to new technologies and challenges. Discover how their versatility is reshaping the way software development teams collaborate and innovate.

The T-Shaped Professional: A Perfect Fit

The concept of a T-shaped professional perfectly aligns with the role of Software Freestyle Engineers. They possess deep expertise in a specific domain while also having a broad understanding of multiple disciplines. We delve into the significance of this interdisciplinary knowledge and how it empowers Software Freestyle Engineers to excel in their roles.

Debunking the Specialization Myth

While some argue that specialization is crucial for deep expertise, we challenge this notion and present the unique value brought by Software Freestyle Engineers. By bridging the gap between different development disciplines, they foster innovation and cross-functional collaboration, ultimately leading to enhanced project outcomes.

Unleashing Innovation through Collaboration

Collaboration lies at the heart of software development, and Software Freestyle Engineers excel in this domain. We explore their ability to work seamlessly with diverse teams, fostering a culture of innovation and knowledge-sharing. Discover how their interdisciplinary approach sparks creativity and drives forward-thinking solutions.

The Impact of Software Freestyle Engineers in Real-World Projects

To illustrate the practical application of Software Freestyle Engineers, we present real-world case studies that highlight their role and impact in software development projects. These success stories demonstrate how their versatility, adaptability, and collaborative mindset contribute to delivering high-quality solutions within challenging timelines.

Conclusion: Embrace the Future of Software Development

As technology continues to evolve rapidly, the role of Software Freestyle Engineers becomes increasingly vital in modern IT environments. By embracing their unique skill set and collaborative mindset, organizations can unlock new levels of innovation, efficiency, and project success. Discover the potential of Software Freestyle Engineers and join the journey towards the future of software development.

darkterminal / software-freestyle-engineer

The Role of a Software Freestyle Engineer in Modern IT - This is a serious imagination journal written by me (Imam Ali Mustofa).

The Role of a Software Freestyle Engineer in Modern IT

Thesis Overview

Within this repository resides the scholarly work entitled "The Role of a Software Freestyle Engineer in Modern IT." This thesis serves as a comprehensive exploration of the distinctive and indispensable role assumed by a Software Freestyle Engineer within the purview of contemporary information technology. The primary objective of this research endeavor is to engender an enhanced comprehension of the fundamental responsibilities, versatile skill set, and intrinsic value that Software Freestyle Engineers bestow upon software development projects. To achieve this objective, the study embarks upon a thorough investigation into the historical trajectory of software engineering practices, the emergence and ascendancy of agile methodologies, and the imperatives of flexibility, creativity, and adaptability within the ever-evolving IT landscape.

Usage

This repository serves as an invaluable resource for individuals seeking a deep understanding of the role of a Software Freestyle Engineer in…

View on GitHub

A Central Sidebar Menu Configuration

Imam Ali Mustofa — Sat, 27 May 2023 13:21:29 +0000

The Backstory about your JavaScript Metaphor

As I embarked upon the realm of crafting a Next.js project infused with TypeScript, I encountered a profound necessity—a central sidebar menu configuration that would bestow upon us a realm of consistency and scalability. Our noble objective was to fashion a malleable menu system, one that could gracefully accommodate updates and bespoke alterations across an array of pages and components. With TypeScript as our steadfast companion, we sought to harness its formidable power of static typing, thereby fortifying our code with unwavering reliability and unwaning maintainability. Armed with meticulous planning and ingenious design, we embarked upon a grand odyssey—a quest to forge a central sidebar menu configuration, an embodiment of harmonized navigation, and a guarantee of a sublime user experience throughout our illustrious endeavor.

The JavaScript Story!

As we are well aware, when treading the realms of TypeScript, it is incumbent upon us to fashion meticulous definitions. These exquisite artifacts bestow upon us the power to discern errors swiftly during the development process and promptly rectify them.

I am embarking on a project utilizing Next.js App Router and Shadcn-UI. This endeavor marks a new and momentous chapter in my career as a Software Freestyle Engineer.

The Abstract Definition

In the vein of crafting a research journal, I am compelled to fashion an abstract that shall subsequently unfold into a captivating phenomenon of eloquent prose, adorned with a hint of narcissistic flair.

// Filename: types/sidebar.ts
export interface SubmenuItems {
    label: string;
    link: string;
}

export interface NavItems {
    label: string;
    icon: React.ReactElement | undefined;
    link: string;
    isParent: boolean;
    subMenu?: SubmenuItems[];
}

export interface SidebarProps extends React.HTMLAttributes<HTMLDivElement> {
    menus: NavItems[];
}

The following code presents a comprehensive definition of TypeScript interfaces and React component prop types for a sidebar component.

The SubmenuItems interface delineates the composition of submenu items within the sidebar. It encompasses two properties: label, denoting the label for the submenu item, and link, representing the associated URL link.
The NavItems interface outlines the structure of navigation items within the sidebar. It encompasses properties such as label for the navigation item label, icon for the corresponding React element depicting the item's icon, link for the associated URL link, isParent to indicate the presence of submenus, and an optional subMenu property of type SubmenuItems[], which facilitates the definition of an array of submenu items.
The SidebarProps interface extends the HTML attributes of a div element and introduces a menus property of type NavItems[]. This property allows for the definition of an array of navigation items to be passed as props to the sidebar component.

In essence, this code provides a structured approach to defining types and props required for a sidebar component, promoting seamless utilization and type-checking within a React application.

A Central Sidebar Configuration

A well-designed sidebar menu like this one is a testament to the power of intuitive UI/UX, providing users with a clear and structured path to navigate through various sections of an application

// Filename: config/sideMenu.tsx
import { NavItems } from "@/types/sidebar";
import { Icons } from "@/components/icons";

export const sideMenu: NavItems[] = [
  {
    label: "Master Data",
    icon: undefined,
    link: "javascript:;",
    isParent: false,
  },
  {
    label: "Master Korcam",
    icon: <Icons.userSquare className="w-4 h-4" />,
    link: "/dashboard/master-korcam",
    isParent: false,
  },
  {
    label: "Master Kordes",
    icon: <Icons.userSquare className="w-4 h-4" />,
    link: "/dashboard/master-kordes",
    isParent: false,
  },
  {
    label: "Master Korlap",
    icon: <Icons.userSquare className="w-4 h-4" />,
    link: "/dashboard/master-korlap",
    isParent: false,
  },
  {
    label: "Master Pemilih",
    icon: <Icons.userSquare className="w-4 h-4" />,
    link: "/dashboard/master-pemilih",
    isParent: false,
  },
  {
    label: "Settings",
    icon: <Icons.settings className="w-4 h-4" />,
    link: "/settings",
    isParent: true,
    subMenu: [
      {
        label: "Profile",
        link: "/settings/profile",
      },
      {
        label: "Preferences",
        link: "/settings/preferences",
      },
    ],
  },
]

The provided code establishes an arrangement for the sidebar navigation menu within a dashboard or application through the definition of an array named sideMenu, having a type of NavItems[].

Each element within the sideMenu array represents a distinct menu item within the sidebar. These elements possess properties such as label for the menu item's label, icon for associating an icon with the menu item (utilizing the Icons component), link for the corresponding URL link, and isParent to signify whether the menu item contains submenus.

The code initializes the sideMenu array with various menu items. For instance, "Master Data" serves as a top-level item without an icon. Additionally, other items such as "Master Korcam," "Master Kordes," and so forth, are equipped with icons sourced from the Icons component, along with their respective links.

Furthermore, there exists a "Settings" menu item adorned with the "settings" icon, and isParent is set to true, indicating the presence of submenus. The submenus themselves are defined within the subMenu property as an array of objects comprising label and link properties.

All in all, this code establishes the configuration for a sidebar menu, encompassing an array of menu items complete with labels, icons, links, and submenus. This configuration can be employed to render the sidebar navigation within a React application.

The Sidebar Component

Once we have abstracted our imagination and begun unraveling it into a journey towards the dream we desire—an exquisite center of command for the sidebar menu in our application—it is now time to execute our intentions and bring forth the creation of the sidebar menu component.

// Filename: components/sidebar.tsx
"use client"

import Link from "next/link"
import { usePathname } from "next/navigation"

import {
  Accordion,
  AccordionContent,
  AccordionItem,
  AccordionTrigger,
} from "@/components/ui/accordion"
import { Button, buttonVariants } from "@/components/ui/button"
import { ScrollArea } from "@/components/ui/scroll-area"
import { cn } from "@/lib/utils"
import { SidebarProps } from "@/types/sidebar"

import { Icons } from "./icons"

export function Sidebar({ className, menus }: SidebarProps) {
  const pathname = usePathname()
  return (
    <div className={cn("pb-12", className)}>
      <div className="space-y-4 pb-2">
        <div className="py-2">
          <ScrollArea className="min-h-[300px] max-h-screen px-2">
            <div className="space-y-1 p-2">
              <Link
                className={`${buttonVariants({
                  size: "sm",
                  variant: pathname === "/dashboard" ? "default" : "ghost",
                  align: "flexLeft",
                })}`}
                href={"/dashboard"}
              >
                <span className="inline-flex items-center justify-center gap-1">
                  <Icons.home className="w-4 h-4" /> Dashboard
                </span>
              </Link>
              {menus?.map((menu, i) => {
                if (menu.isParent === false && menu.link === "javascript:;" && menu.icon === undefined) {
                  return <strong key={`${menu}-${i}`} className="font-bold inline-flex items-start justify-start text-xs text-gray-700 dark:text-gray-400">{menu.label}</strong>
                } else if (menu.isParent && menu.link !== "javascript::" && menu.icon !== undefined) {
                  return (
                    <Accordion
                      key={`${menu}-${i}`}
                      type="single"
                      collapsible
                      className="w-full"
                    >
                      <AccordionItem value={`item-${i}`} className="border-b-0">
                        <AccordionTrigger
                          className={buttonVariants({
                            size: "sm",
                            variant:
                              pathname === menu.link ? "default" : "ghost",
                            align: "flexBetween",
                            className: "hover:no-underline",
                          })}
                        >
                          <span className="inline-flex items-center justify-center gap-1">
                            {menu.icon} {menu.label}
                          </span>
                        </AccordionTrigger>
                        <AccordionContent>
                          {menu.subMenu?.map((subItem, subIndex) => (
                            <Button
                              key={`${subIndex}-${i}`}
                              variant="ghost"
                              size="sm"
                              className="w-full justify-start font-normal"
                            >
                              &mdash; {subItem.label}
                            </Button>
                          ))}
                        </AccordionContent>
                      </AccordionItem>
                    </Accordion>
                  )
                } else {
                  return (
                    <Link
                      key={`${menu}-${i}`}
                      className={`${buttonVariants({
                        size: "sm",
                        variant: pathname === menu.link ? "default" : "ghost",
                        align: "flexLeft",
                      })}`}
                      href={menu.link}
                    >
                      <span className="inline-flex items-center justify-center gap-1">
                        {menu.icon} {menu.label}
                      </span>
                    </Link>
                  )
                }
              })}
            </div>
          </ScrollArea>
        </div>
      </div>
    </div>
  )
}

The sidebar menu component will dynamically process and categorize the menus defined in config/sideMenu.tsx. Isn't this truly impressive? We simply need to define the menus we wish to display on the sidebar within a single configuration file.

Here is an illustration showcasing the transformation from the realm of imagination to the realization of our previous endeavors.

[Imagine -> Plan -> Create -> Achieve]

Imagination: Visualizing the concept of a dynamic sidebar menu configuration.
Planning: Mapping out the structure and properties of the menu items.
Creation: Implementing the code to define the menu items and their characteristics.
Achievement: Witnessing the manifestation of our vision as the dynamic sidebar menu comes to life.

This journey exemplifies the power of imagination and execution in bringing ideas to fruition.

[The Graph - 001] - Sidebar Menu Title & Sidebar Menu Items

[The Graph - 002] - Nested Menu in Sidebar Navigation

The Live Version of Our Imagination

The Last Freestyle Improvisation

As is my custom, I always strive to innovate upon existing foundations while staying true to my own character as a Software Freestyle Engineer.

The default button component provided by Shadcn-UI may not fully satisfy the imaginative requirements we envision. However, with a few modifications, we can transform it into something truly remarkable.

// Filename: components/ui/button.tsx
import * as React from "react"
import { VariantProps, cva } from "class-variance-authority"

import { cn } from "@/lib/utils"

const buttonVariants = cva(
  "rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground hover:bg-primary/90",
        destructive:
          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
        outline:
          "border border-input hover:bg-accent hover:text-accent-foreground",
        secondary:
          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
        ghost: "hover:bg-accent hover:text-accent-foreground",
        link: "underline-offset-4 hover:underline text-primary",
      },
      size: {
        default: "h-10 py-2 px-4",
        sm: "h-9 py-1.5 px-3 rounded-md",
        lg: "h-11 px-8 rounded-md",
      },
      align: {
        flexLeft: 'flex items-start justify-start',
        flexCenter: 'flex items-center justify-center',
        flexRight: 'flex items-end justify-end',
        flexBetween: 'flex items-center justify-between',
        inlineLeft: 'inline-flex items-start justify-start',
        inlineCenter: 'inline-flex items-center justify-center',
        inlineRight: 'inline-flex items-end justify-end',
        inlineBetween: 'inline-flex items-center justify-between'
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
      align: 'flexCenter'
    },
  }
)

export interface ButtonProps
  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
    VariantProps<typeof buttonVariants> {}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
  ({ className, variant, size, ...props }, ref) => {
    return (
      <button
        className={cn(buttonVariants({ variant, size, className }))}
        ref={ref}
        {...props}
      />
    )
  }
)
Button.displayName = "Button"

export { Button, buttonVariants }

And I awoke from a profoundly beautiful dream, only to discover that the dream had indeed become a reality.

The Story Source: https://metaphore.vercel.app/stories/javascript/a-central-sidebar-menu-configuration

Spice Up Your Website with These Color-Related Functions

Imam Ali Mustofa — Sat, 22 Apr 2023 02:34:22 +0000

The Back Story

Colors are a crucial aspect of web design, and they play a significant role in attracting visitors and conveying emotions. In this article, we will introduce you to a set of color-related functions that can help you add more personality to your website.

The javascript Story!

Are you looking to add some more color to your website? Do you want to create a more visually appealing site that captures your audience's attention? Look no further than these five color-related functions. Btw, i use this function for labeling data in my Metaphor Story - React Table

Converting Hex Color Codes to RGB Values

/**
 * Converts a hex color code to an object containing its RGB values.
 *
 * @param {string} hex - The hex color code to convert.
 * @returns {Object} An object containing the red, green, and blue values of the hex color code.
 */
function hexToRgb(hex) {
    const r = parseInt(hex.slice(1, 3), 16);
    const g = parseInt(hex.slice(3, 5), 16);
    const b = parseInt(hex.slice(5, 7), 16);
    return { r, g, b };
}

If you're not familiar with the concept, a hex color code is a six-digit code that represents a color in hexadecimal format. However, sometimes you may need to convert this code to RGB values to achieve a specific effect or use in some calculations. With our hexToRgb function, you can do just that. Simply input your hex color code, and the function will return an object with the red, green, and blue values of that color.

Converting RGB Color Values to Hex Color Codes

/**
 * Converts RGB color values to hex color code.
 *
 * @param {number} r - The red color value (0-255).
 * @param {number} g - The green color value (0-255).
 * @param {number} b - The blue color value (0-255).
 * @returns {string} The hex color code.
 */
function rgbToHex(r, g, b) {
    const hexR = r.toString(16).padStart(2, '0');
    const hexG = g.toString(16).padStart(2, '0');
    const hexB = b.toString(16).padStart(2, '0');
    return `#${hexR}${hexG}${hexB}`;
}

On the flip side, if you have an RGB color value, you may need to convert it to a hex color code. This is where our rgbToHex function comes in handy. Input the red, green, and blue values, and the function will return the hex color code for that color.

Generating Shades of a Color

/**
 * Generate color shades
 * @param {string} hex color string
 * @param {number} numShades the number of color shades
 * @param {null|number} onlyShade the number is accourding from numShades with index start from 0
 * @returns {array|string} colors array or string
 */
export function generateShades(hex, numShades, onlyShade = null) {
    // Convert the hex color to RGB
    const rgb = hexToRgb(hex);
    // Initialize the shades array
    const shades = [];
    // Determine the color step
    const step = Math.round(255 / (numShades - 1));
    // Generate the shades of the color
    for (let i = 0; i < numShades; i++) {
        const r = Math.max(Math.min(rgb.r + i * step, 255), 0);
        const g = Math.max(Math.min(rgb.g + i * step, 255), 0);
        const b = Math.max(Math.min(rgb.b + i * step, 255), 0);
        // Convert the RGB color back to hex
        const shade = rgbToHex(r, g, b);
        shades.push(shade);
    }
    return onlyShade !== null ? shades[onlyShade] : shades;
}

Looking to add more depth to your website by creating a gradient effect? Our generateShades function can help you create multiple shades of a color, giving your site a more dynamic appearance. Simply input the hex code of the color you want to use, and the number of shades you want to create. You can even generate only one specific shade by inputting the index of the shade you want.

Generating Hex Color Codes from Strings

/**
 * Generates a hex color code from a string using a simple hash function.
 * @param {string} anyString - The input string to generate the hex color code from.
 * @returns {string} The generated hex color code.
 */
export function generateHexColor(anyString) {
    // Use a simple hash function to generate a number from the anyString
    let hash = 0;
    for (let i = 0; i < anyString.length; i++) {
        hash = anyString.charCodeAt(i) + ((hash << 5) - hash);
    }

    // Generate a 24-bit color from the hash
    let color = (hash & 0x00FFFFFF).toString(16).toUpperCase();

    // Pad the color code with zeros if necessary
    while (color.length < 6) {
        color = "0" + color;
    }

    // Prepend a hash symbol to the color code
    return "#" + color;
}

Sometimes you may want to generate a color based on a specific string, such as a user's name or username. With our generateHexColor function, you can do just that. Simply input any string, and the function will use a simple hash function to generate a 24-bit color from that string. The result is a unique hex color code that you can use to add more personality to your website.

Calculating the Opposite Color of a Hexadecimal Color

/**
 * Calculates the opposite color of the given hexadecimal color.
 *
 * @param {string} hexColor - The hexadecimal color to calculate the opposite of.
 * @returns {string} The opposite color in hexadecimal format.
 */
export function getOppositeColor(hexColor) {
    // Remove the "#" character if present
    hexColor = hexColor.replace("#", "");

    // Convert the hex color to RGB
    const red = parseInt(hexColor.substr(0, 2), 16);
    const green = parseInt(hexColor.substr(2, 2), 16);
    const blue = parseInt(hexColor.substr(4, 2), 16);

    // Calculate the opposite color
    const oppositeRed = 255 - red;
    const oppositeGreen = 255 - green;
    const oppositeBlue = 255 - blue;

    // Convert the opposite color to hex
    const oppositeHex = "#" +
        oppositeRed.toString(16).padStart(2, "0") +
        oppositeGreen.toString(16).padStart(2, "0") +
        oppositeBlue.toString(16).padStart(2, "0");

    return oppositeHex;
}

Finally, if you're looking to create more contrast on your website, our getOppositeColor function can help you achieve just that. Input a hex color code, and the function will return the opposite color in hexadecimal format. This can help you create a more visually appealing site that stands out to your visitors.

Conclusion

Adding more color to your website doesn't have to be difficult or time-consuming. With these five functions, you can easily create unique colors and gradients that give your site more personality and appeal.

That's it! Thank for reading my Metaphor Story...