
![vscode type truncation](/articles/vscode-type-truncation.png)

I've been working with some fairly large types on a recent project and vscode (coc typescript with vim) will automatically truncate the type when it's over 160 characters. This is a pretty painful deadend when inspecting a type and the workaround isn't the simplest.

I initially tired setting the `noErrorTruncation` option to `true` in my `tsconfig.json` as described in the accepted answer [here](https://stackoverflow.com/questions/53113031/how-to-see-a-fully-expanded-typescript-type-without-n-more-and) and while this does work, it stops at 160 characters.

Turns out the solution to override this hard limit is to manually update vscode's tsserver source code. If your running vim, find the tsserver coc is using.

For me I found this file (on a Mac) at the location `/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/extensions/node_modules/typescript/lib/tsserver.js`

You'll then want to update the `ts.defaultMaximumTruncationLength` var to your wanted amount, note that the larger it is, the higher the chance of the process crashing.


**~/.tsserver.js**
```
(function (ts) {
    ts.resolvingEmptyArray = [];
    ts.externalHelpersModuleNameText = "tslib";
    ts.defaultMaximumTruncationLength = 2000;
    ts.noTruncationMaximumTruncationLength = 180;
    function getDeclarationOfKind(symbol, kind) {
```



I'm currently in the process of moving over to MacOS from Arch Linux as my daily driver. This article will outline my decisions for the command line. With a focus on [alacritty](https://github.com/alacritty/alacritty), [ohmyzsh](https://github.com/ohmyzsh/ohmyzsh), [tmux](https://github.com/tmux/tmux), and [teamocil](https://github.com/remi/teamocil). I'll follow up with an article outlining my vim setup.

The main change since the last time I ran MacOS as my daily driver, will be swapping out ITerm2 for Alacritty. This is mainly due to not needing tab support, as I use tmux's tabs and windows, and the fact alacritty can be configured through a .yml file rather than though a UI panel. 

### Alacritty
Alacritty is a fast, cross-platform, OpenGL terminal emulator. Alacritty is bare bones, with no support for tabs.

Using a .yml file is great since you can set it up once, get it in version control, and use across multiple devices and installs. It also allows for easy setup with a bash script, a pain point for MacOS setup for me is having to do everything setup multiple applications through a UI.

This should live `~/.config/alacritty/alacritty.yml` or `~/.alacritty.yml`. This is my current alacritty config, with [dracula theme colors](https://draculatheme.com/) and use of Adobe's OSS [Source Code Pro](https://github.com/adobe-fonts/source-code-pro) typeface.

**~/.alacritty.yml**

```yml
# Copy with mouse
selection:
  # This string contains all characters that are 
  # used as separators for "semantic words" in Alacritty.
  semantic_escape_chars: ",│`|:\"' ()[]{}<>\t"
  # When set to `true`, selected text will be copied 
  # to the primary clipboard.
  save_to_clipboard: true

mouse:
  hints:
    launcher:
      # This depends on your OS, on Mac it’s `open`
      program: open
    modifiers: Command

cursor:
  style: Block

font:
  normal:
    family: Source Code Pro
  size: 17

# Allow for alt key bindings
key_bindings:
  - { key: Key0, mods: Alt, chars: 'º' }
  - { key: Key1, mods: Alt, chars: '¡' }
  - { key: Key2, mods: Alt, chars: '€' }
  - { key: Key3, mods: Alt, chars: '#' }
  - { key: Key4, mods: Alt, chars: '¢' }
  - { key: Key5, mods: Alt, chars: '∞' }
  - { key: Key6, mods: Alt, chars: '§' }
  - { key: Key7, mods: Alt, chars: '¶' }
  - { key: Key8, mods: Alt, chars: '•' }
  - { key: Key9, mods: Alt, chars: 'ª' }

# https://draculatheme.com/alacritty
colors:
  primary:
    background: '#282a36'
    foreground: '#f8f8f2'
    bright_foreground: '#ffffff'
  cursor:
    text: CellBackground
    cursor: CellForeground
  vi_mode_cursor:
    text: CellBackground
    cursor: CellForeground
  search:
    matches:
      foreground: '#44475a'
      background: '#50fa7b'
    focused_match:
      foreground: '#44475a'
      background: '#ffb86c'
    bar:
      background: '#282a36'
      foreground: '#f8f8f2'
  hints:
    start:
      foreground: '#282a36'
      background: '#f1fa8c'
    end:
      foreground: '#f1fa8c'
      background: '#282a36'
  line_indicator:
    foreground: None
    background: None
  selection:
    text: CellForeground
    background: '#44475a'
  normal:
    black: '#21222c'
    red: '#ff5555'
    green: '#50fa7b'
    yellow: '#f1fa8c'
    blue: '#bd93f9'
    magenta: '#ff79c6'
    cyan: '#8be9fd'
    white: '#f8f8f2'
  bright:
    black: '#6272a4'
    red: '#ff6e6e'
    green: '#69ff94'
    yellow: '#ffffa5'
    blue: '#d6acff'
    magenta: '#ff92df'
    cyan: '#a4ffff'
    white: '#ffffff'
```

![alacritty colors](/terminal/colors.png)

### OhMyZsh
Easy to setup following their [instructions](https://github.com/ohmyzsh/ohmyzsh), this supplies a number of extras to zsh but the main one I use it for is adding git status to your prompt along with easy themes.

**~/.zshrc**

```
# Path to your oh-my-zsh installation.
export ZSH="$HOME/.oh-my-zsh"

ZSH_THEME="zhann"

plugins=(git)

source $ZSH/oh-my-zsh.sh
```

![ohmyzsh](/terminal/ohmyzsh.png)


### Tmux

[Tmux](https://github.com/tmux/tmux) is a "terminal multiplexer", put simply it allows for managing multiple terminals in tabs and windows. Each session is managed on device, so I could SSH into server start a session, leave, and then come back in a few days and attach to that session, with everything still running. This is perfect is your internet is patchy, as it'll keep running your commands on device if your internet fails.

This paired with teamocil, for creating sessions, allows for a setup once use multiple times approach.

### Tmux Cheatsheet
```zsh
# Sessions
tmux new -s session_name       # Create new session
tmux ls                        # List all sessions
tmux attach -t session_name    # Attach to session
tmux detach                    # Detach from current session
tmux kill-session              # End session
tmux kill-server               # End all sessions
tmux $                         # Rename session

# C-b stands for Ctrl+b (this prefix can be reset in conf)

# Panes
C-b %                          # Default new vert pane
C-b "                          # Default new horz pane
C-b |                          # My new vert pane
C-b -                          # My new horz pane
C-b o                          # Go to next pane
C-b space                      # Toggle layout
C-b z                          # Toggle pane fullscreen

# Windows
C-b c                          # Create new window
C-b n                          # Go to next window
C-b p                          # Go to prev window
C-b 1                          # Go to window 1
C-b ,                          # List all windows
C-b w                          # Rename window

# Misc
C-b d                          # Detach session
```

### Teamocil
Teamocil allows for automating tmux session creation from a config file, with full support for pane and window layouts with commands.

Here's an example node.js + react project setup. This is create two windows, the first with a vim session, the second with a window split into two vertical panes. Here we automatically install the corect version of node with nvm, then run the correct process for either the api service or the react project.

**~/.teamocil/project.yml**

```yml
name: "project name"
windows:
  - name: vim
    root: ~/project-dir
    panes:
      - v .
  - name: runners
    root: ~/project-dir
    layout: even-horizontal
    panes:
      - commands:
        - cd api
        - nvm install
        - yarn start:dev
      - commands:
        - cd web
        - nvm install
        - yarn start
```

To run teamocil, you'll need to be in tmux first, then run teamocil with `--here` to avoid creating an extra window.

```zsh
tmux
teamocil project --here
```




In most things I try I normally fail due to one thing, consistency. When I start a project it's all I think about. I dream of all the possibilities, and focus down on the details. However after a time there is always a new shiny project around the corner, that steals my attention. When I move onto the next thing the original project just ends up sitting in a directory on my computer gathering dust.

Noah Kagan has a [great video](https://www.youtube.com/watch?v=KLgIrxXvb44) about his method **The Law of 100**. In it he talks about a study by the University of Miami that broke up their photography class into two cohorts:

- **Quantity** - They had to take 100 photos in a semester to get an A
- **Quality** - They only had to take 1 perfect photo to get an A

The results at the end of the semester show the quantity group came out stronger. This was because they focused on repetition. They experimented more and learned from their mistakes, making them improve over time. No one gets better doing something by just thinking about it, you need to practice and produce to improve.

So my plan is to write 100 articles on this website. Share what I'm currently learning and working on. So when I do things there will be documentation of it and hopefully someone else can learn something from my work.

Here's my current progress: 

<LawOf100 />



I'm intending to start writing a lot more articles on this site, so for this rebuild I wanted to keep the layout completely separate from the article content. This will enable me to update the site layout without updating the articles themselves.

I want to be able to write content in markdown, but also to embed React components and have code syntax highlighting throughout my articles.

### Article content with Markdown

Step one is to handle the rendering of our content. We'll use a number of packages to handle all the specific features we need.

- [next-mdx-remote](https://www.npmjs.com/package/next-mdx-remote) Markdown rendering with React component support
- [gray-matter](https://www.npmjs.com/package/gray-matter) YAML meta data support
- [react-highlight](https://www.npmjs.com/package/react-highlight) Code syntax highlighting, with easy theming

This will enable us to write our articles like the following:

````
---
title: Hello
slug: home
---

Article content in **markdown.**

## Component example
<ReactComponent />

More content in **markdown.**

```ts
function syntaxHightlight(){
  return '';
}
``
````

### How it'll work

The articles are stored in a directory and we'll use a NextJS template to render the layout of the page with an `<article>` to contain the articles content.

When a user visits a url such as `/p/article-name`, we'll search our content directory for an article with a filename that matches the url.

With our directory structure looking like the following:

- /content/ will contain mdx posts
- /pages/p/[slug].tsx will contain template

### Listing our articles

For the homepage we want to show a list of articles. We'll need access each content file and process the meta data for the title to render. For this we need the following helper functions:

```ts
import fs from "fs";
import path from "path";
import matter from "gray-matter";
import { Post } from "types";

// Our /content directory, which contains multiple .mdx files
const contentDirectory = path.join(process.cwd(), "content");

export async function getPostSlugs(): Promise<string[]> {
  // Get all the files in our content directory
  const slugs = fs.readdirSync(contentDirectory);
  // Return a list without their file extension
  return slugs.map((s) => s.replace(".mdx", ""));
}

export async function getPost(slug: string): Promise<Post> {
  // Get file content
  const postPath = path.join(contentDirectory, `${slug}.mdx`);
  const postSource = fs.readFileSync(postPath);
  // Extract meta data
  const { content, data: meta } = matter(postSource);
  return {
    slug,
    content,
    meta,
  };
}

export async function getPosts(): Promise<Post[]> {
  const slugs = await getPostSlugs();
  // Loop through each file and return it's meta data and content
  return await Promise.all(
    slugs.map(async (slug) => {
      return await getPost(slug);
    })
  );
}
```

With our article content processed in the previous helpers, we can easily fetch our articles when will build our site with `getStaticProps` and then pass our articles to our Home page as props

**/pages/index.ts**

```ts
export async function getStaticProps() {
  const posts = await getPosts();
  return { props: { posts } };
}

const Home: NextPage = ({ posts }) => {
  return (
    <>
      {posts.map(({ slug, meta }) => (
        <a href={`/p/${slug}`} key={slug}>
          <h2>{meta.title}</h2>
        </a>
      ))}
    </>
  );
};
```

## Rendering our article

Now that our users can follow a link to our article. We can use the url slug to get the correct article content, and then render this content with `<MDXRemote />`.

Note that since we want to embed React components we need to do this server side with `getStaticProps` or `getInitialProps`.

**/pages/p/[slug].ts**

```ts
export const getStaticPaths: GetStaticPaths = async () => {
  // Get all our article's and return each one slug as an available page url
  const slugs: string[] = await getPostSlugs();
  const paths = slugs.map((slug) => {
    return {
      params: { slug },
    };
  });
  return { paths, fallback: "blocking" };
};

export const getStaticProps: GetStaticProps = async (context) => {
  // Use our url slug to get the correct article content
  const slug = context?.params?.slug || "";
  const { content, meta } = await getPost(String(slug) || "");
  // Use MDXRemote's serialize to get our correct embedded React components
  const mdx = await serialize(content);

  return {
    props: {
      meta,
      mdx,
    },
  };
};

const Post: NextPage = ({ meta, mdx }) => {
  return (
    <>
      <h1>{meta?.title}</h1>
      <MDXRemote {...mdx} components={{ pre: Highlight }} />
    </>
  );
};

export default Post;
```


I'm a product engineer focused on building collaborative tools for the web.

Projects

Nmblr

Cables

Open Type Collective

InMySize

Experiments

Articles

Show whole truncated type in vscode & vim

MacOS command line setup

Law of 100

Using MDX for a NextJS blog