Sandro Maglione

Patterns for composable tailwindcss styles | Typeonce Professional training for Full-Stack software development teams

Read the full details and examples in the article 👇

www.typeonce.dev/article/patt...

👉 className instead of variants

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

👉 Inline CSS variables

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) 🧱

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

✨ 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 🪄

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

The example that made me get CSS subgrid ✨

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 👇

New update on pubdev with package download count 👀

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 ✨

✨ TypeScript Tip ✨

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

First-draft thoughts on programming, web, games | Sandro Maglione Every week I explore the sharp edge of web technologies delivering you unfiltered insights on my discoveries, so you can avoid my same mistakes.

Programming literacy in this week newsletter 💡

> The ability to read, write, and understand code; programming concepts, syntax, and semantics, as well as applying skills to solve problems and communicate ideas

sandromaglione.com/newsletter

Playground: www.typescriptlang.org/play/#code/P...

✨ 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` 👇

GitHub - typeonce-dev/ecs: Entity Component System (ECS) implementation in TypeScript, extensible, working with any renderer, type safe and composable 🕹️ Entity Component System (ECS) implementation in TypeScript, extensible, working with any renderer, type safe and composable 🕹️ - typeonce-dev/ecs

✨ Introducing ECS for TypeScript ✨

typeonce/ecs is a zero dependencies library to bring the Entity Component System pattern in your game

Simple, working with any renderer, type safe and composable 🕹️

github.com/typeonce-dev...

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 🔜

ECS + @pixijs.com + MatterJS = 🕹️

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

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 👇

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 🪄

Working Entity Component System with TypeScript in action 🕹️

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

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 🔥

Local-only calories tracker app | Typeonce A local-only calories tracker app made with TanStack Router, PGlite, Effect, XState and drizzle. The app is all client-side, fast, private, and reactive using a local postgres database.

Local-only calories tracker app project out now 🚀

Learn how to build a client-only app with database included in the browser with PGLite 🐘

@effect-ts.bsky.social + @drizzle.team + @tanstack.com router + XState

www.typeonce.dev/course/calor...

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

Local-only calories tracker app | Typeonce A local-only calories tracker app made with TanStack Router, PGlite, Effect, XState and drizzle. The app is all client-side, fast, private, and reactive using a local postgres database.

Project preview already available 👇

www.typeonce.dev/course/calor...

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 👇