DEV Community: Kaan Kuscu

Five Methods for Directly Assigning Primitive Values Received with a Pointer in Go

Kaan Kuscu — Sat, 29 Jul 2023 11:59:27 +0000

First of all, let’s see in which case we need this process.

A sample need scenario;

type MyStruct struct {
 Text *string
}

Let’s have a struct as above. We have a data that is parse to this model and let’s assume that the Text field is filled after parse. In this case, it will be enough to use a suitable data for our model.

But if we wanted to fill the Text field of the model we created when we had no data to parse, what should we do?

In fact, the best way to fulfill such a request, if it were supported by Go, would be as follows.

a := MyStruct{
  Text: &"text",
}

// or
a := MyStruct{
  Text: &string("text"),
}

However, since the method of giving the address of the string value with &"text" is not supported, we have to resort to other methods.

Unfortunately the new function can’t help either, because the new function only creates a zero-valued variable and return its address. Therefore we cannot assign the value we set at once.

1. By Creating Helper Variable

We can create a helper variable to send the address to the Text field.

text := "text"

a := MyStruct{
  Text: &text,
}

2. By Creating Helper Function

We can create a helper function to send the address to the Text field.

func Ptr(v string) *string{
 return &v
}
.
.
.
a := MyStruct{
  Text: Ptr("text"),
}

3. By Creating Helper Function With Generics

Actually best effective method is this method. Because it’s more readable and reusable method.

func Ptr[T any](v T) *T {
 return &v
}
.
.
.
a := MyStruct{
  Text: Ptr("text"),
}

Instead of *string If we have a *int64 type field, we have to specify number as int64. Because default decimal number type is int. Thus we can not send parameter directly as Ptr(123). We can specify the type of the parameter in 2 different ways.

// first way
Ptr(int64(123))

// or second way
Ptr[int64](123)

4. By Using Slice

Another simple method that we can apply by using slice.

a := MyStruct{
  Text: &[]string{"text"}[0],
}

But it is not a very readable writing style.

5. By Using One-liner Anon Function

a := MyStruct{
  Text: func(v string) *string { return &v }("text"),
}

// or

a := MyStruct{
  Text: func() *string { v := "text"; return &v }(),
}

This method also seems very complicated

Thank you for reading, I hope you enjoyed it

Configuring Gofiber API to access session or cookies from JavaScript Side

Kaan Kuscu — Thu, 04 Aug 2022 14:36:00 +0000

In this post we gonna learn how to access to api-created cookie or session data from JavaScript side.

What's inside of Gofiber side (Go)

Firstly, to access cookie or session data, we have to configure Gofiber app.

app := fiber.New()

app.Use(cors.New(cors.Config{
    AllowOrigins:     "http://localhost:3000",
    AllowCredentials: true,
}))

In above, we activated CORS, and defined a server address for JavaScript-used website.

Warning: Using * char for AllowOrigins property is invalid. Because you might write a specific address for healthy solution.

Then AllowCredentials property has to be true value.

According to these configs, We can request to this API from http://localhost:3000 address.

What's inside of JavaScript Side

For case in above, we can use fetch api to request to Gofiber app.

Get Gofiber app's address https://localhost:3001

fetch("http://localhost:3000/example", {
        credentials: 'include'
    })

According to example in above, as an option, we can set credentials property to 'include'. Thus we can add cookies or session datas coming from api to browser.

Creating Flipable Card Using HTML/CSS/JS

Kaan Kuscu — Mon, 25 Apr 2022 23:02:30 +0000

You can create flipable card easily by tracking these steps.

HTML file:

<div class="wordCard">
    <div class="cardFace frontFace">
        <span>front</span>
    </div>
    <div class="cardFace backFace">
        <span>back</span>
    </div>
</div>

CSS file:

.wordCard {
    width: 200px;
    height: 300px;
    position: relative;
    perspective: 1000px;
    cursor: pointer;
}

.cardFace {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    color: white;
    width: 100%;
    height: 100%;
    border-radius: 10px;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transition: transform .5s linear;
    transform-style: preserve-3d;
}

.backFace {
    background-color: blue;
    transform: rotateY(180deg);
}

.frontFace {
    background-color: green;
    transform: rotateY(0deg);
}

