cmauban
commented
9 years ago Journal, Week 4+
Last night you brainstormed topics. Now it's time to choose two -- one for your reflective entry and one for your tutorial. Outline both entries, then get them reviewed by your peers. Be sure to review theirs, too!
Reading APIs: GitHub
Tonight, focus on the following questions about the GitHub API, which will be important as you build out your profile:
- What are the endpoints for fetching...
- the profile data for a user?
- the organizations a user belongs to?
- the repositories a user has created?
- a filtered list of repositories?
- a sorted list of repositories?
- public events for a user?
- When fetching public events for a user...
- How many results are returned by default?
- What limitations exist on fetching more results?
- What is the basic structure of the results?
- What fields are included in each result?
- What are the data types for each field?
- What are some of the different values for the
typefield?
GitHub Revolution, Part 2
Yaks shaved, Skitching complete, now to start making the HTML and (S)CSS for your profile template. For the purposes of this exercise, omit the page header with the search field and primary navigation.
Start by creating a new branch named release--0.0.1 from master in your TIY-GitHub repository. All your work from tonight will be in feature branches that stem from and merge back into this one, which represents your first, tiny, incremental release version: 0.0.1
Octocat in Blue
The profile page is generally laid out into two uneven columns that are centered on the page:
In a new branch named feature--basic-layout based on release--0.0.1, start with some MF'g HTML and (S)CSS to get those outermost layout elements correct: a set of two proportionate but uneven columns centered on the page. The contents are unimportant to begin with; just focus on the overall layout first, i.e. the blue rectangles.
Open a PR for this work into the release--0.0.1 branch and solicit peer review. Get 2x :+1: (and some commentary) before you merge it. Locally, check out release--0.0.1 and git pull to update it.
Just the Facts, Cat... Octopus... Thing.
Next, focus on filling in the "details" column with information for Octocat. Create another new branch based on release--0.0.1 after the PR for feature--basic-layout is merged. Now you're building "features": small, self-contained pieces of the overall functionality.
Isn't all of that information available from the API data you saved last night? You bet it is! Identify the fields in octocat.json that correspond to the source data for each area and document it in a Skitch note in specs/ for now.
Just looking at this, you should probably have some questions, like:
- Where could you possibly find all those icons?
- How will you get those three blocks to line up like that?
- How will you format that date so nicely?
Push this branch to GitHub and open a PR as soon as you have a commit, merge it when you're finished (enough) and have solicited a code review from two of your peers (that means they left you comments and gave you a :+1:). Then git pull the updates into your local release--0.0.1 branch. What happens when you push that branch up to GitHub? Don't you have a PR for that already?
Gimme the Dataz!
We might as well practice writing some jQuery while we're here. In another feature branch -- feature--fetch-data -- use jQuery.ajax to fetch the data from your octocat.json file and log it to the console. That code should go inside the main.js file, enclosed in an IIFE.
Like before, push this feature branch to GitHub and open a PR into the release--0.0.1 branch. When your PR is reviewed, merge it.
BEAST MODE
There's a correlation between the data in octocat.json and the values in the left column, correct? Can you select each element that corresponds to a data field and replace its contents with the correct value from the JSON file?
al-the-x
TIY-GitHub:yak-shavingintomaster!TIY-Assignmentsnamed17--beneath-the-APIsfrommasterTIY-GitHubnamedrelease--0.0.1frommasterUSERNAME.GitHub.io:journal-week-4journal-week-4.mdor something creativetutorial-week-4.mdor something creativeTIY-Assignments:17--beneath-the-APIsCheatSheets/GitHubAPI.mdTIY-GitHub:release--0.0.1specs/octocat--details.pngsrc/scss/custom.scssjs/main.jsindex.htmlUSERNAME.GitHub.iofromjournal-week-4intomasterTIY-Assignmentsfrom17--beneath-the-APIsintomasterTIY-GitHubrelease--0.0.1intomasterfeature--basic-layoutintorelease--0.0.1(MERGED)feature--profile-detailsintorelease--0.0.1(MERGED)feature--fetching-dataintorelease--0.0.1(MERGED)typefield?feature--basic-layoutfeature--profile-detailsfeature--fetching-data