↵

Ask DN: Show me your website!

over 7 years ago from Enakshi Roy, Compile Inc.

  • Stef KorsStef Kors, over 7 years ago

    Do you import your projects at the code section from github? I'm building my current portfolio where it also uses the github api to import. But because I'm a designer I have no idea what I could do to have quicker load times

    0 points
    • A. M. ­DouglasA. M. ­Douglas, over 7 years ago (edited over 7 years ago )

      Yes, I cheat and use JSONP. I pull the Github API endpoint down (async'd) and the callback fires a function declared prior, which receives the data, builds the repo elements and adds them to a container at once.

      <div id="github"></div> <script> function loadrepos(results){ "use strict"; if ( results.data.length > 0 ) { for ( var i = results.data.length; i-- ) { var repo_url = results.data[i].homepage ? results.data[i].homepage : results.data[i].html_url, repo_name = results.data[i].name, repo_desc = results.data[i].description, repo_lang = results.data[i].language, repo_container = document.getElementById("github"), el = document.createElement("div"), // each repo will be in one of these el_link = document.createElement("a"), // a link will wrap the title, description and language el_title = document.createElement("h4"), // title el_desc = document.createElement("p"), // description el_lang = document.createElement("p"); // language el_link.href = repo_url; el_link.title = repo_name; el_title.textContent = repo_name; // use textContent because it's faster than .innerHTML el_desc.textContent = repo_desc; el_lang.textContent = repo_lang; el_link.appendChild(el_title); el_link.appendChild(el_desc); el_link.appendChild(el_lang); el.appendChild(el_link); repo_container.appendChild(el); } } else { console.log('Github is down'); } } </script> <script async defer src="https://api.github.com/users/wnda/repos?callback=loadrepos"></script>

      Github

      JSONP is technically more efficient and it's easier to work with!

      0 points