To Do This Week:
Work on Final projects, finish missing projects
Notes
Greg Philbrook GitHub talk : Wednesday April 23rd (mandatory)
What’s next?
AI & Coding
Matt Welsh (PhD from UC Berkeley) is Co-founder and Chief Architect of Fixie.ai, a Seattle-based startup developing a new computational platform with AI at the core. Previously software engineer at Apple, engineering director at Google, and a Professor of Computer Science at Harvard University (taught Mark Zuckerberg).
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.
HTML5 Game Development
Web Audio API
Example 1: 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
- Audio Setup: The audio context is created, and an audio file is loaded and played.
- Analyzer Setup: An
AnalyserNodeis 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. https://get.webgl.org
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. https://threejs.org
Front-End Developer Careers
- Web Sites and Web Apps – HTML/CSS, JavaScript (front and backend), responsive design
- Node.js
- React Dev
- AI and ChatGPT Developer tutorials
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. Unlikegit 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/
Final Projects Grading Criteria
- Scripting (40%): Your project should demonstrate your JavaScript skills to manipulate elements, manage data, and create dynamic interactions.
- Interface and Interaction Design (30%): Your project should demonstrate thoughtful usability, aesthetics, and interaction design.
- Content Completion (20%): Images are working, text is spell-checked. Make sure there is a title, author name, and instructions if needed.
- Progress Reviews (10%): Completion of the project for peer review.
Self-Evaluations on Final Projects:
- Are there any JavaScript errors or bugs? How well do the interactive elements work (e.g., buttons, forms, dynamic content)?
- Is the source code well-organized and commented? Does it include a statement detailing logic steps, and a brief paragraph about how the site was built and acknowledging any resources or external libraries used (e.g., APIs, frameworks, ChatGPT)?
- How effective is the visual hierarchy in guiding the user through the site’s content?
- Is the user interaction clear from the design or is an explanation needed?
- Evaluate the color scheme, typography, and layout. Do these elements enhance the overall user experience?
- Is the site easy to understand and follow? Is there a title and author name? Are instructions needed?