## Introduction

<CloudinaryImage
 src='https://res.cloudinary.com/dr1sm5gnj/image/upload/v1662131616/igutech/dim-hou-BjD3KhnTIkg-unsplash_zoagnr.jpg'
 text='Content not available yet'
 alt='Content not available yet'
/>

<GithubCardRepository>basskibo/blog_tech_dev</GithubCardRepository>

Personal Blog and Porfolio website

## Introduction

<CloudinaryImage
 src='https://res.cloudinary.com/dr1sm5gnj/image/upload/v1662131616/igutech/dim-hou-BjD3KhnTIkg-unsplash_zoagnr.jpg'
 text='Content not available yet'
 alt='Content not available yet'
/>
Nostrud exercitation irure aute excepteur aliqua. Proident nisi elit reprehenderit cillum ea commodo incididunt laboris nisi sit consequat. Aliquip minim cillum voluptate amet excepteur culpa veniam duis do laborum mollit.
Eiusmod anim reprehenderit duis minim ipsum magna tempor laborum ullamco duis Lorem officia in. Voluptate officia irure anim eiusmod aliqua anim tempor laborum ut enim laborum. Est culpa quis proident irure velit culpa esse Lorem minim. Magna nostrud incididunt veniam magna minim est excepteur magna. Id ad ut nostrud commodo duis aute commodo.
Nostrud exercitation irure aute excepteur aliqua. Proident nisi elit reprehenderit cillum ea commodo incididunt laboris nisi sit consequat. Aliquip minim cillum voluptate amet excepteur culpa veniam duis do laborum mollit.
Eiusmod anim reprehenderit duis minim ipsum magna tempor laborum ullamco duis Lorem officia in. Voluptate officia irure anim eiusmod aliqua anim tempor laborum ut enim laborum. Est culpa quis proident irure velit culpa esse Lorem minim. Magna nostrud incididunt veniam magna minim est excepteur magna. Id ad ut nostrud commodo duis aute commodo.
Nostrud exercitation irure aute excepteur aliqua. Proident nisi elit reprehenderit cillum ea commodo incididunt laboris nisi sit consequat. Aliquip minim cillum voluptate amet excepteur culpa veniam duis do laborum mollit.
Eiusmod anim reprehenderit duis minim ipsum magna tempor laborum ullamco duis Lorem officia in. Voluptate officia irure anim eiusmod aliqua anim tempor laborum ut enim laborum. Est culpa quis proident irure velit culpa esse Lorem minim. Magna nostrud incididunt veniam magna minim est excepteur magna. Id ad ut nostrud commodo duis aute commodo.
Eu ex est irure nisi veniam occaecat est ullamco aliqua cillum laborum enim magna id. Irure amet tempor aliqua eu non eiusmod laboris minim occaecat excepteur eiusmod excepteur eiusmod ex. Qui nulla dolor anim duis duis sunt officia minim pariatur ullamco cillum cillum. Esse eu anim velit ut laborum. Eu consequat labore reprehenderit minim cillum anim laboris elit deserunt voluptate ipsum adipisicing do aliqua. Duis eu aliqua dolore ut nisi proident. Anim dolore sunt enim ullamco fugiat labore laboris elit fugiat anim aliqua.
<GithubCardRepository>basskibo/crypto_scrapper</GithubCardRepository>

Crypto price and news scrapper

## Introduction

<CloudinaryImage src='https://res.cloudinary.com/dr1sm5gnj/image/upload/v1666844996/igutech/post_data/Screenshot_2022-10-27_062355_la4aej.png' alt='npm module example' text='npm module example'/>

When you are creating your personal website or blog, it is great way to show off your Github profile in a way so other can see what you do and what can you do. If you are writing about some project, for example as I am doing right now, easy solution for you and your reader
is to have some graphical showecase for project which is the link to the repository and code at the same time.
Github user repository component card is my first <Adjusted>npm module</Adjusted> I made and published is bacically React component used for generating card for user's Github profile or repository.

## About module

As you probably know npm is a package manager for the JavaScript programming language maintained by npm, Inc. npm is the default package manager for the JavaScript runtime environment Node.js.
It is pretty easy to use, so if you want to install this npm module it is neccassarry to have npm installed in your system and run command

## NPM module and repository

I will not go through detailed explanation here about code, you can read all out or even try it at <Link href="https://www.npmjs.com/package/github-user-repo-card"> npm repository </Link>
As well, you can check bellow, this card is made with <Adjusted>github-user-repo-card</Adjusted>.


