
# **What's git stash?**

<br/>

Git stash is one of features from Git Version Control, you can use this feature for saving your work temporally on your device without committing. Sometimes programmers need to switch tasks immediately even if the changes don’t ready to commit, and the sad truth is git can’t provide checkout to another branch or create a new branch without having previous changes when your current branch still has changed, so it’s the time you need to use git stash.

<br/>
<div align="middle">
    <img class="img-thumbnail radius" src="/article/whats-git-stash/image1.png" alt="Life Cycle Files" style="width: 95%;">
</div>
<br/>

Before you stash changes in your project, you need to know the life cycle of status files in git. So I will explain the meaning of life cycle status files, in git files have few statuses (untracked, unmodified, modified, staged) when you create a new file it will be stated untracked and after you complete the content then need to commit the file, you need to run command **`git add <your file>`**, it is called state staged. So staged is a condition before commit, then after all files are ready on staged you can commit all staged files. After the process before, every file will be stated unmodified and when you change it again the file will be stated as modified. And what after modified? Absolutely the life cycle will continue to repeat.

<br/>
<br/>

### **Stash Files**

Back to the stash file, when files have many statuses absolutely git stash also has many options to stash files. 
<div align="middle">
    <img class="img-thumbnail radius" src="/article/whats-git-stash/image2.png" alt="Option of Git Stash" style="width: 95%;">
</div>
<br/>

- **Stash Modified**
    
    The basic stash is only stashed files modified not including untracked and Ignored files, for do this you need to run the command **`git stash`** it will reset your changes and back your files to before you change.
    
- **Stash Untracked**
    
    Untracked files are not added to reset changes when you just run **`git stash`** you need to add an additional option to your command **`git stash -u`** or the more descriptive version you can use **`—include-untracked`**.
    
- **Stash Ignored**

    Sometimes files need to be ignored in our project to make it flexible and make changes just affect a device, not all devices to run a project. For stash ignored files, is also need the additional option to your command **`-a`** or **`—all`** and the command will be **`git stash -a`** . But you need to be aware of this action cause if you stash ignored files, the files will be deleted, cause git just detects the file, not the content if the file is listed on **`.gitignore`** and the life cycle above is not implemented in this file.
    

And I have some tips about stashing files, For your information you can add a message when you do stash files, for a sample **`git stash save “some descriptive text” -u`**, It will help you to find out the important stash from your list.

<br/>
<br/>

### **Apply Stash**

So after we stash files, how do we apply again the stash? First, we need to check the list of stash and pick the stash which you need to apply for your branch. 

1. **List of Stash**
    
    To check the list stash you can run the command **`git stash list`** it will show the list like the image below.
    <div align="middle">
        <img class="img-thumbnail radius" src="/article/whats-git-stash/image3.png" alt="List of Stash" style="width: 95%;">
    </div>
    <br/>
    
2. **Apply Stash**
    
    After you know which stash is needed to apply on a branch, you directly apply it with the command **`git stash pop stash@{0}`** this command will be applied and also remove it from your list. And if you want to apply stash without removing it from a list you can use the command **`git stash apply stash@{0}`**.
    

It’s not a mandatory thing but I think you need to know about checking the diff stash file, It can help you to show the all changes in your stash before you apply or remove it from your stash list. So for to do that just run the command **`git stash show stash@{0}`** and the changes will be like in the image below.

<div align="middle">
    <img class="img-thumbnail radius" src="/article/whats-git-stash/image4.png" alt="Stash Diff Files" style="width: 95%;">
</div>


# **How to merge or modify type on Typescript**

<br/>

