Skip to content

Product brief #4:
 CSS styling in SDK 2.0 and more video providers

One parameter fewer in SDK 2.0

Kiko Beats
@kikobeats

April 11, 2018

This sprint shipped two changes. Microlink SDK 2.0 removed the round parameter from the card preview, so you styled the card with CSS instead. And the video property of the Microlink API learned to detect video on more providers, including Amazon, Facebook, Instagram, Vimeo, X, and YouTube.

SDK 2.0 removed the round parameter

SDK 2.0 was a breaking release. It dropped round from the API Parameters you could pass to customize the card preview. The only thing round did was apply a border-radius around the card.
We removed it to reduce the number of configurable parameters. Since round only set one CSS property, border-radius, a stylesheet rule or a style prop could do the same job without a dedicated parameter.
The default card style was still there to extend. To show it, here is a link preview for the browserless project, rendered with media='logo' and a custom border-radius:

Style the card with CSS instead

With @microlink/react, you passed your CSS as the style property of the <Microlink> component. This example sets borderRadius: '.42857em' on the browserless card:
React
import Microlink from '@microlink/react'

<Microlink
  image='logo'
  url="https://browserless.js.org"
  style={{ borderRadius: '.42857em' }}
/>
Read more about the style prop in the styling section of the @microlink/react docs.
The vanilla version shipped with its own class names, so a stylesheet rule on .microlink_card did the same job. The <a> tag carried data-media='logo' and the card-preview class, and microlink('.card-preview') turned it into a card once DOMContentLoaded fired:
Vanilla
<style>
.microlink_card {
  border-radius: .42857em;
}
</style>

<a href="https://browserless.js.org" data-media='logo' class="card-preview"></a>

<script>
  document.addEventListener("DOMContentLoaded", function(event) {
    microlink('.card-preview')
  });
</script>
The styling guide lists every class name the vanilla build exposes.

The API detected video on more providers

The video property landed in the API in the previous product brief. In this sprint we extended it from the original providers to the most popular sites on the internet, so a URL from any of them came back with its video detected.
Amazon
Facebook
Instagram
Vimeo
X
YouTube
The same detection covered a lot, lot more sites: the full list of providers supported by youtube-dl.
To try any of them, pass the URL to the API and read the video field of the response, as described in the API overview.

Join the community

All of these improvements or features are community driven: We listen to your feedback and act accordingly.
Whether you are building a product, an indie developer, or just interested in web technologies, come chat with us.