Umar

Umar

@syedumar.bsky.social

13 followers42 following26 posts

Umar
@syedumar.bsky.social

svelte-lexical 0.6.5: Shiki code highlighting, and Qalam — a notes app built with it Version 0.6.5 of svelte-lexical is out. Two things are worth talking about: the editor now has a Shiki-based code highlighting plugin alongside the existing Prism one, and there's a new demo app — Qalam, a…

umaranis.comsvelte-lexical 0.6.5: Shiki code highlighting, and Qalam — a notes app built with itVersion 0.6.5 of svelte-lexical is out. Two things are worth talking about: the editor now has a Shiki-based code highlighting plugin alongside the existing Prism one, and there's a new demo app — Qalam, a distraction-free note-taking app that runs both as a desktop app and in the browser. Qalam: a real app, not a kitchen-sink demo The playground that ships with svelte-lexical has always been useful for showing what the editor…
Umar
@syedumar.bsky.social

Reading Excel Files in Rust: calamine vs umya-spreadsheet If you need to read .xlsx files in Rust, two libraries dominate the options: calamine and umya-spreadsheet. I benchmarked both against a ~10 MB workbook with 100,000 rows across multiple sheets. Here are the findings. The two libraries

umaranis.comReading Excel Files in Rust: calamine vs umya-spreadsheetIf you need to read .xlsx files in Rust, two libraries dominate the options: calamine and umya-spreadsheet. I benchmarked both against a ~10 MB workbook with 100,000 rows across multiple sheets. Here are the findings. The two libraries
Umar
@syedumar.bsky.social

Why Tiling Window Managers Don’t Quite Work on macOS? Over the years, I’ve tried several tiling window managers on macOS, including yabai (28.3k stars) and Aerospace (19.2k stars). First, I want to acknowledge the incredible work their developers have done. These tools are ambitious, technically…

umaranis.comWhy Tiling Window Managers Don’t Quite Work on macOS?Over the years, I’ve tried several tiling window managers on macOS, including yabai (28.3k stars) and Aerospace (19.2k stars). First, I want to acknowledge the incredible work their developers have done. These tools are ambitious, technically impressive, and have improved significantly over time. I’ve given them multiple serious attempts, often returning when a new feature was released or when stability improved.
Umar
@syedumar.bsky.social

Evaluating PDF Readers: What Works, What Doesn’t When it comes to reading and working with PDFs, most applications cover the basics—open a file, read it, search through it, maybe highlight a few lines. But if you work with long documents, technical papers, or research material, you quickly realise…

umaranis.comEvaluating PDF Readers: What Works, What Doesn’tWhen it comes to reading and working with PDFs, most applications cover the basics—open a file, read it, search through it, maybe highlight a few lines. But if you work with long documents, technical papers, or research material, you quickly realise the built-in basic features ain’t enough. For me, a good PDF reader needs to do three things well: Dark Mode Support…
Umar
@syedumar.bsky.social

Foot vs Ghostty – Memory Consumption I use Ghostty as my primary terminal emulator. I’ve never had any issues with it—it's fast and displays icons and images flawlessly. While Alacritty, Kitty, and WezTerm have all pushed terminal emulation forward, each has a few weak spots that Ghostty addresses…

umaranis.comFoot vs Ghostty – Memory ConsumptionI use Ghostty as my primary terminal emulator. I’ve never had any issues with it—it's fast and displays icons and images flawlessly. While Alacritty, Kitty, and WezTerm have all pushed terminal emulation forward, each has a few weak spots that Ghostty addresses particularly well. Another popular terminal emulator in the Wayland (Linux) world is foot. Its tagline is: …
Umar
@syedumar.bsky.social

BosGame M4Neo Mini PC – Thermal Management I recently purchased the BosGame M4Neo Mini PC, and so far it has been an impressive little machine. Its compact design fits perfectly on my limited desk space, yet it still delivers strong performance. The AMD Ryzen 7 processor handles multitasking…

umaranis.comBosGame M4Neo Mini PC – Thermal ManagementI recently purchased the BosGame M4Neo Mini PC, and so far it has been an impressive little machine. Its compact design fits perfectly on my limited desk space, yet it still delivers strong performance. The AMD Ryzen 7 processor handles multitasking smoothly and powers through everyday applications without breaking a sweat. There are a couple of areas I’ve been concerned about:
Umar
@syedumar.bsky.social

Svelte State: Deep Reactivity, Proxies, and Snapshots One of the most powerful features in Svelte 5's new reactivity system is deep reactivity. At first glance, it feels magical: wrap an object in state(), and suddenly every nested property, array, and child object becomes reactive. But under the…

umaranis.comSvelte State: Deep Reactivity, Proxies, and SnapshotsOne of the most powerful features in Svelte 5's new reactivity system is deep reactivity. At first glance, it feels magical: wrap an object in state(), and suddenly every nested property, array, and child object becomes reactive. But under the hood, how does Svelte achieve this? And what happens to the original object when you start mutating the state?
Umar
@syedumar.bsky.social

