DEV Community: Camilo Martinez

Dev Playground an alternative to RunJS

Camilo Martinez — Sat, 16 Nov 2024 16:45:43 +0000

RunJS is a commendable project that we have utilized for quick code testing. Unfortunately, the latest version imposes a daily limit of 50 runs.

In search of a viable alternative, I explored numerous cloud-based solutions. However, I prefer a local environment option.

Consequently, I decided to develop my own truly FREE solution, which is available in the Dev Playgrond repository.

Dev Playground is a pre-configured project over vscode and the community version of console-ninja, designed to provide a more open and flexible solution, free from limitations.

By leveraging your local environment and the power of vscode and its extensions, you have complete control over your development experience. There are no restrictions on the number of runs, saving files, using external packages, managing multiple tabs, customizing themes, or installing extensions.

Comments and contributions are welcome. If you have recommendations, I'm open to listening and learning.

That’s All Folks!
Happy Coding 🖖

Basic and advance Array sorting with JavaScript

Camilo Martinez — Thu, 27 Apr 2023 21:15:56 +0000

Basic

Sort an array by one value is relatively simple because a compare function passed to array sort follows this rule to apply the sorting order based on:

Return value	Sorting order
Negative	less (sort `a` before `z`)
Zero	equal (keep original order `a` and `z`)
Positive	greater (sort `z` before `a`)

Taking that in mind there are different approach to take depending of the data type.

String

You can use .sort() without parameters to order strings, but is recommended to use localeCompare because it can be configured to ignore punctuation (accents), returns -1, 0, 1 if a < z, a == z, a > z.



const animals = [ 'cat', 'dog', 'wolf', 'lion', 'sheep', 'antelope']
animals.sort((a, z) => a.localeCompare(z))
console.log(animals) // [ 'antelope', 'cat', 'dog', 'lion', 'sheep', 'wolf' ]

Numeric

Subtraction works on numeric fields, because a - z gives -, 0, + if a < z, a == z, a > z.



let numbers = [ 0, 20, 2, 3, 30, 10, 1 ]
numbers.sort((a, z) => a - z)
console.log(numbers) //[ 0, 1, 2, 3, 10, 20, 30 ]

Date

Date (with or without time) compares with subtraction because date math converts to milliseconds since 1970.



const dates = ['Mar 18 2016', '09/24/2017', 'Jan 22 2022', '1998-05-21']
dates.sort((a, z) => new Date(a) - new Date(z))
console.log(dates) // [ '1998-05-21', 'Mar 18 2016', '09/24/2017', 'Jan 22 2022' ]

Boolean

Boolean compare with subtraction, which is guaranteed to turn true and false to 1 and 0 (therefore the subtraction produces -1 or 0 or 1).



const boolean = [true, false, true, false, true]
boolean.sort((a, z) => Boolean(a) - Boolean(z))
console.log(Boolean) //[ false, false, true, true, true ]

Drawing attention with the Boolean() constructor, even if they're already Boolean.

Reverse Order

Swapping the comparison values



animals.sort((a, z) => z.localeCompare(a))
numbers.sort((a, z) => z - a)
dates.sort((a, z) => new Date(z) - new Date(a))
boolean.sort((a, z) => Boolean(z) - Boolean(a))

Or negate the comparison



animals.sort((a, z) => -( a.localeCompare(z) ))
numbers.sort((a, z) => -( a - z ))
dates.sort((a, z) => -( new Date(a) - new Date(z) ))
boolean.sort((a, z) => -( Boolean(a) - Boolean(z) ))

💡 take in mind this negate trick because it can be useful later for advance sorting

Shuffle

Sometimes we need to shuffle or unsort an array, for example on a playlist or choosing a winner. No matters the type we can use the same.



animals.sort(() => Math.random() - 0.5)
numbers.sort(() => Math.random() - 0.5)
dates.sort(() => Math.random() - 0.5)
boolean.sort(() => Math.random() - 0.5)

Math.random() returns a value between 0 and <1, then gives -, 0, + if < 0.5, = 0.5, > 0.5.

Advanced

To sort an array of objects we are going to use all the previous examples, but if we need to made sorting using multiple properties, we are going to need some special tricks.



const records = [
  {
    id: '1',
    country: 'Colombia',
    value: 500,
    hasDetail: true,
    timestamp: '2023-04-27T02:23:39.000Z'
  },
  {
    id: '2',
    country: 'Spain',
    value: 1_000,
    hasDetail: true,
    timestamp: '2015-04-27T23:31:05.000Z'
  },
  {
    id: '3',
    country: 'Argentina',
    value: 1_000,
    hasDetail: false,
    timestamp: '2000-01-01T00:00:00.000Z'
  },
    {
    id: '5',
    country: 'Colombia',
    value: 2_000,
    hasDetail: true,
    timestamp: '2023-04-27T02:23:39.000Z'
  },
  {
    id: '6',
    country: 'Spain',
    value: 1_000,
    hasDetail: false,
    timestamp: '2018-04-27T23:31:05.000Z'
  },
  {
    id: '4',
    country: 'Argentina',
    value: 100,
    hasDetail: true,
    timestamp: '2020-01-01T23:15:00.000Z'
  }
]

This raw data (without sorting) using console.table(records) will show:

id	country	value	hasDetail	timestamp
'1'	'Colombia'	500	true	'2023-04-27T02:23:39.000Z'
'2'	'Spain'	1000	true	'2015-04-27T23:31:05.000Z'
'3'	'Argentina'	1000	false	'2000-01-01T00:00:00.000Z'
'5'	'Colombia'	2000	true	'2023-04-27T02:23:39.000Z'
'6'	'Spain'	1000	false	'2018-04-27T23:31:05.000Z'
'4'	'Argentina'	100	true	'2020-01-01T23:15:00.000Z'

