Skip to content

Instantly share code, notes, and snippets.

@ModulesUnraveled
Last active December 13, 2023 15:37
Show Gist options
  • Select an option

  • Save ModulesUnraveled/d0746a0a1c14ed69414ddc4a551b60b4 to your computer and use it in GitHub Desktop.

Select an option

Save ModulesUnraveled/d0746a0a1c14ed69414ddc4a551b60b4 to your computer and use it in GitHub Desktop.
Setup a new (M1) mac

Before anything else:

  • Dropbox: Store all the things (including my 1Password database needed next)
  • 1Password: The best password manager (Need this early so that I can enter passwords for the rest of the stuff below)

App Store:

  • Mindnode: Mind Mapping
  • Trello: Basic project board
  • Todoist: Todo manager (Integrates with google assistant)
  • Keynote: Presentations
  • Numbers: Spreadsheets
  • Pages: Documents
  • Harvest: Time tracking
  • Hidden Me: Hide desktop icons (for screen sharing and the like)
  • Slack: Work chat app
  • MindNode Pro 1: Mind Mapping
  • Moom: Window manager
  • Alfred: App launcher and so much more (Spotlight replacement)
  • Amphetamine: Keep your computer awake for ever

3rd Party

iTerm Preferences

General:

  • Closing (uncheck all)

Appearance:

  • Show tab bar even when there is only one tab

Profiles:

  • Working Directory: Reuse previous session's directory

Terminal:

  • Scrollback Lines: Unlimited scrollback

General Terminal Stuff

  • Command Line Tools: Git and stuff
    • xcode-select --install
    • If the above doesn't work, download directly from here: Apple
  • Git Config
    • git config --global user.name "Your Name"
    • git config --global user.email "[email protected]"
  • Homebrew
    • /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
  • Add the arm (M1 macs) directory to your path for bash
    • PATH=/opt/homebrew/bin:$PATH
  • wget
    • brew install wget
  • Fish: Bash replacement
    • brew install fish (Install it)
    • Add /opt/homebrew/bin/fish to /etc/shells
    • chsh -s /opt/homebrew/bin (Set it as default)
    • fish (Use it now)
  • Add the arm (M1 macs) directory to your path for fish
    • set -U fish_user_paths /opt/homebrew/bin/fish $fish_user_paths
  • Oh my Fish: Addons for Fish
    • curl https://raw.githubusercontent.com/oh-my-fish/oh-my-fish/master/bin/install | fish
  • Eden: Fish Theme:
    • omf install eden
  • NVM for Fish
    • omf install nvm
    • You have to install nvm itself separately (the curl method works fine under Fish too).
    • Install whatever version you want
      • nvm install 14
    • Set 14.15.1 (or another version) as default
      • nvm alias default 14.15.1
  • Set Fish theme settings
    • fish_config
  • Set directoryies to a legible color
    • set -Ux LSCOLORS gxfxbEaEBxxEhEhBaDaCaD

Automatically set node version if a .nvmrc file is present

Official docs: https://github.com/nvm-sh/nvm#automatically-call-nvm-use

Add the following to ~/.config/fish/config.fish

function find_up
    set path (pwd)
    while test $path != "/"
        and not test -e "$path/$argv[1]"
        set path (dirname $path)
    end
    if test -e "$path/$argv[1]"
        echo $path
    else
        echo ""
    end
end

function __check_nvm --on-variable PWD
    if status --is-command-substitution
        return
    end

    set nvm_path (find_up ".nvmrc" | tr -d '[:space:]')

    if test "$nvm_path" != ""

        set nvmrc_node_version (nvm version (cat "$nvm_path/.nvmrc"))

        if test "$nvmrc_node_version" = "N/A"
            # echo "Installing node version "(cat "$nvm_path/.nvmrc")
            nvm install
            set nvm_node_version (nvm version)
        else if test "$nvmrc_node_version" != (nvm version)
            # echo "Changing node version to $nvmrc_node_version"
            nvm use
            set nvm_node_version (nvm version)
        end
        # echo "$nvm_path/.nvmrc"
    else if test (nvm version) = "none"
        nvm use default --silent
    else if test (nvm version) != (nvm version default)
        echo "Reverting node version to default"
        nvm use default
    end
end

__check_nvm

Fish aliases

To create and save aliases, enter the following pattern:

alias <shorthand> "<text your would like to be run>"

funcsave <shorthand>

e.g.

