Description

This is a push-button. Press it and run some function. Button can have text, icon and text, or icon only. This widget inherits from the Layout widget. So that all the functions acting on Layout widget also work for Button widget.

Default content parts of the button widget that you can use for are:

"icon"
An icon of the button

Default text parts of the button widget that you can use for are:

"default"
A label of the button

Screenshots

Examples

TODO:

Heirarchy

TODO: Create inverted heirarchy diagram.

Signals

clicked
Emitted when button is clicked (pressed and released).

pressed
Emitted when `button` is pressed.

unpressed
Emitted when `button` is released after being pressed.

focused (since 1.8)
Emitted when `button` has received focus.

unfocused (since 1.8)
Emitted when button has lost focus.

repeated
Emitted when button is pressed without releasing it.

Following are the signals inherited from Layout widgets.

"theme,changed"
Emitted when theme is changed.

"language,changed"
Emitted when application's language changed.

Styles

Defined in the default theme, the button has the following styles available:

default
A normal button.

anchor
Like default, but the button fades away when the mouse is not over it, leaving only the text or icon.

hoversel_vertical (internal)
Internally used by Hoversel to give a continuous look across its options.

hoversel_vertical_entry (internal)
Another internal for Hoversel.

naviframe (internal)
Internally used by Elm_Naviframe for its back button.

colorselector (internal)
Internally used by Colorselector for its left and right buttons.

Constructors

elm_button_add
Add a new button to the parent's canvas.

Functions

elm_button_autorepeat_initial_timeout_set
Sets the initial timeout before the autorepeat event is generated.

elm_button_autorepeat_initial_timeout_get
Gets the initial timeout before the autorepeat event is generated.

elm_button_autorepeat_gap_timeout_set
Sets the interval between each generated autorepeat event.

elm_button_autorepeat_gap_timeout_get
Gets the interval between each generated autorepeat event.

elm_button_autorepeat_set
Sets the autorepeat event generated when the button is kept pressed.

elm_button_autorepeat_get
Gets the autorepeat event generated when the button is kept pressed.

Following are the functions inherited from the Container class.

elm_object_part_text_set
Sets the text of an object.

elm_object_part_text_get
Gets the text of an object.

elm_object_part_content_set
Set the content on part of a given container widget.

elm_object_part_content_get
Get the content on part of a given container widget.

elm_object_part_content_unset
Unsets the content on a part of a given container widget.

elm_object_signal_emit
Sends the signal to the widget.

elm_object_signal_callback_add
Adds the callback for a signal emitted by widget.

elm_object_signal_callback_del
Removes a signal-triggered callback from a widget.

---

सृष्टि के मूल में है इच्छा। एक दृष्टांत लो। कुम्हार ने घटादि बनाने के लिए कुलाल चक्र को घुमा दिया। थोड़ी सी मिट्टी का पिड है और उस पर उसने हाथ लगा रखा है। कैसा आश्चर्य है! हाथ हिलता नहीं और कुम्हार की इच्छा के अनुसार कभी घड़ा, कभी सकोरा और कभी हाँड़ी तैयार हो जाती है। इच्छा से ही सब होता है। उपादान तो नित्य ही है सत् अथवा सत्ता, कालचक्र घूम ही रहा है, अब केवल इच्छा ही उत्पत्ति का नियामक है।

यह बात याद रखनी चाहिए कि इच्छा ही बीज है। जो इच्छा करोगे वही होगा, निश्चय ही होगा। आज नहीं तो कल। इच्छा का नाश नहीं होता। एक बार जो इच्छा की गयी, तत्काल वह अनंत में चित्रित हो गयी। समय आने पर फूटकर बाहर निकल आयेगी। मान लो तुम्हें आज घास खाने की इच्छा हुई अतएव तुम्हें एक ऐसा शरीर धारण करना पड़ेगा जिससे घास खाने की इच्छा पूर्ण हो सकती है। ऐसा शरीर धारण किये बिना वह इच्छा अतृप्त रह जायगी। जिस प्रकार की इच्छा होती है शरीर भी उसी प्रकार का धारण करना पड़ता है, चाहे वह देव शरीर हो, मानव शरीर हो या तिर्यक् शरीर। शरीर धारण किये बिना काम नहीं चल सकता। एक कथा है-
 

