cmauban
commented
9 years ago Journal, Week 5
Welcome to Week 6!
In addition to your reflective journal entry and your tutorial journal entry this week, also share a bookmarked URL to a tool or article. That sounds easy, doesn't it? But wait, there's more... Write a paragraph explaining the resource you're linking to and why it was helpful. Give us the tl;dr on that article or just the important parts of the documentation: installation, usage, why it exists. Keep it simple.
Reading APIs
Did you finish all of your questions and terms last week? No? Finish them tonight!
Getting Ready for the Week
We're going to use some cool new tools this week, which means yak-shaving today.
You'll want to globally install two new tools: Bower and Gulp. Hmmm, how do you globally install?
Now, in your USERNAME.github.io repo, create a new branch called release--0.0.0. You'll have to set up this branch like you've set up previous projects. That means .gitignore, package.json, src/ -- check out the bullet points under Yak-Shaving above to figure out what exactly you need to get this new project setup.
BEAST MODE
If you were designing a blog, what would you want it to look like? Check out some templating sites like ThemeForest and WrapBootstrap and find a template you like. DO NOT BUY IT. Instead, check out the demos and Skitch the layout you decide on. Be sure to Skitch it for different responsive views as well. Then upload the Skitches to /specs in your USERNAME.github.io repo. You'll be building this soon!
GitHub Revolution, Part 3: Octocat's Revenge
For the love of everything holy, please MERGE YOUR PRs FROM LAST WEEK if you haven't done so already. While you're at it, also git checkout your master branch and git pull that sucker to get your previous work merged locally. Feel free to delete all those remotely merged branches, too.
For tonight, start by creating a new branch named release--0.0.2 from master in your TIY-GitHub repository. Like last week's GitHub Revolution, all of your work will be on feature branches named with the feature-- prefix. Be sure to link each of your PRs that merge your feature branches into release--0.0.2 and your PR from release-0.0.2 into master.
:musical_note: WHO... ARE YOU? :musical_note:
Now it's time to fetch your own data. We'll need it later. Don't just slurp it down, though, check it out. Make sure it's correct... well, looks correct.
First, save the JSON data from the GitHub API for your own username. Remember where that is? Make sure you get the list of repositories that belong to you, too. Finally, get your most recent public activity. You might have to do a little hunting. Too bad it's not all linked from your profile data...
Give Postman a shot this time around and explore a little. What other data can you get out of the API for yourself? Even unauthenticated? Save your data to files in apis/github/users/, just like we did for Octocat.
Commit your JSON files into a branch named feature--my-little-profile and open a PR into release--0.0.2 for review, merge when you get 2x :+1:s.
Twirl Your Moustache...
Time for the basics of templates. Go back to the HTML for the profile column you finished last week. Start by replacing one of your list items with mustachioed placeholders ({{key_name}}) that match the key in the API data that the value represents. For example, the text The Octocat comes from the name key in octocat.json, so replace that text with {{name}}.
Put this work in the feature--profile-placeholders branch and open a PR into release--0.0.2, just like we did last time.
BEAST MODE
As you can imagine, we're going to use jQuery to replace those placeholders with the actual values from the JSON data, but can you figure out how? First you need to learn (or review) how to replace the contents of a tag with both the DOM and jQuery APIs. Second, how can you select the appropriate tags to update? Finally, how could you update the same HTML a second time with data from your own profile?
Turn the Page... Well, at least finish it up.
Last week, we wrote the HTML and (S)CSS to get the outermost layout elements and the left column. It's time for your next "feature": the larger section on the right, which is broken up into three sub-sections controlled by a Tabbed Document Interface (TDI) or "tabbed panels". We'll focus on the "Repositories" panel tonight:
Put it on my tab(s)...
For your first feature, focus on the tabs that appear at the top of the right column:
Don't neglect the button-like (hint!) interfaces to the right or forget to write jQuery / JavaScript to make the .active (suggestion!) tab the last one clicked. Start with three inactive tabs, though. Write enough JavaScript to make "Repositories" always active. Then make them update just the tabs... somehow. With jQuery magic.
Please do NOT use jQuery UI for these tabs. Discovering how the magic works is what this assignment is all about.
Create another new branch based on release--0.0.2 called feature--main-column-tabs. Push that to GitHub as soon as you're able and open a PR into release--0.0.2 again. Get feedback often and adjust your work accordingly until you get 2x :+1:s, then merge your work.
Who wants to look at an empty list?
Now we're ready to build out the "Repositories" section: the part of the page that corresponds to the "Repositories" tab. Hmm, wonder what would make a good connection between those two...? Any semantic tags coming to mind? What could we use that would work, even if we had CSS turned off? That's right, start with MF'g HTML that just works.
Then, look at the Skitches you placed in your specs/ folder for that section of the page. Since it's pretty obvious that we're going to replace all of this with some kind of jQuery magic, just build out three (3) examples of Octocat's repositories: "Spoon-Knife", "Hello-World" and "octocat.github.io".
Like before, push this branch to GitHub and open a PR into release--0.0.2 as soon as you have a commit. Merge it when you're finished (enough) and have gotten solid code reviews. Then git pull the updates into your local release--0.0.2 branch.
BEAST MODE
You could probably guess this step, but we'll walk through it anyway. Create a new branch from release--0.0.2 named feature--repo-list-placeholders for your work. Start replacing the data in one of your example repos with mustachioed placeholders that correspond to the keys in the API data for a single repository. We'll figure out the rest together.
kellymurray
al-the-x
USERNAME.github.iojournal-week-5intomasterrelease--0.0.0intomasterTIY-GitHubfromrelease--0.0.2intomasterTIY-GitHubfromfeature--*(multiple) intorelease--0.0.2USERNAME.github.iofromjournal-week-4intomasterTIY-ChessboardTIY-GitHub(from last week)USERNAME.github.iojournal-week-5frommasterrelease--0.0.0frommasterTIY-GitHubrelease--0.0.2frommasterfeature--profile-placeholdersfromrelease--0.0.2feature--FILL_ME_INfromrelease--0.0.2USERNAME.github.io:journal-week-5journal-week-5.mdor something creativetutorial-week-5.mdor something creativeresource-week-5.mdor something creativeUSERNAME.github.io:release--0.0.0.gitignore-- with the following patterns:/dist/node_modules/bower_componentscsspackage.json-- andnpm install --link --save-devbowerbrowser-syncgulpnode-sassspecs/-- for BEAST MODEsrc/-- fromyo h5bpjs/main.jsscss/_common.scss_desktop.scss_mobile.scss_tablet.scssmain.scss-- with@importlinks to abovecss/-- DELETED!index.htmlTIY-GitHub:release--0.0.2apis/github/users/USERNAME.json-- for your profile dataUSERNAME/repos.json-- for your repository dataactivity.json-- for your public eventssrc/scss/_custom.scss-- to clean up your (S)CSSjs/main.js-- in case you need to catch up onjQuery.ajaxindex.htmlfeature--my-little-profileUSERNAME.jsonUSERNAME/repos.jsonUSERNAME/activity.jsonfeature--profile-placeholdersname...login?companyman, er... monster.location?email!link...!momentto figure this out...feature--main-column-tabs<nav>-igation...<button>?.active....tabsneeds.panels...feature--repo-list-layoutSearch...feature--repo-list-placeholdersdescriptionis not very descriptive...language.stargazer_countforkswhen all you need is a"Spoon-Knife"