### Installation

In order to install the newest version of <Adjusted>github-user-repo-card</Adjusted> in your project your standard npm command for installing module.

```shell
npm i github-user-repo-card
```



### Contribution and Issues

If you want to contribute to the project wheather it would be by reporting an issue in the <Link href="https://github.com/basskibo/github-user-repo-card/issues"> github issues </Link> or you would like
to make changes to the code, feel free to open pull request or fork the project. My goal is to make it better and usefull to the masses, so if you have some feature which would suits to you, I will repeat
again, dont mind opening issue/disscusion, make changes in the code or you can contact me as well. 

<GithubCardRepository>basskibo/github-user-repo-card</GithubCardRepository>

Github profile and repository card

## Introduction

Four common algorithms with solutions written in Typescript. This is my starting point working with TypeScript so this project is nothing special. Idea was to write solutions
for the algorithm problems, which will be run through commander, when the application is started commander prompt 4 choices. When user chooses one from the list it get executed with the execution time.
I hope I will add more in near future but for now it was just a good excercise.

## Fibonnaci numbers

This is well known algorithm if not the best known because everybody was doing it at least once. <Link href="https://en.wikipedia.org/wiki/Fibonacci_number">Fibonnaci numbers</Link> or sequence is a 
sequence of numbers that is calculated by adding values of two preceding numbers, 
also known as golden ratio which can be found in nature. <NewLine/>
We count the sequence starting with the index <Adjusted>n = 0</Adjusted> which has value of <Adjusted>0</Adjusted>. Next in sequence is <Adjusted>n = 1</Adjusted> which has the value of <Adjusted>1</Adjusted>.
Next in sequence is <Adjusted>n = 2</Adjusted> with value <Adjusted>1</Adjusted>. If you ask why , it is simple we add values of previous two and that is <Adjusted>0 + 1</Adjusted>, to be easier for you to understand
here is the formula. 

Formula for calculating Fibonnaci number is : 
```
F(n) = F(n-2) + F(n-1)
```

So if we want to calculate Fibonacci number for 3 result will be <Adjusted>F(1) + F(2) = 1 + 1 = 2</Adjusted> as we got already Fibonacci for 1 and 2 which is 1 and 1.

### Fibonnaci Solution

My solution is:

```javascript
let storedFibNums: any = {};
export const calculateFibonacci = (n: number): number => {
 if (n <= 1) return n;
 if (storedFibNums[n]) {
 return storedFibNums[n]
 }
 storedFibNums[n] = calculateFibonacci(n - 1) + calculateFibonacci(n - 2)
 return storedFibNums[n];
}
```


## Calculate century

This is really simple one, if you want it to be simple. The point of the algorithm is that you are provided year and you have to return in which century it belongs.
For me easiest solution was to divide year by 100 and then use <Adjusted>Math.ceil</Adjusted> to get century.
<Link href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/ceil">Math.ceil</Link> is great for this solution because it will round number to greater than or equal to a given number.

### Century Solution
Solution is pretty simple, it took only 2 lines of code. 

```javascript
export const century = (year: number) => {
 const cent = year / 100;
 return Math.ceil(cent)
}
```


## Palindrome
What is Palindrome?

<QouteComponent>a word, phrase, or sequence that reads the same backwards as forwards, e.g. madam or nurses run.</QouteComponent>
So basically you are given a word and you need to check wheather it is palindrome.
### Palindrome Solution
Solution for this one is also very trivial, you just need to loop through the word from the behind and check if it match with the given word.

```javascript
export const isPalindrom = (inputString: string): boolean => {
 let palindrom = "";
 for (let i = inputString.length - 1; i >= 0; i--) {
 palindrom += inputString[i];
 }
 if (palindrom === inputString) {
 return true
 }
 return false;
}
```

## First duplicate
You are given array of numbers and you have to return first number that is duplicate. Array provided can be of size <Adjusted>n</Adjusted> so this means that we can have array with million of elements.
### First duplicate Solution
When we measure performance as well, in the million sized array, <Adjusted>for</Adjusted> loop can be an issue. <Adjusted>While</Adjusted> can be as well even though it is faster than for loop. 
Best solution I found is to create <Adjusted>Set</Adjusted> and loop over array of numbers, check if we have it in Set if not add it. So we will use <Adjusted>Set.has()</Adjusted> instead of having dual loop and if we have it in set 
we return it.

```javascript
export const removeFirstDuplicate = (a: number[]) => {
 const x = new Set<Number>()
 for (const num of a) {
 if (x.has(num)) {
 return num
 } else {
 x.add(num)
 }
 }
 return -1
}
```

