psolbach / iconbin Goto Github PK

Do a basic news feed mockup using large favicons.

As titlen suggests. A user should be capable of requesting a spritesheet with a given array of icons in it. Discussion about implementation below.

Just noticed the API code is missing, would be good to have the API on github.

Might be a good idea to add the proper <link> tag as outlined by the HTML5 specification anywhere tied to responses or just as an indicator that this is possible for users who place their own favicons here. Just tested this on Chrome, redirects are resolved by the User Agent here. But we should try this across all major Browsers to be sure.

e.g.

<link rel=icon href=https://iconbin.com/api/messenger.com/src sizes="500x500" type="image/png">
<link rel=icon href=https://iconbin.com/api/twitter.com/src sizes="any" type="image/svg+xml">

Is there a page to preview / list all available icons ?

The example API call on the website is:

request({
   url: "https://iconbin.com/api/instagram.com,
   json: true
}, cb)

It doesn't explain the purpose very well (cb isn't synonymous with call back functions), and doesn't offer any useable code. (nvm, realized this is the Request API could be better explained though, possible as an option in a language selector like checkbox 3?)

• Needs closing quote on URL.
• Should be rewritten using the Fetch API, jQuery's AJAX function or both, instead of pseudo-code.
• Show other examples in other languages, maybe something similar to how Postmark does it? (see below)

The client gets sent not a valid URL. in plaintext instead of a JSON object with a err property like a properly formatted URL that isn't found in the database does. I know it returns a 404 error, but error reporting should be kept consistent, thus the server should always return JSON data.

Recreating the issue:

$> curl -v https://iconbin.com/api/%22

returns:

*   Trying 149.210.164.114...
* Connected to iconbin.com (149.210.164.114) port 443 (#0)
* TLS 1.2 connection using TLS_ECDHE_RSA_WITH_AES_256_CBC_SHA384
* Server certificate: iconbin.com
* Server certificate: Let's Encrypt Authority X1
* Server certificate: DST Root CA X3
> GET /api/%22 HTTP/1.1
> Host: iconbin.com
> User-Agent: curl/7.43.0
> Accept: */*
> 
< HTTP/1.1 404 Not Found
< Server: nginx
< Date: Wed, 08 Jun 2016 23:57:22 GMT
< Content-Type: text/html; charset=utf-8
< Content-Length: 16
< Connection: keep-alive
< X-Powered-By: Express
< ETag: W/"10-0DZ7vKidADPB5iyZeVh0og"
< 
* Connection #0 to host iconbin.com left intact
not a valid URL.

Companies often have dedicated press or brand resource pages with assets in various formats, e.g. StackOverflow or Kickstarter. We could link out to these pages in API responses. But googling these ain't hard and links might break. Not really sure.

Add spinner while icon lookup in progress.

There's no reason why "twitter" should not yield the same result as "twitter.com". It's sort of the canonical shortform for the main domain and can not be mistaken for something else. Complete the urls.json mapping table with all shortforms where a clear distinction can be made.

Also, reflect this in the README.

Since redirects are never cached this might be much more practical in production environments than having the extra follow redirect step.

Requires decision on #30.

The JSON API should support Cross-Origin Requests because the API is potentially useful in the browser. JSONP support would also work.

Recreating the issue:

Try running the following in your browser's JS Console on a site other than https://iconbin.com/

fetch("https://iconbin.com/api/instagram.com")
    .then(function(res){
        return res.json();
    })
    .then(function(data){
        // `data` will never be resolved due to
        // the Cross-Origin Request policy.
        console.log(data);
    })

Solution

Add the CORS headers to the routes in the Express app. Then requests can be made like this

fetch("https://iconbin.com/api/instagram.com", { mode: "cors" })
    .then(function(res){
        return res.json();
    })
    .then(function(data){
        // `data` is resolved!
        console.log(data);
    })

Was deferring this decision until now. Implementing features like typeahead, tabular icon previews and user uploads might be easier using something like react, riot or vue. What do you think?