DEV Community: Sana Mumtaz

Helpful & Daily-Use Websites for Developers

Sana Mumtaz — Thu, 26 Feb 2026 15:45:54 +0000

As developers, we end up bookmarking a bunch of random tools that quietly save us hours every week. Here's a short, practical list of websites I actually use in day-to-day dev work — no fluff, just useful stuff.

🌐 Free Public APIs - APIs for side projects & experiments

👉 https://www.freepublicapis.com/

When you're building demos, learning a new framework, or testing API integrations:

Find free APIs by category (weather, crypto, movies, etc.)
Great for side projects and mock data
Saves you from spinning up fake backends

🎨 Carbon - Pretty code snippets for sharing

👉 https://carbon.now.sh

Turn ugly screenshots of code into beautiful ones. Perfect for:

Documentation
Blog posts
Slides
X/LinkedIn flexing

You paste code → pick a theme → export image → look 10x more professional.

🖼️ Favicon.io - Generate favicons in seconds

👉 https://favicon.io

Favicons are one of those things you always forget until the very end. This site lets you:

Generate favicons from text, emojis, or images
Download all required sizes
Drop them straight into your project

No more "why is the default browser icon showing?" moments.

📁 Sample Files - Test files for dev & QA

👉 https://www.mzeeshan.me/samplefiles

Need a random PDF, image, video, or large file for testing uploads, previews, or download flows? This site has:

Different file formats
Different sizes
One-click downloads

Extremely handy for frontend testing and QA scenarios.

🔧 Uiverse - Ready-to-use UI components

👉 https://uiverse.io

A community-driven collection of buttons, toggles, cards, loaders, and more. Great when:

You want quick UI inspiration while shaping product experiences
You need a component fast and don't want to design from scratch
You're prototyping and don't care about pixel perfection (yet)

All components are open-source and published under the MIT License.

📚 DevDocs - All docs in one place

👉 https://devdocs.io

This is basically Google for documentation, but better:

Actively maintained, free, and open source
Offline support
Multiple libraries/frameworks in one UI

If you're tired of juggling 10 tabs for MDN, React docs, and Node docs - this one's a keeper.

🗺️ Roadmap.sh - Learning paths for developers

👉 https://roadmap.sh

If you ever feel lost about what to learn next, roadmap.sh is gold:

Clear learning roadmaps for frontend, backend, DevOps, AI, etc.
Great for juniors and seniors who want to fill knowledge gaps
Helps you structure learning instead of randomly hopping tutorials

Think of it as Google Maps for your dev career.

⭐ Honorable Mention: SVG Crop

👉 https://svgcrop.com

Simple but clutch tool:

Upload or paste an SVG
Automatically crop or trim empty space
Download or copy a clean, optimized SVG

A lifesaver when downloaded SVGs come with random whitespace.

Final Thoughts

None of these tools are "revolutionary", but together they remove small daily annoyances - and that's where real productivity gains come from.

If you've got similar low-key useful websites, drop them in the comments. I'm always down to steal good dev bookmarks 😄

Webpack Dev Server: Setting up proxy

Sana Mumtaz — Tue, 05 Oct 2021 05:46:13 +0000

In this article, I'll show you how to configure webpack-dev-server for proxying requests from React frontend to Node/Express backend.

Getting Started

I won't go into much details on how to set up React, Webpack and Babel. You can either create the project from scratch or you can do the following:

Configure Frontend

1- Use Create React App

Run create-react-app to create React frontend for your web app.

npx create-react-app my-app-name

2- Configure Webpack

Add webpack and its relevant packages to your project.

yarn add webpack webpack-cli webpack-dev-server --dev
yarn add html-webpack-plugin --dev

I'll be using yarn throughout this article
At the root of project folder, create file webpack.config.js. I won't go into details of the configuration as its very basic.

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        basicApp: {
            import: './src/index.js',
            filename: 'basicApp.js'
        }
    },
    output: {
        path: path.resolve(__dirname, 'build/static')
    },
    devServer: {
        port: 3000,
        hot: true,
        open: true,
    },
    resolve: {
        extensions: ['.jsx', '.js', '.json']
    },
    module: {
        rules: [
            {
                test: /\.(js)x?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: 'babel-loader'
                    }
                ]
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                test: /\.(?:ico|gif|png|jpg|jpeg)$/i,
                type: 'asset/resource'
            },
            {
                test: /\.(woff(2)?|eot|ttf|otf|svg|)$/,
                type: 'asset/inline'
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
}

