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 directory • GT test (brews) – approvers? – errors, uncorrected near the deadline 1
1/24/18 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 Git • create an issue • clone/pull • make/use a new branch • make source changes • add changes • create a pull request • check for merge conflicts • resolve merge conflicts • commit • wait for approvals • push • merge/confirm 2
1/24/18 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 3
1/24/18 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 4
1/24/18 5
1/24/18 <! <!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> 6
1/24/18 <! <!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> 7
1/24/18 8
Recommend
More recommend
