Mona
LightNews LightNews
banner
monaaghili.bsky.social
Mona
@monaaghili.bsky.social
54 followers 54 following 10 posts
a dev curiously digging into the world of computers

I’m open to new opportunities, feel free to reach out! Check out my GitHub to see my work. 👇🏼

https://github.com/MonaAghili
https://linkedin.com/in/monalaghili/
Posts Replies Media Videos
Reposted by Mona
shahryar-tbiz.bsky.social
Hello friends,
Yesterday, I released the first beta version of Mishka. Due to the large number of changes, I really need your help with testing
I hope you’ll support us by trying out the new version.
The minimum requirements are Tailwind 4 and Phoenix 1.8.
elixirforum.com/t/mishka-che...
#ElixirLang
Mishka Chelekom - Phoenix and LiveView UI kit and components
Hello friends, Yesterday, I released the first beta version. Due to the large number of changes, I really need your help with testing. I hope you’ll support us by trying out the new version. The mi...
elixirforum.com
September 14, 2025 at 7:41 AM
Reposted by Mona
shahryar-tbiz.bsky.social
**Update**
We're actively updating all components of Mishka Chelekom. Due to their number and the previous approach, it's time-consuming. You can check some migrated components in this branch (please don't use it yet).
github.com/mishka-group...
#ElixirLang
GitHub - mishka-group/mishka_chelekom at Tailwind-4-Phoenix-1.8
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView - GitHub - mishka-group/mishka_chelekom at Tailwind-4-Phoenix-1.8
github.com
August 20, 2025 at 7:53 AM
Reposted by Mona
zachdaniel.dev
I think #ElixirLang folks may be sleeping on Mishka: mishka.tools/chelekom. I've seen a pretty stark difference between UI abstraction and backend/server abstraction, in that UI abstractions seem to fall apart or mismatch far quicker. It isn't my area, so I can't say why or how to fix it, but with
Chelekom - Phoenix & LiveView UI kit and components
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
mishka.tools
June 10, 2025 at 7:37 PM
Reposted by Mona
danabra.mov
⚛️📝 New on Overreacted: Progressive JSON
Progressive JSON — overreacted
Why streaming isn't enough.
overreacted.io
May 31, 2025 at 4:41 PM
Reposted by Mona
shahryar-tbiz.bsky.social
Hi #elixir community ✈️ 🌟 🥂
We hope friends and colleagues will help us so that ideally we can fully support both DaisyUI and other custom design systems. We’re waiting for you dear ones.
#ElixirLang #Phoenix
👇👇 Please suggest us
github.com/mishka-group...
Proposal for Supporting and Integrating DaisyUI and Custom Design Systems into Chelekom · Issue #415 · mishka-group/mishka_chelekom
In this issue we will demonstrate how the implementation of components specifically in terms of HTML structure differs between Chelekom and daisyUI The current example of the rating component in da...
github.com
May 27, 2025 at 8:13 PM
Reposted by Mona
shahryar-tbiz.bsky.social
Hey #Elixir friends! 🚀 Another simple update! This time for #Phoenix Sidebar component, just need to use <.sidebar minimize> and before that run `mix mishka.ui.gen.component sidebar`
Active >= 0.0.5-alpha.11 🤯🏅
Doc: mishka.tools/chelekom/doc...
#ElixirLang
April 16, 2025 at 12:42 PM
monaaghili.bsky.social
Check out the latest updates to our progress component!

We’ve added tooltips to give users more context and details as they track progress.
Plus there’s a brand new chunked vertical progress.

#JavaScript #TailwindCSS #WebDev
April 9, 2025 at 7:57 AM
Reposted by Mona
shahryar-tbiz.bsky.social
Here’s a demo of our new ComboBox 😱. As you can see, it’s fairly responsive to screen size and reasonably considers accessibility.
#ElixirLang #Phoenix #elixir
Doc: mishka.tools/chelekom/doc...
March 26, 2025 at 12:17 PM
Reposted by Mona
sebastienlorber.com
Great talk, and TIL about this cool trick

Pragmatism: use "Error" instead of "unknown"

But gives the ability for users to opt out of this opinionated choice with TS declaration merging
March 26, 2025 at 12:14 PM
Reposted by Mona
shahryar-tbiz.bsky.social
🚀 Excited to announce Mishka Chelekom v0.0.4 is out!
Now with ComboBox support and tons of updates. Don’t miss it! ✨
🔥 Bonus: You can install it now via Igniter Installer!
📄 You can find all the changes in this version in the article below 👇
mishka.tools/blog/introdu...

#ElixirLang #Phoenix #elixir
March 25, 2025 at 5:20 PM
Reposted by Mona
zachdaniel.dev
Mishka Chelekom (mishka.tools/chelekom) is now available on the ash-hq.org installer 🎉. For packages that beyond small utilities: if you can provide a smooth installation experience using igniter on top of a fresh Phoenix & Ash app, we'll get you on the installer 😎.
ash-hq.org#installer #ElixirLang
March 25, 2025 at 7:10 PM
Reposted by Mona
shahryar-tbiz.bsky.social
🚀 We at Mishka Chelekom just released two new components: Radio Card & Checkbox Card! 🎉 Plus, we're working on various ComboBox types—exciting updates coming soon! 🔥

Your support, even the price of a coffee per month ☕, keeps this project alive! 💙

#OpenSource #WebDev #ElixirLang
March 5, 2025 at 6:23 AM
Reposted by Mona
shahryar-tbiz.bsky.social
🚀 We’ve got awesome updates for Scroll Area! Watch this to see how to install & use it. Make sure to use the latest release: {:mishka_chelekom, "~> 0.0.4-alpha.5", only: :dev}. Mishka is here to cover your needs—open-source & free. Support us! ❤️
#ElixirLang #Phoenix
February 22, 2025 at 4:43 PM
Reposted by Mona
shahryar-tbiz.bsky.social
🚀 After 2+ months of full-time work, we're excited to announce that Mishka Chelekom library v0.0.2 is out! 🎉 With 80+ improved components and dark mode support, it’s better than ever. 🌟 Stay tuned for video content soon. 🎥 (Components and UI kit library)

#ElixirLang
hex.pm/packages/mis...
mishka_chelekom
Mishka Chelekom is a fully featured components and UI kit library for Phoenix & Phoenix LiveView
hex.pm
January 20, 2025 at 1:30 PM
Reposted by Mona
anatudor.bsky.social
A fun little text layers fanning out when hovering demo on @codepen.io: codepen.io/thebabydino/...

No text duplication whatsoever, no JS, no images save for CSS gradients.

A bit of #SVG #filter magic 🪄 creates the #3D text peeling effect.

An entry for this week's #CodePenChallenge.
November 4, 2024 at 8:04 PM
Reposted by Mona
martin.kleppmann.com
I’m fortunate to have a call with the Bluesky backend team for an hour a week, and I’m continually blown away at how good they are at engineering their systems, how thoughtful they are about protocol design, and how smoothly they’ve been handling a huge influx of new users. Seriously impressive
November 13, 2024 at 10:23 PM
Reposted by Mona
tkdodo.eu
⚛️ I updated my reproduction from you-know-when to react 19.0.0-rc.1 and it works great 🚀

stackblitz.com/edit/tanstac...

It’s not quite the same as in v18, but definitely the perfect tradeoff:
suspense-query-react-19 (forked) - StackBlitz
Run official live example code for Query Simple, created by Tanstack on StackBlitz
stackblitz.com
November 15, 2024 at 5:38 PM
Reposted by Mona
shahryar-tbiz.bsky.social
The #Elixir community is amazing, and it truly makes me happy. I feel like a big part of Mishka hasn't been fully showcased yet. You might see default versions of components compared with Headless UI, but there's a reason for that!
peterullrich.com Peter Ullrich @peterullrich.com · Nov 15
Today on my livestream: Trying FluxonUI, the UI Component library for Phoenix LiveView by @andrielfn.bsky.social. #ElixirLang

Join me: 👇

www.twitch.tv/pjullrich
Twitch
Twitch is the world
www.twitch.tv
November 15, 2024 at 5:39 PM
Reposted by Mona
anatudor.bsky.social
Couldn't help myself & checked 💬

For those who want a tint filter, @lea.verou.me once shared this #CSS #filter technique I used a lot since (for monojicons for example):

sepia(1) hue-rotate(a) saturate(v)

If you're not afraid 👻 of #SVG filters, you can use a custom one codepen.io/thebabydino/...
Screenshot of comments on CSS filter effects, highlighting one that says "I want a tint filter, not sepia". Screenshot showing lots and lots of mono paw emojis created using such a filter. The filter code is as follows: ``` filter: brightness(0) /* ⇒ emoji black */ invert(65%) /* ⇒ hsl(0, 0%, 65%) */ sepia(1) /* ⇒ pretty desaturated, pretty light yellow (hue≅40) */ hue-rotate(var(--a)) /* ⇒ move around hue wheel by a° */ saturate(var(--v)) /* bump up saturation using a value > 1 */ ``` 4 image panels, first 3 showcasing 3 different monochrome options, while the last shows the original image. At the bottom, there's a monochrome control to take the images through the entire rainbow.
November 9, 2024 at 7:46 AM
Reposted by Mona
patrickbrosset.com
Have you heard of the 🍞 API?

The long-animation-frame perf event type provides info about rendering updates that take too long.

This API is also known as LoAF and, funny enough, MS Teams won't let me type LoAF without replacing it with 🍞!

Learn more: developer.mozilla.org/docs/Web/API...
November 7, 2024 at 10:31 AM
monaaghili.bsky.social
I guess sharing music is one of the joys in my life. I just love spamming songs to anyone and everyone!
November 8, 2024 at 7:22 PM
monaaghili.bsky.social
#NowPlaying
open.spotify.com/track/5Y8753...
Memorial
The Black Noodle Project · Divided We Fall · Song · 2017
open.spotify.com
November 8, 2024 at 7:18 PM
Reposted by Mona
kevinpowell.co
People often ask me for CSS book recommendations... So, here you go :)
keithjgrant.com Keith J. Grant @keithjgrant.com · Nov 8
A lot of new followers, so hello! 👋🏻

