07/31 - 08/04 - Githubissues

HTML

<!DOCTYPE html> : browser to use standard rendering mode
<html> : element is the root element for an HTML document
- lang : language attribute added to the tag defines the main language of the document

Head <head>

has document metadata
- including the document title, character set, viewport settings, description, base URL, stylesheet links, and icons
Character encoding : <meta charset="utf-8" />
Document title : <title>Machine Learning Workshop</title>
Viewport metadata : helps site responsiveness, enabling content to render well by scaling
<link> : create relationships between the HTML document and external resources

<meta> :

include name attribute: viewport, theme-color, description, keywords


<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<link rel="icon" href="/images/favicon.png" />
<meta name="description" content="A sentence of description" />
<meta name="theme-color" content="#226DAA" />
</head>
<body>

Semantic HTML : using HTML elements to structure your content based on each element's meaning, not its appearance
html good practice: https://github.com/hail2u/html-best-practices

08/01

Package Managers

manage the dependencies (external code written by you or someone else) that your project needs to work correctly
node.js (npm): package manager for the JavaScript programming language maintained by npm
- default package manager for the JavaScript runtime environment Node.js
yarn : software packaging system developed by Facebook for Node.js JavaScript runtime environment
- provides speed, consistency, stability, and security as an alternative to npm

CSS Architecture

CSS is notoriously difficult to manage in large, complex, rapidly-iterated systems
different ways of writing CSS that allows in writing more maintainable CSS

Build Tools

task runners automatically execute commands and carry out processes behind the scenes
helps automate workflow by performing mundane, repetitive tasks that would waste an egregious amount of time repeating
- spinning up development servers
- compiling code (ex. SCSS to CSS)
- running linters, serving files up from a local port on computer

npm Scripts

the entries in the scripts field of the package.json file
the scripts field holds an object where specify various commands and scripts that need to expose

Module bundlers

tool that takes pieces of JavaScript and their dependencies and bundles them into a single file, usually for use in the browser
starts with an entry file, and from there it bundles up all of the code needed for that entry file
Webpack, Browserify, Rollup
- Webpack : bundle JavaScript files for usage in a browser
- capable of transforming, bundling, or packaging just about any resource or asset

npm start : "start": "react-scripts start" (React Dev)

provided by the create-react-app package
npm start runs react-scripts start in the terminal starts a development server that serves the React application
- uses the webpack-dev-server package to compile
- compiles the React application using the webpack package
- compiles the JavaScript, CSS, and other assets into bundles that can be served by the development server
- serves the compiled assets through an HTTP server (By default: http://localhost:3000)
when there are changes to the code, the server automatically refreshes the page, so devs don't have to manually refresh the browser
- uses the react-refresh package to enable hot module replacement
- watches and triggers a hot module replacement (HMR) process to update the application in real-time without reloading the page
server provides features like live reloading, error reporting, and debugging
displays build information in the terminal, such as build progress, errors, and warnings
displays a URL where the application can be accessed in the browser

kunheejeon / frontend-react-sessions

07/31 - 08/04 #10