And make the following change in the package.json:

"scripts": {
        "start": "webpack serve --mode development",
        "build": "webpack --mode production",
        ...
}

3- Configure Babel

Now before you try to run the app, configure Babel compiler. Install babel and relevant packages.

yarn add @babel/core @babel/preset-env @babel/preset-react babel-loader --dev
yarn add css-loader style-loader --dev

At root of project, create file .babelrc:

{
  "presets": [
    "@babel/preset-env",
    [
      "@babel/preset-react",
      {
        "runtime": "automatic"
      }
    ]
  ]
}

You have successfully configured the frontend of your app.

Configure Backend

Add Express to the project:

yarn add express

It's your choice whether you set up the backend separately or in the same directory. I set it up in the same dir. Create file backend/server.js at the root.

const express = require("express")
const path = require("path")
const app = express()

const DIST_DIR = path.join(__dirname, 'build/static')
const HTML_FILE = path.join(DIST_DIR, 'index.html')
app.use(express.static(DIST_DIR))
app.get('/', (req, res) => {
        res.sendFile(HTML_FILE)
})
app.get('/api/ping', (req, res) => {
        res.send('pong')
})

app.listen(5000)

In dev mode of this set up, frontend runs at localhost:3000 and backend runs at localhost:5000. Hence, you need to connect frontend to backend so that querying on locahost:3000/api/ping hits the backend localhost:5000/api/ping. For this you can configure proxy in webpack.config.js:

devServer: {
        ...
        proxy: {
           '/api': {
                target: 'http://localhost:3000',
                router: () => 'http://localhost:5000',
                logLevel: 'debug' /*optional*/
           }
        }
}

