Gatsby Tricks: Viewport, CSS Modules Transition And i18n Tricks

Overriding Viewport settings, CSS modules transition and an i18n formatting tricks with Gatsby

Photo by Ronald Ladines on Unsplash

Overriding Viewport

Browser left ok vs iPad right not ok
<meta
name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
/>

CSS Modules Transition

h1 {
opacity: 0;
visibility: hidden;
transition: opacity 0.25s 0.8s ease-in; &.animate {
opacity: 1;
visibility: inherit;
}
}
:global {
transition: opacity 0.25s 0.8s ease-in;
}

i18n formatting

module.exports = {
"intro": "hello <strong>world</strong>",
}
<h1>
<FormattedMessage
id="intro"
values={{
strong: (...chunks) => <strong>{chunks}</strong>,
}}
/>
</h1>

Summary

Freelancer by day | Creator of DeckDeckGo by night | Organizer of the Ionic and IndieHackers Zürich Meetup

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store