Algorithms are great way for improving your technical skills and the way of thinking, so it is great excercise and way of learning. So I strongly suggest to checkout if you dont already know for 
this great platforms where you can solve algorithm problems, my personal favorites are <Link href="https://leetcode.com/">Leetcode</Link> and <Link href="https://codesignal.com/">Code Signal</Link>



<GithubCardRepository>basskibo/js-algorithms-ts</GithubCardRepository>

JavaScript algorithms TS

## Introduction

<CloudinaryImage
 src='https://res.cloudinary.com/dr1sm5gnj/image/upload/v1662131616/igutech/dim-hou-BjD3KhnTIkg-unsplash_zoagnr.jpg'
 text='Content not available yet'
 alt='Content not available yet'
/>

<GithubCardRepository>basskibo/nestjs-jwt-auth-boilerplate</GithubCardRepository>

NestJS auth boilerplate with JWT

## What it does

A small Python scanner for the network you are already on. It finds devices, then prints a readable row for each one: IP, hostname, MAC address, vendor, a guessed device type, and open services.

Run it with the wrapper so the virtualenv is picked up for you:

```bash
./scan
```

Pass a subnet when you do not want the default route, skip port checks when you only need who is online, or print JSON when another script should read the result:

```bash
./scan --network 192.168.1.0/24
./scan --no-ports
./scan --json
```

By default it walks the whole subnet. It tries `arp-scan` first, then falls back to ping. The local ARP table is optional, because that table only contains hosts this machine has already talked to.

## Repository

<GithubCardRepository>basskibo/network-arp-scanner</GithubCardRepository>

Network ARP scanner

# Exploring the Enchanting Jungle with Parallax Magic

In the realm of web development, there's a captivating world of creativity awaiting us. Recently, I delved into the mesmerizing realm of parallax scrolling, and the result is a delightful journey through a virtual jungle.
<CloudinaryImage src="https://res.cloudinary.com/dr1sm5gnj/image/upload/v1702475295/igutech/blogs/resources/parallax_dulfsm.png" text="Parallax jungle" alt="Parallax jungle example" />

## Unveiling the Project

As you navigate through this web experience, you'll notice a subtle yet enchanting parallax effect that brings the jungle to life. The layers of foliage, trees, and wildlife seamlessly move at different speeds, creating a sense of depth and immersion.

## Behind the Scenes

### Technology Stack

The backbone of this project lies in the power of JavaScript, specifically leveraging Next.js, React, and Node.js. These technologies work in harmony to orchestrate the dynamic parallax effect, providing users with a smooth and engaging browsing experience.

### Implementation Details

The parallax effect is achieved by strategically positioning layers of jungle elements and adjusting their scroll speeds. React's capabilities, combined with Next.js for seamless page transitions and Node.js for server-side logic, make this project not only visually appealing but also performant.

## How to Experience it Yourself

If you're curious to embark on this virtual jungle adventure, simply [visit the live demo here](link-to-your-demo). Feel free to explore the depths of the jungle by scrolling through the pages.

Here is demo example video: 
<ReactPlayer url="https://youtu.be/m-BQT3RAll0" alt="Parallax jungle example video"/>


## Conclusion

Building this parallax project was not just a technical endeavor; it was a journey into the realm of creativity and user experience. The synergy of Next.js, React, and Node.js allowed me to bring the jungle to the digital landscape, offering users a unique and immersive web encounter.

So, are you ready to step into the jungle? Dive into the demo and let the parallax magic unfold before your eyes!


<GithubCardRepository>basskibo/parallax-jungle</GithubCardRepository>

Parallax Jungle Website

## Introduction

