Git Product home page Git Product logo

sjagoori / coination Goto Github PK

View Code? Open in Web Editor NEW

This project forked from cmda-minor-web/web-app-from-scratch-2021

0.0 0.0 0.0 1.8 MB

Web App From Scratch @cmda-minor-web 2020 - 2021

Home Page: https://web-app-from-scratch-2021-one.vercel.app/

License: GNU General Public License v3.0

HTML 9.20% JavaScript 64.59% CSS 26.21%
caching-strategies coinmarketcap-api cryptocurrency vanilla-javascript

coination's Introduction

Heyo! ๐Ÿ‘‹

I'm Shabier, a 24 year old web developer from the Netherlands. I'm a developer that loves to design and realize designs in code! My ambitions are to make impactful digital products that help to make a better tomorrow. My passion lies in helping others and improving their lives with digital solutions. You can find my resume over at read.cv/shabier and my portfolio site, which is this page but graphical ๐Ÿ˜† , over at shabier.vercel.app

Skills

Publications

Publications are posted on Medium: link to profile

  • [Draft] Web development: the principle of 0kb JavaScript
  • [New!] Web development: documenting your work - read the article
  • [New!] Web development: is the job market a meritocracy or an exclusive network? - read the article
  • [<1k reads] Web development: a Node CRUD web application - read the article
  • [2k reads] Design trends: Neumorphism. Part 2 - read the article
  • [22k reads] Design trends: Neumorphism. Part 1 - read the article

Cool stuff

Front-end web projects

  • ๐Ÿ”ฅ Hotspot Lookup: a PWA dashboard for Helium Hotspot Owners.
  • PokeAPI: an online pokemon finder.
  • Parking in the Netherlands: A data visualization project about accessible parking in the Netherlands for the publication company De Volkskrant.
  • Coination: a single-page application displaying crypto by marketcap and prices.
  • Musicle: an accessible music player for users suffering with muscular- and neuronal diseases.
  • Project NOโ‚‚ x Corona: a visualization of carbon emissions in Europe before- and during covid-19.

Full-stack web projects

  • TogetherTube: a YouTube client with real-time video playback and chat using Socket.io.
  • Read-it: a PWA, offline available, performance first, reddit reader.
  • Enquetter: a progressively enhanced enquette.
  • Nerdr.Match(): an online dating platform for programmers.
  • Mad-chatter: a meme chatroom.
  • Bol-deals: a bol.com discount finder.

Tools

  • Cache-this: a node cli tool to cache api responses (for performace improvements and rate-limit prevention).
  • Front-end setup: a continiously growing template repo.

Automatization

  • Krakenbot: a telegram bot that fetches prices for cryptocurrency.
  • DeHetBot: a telegram bot that helps you find articles to dutch words.
  • Archillect-mirror: an Archillect scraper and instagram-bot

Tools

Iโ€™m currently working on:

  • Bloom: a social media platform for recovering cancer patients.
  • Biopic: a linkshortner and link bio using Firebase, written in Next.js

Fun stats

coination's People

Contributors

joostf avatar koopreynders avatar notendoos avatar razpudding avatar sjagoori avatar suustenvoorde avatar

coination's Issues

Ordenen?

Waar worden de cryptocurrencies op geordend? Er staat by market cap in biggest-to-smallest order., maar dat is niet het geval? Staat er cache op? BNB is inmiddels nummer drie met een waarde van $250, terwijl die bij jou nog $59.15 is.

Code review week 1

Yo Shabier,

Goeie overview pagina! Je hebt zelfs al detail pagina's, lekker bezig man.
Goed begin van je readme ook.

Je app.js ziet er super clean uit. Modules en al! Lekker functioneel ook.

Je comments met param's zijn ook heel chill!

Je bent al bezig met localStorage ook, heel goed.

