search

wizardamigos / profiles

Fork to make your profile
http://wizardamigos.com/profiles
MIT License
6 stars 45 forks source link

[feature] profile card #8

Open serapath opened 6 years ago

serapath commented 6 years ago
serapath commented 6 years ago

more inspiration

serapath commented 6 years ago

Example Code: https://codepen.io/serapath/pen/opydNr?editors=0010

noraliucode commented 6 years ago

May I try on this issue? :)

ninabreznik commented 6 years ago

Just remembered that a while ago I started making profile modules and gallery so maybe this can be reused. It's built in bel and csjs

https://codepen.io/ninabreznik/pen/Lymbaq?editors=0011 https://codepen.io/ninabreznik/pen/bWaOqb

On Sat, Jan 13, 2018 at 4:48 PM, TzuYuan notifications@github.com wrote:

May I try on this issue? :)

— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/wizardamigos/profiles/issues/8#issuecomment-357419423, or mute the thread https://github.com/notifications/unsubscribe-auth/ABBsy7R0iFQLOTWWtjLmmooMSwUVSH_Kks5tKG3dgaJpZM4RcUdF .

--

Nina Breznik

Vision baker at FairyDust.agency

T: @ninabreznik M: +1 510 747 84 39 G: gitter.im/ninabreznik

Check out our work:

www.wizardamigos.com www.refugeeswork.com www.codingamigos.com

http://www.zweidesign.co

noraliucode commented 6 years ago

Fantastic. Will try to compose those codes together.

serapath commented 6 years ago

cool :-)

ninabreznik commented 6 years ago

I also added a first draft of a card https://codepen.io/ninabreznik/pen/JMggRB?editors=0011

Next step is to use @kiecoo 's module for getting the data

ninabreznik commented 6 years ago

@kiecoo So, the next step would be to add your module to my Profile card and then also adapt this profile card a bit more to fit the data nicely.

To use your module inside of Profile card, you need to write in the first lines, next to bel and csjs-inject etc.

var githubData = require('name-of-your-module')

Then if you do 

console.log(githubData)

you should see the object you provide through this module into the Profile card

kiecoo commented 6 years ago

I would go ahead to add my module into Profile card~

kiecoo commented 6 years ago

@ninabreznik About the Profile card

【What I am trying to do】 With doing the profile card to make it "flippable" as Alex told me, I am trying using the npm module of bel-card & bel-profile

【the problems I met】 I got stuck that I couldn't let "the module of bel-profile &bel-card " run successfully in codepen, could you help me to have a look about what I did wrong?