First, we need to create a sort object with each property.



records.sort((a, z) => {
  const sort = {
    id: a.id.localeCompare(z.id), //string
    country: a.country.localeCompare(z.country), //string
    value: a.value - z.value, //numeric
    hasDetail: Boolean(a.hasDetail) - Boolean(z.hasDetail), //boolean
    timestamp: new Date(a.timestamp) - new Date(z.timestamp) //date
  }
  ...
})

Then return the order according to your needs using the || operator, taking in mind that it follows the priority from left to right and, to reverse order use the negate trick in any field.



records.sort((a, z) => {
  ...
  return sort.country || -sort.value || sort.timestamp
})

This means we want to sort by country ascending, then by value descending and then by timestamp ascending. The result will be:

id	🔼country	🔽value	hasDetail	🔼timestamp
'3'	'Argentina'	1000	false	'2000-01-01T00:00:00.000Z'
'4'	'Argentina'	100	true	'2020-01-01T23:15:00.000Z'
'5'	'Colombia'	2000	true	'2023-04-27T02:23:39.000Z'
'1'	'Colombia'	500	true	'2023-04-27T02:23:39.000Z'
'2'	'Spain'	1000	true	'2015-04-27T23:31:05.000Z'
'6'	'Spain'	1000	false	'2018-04-27T23:31:05.000Z'

Note: .sort() mutes the array, .toSorted() do the same but returns a new array with the elements sorted.

Bonus

These array sorting methods are available as snippets on the Arrow Functions Snippets extension for VSCode.

That’s All Folks!
Happy Coding 🖖

VSCode - Hidden Browser Inside

Camilo Martinez — Mon, 03 Apr 2023 02:27:32 +0000

There are a lot of options like npm packages or VSCode extension to create a live server. For me, one of the better is using Vite as a live server



npx vite dev --port 3000

It's my favorite option because it can be used on projects that don't use vite under the hood, given us Hot Reload with a simple project with vanilla HTML, CSS, and JavaScript, and also use with debugger extensions like Console Ninja.

That's a piece of good information to have, but surely that is not what you are here, right?

Ok, I'll show you a hidden 💎 in VSCode where you can open this live server (or a page) in a new tab with a simple browser inside.

Open the command palette with ctrl+shift+p and search for Simple Browser.

Press the return key and write http://localhost:3000 or the URL you want to open and press the return key again.

It will open a new tab inside VSCode with a simple browser and you can move aside to see the code and the result at the same time.

It was good, but take a lot of steps and effort. I'll show you how to create a task and assign a shortcut to open the simple browser easily.

Start creating a .vscode folder with a tasks.json file inside the project, or if you want it to be available at profile level (no matter the project) press ctrl+shift+p (or cmd+shift+p on macOS) and run the command Tasks: Open User Tasks.



# 📄 File: /.vscode/tasks.json
-----------------------------------

{
    "version": "2.0.0",
    "tasks": [
        {
            "label": "Simple Browser",
            "command": "${input:openSimpleBrowser}",
            "problemMatcher": []
        }
    ],
    "inputs": [
        {
            "id": "openSimpleBrowser",
            "type": "command",
            "command": "simpleBrowser.show",
            "args": [
                "http://localhost:3000"
            ]
        }
    ]
}

And also define the shortcut using the File > Preferences > Keyboard Shortcuts menu.



# 📄 File: keybindings.json
-----------------------------------

// Place your key bindings in this file to override the defaults
[
  // Browser
  {
    "key": "alt+shift+b",
    "command": "workbench.action.tasks.runTask",
    "args": "Simple Browser"
  },
]

The next time you can open the simple browser by pressing alt+shift+b.

You don't need that extension 🚫

By the way, you don't need an extension like Live Preview (or any of the many others that exist) to achieve it.

But if you prefer to have all the browser dev tools inside VSCode instead of using the Browser, then use the extension.

That’s All Folks!
Happy Coding 🖖

Sources

VS Code task to open VS Code's simple browser with a url

VSCode - Wrap HTML elements

Camilo Martinez — Fri, 17 Mar 2023 18:20:50 +0000

One of the best hidden 💎 that I found on VSCode is the HTML wrapper combined with Emmet and together are pure gold.

I can believe all the time I've lost doing the same manually when forgot/need to include a parent tag.

The hard way 👎

Creating a new element and then move the content inside with cut/paste or moving the lines with alt+verticalArrows.

The good way 👍

Using the "Emmet Wrapper" option through the "Command Palette" using ctrl+shift+p.

The best way 🌟

Adding a shortcut alt+shift+w for the "Emmet Wrapper" option.

You also can define the shortcut manually.



# 📄 File: keybindings.json
-----------------------------------

// Place your key bindings in this file to override the defaults
[
    // Emmet
    {
        "key": "alt+shift+w", //wrap emmet
        "command": "editor.emmet.action.wrapWithAbbreviation",
        "when": "editorHasSelection"
    },
]

The Geek Way 🤓

What if I tell you, that the whole process can be faster without using the mouse adding more useful shortcuts.



# 📄 File: keybindings.json
-----------------------------------

// Place your key bindings in this file to override the defaults
[
  {
    "key": "alt+shift+j", //expand selection
    "command": "editor.emmet.action.balanceOut"
  },
  {
    "key": "alt+shift+k", //contact selection
    "command": "editor.emmet.action.balanceIn"
  },
]

Multicursor 😎

But the magic does not end, this wrapper is also available for multicursor.

You don't need that extension 🚫

