week05README.md

Week 4 Overview

Content

• Questions
• Schedule
• Summary & Sessions
• Additional Readings
• Homework

Questions

Schedule

• R: Prettier

• R: ESLint

• P: JS30: 14 Tool Tips

• P: JS30: Multiple Checkboxes

• P: Collab Agency

• P: Portfolio refactor

• R: Challenges: Create GitHub repo, Read & Write

• R: Guest Prep

Summary & Sessions

Additional Readings:

• Keybinding to Comment out several lines of code in one go: Ctrl+K+C / Ctrl+K+U

Homework

Routine

• Execute: Array
• Khan Academy:
  • Computer Science
  • Algebra 1
• Terminal, GitHub
• Twitter

Collab Project: Sprint

Task

• Your challenge for the next two weeks is to build an agency website for your team.

• Your website should give potential clients:

  • An introduction to your agency
  • Information about each member of your team

• User Stories:

  1. As a potential client, I want to:
  • B See information about each member of your team so that I can know who you are (E1)
  • Browse your website on mobile, tablet, and desktop devices (E3)
  • Click to navigate to different sections of your webpage (E1)
  • B Visit your website at a publicly accessible domain name (E2)
  2. Additionally, as a visually impaired user, I want to:
  • B Navigate your website using keyboard controls (E2)
  • Hear my screen reader describe the content on your website (E1)

• Acceptance Criteria

  • Navigation menu
  • ‘About us’ section
  • Images, text and external links
  • Semantic HTML elements
  • Stretch Goal: Use the automatic trigger functionality of your GitHub project board.

Background Prep

• git branches → fac workshop, notes, make crib sheet
• Scrum method

Steps

Prep

• Task:
  • Understand tasks
  • distribute with A
• Set up:
  • clone repo locally
  • file structure?
  • Start GitHub Project board, Issues?
• Gather Content:
  • Topics: cartoon characters?
  • Text
  • img
  • links
• Plan Page:
  • Content
  • HTML Structure → semantic
  • CSS Layout → devices
  • CSS Style → color, font
  • ? JS Functionality ?
  • Check with
    • acceptance criteria
    • a11y
    • cohort

Research Spikes

• Prettier

  • Read: https://www.digitalocean.com/community/tutorials/how-to-format-code-with-prettier-in-visual-studio-code

  • Download

  • Have one configuration file for cohort?

    • E.g. .prettierrc.json or .js, .yml, .yaml., .toml

    {
      "trailingComma": "es5",
      "tabWidth": 2,
      "semi": false,
      "singleQuote": true
    }

• ESLint

  • Read:

    • https://eslint.org/docs/about/
    • https://eslint.org/docs/user-guide/getting-started
    • All Ruleshttps://eslint.org/docs/rules/
    • Configuring: https://eslint.org/docs/user-guide/configuring/
    • Wesbos GitHub: https://github.com/wesbos/eslint-config-wesbos
    • WesBos YouTube Tutorial ESLint & Prettier: https://www.youtube.com/watch?v=lHAeK8t94as
    • Make package.json file with $ npm init: https://nodesource.com/blog/the-basics-of-package-json-in-node-js-and-npm/

  • Set up in a project:

    • $ npm install eslint --save-dev

    • $ npm init → make package.json file

    • $ npx eslint --init → set up config file

    • .eslintrc.{js,yml,json}

    • javascript { "rules": { "semi": ["error", "always"], "quotes": ["error", "double"] } } → "error", "warn" or "off" OR 2, 1, 0

    • $ npx eslint yourfile.js → run ESLint on yourfile - Perhaps: need to install prettier in project → $ npm i prettier

    • Müll: package.json → //"main": "eslint-sugg.js",

• Questions

  • Checking our code: What different ways can we make sure our code is consistent?
    • Formatting: indentation (tab width), quotation ("" or ''), semicolons, line-breaks, trailing comma → Prettier Ext
  • What is Prettier? How might it help us write better code?
    • auto-formatter: can automatically do "", (), indentations ... on save
    • don't need to waste time fixing these things
    • consistent formatting rules across collaboration projects
  • How can a linter help us avoid bugs?
    • JS parsing with Espress, AST, pluggable → evaluates code patterns.
    • Can help with consistency, bugs by showing warning/errors for syntax, and own linting rules
    • gives feedback on my code quality
    • Prereqs: Node.js(^10.12.0, or >=12.0.0) with SSL support

• Further Reading

  • Setting up efficient Prettier in ESLint: https://indepth.dev/posts/1282/setting-up-efficient-workflows-with-eslint-prettier-and-typescript

Projects: Own

• 14 Dev Tool Tips (JS30): 11 Min
• Multiple Checkboxes (JS30): 11 Min
• My Portfolio Gallery → refactor

Set JS Challenges

• Source: material/algorithm from Execute, Khan Academy
• Create GitHub Repo for these
• Read: understand a code block
• Solve a task

Guest Prep

• Companion Studio: Myles Palmer
• Spill: Matt King
  • Research: website/blog, team, social media
  • Prep Questions