Skip to main content

路 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

路 One min read
Patricio Lopez Juri

Now you can make your templates public by publishing them to the Flyyer Community.

It is super easy, just set on your flyyer.config.js the private flag to false.

flyyer.config.js
const {config} = require('@flyyer/types');require('dotenv').config();
module.exports = config({  engine: 'react-typescript',  key: process.env.FLYYER_KEY,  deck: 'impact-news',
  // Optionals  name: 'Impact News',  description: 'A short description of this deck.',  homepage: 'https://lopezjuri.com', // your personal webpage.  keywords: ['news', 'vue', 'tailwind'],  private: false, // 馃憟 set to false to make it public  repository: 'https:/github.com/useflyyer/impact-news',  sizes: ['THUMBNAIL', 'BANNER', 'SQUARE', 'STORY'] // supported formats});

路 2 min read
Patricio Lopez Juri

We are glad to announce we added the long awaited Variables UI support on the Flyyer.io dashboard.

This allows users to know what variables are required and optional in each template.

Now an UI Widget will be displayed based on the type of the variable. We support a hint, a default value and even an array of examples! 馃く

demo

You can start using it by upgrading @flyyer/cli to ^1.17.0 and installing @flyyer/variables:

yarn add --dev @flyyer/cliyarn add @flyyer/variables

路 One min read
Patricio Lopez Juri

We added a new section about Cache invalidation to our docs page so you can check it out 馃憖

This section explains the __v parameter that usually pops up in Flyyer URLs.

This is a random value (not so random, it is just a timestamp) to trigger cache invalidation on social networks crawlers.

You can always toggle off this feature by setting to a nullish value the meta.v parameter when using our libraries.

路 One min read
Patricio Lopez Juri

Previously emojis were not rendered, until now 馃殌

We just released @flyyer/cli@1.11.0 which adds an additional post-procesisng step to add Emojis via twemoji, an amazing open-source library from Twitter.

Here is an example:

https://cdn.flyyer.io/render/v2/flyyer/charming-man/main  ?title=Now+with+Emojis+馃槂

Emoji example

Are we missing a feature? Have you found a bug? Let us know via Github: github.com/useflyyer/flyyer-cli.

路 One min read
Patricio Lopez Juri

We just added Algolia integration to our documentation site (yes, this site!). Give it a try and let us know what you think 馃槂 It is on the top right corner of your screen, or just press CMD + K.

Flyyer is a developer-first company and we are really committed to Developer Experience. The integration was very straightforward thanks to the Docusaurus presets we are using.

We have amazing things on our pipeline, stay tuned!

algolia screenshot

路 One min read
Patricio Lopez Juri

We are saying goodbye to flyyer-render/v1 in favor of flyyer-render/v2 which has:

  • Smarter caching strategies
  • Support for anti-fakenews via encrypted signatures
  • Better handling of variables.

No worries for you, the legacy version was just being used by our early-early adopters and all them have migrated to v2.