(the reason of putting in codepen is that I could use codepen to make myself to understand competely detail of these two modules at first so that I could make sure that I would use them in the right situation

ninabreznik commented 6 years ago

@kiecoo I'm reposting the code here

PROFILE CARD 1

var bel = require('bel')
var csjs = require('csjs-inject')

/* --------------------------------------------------------
                          FONTS
---------------------------------------------------------- */

var fonts             = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', 'https://fonts.googleapis.com/css?family=Ubuntu']
var fontAwesome       = bel`<link href=${fonts[0]} rel='stylesheet' type='text/css'>`
var fontUbuntu        = bel`<link href=${fonts[1]} rel="stylesheet">`
var font_ubuntu       = 'Ubuntu, sans-serif'
document.head.appendChild(fontAwesome)
document.head.appendChild(fontUbuntu)
/* --------------------------------------------------------
                        VARIABLES
---------------------------------------------------------- */
// DATA
var data = {
  "username": "ninabreznik",
  "projects": [
    "http://www.refugeeswork.com",
    "http://www.wizardamigos.com",
    "http://fairydust.agency"
  ],
  "background": [
    "Javascript",
   "Entrepreneurship",
    "Community building"
  ],
  "interests": [
    "p2p web",
    "self employment",
    "javascript",
    "blockchain"
  ],
  "github": "https://github.com/ninabreznik"
}

// VARIABLES
var profileImageUrl   = 'https://nomadlist.com/assets/img/cities/phuket-thailand-500px.jpg'
var githubUrl = data['github']

//  COlORS
var blue = '#365899'
var grey = '#616770'
var lightGrey = '#90949c'

//STATE
var projectsExpanded = false;

// CSS
var css = csjs`
  .main {
    font-family: ${font_ubuntu};
    display: flex;
    align-items: start;
  }
  .button:hover {
    background: none !important;
  }
  .imageContainer {
    display: flex;
  }
  .textContainer {
    margin-left: 5%;
    min-width: 250px;
    line-height: 18px;
  }
  .username {
    font-weight: bold;
    text-decoration: none;
    color: ${blue};
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    padding-bottom: 1px;
  }
  .profileImage {
    border-radius: 50%;
    width: 72px;
    height: 72px;
  }
  .background {
    font-size: 0.7em;
  }
  .interests {
    color: ${lightGrey};
    font-size: 12px;
  }
  .interestItems {
    color: ${lightGrey};
    font-size: 12px;
    margin-left: 2px;
  }
  .backgroundItem {
    color: ${grey};
    border: .5px solid ${lightGrey};
    border-radius: 3px;
    padding: 2px;
    font-size: 11px;
    margin-left: 3px;
    align-items: center;
    letter-spacing: -0.01em;
    font-weight: bold;
  }
  .projectsContainer {
    color: ${blue};
    cursor: pointer;
    text-decoration: none;
    font-size: 12px;
  }
  .projectsTitle:hover,
  .username:hover {
    text-decoration: underline;
  }
  .projectList {
    line-height: 25px;
  }
  .projectItem {
    text-decoration: none;
  }
  .line {
    border-top: 1px #dddfe2 solid;
    margin: 5px 0;
  }
`

function profile () {
  return bel`
    <div class=${css.main}>
        <div class=${css.imageContainer}>
          <img src=${profileImageUrl} class=${css.profileImage}>
        </div>
        <div class=${css.textContainer}>
          <a href=${githubUrl} class=${css.username}>@${data['username']}></a>
          ${showBackground(data)}
          ${showProjects(data)}
          ${showInterests(data)}
        </div>
    </div>`
}

/* --------------------------------------------------------
                          HELPERS
  ---------------------------------------------------------- */
function showBackground (data) {
 return bel`
  <div>
    <div class=${css.background}>
      <i class="fa fa-shield" aria-hidden="true"></i>
      ${data['background'].map((el)=>bel`<span class=${css.backgroundItem}>${el + ' '}</span>`)}
    </div>
  </div>`
}

function showProjects (data) {
var len = data['projects'].length
return bel`
  <div>
    <div class=${css.projectsContainer} onclick=${event => showHideProjects(event.currentTarget, data)}>
      <div class=${css.projectsTitle}>${len} projects listed</div>
    </div>
  </div>
`
}

function showHideProjects (el, data) {
console.log(el)
if (projectsExpanded === true) {
  var list = document.querySelector('#list')
  el.removeChild(list)
  projectsExpanded = false
} else {
  var projectList = bel`
    <div class=${css.projectList} id='list'>
      <div class=${css.line}></div>
      ${data['projects'].map((el)=>bel`<div class=${css.projectItem}>${el + ' '}</div>`)}
      <div class=${css.line}></div>
    </div>`
  el.appendChild(projectList)
  projectsExpanded = true
}
}

function showInterests (data) {
return bel`
  <div class=${css.interests}>
    <span class=${css.tag}>List of interests:</span>
    ${data['interests'].map((el)=>bel`<span class=${css.interestItems}>${el + ' '}</span>`)}
  </div>`
}

var html = profile()
document.body.appendChild(html)

PROFILE CARD 2

var bel = require('bel')
var csjs = require('csjs-inject')

/* --------------------------------------------------------
                          FONTS
---------------------------------------------------------- */

var fonts             = ['https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css', 'https://fonts.googleapis.com/css?family=Ubuntu']
var fontAwesome       = bel`<link href=${fonts[0]} rel='stylesheet' type='text/css'>`
var fontUbuntu        = bel`<link href=${fonts[1]} rel="stylesheet">`
var font_ubuntu       = 'Ubuntu, sans-serif'
document.head.appendChild(fontAwesome)
document.head.appendChild(fontUbuntu)
/* --------------------------------------------------------
                        VARIABLES
---------------------------------------------------------- */
// DATA
var data = {
  "username": "ninabreznik",
  "projects": [
    "http://www.refugeeswork.com",
    "http://www.wizardamigos.com",
    "http://fairydust.agency"
  ],
  "background": [
    "Javascript",
   "Entrepreneurship",
    "Community building"
  ],
  "interests": [
    "p2p web",
    "self employment",
    "javascript",
    "blockchain"
  ],
  "github": "https://github.com/ninabreznik"
}

// VARIABLES
var profileImageUrl   = 'https://nomadlist.com/assets/img/cities/phuket-thailand-500px.jpg'
var githubUrl = data['github']

//  COlORS
var blue = '#365899'
var grey = '#616770'
var lightGrey = '#90949c'

//STATE
var projectsExpanded = false;

// CSS
var css = csjs`
  .main {
    font-family: ${font_ubuntu};
    display: flex;
    align-items: start;
  }
  .button:hover {
    background: none !important;
  }
  .imageContainer {
    display: flex;
  }
  .textContainer {
    margin-left: 5%;
    min-width: 250px;
    line-height: 18px;
  }
  .username {
    font-weight: bold;
    text-decoration: none;
    color: ${blue};
    font-size: 14px;
    font-weight: bold;
    line-height: 20px;
    padding-bottom: 1px;
  }
  .profileImage {
    border-radius: 50%;
    width: 72px;
    height: 72px;
  }
  .background {
    font-size: 0.7em;
  }
  .interests {
    color: ${lightGrey};
    font-size: 12px;
  }
  .interestItems {
    color: ${lightGrey};
    font-size: 12px;
    margin-left: 2px;
  }
  .backgroundItem {
    color: ${grey};
    border: .5px solid ${lightGrey};
    border-radius: 3px;
    padding: 2px;
    font-size: 11px;
    margin-left: 3px;
    align-items: center;
    letter-spacing: -0.01em;
    font-weight: bold;
  }
  .projectsContainer {
    color: ${blue};
    cursor: pointer;
    text-decoration: none;
    font-size: 12px;
  }
  .projectsTitle:hover,
  .username:hover {
    text-decoration: underline;
  }
  .projectList {
    line-height: 25px;
  }
  .projectItem {
    text-decoration: none;
  }
  .line {
    border-top: 1px #dddfe2 solid;
    margin: 5px 0;
  }
`

function profile () {
  return bel`
    <div class=${css.main}>
        <div class=${css.imageContainer}>
          <img src=${profileImageUrl} class=${css.profileImage}>
        </div>
        <div class=${css.textContainer}>
          <a href=${githubUrl} class=${css.username}>@${data['username']}></a>
          ${showBackground(data)}
          ${showProjects(data)}
          ${showInterests(data)}
        </div>
    </div>`
}

/* --------------------------------------------------------
                          HELPERS
  ---------------------------------------------------------- */
function showBackground (data) {
 return bel`
  <div>
    <div class=${css.background}>
      <i class="fa fa-shield" aria-hidden="true"></i>
      ${data['background'].map((el)=>bel`<span class=${css.backgroundItem}>${el + ' '}</span>`)}
    </div>
  </div>`
}

function showProjects (data) {
var len = data['projects'].length
return bel`
  <div>
    <div class=${css.projectsContainer} onclick=${event => showHideProjects(event.currentTarget, data)}>
      <div class=${css.projectsTitle}>${len} projects listed</div>
    </div>
  </div>
`
}

function showHideProjects (el, data) {
console.log(el)
if (projectsExpanded === true) {
  var list = document.querySelector('#list')
  el.removeChild(list)
  projectsExpanded = false
} else {
  var projectList = bel`
    <div class=${css.projectList} id='list'>
      <div class=${css.line}></div>
      ${data['projects'].map((el)=>bel`<div class=${css.projectItem}>${el + ' '}</div>`)}
      <div class=${css.line}></div>
    </div>`
  el.appendChild(projectList)
  projectsExpanded = true
}
}

function showInterests (data) {
return bel`
  <div class=${css.interests}>
    <span class=${css.tag}>List of interests:</span>
    ${data['interests'].map((el)=>bel`<span class=${css.interestItems}>${el + ' '}</span>`)}
  </div>`
}

var html = profile()
document.body.appendChild(html)
serapath commented 6 years ago

@kiecoo

The code examples nina has already show how to use the component in the end ... otherwise, let me try to explain whats going on :-)

