Sandro Maglione
@sandromaglione.bsky.social
The Coding Explorer 💻・Sharing patterns to build type-safe web & mobile apps・Typescript・Effect・React・XState
Helping devs at http://typeonce.dev 🚀
Helping devs at http://typeonce.dev 🚀
👉 className instead of variants
Extract variants as `utility` and compose styles as classes instead of props
Extract variants as `utility` and compose styles as classes instead of props
December 23, 2024 at 4:01 PM
👉 className instead of variants
Extract variants as `utility` and compose styles as classes instead of props
Extract variants as `utility` and compose styles as classes instead of props
👉 HTML custom data attributes
Define states as `data-` attributes, and then reference them easily as tailwind classes
Use the new `variant` to clean all up as well
Define states as `data-` attributes, and then reference them easily as tailwind classes
Use the new `variant` to clean all up as well
December 23, 2024 at 4:01 PM
👉 HTML custom data attributes
Define states as `data-` attributes, and then reference them easily as tailwind classes
Use the new `variant` to clean all up as well
Define states as `data-` attributes, and then reference them easily as tailwind classes
Use the new `variant` to clean all up as well
👉 Inline CSS variables
Define dynamic values as local/inline CSS variables, and reference them as a static tailwind classes
Define dynamic values as local/inline CSS variables, and reference them as a static tailwind classes
December 23, 2024 at 4:01 PM
👉 Inline CSS variables
Define dynamic values as local/inline CSS variables, and reference them as a static tailwind classes
Define dynamic values as local/inline CSS variables, and reference them as a static tailwind classes
Using @tailwindcss.com for styling?
Here are some not-obvious strategies to make your styles more composable (using v4) 🧱
Here are some not-obvious strategies to make your styles more composable (using v4) 🧱
December 23, 2024 at 4:01 PM
Using @tailwindcss.com for styling?
Here are some not-obvious strategies to make your styles more composable (using v4) 🧱
Here are some not-obvious strategies to make your styles more composable (using v4) 🧱
Last release of the year in the newsletter, with a look back at everything that happened in 2024
And it happened a lot 🤯
www.sandromaglione.com/newsletter
And it happened a lot 🤯
www.sandromaglione.com/newsletter
December 23, 2024 at 11:31 AM
Last release of the year in the newsletter, with a look back at everything that happened in 2024
And it happened a lot 🤯
www.sandromaglione.com/newsletter
And it happened a lot 🤯
www.sandromaglione.com/newsletter
✨ TypeScript tip ✨
A function that returns Tagged Classes
👉 Type a class with `new () => T`
👉 Required `Tag` type and value
👉 Return a class with `_tag`
Call the function from `extends` to get the class 🪄
A function that returns Tagged Classes
👉 Type a class with `new () => T`
👉 Required `Tag` type and value
👉 Return a class with `_tag`
Call the function from `extends` to get the class 🪄
December 16, 2024 at 3:44 PM
✨ TypeScript tip ✨
A function that returns Tagged Classes
👉 Type a class with `new () => T`
👉 Required `Tag` type and value
👉 Return a class with `_tag`
Call the function from `extends` to get the class 🪄
A function that returns Tagged Classes
👉 Type a class with `new () => T`
👉 Required `Tag` type and value
👉 Return a class with `_tag`
Call the function from `extends` to get the class 🪄
My writing 101 tips in this week newsletter
I have been writing on the web for (more than) a few years now
Exploring my setup and process this week 👇
www.sandromaglione.com/newsletter
I have been writing on the web for (more than) a few years now
Exploring my setup and process this week 👇
www.sandromaglione.com/newsletter
December 16, 2024 at 11:25 AM
My writing 101 tips in this week newsletter
I have been writing on the web for (more than) a few years now
Exploring my setup and process this week 👇
www.sandromaglione.com/newsletter
I have been writing on the web for (more than) a few years now
Exploring my setup and process this week 👇
www.sandromaglione.com/newsletter
The example that made me get CSS subgrid ✨
A superpower that can be used for many layouts
www.typeonce.dev/article/the-...
A superpower that can be used for many layouts
www.typeonce.dev/article/the-...
December 14, 2024 at 3:55 PM
The example that made me get CSS subgrid ✨
A superpower that can be used for many layouts
www.typeonce.dev/article/the-...
A superpower that can be used for many layouts
www.typeonce.dev/article/the-...
Articles are coming to typeonce.dev 👀
For everything that doesn’t require long explanations, but just short and to-the-point examples 👇
For everything that doesn’t require long explanations, but just short and to-the-point examples 👇
December 14, 2024 at 11:27 AM
Articles are coming to typeonce.dev 👀
For everything that doesn’t require long explanations, but just short and to-the-point examples 👇
For everything that doesn’t require long explanations, but just short and to-the-point examples 👇
New update on pubdev with package download count 👀
Turns out fpdart is downloaded 90_000 times each week 🙌 (number formatting intended)
Turns out fpdart is downloaded 90_000 times each week 🙌 (number formatting intended)
December 12, 2024 at 2:50 PM
New update on pubdev with package download count 👀
Turns out fpdart is downloaded 90_000 times each week 🙌 (number formatting intended)
Turns out fpdart is downloaded 90_000 times each week 🙌 (number formatting intended)
This is what you get when you bet on @effect-ts.bsky.social and the community around it ✨
December 11, 2024 at 3:02 PM
This is what you get when you bet on @effect-ts.bsky.social and the community around it ✨
✨ TypeScript Tip ✨
Rest parameters: Allow passing any number of arguments to a function
Make your API easier to use, avoiding multiple function calls 🤝
Rest parameters: Allow passing any number of arguments to a function
Make your API easier to use, avoiding multiple function calls 🤝
December 10, 2024 at 3:56 PM
✨ TypeScript Tip ✨
Rest parameters: Allow passing any number of arguments to a function
Make your API easier to use, avoiding multiple function calls 🤝
Rest parameters: Allow passing any number of arguments to a function
Make your API easier to use, avoiding multiple function calls 🤝
✨ TypeScript Tip ✨
Function overloads with types
👉 Wrap type in `{}`
👉 Provide 2 different signatures
Allows to call the same function with different parameters, and different results
Runtime problems may apply 🙌
This pattern is useful in library-land to provide a better API for the end user
Function overloads with types
👉 Wrap type in `{}`
👉 Provide 2 different signatures
Allows to call the same function with different parameters, and different results
Runtime problems may apply 🙌
This pattern is useful in library-land to provide a better API for the end user
December 9, 2024 at 5:31 PM
✨ TypeScript Tip ✨
Function overloads with types
👉 Wrap type in `{}`
👉 Provide 2 different signatures
Allows to call the same function with different parameters, and different results
Runtime problems may apply 🙌
This pattern is useful in library-land to provide a better API for the end user
Function overloads with types
👉 Wrap type in `{}`
👉 Provide 2 different signatures
Allows to call the same function with different parameters, and different results
Runtime problems may apply 🙌
This pattern is useful in library-land to provide a better API for the end user
✨ TypeScript Tip ✨
Type classes using `new`
👉 `new` keyword
👉 Constructor parameters inside `()`
👉 Class parameters after `=>`
You can mark a type as a constructor signature, something that can be instantiated using `new` 👇
Type classes using `new`
👉 `new` keyword
👉 Constructor parameters inside `()`
👉 Class parameters after `=>`
You can mark a type as a constructor signature, something that can be instantiated using `new` 👇
December 8, 2024 at 3:08 PM
✨ TypeScript Tip ✨
Type classes using `new`
👉 `new` keyword
👉 Constructor parameters inside `()`
👉 Class parameters after `=>`
You can mark a type as a constructor signature, something that can be instantiated using `new` 👇
Type classes using `new`
👉 `new` keyword
👉 Constructor parameters inside `()`
👉 Class parameters after `=>`
You can mark a type as a constructor signature, something that can be instantiated using `new` 👇
Systems in ECS just got a simple as it gets 🕹️
Define systems, dependencies, and input all type safe and inferred for you
☑️ Components
☑️ Systems
☑️ Entities
Closer to the full API 🔜
Define systems, dependencies, and input all type safe and inferred for you
☑️ Components
☑️ Systems
☑️ Entities
Closer to the full API 🔜
December 3, 2024 at 5:49 PM
Systems in ECS just got a simple as it gets 🕹️
Define systems, dependencies, and input all type safe and inferred for you
☑️ Components
☑️ Systems
☑️ Entities
Closer to the full API 🔜
Define systems, dependencies, and input all type safe and inferred for you
☑️ Components
☑️ Systems
☑️ Entities
Closer to the full API 🔜
ECS + @pixijs.com + MatterJS = 🕹️
Compose systems to build a complex game with physics and rendering
ECS keeps everything organized and under control 🫡
Compose systems to build a complex game with physics and rendering
ECS keeps everything organized and under control 🫡
December 2, 2024 at 3:44 PM
ECS + @pixijs.com + MatterJS = 🕹️
Compose systems to build a complex game with physics and rendering
ECS keeps everything organized and under control 🫡
Compose systems to build a complex game with physics and rendering
ECS keeps everything organized and under control 🫡
Have you ever considered making a game?
Well, then you should learn about Entity Component System 🕹️
An introduction for you in this week newsletter 👇
sandromaglione.com/newsletter
Well, then you should learn about Entity Component System 🕹️
An introduction for you in this week newsletter 👇
sandromaglione.com/newsletter
December 2, 2024 at 11:51 AM
Have you ever considered making a game?
Well, then you should learn about Entity Component System 🕹️
An introduction for you in this week newsletter 👇
sandromaglione.com/newsletter
Well, then you should learn about Entity Component System 🕹️
An introduction for you in this week newsletter 👇
sandromaglione.com/newsletter
Integrate physics with matterjs and ECS in your game 🧱
Each system as simple as it gets, a function and a query is all you need 👇
Each system as simple as it gets, a function and a query is all you need 👇
December 1, 2024 at 3:43 PM
Integrate physics with matterjs and ECS in your game 🧱
Each system as simple as it gets, a function and a query is all you need 👇
Each system as simple as it gets, a function and a query is all you need 👇
Making the API as simple and safe in my ECS in TypeScript 🕹️
Define a component with a simple class, auto tagged and ready to use
Simple and safe 🪄
Define a component with a simple class, auto tagged and ready to use
Simple and safe 🪄
December 1, 2024 at 10:18 AM
Making the API as simple and safe in my ECS in TypeScript 🕹️
Define a component with a simple class, auto tagged and ready to use
Simple and safe 🪄
Define a component with a simple class, auto tagged and ready to use
Simple and safe 🪄
Working Entity Component System with TypeScript in action 🕹️
Simple architecture for organised code and powerful results 👇
Simple architecture for organised code and powerful results 👇
November 28, 2024 at 5:47 PM
Working Entity Component System with TypeScript in action 🕹️
Simple architecture for organised code and powerful results 👇
Simple architecture for organised code and powerful results 👇
ECS implementation in TypeScript achieved 🫡
TypeScript only, extensible, working with any renderer, type safe and composable 🕹️
May be the beginning of something
#game-development #typescript #games #ecs
TypeScript only, extensible, working with any renderer, type safe and composable 🕹️
May be the beginning of something
#game-development #typescript #games #ecs
November 27, 2024 at 5:59 PM
ECS implementation in TypeScript achieved 🫡
TypeScript only, extensible, working with any renderer, type safe and composable 🕹️
May be the beginning of something
#game-development #typescript #games #ecs
TypeScript only, extensible, working with any renderer, type safe and composable 🕹️
May be the beginning of something
#game-development #typescript #games #ecs
Entity Component System (ECS) brings composability to game development 🪄
Split data and logic, and just compose entities with what they need to operate
Clean, composable and powerful 🔥
Split data and logic, and just compose entities with what they need to operate
Clean, composable and powerful 🔥
November 27, 2024 at 11:39 AM
Entity Component System (ECS) brings composability to game development 🪄
Split data and logic, and just compose entities with what they need to operate
Clean, composable and powerful 🔥
Split data and logic, and just compose entities with what they need to operate
Clean, composable and powerful 🔥
Functional programming in games? 🤨
I have been exploring a deep hole this week, and I may have found something
Some ideas in this week newsletter 👇
www.sandromaglione.com/newsletter
I have been exploring a deep hole this week, and I may have found something
Some ideas in this week newsletter 👇
www.sandromaglione.com/newsletter
November 25, 2024 at 11:55 AM
Functional programming in games? 🤨
I have been exploring a deep hole this week, and I may have found something
Some ideas in this week newsletter 👇
www.sandromaglione.com/newsletter
I have been exploring a deep hole this week, and I may have found something
Some ideas in this week newsletter 👇
www.sandromaglione.com/newsletter
New project landing next week Tuesday 26 November 🚀
Local-only calories tracker app
🏗️ @effect-ts.bsky.social
⚡️ @pglite.dev with live queries
📄 @drizzle.team
🔗 Actors with XState
🧱 @tanstack.com router
Your next local-first stack 👇
Local-only calories tracker app
🏗️ @effect-ts.bsky.social
⚡️ @pglite.dev with live queries
📄 @drizzle.team
🔗 Actors with XState
🧱 @tanstack.com router
Your next local-first stack 👇
November 24, 2024 at 10:39 AM
New project landing next week Tuesday 26 November 🚀
Local-only calories tracker app
🏗️ @effect-ts.bsky.social
⚡️ @pglite.dev with live queries
📄 @drizzle.team
🔗 Actors with XState
🧱 @tanstack.com router
Your next local-first stack 👇
Local-only calories tracker app
🏗️ @effect-ts.bsky.social
⚡️ @pglite.dev with live queries
📄 @drizzle.team
🔗 Actors with XState
🧱 @tanstack.com router
Your next local-first stack 👇
Upcoming local-only project is going to be an interesting one 🫡
Local database with @effect-ts.bsky.social schemas, migrations, XState state management, @tanstack.com router and more 🪄
Preview link: www.typeonce.dev/course/calor...
Local database with @effect-ts.bsky.social schemas, migrations, XState state management, @tanstack.com router and more 🪄
Preview link: www.typeonce.dev/course/calor...
November 23, 2024 at 11:54 AM
Upcoming local-only project is going to be an interesting one 🫡
Local database with @effect-ts.bsky.social schemas, migrations, XState state management, @tanstack.com router and more 🪄
Preview link: www.typeonce.dev/course/calor...
Local database with @effect-ts.bsky.social schemas, migrations, XState state management, @tanstack.com router and more 🪄
Preview link: www.typeonce.dev/course/calor...