Set zsh (zshell) colors for ls command

Catalina uses zsh (zshell) instead of the old bash or (even older) sh. To set colorized display of files and directories when using the ls command, modify ~/.zprofile or ~/.zshrc with something like:

export CLICOLOR=1
export LSCOLORS=CxFxExDxBxegedabagaced

When you run the ls command, it will display the files colorized according to their type like this:

Setting CLICOLOR to 1 enables colorization. Setting LSCOLORS to the string shown sets the colors for the different file types.

For a detailed explanation of the attributes and colors and how they are set, see:

How to enable colorized output for ls command in MacOS X Terminal

Set zsh (zshell) prompt in Mac OS Catalina terminal

Catalina uses zsh (zshell) instead of the old bash or (even older) sh. To set the command prompt, modify ~/.zprofile or ~/.zshrc with something like:

#--------------------ZSH script commands--------------------#
#  %B  Bold on
#  %b  bold off
#  %F  color on, %F{green} or %F{2}
#  %f  color off
#  %D  date with strftime options in {}
#      %a  weekday 3-letter abbreviation (Mon)
#      %x  locale date (09/30/13)
#      %X  locale time (07:06:05)
#  %n  user
#  %m  machine
#  %/  directory path
#  %#  show % unless elevated privileges (sudo), then show #
#  $'\n'  newline
#
#-----------------------------------------------------------#

PROMPT="%B%F{green}%D{%a %x %X} %F{red}%n%F{white}@%F{cyan}%m %F{yellow}%/%f %#"$'\n'"> "

This will generate a prompt that looks like this, with the command prompt on the next line down:

You can use either PS1 or PROMPT. PS1 may be set in /etc/zshrc and it will override your setting. To disable it, edit /etc/zshrc and comment out the PS1 line. You may have to use sudo vim and write your changes with w! (and exit with q!) because the permissions may be set to read-only for everyone.

For a detailed explanation of setting the prompt in zsh, see:

zsh Prompt Expansion
Customizing the zsh prompt

For a list of 256 colors whose numeric values you can use in place of red, green, yellow, blue, magenta, cyan, and white, see:

256 Colors Cheat Sheet

Here's a strftime reference for options to include with %D for date and time formatting:

Python's strftime directives

Key event handlers in Vue

What I learned about setting event handling for keys in Vue is:

1. Add the v-on directive (shorthand is @) to the element (for example; @keyup, @keydown).


2. Set focus on the element (add the property tabindex="0").


3. To set focus programmatically with .focus(), if the action or event that initiated the change in focus causes the DOM to change (it usually does) you must set focus using $nextTick to wait for the DOM to update first.

<div class="notify-item-list" v-for="(entry, index) in category.entries" :key="entry.id">
    <a href="#" @click="selectItem(category.entries, index)" class="text-black" :class="{ 'text-bold': isUnread(entry) }">{{ entry.title }}</a>
    <div id="notification-modal" tabindex="0" ref="notifyModal" @keyup="navKeys" class="item-detail modal" :class="{ 'is-active': showItemDetail(entry) }">

methods: {
    selectItem: function ( entries, index ) {
        this.selectedItemIndex = index;
        this.$nextTick( () => {
            let input = this.$refs.notifyModal[index];
            input.focus();
        }),
    navKeys: function ( e ) {
        switch( e.keyCode ) {
            case 27: // esc
                this.hideItemDetail();
                break;
            case 37: // left
                this.prevNotificationDetail(this.category.entries);
                break;
            case 39: // right
                this.nextNotificationDetail(this.category.entries);
                break;
        }
    }
}

It’s a little more involved when multiple similar elements are created with the v-for directive, but you can simplify it by adding the ref="whatever" attribute, then use the index of the array to find the right object and its $refs.whatever, for example this.$refs.whatever[index]. Here’s a discussion of how to do this with v-for:

https://laracasts.com/discuss/channels/vue/vue-set-focus-to-input-created-by-v-for?page=1

See the 4th, 5th, and 6th replies by Kazuya.Gosho, MacPrawn and lukas.pierce. The last one was the most helpful. Anyway, it works like a charm. Feels a little kludgy, but considering how the user is interacting with the DOM it makes sense.