Since one of the primary
Posted: Sun Dec 22, 2024 8:45 am
Since one of the primary goals was to show relevant information at the right time in the CLI for the note-taking experience, we needed to synchronize the CLI and your browser sessions. For this, we use the Twilio Sync product , a WebSocket tool that synchronizes state between multiple clients and works both in the browser and in Node.js. The challenges Building a CLI - especially with a graphical user interface - gives us slightly different, though broadly similar, challenges than building a website. One of the challenge goals of this experiment was to make it work for as many people as possible.
Which means doing the equivalent of a cross-browser test. Butphilippines whatsapp number instead of Firefox, Chrome, Edge, Safari etc… it was Hyper, iTerm, Windows Terminal, Terminal.app, cmder, Command Prompt, Powershell, VS Code and more. And instead of normal and dark modes, we have color systems, multiple color support modes , and limited character sets . Luckily, libraries like chalk (called by ink) and figures have your back on at least some points of this challenge. The other problem is the different terminal sizes. If you're just building basic text on the CLI, you normally don't care about the user's terminal size.
In fact, ink can still handle text wrapping for you if your text to display is larger than the terminal size allows. But we were limited by building a UI that takes over your entire terminal. You can think of it as building a website where anything that doesn't fit in the browser window is hidden. Except in our case, it wasn't. Characters printed on top of each other, making the content unreadable. Since ink uses Yoga Layout to handle flex boxes, building responsive interfaces is pretty easy! Except there's no equivalent to options overflow: hidden or overflow: scroll.
Which means if our content doesn't fit, we have to hide it ourselves. We ended up building a collection of components that help us do this job, either based on the window size, or the component size. TypeScript Copy the code import React, { PropsWithChildren } from 'react'; import { Merge } from 'type-fest'; import { shouldRenderBasedOnBreakpoint, useResponsiveWindowSize, } from '../../hooks/useResize'; import { Breakpoint } from '../../utils/breakpoints'; export type RenderIfWindowSizeProps = Merge< Breakpoint, { fallback?: JSX.Element | null; } >; export function RenderIfWindowSize({ children, fallback = null, .
Which means doing the equivalent of a cross-browser test. Butphilippines whatsapp number instead of Firefox, Chrome, Edge, Safari etc… it was Hyper, iTerm, Windows Terminal, Terminal.app, cmder, Command Prompt, Powershell, VS Code and more. And instead of normal and dark modes, we have color systems, multiple color support modes , and limited character sets . Luckily, libraries like chalk (called by ink) and figures have your back on at least some points of this challenge. The other problem is the different terminal sizes. If you're just building basic text on the CLI, you normally don't care about the user's terminal size.
In fact, ink can still handle text wrapping for you if your text to display is larger than the terminal size allows. But we were limited by building a UI that takes over your entire terminal. You can think of it as building a website where anything that doesn't fit in the browser window is hidden. Except in our case, it wasn't. Characters printed on top of each other, making the content unreadable. Since ink uses Yoga Layout to handle flex boxes, building responsive interfaces is pretty easy! Except there's no equivalent to options overflow: hidden or overflow: scroll.
Which means if our content doesn't fit, we have to hide it ourselves. We ended up building a collection of components that help us do this job, either based on the window size, or the component size. TypeScript Copy the code import React, { PropsWithChildren } from 'react'; import { Merge } from 'type-fest'; import { shouldRenderBasedOnBreakpoint, useResponsiveWindowSize, } from '../../hooks/useResize'; import { Breakpoint } from '../../utils/breakpoints'; export type RenderIfWindowSizeProps = Merge< Breakpoint, { fallback?: JSX.Element | null; } >; export function RenderIfWindowSize({ children, fallback = null, .