By the way, you don't need an extension like html-tag-wrapper to achieve it.

That’s All Folks!
Happy Coding 🖖

Sharing Git credentials between Windows and WSL

Camilo Martinez — Tue, 07 Mar 2023 00:59:07 +0000

Download Git for Windows and choose Git Credential Manager (GCM) as credential helper on the installation steps.

If you use HTTPS to clone your repositories, you can share this with WSL so that passwords you enter are persisted on both sides.

Note that this does not apply to using SSH keys.

Just follow these steps:

Configure the credential manager on Windows by running the following in a Windows command prompt or PowerShell:
```
 git config --global credential.helper wincred
```
Configure WSL to use the same credential helper, but running the following in a WSL terminal (assuming you have git >= v2.39.0):
```
 git config --global credential.helper "/mnt/c/Program\ Files/Git/mingw64/bin/git-credential-manager.exe"
```

To know the path for previous versions of git, please refer to https://learn.microsoft.com/en-us/windows/wsl/tutorials/wsl-git

Any password you enter when working with Git on the Windows side will now be available to WSL and vice versa.

Bonus Track

How to use multiple users with Git

Camilo Martinez ・ Oct 14 '22

#git #github #productivity

That’s All Folks!
Happy Coding 🖖

Sources

vscode docs troubleshooting

Get started using Git on Windows Subsystem for Linux

Git Credential Manager Rename

Why Oh My ZSH is so cool?

Camilo Martinez — Sat, 04 Mar 2023 00:37:11 +0000

There is a before and after listening to these letters together: ZSH. You may wonder: Why did not I hear about this before? D'oh!

ZSH (Z Shell) it's a real evolution, modernize terminal things with simple solutions. But the thing getting better when you discover Oh My ZSH! a framework for ZSH that boost your productivity and improve your workflow.

So, why?

No more cd (change directory) command. Just use:

Command	Result
`folder/`	write the folder name with `/` at the end
`..`	go back one folder (parent dir)
`...`	go back two folders (parent from parent dir)
`......`	go back five folders
`/`	go to root
`~`	go to home
`-`	jump to previous path

Recursive path expansion. /u/lo/b expands to /user/local/bin
Spelling correction and approximate completion, automatic correct when having minor mistake typing a directory name
take the 3 in 1 command who create a directory and automatically change the path to it

Command	Result
`take <url_file>`	Download gzip file (`.gz`, `.bz2`, `.xz`) and uncompress
`take <git_repo>`	Clone git repo from url (`http`, `ssh`)
`take <folder>`	Create a new folder

zsh_stats will give you a list of the top 20 commands and how many times they've been run
Tab completion is another great feature. For example, typing ls - and pressing TAB will list all of the command's options, along with a helpful description of what they do
Alias commands. List all with alias or filter it with grep for example alias | grep git
Globbing

Command	Result
`ls *.txt`	list all `txt` files in the current directory
`ls */.txt`	list all `txt` files including subdirectories
`ls */(READ).*`	find for files that start with the word `READ`
`ls */(READ).*`	find for files that end with the word `READ`
`ls */(READ).`	find for files that have the word `READ` anywhere
`ls */(.)`	search for files only
`ls */(/)`	search for folders only

Expanding File Names and Directories

Command	Result
`touch name-{1..4}.txt`	create files `name-1.txt`, `name-2.txt`, `name-3.txt`, `name-4.txt`
`touch name.{css,js,test.js}`	create files with different extension `name.css`, `name.js`, `name.test.js`
`cp folder/name.js{,.bak}`	create a copy of the file ending `.bak`
`diff folder/{new,old}/name.js`	view differences between two files
`mkdir -p {source,build,man,help{/pages,/yelp,/images}}`	create a complete folder structure
`wget http://site.com/folder{1,2}/pic{001,002}.jpg`	download multiple files

Expand environment variables $ENV followed by TAB
Expand kill command followed by TAB
History substring search writing a command and pressing the up arrow cycles through previous usages
Autocomplete, jump between options with tab, and press return for selection. Works with directories, files, and commands
Run history command with ! followed by the number in history, like !137
Entering !! will bring up the last command. This is handy if a command fails because it needs admin rights. In this case you can type sudo !!

Plugins

There are a lot of plugins to use. It's recommended to explore the options and use what is good for your needs.

My recommendations are:

sudo to easily prefix your current or previous commands with sudo by pressing esc twice
command-not-found to provide suggested packages to be installed if a command cannot be found
extract that extracts the archive file you pass it, and it supports a wide variety of archive filetypes
git provides many aliases and a few useful functions
history-substring-search a clean-room implementation of the Fish shell's history search feature, where you can type in any part of any command from history and then press chosen keys, such as the UP and DOWN arrows, to cycle through matches
web-search adds aliases for searching with Google, Wiki, Bing, YouTube and other popular services
z command that tracks your most visited directories and allows you to access them with very few keystrokes

I've another extra from plugins from external repositories to add more functionalities:

autosuggestions suggests commands as you type based on history and completions.
syntax-highlighting Fish shell-like syntax highlighting for ZSH
ohmyzsh-full-autoupdate Automatic update of custom plugins and themes Oh My Zsh

Themes

There are also a lot of themes, but my favorite is Powerlevel10k because is easy to set up and use

Git

Incredible and complete aliases for Git

ZSH cheatsheet for git plugin

Camilo Martinez ・ Apr 20 '21

#productivity #zsh #git #terminal

Git Status Prompt can contain the following bits:

