coder, nerd, DJ. Author of is-lite, tree-changes, react-inilinesvg, react-joyride, react-from-dom, and much more. https://xitter.cf/t.co/RKjygnrbZx
-23.539278,-46.675915
Joined September 2007
- Tweets9K
- Following391
- Followers588
- Likes5K
Pinned Tweet
I built ColorMeUp Lab — a free, open-source generator for OKLCH color scales.
The steps come out perceptually even, not just mathematically even. Built for design-system work.
lab.colormeup.co/
Dear Opus 4.8:
I used Opus 5 to build this, but it's VERY exhausting to work with. It always tries to make everything extra complicated, loves adding unnecessary comments everywhere, creates files for every little stupid function, and, worst of all, fails to finish tasks.
Generated color scales look a little dead.
The fix is to shape them in OKLCH: ease chroma toward the highlights, drift the hue by a few degrees, and redistribute lightness.
Before/after + live demos 👇
lab.colormeup.co/custom-colo…
#CSS #OKLCH #Design #Frontend
It's open source (MIT) and built on colorizr, the color library that does the perceptual math. Prefer code over a UI? Use colorizr directly.
App: lab.colormeup.co/
GitHub repo: github.com/gilbarbara/color-…
colorizr: github.com/gilbarbara/colori…
Export to Tailwind v4/v3, CSS variables, SCSS, or SVG.
No sign-up to use it. The entire palette is encoded in the URL — share a link, get the exact scale back.
Everything is computed in OKLCH, so you control lightness and chroma independently:
• steps 3–21
• lightness & chroma curves
• saturation + min/max lightness
• per-step overrides
• OKLCH/sRGB toggle, wide-gamut P3
Gil Barbara retweeted
Asking AI for help is like pair-programming with a genius who occasionally lies for fun.
Universal coordination layer for AI coding assistants. Mix & match any MCP-compatible agents:
• Claude Code + Qwen + Gemini + Codex
• Cross-project messaging
• Feature coordination
One config, infinite possibilities.
github.com/gilbarbara/agent-…
@AnthropicAI @OpenAI #AI
🙌🏻
Introducing "Copy console" in @ChromeDevTools: one-click copy all console messages. Useful for pasting into LLMs / AI Code Editors for better fixes.
ALT Copy console in Chrome DevTools
Short and sweet!
Learn the Latest ECMAScript Features (ES2024, ES2023, ...) by @tomasz_ducin (course on @eggheadio) egghead.io/courses/learn-the…
Hey @codesandbox
"From Jan 30th, all draft Sandboxes need to be private"
So, even with my Pro subscription I can't share it with anyone? That's crazy.
Yay
Final dev listicle for the year ❄️
🎄24 open-source Libraries you should try out in your Holiday Coding (full-stack)🎅🎁
Check it out and give it some love ❤️
dev.to/copilotkit/24-must-tr…
tl;dr
WebDev🌐
1. CopilotTextarea: AI-powered text areas in any react text field.
github.com/CopilotKit/Copilo… @ataiiam
2. React Joyride - Create product walkthroughs. github.com/gilbarbara/react-… @gilbarbara
3. NextAuthJS - Easily set up authentications. github.com/nextauthjs/next-a… @nextauthjs
4. Trigger. dev - Reliably run long jobs without timeouts. github.com/triggerdotdev/tri… @triggerdotdev
---
UI/UX 🦋
5. Flowbite - Top library of CSS components. github.com/themesberg/flowbi… @zoltanszogyenyi
6. MaterialUI - Foundational React components with Google's Material Design. github.com/mui/material-ui @MaterialUI
7. SwiperUI - Respected library for mobile swipe UI. github.com/nolimits4web/swip… @nolimits4web
8. ReactSpring - Implement animations in React with realistic physics.
github.com/pmndrs/react-spri… @pmndrs
---
GenAI🤖
9. CopilotPortal - Embed an actionable LLM chatbot inside your app. github.com/RecursivelyAI/Cop… @tawkitAI
10. llamafile - Simplify working with LLMs with an easy unified file type.
github.com/Mozilla-Ocho/llam… @mozilla @mozhacks
11. Pezzo. ai - Dev favorite LLM ops & observability. github.com/pezzolabs/pezzo @arielweinberger
12. Tavily - Autonomous GPT agent for searching and reporting. github.com/assafelovic/gpt-r… @tavilyai @assaf_elovic
---
Security/Privacy 🔐
13. Wazuh - Unified open-source security platform. github.com/wazuh/wazuh @wazuh
14. Zeek - Analyze network traffic in-depth. github.com/zeek/zeek @Zeekurity
15. SuperTokens - Open-source authentication provider. github.com/supertokens/super… @supertokensio
16. Sniffnet - Monitor internet traffic locally. github.com/GyulyVGC/sniffnet
---
Mobile 📱
17. Tamagui - React Native UI & optimization library. github.com/tamagui/tamagui @tamagui_js @natebirdman
18. EarlGrey - iOS UI testing by Google. github.com/google/EarlGrey
19. ReactNativeMaps - Customizable map component for apps. github.com/react-native-maps…
20. ReactNativePaper - Design library for iOS and Android. github.com/callstack/react-n…
---
Santa's Favorites🎅
21. LangChain - Building custom action chains with LLMs. github.com/langchain-ai/lang… @langchain @hwchase17
22. ReactAgent - Turn prompts into React components. github.com/eylonmiz/react-ag… @EylonMiz
23. Awesome for Beginners - GitHub list of beginner-friendly projects.
github.com/MunGell/awesome-f…
24. Appwrite - Powerful backend platform for web & mobile apps
github.com/appwrite/appwrite @appwrite @adityaoberai
Yay! 👍🏻♥️
🕹️React Joyride by @gilbarbara: create guided tours in apps. Featured in @JavaScriptDaily (javascriptweekly.com/issues/…).
🔗react-joyride.com/
ALT React Joyride on Twitter
