🌫️ Grant Forrest

@gfor.rest

554 Followers 713 Following

"God is the garden I tend to believe" Day job: Design Systems Making https://biscuits.club (apps for your family) and https://verdant.dev (framework for the same)

A pan full of very gross looking chicken mush
A Switch running Mina the Hollower in the foreground, a children's book about a mouse titled "Mina" in the background
A dual-calendar date picker. The corners of the calendar borders are squishy. When you press a date it goes from square to circle until you release, then softens into the leading edge of the selection range line as you move the cursor over the grid. Start and end days of the range often end up with kinda random round or sharp corners based on how they interact with the calendar edge rounding.
A bunch of buttons and inputs with color themes. Starts with a section labeled "@mode-user" which has an orange tint. There's a button labeled "neutral" which is a very slightly orange-gray. Below is a whole section labeld "@mode-neutral" with the same orange-gray tint applied to all controls. Below that is "@mode-success," a pleasant green, whose own neutral button is a greenish gray.
A horizontal list of buttons. I scroll back and forth a bit. Then I click the chevron icon at the start, and the list expands into a taller panel. Buttons automatically rearrange into a wrapped layout that now scrolls vertically. I think my favorite part is that the expander chevron button is a participant in the button list layout, so when it expands to vertical and becomes a wrapping container, the chevron is the first button in the wrapped list and nestles into the corner, surrounded by the buttons.
A unit test. The describe block is "css template - if() pre-baking" and the test case is "pre-bakes matching style() conditions when property value is known." The test itself starts by defining an equation variable from a tagged template literal called "css." The template in question is a CSS if() condition: "if(style(--size: "2xl"): 1em; else: 0.25em;)". The test case first passes it into a function called "computeEquation", also passing in a "propertyValues" configuration which includes a value for the --size custom property set to "2xl" as shown in the original CSS statement. It also passes "skipBaking: false" implying the computation should bake values. The result of the computation is then passed to a function "printComputationResult." An assertion then runs that the final returned value is the string "1em" and the test is marked as passing.
Some broccoli. Probably good?
A bundled up log of compound butter with little green bits
Two filet mignon cuts resting on a wood cutting board. I think the crust is pretty decent!
A pan full of partially cooked risotto next to a small pot of stock
A grid of 12 combinations of button color and emphasis, each having 7 visual states: normal, with icon, disabled, small, wrapping other content, icon only, and small icon only. Technically there are more possible permutations. The emphases are primary, light, default (white), and ghost. Three color variants are shown: a brand color, a success, color, and a danger color. Fun fact, there isn't any CSS in the button itself to handle the color variation! It's completely based on the containing surface's color mode.
Three ghost buttons: one on white, one on yellow, one on green. As each is hovered it draws itself a background which is a darkened version of the surface it sits on. When pressed, the color darkens further.
A cursor hovering and clicking a white button. Upon hover, it darkens to a light gray, and a ring appears around it with the same light gray. On press, it darkens further.
CSS hover, active, and focus states. Each is 2 lines of code. I'm applying a "bg-darken" mixin to darken the background, and then adding a ring shadow which references the background color. Darken amount and ring size varies for each state. Focus state lightens instead of darkening.
Some CSS. Inline with the custom property named "--m-action-primary-color-bg", there's a yellow color preview box. I'm hovering that token name as well, and a hover tooltip reveals its "purpose" (color), a brief description, and the full OKCLH color definition.
A CSS button class, featuring lots of @apply mixin lines. If you read it closely there are some interesting things going on. For example, the foreground color is being set to a contrast-color from the background color, which is being referenced via a "bg-ref" custom property contributed by the "bg" mixin. The border color is copying the foreground color in the same way. Further down you can see the primary button's hover and active states are using "bg-lighten" mixins. Presumably these take the current background color and lighten it a bit.
A demo UI with some little GUI config controls overlaid. I'm moving the saturation slider and colors get more vibrant or muted. When I push the "roundness" slider the corners get rounder, but also the padding on the button and input horizontal axes gets bigger to accommodate the more circular ends.
Various color palettes with light and dark schemes; each section is wrapped in a mode which changes the main color but adheres to the light/dark scheme. One section has a "green buttons" mode which keeps everything the same except the buttons are green now.
Multiple layers of schemes and modes applied to color palette swatches and example UI elements. It starts with @mode-base which has a yellow color range, white text field, yellow button, gray secondary button. Nested inside is a @mode-alt area with a blue color range, blue-tinted background white, blue text field and buttons. Nested in that is @scheme-dark @mode-greenButton, and it's all in dark mode. While the color range and text field are still blue from the parent, the buttons are now both green. Beneath this, also nested under @mode-alt, is an area with @scheme-contrast @mode-dense. The color range is now compressed to just 2 colors: a very light blue and a dark, almost-black blue. Everything is padded more tightly.
A stack of a bunch of nested copies of the same UI. Each level has a class shown that's applied to it. Some have "@schema-dark", this turns on light or dark mode. Some have "@mode-blue" or "@mode-greenButtons" or "@mode-dense" - these have various effects... blue makes everything blue, greenButtons turns just the button green, and dense reduces the padding. Stacked mode effects persist until another mode overrides them.
A set of four demo UIs. Each is an input next to a button. The first one uses yellow theme colors in a light scheme. The second uses blue in a light scheme. The third is yellow and dark, the fourth is blue and dark.
An error alert in Windows which says "Windows cannot find C:\Program Files (x86)\Microsoft\Copilot\Application\Copilot.exe"
Two options in a UI: "play online" and "play hotseat." The illustration for "play online" is a crudely drawn purple guy with weird little hands raising his arms up to a golden globe. One hand has a glowing yellow phone. The illustration for "play hotseat" is a squiggly purple hand holding a pink phone. It's surrounded by floating eyes. One of them is a cat's eye.
A screen in a games app with a bunch of game session cards in a grid. Each one has a details card with a title, who's playing, etc. It also has a game icon, positioned with a slant next to and behind the details. The icons all overlap one another a bit between different items in the grid. As I hover over each item, the details and icon animate to tilt a bit further. It's a playful kind of feeling.
A game board grid with some tiles placed. The tiles depict little pathways and flowers. Each one has a number attached which indicates its point value. The whole game UI is tinted with a pleasant, calming green.
A recording of playing a little circuit breaker game. There's a grid, you have a set of tiles to place, each one has lines in zero or more cardinal directions. The player is dragging tiles from their hand onto the grid. A tile placed with a live end pointed at an incompatible wire shows a red X and grays out the whole wire. A tile which terminates the final loose end of a circuit makes the whole thing green. I haven't figured out the scoring aspects yet but I think it will probably give zero points for wires with bad connections or incomplete terminators. Anyway you see two players play the same tiles to their boards. It's a hotseat game so they're both playing on the same screen. Also there's a chat area, turn status of both players is visible, and helper UI for showing game rules and asking for help with a particular element on the screen.
An old woman watching over a sleeping child. A still from an animated movie.
A UI for selecting a game to play in a gaming app. A little "playing!" badge, tilted, hovering above the corner of a section showing the current game (Hearts) and a button which says "need more players."
Same painting, the gradient of the highlights and lowlights on the cloud is a bit smoother, some foreground dark clouds have changed shape so they don't look weirdly similar to background clouds.
A photo of a big cloud at sunset, partially obscured by whispy dark clouds in the foregeound
A more voluminous and lighted cloud. The sky light gradient is more intense and there's more green in it. Upper portions of the cloud are much lighter, as if lit from within.
The cloud is now filled in with a deep, dark blue. Pink orange highlights near the top suggest dusk. Part of the cloudscape is still an empty patch of yellow wash. It's a bit messier, less charming, but clearly working toward something definite.
Early stages of a painting of a cloud. The blue sky and sunset highlights are sketches in. The cloud itself is just a big yellow washed blob.
Another split screen, this time there are two distinct sections separated by a large gap. One section has two items, separated by a smaller gap so they look related to one another, not the second section. Once again all the padding is scaled by nesting factor and the border radius al line up.
A split screen. One side has three nested containers with black borders. Each one has half the padding size of its parent, and their rounded corners fit concentrically. On the right they are all shown to be divs with the same CSS util classes applied: "@group nest-all b p rd-lg"
A bowl of pasta carbonara. The guanciale is matchsticked and nestled on top. I have to admit the sauce doesn't look that substantial. You have to trust me that the spaghetti was just very nicely textured and the sauce, which was the exact same color, adhered to it really well so it just looks like plain spaghetti.
An empty desktop. I toggle Mission Control and there's a window hiding there somewhere. I click the window to focus it, but it just disappears again. I try moving it to a new desktop and go to the desktop, but it's not there either. I use raycast to toggle it fullscreen, and half my screen goes black. I toggle mission control again, select the fullscreen desktop, and the whole screen goes black.
A bunch of pork tenderloin medallions simmering in a ever so slightly pink white sauce (on account of a bit of paprika) with mushrooms
A life size Bugatti made of Lego bricks
A long hamburger. Kind of sub-roll sized. It's called 1/4 lb hamburger steak sandwich Jr, it comes with French fries, and the menu says it's perfect for customers looking for a quick meal (aren't we all)
Screenshot of an AI code agent chat. I ask it to make a sweeping migration from one style of prop usage to another in every file in a large repo. It makes the change to exactly 1 file after finding hundreds of usages, "I have replaced the asChild prop with render in the GnocchiPage component. Let me know if you need further assistance or additional changes." I remind it, "I want this migration applied to every TSX file in this repo," and it goes and makes the same one change to the same on file and responds with the exact same message.
My fluffy cat Pashka tucked into a fuzzy blanket surrounded by pillows
A dialog showing two versions of an app icon for an app named Wish Wash. It asks the user to review the change and warns them that an app may change its icon to impersonate another app.
Onions carmelizing on the stove next to a cast iron pan with onion wedges arranged in a circle prepared for a tart
A pretty innocuous logo. It's a shield shape with several diagonal lines reaching toward the center. The lines are gray on an offwhite background. Nothing too troublesome here.
A silver-gray fluffy cat sleeping on a perch. Both his paws are covering his face
The book "A Philosophy of Shame" by Frédéric Gros
A fluffy cat clearing up at me
An advertisement intrudes on an analysis of the rise of far right Christianity in UK politics. It's an AI generated Ghibli style depiction of Jesus preaching to modern looking people. It says "Eat like the apostles: don't eat for pleasure, tame the palette" and offers a printable meal plan
Screenshot of a modal dialog. It says "Success: recipes.gfor.rest has been validated. If it's not working right, try deleting it and adding it again." There's a button below that says "delete custom domain." It's basically a success screen for registering a custom domain in an app I made.
A yellow Lego car with an odd piecemeal design featuring a haphazard selection of building techniques. Nonetheless I think it looks coherent and cool. It has functional steering.
A rice bowl of crispy fried tofu, charred cabbage, fried shallots, and Bachan's sauce
Now the risotto is plated and topped with reserved guanciale matchsticks and squash cubes
The finished dish. A pan full of cooked risotto. It's very orange.
A stovetop laden with two pans of roasted butternut squash and apples, fried guanciale, a pot of chicken broth and a bubbling pan of risotto in progress
Rigatoni with a cream sauce. It's got tiny crushed tomatoes and herbs
A github PR diff of +14,647, -5,672