segment	meaning
`master`	current branch
`#v1`	HEAD is tagged with `v1`; not shown when on a branch
`@5fc6fca4`	current commit; not shown when on a branch or tag
`⇣1`	local branch is behind the remote by 1 commit
`⇡2`	local branch is ahead of the remote by 2 commits
`⇠3`	local branch is behind the push remote by 3 commits
`⇢4`	local branch is ahead of the push remote by 4 commits
`*5`	there are 5 stashes
`merge`	merge is in progress (could be some other action)
`~6`	there are 6 merge conflicts
`+7`	there are 7 staged changes
`!8`	there are 8 unstaged changes
`?9`	there are 9 untracked files

Shortcuts

Edit long command

ctrl+x+e open the command on an editor to easy edit, once save and close the editor it will be updated on the terminal

You can set your favorite editor, for example run export EDITOR="code -w" to use VSCode

Park a command

ctrl+q "parks" the command you're currently typing and takes you back to the prompt, letting you start over and type another command. Once you run that other command, the original command is un-parked and refills the command line so you can continue.

This is good for if you, say, forgot to do a command before a command.

Reveal alias

ctrl+x a will transform the alias to the real command

Path history

ZSH keeps the history of directories you visited so you can quickly switch to any of them.

To see the list, type dirs -v. Switch to any directory in this list by typing ~# where # is the number of the directory in the list.

Hooks

You can personalize actions (before and after a command) with ZSH Hooks

Reveal the command behind an alias with ZSH

Camilo Martinez ・ Feb 22 '21

#productivity #bash #tutorial #terminal

Command validations with ZSH

Camilo Martinez ・ Mar 8 '21

#productivity #zsh #tutorial #terminal

That's All Folks!
Happy Coding 🖖

Sources

Learn the basics of the ZSH shell

A Guide to Zsh Expansion with Examples

How to Use Brace Expansion in Linux's Bash Shell

75 Zsh Commands, Plugins, Aliases and Tools

ZSH Globbing as an Alternative to Find Command

https://opensource.com/article/18/9/tips-productivity-zsh

WSL Tepes: The CPU/Memory vampire

Camilo Martinez — Fri, 03 Mar 2023 20:33:28 +0000

Surely, you have ever seen the Chrome and Android Studio memes about the huge consumption of ram and CPU.

Well... I think we have a new contender for the crown.

The King is dead, hail the new king.
Your majesty: WSL! 👑

That is because have a known issue "WSL 2 consumes massive amounts of RAM and doesn't return it" and can't be solved until today.

Solution

It is not a definitive solution, but we can setup WSL with some advanced configurations to limit his resources.

All next steep need to be done on PowerShell (Windows side).

First, we need to close all terminals that are using WSL, and then shut it down to avoid data corruption running the wsl --shutdown command.

Create a .wslconfig file under the windows user profile path.



# PowerShell
cd $env:USERPROFILE
New-Item -Path '.wslconfig' -ItemType File

Open this file with VSCode (or any editor that you like)



# PowerShell
code .wslconfig

And set limits for the max amount of resources that can take (according to you needs). For example:



# Settings apply across all Linux distros running on WSL 2
[wsl2]

# Limits VM memory to use no more than 4 GB, this can be set as whole numbers using GB or MB
memory=4GB 

# Sets the VM to use two virtual processors
processors=2

# Sets amount of swap storage space to 8GB, default is 25% of available RAM
swap=8GB

# Sets swapfile path location, default is %USERPROFILE%\AppData\Local\Temp\swap.vhdx
swapfile=D:\\WSL\\wsl-swap.vhdx

# Turn off default connection to bind WSL 2 localhost to Windows localhost
localhostforwarding=true

For more WSL advanced configuration check the documentation.

Save the file and restart WSL running wsl command.

It will still consume the entire 4GBs regardless of Linux memory usage and only 2 virtual processors, but at least it will stop growing more than that.

Experimental

There is a new experimental version of WSL whit better managment of memory.

All next steps need to be done on PowerShell (Windows side).

Backup

First, we need to close all terminals that are using WSL, and then shut it down to avoid data corruption running the command.



# PowerShell
wsl --shutdown

Next, we are going to create a backup from our Ubuntu linux distribution.



# PowerShell
mkdir D:\backup
wsl --export Ubuntu D:\backup\ubuntu.tar

Don't worry if you do not see progress indicators. This can take a while depending on how much data you have. Maybe it's a good idea to take a rest.

When finished, first of all, and more important ensure that the D:\backup\ubuntu.tarfile exists.

Update

⚠️ Beware that everything that was stored on the WSL drive can be lost, and the command won't ask for a confirmation, so make sure you backup everything you need first!



# PowerShell
wsl --update
wsl --update --pre-release

Config

Open again the .wslconfig file with VSCode (or any editor that you like)



# PowerShell
code .wslconfig

And set the experimental flags (according to you needs). For example:



[experimental]

# Automatic memory reclaim
autoMemoryReclaim=gradual

# Automatic disk space clean up
sparseVhd=true

And finally restart WSL with wsl or wsl --distribution <DistroName> command.

Alternative

If you are still having issues with WSL, you can use Git Bash. It's not a "real" Linux distribution like WSL, but it's a good alternative to emulate an Unixish environment inside windows.

ZSH + Oh My ZSH! on Windows without WSL

Camilo Martinez ・ Oct 11 '22

#productivity #zsh #git #terminal

That’s All Folks!
Happy Coding 🖖

Sources

Windows Subsystem for Linux September 2023 update

ZSH + Oh My ZSH! on Windows with WSL

Camilo Martinez — Fri, 03 Mar 2023 08:14:00 +0000

1. Install WSL

There are plenty of good articles about how to install WSL so I'm not going to detail about this step.

The easy way, install Ubuntu from the Microsoft Store

