# Week 1 Notes # Pair Programming Workflow ![](https://i.imgur.com/wxuXF1D.png) # Git & GitHub - `git` is a version control software installed on your local computer - GitHub is an external service for hosting `git` repositories - `git init` to initialize a git repository (a repository is a collection and history of files and documents) - Adds files to a staging area - `git add` to specify what files should be included in your next commit - `git commit` to save the current state of your project at that specific point in time (like a snapshot). Commit often - `git push` takes your local `git` commits and pushes them to a remote repository - `git pull` takes commits from a remote repository and updates your local repository with them - `git clone` takes a repository that already exists on GitHub and copies it to your local computer - `git log` shows the history of commits in your repository - `git status` shows the current changes in your repo that have not yet been committed - `git reset` to undo changes - Undo staging - Undo commits - When you reset to a previous commit, you remove the "bad" commits from your history - `git revert` to revert back to a previous commit - Create a *new commit* to keep the integrity of the your repository's history - `HEAD` refers to most recent commit in your repository # HTML HTML defines the content of every web page. We "mark up" the content with special HTML tags to tell browsers how we want the different parts of our content to be shown ## Semantic HTML Semantic HTML elements are elements that clearly convey their purpose in the overall page to both the browser and the developer (Ex: article, figcaption, figure, footer, header, nav) # CSS ## What is CSS normal flow? CSS normal flow are the default rules a browser rendering engine follows to layout DOM elements in 2 dimensions. The normal flow of CSS is: top to bottom, left to right. In normal flow, `block` elements (divs, h1, h2, etc.) the basic rules are: - width is 100% of element's parent - height is the sum of the content of the element ## What are the four most common css `position`s & how do they interract? - `static`: Static position corresponds to the normal flow. Other positions place the element according to the `left`, `top`, `right`, and `bottom` css properties. - `relative`: Relative elements are offset in their screen position relative to where they would be rendered in the normal flow. Relative positioning does NOT effect the position of other elements in the normal flow. - `absolute`: Absolute elements are taken out of normal flow. Their position is relative to their layout parent. The layout parent of an absolute element is the nearest non-static element. This can be an relative or absolute element. If all the parents of an absolute element are `position: static`, it is positioned relative to the document body. - `fixed`: Fixed elements are positioned relative to the browser screen. ## What is the Cascade? The cascade is a set of priority rules to determine which css styles apply to which elements. At a high level, the cascade follows this order: `Inline styles` > `User styles` > `CSS Stylesheets` > `Built-in styles` Within those categories, specificity of css selectors (`tagname`, `.className`, `#id-selector`) also effect priority. ## What is the CSS Box Model? What are it's core constituent parts? Think of the box model like a item hanging in a gallery: - `content`: the painting/photograph - `padding`: matte surrounding the art - `border`: the physical frame itself - `margin`: space on the wall between items Use box-sizing to determine how the `width` and `height` properties interact with these properties. Suggestion: use `box-sizing: border-box` everywhere. Under `border-box`, the width of the content area is: `width - borderWidth - paddingWidth` By default, width of the element is `width + borderWidth + paddingWidth` (The same is true of height.) ## What is flexbox? How do you lay out pages with it? Flexbox is an alternative to the CSS normal flow. It arranges elements on two axis, the main, and cross axis. The main axis can be either horizontal or vertical, and can run in reverse. To lay out a page with flexbox, break the design into horizontal and vertical sections. Then use flexbox accordingly. ***Remember: It's a parent-child relationship. If you are flexing something and it's not flexing, then you might have declared your flex "too high"*** ### Flexbox Container Flexbox gives the container the ability to alter its items' dimensions (and order) to best fill the available space. A flex container expands flexible items to fill free space, or shrinks them to prevent overflow - `flex-direction` - `flex-wrap` ### Flex Items The items inside the flexed container - `flex-grow` - "Hey, if there's any space, you should grow some. You're allowed to use more" - `flex-shrink` - "Hey, somebody else needs more space. You should sacrifice some of yours" - `flex-basis` - "Hey, I don't care what size you think you should have been. This should be your starting size" - `flex` (shorthand for `flex-grow`, `flex-shrink`, `flex-basis` ## Responsive Design Website should be fully functional for all screen sizes, resolutions, and orientations. You can use `media queries` to help out with that. # Pairing & Debugging ## What is a stack trace? A stack trace is an ordered list of call-sites that traces back through the source code. It tells you the filename, line number, and the name of the function called. ## How can you step through a javascript program? Place a breakpoint by clicking on a line number in the sources tab of the dev tools, or enter the keyword `debugger` in your source. The program will pause at this point and you can manually step through the code with the playback controls of the dev tools. ## What is debugging? Debugging is a process of testing your assumptions of how a program is operating. Once a broken assumption is discovered, a change can be introduced to fix the bug. You should be learing to use your debugger, the browser dev tools, `console.logs` and eventually testing (TDD - Test Driven Development) # DOM & Events What the DOM isn't: - Your source HTML (we might write invalid HTML; HTML is static, the DOM is not) The DOM is an interface to web pages. It provides us methods that allows programs to read and manipulate the page's content, structure, and styles The DOM is organized into a tree structure ## Document Object This is the global reference to the DOM entry point and gives us methods to navigate and manipulate the DOM. *This is the connection between the DOM and JavaScript code* ## Searching the DOM - `getElementById` - `getElementsByClassName` - `getElementsByTagName` - `querySelector` - `querySelectorAll` ## Traversing the DOM - Accessing Children - `element.children` - `element.lastChild` - `element.firstChild` - Accessing Siblings - `element.nextElementSibling` - `element.previousElementSibling` - Accessing Parents - `element.parentElement` ## Creating Elements - `document.createElement` - ***Nodes are free floating and not connected to the document unless you link them the DOM*** ## Adding Elements to the DOM - `node.appendChild` - `node.insertBefore` ## Removing Elements - `node.remove` ## How can you change styles of a DOM element using JS? You can add properties to the element's `style` object. You can generally just create use the camelCase name of the CSS property. ## Event Listener - What we attach to a DOM element to "subscribe" or "listen" to it ## Event Handler - Responsible for dealing with the event (callback function) Event examples: click, submit, mouseover, scroll ## How can you add/remove classes to an element using JS? The [ClassList](https://developer.mozilla.org/en-US/docs/Web/API/Element/classList) property of an element is an array-like object that offers some convenience methods for adding, removing, and toggling classes on an element. ## What are the 3 stages of an Event? - Capture Phase - Event flows from document's root to target element - Target Phase - Triggers the event - Bubbling/Propagation Phase - Event flows from target back to document's root ## What is event propagation or bubbling? When an event is fired on a DOM element, any handlers registered on that element for that event are triggered. After that, any handlers registered for that event on that element's *parent* element will be triggered, and so on for the parent's parent, all the way up the DOM tree. ## What is event delegation? Why would you do it? When you have many elements that have the same event handler, you can take advantage of event propagation by attaching the handler to an ancestor element that contains all of the elements in question. This is known as event delegation. This lowers memory usage by only creating a single handler, and removes the need to manually attach and detach handlers to elements as they are created or destroyed.