.flipped .backFace {
    transform: rotateY(360deg);
}

.flipped .frontFace {
    transform: rotateY(180deg);
}

We have two type faces. Normal and flipped faces.

Our important property is backface-visibilty: hidden;. This property helps us to hide back face of element.

Other important property is transform-style: preserve-3d;. This property gives 3D rotate effect to element when it is rotating.

And JavaScript file:

var card = document.querySelector('.wordCard');
card.addEventListener('click', () => {
    card.classList.toggle('flipped');
});

In above, we set click event to toggle .wordCard class. In this way, we could animate this card with transition duration.

Creating Swipable Item using Vanilla JS/HTML/CSS

Kaan Kuscu — Sat, 23 Apr 2022 22:41:12 +0000

These processes are valid for only mobile. So, touchscreen..

First of all, Let' see the final version.

In this topic we are going to only inspect JS side.
This is our final style.css file. First we can create this file.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    background-color: #ddd;
    color: #0d0d0d;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.swipable {
    width: 50%;
    padding: 20px 15px;
    border-radius: 10px;
    background-color: coral;
    color: white;
    box-shadow: 5px 0px 10px rgba(0, 0, 0, 0.8);
    user-select: none;
    margin-top: 20px;
    overflow: hidden;
}

.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: height .5s;
    overflow: hidden;
    padding-bottom: 20px;
}

And it's our index.html file.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Swipable Demo</title>
</head>

<body>

    <div class="container">
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
        <div class="swipable">This is a swipable item.</div>
    </div>

    <script src="app.js"></script>
</body>

</html>

These are our Vanilla JS processes.

Before, we can select our .swipable classes on js.

let treshold = window.innerWidth / 4
document.querySelectorAll(".swipable").forEach((swipableItem, index) => {
    //TODO :)
});

In top of our code, we have define treshold variable to setting up swipe treshold.

In this example, our swipable items going to be swipable on only X axis.

We have 3 basis variables for this.

document.querySelectorAll(".swipable").forEach((swipableItem, index) => {
    let touchstartX = 0
    let touchendX = 0
    let diff = 0;
});

diff variable is gonna be result of our drag distance.

Other variables are basically start point and end point of our touches.

swipableItem.addEventListener('touchstart', e => {
        touchstartX = e.changedTouches[0].screenX
        swipableItem.style.transition = "all 0s"
    })

We are listened touchstart event to handling touch event. In this event, we can catch first touch to setting uptouchstartX variable. After then, we are setted up transition duration to 0 second to tracking our touch.

This is our touchend event.

swipableItem.addEventListener('touchmove', e => {
        diff = e.touches[0].screenX - touchstartX;
        swipableItem.style.transform = `translateX(${diff}px)`;
})

In above, we have listened touchmove event. In this event, we have metered distance of between our touchstart and current touch move. And we have assign up this result to diff variable. Thus, so we can adjust the position of our item on the screen by dragging it, only x axis.

This is final of our touch event in bellow.

swipableItem.addEventListener('touchend', e => {
    touchendX = e.changedTouches[0].screenX
    swipableItem.style.transition = "all .5s"

    handleGesture(index)
})

In above, we have set up last position of our finger to touchendX variable.

And set up animation duration to moving to old position slowly, if it's not swiped enough.

handleGesture function is our final function. This function will decide the swipe operation.

And ...

function handleGesture(index) {
    let swipePath = "";
    if (touchendX < touchstartX) swipePath = "left";
    if (touchendX > touchstartX) swipePath = "right";

    if ((diff > treshold) || (diff < -treshold)) {
        console.log(`Item ${index}: Swiped ${swipePath}`)
        swipableItem.style.transition = "all .3s"
        if (swipePath == "left") {
            swipableItem.style.transform = `translateX(-${window.innerWidth}px)`
        } else {
            swipableItem.style.transform = `translateX(${window.innerWidth}px)`
        }
        setInterval(() => {
            swipableItem.style.height = "0px";
            swipableItem.style.padding = "0px";
            swipableItem.style.margin = "0px";
            setInterval(() => {
                swipableItem.remove();
            }, 500);
        }, 500)
    } else {
        swipableItem.style.transform = `translateX(0px)`
    }
}

This is final version.

And GitHub Repo

