WEEK 14: Project Research: Develop & Design
(April 14 & 16)

To Do This Week:

Work on Final Projects (folder is “final477”)

Going Further…

AI & Coding

AI Coding Assistants

  • GitHub Copilot: Copilot – AI-powered code completion tool for multiple languages and IDEs.
  • Amazon CodeWhisperer: Amazon Codewhisperer – ML-powered code suggestions with reference tracking and security scans.
  • Tabnine: Tabnine – Context-based AI-driven code assistance.
  • Replit: Replit – Collaborative online coding environment with AI-assisted coding.

ChatGPT Coding Plugins

  • ChatWithGit: Integrates ChatGPT with Git repositories for collaboration and code management.
  • Code Interpreter: Enables code execution and direct interaction with programming languages.
  • Zapier: Automates workflows by connecting ChatGPT with 6,000+ apps.
  • Wolfram Alpha: Adds advanced mathematical and computational capabilities.

Web Audio API

Example 1: Mouse Pitch Change

mouse pitch change

  • The oscillator generates a continuous tone.
  • The frequency (pitch) of the tone is controlled by the mouse’s horizontal position (X-axis), with a range in this example from 220 Hz to 1100 Hz.
  • The volume (gain) is controlled by the mouse’s vertical position (Y-axis), inverted so that moving the mouse up decreases the volume and moving it down increases the volume.

Example 2: Visual Audio Equalizer

visual-audio-equalizer

  • Audio Setup: The audio context is created, and an audio file is loaded and played.
  • Analyzer Setup: An AnalyserNode is connected to the audio source to analyze the audio signal.
  • Visualization Loop: Frequency data is visualized as bars on the canvas using requestAnimationFrame.

WebGL and Three.js

https://will-luers.com/DTC/dtc477/webgl.html

WebGL

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 2D and 3D graphics within any compatible web browser, without the need for plugins. It’s based on OpenGL ES, a software API that is used on embedded systems for graphics rendering.

Three.js

While WebGL is powerful, it’s also complex. Three.js simplifies the process of working with 3D graphics, providing an intuitive API for developers and designers.

Front-End Developer Careers

GitHub Intro

  • GitHub – a social and collaborative platform for development
  • Git – version control system for tracking changes in computer files and coordinating work on those files among multiple people. (command-line install)
  • desktop.github  no command line needed
  • Github guide
  • 477 test-repository

Git Terms from Github Glossary

  • Repository: A repository is the most basic element of GitHub. They’re easiest to imagine as a project’s folder. A repository contains all of the project files (including documentation), and stores each file’s revision history. Repositories can have multiple collaborators and can be either public or private.
  • Branch:A branch is a parallel version of a repository. It is contained within the repository, but does not affect the primary or main branch allowing you to work freely without disrupting the “live” version. When you’ve made the changes you want to make, you can merge your branch back into the main branch to publish your changes.
  • Merge: Merging takes the changes from one branch (in the same repository or from a fork), and applies them into another. This often happens as a “pull request” (which can be thought of as a request to merge), or via the command line. A merge can be done through a pull request via the GitHub.com web interface if there are no conflicting changes, or can always be done via the command line.
  • Clone: A clone is a copy of a repository that lives on your computer instead of on a website’s server somewhere, or the act of making that copy. When you make a clone, you can edit the files in your preferred editor and use Git to keep track of your changes without having to be online. The repository you cloned is still connected to the remote version so that you can push your local changes to the remote to keep them synced when you’re online.
  • Pull: Pull refers to when you are fetching in changes and merging them. For instance, if someone has edited the remote file you’re both working on, you’ll want to pull in those changes to your local copy so that it’s up to date. See also fetch.
  • Pull request: Pull requests are proposed changes to a repository submitted by a user and accepted or rejected by a repository’s collaborators. Like issues, pull requests each have their own discussion forum.
  • Fork: A fork is a personal copy of another user’s repository that lives on your account. Forks allow you to freely make changes to a project without affecting the original upstream repository. You can also open a pull request in the upstream repository and keep your fork synced with the latest changes since both repositories are still connected.
  • Fetch: When you use git fetch, you’re adding changes from the remote repository to your local working branch without committing them. Unlike git pull, fetching allows you to review changes before committing them to your local branch.
  • Push: To push means to send your committed changes to a remote repository on GitHub.com. For instance, if you change something locally, you can push those changes so that others may access them.
  • Commit: A commit, or “revision”, is an individual change to a file (or set of files). When you make a commit to save your work, Git creates a unique ID (a.k.a. the “SHA” or “hash”) that allows you to keep record of the specific changes committed along with who made them and when. Commits usually contain a commit message which is a brief description of what changes were made.
  • Markdown: Markdown is an incredibly simple semantic file format, not too dissimilar from .doc, .rtf and .txt. Markdown makes it easy for even those without a web-publishing background to write prose (including with links, lists, bullets, etc.) and have it displayed like a website. GitHub supports Markdown and uses a particular form of Markdown called GitHub Flavored Markdown. See GitHub Flavored Markdown Spec or Getting started with writing and formatting on GitHub.markup

https://frontendmasters.com/guides/front-end-handbook/2024/

Web Dev Map used above