Your codepens both have module.exports = .... So it is totally normal that nothing shows.

The whole code defines the component so that you can use it, but you do not use it yet.

So what i recommend and what you need is something like moving the line module.exports = ... to the end of the codepen ...and then basically comment it out and rather just use it :P

// .... lots of lines of code on codepen to define the component ...
// ....
// ....at some point the codepen end and now you have:

// module.exports = card

var el = card()
document.body.appendChild(el)
kiecoo commented 6 years ago

@serapath @ninabreznik thank you so much with your help, finally I could let both of them work successfully (so happy~)

version in codepen (work successfully) bel-card: codepen bel-profile: codepen

kiecoo commented 6 years ago

profile-card + gitterBox

@serapath @ninabreznik

1-basic layout (profile-card + gitterBox iframe)

codepen: https://codepen.io/kiecoo/pen/qxeyPv view of photo: https://drive.google.com/open?id=149XAIXc_mopHadXZFd9Mhe3h7iuRX6d8

2-add function-of-gitter (profile-card + gitterBox iframe +function of gitter

what I got stuck

(1) build new module of gitter

(in the future using :var chatprofilecard = require('chat-profile-card'))

have problem of move the code into github & still fail after trying different ways to solve I have tried 2 ways to let chatBox to success & both of them failed

<1.repo of makeGitterChatbox> :output is all blank**

In html:

using

makeGitterChatbox(exampleProfile)

<2. repo of try-gitter-chatBox> :output is all pink(just show background of body)

**

In html:

using

var x = makeGitterChatbox(exampleProfile)
document.body.appendChild(x)

instead of 

makeGitterChatbox(exampleProfile)

(2) combine them directly

have problem of position: codepen

serapath commented 6 years ago

i see. The second approach is correct

var x = makeGitterChatbox(exampleProfile)
document.body.appendChild(x)

i am not sure why you only see pink actually on your codepen it looks good to me.

what do you think exactly is missing? what do you expect to be different? :-)

kiecoo commented 6 years ago

<2. repo of try-gitter-chatBox> :output is all pink (just show background of body)

In html:

using

var x = makeGitterChatbox(exampleProfile)
document.body.appendChild(x)

instead of 

makeGitterChatbox(exampleProfile)

(1) codepen

(1-1) layout-expected-to-be (1-2) layout-now
(position of gitterChatBox is different) XD

(2) github problem

When I run it, I see the same problem

only see pink,but on codepen it looks good

last week I tried few ways to solve the problem of only-see-pink, and still failed. I couldn't find the reason which cause that. would it cause bigger problems when combing all in the future ? or it would not? (I am not sure)

serapath commented 6 years ago

  1. regarding the layout, i think you need to fiddle with CSS here. Obviously the resizing worked already

    • this is probably a hard one, but the following css properties might be interesting to explore:
      • container: position: relative; contained element: position: absolute
      • top/bottom/right/left: +/-50%;
      • you can search for those css properties on google to find a better description how they work :-)

  2. maybe the github problem is related to the API limit or the signup/signin?

    • you should have as many and small modules as possible :-)

So there are several ways to find the problem (= this is called "debugging") The first one is to

  1. open the "developer tools"
  2. set break point(s) in the beginning of your app's code and reload the page
  3. then step through each line of the execution until you find the place where the app does something unexpected that causes the problem

The second one is:

  1. write a console.log('before') somewhere in the beginning of your code and
  2. write a console.log('after') somewhere later in your code where you think that code should have been executed, but judging by what you see, it has not been executed.
  3. then reload the page and check the "devtools console" and look if before and/or after has been printed.
  4. You would expect, because of the problem that exists, that only before has been printed, but not after...
  5. now you move the console.log('before') a few lines further in your code and repeat from STEP 3.

...at some point you might reach the point in your code where - against your expectations - the console.log('before') does not get printed anymore...

This is where you could console.log some local variables or conditions and reload the page to get a better picture about why the code is not behaving the way you would want it to behave :-)

kiecoo commented 6 years ago

so good. the positionProblem has solved by the way you recommended

2-profile-card + gitterBox iframe +function of gitter

(1) build new module of gitter : problem of all-pink (2) combine them directly : problem of position

about (2) combine them directly : solved successfully

serapath commented 6 years ago