ksckaan1 / dom-swipable-item

this is for my Dev.to topic

Setting up Custom Screen Resolution on Linux (Permanently)

Kaan Kuscu — Fri, 25 Mar 2022 23:17:15 +0000

Perhaps, you have searched how to setting custom screen resolution or just resolution on Linux before.

After a few process, you have set up screen resolution and saw it's not affected on next reboot.

Alright, how to setting up custom screen resolution on Linux? Permanently 🦾

Step.1

Learn name of your destination screen

In terminal,

xrandr

You can see output like bellow.

$ xrandr
Screen 0: minimum 320 x 200, current 2880 x 900, maximum 16384 x 16384
eDP-1 connected primary 1280x720+0+0 (normal left inverted right x axis y axis) 344mm x 194mm
   1366x768      59.99 +  39.94
   1280x720      60.00*   59.99    59.86    59.74
   1024x768      60.04    60.00
   960x720       60.00
   928x696       60.05
   896x672       60.01
   1024x576      59.95    59.96    59.90    59.82
   960x600       59.93    60.00
   960x540       59.96    59.99    59.63    59.82
   800x600       60.00    60.32    56.25
   840x525       60.01    59.88
   864x486       59.92    59.57
   700x525       59.98
   800x450       59.95    59.82
   640x512       60.02
   700x450       59.96    59.88
   640x480       60.00    59.94
   720x405       59.51    58.99
   684x384       59.88    59.85
   640x400       59.88    59.98
   640x360       59.86    59.83    59.84    59.32
   512x384       60.00
   512x288       60.00    59.92
   480x270       59.63    59.82
   400x300       60.32    56.34
   432x243       59.92    59.57
   320x240       60.05
   360x202       59.51    59.13
   320x180       59.84    59.32
HDMI-1 connected 1280+720+0 (normal left inverted right x axis y axis) 160mm x 90mm
   1920x1080     60.00 +  50.00    59.94
   1280x1024     60.02
   1280x720      60.00    59.94
   1024x768      60.00
   800x600       60.32
   720x480       60.00    59.94
   640x480       60.00    59.94
   720x400       70.08

My screen names are eDP-1 and HDMI-1.

In this example, i am gonna add custom screen resolution to HDMI-1 screen and set as permanently.

Step.2

Generate resolution parameter.

In terminal,

cvt 1600 900 60

With cvt command, we can create resolution modeline data.
Let me show you output.

$ cvt 1600 900 60
# 1600x900 59.95 Hz (CVT 1.44M9) hsync: 55.99 kHz; pclk: 118.25 MHz
Modeline "1600x900_60.00"  118.25  1600 1696 1856 2112  900 903 908 934 -hsync +vsync

To using on xrandr command, we have to copy output after Modeline word.

Like this,

"1600x900_60.00"  118.25  1600 1696 1856 2112  900 903 908 934 -hsync +vsync

Step.3

Now we can create new resolution mode.

In terminal,

$ xrandr --newmode <copied commands>

For example,

$ xrandr --newmode "1600x900_60.00"  118.25  1600 1696 1856 2112  900 903 908 934 -hsync +vsync

Step.4

Add resolution mode.

$ xrandr --addmode HDMI-1 "<width>x<height>_<Hz>"

Like this,

$ xrandr --addmode HDMI-1 "1600x900_60.00"

Almost done!

Step.5

Set custom resolution.

$ xrandr --output HDMI-1 --mode "1600x900_60.00"

Make permanent!

Add all xrandr mode commands to Xsetup file.

$ sudo nano /usr/share/sddm/scripts/Xsetup

Add bellow,

xrandr --newmode "1600x900_60.00"  118.25  1600 1696 1856 2112  900 903 908 934 -hsync +vsync

xrandr --addmode HDMI-1 "1600x900_60.00"

We are not add screen resolution command because system has stored resolution data of specific screen already.

Save file and see yourself!

Creating a website using Golang and Svelte.js together

Kaan Kuscu — Sun, 28 Nov 2021 21:15:11 +0000

Hello Gophers,

Sometimes, we need to use dynamic or single pages on our websites. For this, We can develop with reactive javascript programming tools (or frameworks) etc... in this case.

In this post, i'm gonna show you, how to use Svelte.js over our server, written in Go.

