The Marko and UnoCSS logos, some Marko mascots, and a button HTML element with a HUGE list of classnames that goes off the page
Marko 🤝 UnoCSS
@unocss.dev now reads `.marko` files by default!
Meme suggesting breaking up an app into islands for better performance, but then highlighting that Marko 6 does this automatically.
Why ship entire islands for a few grains of sand?
A screenshot of the Marko HackerNews website with the Chromium network tab open. A hand-drawn arrow and circle highlight that only 1.7kb of JavaScript is sent to the browser
We topped HackerNews! Read the discussion on our HN app, and check out the network tab while you're at it 👀
marko-hn-example.netlify.app/story/45858905
Keeping bundles small 🫡
www.lorenstew.art/blog/10-kanb...
The output of the code example linked, showing a variety of inputs masked to prevent letters, cast to capital letters, and format as credit card/hex/phone number
Input masking with cursor preservation?
markojs.com/playground#d...
markojs.com/playground#d...
Don't do this, but it's cool that you can!
🔜
markojs.com/playground#d...
Hyper Text Marko Language
Math Marko Language
Scalable Vector Gr... Dang it.
Write less boilerplate
Check out our updated examples on Component Party
component-party.dev?f=marko
Had to whip up a color mixer, our playground makes it quick and easy to share!
markojs.com/playground?f...
@ryansolid.bsky.social and @dpiercey.me are showing the upcoming new version of @markojs.com live
(it's really cool)
www.youtube.com/watch?v=x-3R...
We're live twitch.tv/ryansolid
Slow and steady wins the race?
There is hate for JS on the server. But none have accomplished what @markojs.com has. Forget Islands, forget serialization boundaries, forget writing code twice. Just declarative templates, low JS, automatically.
@dpiercey.me joins me Friday to show how it's done.
www.youtube.com/live/x-3RxGf...
`npm init marko`!
This example uses the Tags API, which we _just_ made available as the `basic-tags` template. It's still in alpha so expect bugs 😅, but if you want a more stable experience you can swap `@marko/translator-tags` to `@marko/tags-api-preview` in your package.json
@cmgriffing.bsky.social's Giffium.com rocks! Great way to show how much less you can write with Marko 😉
How dare you
![A TODO app example using Marko's concise syntax:
```marko
let/todos=["foo", "bar"]
form onSubmit(e) {
e.preventDefault()
todos = todos.concat(e.target.todo.value)
e.target.reset()
}
input name="todo"
button -- Add
ul
for|todo, i| of=todos
li
button onClick() { todos = todos.toSpliced(i, 1) } -- ×
-- ${todo}
```](https://cdn.bsky.app/img/feed_thumbnail/plain/did:plc:l3ixokj4z7rydtywznvl63rz/bafkreiemvfjrjb2r3jknar5meuuqesv7sjvltgbpjod6hljcfylbml5sne)
A TODO app example using Marko's concise syntax: ```marko let/todos=["foo", "bar"] form onSubmit(e) { e.preventDefault() todos = todos.concat(e.target.todo.value) e.target.reset() } input name="todo" button -- Add ul for|todo, i| of=todos li button onClick() { todos = todos.toSpliced(i, 1) } -- × -- ${todo} ```
Concise Mode == Best Mode
🤗
We aren't quite ready for people upgrade yet, but we're proud of the migration path we've prepared. As long as you're using Marko 5, you can install `@marko/translator-interop-class-tags` and start using Marko 6/Tags API components in your app right away!
Roadmap: github.com/orgs/marko-j...