एक बार बुद्धदेव का एक भक्त अत्यंत भक्तिपूर्वक गुरुदेव के लिए सूअर का मांस तैयार करके उनके आगमन की प्रतीक्षा में बैठा था। सारा दिन बीत गया, संध्या हो गयी परंतु गुरुदेव नहीं आये। संध्या के समय एक कुत्ते ने आकर उस मांस में जो भगवान् के लिए यत्नपूर्वक रखा गया था, मुँह डाल दिया तथा उसमें से कुछ खा भी लिया। भक्त ने देखते ही कुत्ते को भगा दिया। परंतु उस दिन बुद्धदेव नहीं पधारे। दूसरे दिन उसने जाकर बुद्धदेव से सब वृत्तांत कहा और यह भी प्रकट किया कि आपके न पधारने से मेरे हृदय में बड़ा ही दुःख हुआ था। बुद्धदेव ने कहा "मैं तो कल गया था और मैंने तुम्हारे भोग को ग्रहण भी किया था। तुम मुझे पहचान नहीं सके। कल क्या तुमने एक कुत्ता नहीं देखा, मैं ही कुत्ते का शरीर धारण करके गया था। तुमने मेरे लिए जिस प्रकार का भोग रखा था, उसके अनुरूप देह धारण करके ही मैं गया था।" अतएव समझना चाहिए कि सब शरीरों में सब प्रकार के भोग नहीं हो सकते।
 

इच्छा की तृप्ति हुए बिना मुक्ति नहीं होती। जब तक एक भी वासना अतृप्त रहेगी, तब तक मुक्ति असंभव है। 

~ मनीषी की लोकयात्रा 

---

Since the backend is working, we can now start using the middleware packages we installed earlier.

Let's begin with morgan.

import express from "express";
import morgan from "morgan";

const app = express();

app.use(morgan("tiny"));

app.get("/ping", (req, res) => {
    return res.json({ data: "pong" });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`http://localhost:${PORT}`);
});

Now that logging is in place, the next middleware we will configure is cors. We will whitelist the React application's URL: http://localhost:5173.

import express from "express";
import morgan from "morgan";
import cors from "cors";

const app = express();

app.use(morgan("tiny"));
app.use(
    cors({
        origin: "http://localhost:5173",
    }),
);

app.get("/ping", (req, res) => {
    return res.json({ data: "pong" });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`http://localhost:${PORT}`);
});

Finally, let's add helmet and compression.

import express from "express";
import morgan from "morgan";
import cors from "cors";
import helmet from "helmet";
import compression from "compression";

const app = express();

app.use(morgan("tiny"));
app.use(
    cors({
        origin: "http://localhost:5173",
    }),
);
app.use(helmet());
app.use(compression());

app.get("/ping", (req, res) => {
    return res.json({ data: "pong" });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`http://localhost:${PORT}`);
});

Perfect! Now visit http://localhost:3000/ping. It should return the same output as before. However, this time you will also see the request being logged in the terminal.

Yes — it’s working for me 👍

Now is a good time to open Insomnia (or any other API client). Send a request to the same endpoint and confirm that you receive: { "data": "pong" }

Cleaning Up the Frontend

On the frontend side, let’s clean up the scaffolded application:

• Remove the public folder
• Remove the src/assets folder
• Remove the App.css file

After cleaning up, your folder structure should look minimal and clean.

Now open the App.jsx file and replace its content with the following:

const App = () => {
    return <h1>hello, world</h1>;
};

export default App;

Run the React application using:

npm run dev

Within a few seconds, the application should be available at: http://localhost:5173. Visit the URL and confirm that you see: hello, world.

Both applications are now running — yay! 🎉

---