For this example, i preferred gofiber package as webserver package.

Lets start!

Creating Basic Gofiber Webserver

Project structure for Go side will be like bellow.

First, we have to init go.mod file.

As step two, we can create main.go file like this



package main

import (
    "github.com/gofiber/fiber/v2"
)

func main() {
    app := fiber.New()
    app.Static("/public","./public")
    app.Get("/", mainPage)
    app.Listen(":3000")
}

func mainPage(c *fiber.Ctx) error {
    //This function will be see different soon
    return c.SendString("Hellö")
}

We will change Go side, after created Svelte project.

Lets create simple Svelte project over this Go project.

Creating Basic Svelte Project

This way,

npx degit sveltejs/template . --force

We are using --force flag because this project folder is not empty.

After,

npm install

for installing all dependencies.

For testing, we can run npm run dev command.

If it's working, we can go to next step.

Thus, we have filled *public folder with some files.

For using Svelte with Go, we have to change some setting over Svelte side.

Step.1

rollup.config.js



...
svelte({
            compilerOptions: {
                // enable run-time checks when not in production
                dev: !production,
                customElement: true,
            }
        }),
...

We have to add customElement: true, line.
This addition helps splitting element from base project.
Thus, we can add component using element name like <App/> to our Go Templates.

Step.2

We can use Svelte side changes without restarting go app.
For this, we have to comment one line in rollup.config.js file.



// In dev mode, call `npm run start` once
        // the bundle has been generated
        //!production && serve()

!production && serve() have to be commented.

Step.3

Editing ./src/main.js file.

This file will look like bellow.



import App from './App.svelte';

We will use only line of import.
In this code, we imported a component as App but this name is not important. First of all, we will specify the component tag from the component's file.

Step.3

Editing ./src/App.svelte



<script>
    // It can be empty for this example
</script>
<svelte:options tag="my-app"/>
<p>My App</p>
<style>
    /* It can be empty :) */
</style>

With this processes, we can use App component as <my-app/> tag.

We are complete Svelte.js side. Now we can go Golang side.

First of all, we are going to define template render engine.

Edit main.go file like bellow.



package main

import (
    "github.com/gofiber/fiber/v2"
    "github.com/gofiber/template/html"
)

func main() {

    //template render engine
    engine := html.New("./templates", ".html")

    app := fiber.New(fiber.Config{
        Views: engine, //set as render engine
    })
    app.Static("/public", "./public")
    app.Get("/", mainPage)
    app.Listen(":3000")
}

Don't forget run go mod tidy command :)

Now We are going to change mainpage function like bellow.



func mainPage(c *fiber.Ctx) error {
    return c.Render("mainpage", nil)
}

and change ./templates/mainpage.html like bellow.



<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>My Page</title>
    <link rel='stylesheet' href='/public/global.css'>
    <script defer src='/public/build/bundle.js'></script>
</head>
<body>
    <my-app/>
</body>
</html>

We can call App component as my-app.

Last Step

Method.1

We can run app with these commands.
npm run build builds bundled js file.
go run . starts web server.

Method.2

We can run app with this command.
npm run dev & go run .

Thus, if we reload the web page, you can see changes without restarting go app. But it can be useful for only Svelte side changes.

Tips

We can run server easy way, creating makefile.
Create makefile in project directory.
This way,

run:
npm run dev & go run .
build:
npm run build

> and from terminal, run `make run` or `make build` commands.

You can check out my GitHub Repo.

  
    
      
      
        ksckaan1
       / 
        go-and-svelte-template
      
    
    
      Go and Svelte.js Starter Template
    
  
  
    

Created for my blog article
https://dev.to/ksckaan1/creating-a-website-using-golang-and-sveltejs-together-55g8
Before lauch, run npm install from command line.







  View on GitHub

Using Emoji on Linux

Kaan Kuscu — Mon, 20 Jan 2020 22:45:36 +0000

In this post, i will show you how to using emoji on your Linux system.

Step.1

Install emoji-keyboard:

Arch Linux based;
yay --noconfirm --noeditmenu -S --aur aur/emoji-keyboard-git
or pamac or octopi emoji-keyboard-git

Debian Based;
sudo add-apt-repository ppa:atareao/atareao
sudo apt update
sudo apt install emoji-keyboard