Nostrud exercitation irure aute excepteur aliqua. Proident nisi elit reprehenderit cillum ea commodo incididunt laboris nisi sit consequat. Aliquip minim cillum voluptate amet excepteur culpa veniam duis do laborum mollit.
Eiusmod anim reprehenderit duis minim ipsum magna tempor laborum ullamco duis Lorem officia in. Voluptate officia irure anim eiusmod aliqua anim tempor laborum ut enim laborum. Est culpa quis proident irure velit culpa esse Lorem minim. Magna nostrud incididunt veniam magna minim est excepteur magna. Id ad ut nostrud commodo duis aute commodo.
Nostrud exercitation irure aute excepteur aliqua. Proident nisi elit reprehenderit cillum ea commodo incididunt laboris nisi sit consequat. Aliquip minim cillum voluptate amet excepteur culpa veniam duis do laborum mollit.
Eiusmod anim reprehenderit duis minim ipsum magna tempor laborum ullamco duis Lorem officia in. Voluptate officia irure anim eiusmod aliqua anim tempor laborum ut enim laborum. Est culpa quis proident irure velit culpa esse Lorem minim. Magna nostrud incididunt veniam magna minim est excepteur magna. Id ad ut nostrud commodo duis aute commodo.
Nostrud exercitation irure aute excepteur aliqua. Proident nisi elit reprehenderit cillum ea commodo incididunt laboris nisi sit consequat. Aliquip minim cillum voluptate amet excepteur culpa veniam duis do laborum mollit.
Eiusmod anim reprehenderit duis minim ipsum magna tempor laborum ullamco duis Lorem officia in. Voluptate officia irure anim eiusmod aliqua anim tempor laborum ut enim laborum. Est culpa quis proident irure velit culpa esse Lorem minim. Magna nostrud incididunt veniam magna minim est excepteur magna. Id ad ut nostrud commodo duis aute commodo.
Eu ex est irure nisi veniam occaecat est ullamco aliqua cillum laborum enim magna id. Irure amet tempor aliqua eu non eiusmod laboris minim occaecat excepteur eiusmod excepteur eiusmod ex. Qui nulla dolor anim duis duis sunt officia minim pariatur ullamco cillum cillum. Esse eu anim velit ut laborum. Eu consequat labore reprehenderit minim cillum anim laboris elit deserunt voluptate ipsum adipisicing do aliqua. Duis eu aliqua dolore ut nisi proident. Anim dolore sunt enim ullamco fugiat labore laboris elit fugiat anim aliqua.
<CloudinaryImage
 src='https://res.cloudinary.com/dr1sm5gnj/image/upload/v1662131616/igutech/dim-hou-BjD3KhnTIkg-unsplash_zoagnr.jpg'
 text='Content not available yet'
 alt='Content not available yet'
/>



<GithubCardRepository>basskibo/bojan.jagetic</GithubCardRepository>

Plain JS/HTML/CSS single page website

## Introduction
In this post, we'll explore a code snippet that demonstrates how to create a <Link href="https://www.spotify.com/">Spotify</Link> API wrapper using Next.js and the popular HTTP client library, <Link href="https://axios-http.com/docs/intro">Axios</Link>.
This code we will write, will allows you to fetch information about the currently playing track on your Spotify account and retrieve details such as the song title, artist, album, album cover image URL, and the Spotify song URL.
Its up to you to show whatever you like, this is my example which I am currently using on my <Link href="https://jageticbojan.com">personal webiste</Link> so feel free to be creative as much as you like.

## Idea behind project

Nothing special to be honest, as someone who cannot code or even a little bit of coding, without listening to music (mostly spotify), I wanted to show which music I am currently listening on Spotify and who knows, maybe some uknown visitor likes the song so at least I can do in this case is recommend some good music :)
Idea is to fetch the currently playing track on Spotify and to update it acordingly to the song that is currently playing.
This card can be embeded anywhere in your website or application and it will update the song that is currently playing without any manual effort.
At first I wanted to use it on my personal webisite, but then I find it usefull on some other projects so I decided to make it a <Link href="https://www.npmjs.com/package/spotify-now-playing-card">npm package</Link> and make my life easier.
<EmbeddedLink url="https://www.npmjs.com/package/spotify-now-playing-card" />

## Code Explanation
The code begins with the requiring neccessarry modules for this project, querystring and axios, are imported. <Link href="https://www.npmjs.com/package/querystring">querystring</Link> is used to stringify the request parameters (you dont have to use it, I already had it in project so find a good use of it but its not necessarry), while <Link href="https://axios-http.com/docs/intro">axios</Link> is used to make HTTP requests to the Spotify API.
The following code retrieves the required environment variables, which are named SPOTIFY_CLIENT_ID, SPOTIFY_CLIENT_SECRET, and SPOTIFY_REFRESH_TOKEN, using destructuring assignment from the process.env object. These variables store sensitive information and should be kept secure so thats why it is strongly recommended to use environment variable. Be aware that you have to get your tokens from spotify developer portal.


The __token__ variable is then created by encoding the client_id and client_secret using Base64 encoding. It will be used for authentication as a bearer token when we want to request an __access token__ from Spotify.


