Bone 101 Status 1 Week

Google Summer of Code
1

Hi Community
Last week I got some issues and couldn’t present you a status of Bone101.

I updated the template and had almost done the final design. You can check it here: http://diegotc.github.io/bone101/Support/GSOC/template.html
The option for the View All, is the one that is giving me some problems. I’m not quite sure if the way that is right now is the proper way of showing it.

Personal Observations

  • Planning to change the blue color(http://diegotc.github.io/bone101/Support/GSOC/BLINKINGTUTORIALS/Blink.html), for some orange or some BeagleBoard color. Need to confirm this with Jason.
    To do for this week

  • I just began to work with the Github API. Need to create a login page for writing tutorials.

  • Need to play around with the Flickr API. Need to confirm with Jason if we’re going to use the flickr system for hosting images.

  • Have the option of forking the project. I have to test this.

These are my goals for this week.

2

Bone 101 Status Week 1

What has been done

  • I have been working on testing the Github API (Getting,Creating, Deleting gist) https://github.com/ajaxorg/node-github

  • I have been working on adding Bootstrap to the project. Working on alexanderhiam idea. (May 21 18:24:56)

  • Working on creating the login library. Using https://github.com/jaredhanson/passport-github
    Issues

  • I got some personal problems this week that pass. They have been resolved.

  • The login page hasn’t been added to the github rep, still having some issues, want to have it 100% so the community can test it.
    2 Week Work

  • Finish the login page

  • Have the first demo presentation for creating the cards

  • Confirm with mentors if we’re going to use Flickr API for uploading image

  • Beging to write in google docs one tutorial at least, This way David can check it and use it as a real tutorial for testing the app

3

Bone 101 Status Week 2

What has been done

  • I have the login done. (Haven’t push to github). I use this module: https://github.com/jaredhanson/passport-github

  • I can get all the gist of an specific user. Trying to get all gist with a specific name. (This is for filling the home page of tutorials that will exist

  • I’m working on creating a gist, with the specific files.

  • Work on the design for creating the cards: https://www.lucidchart.com/documents/edit/4efdcaf8-532c-4b2d-b8f4-73b70a009433/1 (This’s is the one of the proposal.)
    Issues

  • At the beggining I was working with the .ejs template, Until I remember github pages only host html files. Need to change this.

  • Got some issues with the github module. (User Issues)

  • Still missing the demo presentation, working on it.

  • Haven’t had time with the Flickr API

  • Didn’t beging to write in google docs one tutorial at least,
    Observations.

  • The code isn’t on github. Reasons I’m working on it, and I don’t think it will be necessary to push code that isn’t 100%

  • I like to work with some pressure. (It’s fine for you mentors to inform you daily or every two days my updates and receive your feedback)

  • This is crucial week for completing the work! Need to put all my work and put a lot of enthusiasm

3 Week Work

  • Have the first demo presentation for creating the cards
  • Finish creating the tutorial sections
  • Work on the Flickr API for uploading image.
  • Create the first tutorial. (Google Docs)
  • Have this ready for this tuesday. (June 10 2014, for showing it on the next meeting)
4

Bone 101 Status Week 2

What has been done

I have the login done. (Haven't push to github). I use this module:
GitHub - jaredhanson/passport-github: GitHub authentication strategy for Passport and Node.js.
I can get all the gist of an specific user. Trying to get all gist with a
specific name. (This is for filling the home page of tutorials that will
exist
I'm working on creating a gist, with the specific files.
Work on the design for creating the cards:
Docs: Lucidchart
(This's is the one of the proposal.)

Diego,

Do you have a new status update?

I'm really not happy with putting non-generic code into the primary
server, such as putting any sort of secret keys, so I don't think your
approach will work. I think a suitable work-around is to create or use
a generic oauth2 server such as https://oauth.io.

By running this page:
http://jsfiddle.net/jkridner/6BM78/show

I was able to create this page:

Which you can see has the data associated with my github account:

What was required was creating an account at https://oauth.io and
adding an application to http://github.com.

With it being on jsfiddle.net, you can see it can easily be placed on
github.io.

5

Thanks Jason for the feedback.

This is my progress of this week.
I can create tutorials (Simple tutorials, General Info of the tutorial, if there’s a pre requisite, Materials need, a hardware explanation, Add the code, and extra info. This are just simple tutorial not many words. Complex tutorials still working on the design).
This is an example of the gist created: https://gist.github.com/DiegoTc/b276800bd9215787243f
Using Jason idea all of this is done on the client side.

This changes will be publish on gitpages tonight. I forgot to push the code to github today on the morning :frowning:

Besides this, today on the morning, I started to created new files on the github repo. This is necessary because after creating the tutorial,
it will redirect to a page similar like this bone101/tutorials/{tutorial name} or {gist id }. I will work on this tonight. Will try to have this ready for tomorrow.

For the editors I stop using this plugin bootstrap-wysiwyg and instead found this one https://github.com/DiegoTc/summernote

Jason, I’m working with a design you will see tonight on github pages, This design is going to change, the Guatemala people will have a mockup in this week. (Oscar told us that to Steve and me). So I don’t see why to add double effort on something it will be change. Do you agree with this?

When I finish the part of creating the tutorial pages and adding it on github, I will begin working on the edit and delete.

6

Thanks Jason for the feedback.

This is my progress of this week.
I can create tutorials (Simple tutorials, General Info of the tutorial, if
there's a pre requisite, Materials need, a hardware explanation, Add the
code, and extra info. This are just simple tutorial not many words. Complex
tutorials still working on the design).
This is an example of the gist created:
https://gist.github.com/DiegoTc/b276800bd9215787243f
Using Jason idea all of this is done on the client side.

This changes will be publish on gitpages tonight. I forgot to push the code
to github today on the morning :frowning:

Besides this, today on the morning, I started to created new files on the
github repo. This is necessary because after creating the tutorial,
it will redirect to a page similar like this bone101/tutorials/{tutorial
name} or {gist id }. I will work on this tonight. Will try to have this
ready for tomorrow.

For the editors I stop using this plugin bootstrap-wysiwyg and instead
found this one GitHub - DiegoTc/summernote: Super Simple WYSIWYG Editor on Bootstrap

Jason, I'm working with a design you will see tonight on github pages, This
design is going to change, the Guatemala people will have a mockup in this
week. (Oscar told us that to Steve and me). So I don't see why to add double
effort on something it will be change. Do you agree with this?

Can you make progress on the github interface code (clean up the
library, etc.) while trying to get some of this design input?

When I finish the part of creating the tutorial pages and adding it on
github, I will begin working on the edit and delete.

Why is 'delete' needed?

7

Thanks Jason for the feedback.

This is my progress of this week.
I can create tutorials (Simple tutorials, General Info of the tutorial, if
there's a pre requisite, Materials need, a hardware explanation, Add the
code, and extra info. This are just simple tutorial not many words. Complex
tutorials still working on the design).
This is an example of the gist created:
https://gist.github.com/DiegoTc/b276800bd9215787243f
Using Jason idea all of this is done on the client side.

This changes will be publish on gitpages tonight. I forgot to push the code
to github today on the morning :frowning:

Besides this, today on the morning, I started to created new files on the
github repo. This is necessary because after creating the tutorial,
it will redirect to a page similar like this bone101/tutorials/{tutorial
name} or {gist id }. I will work on this tonight. Will try to have this
ready for tomorrow.

For the editors I stop using this plugin bootstrap-wysiwyg and instead
found this one GitHub - DiegoTc/summernote: Super Simple WYSIWYG Editor on Bootstrap

Jason, I'm working with a design you will see tonight on github pages, This
design is going to change, the Guatemala people will have a mockup in this
week. (Oscar told us that to Steve and me). So I don't see why to add double
effort on something it will be change. Do you agree with this?

Can you make progress on the github interface code (clean up the
library, etc.) while trying to get some of this design input?

When I finish the part of creating the tutorial pages and adding it on
github, I will begin working on the edit and delete.

Why is 'delete' needed?

Also, take a look at how
BeagleBoard.org - Bonecard prototype is fetching content
from gist. I don't know how to do the URLs quite yet (without making
everything as /#/), but this does give links for search engines to the
source content, which is important. I'm starting to feel that /#/ is
going to be necessary because the content is all on gist.github.com
and I want the beagleboard.org/bone101 content to be static. Of
course, for bone101 served on the board, we don't want to need to go
to the Internet, thus we need to either add local static HTML content
using some different method or simply add local JSON data that matches
the github request.

I might add /#/ plus local data functionality in next before putting
in the forking ability.

Are these examples helpful for you to understand how to make the
interface clean of dynamic server-side code?

8

Hi
I have some new updates.
The home page: http://diegotc.github.io/bone101/Support/GSOC/app/views/index.html
It has the options for login. After you log in, you can create a new tutorial.

If you want to see a tutorial. E.g http://diegotc.github.io/bone101/Support/GSOC/app/views/tutorial.html?gistid=afb483bbf1c1789be837

This is the gist : https://gist.github.com/DiegoTc/afb483bbf1c1789be837
Observations.
Design isn’t pretty nice. Haven’t work on this, because I have to confirm with the graphic designers from Guatemala about that.
Still missing to add some links and redirects but this basically the project idea.

Next steps are to add the use of bonescript library.

9

Diego,
How is it going with the graphic designers in Guatemala? Any problems? Are they being helpful? Let me know if there is anything that I can do to help the situation be better. Thx and talk soon!

10

Week Status

  • What has been accomplished?

  • Login is working

  • User can create tutorials

  • User can share tutorials to friends

  • Conversation with Guatemala people for design has been done. They will send a mockup this week

  • All of this changes are live here

  • Observations

  • Filling the index card right now has a small bug[1].

  • The edit section, needed to define where is going to be located

  • The CSS bug of the tutorial page has been fix, still haven’t upload it(CHROME)

  • Issues

  • Having issues with CSS in the tutorial page for Firefox, need to test it. Image

  • Major issues have been resolve on during development.

  • Goals

  • Have the index card fill with existing tutorials

  • At the moment of creating the tutorial save the GIST ID on the “Secret Gist” that will have tutorials to check and allow that they’re presence on beagleboard.org

  • Integrate bonescript lib in the cards

  • Have the edit window and update the information to the existing gist

  • Start working on the search option. (Need to talk with mentors about this)

  • If all of this is done before Sunday, share it to the community so they can help me testing it.

11

What has been accomplished?

  • Auto Save working

  • The preview card has been added

  • Profile page for having the tutorials, so users can edit them

  • All of this changes are not yet live on gh-pages. Planning to push them of Friday, to show them on Fridays meeting with Jason and Steve

Observations

Issues

  • I don’t want to use the datatable for searching. Doing this will cause the original idea of Bone101 to disappear.

  • Design is something I’m start to get worried. Guatemala people haven’t talk. Need Steve help on this.

  • The Edit section is basically like the create. Need to have the OK on create to work on this.

Goals

  • Get the Ok on creating tutorials Fridays meeting

  • Have the edit ready.

  • Start to test basic tutorials, turn on led using the BBB with the tutorial.

  • If there’s a design start working on it.

12

What has been accomplished?

Auto Save working
The preview card has been added
Profile page for having the tutorials, so users can edit them
All of this changes are not yet live on gh-pages. Planning to push them of
Friday, to show them on Fridays meeting with Jason and Steve

Observations

Currently the create looks this way: http://screencast.com/t/tIWruMDhf
Jason told me he doesn't wants to see the toolbar, so it will look this
way: http://www.screencast.com/t/SYXw5XNhYoj

I want there to be a toolbar, but I want it to be outside the card and
also not to see a box inside the 'bonecard' view. The idea is that you
should have a true WYSIWYG view of the card while you are editing so
you can position things neatly in the box. This will be important when
you start creating interactive components within the box especially.

Need to confirm if he wants it this way. If is this way, adding images will
be complicated.

Nope. I want a toolbar, just not inside the card.

I'm adding the tab of Tags. Planning to use this for searching

Great.

Issues

I don't want to use the datatable for searching. Doing this will cause the
original idea of Bone101 to disappear.

We've certainly needed to work on this. I believe that the github API
allows discovery of forks. Creating a list of forks that can be
explored could be interesting, but I don't know how to manage this
when the list gets large. I'm OK with starting with a simple scrolling
list approach and dealing with the difficulty of discovery once there
are enough forks to need discovery. I suspect we can rank forks based
on some manager/user input to have forks focused on pushing content
upstream to be discovered the most quickly.

13

What has been accomplished?

14

What has been accomplished?

  • The create option has been changes. This is not the official version. Some changes were requested on Monday night. Didn’t finish the changes.
  • Using the ACE Editor for the code cards
  • Toolbar is on top of the card

Observations

· Currently you can created tutorials. http://diegotc.github.io/bone101/Support/GSOC/app/views/create.html

· This is not the official version, but if you want to start to test it, you can do it.

Issues

· Didn’t got the OK, from the create. Feedback was given, and couldn’t finish it yesterday.

· The edit will work almost the same as create. Until I have the OK, from the first I will have the edit ready. (They work almost the same on the back end)

Goals

  • Get the Ok for create and edit.
  • Start to test basic tutorials, turn on led using the BBB with the tutorial.
  • The way how tutorials will be show has to be change.

We had some specific feedback on our last meeting that isn’t reflected here, such as the ability to create various card types and to have the preview card show up as small so that it is WYSIWYG. There’s also the issue with the editor box showing up that you were researching. Please include all of your notes on next steps here.

15

These are the things to do

  • Have the preview card on a small card

  • Ask if the card will be code or html

  • Have the ability to change the code for the ACE editor E.g. Javascript, Ruby, Python,etc

  • Change the CSS for the Summernote editor

  • Have all gist id on one same id. This way searching will be easier and getting tutorials (Gist Id) for editing will be easier

  • Fork the tutorials

  • Edit tutorials

16

What has been accomplished?

  • Have the preview card on a small card

  • Ask if the card will be code or html

  • Have the ability to change the code for the ACE editor E.g. Javascript, Ruby, Python,etc

  • Have all gist id on one same id. This way searching will be easier and getting tutorials (Gist Id) for editing will be easier
    Observations

  • All of this changes are live: http://diegotc.github.io/bone101/Support/GSOC/app/views/create.html You can begin creating tutorials, but will not have the ability to edit then later.

Issues

  • Didn’t work all the weekend. I was sick.
  • Fork the tutorials still haven’t work on this
  • Edit tutorials is pending. If the create is OK, the interface will be almost the same for Edit
  • Didn’t change the CSS for the Summernote editor

Goals

  • Have the edit tutorials ready
  • Fork tutorials and have the ability to edit them
  • The way of viewing the tutorials needs to be change to a more friendly interface
17

What has been accomplished

Issues

  • Ok hasn’t been given for this.

  • Need testers. If more people start to create tutorials, we will see how Bone101 behavior

  • The graphic design the guatemala people send, it’s a firework file. My idea right now is to let the design aside. Currently it has improve much that what it was at the beginning.
    Goals

  • Have the profile page, this page will be divide in Drafts tutorials & Save tutorials

  • Run the javascript code live. Need to talk with mentors how to they want this.

  • Continue rewriting tutorials.

  • The page for viewing tutorial, currently only has alerts notifying users they need to login to fork or edit tutorial, a redirect to the login is need it

  • Add the option to move back and fordward for visualizing the cards on the tutorial page.

18

Diego,
Based on your below links, here is what things look like on my Win8/Chrome/HP Laptop
Your link: http://diegotc.github.io/bone101/Support/GSOC/app/views/tutorial.html?gistid=855e0d8d0b6f6f53f06b#3
My Screenshot: http://i.imgur.com/O9l5yDS.png
My Comments:

  1. Notice how its cut-off @ the bottom…I have seen lots of native Win8 programs do this, so I wonder if Win8 has a problem with the way it reports the resolution for the height.
  2. Notice the fork-me banner on the right is weird.
  3. Notice that there is a horizontal scroll bar for no reason. (Didnt one of the IRC guys suggest a fix for this?)

Your link: http://diegotc.github.io/bone101/Support/GSOC/app/views/index.html
My Screenshot: http://i.imgur.com/A6DWIhX.png

Its coming along!
-frenchy

19

What has been accomplished?

  • Demos from Bone101 have been rewritten using the new platform

  • Bug at the moment of create html card has been fixed (CSS Issue) (This changes haven’t been push to gh-pages)

  • Small bugs have been fixed

  • Investigate how to run the code live. (Info)
    Issues

  • From the 5 goals written last week, only 1 was accomplish. It was to rewrite tutorials. The 4 of then are still missing fixes, so that’s why I’m not putting then as accomplish

  • Running live code has to be confirm with mentor. (Generally we have different ideas, need to make an agreement on this)

  • Current version of gh-pages has a bug. I’m merging branches right now.
    Goals

  • Run the javascript code live. Need to talk with mentors how to they want this.

  • Have the profile page, this page will be divide in Drafts tutorials & Save tutorials

  • Continue rewriting tutorials.

  • The page for viewing tutorial, currently only has alerts notifying users they need to login to fork or edit tutorial, a redirect to the login is need it

  • Add the option to move back and fordward for visualizing the cards on the tutorial page.

  • Fix reported bugs. Steve has report several and I have reply them

20

What has been accomplished?

  • Users can run live code. You can’t stop the script and load it again with out refreshing the page.

  • Have the profile page. You can visualize the drafts and publish tutorials.

  • Fix reported bugs

  • Pagination on the index cards

  • Tutorials have been written.
    Issues

  • Haven’t finish to add all the tutorials of bone101.

  • User friendly. still can be done. (It’s not much)

  • Some small code reviews are missing

  • Monitor Compatibility.

Goals.

  • Make the site more user friendly. (Code)
  • Code review (Code)
  • Monitor Compatibility (CSS + Code)
  • Finish to write tutorials
    Observations

The main idea of the original proposal has been develop. There were several changes during the project, that there we’re consider during the proposal, but they have been resolved.