You might need to use relative positions using percentages % rather than fixed ones like px, because when somebody has a different screen resolution or resizes the window, it might not work out anymore. ... but maybe it does in case your container element also has a fixed size.

serapath commented 6 years ago

for me it looks a bit small, because my screen has a big resolution and it also seems to be slightly wrong positioned. http://i.imgur.com/Phy7sDU.png

kiecoo commented 6 years ago

yesterday I tried using percentages % at the beginning but I met problems when screen changing screen-changing-problems

in order to solve screen-changing-problems , I google the solution to change using px . but now it seems cause another problem you told now. Maybe I would need to search another solution which could solve both of these problems

serapath commented 6 years ago

yes it's actually not that easy. These are the problems that also Nina had.

The main feature that is supposed to solve this in the future goes under the name: container queries or element queries ...for now it's always a little bit about hacks and often it's possible to find some ways to make it work, but sometimes the only solution is to use JavaScript to listen to changes to the current window size and whenever it's resized to check again the current window size and measure all the widths and heights and positions and set custom styling that is calculated.

Using JavaScript to make sure the styling works and is responsive is usually overkill and should be avoided, but sometimes it's the only solution.

As far as i remember i once tried to fix the styling for a resized chat on an older version of our e-learning app and you could try to use the "developer tools" to check the css of the chat iframe and the container to figure out if you can copy some tricks from there.

The link is: http://app.wizardamigos.com/

kiecoo commented 6 years ago

@serapath @ninabreznik could you have a look below links to help me check if the-solution-I-tried is suitable for the problem we met?

2-profile-card + gitterBox iframe +function of gitter

(1) build new module of gitter : problem of all-pink (2) combine them directly : problem of position

2-(2)____ solution_v2【positionQ-gitterChatBox 】

I finally tried this solution that I didn't see the position problem happening when I tested on window & Mac. I also tested on Chrome & Safari and on resizing-the-screen situation.

could you help to test this solution if it also work successfully on your computer? :-)

serapath commented 6 years ago

yes it works. just - i find it to be very small in size, so it's hard to read. ...the front side is nice to read, but the back side with the chat - but also the "lorem ipsum" text is only readable with a magnifier. ...but otherwise the chat is centered and works for me. very sweet :-)

kiecoo commented 6 years ago

I tried to brainstorm some ways to solve, but there are only 2 ideas I could think about . I am not sure if they are suitable to solve ? if Alex have better ways to suggest me , just feel free to let me know & I could try

<idea 1> enlarge the whole size of card? (twice bigger or other size better?) for example:

  1. now: width: 300px; height: 280px;
  2. one and a half times as big as original size ? width: 450px; height: 420px; 3 other size.......

<idea 2> keep the card size now, move the "lorem ipsum" text into the front side in order to let gitterbox bigger

or other better ideas.........

serapath commented 6 years ago

i don't know yet. Generally it works i guess. So maybe the best would be to leave it like it is and try to put it all together to have the /profiles page working and then we can post it on the chat and on the facebook group and ask for feedback and recommendations from others for how to improve it :-)

Switching out one profile card component for another is good, but i would recommend to first get a working version - the current card looks ok to me :-)

kiecoo commented 6 years ago

leave it and try to put it all together & ask for feedback then see how to improve it

I think your suggestion is better :-)

Switching out one profile card component for another

does Switching-out mean that we make this-single-card into a module to let it to be a component? When we need show 10 or 20 people's profile in a page , we would use the module of this-single-card

(i am afraid that i misread what you said. if it is the same what you suggested , I would do it first)

kiecoo commented 6 years ago

@serapath
finally, I tried a way to let all-pink problem would not came up. could you help me to see if it is a suitable solution for our project?

【problem last time】

2-add function-of-gitter (profile-card + gitterBox iframe +function of gitter

what I got stuck

<1.repo of makeGitterChatbox> :output is all blank** <2. repo of try-gitter-chatBox> :output is all pink(just show background of body)

【possible solution 】

success【2-profileCardgitterBoxIframefunctionOfGitter 】

【detail of possible-solution 】

I tried the different ways to debug of problems of all-pink (try to see why the-same-code could show output in Codepen but fail & just show all-pink in Github I find that if I separate the-same-code into index.html & index.js in github, it failed. if in Github I put the-same-code only in index.js, it successed.

kiecoo commented 6 years ago

@serapath I met a similar problem like above one, but I have no idea to deal with

【problem 】 which I still failed to solve

the module of get-userprofiles-from-github ( output ) seems fail to run.

(the following one is last time the final successful one we had )

[finished] module of get-userprofiles-from-github

  1. npm https://www.npmjs.com/package/get-userprofiles-from-github

  2. github https://github.com/kiecoo/get-userprofiles-from-github

    • it could run when you &Nina help me build the npm & repo of this module last time in camp since you built the npm & repo, I have not changed anything. so it should still success

【what I tried & failed 】

// module.exports =getGithubData

var el = getGithubData() document.body.appendChild(el)



- another, I think the reason of failing to run would not the limit problem because
 (1) before I tested, I leave few days not to run this module to avoid the reason of limit.  
(2) when I test this module, at the same time I test another module as well. if the reason is limit ,both would failed.  the result of my test is that only this `get-userprofiles-from-github` failed
serapath commented 6 years ago

1.

yes, this-single-card would become a component :-)

2.

  1. if you <right click> with the mouse on the website and choose "inspect element", the devtools open.
  2. Here you can select the (javascript) console tab and see red colored error messages.
  3. if you do this on the following page: https://kiecoo.github.io/makeGitterChatbox/
  4. you can read: gitterChat is not defined

  5. clicking the line number of that error in the console shows me this code:

    
    module.exports = gitterChat

    function makeGitterURL (username) {
      return `https://gitter.im/${username}/~embed`
    }

    var exampleProfile = {
      name: 'nina',
      username: 'ninabreznik',
      photo:'https://nomadlist.com/assets/img/cities/phuket-thailand-500px.jpg'
    }

                //difference from the repo of makeGitterChatbox https://github.com/kiecoo/makeGitterChatbox/blob/master/index.html
            var x = makeGitterChatbox(exampleProfile)
            document.body.appendChild(x)
5. **i can't see where `gitterChat` is defined here, something here is not ok here :-)**
6. if you do the same here: https://kiecoo.github.io/makeGitterChatbox/
7. it says: `makeGitterChatbox is not defined`
8. clicking the line number of that error in the console shows me this code:
```js
        module.exports = makeGitterChatbox     

        function makeGitterURL (username) {
          return `https://gitter.im/${username}/~embed`
        }

        var exampleProfile = {
          name: 'nina',
          username: 'ninabreznik',
          photo:'https://nomadlist.com/assets/img/cities/phuket-thailand-500px.jpg'
        }
  1. i can't see where makeGitterChatbox is defined here, something here is not ok here :-)

