[feature] profile card #8
Comments
|
more inspiration
|
|
Example Code: |
|
May I try on this issue? :) |
|
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 ***@***.***> 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
<#8 (comment)>,
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>
|
|
Fantastic. Will try to compose those codes together. |
|
cool :-) |
|
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 |
|
@kiecoo So, the next step would be to add your module to my To use your module inside of Then if you do you should see the object you provide through this module into the |
|
I would go ahead to add my module into Profile card~ |
|
@ninabreznik About the Profile card 【What I am trying to do】 【the problems I met】
(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 |
|
@kiecoo I'm reposting the code here PROFILE CARD 1var 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 2var 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) |
|
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 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 // .... 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) |
|
@serapath @ninabreznik version in codepen (work successfully) |
profile-card + gitterBox1-basic layout (profile-card + gitterBox iframe)codepen: https://codepen.io/kiecoo/pen/qxeyPv 2-add function-of-gitter (profile-card + gitterBox iframe +
|
|
i see. var x = makeGitterChatbox(exampleProfile)
document.body.appendChild(x)i am not sure why you only see pink what do you think exactly is missing? |
<2. repo of try-gitter-chatBox> :output is all pink (just show background of body)
(1) codepen (1-1) layout-expected-to-be (2) github problem When I run it, I see the same problem
last week I tried few ways to solve the problem of only-see-pink, and still failed. |
So there are several ways to find the problem (= this is called "debugging")
The second one is:
...at some point you might reach the point in your code where - against your expectations - the 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 :-) |
|
so good. the positionProblem has solved by the way you recommended
about (2) combine them directly : solved successfully
|
|
You might need to use relative positions using percentages |
|
for me it looks a bit small, because my screen has a big resolution and it also seems to be slightly wrong positioned. |
|
yesterday I tried using percentages % at the beginning but I met problems when screen changing 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 |
|
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: 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/ |
|
@serapath @ninabreznik
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? :-) |
|
yes it works. |
|
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?) <idea 2> or other better ideas......... |
|
i don't know yet. Generally it works i guess. 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 :-) |
I think your suggestion is better :-)
does (i am afraid that i misread what you said. if it is the same what you suggested , I would do it first) |
|
Not sure I understand your last question, but when you have you can write var el = page(data)
fx_done(el)regarding errors, it's common practice to pass some kind of error as the first argument of callbacks so you know if everything went write For example, it would be better to write you code like this: // not like this:
profile(done)
function done (el) { document.body.appendChild(el) }
// but rather like this:
profile(done)
function done (error, el) {
if (error) return console.error(error) // or `document.body.innerHTML = `<h1>${error}</h1>`
document.body.appendChild(el)
}That way, you can write your code in Does that make sense? |
I am still a little bit confused (but I don't know where the all places made me confused are), so the first thing I did is following what you said to edit code first (not debug yet) After you checked: I am trying to find which part of concept I don't understand well to make me confused Q1: after using "funciton loadData" instead of L210 .( remove L210 means " we also affect 'next') Q2:
|
|
haha,thank you so much.
the questions I had now just are the Q1. Q2 in previous comment. thank you :-) |
|
kiecoo/de3-2@7f5d813#diff-eacf331f0ffc35d4b482f1d15a887d3bR203
Q2
yes, you have it in line Q1
This makes it all a lot easier to read. Below follows your code with the right formatting |
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://unpkg.com/npm-require"></script>
</head>
<body>
<script>
var bel = require('bel')
var csjs = require('csjs-inject')
/******************************************************************************
THEME
******************************************************************************/
var fonts = [
'https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/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)
var backgroundWhite = '#f6f6f6'
var fontGrey = '#606060'
var borderGrey = '#fafafa'
var green = '#2a9c6d'
var red = '#d41304'
var css = csjs`
.card {
display: flex;
align-items: center;
justify-content: center;
font-family: ${font_ubuntu};
background-color: ${backgroundWhite};
border: 2px solid ${borderGrey};
box-shadow: 0 1px 2px rgba(34,25,25,0.4);
width: 300px;
height: 280px;
padding: 1em;
}
.cardContainer,
.cardContainer_hover {
display: flex;
align-items: center;
flex-direction: column;
-webkit-animation: transitionIn 0.3s ease-in;
-moz-animation: transitionIn 0.3s ease-in;
-o-animation: transitionIn 0.3s ease-in;
animation: transitionIn 0.3s ease-in;
}
.profileImage {
border-radius: 50%;
width: 10em;
height: 10em;
}
.cardTitle {
margin-top: 1em;
font-weight: bold;
font-size: 2em;
}
.cardSubtitle {
margin-top: .3em;
font-size: 1.3em;
color: ${green};
}
.cardText {
font-size: .2em;
line-height: 110%;
text-weight: bold;
border: 2px dotted ${green};
border-radius: 5px;
padding: .5em;
text-align: center;
}
.btn {
margin: 25px;
width: 80%;
min-width: 184px;
max-width: 184px;
height: 42px;
background-color: #fcfcfc;
border-radius: 2px;
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, .2);
cursor: pointer;
cursor: hand;
align-self: center;
user-select: none;
transition: all 400ms ease 0s;
display: flex;
}
.iconwrapper {
position: absolute;
margin-top: 1px;
margin-left: 1px;
width: 40px;
height: 40px;
border-radius: 2px;
user-select: none
}
.btntext {
margin: 11px 14px 40px 40px;
color: #757575;
font-size: 14px;
letter-spacing: .2px;
font-family: Roboto;
user-select: none
}
.btn:active {
box-shadow: 0 1px 1px #757575;
background: #F8F8F8;
color: #fff;
user-select: none
}
.cardSocial {
color: black;
padding: .3em ;
transform:scale(2);
}
.cardSocial a {
text-decoration: none;
}
.cardSocial_fontawesome {
color: ${green};
font-size: 2em;
padding: .3em;
}
.cardSocial_fontawesome:hover {
opacity: 0.9;
}
.cardGitterChat {
height: 170px;
width: 113px;
overflow: hidden;
margin-top: 1em;
padding: .1px .1px;
text-decoration: none;
border-radius: .1px;
background-color: ${green};
}
.cardGitterChat:hover {
opacity: 0.9;
cursor: pointer;
}
@keyframes transitionIn {
0% {opacity: 0.1}
100% {opacity: 1}
}
.iframe {
position:relative;
top: -39%;
left: -40%;
height: 300px;
width: 200px;
transform: scale(0.55);
margin-top: .1px;
text-align:center;
color:${green};
background:${green};
height: 300px;
width: 200px;
transform: scale(0.55);
margin:.1px ;
padding:.1px;
}
`
var getGithubData = require('./index.js')
var makeSignupButton = require('./githubsignin.js')
/******************************************************************************
SIGNUP BUTTON
******************************************************************************/
var GITHUB_CLIENT_ID = '62483029222d02636782'
var button = makeSignupButton(GITHUB_CLIENT_ID)
document.body.appendChild(button)
/******************************************************************************
SIGNUP BUTTON
******************************************************************************/
function profile (fx_done) {
var code = location.search.split('=')[1]
console.log(code)
if (code) {
loadCode (error, code)
} else {
// show page with github signin button
}
// this is triggered when the user clicks the button
function loadCode (error, code) {
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 lots of data, so lets use it to build the page :-)`)
// I don't know how to deal with these 4 lines & function next(L212)
var el = page(data)
fx_done(el)
document.body.innerHTML = '' // to clear and remove the signup button
document.body.appendChild(el)
}
// getGithubData (next)
/*
Q1: after using "funciton loadData" instead of this line.
(so we also affect 'next')
I know I need to move 'next' to somewhere inside of
function LoadData, but I don't know where to put 'next
*/
function next (x_data) {
// var element1 = bel`<div>${data.map(x => bel`<p>${x.user}</p>`)}</div>`
// done(element1)
x_data.forEach(putEl)
function putEl(y_data) {
var username = y_data.username
var name = y_data.username
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 twitter = `https://twitter.com/${username}`
var github = `https://github.com/${username}`
var codepen = `https://codepen.io/${username}`
function makeLinkUrl (username) {
return `https://gitter.im/${username}/~embed`
}
var cardContainer = bel`
<div class=${css.cardContainer}>
<img src=${imageUrl} class=${css.profileImage}>
<div class=${css.cardTitle}>${name}</div>
<div class=${css.cardSubtitle}>@${username}</div>
</div>`
var cardContainer_hover = bel`
<div class=${css.cardContainer_hover}>
<div class=${css.cardGitterChat} ><iframe class=${css.iframe} src=${ makeLinkUrl (username)}></iframe></div>
<div class=${css.cardSocial}>
<a href=${twitter} target='_blank'>
<i class="${css.cardSocial_fontawesome} fa fa-twitter" aria-hidden="true"></i>
</a>
<a href=${github} target='_blank'>
<i class="${css.cardSocial_fontawesome} fa fa-github" aria-hidden="true"></i>
</a>
<a href=${codepen} target='_blank'>
<i class="${css.cardSocial_fontawesome} fa fa-codepen" aria-hidden="true"></i>
</a>
</div>
<div class=${css.cardText}>${cardText}</div>
</div>`
var el = bel`
<div class=${css.card} onmouseenter=${hoverCard} onmouseleave=${unhoverCard}>
${cardContainer}
</div>`
/**************************************************************************
HELPERS
**************************************************************************/
function hoverCard (event) {
el.appendChild(cardContainer_hover)
el.removeChild(cardContainer)
}
function unhoverCard (event) {
el.removeChild(cardContainer_hover)
el.appendChild(cardContainer)
}
// fx_done(el)
}
}
}
profile(done)
// function done (el) { document.body.appendChild(el) }
function done (error, el) {
if (error) return console.error(error) // or `document.body.innerHTML = `<h1>${error}</h1>`
document.body.appendChild(el)
}
</script>
</body>
</html> |
/**************************************************************************************
TITLE
optional is some description
the **** characters surrounding this comment should be
also max 80 chars long :-)
oh and code and basically anything should at most be seperated
by one empty line and not multiple ones :-)
**************************************************************************************/ |
|
Could you try to write your Q2 again? |
about Q2
I think the answer you replied me is good. more about Q1
could you help me to see if what-I-editted-in-line-284 is right?
|
new question Q3---about line 190
Q4 when running the code, it got stuck on 'error is not defined' if you need repo-link :still in the origin one |
Q1you know all the answers already, because if you can imagine what needs to be done.
...so that means' Q3haha :-) very close ...you just have to move the button code to line 190 Q4Then just don't use the less is more in programming :-) only add something when you really really need it and you know exactly why you need it. otherwise:
So when you write functions or use callbacks :-) ...there is a convention, that if it is possible that a callback might either receive the wanted result or an error, the error should be the first argument getData("http://github.com/kiecoo", function callback (error, data) {
// the `callback` function here needs to react to the `data` or the `error` that is returned from
// `getData(...)` call
// so in this case, either there was an error during `getData(....)` or it succeeded.
})...but if you don't have this error problem (like above), then just remove it :-) |
(1)
so line188 & 194 , I removed the (2)
so line197 & 199 , I didn't remove the
|
|
yes, it is similar to this :-) exactly. +1 +1 yes, exactly :-) |
|
|
right... so your code is very close to how it is supposed to be (maybe indentation in your example is still fucked up, but yeah .....it works) :P function next (x_data) {
// var element1 = bel`<div>${data.map(x => bel`<p>${x.user}</p>`)}</div>`
// done(element1)
x_data.forEach(putEl)
function putEl(y_data) {
}
}The good thing is, that var el = next(data)
fx_done(el) is fine. You have two choices:
@1 asyncyou could do: next(data, fx_done)
// AND
function next (data, done) {
done(bel`<div>${data.map(putEl)}</div>`)
function putEl (y_data) {
// make card
return card
}
}OR @2 sync var el = next(data)
fx_done(el)
// AND
function next (data) {
var el = bel`<div>${data.map(putEl)}</div>`
function putEl (y_data) {
// make card
return card
}
return el
} |
|
|
I'm a bit confused about lines 208, 209 and 210 ...they should not be in there. |
|
Also in line 202 you do not provide the function loadData (error, data) {
if (error) return console.error(error)
console.log(`github sent us lots of data, so lets use it to build the page :-)`)
document.body.innerHTML = '' // to clear and remove the signup button
next(data, fx_done)
}
function next (data, done) {
done(bel`<div>${data.map(putEl)}</div>`)
function putEl (y_data) {
// make card
return card
}
} |
|
which basically says to the The |
|
@serapath |
|
I think I seemed to try out a possible way to let me jump out what I got stuck on the previous comment. |
|
@serapath
I don't know how I could do further to let it become stable to show card |
|
haha, the error code is i guess you only get here after getting the code from github, BUT... do you still have note about the bookmark that describes how to setup github authentication and then how to use the code to be able to not trigger that 60 requests limit per hour? |
|
@serapath
2nd part 【fetch-token by using client_id & client_secret & code】(2)using the "code" to fetch "Access Token" (what I searched is below,I am not sure if it is suitable for our project) I don't know how to convert this code into suitable code to fit in our project. |
|
yes, you get a code but then all we do is logging it here https://github.com/kiecoo/de4/blob/master/index.html#L193 Now another step was to setup the heroku app with a custom code i think.... didn't you do that too? Other than that, you can also check a previous comment of our discussion from the 24th of february Again - i recommend to copy paste usefull code snippets from our discussion or from your code into hackmd documents and bookmark them so you can have little cheatsheets for all the topics, where one topic would be about how to setup github authentication. Over time, when you learn more stuff, you can slowly re-structure them into folders and subfolders in your bookmarkbar that make more sense to you. So you can slowly grow you overview and understanding of programming topics :-) |
I am not sure if the following is what exactly you mention.
yes, I had one hackmd document before (which focuses on the topic of |
|
Doesn't matter if not all of your docs are in english... ppl can always use a auto-translate feature :-) i think this one: https://get-profiles.herokuapp.com/ you have to read the README.md of the https://github.com/prose/gatekeeper repository i think. Some of the steps there are already done.
.... now you need to send it to your backend which is probably the heroku one :-) ....is it? you would just do somethingl like: const minixhr = require('minixhr')
// ...
minixhr(`https://get-profiles.herokuapp.com//${code}`, function (json) {
var data = JSON.parse(json)
console.log(data.token)
}) |
Q1
Q2 repo link:https://github.com/kiecoo/de4 |
=> Q1looks good. => Q2I'm not sure what you are saying here regarding the ...and ONLY when you get the |
Q2
could you show me more about |
=> Q2-1maybe line 196 has should include => @2-2no not exactly, but rather replace |
The text was updated successfully, but these errors were encountered: