CS314 Software Engineering Technology Dave Matthews Graded - - PDF document

▶
cs314 software engineering technology
SMART_READER_LITE
LIVE PREVIEW

CS314 Software Engineering Technology Dave Matthews Graded - - PDF document

Nov 26, 2022 202 likes •295 views

1/24/18 CS314 Software Engineering Technology Dave Matthews Graded Assignments GH readme some look better than others, use markdown TW quest approvers? fewer mistakes missing/wrong name, loss of markdown team

slide-1
SLIDE 1

1/24/18 1

CS314 Software Engineering Technology

Dave Matthews

Graded Assignments

  • GH readme

– some look better than others, use markdown

  • TW quest

– approvers? fewer mistakes – missing/wrong name, loss of markdown – team directory

  • GT test (brews)

– approvers? – errors, uncorrected near the deadline

slide-2
SLIDE 2

1/24/18 2

Next assignments

  • GH redux

– sort the breweries by name above first "davematt" entry

  • SP1 resume

– reminder (no style or CSS) – codepens (HTML, HTML/ReactJS) – github (HTML, HTML/ReactJS) – http://www.cs.colostate.edu/~eID (optional)

GitHub

  • create an issue
  • create a pull request
  • resolve merge conflicts
  • wait for approvals
  • merge/confirm
  • clone/pull
  • make/use a new branch
  • make source changes
  • add changes
  • check for merge conflicts
  • commit
  • push

Git

slide-3
SLIDE 3

1/24/18 3

Technology

  • Bootstrap 4 (HTML)

– no CSS or style yet

  • React JS (JavaScript)
  • ~eID/public_html

– CS student web sites – http://www.cs.colostate.edu/~eID

What is responsive?

  • Mobile-first flexbox grid to build layouts

– twelve columns – five responsive tiers (xs, sm, md, lg, xl) – SASS variables and mixins – predefined classes

  • Components/classes for layout alignment (fixed or fluid)

– Container – Row – Column

slide-4
SLIDE 4

1/24/18 4

ReactJS

  • Component based system

– render() takes input data and returns what to display – stateful, when state changes render is invoked

CodePens

https://codepen.io/davematt

slide-5
SLIDE 5

1/24/18 5

slide-6
SLIDE 6

1/24/18 6

<! <!doctype doctype html html> <html html lang lang=" ="en en" " > <! > <!--

  • - from

from codepen codepen HTML add classes settings HTML add classes settings --

  • ->

<head> head> <! <!--

  • - from

from codepen codepen HTML stuff for head settings HTML stuff for head settings--

  • ->

> <meta charset="utf meta charset="utf-8"> 8"> <meta name="viewport" content="width=device meta name="viewport" content="width=device-width, initial width, initial-scale=1, shrink scale=1, shrink-to to-fit=no"> fit=no"> <! <!--

  • - from

from codepen codepen CSS settings CSS settings--

  • ->

> <link link rel rel=" ="stylesheet" stylesheet" href href="https:// ="https://maxcdn.bootstrapcdn.com maxcdn.bootstrapcdn.com/bootstrap/4.0.0/ /bootstrap/4.0.0/css css/bootstrap.min.css bootstrap.min.css"> "> <title> title>CodePen CodePen to HTML</title> to HTML</title> </ </head> head> <body> body> <! <!--

  • - from

from codepen codepen HTML view HTML view--

  • ->

> <div class=" div class="jumbotron jumbotron">...</ ">...</div> div> <! <!--

  • - from

from codepen codepen settings external scripts settings external scripts--

  • ->

> <script script src src="https:// ="https://code.jquery.com code.jquery.com/jquery /jquery-3.2.1.slim.min.js" ></script> 3.2.1.slim.min.js" ></script> <script script src src="https:// ="https://cdnjs.cloudflare.com cdnjs.cloudflare.com/ajax/libs/ /ajax/libs/popper.js popper.js/1.12.9/ /1.12.9/umd umd/popper.min.js popper.min.js"></script> "></script> <script script src src="https:// ="https://maxcdn.bootstrapcdn.com maxcdn.bootstrapcdn.com/bootstrap/4.0.0/ /bootstrap/4.0.0/js js/bootstrap.min.js bootstrap.min.js"></ "></script script> </ </body body> </ </html> html>

slide-7
SLIDE 7

1/24/18 7

<! <!doctype doctype html html> <html html lang lang=" ="en en" " > <head> head> <meta charset="utf meta charset="utf-8"> 8"> <meta name="viewport" content="width=device meta name="viewport" content="width=device-width, initial width, initial-scale=1, shrink scale=1, shrink-to to-fit=no"> fit=no"> <link link rel rel=" ="stylesheet" stylesheet" href href="https:// ="https://maxcdn.bootstrapcdn.com maxcdn.bootstrapcdn.com/bootstrap/4.0.0/ /bootstrap/4.0.0/css css/bootstrap.min.css bootstrap.min.css"> "> <title> title>CodePen CodePen to HTML</title> to HTML</title> </ </head> head> <body> body> <div div id="root"></ id="root"></div> div> <! <!--

  • - from

from codepen codepen settings external scripts settings external scripts--

  • ->

> <script script src src="https:// ="https://code.jquery.com code.jquery.com/jquery /jquery-3.2.1.slim.min.js" ></script> 3.2.1.slim.min.js" ></script> <script script src src="https:// ="https://cdnjs.cloudflare.com cdnjs.cloudflare.com/ajax/libs/ /ajax/libs/popper.js popper.js/1.12.9/ /1.12.9/umd umd/popper.min.js popper.min.js"></script> "></script> <script script src src="https:// ="https://maxcdn.bootstrapcdn.com maxcdn.bootstrapcdn.com/bootstrap/4.0.0/ /bootstrap/4.0.0/js js/bootstrap.min.js bootstrap.min.js"></ "></script script> <! <!--

  • - React,

React, ReactDOM ReactDOM, Babel to handle our JavaScript components , Babel to handle our JavaScript components --

  • ->

<script script src src="https:// ="https://cdnjs.cloudflare.com cdnjs.cloudflare.com/ajax/libs/react/15.6.1/ /ajax/libs/react/15.6.1/react.min.js react.min.js"></script> "></script> <script script src src="https:// ="https://cdnjs.cloudflare.com cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react /ajax/libs/react/15.6.1/react-dom.min.js dom.min.js"></script> "></script> <script script src src="https:// ="https://cdnjs.cloudflare.com cdnjs.cloudflare.com/ajax/libs/babel /ajax/libs/babel-standalone/6.21.1/ standalone/6.21.1/babel.min.js babel.min.js"></script "></script> <! <!--

  • - And lastly, our

And lastly, our ReactJS ReactJS code.

  • code. --
  • ->

<script script src src="./ ="./app.js app.js" type="text/babel"></script> " type="text/babel"></script> </ </body body> </ </html> html>

slide-8
SLIDE 8

1/24/18 8