Comparing IDEs – Part 5 -Zed: The Promising Newcomer This is fifth post of the 5 part series: VScode - leader of the pack NeoVim - modal editing experience VSCode with Vim extension - the allure of vim bindings in VSCode WebStorm - the premium editing experience Zed - the newcomer A Fresh Approach…

umaranis.comComparing IDEs – Part 5 -Zed: The Promising NewcomerThis is fifth post of the 5 part series: VScode - leader of the pack NeoVim - modal editing experience VSCode with Vim extension - the allure of vim bindings in VSCode WebStorm - the premium editing experience Zed - the newcomer A Fresh Approach to Code Editing The final IDE I want to explore is Zed—an exciting new open-source editor developed in Rust.
Umar
@syedumar.bsky.social

Comparing IDEs – Part 4 -WebStorm: Polish, Power, and Limitations A Premium IDE Experience WebStorm represents the premium end of the IDE spectrum—a polished, feature-rich environment specifically designed for web development. When working with TypeScript, CSS, and related technologies, WebStorm…

umaranis.comComparing IDEs – Part 4 -WebStorm: Polish, Power, and LimitationsA Premium IDE Experience WebStorm represents the premium end of the IDE spectrum—a polished, feature-rich environment specifically designed for web development. When working with TypeScript, CSS, and related technologies, WebStorm offers a level of maturity that immediately stands out. The IDE excels at providing built-in validation across multiple technologies. For example, CSS errors are flagged automatically without requiring additional extensions. Its IntelliSense capabilities are faster and more comprehensive than alternatives, and the entire user interface feels thoughtfully designed.
Umar
@syedumar.bsky.social

Comparing Modern IDEs – Part 3: VSCode with Vim extension The Allure of Vim Keybindings in VS Code After discussing Neovim as a standalone editor, let's examine another approach: using Vim-style editing within VS Code through extensions. For those who appreciate Vim's keyboard-centric editing but…

umaranis.comComparing Modern IDEs – Part 3: VSCode with Vim extensionThe Allure of Vim Keybindings in VS Code After discussing Neovim as a standalone editor, let's examine another approach: using Vim-style editing within VS Code through extensions. For those who appreciate Vim's keyboard-centric editing but want to retain VS Code's ecosystem, two main options exist: VS Code Vim and the VSCode Neovim extension. While these extensions seem to offer the best of both worlds, my experience suggests they create more problems than they solve.
Umar
@syedumar.bsky.social

Comparing Modern IDEs: A Developers Guide (Part 2: NeoVim) Introduction to Modal Editing At the opposite end of the spectrum from our previous topic is Neovim, a text editor that emphasises keyboard-focused interaction rather than mouse-driven operations. Neovim features an extraordinary approach…

