Skip to main content

4 posts tagged with "flyyer"

View All Tags

ยท One min read
Patricio Lopez Juri

Hello fellow developers ๐Ÿ‘‹

This feature has been around for a while but it requires a special mention here.

JavaScript projects are very sensible to third-party dependencies file sizes because each byte sent to the browsers can reduce the time to interaction.

Our JavaScript library @flyyer/flyyer includes some cryptographic functions to sign URLs, but if you are not using this feature you can use our lightweight module that doesn't include those functions.

npm install --save @flyyer/flyyer-lite

yarn add @flyyer/flyyer-lite

The code change is minimal:

- import { Flyyer } from "@flyyer/flyyer";
+ import { Flyyer } from "@flyyer/flyyer-lite";

See the difference here:

bundlephobia with Flyyer JS

Remember to join our Discord channel to discuss new features: https://flyyer.io/discord

Happy sharing.

ยท 2 min read
Franco Mendez

Hey there ๐Ÿ‘‹

Anytime you integrate Flyyer.io with your existing website you can keep your original image to use it with the Default handler and as the main image with the Template handler.

To ensure Flyyer gets the right image, you can setup a meta-tag in your HTML's head with: <meta property="flyyer:default" content="/img/product/1.png">.

flyyer ui showing template and default variant handlers

But it turns out getting this image from every page takes an additional request from our CDN so every image takes longer to appear.

Good news: we just updated Flyyer libraries and CDN to make reduce latency by directly passing the default image's URL to Flyyer CDN via a new _def (default) query parameter.

How to upgrade (note _def value is URL-encoded), we well consider a website with a page /products/hoodie as the example here:

- <meta property="og:image" content="https://cdn.flyyer.io/v2/project_/_/products/hoodie" />
- <meta property="flyyer:default" content="/products/hoodie/picture.png" />

+ <meta
+ property="og:image"
+ content="https://cdn.flyyer.io/v2/project/_/_def=%2Fproduct%2Fhoodie%2Fpicture.png/products/hoodie"
+ />

If you are using one of our SDK/libraries It's already available for Node.js, Python, PHP and Ruby.

Here is an example for JavaScript-based projects:

import { Flyyer } from "@flyyer/flyyer";

const product = { /* */ }

const flyyer = new Flyyer({
project: "your-project-identifier",
path: product["path"],
default: product["image_path"],
});

// Use this image in your <head/> tags
const url = flyyer.href()
// > https://cdn.flyyer.io/v2/your-project-identifier/_/_def=%2Fproduct%2Fhoodie%2Fpicture.png&__v=1618283086/products/hoodie

To upgrade your flyyer-js library run:

npm install --save @flyyer/flyyer@latest

yarn add @flyyer/flyyer@latest

Remember to join our Discord channel to discuss new features: https://flyyer.io/discord

Happy sharing.

ยท One min read
Patricio Lopez Juri

Hello creators ๐Ÿ‘‹

We just updated @flyyer/variables to add V.Nullable type. This is an addition to the current V.Optional type.

The main difference of V.Nullable and V.Optional is that V.Nullable will always appear in Flyyer UI (dashboard), while optional values are hidden behind a flag for advanced users.

This new nullable variable is combinable with optional allowing to define nullable optional values:

import { Variable as V, Static, Validator } from "@flyyer/variables";

export const schema = V.Object({
price: V.Nullable(V.Number()),
logo: V.Optional(V.Image()),
font: V.Optional(V.Nullable(V.Font())),
});
const validator = new Validator(schema);

type Variables = Static<typeof schema>;
// Variables.price is `number | null`
// Variables.logo is `string | undefined`
// Variables.font is `string | undefined | null`

To upgrade your Flyyer decks run:

yarn add @flyyer/variables@latest

Remember to join our Discord channel to discuss new features: https://flyyer.io/discord

ยท One min read
Patricio Lopez Juri

To prevent premature renders because you are waiting for an image or doing some slow CPU task you can toggle a .flyyer-wait CSS class in your template's HTML to tell our rendering service to wait until that class disappears.

Our decks in production use this class while waiting for use-smartcrop: https://github.com/useflyyer/flyyer-marketplace-brand/blob/main/templates/horizontal.tsx

export default function Template() {
return (
<div className={areYouReady ? "READY!" : "flyyer-wait"}>
{content}
</div>
);
}

See more details at: /docs/advanced/flyyer-wait