A little bit about the why:

  1. So here: https://github.com/kiecoo/try-gitter-chatBox/blob/master/index.html#L14

  2. And here: https://github.com/kiecoo/makeGitterChatbox/blob/master/index.html

How to solve the problem? :-)

So let's take two steps back and learn a bit about how modules work first + a strategy how to build your personal knowledge base that you could/should grow and refine during your journey to become a master programmer :-)

Step 1. I highly recommend first you to check: https://github.com/wizardamigos/skilltree/blob/master/README.md#how-to-learn-and-share-the-knowledge-on-your-journey if you didn't do that already, because the amount of learnings starts to grow and get a lot, so you should definitely read how we recommend to build and maintain your digital knowledge base first and then use the opportunity to make more notes and bookmark codepen examples that explain how to define and require modules so you can always add more information later and look it up in case you forget ....you can then also share the links with others for them to learn :-)

Just maybe read it quickly and maybe you want to give it a try and create and bookmark your first notes in the browser bookmarkbar before continuing with step 2.

Step 2. how to define and use modules: If use an index.html that includes the script tag <script src="https://unpkg.com/npm-require"></script> you can just use github and add new and edit existing files and check result on the github page. You can try out what you learn in this video and later bookmark this and maybe some notes about it in your bookmark folder somewhere in a folder about javascript/modules/ or however you want to structure your notes.

Now check this one: https://www.youtube.com/watch?v=xHLd36QoS4k

3.

The module that we built together in the workshop - when i opened your link - still runs and loads and shows all the profiles. I assume it might be a problem again due to the API rate limit for which we are trying to solve the "github login" to increase the rate limit from 60 to 5000 requests per hour :-)

I just tested it. I would say, let's decide on an order on in which to solve our problems :-)

My recommendation (for now):

  1. make on github repository
  2. create a index.html file in that repository with the familiar structure you always use
  3. create a source folder, for example src/
  4. copy all the different modules you or others made into that folder, so you might get:
    • index.html (which has a <script src="index.js"></script> inside)
    • src/gitterchatbox.js
    • src/profilecard.js
    • src/searchbar.js
    • src/getgithubdata.js
    • src/githubsignin.js
    • src/profilepage.js
    • src/ .... whatever else you have (you can also start with less than this list here)
  5. make an index.js file
  6. inside that index.js file you can start writing the code like: 
    
var signup = require('./src/githubsignin.js')
var page = require('./src/profilepage.js')

var button = signup(loadCode) document.body.appendChild(button)