[Typescript](https://www.typescriptlang.org), is it Javascript? No, it’s a different language but we can say it’s similar to javascript, the big difference is typescript static type and javascript is dynamic type. One of the reasons I love typescript is cause static type, In language static type you need to declare type on every variable and parameter Besides that, you also need value with the same type if you want re-assignment some variables and when you create some algorithm you must use appropriate type.

Cause we have behavior like that, now we can know or predict the input value and output value it will be useful cause we can reduce the bug when we get information like this. As a sample when you just started learning programming, you will meet errors caused by error type. Further, you will not meet the error type again, cause before you run the program your text editor will check the type and report when your type is wrong. 

So after I explain Typescript let’s enter the topic, sometimes when you use typescript you need to merge or modify your type. for the sample, I will use type object cause this type will be most often used. 

```tsx
type Overwrite<A, B> = Omit<A, keyof B> & B
```

So above I have some code types, inside here I have type [Omit](https://www.typescriptlang.org/docs/handbook/utility-types.html#omittype-keys) it’s utility type for removing a key from a type of object. Well let’s see the code, here we have [generic types](https://www.typescriptlang.org/docs/handbook/2/generics.html) `A` and `B` it’s for storing the type we need to modify. Generic type `A` is for a target type and `B` is for the second type which will be merged.

```tsx
type User = {
    id: number,
    name: string,
    email: string,
}

type ListUser = Overwrite<User, { id?: null, profile: number }>[]
```

Above is a sample for the usage of the type we build before, in here I create type `User` and type ListUser with use `Ovewrite` type to modify type `User`. To check the final type let's implement on variable.

```tsx
const user: ListUser = [
    {
        name: 'Firman',
        email: 'jusles363@gmail.com',
        profile: 11,
    },
    {
        name: 'Walter White',
        email: 'walterwhite@gmail.com',
        profile: 12,
    },
    {
        name: 'Rick Sanchez',
        email: 'ricksanchez@gmail.com',
        profile: 13,
    }
]
```

It’s a sample if I used type before, then look after I make the id of type object is nullable, I can write data user with no need to write id. So it’s how I modify the type object, you can keep this article, it will be very helpful.


# **Better way to handle multiple task on Flutter / Dart**

<br/>

[Concurrency](https://en.wikipedia.org/wiki/Concurrency_(computer_science)), in this article we will discuss about this topic, and it’s key to run multiple task in better way. Then what is concurrency, in computer science concurrency is a the abillity to dealing with lots or multiple things at once. Dart is able you to use concurrency, automaticlly you can also use on Flutter. By the way before you read all this article you must understanding about fundamental dart, future function. 

If we talk about concurrency, I have some reason why you must implement on your application:

1. Increase your speed execute task
2. Code is more clean
3. Code is more less
4. Less code is a less space used

Okay after you understanding about concurrency lets enter code section, I will code in one file, cause we will just need little code to try concurrency, for the task we will use API for the sample. And on the code you will meet 3 function with name concurrency, mediocre, once these function we will describe and comparing when we use concurrency and when not use it, then we still have 3 other function with first name getUsers these functions is have a role for the task.

<br/>

This the code what we talked about earlier, you can check it. And for make easier to explaining I will split the code.

```dart
import 'dart:convert';
import 'package:http/http.dart' as http;

Future<Map> getUsers1() async {
  http.Response res =
      await http.get(Uri.parse('https://reqres.in/api/users/?page=1?test=${DateTime.now().toIso8601String()}'));
  return jsonDecode(res.body);
}

Future<Map> getUsers2() async {
  http.Response res =
      await http.get(Uri.parse('https://reqres.in/api/users/?page=2?test=${DateTime.now().toIso8601String()}'));
  return jsonDecode(res.body);
}

Future<Map> getUsers3() async {
  http.Response res =
      await http.get(Uri.parse('https://reqres.in/api/users/?page=3?test=${DateTime.now().toIso8601String()}'));
  return jsonDecode(res.body);
}

Future concurrency() async {
  print('=== Concurrency ===');
  Stopwatch stopwatch = Stopwatch();
  stopwatch.start();

  await Future.wait<Map>([
    getUsers1(),
    getUsers2(),
    getUsers3(),
  ]);

  stopwatch.stop();
  print('\nDuration: ${stopwatch.elapsed.inMilliseconds}ms\n');
}

Future mediocre() async {
  print('=== Mediocre ===');
  Stopwatch stopwatch = Stopwatch();
  stopwatch.start();

  await getUsers1();
  await getUsers2();
  await getUsers3();

  stopwatch.stop();
  print('\nDuration: ${stopwatch.elapsed.inMilliseconds}ms\n');
}

Future once() async {
  print('=== Once ===');
  Stopwatch stopwatch = Stopwatch();
  stopwatch.start();

  await getUsers1();

  stopwatch.stop();
  print('\nDuration: ${stopwatch.elapsed.inMilliseconds}ms\n');
}

void main(List<String> args) async {
  await once();
  await mediocre();
  await concurrency();
}
```
<br/>

By the way if you want try the code you must installed dart, and make some file with name main.dart then put the code into the new file. After this just run the file like below on your terminal.

```bash
dart main.dart

```

<br/>
<br/>

### **Concurrency**

Function concurrency, this is a where I make multiple task to execute concurrency, you can look function **Future.wait**, this function have a List parameter this is place to put the task to execute, for the return all of task it will come on return **Future.wait**, the value return will wrapped with List and the list value is be in order of tasks.

```dart
Future concurrency() async {
  print('=== Concurrency ===');
  Stopwatch stopwatch = Stopwatch();
  stopwatch.start();

  await Future.wait<Map>([
    getUsers1(),
    getUsers2(),
    getUsers3(),
  ]);

  stopwatch.stop();
  print('\nDuration: ${stopwatch.elapsed.inMilliseconds}ms\n');
}

```

<br/>
<br/>

### **Mediocre**

Function mediocre, this is a usual method to execute multiple task in there I just call in sequence.

```dart
Future mediocre() async {
  print('=== Mediocre ===');
  Stopwatch stopwatch = Stopwatch();
  stopwatch.start();

  await getUsers1();
  await getUsers2();
  await getUsers3();

  stopwatch.stop();
  print('\nDuration: ${stopwatch.elapsed.inMilliseconds}ms\n');
}
```

<br/>
<br/>

### **Once**

Function once is I writing for comparing speed execution with other function

```dart
Future once() async {
  print('=== Once ===');
  Stopwatch stopwatch = Stopwatch();
  stopwatch.start();

  await getUsers1();

  stopwatch.stop();
  print('\nDuration: ${stopwatch.elapsed.inMilliseconds}ms\n');
}
```

<br/>
<br/>

### **Comparing speed execution**

After we try to execute all functions concurrency, mediocre and once, we got this. You can see on below we have some image to describe perform concurrency when measured by time. In function concurrency we run 3 task but time execute is not very different with function once which them run 1 task.

<div align="middle">
    <img class="img-thumbnail radius" src="/article/better-way-to-handle-multiple-task-on-flutter-dart/comparing.png" alt="Comparing Result Execute" style="width: 95%;">
</div>

<br/>

Learn concurrency is important if you aware with your application performance, you can see is not hard to implement on your application even your condition is on mid development cause the code so simple you just need to call **Future.wait** and put in the all task on parameter. In this case we use the API for the task but you can adapt it to your application needs.

# **CSS function min(), max(), and clamp() is incredible**

<br/>

CSS has many cool functions but for now, we will spotlight these three functions **min,** **max, and clamp.** With this, you can make your responsive website easy and so smooth, in this article I will show you how to use it and I will give you a usage sample.

Website in general for making responsive used a media query, but if you write all CSS for resized elements on a media query the code is too much, then from now on you can try using these functions for making your code less and simple.

<br/>
<br/>

## **Min Usage**

<div align="middle">
    <img class="img-thumbnail radius" src="/article/css-function-min-max-and-clamp-is-incredible/min.gif" alt="Sample Cool GitHub Profile" style="width: 95%;">
</div>
<br/>

Min function has a two-parameter, which one is dynamic number you can use dimensions (%, vw, vh, rem) and for the second parameter is a maximal biggest value, if you use on width the second parameter works like  **max-width**  and if you use on font size it will be maximal font size, on simply being can understand like that.

<br/>
<br/>

## **Max Usage**

<div align="middle">
    <img class="img-thumbnail radius" src="/article/css-function-min-max-and-clamp-is-incredible/max.gif" alt="Sample Cool GitHub Profile" style="width: 95%;">
</div>
<br/>

Max function, this function does not have the bigger difference, you can think this function is like Min function but it’s reverse version. If on Min function the second parameter works like max-width and for font size is be maximal size, but on Max function is reversed. The second parameter on Max function is be  **min-width**  on width and be minimum size on font size.

<br/>
<br/>

## **Clamp Usage**

<div align="middle">
    <img class="img-thumbnail radius" src="/article/css-function-min-max-and-clamp-is-incredible/clamp.gif" alt="Sample Cool GitHub Profile" style="width: 95%;">
</div>
<br/>

The clamp function is my favorite if you ask where the function to prefer use, but you not should do like me, you can use the two functions above according to the needs. And why clamp is my favorite cause in this function you can control minimum and maximal not just only one and if you use this function you not need to think where I should pick to control resize element. After you see the advantages let me explain on technical clamp, this function has a three parameter in first parameter is set for minimum, in second parameter is set for dynamic number, and for third parameter is set for maximum.

<br/>
<br/>

## **Browser Support**

<br/>

**Chrome**
- Desktop (79)
- Android (79)

**Edge**

- Desktop (79)

**Firefox**

- Desktop (75)
- Android (79)

**Opera**

- Desktop (66)
- Android (57)

**Safari**

- Desktop (11.1)
- Android (11.3)

# **How I Make my GitHub Profile Look Cool With Markdown**

<div align="middle">
    <img class="img-thumbnail radius" src="/article/how-i-make-my-github-profile-look-cool-with-markdown/image1.jpg" alt="Sample Cool GitHub Profile" style="width: 95%;">
</div>

<br>

Is it my first article on this site. I hope you can be helped with my article. And for the first time I want to write about Github profile because yesterday I 
try to change my GitHub profile and is it make my GitHub profile look so cool, and how make it so easy. For example, I will use my second GitHub account.

<br>
<br>

## **1. Create a repository with a name same as GitHub username**

<div align="middle">
    <img class="img-thumbnail radius" src="/article/how-i-make-my-github-profile-look-cool-with-markdown/image2.jpg" alt="Sample Cool GitHub Profile" style="width: 95%;">
</div>

<br>

Create your repository, but make sure the name repository same as username github, and don't forget check **Add a README** file. The readme on repository is the file what we setting for github profile, if all done click create the repository.

<br>
<br>

## **2. Edit README on your repository  as you like**

<div align="middle">
    <img class="img-thumbnail radius" src="/article/how-i-make-my-github-profile-look-cool-with-markdown/image3.jpg" alt="Sample Cool GitHub Profile" style="width: 95%;">jhyuyufyfuy
</div>

<br>

First time create a repository you will get this. Now you can start editing your readme, for creating a cool github profile you just need this file. README is file markdown, what is markdown ? Markdown is a lightweight markup language, from markdown can processed to html, so can I write html on markdown ? Yes you can, but markdown has their own method and format for writing. Back to editing markdown, you will see an example on your readme, try removing the comment and just leave the first sentence and list with emoticon. After that you can commit your changes, and go to your github profile.

<br>
<br>

## **3. Look at it! you have cool GitHub profile**

<div align="middle">
    <img class="img-thumbnail radius" src="/article/how-i-make-my-github-profile-look-cool-with-markdown/image4.jpg" alt="Sample Cool GitHub Profile" style="width: 95%;">
</div>

<br>

It's cool right ? Yes, first time using this feature I feel it to. But is not enough, your github profile is still too boring, you can add images, GIFs, or badges to describe yourself and make your github profile cool. If confused you can see my mine readme or if you are too lazy to make it, you can duplicate my mine.

<br>
<br>

### **README.md**

It is README.md I use
<br>
[Go to Repository](https://github.com/zeetec20/zeetec20)

<br>

```markdown
<div align="center">
  <img src="http://38.media.tumblr.com/d30fe069cc48e11eeb31ae08293a159e/tumblr_nbtdxg9d6n1szf0nzo1_250.gif" width="170" height="170">
</div>

<br>

## Helo, I'm [Firman Justisio Lestari!](https://firmanlestari.vercel.app/) 👋

- 🔭 I’m currently working on Pixel Dev Factory.
- 🌱 I’m focused on Mobile Development.
- 👨‍💻 I’m mostly use programming language <b>Dart</b> with framework <b>Flutter</b>
- 💬 Ask me about Flutter or any tech-related stuff.
- 📫 How to contact me: [contact me](https://firmanlestari.vercel.app/about)
- ⚡ Fun fact: I love coffee ☕

<br>

[![Linkedin: firmanlestari](https://img.shields.io/badge/-firmanlestari-blue?style=flat-square&logo=Linkedin&logoColor=white&link=https://www.linkedin.com/in/firmanlestari/)](https://www.linkedin.com/in/firmanlestari/)
[![GitHub zeetec20](https://img.shields.io/github/followers/zeetec20?label=follow&style=social)](https://github.com/zeetec20)
[![website](https://img.shields.io/badge/PortfolioWebsite-firmanlestari.vercel.app-2648ff?style=flat-square&logo=google-chrome)](https://firmanlestari.vercel.app/)

<p align="left"> <img src="https://komarev.com/ghpvc/?username=zeetec20&label=Views&color=blue&style=plastic" alt="zeetec20" /> </p>

<br>

**Languages and Tools:**  

<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/flutter/flutter.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/dart/dart.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/android/android.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/javascript/javascript.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/react/react.png"></code>
<code><img height="20" src="https://raw.githubusercontent.com/github/explore/80688e429a7d4ef2fca1e82350fe8e3517d3494d/topics/nodejs/nodejs.png"></code>    

<br>

**Github Stats:**

<a href="https://github.com/zeetec20">
  <img align="center" src="https://github-readme-stats.vercel.app/api?username=zeetec20&show_icons=true&theme=light&line_height=27" alt="Firman github stats"/>
</a>
<br>
<br>

**Most Used Language:**

<a href="https://github.com/zeetec20">
  <img align="center" src="https://github-readme-stats.vercel.app/api/top-langs/?username=zeetec20&theme=light&hide_langs_below=1" />
</a>
```