cmauban
commented
9 years ago Journal, Week 4
Same routine as last week, folks: 1 reflective journal, 1 tutorial-style journal. If you stalled on these last week, don't try to "catch up"... PICK SMALLER TOPICS. Give yourself a flag in the sand tonight: brainstorm topics (plural) for each, pick one and put the rest in your parking-lot.md for another time.
Reading APIs
We're going to get very familiar with the GitHub API this week. Start reading the documentation and answer the following questions. You can find the Starting Point in GitHubAPI.md:
- How does the API handle authentication?
- Do I need to authenticate?
- What can I do with an unauthenticated request?
- How can I authenticate my request? (3 ways)
- How do I ask the API for...
- The profile information for a specific user?
- The repository listing for a specific user?
- The recent, public activity for a specific user?
- Is there a limit to the number of requests I can make?
- Is there a way of extending that limit?
- What happens when I hit the limit?
- What if there is a lot of data returned?
- How can I ask for more (or less) data from a request?
- How do I know that there is more data available?
Additionally, you'll want to understand the Promise interface and how XmlHttpRequest and "Ajax" techniques work. We'll be using jQuery.ajax, but the documentation for it is somewhat arcane. There's official documentation for Promise in the MDN, or you might try the documentation for Kris Kowal's Q library, possibly the best (and best documented) Promise library out there. There's a lot of other resources on the web about Promise, though.
Github Revolution
This week, you're building a GitHub profile page populated with data from the GitHub API. We'll start with the profile page for Octocat as a reference implementation, but our finished project will be a template engine that can produce a profile page for anyone.
Yak Shaving
Create a new repository called TIY-GitHub, populated with a README.md and LICENSE file. This will get you a master branch with a single commit in it. Create a WIP Branch named yak-shaving that you'll do your work in. Create a new package.json file at the top of the project using npm init, then save and install some development dependencies with npm install --save-dev: mocha, chai, browser-sync and node-sass.
In the scripts key, add a start task that will run browser-sync and a sass task that will convert scss/main.scss into css/main.css, just like we did for TIY-Chessboard and the Blueprints last week. We don't have any Sass to convert yet or any HTML to serve up, so let's get on that.
Create a directory called src/ and run yo h5bp from within the src/ directory. You don't need the docs; they're on the internet. If you run into problems running yo h5bp, ask for help. As you've done before, rename css/main.css to scss/main.scss. Try running the sass task with npm run sass, but you'll probably get an error message complaining that the input file -- scss/main.scss -- doesn't exist. Didn't we just rename that? What's going on?
Sass it up...
The node-sass command is running from wherever the package.json file is, which is correct, but the scss/ and css/ directories aren't directly adjacent, are they? Where are they located relative to package.json? What if you adjust the path for scss/main.scss to src/scss/main.scss in your sass task? Does npm run sass work any better now? Where did it output the CSS to? What do you need to correct?
Before, we just edited main.scss with our custom styles, but let's put our custom styles in a better place this time. Make a file called _custom.scss in the scss/ directory (mind the underscore). Then open main.scss and put the following around line 97 (the "Author's Custom Styles" section):
@import 'custom'; // What no underscore? NO! No underscore!Give yourself a tracer bullet in custom.scss and re-run that sass task. What happened? Did your tracer bullet "fire"? It should have... Ask for help if it didn't! Can you find something on the internet that explains what underscores in SCSS filenames do... or don't do? Maybe related to @import, too?
API Gymnastics
Next, we need to fetch some data. Save the JSON data from the GitHub API for Octocat into the file api/github/users/octocat.json: that's a file named octocat.json inside a folder named users/ inside a folder named github/ inside a folder named apis/.
There's more data being used to construct Octocat's profile than is just in octocat.json, though. We need a list of the repositories that belong to Octocat; those should live in a file named repositories.json inside of a directory named octocat.
We also need the most recent public activity for Octocat in a file next to repositories.json called activity.json. If you looked at a tree of apis/ it should look like this:
apis/github/users/octocat/activity.jsonrepositories.jsonoctocat.json
For BEAST MODE you'll do the same for your profile data using the API. Save the data in a file and directory named after your username, just like above.
Skitch this Profile
Grab a screenshot of Octocat's profile page and save it to specs/octocat--full.png. Break down the layout into pieces with Skitch and export them with the same prefix into specs/. For example, specs/octocat--repositories.png might be the Repositories section or specs/octocat--contributions.png is a good name for the Contributions section. Make lots of these, and break down the big sections into smaller pictures for the various pieces. You'll be building the HTML, (S)CSS, and JavaScript for this page, so document your images heavily!
kellymurray
al-the-x
USERNAME.github.ionamedjournal-week-4frommasterTIY-Assignmentsnamed16--planet-of-the-apisfrommasterTIY-GitHubnamedyak-shavingfrommasterUSERNAME.github.io:journal-week-4journal-week-4.mdor something creativetutorial-week-4.mdor something creativeTIY-Assignments:16-planet-of-the-apisCheatSheets/GitHubAPI.md-- Did you have a Starting Point?ProductPage/-- useyo h5bpin here...specs/-- for Skitching the following:full--desktop.pngfull--mobile.pngfull--tablet.pngcss/main.csstoscss/main.scssTIY-GitHub:yak-shavingapis/github/users/octocat.json-- from the API!dist/.gitignore-- ignoring everythingspecs/-- for the Skitching!octocat--full.pngoctocat--*.png-- whatever you want to call themUSERNAME--full.pngUSERNAME--*.png-- more of the samesrc/-- starting with H5BP...!css/.gitignore-- read my lips, no new CSS filescss/main.csstoscss/main.scssscss/custom.scssindex.html-- no errors, pleasepackage.json-- vianpm init; not insrc/USERNAME.github.iofromjournal-week-4intomasterTIY-Assignmentsfrom16--planet-of-the-apisintomasterTIY-GitHubfromyak-shavingintomasterCheatSheets/GitHubAPI.md