<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>DEV Community: Ali Torki</title>
    <description>The latest articles on DEV Community by Ali Torki (@alimaster).</description>
    <link>https://dev.to/alimaster</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F12003%2F04997340-b878-474a-97bb-8786e7decf6b.png</url>
      <title>DEV Community: Ali Torki</title>
      <link>https://dev.to/alimaster</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/alimaster"/>
    <language>en</language>
    <item>
      <title>Fast and efficient tool to reduce node_modules size by up to 60%. Ideal for serverless, Docker, and deployment optimization.</title>
      <dc:creator>Ali Torki</dc:creator>
      <pubDate>Sat, 09 Aug 2025 09:48:26 +0000</pubDate>
      <link>https://dev.to/alimaster/fast-and-efficient-tool-to-reduce-nodemodules-size-by-up-to-60-ideal-for-serverless-docker-and-1opc</link>
      <guid>https://dev.to/alimaster/fast-and-efficient-tool-to-reduce-nodemodules-size-by-up-to-60-ideal-for-serverless-docker-and-1opc</guid>
      <description>&lt;p&gt;As JavaScript developers, we all know the notorious pain of the node_modules folder - it's become a gargantuan entity of its own. You clone a simple project, run npm install, and suddenly hundreds of megabytes are consumed. The irony? Most of these files are unnecessary bloat - tests, documentation, and configuration files that never see the light of production. Even with modern package managers like pnpm and Bun, while the situation has marginally improved compared to npm CLI, the fundamental problem persists.&lt;/p&gt;

&lt;p&gt;Today, I'm excited to introduce &lt;strong&gt;prune-mod&lt;/strong&gt; - a tool I developed to tackle this exact problem.&lt;/p&gt;

&lt;p&gt;Despite being an ultra-lightweight 8.3KB tool, prune-mod can reduce your node_modules size by up to 60% without compromising your application's functionality.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Key features that set this tool apart:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;• &lt;strong&gt;Intelligent runtime detection&lt;/strong&gt;: Automatically leverages Bun if available, boosting processing speed by up to 3x&lt;br&gt;
• &lt;strong&gt;Dry-run mode&lt;/strong&gt; for previewing changes before applying them&lt;br&gt;
• &lt;strong&gt;Safety-first approach&lt;/strong&gt;: Never removes critical files like package.json entry points&lt;br&gt;
• &lt;strong&gt;Seamless CI/CD and Docker integration&lt;/strong&gt; for optimizing image sizes&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Usage couldn't be simpler:&lt;/strong&gt;&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;npx @usex/prune-mod
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;&lt;strong&gt;This tool particularly shines in these scenarios:&lt;/strong&gt;&lt;/p&gt;

&lt;p&gt;• &lt;strong&gt;Serverless deployments&lt;/strong&gt; with strict size limitations (I personally faced this challenge on Cloudflare)&lt;br&gt;
• &lt;strong&gt;Docker containers&lt;/strong&gt; where you need faster uploads and pull times&lt;br&gt;
• &lt;strong&gt;Local development&lt;/strong&gt; when you need to reclaim precious disk space&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Real-world impact:&lt;/strong&gt; On a typical Next.js project, we've seen reductions from 487MB to 193MB - that's 60% smaller with 44% fewer files!&lt;/p&gt;

&lt;p&gt;The project is open source, and I welcome contributions, feedback, and suggestions from the community.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;GitHub:&lt;/strong&gt; &lt;a href="https://github.com/ali-master/prune-mod" rel="noopener noreferrer"&gt;https://github.com/ali-master/prune-mod&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;NPM:&lt;/strong&gt; &lt;a href="https://www.npmjs.com/package/@usex/prune-mod" rel="noopener noreferrer"&gt;https://www.npmjs.com/package/@usex/prune-mod&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I hope this tool proves as valuable to you as it has been for me, reducing daily development friction and accelerating your deployment cycles after every git push.&lt;/p&gt;

&lt;p&gt;Let's make our codebases leaner and our deployments faster together!&lt;/p&gt;

</description>
    </item>
    <item>
      <title>Fix the IOS 14 Keychain bug in Password fields</title>
      <dc:creator>Ali Torki</dc:creator>
      <pubDate>Mon, 18 Jan 2021 13:15:52 +0000</pubDate>
      <link>https://dev.to/alimaster/fix-the-ios-14-keychain-bug-in-password-fields-1e3k</link>
      <guid>https://dev.to/alimaster/fix-the-ios-14-keychain-bug-in-password-fields-1e3k</guid>
      <description>&lt;p&gt;Since Apple released the IOS &lt;code&gt;v14&lt;/code&gt;, The &lt;code&gt;Safari browser&lt;/code&gt; in all IOS devices have a problem with the Input type's &lt;code&gt;password&lt;/code&gt; which the application crashes when you click on the Password Input. The problem is The &lt;code&gt;Keychain&lt;/code&gt; has a critical problem and wants to autofill a user match but will crashes while loading the matches, So I tried so many ways to fix this issue, and I found these solutions that documented in this repository:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://github.com/ali-master/ios-password-field-crashes" rel="noopener noreferrer"&gt;Github Repository with Examples&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;If you have any other solution, please contribute to the repo to tell other programmers how they can fix this huge problem.&lt;/p&gt;

</description>
      <category>ios</category>
      <category>html</category>
      <category>web</category>
    </item>
    <item>
      <title>PWA Badge</title>
      <dc:creator>Ali Torki</dc:creator>
      <pubDate>Wed, 13 Jan 2021 10:30:27 +0000</pubDate>
      <link>https://dev.to/alimaster/pwa-badge-1fc3</link>
      <guid>https://dev.to/alimaster/pwa-badge-1fc3</guid>
      <description>&lt;p&gt;The App Badge API allows installed web apps to set an application-wide badge,&lt;br&gt;
shown in an operating-system-specific place associated with the application&lt;br&gt;
(such as the shelf or home screen).&lt;/p&gt;

&lt;p&gt;Badges tend to be more user-friendly than notifications and can be updated with&lt;br&gt;
a much higher frequency since they don't interrupt the user. And, because they&lt;br&gt;
don't interrupt the user, they don't need the user's permission.&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;Keep in mind that to display the Badge count, Your &lt;strong&gt;PWA&lt;/strong&gt; application should be installed on your device.&lt;/p&gt;
&lt;/blockquote&gt;
&lt;h3&gt;
  
  
  Possible use cases
&lt;/h3&gt;

&lt;p&gt;Examples of sites that may use this Library includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Chat, email, and social apps, to signal that new messages have arrived, or to
show the number of unread items.&lt;/li&gt;
&lt;li&gt;Productivity apps, to signal that a long-running background task (such as
rendering an image or video) has completed.&lt;/li&gt;
&lt;li&gt;Games, to signal that a player action is required (e.g., in Chess, when it is
the player's turn).&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  Usage
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight shell"&gt;&lt;code&gt;npm &lt;span class="nb"&gt;install&lt;/span&gt; &lt;span class="nt"&gt;--save&lt;/span&gt; pwa-badge
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h3&gt;
  
  
  The Badge API consists of five methods:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;code&gt;isSupported()&lt;/code&gt; Check if the User's browser supports the Feature,
and returns a &lt;code&gt;boolean&lt;/code&gt; value that represents the Status of supporting.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;syncSetBadge(unreadCount)&lt;/code&gt; Removes app's badge &lt;strong&gt;Synchronously&lt;/strong&gt;. If a value is provided, set the badge to the provided value otherwise, display a plain white dot (or other flags as appropriate to the platform). Setting number to 0
is the same as calling &lt;code&gt;syncClearBadge()&lt;/code&gt; or &lt;code&gt;asyncClearBadge()&lt;/code&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;syncClearBadge()&lt;/code&gt; Removes app's badge &lt;strong&gt;Synchronously&lt;/strong&gt;.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;asyncSetBadge(unreadCount)&lt;/code&gt; This API is the same as &lt;code&gt;syncSetBadge()&lt;/code&gt; but
returns an empty &lt;code&gt;Promise&lt;/code&gt; for error handling.&lt;/li&gt;
&lt;li&gt;
&lt;code&gt;asyncClearBadge()&lt;/code&gt; Removes app's badge &lt;strong&gt;Asynchronously&lt;/strong&gt; and returns an
empty &lt;code&gt;Promise&lt;/code&gt; for error handling.&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  &lt;code&gt;Sync&lt;/code&gt; Set and Clear Badge
&lt;/h3&gt;


&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;PWABadge&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pwa-badge&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// Create an Instance&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;badge&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;PWABadge&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="c1"&gt;// Set Badge unreadCount&lt;/span&gt;
&lt;span class="nx"&gt;badge&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;syncSetBadge&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;);&lt;/span&gt;

&lt;span class="c1"&gt;// Clear Badge unreadCount&lt;/span&gt;
&lt;span class="nx"&gt;badge&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;syncClearBadge&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Result:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;MacOS
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2Flvkd2cohfu96wg6cthn0.png" alt="PWA Badge" width="800" height="168"&gt;
&lt;/li&gt;
&lt;li&gt;Windows:
&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fi%2F2godmabthgejrcxxiays.PNG" alt="PWA Badge" width="270" height="43"&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;h3&gt;
  
  
  &lt;code&gt;Async&lt;/code&gt; Set and Clear Badge
&lt;/h3&gt;

&lt;p&gt;&lt;code&gt;asyncSetBadge()&lt;/code&gt; and &lt;code&gt;asyncClearBadge()&lt;/code&gt; return empty &lt;code&gt;promises&lt;/code&gt; you can&lt;br&gt;
use for error handling.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;PWABadge&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pwa-badge&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// Create an Instance&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;badge&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;PWABadge&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="c1"&gt;// Set Badge unreadCount&lt;/span&gt;
&lt;span class="nx"&gt;badge&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;asyncSetBadge&lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="mi"&gt;1&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Badge count has shown as well&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// The Browser not supporting the Badge feature or something went wrong&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="c1"&gt;// Clear Badge unreadCount&lt;/span&gt;
&lt;span class="nx"&gt;badge&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;asyncClearBadge&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;then&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// Badge count has disappeared&lt;/span&gt;
  &lt;span class="p"&gt;})&lt;/span&gt;
  &lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="k"&gt;catch&lt;/span&gt;&lt;span class="p"&gt;((&lt;/span&gt;&lt;span class="nx"&gt;e&lt;/span&gt;&lt;span class="p"&gt;)&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="c1"&gt;// The Browser not supporting the Badge feature or something went wrong&lt;/span&gt;
  &lt;span class="p"&gt;});&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;h3&gt;
  
  
  Check Browser supports the Badge API
&lt;/h3&gt;

&lt;p&gt;TL;DR &lt;code&gt;isSupported()&lt;/code&gt; method function is util for informing your users that&lt;br&gt;
this feature supports by their &lt;code&gt;Browser&lt;/code&gt; or &lt;code&gt;OS&lt;/code&gt; and the &lt;code&gt;pwa-badge&lt;/code&gt; library&lt;br&gt;
&lt;code&gt;set&lt;/code&gt; and &lt;code&gt;clear&lt;/code&gt; the Badge count safely, and you can avoid using&lt;br&gt;
&lt;code&gt;isSupported()&lt;/code&gt; before calling the &lt;code&gt;set&lt;/code&gt; or &lt;code&gt;clear&lt;/code&gt; methods.&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight javascript"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="nx"&gt;PWABadge&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;pwa-badge&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="c1"&gt;// Create an Instance&lt;/span&gt;
&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;badge&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="k"&gt;new&lt;/span&gt; &lt;span class="nc"&gt;PWABadge&lt;/span&gt;&lt;span class="p"&gt;();&lt;/span&gt;

&lt;span class="k"&gt;if &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;&lt;span class="nx"&gt;badge&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;isSupported&lt;/span&gt;&lt;span class="p"&gt;())&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Hoora!, Supports the Badge feature&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;else&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="c1"&gt;// Does not supports&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;For supporting me, Please click on the Star button on Github and Share this post and finally send the Repo to your friends.&lt;/p&gt;

&lt;p&gt;Github Repo:&lt;br&gt;
&lt;a href="https://github.com/ali-master/pwa-badge" rel="noopener noreferrer"&gt;https://github.com/ali-master/pwa-badge&lt;/a&gt;&lt;/p&gt;

</description>
      <category>pwa</category>
      <category>javascript</category>
      <category>react</category>
      <category>vue</category>
    </item>
  </channel>
</rss>
