<?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: Muhammad Zeeshan</title>
    <description>The latest articles on DEV Community by Muhammad Zeeshan (@mzeeshanid).</description>
    <link>https://dev.to/mzeeshanid</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.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F3893817%2Faf8ea303-3ce7-4692-946e-d67a18466c67.png</url>
      <title>DEV Community: Muhammad Zeeshan</title>
      <link>https://dev.to/mzeeshanid</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://dev.to/feed/mzeeshanid"/>
    <language>en</language>
    <item>
      <title>Sample files — test files for bugs, not file sizes</title>
      <dc:creator>Muhammad Zeeshan</dc:creator>
      <pubDate>Tue, 18 Aug 2026 13:49:46 +0000</pubDate>
      <link>https://dev.to/mzeeshanid/sample-files-test-files-for-bugs-not-file-sizes-1f7a</link>
      <guid>https://dev.to/mzeeshanid/sample-files-test-files-for-bugs-not-file-sizes-1f7a</guid>
      <description>&lt;p&gt;A while back I was working on a video player inside an app. Basic stuff. Pick a file, play it. It worked on every file I threw at it, so I shipped it.&lt;/p&gt;

&lt;p&gt;Few days later I received a bug report with screen recording. Black screen, audio playing fine, no video. The file was an MP4. My test file was also an MP4. Same extension, same container, completely different result.&lt;/p&gt;

&lt;p&gt;The difference was the codec inside. His file was HEVC. Mine was H.264. I never tested that because I never had a file to test it with.&lt;/p&gt;

&lt;p&gt;So I went looking for one.&lt;/p&gt;

&lt;h2&gt;
  
  
  What I found instead
&lt;/h2&gt;

&lt;p&gt;If you search for &lt;code&gt;sample video download&lt;/code&gt;, you land on sites like &lt;a href="https://file-examples.com/" rel="noopener noreferrer"&gt;file-examples.com&lt;/a&gt; or &lt;a href="https://filesamples.com/" rel="noopener noreferrer"&gt;filesamples.com&lt;/a&gt;. They are useful, and I have used them multiple times. But all the available variants are just size or resolution based:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;MP4 / SD / 1.26 MB&lt;/li&gt;
&lt;li&gt;MP4 / HD / 36.48 MB&lt;/li&gt;
&lt;li&gt;MP4 / 4K / 66.41 MB&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It answers two question: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;how big is the file?&lt;/li&gt;
&lt;li&gt;how crisp is it?&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Its perfectly fine if you are testing an upload limit or how it looks in a high resolution device.  It does not help at all when your player shows a black screen, because all provided files are of the same codec, the same frame rate, the same color tags. Downloading a bigger version of a file that already works tells you nothing new.&lt;/p&gt;

&lt;p&gt;I wanted the opposite. I did not care about size or resolution. I cared about what was inside.&lt;/p&gt;

&lt;h2&gt;
  
  
  So I built Sample Files
&lt;/h2&gt;

&lt;p&gt;&lt;a href="https://mzeeshan.me/tools/sample-files/" rel="noopener noreferrer"&gt;Sample Files&lt;/a&gt; is a small tool on my site that gives you ready made test files, grouped by the situation and use cases you are testing instead of by how many kilobytes they are.&lt;/p&gt;

