DEV Community: csm

Git Basics

csm — Wed, 20 May 2026 02:21:27 +0000

Formal Definition

Git is a free, open-source distributed version control system (VCS) designed to track changes in source code during software development.

In English

A tool that can save the state of our project,from adding a semicolon to a file, to writing hundreds of lines of code.
Whenever we think this should be saved, we can!
And whenever we need to see that version, we can!
Whenever we need to use that version or do changes to it and save again, we can!
We can save n number of versions of our project and each version can be just as simple as a space char inclusion in a file!
All of this without taking lot of space in hard disk

Getting and Setting-Up Git

Check the official website: https://git-scm.com/

How It Works

First you initialize a directory as git repo (repository):
- You do git init
- Git creates a .git hidden folder in current directory
- This .git folder is what makes your folder a repo and gives those magical powers to see the history and versions of your project.
- If, by any chance, you delete that .git folder, you will loose all the project history, unless you pushed your changes to github!
You ask git, what is the status of the project:
- You do git status
- Git says on branch main, and then shows some filenames in red and says "Untracked files" (if you have files in your repo)
- That simply means git is working and its asking to save the changes if you are done working on them
- The branch thing is explained in the Core Concepts section
You ask git to take a screenshot of the changed files:
- You do git add filename.something or git add .
- Git takes a screenshot of the specified files
- Keep in mind,the screenshot is not saved yet
- Its like print screen on pc, we get a window that asks to save it or discard!
You ask git to save the screenshot:
- You do git commit -m "Some message about the changes!"
- Git saves the screenshot into the project history
- Each screenshot saved is called a commit
- Each commit has a hash
- That hash is like a name, that we can refer, to ask git to get that version or commit to us
You can view all the commits or versions:
- You do git log
- Git will show all the commits list with details like: Who,when, commit hash, commit message, etc!

This is the basic working!

Core Concepts

User

Each commit will include information about the person who made the commit
That is the username and email address of the person
This helps others or yourself in future, that who made the commit
The User is simply a person with username and email set in the git configuration
This is done by setting the username and password in git like this:

git config --global user.name "Your Name"

git config --global user.email "your.email@example.com"

Branches

All your commits from first one to the last one are like a rope
You can see the timeline of the commits straight
This timeline rope is a branch, just like the branch of a tree
It starts at the root, first commit, then grows!
By default, the root or main branch is called main
Now, if you have an experimental feature that you don't want to save to the current timeline or branch, but still want to save its changes and later when it works fine, want to join it to the current timeline of commits or branch
For this we have branches and merging
You can create a branch, do changes to the repo and save them into its own rope of commits
Later when you want to, you can add it to the main branch, that is to merge the branch with the main branch
You can make as many branches as you want
But merging branches with lot of changes and commits is an advanced topic!

GitHub (Pushing/Pulling)

Although git is helping save our projects's history, the history of our project is still living on our hard disk
If we loose it then bang!
And if someone else wants to collaborate with us on the project, they don't have access to our repo on our pc
To solve these issues, we have GitHub, a repo hosting platform, where we can save our repo history
When you make new commits you send them to github that is to push changes up!
Anyone having access to your github repo can send their changes (commits) to the repo on github and we can get or pull those changes back to our local pc repo

The Usual Flow of Commands

1) Initialize a git repo

git init

2) Check status

git status

3) Add changes to the staging area (just a fancy term, you know what it does)

git add .

git add specific_file.something specific_file2.something ...

4) Save changes

git commit -m "My first commit with changes"

5) Checking and pulling new changes from GitHub

git pull

6) Pushing changes to GitHub

git push origin main

git push

7) See the history

git log

Caution For Beginners

While using the command: git add ., git tracks everything in you repo folder including any sensitive information
And when you push it to GitHub, if its a public repo, then the whole world can get access to that information
So, do not put any sensitive information like passwords, tokens, api keys etc in your repo!
And mostly use git add with explicit filenames rather than "."

Note: I skipped the topics like: how to setup github account and make repos and add local repo's pushing destination to github repo, etc
Those, I think, you can learn on your own, once you get the basics!
(AI is also there for your help!)

Where to go from here?

I found this video very helpful while learning:
https://www.youtube.com/watch?v=apGV9Kg7ics
And the official git book:
https://git-scm.com/book/en/v2/Getting-Started-About-Version-Control

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

}