2. Ubuntu

Search the Ubuntu icon on the start menu and open the terminal (you can also use Windows Terminal)

Update the package source list and updates all the packages presently installed, with this command.



sudo apt update && sudo apt upgrade

This can take a while depending on how many packages going to need to be updated. Maybe it's a good idea to take a rest.

3. ZSH

Bash is the default Ubuntu shell, but ZSH is in another league with his productivity boosts. So, we are going to install ZSH over Bash.

Install



sudo apt install zsh

Verify the installed version.



zsh --version
zsh 5.8.1 (x86_64-ubuntu-linux-gnu)

Close and reopen the terminal, to update those changes.

4. Oh my zsh!

Install

Add superpowers to zsh installing Oh my zsh! running this command.



sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Default

Answer y to change the default shell.



Time to change your default shell to zsh:
Do you want to change your default shell to zsh? [Y/n] y

Fonts

Download and install manually the Meslo Nerd Fonts to include all glyphs and symbols that Powerlevel10k may need

Copy the .ttf files inside ~/.fonts folder. Create one if you don't already have one.

And run these commands:



sudo apt install fontconfig
fc-cache -fv

Theme

There are a lot of themes but my favorite is Powerlevel10k because is easy to set up and use.



git clone https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/powerlevel10k

On the ~/.zshrc file add this additional configuration



ZSH_THEME="powerlevel10k/powerlevel10k"
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(history)
POWERLEVEL9K_SHORTEN_DIR_LENGTH=1

export LS_COLORS="rs=0:no=00:mi=00:mh=00:ln=01;36:or=01;31:di=01;34:ow=04;01;34:st=34:tw=04;34:pi=01;33:so=01;33:do=01;33:bd=01;33:cd=01;33:su=01;35:sg=01;35:ca=01;35:ex=01;32:"

Restart the terminal and type p10k configure.

Plugins

Oh My zsh! have a lot of plugins to use. It's recommended to explore the options and use what is good for your needs.

I've already installed a lot related to software development and other ones to add more functionalities. Running these commands:



git clone https://github.com/zsh-users/zsh-autosuggestions.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
git clone https://github.com/Pilaton/OhMyZsh-full-autoupdate.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/ohmyzsh-full-autoupdate

And now edit the ~/.zshrc file and add it inside the plugins property (don't use commas as separators)



ZSH_HIGHLIGHT_HIGHLIGHTERS=(main brackets pattern cursor root line)
ZSH_HIGHLIGHT_PATTERNS=('rm -rf *' 'fg=white,bold,bg=red')

plugins=(
    adb
    command-not-found
    extract
    deno
    docker
    git
    github
    gitignore
    history-substring-search
    node
    npm
    nvm
    yarn
    volta
    vscode
    sudo
    web-search
    z
    zsh-autosuggestions
    zsh-syntax-highlighting
    ohmyzsh-full-autoupdate
)

If you are using NVM take care of following this configuration to avoid slowing the zsh start-up and this configuration to speed up the compinit

⚠ If you have done previous package configurations, alias definitions, or something else on your ~/.basrc previous ZSH installation you need to move those manually to ~/.zshrc.

4. Terminals

To use the same terminal inside VSCode and Windows Terminal follow these configurations.

VS Code

Add these properties to the user setttings.json



{ 
    ...
+   "terminal.integrated.fontFamily": "MesloLGS NF",
+   "terminal.integrated.fontSize": 12,
+   "terminal.integrated.shellIntegration.enabled": true,
+   "terminal.integrated.defaultProfile.windows": "Git Bash",
+   "terminal.integrated.defaultProfile.linux": "zsh",
    ...
}

Microsoft Terminal

Add these configurations to the Ubuntu terminal.



{
    "profiles": {
        "defaults": {},
        "list": [
                "colorScheme": "Ubuntu-ColorScheme",
                "cursorShape": "filledBox",
+               "font": {
+                   "face": "MesloLGS NF",
+                   "size": 10
+               },
                "guid": "{57ff1822-68a9-4a3f-90c5-a55c8557df50}",
                "hidden": false,
                "icon": "https://assets.ubuntu.com/v1/49a1a858-favicon-32x32.png",
                "name": "Ubuntu",
+               "commandline": "wsl",
+               "startingDirectory": "~/Developer"
            },
        ]
    }
}

That’s All Folks!
Happy Coding 🖖

Usar múltiples usuarios con Git

Camilo Martinez — Wed, 19 Oct 2022 22:42:30 +0000

Idiomas: [🇺🇸] English - [🇪🇸] Español

Si estás trabajando con múltiples usuarios de Git, por ejemplo, con uno para proyectos personales y otro para los proyectos del trabajo.

Entonces no es buena idea definir un usuario global porque todos los proyectos van a usar el mismo y puede ser muy fácil terminar haciendo un commit con el usuario incorrecto.

Amend

Si ese es tu caso, no te preocupes. No es realmente un problema porque se puede enmendar (ammend) con este comando.



git commit --author="First Last <first.last@company.org>" --amend --no-edit

Pero seamos sinceros, ¿quién quiere estar ejecutando este comando frecuentemente?. Seguramente casi nadie. Es una de esas cosas que solo queremos tener en cuenta en casos de emergencia.

Configuración de Git

Lo primero que me gusta hacer es cambiar el editor por defecto de git de vim a VSCode. Aunque es algo opcional, si te sientes bien editando directamente desde la terminal.



git config --global core.editor 'code --wait'

Y lo otro es crear dos alias, para acceder y editar fácilmente las configuraciones.



alias gcg="git config --edit --global"
alias gcl="git config --edit --local"