alias gs "git status"

funcsave gs

  • alias gs "git status"; and funcsave gs
  • alias ga "git add"; and funcsave ga
  • alias gba "git branch -a"; and funcsave gba
  • alias gbd "git branch -D"; and funcsave gbd
  • alias gcm "git commit -m"; and funcsave gcm
  • alias gcam "git commit -am"; and funcsave gcam
  • alias gd "git diff"; and funcsave gd
  • alias gdw "git diff --word-diff"; and funcsave gdw
  • alias gds "git diff --staged"; and funcsave gds
  • alias gdsw "git diff --staged --word-diff"; and funcsave gdsw
  • alias gco "git checkout"; and funcsave gco
  • alias gl "git log --oneline"; and funcsave gl
  • alias gps "git push"; and funcsave gps
  • alias gpu "git push -u origin"; and funcsave gpu
  • alias gpl "git pull"; and funcsave gpl
  • alias gm "git merge"; and funcsave gm
  • alias dcdown "docker-compose down"; and funcsave dcdown
  • alias dcup "docker-compose up -d --build --remove-orphans"; and funcsave dcup
  • alias ys "yarn start"; and funcsave ys
  • alias yi "yarn"; and funcsave yi
  • alias uis "yarn upgrade; and yarn; and yarn start"; and funcsave uis
  • alias yd "yarn develop"; and funcsave yd

Create an SSH Key

  • ssh-keygen -t rsa -b 4096

Add the key to your keychain so you don't have to type your password every time

  • ssh-add --apple-use-keychain ~/.ssh/[your-private-key]
  • vi ~/.ssh/config Enter the following in to the config file:
Host *
  UseKeychain yes
  AddKeysToAgent yes
  IdentityFile ~/.ssh/id_rsa

Add additional IdentityFile lines for additional keys

RVM

  • brew install gpg: Prerequisite for installing rvm
  • RVM
    • Install gpg keys gpg --keyserver hkp://keys.gnupg.net --recv-keys 409B6B1796C275462A1703113804BB82D39DC0E3 7D2BAF1CF37B13E2069D6956105BD0E739499BDB
      • If you get this error gpg: keyserver receive failed: No route to host, runcurl -sSL https://rvm.io/mpapis.asc | gpg --import - then try again (Reference)
    • Install rvm with Ruby curl -sSL https://get.rvm.io | bash -s stable --ruby
    • Download the fish functions from GitHub curl -L --create-dirs -o ~/.config/fish/functions/rvm.fish https://raw.github.com/lunks/fish-nuggets/master/functions/rvm.fish
    • And activate the default Ruby manually in your config.fish file: echo "rvm default" >> ~/.config/fish/config.fish
    • Test it with rvm -v and ruby -v

Composer

  • M1 macs don't come with PHP, so install it brew install php (Terminus 2 doesn't work with 8, so you may need to install [email protected])
  • Follow the installation instructions here: https://getcomposer.org/download/
  • Move the composer to a globally accessible location: sudo mv composer.phar /usr/local/bin/composer
  • Increase php memory limit
    • sudo vi /etc/php.ini
    • Paste in memory_limit = 5G

Yarn

  • brew install yarn

