You will need a terminal.​

As a developer, you gonna spend some time with your terminal. Even if you like GUI. You will run tests, install packages and use Git, for exaple. Terminal is one of our main tools and it's nice to have a visually pleasant and powerful terminal instead of borring and limited default one. In this post I gonna explain how I like to configure and personalize my Terminal and the main concepts thet we need to know: what is the shell, what is the terminal, what is a CLI, what different kinds of shelld do we have and how to take the better advantage of our terminal and shell configuration.

Terminal or Shell?​

There are a lot of terms that usually are used to refer to the same thing: Terminal, Shell, CLI and Console. But not everything is the same. To better understand what we're about to do we need to understand the difference between Shell and Terminal.

Differences between terminal and shell. Different shells: -sh (Bourne Shell) -bash (Bourne Again Shell) -zsh (Z Shell) -csh (C Shell) -ksh (Korn Shell)

Different terminals: -GNOME Terminal -Konsole -xterm -iTerm2 -Kitty -Warp (with AI)

On macOS, iTerm is the most popular terminal emulator. While it resembles a classic console, it offers powerful features like split views, multiple tabs, customizable hotkeys, and extensive configuration options. Accessing the Preferences menu in iTerm reveals a wide range of settings you can adjust to personalize your experience.

iTerm key features:

-Multiple tabs (with color options), split views. -Find and filter content in the terminal

• Session Managment. Reopen all the tabs exactly as they were.
• BONUS: broadcast inputs

Tip: depending on your default permission settings you can experience the "operation not permitted error". If this happens to you, you need to go to your MacOS setting, select Privacy and Security and give Full disk acess to iTerm2.

Shell: Interprets and executes commands. Terminal: Provides the interface for interacting with the shell.

Indeed, there are linux distros without Desktop Manager, like Arch Linux.

UNIX based systems​

We often hear about UNIX based systems and we know that MacOS and Linux are UNIX based systems. But what is really a UNIX system? Indeed, UNIX has a lot of history behind

What shell am I using?

echo $SHELL

As of macOS Catalina (10.15), the default shell for macOS was changed from Bash to Zsh due to licensing reasons (GPLv3).

Unleash your terminal​

Unleash your terminal is the slogan of Oh My Zsh, an open source community driven Zsh manager. This is one of the quickest an easiest ways to get a powerful yet beautiful terminal in a few steps. They promise you: Once installed, your terminal shell will become the talk of the town or your money back!

-MY ZSH + Fonts + iTerm -Aliases with custom scripts

-Mac plugins: Alfred, Rectangle

Chrome plugins​

-Chrome plugins: JSON, CSS Outline, DarkMode, ShewTabNumbers, React DeveloprTools, ModHeader, Redux DevTools.

Empowering the text​

Markdown is a tool that allows you to write using an easy-to-write plain text format, that is converted to structurally valid HTML. Originally, it was intended to easly create content for the web. And it does it great. It's very intuitive so you can start using it just after learning the basic syntax. Once you write your plain text with proper Markdown syntax, the Markdown parser will convert it into valid HTML that reflects the intended layout and style. And lots of great platforms are powered by markdown syntax: Obsidian, Trello, Notion, Stack Overflow, GitHub, Jekyll, Docusaurus and much more. So if you're getting in the software development world, you will be using markdown for sure.

With Markdown youcan write text, lists, tables, code blocks, images, links, and much more. Let's put here an example of each one:

Text that is a quote

1. First item
2. Second item

console.log("Hello, world!");

Docusaurus is a project for easily building, deploying, and maintaining open source project websites.

These are some of the basic features of markdown. But there's much more. You can finde more detailed information in the Markdown Guide and in the GitHub Markdown Guide.

From MD to MDX​

But what if you want to add some interactivity to your markdown file? You can use MDX for that. MDX is a markdown file that can contain JSX code. Isn't that great? If you use React, you know that JSX is a syntax extension for JavaScript that allows you to write HTML elements inside your JavaScript code. Once you get used to it, it gets really easy to write pages with this syntax. So with the MDX basically you can write React components inside your markdown file. Here goes an example:

Which in the code looks like this:

import BouncingBall from "../src/components/BouncingBall";

// All the markdown content

<BouncingBall />;

Basically, you just import the component and use it as you would use it in a React component. You can also declare variables and pass props to the components. So you can create a very interactive page with just a markdown file.

More cool stuff!​

Being able to use JSX in markdown files gives you a lot of power. You can create almost anything you want. You can create a live code editor, for example. Let's have a look:

  <>
    <div style={{ color: 'rebeccapurple' }}>
      <h1>Hello world!</h1>
    </div>
    <h2>You can edit this test in the live editor.</h2>
  </>

How cool is that? You can write code and see the result in real-time. And you can do this in a markdown file.