umaranis.comComparing Modern IDEs: A Developers Guide (Part 2: NeoVim)Introduction to Modal Editing At the opposite end of the spectrum from our previous topic is Neovim, a text editor that emphasises keyboard-focused interaction rather than mouse-driven operations. Neovim features an extraordinary approach to text navigation and manipulation through keyboard shortcuts. For example, you can press vi{ to select everything inside curly brackets. These thoughtfully designed shortcuts make text editing not just efficient but genuinely enjoyable.
Umar
@syedumar.bsky.social

Comparing Modern IDEs: A Developer’s Guide (Part 1 – VS Code) In this five-part series, I'll compare four popular Integrated Development Environments (IDEs): Visual Studio Code, JetBrains WebStorm, NeoVim, and Zed. Each offers unique advantages for different development workflows, but let's start…

umaranis.comComparing Modern IDEs: A Developer’s Guide (Part 1 – VS Code)In this five-part series, I'll compare four popular Integrated Development Environments (IDEs): Visual Studio Code, JetBrains WebStorm, NeoVim, and Zed. Each offers unique advantages for different development workflows, but let's start with what I consider the most versatile option. Why VS Code Should Be Your Default IDE Visual Studio Code (VS Code) stands out as an ideal choice for developers of all skill levels, from beginners to seasoned professionals.
Umar
@syedumar.bsky.social

Released svelte-lexical 0.6.2: diff in code block svelte-lexical 0.6.2 brings support for code diff inside a code block. You can get into the diff mode by using the markdown shortcut (```diff-javascript) followed by the space key. There is also support for creating tables using the markdown…

umaranis.comReleased svelte-lexical 0.6.2: diff in code blocksvelte-lexical 0.6.2 brings support for code diff inside a code block. You can get into the diff mode by using the markdown shortcut (```diff-javascript) followed by the space key. There is also support for creating tables using the markdown shortcut now. For instance, typing/pasting the following text and hitting the spacebar will convert it into a table. | Column 1 | Column 2 | Column 3 | | Row 1 | Data | More | | Row 2 | Data | More | There are a few more enhancements and bug fixes. Check out the release notes here.
Umar
@syedumar.bsky.social

Svelte: Maintaining state of hidden components In a complex UI, we often need to hide components—for example, switching between tabs, showing a modal, or collapsing a section. In Svelte, the natural way to conditionally render is with an if block: {#if showComponent} {/if} But there’s a…

umaranis.comSvelte: Maintaining state of hidden componentsIn a complex UI, we often need to hide components—for example, switching between tabs, showing a modal, or collapsing a section. In Svelte, the natural way to conditionally render is with an if block: {#if showComponent} <Child /> {/if} But there’s a catch: when a component is hidden with if, Svelte actually unmounts it from the DOM. That means the component is destroyed and its state is lost.
Umar
@syedumar.bsky.social

Released svelte-lexical 0.6.0 – Dark mode & Embed videos/tweets Release 0.6.0 has a bunch of exciting new features and several bug fixes. See the GitHub release page for the complete change log. Dark Mode Finally, we have support for dark mode out-of-the-box. There are three themes to choose from:…

umaranis.comReleased svelte-lexical 0.6.0 – Dark mode & Embed videos/tweetsRelease 0.6.0 has a bunch of exciting new features and several bug fixes. See the GitHub release page for the complete change log. Dark Mode Finally, we have support for dark mode out-of-the-box. There are three themes to choose from: default - light mode only light-dark - switch between light and dark mode based on system preferences system-light-dark - same as light-dark but also allows the user to manually override the mode Embed YouTube Video You can insert YouTube video in the editor. Embed a Tweet You can embed tweets and Bluesky posts.
Umar
@syedumar.bsky.social

Svelte Reactivity : Beyond the basics Svelte 5 introduces a powerful and refined reactivity system that gives developers greater control and clarity. In this post, we’ll explore the key concepts behind Svelte 5’s reactivity model, from derived values to tracking rules and best practices. $derived…

umaranis.comSvelte Reactivity : Beyond the basicsSvelte 5 introduces a powerful and refined reactivity system that gives developers greater control and clarity. In this post, we’ll explore the key concepts behind Svelte 5’s reactivity model, from derived values to tracking rules and best practices. $derived Is Only Evaluated If Needed In Svelte 5, $derived computations are lazy—they are only evaluated when their value is actually needed. This helps avoid unnecessary work and keeps your app fast.
Umar
@syedumar.bsky.social

Released svelte-lexical 0.5.3: new documentation website This release introduces a new documentation website developed using Startlight that is an Astro framework template for creating documentation sites. Breaking change breaking: refactor font size update methods New Features feat: export all…

umaranis.comReleased svelte-lexical 0.5.3: new documentation websiteThis release introduces a new documentation website developed using Startlight that is an Astro framework template for creating documentation sites. Breaking change breaking: refactor font size update methods New Features feat: export all $create..Node methods to programmatically create content Bug fixes bug: HR not selection outline not displayed in some demos bug: fix the shell styling for more examples…
Umar
@syedumar.bsky.social

svelte-lexical: Released version 0.5.1 We've just released v0.5.1 of svelte-lexical, featuring important bug fixes and a default theme included in the npm package. The default theme makes it more convenient to include the default theme for the editor and shell in your project. Instead of copying…

umaranis.comsvelte-lexical: Released version 0.5.1We've just released v0.5.1 of svelte-lexical, featuring important bug fixes and a default theme included in the npm package. The default theme makes it more convenient to include the default theme for the editor and shell in your project. Instead of copying files manually, a single import statement can bring in all the required styles. Here are the release notes:
Umar
@syedumar.bsky.social

Tree-Shaking CSS in a Vite project Optimizing code delivery is crucial when building modern web applications to ensure faster load times and better performance. One common optimization technique is tree-shaking, where unused code is eliminated from the final bundle. It is easier to achieve for…

umaranis.comTree-Shaking CSS in a Vite projectOptimizing code delivery is crucial when building modern web applications to ensure faster load times and better performance. One common optimization technique is tree-shaking, where unused code is eliminated from the final bundle. It is easier to achieve for code than for CSS styles. In this blog post, we’ll explore how tree-shaking of CSS works in a Vite using an example with two projects:
Umar
@syedumar.bsky.social

Icon libraries for developers Here are some of the largest icon libraries: Library Number of Icons License Description 1.3+ Million - PNG: free with attribution- SVG: 15$ / month for 100 icons Each Icon is available in 47 different styles 226K+ Open Source - Consolidate icons from other…

umaranis.comIcon libraries for developersHere are some of the largest icon libraries: Library Number of Icons License Description 1.3+ Million - PNG: free with attribution- SVG: 15$ / month for 100 icons Each Icon is available in 47 different styles 226K+ Open Source - Consolidate icons from other open-source libraries

You are up to date.