{"action":"created","issue":{"url":"https://api.github.com/repos/TIY-Durham/2015-FALL-FEE/issues/273","labels_url":"https://api.github.com/repos/TIY-Durham/2015-FALL-FEE/issues/273/labels{/name}","comments_url":"https://api.github.com/repos/TIY-Durham/2015-FALL-FEE/issues/273/comments","events_url":"https://api.github.com/repos/TIY-Durham/2015-FALL-FEE/issues/273/events","html_url":"https://github.com/TIY-Durham/2015-FALL-FEE/issues/273","id":107770654,"number":273,"title":"13 -- Nicky Cadavillo","user":{"login":"nickycadavillo","id":11246178,"avatar_url":"https://avatars.githubusercontent.com/u/11246178?v=3","gravatar_id":"","url":"https://api.github.com/users/nickycadavillo","html_url":"https://github.com/nickycadavillo","followers_url":"https://api.github.com/users/nickycadavillo/followers","following_url":"https://api.github.com/users/nickycadavillo/following{/other_user}","gists_url":"https://api.github.com/users/nickycadavillo/gists{/gist_id}","starred_url":"https://api.github.com/users/nickycadavillo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nickycadavillo/subscriptions","organizations_url":"https://api.github.com/users/nickycadavillo/orgs","repos_url":"https://api.github.com/users/nickycadavillo/repos","events_url":"https://api.github.com/users/nickycadavillo/events{/privacy}","received_events_url":"https://api.github.com/users/nickycadavillo/received_events","type":"User","site_admin":false},"labels":[],"state":"open","locked":false,"assignee":null,"milestone":null,"comments":0,"created_at":"2015-09-22T18:19:21Z","updated_at":"2015-09-22T18:20:23Z","closed_at":null,"body":"* **Yak-Shaving**\r\n * [ ] Create a _WIP Issue_ in the class repo:\r\n  * [ ] named `13 -- YOUR NAME` where `YOUR NAME` is, well... your name.\r\n  * [ ] with this checklist as the description\r\n* [ ] **MERGE ALL YOUR OPEN PRs!**\r\n  * [ ] in `TIY-Assignments` from `12--css-pirates` into `master`\r\n* [ ] Create a _WIP Branch_ in:\r\n  * [ ] `TIY-Assignments` named `13--pirates-of-pen-sass` from `master`\r\n* [ ] Create or update the following _WIP Files_ in:\r\n  * in `USERNAME.github.io:journal-week-3`\r\n    * [ ] `journal-week-3.md` or another descriptive name\r\n    * [ ] `tutorial-week-3.md` or another descriptive name\r\n  * in `TIY-Assignments:13--pirates-of-pen-sass`\r\n    * [ ] `CheatSheets/HTML.md`\r\n    * [ ]\r\n* [ ] Add comments to your _WIP Issue_ with links to your PRs in:\r\n    * [ ] `USERNAME.github.io` from `journal-week-3` into `master`\r\n    * [ ] `TIY-Assignments` from `13--pirates-of-pen-sass` into `master`\r\n* **Journal, Week 3**\r\n  * [ ] Reflective Post\r\n    * [ ] Rough Draft!\r\n    * [ ] Peer Review x2!\r\n    * [ ] Reviewed Peers x 2!\r\n  * [ ] Tutorial Post\r\n    * **Rough Draft**\r\n      * [ ] Intro: What is the problem, why do I care?\r\n      * [ ] Step 1: Setting up, installing, etc...\r\n      * [ ] Step 2: Here's the solution...\r\n      * [ ] Step 3: What did it do?\r\n      * [ ] Outro: Summarize the problem and solution; dem links tho!\r\n    * [ ] Peer Review x2!\r\n    * [ ] Reviewed Peers x2!\r\n* **Reading HTML**\r\n  * [ ] List types galore!\r\n    * [ ] `<ul>` and `<ol>` are easy...\r\n    * [ ] WTF is a `<dl>` anyway?\r\n    * [ ] Any others?\r\n  * **BEAST MODE** -- `<form>` up!\r\n  * **NIGHTMARE MODE** -- Experiment away! Muahaha!\r\n* **Blueprints: MF'g Website Edition**\r\n  * **Nested Accordion**\r\n    * [ ] Skitchin' for the HTML!\r\n    * [ ] Looks like a list of some sort...\r\n    * [ ] My favorite kind of copy is the copy I don't have to write...\r\n    * [ ] Yo, dawg. I heard you like lists, so I put some lists inside your lists...\r\n    * [ ] You didn't forget that those were just headings, right?\r\n    * **BEAST MODE** -- Let the Sass Games begin!\r\n    * **NIGHTMARE MODE** -- You mean you want it to _work?_\r\n  * **Multi Column Form**\r\n    * [ ] Skitch yo' bad self...\r\n    * [ ] Lots of practice typing text fields...\r\n    * [ ] Weren't those supposed to go into a column eventually?\r\n    * [ ] Oh, look, here's a bunch more text fields...\r\n    * [ ] Finally, a drop-down menu!\r\n    * [ ] Y'know this form really should have a radio button or two.\r\n    * [ ] No checkboxes, either? We can fix that...\r\n    * [ ] Yeah, but there's still a bunch more text fields.\r\n    * [ ] How about a `<button>` at the bottom?\r\n    * **BEAST MODE** -- Now make it _Sassy!_\r\n    * **NIGHTMARE MODE** -- Oh, yeah, that `node-sass` thing again...\r\n* **Blueprints: Sassy Remix Edition**\r\n  * **Vertical Timeline**\r\n    * [ ] Extract a descendent selector?\r\n    * [ ] Run the `node-sass` command, Luke!\r\n    * [ ] Nest some `margin` or `padding` properties?\r\n    * [ ] Try throwing some `&` on those `:hover` or `::before` selectors?\r\n    * [ ] Check out your progress!\r\n  * **View Mode Switch**\r\n    * [ ] There's _gotta_ be a descendent selector in _here_ somewhere...\r\n    * [ ] Feel that `node-sass` spirit!\r\n    * [ ] Nesting properties feels a little... weird.\r\n    * [ ] I still don't get the `&`...\r\n    * [ ] Done, maybe?\r\n* **Chessboard: Welcome Back to the Grid, User**\r\n  * [ ] The journey of an 8x8 grid begins with a single square.\r\n  * [ ] Not technically a grid, but maybe deserving of some labels?\r\n  * [ ] How about some buttons to nowhere?\r\n  * [ ] Time for some CSS. Square layout anyone?\r\n  * [ ] So about that grid... 2x2 to start?\r\n  * [ ] How hard could those colors be?\r\n  * [ ] Step it up to 3x3? How about 4x4?\r\n  * [ ] Should just be scaling up from there...\r\n  * **BEAST MODE** -- What's a chessboard without pieces?\r\n  * **NIGHTMARE MODE** -- Would you like to _play_ a game?"},"comment":{"url":"https://api.github.com/repos/TIY-Durham/2015-FALL-FEE/issues/comments/142370722","html_url":"https://github.com/TIY-Durham/2015-FALL-FEE/issues/273#issuecomment-142370722","issue_url":"https://api.github.com/repos/TIY-Durham/2015-FALL-FEE/issues/273","id":142370722,"user":{"login":"nickycadavillo","id":11246178,"avatar_url":"https://avatars.githubusercontent.com/u/11246178?v=3","gravatar_id":"","url":"https://api.github.com/users/nickycadavillo","html_url":"https://github.com/nickycadavillo","followers_url":"https://api.github.com/users/nickycadavillo/followers","following_url":"https://api.github.com/users/nickycadavillo/following{/other_user}","gists_url":"https://api.github.com/users/nickycadavillo/gists{/gist_id}","starred_url":"https://api.github.com/users/nickycadavillo/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/nickycadavillo/subscriptions","organizations_url":"https://api.github.com/users/nickycadavillo/orgs","repos_url":"https://api.github.com/users/nickycadavillo/repos","events_url":"https://api.github.com/users/nickycadavillo/events{/privacy}","received_events_url":"https://api.github.com/users/nickycadavillo/received_events","type":"User","site_admin":false},"created_at":"2015-09-22T18:20:23Z","updated_at":"2015-09-22T18:20:23Z","body":"Journal, Week 3\r\n\r\nWhy are you reading this? 2x journal entry! Chop chop! You should have a draft of both entries by tomorrow. Don't forget to have at least two people read, critique, and approve.\r\n\r\nReading HTML: List Mode Switch?\r\n\r\nEasy part: list elements. You know <ul> and <ol>, but are there others? Make sure you get the tags that go inside the list elements and any pertinent attributes (you know what those are now, right?) for those tags.\r\n\r\nInclude all the list-describing elements such as <li>, <dt> and their appropriate siblings and parents. There are only about 6 of them, if you don't count the experimental tags like <menu>.\r\n\r\nBEAST MODE\r\n\r\nInclude all the Interactive Form elements, like <form>, <input>, <label> and the rest, noting the differences between type attribute values; don't omit <fieldgroup> or <legend>... They'll come up.\r\n\r\nNIGHTMARE MODE\r\n\r\nThere are lots of experimental elements like <datalist>, <menu>, <dialog>, etc. What are they? What do they do? Can you even use them?? Include compatibility notes for each element.\r\n\r\nBlueprints: MF'g Website Edition\r\n\r\nSkitch the Reference Implementations for Nested Accordion and Multi Column Form with an eye for the HTML elements we'll need to represent the page, but don't peek at the Element Inspector unless you really get stumped! Use those guidelines to start building a \"MFg Website\" version of each: just semantic HTML!\r\n\r\nBut, hey, you're gonna need copy, right? Why write all that copy yourself, when you can pick your favorite ipsum instead? No one really liked that \"Oat cake tootsie roll\" anyway. Since you're giving the copy a little personal touch, why not put your own spin on the form, too? The fields have been left the same, but the name's and <label>'s have been changed to protect the innocent.\r\n\r\nBEAST MODE\r\n\r\nStart writing Sass (don't worry if it's basically CSS) for your MF'g Websites based on your previous observations from last week. Don't worry about matching the crazy class names or id's from the Reference Implementation; make your own semantic names instead!\r\n\r\nNIGHTMARE MODE\r\n\r\nTry compiling your Sass to CSS with that node-sass trick. If you manage to generate CSS files, might as well link them into your index.html documents... BUT DON'T COMMIT THEM! Ask me why...\r\n\r\nBlueprints: Sassy Remix Edition\r\n\r\nStart refactoring your CSS for Vertical Timeline and View Mode Switch into nested Sass rules. Run the command node-sass --output-style expanded --output css/ scss/*.scss to convert your Sass files back into CSS files in the css/ directory. Remember to read the error messages when you get them...! If you linked your *.scss files into index.html last night, link the CSS files you just generated instead. Open your layouts with browser-sync start --server --directory and refactor away!\r\n\r\nChessboard: Welcome Back To the Grid, User\r\n\r\nBuild an 8 by 8 responsive grid of squares (equal height and width) using semantic HTML and some CSS. Include markers for rank (\"8\" through \"1\") and file (\"a\" through \"h\") above, below and on each side of the grid. The squares on the grid should alternate colors between dark and light colors, your discretion, but the upper-left and bottom-right squares should be light.\r\n\r\nCreate a bank of buttons beneath the grid that include \"rewind\", \"step back\", \"play / pause\", \"step forward\", and \"fast forward\" buttons, as on the Reference Implementation. Get as fancy as you want to with colors, button styles, and icons. Maybe it's even a good time to check out Font Awesome? Don't over-think this part!\r\n\r\nBEAST MODE\r\n\r\nPlace markers that represent the chess pieces on each square of the grid with \"black\" on top, \"white\" on the bottom. Doing so should not affect the proportions of the grid. The size of the pieces should adjust with the size of the viewport. You might need to do some research on Chess to recognize the names, abbreviations, and pictures of the pieces.\r\n\r\nNIGHTMARE MODE\r\n\r\nWire up the buttons to print their \"name\" to the console when clicked, e.g. \"step forward\". The \"play / pause\" button should start printing \"next move\" to the console every second -- \"playing\" -- until clicked again -- \"paused\". Clicking the button a third time should resume \"playing\". The setInterval browser function will help."}}