Two constants, NOW_PLAYING_ENDPOINT and TOKEN_ENDPOINT, store the Spotify API endpoints for retrieving currently playing track information and obtaining access tokens, respectively.

```js
import querystring from 'querystring'
import axios from 'axios'

const {
 SPOTIFY_CLIENT_ID: client_id,
 SPOTIFY_CLIENT_SECRET: client_secret,
 SPOTIFY_REFRESH_TOKEN: refresh_token
} = process.env

const token = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
const NOW_PLAYING_ENDPOINT = 'https://api.spotify.com/v1/me/player/currently-playing'
const TOKEN_ENDPOINT = 'https://accounts.spotify.com/api/token'

```



The __getAccessToken__ function, as already said, will be used for fetching access token from Spotify, it sends a POST request to the TOKEN_ENDPOINT <Adjusted>https://accounts.spotify.com/api/token</Adjusted> with the necessary parameters, including the grant_type set to __refresh_token__ and the refresh_token obtained from the environment variables. The request includes the Authorization header with the encoded client_id and client_secret. The response data, which contains the access token, is returned.

```js
const getAccessToken = async () => {
 const response = await axios.post(
 TOKEN_ENDPOINT,
 querystring.stringify({
 grant_type: 'refresh_token',
 refresh_token
 }),
 {
 headers: {
 Authorization: `Basic ${basic}`,
 'Content-Type': 'application/x-www-form-urlencoded'
 }
 }
 )

 return response.data
}
```

Lets move on to the __getNowPlaying__ function is another asynchronous function that retrieves the currently playing track information from the NOW_PLAYING_ENDPOINT API <Adjusted>https://api.spotify.com/v1/me/player/currently-playing</Adjusted>. It first calls getAccessToken to obtain the access token, then sends a GET request to the __NOW_PLAYING_ENDPOINT__ with the access token included in the Authorization header. 

```js
export const getNowPlaying = async () => {
 const { access_token } = await getAccessToken()
 return axios.get(NOW_PLAYING_ENDPOINT, {
 headers: {
 Authorization: `Bearer ${access_token}`
 }
 })
}
```

Finally, we are coming to the __callSpotifyApi__ function which will be exported as a default and will be called. It calls __getNowPlaying__ to get the currently playing track information. If the response status is __204__ (no content) or an error occurs, it will send a JSON response indicating that nothing is currently playing so you should show something else. Otherwise, if there is some song playing, it extracts relevant data from the response and constructs a JSON object containing details about the currently playing track. 

```js

const spotifyApi = async (_, res) => {
 const response = await getNowPlaying()
 if (
 response.status === 204 || response.status > 400 || (response.data && response.data.currently_playing_type !== 'track')
 ) {
 return res.status(200).json({ isPlaying: false })
 }

 const data = {
 isPlaying: response.data.is_playing,
 title: response.data.item.name,
 album: response.data.item.album.name,
 artist: response.data.item.album.artists.map((artist) => artist.name).join(', '),
 albumImageUrl: response.data.item.album.images[0].url,
 songUrl: response.data.item.external_urls.spotify
 }

 res.status(200).json(data)
}

export default spotifyApi

```

So finally, here is __spotify.js__ file, completed.

```js
/* eslint-disable camelcase */
// /pages/api/spotify.js
import querystring from 'querystring'
import axios from 'axios'

const {
 SPOTIFY_CLIENT_ID: client_id,
 SPOTIFY_CLIENT_SECRET: client_secret,
 SPOTIFY_REFRESH_TOKEN: refresh_token
} = process.env

const basic = Buffer.from(`${client_id}:${client_secret}`).toString('base64')
const NOW_PLAYING_ENDPOINT = 'https://api.spotify.com/v1/me/player/currently-playing'
const TOKEN_ENDPOINT = 'https://accounts.spotify.com/api/token'

const getAccessToken = async () => {
 const response = await axios.post(
 TOKEN_ENDPOINT,
 querystring.stringify({
 grant_type: 'refresh_token',
 refresh_token
 }),
 {
 headers: {
 Authorization: `Basic ${basic}`,
 'Content-Type': 'application/x-www-form-urlencoded'
 }
 }
 )

 return response.data
}

export const getNowPlaying = async () => {
 const { access_token } = await getAccessToken()
 return axios.get(NOW_PLAYING_ENDPOINT, {
 headers: {
 Authorization: `Bearer ${access_token}`
 }
 })
}

const spotifyApi = async (_, res) => {
 const response = await getNowPlaying()
 if (
 response.status === 204 || response.status > 400 || (response.data && response.data.currently_playing_type !== 'track')
 ) {
 return res.status(200).json({ isPlaying: false })
 }

 const data = {
 isPlaying: response.data.is_playing,
 title: response.data.item.name,
 album: response.data.item.album.name,
 artist: response.data.item.album.artists.map((artist) => artist.name).join(', '),
 albumImageUrl: response.data.item.album.images[0].url,
 songUrl: response.data.item.external_urls.spotify
 }

 res.status(200).json(data)
}

export default spotifyApi
```