I’m a front-end dev at Red Hat, mostly working in React. I also love CSS and I’m the author of CSS in Depth. The second edition just released. Check it out if you want really master CSS, or just get up to speed on the latest!

www.manning.com/books/css-in...
The cover of CSS in Depth, Second Edition
November 8, 2024 at 6:36 PM
Reposted by Mona
anatudor.bsky.social
Come as you are¹ on @codepen.io codepen.io/thebabydino/...

No text duplication whatsoever, no text-shadow, no images save for #CSS gradients, no JS, just #SVG #filter magic.

Also an entry for this week's #CodePenChallenge.

¹but fully clothed
The text "come as you are" in all caps. It has a gold to deep pink left to right gradient fill and four plus three same gradient stroke but no fill shadows tiled above and below and distorted in a wave-like manner. The fine print at the bottom: "but fully clothed" ;) Dev Tools panel open on the right to show there's no text duplication whatsoever, not in the markup and not in pseudo-elements.
November 8, 2024 at 6:21 PM
Reposted by Mona
anatudor.bsky.social
A double outline #3D text effect I made on @codepen.io codepen.io/thebabydino/...

No text duplication, no text-shadow, no images save for #CSS gradients.

Double outline created by text-stroke. Outline styling & 3D effect created by #SVG #filter magic. 🪄

An entry for this week's #CodePenChallenge.
Screenshot. Shows the text "now" in all caps, with a light blue to bluish green top to bottom gradient letter face, a double stroke and a 3D extrusion effect. The outer stroke is white, while the inner one is a top to bottom gradient one from a medium blue to the same green as the letter face now, effectively looking as if it's disappearing into the letter fill at the bottom. The extrusion is deeppink at the bottom and a gold to orange top to bottom gradient on the right side. The page background is an aqua to deep blue dithered gradient. DevTools open on the right side to highlight the fact that there's no JS, no text duplication whatsoever, not in the markup and not in any pseudo-element content.
November 8, 2024 at 5:26 PM