Leveraging modern APIs

2 min readNov 3, 2016

The thought just occurred to me. Why are things still so manual on web development? Turns out, they are actually quite easy when you start thinking out of the box.

Let’s solve an old problem in landing pages; adding all those icons for the companies somehow related to your business. The traditional path that I’ve done few times is searching for those logos and adding them manually, probably using some modern CSS library for the grid system in flexbox such as Picnic CSS [disclaimer: my own].

First I decided it’d be a cool small project to automate this. Then I thought that someone probably think the same; so I googled “javascript landing logos” => nothing interesting.

Well, there’s no pre-made solution, but instead of doing a full solution by myself I’m sure we can find some middle-step premade. Let’s just try to find those logos: “Logo API” => many results, but Clearbit’s Logo API looks specially interesting.

So let’s compose the list of companies that we want to showcase. For this, I will be using this random list for which I’m not related at all (just modern, hip companies): dropbox, instacart, instagram, spotify, slack, groovehq.

We just add our HTML like this:

<div class=”logify flex two three-500 six-600">
  <div data-company=”dropbox”></div>
  <div data-company=”instacart”></div>
  <div data-company=”instagram”></div>
  <div data-company=”spotify”></div>
  <div data-company=”slack”></div>
  <div data-company=”groovehq”></div>
</div>

And our javascript with some different-domain flexibility (not everyone is going to use a .com after all), no dependencies and in ES6:

[...document.querySelectorAll('.logify > *')].forEach(div => {
  let domain = div.getAttribute('data-company');
  if (!domain.match(/\./)) domain = domain + '.com';
  let link = div.getAttribute('data-link') || domain;
  div.innerHTML = `
    <a href="http://${link}/" target="_blank">
      <img src="https://logo.clearbit.com/${domain}"/>
    </a>
  `;
});

Add a bit of CSS and it looks quite good:

Of course you could also add this gray => color on hover that many like to add through CSS, but that’s beyond the point of this article.

But wait, I hear that you don’t like the default logo of a company. Traditionally, by using a third-party API you’d be tied to them. But we can just change one line in our code:

// From this:
document.querySelectorAll('.logify > *')// To this:
document.querySelectorAll('.logify > [data-company]')

Then you can just interlace your own icon without the data-company=“” that we were using before:

<div class=”logify flex two three-500 six-600">
  <div data-company=”dropbox”></div>
  <div data-company=”instacart”></div>
  <div>
    <a href="http://francisco.io/">
      <img src="francisco_logo.svg">
    </a>
  </div>
  <div data-company=”spotify”></div>
  <div data-company=”slack”></div>
  <div data-company=”groovehq”></div>
</div>

You can see the result here: https://jsfiddle.net/franciscop/ho6p9fzr/

How else do you optimize web development flow? Let me know in the comments.

Leveraging modern APIs

Written by Francisco Presencia