function loadCode (error, code) { // this is triggered when the user clicks the button if (error) return console.error(error) console.log(github responded with "${code}", so let's fetch a lot of data :-)) getgithubdata(code, loadData) }

function loadData (error, data) { if (error) return console.error(error) console.log(github sent us a lot of data, so let's use it to build the page :-)) var el = page(data) document.body.innerHTML = '' // to clear and remove the signup button document.body.appendChild(el) }

kiecoo commented 6 years ago

Q

1-1 result of failing

v1 (sucess):put-all-code-in-html: (repo,output

v2 (fail):separate-code-into-js&html: (repo,output)

1-2 detail I tried

  1. in v2 (fail) to solve problem, I added var Chat = require('./index.js') in the index.html
    • What I tried is steps that I followed with the video-of-require()
    • video example: it shows between 2 js(app.js & count.js), I don't know how to transfer this way into our project which is between html & js (index.html & index.js).And I don't find any similar solutions on Internet. I just guess the reason to fail is that it could work between in 2 js,not between html& js.
serapath commented 6 years ago

I recommend you to first restructure your index.html file to the following:


<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/npm-require"></script>
  </head>
  <body>
    <script>
      var Chat = require('./index.js')

      // .... write more code ...

    </script>
  </body>
</html>

Second, your understanding is correct. The script you import https://unpkg.com/npm-require allows you to use require inside the index.html inside of a <script> tag. You are correct, that this is usually NOT possible and you are correct that usually this only works inside javascript files - but in our case that npm-require script enables it inside of an html file too :-)

Next is the content of index.js is not completely ok. It should probably more look like what i tried to write in my previous comment under 2., which is a very long way of saying that, IF you want to var GitterChat = require('./index.js') then you need to define all the aspects of the gitter chat inside the module which you create inside the index.js file :-) ... which is code that probably should look like what you wrote here:

kiecoo commented 6 years ago

there is one more left where I got stuck

1. question

if there is only 1 function in module, I could run it successfully If I have 2 functions in module as following , I failed to solve

// index.js

module.exports = makeGitterURL
module.exports = makeGitterChatbox

// function No.1
function makeGitterURL (username) {
  return `https://gitter.im/${username}/~embed`
}

// function No.2
function makeGitterChatbox (profile) {
          return bel`
            <div class=${css1.chatbox}>
        <img src="${profile.photo}" class=${css1.photo1}>
              <h1> ${profile.name} </h1>
              <iframe class=${css1.iframe} src=${makeGitterURL1(profile.username)}></iframe>
            </div>
          `
        }

2. possiable reason

I guess the reason of bug happened in following ones which I wrote in wrong way

var makeGitterURL1 = require('./index.js')
var  makeGitterChatbox = require('./index.js')

3. the whole code

//index.html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://unpkg.com/npm-require"></script>
  </head>
  <body>
    <script>

    var makeGitterURL1 = require('./index.js')
    var  makeGitterChatbox = require('./index.js')

    // other code....

   </script>
      </body>
    </html>

PS-

after seeing other example, I still not sure how to tranfer the use way of example into our one when have 2 functions in index.js

exports.counts = function() { console.log(counts + ' ppl is created'); };


```javascript
// index.js
var PersonFactory = require('./personFactory');
var jcc = new PersonFactory('jcc');
jcc.rocks(); // log 'jcc rocks'
PersonFactory.counts() // log '1 ppl is created'
serapath commented 6 years ago

@1.

  1. I recommend to have only one function to be exported per file (= one module per file)
  2. Do you really need multiple functions to be exported? (maybe you only need the second one internally)
  3. If you need multiple functions to be exported, what about requiring multiple files?
serapath commented 6 years ago

@PS

Let me re-write your example how i would recommend to write it

function Person (name) { counts++ this.name = name // functions assigned to properties of objects are called "methods" this.rocks = function() { console.log(this.name + ' rocks!') } }

Person.counts = function() { console.log(counts + ' ppl is created') }

* `index.js`
```js
var Person = require('./person.js')
var jcc = new Person('jcc')
jcc.rocks() // log 'jcc rocks'
Person.counts() // log '1 ppl is created'

note: if you use "methods" (= functions assigned to objects) it is recommended to use "the prototype chain" instead of assigning it directly to a certain object. This doesn't change anything, but it is a "performance optimisation". The prototype chain is a complicated name for something that should be called "the fallback chain" and it means specifying an "ordered list ob objects", so when you check if the first object has a property and it hasn't, you go to the next object in the list and checks if this one has it ...

...long story short, you can make a note, that you should learn about "the prototype chain" (a fundamental feature of javascript) and think of it as "a fallback chain", but: i would highly recommend you to do that LATER - because it is only a "performance optimisation" and nothing else. So don't bother with it too much in the beginning, because it will confuse you - so i recommend you to first get a stable understanding of modules :-)

kiecoo commented 6 years ago

@1.

haha, the questions about @1 is what I am going to ask and want understand more(as Q1 in the following). it seems that Alex already predicted what I am going to ask :-)

the reason I asked Q2(2 functions) yesterday just because I just know how to deal with the situation with 1 function. I tested 2 functions at the same time in case I would met this situation in the following days. but "the case of 2 functions" failed

as what you asked at @1, I also think it's a better way that know more about Q1 from you before Q2 (Q1 is upper Q /parant Q of Q2. maybe after seeing your suggestionof Q1 ,I found out the Q2 would not appear )

serapath commented 6 years ago

Here is a module with multiple exported methods.

Maybe it helps you to understand what is possible generally, but it might just lead away from the problem at hand which is how to fix the cards :-) ...anyway, here you go.

function Util () { return Object.keys(Util) }

Util.fn1 = function() { console.log('function 1') } Util.fn2 = function() { console.log('function 1') } Util.fn3 = function() { console.log('function 1') } Util.fn4 = function() { console.log('function 1') }

* `example.js`
```js
var util = require('./util.js')

console.log("Available Methods:")
console.log(util()) // ["fn1", "fn2", "fn3", "fn4"]

var fn1 = util.fn1
var fn2 = util.fn2
var fn3 = util.fn3
var fn4 = util.fn4
// or in short:
var { fn1, fn2, fn3, fn4 } = util

fn1()
fn2()
fn3()
fn4()
kiecoo commented 6 years ago

thank you ~

Q :

it might just lead away from the problem at hand which is how to fix the cards :-)

"lead away from the problem at hand": I am afraid I mistakenly thought this sentence's meaning well .

does it mean "a module with multiple exported methods" would not appear in our project? if this problem for our project would not the 1st priority to do & need me to turn back to another problem which is on the 1st/higher priority status you suggest, feel free to let me know. :-)

another Q: I still confused about "how would I decide which part of code to move into module(A.js)?", so I don't know if keep going further in the topic of "a module with multiple exported methods"

if I got the whole code of A from codepen(which all-code-in-js )&being about to separate code. there are (1)function-makeGitterChatbox (2)function-makeGitterURL (3)var-exampleProfile ,how would I decide which one of (1)(2)(3) to move into module(A.js)?

// A.js
 module.exports = makeGitterURL

 function makeGitterURL (username) {
  return `https://gitter.im/${username}/~embed`
}

   //A.js
 module.exports = XXXXX     

 function makeGitterURL (username) {
  return `https://gitter.im/${username}/~embed`
}

function makeGitterChatbox (profile) {
   // code about makeGitterChatbox……
}

var exampleProfile = {
  // code about exampleProfile……

}
serapath commented 6 years ago

yes, the first one

// A.js
module.exports = makeGitterURL

function makeGitterURL (username) {
  return `https://gitter.im/${username}/~embed`
}

