![\"One](\"https://jubayeramb.com/assets/images/blog/jev-system-one-model/how-a-call-works.png\")
Models have been good at chat for years.\nSo why is most automation in production still a pile of if statements?
That is the question TypeSafe AI opened their launch post with, and it is a fair one.\nOn September 15, 2026, after two years in stealth, they released Jev, the first model in a class they call System One Models.\nIt does not write text.\nIt makes decisions your code can use directly.
\nI have not had early access yet, so everything below comes from TypeSafe’s launch post, their docs, and their published workflow evals.\nWhere their numbers are strong, I say so.\nWhere they are weaker than the headline, I say that too.
\nAn LLM writes a string, and your code has to parse it, validate it, and hope it did not go off the rails.\nJev picks from answers you define in advance, and returns a probability for each one.
\nIf the thing you need back is a sentence, use an LLM.\nIf the thing you need back is a branch in your code, that is what Jev is for.
\nJev comes from TypeSafe AI, a San Francisco lab founded by Diogo Almeida, who worked at OpenAI on the instruction-following research that became ChatGPT.\nTypeSafe describes Jev as “a frontier-intelligence function call: unstructured state in, typed probabilistic decisions out.”
\nThe names are borrowed.\n“System One” comes from Daniel Kahneman’s Thinking, Fast and Slow: fast, intuitive System 1 judgment versus slow, deliberate System 2 reasoning.\n“Jev” is after William Stanley Jevons, who noticed that cheaper coal led to more coal use, not less.\nTheir bet is the same for intelligence: make a decision cost a fraction of a cent and people will put one everywhere.
\nTypeSafe changed three things at once: the architecture, the sampler, and the training method.\nHere is their own comparison, condensed:
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n| LLMs | Jev | |
|---|---|---|
| Trained for | Human preference (RLHF) or verifiable rewards (RLVR) | Calibrated decisions (RLCD, their new method) |
| Output | A string, parsed and validated by your code | Typed values, only from options you defined |
| Sampling | One token at a time, each depending on the last | All answers in one parallel pass |
| Confidence | Overconfident and inconsistent, even when asked | A probability on every answer |
| Speed | 3 to 329 s end to end for frontier models | 70 to 500 ms end to end |
| Price | $0.20 to $10 per million input tokens, output ~5x more | $0.042 per million input tokens, output free |
The sampling row is the one that explains the rest.\nAn LLM answering three questions has to write them out, token by token, in order.\nJev scores every option for every question at the same time.
\nGiving up text is the whole trade.\nJev cannot write you an email.\nIn exchange it cannot return a department that does not exist, a score of “high-ish”, or a refusal where a boolean should be.
\nThere are three question types, and every answer comes back typed:
\nHere is the support ticket example from their quickstart, written with their TypeScript SDK, @typesafe-ai/sdk.\nOne ticket, three questions, one call:
import { choice, noul, score, TypeSafeClient } from \"@typesafe-ai/sdk\";\n\nconst client = new TypeSafeClient(); // reads TYPESAFE_API_KEY\n\nconst ticket =\n \"Hi, I've been trying to connect my Stripe account for 3 days and the integration keeps failing. I'm losing sales. Please help ASAP.\";\n\nconst { answers } = await client.systemOne({\n state: ticket,\n questions: {\n department: choice(\"Which team should handle this\", {\n billing: \"Payment or subscription issues\",\n technical: \"Bugs or integration problems\",\n sales: \"Pricing or account questions\",\n }),\n frustration: score(\"How frustrated the customer appears\", [\n \"Calm, just stating facts\",\n \"Frustrated but civil\",\n \"Very angry, strong language\",\n ]),\n is_urgent: noul(\"The message conveys urgency or time-sensitivity\"),\n },\n});\n\nanswers.department.choice; // \"billing\" | \"technical\" | \"sales\"\nanswers.frustration.score; // number, 0 to 2\nanswers.is_urgent.noul; // number, probability of yesThe SDK infers each answer’s type from its question, so answers.department.choice is the union of your three labels, not a string.
And the answers that come back (trimmed):
\n{\n \"department\": {\n \"choice\": \"technical\",\n \"confidence\": 0.78,\n \"probabilities\": { \"technical\": 0.85, \"billing\": 0.15, \"sales\": 0.0 }\n },\n \"frustration\": { \"score\": 1.0, \"confidence\": 1.0 },\n \"is_urgent\": { \"noul\": 1.0 }\n}
Notice what is missing.\nNo prompt asking for JSON, no parser, no retry when the model wraps the JSON in a sentence.\nThe shape of the answer is the shape of the question.
\nThe docs are also clear about what makes a good question.\nAsk for a judgment a knowledgeable person makes in a second, like “Does this message convey urgency?”\nDo not ask it to “analyze this message and determine the best course of action.”\nIf a decision depends on several factors, ask about each one separately and combine them in code, so a change in priorities is a change in weights, not a rewritten prompt.
\nThis line from the launch post is the best argument for the whole idea:
\n\n\nIf a model can do a task 95% of the time but doesn’t say when it’s in the 5%, it can’t automate that task.
\n
Every Choice and Score answer comes with a confidence between 0 and 1, derived from how peaked the probabilities are.\nThe docs suggest three paths: act on high confidence, confirm on medium, hand off on low.\nAnd the threshold should follow the stakes, not be one number for the whole system:
\nconst { answers } = await client.systemOne({\n state: userMessage,\n questions: {\n action: choice(\"What is the user trying to do?\", {\n check_balance: \"View account balance\",\n approve_transfer: \"Approve the pending withdrawal request\",\n support: \"Get help with an issue\",\n }),\n },\n});\n\nconst { action } = answers;\n\nif (action.confidence < 0.5) {\n routeToHuman(userMessage); // genuinely unsure, don't guess\n} else if (action.choice === \"check_balance\") {\n showBalance(accountId); // low stakes, a wrong screen is recoverable\n} else if (action.choice === \"approve_transfer\") {\n if (action.confidence > 0.9) {\n confirmThenExecute(accountId); // high stakes, high confidence\n } else {\n askUserToConfirm(accountId); // high stakes, verify first\n }\n}You can ask an LLM for a confidence score too, but you get a number it wrote, not a number it measured.\nThat difference is what lets you put a model somewhere nobody is watching.
\nThis is the part I spent the most time on, because the headline on their homepage is “193.6x faster, 444.6x cheaper” and that is the kind of number that deserves a closer look.
\nTypeSafe built a new kind of eval for AI inside code.\nThey take a written business policy and turn it into a workflow: every sentence becomes either a narrow question for the model (a Noul, Choice, or Score) or a rule in code.\nEvery model gets the exact same workflow.\nThe reference answers are the average of two of the largest and most expensive models available, GPT-6 Astra and Claude Fable 5.1, both at high thinking.\nSo “accuracy” here means agreement with those two models, not with human labels.
\nThere are four published workflows:
\nAveraged across the four, with every model running the same workflow:
\n![\"Scatter](\"https://jubayeramb.com/assets/images/blog/jev-system-one-model/benchmark-frontier.png\")
| Model | Accuracy | Cost per case | Time per case |
|---|---|---|---|
| Jev | 67.8% | $0.0004 | 0.4 s |
| Sol (OpenAI) | 74.1% | $0.0836 | 23.3 s |
| Opus 5 (Anthropic) | 73.1% | $0.1761 | 37.8 s |
| Terra (OpenAI) | 67.9% | $0.0304 | 10.1 s |
| Sonnet 5 (Anthropic) | 67.8% | $0.1174 | 78.1 s |
| Luna (OpenAI) | 66.8% | $0.0033 | 12.9 s |
| DeepSeek V4 Pro | 65.5% | $0.0413 | 86.5 s |
| DeepSeek V4 Flash | 64.4% | $0.0059 | 51.9 s |
| Haiku 4.5 (Anthropic) | 53.6% | $0.0195 | 12.5 s |
A few things stand out.
\nJev is not the most accurate model here.\nSol and Opus 5 agree with the reference about 5 to 6 points more often.\nWhat Jev does is sit at the same level as Sonnet 5 and Terra, at a tiny fraction of the cost and time.
\nThe size of the gap depends on who you compare against.\nAgainst Sonnet 5 at the same accuracy, Jev is roughly 290x cheaper and 195x faster per case.\nAgainst Terra, it is roughly 75x cheaper and 25x faster.\nAgainst Luna, the cheapest model in the same accuracy range, it is roughly 8x cheaper and 30x faster.\nAll real gains, but closer to one or two orders of magnitude than the homepage suggests.\nTypeSafe says as much themselves: they expect their headline numbers “are on the higher end of real world gains.”
\nIt is not even across tasks.
\n![\"Paired](\"https://jubayeramb.com/assets/images/blog/jev-system-one-model/per-workflow.png\")
On customer service, Jev is within about 2 points of the best model.\nOn invoice processing, it is about 17 points behind.\nMatching an invoice against an order and a delivery record looks like the kind of careful cross-checking that still wants a slower model.\nA snap judgment on a customer message does not.
\nThe eval also ran every LLM a second way: the same policy pasted in as one big prompt, no workflow.\nEvery model did better in the workflow, and was cheaper and faster doing it.\nHaiku 4.5 went from 18.1% as a prompt to 53.6% as a workflow.\nOpus 5 went from 64.8% to 73.1% while costing about half as much.
\nThat holds whether or not you ever use Jev.\nBreaking a decision into narrow questions and letting code do the logic beats asking any model to do it all in one shot.
\nTypeSafe is unusually upfront about the limits of their own evidence, and it is worth repeating:
\nif statements. Classify, route, score, extract, or branch where hand-written rules are too brittle.Most real systems will use both.\nThe LLM talks to the person.\nJev makes the calls in the code around it.
\nAt work I built a chat agent that quotes prices, books pickups, and captures leads.\nThe conversation is an LLM’s job.\nBut the questions behind it, like “is this person asking to book?”, “is this a complaint?”, or “does this need a human?”, are exactly the one-second judgments Jev is built for.\nThat is where I would try it first.
\nWhen I am wiring an AI step into code, I ask one question.\nDo I need a sentence, or a decision?
\nA sentence is an LLM.\nA decision is a System One Model.
\nJev is in early access through the TypeSafe console, and it is also listed on Cloudflare’s model catalog.\nIf you have tried it and your numbers look different from theirs, I would love to hear about it.\nThe fastest ways to reach me are on the contact page.
", "date_published": "2026-09-22T00:00:00.000Z", "tags": [ "Technical", "AI", "LLM", "Agents", "Automation" ] }, { "id": "https://jubayeramb.com/writings/ai-skills-vs-mcp-when-to-use-what/", "url": "https://jubayeramb.com/writings/ai-skills-vs-mcp-when-to-use-what/", "title": "AI Skills vs MCP: When to Use What", "summary": "A practical guide to AI agent skills and the Model Context Protocol. What each one is, what it costs you in context, and how to pick the right one without overthinking it.", "content_html": "If you build with agents, you have probably been asked the same question a dozen times this year. Should I write a Skill for this, or wrap it in an MCP server? Both extend what an agent can do. Both come from the same Anthropic playbook. Both have loud fan bases on the timeline.
\nThe line between them is actually pretty crisp once you see it. This is the short version, with examples, so you can stop guessing.
\nSkills teach your agent how to do a task well. MCP gives your agent access to systems it would not otherwise reach. That is the whole frame.
\nIf the gap you are trying to close is “the model does not know our house style,” that is a Skill. If the gap is “the model cannot see our Drive, Postgres, or Linear,” that is MCP.
\n![\"Skills](\"https://jubayeramb.com/assets/images/blog/ai-skills-vs-mcp/at-a-glance.png\")
That single sentence covers most of the decisions you will make. The rest of this post is the why behind it, and the edge cases where the answer is “use both.”
\nA Skill is a folder. Inside that folder is a SKILL.md file with some YAML metadata at the top, instructions in the body, and any extra files the agent might need. Templates, scripts, examples, a checklist.
A tiny one looks like this:
\npr-review/\n SKILL.md\n checklist.md\n examples/\n good-pr.md\n bad-pr.mdThe SKILL.md itself starts with a frontmatter block the agent reads at startup:
---\nname: pr-review\ndescription: Use when reviewing a pull request. Walks the checklist,\n flags risky patterns, and writes the review comment.\n---\n\n## How to review\n\n1. Read the diff top to bottom.\n2. Run through `checklist.md`.\n3. For anything risky, point to a line and quote the file path.\n4. Use the tone in `examples/good-pr.md`.The smart part is what happens at runtime. The agent does not load every Skill into context. It loads only the metadata, which is a hundred tokens or so per Skill. When the user actually asks for a pull request review, the agent reads the body. If the body points to checklist.md, the agent reads that too. If it never needs bad-pr.md, it never opens it.
This is called progressive disclosure, and it is the reason a single agent can carry forty Skills without melting its context window. You can think of Skills as a filesystem-shaped library that the agent pulls from on demand.
\nAnything that you would write down for a new teammate is a candidate for a Skill.
\nMCP, the Model Context Protocol, is a wire format. It is an open standard for an agent to talk to an outside system in a structured way. The agent is the client. A small server sits in front of GitHub, or Postgres, or Stripe, or your internal API, and exposes a list of tools the agent can call.
\nA tool, in MCP terms, is a function the server says it can run, with a JSON schema for inputs. The agent reads the catalog at the start of the session, decides “I should call search_issues with this filter,” and the server runs the call. The result comes back as a message the agent can keep reasoning about.
The win is reach. The model is no longer guessing what is in your Drive. It can search the Drive. It is not pretending to know your current quarterly numbers. It can run the query.
\nHere is the thing nobody puts in the marketing posts. MCP is not free at runtime. Every tool the server exposes goes into the agent’s context as part of the tool catalog, every single turn.
\nPlug in three popular MCP servers (GitHub, a browser, an IDE) and you can burn a hundred and forty thousand tokens before the agent has done anything useful. There are real benchmarks floating around showing the same task taking four to thirty times more tokens through MCP than through a small CLI script the agent shells out to.
\nSkills sidestep this almost completely. The Skill index lives in a hundred-token shelf. The body only loads when the task calls for it. You can have a hundred Skills installed and your context stays trim.
\nThis is not a knock on MCP. It is a planning constraint. When you reach for MCP, you are paying tokens for access. Make sure the access is worth it.
\n![\"Decision](\"https://jubayeramb.com/assets/images/blog/ai-skills-vs-mcp/decision-flow.png\")
In practice, the question to ask yourself is short.
\nDoes the work need fresh, external state or a side effect on a system you do not own?\nThat is MCP. The agent must reach across a wire to do it correctly.
\nIs the work mostly about doing a recurring task the way your team does it?\nThat is a Skill. The know-how is the thing you are missing.
\nBoth? Yes, usually. Most real workflows are MCP for the verbs and Skills for the style.
\nSay you want an agent that ships your weekly customer digest.
\nquery_warehouse(sql) tool with read-only auth.weekly-digest/ folder with SKILL.md, a tone guide, and three good past digests.#growth channel and tag the owner. MCP. A Slack MCP server gives you post_message(channel, body).Notice how the seam falls. MCP shows up wherever the agent crosses a system boundary. Skills show up wherever the agent has to make a judgment call about how good the output should be.
\nWhen I am about to wire something up, I ask one question. Is what I am giving the agent a recipe, or a key?
\nA recipe is a Skill. A key is MCP.
\nIf it is both, the recipe goes in a Skill and the key goes behind an MCP server, and the agent picks them up at the moment it needs each one. That is the whole pattern. Once you see it, every new extension becomes obvious.
\nIf you found this useful, or you disagree with how I drew the line, I would love to hear about it. The fastest way to reach me is through the one of the channels on the contact page, or you can chat about me on the home page (yes, it is voice-enabled now).
", "date_published": "2026-05-12T00:00:00.000Z", "tags": [ "Technical", "AI", "Agents", "Claude", "MCP", "Skills" ] }, { "id": "https://jubayeramb.com/writings/2024-year-in-review-and-next-goals/", "url": "https://jubayeramb.com/writings/2024-year-in-review-and-next-goals/", "title": "2024 Year in Review and Setting Goals for 2025", "summary": "A look back at the successes, lessons, and hurdles of 2024, along with a roadmap for personal and professional growth in 2025.", "content_html": "The year 2024 was a great year, but it didn’t go as planned for me. I had some goals set for the year, but I wasn’t able to accomplish most of them. While I managed to achieve a few of my goals, it obviously wasn’t enough. To be honest, I’m not happy with my progress this year. However, I finally took the time to sit down, reflect on the year, and set goals for the next one. I hope 2025 will be in my favor, and I’ll see some positive progress in my life.
\nReflecting on the key moments of 2024:
\nAn assessment of the goals set for 2024:
\nI couldn’t accomplish most of the goals I set for 2024. Although I tried, I wasn’t able to fix my sleep schedule properly. I also tried to stay consistent with coding, but it wasn’t possible to code every day. The biggest Student Movement in Bangladesh left us mentally exhausted; the internet was shut down for a long time, and I couldn’t work properly.
\nI failed to start any side projects or contribute to OSS. I didn’t even write a single blog post this year; I almost forgot about this blog site! Other goals, like going to the gym, losing weight, and learning to recite the Quran with proper tajweed, were also left unaccomplished.
\nThese unachieved goals will be carried forward to my next year’s checklist. Let’s see if I can turn them into reality this time.
\nSetting ambitious targets for the upcoming year:
\nNo new goals are added. The unaccomplished goals from 2024 will be carried forward to 2025.
\nPriorities include maintaining a consistent sleep schedule, adopting a healthier diet, and incorporating regular exercise. My primary goal is to establish a routine that starts each day after the Fajr prayer, emphasizing consistency.
\nFrom building projects to solving real-world problems, I’ve learned that this is the best way to learn effectively. While I’ve worked on some side projects in the past, I need to be more consistent. I will dedicate at least 15 hours weekly to working on side projects to create something impactful.
\nI’ve contributed a negligible amount to OSS in the past, and I must do more. I’ve listed some projects of interest and will try to contribute to them. I’ll also explore and contribute to other interesting projects I come across.
\nTo build a regular writing habit, I planned and launched this blog site in November 2023. So far, I’ve written three blog posts. My goal is to write at least 5 to 10 blog posts in 2025. I already have some ideas; I just need to work on them incrementally.
\nI’ve gained significant weight in the past few years. I need to lose weight and get in shape. My plan is to visit the gym four days a week to shed some weight and gain muscle. A healthy diet will also be crucial.
\nWhile I know how to recite the Quran, I haven’t mastered proper tajweed. I’ve learned some of the rules but need further guidance from a teacher.
\nI’ve visited several places within the country but have never traveled abroad. I have been planning to visit Nepal or India for a long time. I hope to make it happen this year and perhaps visit other countries if possible.
\nThis year, I explored cloud computing and advanced front-end concepts. I’ve learned and worked with tools like Astro and Svelte. My focus in 2025 will be to delve deeper into backend development and cloud technologies.
\nI’ve made progress in improving my communication skills, such as speaking with people more confidently and making new friends. I’ve also improved my writing skills slightly. However, there’s still room for significant growth, particularly in maintaining a healthy routine and consistent diet and exercise.
\n2024 was a year of mixed emotions. While I experienced some great moments, I also faced challenges. I couldn’t accomplish most of my goals, but I learned a lot from my failures.
\nI’ve carried forward my unachieved goals to 2025, and I hope not to move them forward again! I aim to make 2025 a year of success and positivity.
\nTo follow my journey, stay tuned to this blog or connect with me on Bluesky, X, or GitHub.
\nWishing you all a very happy and prosperous New Year 2025! 🎉
", "date_published": "2024-12-31T00:00:00.000Z", "tags": [ "Life", "Goals", "Career", "Year in review" ] }, { "id": "https://jubayeramb.com/writings/2023-year-in-review-and-next-goals/", "url": "https://jubayeramb.com/writings/2023-year-in-review-and-next-goals/", "title": "2023 Year in Review and Next Goals", "summary": "Reflection on the accomplishments and challenges of the year 2023 and outline the goals for the next year.", "content_html": "The year 2023 posed several challenges for me. I navigated through two job changes within the same year, finally securing a position that brings stability. Amidst juggling work, university, and other commitments, I haven’t been as productive as I would have liked to be. I have been able to accomplish some of my goals. But it seems to have done a bit better than the previous year.
\nReflecting on the key moments of 2023:
\nAn assessment of the goals set for 2023:
\nI’d say I have been able to accomplish the first goal a bit. I have been able to learn a lot of new things and have been able to apply them in my work. I have also tried to improve my communication skills. I have been able to talk to people more and have been able to make some new friends. I have also been able to improve my writing skills a bit. But still, I have a long way to go. I have also been able to build some better personal habits but not all. But I still need to work on my diet, my sleep schedule and regular exercise.
\nSetting ambitious targets for the upcoming year:
\nPriorities include maintaining a consistent sleep schedule, adopting a healthier diet, and incorporating regular exercise. The primary goal is to establish the routine of commencing each day after Fajr prayer, emphasizing consistency.
\nCommitting to daily coding, regardless of project size, to foster consistency, productivity, and continuous learning.
\nWhat I learnt is from building projects to solve real-wold problems and this is the best way to learn something effectively. I have been able to work on some side projects in the past but I need to be more consistent. I will dedicately spend at least 15 hours per week working on side projects to build some cool stuff.
\nI have contributed a negligible amount to OSS in the past. I must need to contribute more. So, I listed some projects of my interest and will try to contribute to them. I will also try to contribute to some other projects that I find interesting.
\nIn order to build a regular writing habit, I planned to build this blog site and got it done in November 2023. So far I have written 3 blog posts. So I have a goal to write at least 5-10 blog posts in the year 2024. I have some ideas for blog posts, I just need to write them down inchmeal.
\nI have gained a good amount of weight in the past few years. I need to lose some weight and get in shape. I have plan to go to a gym 4 days a week to lose some weight and gain some muscle. I also need to maintain a healthy diet.
\nI have been able to recite the Quran but I don’t know how to recite it properly. I need to learn to recite the Quran with proper tajweed. I have been able to learn some of the rules of tajweed but I need to learn more from a teacher.
\nI have been to some places in the country but I have never been to any other country. I want to go on a international trip with my friends. I have been planning to go to India for a long time. I hope I will be able to go there this year and also visit some other countries if possible.
\nI have learnt some cloud stuffs in the past year and also gained some knowledge on advanced frontend concepts. I have learned and work with Astro and Svelte. I want to learn more backend stuff and cloud technologies this year.
\nContinuing the journey to enhance communication, focusing on increased interaction, forging new connections, and refining writing skills through increased social media and blog engagement.
\nThese goals for 2024 are ambitious, and I’m eager to see them materialize. A year-end review post will evaluate the outcomes, aiming for accomplishment and growth. Follow my journey on Twitter and GitHub.
\nHere’s to a promising year ahead! 🤞
\nThanks for reading! 🙏 Happy New Year! 🎉
", "date_published": "2023-12-31T00:00:00.000Z", "tags": [ "Life", "Goals", "Career", "Year in review" ] }, { "id": "https://jubayeramb.com/writings/handle-javascript-pormises-better/", "url": "https://jubayeramb.com/writings/handle-javascript-pormises-better/", "title": "Handle JavaScript Promises in a Better Way", "summary": "Learn different strategies to handle data and errors in JavaScript promises.", "content_html": "If you’re familiar with what promises are, you can skip the next section and jump straight to the approaches. Otherwise, read on!
\nThe word “Promise” itself describes the concept of a commitment, signifying that something will occur in the future. A promise is a value that may not be available immediately but could be in the future.
\nIn JavaScript, a promise is an object that represents the eventual completion or failure of an asynchronous operation and its resulting value. The program’s execution does not halt while waiting for the promise to resolve; instead, it continues to execute the next line of code. The promise will be resolved or rejected at a later point. For example, a promise can be used to fetch data from an API. The promise will be resolved when the data is available, and the program can continue its execution. If an error occurs, the promise will be rejected, and the error can be handled appropriately.
\nThe promise object has three states: Pending, Fulfilled, and Rejected. Consequently, handling the fulfilled and rejected states of the promise is crucial to maintaining the smooth execution of our program.
\nThere are various ways to handle promises in JavaScript. In this article, we’ll explore some of the most common approaches to handling data and errors in promises, discussing the pros and cons of each approach. Let’s get started!
\nSuppose we have a function that returns a promise named sayHi. This function takes a boolean parameter called shouldReject. If shouldReject is true, the function returns a rejected promise; otherwise, it returns a resolved promise.
function sayHi(shouldReject) {\n return new Promise((resolve, reject) => {\n if (shouldReject) {\n reject(\"No, I won't say Hi! 😡\");\n }\n resolve(\"Hi! 😊\");\n });\n}then/catchThe first approach is to use the then/catch method. The then method handles the resolved data (usually), while catch deals with errors in promises. But both resolved data and errors can be handled in a single call using the then method.
sayHi().then(\n (result) => console.log(result),\n (error) => console.log(error)\n);Hi! 😊This approach is concise and convenient for simple scenarios. However, for complex chains with multiple promises, separate then and catch calls can enhance code readability and maintainability. This separation improves code organization, making success and error-handling logic clearer. For instance:
sayHi(true)\n .then((result) => {\n console.log(result);\n })\n .catch((error) => {\n console.log(error);\n });No, I won't say Hi! 😡While the then/catch method is common, it has some drawbacks. For instance, if multiple promises are used, the catch block captures errors from any point in the promise chain, leading to a lack of granularity in error handling.
sayHi(true)\n .then((result) => {\n console.log(result);\n })\n .then(() => {\n console.log(\"This will not be executed\");\n throw new Error(\"This will not be caught by the next catch block\");\n })\n .catch((error) => {\n console.log(error);\n });No, I won't say Hi! 😡This problem can be mitigated by using the catch method on each promise, but this results in more verbose code. Nesting too many then/catch blocks can also lead to “promise hell,” making the code challenging to read and maintain.
sayHi(true)\n .then((result) => {\n console.log(result);\n })\n .catch((error) => {\n console.log(error);\n })\n .then(() => {\n console.log(\"This will be executed\");\n throw new Error(\"This will be caught by the next catch block\");\n })\n .catch((error) => {\n console.log(error.message);\n });No, I won't say Hi! 😡\nThis will be executed\nThis will be caught by the next catch blockWhile then and catch are still widely used, some developers prefer the cleaner and more concise syntax of async/await for handling promises, especially in scenarios where a more synchronous-looking code is desired.
async/awaitThe second approach involves using async/await. The async keyword defines an asynchronous function, while await is used to wait for a promise to resolve. The await keyword can only be used inside an async function and will pause the function’s execution until the promise is resolved. It also catches any errors thrown by the promise, which can be handled using a try/catch block.
async function asyncWrapper() {\n try {\n const result = await sayHi();\n console.log(result);\n } catch (error) {\n console.log(error);\n }\n}\n\nasyncWrapper();Hi! 😊The async/await syntax can be combined with the catch method syntax:
const message = await sayHi(true).catch((error) => {\n console.log(error);\n});\nconsole.log(message);No, I won't say Hi! 😡However, a drawback is that if a rejection occurs, the execution of the next line where message is being used cannot be stopped. Additionally, outside the catch block, there is no access to the error object, making it impossible to check for errors before the execution of the next line.
Despite these limitations, the async/await syntax is more concise and easier to read than the then/catch syntax. It allows for more granular error handling using the try/catch block and includes a finally block to execute code after the promise is resolved or rejected.
async function asyncWrapper() {\n try {\n const result = await sayHi(true);\n console.log(result);\n } catch (error) {\n console.log(error);\n } finally {\n console.log(\"This will be executed regardless of the promise's state\");\n }\n}\n\nasyncWrapper();No, I won't say Hi! 😡\nThis will be executed regardless of the promise's stateWe can also go with kinda callback pattern we’re used to within Node.js. We can get both the data and the error from a single call and can easily handle them.
async function asyncWrapper(promise) {\n try {\n const result = await promise;\n return [result];\n } catch (error) {\n return [, error];\n }\n}\n\nconst [message, error] = await asyncWrapper(sayHi());\nif (error) {\n console.log(error);\n} else {\n console.log(message);\n}Hi! 😊\n\nNote:
\nnullorundefinedcan be returned instead of an empty array, for example,return [result, null]orreturn [result, undefined]. Another approach utilizing thePromise.allSettledmethod will be discussed shortly.
Promise.allSettledConcurrent promises can be handled using the Promise.all and Promise.allSettled methods. Promise.allSettled is used to wait for all promises to be settled. It takes an array of promises as an argument and returns a promise that is resolved when all promises are settled. The promise returned includes an array of objects, each with a status property and\na value when fulfilled or a reason when rejected.
Promise.allSettled([sayHi(true), sayHi(false)]).then((results) => {\n console.log(results);\n});[\n { status: 'rejected', reason: 'No, I won\\'t say Hi! 😡' },\n { status: 'fulfilled', value: 'Hi! 😊' }\n]If promises depend on each other, and immediate rejection is desired if any fails, Promise.all can be used. This method waits for all promises to be resolved and is rejected immediately if any promise is rejected. Errors can be handled using the catch method.
Promise.all([sayHi(false), sayHi(false), Promise.resolve(\"Resolved!! 😁\")])\n .then((results) => {\n console.log(results);\n })\n .catch((error) => {\n console.log(error);\n });[ 'Hi! 😊', 'Hi! 😊', 'Resolved!! 😁' ]Promise.all([sayHi(true), sayHi(false), sayHi(false)])\n .then((results) => {\n console.log(results);\n })\n .catch((error) => {\n console.log(error);\n });No, I won't say Hi! 😡The async/await syntax for handling data and errors in a single call can be achieved using the Promise.allSettled method:
function asyncWrapper(promise) {\n return Promise.allSettled([promise]).then(([{ value, reason }]) => [\n value,\n reason,\n ]);\n}\n\nconst [message, error] = await asyncWrapper(sayHi());\nif (error) {\n console.log(error);\n} else {\n console.log(message);\n}Hi! 😊This approach appears more concise and readable than the async/await syntax!
\n\nOther methods such as
\nPromise.raceandPromise.anyexist to handle concurrent promises. You can read more about these here.
In this article, we explored different ways to handle errors in JavaScript promises, discussing the pros and cons of each approach. I hope you found this article useful. Thanks for reading! 😊
", "date_published": "2023-12-09T00:00:00.000Z", "tags": [ "Technical", "JavaScript", "Promises", "Error handling" ] }, { "id": "https://jubayeramb.com/writings/add-dark-mode-tailwind-css-astro/", "url": "https://jubayeramb.com/writings/add-dark-mode-tailwind-css-astro/", "title": "Tailwind CSS Dark Mode without `dark:` Prefixes", "summary": "Add dark mode to your Astro (or whatever) website using Tailwind CSS without `dark:` prefixes. Also supports `prefers-color-scheme` media query.", "content_html": "A quick guide on how to add dark mode to your Astro (or whatever) website using Tailwind CSS without dark: prefixes. Also supports prefers-color-scheme media query.
\nIn this blog, I will show you how to add dark mode to a Astro website. This will also work with any other framework or even vanilla HTML/CSS/JS.
\nYou can check the complete source code of this blog on GitHub.
Initialize an Astro project by running the following command in your terminal:
\nnpm create astro@latest\n\nYou can use your preferred package manager (
\nyarnorpnpm) instead ofnpmif you want.
You can choose to use the default template or any other template you want. I will be using the default template for this blog. You can go with or without TypeScript.\nOnce your project is initialized and dependencies are installed, you can start the dev server by running:
\nnpm run devThe default dev server will be running on localhost:4321.
You can add Tailwind CSS to your project by running the following command in your terminal:
\nnpx astro add tailwindThe astro add CLI command will automatically install the required dependencies and add the required Tailwind configuration to your project. So you’re now good to go with Tailwind CSS!
\n\nYou can also add Tailwind CSS manually by following the Manual Tailwind CSS installation documentation on Astro doc.
\n
If you chose the empty template, you don’t need to follow this step. But if you chose any other template, you can clean up the project by removing the unnecessary files and code. You can remove the following files and folders:
\nsrc/pages/index.astrosrc/components/Card.astroNow create a new file src/pages/index.astro and add the following code:
---\nimport Layout from \"../layouts/Layout.astro\";\n---\n\n<Layout title=\"Your Site\">\n <main class=\"w-full h-screen flex items-center justify-center\">\n <h1 class=\"font-bold text-2xl\">Welcome To Your Site</h1>\n </main>\n</Layout>Also replace the content of src/layouts/Layout.astro with the following code:
---\ninterface Props {\n title: string;\n}\n\nconst { title } = Astro.props;\n---\n\n<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"description\" content=\"Your site description\" />\n <meta name=\"viewport\" content=\"width=device-width\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/favicon.svg\" />\n <meta name=\"generator\" content={Astro.generator} />\n <title>{title}</title>\n </head>\n <body>\n <slot />\n </body>\n</html>\n\nNotice defining the
\nPropstype helps you getting type support for the component incoming props. If you didn’t choose TypeScript, you can remove thePropsinterface.
Now you can save the files and check the browser (make suer the dev server is running). You should see a page with a title “Welcome To Your Site” placed in the center of the page. Notice that the Tailwind CSS is already working.
\nNow we will add dark mode to our website. We will be using the prefers-color-scheme media query to detect the user’s system preference by default and then we will add a toggle button to switch between light and dark mode.\nTo skip the dark: prefixes, we will take advantage of the Tailwind color palette customization and CSS variables. First we will declare two color variable in our ./src/styles/global.css file and define the colors in the tailwind.config.js file and then we will use the bg-[color] and text-[color] classes to apply the colors to the elements.
Create a global.css file in the ./src/styles/ directory and add the following code:
@tailwind base;\n@tailwind components;\n@tailwind utilities;\n\n@layer base {\n :root,\n :root[data-theme=\"light\"] {\n --color-bgColor: 221 230 237;\n --color-contentColor: 34 40 49;\n --sun-fill: rgb(0, 0, 0);\n --moon-fill: transparent;\n }\n @media (prefers-color-scheme: dark) {\n :root {\n --color-bgColor: 34 40 49;\n --color-contentColor: 238 238 238;\n --sun-fill: transparent;\n --moon-fill: rgb(255, 255, 255);\n }\n }\n :root[data-theme=\"dark\"] {\n --color-bgColor: 34 40 49;\n --color-contentColor: 238 238 238;\n --sun-fill: transparent;\n --moon-fill: rgb(255, 255, 255);\n }\n}\n\nHere we are using the
\n--color-bgColorand--color-contentColorvariables to define the background and content colors. We are also using the--sun-filland--moon-fillvariables to define the fill color of the sun and moon icons. We will use these variables in thetailwind.config.jsfile to define the colors.
\n\nNotice that we are using the
\n:root[data-theme=\"light\"]and:root[data-theme=\"dark\"]selectors to define the colors. We will use thedata-themeattribute to switch between light and dark mode. We’re also using theprefers-color-schememedia query to detect the user’s system preference by default.
Now open the tailwind.config.cjs file and add the following code:
/** @type {import('tailwindcss').Config} */\nexport default {\n content: [\"./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}\"],\n theme: {\n extend: {\n colors: {\n bgColor: \"rgb(var(--color-bgColor) / <alpha-value>)\",\n contentColor: \"rgb(var(--color-contentColor) / <alpha-value>)\",\n },\n },\n },\n plugins: [],\n};Usually you will be using the Layout.astro component to wrap your other pages. So import the global.css file in the ./src/layouts/Layout.astro file frontmatter (otherwise add it to the index.astro file, if you’re not using the Layout.astro component) like this:
---\ninterface Props {\n title: string;\n}\n\nconst { title } = Astro.props;\n\nimport \"../styles/global.css\";\n---Now all you need to do is to use the bg-bgColor and text-contentColor classes to apply the colors to the elements. For example, you can replace the <body> element of the ./src/layouts/Layout.astro wrapper file with the following code:
<body class=\"text-contentColor bg-bgColor\">\n <slot />\n </body>Wohoo! You have successfully added dark mode to your website! 🔥
\nNow your site will respond to the user’s system preference. Toggle your System theme to see the effect on your site. But we still need to add a toggle button for the user to switch between light and dark mode manually.
Now we will add a toggle button to switch between light and dark mode manually. We will use the data-theme attribute to switch between light and dark mode. We will also use the --sun-fill and --moon-fill variables to define the fill color of the sun and moon icons. We will use the bg-bgColor and text-contentColor classes to apply the colors to the elements.
Create a ThemeIcon.astro file into the ./src/components/ directory and add the following code:
---\n---\n\n<button\n id=\"themeToggle\"\n class=\"border-0 bg-none hover:bg-slate-300/20 p-2 rounded-full\"\n aria-label=\"Toggle dark mode\"\n>\n <svg width=\"20px\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 24\">\n <!-- sun -->\n <path\n class=\"fill-[--sun-fill]\"\n fill-rule=\"evenodd\"\n d=\"M12 17.5a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11zm0 1.5a7 7 0 1 0 0-14 7 7 0 0 0 0 14zm12-7a.8.8 0 0 1-.8.8h-2.4a.8.8 0 0 1 0-1.6h2.4a.8.8 0 0 1 .8.8zM4 12a.8.8 0 0 1-.8.8H.8a.8.8 0 0 1 0-1.6h2.5a.8.8 0 0 1 .8.8zm16.5-8.5a.8.8 0 0 1 0 1l-1.8 1.8a.8.8 0 0 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM6.3 17.7a.8.8 0 0 1 0 1l-1.7 1.8a.8.8 0 1 1-1-1l1.7-1.8a.8.8 0 0 1 1 0zM12 0a.8.8 0 0 1 .8.8v2.5a.8.8 0 0 1-1.6 0V.8A.8.8 0 0 1 12 0zm0 20a.8.8 0 0 1 .8.8v2.4a.8.8 0 0 1-1.6 0v-2.4a.8.8 0 0 1 .8-.8zM3.5 3.5a.8.8 0 0 1 1 0l1.8 1.8a.8.8 0 1 1-1 1L3.5 4.6a.8.8 0 0 1 0-1zm14.2 14.2a.8.8 0 0 1 1 0l1.8 1.7a.8.8 0 0 1-1 1l-1.8-1.7a.8.8 0 0 1 0-1z\"\n ></path>\n <!-- moon -->\n <path\n class=\"fill-[--moon-fill]\"\n fill-rule=\"evenodd\"\n d=\"M16.5 6A10.5 10.5 0 0 1 4.7 16.4 8.5 8.5 0 1 0 16.4 4.7l.1 1.3zm-1.7-2a9 9 0 0 1 .2 2 9 9 0 0 1-11 8.8 9.4 9.4 0 0 1-.8-.3c-.4 0-.8.3-.7.7a10 10 0 0 0 .3.8 10 10 0 0 0 9.2 6 10 10 0 0 0 4-19.2 9.7 9.7 0 0 0-.9-.3c-.3-.1-.7.3-.6.7a9 9 0 0 1 .3.8z\"\n ></path>\n </svg>\n</button>\n\n<script is:inline>\nconst attributeName = \"data-theme\";\nconst theme = (() => {\n if (typeof localStorage !== \"undefined\") {\n return localStorage.getItem(\"theme\") || null;\n }\n})();\n\nif (!!theme) {\n document.documentElement.setAttribute(attributeName, theme);\n}\n\nconst handleToggleClick = () => {\n const element = document.documentElement;\n const themeAtt = element.attributes.getNamedItem(attributeName)?.value;\n // no att. and system is dark\n if (\n !themeAtt &&\n window.matchMedia(\"(prefers-color-scheme: dark)\").matches\n ) {\n element.setAttribute(attributeName, \"light\");\n window.localStorage.setItem(\"theme\", \"light\");\n return;\n } else if (!themeAtt) {\n // no att. and system is light\n element.setAttribute(attributeName, \"dark\");\n window.localStorage.setItem(\"theme\", \"dark\");\n return;\n } else if (themeAtt === \"light\") {\n // light att.\n element.setAttribute(attributeName, \"dark\");\n window.localStorage.setItem(\"theme\", \"dark\");\n return;\n } else if (themeAtt === \"dark\") {\n // dark att.\n element.setAttribute(attributeName, \"light\");\n window.localStorage.setItem(\"theme\", \"light\");\n return;\n }\n};\n\ndocument\n .getElementById(\"themeToggle\")\n .addEventListener(\"click\", handleToggleClick);\n</script>\n\nHere we are using a SVG icon to toggle between light and dark mode (you can update the icon as of your choice). We are also using the
\nlocalStorageAPI to store the user’s preference. We are using thedata-themeattribute to switch between light and dark mode. We are also using the--sun-filland--moon-fillvariables to define the fill color of the sun and moon icons. We are using thebg-bgColorandtext-contentColorclasses to apply the colors to the elements.
Now you can import the ThemeIcon.astro component in the ./src/layouts/Layout.astro file and place it anywhere you want. For example, you can place it in the <body> element of the ./src/layouts/Layout.astro wrapper file like this:
<body class=\"text-contentColor bg-bgColor\">\n <div class=\"flex justify-center\">\n <ThemeIcon />\n </div>\n <slot />\n </body>\n\nYou can create a Nav component and place the
\nThemeIcon.astrocomponent in the Nav component.
Congratulations! You did it! You Added a dynamic dark theme to your site! 🎉
\nYou don’t even need to add the dark: prefixes to the every Tailwind CSS classes where you need to add dark theme variant. You can use the bgColor and contentColor color variant to apply the colors to the elements and the site will automatically adjust the theme color.
\nNow you can save the files and check the browser (make suer the dev server is running). You should see a toggle button in the center of the page. Click on the button to switch between light and dark mode.
Thanks for reading! 🙏