Product brief #3:
video and up to 50% faster prerendering
March 2, 2018
This release added a
video field to the Microlink API, made prerendering default to an auto mode that sped up responses by up to 50%, and let the Microlink SDK play that video inside its preview cards.The SDK changes shipped in version 1.7.0, so you needed that version or above to use them.
The API detected video sources
The new video data property in action.
Explore
the rest.
Video support landed in metascraper, the library that extracts the API's data. From that release on, every API response included a video field that pointed to the streaming source detected on the target URL, next to the title, description, and image you already got.
Auto prerendering answered up to 50% faster
Prerendering retrieves the HTML the way a user's browser would: it loads the page, runs its scripts, and reads the result. That gives better data for pages built on the client, but each request takes longer to respond, and most popular sites serve their metadata without it.
The API therefore switched prerendering to an auto value by default. With
auto, the service decided per target URL whether the page needed the prerendering technique or not, and skipped it when the plain HTML was enough. In our tests, that decision sped up the process by up to 50%.Most of that gain came from work on browserless, our library for driving headless Chrome. The Puppeteer community also helped us track down the performance issues along the way.
SDK cards played the detected video
Microlink SDK now supports video
previsualizations.
Explore
the rest.
Because the API now returned a
video field, the SDK placed that streaming source directly into the preview card instead of a static image.Video support is included for
normal or large
card sizes.
The card also took three playback properties, named
autoplay, muted, and loop in the SDK docs:- autoplay: start the video as soon as the card renders.
- muted: play the video without sound.
- loop: restart the video when it ends.
Cards loaded images smoothly and could flip their layout
The loading animation, with credit to
@breadadamas.
The SDK card got a new transition between how it looked before its image and data loaded and how it looked after, which gave the loading state a more natural look.
Using the new
direction
API parameter to invert the media position in the card.
A new field called reverse inverted the orientation of the card's content, placing the media on the opposite side from the text.
Updating to SDK 1.7.0
The features above required version 1.7.0 or above of the Microlink SDK. You could load it from a CDN or install it from npm.
From a CDN
The CDN was the quickest way to add the frontend library. You pasted the script for the bundle format you needed (UMD, AMD, or CJS) from unpkg before the closing
<body> tag:<script type="text/javascript" src="//unpkg.com/@microlink/vanilla@latest/umd/microlink.min.js"></script>
<!-- Microlink SDK AMD bundle -->
<script type="text/javascript" src="//unpkg.com/@microlink/vanilla@latest/amd/microlink.min.js"></script>
<!-- Microlink SDK CJS bundle -->
<script type="text/javascript" src="//unpkg.com/@microlink/vanilla@latest/cjs/microlink.min.js"></script>`}</PreCode>The vanilla integration docs cover the full setup.
From npm
If your project listed Microlink in its
package.json, you updated the package from the npm registry instead.Vanilla version
npm install @microlink/vanilla@latestReact version
npm update @microlink/react@latestThe React integration docs show how to render a card with
@microlink/react once it is installed.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.