Experiences of Coding an Open Source Winston Transport
NOTE: Originally published on March 23rd, 2019 Lately I've had the time to think about logging in microservices. There seem to be a lot of options, but after looking at them I felt that the open source community around SRE isn't as mature as I thought it would be. What I mean by this is that the most common options seem to require a lot of configuration and require at least some sort of deep dive into the documentation just to get a simple central point for microservice logs. Since ...
Using Notion as a CMS for anything that reads markdown
PrefaceAs you might see from the fact that this blog resides on Mirror instead of Notion, I didn’t end up using this, but I reckon some might get usage out of the code that I wrote. :) TL;DR? *The finished code can be found, forked and tinkered with behind this link: * https://github.com/JaniAnttonen/notion-to-md-workerBackgroundWhile looking out for fun new things to try out on my personal website, I thought of using an external CMS for my blog posts, music and photos. Notion works well for ...
Experiences of Coding an Open Source Winston Transport
NOTE: Originally published on March 23rd, 2019 Lately I've had the time to think about logging in microservices. There seem to be a lot of options, but after looking at them I felt that the open source community around SRE isn't as mature as I thought it would be. What I mean by this is that the most common options seem to require a lot of configuration and require at least some sort of deep dive into the documentation just to get a simple central point for microservice logs. Since ...
Using Notion as a CMS for anything that reads markdown
PrefaceAs you might see from the fact that this blog resides on Mirror instead of Notion, I didn’t end up using this, but I reckon some might get usage out of the code that I wrote. :) TL;DR? *The finished code can be found, forked and tinkered with behind this link: * https://github.com/JaniAnttonen/notion-to-md-workerBackgroundWhile looking out for fun new things to try out on my personal website, I thought of using an external CMS for my blog posts, music and photos. Notion works well for ...

Subscribe to jantto

Subscribe to jantto
Share Dialog
Share Dialog
<100 subscribers
<100 subscribers
Stitches is a composable styling library for JS that is a great alternative for CSS modules, since components styled with Stitches can be extended with “inline” styles using the css prop, or be used to define other, further Stitches styled components.
<Button css={{ background: "green" }}>Entertainment</Button>
Due to the composable nature of Stitches I was pretty bummed to find out that not a lot of documentation exists concerning composing Stitches components out of existing React components that utilize data, hooks and the like. Most of the blogs that can be found focus on the fact that “Yay! you can put Stitches components inside Stitches components!” – Well, of course you can, that’s not news. (Maybe all this is just Google acting on me and providing bad search results, what gives) But yeah, just creating styled components that can’t have any state in them is in my opinion not that cool.
// An example, ARE YOU NOT ENTERTAINED
import { styled } from "@stitches/react"
const Button = styled("button", {
border: "none",
borderRadius: "3px",
textDecoration: "uppercase",
})
const BetterButton = styled(Button,{ // YAY!
border: "2px solid #000",
})
Since I like to torture myself with Typescript, achieving what I wanted was probably a lot more difficult than just using regular Javascript. The generics in libraries can get pretty esoteric, but after a little head banging things weren’t as bad as initially thought.
Here’s a simpl-ish example of an input element styled with Stitches, utilizing the React UI library Radix UI:
import * as RadixCheckBox from "@radix-ui/react-checkbox"
import { styled } from "@stitches/react"
type CommonInputProps = {
className?: string
id?: string
name?: string
value?: string
ariaLabel?: string
autoComplete?: string
onChange?: FormEventHandler<HTMLDivElement>
}
type CheckBoxProps = CommonInputProps & {
children?: React.ReactNode
}
export const CheckBoxBase = ({id, name, value, children, className, ariaLabel}: CheckBoxProps) => {
const Wrapper = styled("div", {display: "flex", flexDirection: "row", gap: "0.5rem"})
return (
<Wrapper className={className}>
<RadixCheckBox.Root className="checkbox" id={id} name={name} value={value || "on"} aria-label={ariaLabel}>
<RadixCheckBox.Indicator className="checkboxIndicator">
<CheckIcon />
</RadixCheckBox.Indicator>
</RadixCheckBox.Root>
<label htmlFor={id}>{children}</label>
</Wrapper>
)
}
export const CheckBox = styled(CheckBoxBase, {})
To be quite honest, this kind of example is much more helpful for devs. This shows that Stitches passes a generated className down to the styled component, which can be referenced in the props of the base component that has the logic.
Hoping this finds people and is helpful to them. Cheers.
Stitches is a composable styling library for JS that is a great alternative for CSS modules, since components styled with Stitches can be extended with “inline” styles using the css prop, or be used to define other, further Stitches styled components.
<Button css={{ background: "green" }}>Entertainment</Button>
Due to the composable nature of Stitches I was pretty bummed to find out that not a lot of documentation exists concerning composing Stitches components out of existing React components that utilize data, hooks and the like. Most of the blogs that can be found focus on the fact that “Yay! you can put Stitches components inside Stitches components!” – Well, of course you can, that’s not news. (Maybe all this is just Google acting on me and providing bad search results, what gives) But yeah, just creating styled components that can’t have any state in them is in my opinion not that cool.
// An example, ARE YOU NOT ENTERTAINED
import { styled } from "@stitches/react"
const Button = styled("button", {
border: "none",
borderRadius: "3px",
textDecoration: "uppercase",
})
const BetterButton = styled(Button,{ // YAY!
border: "2px solid #000",
})
Since I like to torture myself with Typescript, achieving what I wanted was probably a lot more difficult than just using regular Javascript. The generics in libraries can get pretty esoteric, but after a little head banging things weren’t as bad as initially thought.
Here’s a simpl-ish example of an input element styled with Stitches, utilizing the React UI library Radix UI:
import * as RadixCheckBox from "@radix-ui/react-checkbox"
import { styled } from "@stitches/react"
type CommonInputProps = {
className?: string
id?: string
name?: string
value?: string
ariaLabel?: string
autoComplete?: string
onChange?: FormEventHandler<HTMLDivElement>
}
type CheckBoxProps = CommonInputProps & {
children?: React.ReactNode
}
export const CheckBoxBase = ({id, name, value, children, className, ariaLabel}: CheckBoxProps) => {
const Wrapper = styled("div", {display: "flex", flexDirection: "row", gap: "0.5rem"})
return (
<Wrapper className={className}>
<RadixCheckBox.Root className="checkbox" id={id} name={name} value={value || "on"} aria-label={ariaLabel}>
<RadixCheckBox.Indicator className="checkboxIndicator">
<CheckIcon />
</RadixCheckBox.Indicator>
</RadixCheckBox.Root>
<label htmlFor={id}>{children}</label>
</Wrapper>
)
}
export const CheckBox = styled(CheckBoxBase, {})
To be quite honest, this kind of example is much more helpful for devs. This shows that Stitches passes a generated className down to the styled component, which can be referenced in the props of the base component that has the logic.
Hoping this finds people and is helpful to them. Cheers.
No activity yet