Now any request of form /api/** will be directed to port 5000.

Run the project

To view output of ping API call, you can make small edit to App.js:

import { useState } from "react";
import logo from "./logo.svg";
import "./App.css";

function App() {
  const [pingResponse, setPingResponse] = useState("");

  const pingBackend = () => {
    fetch("/api/ping", {
      method: "GET",
    })
      .then((response) =>
        response.text().then(function (text) {
          setPingResponse(text);
        })
      )
      .catch((err) => console.log(err));
  };

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <button onClick={pingBackend}>Ping Backend</button>
        {pingResponse && <p>Backend Responded with '{pingResponse}'</p>}
      </header>
    </div>
  );
}
export default App;

You can run the frontend and backend from two terminals. (Recommended: concurrently)

//in one terminal
yarn start
//in other terminal
yarn build //optional
node backend/server.js

We've successfully connected the frontend to backend. You can get the code from my GitHub.

sanamumtaz / react-webpack-backend-proxy

Configuring Webpack Dev Server to proxy request from React frontend to Node.js/Express backend.

Share your thoughts. Feedback's always welcome :)

Webpack Dev Server External Access - (Fix: Invalid Host Header)

Sana Mumtaz — Fri, 01 Oct 2021 22:21:58 +0000

While developing a React web app in local development mode, you may want to run the dev mode on mobile or quickly share the web app with another person via a public URL for your localhost (e.g. using ngrok). For security purposes, you cannot externally access your webpack-dev-server.

I faced this issue recently and, while I implemented the solution by reading the docs, I found that majority of the solutions in search results were obsolete.

Obsolete Solutions

No, making host: '0.0.0.0' won't work.
No, disableHostCheck won't work. It's deprecated.
No, public won't work. Deprecated option.
No, firewall won't work. Deprecated option.

So, how can you access your webpack-dev-server externally?

Solution:

✨It's all in the documentation.✨ It's so simple now that it made me feel dumb.

devServer: {
    allowedHosts: 'auto' | 'all' | Array[string]
}

Examples:

1. If you're in some hurry, or have no regard for security, or like to live on edge... you may set allowedHosts to 'all'. (Not recommended, though)
2. I use ngrok to make public URLs, hence I listed ngrok sub-domain as follows:

allowedHosts: ['.ngrok.io']

The takeaway from this was to, I guess, read latest docs for something that changes rapidly in documentation, instead of browsing search results.

Share your thoughts. Feedback's always welcome :)

Python - PDF to JPG & back Converter

Sana Mumtaz — Thu, 02 Sep 2021 20:49:23 +0000

Motivation

Quite often, I have to submit the same documents in either .pdf or .jpg/jpeg format. I used online conversion sites to convert between the two formats. Recently a concern had been lingering in my mind that why am I uploading my personal documents on clouds and shouldn't I just create a converter so that the process stays local on my device. Hence, I decided to make a program to do the conversions.

Steps I Took

- Step 1: Decide framework/language for development

I'd like to include this as a documented step :) The reason is short: I do web development in my day-to-day life, so I decided that coding this small program in Python will be refreshing.

- Step 2: Search for packages

You can either implement conversions on your own or you can look for packages that are well-maintained and have a good download count. I chose following packages for conversions:

pdf2image for PDF to JPG conversion.
img2pdf for JPG/JPEG to PDF conversion.

- Step 3: Make GUI

I used PAGE to build static GUI. It is a very simple and easy-to-use drag-and-drop GUI generator. I made two GUIs, one for the converter and the other for showing success message. You can also handle all in one.

Note: tkinter applications look different on different OS. I use Windows. If you want to make application same across all platforms, you can add conditional layouts.

After generating scripts from PAGE, I made the GUI dynamic on the basis of conversion_mode:

If the conversion_mode == 'jpg', then set text accordingly and show entry field for inputting name of output PDF file.
Similarly, if the conversion_mode == 'pdf', then make relevant textual changes. No need to add entry field as the output JPGs will have the PDF's name followed by index.

- Step 4: Upload Files

I used tkinter's filedialog module to upload files. I set initialdir to the directory where script is placed. curr_dir = os.getcwd()

Upload PDF: Since single PDF file will be uploaded, hence filedialog.askopenfilename is used.

filedialog.askopenfilename(initialdir=curr_dir, title="Select PDF",
                                   filetypes=[("PDF File", "*.pdf")])

Upload JPGs: Multiple JPG files can be uploaded to create a PDF file, hence filedialog.askopenfilenames is used.

filedialog.askopenfilenames(initialdir=curr_dir, title="Select JPG(s)",
            filetypes=[("JPG File", "*.jpeg *.jpg")

- Step 5: Convert JPG to PDF:

To convert JPG/JPEG files to a single PDF, simply provide file_paths, which is a list of image file paths, to img2pdf's convert function.

import img2pdf

with open(name+".pdf", "wb+") as file:
        file.write(img2pdf.convert(*file_paths))

name is the output PDF name provided by the user.

- Step 6: Convert PDF to JPG:

To use pdf2image, firstly download poppler on your system. (Instructions). Since I'm a Windows user, I downloaded poppler and placed the bin/ folder in the same directory as the script.
poppler_path=r"./bin" if (sys.platform == "win32" or sys.platform == "cygwin") else None
Image files created are stored in output_folder. To avoid out-of-memory error, I set paths_only=True so that convert_from_path(...) doesn't need to return PIL Image objects.

from pdf2image import convert_from_path
from pdf2image.exceptions import (
    PDFInfoNotInstalledError,
    PDFPageCountError,
    PDFSyntaxError
)

convert_from_path(
        file_path,
        output_folder=output_folder_path,
        output_file=output_folder_name,
        fmt="jpg",
        paths_only=True,
        poppler_path=r"./bin" if (sys.platform == "win32" or sys.platform == "cygwin") else None
)

You can run the function in chunks (see) if the PDF file has hundreds of pages or you want to work on Image object and are concerned about running into OOM error.

After conversion, I shift the user to different interface where success message is displayed.

Get the full implementation from my GitHub.

So this is how I made a PDF ⇌ JPG converter that fulfills my requirements and now I don't have to worry about security/privacy.

Share your thoughts. Feedback's always welcome :)

React Virtualization - react-window vs react-virtuoso

Sana Mumtaz — Thu, 26 Aug 2021 08:50:25 +0000

Multiple libraries are available for implementing virtualization in React. react-window is the widely used library but recently I used react-virtuoso in a project. Today I'll compare react-window, react-virtualized, and react-virtuoso based on my experience.

Virtualization

Firstly, I'll briefly explain virtualization/windowing. Suppose you have a large set of data that you render on the UI.

Thousands of items will be rendered on the DOM, even though only a few will be visible on the viewport. Moreover, the items/components, virtual DOM, and real DOM live in memory. Hence, this will cost you both performance and memory.
Inspecting a DOM with thousands of nodes will cost you peace of mind. :)

The efficient approach will be to create and render only those items that are visible on viewport. This is where virtualization comes in. It is the technique of creating a window in which components mount/unmount depending upon their visibility on viewport, as the user scrolls.

1- `react-virtualized`

react-virtualized is the elder and bulkier brother (same author) of react-window. It contains more components, features, and has a much larger package size compared to the lighter react-window. The package comes with 2D components, features like infinite scroll, autosizer, etc.

One must analyze one's project requirements to determine whether they need to use the bulky react-virtualized for the features it provides or react-window will suffice. Since I didn't need so much functionality in my virtualized lists, I initially opted for react-window.

Package size: 27.4 KB

2- `react-window`

As the author has mentioned, react-window is a complete rewrite of react-virtualized and the focus was to make the package smaller and faster. react-window is light-weight and comes with basic List and Grid components. It does lack some features, for example:

Infinite scroll i.e. lazy loading is not supported. But you can use react-window-infinite-loader package with it to achieve the result. Code Sandbox Demo
Autosizer can be implemented using react-virtualized-auto-sizer package. Autosizer automatically adjusts the width and height of list item, letting it fill the available space without providing explicit dimensions. Code Sandbox Demo

In order to render items with variable sizes in react-window, you'll need to write a bunch of code, which is a hassle. The issue is that the item is not rendered yet, so you can't really go to the DOM to get the actual height/width. Hence for dimension calculation, you'd need to temporarily render item in a way that is not visible to the user. See this Code Sandbox example.

Considering you have implemented variable size lists, what if you now have a use case in which the item size can grow after render. There is no such support in react-window and the item content will overflow.

Package size: 6.2 KB

3- `react-virtuoso`

react-virtuoso is a relatively new package for virtualization, published first two years ago. It comes with all the necessary features and support that one might eventually require in a developing project.

No need to configure item size, optional prop.
Available features like infinite scroll, sticky headers, pinned items, window resize observer, autosizer, etc. (See docs)
You don't need to handle anything regarding changing item size.

Since I needed to render items with textarea that could expand in size, I couldn't continue using react-window. Implementation using react-virtuoso was super easy. Here is a demo example:

Package size: 15.7 KB

Conclusion

Based on my experience, I'll compile the comparison as follows:
1- Package Type: Both react-virtualized and react-window are JavaScript packages, with type declaration packages available. react-virtuoso is a TypeScript package.
2- Package Size: react-window is the smallest package amongst the three, but react-virtuoso has a good size considering the features it provides.
3- Features: react-virtuoso comes with all the necessary features that you can possibly require in a developing project. But in react-window, you'll have to add packages to gain the functionalities.
4- Coding/Configuration: You have to write more code in react-window, providing itemSize, style, etc. react-virtuoso requires a very few props and has a simpler configuration.
5- Documentation: I find the documentation of react-virtuoso the best. It is well-structured and detailed. Proper example code is provided, compared to react-window where comments tell you to implement calculation on your own.

In conclusion, I will say that you should first analyze your project requirements and then decide which package fits best. Personally, I use react-virtuoso in my projects and I recommend others to try the package to see its advantages.

DEV Community: Sana Mumtaz

Helpful & Daily-Use Websites for Developers

🌐 Free Public APIs - APIs for side projects & experiments

🎨 Carbon - Pretty code snippets for sharing

🖼️ Favicon.io - Generate favicons in seconds

📁 Sample Files - Test files for dev & QA

🔧 Uiverse - Ready-to-use UI components

📚 DevDocs - All docs in one place

🗺️ Roadmap.sh - Learning paths for developers

⭐ Honorable Mention: SVG Crop

Final Thoughts

Webpack Dev Server: Setting up proxy

Getting Started

Configure Frontend

1- Use Create React App

2- Configure Webpack

3- Configure Babel

Configure Backend

Run the project

sanamumtaz / react-webpack-backend-proxy

Configuring Webpack Dev Server to proxy request from React frontend to Node.js/Express backend.

Webpack Dev Server External Access - (Fix: Invalid Host Header)

Obsolete Solutions

Solution:

Examples:

Python - PDF to JPG & back Converter

Motivation

Steps I Took

- Step 1: Decide framework/language for development

- Step 2: Search for packages

- Step 3: Make GUI

- Step 4: Upload Files

- Step 5: Convert JPG to PDF:

- Step 6: Convert PDF to JPG:

React Virtualization - react-window vs react-virtuoso

Virtualization

1- react-virtualized

2- react-window

3- react-virtuoso

Conclusion

1- `react-virtualized`

2- `react-window`

3- `react-virtuoso`