La diferencia entre ellas es que global aplica para todos los proyectos de Git en tu máquina y local solo aplica al proyecto en la ruta actual.

Ahora vamos a aprender como usar diferentes usuarios en cada proyecto.

Remover el Global 👌

Este paso es recomendado, pero también es opcional. En mi caso prefiero no tener un usuario por defecto para todos los proyectos.

Vamos a abrir la configuración global utilizando el alias gcg o con el comando git config --edit --global y eliminar todas las configuraciones que tengan que ver con [credential] y [user].

La complicada 👎

Una forma es que después de crear o clonar un repositorio, definas manualmente la configuración con estos comandos.



git config user.name "<user>"
git config user.email "<user@mail.com>"
git config credential.username "<user>"

Puede ser buena idea si no tienes una ruta específica para crear o clonar tus proyectos, pero... toma muchísimo tiempo y es muy fácil de olvidar, créeme, además vas a necesitar repetir lo mismo con cada repositorio que clones.

La recomendada 👍

Lo primero es definir una ruta específica para diferenciar nuestros proyectos y crear un archivo .gitconfig para cada perfil de usuario, tantos como sean necesarios.



~
├── .gitconfig <-- global
└── Developer/
   ├── personal/
   │   ├── proyecto_1/
   │   ├── proyecto_2/
   │   ├── proyecto_#/
   │   └── .gitconfig <-- personal
   └── empresa/
       ├── proyecto_1/
       ├── proyecto_2/
       ├── proyecto_#/
       └── .gitconfig <-- empresa

Personal



# ~/Developer/personal/.gitconfig

[credential]
    username = <usuario-github>
[user]
    name = <usuario-github>
    email = <usuario-github>@users.noreply.github.com

Empresa



# ~/Developer/company/.gitconfig

[credential]
    username = <user>
[user]
    name = <Nombre Apellido>
    email = <usuario>@empresa.org

Global

Ahora vamos a abrir la configuración global usando el alias gcg o el comando git config --edit --global.



# ~/.gitconfig

[includeIf "gitdir/i:~/Developer/personal/"]
    path = ~/Developer/personal/.gitconfig

[includeIf "gitdir/i:~/Developer/empresa/"]
    path = ~/Developer/empresa/.gitconfig

Así, tomará la configuración del usuario de cada "perfil" dependiendo de la ruta y podrás crear o clonar proyectos dentro de cada uno de ellos sin tener que estar lidiando con configuraciones manuales y evitando tener que usar el comando amend para corregir errores.

Agradecimientos especiales a feregri_no y ChrisFt25 de Twitter por enseñarme estos trucos.

That’s All Folks!
Happy Coding 🖖

How to use multiple users with Git

Camilo Martinez — Fri, 14 Oct 2022 18:00:27 +0000

Language: [🇪🇸] Español - [🇺🇸] English

If you are working with multiple git users, for example, one for personal projects and another for a company.

So it's not a good idea to set a global user because all projects are going to use the same. And It will be easy to make a commit with the wrong user.

Amend

If it's your case, don't worry. It's not really a problem, because you can amend it with this command.



git commit --author="First Last <first.last@company.org>" --amend --no-edit

But seriously, how want to do that frequently? No one, for sure. It's a thing to use only in emergency cases.

Git Config

The first thing that I like to do is change the default core editor from vim to VSCode. It's an optional step.



git config --global core.editor 'code --wait'

And then create two alias to easy access the configurations



alias gcg="git config --edit --global"
alias gcl="git config --edit --local"

The difference between them is that global applies to all the git projects on your machine and local only applies to the current path.

Now we are going to learn how to use a different user for each project.

Remove Global 👌

This steep is recommended, but also optional. I will prefer not to have a default user for all projects, but it is up to you.

Now we are going to open the global config using the gcg alias or with the git config --edit --global command.

Remove all [credential] and [user] configurations.

The Hard way 👎

One option is after creating or cloning a repository, set manually the configuration with those commands.



git config user.name "<user>"
git config user.email "<user@mail.com>"
git config credential.username "<user>"

It will be good if you don't have a specific path to which to create or clone the projects, but... it takes too much time and is easy to forget, believe me, moreover you are going to need to repeat the same with each repository that you clone.

The easy way 👍

We are going to define a path where our projects are going to live and create a .gitconfig file for each user profile, as many as we need.



~
├── .gitconfig <-- global
└── Developer/
   ├── personal/
   │   ├── project_1/
   │   ├── project_2/
   │   ├── project_#/
   │   └── .gitconfig <-- personal
   └── company/
       ├── project_1/
       ├── project_2/
       ├── project_#/
       └── .gitconfig <-- company

Personal



# ~/Developer/personal/.gitconfig

[credential]
    username = <github-user>
[user]
    name = <github-user>
    email = <github-user>@users.noreply.github.com

Business



# ~/Developer/company/.gitconfig

[credential]
    username = <user>
[user]
    name = <First Name and Last Name>
    email = <user>@company.org

Global

Now we are going to open the global config using the gcg alias or with the git config --edit --global command.



# ~/.gitconfig

[includeIf "gitdir/i:~/Developer/personal/"]
    path = ~/Developer/personal/.gitconfig

[includeIf "gitdir/i:~/Developer/company/"]
    path = ~/Developer/company/.gitconfig

So, it will take the user configuration profile per path, and you can create or clone projects inside each profile path without dealing with manual configurations and avoid using the amend command to fix mistakes.

Special thanks to feregri_no and ChrisFt25 from Twitter to show me these tricks.

That’s All Folks!
Happy Coding 🖖

ZSH + Oh My ZSH! on Windows without WSL