Paar dingetjes:

  • Er staan nog een paar dingetjes van de fork in je repo. Je zou course, examples en docs weg kunnen gooien, dat maakt het wat cleaner en voorkomt verwarring.

  • Vul je readme aan met dingen zoals een screenshot van je overview pagina, een gedeelte over wat voor data je binnen krijgt (Je linkt wel naar docs van de api, maar het kan prettig zijn om een kleine inkijk te geven in wat voor data je gebruikt, hoe het eruit ziet etc.).

  • Misschien kun je je functies iets verder opdelen in andere functies. Je functies in render.js zijn super lang.

Verder weinig te melden, het ziet er naar uit dat je het wel snapt ;)
Kijk of je jezelf verder kunt uitdagen als we met routing en templating beginnen de komende weken. Misschien kun je je eigen router of templating engine schrijven. Als je meer uitdaging zoekt en je hebt zelf een idee, stel het gerust voor!

Peer review - 05/02

Repository

  • Scan your buddy's repository
  • Is there a repo description at the top?
  • Is the repo open to issues?
  • Does it include a gitignore
  • Is the concept described well in the readme?
  • Is the API described in the readme?

Nice and clear work men!

Code

  • Read the code

  • Try to understand the code flow

  • Check the code against our course's best practices

  • Check the code for consistency, is code being written the same way in different places? --> you are using params, nice! Try to use params consistent at each function ;). You are missing it at app.js

  • Does the code follow naming conventions? Do variable and function names make sense to you? --> Try to describe your function name more descriptive. It's okay now, but it can be more descriptive, I think :).

Top:

  • You work with ES6 modules, nice!

Tip:

  • This can be written in more lines in stead of one line. It's hard to understand and read.
  let infoList = await getData('https://shacors.herokuapp.com/https://pro-api.coinmarketcap.com/v1/cryptocurrency/info?id=' + topList.data.data.map(item => item.id).toString() + '&CMC_PRO_API_KEY=a50e1e84-9b13-4d34-86e5-8b386c49c31c')
  • You are writing code comments in params for functions, cool! But write it also for the variables, that makes it more clear!

Good job buddy! ๐Ÿš€ ๐Ÿš€ ๐Ÿš€

.vscode folder

Niet echt een issue, maar is het niet beter om deze in je .gitignore te zetten? Lijkt mij dat het jouw voorkeur is, toch?

test.js verwijderen

Wellicht kan test.js nog weg. Doet naast een console.log niet zo veel.

Als het wel wat doet, dan kun je misschien de naam aan passen. Is nu een beetje raar.

Dat was het laatste. Voor de rest kan ik niet zo veel vinden ๐Ÿ˜„

Functie(s) kleiner maken

https://github.com/sjagoori/web-app-from-scratch-2021/blob/8dae0430fe37ebe69f4c5523c50464aece6e92cf/spa/static/js/modules/render.js#L10

Je moet zelf maar even kijken of je het met mij eens bent, maar ik vind de functie nogal lang. Zou je deze niet kunnen opsplitsen.

Je zou ook kunnen kijken naar het schrijven van HTML in JS. Maakt het volgens mij ook een stuk korter.

Moet je maar even Googelen naar Write JS in HTML JSX oid als je niet weet hoe of wat. Kom je wel uit.

Ik heb het zelf zo gedaan

Code review

Ontzettend goed bezig! Tof hoever je al bent en hoe netjes de code is. Ik zie hier iemand die consistent werkt, nice :)

Een paar tips:

  • Kun je jezelf nog wat meer uitdagen in het concept? Hoe kan je deze app complexer maken? Er is een probleem rondom crypto currency wat je zou kunnen oplossen met jouw app? Bijvoorbeeld... zouden we kunnen voorspellen wat over 10 jaar de top crypto's zijn, of kun je misschien een vergelijking maken tussen crypto en aandelen?
  • Voeg hier en daar code comments toe, wat doet welke functie en waarom. Bijvoorbeeld: ({ ...infoList.data.data, merged }, delete infoList.data.data.merged)
  • Nice grid in CSS!
  • Complimenten voor de modules en hoe clean dit is opgezet!
  • Is het bouwen van je eigen template engine een idee?

API

Hele interessante API Shabier! Zoals ik al verwacht had is je code heel strak en heb je overal comments bijgezet om het voor iedereen leesbaar te maken, super chill!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.