Development Efficiency Tips - 21 Practical Techniques to 10x Your Daily Workflow¶

# ~/.bashrc or ~/.zshrc
alias gs='git status'
alias ga='git add .'
alias gc='git commit -m'
alias gp='git push'
alias gb='git branch'
alias ll='ls -la'
alias ..='cd ..'
alias ...='cd ../..'
alias py='python3'
alias serve='python3 -m http.server 8000'

# Ctrl+R for history search
# Use fzf for advanced history search
brew install fzf

# Add to ~/.bashrc
[ -f ~/.fzf.bash ] && source ~/.fzf.bash

# Shortcuts to frequently used directories
alias proj='cd ~/Documents/projects'
alias docs='cd ~/Documents'
alias desk='cd ~/Desktop'

# Or use autojump
brew install autojump
# Add to ~/.bashrc
[[ -s $(brew --prefix)/etc/profile.d/autojump.sh ]] && . $(brew --prefix)/etc/profile.d/autojump.sh

# Global settings for efficiency
git config --global alias.co checkout
git config --global alias.br branch  
git config --global alias.ci commit
git config --global alias.st status
git config --global alias.unstage 'reset HEAD --'
git config --global alias.last 'log -1 HEAD'
git config --global alias.visual '!gitk'

# Better log display
git config --global alias.lg "log --color --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit"

# Auto-generate gitignore for new projects
curl -L https://www.gitignore.io/api/node,python,macos,windows,linux > .gitignore

# Temporarily save work in progress
git stash push -m "WIP: feature in progress"

# Manage named stashes
git stash list
git stash apply stash@{0}
git stash drop stash@{0}

// JavaScript snippets example
{
  "Console log": {
    "prefix": "cl",
    "body": ["console.log($1);"],
    "description": "Console log"
  },
  "Function": {
    "prefix": "fn",
    "body": [
      "function $1($2) {",
      "  $3",
      "}"
    ],
    "description": "Function declaration"
  }
}

<!-- div.container>ul.list>li.item*3>a -->
<div class="container">
  <ul class="list">
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
    <li class="item"><a href=""></a></li>
  </ul>
</div>

# VS Code extension "Live Server"
# Or
npx live-server

{
  "scripts": {
    "dev": "npm run build && npm run serve",
    "build": "webpack --mode production",
    "serve": "live-server dist/",
    "test": "jest",
    "lint": "eslint src/ --fix",
    "deploy": "npm run build && gh-pages -d dist"
  }
}

# .env file
NODE_ENV=development
API_URL=http://localhost:3000
DATABASE_URL=postgresql://localhost/myapp

// Usage example
const apiUrl = process.env.API_URL || 'https://api.example.com';

# Simple Node.js environment
FROM node:16-alpine
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
EXPOSE 3000
CMD ["npm", "start"]

// Useful console techniques
console.table(data);  // Display in table format
console.time('timer'); // Start timing
console.timeEnd('timer'); // End timing

// Easy DOM element selection
$('selector')  // Short for document.querySelector()
$$('selector') // Short for document.querySelectorAll()

// Measure function execution time
function measurePerformance(func, ...args) {
  const start = performance.now();
  const result = func(...args);
  const end = performance.now();
  console.log(`Execution time: ${end - start}ms`);
  return result;
}

# Format JSON in command line
curl -s https://api.example.com/data | python -m json.tool

# Or use jq
curl -s https://api.example.com/data | jq .

/* Simple grid layout */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

/* Ultimate centering */
.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Manage with SCSS variables
$breakpoints: (
  mobile: 480px,
  tablet: 768px,
  desktop: 1024px,
  wide: 1200px
);

@mixin respond-to($breakpoint) {
  @media (min-width: map-get($breakpoints, $breakpoint)) {
    @content;
  }
}

// Usage example
.container {
  width: 100%;

  @include respond-to(tablet) {
    width: 750px;
  }

  @include respond-to(desktop) {
    width: 1000px;
  }
}

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --danger-color: #e74c3c;
  --font-family: 'Roboto', sans-serif;
  --border-radius: 4px;
  --box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.button {
  background-color: var(--primary-color);
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow);
}

.loading {
  border: 2px solid #f3f3f3;
  border-top: 2px solid var(--primary-color);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

# .github/workflows/deploy.yml
name: Deploy
on:
  push:
    branches: [ main ]
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v2
    - name: Setup Node.js
      uses: actions/setup-node@v2
      with:
        node-version: '16'
    - run: npm install
    - run: npm run build
    - run: npm run deploy

{
  "scripts": {
    "prebuild": "rm -rf dist",
    "build": "webpack --mode production",
    "postbuild": "cp -r public/* dist/",
    "pretest": "npm run lint",
    "test": "jest",
    "start": "npm run build && npm run serve"
  }
}