so you could use it in another module

// make-gitter-chatbox.js
var makeGitterURL = require('./A.js')

module.exports = makeGitterChatbox     

function makeGitterChatbox (profile) {
   // use makeGitterURL() to get the right address to then
   // use it in the code about makeGitterChatbox……
}

so you can then finally in index.js or even index.html do

// index.js  OR index.html <script> ...</script>
var makeGitterChatbox = require('./make-gitter-chatbox.js')

var profile = { name: 'kiecoo', ... }

var el = makeGitterChatbox(profile)

document.body.appendChild(el)
kiecoo commented 6 years ago

(1) fianl one we are going: combing all together

* `index.html` (which has a `<script src="index.js"></script>` inside)
* `src/gitterchatbox.js`
* `src/profilecard.js`
* `src/searchbar.js`
* `src/getgithubdata.js`
* `src/githubsignin.js`
* `src/profilepage.js`

(2) what I am about to do

because I am afraid of that I combine all module at the same time, I don't have enough knowledge to find where the bug is in short time. I planned to combine use-flip-card.js & getgithubdata.js at first. if combining these two works successfully, then add the 3rd one, the 4th one.......

(3) what I have tried successfully

(4) problems I met now

  1. use-flip-card.js could run now, but I am not sure if the one now is suitable for our project. (could you help me check ? thank you) inside use-flip-card.js , turning it into tinier module is better? or the one now is better than tinier one?

  2. how to combine getgithubdata.js into use-flip-card.js ?

(ps) the example-code-you-suggested-me-before (about getgithubdata.js & use-flip-card.js)

could you help me to show me more about how use the example-code-you-suggested-me to fit into the case now.

  1. useuserprofile.json link

  2. use var get_github_data = require('get-github-data')

var wizard_gallery = require('wizard_gallery')
var wizard_searchbar = require('wizard_searchbar')
var get_github_data = require('get-github-data')
var bel = require('bel')

// usage example
get_github_data(function (data) {
   var searchbar = wizard_searchbar(data)
   var gallery = wizard_gallery()

   // gallery.update(data)

   searchbar.on(gallery)

   var app = bel`
     <div class="wizardpage">
       ${searchbar.render()}
       ${gallery.render()}
     </div>
   `
   document.body.appendChild(app)
})

/**********************************************************************
  gallery.js (module internals) [example]
**********************************************************************/
module.exports = gallery

var _data
var dom

function gallery (data) {
   _data = data
   var api = {
     update: function (newdata) {
       _data = newdata
        var tmp = template(_data)
        dom.parentElement.replaceElement(tmp, dom)
        dom = tmp
     }
     render: function () {
        dom = template(_data)
        return dom
     }
   }
   return api
}
/**********************************************************************
  searchbar.js (module internals) [example]
**********************************************************************/
var _data = {}
var listteners = []
var searchbar = {
   on: function (gallery) {
      listeners.push(gallery)
   },
   trigger: function (data) {
     listeners.forEach(gallery => gallery.update(_data)
   }
}

input.addEventListener('change', function (event) {
   var userinput = event.target.value
   _data.selection = userinput
   searchbar.trigger(_data)
})
serapath commented 6 years ago

@(3)

If you open the "developer tools javascript console" you can see some error messages.

  1. you do module.exports = makeGitterURL2 but the defined function below is called makeLinkURL2
  2. that's also why var makeLinkURL1 = require('./make-url-of-twitter-github-codepen-gitter.js') can't find anything so when you try to use makeLinkURL1 (username) it has a problem
  3. https://github.com/kiecoo/de/blob/master/index.html#L36 this css is used inside of usefilepcard.js so you would need to define it there too.

BUT: generally your approach is the right one :-) just a few tiny mistakes, otherwise it looks good and promising and should work well :-)

serapath commented 6 years ago

@(4) and @(ps)

currently you have this:

var makeLinkURL1 = require('./make-url-of-twitter-github-codepen-gitter.js')
module.exports = profile

function profile () {
  var name              = 'Nina'
  var username          = 'ninabreznik'
  var cardText          = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru '
  var imageUrl          = 'https://nomadlist.com/assets/img/cities/phuket-thailand-500px.jpg'
  var city              = 'Berlin'

  makeLinkURL1 (username)
  // ....
}

// ...

you can just replace the profile data with github somehow like the following:

var get_github_data = require('get-github-data')
var makeLinkURL1 = require('./make-url-of-twitter-github-codepen-gitter.js')

module.exports = getDataProfile

function getDataProfile () {
  get_github_data(profile)
}

function profile (data) {
  var ninasProfile = data[0] // maybe ninas profile is the first profile from the list of all profiles?

  // var name              = 'Nina'
  // var username          = 'ninabreznik'
  // var cardText          = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostru '
  // var imageUrl          = 'https://nomadlist.com/assets/img/cities/phuket-thailand-500px.jpg'
  // var city              = 'Berlin'

  var username = ninasProfile.username
  makeLinkURL1 (username)
  // ....
}
kiecoo commented 6 years ago

sorry for missing the errors of @3 .

I would keep more notice about mistakenly reading github's Caching of the-successful-output-previous-version & today I would debug B-final-version-I-pasted-yesterday