## Spotify card

So basically for Spotify card you can make whatever you like, so feel free to make it by your preferences. I have been using in this project Next.js with Tailwind and for calling Spotify API I used <Link href="https://swr.vercel.app/">SWR</Link> which is basically 'React Hook for Data Fetching', but if you want to find more about that topic you can check my other post <Link href="https://www.jageticbojan.com/post/swr"> What is SWR and How Can It Improve Your React Apps</Link>.
So here is how it is looking inside of my app when I am not listening anything:

<CloudinaryImage src="https://res.cloudinary.com/dr1sm5gnj/image/upload/v1685724812/igutech/post_data/Screenshot_from_2023-06-02_23-52-20_yltveo.png" alt="Spotify card not playing" text="Spotify card not playing" />

So here is how it is looking inside of my app when I am listening :

<CloudinaryImage src="https://res.cloudinary.com/dr1sm5gnj/image/upload/v1685725010/igutech/post_data/Screenshot_from_2023-06-02_23-56-13_agrotn.png" alt="Spotify card playing" text="Spotify card playing" />

<CloudinaryImage src="https://res.cloudinary.com/dr1sm5gnj/image/upload/v1685725083/igutech/post_data/Screenshot_from_2023-06-02_23-57-50_rj2i9c.png" alt="Spotify card playing zoomed" text="Spotify card playing zoomed" />

## Conclusion

In this blog post, we explored a code snippet that demonstrates how to create a Spotify API wrapper using Next.js and Axios, simple as that. The code allows you to fetch information about the currently playing track on Spotify and retrieve details such as the song title, artist, album, album cover image URL, and the Spotify song URL. You can use this code as a starting point to build more advanced Spotify-related functionality in your applications or you can get some more better idea. Feel free to modify and extend the code to suit your specific requirements this is just my type but you can make it however you wish. I hope I helped, if you have any question please let me know and Happy coding!

Spotify listening now card

Nodejs Express + MongoDB + Redis + React + Tailwind Typescript boilerplate 

## Introduction

After every new OS reinstallation you have to do the boring part and install everything from scratch. I have been in situation where I was installing
new Ubuntu environment multiple times per year, so I made myself easier and made a bash script which can do this for me.

## What this bash script do

Basically this script is used for installing applications and services, which I normally use, most of the applications and services are for Developers but it can be opted out if you do not 
want something to be installed. In the script there are blocks of installation commands divided by category, so first utilities and prerequired stuff will be installed.
For example if we have some project on github, which is needed to be downloaded like zsh and ohmyzsh, it is prerequired to install git first so if you want to change script have that in mind.

## Applications and services available
As mentioned above, there are different categories so it is easier to organize, in this current version of the script there are 5 categories.
For the some less know application and services I added link so you can read first before installation and check if you want to use it, I personally think that are great stuff but you dont need to use it if you dont want.

### Utility

<SmList>
 <li>curl </li>
 <li>Git </li>
 <li><Link href="https://terminator-gtk3.readthedocs.io/en/latest/">Terminator</Link> </li>
 <li>htop </li>
 <li>unzip </li>
 <li><Link href="https://www.zsh.org/">zsh</Link> </li>
 <li><Link href="https://ohmyz.sh/">OhMyZsh</Link> </li>
</SmList>

### GNome shell and tweaks
<SmList>
 <li>chrome-gnome-shell</li>
 <li>chrome-gnome-tweaks</li>
 <li><Link href="https://albertlauncher.github.io/">Albert</Link> </li>
 <li><Link href="https://github.com/vinceliuice/WhiteSur-gtk-theme">*BigSure OSX theme\**</Link> </li>
</SmList>


