Show HN: A free, lightweight static page to get stock quotes using the IEX API(github.com)
github.com
Show HN: A free, lightweight static page to get stock quotes using the IEX API
https://github.com/toddwschneider/stocks
41 comments
There's some really good examples of this in Wes Bos' (free) javascript30.com course - 30 short videos all using vanilla Javascript and showing some really neat new features.
Another really awesome new feature which I can't remember if it's in that course or not, is fetch - super simple AJAX API using promises. It's also used in this app: https://github.com/toddwschneider/stocks/blob/master/index.h...
Another really awesome new feature which I can't remember if it's in that course or not, is fetch - super simple AJAX API using promises. It's also used in this app: https://github.com/toddwschneider/stocks/blob/master/index.h...
I didn't know about fetch, that's pretty neat. Unfortunately for me, it isn't supported on IE: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Fortunately, there is a very good polyfill[0] for it.
[0]: https://github.com/github/fetch
[0]: https://github.com/github/fetch
I had taken a nearly six year break from JavaScript coding until about 7 months ago. It has definitely come a long way and is pretty great to use now.
There’s still a lot of “pain” left in the build processes, transpiling, etc, but they’re less painful than they were half a decade ago. Those are also less specific to issues with the language, and more with how we need to use the language.
While not plain JS, I’d strongly recommend trying Vue if you’re getting back into JS. Is a true pleasure to use on a daily basis, and I never find myself fighting it. It makes writing non static sites with interactivity a breeze, and even when I’m building near static pages, I like how it helps me to organize my code (from a structure standpoint, it isn’t opinionated on this stuff).
There’s still a lot of “pain” left in the build processes, transpiling, etc, but they’re less painful than they were half a decade ago. Those are also less specific to issues with the language, and more with how we need to use the language.
While not plain JS, I’d strongly recommend trying Vue if you’re getting back into JS. Is a true pleasure to use on a daily basis, and I never find myself fighting it. It makes writing non static sites with interactivity a breeze, and even when I’m building near static pages, I like how it helps me to organize my code (from a structure standpoint, it isn’t opinionated on this stuff).
I recently stumbled upon the Airbnb Javascript Style Guide, which I found showed a lot of good examples of how to use newer Javascript features: https://github.com/airbnb/javascript
After several years of stagnation, ES6[1] massively improved the language, and there is a pipeline of more proposals[2].
[1]: http://es6-features.org/
[2]: https://github.com/tc39/proposals
[1]: http://es6-features.org/
[2]: https://github.com/tc39/proposals
... and I didn't realize that one could link to a specific line in code on a github file like you've done...
index.html#L111 https://github.com/toddwschneider/stocks/blob/master/index.html#L111Neat! I used this API to live-code a mini-portfolio-manager SaaS a couple of months ago: https://anvil.works/blog/live-coding-stock-portfolio
It let you pick the stocks yourself, and showed you historical graphs too. It was a bit more complex than this, but still only took an hour.
It let you pick the stocks yourself, and showed you historical graphs too. It was a bit more complex than this, but still only took an hour.
There's definitely something I can learn from this. By the way, Robinhood API also gives you quotes for free https://api.robinhood.com/quotes/?symbols=AMD,TSLA
I believe Robinhood doesn't have official API support so use it with caution.
According to their site, they'll have an official API in the "near future", and hopefully one that allows trades to be placed. Granted, they've said that for almost two years now. I fully expect to die of old age before it's available.
https://support.robinhood.com/hc/en-us/articles/210216823-Ro...
https://support.robinhood.com/hc/en-us/articles/210216823-Ro...
More info is always fun but I gotta point out:
Why would you? Their volume is likely a fraction of IEX's:
https://markets.cboe.com/us/equities/market_share/
Worse all their stuff is effectively darkpooled. You'd be hard-pressed to find a worse source of market data.
Also:
https://medium.com/@Gangal/robinhood-robbing-from-the-poor-g...
Why would you? Their volume is likely a fraction of IEX's:
https://markets.cboe.com/us/equities/market_share/
Worse all their stuff is effectively darkpooled. You'd be hard-pressed to find a worse source of market data.
Also:
https://medium.com/@Gangal/robinhood-robbing-from-the-poor-g...
Robinhood isn't a darkpool - they sell their "dumb" retail flow to the highest bidder wholesale to the likes of Citadel, Virtus, UBS, etc.. etc... Usually they just pick 1. This type of flow is called "PFOF" (pay for order flow). These PFOF players also provide marginal price improvement over the NBBO... marginal - because they always make more money than they pay out - and take marginal risk.
Do they not match transactions internally first?
Hence when they launched the terrible execution - not enough internal counterparties.
Hence when they launched the terrible execution - not enough internal counterparties.
I don't know.. but it's a good question. Matching internally first creates huge overhead, compliance considerations, etc... Unless you already have the right infrastructure in place. For example, you need to report the trades. My guess is they wouldn't do this...
What makes this a "static page"?
It's all non-interactive javascript.
Because it's served statically. No processing is necessary on the host side and it can be cached indefinitely without getting stale.
Static doesn’t mean no JavaScript or interaction. In fact many SPAs are just static pages served out of S3 and connecting directly to some API server to fetch data.
A static page means no processing is done on a web server to serve you the rendered content. This saves you time and money, and ensures scalability for any amount of traffic.
A static page means no processing is done on a web server to serve you the rendered content. This saves you time and money, and ensures scalability for any amount of traffic.
There are different meanings. Back in the day there was DHTML, where D stands for dynamic. So static page 10 years ago would mean no javascript.
This is great. I love the simple, succinct interface — I wish real financial companies like my trading account and my bank had even half this much sense when it comes to pragmatic design.
A few notes from taking a look at the code:
* I've very much started doing the same thing in my projects of just using modern JavaScript constructs like fetch and arrow functions without a transpiler. IE is never going to support any of them, but I've accepted that. Caniuse.com ranks most of them at 85%+ supported.
* It's neat to see that the IEX API supports batch requests (as opposed to having to pull one stock at a time) in its API which makes it possible to implement the project efficiently and in a way that doesn't have to store state.
* Nice work building it to support large users as well. A lot of installations probably won't have more than 100 stocks, but it'll break up requests into multiple batches of <= 100 if they do.
A few notes from taking a look at the code:
* I've very much started doing the same thing in my projects of just using modern JavaScript constructs like fetch and arrow functions without a transpiler. IE is never going to support any of them, but I've accepted that. Caniuse.com ranks most of them at 85%+ supported.
* It's neat to see that the IEX API supports batch requests (as opposed to having to pull one stock at a time) in its API which makes it possible to implement the project efficiently and in a way that doesn't have to store state.
* Nice work building it to support large users as well. A lot of installations probably won't have more than 100 stocks, but it'll break up requests into multiple batches of <= 100 if they do.
I had not realized Google killed Google Finance until this post -- the search replacement is abysmal.
Looks good! IEX API also has experimental support for websockets ;)
I'm not into stocks, but like the way you coded it. We don't see this sort of good examples that combines the old school simplicity and new JS / DOM API features.
hmm, while this is cool i am not sure if it is a full-fledged replacement for the Google Finance "portfolios" feature. That lets you add the number of stocks you own for each symbol and shows you an aggregate gain/loss per day, etc. That was the main reason i was using google finance.
I have now transitioned to my own Google Sheet with the "=GOOGLEFINANCE()" function for getting the stock data. Works pretty well.
I have now transitioned to my own Google Sheet with the "=GOOGLEFINANCE()" function for getting the stock data. Works pretty well.
I'm no JS expert by any stretch but it seems pretty simple to add in code for that here. It'd be a chore to hard-code a big portfolio or one that trades frequently, though.
Very cool!
As everything is done client side how about adding some parsing of the URL #hash/?query to encode data of a portfolio? That way you could have a single statically hosted version serving multiple people. Could even have a portfolio builder page that generates the encoded URL.
As everything is done client side how about adding some parsing of the URL #hash/?query to encode data of a portfolio? That way you could have a single statically hosted version serving multiple people. Could even have a portfolio builder page that generates the encoded URL.
Here you go! No need to fork :)
https://samdobson.github.io/stocks/?Banks=GS,MS,JPM&Tech=AAP...
https://samdobson.github.io/stocks/?Banks=GS,MS,JPM&Tech=AAP...
Thanks, agreed this is a good idea and I added query param support here: https://github.com/toddwschneider/stocks/pull/4
Really cool! I love simple solutions like this.
Looks like it gets an html page from https://iextrading.com/apps/stocks/#/<stock> then scrapes it. Not really an API. Edit: ok, I'm wrong.
It uses the iex api. I have used the api before its really good.
Here is the code author uses to get data:
Here is the code author uses to get data:
const BASE_URL = 'https://api.iextrading.com/1.0/stock/market/batch';
let url = `${BASE_URL}?types=quote&symbols=${symbols.join(',')}&filter=${filters.join(',')}`;You might want to look at the code, serve that html page from your local machine and console.log(url) inside the updateDataForBatch(symbols, addTitle) function to see how it works.
That url is just used to build a link. It uses api.iextrading.com for the quote data
I would like to find something like this that is usable by Libreoffice Calc.
It looks like a simple html table, I think LibreOffice might be able to parse that. Else, it should be relatively trivial to change the output to e.g. csv which can be imported.
As for an alternative, and I don't know the options here, but maybe a plugin could be made that pulls the data into Calc itself.
As for an alternative, and I don't know the options here, but maybe a plugin could be made that pulls the data into Calc itself.
Select all and copy-paste from the webpage http://toddwschneider.com/stocks/ in chrome into Libreoffice Calc is parsed as expected.
The demo site is cool, wonder if IEX will appreciate the thundering herd from HN though?
For example I didn't even realise JS supported string interpolation
https://github.com/toddwschneider/stocks/blob/master/index.h...