શ્રીરામકૃષ્ણ - (કેદારને) શ્રદ્ધાનું જોર કેટલું છે તે તો સાંભળ્યું છે ને? પુરાણમાં કહ્યું છે કે રામચંદ્ર કે જે સાક્ષાત્ પૂર્ણ બ્રહ્મ નારાયણ, તેમને લંકામાં પહોંચવા સારુ પુલ બાંધવો પડ્યો, પણ હનુમાન રામનામમાં શ્રદ્ધા રાખીને એક જ છલાંગે સમુદ્રની પેલી પાર કૂદી પડયા. તેમને પુલની જરૂર નહિ. (સૌનું હાસ્ય)

~ શ્રીરામકૃષ્ણ કથામૃતમાંથી

---

Inside the backend folder, let’s create an app.js file and write some base code to test our setup.

touch app.js

We will use the modern import...from syntax. We’ll update the necessary configuration in the package.json file shortly.

import express from "express";

const app = express();

Now, let’s define a /ping route that returns "pong" as a JSON response.

import express from "express";

const app = express();

app.get("/ping", (req, res) => {
    return res.json({ data: "pong" });
});

💡 Tip: Always use return when you want to stop the execution of a function after sending a response.

We will use port 3000 because the React application created using Vite runs on port 5173 by default.

import express from "express";

const app = express();

app.get("/ping", (req, res) => {
    return res.json({ data: "pong" });
});

const PORT = process.env.PORT || 3000;

Finally, let’s start the server and print the URL for future reference and debugging.

import express from "express";

const app = express();

app.get("/ping", (req, res) => {
    return res.json({ data: "pong" });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`http://localhost:${PORT}`);
});

We need to make the following changes in the package.json file:

• Change "type" from "commonjs" to "module" to support the import...from syntax.
• Change "main" from index.js to app.js.

{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "type": "module",
    "dependencies": {
        "compression": "1.8.1",
        "cors": "2.8.6",
        "express": "5.2.1",
        "helmet": "8.1.0",
        "morgan": "1.10.1",
        "postgres": "3.4.8"
    }
}

I almost forgot — we also need nodemon to automatically restart the server when files change during development.

💡 Tip: This is an example of a non-perfect setup. You will always miss something — and that’s completely fine.

Install nodemon as a development dependency:

npm i -E -D nodemon

Now, let’s add two scripts to package.json:

• dev → runs nodemon app.js
• start → runs node app.js

