
import { Meta, ColorfulSpan, CoverImage, RegularImage } from 'components'
import Link from 'next/link'

<Meta title="Command Line - Beshoi Emad" description="Command line tips" />

# Command line tips

<CoverImage src="/imgs/posts/command-line-tips/bash.jpg" alt="bash-image" quality={30} />

## Cool use cases for gh gists with alias

Create gist

```bash
gh gist create example.txt
```

Every gist you created have an id, we need this id to edit gist. To grap the id or to view all gists you created just run this command,

```bash
gh gist list
```

Then you can edit gist

```bash
gh gist edit xxxxxxxxxxxxxxxxxxxxx
```

Quickly access info for example you can but you small code snippets, google fonts & libraries links to quickly copy and past them, save some nice color values, install instructions, etc. save whatever your need and quickly jump on it

```bash
alias links='gh gist edit xxxxxxxxxxxxxxxxxxxxx'
```

After run command it will open your gist in default editor for example in windows is notepad, but you can configure github-cli to use you [favorite editor](https://cli.github.com/manual/gh_config_set)

For linux & mac you can add alias to ./.bashrc or ./zshrc for windows you can also add alias to ./.bashrc or ./zshrc if you installed [wsl](https://docs.microsoft.com/en-us/windows/wsl/install) or to git bash [How to add alias to git bash on windows](https://dev.to/mhjaafar/git-bash-on-windows-adding-a-permanent-alias-198g)

## Bonus Tip:

Make a prompt alias before permanently gone

```bash
rm -rf -i
```


Command line tips


import { Meta, ColorfulSpan, CoverImage } from 'components'

<Meta
  title="Command Line - Beshoi Emad"
  description="Package managers are great because you able to install/uninstall/update from command line."
/>

# Choco a package manger for windows!!

<CoverImage src="/imgs/posts/package-manger-for-windows/choco.jpg" alt="choco-image" />

## What's choco:

Choco is shorthand for Chocolatey, if you use mac or linux you are familiar with package managers. Package managers are great because you able to install/uninstall/update from command line, install specific version if you are facing problem or you want to test something and the more important that you can update all software to get latest software features and security patches at once. choco is a free and opensource. let's take a brief look with most used commands.

## [Install choco](https://docs.chocolatey.org/):

Run PowerShell as system administrator any type this command

```powershell
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
```

Close and reopen PowerShell as administrator, you are ready to use choco!

## [Find packages](https://community.chocolatey.org/packages):

you can find almost any software you could imagine and if you can't find the one that you need you can build a script then add it to the choco community packages.

### Install

```powershell
choco install <Package name>
```

### Uninstall

```powershell
choco uninstall <Package name>
```

### Upgrade:

```powershell
choco upgrade <Package name>
```

### Flags:

Some of choco flags you will needed:

-y to confirm installation, -f to force installation if any failure happens

```powershell
 -y, --yes, --confirm
     Confirm all prompts

 -f, --force
     Force - force the behavior. Do not use force during normal operation
```

[All list of commands and flags](https://docs.chocolatey.org/en-us/choco/commands/)

### Params:

You can find params in the package page, every package has a page with descriptions, parameters, versions if you need to customize it. params are different from package to onther.

```powershell
choco install <Package name> --params "/NoDesktopShortcut"
```

### Version History:

Install specific version if you need that, Let's take an example of install Firefox browser

```powershell
choco install firefox --params "/NoDesktopShortcut" --version=98.0 -y
```

### Script:

Install multiple packages with multiple params at the same time, for example we are going to install firefox, chrome, adobereader

```powershell
choco install firefox --params "/NoDesktopIcon /NoTaskbarShortcut" googlechrome adobereader -params "/DesktopIcon /UpdateMode:4" -y
```

### Search:

Search for any app without leave your terminal

```powershell
choco search firefox
```

### List:

View list of all your installed applications

```powershell
choco list --localonly
```

## Upgrades:

Upgrade all packages at once in one command line

```powershell
choco upgrade all -y'
```

Vola!, all your apps updated at once without need to check every one in setting searching for update button

### Bonus tip:

update all packages automatically every certain time for example every week, day or at startup this could happen in many ways
[Choco Upgrade All at Startup](https://community.chocolatey.org/packages/choco-upgrade-all-at-startup),
[Choco Upgrade All at](https://community.chocolatey.org/packages/choco-upgrade-all-at),
[PowerShell script](https://www.online-tech-tips.com/software-reviews/how-to-automatically-update-free-software-with-chocolatey/),
[Task Scheduler](https://daniel.streefkerkonline.com/2016/02/23/create-a-scheduled-task-to-keep-all-chocolatey-packages-up-to-date/)

Note:

This is a brief intro with most used commands to start using and enjoy choco, but [choco](https://chocolatey.org/) is more than that it's a a software management solution have a tons of apps with tons of commands & options, it's free and open source. They also have a business plan but the free one are more than enough for regular user, so for sure you should take a look on [documentation](https://docs.chocolatey.org/) for more details or advanced use cases.


Package manger for windows


import { Meta, ColorfulSpan, CoverImage, RegularImage } from 'components'
import Link from 'next/link'

<Meta title="Command Line - Beshoi Emad" description="Top command line tools" />

# Top command line tools

<CoverImage src="/imgs/posts/top-command-line-tools/coffee.jpg" alt="bash-image" />

## 1- Github-cli instead of main website

[Installation instructions](https://github.com/cli/cli#installation)

```bash
gh repo create
```

[All available commands](https://cli.github.com/manual/gh)

## 2- Vite

Vite is pretty fast it's build on top of esbuild, after using vite it's hard to go back again specially in development mode if you want quickly to test something instead of waiting minutes for downloading packages and compiling the code vite can do it in seconds

Just run

```bash
yarn create vite
```

And even more quickly, you can choose the template directly instead of choosing it in prompt, for example

```bash
yarn create vite --template react-ts project-name
```

## 3- Squoosh-Cli

Compress, convert images, try new images format like avif with one of the best cli tools

```bash
squoosh-cli --avif '{quality:50}' -d ./out ./images/*
# squoosh-cli --format --quality --output-directory --input-direcrocty
```

[All available commands](https://github.com/GoogleChromeLabs/squoosh/tree/dev/cli) / [Test it online](https://squoosh.app/)

## 4- Package manager for windows!

If you use mac or Linux you're familiar with Package managers. Package managers are great because you able to install/uninstall/update from command line, install specific version if you are facing problem or you want to test something and the more important that you can update all software to get latest software features and security patches at once.

Install choco:
Run PowerShell as system administrator

```powershell
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))
```

Close and reopen PowerShell as administrator, type choco install/uninstall/upgrade 'package name'

```powershell
choco install <Package name>
```

update all packages at same time in one line command

```powershell
choco upgrade all -y
```

vola!, all your apps updated at once without need to check every one in setting searching for update button

for more details I have a detailed post <Link href="/blog/posts/package-manger-for-windows">package manger for windows</Link> or visit [main website]('https://chocolatey.org/')

## 5- Weather

Get whether state from your terminal, for more details checkout [github repo](https://github.com/chubin/wttr.in)

```bash
curl wttr.in/{city1,city2}?format="%l:%t+%w\n"
```

## 6- Change wallpaper

Get an new cool wallpaper from unsplash in your terminal using splash-cli

```bash
npm install -g splash-cli
```

This is a minimal package without any parameters just type splash

```bash
splash
```


Top command line tools


import { Meta, ColorfulSpan, CoverImage, RegularImage } from 'components'

<Meta
  title="Create a website with zero media query - Beshoi Emad"
  description="How I created my website with zero media query using utopia && stitches"
/>

# How I created my website with zero media query using Utopia & Stitches

<CoverImage src="/imgs/posts/zero-media-query/mac.jpg" alt="mac-image" />

How I managed to code my website without writing any media query. I used modern css
syntax like css grid, flexbox, [fluid typography](https://utopia.fyi/type/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l)
to make my fonts fluid & smooth with out any need to change my font size for many
break points and also [fluid spaces](https://utopia.fyi/space/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l)
to set fluid spacing in paddings, margins, gaps. so until now I can't find any reason
to write any media query because everything is fluid! 🚀. I didn't know about utopia
or stitches until I watch these videos of [Kevin Powell](https://www.youtube.com/watch?v=VsNAuGkCpQU)
and [Pedro Duarte](https://www.youtube.com/watch?v=Gw28VgyKGkw).

## Advantages of using utopia

1. fluid typography using [fluid type scale calculator](https://utopia.fyi/type/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l)
2. fluid space using [fluid space calculator](https://utopia.fyi/space/calculator?c=320,21,1.2,1140,24,1.25,5,2,&s=0.75%7C0.5%7C0.25,1.5%7C2%7C3%7C4%7C6,s-l)
3. zero media queries expect one for dark theme '(prefers-color-scheme: dark)' with another one for reduced motion '(prefers-reduced-motion: reduce)'.

## Advantages of using stitches ( why I choose stitches )

1. it's only around 6kb size
2. be constant with your design system
3. better developer experience with type checking, utils, auto complete
4. great accessibility with a great eco system like radix component, colors

### How I use them both to create my fluid & modern website

First I select the desired font size at small breakpoint also for big breakpoint "choose the values that serve your needs"

<RegularImage src="/imgs/posts/zero-media-query/font-scale.png" alt="font-scale-image" />

Second I select the spaces between small and large breakpoints

<RegularImage src="/imgs/posts/zero-media-query/space-scale.png" alt="space-scale-image" />

after I choose the values I but them together in stitches config file.

Here is sample from my config

```js
import * as Stitches from '@stitches/react'

export const { styled, css, globalCss, keyframes, theme, createTheme, getCssText } =
  Stitches.createStitches({
    theme: {
      space: {
        auto: 'auto',
        0: '0',
        1: 'clamp(0.25rem, calc(0.23rem + 0.12vw), 0.31rem)',
        2: 'clamp(0.50rem, calc(0.45rem + 0.24vw), 0.63rem)',
        3: 'clamp(0.75rem, calc(0.68rem + 0.37vw), 0.94rem)',
        4: 'clamp(1.00rem, calc(0.90rem + 0.49vw), 1.25rem)',
        5: 'clamp(1.50rem, calc(1.35rem + 0.73vw), 1.88rem)',
        6: 'clamp(2.00rem, calc(1.80rem + 0.98vw), 2.50rem)',
        7: 'clamp(3.00rem, calc(2.71rem + 1.46vw), 3.75rem)',
        8: 'clamp(4.00rem, calc(3.61rem + 1.95vw), 5.00rem)',
        9: 'clamp(6.00rem, calc(5.41rem + 2.93vw), 7.50rem)',
      },
      fontSizes: {
        0: 'clamp(0.69rem, calc(0.65rem + 0.21vw), 0.80rem)',
        1: 'clamp(0.83rem, calc(0.77rem + 0.33vw), 1.00rem)',
        2: 'clamp(1.00rem, calc(0.90rem + 0.49vw), 1.25rem)',
        3: 'clamp(1.20rem, calc(1.06rem + 0.71vw), 1.56rem)',
        4: 'clamp(1.44rem, calc(1.24rem + 1.00vw), 1.95rem)',
        5: 'clamp(1.73rem, calc(1.45rem + 1.39vw), 2.44rem)',
      },
    },
  })
```

This is what I did maybe I'm wrong or I miss something. So I would advice you to follow && [<ColorfulSpan text="Kevin" color="$crimson5" />](https://www.youtube.com/watch?v=VsNAuGkCpQU), [<ColorfulSpan text="Pedro" color="$green5" />](https://www.youtube.com/watch?v=Gw28VgyKGkw)
tutorials.


Hi, I'm Beshoi
👋

Front End Developer

Latest Posts

Command line tips

Create a website with zero media query

Latest Tools

Package manger for windows

Top command line tools

Hi, I'm Beshoi 👋

Front End Developer

Latest Posts

Command line tips

Create a website with zero media query

Latest Tools

Package manger for windows

Top command line tools

Hi, I'm Beshoi
👋