Camilo Martinez — Tue, 11 Oct 2022 17:54:49 +0000

Well, WSL it's a good way to have a Unixish environment on Windows, but sadly his performance and memory consumption leads me to find another alternative... and I found it in a place closer than I expected.

1. Bash

The first step is to download and install git with bash terminal support.

2. ZSH

At least Bash is better than the windows CMD, but ZSH is in another league with his productivity boosts. So we are going to install ZSH over Bash.

Download ZSH

Download the latest MSYS2 zsh package from the MSYS2 package repository. The file will be named something along the lines of zsh-#.#-#-x86_64.pkg.tar.zst

zst files can be decompressed with PeaZip

Install

Extract the contents of the archive (which should include etc and usr folders) into your Git Bash installation directory. This is likely to be under C:\Program Files\Git. Merge the contents of the folder if asked (no files should be getting overridden).

Setup

Open the Git Bash terminal and run zsh command, then verify the installed version.



zsh --version
zsh 5.9 (x86_64-pc-msys)

Configure zsh as the default shell by appending the following to your ~/.bashrc file:



if [ -t 1 ]; then
  exec zsh
fi

Windows can mangle some UTF-8 encoded text, causing unexpected characters to be displayed in your terminal. To fix this, add the following to your ~/.bashrc file, ideally, before the code that sets your shell as zsh:



/c/Windows/System32/chcp.com 65001 > /dev/null 2>&1

Close and reopen the terminal, to update those changes. The first time will ask for some files creation, choose:



Quit and do nothing.  The function will be run again next time.

3. Oh my zsh!

Install

Add superpowers to zsh installing Oh my zsh! running this command.



sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

Fonts

Download and install manually the Meslo Nerd Fonts to include all glyphs and symbols that Powerlevel10k may need

Theme

There are a lot of themes but my favorite is Powerlevel10k because is easy to set up and use.



git clone https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/themes/powerlevel10k

On the ~/.zshrc file add this additional configuration



ZSH_THEME="powerlevel10k/powerlevel10k"
POWERLEVEL9K_RIGHT_PROMPT_ELEMENTS=(history)
POWERLEVEL9K_SHORTEN_DIR_LENGTH=1

# User configuration

export LS_COLORS="rs=0:no=00:mi=00:mh=00:ln=01;36:or=01;31:di=01;34:ow=04;01;34:st=34:tw=04;34:pi=01;33:so=01;33:do=01;33:bd=01;33:cd=01;33:su=01;35:sg=01;35:ca=01;35:ex=01;32:"

Restart the terminal and type p10k configure.

⚠ if you can't see the icon symbols and always show an ▯, cancel the process, and refer to step 4 before continue.

Plugins

Oh My zsh! have a lot of plugins to use. It's recommended to explore the options and use what is good for your needs.

I've already installed a lot related to software development and other ones to add more functionalities. Running these commands:



git clone https://github.com/zsh-users/zsh-autosuggestions.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
git clone https://github.com/zsh-users/zsh-syntax-highlighting.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-syntax-highlighting
git clone https://github.com/Pilaton/OhMyZsh-full-autoupdate.git ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/ohmyzsh-full-autoupdate