&lt;p&gt;Sample file is not a file generator. You do not fill a form and press &lt;strong&gt;"Generate"&lt;/strong&gt;. Every file is already made, already checked, and sitting there waiting for you to download it. Open the format you need, read the short label on each file, grab the one that matches your case. Few variants have an &lt;em&gt;info&lt;/em&gt; icon that shows any additional information about the use case.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fa69h86etiqc7czq3hxko.png" class="article-body-image-wrapper"&gt;&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fa69h86etiqc7czq3hxko.png" alt="Sample Files showing variants for MP4" width="800" height="470"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Back to the video player. Under videos you get things like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;H.264 in MP4, the safe one that plays everywhere&lt;/li&gt;
&lt;li&gt;HEVC, with and without the hvc1 tag, which is the exact reason some files play on iOS and Mac and some do not&lt;/li&gt;
&lt;li&gt;AV1 and VP9, which QuickTime will politely refuse to open&lt;/li&gt;
&lt;li&gt;Variable frame rate files, which quietly break seeking and duration maths&lt;/li&gt;
&lt;li&gt;Different color space tags, so you can see if your player washes out the picture&lt;/li&gt;
&lt;li&gt;Files with chapter markers&lt;/li&gt;
&lt;li&gt;Files with two or three audio tracks, so you can build and test a track switcher&lt;/li&gt;
&lt;li&gt;Files with metadata embedded, and files with none at all&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Every one of those is a real bug I have either hit myself or watched someone else hit. That black screen I shipped? There is a file for it now.&lt;/p&gt;

&lt;h2&gt;
  
  
  55+ formats, not just video
&lt;/h2&gt;

&lt;p&gt;MP4 is just where I started. The tool now covers 55+ formats, and a good number of them go far past the usual "here's a small one and a big one" treatment. &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;MOV has the same codec, frame rate and tagging depth as MP4.&lt;/li&gt;
&lt;li&gt;RTF has files written by five different editors, plus spec version and encoding variants. &lt;/li&gt;
&lt;li&gt;ZIP splits across compression methods, encryption types, Zip64, non-Latin filenames and a few deliberately broken archives.&lt;/li&gt;
&lt;li&gt;TAR.GZ covers the old tar flavors, sparse files and path traversal cases. &lt;/li&gt;
&lt;li&gt;PNG with its filter methods.&lt;/li&gt;
&lt;li&gt;TIFF with its compression and layout variants&lt;/li&gt;
&lt;li&gt;FLAC and Opus for audio, and CSV with the delimiter, encoding and quoting messes that wreck importers.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you work with any of those, there is more waiting for you than a size list.&lt;/p&gt;

&lt;h2&gt;
  
  
  Go break something
&lt;/h2&gt;

&lt;p&gt;It is free, there is no signup, and you download only the file you need instead of a giant bundle.&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://mzeeshan.me/tools/sample-files" rel="noopener noreferrer"&gt;mzeeshan.me/tools/sample-files&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;I am still adding formats and variants, so if you have hit a file that broke your app in a strange way, fill out the form on the page. If its a case that is beneficial for other users in general its exactly the kind of case I want to add next. Odds are good someone else has the same black screen sitting in their bug tracker right now.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqcxzpm36ab3k9t2v2d5e.png" class="article-body-image-wrapper"&gt;&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.us-east-2.amazonaws.com%2Fuploads%2Farticles%2Fqcxzpm36ab3k9t2v2d5e.png" alt="Form for adding new formats and variants" width="800" height="334"&gt;&lt;/a&gt;&lt;/p&gt;

</description>
      <category>samplefiles</category>
      <category>webdev</category>
      <category>testing</category>
      <category>tooling</category>
    </item>
    <item>
      <title>Stop Using a Plain Image Resizer for Your App Icons — Here's What to Do Instead</title>
      <dc:creator>Muhammad Zeeshan</dc:creator>
      <pubDate>Thu, 23 Apr 2026 10:27:50 +0000</pubDate>
      <link>https://dev.to/mzeeshanid/stop-using-a-plain-image-resizer-for-your-app-icons-heres-what-to-do-instead-27eg</link>
      <guid>https://dev.to/mzeeshanid/stop-using-a-plain-image-resizer-for-your-app-icons-heres-what-to-do-instead-27eg</guid>
      <description>&lt;p&gt;Most "app icon generators" online are just glorified image resizers. You drop in a 1024×1024 PNG, they spit out smaller versions of the same file. That's it.&lt;/p&gt;

&lt;p&gt;That works fine if your icon is already fully designed. But what if you're in the middle of building an MVP and just need &lt;em&gt;something&lt;/em&gt; that looks like a real app?&lt;/p&gt;

