Devine Development Workflows

website·Indexed 30 days ago

https://devinekask.github.io/workflows/

A collection of developer guides and walkthroughs covering essential tools and practices, including Git and GitHub (branching, merge conflicts, GitHub Flow), NPM, NPX, Vite, ESLint, Stylelint, EditorConfig, Homebrew, terminal commands, .env files, and deployment via FTP.

Tokens
10.2K
Snippets
76
Records
105
Agent score
72%

What's inside Devine Development Workflows

  1. Overview of ESLint and Static Analysis

    ESLint is a static analysis tool for JavaScript used to identify and report problems, such as formatting issues (e.g., missing semicolons) or problematic patterns (e.g., undeclared variables). Linting helps ensure code adheres to style guidelines and reduces potential runtime errors.
  2. Understand the GitHub Flow workflow principles

    GitHub Flow is a lightweight, branch-based workflow designed for teams that deploy regularly. It follows these core principles:

    1. The main branch must always be deployable.
    2. All new work starts by creating a descriptive feature branch from main.
    3. Work is committed locally and pushed regularly to the remote feature branch.
    4. Pull Requests (PRs) are used to request feedback and signal that a branch is ready for merging.
    5. After review and approval, the feature branch is merged into main.
    6. Deployment to production should happen immediately after merging into main.
  3. Troubleshoot FileZilla connection errors

    When connecting to a server for the first time, FileZilla may display a warning about an 'unknown host key'; check 'Always trust this host' and click 'OK' to proceed. If a connection error occurs, verify that there are no typos in the host name, username, or password.
  4. Understand Homebrew Taps

    Taps are repositories that contain lists of packages. Homebrew uses a default tap called homebrew/core for most command-line tools. Other taps, such as homebrew/cask, allow you to install and manage full GUI applications.
  5. Initialize ESLint in a JavaScript project

    Initialize ESLint by running the configuration wizard. This process asks a series of questions about the project and generates a .eslintrc.json file in the project root containing the active rules. It is recommended to base the ruleset on a popular standard, such as the 'airbnb' ruleset.
    npm init @eslint/config
  6. Understand the npm ecosystem

    npm (Node Package Manager) allows developers to share and reuse JavaScript modules, referred to as "packages".

    • Registry: A large database that tracks all available packages and their versions. Anyone can publish a package to the registry.
    • Website (npmjs.com): A web interface used to search for packages, read documentation (READMEs), and check package health (e.g., last updated date).
    • CLI: The npm command-line tool is used to install, update, and publish packages.
  7. Understand JavaScript Modules for code organization

    JavaScript modules allow developers to split code by functionality, making projects more structured, clearer, and easier to reuse or share. While early JavaScript lacked a native mechanism for splitting code (relying on Node.js require(), RequireJS, Webpack, or Babel), ES6 introduced a native module syntax that is now supported in both the browser and Node.js.
  8. Track and commit changes in Git

    To save changes to a Git repository, you must first 'stage' the files using git add and then record the snapshot using git commit.

    1. Check status: Use git status to see which files are untracked or modified.
    2. Stage files: Use git add <filename> to move a file to the staging area. This tells Git you want to include these changes in the next snapshot.
    3. Commit changes: Use git commit -m "message" to permanently record the staged changes into the repository history.
    # Stage a specific file
    git add hello.txt
    
    # Commit the staged changes with a descriptive message
    git commit -m "first commit"
  9. Maintain consistent coding styles with EditorConfig

    Use an .editorconfig file in the root of your project to enforce consistent conventions for indentation (tabs vs spaces), character encoding, and line endings across different editors and team members. This prevents formatting conflicts when collaborating on a shared codebase.
    root = true
    
    [*]
    indent_style = space
    indent_size = 2
    end_of_line = lf
    charset = utf-8
    trim_trailing_whitespace = true
    insert_final_newline = true
  10. Create and manage feature branches in GitHub Flow

    In GitHub Flow, all development occurs on feature branches to keep the main branch stable. To start a new feature, ensure your local main branch is up to date before creating a new branch.
    # Ensure you are on main and up to date
    git switch main
    git pull origin main
    
    # Create and switch to a new feature branch
    git switch -c feature/add-user-profile
    
    # Verify current branch
    git branch
  11. Run Node.js packages without installation using npx

    npx is a command-line tool bundled with Node.js that allows you to execute node scripts without permanently installing them on your system. When a command is run via npx, the package is downloaded to a local cache and executed, avoiding the need to manage global installations or version conflicts.
    # Run a package (like cowsay) without installing it
    npx cowsay devine
  12. Merge latest changes from main into a feature branch

    To prevent your feature branch from becoming outdated and to resolve conflicts before a PR is merged, you should regularly merge main into your feature branch. This creates a merge commit and keeps the workflow simple.
    # Switch to your feature branch
    git switch feature/add-user-profile
    
    # Merge the latest main into your feature branch
    git merge main
    
    # If conflicts occur, resolve them in the files, then:
    git add <resolved-files>
    git commit
    
    # Push the updated feature branch
    git push origin feature/add-user-profile