### Productivity & Social
<SmList>
 <li>Firefox</li>
 <li><Link href="https://www.taskade.com/spaces/4e4fLuGxvxa7pr1M">Taskade</Link> </li>
 <li><Link href="https://www.cacher.io/">Cacher</Link> </li>
 <li><Link href="https://telegram.org/">*Telegram\**</Link></li>
 <li><Link href="https://discord.com/">*Discord\**</Link></li>
 <li><Link href="https://www.skype.com/en/">*Skype\**</Link></li>
 <li><Link href="https://www.microsoft.com/en/microsoft-teams/log-in">*Microsoft Teams\**</Link></li>
 <li><Link href="https://slack.com/">*Slack\**</Link></li>
 <li><Link href="https://www.rocket.chat/">*Rocket Chat\**</Link></li>
 <li><Link href="https://konversation.kde.org/">*Konversation\**</Link></li>
 <li><Link href="https://www.flock.com/">*Flock Chat\**</Link></li>
</SmList>


### Development

<SmList>
 <li>NodeJS</li>
 <li>npm</li>
 <li>*MongoDB\**</li>
 <li><Link href="https://robomongo.org/">*Robo3T (Robo Mongo)\**</Link> </li>
 <li>*Redis\**</li>
 <li><Link href="https://resp.app/">*Redis Desktop Manager\**</Link> </li>
 <li><Link href="https://www.docker.com/">*Docker\**</Link></li>
 <li><Link href="https://code.visualstudio.com/">Visual Studio Code</Link> </li>
 <li><Link href="https://www.postman.com/">Postman</Link></li>
 <li>TypeScript</li>
 <li>npx</li>
 <li><Link href="https://albertlauncher.github.io/">Sublime Text</Link> </li>
 <li><Link href=" https://www.beekeeperstudio.io/">Beekeper Studio</Link> </li>
</SmList>

### Entertainment
<SmList>
 <li><Link href="https://www.spotify.com/">Spotify</Link></li>
 <li><Link href="https://snapcraft.io/install/orange-app/ubuntu">Orange-app - SoundCloud Client</Link></li>
 <li><Link href="https://www.musixmatch.com/">Musixmatch </Link> </li>
</SmList>

__All applications and services with <Adjusted>*</Adjusted> are optional and can be skipped__

## Script breakdown


As already mentioned, script is sorted by the category and dependency. We can split installation to three types: 
<LgList>
 <li> Straight-forward installation </li>
 <li> Optional installation </li>
 <li> Multi select installation </li>
</LgList>

### Straight-forward installation

Installation of applications and services are pretty straight-forward, most of the installations are from <Adjusted>snap</Adjusted>, some are from <Adjusted>apt</Adjusted> and the rest is from original build source.
It looks something like this:

```shell
sudo snap install curl
sudo apt-get install git -y
```

### Optional installation

In this type use is opted with the prompt to choose wheather to install or not specific application using classic linux options <Adjusted>y/N</Adjusted>

```bash
echo "Do you want to install MongoDB? [Y,n]"
read mongoInput
if [[ $mongoInput == "Y" || $mongoInput == "y" ]]; then
 echo "MongoDB will be installed with Mongo3T ..."
 # Install MongoDB
 echo "${RED}Starting MongoDB installation${NC}"
 wget -qO - https://www.mongodb.org/static/pgp/server-4.2.asc | sudo apt-key add -
 echo "deb [ arch=amd64,arm64 ] https://repo.mongodb.org/apt/ubuntu bionic/mongodb-org/4.2 multiverse" | sudo tee /etc/apt/sources.list.d/mongodb-org-4.2.list
 sudo apt-get update
 sudo apt-get install -y mongodb-org
 sudo snap install robo3t-snap
else
 echo "Skipping MongoDB installation..."
fi
```

### Multi-select installation

Multi-select installation present installation of multi or none applications from the list of proposed applications. This is used for communication and social apps due to everybody is using different app for every day communication or more ofter combination of many social apps so there is option to choose which you want to install.
```bash
names=(telegram-desktop discord skype teams slack rocketchat-desktop konversation flock-chat)
selected=()
PS3='Choose which communication application you want (e.g. 1 2 to install telegram and discord)? : '
select name in "${names[@]}" ; do
 for reply in $REPLY ; do
 selected+=(${names[reply - 1]})
 done
 [[ $selected ]] && break
done
echo Selected: "${selected[@]}"

for t in ${selected[@]}
do
 echo "Installing $t"
 sudo snap install $t
done
```


<GithubCardRepository>basskibo/ubuntu_starter_essentials</GithubCardRepository>

Ubuntu Focal Fossa (20.04) essential starter script

## Introduction

Upgrading Ubuntu OS has not been easier than this. I had need to upgrade multiple Ubuntu machines from 16.04 to 20.04 version.
As you probably know every second number is LTS (Latest stable version) so in order to jump to second LTS you need to install first 18.04 and afterwards
you can install 20.04. So I made this little bash script in order to make my life easier.