&lt;h2&gt;
  
  
  The problem with placeholder icons
&lt;/h2&gt;

&lt;p&gt;When you create a new iOS or Android project, the default placeholder is a gray grid. It's immediately recognizable as "this app is not finished." If you're demoing to a client, a stakeholder, or running a TestFlight build — that gray grid signals &lt;em&gt;unpolished&lt;/em&gt; before anyone taps a single screen.&lt;/p&gt;

&lt;p&gt;A real icon takes 5 minutes to set up. There's no reason to ship without one.&lt;/p&gt;

&lt;h2&gt;
  
  
  What your icon actually needs to output
&lt;/h2&gt;

&lt;p&gt;iOS and Android have strict requirements, and they differ from each other.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;iOS&lt;/strong&gt; expects an &lt;code&gt;AppIcon.appiconset&lt;/code&gt; folder with a &lt;code&gt;Contents.json&lt;/code&gt; manifest so Xcode knows which file maps to which context. Sizes range from 20pt all the way to 1024pt, at @1x, @2x, and @3x scale.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Android&lt;/strong&gt; uses adaptive icons — a foreground layer and a background layer rendered separately, so the system can apply its own mask (circle, squircle, rounded square, etc.) depending on the device manufacturer. You also need:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Legacy icons for API ≤ 25&lt;/li&gt;
&lt;li&gt;Round icons for API 25&lt;/li&gt;
&lt;li&gt;A 512×512 Play Store asset&lt;/li&gt;
&lt;li&gt;Monochrome variant for Android 13+ themed icons&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;A plain image resizer gives you none of this structure. You'd still need to manually rename files, arrange folders, and write the &lt;code&gt;Contents.json&lt;/code&gt;.&lt;/p&gt;

&lt;h2&gt;
  
  
  What actually helps
&lt;/h2&gt;

&lt;h3&gt;
  
  
  If you're inside the IDE
&lt;/h3&gt;

&lt;p&gt;Android Studio Panda 3 have built-in adaptive icon builder.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Android Studio's Image Asset Studio&lt;/strong&gt; covers the basics — foreground, background, monochrome, legacy, and round variants from a single dialog. Access it via right-click on &lt;code&gt;res/&lt;/code&gt; → &lt;strong&gt;New → Image Asset&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;&lt;a href="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%2Fuploads%2Farticles%2Fc0q5edwoxfo8vlge29g9.png" class="article-body-image-wrapper"&gt;&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%2Fuploads%2Farticles%2Fc0q5edwoxfo8vlge29g9.png" alt="Locating Image Asset Creation Dialog Option" width="800" height="417"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="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%2Fuploads%2Farticles%2Fhp9ykzes9vzf883nmmfi.png" class="article-body-image-wrapper"&gt;&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%2Fuploads%2Farticles%2Fhp9ykzes9vzf883nmmfi.png" alt="Image Asset Creation Dialog" width="800" height="528"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;But it has few limitations: &lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The built-in clip art library is limited &lt;/li&gt;
&lt;li&gt;There's no text styling (bold, italic, regular)&lt;/li&gt;
&lt;li&gt;The UI can feel clunky for anyone who just wants a quick, clean result. &lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;My tool addresses all of this — you get access to the full &lt;strong&gt;React Icons library&lt;/strong&gt; (thousands of icons across Font Awesome, Material Design, Remix, and more), proper text styling options, a simpler interface, and a live device preview that shows your icon across all Android shape variants before you download anything.&lt;/p&gt;

&lt;p&gt;Its a free browser-based tool that goes further than just resizing.&lt;/p&gt;