And now edit the ~/.zshrc file and add it inside the plugins property (don't use commas as separators)



plugins=(
    adb
    command-not-found
    extract
    deno
    docker
    git
    github
    gitignore
    history-substring-search
    node
    npm
    nvm
    yarn
    volta
    vscode
    sudo
    web-search
    z
    zsh-autosuggestions
    zsh-syntax-highlighting
    ohmyzsh-full-autoupdate
)

# User configuration

ZSH_HIGHLIGHT_HIGHLIGHTERS=(main brackets pattern cursor root line)
ZSH_HIGHLIGHT_PATTERNS=('rm -rf *' 'fg=white,bold,bg=red')

If you are using NVM take care of following this configuration to avoid slowing the zsh start-up and this configuration to speed up the compinit

⚠ If you have done previous package configurations, alias definitions, or something else on your ~/.basrc previous ZSH installation you need to move those manually to ~/.zshrc.

4. Terminals

To use the same terminal inside VSCode and Windows Terminal follow these configurations.

VS Code

Add these properties to the user setttings.json



{ 
    ...
+   "terminal.integrated.fontFamily": "MesloLGS NF",
+   "terminal.integrated.fontSize": 12,
+   "terminal.integrated.shellIntegration.enabled": true,
+   "terminal.integrated.defaultProfile.windows": "Git Bash",
    ...
}

Microsoft Terminal

Add these configurations on the Git Bash terminal.



{
    "profiles": {
        "defaults": {},
        "list": [
            {
+               "font": {
+                   "face": "MesloLGS NF",
+                   "size": 12
+               },
                "guid": "{2ece5bfe-50ed-5f3a-ab87-5cd4baafed2b}",
                "hidden": false,
                "name": "Git Bash",
                "source": "Git",
+               "startingDirectory": "D:\\Developer"
            },
        ]
    }
}

Downsides

Git Bash is an emulation layer, so It's not as fast as I expected, but much faster than WSL (and also not dealing with his memory and performance issues)
Take some time to load the first time (but, less than WSL).
Volta on Windows requires additional permissions, maybe you gonna need to come back to NVM
Strange behavior while writing inside VS Code terminal
Can't use paths saved on %VARIABLE%, you are going to need to translate it with cygpath $LOCALAPPDATA. To change to a path use something like this $(cygpath $LOCALAPPDATA)/Volta/tools/image/node/

If Git Bash is not what you expect, you can also come back to WSL and use ZSH + Oh My ZSH!

ZSH + Oh My ZSH! on Windows with WSL

Camilo Martinez ・ Mar 3 '23

#productivity #zsh #git #terminal

Sources

That’s All Folks!
Happy Coding 🖖

VSCode - Terminal without using mouse

Camilo Martinez — Fri, 30 Sep 2022 13:52:02 +0000

Look ma, no ~~hands~~ mouse!

If you are trying to reduce the interaction with the mouse during development in order to increase productivity, you are in the correct place.

VSCode includes an integrated terminal and used wisely can be your best friend, but sometimes it will need a lot of mouse interactions, so I decided to tweak it a little.

Create

The first step it's adding my secret keyboard shortcut settings.



[
    {
        "key": "ctrl+`",
        "command": "workbench.action.terminal.focus",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+shift+`",
        "command": "workbench.action.terminal.new",
        "when": "terminalProcessSupported || terminalWebExtensionContributedProfile"
    },
    {
        "key": "ctrl+shift+`",
        "command": "workbench.action.createTerminalEditor",
        "when": "editorTextFocus"
    },
    {
        "key": "ctrl+`",
        "command": "workbench.action.focusActiveEditorGroup",
        "when": "terminalFocus"
    },
    {
        "key": "alt+`", //opt+` on macOS
        "command": "workbench.action.toggleMaximizedPanel"
    },
    {
        "key": "ctrl+alt+`", //ctrl+opt+` on macOS
        "command": "workbench.action.terminal.toggleTerminal"
    },
    {
        "key": "ctrl+\\",
        "command": "workbench.action.terminal.split",
        "when": "terminalFocus"
    },
    {
        "key": "ctrl+space",
        "command": "workbench.action.terminal.runRecentCommand",
        "when": "terminalFocus"
    },
    {
        "key": "ctrl+w",
        "command": "workbench.action.terminal.kill",
        "when": "terminalFocus"
    },
    {
        "key": "ctrl+k ctrl+w",
        "command": "workbench.action.terminal.killAll",
        "when": "terminalFocus"
    }
]

Learn

The next step, familiarize yourself with the new keyboard shortcuts.

Basics

Action	Focused	Win/Linux	macOS
Open terminal	Terminal	ctrl+`	ctrl+`
Toggle to terminal	Editor	ctrl+`	ctrl+`
Toggle to editor	Terminal	ctrl+`	ctrl+`
Toggle maximize/minimize	Terminal	alt+`	opt+`
Toggle show/hide	Terminal	ctrl+alt+`	ctrl+opt+`
New terminal	Terminal	ctrl+shift+`	ctrl+shift+`
New terminal as tab	Editor	ctrl+shift+`	ctrl+shift+`
New terminal split	Terminal	ctrl+\	ctrl+\
Close terminal	Terminal	ctrl+w	ctrl+w
Close all terminals	Terminal	ctrl+k ctrl+w	ctrl+k ctrl+w

Navigation

Action	Focused	Win/Linux	macOS
Previous terminal	Terminal	ctrl+pageUp	ctrl+pageUp
Next terminal	Terminal	ctrl+pageDown	ctrl+pageDown
Previous split terminal	Terminal	alt+upArrow	opt+upArrow
Next split terminal	Terminal	alt+downArrow	opt+downArrow
Scroll Up	Terminal	ctrl+downArrow	ctrl+upArrow
Scroll down	Terminal	ctrl+downArrow	ctrl+upArrow
Scroll to top	Terminal	ctrl+home	ctrl+home
Scroll to bottom	Terminal	ctrl+end	ctrl+end

Integrated



{
  "terminal.integrated.shellIntegration.enabled": true
}

If you have the shell integration terminal enabled, you can also re-run recent commands.

Action	Focused	Win/Linux	macOS
Run recent command		ctrl+space	ctrl+space

Practice

The final step is practice and repetition, there is no other way to remember those keyboard shortcuts.

Open a project in VSCode, disconnect or shutdown your mouse, close your eyes, take a deep breath, and enter into Lighting McQueen mode 😜

Challenge 1

Open a terminal
Toggle to the code editor
Add a comment
Back to the terminal
Commit changes
Close the terminal

Solution

Challenge 2

Open a terminal
Execute a run command (npm run...)
Hide terminal (this doesn't stop his execution)
Made changes to the code
Show terminal
Stop execution (ctrl+c)
Close the terminal

Solution

Challenge 3

Open a terminal
Execute the test (npm run test)
Maximize the terminal to see the results
Minimize the terminal
Go to the code editor and "fix" the failed test
Go to terminal
Execute the test again (npm run test)
Maximize the terminal to see the results
Minimize the terminal
Close the terminal

Challenge 4

Open a terminal as tab
Execute the lint command (npm run lint)
See the changes on the previous tab (code)
Back to the terminal tab
Close the terminal

Challenge 5

Open a terminal
Execute a run command (npm run...)
Create another terminal
Execute the test on watch mode (npm run test --watch)
Create another terminal
Execute the eslint command (npm run linter)
Hide terminals
Go to the code and made some changes
Show terminals
Go back to the terminal and stop the watch mode
Go to the last terminal and run the list command
Go to the first terminal and stop his execution (ctrl + c)
Close all terminals

Challenge 6

Open a terminal
Execute a run command (npm run...)
Create another terminal
Execute the test on watch mode (npm run test --watch)
Create another split terminal
Execute the eslint command (npm run linter)
Hide terminals
Go to the code and made some changes
Show terminals
Go back to the terminal and stop the watch mode
Go to the last terminal and run the list command
Go to the first terminal and stop his execution (ctrl + c)
Close all terminals

Tell me in the comments if you can solve the challenges 👇

That’s All Folks!
Happy Coding 🖖