Our great sponsors
-
import Avatar, { sizes } from "./Avatar"; export const Default = () => ( ); // We can now create an array of sizes from the exported object. // Unfortunately we have to cast the array using `as`, // because `Object.keys` only returns `string[]`. // https://github.com/Microsoft/TypeScript/issues/12870 const sizeKeys = Object.keys(sizes) as Size[]; export const Sizes = () => (
{/* We can loop over the array of sizes */} {sizeKeys.map(size) => ( )} div> ); -
storybook
Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.
Sometimes it is easier to build a component in isolation than in the place where it will be used. It is much easier to test all variations and edge cases of the component. There are tools out there which can help us to build our components in isolation. The most famous is Storybook, but I like to use Ladle. Ladle is much smaller than Storybook and it is built for speed. In this post we will set up Ladle and we will learn how we can use next/image within Ladle.
-
Appwrite
Appwrite - The Open Source Firebase alternative introduces iOS support . Appwrite is an open source backend server that helps you build native iOS applications much faster with realtime APIs for authentication, databases, files storage, cloud functions and much more!
-
After another look at issue #100, we can tell next/image that it should skip the optimization if the component is rendered in Ladle. That is fine, because the bandwidth does not play a big role during the development. With the following code placed inside .ladle/components.tsx ...
-
And for most installations, that's it. Ladle has a useful default configuration, you only need to create a configuration if your installation differs from the default. But for most Next.js installations the default does not fit. Ladle expects stories and components in the "src" folder, but in many Next.js installations they are in a folder called components. So we have to create a configuration at .ladle/config.mjs:
