[{"content":"Zafkiel - Building a Native Anilist Client with Svelte, Tauri, and Rust Over the past few months, I’ve been working on a project very close to my heart: Zafkiel, a desktop anilist client built with Svelte, Tauri, and Rust. The goal has always been simple yet ambitious - to create a fast, lightweight, and customizable app for browsing and tracking anime, one that feels native, modern, and open to the community.\nZafkiel is at a stage where I can reflect on why I started it, the choices I made, and the direction it’s heading.\nWhy Zafkiel? Existing anime tracking platforms and apps are powerful, but I often found them lacking in either performance, design flexibility, or openness. Many desktop clients are simply Electron wrappers, which work but can feel heavy and slow.\nI was also inspired by the creative minds behind the creation of Dantotsu, an Android application for watching anime, reading manga and light novels with multi-sourcing, extensions for more features, etc. Sadly it was taken down recently by DMCA but many of its forks are still there. And I also came across a cross-platform Dantotsu (Dartotsu) but it was still in much development and it used flutter so the app was really slow and bad in performance.\nThat is why I decided to create my own client with the following features in mind:\nLightweight - fast startup and minimal resource usage. Beautiful - a modern design with multiple themes, fully customizable. Community Friendly - easy to modify, extend, and contribute to. Cross-platform - consistent performance on Linux, Windows, and macOS. Multi-Sourced - should have multiple sources and switching between them (I\u0026rsquo;ll expand on this further later). Extensible - should provide features like extensions which can be installed or uninstalled. That vision became Zafkiel - named after Kurumi Tokisaki’s angel in Date A Live (My favorite character btw from this Series), symbolizing control over time. It felt like the right metaphor for an app meant to give users control over their anime experience.\nChoosing the Stack Frontend: Svelte + Shadcn \u0026amp; Tweakcn I chose Svelte for the frontend because of its speed, simplicity, reactivity, and developer experience. Unlike heavier frameworks, Svelte compiles away much of the overhead, leaving a lean and efficient app. This makes UI development faster and more intuitive, letting me focus on design and user experience.\nTo bring flexibility to the design, I integrated Shadcn \u0026amp; Tweakcn (Shadcn Themes), using which I enabled multi-theme functionality and consistent design. With it, users can seamlessly switch between themes, creating a personalized experience without bloated complexity in the codebase.\nBackend: Rust + Tauri For the backend, I went with Rust. Rust not only ensures safety and performance, but it also makes Zafkiel highly modular. The backend is structured in a way that keeps each part of the logic isolated, easy to read, and easy to extend.\nThis modularity has another major advantage: contributing is accessible to others. Developers can dive into specific parts of the codebase without needing to understand everything at once. Whether it’s improving caching, adding API integrations, or refining error handling, contributions are straightforward.\nWith Tauri acting as the bridge between the frontend and backend, the result is a native cross-platform application that consumes only a fraction of the resources of an Electron-based app, while maintaining strong security guarantees.\nMulti Sourced Feature This is yet to be implemented, I am planning to implement this along with the extensions. Multi-Sourced refers to the ability to choose between the providers of Anime/Manga. You must\u0026rsquo;ve heard of websites for watching anime like hianime, aniwatch, etc and even torrents too. I want to provide the user the ability to choose which source to watch from because of various factors:\nIt is not necessary for the site I am using to be available in the user\u0026rsquo;s region. Some sites have reduced quality but lower size while other offers higher sizes but high quality. There\u0026rsquo;s also the thing called hard subtitles (embedded in video) and soft subtitles (embedded in the file like mkv but not in the video). Extensions This multi-sourcing feature is planned to be enabled using these so called extensions. I want to provide each site as optional extensions as in Dantotsu. But extensions won\u0026rsquo;t stop there, they can provide more features such as torrenting, downloading, cli integrations and much more. I\u0026rsquo;ll be keeping the repository separate though because of DMCA. More and more sites can be added and easily integrated as extensions as all of them will follow the same structure and responses.\nCurrent State At the moment, Zafkiel is still in basic development.\nSome core features are working, but it’s far from stable or feature-complete.\nRight now, I’m focusing on:\nBuilding out the core UI with Svelte and Tailwind. Structuring the Rust backend for modularity and clean APIs (need to rework on this). Refining how I use TanStack Query for AniList API calls. It’s not something I can use daily yet, but the foundation is being laid carefully.\nMy approach is slow but steady - making sure I get the architecture right before layering on more features.\nLooking Ahead The roadmap for Zafkiel includes:\nPolished UI/UX with multiple themes and smooth transitions (Yes, it needs more work). Cross-platform support to ensure consistency on Linux, Windows, and macOS (Even android support is coming soon). Multi-source streaming and reading support using extensions and also torrenting support. Extensibility so contributors can add new features or integrations easily. More components for streaming anime, reading manga, reading light novels, etc. Documentation site (Yes, this is very important for contributors and even for users) I’m not rushing this project - the goal is to build it right, not just fast.\nConclusion Zafkiel is still a work in progress and there is a long way to go before it goes into production, but it represents my vision of what an anilist client should be: lightweight, customizable, and faster.\nWith Svelte powering the UI, Tweakcn providing theming flexibility, TanStack Query handling data-fetching experiments, and a modular Rust backend ensuring performance and stability, Zafkiel is slowly but surely becoming the client I’ve always wanted.\nIt’s not production-ready yet, but the journey has only just begun - and I’m excited to see where it goes from here.\n","date":"2025-08-24T00:17:05+05:30","image":"https://thunder-blaze.github.io/Blogs/p/zafkiel/cover_hu_17a16624467545e3.jpg","permalink":"https://thunder-blaze.github.io/Blogs/p/zafkiel/","title":"Zafkiel - An Anilist Client"},{"content":"Getting Started with Svelte 5: Why It Feels Different from React For most developers, the path into modern frontend development goes something like this: you learn a little HTML and CSS, sprinkle in some JavaScript, then get told that “if you want to be taken seriously, you need React.”\nReact has become the default. Its component-based structure, hook system, and virtual DOM reconciliation process have shaped the way millions of developers think about web interfaces. But that dominance also means many developers assume React’s structure is simply how frontend frameworks work.\nSvelte - especially in its latest version, Svelte 5 - politely disagrees. Its structure, reactivity model, and approach to state management are designed around a compiler-first philosophy rather than a runtime-first philosophy. To really appreciate why that matters, let’s unpack what these frameworks are actually made of.\nThe Structure of a React Application In React, an application is a tree of components, each represented by a function (or class, historically). Components return a description of UI in JSX, which React turns into a virtual DOM tree. Whenever state changes, React re-renders the component, compares the new virtual DOM with the old one, and applies minimal updates to the real DOM.\nThis means React’s structure has three major layers:\nComponent Functions - the building blocks, each describing what the UI should look like. Hooks and State Management - useState, useReducer, useContext, and a host of third-party libraries that hold and manage application state. Runtime Reconciliation - the virtual DOM diffing algorithm that determines how to update the actual DOM based on state changes. The advantage of this structure is familiarity and flexibility: every piece is declarative, and React handles the mechanics of change. The disadvantage is weight. Every app ships React itself plus the runtime that makes reconciliation work, even if you are only building a simple counter.\nThe Structure of a Svelte 5 Application Svelte flips the model. Instead of carrying a runtime into the browser, Svelte compiles components into plain JavaScript at build time. This alters the structure of an application in a fundamental way:\nComponents are still the unit of composition, but instead of returning virtual DOM, they are compiled into direct DOM operations. When you declare \u0026lt;button\u0026gt;{count}\u0026lt;/button\u0026gt;, the compiler generates the exact DOM update instructions needed to increment the text when count changes. Runes replace hooks. A rune like $state(0) declares state. A rune like $derived(expr) computes a value from other state. $effect(() =\u0026gt; { ... }) defines what React would call a “side effect” - code that runs in response to data changes but doesn’t itself produce data for the UI. Importantly, because runes are compile-time hints, the compiler wires dependencies automatically. Reactivity is not a runtime guessing game. In React, you declare dependencies manually in useEffect or useMemo. Forgetting or mis-declaring them is a common source of bugs. In Svelte, reactivity is fine-grained and explicit: if count is used inside $derived or $effect, the compiler knows exactly when to update. This structure means a Svelte 5 application has no virtual DOM, no reconciliation layer, and significantly less runtime code. What ships to the browser is essentially optimized vanilla JavaScript customized for your component tree.\nWhat is Reactivity ? The term “reactivity” describes how a framework updates the UI when data changes.\nIn React, reactivity is powered by state and re-renders. You call setState, React re-runs the component, then the Virtual DOM decides what needs updating. This works well, but every change re-executes the component function, even if only one value changed.\nIn Svelte, reactivity is built into the compiler. Assigning to a variable (count++) directly updates only the DOM nodes that depend on it. No Virtual DOM, no component re-runs - just precise updates.\nThe difference is subtle but important: React reactivity is runtime-driven, while Svelte reactivity is compile-time optimized.\nWhat Side Effects Actually Mean The phrase “side effect” gets thrown around casually in frontend development, but let’s pin it down. A side effect is any action your code performs that reaches outside of its own scope and alters something external. Examples include logging to the console, updating localStorage, starting an interval timer, or making a network request.\nIn React, side effects live in useEffect. You declare dependencies, React runs the effect when they change, and you may return a cleanup function. In practice, this can be error-prone: forgetting dependencies leads to stale values, while adding too many creates unnecessary re-runs.\nIn Svelte 5, side effects live inside $effect. The difference is subtle but important: the compiler analyzes your effect and automatically tracks which values it depends on. You do not manually declare dependencies, so there is less room for mistakes. Moreover, because $effect is reserved only for side effects, not computations, it reduces the temptation to use it as a catch-all. Computed values belong in $derived, keeping data transformations pure and effects truly external.\nState and Data Across the App Both frameworks need a way to manage state across components. In React, this typically means useContext or an external state library like Redux, Zustand, etc. In Svelte, the answer is stores.\nA store is simply a reactive object with a subscribe method. Svelte provides a small set out of the box:\nwritable: holds a value that can be updated. readable: holds a value but can only be updated internally (useful for derived or system state). derived: computes a new store based on others. The compiler adds sugar: prefixing a store variable with $ inside a component automatically subscribes and unsubscribes it. That’s why you can write {$count} inside a template and get the live value.\nThe line between runes and stores is clear: runes are for local component state, stores are for shared global or cross-component state.\nThe Role of Data Loading One area where SvelteKit - the application framework around Svelte - diverges sharply from React’s ecosystem is data loading. In React, data loading conventions vary by framework. Next.js, for example, uses server components, route handlers, and getServerSideProps or getStaticProps (depending on the version you’re working with). It’s powerful but can feel fragmented.\nSvelteKit simplifies this with a single concept: the load function. Every route or layout can export a load function, which fetches or computes data before rendering. Crucially, there are two flavors:\n+page.ts / +layout.ts: runs on both client and server, perfect for public data or anything that must survive client-side navigation. +page.server.ts / +layout.server.ts: runs only on the server, ideal for accessing databases, filesystems, or secret environment variables. This clear separation removes guesswork. When you read a SvelteKit codebase, you know exactly what runs on the server and what may run in the browser.\nA Practical Comparison Let’s compare two mental models.\nReact’s Model\nStructure: components return virtual DOM, React runtime diffs and updates real DOM. State: hooks manage local state; external libraries manage global state. Side effects: useEffect runs external code, with manually declared dependencies. Data loading: depends on framework, with patterns that vary between Next.js, Remix, and others. Svelte 5’s Model\nStructure: components compile into direct DOM operations; no runtime reconciliation layer. State: runes ($state, $derived, $effect) handle local reactive state and side effects. Shared state: stores (writable, readable, derived) provide reactive values across components. Data loading: SvelteKit’s load functions, explicit and scoped to routes. This difference in structure is not just academic. It changes the weight of the code you ship, the likelihood of bugs from dependency mismatches, and the mental overhead required to understand what your app is doing at any given time.\nWhy This Matters Choosing between React and Svelte is not about loyalty, it’s about trade-offs. React gives you the safety of an enormous ecosystem, countless libraries, and a familiar structure used by millions of developers. Svelte 5 offers a compiler-driven model that produces smaller bundles, faster updates, and code that directly mirrors your mental model of reactivity.\nIf you want predictability, React is the well-traveled highway. If you want efficiency, simplicity, and a more expressive syntax, Svelte is the smaller, faster road that feels almost suspiciously smooth.\nThe real takeaway is not that one will “kill” the other - React’s ecosystem is too large for that. The takeaway is that Svelte offers a different structure, one where reactivity is explicit, side effects are cleanly separated, and the compiler takes on more of the work so the browser can do less.\n","date":"2025-08-24T00:16:00+05:30","image":"https://thunder-blaze.github.io/Blogs/p/svelte-5-vs-react/cover_hu_9d7010f55250e999.jpg","permalink":"https://thunder-blaze.github.io/Blogs/p/svelte-5-vs-react/","title":"Getting Started with Svelte 5 (and Why You Might Not Need React)"},{"content":"Algorithms \u0026amp; Properties Possible sum of K distinct integers between 1 and N let the sum be S,\nwe can form all numbers till $\\dfrac{N(N+1)}{2}$\nbut if we are to use fixed K digits, the Range will be limited to $(K)(N)+(K-1)$\nSliding Window Use deque or vector when you also need to access every element while sliding Sliding Window for Maximum sum of K continous elements of vector vec 1 2 3 4 5 6 7 8 9 10 11 12 13 vector\u0026lt;int\u0026gt; vec(n); // Take Input queue\u0026lt;int\u0026gt; sm; int sum=0; for (int i=0; i\u0026lt;n; i++){ if (sm.size()\u0026gt;k){ sum-=sm.front(); sm.pop(); } sm.push(vec[i]); sum+=vec[i]; ans=max(sum,ans); } Photo by Pawel Czerwinski on Unsplash\n","date":"2025-02-01T00:00:00Z","image":"https://thunder-blaze.github.io/Blogs/p/algorithms/cover_hu_e95a4276bf860a84.jpg","permalink":"https://thunder-blaze.github.io/Blogs/p/algorithms/","title":"Algorithms"},{"content":"This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.\nHeadings The following HTML \u0026lt;h1\u0026gt;—\u0026lt;h6\u0026gt; elements represent six levels of section headings. \u0026lt;h1\u0026gt; is the highest section level while \u0026lt;h6\u0026gt; is the lowest.\nH1 H2 H3 H4 H5 H6 Paragraph Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.\nItatur? Quiatae cullecum rem ent aut odis in re eossequodi nonsequ idebis ne sapicia is sinveli squiatum, core et que aut hariosam ex eat.\nBlockquotes The blockquote element represents content that is quoted from another source, optionally with a citation which must be within a footer or cite element, and optionally with in-line changes such as annotations and abbreviations.\nBlockquote without attribution Tiam, ad mint andaepu dandae nostion secatur sequo quae. Note that you can use Markdown syntax within a blockquote.\nBlockquote with attribution Don\u0026rsquo;t communicate by sharing memory, share memory by communicating.\n— Rob Pike1\nTables Tables aren\u0026rsquo;t part of the core Markdown spec, but Hugo supports supports them out-of-the-box.\nName Age Bob 27 Alice 23 Inline Markdown within tables Italics Bold Code italics bold code A B C D E F Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ultricies, sapien non euismod aliquam, dui ligula tincidunt odio, at accumsan nulla sapien eget ex. Proin eleifend dictum ipsum, non euismod ipsum pulvinar et. Vivamus sollicitudin, quam in pulvinar aliquam, metus elit pretium purus Proin sit amet velit nec enim imperdiet vehicula. Ut bibendum vestibulum quam, eu egestas turpis gravida nec Sed scelerisque nec turpis vel viverra. Vivamus vitae pretium sapien Code Blocks Code block with backticks 1 2 3 4 5 6 7 8 9 10 \u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026#34;en\u0026#34;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026#34;utf-8\u0026#34;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Code block indented with four spaces \u0026lt;!doctype html\u0026gt; \u0026lt;html lang=\u0026quot;en\u0026quot;\u0026gt; \u0026lt;head\u0026gt; \u0026lt;meta charset=\u0026quot;utf-8\u0026quot;\u0026gt; \u0026lt;title\u0026gt;Example HTML5 Document\u0026lt;/title\u0026gt; \u0026lt;/head\u0026gt; \u0026lt;body\u0026gt; \u0026lt;p\u0026gt;Test\u0026lt;/p\u0026gt; \u0026lt;/body\u0026gt; \u0026lt;/html\u0026gt; Diff code block 1 2 3 4 5 [dependencies.bevy] git = \u0026#34;https://github.com/bevyengine/bevy\u0026#34; rev = \u0026#34;11f52b8c72fc3a568e8bb4a4cd1f3eb025ac2e13\u0026#34; - features = [\u0026#34;dynamic\u0026#34;] + features = [\u0026#34;jpeg\u0026#34;, \u0026#34;dynamic\u0026#34;] One line code block 1 \u0026lt;p\u0026gt;A paragraph\u0026lt;/p\u0026gt; List Types Ordered List First item Second item Third item Unordered List List item Another item And another item Nested list Fruit Apple Orange Banana Dairy Milk Cheese Other Elements — abbr, sub, sup, kbd, mark GIF is a bitmap image format.\nH2O\nXn + Yn = Zn\nPress CTRL + ALT + Delete to end the session.\nMost salamanders are nocturnal, and hunt for insects, worms, and other small creatures.\nThe above quote is excerpted from Rob Pike\u0026rsquo;s talk during Gopherfest, November 18, 2015.\u0026#160;\u0026#x21a9;\u0026#xfe0e;\n","date":"2023-09-07T00:00:00Z","permalink":"https://thunder-blaze.github.io/Blogs/p/markdown-syntax-guide/","title":"Markdown Syntax Guide"},{"content":"For more details, check out the documentation.\nBilibili video Tencent video YouTube video Generic video file Your browser doesn't support HTML5 video. Here is a link to the video instead. Gist GitLab Quote Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n― A famous person, The book they wrote Photo by Codioful on Unsplash\n","date":"2023-08-25T00:00:00Z","image":"https://thunder-blaze.github.io/Blogs/p/shortcodes/cover_hu_5667347daefb4230.jpg","permalink":"https://thunder-blaze.github.io/Blogs/p/shortcodes/","title":"Shortcodes"},{"content":"Stack has built-in support for math typesetting using KaTeX.\nIt\u0026rsquo;s not enabled by default side-wide, but you can enable it for individual posts by adding math: true to the front matter. Or you can enable it side-wide by adding math = true to the params.article section in config.toml.\nInline math This is an inline mathematical expression: $\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…$\n1 $\\varphi = \\dfrac{1+\\sqrt5}{2}= 1.6180339887…$ Block math $$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$ 1 2 3 $$ \\varphi = 1+\\frac{1} {1+\\frac{1} {1+\\frac{1} {1+\\cdots} } } $$ $$ f(x) = \\int_{-\\infty}^\\infty\\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi $$ 1 2 3 $$ f(x) = \\int_{-\\infty}^\\infty\\hat f(\\xi)\\,e^{2 \\pi i \\xi x}\\,d\\xi $$ ","date":"2023-08-24T00:00:00Z","permalink":"https://thunder-blaze.github.io/Blogs/p/math-typesetting/","title":"Math Typesetting"},{"content":"Hugo theme Stack supports the creation of interactive image galleries using Markdown. It\u0026rsquo;s powered by PhotoSwipe and its syntax was inspired by Typlog.\nTo use this feature, the image must be in the same directory as the Markdown file, as it uses Hugo\u0026rsquo;s page bundle feature to read the dimensions of the image. External images are not supported.\nSyntax 1 ![Image 1](1.jpg) ![Image 2](2.jpg) Result Photo by mymind and Luke Chesser on Unsplash\n","date":"2023-02-01T00:00:00Z","image":"https://thunder-blaze.github.io/Blogs/p/image-gallery/2_hu_3e58a979f20e4e46.jpg","permalink":"https://thunder-blaze.github.io/Blogs/p/image-gallery/","title":"Image gallery"}]