{
    "name": "backend",
    "version": "1.0.0",
    "description": "",
    "main": "app.js",
    "scripts": {
        "dev": "nodemon app.js",
        "start": "node app.js"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "type": "module",
    "dependencies": {
        "compression": "1.8.1",
        "cors": "2.8.6",
        "express": "5.2.1",
        "helmet": "8.1.0",
        "morgan": "1.10.1",
        "postgres": "3.4.8"
    },
    "devDependencies": {
        "nodemon": "3.1.11"
    }
}

With these changes, we are ready to run the application. Both scripts will start the server, but during development, we usually use:

npm run dev

Now open your browser and visit http://localhost:3000/ping. You should see { "data": "pong" } And yup — it’s working! 🎉 If everything works on your side, you’re ready to head over to the next article.

---

Let’s create a folder named peter and navigate into it.

mkdir peter
cd peter

Now, create two folders — frontend and backend. As the names suggest, the frontend folder will contain the React code, and the backend folder will contain the Node.js code.

mkdir frontend backend

Inside the frontend folder, let’s create a React application using Vite with the JavaScript template.

cd frontend
npm create vite@latest . -- --template react

While the process is running, open a new terminal tab (or window), navigate to the backend folder, and perform some initial setup such as creating a package.json file and installing the required dependencies.

cd ../backend

Let’s create a package.json file:

npm init -y

Now, install the express and postgres packages:

npm i -E express postgres

Next, install a few middleware packages:

• morgan for logging
• helmet for security
• cors to allow API calls from the React application
• compression to compress responses

npm i -E morgan helmet cors compression

Great! The initial setup is complete, and we’re ready to get started.

---

શ્રીરામકૃષ્ણ (નરેન્દ્રને) - નરેન્દ્ર! તું શું કહે છે? સંસારી લોકો તો કેટલુંય બોલે! પણ જો, હાથી જ્યારે રસ્તામાં હોય, ત્યારે કેટલાંય પ્રાણીઓ તેની પાછળ પડે, પણ હાથી તેની સામું જુએ પણ નહિ. તારી જો કોઈ નિંદા કરે, તો તને કેવું લાગે?
 

નરેન્દ્ર - હું માનું કે કૂતરાં હાઉ હાઉ કરે છે.
 

શ્રીરામકૃષ્ણ (હસીને) – ના રે ના, એટલું બધું નહિ. (સૌનું હાસ્ય) ઈશ્વર પ્રાણી માત્રમાં છે. પણ સારા માણસોની સાથે હળવું મળવું ચાલે; જ્યારે નરસા માણસોથી દૂર રહેવું જોઈએ. એમ તો વાઘની અંદર પણ નારાયણ છે; એટલે કંઈ વાઘને ભેટી પડાય નહિ! (સૌનું હાસ્ય). જો એમ કહો કે વાઘ તો નારાયણ છે, તો પછી ભાગી શા માટે જવું? તેનો જવાબ એ કે જેઓ કહે છે કે ‘ભાગી જાઓ' તેઓ પણ નારાયણ છે, તો તેમની વાત કેમ ન સાંભળવી?
 

'એક વાત સાંભળો. એક જંગલમાં એક સાધુ રહેતો હતો. તેને અનેક શિષ્યો. તેણે એક દિવસે શિષ્યોને ઉપદેશ આપ્યો કે સર્વભૂતમાં નારાયણ છે, એમ જાણીને સૌને નમસ્કાર કરવા. એક દિવસ એક શિષ્ય હોમ માટે લાકડાં વીણવા જંગલમાં ગયો. એ લાકડાં વીણતો હતો એટલામાં બૂમ સંભળાઈ કે ‘જે કોઈ રસ્તામાં હો તે નાસી જજો, એક ગાંડો હાથી આવે છે!' આજુબાજુમાંથી બધા નાસી ગયા, પણ શિષ્ય નહીં! તેણે વિચાર્યું કે હાથી પણ નારાયણ છે, તો પછી નાસવું શા માટે? એમ વિચારીને તે ઊભો રહ્યો; અને નમસ્કાર વગેરે કરીને સ્તુતિ કરવા લાગ્યો. આ બાજુ મહાવત ઉપરથી બૂમો પાડી રહ્યો. છે કે ‘ભાગી જાઓ, ભાગી જાઓ!' તોય શિષ્ય હક્યો નહિ. છેવટે હાથી તેને સૂંઢમાં પકડી એક બાજુ ફેંકી દઈને ચાલ્યો ગયો. શિષ્ય લોહીલુહાણ અને બેભાન થઈને પડ્યો. રહ્યો.

આ ખબર આશ્રમમાં પહોંચતાં ગુરુ અને શિષ્યો તેને ઉપાડીને આશ્રમમાં લઈ આવ્યા, અને સારવાર કરવા લાગ્યા. થોડીવારે તેને ભાન આવ્યું ત્યારે કોઈએ તેને પૂછ્યું: 'હાથી આવે છે તે સાંભળવા છતાં તમે નાસી ગયા નહિ?' તે બોલ્યો, 'ગુરુદેવે કહ્યું છે કે નારાયણ જ માણસ, જીવ, જંતુ, બધું થઈ રહેલા છે. એટલે હાથી-નારાયણને આવતા દેખીને હું ત્યાંથી ખસ્યો નહિ.' ત્યારે ગુરુએ કહ્યું, 'બાપુ, હાથી-નારાયણ આવતા હતા એ ખરું, એ સત્ય; પણ મહાવત-નારાયણે તો નાસી જવાનું કહ્યું હતું ને? જો બધાંય નારાયણ છે તો પછી તેનું કહેવું કેમ સાંભળ્યું નહિ? મહાવત-નારાયણનું પણ સાંભળવું જોઈએ ને?' (સૌનું હાસ્ય)

‘શાસ્ત્રમાં કહે છે આપો નારાયણ; જળ નારાયણનું સ્વરૂપ છે! પરંતુ કોઈક જળ ભગવાનની પૂજામાં ચાલે; તો કોઈક જળથી હાથ-મોં ધોવાનું, વાસણ માંજવાનું, કપડાં ધોવાનું માત્ર ચાલે, પણ પીવામાં અથવા ઠાકોરજીની સેવામાં ન ચાલે. તેમ સાધુ, અસાધુ, ભક્ત અને અભક્ત - સૌના અંતરમાં નારાયણ છે, પણ અસાધુ, અભક્ત, દુષ્ટ માણસની સાથે વ્યવહાર રાખવો ચાલે નહિ. હળવું મળવું ચાલે નહિ. કોઈકની સાથે કેવળ મોઢાની વાતચીતનો જ વ્યવહાર પરવડે; તો વળી કોઈકની સાથે એ પણ ચાલે નહિ. એવા માણસથી દૂર રહેવું જોઈએ.'

~ શ્રીરામકૃષ્ણ કથામૃતમાંથી

---

Welcome!

In this article series, we are going to build a project management system (or an issue tracking system) called Peter. The tech stack we will use includes Express for the back end and React for the front end. Along the way, we will also use GraphQL. The database will be PostgreSQL.

Please install the following software before we proceed:

1. Node v24+
2. npm v11+
3. PostgreSQL 17+
4. Insomnia (or any API client)
5. VS Code (or any text-editor)
6.  Terminal (I guess you already have one!)

Take your time to install this software. Once you're ready, head over to the next article.

---

Although, this quote is from The Will to Power, I copied it from cat-v.org website.

‘The Great Man … is colder, harder, less hesitating, and without respect and without the fear of “opinion”; he lacks the virtues that accompany respect and “respectability”, and altogether everything that is the “virtue of the herd”. If he cannot lead, he goes alone. … He knows he is incommunicable: he finds it tasteless to be familiar. … When not speaking to himself, he wears a mask. There is a solitude within him that is inaccessible to praise or blame.’

– Friedrich Nietzsche, The Will to Power

---

મનુષ્યની છાતીમાં જે ફેફસાં છે તેનું રક્ષણ કરનારાં નાકા કે નાકનાં બે છિદ્રો છે. હવાને ખેંચીને તેને શુદ્ધ કરીને તે ફેફસાંને પુરી પાડવી એ નાકનું કર્તવ્ય છે. હવામાં જે કાંઈ ધૂળ કે અનિષ્ટ રજકણો હોય તે નાકની અંદરના વાળમાં ભરાઈ રહે છે અને તે ઉપરાંત નાકની ઉષ્ણતા વડે હવા સ્વચ્છ થાય છે અને પછી જ તે ફેફસાંસુધી પહોંચે છે. ગંદી હવામાં કે દુર્ગંધવાળે સ્થળે માણસ જઈ ચડે છે, ત્યારે નાક પોતાની ગંધનિરીક્ષક શક્તિથી માણસને ખબર આપે છે કે અહીં ફેફસાંને ચોખ્ખી હવા પૂરી પાડવાનું કામ કરવું મારે માટે મુશ્કેલ છે...નાક એ એક કોમળ ઇંદ્રિય છે. કેટલાકો મ્હોંવાટે શ્વાસ લે છે પરન્તુ તે નુકસાનકારક છે. કારણકે નાકદ્વારા જે હવાશુદ્ધિ થાય છે તે મ્હોંદ્વારા થતી નથી. વળી નાકનો માર્ગ ફેફસાંસુધી પહોંચવા માટે લાંબો છે એટલે હવાને વધારે ઉષ્ણતા મળે છે અને એ રીતે હવાશુદ્ધિ વિશેષ થાય છે. 

---