&lt;p&gt;&lt;a href="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%2Fuploads%2Farticles%2Fzdnkr10setgx2l0lsr93.png" class="article-body-image-wrapper"&gt;&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%2Fuploads%2Farticles%2Fzdnkr10setgx2l0lsr93.png" alt="iOS app icon generation options" width="800" height="552"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="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%2Fuploads%2Farticles%2F0rxb5quo9134j0m3mz1e.png" class="article-body-image-wrapper"&gt;&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%2Fuploads%2Farticles%2F0rxb5quo9134j0m3mz1e.png" alt="Android app icon generation options" width="800" height="606"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;You can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Layer assets&lt;/strong&gt; — choose a foreground (image, clip art from thousands of React Icons, or styled text) over a custom background color or image&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Preview in context&lt;/strong&gt; — see your icon live in real iPhone and Android device frames across 8 real-world contexts: home screen, spotlight, settings, App Store, notifications, and more&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Download a ready-to-use ZIP&lt;/strong&gt; — with the correct Xcode &lt;code&gt;AppIcon.appiconset&lt;/code&gt; folder structure and Android &lt;code&gt;mipmap&lt;/code&gt; folders, ready to drop straight into your project&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It's especially useful during active development because the assets are &lt;strong&gt;replaceable&lt;/strong&gt; — swap out the foreground or background anytime as your branding evolves, without starting from scratch.&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://mzeeshan.me/tools/app-icon-generator" rel="noopener noreferrer"&gt;mzeeshan.me/tools/app-icon-generator&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  The 2-minute MVP icon workflow
&lt;/h2&gt;

&lt;ol&gt;
&lt;li&gt;Pick any icon from the built-in React Icons library — or upload your own image or logo&lt;/li&gt;
&lt;li&gt;Set a background color that matches your app's brand&lt;/li&gt;
&lt;li&gt;Preview it on a home screen and adjust until it reads clearly at small sizes&lt;/li&gt;
&lt;li&gt;Download the ZIP and drop the folders directly into Xcode or Android Studio&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;Your app won't look &lt;em&gt;finished&lt;/em&gt;. But it'll look &lt;em&gt;intentional&lt;/em&gt; — which is all you need for early builds, client demos, and internal testing.&lt;/p&gt;

&lt;h2&gt;
  
  
  Quick reference: what each platform needs
&lt;/h2&gt;

&lt;div class="table-wrapper-paragraph"&gt;&lt;table&gt;
&lt;thead&gt;
&lt;tr&gt;
&lt;th&gt;Asset&lt;/th&gt;
&lt;th&gt;iOS&lt;/th&gt;
&lt;th&gt;Android&lt;/th&gt;
&lt;/tr&gt;
&lt;/thead&gt;
&lt;tbody&gt;
&lt;tr&gt;
&lt;td&gt;Source size&lt;/td&gt;
&lt;td&gt;1024×1024 PNG&lt;/td&gt;
&lt;td&gt;512×512 PNG (Play Store)&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Output format&lt;/td&gt;
&lt;td&gt;AppIcon.appiconset + Contents.json&lt;/td&gt;
&lt;td&gt;mipmap-mdpi through mipmap-xxxhdpi&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Adaptive layers&lt;/td&gt;
&lt;td&gt;✗&lt;/td&gt;
&lt;td&gt;✓ Foreground + Background&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Monochrome&lt;/td&gt;
&lt;td&gt;✗&lt;/td&gt;
&lt;td&gt;✓ Android 13+&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Legacy fallback&lt;/td&gt;
&lt;td&gt;✗&lt;/td&gt;
&lt;td&gt;✓ API ≤ 25&lt;/td&gt;
&lt;/tr&gt;
&lt;tr&gt;
&lt;td&gt;Round icon&lt;/td&gt;
&lt;td&gt;✗&lt;/td&gt;
&lt;td&gt;✓ API 25&lt;/td&gt;
&lt;/tr&gt;
&lt;/tbody&gt;
&lt;/table&gt;&lt;/div&gt;




&lt;p&gt;The gray grid is a 5-minute problem. No reason to leave it there.&lt;/p&gt;

&lt;p&gt;&lt;em&gt;Works for native iOS, Android, React Native, and Flutter projects.&lt;/em&gt;&lt;/p&gt;

</description>
      <category>ios</category>
      <category>android</category>
      <category>reactnative</category>
      <category>flutter</category>
    </item>
  </channel>
</rss>