## What this bash script do

Basically this script just runs commands needed to upgrade the OS, you will still need to confirm/disaprove prompts that you will get while upgrading.

## Script breakdown

### Updating and upgrading packages

First block of commands are just for updating apt packages and upgrading dist.
It looks something like this:

```shell
sudo apt-get update
sudo apt-get upgrade -y

sudo apt-get dist-upgrade
```

After this block you should need to rebboot your machine, so I made simple prompt which asking you for reboot

```bash
echo -n "Do you want to reboot machine? (y/n) \n"
read answer
if [ "$answer" != "${answer#[Yy]}" ] ;then
 # Reboot machine
 sudo reboot
fi
```


 <Accent>
 {" "}
 NOTE you will only have to reboot machine in case packages were updated/upgraded
 if not you can just go with no{" "}
 </Accent>


### Running OS upgrade

After machine is rebooted, you can run this script once again, this time you will not need to reboot the machine again, so when prompted go with no

Next block of commands will run the actual upgrade of the Operating System and it looks like this

```bash

sudo do-release-upgrade -c
sudo do-release-upgrade
```

While installing you will get multiple prompts which you need to answer.
After everything is finished you will get prompt that says that reboot is required so go with yes

### Results output

So finally this bash script will just print your current release version

```bash
cat /etc/os-release | grep VERSION
lsb_release -a
```

<GithubCardRepository>basskibo/ubuntu_os_upgrade</GithubCardRepository>

Ubuntu OS upgrade script

## Introduction

After every new OS reinstallation you have to do the boring part and install everything from scratch. I have been in situation where I was installing
new Ubuntu environment multiple times per year, so I made myself easier and made a bash script which can do this for me.

## Simplified Deployment with Docker Compose:

Docker Compose allows you to define and run multi-container Docker applications with a single YAML file. With Umami, Docker Compose streamlines the process of setting up a self-hosted analytics solution by managing all the necessary components and dependencies.

## Efficient Resource Management:

By encapsulating Umami and its dependencies within Docker containers, Docker Compose ensures efficient resource utilization and isolation. Each container runs in its own isolated environment, making it easy to scale, update, and manage Umami without impacting other services or applications running on the host system.

## Consistent Development and Production Environments:

Docker Compose provides a consistent environment for developing, testing, and deploying Umami across different stages of the software development lifecycle. Developers can use the same Docker Compose configuration to set up Umami locally on their development machines, ensuring parity with the production environment.

## Easy Configuration and Orchestration:

With Docker Compose, you can define Umami's configuration, including environment variables, network settings, and volume mounts, in a simple YAML file. Docker Compose automatically orchestrates the deployment of Umami and its dependencies, handling tasks such as container initialization, networking, and storage management.

## Scalability and High Availability:

Docker Compose enables you to scale Umami horizontally by deploying multiple instances of the Umami container across multiple Docker hosts. You can also integrate Docker Compose with container orchestration platforms like Docker Swarm or Kubernetes for automated scaling and high availability.

## Compose file
Below you can check yaml file for docker compose.

```yml
version: '3'
services:
 umami:
 image: ghcr.io/umami-software/umami:postgresql-latest
 ports:
 - "3020:3000"
 environment:
 DATABASE_URL: postgresql://umami:umami@db:5432/umami
 DATABASE_TYPE: postgresql
 APP_SECRET: replace-me-with-a-random-string
 depends_on:
 db:
 condition: service_healthy
 restart: always
 db:
 image: postgres:15-alpine
 environment:
 POSTGRES_DB: umami
 POSTGRES_USER: umami
 POSTGRES_PASSWORD: umami
 ports:
 - "5436:5432"
 volumes:
 - umami-db-data:/var/lib/postgresql/data
 restart: always
 healthcheck:
 test: ["CMD-SHELL", "pg_isready -U $${POSTGRES_USER} -d $${POSTGRES_DB}"]
 interval: 5s
 timeout: 5s
 retries: 5
volumes:
 umami-db-data:
```
## Conclusion
In summary, Docker Compose simplifies the deployment and management of Umami as a self-hosted analytics solution, providing efficiency, consistency, and scalability for your analytics infrastructure. With Docker Compose, you can quickly get Umami up and running in your environment, empowering you to gain valuable insights into your website traffic while maintaining full control over your data.


<GithubCardRepository>basskibo/umami-dockerized</GithubCardRepository>