It's easy way to using emojis on Linux systems.

Now commands for this package

emoji-keyboard -h //for help
-k //toggle visibility for emoji window
-s //toggle search emoji window
-p // for preferences window
-q // for quit
-v // for version

Also you can add this command to shortcuts.

Eg.
emoji-keyboard -k to Meta + . (dot key)

Screenshot

Most Used 10 Terminal Aliases on Linux

Kaan Kuscu — Sun, 19 Jan 2020 17:19:45 +0000

In post, i will show you most used 10 Linux terminal aliases.

What is alias?

Alias is short way of writing commands on terminal.

How to add aliases?

This process is change according to your command shell.
If you are using bash (mostly used), you can add aliases to ~/.bashrc file.
If you are using Fish, you an add aliases yo ~/.config/fish/config.fish file.

1) alias c="clear" - write c for clear

2) alias r="source ~/.bash_profile" - write r for reload bash

3) alias del="rm -rf" - write del for recursive and force removing process.

4) alias untar="tar -zxvf" write untar filename for unpack tar file

5) For update commands
alias update="sudo apt-get update" for Debian based (Ubuntu...)
alias update="sudo pacman -Syyu" for Arch Linux based (Manjaro Linux...)
alias update="yum update" for Red Hat based (Fedora, CentOS, RHEL)

6) For installing an application
alias app="sudo apt-get install" for Debian based
alias pac="sudo pacman -S" for Arch Linux based.
alias app="dnf install" for RHEL based.

7) Git add and commit
gac "your message"
alias gac="git add . && git commit -a -m "

8) Install node packages
nis packagename
alias nis="npm install --save"

9) Make and enter inside a directory
mkcd foldername
alias mkcd='foo(){ mkdir -p "$1"; cd "$1" }; foo '

10) Control cd command behavior
alias cd.1="cd .."
alias cd.2="cd ../.."
alias cd.3="cd ../../.."
alias cd.4="cd ../../../.."
alias cd.5="cd ../../../../.."
alias cd.6="cd ../../../../../.."

Creating a Template on KDE Plasma

Kaan Kuscu — Sun, 19 Jan 2020 13:43:45 +0000

In too many forums, I saw KDE Plasma users don't know how to create a template file for right-click context menu.

In post, I will show you, how to create template file for KDE Plasma.

Maybe you saw template folder in your home directory. But it's invalid to plasma. Ofcourse this is not mean you can't create template file.

You can create template file in this way.

Step.1

Navigate to /usr/share/templates/ and create .source directory into this directory.

Step.2

Create a main.go file. It can be empty.

Step.3

Go back to /usr/share/templates/ and create gofile.desktop.

Step.4

Write this code (on the below).

[Desktop Entry]
Name=Go Main File...
Comment=New Go Main File:
Type=Link
URL=.source/main.go
Icon=text-x-go

Now you can use this template 😄

DEV Community: Kaan Kuscu

Five Methods for Directly Assigning Primitive Values Received with a Pointer in Go

1. By Creating Helper Variable

2. By Creating Helper Function

3. By Creating Helper Function With Generics

4. By Using Slice

5. By Using One-liner Anon Function

Configuring Gofiber API to access session or cookies from JavaScript Side

What's inside of Gofiber side (Go)

What's inside of JavaScript Side

Creating Flipable Card Using HTML/CSS/JS

Creating Swipable Item using Vanilla JS/HTML/CSS

These are our Vanilla JS processes.

ksckaan1 / dom-swipable-item

this is for my Dev.to topic

Setting up Custom Screen Resolution on Linux (Permanently)

Step.1

Step.2

Step.3

Step.4

Step.5

Make permanent!

Creating a website using Golang and Svelte.js together

Creating Basic Gofiber Webserver

Creating Basic Svelte Project

Step.1

Step.2

Step.3

Step.3

Last Step

Method.1

Method.2

Tips

ksckaan1 / go-and-svelte-template

Go and Svelte.js Starter Template

Using Emoji on Linux

Step.1

Screenshot

Most Used 10 Terminal Aliases on Linux

What is alias?

How to add aliases?

Creating a Template on KDE Plasma

Step.1

Step.2

Step.3

Step.4