thank you :-) `

serapath commented 6 years ago

no problem - it's very normal to miss some errors or other stuff. it happens all the time to everyone. That's why code reviews and sometimes pairing up with somebody is useful. Sometimes it's just good to try to explain it to somebody without that person giving feedback the solution comes often to one's mind. It's called a "rubber duck" moment

kiecoo commented 6 years ago

haha :-) so cute about the "rubber duck moment" (happy about learning one more interesting noun)

about @3

I tried 3 versions to debug & two of them works (the 2nd &3rd versions wrok as the photo) when the 1st version failed, I changed some of code and here come 2nd &3rd versions which wroks successfully. but I still don't figure out the reason why the 1st version failed to work out . if you know the reason, could you let me know about the reason?

if you need code of the-1st-version-which-failed, here is some-core-code of it

  function makeLinkUrl (username) {
    return  `https://gitter.im/${username}/~embed`
  }
  makeLinkUrl (username)
  /* --------------- hover & unhover the card ---------------*/
  var cardContainer_hover = bel`
    <div class=${css.cardContainer_hover}>
      <div class=${css.cardGitterChat} ><iframe class=${css.iframe} src=${ gitter}></iframe></div>

     // other code .....................
    </div>
  `
kiecoo commented 6 years ago

about @3
;finished debugging

【success】Module of gitterChat

kiecoo commented 6 years ago

@serapath

the bug of @(4)

I tried to debug @(4), but I still have these ones (as following) that I couldn't solve

I have check the name require('get-userprofiles-from-github') which I used is the same as the-name-in-npm . I don't have the idea about others possible reasons which causes this bug. 

 - bug 2 `profile is not a function` :

I had checked that there isn't something wrong about each place using profile as following

  1. (in index.html: var profile = require('./index.js') & var x= profile() )

  2. (in index.js: function profile (data) {......... } &

    
function getDataProfile () {
get_github_data(profile)
}```
kiecoo commented 6 years ago

@(4-1): the bug happend when debugging @4

I guess the the core reason of @4 bug is one of following

  1. A---the-code-itself-which-I-wrote
  2. B---the npm module of get-userprofiles-from-github

  3. the connection between A & B

    so I tried a way to test if the reason is (1) A---the-code-itself-which-I-wrote or not at the first try.

serapath commented 6 years ago

@3 why didn't it work

Inside of your photo the var gitter = ... is defined inside of function makeLinkUrl (username) { ... } but you try to use it outside of it.

a variable or anything that you define inside of a function is only visible inside of that function when you run it.

@4

I am not sure what exactly went wrong. But one thing needs improvement and that is dealing with asynchronous functions.

Some "activities", like get_github_data take some time. When you have something like this, you need to write your code a little bit different.

module.exports = getDataProfile

function getDataProfile () { get_github_data(profile) }

function profile (data) { var ninasProfile = data[0] var username = ninasProfile.username

// var name = 'Nina'

// ..... return el }


* **you would write it like this**

```js
var makeGitterChat = require('./make-gitter-chat.js')  
var get_github_data = require('get-userprofiles-from-github')

module.exports = getDataProfile

function getDataProfile (done) {
  get_github_data(function (data) { profile(data, done) })
}

function profile (data, done) {
  var ninasProfile      = data[0]
  var username          = ninasProfile.username

//  var name              = 'Nina'

// .....
  done(el)
}

So as you can see above, we replaced the synchronous return with the asynchronous callback function done

Now in index.html you would replace

var x = profile()
document.body.appendChild(x)

with

function done (x) { document.body.appendChild(x) }
profile(done)

so again @(4-1)

The reason is probably (3.) the connection between A & B

This is approach has many names and is sometimes called "callback style" or "continuation passing style", where instead of writing "return", you...

// pass a FUNCTION, e.g.
function done (x) { console.log(x) }
// as an ARGUMENT to your FUNCTION CALL, e.g.
getGithubData(done)
// so when the function call "getGithubData(...)" finishes
// the program will "callback" or "continue" with the function you passed in (which is "done"), passing in the ARGUMENT that you expect to get back from "getGithubData"

// ... in code, OLD vs. NEW looks like this :

// OLD (and WRONG) "synchronous style":
var el = profile()
document.body.appendChild(el)
function profile () {
  var data = getGithubData()
  var el = bel`<div>${githubData.map(x => bel`<p>${x.user}</p>`)}</div>`
  return el
}
function getGithubData () {
  var githubData = [{ user: 'A' }, { user: 'B' }, ...]
  return githubData
}

// NEW (and CORRECT) "asynchronous style"
profile(done)
function done (el) { document.body.appendChild(el) }
function profile (done) {
  getGithubData(next)
  function next (data) {
    var el = bel`<div>${data.map(x => bel`<p>${x.user}</p>`)}</div>`
    done(el)
  }
}
function getGithubData (done) {
  var githubData = [{ user: 'A' }, { user: 'B' }, ...]
  done(githubData)
}
kiecoo commented 6 years ago

@(4-1)-Q1 tried to find the place of bug

so, the bug happened on 'moving the code into module'

(2).the difference of code between v1 & v2

code of v1: repo

code of v2 :repo. bug-error.bug-detail

// index.html

    var data = require('./index.js') 

                        // ......other code is same as the code in v1

    function profile (data) {
                  // .....other code is same as the code in v1

      var ninasProfile      = data[0]
          var username          = ninasProfile.username

      var name              = 'Nina'
                      // .....other code is same as the code in v1
   }

------
//index.js
// moved the function-getGithubData from index.html to index.js

    module.exports = getGithubData
    function getGithubData () {

            var data1= [
            {
            "repo": "nicco88/personal-portfolio",
            "url": "https://api.github.com/repos/nicco88/personal-portfolio",
            "username": "ninabreznik",
            "time": "2018-04-01T17:50:29Z"
            },
            {
            "repo": "freeCodeCamp/devdocs",
            "url": "https://api.github.com/repos/freeCodeCamp/devdocs",
            "username": "serapath",
            "time": "2018-03-27T04:51:07Z"
            }]

            return  data1
      }