Extensions

  • Auto Close Tag (Automatically add closing tags)
  • Code Spell Checker (... Spell Checker)
  • Color Highlight (Highlights colors in the editor to give a visual representation of the color. Also works with custom properties!)
  • ESLint (JavaScript linting)
  • ES7 React/etc. snippets (React, GraphQL, etc. support.)
  • Formatting Toggle (Gives you a button in the bottom bar to disable formatting. Useful when your linting rules should be ignored for a particular file, but you don't want to add ignore code.)
  • Live Preview (Live preview, useful for projects that don't have a local server running.)
  • MDX (Support for MDX files)
  • One Dark Pro (Dark theme I like. Must enable it after install)
  • Prettier - Code formatter (Enable Prettier formatting on save and stuff.)
  • Stylelint (css, sass, etc. linting)
  • Toggle Quotes (Lets you toggle between double, single, and backticks with just a keystroke)
  • Twig Language 2 (Twig syntax highlighting etc.)
  • Package ++ (A collection of extensions to "Boost your Visual Studio code, individually chosen extensions, to help the day to day programmer." Includes the following:)
    • Auto Rename Tag (Automatically rename closing - or opening - tags when you edit one of them.)
    • Bookmarks (If you have a piece of code that you want to consult in the future, you can use the bookmark, it is very useful to consult a line that you found interesting in the debugger)
    • Bracket Pair colorizer (Colors brackets for easier identification.)
    • Conventional Commits (This extension helps you to fill in commit message according to Conventional Commits.)
    • Dark++ Theme (Dark++ theme for vscode)
    • GitLense (Git info in the editor.)
    • Key Bindings Visual Studio (I actually uninstalled this one. It was massing with "alt-left/right" moving the cursor a word at a time)
    • Live Server (A Quick Development Live Server with live browser reload.)
    • Live Share (Collaborative coding made awesome!)
    • Material Icon Theme (Pretty icons. Must enable it after install)
    • Path Intellisense (Visual Studio Code plugin that autocompletes filenames.)
    • Quokka (No more console.log, this tool gives you the result, in real time without executing the code, knowing exactly what that function will return as soon as you call it)
    • TabNine (This extension is great for auto completing codes, the tool has an intelligence that helps you along the development)
    • Todo Highlight (That TO DO or FIX ME in the comment, remember? So this extension makes it very elegant in your comment and with a highlight for you to remember that adjustment in the code)

Install shell extension

  • Open Visual Studio Code and access the Command Palette (⇧⌘P) and start typing "shell command" and select option "Shell Command: Install ‘code’ command in PATH".
  • After that you’re able to start a new terminal window, change into your project directory and use code . to open the current directory in Visual Studio Code.

text snippets

Twig Include

{
  "Twig Include": {
    "prefix": "tinclude",
    "body": [
      "{% include \"@${1:atoms/text/headings/_heading.twig}\" ${2:with {",
      "  ${3:heading_level}: '${4:3}',",
      "  ${5:heading_blockname}: ${6:component}__base_class,$0",
      "\\} }%}"
    ]
  }
}

Twig Embed

{
  "Twig Embed": {
    "prefix": "tembed",
    "body": [
      "{% embed \"@${1:atoms/text/headings/_heading.twig}\" ${2:with {",
      "  ${3:something}: ${4:awesome},$0",
      "\\} }%}",
      "  {% block ${5:super} %}",
      "    ${6:{{ cool \\}\\}}",
      "  {% endblock %}",
      "{% endembed %}"
    ]
  }
}

Twig Extends

{
  "Twig Extends": {
    "prefix": "textends",
    "body": [
      "{% extends \"@${1:templates/_default.twig}\" %}",
      "  {% block ${2:page_content} %}",
      "    ${3:{{ content \\}\\}}",
      "  {% endblock %}"
    ]
  }
}

Twig Set

{
  "Twig Set": {
    "prefix": "tset",
    "body": [
      "{% set ${1:something} ${2:= ${3:awesome} }%}",
      "$0",
    ]
  }
}

Twig If

{
  "Twig If": {
    "prefix": "tif",
    "body": [
      "{% if ${1:something} ${2:== ${3:awesome} }%}",
      "  ${4:{{ do stuff \\}\\}}",
      "{% endif %}",
    ]
  }
}

Twig For Loop

{
  "Twig for loop": {
    "prefix": "tfor",
    "body": [
      "{% for ${1:item} in ${2:items} %}",
      "  ${3:{{ item.content \\}\\}}$0",
      "{% endfor %}",
    ]
  }
}

Twig Block

{
  "Twig Block": {
    "prefix": "tblock",
    "body": [
      "{% block ${1:block} %}",
      "  ${2:{{ content \\}\\}}",
      "{% endblock %}"
    ]
  }
}

Element with BEM function

{
  "Element with BEM class naming": {
    "prefix": "ebem",
    "body": [
      "<${1:div} {{ bem(${3:$2__base_class}${4:, [$5]${6:, $2__base_class}}) }}>",
      "  $0",
      "</$1>",
    ]
  }
}

Storybook Story Template

{
  "Write a New Story": {
    "prefix": "story",
    "body": [
      "import React from 'react';",
      "",
      "// Component Twig",
      "import ${1:pageTitle}Twig from './${2:page-title}.twig';",
      "",
      "// Component Data",
      "import ${1:pageTitle}Data from './${2:page-title}.yml';",
      "",
      "// Menu Location",
      "export default { title: 'Molecules/Page Title' };",
      "",
      "// Component Examples",
      "export const ${1:pageTitle} = () => (",
      "  <div dangerouslySetInnerHTML={{ __html: ${1:pageTitle}Twig(${1:pageTitle}Data) }} />",
      ");",
    ]
  }
}

Settings

{
  //--------------------------//
  // VS Code Interface Tweaks //
  //--------------------------//
  // Disable breadcrumbs
  "breadcrumbs.enabled": false,
  // Make the cursor solid at all times (disables blinking)
  "editor.cursorBlinking": "solid",
  // Disable the minimap
  "editor.minimap.enabled": false,
  // Show rulers at 80 and 100 character
  "editor.rulers": [80, 100],
  // Always show the folding controls
  "editor.showFoldingControls": "always",
  // Hide the Editor, Search, Extenstions, etc. bar.
  // You can still get to them via hot-keys or the "View" menu
  "workbench.activityBar.visible": false,
  // My preferred theme
  "workbench.colorTheme": "One Dark Pro",
  // Hide the close button on tabs to condense them a bit
  "workbench.editor.tabCloseButton": "off",
  // Condense the tabs at the top just a bit
  "workbench.editor.tabSizing": "shrink",
  // Material theme icons
  "workbench.iconTheme": "material-icon-theme",
  // Enables horizontal scrolling in the sidebar
  "workbench.list.horizontalScrolling": true,
  // Add the path to the file in the window title
  "window.title": "${activeEditorMedium}${separator}${rootName}",
  // Starts up new windows with a new untitled file
  "workbench.startupEditor": "newUntitledFile",
  // Focus on files in the sidebar when selected in the main editor window
  // But don't move the sidebar scroll position to them
  "explorer.autoReveal": "focusNoScroll",
  // UI (font) size
  "window.zoomLevel": 0,
  //----------------------//
  // Code Writing Helpers //
  //----------------------//
  // Enable auto-closing of tags in all file types
  "auto-close-tag.activationOnLanguage": ["*"],
  // Set tabs to equal two spaces
  "editor.tabSize": 2,
  // Tell emmet to work on .js files (not just when specified as react)
  "emmet.includeLanguages": {
    "javascript": "javascriptreact",
    "twig": "html"
  },
  // Tell emmet to use single quotes
  "emmet.syntaxProfiles": {
    "jsx": {
      "attr_quotes": "single"
    }
  },
  //-----------------------------//
  // Code Linting and Formatting //
  //-----------------------------//
  // Associate extensions with languates
  "files.associations": {
    "*.theme": "php",
    "*.module": "php",
    "*.inc": "php",
    "*.install": "php",
    "*.html": "twig"
  },
  // Style linting //
  // Disable VS Code's validation of css, less, and scss because we're using Stylelint
  // (This just prevents duplicate reports in the log)
  "css.validate": false,
  "less.validate": false,
  "scss.validate": false,
  // Turn on Auto Fix for all providers (including eslint)
  "editor.codeActionsOnSave": {
    "source.fixAll": true
  },
  // Use prettier to format code
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[scss]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[html]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[typescriptreact]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[jsonc]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // Format json with the json formatter
  "[json]": {
    "editor.defaultFormatter": "vscode.json-language-features"
  },
  // General linting/formatting
  // Format on Paste
  "editor.formatOnPaste": true,
  // Format on Save
  "editor.formatOnSave": true,
  // Format on Type
  "editor.formatOnType": true,
  // Insert a final newline
  "files.insertFinalNewline": true,
  // Remove additional newlines after the "final" one
  "files.trimFinalNewlines": true,
  // Trim any whitespace at the end of lines
  "files.trimTrailingWhitespace": true,
  //------------------//
  // User Preferences //
  //------------------//
  // Custom dictionary
  "cSpell.userWords": [
    "Contentful",
    "Coronavirus",
    "Covid",
    "Gladwell",
    "Infographics",
    "Inveniem",
    "Invision",
    "Kalamuna",
    "Promet",
    "Theming",
    "airbnb",
    "analytes",
    "audiobooks",
    "browserslistrc",
    "commitlint",
    "confex",
    "confim",
    "contactless",
    "contenteditable",
    "drush",
    "endblock",
    "endembed",
    "endfor",
    "kint",
    "lando",
    "lightbox",
    "mixins",
    "roadmap",
    "spbb",
    "sqaush",
    "srcset",
    "stylelint",
    "stylelintrc",
    "swiper",
    "tabindex",
    "twatch",
    "updb"
  ],
  // Don't confirm when deleting files in the explorer
  "explorer.confirmDelete": false,
  // Don't confirm when dragging and dropping files in the explorer
  "explorer.confirmDragAndDrop": false,
  // Use iTerm when opening current project in terminal (Cmd + Shift + C)
  "terminal.external.osxExec": "iTerm.app",
  // Liveshare auth provider
  "liveshare.authenticationProvider": "GitHub"
}

Fish Aliases

  • alias mampsql "/Applications/MAMP/Library/bin/mysql --host=localhost -uroot -proot"
  • funcsave mampsql

Increase max_allowed_packets

  • Create the file: touch /Applications/MAMP/Library/my.cnf
  • Write the first line: echo "[mysqld]" >> /Applications/MAMP/Library/my.cnf
  • Write the second line: echo "max_allowed_packet=64M" >> /Applications/MAMP/Library/my.cnf
  • Restart MAMP

Check the value:

  • mampsql
  • SHOW VARIABLES LIKE 'max_allowed_packet';

Divide the value by 1048576 (1024x1024) and verify it's set to the value in the second line above

Enable Virtual Hosts

  • Edit httpd.conf: vi /Applications/MAMP/conf/apache/httpd.conf
  • Find the right line: Press /, then type/paste # Virtual hosts
  • Uncomment the next line #Include /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

Enable MySql

  • sudo ln -s /Applications/MAMP/Library/bin/mysql /usr/local/bin/mysql
  • sudo mkdir /var/mysql
  • sudo ln -s /Applications/MAMP/tmp/mysql/mysql.sock /var/mysql/mysql.sock

Installing a Drupal Site

Create the database

  • Go to: localhost/phpMyAdmin
  • Create the database
  • Import existing database

Clone the code base

  • git clone <repo>

Add the site to /etc/hosts

sudo vi /etc/hosts

Add the vhost to /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

vi /Applications/MAMP/conf/apache/extra/httpd-vhosts.conf

<VirtualHost *:80>
    DocumentRoot "/path/to/docroot"
    ServerName loc.domain.tld
</VirtualHost>

Restart MAMP

Configure database settings in settings.php and settings.local.php

@Todo

Terminus

https://pantheon.io/docs/terminus/install

Update: This may be all that's needed. If it works, don't do anything else below

http://webchick.net/drush-and-drush

Install Multiple Versions of Drush

Follow the next steps for each version of Drush you need to install

  • cd /usr/local/bin
  • mkdir drush-9
  • cd drush-9
  • composer require drush/drush:^9
  • cd ..
  • ln -s drush-9/vendor/bin/drush drush9

If you do this for versions 7-9, you'll be able to run any of the following: drush7 status drush8 status drush9 status

Create Shell Script to Automatically Select Drush Version Based on Git Config

  • cd /usr/local/bin
  • vi drush
  • paste the following
#!/bin/sh
version=$(git config --get drush.version)
if [ "$version" = '7' ];
then
    drush7 "$@"
elif [ "$version" = '8' ];
then
    drush8 "$@"
else
    drush9 "$@"
fi
  • Save the file
  • Make the script executable chmod +x drush

This makes drush 9 the default when we type a command like "drush --version". In order to use Drush 7 (or 8), we need to set a configuration variable in the git repo of the project that should use it.

Set Drush 7 (or 8) as the Required Version for a Project

  • cd /path/to/project
  • git config drush.version 7
  • drush --version (to see which version is active)
#!/bin/sh
# Installation:
# - Copy this file to /usr/local/bin/4k
# - Make it executable `chmod +x /usr/local/bin/4k`
#
# Use:
# - Run `4k <command>`
# - If you haven't configured that command for the current project
# you'll be asked to configure it now
# - If you have already configured it, it'll be run
#
# Example:
# - `4k rebuild` can be configure to run:
# - `aquifer run rebuild` in an old D7 site
# - `gulp run -t rebuild` in a project that uses gulp for build tasks
# - Any other repo-specific script that accomplishes the task
command=$(git config --get alias.$@)
if [ "$command" = '' ];
then
echo "No command"
read -p "Do you want to enter it now? [y/n]: " -n 1 -r
echo "\n"
if [[ $REPLY =~ ^[Yy]$ ]]
then
read -p "Enter the command for $@: " input;
echo "git config alias.$@ $input"
git config alias.$@ "$input"
else
echo "Okie doke. Nothing saved."
fi
else
echo "\nRunning \"$command\"\n"
$command
fi
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment