DEV Community: csm

Hello World in Neutralinojs

csm — Sun, 07 Dec 2025 23:29:56 +0000

About

A lightweight gui framework for desktop gui app development.

link to website

Features

Simple
Lightweight
Crossplatform
Web technologies for ui coding
Can use any front-end frameworks

Development Environment

os: linux mint
code-editor: vscode
node.js (I use bun!)
neutralinojs

Hello World App

1.Installing neu(cli tool for neutralinojs) tool:

npm install -g @neutralinojs/neu

2.Creating a new project(or neu project 😉):

neu create hello

cd hello

3.Test run:

neu run

You should see a simple app!

4.Project structure:

There are a bunch of files and folders!
neutralino.config.json is for configuration like we can set the size of the main window, etc.
bin/ folder contains neutralino binaries
resources/ folder is where our code lives!
dist/ folder (is generated after we build the project) is where our end app lives!
So,when user downloads our app,he gets a folder with binaries for different platforms and a resources.neu file.
The user double clicks the binary for his specific platform(like hello-linux_x64) and the executable will start the app by loading our ui code that was packaged into resources.neu file.
Simply, the app means the executable and the resources.neu file.

5.To build the project:

neu build

For release:

neu build --release

It produces a zip file in dist/ folder.

6.Now, making the simple app even simpler!

Delete all the code in resources/index.html and put this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>Hello World</title>
    <link rel="stylesheet" href="/styles.css">
  </head>
  <body>
    <div id="neutralinoapp">
      <h1>Hello World!</h1>
    </div>

    <script src="/js/neutralino.js"></script>
    <!-- Your app's source files -->
    <script src="/js/main.js"></script>
  </body>
</html>

Here, the two script tags are important!

Now replace the content in styles.css with:

html,body{
margin: 0;
padding: 0;

}

h1{
margin: 5rem;
color: blue;
}

And for now just remove all the code in resources/js/main.js (No js for now!)
Now run the app and see!

neu run

Thats it!

Task

Find the field in neutralino.config.json, that ends the process when the user closes the main window!

Calculator app using bolt

csm — Tue, 01 Jul 2025 16:06:47 +0000

Inspiration

I was amazed to see how ai can write the whole project.So, thought to test it with my pet project!

What it does

A simple calculator web app that can do basic arithmetic operations.

The app is live at:
link

How we built it

I setup a vue app using stackblitz and then imported it into bolt.new.Then, with just one line of prompt and then an auto fix, I got a fully functioning calculator app. The prompt was first, write a calculator app ui which is responsive. Then with one more prompt deployed it to netlify.

Challenges we ran into

Not really, but just one config error that was auto fixed.

Accomplishments that we're proud of

Just got an app up and running what took me months when I got started in dev.

What we learned

I think its an amazing tool that is very useful for fast prototyping.

I know the app is still rough with many things missing but with just one or two prompts this much was possible + got my first hackathon experience!

be careful with return values in go

csm — Tue, 06 May 2025 13:45:24 +0000

About

I was writing a program in go, where I was calling a function,which takes an existing slice, modifies it and returns it back.Then I had a print statement that prints that slice.
Here, when I printed the slice, I was getting the same old values that were there before the function call.
I was hitting my head to the keyboard to find the cause.
Where did I screw up?
Well, I did not assign the return value of the function call,which is the modified slice,to the old slice variable.In Rust or in some other languages,the compiler will yell at us if we leave the return values of a function call without assigning them.
So the catch is go compiler will not give an error if we leave return values of a function call.

Bottom Line

So, always look for the function signature before calling the function.

good, simple, detailed info and explanation on wifi.

csm — Sun, 04 May 2025 15:38:06 +0000

Hoag

May 3 '25

Understanding Wi-Fi (Wireless Fidelity)

#network #wifi #hwiki

Comments

4 min read

Counter web app

csm — Thu, 01 May 2025 19:14:37 +0000

About

A simple counter app using html,css,js and go(for backend).

Link to repo:

link to repo

Overview

We serve the frontend using go's http server package.
It serves the index.html with the assets on "http://localhost:8080".
We open the url in the browser and we get the app.

How app works

1.If we click the '+' button, it increments the counter.
2.If we click the '-' button, it decrements the counter.
3.If we click on the counter number, it resets the counter(🛑 be careful! 🛑).

Project structure

Steps

1.Create project directory: counter-web-app.
2.cd into it.
3.run: go mod init counter
Here,we are initialising go module with name counter.
4.run: touch counter.go
This file is the entry point to the http server that serves our web app.
5.Fill counter.go with the below lines:

package main

import (
    "fmt"
    "net/http"
)

func main() {
    fs := http.FileServer(http.Dir("./public/"))
    http.Handle("/", fs)

    fmt.Println("Server is running on http://localhost:8080")
    http.ListenAndServe(":8080", nil)
}

Explanation:
1) main() function is the entry point.
2) This line:

fs := http.FileServer(http.Dir("./public/"))

Creates a file server that serves the public folder.
3) This line:

http.Handle("/", fs)

Sets the default url to public folder, so that when a user accesses the website,it serves the index.html file in the public folder.
4) Last line:

http.ListenAndServe(":8080", nil)

Serves the app on "http://localhost:8080".

6.Create directory 'public'(for frontend code):
mkdir public

7.Create three files:

touch public/index.html public/index.js public/styles.css

8.Fill the 'index.html' file with:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Counter</title>
    <link rel="stylesheet" href="styles.css" />
    <script src="index.js" defer></script>
  </head>
  <body>
    <div class="counter-container">
      <div class="counter-contents">
        <h1>Counter</h1>
        <button class="counter-btn" onclick="incrementCounter()">+</button>
        <span
          id="counter-value"
          style="text-align: center"
          onclick="resetCounter()"
          >0</span
        >
        <button class="counter-btn" onclick="decrementCounter()">-</button>
      </div>
    </div>
  </body>
</html>

Explanation:
1) In the head:
-> We set the title to 'Counter'.
-> We link the css style sheet 'styles.css'.
-> We link the js script 'index.js'(with the defer attribute).
2) In the body:
-> We need 2 buttons for '+' and '-' and a <span> element for holding the counter value.
-> But to align them correctly we put them inside two div elements for using flex box.
-> And also an h1 heading saying "Counter".

9.Now, css!
Fill the 'styles.css' file with:

* {
  margin: 0;
}

h1 {
  font-size: 40px;
  text-align: center;
  padding-bottom: 20px;
}

.counter-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.counter-contents {
  display: flex;
  gap: 5px;
  flex-direction: column;
  padding: 30px;
  background: #e2af39; /* #e2af39 */
}

.counter-btn {
  background: #dd6036;

  font-size: 6rem;
  margin: 0 3rem;
  padding: 1rem, 2rem;
  cursor: pointer;
}

#counter-value {
  font-size: 5rem;
  min-width: 80px;
  cursor: pointer;
}

Explanation:
1) We make the counter-container div flex and move it to center.
2) We make the counter-contents div flex and set the flex direction to 'column', so that it aligns the items vertically.
3) And the rest is normal styling!

10.Finally, js!
Fill the 'index.js' file with:

function incrementCounter() {
  let value = document.getElementById("counter-value").innerText;
  value = parseInt(value) + 1;
  document.getElementById("counter-value").innerText = value;
}

function decrementCounter() {
  let value = document.getElementById("counter-value").innerText;
  if (value > 0) {
    value = parseInt(value) - 1;
    document.getElementById("counter-value").innerText = value;
  }
}

function resetCounter() {
  document.getElementById("counter-value").innerText = 0;
}

Explanation:
We have three functions:
1) incrementCounter() -> that increments the counter when user clicks '+' button.
2) decrementCounter() -> that decrements the counter when user clicks '-' button.
3) resetCounter() -> that resets the counter value to 0,when user clicks the counter number (<span>).

11.Now, all is set!
Just run: go run .
and open the browser with the given url.
12.Done!

taking input with spaces in go

csm — Tue, 03 Dec 2024 05:46:54 +0000

Context

I was writing a calculator program which asks user for input expression and prints the result and prompts again for next expression.

Problem

But, when I used fmt.Scanln() for reading a line(with space-chars like space and tab), the thing happened!

It stopped reading when it encountered a space-char(yep! not a newline but space char).

For example:
Input: 2 +3.5(5)
Got: 2

But, I got even worse thing to say!

The rest of the chars in the input were still there and if we call the Scanln() func again, it reads them.

Solution:

There is another func called Scanf() in fmt package.
This guy is different!
It takes input based on format specifiers and stores them in variables we gave.
Code:

    text := ""

    fmt.Println("Enter expression:")
    for {
        var temp rune
        fmt.Scanf("%c", &temp)
        if temp == '\n' {
            break
        }
        text += string(temp)
    }
    fmt.Printf("You entered:\n %v", text)

Explanation:
1.Prints "Enter expression:"
2.a loop starts
3.Now, the loop takes input from user, char by char(rune by rune in go)
5.And in each iteration, we take that rune and add it or append it to our text variable.
6.When it reads a '\n', then it breaks the loop and we get the input-line inside text variable.
7.Here, rune can also be space chars.
So, literally it reads even the '\n'.

(Reading space chars is an exception for Scanf("%c",&var_name) and is what we want!)

Note: It also solves the problem we get when we read more than one line.I mean, we get unexpected input or behaviour when we read more than one line(I don't know the exact reason!).
But here, since we are reading char by char, including '\n' as well(into the temp var), will eliminate all those errors!

Custom readline() func

We can write a custom readline() func like this:

package main

import "fmt"

func main() {

    fmt.Println("Enter expression:")
    input := readline()
    fmt.Printf("You entered:\n %v\n", input)

}

func readline() string {
    var text string
    for {
        var temp rune
        fmt.Scanf("%c", &temp)
        if temp == '\n' {
            break
        }
        text += string(temp)
    }
    return text

}